|
@@ -0,0 +1,263 @@
|
|
|
+<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>
|