390 lines
9.1 KiB
Vue
390 lines
9.1 KiB
Vue
<template>
|
|
<view class="page-content padding">
|
|
<!-- 上传logo -->
|
|
<view class="">
|
|
<view class="flex justify-center" style="">
|
|
<image v-if="form.barLogo" :src="form.barLogo" style="width: 202rpx;height: 202rpx;border-radius: 50%;">
|
|
</image>
|
|
<view v-else class="bg1 flex align-center justify-center"
|
|
style="width: 202rpx;height: 202rpx;border-radius: 50%;position: relative;" @click="handleUpload('barLogo')">
|
|
<view class="">
|
|
<image src="@/static/bg/phones.svg" mode="" style="width: 60rpx;height: 60rpx;"></image>
|
|
</view>
|
|
<view class="" style="position: absolute;bottom: 0;right: 0;">
|
|
<image src="@/static/adds.svg" mode="" style="width: 48rpx;height: 48rpx;"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view :style="{ height: containerHeight + 'rpx' }" :class="filteredList.length>0?'bors':''" style="position: relative;">
|
|
<view class="flex-col">
|
|
<view class="label">酒厂名称</view>
|
|
<input v-model="form.nickName" @input="handleSearch" placeholder="酒厂名称" class="zd-input wh1"></input>
|
|
</view>
|
|
<view class="" style="position: absolute;top:160rpx;left: 0;">
|
|
<view class="" v-for="(item, index) in filteredList">
|
|
<view style="width: 100%;" @click="breweryClick(item)">{{item}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex-col">
|
|
<view class="label">酒款名称</view>
|
|
<input v-model="form.phone" placeholder="酒款名称" class="zd-input wh1"></input>
|
|
</view>
|
|
<view class="flex-col">
|
|
<view class="label">酒精含量</view>
|
|
<input v-model="form.barName" placeholder="酒精含量" class="zd-input wh1"></input>
|
|
</view>
|
|
<view class="flex-col">
|
|
<view class="label">简介</view>
|
|
<textarea placeholder="简介" class="zd-input wh2"/>
|
|
|
|
</view>
|
|
|
|
<button class="cu-btn btn" @click="submitForm">确认提交</button>
|
|
</view>
|
|
<!-- <view class="flex align-center justify-center" style="width: 100%; height: 90vh;">
|
|
<view class="flex flex-col align-center justify-center" style="width: 100%;">
|
|
|
|
<image src="@/static/bg/kongs.svg" mode="aspectFit" style="width: 256rpx; height: 190rpx;"></image>
|
|
|
|
<view style="margin-top: 100rpx;">您搜索的内容没有收录</view>
|
|
|
|
<view style="margin-top: 28rpx;">请更换搜索词或新建酒款</view>
|
|
|
|
<view style="margin-top: 36rpx;">
|
|
<button class="cu-btn btn" @click="submitForm">创建新酒款</button>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
</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,
|
|
originalList: ['苹果', '香蕉', '橙子', '菠萝', '葡萄', '西瓜'],
|
|
filteredList: [],
|
|
};
|
|
},
|
|
onLoad({
|
|
openId
|
|
}) {
|
|
this.form.openId = openId
|
|
// this.QQMap = new QQMapSdk({
|
|
// key: "YQCBZ-SQZ6A-P6EKD-CAUGZ-L7IWO-JMFMJ"//密钥
|
|
// });
|
|
},
|
|
computed: {
|
|
containerHeight() {
|
|
const baseHeight = 160; // 基础高度，根据实际情况调整
|
|
return this.filteredList.length > 0 ? baseHeight + this.filteredList.length * 50 : baseHeight;
|
|
}
|
|
},
|
|
methods: {
|
|
handleSearch() {
|
|
if (this.form.nickName.trim() === '') {
|
|
this.filteredList = this.originalList; // 如果关键词为空，显示全部数据
|
|
return;
|
|
}
|
|
|
|
// 模糊搜索逻辑
|
|
this.filteredList = this.originalList.filter(item =>
|
|
item.includes(this.form.nickName)
|
|
);
|
|
},
|
|
breweryClick(item){
|
|
this.form.nickName = item
|
|
this.filteredList = []
|
|
},
|
|
// 提交
|
|
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;
|
|
font-family: Roboto;
|
|
.label {
|
|
color: #000;
|
|
margin-bottom: 26rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
}
|
|
.zd-input {
|
|
|
|
border-radius: 16rpx;
|
|
background-color: #FFF;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
color: #000;
|
|
margin-bottom: 24rpx;
|
|
border: 1px solid #C8C8C8;
|
|
}
|
|
.wh1{
|
|
width: 654rpx;
|
|
height: 96rpx;
|
|
}
|
|
.wh2{
|
|
width: 654rpx;
|
|
height: 160rpx;
|
|
}
|
|
.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: 24rpx;
|
|
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:36rpx auto 30rpx auto;
|
|
// box-shadow: 0px 10px 24px 0px rgba(43, 45, 51, 0.2);
|
|
font-weight: 500;
|
|
color: #FFF;
|
|
font-size: 32rpx;
|
|
background: #4E63E0
|
|
}
|
|
|
|
.sucbtn {
|
|
width: 314rpx;
|
|
height: 76rpx;
|
|
}
|
|
.bg1 {
|
|
background: rgba(216, 216, 216, 0.75);
|
|
color: #000;
|
|
}
|
|
.bors{
|
|
border: #000 2rpx solid;
|
|
border-radius: 24rpx;
|
|
}
|
|
</style> |