560 lines
12 KiB
Vue
560 lines
12 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="店铺管理" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
|
||
height='45'></u-navbar>
|
||
<view class="card">
|
||
<view class="card_li">
|
||
<view class="word">
|
||
店铺名称
|
||
</view>
|
||
<view class="ipt">
|
||
<input type="text" v-model="data.name" placeholder="请输入内容" class="input"
|
||
placeholder-style="color:#C7CDD3">
|
||
</view>
|
||
</view>
|
||
<view class="card_li">
|
||
<view class="word">
|
||
开始时间
|
||
</view>
|
||
<view class="ipt" @click="time=true">
|
||
{{ data.businessTimeStart ? data.businessTimeStart : '请选择营业开始时间' }}
|
||
|
||
</view>
|
||
</view>
|
||
<view class="card_li">
|
||
<view class="word">
|
||
结束时间
|
||
</view>
|
||
<view class="ipt" @click="time1=true">
|
||
|
||
{{ data.businessTimeEnd ? data.businessTimeEnd : '请选择营业结束时间' }}
|
||
</view>
|
||
</view>
|
||
<view class="card_li">
|
||
<view class="word">
|
||
负责人
|
||
</view>
|
||
<view class="ipt">
|
||
<input type="text" v-model="data.contactName" placeholder="请输入负责人姓名" class="input"
|
||
placeholder-style="color:#C7CDD3">
|
||
</view>
|
||
</view>
|
||
<view class="card_li">
|
||
<view class="word">
|
||
联系电话
|
||
</view>
|
||
<view class="ipt">
|
||
<input type="text" v-model="data.contactMobile" placeholder="请输入负责人手机号" class="input"
|
||
placeholder-style="color:#C7CDD3">
|
||
</view>
|
||
</view>
|
||
<view class="card_li">
|
||
<view class="word">
|
||
省市区
|
||
</view>
|
||
<view class="ipt" @click="showcity=true" v-if="data.city==''">
|
||
请选择省市区
|
||
|
||
</view>
|
||
<view class="ipt" @click="showcity=true" v-else>
|
||
<!-- 请选择省市区 -->
|
||
{{data.province}} {{data.city}} {{data.county}}
|
||
</view>
|
||
</view>
|
||
<view class="card_li">
|
||
<view class="word">
|
||
详细地址
|
||
</view>
|
||
<view class="ipt" @click="getMapLocation()">
|
||
|
||
{{ data.address ? data.address : '请选择详细地址' }}
|
||
<!-- <input type="text" v-model="searchKeyword" placeholder="请输入内容" class="input"
|
||
placeholder-style="color:#C7CDD3"> -->
|
||
</view>
|
||
</view>
|
||
<view class="card_lis" style="margin-top: 30rpx;">
|
||
<view class="up_left">
|
||
<view class="txt1">
|
||
上传门头照
|
||
</view>
|
||
<view class="txt2">
|
||
门头照片必须清晰、方正、易于辨识
|
||
</view>
|
||
</view>
|
||
<view class="up_rignt">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/u08cpfIllwweGcS9awYP" mode=""
|
||
v-if="data.picture==''" @click="btn()"></image>
|
||
<image :src="data.picture" mode="" v-else></image>
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uFp9riSLtpmuq6gyKfdr" mode="" class="close"
|
||
v-if="data.picture!=''" @click="data.picture=''"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btns" @click="sub()">
|
||
保存
|
||
</view>
|
||
<u-picker mode="region" v-model="showcity" @confirm="confirm2"></u-picker>
|
||
<u-picker mode="time" v-model="time" :params="params" @confirm="confirm" title='请选择营业开始时间'
|
||
:default-time='pickertime'></u-picker>
|
||
<u-picker mode="time" v-model="time1" :params="params" @confirm="confirm1" title='请选择营业结束时间'
|
||
:default-time='pickertime1'></u-picker>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#fff",
|
||
},
|
||
list: [],
|
||
time: false,
|
||
time1: false,
|
||
params: {
|
||
year: false,
|
||
month: false,
|
||
day: false,
|
||
hour: true,
|
||
minute: true,
|
||
second: false
|
||
},
|
||
|
||
pickertime: '08:00',
|
||
pickertime1: '21:00',
|
||
showcity: false,
|
||
data: {
|
||
|
||
name: '',
|
||
businessTimeStart: '',
|
||
businessTimeEnd: '',
|
||
lng: '',
|
||
lat: '',
|
||
province: '',
|
||
city: '',
|
||
county: '',
|
||
contactName: '',
|
||
contactMobile: '',
|
||
address: '',
|
||
picture: '',
|
||
simpleAddress: ''
|
||
},
|
||
token: '',
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
if (e.id) {
|
||
this.data.storeId = e.id
|
||
this.getOrderDetail()
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getList()
|
||
this.getQiniuToken()
|
||
},
|
||
methods: {
|
||
getOrderDetail() {
|
||
let data = {
|
||
storeId: this.data.storeId
|
||
}
|
||
this.$u.get(`app/getStore?`, this.data).then((res) => {
|
||
if (res.code == 200) {
|
||
|
||
this.data = res.data
|
||
|
||
} else {
|
||
|
||
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
},
|
||
sub() {
|
||
if (!this.data.name) {
|
||
uni.showToast({
|
||
title: '请填写店铺名称',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return; // 阻止请求继续执行
|
||
}
|
||
if (!this.data.businessTimeStart) {
|
||
uni.showToast({
|
||
title: '请填写营业开始时间',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
if (!this.data.businessTimeEnd) {
|
||
uni.showToast({
|
||
title: '请填写营业结束时间',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!this.data.province || !this.data.city || !this.data.county) {
|
||
uni.showToast({
|
||
title: '请选择省市区信息',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
if (!this.data.contactName) {
|
||
uni.showToast({
|
||
title: '请填写负责人姓名',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
if (!this.data.contactMobile) {
|
||
uni.showToast({
|
||
title: '请填写联系人手机号',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
if (!this.data.address) {
|
||
uni.showToast({
|
||
title: '请选择详细地址',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
if (!this.data.picture) {
|
||
uni.showToast({
|
||
title: '请上传图片',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
return;
|
||
}
|
||
console.log(this.data, 'datadata');
|
||
this.$u.post(`appAdmin/store/save`, this.data).then((res) => {
|
||
if (res.code == 200) {
|
||
|
||
this.list = res.data
|
||
|
||
} else {
|
||
|
||
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
},
|
||
btn() {
|
||
let _this = this
|
||
let math = 'static/' + _this.$u.guid(20)
|
||
uni.chooseMessageFile({
|
||
count: 1,
|
||
type: 'all',
|
||
success(res) {
|
||
// tempFilePath可以作为img标签的src属性显示图片
|
||
const tempFilePaths = res.tempFiles
|
||
// let tempFilePaths = chooseImageRes.tempFilePaths;
|
||
// console.log(tempFilePaths)
|
||
// tempFilePaths.forEach(item=>{
|
||
// // 上传图片到七牛云
|
||
|
||
// })
|
||
wx.uploadFile({
|
||
url: 'https://up-z2.qiniup.com',
|
||
name: 'file',
|
||
filePath: tempFilePaths[0].path,
|
||
formData: {
|
||
token: _this.token, //后端返回的token
|
||
key: 'bike/img/' + math
|
||
},
|
||
success: function(res) {
|
||
|
||
let str = JSON.parse(res.data)
|
||
|
||
_this.data.picture = _this.upurl + '/' + str.key
|
||
console.log(_this.data.picture)
|
||
}
|
||
});
|
||
}
|
||
})
|
||
|
||
// });
|
||
},
|
||
getQiniuToken() {
|
||
console.log('diaou');
|
||
this.$u.get("/common/qiniu/uploadInfo").then((res) => {
|
||
if (res.code == 200) {
|
||
this.token = res.token
|
||
console.log(res, 'resres');
|
||
this.upurl = res.domain
|
||
}
|
||
});
|
||
// this.$u.get('https://v2.ielts.langsi.online/file/getToken').then(res => {
|
||
// console.log(res.data);
|
||
// this.token = res.data.token
|
||
// }).catch(err => {
|
||
// console.log(err)
|
||
// })
|
||
|
||
},
|
||
getMapLocation() {
|
||
uni.chooseLocation({
|
||
success: (res) => {
|
||
console.log(res);
|
||
this.data.address = res.address
|
||
this.data.lng = res.longitude
|
||
this.data.lat = res.latitude
|
||
this.data.simpleAddress = res.name
|
||
// this.getRegionFn(res);
|
||
},
|
||
fail: () => {
|
||
// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
|
||
uni.getSetting({
|
||
success: (res) => {
|
||
console.log(res);
|
||
var status = res.authSetting;
|
||
if (!status['scope.userLocation']) {
|
||
// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
|
||
uni.showModal({
|
||
title: "是否授权当前位置",
|
||
content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
|
||
success: (tip) => {
|
||
if (tip.confirm) {
|
||
// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
|
||
uni.openSetting({
|
||
success: (data) => {
|
||
// 如果用户授权了地理信息在，则提示授权成功
|
||
if (data
|
||
.authSetting[
|
||
'scope.userLocation'
|
||
] === true
|
||
) {
|
||
uni.showToast({
|
||
title: "授权成功",
|
||
icon: "success",
|
||
duration: 1000
|
||
})
|
||
// 授权成功后，然后再次chooseLocation获取信息
|
||
uni.chooseLocation({
|
||
success: (
|
||
res
|
||
) => {
|
||
console
|
||
.log(
|
||
"详细地址",
|
||
res
|
||
);
|
||
// this.getRegionFn(res);
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: "授权失败",
|
||
icon: "none",
|
||
duration: 1000
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
fail: (res) => {
|
||
uni.showToast({
|
||
title: "调用授权窗口失败",
|
||
icon: "none",
|
||
duration: 1000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
});
|
||
},
|
||
confirm(e) {
|
||
this.data.businessTimeStart = e.hour + ':' + e.minute
|
||
},
|
||
confirm1(e) {
|
||
this.data.businessTimeEnd = e.hour + ':' + e.minute
|
||
},
|
||
confirm2(e) {
|
||
console.log(e);
|
||
this.data.province = e.province.label
|
||
this.data.city = e.city.label
|
||
this.data.county = e.area.label
|
||
},
|
||
|
||
getList() {
|
||
this.$u.get(`appAdmin/getStoreListByToken`).then((res) => {
|
||
if (res.code == 200) {
|
||
|
||
this.list = res.data
|
||
|
||
} else {
|
||
|
||
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F7FAFE;
|
||
}
|
||
|
||
.page {
|
||
.btns {
|
||
position: fixed;
|
||
left: 78rpx;
|
||
bottom: 114rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 584rpx;
|
||
height: 90rpx;
|
||
background: #4C97E7;
|
||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.card {
|
||
padding: 44rpx 36rpx;
|
||
margin: 0 auto;
|
||
margin-top: 24rpx;
|
||
width: 680rpx;
|
||
// height: 1262rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
|
||
.card_lis {
|
||
padding-top: 24rpx;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
// border-bottom: 1rpx solid #D8D8D8 ;
|
||
padding-bottom: 18rpx;
|
||
|
||
.up_left {
|
||
.txt1 {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.txt2 {
|
||
margin-top: 16rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
}
|
||
|
||
.up_rignt {
|
||
border-radius: 10rpx;
|
||
position: relative;
|
||
border: 1rpx solid #808080;
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
|
||
image {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
}
|
||
|
||
.close {
|
||
background: #FFFFFF;
|
||
// border-radius: 50%;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 25rpx;
|
||
height: 25rpx;
|
||
}
|
||
}
|
||
|
||
.card_left {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.card_right {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
|
||
span {
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.input {
|
||
text-align: right;
|
||
/* 输入框内容靠右显示 */
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.card_li {
|
||
margin-bottom: 34rpx;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
|
||
.word {
|
||
width: 128rpx;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.ipt {
|
||
padding-left: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
margin-left: 16rpx;
|
||
width: 462rpx;
|
||
height: 70rpx;
|
||
background: #F0F0F0;
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #808080;
|
||
|
||
.input {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style> |