5 changed files with 582 additions and 51 deletions
@ -1,9 +1,527 @@ |
|||
<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> |
|||
|
|||
<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> |
|||
|
|||
<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> |
|||
Loading…
Reference in new issue