604 lines
16 KiB
Vue
604 lines
16 KiB
Vue
<template>
|
||
<view class="">
|
||
|
||
|
||
<view class="page-content padding">
|
||
<!-- 步骤条 -->
|
||
<view class="regist-top">
|
||
<view class="regist-top-1 align-center flex">
|
||
<view class="" >
|
||
<image src="@/static/one.png" class="top-image-1" style="" mode=""></image>
|
||
</view>
|
||
<view class="">
|
||
<image src="@/static/arrow-right.png" class="top-image-2" style="" mode=""></image>
|
||
</view>
|
||
<view class="" >
|
||
<image src="@/static/two.png" class="top-image-1" mode=""></image>
|
||
</view>
|
||
<view class="">
|
||
<image src="@/static/arrow-right.png" mode="" class="top-image-2"></image>
|
||
</view>
|
||
<view class="" >
|
||
<image src="@/static/three.png" class="top-image-1" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="regist-top-2 align-center flex">
|
||
<view class="">提交申请</view>
|
||
<view class="">平台审核</view>
|
||
<view class="">享受返利</view>
|
||
</view>
|
||
</view>
|
||
<view class="regist-consult align-center flex justify-between">
|
||
<view class="" style="width: 60%;">入驻助手,帮你解决入驻问题,快速上手赢取品牌返利。</view>
|
||
<view class="">
|
||
<button style="background:#D42E78;width:124rpx;font-size: 24rpx;color: #FFF;">咨询</button>
|
||
</view>
|
||
</view>
|
||
<view class="reg-materials">
|
||
<view class="font-32 materials-top fontw-6">所需材料</view>
|
||
<view class="align-center flex justify-between" style="margin-top: 28rpx;">
|
||
<view class="" style="width: 60%;">
|
||
<view class="font-28" >1.营业执照</view>
|
||
<view class="">需提供有效期内商家本人的,与门头照片相符合的营业执照.</view>
|
||
</view>
|
||
<view class="">
|
||
<image src="@/static/bg/bgs.png" mode="" style="width: 166rpx;height:112rpx"></image>
|
||
</view>
|
||
</view>
|
||
<view class="align-center flex justify-between" style="margin-top: 28rpx;">
|
||
<view class="" style="width: 60%;">
|
||
<view class="font-28">2.门头照片</view>
|
||
<view class="">需提供营业执照对应的门店,门头照片一张.</view>
|
||
</view>
|
||
<view class="">
|
||
<image src="@/static/bg/bgs.png" mode="" style="width: 166rpx;height:112rpx"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 门店资料 -->
|
||
<view class="regist-store">
|
||
<view class="font-32 fontw-6" style="margin-bottom: 28rpx;">门店资料</view>
|
||
<view class="flex-col">
|
||
<!-- <view class="label">门店地址</view> -->
|
||
<view class="flex justify-between align-center zd-address" @click="getMyLocation">
|
||
<input v-model="form.address" placeholder="门店地址" class="flex-1"></input>
|
||
<view style="height: 96rpx;line-height: 96rpx;width: 60rpx;">
|
||
<text class="cuIcon-locationfill" style="font-size: 42rpx;"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col" @click="showPopup = true">
|
||
<input v-model="form.bar" placeholder="所在地区" :readonly="readonlys" @click="showPopup = true" class="zd-input"
|
||
:style="{ pointerEvents: readonlys ? 'none' : 'auto' }"></input>
|
||
</view>
|
||
<view class="flex-col">
|
||
<!-- <view class="label">门店名称</view> -->
|
||
<input v-model="form.barName" placeholder="门店名称" class="zd-input"></input>
|
||
</view>
|
||
<view class="flex-col">
|
||
<!-- <view class="label">联系电话</view> -->
|
||
<input v-model="form.phone" placeholder="联系电话" class="zd-input"></input>
|
||
</view>
|
||
<view class="flex-col">
|
||
<!-- <view class="label">您的营业执照</view> -->
|
||
<view class="zd-img-box flex align-center justify-between">
|
||
<view>
|
||
<image v-if="form.businessLicense" :src="form.businessLicense" style="width: 200rpx;height:94rpx">
|
||
</image>
|
||
</view>
|
||
<text class="upload-text" @click="handleUpload('businessLicense')">上传营业执照</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col">
|
||
<!-- <view class="label">您的门头照</view> -->
|
||
<view class="zd-img-box flex align-center justify-between">
|
||
<view>
|
||
<image v-if="form.storefrontPhoto" :src="form.storefrontPhoto" style="width: 200rpx;height: 94rpx">
|
||
</image>
|
||
</view>
|
||
<text class="upload-text" @click="handleUpload('storefrontPhoto')">上传门头照</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="flex-col">
|
||
<input v-model="form.position" placeholder="店内职务" class="zd-input"></input>
|
||
</view> -->
|
||
</view>
|
||
|
||
<view>
|
||
<regionPicker :show.sync="showPopup" @selected="onAreaSelected" />
|
||
</view>
|
||
<!-- 上传logo -->
|
||
<!-- <view class="flex justify-center">
|
||
<image v-if="form.barLogo" :src="form.barLogo" style="width: 260rpx;height: 260rpx;border-radius: 50%;">
|
||
</image>
|
||
<view v-else class="bg-zd flex align-center justify-center"
|
||
style="width: 260rpx;height: 260rpx;border-radius: 50%;" @click="handleUpload('barLogo')">
|
||
上传logo
|
||
</view>
|
||
</view>
|
||
<view class="flex-col">
|
||
<view class="label">您的昵称</view>
|
||
<input v-model="form.nickName" placeholder="昵称" class="zd-input"></input>
|
||
</view>
|
||
<view class="flex-col">
|
||
|
||
<input v-model="form.phone" placeholder="联系电话" class="zd-input"></input>
|
||
</view>
|
||
<view class="flex-col">
|
||
<view class="label">门店名称</view>
|
||
<input v-model="form.barName" placeholder="门店名称" class="zd-input"></input>
|
||
</view>
|
||
<view class="flex-col">
|
||
|
||
|
||
<view class="flex justify-between align-center zd-address" @click="getMyLocation">
|
||
<input v-model="form.address" placeholder="门店地址" class="flex-1"></input>
|
||
<view style="height: 96rpx;line-height: 96rpx;width: 60rpx;">
|
||
<text class="cuIcon-locationfill" style="font-size: 42rpx;"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col">
|
||
<view class="label">您的营业执照</view>
|
||
<view class="zd-img-box flex align-center justify-between">
|
||
<view>
|
||
<image v-if="form.businessLicense" :src="form.businessLicense" style="width: 200rpx;height:94rpx">
|
||
</image>
|
||
</view>
|
||
<text class="upload-text" @click="handleUpload('businessLicense')">上传营业执照</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col">
|
||
<view class="label">您的门头照</view>
|
||
<view class="zd-img-box flex align-center justify-between">
|
||
<view>
|
||
<image v-if="form.storefrontPhoto" :src="form.storefrontPhoto" style="width: 200rpx;height: 94rpx">
|
||
</image>
|
||
</view>
|
||
<text class="upload-text" @click="handleUpload('storefrontPhoto')">上传门头照</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-col">
|
||
<view class="label">您的店内职务</view>
|
||
<input v-model="form.position" placeholder="店内职务" class="zd-input"></input>
|
||
</view> -->
|
||
<uni-popup ref="consultRefs" type="center" border-radius="6px 6px 6px 6px" :is-mask-click="false">
|
||
<view class="" style="position: relative;">
|
||
<view class="" @click="consultClick">
|
||
<image src="@/static/icons/cencels.svg" style="width: 48rpx;height: 48rpx;position: absolute;top:10rpx;right: 20rpx;" mode=""></image>
|
||
</view>
|
||
|
||
<view class="bg-white flex flex-col align-center justify-center"
|
||
style="width: 676rpx;border-radius: 12rpx;">
|
||
<view class="" style="font-size: 36rpx;margin: 32rpx 0 22rpx;color: #3D3D3D;font-weight: 600;">
|
||
添加官方助手
|
||
</view>
|
||
<image src="@/static/cg.png" style="width: 380rpx;height: 380rpx;"></image>
|
||
<view class="margin-tb-xl" style="font-size: 28rpx;">长按上方二维码识别并添加</view>
|
||
<!-- <button class="cu-btn sucbtn" style="background: #4E63E0;color: #FFF;" @click="toHome">进入首页</button> -->
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</uni-popup>
|
||
<uni-popup ref="successRef" type="center" border-radius="6px 6px 6px 6px" :is-mask-click="false">
|
||
<view class="bg-white flex flex-col align-center justify-center"
|
||
style="width: 676rpx;height: 596rpx;border-radius: 12rpx;">
|
||
<image src="@/static/cg.png" style="width: 376rpx;height: 262rpx;"></image>
|
||
<view class="margin-tb-xl" style="font-size: 28rpx;">提交成功，等待审核</view>
|
||
<button class="cu-btn sucbtn" style="background: #4E63E0;color: #FFF;" @click="toHome">进入首页</button>
|
||
</view>
|
||
|
||
</uni-popup>
|
||
</view>
|
||
<view class="sub-btn flex align-center justify-between" >
|
||
<view class="flex align-center" @click="tuichu">
|
||
<view class="">
|
||
<image src="@/static/logouts.png" style="width:48rpx;height: 48rpx;margin-right: 33;" mode=""></image>
|
||
</view>
|
||
<view class="sub-btn-txt">
|
||
退出
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<button class="cu-btn bg-zd btn" @click="submitForm">提交入驻</button>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// import QQMapSdk from '@/common/qqmap-wx-jssdk.min.js'
|
||
import regionPicker from '@/components/regionPicker.vue'
|
||
import {
|
||
barRegister
|
||
} from '@/api/login.js'
|
||
import {
|
||
base_url
|
||
} from '@/api/config.js'
|
||
export default {
|
||
components: {
|
||
regionPicker
|
||
},
|
||
data() {
|
||
return {
|
||
form: {
|
||
barLogo: '',
|
||
nickName: '',
|
||
phone: '',
|
||
barName: '',
|
||
address: '',
|
||
businessLicense: '', // 营业执照
|
||
storefrontPhoto: '', // 门头照
|
||
position: '', // 职务
|
||
openId: '',
|
||
},
|
||
userInfo: {},
|
||
QQMap: null,
|
||
showPopup: false,
|
||
selectedProvince: null,
|
||
selectedCity: null,
|
||
selectedArea: null,
|
||
readonlys: true
|
||
};
|
||
},
|
||
onLoad({
|
||
openId
|
||
}) {
|
||
this.form.openId = openId
|
||
// this.QQMap = new QQMapSdk({
|
||
// key: "YQCBZ-SQZ6A-P6EKD-CAUGZ-L7IWO-JMFMJ"//密钥
|
||
// });
|
||
// this.$refs.successRef.open()
|
||
this.$refs.consultRefs.open()
|
||
},
|
||
methods: {
|
||
consultClick() {
|
||
this.$refs.consultRefs.close()
|
||
},
|
||
tuichu(){
|
||
uni.switchTab({
|
||
url: "/pages/index/index"
|
||
})
|
||
},
|
||
// 提交
|
||
submitForm() {
|
||
if (!this.form.barLogo) {
|
||
uni.showToast({
|
||
title: '请上传logo',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.nickName) {
|
||
uni.showToast({
|
||
title: '请输入昵称',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.phone) {
|
||
uni.showToast({
|
||
title: '请输入联系电话',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.barName) {
|
||
uni.showToast({
|
||
title: '请输入门店名称',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.address) {
|
||
uni.showToast({
|
||
title: '请输入门店地址',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.businessLicense) {
|
||
uni.showToast({
|
||
title: '请上传营业执照',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.storefrontPhoto) {
|
||
uni.showToast({
|
||
title: '请上传门头照',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.position) {
|
||
uni.showToast({
|
||
title: '请输入店内职务',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if(!this.form.latitude || !this.form.longitude) {
|
||
uni.showToast({
|
||
title: '请通过定位获取位置',
|
||
icon: 'none',
|
||
mask: true,
|
||
})
|
||
return
|
||
}
|
||
|
||
|
||
uni.showLoading({
|
||
title: '提交中',
|
||
mask: true
|
||
})
|
||
barRegister(this.form).then(res => {
|
||
if (res.code == 200) {
|
||
this.userInfo = res.data.register // 暂存用户信息
|
||
uni.setStorageSync('token', res.data.token)
|
||
uni.hideLoading()
|
||
this.$refs.successRef.open()
|
||
}
|
||
}).catch(() => {
|
||
// uni.hideLoading()
|
||
})
|
||
|
||
},
|
||
toHome() {
|
||
uni.setStorageSync('userInfo', this.userInfo)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
onAreaSelected(province, city, area) {
|
||
this.selectedProvince = province;
|
||
this.selectedCity = city;
|
||
this.selectedArea = area;
|
||
console.log('Selected Province:', province);
|
||
console.log('Selected City:', city);
|
||
console.log('Selected Area:', area);
|
||
// 在这里处理选择后的逻辑
|
||
},
|
||
// 上传事件
|
||
handleUpload(key) {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (res) => {
|
||
uni.uploadFile({
|
||
url: base_url + '/bar/common/upload', //仅为示例，非真实的接口地址
|
||
filePath: res.tempFilePaths[0],
|
||
name: 'file',
|
||
formData: {
|
||
type: 'image'
|
||
},
|
||
success: (uploadFileRes) => {
|
||
this.form[key] = JSON.parse(uploadFileRes.data).url
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 获取位置
|
||
getMyLocation() {
|
||
uni.getSetting({
|
||
success: (res) => {
|
||
console.log(res)
|
||
if (!res.authSetting['scope.userLocation']) {
|
||
uni.authorize({
|
||
scope: 'scope.userLocation',
|
||
success: (res) => {
|
||
this.handleGetLocation()
|
||
},
|
||
fail: (err) => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请先授权获取您的位置信息',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.openSetting({
|
||
success: (res) => {
|
||
if (res.authSetting['scope.userLocation']) {
|
||
this.handleGetLocation()
|
||
}
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}else {
|
||
this.handleGetLocation()
|
||
}
|
||
},
|
||
})
|
||
|
||
},
|
||
handleGetLocation() {
|
||
uni.getLocation({
|
||
type: "gcj02",
|
||
success: (res) => {
|
||
console.log(res)
|
||
uni.chooseLocation({
|
||
complete: (res) => {
|
||
console.log(res)
|
||
if (res.errMsg == 'chooseLocation:ok') {
|
||
this.form.address = res.address
|
||
this.form.latitude = res.latitude
|
||
this.form.longitude = res.longitude
|
||
}
|
||
}
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.log(err)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
.page-content {
|
||
padding: 24rpx;
|
||
background-color: #F7F8FA;
|
||
min-height: 100vh;
|
||
font-family: Roboto;
|
||
font-size: 24rpx;
|
||
.label {
|
||
color: #000;
|
||
margin-bottom: 26rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.zd-input {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #FFF;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
color: #000;
|
||
margin-bottom: 16rpx;
|
||
border: 1px solid #C8C8C8;
|
||
}
|
||
|
||
.zd-address {
|
||
width: 654rpx;
|
||
height: 96rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #FFF;
|
||
padding: 0 0 0 30rpx;
|
||
box-sizing: border-box;
|
||
color: #000;
|
||
margin-bottom: 16rpx;
|
||
border: 1px solid #C8C8C8;
|
||
}
|
||
|
||
.zd-img-box {
|
||
width: 654rpx;
|
||
min-height: 96rpx;
|
||
max-height: 200rpx;
|
||
border-radius: 16rpx;
|
||
background-color: #FFF;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
color: #000;
|
||
margin-bottom: 16rpx;
|
||
border: 1px solid #C8C8C8;
|
||
|
||
.upload-text {
|
||
font-size: 28rpx;
|
||
line-height: normal;
|
||
color: #FEE034;
|
||
}
|
||
}
|
||
.regist-top{
|
||
background: #FFFFFF;
|
||
width:100%;
|
||
height:234rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
.regist-top-1{
|
||
color: #FDCA40;
|
||
padding: 42rpx 66rpx 0 84rpx;
|
||
font-family: 'Courier New', Courier, monospace; /* 使用方形字体 */
|
||
font-size: 36px;
|
||
line-height: 36px; /* 使行高与字体大小相同 */
|
||
letter-spacing: 0em;
|
||
color: #FDCA40;
|
||
justify-content: space-between;
|
||
}
|
||
.regist-top-2{
|
||
font-size: 24rpx;
|
||
padding: 9px 87rpx 0 105rpx;
|
||
font-weight: 600;
|
||
justify-content: space-between;
|
||
}
|
||
.top-image-1{
|
||
width: 94rpx;
|
||
height: 72rpx;
|
||
}
|
||
.top-image-2{
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
.regist-consult{
|
||
height: 106rpx;
|
||
padding: 24rpx 24rpx;
|
||
background: #FFF;
|
||
margin-top: 32rpx;
|
||
font-size: 24rpx;
|
||
width: 100%;
|
||
}
|
||
.reg-materials{
|
||
height: 380rpx;
|
||
background: #FFF;
|
||
padding: 24rpx;
|
||
margin-top: 32rpx;
|
||
.materials-top{
|
||
|
||
}
|
||
}
|
||
.regist-store{
|
||
background: #FFFFFF;
|
||
margin-top: 38rpx;
|
||
padding: 24rpx;
|
||
}
|
||
}
|
||
.font-28{
|
||
font-size: 28rpx;
|
||
}
|
||
.font-32{
|
||
font-size: 32rpx;
|
||
}
|
||
.fontw-6{
|
||
font-weight: 600;
|
||
}
|
||
.btn {
|
||
width: 420rpx;
|
||
height: 80rpx;
|
||
border-radius: 24rpx;
|
||
margin: 30rpx auto;
|
||
background: #4E63E0;
|
||
|
||
// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.sucbtn {
|
||
width: 314rpx;
|
||
height: 76rpx;
|
||
}
|
||
input[readonly] {
|
||
cursor: default;
|
||
background-color: #f5f5f5;
|
||
}
|
||
.sub-btn{
|
||
background: #FFFFFF;
|
||
padding: 0 48rpx 0 66rpx;
|
||
.sub-btn-txt{
|
||
margin-left: 20rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
}
|
||
</style> |