465 lines
11 KiB
Vue
465 lines
11 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.barContactPhone" placeholder="联系电话" class="zd-input"></input>
|
||
</view>
|
||
<view class="tab-box">
|
||
<view class="defTab" :class="{'active':currentTab == 1}" @click="changeTab(1)">门店信息</view>
|
||
<view class="defTab" :class="{'active':currentTab == 2}" @click="changeTab(2)">认证信息</view>
|
||
</view>
|
||
<template v-if="currentTab == 1">
|
||
<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>
|
||
<input v-model="form.position" placeholder="店内职务" class="zd-input"></input>
|
||
</view>
|
||
</template>
|
||
<template v-if="currentTab == 2">
|
||
<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>
|
||
</template>
|
||
|
||
|
||
|
||
<button class="cu-btn bg-zd btn" @click="handleSub">保存</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.js'
|
||
import {
|
||
barRegister
|
||
} from '@/api/login.js'
|
||
import {
|
||
base_url
|
||
} from '@/api/config.js'
|
||
import {
|
||
getBarInfo,
|
||
editBarInfo,
|
||
reAuth
|
||
} from '@/api/bar.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
barLogo: '',
|
||
nickName: '',
|
||
barContactPhone: '',
|
||
barName: '',
|
||
address: '',
|
||
businessLicense: '', // 营业执照
|
||
storefrontPhoto: '', // 门头照
|
||
position: '', // 职务
|
||
openId: '',
|
||
},
|
||
userInfo: {},
|
||
currentTab: 1,
|
||
QQMap: null,
|
||
};
|
||
},
|
||
onLoad() {
|
||
|
||
// this.QQMap = new QQMapSdk({
|
||
// key: "YQCBZ-SQZ6A-P6EKD-CAUGZ-L7IWO-JMFMJ"//密钥
|
||
// });
|
||
this.getBarInfoFun()
|
||
},
|
||
methods: {
|
||
changeTab(key) {
|
||
this.currentTab = key
|
||
},
|
||
// 获取酒吧信息
|
||
getBarInfoFun() {
|
||
getBarInfo().then(res => {
|
||
this.barInfo = res.data
|
||
this.form = JSON.parse(JSON.stringify(res.data))
|
||
})
|
||
},
|
||
handleSub() {
|
||
if(this.currentTab == 1) {
|
||
this.submitForm()
|
||
}else if(this.currentTab == 2) {
|
||
this.reAuthFun()
|
||
}
|
||
},
|
||
// 重新认证
|
||
reAuthFun() {
|
||
if (!this.form.businessLicense) {
|
||
uni.showToast({
|
||
title: '请上传营业执照',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.storefrontPhoto) {
|
||
uni.showToast({
|
||
title: '请上传门头照',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
let data = {
|
||
businessLicense: this.form.businessLicense,
|
||
storefrontPhoto: this.form.storefrontPhoto,
|
||
}
|
||
reAuth(data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '提交成功，等待审核',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
uni.hideLoading()
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/index/my'
|
||
})
|
||
}, 500)
|
||
}
|
||
})
|
||
|
||
},
|
||
// 提交
|
||
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.barContactPhone) {
|
||
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.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
|
||
})
|
||
editBarInfo(this.form).then(res => {
|
||
if (res.code == 200) {
|
||
// this.userInfo = res.data // 暂存用户信息
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
uni.hideLoading()
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/index/my'
|
||
})
|
||
}, 500)
|
||
|
||
}
|
||
}).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
|
||
// this.QQMap.reverseGeocoder({
|
||
// location: {
|
||
// latitude: res.latitude,
|
||
// longitude: res.longitude,
|
||
// },
|
||
// success: (res) => {
|
||
// console.log(res)
|
||
// },
|
||
// fail: (err) => {
|
||
// console.log(err)
|
||
// },
|
||
// })
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
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;
|
||
}
|
||
}
|
||
.tab-box {
|
||
|
||
width: 674rpx;
|
||
top: 475rpx;
|
||
margin: -24rpx auto 24rpx;
|
||
border-radius: 12rpx;
|
||
background: #F2F2F2;
|
||
padding: 8rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.defTab {
|
||
width: 50%;
|
||
border-radius: 12rpx;
|
||
background: #F2F2F2;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: Source Han Sans;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #0B0E26;
|
||
padding: 16rpx 48rpx;
|
||
}
|
||
|
||
.active {
|
||
background-color: #71F4B4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 654rpx;
|
||
height: 104rpx;
|
||
border-radius: 24rpx;
|
||
margin: 30rpx auto;
|
||
font-weight: 500;
|
||
color: #0B0E26;
|
||
font-size: 32rpx;
|
||
// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
|
||
}
|
||
|
||
.sucbtn {
|
||
width: 314rpx;
|
||
height: 76rpx;
|
||
}
|
||
</style> |