Files
2025-04-30 14:04:34 +08:00

458 lines
21 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page" :style="themeColor">
<view class="flex benben-position-layout flex flex-wrap align-center merchantSettlement_flex_0" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
<view class='flex flex-wrap align-center justify-between flex-sub merchantSettlement_fd0_0' >
<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1" >
<text class='fu-iconfont2 merchantSettlement_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1" >&#xE794;</text>
</view>
<view class='flex flex-wrap align-stretch justify-center flex-sub' >
<text class='merchantSettlement_fd0_0_c1_c0' >商家入驻</text>
</view>
<view class='flex flex-wrap align-center merchantSettlement_fd0_0_c2' >
</view>
</view>
</view>
<view :style="{height: (88+StatusBarRpx)+'rpx'}" ></view>
<!---flex布局flex布局开始-->
<view class="flex benben-flex-layout flex-wrap align-center" >
<image class='merchantSettlement_fd1_0' mode="aspectFit" :src='STATIC_URL+"141.png"'></image>
</view>
<!---flex布局flex布局结束-->
<!---flex布局flex布局开始-->
<view class="flex benben-flex-layout flex-wrap align-center merchantSettlement_flex_2" >
<view class='flex flex-direction flex-wrap align-stretch flex-sub merchantSettlement_fd2_0' >
<view class='flex flex-wrap align-center justify-between merchantSettlement_fd2_0_c0' >
<text class='merchantSettlement_fd2_0_c0_c0' >负责人姓名</text>
<input class='merchantSettlement_fd2_0_c0_c1' type="text" placeholder="请输入真实姓名" confirm-type="done" :maxlength="20" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="responsibleName" />
</view>
<view class='flex flex-wrap align-center justify-between merchantSettlement_fd2_0_c1' >
<text class='merchantSettlement_fd2_0_c1_c0' >店铺名称</text>
<input class='merchantSettlement_fd2_0_c1_c1' type="text" placeholder="请输入店铺名称" confirm-type="done" :maxlength="20" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="shopNames" />
</view>
<view class='flex flex-wrap align-center justify-between merchantSettlement_fd2_0_c2' >
<text class='merchantSettlement_fd2_0_c2_c0' >店铺LOGO</text>
<view class='flex flex-wrap align-center' >
<image class='merchantSettlement_fd2_0_c2_c1_c0' mode="aspectFit" :src='shopLogo'></image>
<image class='merchantSettlement_fd2_0_c2_c1_c1' mode="aspectFit" :src='STATIC_URL+"142.png"'></image>
</view>
</view>
<view class='flex flex-wrap align-center justify-between merchantSettlement_fd2_0_c3' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/my/siteClassification/siteClassification`" >
<text class='merchantSettlement_fd2_0_c3_c0' >店铺分类</text>
<view class='flex flex-wrap align-center' >
<input class='merchantSettlement_fd2_0_c3_c1_c0' type="text" placeholder="请选择" confirm-type="done" :maxlength="20" :disabled='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="shopclassification" />
<image class='merchantSettlement_fd2_0_c3_c1_c1' mode="aspectFit" :src='STATIC_URL+"142.png"'></image>
</view>
</view>
<view class='flex flex-wrap align-center justify-between merchantSettlement_fd2_0_c4' @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/my/mapSite/mapSite`" >
<text class='merchantSettlement_fd2_0_c4_c0' >店铺地址</text>
<view class='flex flex-wrap align-center' >
<input class='merchantSettlement_fd2_0_c4_c1_c0' type="text" placeholder="请选择" confirm-type="done" :maxlength="20" :disabled='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="shopAdress" />
<image class='merchantSettlement_fd2_0_c4_c1_c1' mode="aspectFit" :src='STATIC_URL+"142.png"'></image>
</view>
</view>
<view class='flex flex-direction flex-wrap align-stretch justify-between merchantSettlement_fd2_0_c5' >
<text class='merchantSettlement_fd2_0_c5_c0' >详细地址</text>
<view class='flex flex-wrap merchantSettlement_fd2_0_c5_c1'>
<textarea class='flex merchantSettlement_input_fd2_0_c5_c1' :placeholder="'请输入'" :maxlength="240" placeholder-style="color:#999;font-size:28rpx" v-model="detailAddress" />
</view>
</view>
<view class='flex flex-wrap align-center justify-between merchantSettlement_fd2_0_c6' >
<text class='merchantSettlement_fd2_0_c6_c0' >身份证</text>
<view class='flex flex-wrap align-center' >
<input class='merchantSettlement_fd2_0_c6_c1_c0' type="number" placeholder="请输入18位身份证号码" confirm-type="done" :maxlength="18" placeholder-style="color:#999;font-size:28rpx" v-model="IdCard" />
</view>
</view>
<view class='flex flex-direction flex-wrap align-stretch justify-between merchantSettlement_fd2_0_c7' >
<text class='merchantSettlement_fd2_0_c7_c0' >请上传身份证正反面</text>
<view class="upload position-relative merchantSettlement_fd2_0_c7_c1">
<text v-if="idfront != ''" @tap="idfront = ''" class='fu-iconfont2 position-absolute merchantSettlement_fd2_0_c7_c1_icon' >&#xE8E7;</text>
<image class=" merchantSettlement_fd2_0_c7_c1_image" mode="aspectFit" @tap="soloChooseImage('idfront','idfront',false,false)" :src="idfront ? idfront : STATIC_URL+'143.png'"></image>
</view>
<text class='merchantSettlement_fd2_0_c7_c2' >身份证正面</text>
</view>
<view class='flex flex-direction flex-wrap align-stretch justify-between' >
<view class="upload position-relative merchantSettlement_fd2_0_c8_c0">
<text v-if="idopposite != ''" @tap="idopposite = ''" class='fu-iconfont2 position-absolute merchantSettlement_fd2_0_c8_c0_icon' >&#xE8E7;</text>
<image class=" merchantSettlement_fd2_0_c8_c0_image" mode="aspectFit" @tap="soloChooseImage('idopposite','idopposite',false,false)" :src="idopposite ? idopposite : STATIC_URL+'143.png'"></image>
</view>
<text class='merchantSettlement_fd2_0_c8_c1' >身份证反面</text>
</view>
<view class='flex flex-direction flex-wrap align-stretch justify-between' >
<view class="upload position-relative merchantSettlement_fd2_0_c9_c0">
<text v-if="license != ''" @tap="license = ''" class='fu-iconfont2 position-absolute merchantSettlement_fd2_0_c9_c0_icon' >&#xE8E7;</text>
<image class=" merchantSettlement_fd2_0_c9_c0_image" mode="aspectFit" @tap="soloChooseImage('license','license',false,false)" :src="license ? license : STATIC_URL+'143.png'"></image>
</view>
<text class='merchantSettlement_fd2_0_c9_c1' >营业执照</text>
</view>
<view class='flex flex-direction flex-wrap align-stretch justify-between' >
<view class="upload position-relative merchantSettlement_fd2_0_c10_c0">
<text v-if="license != ''" @tap="license = ''" class='fu-iconfont2 position-absolute merchantSettlement_fd2_0_c10_c0_icon' >&#xE8E7;</text>
<image class=" merchantSettlement_fd2_0_c10_c0_image" mode="aspectFit" @tap="soloChooseImage('license','license',false,false)" :src="license ? license : STATIC_URL+'143.png'"></image>
</view>
<text class='merchantSettlement_fd2_0_c10_c1' >食品经营许可证</text>
</view>
</view>
</view>
<!---flex布局flex布局结束-->
<view class="flex flex-direction flex-wrap align-stretch justify-center benben-position-layout flex merchantSettlement_flex_3" >
<view class='flex flex-direction flex-wrap align-stretch flex-sub merchantSettlement_fd3_0' >
<view class='flex flex-direction flex-wrap align-stretch' >
<text class='merchantSettlement_fd3_0_c0_c0' >
</text>
<text class='merchantSettlement_fd3_0_c0_c1' >为保证平台用户安全性需要您进行实名认证实名认证通过之后即可登录并在平台进行营业</text>
</view>
<view class='flex flex-wrap align-center merchantSettlement_fd3_0_c1' >
<button class='flex-sub merchantSettlement_fd3_0_c1_c0' @tap.stop="submitInformationFunc()" >提交</button>
</view>
<view class='flex flex-wrap align-center justify-center' >
<benben-flex-switch-new class-name='flex flex merchantSettlement_fd3_0_c2_c0' v-model="isAgreement" :disabled='false' :auto='true' >
<template v-slot:checked>
<view class='flex flex position-relative align-center' >
<image class='merchantSettlement_checkfd3_0_c2_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"33.png"'></image>
</view>
</template>
<template v-slot:unchecked>
<view class='flex flex position-relative justify-end align-center' >
<image class='merchantSettlement_noCheckfd3_0_c2_c0_c1_c0' mode="aspectFit" :src='STATIC_URL+"123.png"'></image>
</view>
</template>
</benben-flex-switch-new>
<text class='merchantSettlement_fd3_0_c2_c1' >提交即默认同意</text>
<text class='merchantSettlement_fd3_0_c2_c2' >商家认证协议</text>
</view>
</view>
</view>
<view :style="{height: '365rpx'}" ></view>
</view>
</template>
<script>
import UploadImage from '@/common/utils/upload-image.js'
import {validate} from '@/common/utils/validate.js'
export default {
components:{},
data(){
return {"isAgreement":false,"responsibleName":"","shopNames":"","shopLogo":"","shopclassification":"","shopAdress":"","detailAddress":"","IdCard":"","idopposite":"","idfront":"","license":"","foodLicense":""};
},
computed:{
themeColor() {
return this.$store.getters.themeColor
},
},
watch:{},
onLoad(options){
},
onUnload() {
},
onReady(){
},
onShow(){
},
onHide(){
},
onResize(){
},
onPullDownRefresh(){
},
onReachBottom(e){
},
onPageScroll(e){
},
methods:{
//上传单图、多图方法
soloChooseImage(id, path, obj, obj1, fnName = false) {
let self = this
if (!obj) obj = this
if (!obj1) obj1 = this
if (self.uploading) {
return
}
// 从相册中选择图片
uni.chooseImage({
count: 1, // 默认3
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
success: function (res) {
self.uploading = true
// 开始上传
new UploadImage(res.tempFiles, {
complete: function (res) {
self.uploading = false
if (id) self.$set(obj, id, res[0].id)
if (path) self.$set(obj1, path, res[0].path)
if (fnName) self[fnName]()
},
})
},
})
},
//提交信息认证
submitInformationFunc(){
if(!validate(this.responsibleName,'require')){
this.$message.info('负责人姓名不能为空');
return false;
}
if(!validate(this.shopNames,'require')){
this.$message.info('店铺名称不能为空');
return false;
}
if(!validate(this.shopLogo,'require')){
this.$message.info('请上传店铺logo');
return false;
}
if(!validate(this.shopclassification,'require')){
this.$message.info('请选择店铺分类');
return false;
}
if(!validate(this.shopAdress,'require')){
this.$message.info('请选择店铺地址');
return false;
}
if(!validate(this.detailAddress,'require')){
this.$message.info('请输入店铺的详细地址');
return false;
}
if(!validate(this.IdCard,'require')){
this.$message.info('身份证号不能为空');
return false;
}
if(!validate(this.IdCard,'idcard')){
this.$message.info('请输入正确的身份证号');
return false;
}
if(!validate(this.idfront,'require')){
this.$message.info('请上传身份证正面照片');
return false;
}
if(!validate(this.idopposite,'require')){
this.$message.info('请上传身份证反面照片');
return false;
}
if(!validate(this.license,'require')){
this.$message.info('请上传营业执照照片');
return false;
}
if(this.isAgreement===false){
this.$message.info('请勾选商家认证协议');
return false;
}
this.$urouter.navigateTo(`/pages/my/certificationAudit/certificationAudit?stateUS=1`);
}
}
};
</script>
<style lang="scss" scoped>
.page{
width: 100vw;
overflow-x: hidden;
min-height: calc(100vh - var(--window-bottom));
background:rgba(255, 255, 255, 1);background-size: 100% auto !important;
}
.merchantSettlement_flex_0{
background:#fff;width:750rpx;height:88rpx;overflow:hidden;z-index:10;top:0rpx;background-size:100% auto !important;
}
.merchantSettlement_fd0_0_c2{
width:32rpx;height:32rpx;
}
.merchantSettlement_fd0_0_c1_c0{
font-size:36rpx;font-weight:500;color:#333333;line-height:36rpx;
}
.merchantSettlement_fd0_0_c0_c0{
font-size:32rpx;font-weight:500;color:#333;line-height:88rpx;
}
.merchantSettlement_fd0_0{
margin:0rpx 32rpx 0rpx 32rpx;
}
.merchantSettlement_fd1_0{
width:750rpx;height:280rpx;border-radius:0rpx 0rpx 0rpx 0rpx;
}
.merchantSettlement_flex_2{
background:#fff;background-size:100% auto !important;
}
.merchantSettlement_fd2_0_c10_c1{
color:#999999;font-size:28rpx;font-weight:500;line-height:30rpx;text-align:center;margin:24rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd2_0_c10_c0_image{
width:90rpx;height:81rpx;margin:145rpx 0rpx 0rpx 300rpx;
}
.merchantSettlement_fd2_0_c10_c0_icon{
top:0rpx;right:0rpx;z-index:10;color:#ff5536;
}
.merchantSettlement_fd2_0_c10_c0{
background:url(https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/145.png) no-repeat ,#eee;width:686rpx;height:365rpx;background-size:100% auto !important;
}
.merchantSettlement_fd2_0_c9_c1{
color:#999999;font-size:28rpx;font-weight:500;line-height:30rpx;text-align:center;margin:24rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd2_0_c9_c0_image{
width:90rpx;height:81rpx;margin:145rpx 0rpx 0rpx 300rpx;
}
.merchantSettlement_fd2_0_c9_c0_icon{
top:0rpx;right:0rpx;z-index:10;color:#ff5536;
}
.merchantSettlement_fd2_0_c9_c0{
background:url(https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/145.png) no-repeat ,#eee;width:686rpx;height:365rpx;background-size:100% auto !important;
}
.merchantSettlement_fd2_0_c8_c1{
color:#999999;font-size:28rpx;font-weight:500;line-height:30rpx;text-align:center;margin:24rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd2_0_c8_c0_image{
width:90rpx;height:81rpx;margin:145rpx 0rpx 0rpx 300rpx;
}
.merchantSettlement_fd2_0_c8_c0_icon{
top:0rpx;right:0rpx;z-index:10;color:#ff5536;
}
.merchantSettlement_fd2_0_c8_c0{
background:url(https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/144.png) no-repeat ,#eee;width:686rpx;height:365rpx;background-size:100% auto !important;
}
.merchantSettlement_fd2_0_c7_c2{
color:#999999;font-size:28rpx;font-weight:500;line-height:30rpx;text-align:center;margin:20rpx 0rpx rpx 0rpx;
}
.merchantSettlement_fd2_0_c7_c1_image{
width:90rpx;height:81rpx;margin:150rpx 0rpx 0rpx 300rpx;
}
.merchantSettlement_fd2_0_c7_c1_icon{
top:0rpx;right:0rpx;z-index:10;color:#ff5536;
}
.merchantSettlement_fd2_0_c7_c1{
background:rgba(248, 249, 251, 1);margin:24rpx 0rpx 20rpx 0rpx;background-size:100% auto !important;width:686rpx;height:365rpx;
}
.merchantSettlement_fd2_0_c7_c0{
color:#333333;font-size:28rpx;font-weight:500;line-height:30rpx;
}
.merchantSettlement_fd2_0_c7{
padding:32rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd2_0_c6_c1_c0{
text-align:right;
}
.merchantSettlement_fd2_0_c6_c0{
color:#333333;font-size:28rpx;font-weight:400;line-height:30rpx;
}
.merchantSettlement_fd2_0_c6{
border-bottom:1px solid rgba(238, 238, 238, 1);padding:32rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_input_fd2_0_c5_c1{
width:686%;font-size:28rpx;font-weight:400;color:#333;white-space:pre-wrap;
}
.merchantSettlement_fd2_0_c5_c1{
background:rgba(246, 246, 246, 1);width:686rpx;border-radius:8rpx 8rpx 8rpx 8rpx;padding:16rpx 16rpx 16rpx 16rpx;margin:16rpx 0rpx 0rpx 0rpx;
}
.merchantSettlement_fd2_0_c5_c0{
color:#333333;font-size:28rpx;font-weight:400;line-height:30rpx;
}
.merchantSettlement_fd2_0_c5{
border-bottom:1px solid rgba(238, 238, 238, 1);padding:32rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd2_0_c4_c1_c1{
width:14rpx;height:26rpx;border-radius:0rpx 0rpx 0rpx 0rpx;margin:0rpx 0rpx 0rpx 16rpx;
}
.merchantSettlement_fd2_0_c4_c1_c0{
text-align:right;color:#333;font-size:32rrpx;font-weight:400;line-height:45rrpx;
}
.merchantSettlement_fd2_0_c4_c0{
color:#333333;font-size:28rpx;font-weight:400;line-height:30rpx;
}
.merchantSettlement_fd2_0_c4{
border-bottom:1px solid rgba(238, 238, 238, 1);padding:32rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd2_0_c3_c1_c1{
width:14rpx;height:26rpx;border-radius:0rpx 0rpx 0rpx 0rpx;margin:0rpx 0rpx 0rpx 16rpx;
}
.merchantSettlement_fd2_0_c3_c1_c0{
text-align:right;color:#333;font-size:32rrpx;font-weight:400;line-height:45rrpx;
}
.merchantSettlement_fd2_0_c3_c0{
color:#333333;font-size:28rpx;font-weight:400;line-height:30rpx;
}
.merchantSettlement_fd2_0_c3{
border-bottom:1px solid rgba(238, 238, 238, 1);padding:32rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd2_0_c2_c1_c1{
width:14rpx;height:26rpx;border-radius:0rpx 0rpx 0rpx 0rpx;margin:0rpx 0rpx 0rpx 16rpx;
}
.merchantSettlement_fd2_0_c2_c1_c0{
width:88rpx;height:88rpx;border-radius:100rpx 100rpx 100rpx 100rpx;
}
.merchantSettlement_fd2_0_c2_c0{
color:#333333;font-size:28rpx;font-weight:400;line-height:30rpx;
}
.merchantSettlement_fd2_0_c2{
border-bottom:1px solid rgba(238, 238, 238, 1);padding:32rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd2_0_c1_c1{
text-align:right;color:#333;font-size:32rrpx;font-weight:400;line-height:45rrpx;
}
.merchantSettlement_fd2_0_c1_c0{
color:#333333;font-size:28rpx;font-weight:400;line-height:30rpx;
}
.merchantSettlement_fd2_0_c1{
border-bottom:1px solid rgba(238, 238, 238, 1);padding:32rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd2_0_c0_c1{
text-align:right;color:#333;font-size:32rrpx;font-weight:400;line-height:45rrpx;
}
.merchantSettlement_fd2_0_c0_c0{
color:#333333;font-size:28rpx;font-weight:400;line-height:30rpx;
}
.merchantSettlement_fd2_0_c0{
border-bottom:1px solid rgba(238, 238, 238, 1);padding:32rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd2_0{
padding:0rpx 32rpx 0rpx 32rpx;
}
.merchantSettlement_flex_3{
background:rgba(248, 248, 248, 1);width:750rpx;height:365rpx;overflow:hidden;z-index:10;bottom:calc(0rpx + var(--window-bottom));background-size:100% auto !important;
}
.merchantSettlement_fd3_0_c2_c2{
color:#59A6F4;font-size:24rpx;font-weight:400;line-height:32rpx;
}
.merchantSettlement_fd3_0_c2_c1{
color:rgba(153, 153, 153, 1);font-size:24rpx;font-weight:400;line-height:32rpx;
}
.merchantSettlement_noCheckfd3_0_c2_c0_c1_c0{
border-radius:24rpx 24rpx 24rpx 24rpx;width:24rpx;height:24rpx;
}
.merchantSettlement_checkfd3_0_c2_c0_c0_c0{
width:24rpx;height:24rpx;border-radius:24rpx 24rpx 24rpx 24rpx;
}
::v-deep .merchantSettlement_fd3_0_c2_c0{
margin:0rpx 16rpx 0rpx 0rpx;
}
.merchantSettlement_fd3_0_c1_c0{
background:rgba(255, 147, 0, 1);border-radius:44rpx 44rpx 44rpx 44rpx;font-size:32rpx;color:#fff;height:88rpx;line-height:88rpx;
}
.merchantSettlement_fd3_0_c1{
margin:40rpx 0rpx 32rpx 0rpx;
}
.merchantSettlement_fd3_0_c0_c1{
color:#F54848;font-size:24rpx;font-weight:400;line-height:30rpx;
}
.merchantSettlement_fd3_0_c0_c0{
color:#F54848;font-size:24rpx;font-weight:400;line-height:30rpx;
}
.merchantSettlement_fd3_0{
padding:24rpx 32rpx 0rpx 32rpx;
}
</style>