LocalLivingServicesUniapp/pages/product/details.vue

<template>
	<view class="details">
		<view class="top"></view>
		<view class="head">
			<view class="head_left">
				<span class="cuIcon-back" @click="back"></span>
			</view>
			<view class="case">
				商品详情
			</view>
		</view>
		<view class="center">
			<view class="box">
				<view class="title">
					商品信息
				</view>
				<view class="data">
					<span class="span">商品名称</span>{{ form.productName }}
				</view>
				<view class="data">
					<span class="span">商品分类</span>{{ form.productCategory }}
				</view>
				<view class="data">
					<span class="span">商品分组</span>{{ form.groupingName }}
				</view>
				<view class="img_box">
					<span class="line">商品封面图</span>
					<view class="img_list">
						<view v-for="(val, index) in fmImageList" :key="index">
							<view class="img">
								<image :src="val.url" mode=""
									style="width: 140rpx;height:140rpx;border-radius: 4px; border: 1px solid #ebecee;margin-right:20rpx;margin-bottom:10rpx">
								</image>
							</view>
							<!-- <image v-for="(val, index) in fmImageList" :key="index" :src="form.productImage" mode=""></image> -->
						</view>
					</view>
				</view>
				<view class="img_box">
					<span class="line">主图视频</span>
					<view class="item upload">
						<view class="customize">
							<view class="business-img">
								<view class="uni-uploader__file">
									<view class="uploader_video" v-if="form.video">
										<video :src="form.video" class="video-container"></video>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="img_box">
					<span class="line">商品详情页</span>
					<view class="img_list" v-if="detailImages">
						<view class="img" v-for="(item, index) in detailImages" :key="index">
							<image :src="item" mode=""></image>
						</view>
					</view>
					<view class="item" v-if="form.richText">
						<!-- 使用Editor组件代替rich-text -->
						<Editor :readOnly="true" :toolbarConfig="toolbarConfig" @init="onEditorInit" />
					</view>
					<!-- <view class="item" v-if="form.richText">
						<rich-text :nodes="form.richText"></rich-text>
					</view> -->
				</view>
				<view class="data">
					<span class="span">搜索关键字</span>{{ form.searchKeywords }}
				</view>
				<!-- <view class="data" v-if="form.categoryId != '1945013773786701826'">
					<span class="span">原价</span>{{ form.price }}
				</view>
				<view class="data" v-if="form.categoryId != '1945013773786701826'">
					<span class="span">实际售价</span>{{ form.soldPrice }}
				</view> -->
				<!-- 
				<view class="particulars" v-if="form.categoryId != '1945013773786701826'">
					组合套餐
					<view class="content">
						<view class="item" v-for="(item, index) in form.productGroups" :key="item.groupId">
							<view class="item_title">
								{{ item.groupName }}
							</view>
							<view class="item_row" v-for="(row, index) in item.singleProduct" :key="index">
								<view class="name">{{ row.productName }} </view>
								<view class="price">
									{{ row.quantity }}{{ row.unit }}/{{ row.price }}元
								</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>

			<!-- <view class="box" v-if="form.categoryId == '1945013773786701826'">
				<view class="span">
					商品规格
				</view>
				<view class="spec">
					<view class="spec_item" v-for="(item, index) in specItems" :key="item.id">
						<view class="name">
							{{ item.partName }} {{ item.positionName }} {{ item.craftName }}
						</view>
						<view class="price">
							原价<span>{{ item.price }}</span>参考售价 <span>{{ item.soldPrice }}</span>
						</view>

					</view>
				</view>

			</view> -->
			<view class="box rule">
				<view class="title">
					销售信息
				</view>
				<view class="data">
					<span class="span">商品售价</span>{{ form.price }}元
				</view>
				<view class="data">
					<span class="span">商品市场价</span>{{ form.soldPrice }}元
				</view>
				<view class="data">
					<span class="span">虚拟销量</span>{{ form.virtualSales }}
				</view>
				<view>
					<view class="data">
						<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;">
							<view v-for="item, index in form.sellingDay" :key="index" style="display: flex; justify-content: center;">
								<view>{{ item[0] }}</view>
							</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 }}
				</view> -->
				<view class="data">
					<span class="span">可用时间</span>
					<view v-if="form.useType == '3'">
						长期有效
					</view>
					<view class="" v-if="form.useType == '1' && form.expirationDays">
						购买后{{ form.expirationDays }}天失效
					</view>
					<view class="" v-if="form.useType == '2' && form.availableStartDate">
						{{ form.availableStartDate.slice(0, 10) }} — {{ form.availableEndDate.slice(0, 10) }}
					</view>
				</view>
				<view class="data">
					<span class="span">预约规则</span>{{ form.preBook == 0 ? '不需要预约' : '用户需要提前预约' }}
				</view>
				<view class="data">
					<span class="span">服务说明</span>
					<view v-for="(item, index) in form.serviceDescription" :key="index">
						<span class="span">{{ index + 1 + '.' + item }}</span>
					</view>
				</view>
				<!-- <view class="data">
					<span class="span">退款规则 </span>
					<view class="ruler">
						<view class="item">
							{{ form.refundLabelName }}
						</view>
						<view class="item">
							{{ form.refundConfirmName }}
						</view>
					</view>
				</view> -->
				<!-- <view class="img_box">
					<span class="line">使用说明</span>
					<view class="text_area">
						{{ form.instructions }}
					</view>
				</view> -->
			</view>
		</view>

	</view>
</template>

<script>
import Editor from '@/uni_modules/sp-editor/components/sp-editor/sp-editor.vue';

export default {
	components: {
		Editor
	},
	data() {
		return {
			form: {},
			detailImages: [],
			oldPrice: 300,
			price: 280,
			ruleList: [],
			productId: '',
			imageHttp: 'http://192.168.0.36:8080/jeecg-boot/',
			specItems: [],
			fmImageList: [],
			// 编辑器配置
			toolbarConfig: {
				keys: [], // 只读模式下不显示工具栏
				excludeKeys: []
			},
			editorCtx: null, // 编辑器上下文
			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: {
		//返回
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 编辑器初始化完成时触发
		onEditorInit(editorCtx, editorId) {
			this.editorCtx = editorCtx // 保存编辑器上下文
			this.editorId = editorId   // 保存编辑器ID
			console.log('编辑器初始化完成')

			// 初始化编辑器内容
			if (this.form.richText) {
				this.editorCtx.setContents({
					html: this.form.richText
				})
			}
		}
	},
	onLoad(options) {
		this.productId = options.productId
		this.$http.post("/app/product/queryByIdNew", {
			id: this.productId,
			isApp: '1'
		}).then(res => {
			if (res.data.code == 200) {
				this.form = res.data.result
				console.log(this.form)
				if (res.data.result.detailImages) {
					this.detailImages = res.data.result.detailImages.split(',')
				}
				this.form.groupingName = res.data.result.groupingName || ''
				this.form.serviceDescription = res.data.result.serviceDescription || []
				if (!res.data.result.sellingDay) {
					this.form.sellingDay = []
				}
				if (!res.data.result.localProductSellingWeeks) {
					this.form.localProductSellingWeeks = this.localProductSellingWeeks
				}
				// 处理封面图，支持多张图片
				if (res.data.result.productImage) {
					let productImages = res.data.result.productImage.split(',');
					productImages.forEach(imageUrl => {
						if (imageUrl.trim()) { // 过滤空字符串
							this.fmImageList.push({
								url: imageUrl
							});
						}
					});
				}
				if (this.form.specItems) {
					this.form.specItems.forEach(item => {
						if (item.replaced) {
							this.specItems.push(item)
						}
					})
				}

				console.log(this.specItems)
			}
		})
	},
	onUnload() {
		// 页面销毁前清空Storage中的'smdate'
		uni.removeStorage({
			key: 'smdate'
		});
	}
}
</script>

<style lang="scss" scoped>
.details {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #F7F8FC;

	/*#ifdef APP-PLUS*/
	.top {
		width: 100%;
		height: var(--status-bar-height);
		background-color: #fff;
	}

	/*#endif*/

	.head {
		width: 100%;
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		.head_left {
			font-size: 40rpx;
		}

		.case {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-size: 36rpx;
			font-weight: 600;
		}
	}

	.center {
		flex: 1;
		overflow-y: auto;
		padding: 21rpx 24rpx;

		.box {
			width: 100%;
			padding: 16rpx;
			background-color: #fff;
			border-radius: 16rpx;

			.spec {
				background: #FBFCFF;
				border-radius: 8rpx;
				padding: 16rpx;
				margin-top: 16rpx;

				.spec_item {
					margin-bottom: 32rpx;

					.name {
						font-size: 28rpx;
						margin-bottom: 16rpx;
					}

					.price {
						font-size: 26rpx;
						color: #666666;

						span {
							color: #333333;
							margin-left: 20rpx;
							margin-right: 30rpx;
						}
					}
				}
			}
		}
	}

	.title {
		width: 100%;
		font-weight: 600;
		margin-bottom: 32rpx;
	}

	.card_data {
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 16rpx;
	}

	.data {
		min-height: 58rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 16rpx;
		margin-top: 16rpx;
		font-size: 28rpx;

		.span {
			display: inline-block;
			margin-right: 20rpx;
			min-width: 112rpx;
			font-size: 28rpx;
			color: #666666;
		}

		.ruler {
			display: flex;
			align-items: center;

			.item {
				width: auto;
				height: 44rpx;
				padding: 0rpx 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 28rpx;
				color: #2983EC;
				background: rgba(68, 154, 255, 0.1);
				border-radius: 4rpx;
				border: 1px solid #449AFF;
				margin-right: 20rpx;
			}
		}
	}

	.img_box {
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 16rpx;

		.line {
			display: block;
			font-size: 28rpx;
			color: #666666;
			margin: 16rpx 0px;
		}

		.img_list {
			display: flex;
			flex-wrap: wrap;
			justify-content: start;
			// gap: 27rpx;

			.img {
				flex: 0 0 calc(25% - 27rpx);
				height: 140rpx;
				border-radius: 12rpx;
				overflow: hidden;
				margin-bottom: 25rpx;

				image {
					width: 140rpx;
					height: 140rpx;
				}
			}
		}
	}

	.particulars {
		width: 100%;
		margin-top: 20rpx;

		.content {
			width: 100%;
			padding: 20rpx;
			background: #F7F8FC;
			border-radius: 8rpx;
			margin-top: 16rpx;
			padding-top: 0px;
			overflow: hidden;

			.item {
				margin-top: 16rpx;

				.item_title {
					font-weight: 600;
					font-size: 26rpx;
				}

				.item_row {
					width: 100%;

					.name {
						font-size: 26rpx;
						margin-top: 16rpx;
						margin-bottom: 4rpx;
						color: #333333;
						line-height: 30rpx;
					}

					.price {
						font-size: 24rpx;
						color: #888888;
						line-height: 28rpx;
					}
				}
			}

			.hint {
				border-bottom: 1px solid #ccc;
			}
		}
	}

	.rule {
		width: 100%;
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;

		.headline {
			font-weight: 600;
		}

		.rule_item {
			display: flex;
			margin-top: 20rpx;

			.item {
				padding: 10rpx 20rpx;
				border: 1px solid #ccc;
				margin-right: 20rpx;
			}
		}
	}

	.banner {
		width: 95%;
		margin: 20rpx auto;

		image {
			width: 100%;

		}
	}

	.edit {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;

		span {
			display: block;
			width: 200rpx;
			height: 60rpx;
			border: 1px solid #ccc;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

// video_style
.customize {
	margin-bottom: 16rpx;
	background-color: #ffffff;
	border-radius: 16rpx;

	.business-img {
		height: 210upx;
		width: 310upx;
		background-size: cover;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.uploader_video {
		width: 310upx;
		height: 210upx;
	}

	.video-container {
		max-width: 100%;
		/* 最大宽度为父容器宽度 */
		max-height: 100%;

		::v-deep.uni-video-bar {
			height: 62upx;
			padding: 0
		}
	}
}

.uni-uploader__file,
.uploader_video {
	position: relative;
	z-index: 1;
	width: 200upx;
	height: 200upx;
}

::v-deep .editor-container {
	height: 260rpx;
}
</style>