mall_client/zyhs3_uniapp/pages/merchants/settleIn/index.vue

566 lines
17 KiB
Vue
Raw Permalink Normal View History

2026-03-13 07:50:35 +00:00
<style lang="scss">
.container {
padding: 30rpx;
}
.form {
margin-bottom: 20rpx;
.margin_b {
margin-bottom: 40rpx;
}
.shop_avatar {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
background-color: rgba(240, 85, 73, 0.2);
.zyhs {
font-size: 50rpx;
color: rgba(240, 85, 73, 0.5);
}
image {
width: 110rpx;
height: 110rpx;
border-radius: 50%;
}
}
.zyhs-dizhi {
margin-left: 20rpx;
color: rgba(240, 85, 73, 1);
}
.form_item {
}
.tips {
color: rgba(240, 85, 73, 1);
}
input {
flex: 1;
font-size: 28rpx;
text-align: right;
}
textarea {
width: 100%;
height: 200rpx;
}
.upload_box {
width: 300rpx;
height: 200rpx;
position: relative;
.border {
position: absolute;
color: rgba(145, 46, 47, 1);
}
.zyhs-yuanjiaolt {
left: 0;
top: 0;
}
.zyhs-yuanjiaort {
right: 0;
top: 0;
}
.zyhs-yuanjiaolb {
left: 0;
bottom: 0;
}
.zyhs-yuanjiaorb {
right: 0;
bottom: 0;
}
.shop_avatar {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background-color: rgba(240, 85, 73, 0.5);
z-index: 2;
.zyhs {
font-size: 50rpx;
color: #fff !important;
color: rgba(240, 85, 73, 0.5);
}
}
.zyhs-shenfenzhengzhengmian, .zyhs-shenfenzhengbeimian {
font-size: 180rpx;
}
.image {
image {
width: 286rpx;
height: 180rpx;
border-radius: 20rpx;
}
}
}
}
.license {
.image {
width: 286rpx;
height: 180rpx;
border-radius: 20rpx;
background-color: rgba(240, 85, 73, 0.2);
}
}
.agreement {
color: rgba(240, 85, 73, 1);
margin-left: 10rpx;
}
.btn_submit {
padding: 20rpx 0;
border-radius: 40rpx;
margin-top: 30rpx;
background: linear-gradient(90deg, rgb(235, 109, 78), rgb(233, 51, 36));
}
</style>
<template>
<view class="container">
<view class="bg-w border-radius-16 form padding30 font28">
<view class="form_item flex flex-between margin_b" @click="selectLogo('logoImage')">
店铺头像
<view class="shop_avatar flex flex-center">
<text v-if="!logoImage" class="zyhs zyhs-xiangji1fill"></text>
<image v-else :src="logoImage"></image>
</view>
</view>
<view class="form_item flex flex-between margin_b">
商家名称
<input type="text" placeholder="请输入商家名称" :maxlength="30" v-model="infor.name" >
</view>
<view class="form_item flex flex-between margin_b">
信用代码
<input type="text" placeholder="请输入企业社会信用代码" :maxlength="30" v-model="socialCreditCode" >
</view>
<view class="form_item flex flex-between" @click="goPage('/pages/merchants/settleIn/industry')">
所属行业
<text class="color-b9">请选择 <text class="zyhs zyhs-jiantou"></text></text>
</view>
</view>
<view class="bg-w border-radius-16 form padding30 font28">
<view class="form_item flex flex-between margin_b">
真实姓名
<input type="text" placeholder="和身份证上的名字保持一致">
</view>
<view class="form_item flex flex-between">
身份证号
<input type="text" placeholder="请输入身份证号">
</view>
</view>
<view class="bg-w border-radius-16 form padding30 font28">
<view class="form_item flex flex-between margin_b">
身份证正面
<text class="tips">上传的图片大小控制在3M以内!</text>
</view>
<view class="form_item flex flex-space-between color-b9">
上传身份证正面
<view class="upload_box flex flex-center" @click="uplodingImg('foodBusinessLicenseImg')">
<text class="zyhs zyhs-yuanjiaolt border"></text></text>
<text class="zyhs zyhs-yuanjiaort border"></text></text>
<text class="zyhs zyhs-yuanjiaolb border"></text></text>
<text class="zyhs zyhs-yuanjiaorb border"></text></text>
<view class="shop_avatar flex flex-center">
<text class="zyhs zyhs-xiangji1fill color-w"></text>
</view>
<view class="image flex flex-center">
<text class="zyhs zyhs-shenfenzhengzhengmian" v-if="!foodBusinessLicenseImg"></text>
<image :src="foodBusinessLicenseImg" mode="" class="image" v-else></image>
</view>
</view>
</view>
</view>
<view class="bg-w border-radius-16 form padding30 font28">
<view class="form_item flex flex-between margin_b">
身份证背面
<text class="tips">上传的图片大小控制在3M以内!</text>
</view>
<view class="form_item flex flex-space-between color-b9">
身份证背面
<view class="upload_box flex flex-center" @click="uplodingImg('legalIdNumberBackImg')">
<text class="zyhs zyhs-yuanjiaolt border"></text></text>
<text class="zyhs zyhs-yuanjiaort border"></text></text>
<text class="zyhs zyhs-yuanjiaolb border"></text></text>
<text class="zyhs zyhs-yuanjiaorb border"></text></text>
<view class="shop_avatar flex flex-center">
<text class="zyhs zyhs-xiangji1fill color-w"></text>
</view>
<view class="image flex flex-center">
<text v-if="!legalIdNumberBackImg" class="zyhs zyhs-shenfenzhengbeimian"></text>
<image :src="legalIdNumberBackImg" mode="" class="image" v-else></image>
</view>
</view>
</view>
</view>
<view class="bg-w border-radius-16 form padding30 font28 ">
<view class="form_item flex flex-between margin_b" @click="visible = true">
营业地址(城市)
<text class="color-b9">{{pickerText||'请选择城市'}} <text class="zyhs zyhs-jiantou"></text></text>
</view>
<view class="form_item flex flex-between margin_b">
营业地址乡镇
<text class="color-b9">选择街道或城市 <text class="zyhs zyhs-jiantou"></text></text>
</view>
<view class="form_item flex flex-between margin_b">
详细地址
<input v-model="infor.addressDetails" type="text" placeholder="请输入详细地址" />
</view>
</view>
<view class="bg-w border-radius-16 form padding30 font28 license">
<view class="form_item flex flex-between margin_b">
上传营业执照
<text class="tips">上传的图片大小控制在3M以内!</text>
</view>
<view class="form_item flex flex-space-between color-b9">
上传营业执照
<view class="upload_box flex flex-center" @click="uplodingImg('businessLicenseImg')">
<text class="zyhs zyhs-yuanjiaolt border"></text></text>
<text class="zyhs zyhs-yuanjiaort border"></text></text>
<text class="zyhs zyhs-yuanjiaolb border"></text></text>
<text class="zyhs zyhs-yuanjiaorb border"></text></text>
<view class="shop_avatar flex flex-center">
<text class="zyhs zyhs-xiangji1fill color-w"></text>
</view>
<view class="image">
<image :src="businessLicenseImg" mode="" class="image" v-if="businessLicenseImg"></image>
</view>
</view>
</view>
</view>
<view class="bg-w border-radius-16 form padding30 font28 ">
<view class="form_item flex flex-between margin_b">
手机号
<input v-model="infor.mobile" type="text" placeholder="请输入手机号" />
</view>
<view class="form_item flex flex-between margin_b">
邮箱
<input type="text" placeholder="请输入邮箱" />
</view>
</view>
<view class="bg-w border-radius-16 form padding30 font28 ">
<view class="form_item flex flex-between">
是否同时是线下商家
<view class="flex">
<radio-group @change="radioChange" class="flex">
<label class="flex" v-for="(item, index) in radioList" :key="item.value">
<view>
<radio
style="transform:scale(0.7)"
color="rgba(240, 85, 73, 1);"
:value="item.value"
:checked="index === radio" />
</view>
<view>{{item.name}}</view>
</label>
</radio-group>
</view>
</view>
</view>
<block v-if="radio == 1">
<view class="bg-w border-radius-16 form padding30 font28">
<view class="form_item flex flex-between margin_b">
店铺描述
</view>
<view class="form_item flex flex-between">
<textarea v-model="infor.introduce" class="font28" name="" id="" cols="30" rows="10" placeholder="请填写店铺简介"></textarea>
</view>
</view>
<view class="bg-w border-radius-16 form padding30 font28" @click="handlerStoreAddress">
<view class="form_item flex flex-between">
详情地址
<text class="color-b9">{{ infor.storeAddress || '请选择详细地址'}}<text class="zyhs zyhs-dizhi"></text></text>
</view>
</view>
</block>
<view class="flex font24 flex-align-center">
<checkbox-group class="flex flex-align-center">
<label class="flex flex-align-center">
<checkbox
style="transform:scale(0.7)"
color="rgba(240, 85, 73, 1);"
:checked="isAgree"/>提交即视为同意
</label>
</checkbox-group>
<text class="agreement">中亿华商服务协议</text>
</view>
<view @click="commit" class="btn_submit flex flex-center color-w">提交</view>
<w-picker
:visible.sync="visible"
ref="mpvueCityPicker"
mode="region"
:value="positionValue"
@confirm="onConfirm"
themeColor="#3a2397"
></w-picker>
<avatar @upload="myUpload" ref="avatar"></avatar>
</view>
</template>
<script>
import url from '@/common/http/url.js';
import upload from "@/common/http/upload.js";
import publics from "@/common/utils/public.js"
import wPicker from "@/components/w-picker/w-picker.vue"
import avatar from "@/components/yq-avatar/yq-avatar.vue";
import { mapState } from "vuex"
export default {
components: { wPicker, avatar },
data() {
return {
radioList: [
{
value: '0',
name: '否'
},
{
value: '1',
name: '是'
}
],
radio: 0,
isAgree: false,
licenseImg: this.$staticUrl + 'merchants/license.png',
businessImg: this.$staticUrl + 'merchants/business.png',
visible:false,
loading: false,
positionValue: [],
pickerText: '',
infor: {},
callbackList: [],
logoImage: "", // 店铺logo
businessLicenseImg: "", // 营业执照
foodBusinessLicenseImg: "", // 食品经营许可证
legalIdNumberJustImg: "", // 法人身份证正面
legalIdNumberBackImg: "", // 法人身份证反面
legalHealthCertificateImg: "", // 法人健康证
othreOneImg: "", // 其它图片01
othreTwoImg: "", // 其它图片02
othreThreeImg: "", // 其它图片03
isEdit: false
};
},
onLoad(opt){
let examineData = uni.getStorageSync("examineData")
uni.removeStorageSync("examineData")
if (examineData) {
if (examineData.status === 3) this.isEdit = true
this.infor = examineData
delete this.infor.updateTime
delete this.infor.createTime
this.logoImage = examineData.logoImage
this.businessLicenseImg = examineData.businessLicenseImg
this.foodBusinessLicenseImg = examineData.foodBusinessLicenseImg
this.legalIdNumberJustImg = examineData.legalIdNumberJustImg
this.legalIdNumberBackImg = examineData.legalIdNumberBackImg
this.legalHealthCertificateImg = examineData.legalHealthCertificateImg
this.othreOneImg = examineData.othreOneImg
this.othreTwoImg = examineData.othreTwoImg
this.othreThreeImg = examineData.othreThreeImg
let addrObj = publics.getLngAndLatByCode(examineData.threeAdcode)
if (addrObj){
this.pickerText = ""
addrObj.map(v=>{
this.pickerText = this.pickerText + v.name
this.positionValue.push(v.name)
})
}
}
},
onShow () {
this.getMyAsset();
},
computed: {
...mapState(["locationObj"])
},
methods:{
radioChange (e) {
let { value } = e.detail;
this.radio = value
},
goPage (path) {
console.log('path', path)
this.$navigateTo(path)
},
commit(){
let _this = this
if (this.regForm()) return this.$msg(this.regForm())
this.loading = true
let num = 0
uni.showLoading({
mask: true
});
this.callbackList.forEach(v =>{
upload.getOssSignature(v.path, 10, 1).then(data=>{
upload.uploadImageOss(data, false).then(list=>{
num++
_this.infor[v.name] = JSON.stringify({
resourceTemporaryUUID: list[0].resourceTemporaryUUID,
ossWidth: v.ossWidth,
ossHeight: v.ossHeight,
size: v.size
})
if (num === _this.callbackList.length) {
uni.hideLoading();
let path = this.isEdit ? url.store.updateApply : url.store.submitApply
_this.$http('POST', path, _this.infor).then(res =>{
uni.showModal({
content: '商户入驻申请提交成功,请耐心等待。',
showCancel: false,
success: e => {
_this.$navigateBack(2)
}
});
}).catch(()=>{
_this.loading = false
})
}
})
})
})
},
regForm(){
if (!this.logoImage) {
return "请上传店铺头像"
} else if (!this.infor.name){
return "请输入商家名称"
} else if (!this.infor.mobile){
return "请输入商家联系电话"
} else if (!this.pickerText){
return "请选择商家所在位置"
} else if (!this.infor.nameOfEnterprise){
return "请输入企业名称"
} else if (!this.infor.socialCreditCode){
return "请输入企业社会信用代码"
} else if (!this.businessLicenseImg){
return "请上传营业执照照片"
} else if (!this.foodBusinessLicenseImg){
return "请上传食品经营许可证照"
} else if (!this.legalIdNumberJustImg){
return "法人身份证正面照"
} else if (!this.legalIdNumberBackImg){
return "法人身份证反面照"
} else {
return false
}
},
onConfirm(e) {
let _this = this
this.pickerText = e.result
this.infor.oneAdcode = e.obj.province.value
this.infor.twoAdcode = e.obj.city.value
this.infor.threeAdcode = e.obj.area.value
let addressInfo = e.obj.area
uni.chooseLocation({
longitude: addressInfo.centerLng.toString(),
latitude: addressInfo.centerLat.toString(),
success(res) {
if (res.address.startsWith(e.result)){
_this.infor.addressDetails = res.address.split(e.result)[1]
} else if (res.name === '地图位置' || res.name === res.address){
_this.infor.addressDetails = res.address
} else {
_this.infor.addressDetails = res.name + res.address
}
_this.infor.lng = res.longitude
_this.infor.lat = res.latitude
_this.$forceUpdate()
}
})
},
handlerStoreAddress () {
let _this = this
uni.chooseLocation({
longitude: this.locationObj.longitude,
latitude: this.locationObj.latitude,
success(res) {
console.log('res', res)
if (res.name === '地图位置' || res.name === res.address){
_this.infor.storeAddress = res.address
} else {
_this.infor.storeAddress = res.name + res.address
}
_this.$forceUpdate()
}
})
},
selectDetail(){
let _this = this
uni.chooseLocation({
longitude: _this.addressInfo.centerLng.toString(),
latitude: _this.addressInfo.centerLat.toString(),
success(res) {
if (res.address.startsWith(_this.pickerText)){
_this.infor.addressDetails = res.address.split(_this.pickerText)[1]
} else if (res.name === '地图位置' || res.name === res.address){
_this.infor.addressDetails = res.address
} else {
_this.infor.addressDetails = res.name + res.address
}
_this.infor.lng = res.longitude
_this.infor.lat = res.latitude
_this.$forceUpdate()
}
})
},
// 上传图片
selectLogo(){
upload.showAvatarModal(this, 500, 500)
},
myUpload(rsp) {
let _this = this
this.callbackList.forEach((v, i)=>{
if (v.name === "logoImage") {
this.callbackList.splice(i, 1)
return false
}
})
this.logoImage = rsp.path
uni.getImageInfo({
src: rsp.path,
success: function (image) {
_this.callbackList.push({
name: "logoImage",
path: rsp.path,
ossWidth: image.width,
ossHeight: image.height
})
}
});
},
uplodingImg (name) {
console.log('name', name)
let _this = this
this.callbackList.forEach((v, i)=>{
if (v.name === name) {
this.callbackList.splice(i, 1)
return false
}
})
uni.chooseImage({
count: 1,
success: (res) => {
let tempFilePath = res.tempFilePaths[0]
_this[name] = tempFilePath
uni.getImageInfo({
src: tempFilePath,
success: function (image) {
_this.callbackList.push({
name: name,
path: tempFilePath,
ossWidth: image.width,
ossHeight: image.height,
size: res.tempFiles[0].size
})
}
});
}
})
},
keydown(){
return false
}
}
}
</script>