修改营业时间

api/api.js

@@ -216,8 +216,8 @@ const config = {
 	},
 	// 修改店铺营业时间
 	updateJobTime: {
-		url: '/job/time',
-		method: 'GET',
+		url: '/shop/job/time',
+		method: 'POST',
 		// showLoading : true,
 		auth: true,
 	},

components/userShop/seleteJobTime.vue

@@ -0,0 +1,174 @@
+<template>
+	<!-- 修改营业时间弹框 -->
+	<uv-overlay :show="show" @click="close">
+		<view class="warp">
+			<view class="rect" @tap.stop>
+				<view class="title">修改营业时间</view>
+				<view class="center">
+					<view style="display: flex;justify-content: center;gap: 20rpx;">
+						<view>上班时间</view>
+						<view @click="startDateOpen()">
+							{{ startTime }}
+							<uv-datetime-picker ref="startDateRef" v-model="startTime" mode="time"
+								@confirm="startDateChange()"></uv-datetime-picker>
+						</view>
+					</view>
+
+					<view style="display: flex;justify-content: center;gap: 20rpx;">
+						<view>下班时间</view>
+						<view @click="endDateOpen()">
+							{{ endTime }}
+							<uv-datetime-picker style="z-index: 999;" ref="endDateRef" v-model="endTime" mode="time"
+								@confirm="endDateChange()"></uv-datetime-picker>
+						</view>
+					</view>
+				</view>
+				<view class="bottom">
+					<view>
+						<uv-button type="info" shape="circle" text="取消" :custom-style="customStyle1"
+							@click="close"></uv-button>
+					</view>
+					<view>
+						<uv-button type="info" shape="circle" text="确定" :custom-style="customStyle2"
+							@click="confirm"></uv-button>
+					</view>
+				</view>
+			</view>
+		</view>
+	</uv-overlay>
+</template>
+
+<script>
+	import dayjs from '../../uni_modules/uv-ui-tools/libs/util/dayjs';
+	export default {
+		data() {
+			return {
+				show: false,
+				startTime: dayjs(new Date()).format("HH:mm"),
+				endTime: dayjs(new Date()).format("HH:mm")
+			}
+		},
+		computed: {
+			customStyle1() {
+				return {
+					height: '60rpx',
+					background: '#FFF',
+					color: '#000000',
+					fontSize: '36rpx',
+					borderRadius: '40rpx', //圆角
+
+					// nvue中必须是下方的写法
+					'border-top-right-radius': '40rpx',
+					'border-bottom-left-radius': '40rpx',
+					'border-bottom-right-radius': '40rpx',
+					'width': '150rpx',
+				}
+			},
+			customStyle2() {
+				return {
+					height: '60rpx',
+					background: '#fd5100',
+					color: '#FFF',
+					fontSize: '34px',
+					borderRadius: '40rpx', //圆角
+					// nvue中必须是下方的写法
+					'border-top-right-radius': '40rpx',
+					'border-bottom-left-radius': '40rpx',
+					'border-bottom-right-radius': '40rpx',
+					'width': '150rpx',
+				}
+			}
+		},
+		methods: {
+
+			startDateChange(val) {
+				this.$nextTick(() => {
+					this.startTime = val.value
+
+				});
+			},
+			startDateOpen() {
+				this.$refs.startDateRef.open();
+			},
+			endDateChange(val) {
+				this.$nextTick(() => {
+					this.endTime = val.value
+				});
+			},
+			endDateOpen() {
+				this.$refs.endDateRef.open();
+			},
+
+
+			open() {
+				this.show = true
+			},
+			close() {
+				this.show = false
+			},
+			confirm() {
+				this.show = false
+
+				this.$api('updateJobTime', {
+					time: this.startTime + '-' + this.endTime
+				}, res => {
+					if (res.code == 200) {
+						uni.showToast({
+							icon: 'success',
+							title: '修改营业时间成功',
+							duration: 1500
+						})
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.uv-popup {
+		z-index: 999;
+	}
+
+	.warp {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+
+	}
+
+	.rect {
+		width: 600rpx;
+		height: 300rpx;
+		background-color: #fff;
+		border-radius: 20rpx;
+		overflow: hidden;
+
+		.title {
+			padding: 10rpx 0 0 15rpx;
+			background-color: #fd5100;
+			color: #FFF;
+			text-align: left;
+			width: 100%;
+			height: 18%;
+			font-size: 36rpx;
+		}
+
+		.center {
+			height: 50%;
+			display: flex;
+			flex-direction: column;
+			gap: 20rpx;
+			// justify-content: center;
+			// align-items: center;
+			font-size: 36rpx;
+		}
+
+		.bottom {
+			display: flex;
+			justify-content: center;
+			gap: 50rpx;
+		}
+	}
+</style>

pages/index/center.vue

@@ -11,6 +11,9 @@
 				<view class="name">
 					{{ userInfo.nickName || '微信用户' }}
 				</view>
+				<view class="jobTime" @click="$refs.seleteJobTimePopup.open()">
+					请设置营业时间
+				</view>
 				<!-- <view class="vip">
 					VIP1
 				</view> -->
@@ -121,7 +124,13 @@
 			</view>
 		</view>
 
+
+
+		<!-- 联系客服弹框 -->
 		<customerServicePopup ref="customerServicePopup" />
+		<!-- 设置营业时间 -->
+		<seleteJobTimePopup ref="seleteJobTimePopup" />
+
 
 		<tabber select="4" />
 	</view>
@@ -129,6 +138,7 @@
 
 <script>
 	import customerServicePopup from '@/components/config/customerServicePopup.vue'
+	import seleteJobTimePopup from '@/components/userShop/seleteJobTime.vue'
 	import tabber from '@/components/base/tabbar.vue'
 	import {
 		mapGetters,
@@ -140,6 +150,7 @@
 			tabber,
 			userShopCommission,
 			customerServicePopup,
+			seleteJobTimePopup,
 		},
 		computed: {
 			...mapGetters(['userShop']),
@@ -197,6 +208,10 @@
 					}
 				})
 			},
+			//设置营业时间
+			setJobTime() {
+				
+			},
 		}
 	}
 </script>
@@ -227,6 +242,11 @@
 		}
 
 		.info {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			gap: 10rpx;
+
 			font-size: 28rpx;
 
 			.vip {
@@ -239,10 +259,15 @@
 				height: 40rpx;
 				border-radius: 20rpx;
 				margin-top: 20rpx;
+
 			}
 
 			.name {
-				font-size: 32rpx;
+				font-size: 36rpx;
+			}
+
+			.jobTime {
+				font-size: 24rpx;
 			}
 
 			.tips {
@@ -257,13 +282,14 @@
 			background-color: $uni-color;
 			color: #fff;
 			border-radius: 20rpx;
-			margin-top: 50rpx;
+			// margin-top: 50rpx;
 		}
 
 		.setting {
-			position: absolute;
-			right: 50rpx;
-			top: 50rpx;
+			// position: absolute;
+			// right: 50rpx;
+			// top: 50rpx;
+			margin-left: 20rpx;
 		}
 	}