659 lines
18 KiB
Vue
659 lines
18 KiB
Vue
<template>
|
|
<view class="store-settled" :style="{'backgroundColor': bgColor}">
|
|
<view class="content">
|
|
<!-- <view class="apply-form bg-white" v-if="storeState == 0">
|
|
<view class="text-center wait-pass">
|
|
<view>
|
|
<u-icon name="hourglass" color="#b7b7b7" size="92"></u-icon>
|
|
</view>
|
|
<view>
|
|
已提交，待审核
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else-if="storeState == 1" >
|
|
<view class="text-center pass">
|
|
<view>
|
|
<u-icon name="checkmark-circle" color="#1BA035" size="92"></u-icon>
|
|
</view>
|
|
<view>
|
|
审核通过
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- <view v-if="storeState == 2" class="bold text-center no-pass" @click="this.showPopup = true">
|
|
审核失败，点击查看原因
|
|
</view> -->
|
|
<view class="item">
|
|
<view class="bold lg apply-form-info">
|
|
商户信息
|
|
</view>
|
|
|
|
<view class="apply-form-item">
|
|
<u-field label="商家名称" v-model="form.shopName" label-width="160" placeholder="请输入商家名称" :border-bottom="false" required />
|
|
</view>
|
|
|
|
<!-- 商户联系人 -->
|
|
<view class="apply-form-item">
|
|
<u-field label="商户联系人" v-model="form.name" label-width="160" placeholder="请输入商户联系人" :border-bottom="false" required />
|
|
</view>
|
|
|
|
<!-- 联系电话 -->
|
|
<view class="apply-form-item">
|
|
<u-field label="联系电话" v-model="form.empowerPhone" label-width="160" placeholder="请输入联系电话" :border-bottom="false" required />
|
|
</view>
|
|
|
|
<view class="apply-form-item">
|
|
<u-field label="自拍照" label-width="160" placeholder="请上传自拍照" :border-bottom="false"
|
|
required disabled />
|
|
<view class="apply-form-upload" @click="uploadHandSelf" v-if="form.selfPhoto">
|
|
<u-image :showLoading="true" :src="form.selfPhoto" width="200rpx" height="200rpx"></u-image>
|
|
</view>
|
|
<view class="apply-form-upload" @click="uploadHandSelf" v-else>
|
|
<u-image :showLoading="true" :src="aliOSSDomain + 'uniapp/upload.png'" width="200rpx" height="200rpx"></u-image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="apply-form-item">
|
|
<u-field label="人像面" label-width="160" placeholder="请上传身份证人像面" :border-bottom="false"
|
|
required disabled />
|
|
<view class="apply-form-upload" @click="uploadIdCardFronted" v-if="form.idFront">
|
|
<u-image :showLoading="true":src="form.idFront" :width="width" :height="height"></u-image>
|
|
</view>
|
|
<view class="apply-form-upload" @click="uploadIdCardFronted" v-else>
|
|
<u-image :showLoading="true" :src="aliOSSDomain + 'uniapp/renxiang.png'" :width="width" :height="height"></u-image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="apply-form-item">
|
|
<u-field label="国徽面" label-width="160" placeholder="请上传身份证国徽面" :border-bottom="false"
|
|
required disabled />
|
|
<view class="apply-form-upload" @click="uploadIdCardBackend" v-if="form.idBack">
|
|
<u-image :showLoading="true":src="form.idBack" :width="width" :height="height"></u-image>
|
|
</view>
|
|
<view class="apply-form-upload" @click="uploadIdCardBackend" v-else>
|
|
<u-image :showLoading="true" :src="aliOSSDomain + 'uniapp/guohui.png'" :width="width" :height="height"></u-image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="apply-form-item">
|
|
<u-field label="商家图标" label-width="160" placeholder="请上传商家图标" :border-bottom="false" disabled />
|
|
<view class="apply-form-upload" @click="uploadLogo" v-if="form.shopLogo">
|
|
<u-image :showLoading="true" :src="form.shopLogo" width="200rpx" height="200rpx"></u-image>
|
|
</view>
|
|
<view class="apply-form-upload" @click="uploadLogo" v-else>
|
|
<u-image :showLoading="true" :src="aliOSSDomain + 'uniapp/upload.png'" width="200rpx" height="200rpx"></u-image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 营业执照 -->
|
|
<view class="apply-form-item">
|
|
<u-field label="营业执照" label-width="160" placeholder="请上传营业执照" :border-bottom="false" disabled />
|
|
<view class="apply-form-upload" @click="uploadImage" v-if="form.businessLicense">
|
|
<u-image :showLoading="true" :src="form.businessLicense" width="320rpx" height="200rpx"></u-image>
|
|
</view>
|
|
<view class="apply-form-upload" @click="uploadImage" v-else>
|
|
<u-image :showLoading="true" :src="aliOSSDomain + 'uniapp/upload.png'" width="200rpx" height="200rpx"></u-image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 信用代码 -->
|
|
<view class="apply-form-item">
|
|
<u-field label="信用代码" v-model="form.crftNo1" label-width="160" :border-bottom="false" placeholder="请输入统一社会信用代码"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="bold lg apply-form-info">
|
|
账户信息
|
|
</view>
|
|
|
|
<!-- 账户类型 -->
|
|
<view class="apply-form-item bank-type">
|
|
<u-field label="账户类型" label-width="160" :border-bottom="false" required disabled></u-field>
|
|
<view class="m-l-10">
|
|
<u-radio-group v-model="form.bankType">
|
|
<u-radio @change="choseType" :name="1" active-color="#fb2d2d">对公账户</u-radio>
|
|
<u-radio @change="choseType" :name="2" active-color="#fb2d2d">私有账户</u-radio>
|
|
</u-radio-group>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="apply-form-item" v-if="form.bankType == 1">
|
|
<u-field label="大额行号" v-model="form.largeNumber" label-width="160" :border-bottom="false" placeholder="请输入大额行号" required />
|
|
</view>
|
|
|
|
<view class="apply-form-item" v-if="form.bankType == 2">
|
|
<u-field label="户名" v-model="form.bank_user_name" label-width="160" :border-bottom="false" placeholder="请输入户名" required />
|
|
</view>
|
|
|
|
<view class="apply-form-item">
|
|
<u-field label="银行名称" v-model="form.bankName" label-width="160" :border-bottom="false" placeholder="请输入银行名称" required />
|
|
</view>
|
|
|
|
<view class="apply-form-item">
|
|
<u-field label="银行卡号" v-model="form.bankCard" label-width="160" :border-bottom="false" placeholder="请输入银行卡号" required />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="bold lg apply-form-info">
|
|
其它信息
|
|
</view>
|
|
|
|
<!-- 定位 -->
|
|
<view class="apply-form-item">
|
|
<u-field label="地理位置" type="textarea" label-width="160" placeholder="获取位置信息" required v-model="form.address">
|
|
<view slot="right" class="primary send-code-btn br60 flex row-center" @tap="reLocationFunc">
|
|
<view class="xs">获取位置</view>
|
|
</view>
|
|
</u-field>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="apply-form-item">
|
|
<u-field label="备注" v-model="form.notes" label-width="160" placeholder="请输入备注信息" :border-bottom="false"/>
|
|
</view>
|
|
|
|
<!-- 同意协议 -->
|
|
<view class="apply-form-item flex m-t-10">
|
|
<u-checkbox shape="circle" :active-color="colorConfig.primary" v-model="isAgree">
|
|
<text class="sm">已阅读并同意</text>
|
|
</u-checkbox>
|
|
<router-link :to="{path: '/bundle/pages/server_explan/server_explan', query: {type: 6}}">
|
|
<text class="primary sm">《入驻协议》</text>
|
|
</router-link>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 提交申请 -->
|
|
<view style="padding: 30rpx 20rpx 30rpx 0;">
|
|
<button type="primary" size="lg" class="br60" @tap="$u.throttle(onSubmit, 1000)">提交申请</button>
|
|
</view>
|
|
|
|
<!-- 查阅记录 -->
|
|
<router-link to="/bundle/pages/local_setteld/record">
|
|
<view class="flex row-center muted">
|
|
<u-icon name="order" size="32" />
|
|
<view class="m-l-10">查看提交记录</view>
|
|
</view>
|
|
</router-link>
|
|
</view>
|
|
|
|
<u-select v-model="showCrftType1" mode="single-column" value-name="id" label-name="name" :list="crftType1List"
|
|
@confirm="confirmCrftType1"></u-select>
|
|
<u-select v-model="showCrftType2" mode="single-column" value-name="id" label-name="name" :list="crftType2List"
|
|
@confirm="confirmCrftType2"></u-select>
|
|
<u-select v-model="showAccntType1" mode="single-column" value-name="id" label-name="name" :list="accntType1List"
|
|
@confirm="confirmAccntType1"></u-select>
|
|
<u-popup v-model="showPopup" mode="top">
|
|
<view class="p-20">
|
|
<view class="bold lg">失败原因</view>
|
|
<view class="m-t-20">{{form.failReason}}</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapMutations, mapGetters } from 'vuex'
|
|
import { ossUpload } from '@/js_sdk/jason-alioss-upload/oss.js'
|
|
import {
|
|
getLocalLifeTemplateId,
|
|
getLocalStore,
|
|
addLocalStore
|
|
} from "@/api/shop"
|
|
import {
|
|
baseURL
|
|
} from '@/config/app'
|
|
import {
|
|
sendSms,
|
|
getMnpNotice
|
|
} from '@/api/app'
|
|
import {
|
|
SMSType
|
|
} from '@/utils/type'
|
|
export default {
|
|
data() {
|
|
return {
|
|
showPopup: false,
|
|
form: {
|
|
shopName: '',
|
|
shopLogo: '',
|
|
bankType: 1,
|
|
largeNumber: '',
|
|
bankName: '',
|
|
bankCard: '',
|
|
crftType1:'',
|
|
businessLicense: '',
|
|
crftNo1:'',
|
|
crftType2:'',
|
|
accntType1:'',
|
|
address: '',
|
|
selfPhoto: '',
|
|
idFront: '',
|
|
idBack: '',
|
|
bank_user_name: '',
|
|
notes: ''
|
|
},
|
|
isAgree: false,
|
|
codeTips: '',
|
|
shopCategory: [],
|
|
action: baseURL + '/api/file/formimage',
|
|
fileList: [],
|
|
storeState: -1,
|
|
localShop: [],
|
|
width: '320rpx',
|
|
height: '200rpx'
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getLocalStore()
|
|
},
|
|
methods: {
|
|
...mapActions(['initLocationFunc']),
|
|
...mapMutations(['setCityInfo']),
|
|
|
|
async getLocalStore() {
|
|
const {code, data, msg} = await getLocalStore()
|
|
if (code == 1 && data.local) {
|
|
this.localShop = data.local
|
|
this.form = data.local
|
|
|
|
this.storeState = data.local.store_state
|
|
}
|
|
},
|
|
|
|
// 证件类型
|
|
confirmCrftType1(e) {
|
|
const {value, label} = e[0]
|
|
this.form.crftType1 = value
|
|
},
|
|
|
|
// 法人/负责人身份证件类型
|
|
confirmCrftType2(e) {
|
|
const {value, label} = e[0]
|
|
this.form.crftType2 = value
|
|
},
|
|
|
|
// 结算账户类型
|
|
confirmAccntType1(e) {
|
|
const {value, label} = e[0]
|
|
this.form.accntType1 = value
|
|
this.accntType1Label = label
|
|
},
|
|
|
|
// 上传营业执照
|
|
uploadImage(){
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: async (file) => {
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
})
|
|
const {success,data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'local_life_bussines_license/')
|
|
if(success) {
|
|
this.form.businessLicense = data
|
|
uni.hideLoading()
|
|
} else {
|
|
uni.showToast({icon:'none', title: '上传失败'})
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 自拍照
|
|
uploadHandSelf() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: async (file) => {
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
})
|
|
const {success,data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'local_life_idcard/')
|
|
if(success) {
|
|
this.form.selfPhoto = data
|
|
uni.hideLoading()
|
|
} else {
|
|
uni.showToast({icon:'none', title: '上传失败'})
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 身份证正面
|
|
uploadIdCardFronted() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: async (file) => {
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
})
|
|
const {success,data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'local_life_idcard/')
|
|
if(success) {
|
|
this.form.idFront = data
|
|
uni.hideLoading()
|
|
} else {
|
|
uni.showToast({icon:'none', title: '上传失败'})
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 身份证反面
|
|
uploadIdCardBackend() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: async (file) => {
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
})
|
|
const {success,data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'local_life_idcard/')
|
|
if(success) {
|
|
this.form.idBack = data
|
|
uni.hideLoading()
|
|
} else {
|
|
uni.showToast({icon:'none', title: '上传失败'})
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 商家LOGO
|
|
uploadLogo() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: async (file) => {
|
|
uni.showLoading({
|
|
title: '上传中...'
|
|
})
|
|
const {success,data} = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'local_life_shop_logo/')
|
|
if(success) {
|
|
this.form.shopLogo = data
|
|
uni.hideLoading()
|
|
} else {
|
|
uni.showToast({icon:'none', title: '上传失败'})
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 选择账户类型
|
|
choseType(e) {
|
|
|
|
this.form.largeNumber = '';
|
|
if (e == 1) {
|
|
this.form.accountName = '';
|
|
}
|
|
},
|
|
|
|
// 提交表单
|
|
async onSubmit() {
|
|
const {form, isAgree, fileList} = this
|
|
const {shopName, shopLogo, bankType, largeNumber, bank_user_name, bankName, bankCard, businessLicense, crftNo1, selfPhoto, idFront, idBack, name, empowerPhone, address, notes} = this.form
|
|
const latitude = this.cityInfo.gcj02_lat
|
|
const longitude = this.cityInfo.gcj02_lng
|
|
|
|
let lstore_id = 0
|
|
if (this.localShop) {
|
|
lstore_id = this.localShop.lstore_id
|
|
}
|
|
|
|
// let flag = true;
|
|
// Object.keys(submitObj).forEach((key) => {
|
|
// if (submitObj[key] === '') {
|
|
// this.$toast({
|
|
// title: '请完善上方表单信息'
|
|
// })
|
|
// flag = false;
|
|
// return flag;
|
|
// }
|
|
// })
|
|
|
|
if (!shopName) return this.$toast({
|
|
title: '请输入商家名称'
|
|
})
|
|
|
|
// if (!shopLogo) return this.$toast({
|
|
// title: '请上传商家图标'
|
|
// })
|
|
|
|
if (bankType == 1 && !largeNumber) return this.$toast({
|
|
title: '请输入大额卡号'
|
|
})
|
|
|
|
if (bankType != 1 && !bank_user_name) return this.$toast({
|
|
title: '请输入户名'
|
|
})
|
|
|
|
if (!bankName) return this.$toast({
|
|
title: '请输入银行名称'
|
|
})
|
|
|
|
if (!bankCard) return this.$toast({
|
|
title: '请输入银行卡号'
|
|
})
|
|
|
|
// if (!businessLicense) return this.$toast({
|
|
// title: '请先上传营业执照'
|
|
// })
|
|
|
|
// if (!crftNo1) return this.$toast({
|
|
// title: '请填写社会信用代码'
|
|
// })
|
|
|
|
if (!selfPhoto) return this.$toast({
|
|
title: '请上传自拍照'
|
|
})
|
|
|
|
if (!idFront) return this.$toast({
|
|
title: '请上传身份证正面'
|
|
})
|
|
|
|
if (!idBack) return this.$toast({
|
|
title: '请上传身份证反面'
|
|
})
|
|
|
|
if (!name) return this.$toast({
|
|
title: '请填写商户联系人'
|
|
})
|
|
|
|
if (!empowerPhone) return this.$toast({
|
|
title: '请填写联系电话'
|
|
})
|
|
|
|
if (!address) return this.$toast({
|
|
title: '请填写地理位置'
|
|
})
|
|
|
|
if (!isAgree) return this.$toast({
|
|
title: '请先同意《入驻协议》'
|
|
})
|
|
|
|
// #ifdef MP-WEIXIN
|
|
// await this.getAuthMsg();
|
|
//#endif
|
|
uni.showLoading({
|
|
title: '正在提交...',
|
|
mask:true
|
|
})
|
|
const {
|
|
data,
|
|
code,
|
|
msg
|
|
} = await addLocalStore({shopName, shopLogo, bankType, largeNumber, bank_user_name, bankName, bankCard, businessLicense, crftNo1, selfPhoto, idFront, idBack, name, empowerPhone, address, lstore_id, latitude, longitude, notes})
|
|
if(code == 1) {
|
|
this.$toast({
|
|
title: msg
|
|
}, {
|
|
tab: 2,
|
|
url: '/bundle_b/pages/local_settled/record'
|
|
})
|
|
}
|
|
uni.hideLoading()
|
|
},
|
|
|
|
getAuthMsg() {
|
|
return new Promise(resolve => {
|
|
getLocalLifeTemplateId().then((res) => {
|
|
if (res.code == 1) {
|
|
uni.requestSubscribeMessage({
|
|
tmplIds: res.id,
|
|
});
|
|
}
|
|
})
|
|
});
|
|
},
|
|
|
|
async reLocationFunc() {
|
|
this.isLoading = true;
|
|
await this.initLocationFunc();
|
|
this.isLoading = false;
|
|
},
|
|
},
|
|
computed: {
|
|
...mapGetters(['cityInfo'])
|
|
},
|
|
watch: {
|
|
cityInfo: {
|
|
handler(val) {
|
|
this.form.address = this.cityInfo.address
|
|
},
|
|
deep: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.store-settled {
|
|
min-height: 100vh;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% auto;
|
|
overflow: hidden;
|
|
|
|
.content {
|
|
margin-top: 20rpx;
|
|
padding: 0 20rpx 31rpx;
|
|
|
|
.item {
|
|
background-color: #fff;
|
|
border-radius: 40rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.wait-pass {
|
|
&>view:last-child {
|
|
font-weight: bold;
|
|
margin-top: 20rpx;
|
|
font-size: 14px;
|
|
color: #b7b7b7;
|
|
}
|
|
}
|
|
|
|
.pass {
|
|
&>view:last-child {
|
|
font-weight: bold;
|
|
margin-top: 20rpx;
|
|
font-size: 14px;
|
|
color: #1BA035;
|
|
}
|
|
}
|
|
|
|
.no-pass {color: #FF2C3C;}
|
|
|
|
.apply-form {
|
|
border-radius: 8px;
|
|
padding: 20rpx 0 30rpx 26rpx;
|
|
|
|
.apply-form-info {
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.custom-apply-form-block {
|
|
border-bottom: 1px solid #f1f1f1;
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.custom-apply-form-item {
|
|
margin-left: 12rpx;
|
|
justify-content: flex-start;
|
|
flex: 0 0 80px;
|
|
padding: 4rpx 0rpx;
|
|
margin-top: 12rpx;
|
|
|
|
.required {
|
|
color: #FF2C3C;
|
|
margin-right: 4rpx;
|
|
}
|
|
}
|
|
|
|
.custom-apply-form-item + view {
|
|
margin-left: 12rpx;
|
|
padding: 4rpx 0;
|
|
}
|
|
|
|
.apply-form-upload {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
text-align: center;
|
|
border: 1px solid #d2d2d2;
|
|
margin-left: 12rpx;
|
|
|
|
image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
|
|
.apply-form-item {
|
|
.send-code-btn {
|
|
height: 56rpx;
|
|
width: 188rpx;
|
|
border: 1rpx solid $-color-primary;
|
|
}
|
|
}
|
|
|
|
.bank-type .fild-body > view:first-child {
|
|
display: none;
|
|
}
|
|
|
|
.primary-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background-color: $-color-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.login {
|
|
background: #fff;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.btn {
|
|
background-color: #09BB07;
|
|
width: 280rpx;
|
|
line-height: 70rpx;
|
|
margin: 40rpx auto 0;
|
|
|
|
image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|