bn-q-icon/components/en-from/en-head/en-head-img.vue

<template>
	<view>
		<view class="box" @click="isShowPop(true)">
			<image class="left" :src="headImg" mode="aspectFill"></image>
			<view class="right">
				<text>{{label}}</text>
        <image src="@/static/img/toRight.png" mode=""></image>
			</view>
		</view>
    <uni-popup ref="popup" type="bottom">
      <view class="popup-block">
        <view class="popup-row" @click="editImg(1)">拍照</view>
        <view class="popup-row" @click="editImg(2)">从手机里面选择</view>
        <view class="popup-row" @click="isShowPop(false)">取消</view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
	import { upLoadingFileOss } from "@/common/js/upLoadingFile";
	import tools from '@/common/js/tools.js'

	export default {
		props:{
			label: {
			  type: String,
			  default: '标题'
			},
			value:{
				type: String,
				default: ''
			},
		},
		data(){
			return{
			  headImg:''
      }
		},
    watch:{
		  'headImg':function (){
		    this.$emit('input',this.headImg)
      }
    },
    mounted() {
		  this.headImg=this.value
    },
    methods:{
			isShowPop(type){

				if(tools.getPlatform()==='H5'){
					this.editImg(1)
				}else{
				  if(type){
            this.$refs.popup.open("bottom")
          }else {
            this.$refs.popup.close()
          }
				}
			},
			editImg(type){
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed", "camera"],
					sourceType: [type===1?"album":"camera"],
					success:(res)=>{
						if (res.errMsg === "chooseImage:ok"){
							tools.showLoading()
							this.upLoadOss(res.tempFiles[0].path)
						}else{
							tools.error('头像选择失败')
						}
					}
				})
			},
			upLoadOss(path){
				 upLoadingFileOss(path).then((res)=>{
					 if(res){
						 this.headImg = res
					 }else{
						 tools.error('头像上传失败')
					 }
					 tools.hideLoading()
				 }).catch(()=>{
					 tools.hideLoading()
				 })
				 this.$refs.popup.close()
			},
		},
	}
</script>

<style scoped lang="scss">
.popup-block {
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  overflow: hidden;
  background-color: #f5f5f5;
  .popup-row {
    height: 100rpx;
    background-color: #fff;
    text-align: center;
    line-height: 100rpx;
    border-bottom: 2rpx solid #f5f5f5;
    &:nth-child(2) {
      margin-bottom: 20rpx;
    }
    &:last-child {
      height: 112rpx;
      border: none;
      line-height: 112rpx;
    }
    &:active {
      background-color: rgb(244, 244, 244);
    }
  }
}
	.box{
		width: 100%;
		height: 152rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		image{
			width: 96rpx;
			height: 96rpx;
			border-radius: 50%;
		}
		.left{
			font-size: 32rpx;
		}
		.right{
			display: flex;
			align-items: center;
			text{
				font-size: 32rpx;
				color: #333;
			}
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.pop-box{
		height: 130rpx;
		background-color: #fff;
		text-align: center;
		line-height: 130rpx;
		font-size: 30rpx;
	}
</style>