You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
498 lines
12 KiB
498 lines
12 KiB
<template>
|
|
<view class="page1">
|
|
<view class="hero">
|
|
<view class="hero-title">经营管理</view>
|
|
<view class="hero-subtitle">同步后台商家管理字段，可直接维护营业规则</view>
|
|
</view>
|
|
|
|
<view class="form-wrap">
|
|
<view class="content">
|
|
<view class="section-title">营业设置</view>
|
|
<view class="business-hour-block">
|
|
<view class="business-hour-title">营业时段</view>
|
|
<view class="period-card" v-for="(item, index) in businessHourPeriods" :key="index">
|
|
<view class="period-header">
|
|
<text>时段{{index + 1}}</text>
|
|
<view class="period-delete" v-if="businessHourPeriods.length > 1" @tap="removeBusinessHour(index)">删除</view>
|
|
</view>
|
|
<view class="period-times">
|
|
<picker mode="time" :value="item.begin" start="00:00" end="23:59"
|
|
@change="bindBusinessTimeChange($event, index, 'begin')">
|
|
<view class="time-picker" :class="{ placeholder: !item.begin }">
|
|
{{item.begin || '开始时间'}}
|
|
<uni-icons type="bottom" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<view class="time-split">至</view>
|
|
<picker mode="time" :value="item.end" start="00:00" end="23:59"
|
|
@change="bindBusinessTimeChange($event, index, 'end')">
|
|
<view class="time-picker" :class="{ placeholder: !item.end }">
|
|
{{item.end || '结束时间'}}
|
|
<uni-icons type="bottom" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<view class="add-period" @tap="addBusinessHour">+ 添加营业时段</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">营业状态</view>
|
|
<view class="text">
|
|
<picker :range="statusList" range-key="text" @change="statusChange">
|
|
<view class="picker-text">
|
|
{{statusText}}
|
|
<uni-icons type="bottom" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<button :loading="submitLoading" @tap="submit">保存</button>
|
|
|
|
<view class="content">
|
|
<view class="section-title">经营信息</view>
|
|
<view class="value">
|
|
<view class="name">拼团佣金</view>
|
|
<view class="text">{{shop.commissionRateMore || 0}}%</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">单独购买佣金</view>
|
|
<view class="text">{{shop.commissionRateOne || 0}}%</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">虚拟成团佣金</view>
|
|
<view class="text">{{shop.virtualGroupCommissionRate || 0}}%</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">经营品类</view>
|
|
<view class="text">{{shop.type || '暂无'}}</view>
|
|
</view>
|
|
<view class="value">
|
|
<view class="name">出餐时间</view>
|
|
<view class="text">{{shop.cookingTime || 0}}分钟</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
shop: {
|
|
shopId: '',
|
|
shopName: '',
|
|
businessHourBegin: '',
|
|
businessHourEnd: '',
|
|
status: 0,
|
|
commissionRateMore: '',
|
|
commissionRateOne: '',
|
|
virtualGroupCommissionRate: '',
|
|
type: '',
|
|
isDelivery: 0,
|
|
cookingTime: '',
|
|
businessHours: ''
|
|
},
|
|
businessHourPeriods: [{
|
|
begin: '',
|
|
end: ''
|
|
}],
|
|
submitLoading: false,
|
|
statusList: [{
|
|
value: 0,
|
|
text: '正常营业'
|
|
}, {
|
|
value: 1,
|
|
text: '暂停营业'
|
|
}]
|
|
}
|
|
},
|
|
computed: {
|
|
statusText() {
|
|
const item = this.statusList.find(item => item.value == this.shop.status)
|
|
return item ? item.text : '正常营业'
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getShopMsg()
|
|
|
|
},
|
|
methods: {
|
|
getShopMsg(){
|
|
this.NB.sendRequest('/app/shoptakeaway/getByShopId', {
|
|
shopId: uni.getStorageSync('shopId')
|
|
}, false, 'get', 'application/x-www-form-urlencoded').then(res => {
|
|
if (res.code == 200) {
|
|
const result = Object.assign({}, res.result || {})
|
|
for (let key in result) {
|
|
if (result[key] === null) {
|
|
delete result[key]
|
|
}
|
|
}
|
|
this.shop = Object.assign({}, this.shop, result)
|
|
this.businessHourPeriods = this.parseBusinessHourPeriods(this.shop)
|
|
} else {
|
|
uni.showToast(res.message)
|
|
}
|
|
})
|
|
|
|
},
|
|
formatTimeValue(value) {
|
|
if (!value) return ''
|
|
if (typeof value === 'string') {
|
|
return value.length >= 5 ? value.substring(0, 5) : value
|
|
}
|
|
const date = value instanceof Date ? value : new Date(value)
|
|
if (isNaN(date.getTime())) return ''
|
|
const h = date.getHours()
|
|
const m = date.getMinutes()
|
|
return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m)
|
|
},
|
|
parseBusinessHourPeriods(takeaway) {
|
|
if (!takeaway) {
|
|
return [{
|
|
begin: '',
|
|
end: ''
|
|
}]
|
|
}
|
|
let list = takeaway.businessHourList
|
|
if ((!list || !list.length) && takeaway.businessHours) {
|
|
try {
|
|
list = typeof takeaway.businessHours === 'string' ? JSON.parse(takeaway.businessHours) : takeaway.businessHours
|
|
} catch (e) {
|
|
list = []
|
|
}
|
|
}
|
|
if (list && list.length) {
|
|
return list.map(item => ({
|
|
begin: this.formatTimeValue(item.begin),
|
|
end: this.formatTimeValue(item.end)
|
|
}))
|
|
}
|
|
if (takeaway.businessHourBegin || takeaway.businessHourEnd) {
|
|
return [{
|
|
begin: this.formatTimeValue(takeaway.businessHourBegin),
|
|
end: this.formatTimeValue(takeaway.businessHourEnd)
|
|
}]
|
|
}
|
|
return [{
|
|
begin: '',
|
|
end: ''
|
|
}]
|
|
},
|
|
addBusinessHour() {
|
|
this.businessHourPeriods.push({
|
|
begin: '',
|
|
end: ''
|
|
})
|
|
},
|
|
removeBusinessHour(index) {
|
|
if (this.businessHourPeriods.length <= 1) return
|
|
this.businessHourPeriods.splice(index, 1)
|
|
},
|
|
bindBusinessTimeChange(e, index, key) {
|
|
this.$set(this.businessHourPeriods[index], key, e.detail.value)
|
|
},
|
|
statusChange(e) {
|
|
const item = this.statusList[e.detail.value]
|
|
if (item) this.shop.status = item.value
|
|
},
|
|
buildBusinessHoursPayload() {
|
|
const periods = []
|
|
for (let i = 0; i < this.businessHourPeriods.length; i++) {
|
|
const begin = this.formatTimeValue(this.businessHourPeriods[i].begin)
|
|
const end = this.formatTimeValue(this.businessHourPeriods[i].end)
|
|
if (!begin || !end) {
|
|
uni.showToast({
|
|
title: '请完善第' + (i + 1) + '个营业时段',
|
|
icon: 'none'
|
|
})
|
|
return null
|
|
}
|
|
periods.push({
|
|
begin,
|
|
end
|
|
})
|
|
}
|
|
if (!periods.length) {
|
|
uni.showToast({
|
|
title: '请至少设置一个营业时段',
|
|
icon: 'none'
|
|
})
|
|
return null
|
|
}
|
|
return periods
|
|
},
|
|
submit(){
|
|
const periods = this.buildBusinessHoursPayload()
|
|
if (!periods) return
|
|
const payload = {
|
|
id: this.shop.id,
|
|
shopId: this.shop.shopId || uni.getStorageSync('shopId'),
|
|
businessHours: JSON.stringify(periods),
|
|
businessHourBegin: periods[0].begin,
|
|
businessHourEnd: periods[0].end,
|
|
status: Number(this.shop.status)
|
|
}
|
|
this.submitLoading = true
|
|
this.NB.sendRequest('/app/shoptakeaway/update', payload, false, 'POST', 'application/x-www-form-urlencoded').then(res => {
|
|
this.submitLoading = false
|
|
if (res.code == 200) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '经营信息已更新',
|
|
showCancel: false,
|
|
success: (modalRes) => {
|
|
if (modalRes.confirm) uni.navigateBack()
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast(res.message)
|
|
}
|
|
}).catch(() => {
|
|
this.submitLoading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page,
|
|
.page1 {
|
|
width: 100%;
|
|
min-height: 100%;
|
|
font-size: 24rpx;
|
|
color: #12342d;
|
|
background:
|
|
radial-gradient(circle at 92% 120rpx, rgba(166, 255, 234, 0.45) 0, rgba(166, 255, 234, 0) 240rpx),
|
|
linear-gradient(180deg, #f3fff6 0%, #f5f8f5 36%, #eef4f1 100%);
|
|
overflow: scroll;
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 260rpx;
|
|
padding: 58rpx 42rpx 0;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
background:
|
|
linear-gradient(135deg, rgba(227, 255, 150, 0.95) 0%, rgba(166, 255, 234, 0.86) 58%, rgba(255, 255, 255, 0.72) 100%),
|
|
url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') center/cover no-repeat;
|
|
}
|
|
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -34rpx;
|
|
top: -44rpx;
|
|
width: 290rpx;
|
|
height: 290rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.32);
|
|
}
|
|
|
|
.hero-title {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-size: 46rpx;
|
|
line-height: 64rpx;
|
|
font-weight: 900;
|
|
letter-spacing: 2rpx;
|
|
color: #07362d;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 12rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
color: rgba(0, 35, 28, 0.62);
|
|
}
|
|
|
|
.form-wrap {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 92%;
|
|
margin: -54rpx auto 0;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
margin-bottom: 24rpx;
|
|
overflow: hidden;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.86);
|
|
border-radius: 28rpx;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 16rpx 36rpx rgba(0, 35, 28, 0.08);
|
|
}
|
|
|
|
.section-title {
|
|
height: 92rpx;
|
|
line-height: 92rpx;
|
|
padding: 0 28rpx;
|
|
border-bottom: 1rpx solid #edf3f0;
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
color: #102f28;
|
|
}
|
|
|
|
.value {
|
|
width: 100%;
|
|
min-height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-top: 1rpx solid #edf3f0;
|
|
padding: 0 28rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.section-title + .value {
|
|
border-top: none;
|
|
}
|
|
|
|
.business-hour-block {
|
|
padding: 0 28rpx 28rpx;
|
|
border-top: 1rpx solid #edf3f0;
|
|
}
|
|
|
|
.section-title + .business-hour-block {
|
|
border-top: none;
|
|
}
|
|
|
|
.business-hour-title {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
color: #153c34;
|
|
}
|
|
|
|
.period-card {
|
|
margin-bottom: 20rpx;
|
|
padding: 22rpx;
|
|
border-radius: 22rpx;
|
|
background: #f7fbf9;
|
|
border: 1rpx solid #edf3f0;
|
|
}
|
|
|
|
.period-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 18rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 800;
|
|
color: #153c34;
|
|
}
|
|
|
|
.period-delete {
|
|
color: #ff5a5f;
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.period-times {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.period-times picker {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.time-picker {
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
text-align: center;
|
|
border-radius: 16rpx;
|
|
background: #fff;
|
|
border: 1rpx solid #e4ece8;
|
|
font-size: 26rpx;
|
|
color: #263f39;
|
|
}
|
|
|
|
.time-picker.placeholder {
|
|
color: #9aa7a3;
|
|
}
|
|
|
|
.time-split {
|
|
width: 66rpx;
|
|
text-align: center;
|
|
color: #7b8b86;
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.add-period {
|
|
height: 76rpx;
|
|
line-height: 76rpx;
|
|
text-align: center;
|
|
border-radius: 18rpx;
|
|
border: 1rpx dashed #9adfcd;
|
|
color: #0d7f69;
|
|
font-size: 26rpx;
|
|
font-weight: 800;
|
|
background: rgba(166, 255, 234, 0.2);
|
|
}
|
|
|
|
.name {
|
|
width: 210rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
color: #153c34;
|
|
}
|
|
|
|
.text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: right;
|
|
color: #263f39;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.text input {
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
color: #263f39;
|
|
}
|
|
|
|
.picker-text {
|
|
min-height: 96rpx;
|
|
line-height: 96rpx;
|
|
font-size: 28rpx;
|
|
color: #263f39;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.picker-text.placeholder {
|
|
color: #9aa7a3;
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
margin: 44rpx auto 12rpx;
|
|
border-radius: 999rpx;
|
|
background: linear-gradient(90deg, #e3ff96 0%, #a6ffea 100%);
|
|
color: #00231c;
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
box-shadow: 0 18rpx 36rpx rgba(0, 35, 28, 0.14);
|
|
}
|
|
|
|
button::after {
|
|
border: none;
|
|
}
|
|
</style>
|