5 changed files with 582 additions and 51 deletions
@ -1,9 +1,527 @@ |
|||||
<template> |
<template> |
||||
<!-- 商家注册 --> |
<!-- 商家入驻 --> |
||||
|
<view class="page1"> |
||||
|
<view class="content" style="border-top: 1px solid #eee;"> |
||||
|
<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" 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: #eee;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;"> |
||||
|
<uni-data-select class="uni-data-select" :localdata="addressList" v-model="formData.regionId" |
||||
|
placeholder="请选择所属区域" @change="regionChange"></uni-data-select> |
||||
|
</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" style="display: flex;width: 340rpx;"> |
||||
|
<input type="number" v-model="formData.code" placeholder="请输入验证码" style="width: 200rpx;text-align: center;" /> |
||||
|
<view class="code-btn" style="font-size: 24rpx;" 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: #eee;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: #eee;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: #eee;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: #eee;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> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
import { |
||||
|
getArea |
||||
|
} from '@/utils/global.js' |
||||
|
import { reg } from '@/utils/global.js' |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
addressList:[], |
||||
|
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:'', |
||||
|
isStudent:0, //1学生商家 0不是学生 |
||||
|
unionid:'' |
||||
|
}, |
||||
|
choose:false, |
||||
|
isChoose:false, |
||||
|
clock: 60 ,// 倒计时 |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
|
||||
|
}, |
||||
|
onShow(){ |
||||
|
this.getRegionList() |
||||
|
}, |
||||
|
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: ['album'], |
||||
|
success(res) { |
||||
|
uni.showLoading({ |
||||
|
title: '加载中...', |
||||
|
mask: true |
||||
|
}) |
||||
|
for (let i = 0; i < res.tempFiles.length; i++) { |
||||
|
console.log('type是什么',type) |
||||
|
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 = res.result.map(item => { |
||||
|
return { |
||||
|
value: item.id, |
||||
|
text: item.title |
||||
|
} |
||||
|
}) |
||||
|
console.log(that.addressList) |
||||
|
}) |
||||
|
}, |
||||
|
regionChange(e){ |
||||
|
for (let i = 0; i < this.addressList.length; i++) { |
||||
|
if (this.addressList[i].value == e) { |
||||
|
this.formData.regionId = e; |
||||
|
this.formData.region = this.addressList[i].text |
||||
|
} |
||||
|
} |
||||
|
console.log(this.region) |
||||
|
}, |
||||
|
sendLoginSms(){ // 获取验证码 |
||||
|
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> |
</script> |
||||
|
|
||||
<style> |
<style> |
||||
|
page,.page1{ |
||||
|
font-size: 24rpx; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #eee; |
||||
|
overflow: scroll; |
||||
|
} |
||||
|
.content{ |
||||
|
width: 100%; |
||||
|
height: auto; |
||||
|
background: #fff; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
.value{ |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
display: flex; |
||||
|
line-height: 80rpx; |
||||
|
border-top: 1px solid #eee; |
||||
|
padding: 0 20rpx; |
||||
|
} |
||||
|
.name{ |
||||
|
width: 20%; |
||||
|
} |
||||
|
.text{ |
||||
|
width: 80%; |
||||
|
} |
||||
|
.text input{ |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.text textarea{ |
||||
|
height: 120rpx; |
||||
|
line-height: 40rpx; |
||||
|
padding-top:20rpx; |
||||
|
} |
||||
|
.upload-img { |
||||
|
width: 180rpx; |
||||
|
height: 180rpx; |
||||
|
} |
||||
|
.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: #fff; |
||||
|
background: #5fd9ee; |
||||
|
border-radius: 20rpx; |
||||
|
margin: 40rpx auto; |
||||
|
} |
||||
|
.hasChosen{ |
||||
|
height: 74rpx; |
||||
|
line-height: 74rpx; |
||||
|
color: #fff; |
||||
|
border: none; |
||||
|
background: #5fd9ee; |
||||
|
} |
||||
|
.code-btn{ |
||||
|
font-size: 24rpx; |
||||
|
background: #00BFFF; |
||||
|
color: #fff; |
||||
|
height: 60rpx; |
||||
|
line-height: 60rpx; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 0 10rpx; |
||||
|
margin-top: 10rpx; |
||||
|
width: 140rpx; |
||||
|
} |
||||
|
.uni-select{ |
||||
|
border: none !important; |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
.uni-stat__select { |
||||
|
height: 100% !important; |
||||
|
} |
||||
</style> |
</style> |
||||
Loading…
Reference in new issue