<template> <view class="page"> <u-alert-tips v-if="vk.pubfn.isNotNull(vk.vuex.get('$user.agentInfo.verify_status'))" :type="vk.vuex.get('$user.agentInfo.verify_status') == 0 ? 'warning' : vk.vuex.get('$user.agentInfo.verify_status') == 1 ? 'success' : 'error'" title="当前状态:" :description=" vk.vuex.get('$user.agentInfo.verify_status') == 0 ? '当前资料审核中,修改提交后将重新进入审核流程' : vk.vuex.get('$user.agentInfo.verify_status') == 1 ? '当前资料已审核通过,修改提交将重新进入审核流程' : '申请被拒绝,清理联系客服咨询' " ></u-alert-tips> <view class="form"> <u-form :model="form" ref="uForm"> <u-form-item label-width="150" label="开户行" prop="name"> <u-input placeholder="如:中国银行北京中关村支行" v-model="form.name" type="text"></u-input> </u-form-item> <u-form-item label-width="150" label="卡号" prop="no"><u-input placeholder="请输入完整的银行卡卡号" v-model="form.no" type="text"></u-input></u-form-item> <u-form-item label-position="top" label-width="150" label="银行卡卡号面" prop="front_image"> <view class="id_card" @click="uploadFrontImage"> <u-icon v-if="form.front_image == null" name="plus" size="32" color="#606266"></u-icon> <text v-if="form.front_image == null">{{ frontImageDisabled ? '请先输入银行卡号' : '点击上传图片' }}</text> <image v-if="form.front_image != null" :src="form.front_image" 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="vk.navigateTo('/pages/agreement/agreement?type=user_agreement')">《用户协议》</text> 、 <text class="agreement" @click="vk.navigateTo('/pages/agreement/agreement?type=privacy_agreement')">《隐私协议》</text> </view> </view> <!-- modal --> <u-modal v-model="submitModalShow" content="请务必仔细确认各项信息是否正确" :show-cancel-button="true" @confirm="submit()"></u-modal> <u-modal v-model="modalShow" :content="modalContent" :show-cancel-button="true" @cancel="modalCancel()" @confirm="modalConfirm()"></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: true, form: { name: null, no: null, front_image: null }, frontImageDisabled: true, submitButtonDisabled: true, rules: { name: [ { required: true, message: '开户行不得为空', trigger: ['change', 'blur'] } ], no: [ { required: true, message: '银行卡号不得为空', trigger: ['change', 'blur'] } ], front_image: [ { required: true, message: '银行卡照片不得为空', trigger: ['change', 'blur'] } ] }, submitModalShow: false, modalType: 1, modalShow: false, modalContent: '', updateMethod: 'update' }; }, onLoad(params) { that = this; if (!vk.checkToken()) { vk.toast('请先登录', 'none', 1500, true, function() { vk.navigateToLogin(); }); } else { if (vk.pubfn.isNull(vk.vuex.get('$user.userInfo.mobile'))) { vk.toast('请先补全您的手机号', 'none', 1500, true, function() { // vk.navigateToHome(); }); // return } vk.callFunction({ url: 'client/agent/kh/getAgentInfo', title: '请求中...', needAlert: false }) .then(res => { if (vk.pubfn.isNull(res.info)) { that.updateMethod = 'create'; vk.toast('请补全您的资料', 'none'); } else { // 更新审核状态 vk.vuex.set('$user.agentInfo', res.info); console.log(vk.vuex.get('$user.agentInfo')); that.form.name = res.info.bank_info.name; that.form.no = res.info.bank_info.no; that.form.front_image = res.info.bank_info.front_image; if (vk.pubfn.isNotNull(res.info.bank_info.no)) { that.frontImageDisabled = false; } if (vk.pubfn.isNotNull(res.info.bank_info.front_image)) { that.idCradBackImageDisabled = false; } } }) .catch(res => { console.log(res); }); } }, // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕 onReady() { this.$refs.uForm.setRules(this.rules); }, methods: { // 选择、验证、上传正面照片 uploadFrontImage() { if (vk.pubfn.isNullOne(that.form.name, that.form.no)) { vk.toast('请检查输入信息是否完整', 'none'); return; } uni.chooseImage({ count: 1, sizeType: ['compressed'], success: function(res) { // 上传至 unicloud云储存 vk.callFunctionUtil.uploadFile({ title: '上传中...', filePath: res.tempFilePaths[0], suffix: 'png', // 不传suffix会自动获取,但H5环境下获取不到后缀,但可以通过file.name 获取 provider: 'unicloud', success(uploadRes) { console.log(uploadRes); // 上传成功 that.form.front_image = uploadRes.url; that.submitButtonDisabled = false; } }); } }); }, submit() { that.$refs.uForm.validate(valid => { if (valid) { let bank_info = that.form; vk.callFunction({ url: 'client/agent/kh/updateAgentInfo', title: '请求中...', needAlert: false, data: { method: that.updateMethod, bank_info: that.form } }) .then(res => { console.log(res); vk.vuex.set('$user.agentInfo.bank_info', that.form); vk.vuex.set('$user.agentInfo.verify_status', 0); // 审核中 vk.toast('更新成功,等待审核', 'none', 1500, true, function() { vk.navigateToHome(); }); }) .catch(res => { console.log(res); }); } else { console.log('验证失败'); } }); }, // 以下是工具函数 // 格式化日期的月份或天数的显示(小于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>