medicine_app/components/addCerInfo.vue

<template>
	<u-popup key="4" :show="showSubmitInfoBlank" :round="10" @close="closeManager">
		<view class="" style="height:30vh; overflow-y:scroll; padding: 20rpx;">
			<h3 style="margin-bottom: 20rpx; text-align: center;">
				完善资料
			</h3>
			<view class="">
				<uni-forms :modelValue="submitInfo" :rules="submitInfoRules" ref="submitInfoForm">
					<uni-forms-item label="姓 名" name="name" v-if="submitInfo.opName == 'name'">
						<uni-easyinput type="text" v-model="submitInfo.name" placeholder="请输入姓名" />
					</uni-forms-item>				
					<uni-forms-item label="证件照" name="photo" v-if="submitInfo.opName == 'photo'">
						<view class="flex_box align-items_box">
							<view class="flex_box align-items_box">								
								<image @click="preveImg(submitInfo.photo)" v-if="submitInfo.photo && submitInfo.photo != '' && submitInfo.photo != null" 
								:src="submitInfo.photo" mode="widthFix" style="width:100rpx; height:140rpx;"></image>
								<text v-else>请上传</text>
								<input v-show="false" type="text" v-model="submitInfo.photo" />
							</view>
							<view class="flex_box align-items_box" style="padding-left: 20rpx;">
								<text class="small_btn border_radius_10" 
								@click="choosePicBtn" style="display: block; height: 30px;">{{submitInfo.photo && submitInfo.photo != '' ? '修改照片':'选择照片'}}</text>
							</view>
						</view>							
					</uni-forms-item>
				</uni-forms>
				<view class="btn_box"><button @click="submitForm">保 存</button></view>
				<!-- <view class="tips">
					<text>注：姓名处，请填写您本人的真实姓名，照片出推荐上传蓝底证件存照，将作为证书上照片使用，无其他用途，一经生成无法更改。</text>
				</view> -->
				<!-- <button @click="submitForm">提 交</button> -->
			</view>
	
			<qf-image-cropper ref="qfImageCropper" v-if="showCropper" :width="245" :height="280" :radius="0"
				@crop="handleCrop">
				    <template slot="slotNamess" slot-scope="slotProps"><text @click="cancleChoose" class="cancelBtn small_btn border_radius_10">取消</text></template>
				</qf-image-cropper>
		</view>
	</u-popup>
</template>

<script>
	import permission from "@/js_sdk/wa-permission/permission.js"
		import $http from '@/config/requestConfig.js';
	// 裁切工具
	import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
	export default {
		props:['submitInfo'],
		name:"addCerInfo",
		data() {
			return {
				showSubmitInfoBlank:true,
				showCropper:false,
				submitInfoRules:{
					// name: {
					// 	rules: [{
					// 			required: true,
					// 			errorMessage: '请输入实名制姓名',
					// 		}

					// 	]
					// },
					// img: {
					// 	rules: [{
					// 			required: true,
					// 			errorMessage: '请上传证书所用的证件照片',
					// 		}
					
					// 	]
					// }
				}
			};
		},methods:{
			closeManager(){
				this.$emit('close')				
			},
			submitForm(){
				// this.$emit('submit')
				// this.$refs.submitInfoForm.validate().then(res => {	
					$http.request({
								url: "common/user/updateUser",
								method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
								data: {
									"id": this.submitInfo.userId,
									'name':this.submitInfo.name,
									'photo':this.submitInfo.photo
								},
								header: { //默认 无 说明：请求头
									'Content-Type': 'application/json'
								},
							})
							.then(res => {
								uni.showToast({
									title: '操作成功',
									icon: 'success'
								})
								this.closeManager('success')
							}).catch(e => {
						// console.log('表单错误信息：', err);
						uni.showToast({
							title: e.errMsg,
							icon: 'none'
						})
					});
				// }).catch(err => {
				// 	console.log('表单错误信息：', err);
				// 	uni.showToast({
				// 		title: '页面有未填写的内容哦',
				// 		icon: 'none'
				// 	})
				// })
			},
			async choosePicBtn() {
				let ss = await this.checkPermision()
				console.log('进入选择照片了吗');
				this.showCropper = true
				this.$refs.qfImageCropper.chooseImage({
					sourceType: ['album']
				});
			},
			async checkPermision() {
				var result = await permission.premissionCheck("CAMERA_EXTERNAL_STORAGE")
				if (result != 1) {
					return false
				}
			},
			preveImg(url){
				console.log('dianjile fangda tu');
				uni.previewImage({
				    urls: [url],
				    current: 0
				});
			},
			async handleCrop(e) {
				var url = undefined
				// uni.previewImage({
				//     urls: [e.tempFilePath],
				//     current: 0
				// });
				console.log('截取的图片', e.tempFilePath);				
				var dd = await this.uploadImg(e)
				// var ss = JSON.stringify(dd)     // 转成字符串
				var cc = JSON.parse(dd.data)
				if(cc && cc.url){
					console.log('**********************',cc);
					this.showCropper = false	
					this.submitInfo.photo = cc.url
				}
				console.log('外面看的',this.submitInfo.photo, cc.url);
			},
			
			 uploadImg(e) {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '正在上传'
					})
					uni.uploadFile({
						url: this.$baseUrl + "oss/fileoss", 
						filePath: e.tempFilePath,
						name: 'file',						
						success: (uploadFileRes) => {
							console.log('上传结果', uploadFileRes.data);
							uni.hideLoading()
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							})
							resolve(uploadFileRes)
						}
					});
				})
			},
			/** 关闭图片选择 */
			cancleChoose(){
				console.log('点了关闭');
				this.showCropper = false
			},
		},
		components:{
			QfImageCropper
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.cancelBtn{background-color: #fff; z-index: 100; position:absolute; top: 30rpx; right: 30rpx;}
	.tips{color: #999;  
		text{font-size:28rpx;}
	}
	.small_btn{color: #55aaff; border: #55aaff 1px solid ;}
	.btn_box {
		margin-top: 70rpx;
		padding-bottom: 20rpx;
	
		button {
			font-size: 32rpx;
			@include theme('btn_bg') color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
		}
	}
</style>