You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
629 lines
16 KiB
629 lines
16 KiB
<template>
|
|
<!-- 商家入驻 -->
|
|
<view class="page1">
|
|
<view class="register-hero">
|
|
<view class="hero-title">商家入驻</view>
|
|
<view class="hero-subtitle">完善资料后提交审核，开启校园经营</view>
|
|
</view>
|
|
<view class="form-wrap">
|
|
<view class="content">
|
|
<view class="value">
|
|
<view class="name">
|
|
店铺名称
|
|
</view>
|
|
<view class="text">
|
|
<input type="text" v-model="formData.shopName" placeholder="输入店铺名称" />
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">
|
|
商家类型
|
|
</view>
|
|
<view class="text">
|
|
<uni-data-select class="uni-data-select" :localdata="merchantTypeList" v-model="formData.merchantType"
|
|
:clear="false" placeholder="请选择商家类型"></uni-data-select>
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">
|
|
学生商家
|
|
</view>
|
|
<view class="text" style="text-align: right;">
|
|
<label class="radio" style="padding-right: 20rpx;" @tap="clickRadio(1)">
|
|
<radio :checked="formData.isStudent == 1" /><text>是</text>
|
|
</label>
|
|
<label class="radio" @tap="clickRadio(0)">
|
|
<radio :checked="formData.isStudent == 0" /><text>否</text>
|
|
</label>
|
|
</view>
|
|
</view>
|
|
<view class="value" style="height: 200rpx;">
|
|
<view class="name" style="flex: 1;line-height: 200rpx;">
|
|
门头图
|
|
</view>
|
|
<view class="text" style="width: 180rpx;padding-top: 10rpx;" @tap="pictureAdd('mentou')">
|
|
<view class="upload-img" v-if="formData.shopIcon ==''" style="background: rgba(247, 248, 248, 0.6);text-align: center;line-height: 180rpx;">
|
|
<uni-icons type="camera" size="28" color="#777"></uni-icons>
|
|
</view>
|
|
<img :src="formData.shopIcon" v-if="formData.shopIcon !=''" alt="" class="upload-img">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="value">
|
|
<view class="name">
|
|
店铺坐标
|
|
</view>
|
|
<view class="text" @tap.stop="openPicker" style="text-align: right;">
|
|
<uni-icons type="location" color="#00BFFF" size="12"></uni-icons>
|
|
<text style="color:#00BFFF;">点击选择地址</text>
|
|
</view>
|
|
</view>
|
|
<view class="value" style="height:120rpx;">
|
|
<view class="name">
|
|
店铺地址
|
|
</view>
|
|
<view class="text" style="height:120rpx;line-height: 60rpx;">
|
|
<textarea name="" id="" v-model="formData.shopAddress" cols="30" rows="10"></textarea>
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">
|
|
所属区域
|
|
</view>
|
|
<view class="text" style="text-align: right;">
|
|
<picker :range="addressList" range-key="text" @change="regionChange">
|
|
<view class="picker-text" :class="{ placeholder: !formData.region }">
|
|
{{ formData.region || '请选择所属区域' }}
|
|
<uni-icons type="bottom" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="value">
|
|
<view class="name">
|
|
联系人
|
|
</view>
|
|
<view class="text">
|
|
<input type="text" v-model="formData.nickname" placeholder="输入联系人" />
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">
|
|
联系电话
|
|
</view>
|
|
<view class="text">
|
|
<input type="text" v-model="formData.mobile" placeholder="输入联系电话" />
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name" style="flex: 1;">
|
|
验证码
|
|
</view>
|
|
<view class="text code-row">
|
|
<input type="number" v-model="formData.code" placeholder="请输入验证码" />
|
|
<view class="code-btn" size="mini" type="default" @click="sendLoginSms" :disabled="choose" :class="choose == false ? 'hasChosen':'notChosen'">
|
|
{{ choose ? clock + '重新获取' : '获取验证码' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="value" style="height: 200rpx;">
|
|
<view class="name" style="flex: 1;line-height: 200rpx;">
|
|
法人身份证正反面
|
|
</view>
|
|
<view class="text" style="width: 380rpx;display: flex;padding-top: 10rpx;">
|
|
<view>
|
|
<view class="upload-img" v-if="formData.zhengzhao ==''" @tap="pictureAdd('zheng')"
|
|
style="background: rgba(247, 248, 248, 0.6);text-align: center;line-height: 180rpx;">
|
|
<uni-icons type="camera" size="28" color="#777"></uni-icons>
|
|
</view>
|
|
<img :src="formData.zhengzhao" v-if="formData.zhengzhao !=''" alt="" class="upload-img">
|
|
</view>
|
|
<view>
|
|
<view class="upload-img" @tap="pictureAdd('fan')" v-if="formData.fanzhao ==''" style="background: rgba(247, 248, 248, 0.6);text-align: center;line-height: 180rpx;margin-left: 20rpx;">
|
|
<uni-icons type="camera" size="28" color="#777"></uni-icons>
|
|
</view>
|
|
<img :src="formData.fanzhao" v-if="formData.fanzhao !=''" alt="" class="upload-img" style="margin-left: 20rpx;">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">
|
|
法人姓名
|
|
</view>
|
|
<view class="text">
|
|
<input type="text" v-model="formData.shopLename" placeholder="输入法人姓名" />
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">
|
|
法人身份证
|
|
</view>
|
|
<view class="text">
|
|
<input type="text" v-model="formData.shopLecard" placeholder="输入法人身份证" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="value" style="height: 200rpx;">
|
|
<view class="name" style="flex: 1;line-height: 200rpx;">
|
|
营业执照
|
|
</view>
|
|
<view class="text" style="width: 180rpx;padding-top: 10rpx;" @tap="pictureAdd('yingye')">
|
|
<view class="upload-img" v-if="formData.yingyezhizhao ==''" style="background: rgba(247, 248, 248, 0.6);text-align: center;line-height: 180rpx;">
|
|
<uni-icons type="camera" size="28" color="#777"></uni-icons>
|
|
</view>
|
|
<img :src="formData.yingyezhizhao" v-if="formData.yingyezhizhao !=''" alt="" class="upload-img">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="value" style="height: 200rpx;">
|
|
<view class="name" style="flex: 1;line-height: 200rpx;">
|
|
其他补充证照
|
|
</view>
|
|
<view class="text" @tap="pictureAdd('qita')" style="width: auto;display: flex;padding-top: 10rpx;position: relative;">
|
|
<view class="upload-img" style="background: rgba(247, 248, 248, 0.6);text-align: center;line-height: 180rpx;">
|
|
<uni-icons type="camera" size="28" color="#777"></uni-icons>
|
|
</view>
|
|
<img :src="formData.qita[0]" v-if="formData.qita.length>0" alt="" class="upload-img" style="margin-left: 20rpx;">
|
|
<view class="red-dot" v-if="formData.qita.length>0">{{formData.qita.length}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="value">
|
|
<view class="name">
|
|
支付宝账户
|
|
</view>
|
|
<view class="text">
|
|
<input type="text" v-model="formData.aliAccount" placeholder="邮箱/手机号" />
|
|
</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">
|
|
收款人姓名
|
|
</view>
|
|
<view class="text">
|
|
<input type="text" v-model="formData.aliName" placeholder="支付宝账号实名认证的姓名" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<button @tap.stop="submit()">保存</button>
|
|
</view>
|
|
|
|
<common-loading />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getArea
|
|
} from '@/utils/global.js'
|
|
import { reg } from '@/utils/global.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
addressList:[],
|
|
merchantTypeList: [{
|
|
value: 1,
|
|
text: '外卖商家'
|
|
}, {
|
|
value: 2,
|
|
text: '团购商家'
|
|
}],
|
|
formData: {
|
|
regionId:'',
|
|
region:'',
|
|
shopIcon:'',
|
|
shopAddress: '',
|
|
shopName:'',
|
|
aliAccount:'',
|
|
aliName:'',
|
|
nickname:'',
|
|
mobile:uni.getStorageSync('mobile')?uni.getStorageSync('mobile'):'',
|
|
code:'',
|
|
password:'123456',
|
|
zhengzhao:'',
|
|
yingyezhizhao:'',
|
|
fanzhao:'',
|
|
shopLename:'',
|
|
shopLecard:'',
|
|
qita:[],
|
|
shopImages:'',
|
|
id:'',
|
|
merchantType:1, //1外卖商家 2团购商家
|
|
isStudent:0, //1学生商家 0不是学生
|
|
unionid:''
|
|
},
|
|
choose:false,
|
|
isChoose:false,
|
|
clock: 60 ,// 倒计时
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
|
|
},
|
|
onShow(){
|
|
this.getRegionList()
|
|
this.formData.mobile = uni.getStorageSync('mobile')?uni.getStorageSync('mobile'):''
|
|
},
|
|
methods: {
|
|
openPicker() {
|
|
let that = this;
|
|
uni.chooseLocation({
|
|
latitude:'38.335974',
|
|
longitude:'116.805783',
|
|
success: function(res) {
|
|
if (res.name != '') {
|
|
let aaa = getArea(res.address)
|
|
that.formData.shopAddress = aaa.province + aaa.city + aaa.country + aaa.address + res.name
|
|
} else {
|
|
that.tui.toast("微信地址选择器调用失败，请重新选择！")
|
|
}
|
|
},
|
|
fail: function(res) {
|
|
|
|
}
|
|
});
|
|
},
|
|
pictureAdd(type) {
|
|
let that = this
|
|
uni.chooseMedia({
|
|
count: type == 'qita'?9:1,
|
|
mediaType: ['image'],
|
|
sourceType: ['camera', 'album'],
|
|
success(res) {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
})
|
|
for (let i = 0; i < res.tempFiles.length; i++) {
|
|
that.upLoadFile(res.tempFiles[i].tempFilePath,type)
|
|
}
|
|
|
|
}
|
|
})
|
|
},
|
|
async upLoadFile(path,type) {
|
|
let that = this;
|
|
let hiver_token = uni.getStorageSync("hiver_token")
|
|
await uni.uploadFile({
|
|
url: that.tui.interfaceUrl() + '/upload/file',
|
|
filePath: path,
|
|
name: 'file',
|
|
header: {
|
|
"content-type": "multipart/form-data",
|
|
'accessToken': hiver_token
|
|
},
|
|
formData: {},
|
|
success: (uploadFileRes) => {
|
|
let pathData = JSON.parse(uploadFileRes.data)
|
|
if(type == 'zheng'){
|
|
that.formData.zhengzhao = pathData.result
|
|
}else if(type == 'fan'){
|
|
that.formData.fanzhao = pathData.result
|
|
}else if(type == 'yingye'){
|
|
that.formData.yingyezhizhao = pathData.result
|
|
}else if(type == 'mentou'){
|
|
that.formData.shopIcon = pathData.result
|
|
}else{
|
|
that.formData.qita.push(pathData.result)
|
|
}
|
|
|
|
that.$forceUpdate()
|
|
},
|
|
fail: (err) => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: JSON.stringify(err),
|
|
icon: 'none'
|
|
})
|
|
}
|
|
});
|
|
await setTimeout(res => {
|
|
uni.hideLoading();
|
|
}, 1000)
|
|
},
|
|
// 触发提交表单
|
|
submit() {
|
|
let that = this;
|
|
let url = ''
|
|
let verify = this.verifyField()
|
|
if(verify != true){
|
|
uni.showToast({
|
|
title: verify + '不能为空',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (that.formData.id) {
|
|
url = '/app/shop/updateShopIconAndRemark'
|
|
} else {
|
|
url = '/auth/shopRegister'
|
|
}
|
|
this.formData.unionid = uni.getStorageSync('unionid')
|
|
this.formData.shopImages = this.formData.zhengzhao + '@@' + this.formData.fanzhao + '@@' + this.formData.yingyezhizhao + '@@' + JSON.stringify(this.formData.qita)
|
|
that.tui.request(url, "post", this.formData, false, true).then((res1) => {
|
|
if (res1.code == 200) {
|
|
uni.setStorageSync('schoolShop',res1.result)
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '提交成功，请等待管理员审核',
|
|
success: function (res) {
|
|
uni.navigateBack()
|
|
}
|
|
});
|
|
} else {
|
|
uni.showToast({
|
|
title: res1.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
clickRadio(type){
|
|
this.formData.isStudent = type
|
|
},
|
|
//获取区域
|
|
getRegionList() {
|
|
let that = this;
|
|
this.tui.request('/app/shopArea/getByParentId/0', 'get', {}, false, false, true).then((res) => {
|
|
if (res.code !== 200) return
|
|
that.addressList = (Array.isArray(res.result) ? res.result : []).map(item => {
|
|
return {
|
|
value: item.id,
|
|
text: item.title || item.name || item.regionName || item.areaName || '未命名区域'
|
|
}
|
|
})
|
|
})
|
|
},
|
|
regionChange(e){
|
|
const index = e.detail.value
|
|
const region = this.addressList[index]
|
|
if (region) {
|
|
this.formData.regionId = region.value;
|
|
this.formData.region = region.text
|
|
}
|
|
},
|
|
sendLoginSms(){ // 获取验证码
|
|
if (this.choose) return
|
|
this.isChoose = false
|
|
if(reg(this.formData.mobile,this.clock) && this.isChoose == false){
|
|
this.choose = true
|
|
this.setTime()
|
|
this.tui.request("/common/captcha/sendRegistSms/"+this.formData.mobile, "GET", {
|
|
|
|
}).then((res) => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: "发送成功",
|
|
icon: 'success'
|
|
})
|
|
}else{
|
|
this.tui.toast(res.message)
|
|
}
|
|
}).catch((res) => {
|
|
this.tui.toast(res)
|
|
})
|
|
}else if(reg(this.formData.mobile,this.clock) && this.isChoose == true){
|
|
|
|
}
|
|
},
|
|
setTime(){// 倒计时函数
|
|
if(this.clock == 0){
|
|
this.clock = 60
|
|
this.choose = false
|
|
return
|
|
}else{
|
|
this.clock--
|
|
if(this.clock < 10){this.clock = '0'+this.clock}
|
|
}
|
|
setTimeout(() => { this.setTime() },1000)
|
|
},
|
|
verifyField(){
|
|
let msg = ''
|
|
let data = this.formData
|
|
|
|
if(data.shopAddress == ''){
|
|
msg = '地址'
|
|
}else if(data.shopName == ''){
|
|
msg = '店铺名'
|
|
}else if(data.aliAccount == ''){
|
|
msg = '支付宝账号'
|
|
}else if(data.aliName == ''){
|
|
msg = '收款人姓名'
|
|
}else if(data.nickname == ''){
|
|
msg = '联系人'
|
|
}else if(data.mobile == ''){
|
|
msg = '联系电话'
|
|
}else if(data.code == ''){
|
|
msg = '验证码'
|
|
}else if(data.zhengzhao == ''){
|
|
msg = '法人身份证正面'
|
|
}else if(data.yingyezhizhao == ''){
|
|
msg = '营业执照'
|
|
}else if(data.fanzhao == ''){
|
|
msg = '法人身份证反面'
|
|
}else if(data.shopLename == ''){
|
|
msg = '法人姓名'
|
|
}else if(data.shopLecard == ''){
|
|
msg = '法人身份证'
|
|
}
|
|
return msg == ""?true:msg
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page,.page1{
|
|
font-size: 24rpx;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
background: #F5F8F5;
|
|
color: #00231C;
|
|
overflow: scroll;
|
|
}
|
|
.register-hero{
|
|
width: 100%;
|
|
height: 280rpx;
|
|
padding: 88rpx 34rpx 0;
|
|
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
|
|
background-size: cover;
|
|
box-sizing: border-box;
|
|
}
|
|
.hero-title{
|
|
font-size: 44rpx;
|
|
line-height: 64rpx;
|
|
font-weight: 700;
|
|
}
|
|
.hero-subtitle{
|
|
margin-top: 10rpx;
|
|
font-size: 26rpx;
|
|
color: rgba(0, 35, 28, 0.68);
|
|
}
|
|
.form-wrap{
|
|
width: 94%;
|
|
margin: -42rpx auto 0;
|
|
padding-bottom: 24rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.content{
|
|
width: 100%;
|
|
height: auto;
|
|
background: #fff;
|
|
margin-bottom: 22rpx;
|
|
border-radius: 18rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 35, 28, 0.06);
|
|
overflow: hidden;
|
|
}
|
|
.value{
|
|
width: 100%;
|
|
min-height: 92rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 92rpx;
|
|
border-top: 1px solid #eef2ef;
|
|
padding: 0 24rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.value:first-child{
|
|
border-top: none;
|
|
}
|
|
.name{
|
|
width: 180rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #00231C;
|
|
}
|
|
.text{
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.text input{
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
}
|
|
.text textarea{
|
|
width: 100%;
|
|
height: 120rpx;
|
|
line-height: 40rpx;
|
|
padding-top:20rpx;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
}
|
|
.picker-text{
|
|
min-height: 92rpx;
|
|
line-height: 92rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
}
|
|
.picker-text.placeholder{
|
|
color: #6a6a6a;
|
|
}
|
|
.code-row{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 360rpx;
|
|
}
|
|
.code-row input{
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
text-align: center;
|
|
}
|
|
.upload-img {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
.red-dot{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
border-radius: 40rpx;
|
|
background: red;
|
|
color: #fff;
|
|
position: absolute;
|
|
top: 10rpx;
|
|
right: 0;
|
|
}
|
|
button {
|
|
width:95%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
font-size: 36rpx;
|
|
color: #00231C;
|
|
background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
|
|
border-radius: 20rpx;
|
|
margin: 40rpx auto;
|
|
font-weight: 700;
|
|
box-shadow: 0 10rpx 24rpx rgba(0, 35, 28, 0.12);
|
|
}
|
|
.hasChosen{
|
|
color: #A6FFEA;
|
|
border: none;
|
|
background: #00231C;
|
|
}
|
|
.code-btn{
|
|
font-size: 24rpx;
|
|
background: #00231C;
|
|
color: #A6FFEA;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 20rpx;
|
|
flex: 0 0 170rpx;
|
|
width: 170rpx;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
.uni-select{
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
}
|
|
.uni-stat__select {
|
|
height: 100% !important;
|
|
}
|
|
.uni-data-select{
|
|
text-align: right;
|
|
}
|
|
.uni-data-select .uni-select{
|
|
justify-content: flex-end;
|
|
}
|
|
.uni-data-select .uni-select__input-text{
|
|
text-align: right;
|
|
}
|
|
</style>
|