<template> <view class="cer_content"> <TopBar title="金融分期"/> <view class="apply_data_content"> <view :style="{'margin-top':'40rpx'}"> <view class="apply_title">选择单位类型</view> </view> <view> <text class="busi_type" :class="{act: params.enterprise_type === 1}" @click="changeEnterpriseType(1)">企业</text> <text class="busi_type" :class="{act: params.enterprise_type === 2}" @click="changeEnterpriseType(2)">个体工商户</text> </view> <view :style="{'margin-top':'40rpx'}"> <view class="apply_title">资质信息</view> </view> <view class="sign_title">企业名称</view> <view> <input type="text" class="sign_input" v-model="params.enterprise_name"> </view> <view class="selector"> <picker @change="changeCompanyType" mode="selector" :range="range"> <view>{{range[index]}}</view> </picker> <text class="eosfont icon"></text> </view> <view> <input type="text" class="sign_input" v-model="params.social_credit_code"> </view> <view class="sign_title">法定代表人姓名</view> <view> <input type="text" class="sign_input" v-model="params.legal_name"> </view> <view class="sign_title">法定代表人身份证号</view> <view> <input type="text" class="sign_input" v-model="params.legal_card"> </view> <view :style="{'margin-top':'40rpx'}"> <view class="apply_title">法人身份证照片</view> <view class="apply_desc">请上传法人身份证清晰照片,以便顺利帮您认证</view> </view> <view class="apply_data_item"> <view v-if="!params.card_positive" class="apply_upload" @click="uploadImage('card_positive')"> <text class="eosfont icons"></text> <text class="upload_font">身份证 (人像面)</text> </view> <view v-if="params.card_positive" class="apply_upload"> <text class="close_icon" @click="clearParams('card_positive')"></text> <image class="preview_img" :src="params.card_positive"></image> </view> <view v-if="!params.card_reverse" class="apply_upload" @click="uploadImage('card_reverse')"> <text class="eosfont icons"></text> <text class="upload_font">身份证 (国徽面)</text> </view> <view v-if="params.card_reverse" class="apply_upload"> <text class="close_icon" @click="clearParams('card_reverse')"></text> <image class="preview_img" :src="params.card_reverse"></image> </view> </view> </view> <view class="submitBtn" @click="submit()">提交</view> </view> </template> <script> import TopBar from '@/components/TopBar/TopBar.vue' export default { data() { return { range: ['社会统一信用代码', '组织机构代码', '工商注册号'], index: 0, params: { enterprise_type: 1, enterprise_name: '', organ_type: 11, social_credit_code: '', legal_name: '', legal_card: '', card_positive: '', card_reverse: '' }, title: '社会统一信用代码', submitFlag: true } }, methods: { changeEnterpriseType(type) { this.params.enterprise_type = type; }, changeCompanyType(e) { const index = e.target.value; this.index = index; this.title = this.range[index]; switch(index) { case 0: this.params.organ_type = 11; break; case 1: this.params.organ_type = 10; break; case 2: this.params.organ_type = 12; break; } }, uploadImage(key) { uni.chooseImage({ sizeType: ['compress'], count:1, success: (res) => { uni.showLoading({ title: '上传中' }) const tempFilePaths = res.tempFilePaths uni.uploadFile({ url: '/uni/api/resources', filePath: tempFilePaths[0], name: 'file', success: (uploadFileRes) => { const data = JSON.parse(uploadFileRes.data) this.params[key] = data.data; uni.hideLoading(); } }); } }) }, clearParams(key) { this.params[key] = ''; }, submit() { if(!this.submitFlag) return if(!this.params.enterprise_name) { uni.showToast({ title: '请填写企业名称', icon: 'none' }); return } if(!this.params.social_credit_code) { uni.showToast({ title: `请填写${this.title}`, icon: 'none' }); return } if(!this.params.legal_name) { uni.showToast({ title: '请填写法人姓名', icon: 'none' }); return } if(this.params.legal_card.length !== 18 && this.params.legal_card.length !== 15) { uni.showToast({ title: '请填写正确的法人身份证号', icon: 'none' }); return } if(!this.params.card_positive) { uni.showToast({ title: '请上传法人身份证正面', icon: 'none' }); return } if(!this.params.card_reverse) { uni.showToast({ title: '请上传法人身份证反面', icon: 'none' }); return } this.submitFlag = false; uni.showToast({ title: '提交中', icon: 'none' }) uni.request({ url: '/uni/api/certification/AddRealnameAuth', data: this.params, method: 'POST', success: (res) => { this.submitFlag = true; if(res.data.code === 0) { uni.navigateTo({ url: '/pages/apply/choosetype' }); } else { uni.hideToast(); uni.showToast({ icon: 'none', title: res.data.message }) } } }) } }, components: { TopBar } } </script> <style lang="less" scoped> .cer_content { background: #fff; padding-top: 80rpx; .apply_title { font-size:32rpx; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; line-height: 44rpx; color: #212121; } .apply_desc { font-size:24rpx; line-height: 34rpx; color: #979797; margin-top: 8rpx; } .apply_data_content { background: #fff; padding: 0 36rpx; box-sizing: border-box; width: 100%; .apply_data_item { display: flex; justify-content: space-between; .apply_upload { margin-top: 40rpx; width: 328rpx; height: 200rpx; background: rgba(248,248,248,1); border-radius: 16rpx; position: relative; .icons { width: 36rpx; height: 36rpx; color: #AEAEAE; display: block; margin: 72rpx auto 10rpx; } .upload_font { font-size: 24rpx; color: #AEAEAE; display: block; text-align: center; } .preview_img { width: 100%; height: 100%; } .close_icon { width: 28rpx; height: 28rpx; position: absolute; top: -14rpx; right: -14rpx; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAYFBMVEUhISFVSRlWSRlpWBZxXxWfgw6jhg30xAH38Ob38ef38ej49O369vH69vL7+PT8+/n+/v3+/v7/zQD/zQL/1Cb/2T7/4GT/43H/43L/54f/88P/9Mj/+eX//ff//v7///+7HAjXAAAA3ElEQVQoz4XSWRKDIAwAUKFW4tIqQS2uvf8tK4iAojZ/5DFMEhJ9byLyD9M4TufYy1ogilr2AQ4N2miGHc6dQC9ENzucWzxEO1vsMIhuw0GEKAaDupYkZmuaxYmuasVe5+KIaGUkinWi1yjRJJUyai6h1FijU2dYK5y2cpQSayimBUdb4aLOEMc/yP1n6eFZ7hVEGSO7gkrXCmW2I9NKYYdAtyE87BAyHozvaccH75vBQ1pdfxlAzi8/GwBel2sCSvnFgimEvHKr+fFWUyOkb3621GAiK0q+XOA+/gCtlj2I+YoKDQAAAABJRU5ErkJggg==') no-repeat; background-size: 100% 100%; z-index: 10; } } } } .busi_type { width: 180rpx; height: 60rpx; line-height: 60rpx; display: inline-block; margin: 20rpx 36rpx 0 0; font-size: 28rpx; text-align: center; border-radius: 30rpx; background: #ececec; color: #212121; } .busi_type.act { background: #FAC341; color: #fff; } .sign_title { color: #464646; height:40rpx; font-size:28rpx; margin-top: 32rpx; } .sign_input { width:100%; height:72rpx; background:rgba(248,248,248,1); border-radius:16rpx; margin-top: 20rpx; line-height: 72rpx; padding: 0 20rpx; box-sizing: border-box; font-size: 28rpx; color: #212121; } .selector { background: #f8f8f8; height: 72rpx; line-height: 72rpx; font-size: 28rpx; margin-top: 40rpx; border-radius: 16rpx; padding: 0 20rpx; position: relative; } .icon { position: absolute; right: 20rpx; top: 0; } .submitBtn { width: 678rpx; height: 72rpx; line-height: 72rpx; font-size: 28rpx; text-align: center; background-color: #FFCD00; border-radius: 16rpx; margin: 36rpx auto; } } </style>