359 lines
8.5 KiB
Vue
359 lines
8.5 KiB
Vue
|
<template>
|
|||
|
|
<view class="page-content padding">
|
|||
|
|
<!-- 上传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">
|
|||
|
|
<view class="label">联系电话</view>
|
|||
|
|
<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="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">
|
|||
|
|
<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>
|
|||
|
|
<button class="cu-btn bg-zd btn" @click="submitForm">提交入驻</button>
|
|||
|
|
<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 bg-zd sucbtn" @click="toHome">进入首页</button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// import QQMapSdk from '@/common/qqmap-wx-jssdk.min.js'
|
|||
|
|
import {
|
|||
|
|
barRegister
|
|||
|
|
} from '@/api/login.js'
|
|||
|
|
import {
|
|||
|
|
base_url
|
|||
|
|
} from '@/api/config.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
form: {
|
|||
|
|
barLogo: '',
|
|||
|
|
nickName: '',
|
|||
|
|
phone: '',
|
|||
|
|
barName: '',
|
|||
|
|
address: '',
|
|||
|
|
businessLicense: '', // 营业执照
|
|||
|
|
storefrontPhoto: '', // 门头照
|
|||
|
|
position: '', // 职务
|
|||
|
|
openId: '',
|
|||
|
|
},
|
|||
|
|
userInfo: {},
|
|||
|
|
QQMap: null,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad({
|
|||
|
|
openId
|
|||
|
|
}) {
|
|||
|
|
this.form.openId = openId
|
|||
|
|
// this.QQMap = new QQMapSdk({
|
|||
|
|
// key: "YQCBZ-SQZ6A-P6EKD-CAUGZ-L7IWO-JMFMJ"//密钥
|
|||
|
|
// });
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 提交
|
|||
|
|
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'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 上传事件
|
|||
|
|
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: 48rpx;
|
|||
|
|
background-color: #FDFDFD;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
color: #000;
|
|||
|
|
margin-bottom: 26rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.zd-input {
|
|||
|
|
width: 654rpx;
|
|||
|
|
height: 96rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
background-color: #FFF;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
color: #000;
|
|||
|
|
margin-bottom: 56rpx;
|
|||
|
|
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: 56rpx;
|
|||
|
|
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: 56rpx;
|
|||
|
|
border: 1px solid #C8C8C8;
|
|||
|
|
|
|||
|
|
.upload-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
line-height: normal;
|
|||
|
|
color: #FEE034;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
width: 654rpx;
|
|||
|
|
height: 104rpx;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
margin: 30rpx auto;
|
|||
|
|
// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #0B0E26;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sucbtn {
|
|||
|
|
width: 314rpx;
|
|||
|
|
height: 76rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|