zdtap-uniapp-main/pages/index/registration.vue

604 lines
16 KiB
Vue
Raw Normal View History

2025-04-03 11:47:12 +08:00
<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>