<template> <view class="page"> <view class="form"> <u-form :model="form" ref="uForm"> <!-- <u-form-item label-width="150" label="姓名" prop="real_name"><u-input placeholder="请输入您的真实姓名" v-model="form.real_name" type="text"></u-input></u-form-item> <u-form-item label-width="150" label="身份证号" prop="id_number"> <u-input placeholder="请输入您的身份证号" v-model="form.id_number" type="text"></u-input> </u-form-item> --> <u-form-item label-width="150" label="到访备注信息" prop="visit_des" label-position="top"> <u-input placeholder="请输入到访备注信息" v-model="form.visit_des" type="textarea"></u-input> </u-form-item> <u-form-item label-position="top" label-width="150" label="第三方水印" prop="img1"> <view class="id_card" @click="uploadFrontImage"> <u-icon v-if="form.img1 == null" name="plus" size="32" color="#606266"></u-icon> <text v-if="form.img1 == null">请先上传第三方水印照片</text> <image v-if="form.img1 != null" :src="idCardFront" mode="aspectFill"></image> </view> </u-form-item> <u-form-item label-position="top" label-width="150" label="带看单" prop="img2"> <view class="id_card" @click="uploadBackImage"> <u-icon v-if="form.img2 == null" name="plus" size="32" color="#606266"></u-icon> <text v-if="form.img2 == null">请先上传带看单照片</text> <image v-if="form.img2 != null" :src="idCardRevers" mode="aspectFill"></image> </view> </u-form-item> </u-form> <u-gap height="60"></u-gap> <u-button type="primary" :disabled="submitButtonDisabled" @click="submitModalShow = true">提交</u-button> <u-gap></u-gap> </view> <!-- modal --> <u-modal v-model="submitModalShow" content="请务必仔细确认各项信息是否正确" :show-cancel-button="true" @confirm="submitHandle()"></u-modal> <!-- mask --> <u-mask :show="maskShow" @click="maskShow = false"> <view class="warp"> <!-- <u-image src="https://zdcdn.2bwin.cn/uploads/20220513/90abe6fe85d6c17f6bdc069955fbb878.png" mode="widthFix" width="400rpx" border-radius="20rpx"></u-image> --> <u-gap></u-gap> <u-button size="medium" type="primary" @click="maskShow = false">确定</u-button> </view> </u-mask> <!-- utoast --> <u-toast ref="uToast" /> </view> </template> <script> var that; export default { data() { return { maskShow: false, idCardFront: '', idCardRevers: '', form: { visit_des: '', img1: null, img2: null, }, curId: '', cObj: {}, submitButtonDisabled: false, rules: { visit_des: [ { required: true, message: '备注不得为空', trigger: ['change', 'blur'] }, ], img1: [ { required: true, message: '第三方水印照片不得为空', trigger: ['change', 'blur'] } ], img2: [ { required: true, message: '带看单照片不得为空', trigger: ['change', 'blur'] } ], }, submitModalShow: false, }; }, onLoad(params) { this.curId = params.id this.getData() }, // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕 onReady() { this.$refs.uForm.setRules(this.rules); }, methods: { getData () { uni.api.cust.apireportvisitdetail({report_id: this.curId}).then(res => { const cObj = res || {} if (cObj.id) { this.idCardFront = cObj.img1 this.idCardRevers = cObj.img2 let f = { visit_des: cObj.visit_des, img1: cObj.img1, img2: cObj.img2, } this.form = {...f} this.cObj = {...cObj} } }) }, uploadImgHandle (bc) { uni.chooseImage({ count: 1, sizeType: ['compressed'], success: function(res) { const filePath = res.tempFilePaths[0]; let token = uni.getStorageSync('MD_token') || '' uni.uploadFile({ url: uni.baseUrl + 'api/upload/cloud', filePath, name: 'upload', formData: { 'token': token }, success: (f) => { const cData = JSON.parse(f.data) if (cData.errno === 0) { if (bc && typeof(bc) === 'function') bc(cData.data) } else { uin.$msg(cData.errmsg || `未知错误-${cData.errno}`) } } }) } }) }, // 选择、验证、上传正面照片 uploadFrontImage() { this.uploadImgHandle((d) => { this.form.img1 = d.url this.idCardFront = d.url }) }, // 选择、上传身份证背面 uploadBackImage() { this.uploadImgHandle((d) => { this.form.img2 = d.url this.idCardRevers = d.url }) }, submitHandle() { const that = this this.$refs.uForm.validate(valid => { if (valid) { let params = { ...that.form } params.report_id = that.curId uni.api.cust.apireportvisitchange(params).then(res => { uni.$msgConfirm('编辑成功', () => { uni.reLaunch({ url: `/pages/agent/recommend/detail?id=${that.curId}` }) }, () => { uni.reLaunch({ url: `/pages/agent/recommend/detail?id=${that.curId}` }) }) }) } }); }, // 以下是工具函数 // 格式化日期的月份或天数的显示(小于10,在前面增加0) getFormatDate(value) { if (value == undefined || value == '') { return ''; } var str = value; if (parseInt(value) < 10) { str = '0' + value; } return str; } } }; </script> <style lang="scss"> .page { background-color: #ffffff; } .form { border-radius: 10rpx; padding: 0 40rpx; } .popup-body { .tips-title { font-size: $u-p; margin-bottom: 20rpx; } .tips-content { font-size: $u-p2; color: $u-tips-color; margin-bottom: 60rpx; } } .id_card { color: #606266; width: 100%; height: 350rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f4f5f6; font-size: $u-p2; border-radius: 10rpx; image { border-radius: 10rpx; } } .footer { position: relative; text-align: center; font-size: $u-p2; left: 0; bottom: 20rpx; .agreement { color: $u-theme-color; } } .slot-content { font-size: 28rpx; color: $u-content-color; padding: 20rpx; } .warp { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .rect { width: 400rpx; height: 400rpx; background-color: #fff; } </style>