<template> <view class="page"> <u-alert-tips v-if="cObj.auth_state === '2'" type="warning" title="当前状态:" description="当前资料审核中,修改提交后将重新进入审核流程"></u-alert-tips> <u-alert-tips v-if="cObj.auth_state === '3'" type="error" title="当前状态:" :description="cObj.auth_remark"></u-alert-tips> <u-alert-tips v-if="cObj.auth_state === '1'" type="success" title="当前状态:" description="当前资料已审核通过,修改提交将重新进入审核流程"></u-alert-tips> <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="groupTypeName"> <u-input type="select" inputAlign="left" :select-open="groupTypeSelectShow" v-model="form.groupTypeName" placeholder="请选择身份" @click="groupTypeSelectShow = true"></u-input> </u-form-item> <u-form-item v-if="form.group_type == 1" label-width="150" label="推荐人" prop="referrer"> <u-input placeholder="请输入推荐人(不能填自己)" v-model="form.referrer" type="text"></u-input> </u-form-item> <u-form-item label-position="top" label-width="150" label="营业执照" prop="busines_licens" v-if="form.group_type == 1"> <view class="id_card" @click="uploadBusinesLicensImage"> <u-icon v-if="form.busines_licens == null" name="plus" size="32" color="#606266"></u-icon> <text v-if="form.busines_licens == null">请先上传营业执照照片</text> <image v-if="form.busines_licens != null" :src="businesLicens" mode="aspectFill"></image> </view> </u-form-item> <u-form-item label-width="150" label="分销代码" prop="dept_code" v-else> <u-input placeholder="请输入分销代码" v-model="form.dept_code" 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="bank_number"> <u-input placeholder="请输入您的银行卡号" v-model="form.bank_number" type="text"></u-input> </u-form-item> --> <u-form-item label-position="top" label-width="150" label="身份证头像页" prop="id_card_front"> <view class="id_card" @click="uploadFrontImage"> <u-icon v-if="form.id_card_front == null" name="plus" size="32" color="#606266"></u-icon> <text v-if="form.id_card_front == null">请先上传身份证头像页照片</text> <image v-if="form.id_card_front != null" :src="idCardFront" mode="aspectFill"></image> </view> </u-form-item> <u-form-item label-position="top" label-width="150" label="身份证国徽页" prop="id_card_revers"> <view class="id_card" @click="uploadBackImage"> <u-icon v-if="form.id_card_revers == null" name="plus" size="32" color="#606266"></u-icon> <text v-if="form.id_card_revers == null">请先上传身份证国徽页照片</text> <image v-if="form.id_card_revers != null" :src="idCardRevers" mode="aspectFill"></image> </view> </u-form-item> <!-- <u-form-item label-position="top" label-width="150" label="银行卡号面" prop="bank_card"> <view class="id_card" @click="uploadBankImage"> <u-icon v-if="form.bank_card == null" name="plus" size="32" color="#606266"></u-icon> <text v-if="form.bank_card == null">请先上传银行卡号面</text> <image v-if="form.bank_card != null" :src="bankCard" 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 class="footer"> 提交即代表同意 <text class="agreement" @click="pageTo('/pages/agreement/agreement?type=user_agreement')">《用户协议》</text> 、 <text class="agreement" @click="pageTo('/pages/agreement/agreement2?type=privacy_agreement')">《隐私协议》</text> </view> </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" /> <u-select mode="single-column" :list="groupTypeSelectList" v-model="groupTypeSelectShow" @confirm="groupTypeSelectConfirm"></u-select> </view> </template> <script> import { pathToBase64 } from 'image-tools' var that; export default { data() { return { groupTypeSelectShow: false, groupTypeSelectList: [], maskShow: false, idCardFront: '', idCardRevers: '', bankCard: '', businesLicens: '', form: { referrer: null, real_name: null, id_number: '', // bank_number: '', id_card_front: null, id_card_revers: null, // bank_card: null, dept_code: '', }, cObj: {}, submitButtonDisabled: false, rules: { referrer: [ { required: true, message: '推荐人不得为空', trigger: ['change', 'blur'] }, ], real_name: [ { required: true, message: '姓名不得为空', trigger: ['change', 'blur'] }, ], id_number: [ { required: true, message: '身份证号不得为空', trigger: ['change', 'blur'] }, ], // bank_number: [ // { // required: true, // message: '银行卡号不得为空', // trigger: ['change', 'blur'] // }, // ], id_card_front: [ { required: true, message: '身份证头像页照片不得为空', trigger: ['change', 'blur'] } ], id_card_revers: [ { required: true, message: '身份证国徽页照片不得为空', trigger: ['change', 'blur'] } ], // bank_card: [ // { // required: true, // message: '银行卡号面照片不得为空', // trigger: ['change', 'blur'] // } // ], }, submitModalShow: false, }; }, onLoad(params) { this.getData() }, // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕 onReady() { this.$refs.uForm.setRules(this.rules); }, methods: { groupTypeSelectConfirm(e) { e.map((val, index) => { this.form.group_type = val.value; this.form.groupTypeName = val.label; }); }, getData () { uni.api.base.apiuserauthinfo().then(res => { const cObj = res || {} if (cObj.id) { this.idCardFront = cObj.id_card_front_pub this.idCardRevers = cObj.id_card_revers_pub // this.bankCard = cObj.bank_card_pub this.businesLicens = cObj.busines_licens_pub let f = { referrer: cObj.referrer, real_name: cObj.real_name, id_number: cObj.id_number, // bank_number: cObj.bank_number, id_card_front: cObj.id_card_front, id_card_revers: cObj.id_card_revers, // bank_card: cObj.bank_card, busines_licens: cObj.busines_licens, dept_code: cObj.dept_code, } this.form = {...f} // if (cObj.auth_state === '1') this.submitButtonDisabled = true this.cObj = {...cObj} } this.getGTList() }) }, getGTList () { const userInfo2 = uni.getStorageSync('MD_userInfo2') this.form.group_type = userInfo2.group_type || '1' const dictObj = uni.getStorageSync('MD_dict') let list = dictObj.group_type || [] let groupTypeSelectList = [] list.forEach(item => { if (item.val == userInfo2.group_type) { this.form.groupTypeName = item.key } groupTypeSelectList.push({ value: item.val, label: item.key, }) }) if (!this.form.groupTypeName) this.form.groupTypeName = '渠道/店东' this.groupTypeSelectList = [...groupTypeSelectList] }, uploadImgHandle (bc) { uni.chooseImage({ count: 1, sizeType: ['compressed'], success: function(res) { const filePath = res.tempFilePaths[0]; pathToBase64(filePath).then(hh => { console.log(hh) }) let token = uni.getStorageSync('MD_token') || '' uni.uploadFile({ url: uni.baseUrl + 'api/upload/cloudpiv', 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 { uni.$msg(cData.errmsg || `未知错误-${cData.errno}`) } } }) } }) }, uploadBusinesLicensImage() { this.uploadImgHandle((d) => { this.form.busines_licens = d.url this.businesLicens = d.pub_url }) }, // 选择、验证、上传正面照片 uploadFrontImage() { this.uploadImgHandle((d) => { this.form.id_card_front = d.url this.idCardFront = d.pub_url }) }, // 选择、上传身份证背面 uploadBackImage() { this.uploadImgHandle((d) => { this.form.id_card_revers = d.url this.idCardRevers = d.pub_url }) }, // 选择、上传银行卡号面 uploadBankImage() { this.uploadImgHandle((d) => { this.form.bank_card = d.url this.bankCard = d.pub_url }) }, submitHandle() { const that = this if (this.form.group_type == 3) { uni.$msg('请选择认证的角色') return } if (this.form.group_type == 1) { if (!this.form.busines_licens) { uni.$msg('渠道请上传营业执照照片') return } } else { if (!this.form.dept_code) { uni.$msg('请上传门店邀请码') return } } this.$refs.uForm.validate(valid => { if (valid) { let params = { ...that.form } uni.api.base.apiuserauthadd(params).then(res => { uni.$msgConfirm('编辑成功', () => { uni.reLaunch({ url: '/pages/user/setting/setting' }) }, () => { uni.reLaunch({ url: '/pages/user/setting/setting' }) }) }) uni.api.base.apiuseredit({ nickname: params.real_name, group_type: params.group_type }).then(() => {}) } }); }, pageTo(path) { if (path === 'dev') { uni.$msg('开发中~') return } uni.navigateTo({ url: path }) }, // 以下是工具函数 // 格式化日期的月份或天数的显示(小于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>