566 lines
17 KiB
Vue
566 lines
17 KiB
Vue
<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>
|
|
|