浏览代码

创建商品增加售卖时间

lishanshan 8 月之前
父节点
当前提交
8cf26862b9
共有 3 个文件被更改,包括 334 次插入12 次删除
  1. 259 6
      pages/product/creatProduct.vue
  2. 70 3
      pages/product/details.vue
  3. 5 3
      uni_modules/uni-table/package.json

+ 259 - 6
pages/product/creatProduct.vue

@@ -242,19 +242,62 @@
 									每天
 								</span>
 								<span v-if="form.sellingTimeType == '2'" style="margin-left: 26rpx;">
-									<u-button type="primary" size="mini" @click="selectSaleDate">添加时间段</u-button>
+									<u-button type="primary" size="mini" @click="selectSaleDate">添加时间</u-button>
+								</span>
+							</u-radio>
+							<u-radio @change="form.sellingTimeType = '3'" name="week" style="width: 100%;margin-top: 16rpx;">
+								<span>
+									每周
 								</span>
 							</u-radio>
 						</u-radio-group>
-						<uni-card v-show="form.sellingDay && form.sellingDay.length > 0" :is-shadow="false" is-full
-							style="border:1rpx solid #E5E5E5;">
+						<!-- 每天售卖时间选择 -->
+						<uni-card v-show="form.sellingTimeType == '2' && form.sellingDay && form.sellingDay.length > 0"
+							:is-shadow="false" is-full style="border:1rpx solid #E5E5E5;">
 							<view v-for="item, index in form.sellingDay" :key="index"
 								style="display: flex; justify-content: space-between;">
 								<span>{{ item[0] }}</span>
-								<span style="color: #2979ff;" @click="deleteTime(index)"><u-icon name="minus-circle-fill"
+								<!-- <span>{{ item[0] ? item[0] + '-' + item[1] : '' }}</span> -->
+								<span style="color: #dd524d;" @click="deleteTime(index)"><u-icon name="minus-circle-fill"
 										style="margin-left: 17rpx;"></u-icon></span>
 							</view>
 						</uni-card>
+						<view class="item_tips saletime" v-show="form.sellingTimeType == '2' && form.sellingDay.length == 0">
+							请添加起止时间段
+						</view>
+						<!-- 每周售卖时间选择 -->
+						<uni-table v-show="form.sellingTimeType == '3'">
+							<!-- 表头 -->
+							<uni-tr class="table-header">
+								<uni-th width="200rpx" align="left"><u-checkbox v-model:checked="allChecked"
+										@change="handleAllCheckChange"></u-checkbox>工作日</uni-th>
+								<uni-th align="center">时间</uni-th>
+								<uni-th width="100rpx" align="center">操作</uni-th>
+							</uni-tr>
+							<!-- 数据行 -->
+							<uni-tr v-for="(item, index) in form.localProductSellingWeeks" :key="index" class="table-row">
+								<uni-td width="200rpx" align="left">
+									<u-checkbox v-model="item.checked"
+										@change="handleItemCheckChange($event, item, index)"></u-checkbox>{{
+											item.weekDay }}
+								</uni-td>
+								<uni-td align="left">
+									<view v-for="(date, timeIndex) in item.sellingStartTimeList" :key="timeIndex" class="item_weekTime">
+										<span>{{ date[0] }}</span>
+										<!-- <span>{{ date[0] ? date[0] + '-' + date[1] : '' }}</span> -->
+										<span v-show="date[0]" style="color: #dd524d;" @click="deleteWeekTime(item, timeIndex)">
+											<u-icon name="minus-circle-fill" style="margin-left: 17rpx;"></u-icon>
+										</span>
+									</view>
+								</uni-td>
+								<uni-td width="100rpx" align="center">
+									<view class="uni-group">
+										<span style="color: #007aff;" @click="addWeekTime(item)"><u-icon
+												name="plus-circle-fill"></u-icon></span>
+									</view>
+								</uni-td>
+							</uni-tr>
+						</uni-table>
 						<view>
 						</view>
 					</view>
@@ -398,6 +441,7 @@
 		</view>
 		<rangTime ref="rangTime" :mode="mode" @onSubmit="onEndTimeChange" :title="timeTitle" />
 		<rangTime ref="rangSaleTime" :mode="mode" @onSubmit="onSaleTimeChange" :title="timeTitle" />
+		<rangTime ref="rangWeekTime" :mode="mode" @onSubmit="onWeekTimeChange" :title="timeTitle" />
 		<refund v-show="isRefund" :Confirm="form.refundConfirm" :Label="form.refundLabel" @confirm="saveFound"
 			@close="cutRule" />
 		<view class="popup" v-if="isSelectType">
@@ -461,6 +505,7 @@ export default {
 			video: '',
 			tabIndex: '0',
 			mode: 5,
+			allChecked: false,
 			form: {
 				instructions: '',
 				preBook: 0,
@@ -475,6 +520,7 @@ export default {
 				richText: '',
 				// 为"每天"选项添加单独的时间段数组
 				sellingDay: [],
+				localProductSellingWeeks: []
 				// categoryId:'',
 				// productName: '',
 				// productImage: '',
@@ -538,7 +584,45 @@ export default {
 			timeTitle: '选择售卖时间',
 			// 商品分组列表
 			showGroupPicker: false,
-			groupOptions: []
+			groupOptions: [],
+			// 为"每周"选项添加单独的时间段数组
+			localProductSellingWeeks: [
+				{
+					weekDay: '周一',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周二',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周三',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周四',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周五',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周六',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周日',
+					sellingStartTimeList: [],
+					checked: false
+				}
+			]
 		}
 	},
 	methods: {
@@ -862,7 +946,7 @@ export default {
 		},
 		//获取商品分组列表
 		getProductGroup() {
-			this.$http.get("/localProductGrouping/localProductGrouping/getAppList").then(res => {
+			this.$http.get("/localProductGrouping/localProductGrouping/getAppList?sourceType=1").then(res => {
 				if (res.data.success) {
 					this.groupOptions = res.data.result || []
 				}
@@ -884,11 +968,14 @@ export default {
 			this.showDate = val.startDate + '-' + val.endDate
 			this.$forceUpdate(); // 强制刷新视图
 		},
+		// 选择售卖时间
 		selectSaleDate() {
 			this.$refs.rangSaleTime.open()
 		},
 		onSaleTimeChange(val) {
 			if (val && val.startDate && val.endDate) {
+				// const timeRange = [val.startDate, val.endDate];
+				// this.form.sellingDay.push(timeRange)
 				const timeRange = `${val.startDate}-${val.endDate}`;
 				this.form.sellingDay.push([timeRange])
 			}
@@ -898,6 +985,88 @@ export default {
 			this.form.sellingDay.splice(index, 1);
 			this.$forceUpdate(); // 强制刷新视图
 		},
+		// 选择每周售卖时间
+		// 全选/全不选处理
+		handleAllCheckChange(e) {
+			const checked = e.value;
+			if (!checked) {
+				// 显示确认提示框
+				uni.showModal({
+					title: '提示',
+					content: '取消全选将清空每周已添加的时间段,是否继续',
+					success: (res) => {
+						if (res.confirm) {
+							// 用户确认取消全选,清空时间段数据
+							this.allChecked = checked;
+							this.form.localProductSellingWeeks.forEach(item => {
+								item.checked = checked;
+								// 当取消全选时,清空所有时间段
+								if (!checked) {
+									item.sellingStartTimeList = [];
+								}
+							});
+						} else {
+							this.allChecked = true;
+						}
+					}
+				});
+			} else {
+				this.allChecked = checked;
+				this.form.localProductSellingWeeks.forEach(item => {
+					item.checked = checked;
+					// 当取消全选时,清空所有时间段
+					if (!checked) {
+						item.sellingStartTimeList = [];
+					}
+				});
+			}
+		},
+		// 单个复选框变化处理
+		handleItemCheckChange(e, row) {
+			// 获取最新的复选框状态
+			const isChecked = e.value;
+			// 判断如果checked状态是false,清空该行的sellingStartTimeList日期
+			if (!isChecked) {
+				// 确保sellingStartTimeList是响应式的
+				if (!row.sellingStartTimeList) {
+					this.$set(row, 'sellingStartTimeList', []);
+				} else {
+					// 清空数组,保持引用
+					row.sellingStartTimeList.splice(0, row.sellingStartTimeList.length);
+				}
+			}
+		},
+		// 每周添加时间
+		addWeekTime(item) {
+			// 判断如果当前行的checked状态是false,提示用户先勾选
+			if (!item.checked) {
+				uni.showToast({
+					title: '请先勾选当前行',
+					icon: 'none'
+				});
+				return; // 终止后续操作
+			}
+			this.addWeekDay = item.weekDay
+			this.$refs.rangWeekTime.open()
+		},
+		// 每周删除时间
+		deleteWeekTime(item, timeIndex) {
+			// 使用splice删除指定索引的时间段
+			item.sellingStartTimeList.splice(timeIndex, 1);
+			this.$forceUpdate(); // 强制刷新视图
+		},
+		onWeekTimeChange(val) {
+			if (val && val.startDate && val.endDate) {
+				const timeRange = `${val.startDate}-${val.endDate}`;
+				// const timeRange = [val.startDate, val.endDate];
+				this.form.localProductSellingWeeks.forEach(item => {
+					if (item.weekDay == this.addWeekDay) {
+						item.sellingStartTimeList.push([timeRange])
+					}
+				})
+			}
+			this.$forceUpdate(); // 强制刷新视图
+		},
 		//提交审核
 		submit() {
 			console.log(this.form)
@@ -1062,6 +1231,9 @@ export default {
 					if (!res.data.result.sellingDay) {
 						this.form.sellingDay = []
 					}
+					if (!res.data.result.localProductSellingWeeks) {
+						this.form.localProductSellingWeeks = this.localProductSellingWeeks
+					}
 					if (!res.data.result.serviceDescription) {
 						this.form.serviceDescription = []
 					}
@@ -1152,6 +1324,67 @@ export default {
 		}
 	},
 	mounted() {
+		this.form.localProductSellingWeeks = [
+			{
+				"weekDay": "周一",
+				"sellingStartTimeList": [
+					[
+						"06:00:00-11:00:00"
+					],
+					[
+						"03:00:00-12:00:00"
+					],
+					[
+						"08:00:00-11:00:00"
+					]
+				],
+				"checked": true
+			},
+			{
+				"weekDay": "周二",
+				"sellingStartTimeList": [
+					[
+						"05:00:05-12:00:00"
+					]
+				],
+				"checked": true
+			},
+			{
+				"weekDay": "周三",
+				"sellingStartTimeList": [
+					[]
+				],
+				"checked": false
+			},
+			{
+				"weekDay": "周四",
+				"sellingStartTimeList": [
+					[]
+				],
+				"checked": false
+			},
+			{
+				"weekDay": "周五",
+				"sellingStartTimeList": [
+					[]
+				],
+				"checked": false
+			},
+			{
+				"weekDay": "周六",
+				"sellingStartTimeList": [
+					[]
+				],
+				"checked": false
+			},
+			{
+				"weekDay": "周日",
+				"sellingStartTimeList": [
+					[]
+				],
+				"checked": false
+			}
+		]
 		this.getProductGroup()
 		this.getLeftTree()
 		this.getForm()
@@ -1646,6 +1879,10 @@ export default {
 	margin-top: -15rpx;
 }
 
+.saletime {
+	padding-top: 10rpx;
+}
+
 /* 添加radio样式 */
 .radio-group {
 	display: flex;
@@ -1662,4 +1899,20 @@ export default {
 ::v-deep .editor-container {
 	height: 260rpx;
 }
+
+::v-deep .uni-table-tr .checkbox {
+	padding: 0;
+	width: 30rpx;
+	// width: 24px; /* 可以根据需要调整宽度 */
+	// height: 24px; /* 保持宽高一致 */
+}
+
+::v-deep .uni-table-th[data-v-511e81f9] {
+	padding: 15rpx;
+}
+
+.item_weekTime {
+	display: flex;
+	justify-content: space-around;
+}
 </style>

+ 70 - 3
pages/product/details.vue

@@ -128,6 +128,7 @@
 						<span class="span">售卖时间</span>
 						<span v-if="form.sellingTimeType == '1'">不限制</span>
 						<span v-if="form.sellingTimeType == '2'">每天</span>
+						<span v-if="form.sellingTimeType == '3'">每周</span>
 					</view>
 					<view class="card_data" v-show="form.sellingTimeType == '2' && form.sellingDay && form.sellingDay.length > 0">
 						<uni-card :is-shadow="false" is-full style="border:1rpx solid #E5E5E5;">
@@ -136,6 +137,30 @@
 							</view>
 						</uni-card>
 					</view>
+					<view class="card_data" v-show="form.sellingTimeType == '3'">
+						<!-- 每周售卖时间选择 -->
+						<uni-table v-show="form.sellingTimeType == '3'">
+							<!-- 表头 -->
+							<uni-tr class="table-header">
+								<uni-th width="200rpx" align="left"><u-checkbox disabled></u-checkbox>工作日</uni-th>
+								<uni-th align="center">时间</uni-th>
+							</uni-tr>
+							<!-- 数据行 -->
+							<uni-tr v-for="(item, index) in form.localProductSellingWeeks" :key="index" class="table-row">
+								<uni-td width="200rpx" align="left">
+									<u-checkbox v-model="item.checked" @change="handleItemCheckChange($event, item, index)"
+										disabled></u-checkbox>{{
+											item.weekDay }}
+								</uni-td>
+								<uni-td align="center">
+									<view v-for="(date, timeIndex) in item.sellingStartTimeList" :key="timeIndex" class="item_weekTime">
+										<span>{{ date[0] }}</span>
+										<!-- <span>{{ date[0] ? date[0] + '-' + date[1] : '' }}</span> -->
+									</view>
+								</uni-td>
+							</uni-tr>
+						</uni-table>
+					</view>
 				</view>
 				<!-- <view class="data">
 					<span class="span">库存</span>{{ form.stockQuantity }}
@@ -208,7 +233,45 @@ export default {
 				excludeKeys: []
 			},
 			editorCtx: null, // 编辑器上下文
-			editorId: null   // 编辑器ID
+			editorId: null,   // 编辑器ID
+			// 为"每周"选项添加单独的时间段数组
+			localProductSellingWeeks: [
+				{
+					weekDay: '周一',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周二',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周三',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周四',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周五',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周六',
+					sellingStartTimeList: [],
+					checked: false
+				},
+				{
+					weekDay: '周日',
+					sellingStartTimeList: [],
+					checked: false
+				}
+			]
 		}
 	},
 	methods: {
@@ -238,7 +301,6 @@ export default {
 			id: this.productId,
 			isApp: '1'
 		}).then(res => {
-
 			if (res.data.code == 200) {
 				this.form = res.data.result
 				console.log(this.form)
@@ -247,7 +309,12 @@ export default {
 				}
 				this.form.groupingName = res.data.result.groupingName || ''
 				this.form.serviceDescription = res.data.result.serviceDescription || []
-				this.form.sellingDay = res.data.result.sellingDay || []
+				if (!res.data.result.sellingDay) {
+					this.form.sellingDay = []
+				}
+				if (!res.data.result.localProductSellingWeeks) {
+					this.form.localProductSellingWeeks = this.localProductSellingWeeks
+				}
 				if (res.data.result.productImage) {
 					let productImagelist = []
 					productImagelist = res.data.result.productImage.split(',')

+ 5 - 3
uni_modules/uni-table/package.json

@@ -1,7 +1,7 @@
 {
   "id": "uni-table",
   "displayName": "uni-table 表格",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "表格组件,多用于展示多条结构类似的数据,如",
   "keywords": [
     "uni-ui",
@@ -47,8 +47,10 @@
       },
       "client": {
         "App": {
-          "app-vue": "y",
-          "app-nvue": "n"
+            "app-vue": "y",
+            "app-nvue": "n",
+            "app-harmony": "u",
+            "app-uvue": "u"
         },
         "H5-mobile": {
           "Safari": "y",