营业时间页面

This commit is contained in:
BAKEYi 2026-06-02 10:26:55 +08:00
parent 917a0af084
commit f65e18ea3d
1 changed files with 482 additions and 85 deletions

View File

@ -1,31 +1,99 @@
<template>
<view class="service-time-page">
<!-- 顶部导航栏 -->
<custom-navbar title="营业时间" :showBack="true"></custom-navbar>
<custom-navbar title="营业设置" :showBack="true"></custom-navbar>
<!-- 内容区域 -->
<view class="content">
<!--营业时间卡片 -->
<view class="section-card">
<view class="section-header">
<view class="title-bar"></view>
<text class="section-title">营业时间</text>
<view class="setting-row">
<text class="setting-label">当前接单状态</text>
<view class="custom-switch" :class="{ 'is-on': isOpenStore }" @click="toggleStatus">
<text class="switch-text text-on">接单中</text>
<text class="switch-text text-off">不接单</text>
<view class="switch-dot"></view>
</view>
</view>
<!-- 时间显示 -->
<view class="time-display-section">
<view class = "time-value-box">
<text class="time-value">营业时间</text>
<text class="time-value2">{{ currentTime }}</text>
<view class="service-time-card">
<view class="card-header-flex" @click="isExpandTime = !isExpandTime">
<text class="header-title">{{ isExpandTime ? '服务时间' : '设置服务时间' }}</text>
<image class="arrow-icon" :class="{ 'rotated': isExpandTime }" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/6cfe4592-e9c6-45b6-ac45-625bc361aded.png"></image>
</view>
<view class="change-button" @click="showTimePicker" v-if="!showBottomActions && !showTimePickerFlag">
<text class="change-text">信息变更 </text>
<image class="arrow-right" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b87d4918-4282-4f51-931c-292435ba5d36" mode="aspectFit"></image>
<view class="time-content" v-if="isExpandTime">
<view class="time-blocks-container">
<view class="t-block">
<text class="t-time">{{ formatTime(startTime) }}</text>
<text class="t-label">开始时间</text>
</view>
<text class="t-separator"></text>
<view class="t-block">
<text class="t-time">{{ formatTime(endTime) }}</text>
<text class="t-label">结束时间</text>
</view>
</view>
<view class="modify-btn-outline" @click="showTimePicker" v-if="!showBottomActions && !showTimePickerFlag">
<image class="edit-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d67adcda-d334-440f-87d4-d709983b0101.png"></image>
<text>修改服务时间</text>
</view>
</view>
</view>
<view class="setup-modal-mask" v-if="showSetupModal" catchtouchmove="true">
<view class="setup-modal-content">
<image class="modal-bg" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ac2cb4aa-a7c5-4776-98f4-b77e9c0cfa85.png"></image>
<view class="modal-header">
<text>温馨提示</text>
</view>
<view class="modal-body">
<text class="modal-subtitle">发布服务请完善以下资料</text>
<view class="missing-list">
<view class="missing-item" v-if="!hasBusinessTime">
<view class="item-left">
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/21b26b44-5e36-4291-8900-705a3d5bfa90.png"></image>
<view class="item-texts">
<text class="item-title">营业时间未配置</text>
<text class="item-desc">请完善店铺的营业时间</text>
</view>
</view>
<view class="item-right orange" @tap="goToBusinessTime">去配置</view>
</view>
<view class="missing-item" v-if="!hasServiceSkill">
<view class="item-left">
<image class="item-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/21b26b44-5e36-4291-8900-705a3d5bfa90.png"></image>
<view class="item-texts">
<text class="item-title">服务技能未配置</text>
<text class="item-desc">请完善服务技能</text>
</view>
</view>
<view class="item-right orange" @tap="goToServiceSkill">去配置</view>
</view>
<view class="missing-item" v-if="!isCertified">
<view class="item-left">
<image class="item-icon" :src="isUnderReview ? 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/25c444be-a66e-45d6-b50d-922149ff059f.png' : 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/21b26b44-5e36-4291-8900-705a3d5bfa90.png'"></image>
<view class="item-texts">
<text class="item-title" :class="{'blue-text': isUnderReview}">{{ isUnderReview ? '资质认证中' : '资质未认证' }}</text>
<text class="item-desc">请完成资质认证</text>
</view>
</view>
<view class="item-right" :class="isUnderReview ? 'grey' : 'light-green'" @tap="goToAuth">
{{ isUnderReview ? '查看进度' : '去认证' }}
</view>
</view>
</view>
</view>
<view class="modal-footer">
<view class="btn-know" @tap="closeSetupModal">知道了</view>
</view>
</view>
</view>
<!-- 营业时间选择器五列选择器 -->
<view class="popup" :class="{ show: showTimePickerFlag }">
<view class="popup-mask" @click="hideTimePicker"></view>
<view class="popup-content">
@ -78,7 +146,6 @@
</view>
</view>
<!-- 底部操作按钮在选择时间后显示 -->
<view class="bottom-actions" v-if="showBottomActions">
<view class="action-buttons">
<button class="btn-cancel-large" @click="cancelChange">取消</button>
@ -115,14 +182,62 @@ export default {
endTime: {
hour: '21',
minute: '00'
},
//
userInfo: {},
authDetails: null,
sjId: null,
showSetupModal: false,
isExpandTime: false, // falsetrue
isLogin: true //
}
},
computed: {
//
isUnderReview() {
if (!this.isLogin) return false;
if (this.authDetails && Object.keys(this.authDetails).length > 0) {
return true;
}
return false;
},
//
canOpenStore() {
return this.hasBusinessTime && this.hasServiceSkill && this.isCertified;
},
//
hasServiceSkill() {
const fromUser = this.userInfo && Array.isArray(this.userInfo.servers_kill) && this.userInfo.servers_kill.length > 0;
const fromAuth = this.authDetails && Array.isArray(this.authDetails.servers_kill) && this.authDetails.servers_kill.length > 0;
return this.isLogin && (fromUser || fromAuth);
},
//
isOpenStore() {
if (!this.canOpenStore) {
return false;
}
return this.userInfo.order_taking == 1;
},
isSettled() {
if (!this.isLogin || typeof this.userInfo.id_type === 'undefined') return false;
return this.userInfo.id_type !== 0;
},
isCertified() {
if (!this.isLogin || typeof this.userInfo.id_type === 'undefined') return false;
return this.userInfo.id_type > 0;
},
hasBusinessTime() {
const timeFromUser = this.userInfo && this.userInfo.business_time;
const timeFromAuth = this.authDetails && this.authDetails.business_time;
return this.isLogin && !!(timeFromUser || timeFromAuth);
}
},
onLoad() {
this.loadCurrentTime();
},
methods: {
//
// ()
async loadCurrentTime() {
try {
const res = await request.post('/sj/user/getuser', {
@ -131,6 +246,10 @@ export default {
console.log('获取用户信息响应:', res)
if (res.state === 1 && res.data) {
// userInfo
this.userInfo = res.data;
this.sjId = res.data.id;
//
if (res.data.business_time) {
this.currentTime = res.data.business_time
@ -144,6 +263,11 @@ export default {
this.originalTime = '09:00-21:00'
this.parseTimeString('09:00-21:00')
}
// 便
if (this.isSettled) {
this.fetchAuthDetails();
}
} else {
throw new Error(res.msg || '获取用户信息失败')
}
@ -161,6 +285,80 @@ export default {
}
},
//
fetchAuthDetails() {
request.post("/sj/userSjAuth/details", {
type: 1,
id_type: '1'
}).then(res => {
if (res.code == 200 && res.data) {
this.authDetails = res.data;
}
});
},
//
closeSetupModal() {
this.showSetupModal = false;
},
//
goToBusinessTime() {
this.showSetupModal = false;
uni.showToast({ title: '您当前正在营业时间页面', icon: 'none' });
},
//
goToServiceSkill() {
this.showSetupModal = false;
uni.navigateTo({ url: '/pages/shop/service-skills' });
},
//
goToAuth() {
this.showSetupModal = false;
if (this.isUnderReview) {
uni.navigateTo({ url: '/pages/ruzhu/submitres' });
} else {
this.navigateToForm();
}
},
//
navigateToForm() {
if (this.isSettled) {
uni.navigateTo({ url: '/pages/ruzhu/ruzhu?step=3' });
} else {
uni.navigateTo({ url: '/pages/ruzhu/ruzhu' });
}
},
// /
toggleStatus() {
const currentStatus = this.userInfo.order_taking;
const isCurrentlyResting = currentStatus != 1; //
//
if (isCurrentlyResting && !this.canOpenStore) {
this.showSetupModal = true;
return;
}
//
let newStatus = currentStatus == 1 ? 2 : 1;
uni.showLoading({ title: '切换中...', mask: true });
request.post("/sj/sjordertaking", {
order_taking: newStatus,
sjid: this.sjId
}).then((res) => {
uni.hideLoading();
this.userInfo.order_taking = newStatus; //
this.loadCurrentTime(); //
uni.showToast({ title: newStatus == 1 ? '已开启接单' : '已停止接单', icon: 'none' });
}).catch(() => {
uni.hideLoading();
uni.showToast({ title: '网络异常,切换失败', icon: 'none' });
});
},
//
parseTimeString(timeStr) {
const times = timeStr.split('-')
@ -261,6 +459,7 @@ export default {
cancelChange() {
//
this.currentTime = this.originalTime
this.parseTimeString(this.originalTime) // 退
this.showBottomActions = false
this.tempTime = ''
},
@ -322,7 +521,6 @@ export default {
}
},
//
validateTime(startTime, endTime) {
const start = new Date(`2000/01/01 ${startTime.hour}:${startTime.minute}`)
@ -340,84 +538,281 @@ export default {
}
.content {
padding: 20rpx;
padding: 40rpx 24rpx 24rpx 24rpx;
}
.section-card {
background: white;
border-radius: 20rpx;
padding: 22rpx;
margin-bottom: 20rpx;
}
.section-header {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.section-title {
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 32rpx;
color: #1D2129;
line-height: 48rpx;
text-align: left;
font-style: normal;
}
.title-bar {
width: 6rpx;
height: 30rpx;
background-color: #E8101E;
margin-right: 10rpx;
border-radius: 5rpx;
}
.time-display-section {
/* 接单状态开关行样式 (依据设计图定制) */
.setting-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0 10rpx 0 ;
background: #fff;
border-radius: 20rpx;
padding: 18rpx 24rpx;
margin-bottom: 34rpx;
}
.time-value-box {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 40rpx;
text-align: left;
font-style: normal;
margin-left: 16rpx;
}
.time-value {
margin-right: 15rpx;
}
.time-value2 {
.setting-label {
font-size: 30rpx;
color: #333;
font-weight: 500;
}
.change-button {
.custom-switch {
width: 140rpx;
height: 56rpx;
border-radius: 28rpx;
background-color: #D3D3D3;
position: relative;
display: flex;
align-items: center;
transition: background-color 0.3s;
box-sizing: border-box;
&.is-on {
background-color: #FF4767;
}
.change-text {
font-family: PingFangSC, PingFang SC;
.switch-text {
font-size: 24rpx;
color: #FFFFFF;
position: absolute;
transition: opacity 0.3s;
font-weight: 500;
}
.text-on {
left: 12rpx;
opacity: 0;
}
.text-off {
right: 12rpx;
opacity: 1;
}
&.is-on .text-on { opacity: 1; }
&.is-on .text-off { opacity: 0; }
.switch-dot {
width: 48rpx;
height: 48rpx;
background-color: #FFFFFF;
border-radius: 50%;
position: absolute;
left: 4rpx;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.15);
}
&.is-on .switch-dot {
transform: translateX(84rpx);
}
}
/* 展开折叠服务时间卡片样式 */
.service-time-card {
background: #fff;
border-radius: 20rpx;
padding: 24rpx 24rpx;
}
.card-header-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-title {
font-size: 30rpx;
color: #333;
font-weight: 500;
transition: all 0.3s ease-in-out;
}
.arrow-icon {
width: 16rpx;
height: 9rpx;
transition: transform 0.3s;
transform: rotate(-360deg); /* 默认朝下 */
}
.arrow-icon.rotated {
transform: rotate(180deg); /* 展开朝上 */
}
.time-blocks-container {
margin-top: 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.t-block {
width: 280rpx;
height: 150rpx;
background: #F5F5F5 ;
border-radius: 16rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.t-time {
font-size: 42rpx;
color: #333;
font-weight: 500;
}
.t-label {
font-size: 24rpx;
color: #999;
margin-top: 12rpx;
}
.t-separator {
font-weight: 400;
font-size: 28rpx;
color: #E8101E;
color: #999999;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.modify-btn-outline {
margin-top: 50rpx;
height: 78rpx;
border-radius: 43rpx;
border: 1rpx solid #FF4767;
display: flex;
align-items: center;
justify-content: center;
color: #FF4767;
font-size: 28rpx;
margin-bottom: 10rpx;
}
.edit-icon {
width: 30rpx;
height: 30rpx;
margin-right: 12rpx;
}
.arrow-right {
margin-left: 10rpx;
width: 11rpx;
height: 22rpx;
/* ============ 提示弹窗样式 (完全一致) ============ */
.setup-modal-mask {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
.setup-modal-content {
width: 630rpx;
height: 775rpx;
background: #FFFFFF;
border-radius: 32rpx;
position: relative;
display: flex;
flex-direction: column;
.modal-bg {
position: absolute;
top: 0; left: 0;
width: 630rpx;
height: 265rpx;
z-index: 0;
}
.modal-header {
position: relative;
z-index: 1;
height: 150rpx;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 20rpx;
text {
font-size: 36rpx;
font-weight: bold;
color: #333333;
letter-spacing: 2rpx;
}
}
.modal-body {
position: relative;
z-index: 1;
flex: 1;
padding: 24rpx 40rpx;
.modal-subtitle {
font-size: 28rpx;
color: #333333;
margin-bottom: 40rpx;
display: block;
}
.missing-list {
display: flex;
flex-direction: column;
gap: 46rpx;
.missing-item {
display: flex;
justify-content: space-between;
align-items: center;
.item-left {
display: flex;
align-items: flex-start;
.item-icon {
width: 32rpx;
height: 32rpx;
margin-right: 16rpx;
flex-shrink: 0;
margin-top: 6rpx;
}
.item-texts {
display: flex;
flex-direction: column;
.item-title {
font-size: 30rpx;
color: #333333;
font-weight: 500;
margin-bottom: 8rpx;
&.blue-text {
color: #2b85e4;
}
}
.item-desc {
font-size: 24rpx;
color: #999999;
}
}
}
.item-right {
font-size: 26rpx;
font-weight: 400;
margin-top: -45rpx;
&.orange { color: #FF7B00; }
&.grey { color: #999999; }
&.light-green { color: #18b566; }
}
}
}
}
.modal-footer {
position: relative;
z-index: 1;
padding: 0 50rpx 50rpx;
.btn-know {
width: 100%;
height: 88rpx;
background: #FF4767;
border-radius: 44rpx;
color: #FFFFFF;
font-size: 32rpx;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
/* 五列选择器样式 */
@ -474,7 +869,7 @@ export default {
.confirm-text {
font-size: 32rpx;
color: #E8101E;
color: #FF4767;
font-weight: 500;
}
@ -511,8 +906,10 @@ export default {
}
.time-label {
font-weight: 400;
font-size: 26rpx;
color: #999999;
line-height: 37rpx;
margin-top: 8rpx;
}
@ -524,7 +921,7 @@ export default {
}
.time-block.active .time-value-picker {
color: #E8101E;
color: #FF4767;
}
.time-separator {
@ -570,7 +967,7 @@ export default {
border: none;
width: 290rpx;
height: 86rpx;
background: linear-gradient( 180deg, #F52540 0%, #E8101E 100%, #E8101E 100%);
background: linear-gradient(135deg, #FF4767, #FF6B8A);
border-radius: 43rpx;
}
@ -590,7 +987,7 @@ export default {
}
.btn-confirm-large {
background: #E8101E;
background: linear-gradient(135deg, #FF4767, #FF6B8A);
color: white;
}
</style>