GuangYuYuan-app/pages/identify/details.vue

<template>
	<view class="details">
		<view class="detail-content">
			<view class="swiper_cont">

				<!-- <template> -->
				<zg-swiper :list="swipeList" mode="solt" :autoplay="false" class="custom-swiper">
					 
				</zg-swiper>

				<!-- </template> -->
				<text class="Tips">图片仅供参考</text>
			</view>
			<view class="qin">
				<view class="nameCollect">
					<view class="name"><text class="line"></text> {{details.cNickName}} <text>/{{details.cNickName}}</text></view>
					<view class="collect" v-if="details.isCollection" @click="cancleCollect(details.id)">
						<image src="../../static/identify/collect2.png" mode="" /> 取消收藏
					</view>
					<!-- <view class="collect" v-else @click="addCollect(details.id)">
						<image src="../../static/identify/collect1.png" mode="" />
						加入收藏
					</view> -->
					<view class="jieshao">{{details.cJianjie}}</view>
				</view>
			</view>
			<view class="service">
				服务履约保障
			</view>
			<view class="three">
				<view>
					<image src="../../static/identify/approve.png" mode=""></image>实名认证
				</view>
				<view>
					<image src="../../static/identify/approve.png" mode="">爽约包赔
				</view>
				<view @click="goApprove(details.id)">
					<image src="../../static/identify/approve.png" mode="">商户认证
						<!-- <image src="../../static/identify/more.png" mode=""></image> -->
				</view>
			</view>
		</view>
		<view class="server">
			<view class="tab">
				<text class="Tips" :class=" checkedIndex === 0 ? 'active' : '' " @click="switchTab(0)">服务内容</text>
				<text class="Tips" :class=" checkedIndex === 1 ? 'active' : '' " @click="switchTab(1)">顾客评价</text>
			</view>
			<view class="tab_content">
				<view class="tab-pane" :class="checkedIndex === 0 ? 'active' : ''">
					<view class="lists" v-for="(item,index) in projects" :key="index">
						<view class="imgs">
							<image :src="$globalData.publicUrl + item.cCover" mode="" />
						</view>
						<view class="right">
							<view class="list_title">
								<!-- {{item.cTitle}} -->
								<view class="name"> {{item.cTitle}} </view>
								<!-- <view class="time">{{item.nMinute}}分钟</view> -->
								<view class="price">
									<span>￥</span>{{item.dPrice}}
								</view>
							</view>
							<view class="num">
								{{item.cLdList}}
								<span>超{{item.nSaleNumber}}人选择</span>
							</view>
							<view class="time">
								<view class="money">{{item.nMinute}}分钟</view>
								<view class="counter">
									<!-- <view @click="decrease(item,index)">-</view> -->
									<view class="minus" @click="decrease(index)">
										<image src="../../static/identify/minus.png" mode="" />
									</view>
									<text>{{item.number}}</text>
									<view class="minus" @click="increase(index)">
										<image src="../../static/identify/add.png" mode="" />
									</view>
									<!-- <view @click="increase(index)">＋</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tab-pane " :class="checkedIndex === 1 ? 'active' : ''">
					<view v-if="comList < 1" style="text-align: center;padding:50rpx 0;font-size: 28rpx;color: #ccc;">暂无评价
					</view>
					<view v-else>
						<view class="commentList" v-for="(item,index) in comList" :key="index">
							<view class="cTitile">
								<view class="tt">{{item.cNickName}}

								</view>
								<view class="time">{{item.dTime.substring(0,10)}} {{item.dTime.substring(11,19)}}</view>
							</view>
							<view class="img">
								<image src="../../static/identify/collect2.png" mode=""></image>
								<image src="../../static/identify/collect2.png" mode=""></image>
								<image src="../../static/identify/collect2.png" mode=""></image>
								<image src="../../static/identify/collect2.png" mode=""></image>
								<image src="../../static/identify/collect2.png" mode=""></image>
							</view>
							<view class="cText">{{item.cText}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="reserved">
			<view @click="nowYuyue(details.id,details.nStatus)">立即预约</view>
		</view>

	</view>
</template>

<script>
	import ZgSwiper from '@/components/zhuge-swiper/zhuge-swiper'
	import {
		engineerDetails,
		addOrder,
		addCollect,
		cancleCollect
	} from '../../api/index.js'
	export default {
		components: {
		   ZgSwiper,
		},
		data() {
			
			return {
				details: '',
				indicatorDots: true,
				autoplay: true,
				projects: [],
				collectShow: true,
				checkedIndex: 0,
				comList: [],
				public: this.$globalData.publicUrl, //图片前缀
				swiper: [],
				swipeList: []
			}
		},
		 
		methods: {
			switchTab(index) {
				if (this.checkedIndex === index) {
					return false;
				} else {
					this.checkedIndex = index
				}
			},
			//查看认证信息
			goApprove(id) {
				uni.navigateTo({
					url: './approve_data?id=' + id
				})
			},
			//立即预约
			nowYuyue(id, nStatus) {
				if (nStatus === 1) {
					uni.showToast({
						title: '该商户不可预约！',
						icon: 'none'
					})
					return
				} else {
					const allCountsZero = this.projects.every(item => item.number === 0);
					if (allCountsZero) {
						uni.showToast({
							title: '请先选择项目！',
							duration: 1000,
							icon: 'none',
						})
						return
					} else {
						// console.log(this.data.projects,"project")
						var list = []
						this.projects.forEach(element => {
							if (element.number > 0) {
								element.sum = element.number * element.dPrice
								list.push(element)
							}
						});
						var total = 0
						for (let i = 0; i < list.length; i++) {
							total += list[i].sum;
						}
						var data = {
							cJsId: this.details.id,
							cGoods: list,
							cOpenId: uni.getStorageSync('wx_copenid'),
							dTotalMoney: total,
						}
						addOrder(data).then(res => {
							if (res.data.code == 200) {
								uni.navigateTo({
									url: './pay_order?orderNo=' + res.data.data.orderNo,
								})
							} else {
								uni.showModal({
									title: '提示',
									content: '你还没有添加地址哦！是否去添加？',
									confirmText: '确定', // 确定按钮的文字
									cancelText: '取消', // 取消按钮的文字
									success(res) {
										if (res.confirm) {
											setTimeout(() => {
												uni.navigateTo({
													url: '../my/add_address?type=1'
												})
											}, 100)
											// 用户点击确定按钮后的操作
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							}
						})
					}
				}
			},
			getDetails(cid) {
				this.swiper = []
				const cId = {
					id: cid,
					cOpenId: uni.getStorageSync('wx_copenid')
				}
				engineerDetails(cId).then(res => {
					if (res.data.data) {
						if(res.data.data.cVideo){
							this.swiper.push(res.data.data.cVideo)
						}
						
						res.data.data.cImgList.forEach(item => {
							this.swiper.push(this.public + item)
						})
						console.log(this.swiper)
						if(this.swiper){
							this.swipeList = this.swiper.map(item => {
								const isVideo = item.endsWith('.mp4');
								return {
									// image: isVideo ? '' : item, // 图片直接使用
									// video: isVideo ? item : '', // 视频链接
									src: item,
									poster: isVideo ?this.public +res.data.data.cImgList[0]: item.image, // 视频封面（需替换）
									type: isVideo ? 'video' : 'image'
								};
							});
						}
						
						
						var prolist = res.data.data.projects
						prolist.forEach(element => {
							element.number = 0
						});
						this.details = res.data.data
						this.projects = prolist
						if (res.data.data.comments) {
							this.comList = res.data.data.comments.slice(0, 3)
						} else {
							this.comList = []
						}

					}
				})
			},
			// 添加收藏
			addCollect(id) {
				var data = {
					cJsId: id,
					cWxOpenId: uni.getStorageSync('wx_copenid')
				}
				addCollect(data).then(res => {
					if (res.data.code == 200) {
						wx.showToast({
							title: '收藏成功！',
							icon: 'none'
						})
						this.getDetails(id);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			// 取消收藏
			cancleCollect(id) {
				var data = {
					cJsId: id,
					cWxOpenId: wx.getStorageSync('wx_copenid')
				}
				cancleCollect(data).then(res => {
					if (res.data.code == 200) {
						wx.showToast({
							title: '取消成功！',
							icon: 'none'
						})
						this.getDetails(id);
					} else {
						wx.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			increase(idx) {
				this.projects[idx].number++;
			},
			decrease(idx) {
				if (this.projects[idx].number > 0) this.projects[idx].number--;
				else return;
			},
		},
		onLoad(options) {
			this.getDetails(options.id)
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-swiper-wrap {
		height: 100% !important;

		uni-swiper {
			height: 100% !important;
		}
	}
	.custom-swiper {
	  height: 100px; /* 或者你需要的具体高度 */
	}
	
	.swiper-image {
	  width: 100%;
	  height: 100%;
	  object-fit: cover; /* 保持宽高比并填充整个容器 */
	  /* 或者使用 object-fit: contain; 保持完整图片显示 */
	}

	.details {
		background-color: #F7FFFF;
		padding: 24rpx;
	}

	.title {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #2cb8d4;

		.titles {
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			padding: 10rpx 0;
		}

		.back {
			position: absolute;
			left: 30rpx;
			width: 80rpx;
			height: 35rpx;

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

	.detail-content {
		// height: 100vh;
		overflow-y: scroll;
		padding: 24rpx;
		background-color: #fff;

		swiper {
			height: 600rpx;
		}

		.swiper_cont {
			width: 100%;
			height: 638rpx;
			// background-color: rgb(233, 231, 231);
			position: relative;

			.swiper-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 600rpx !important;

				image {
					max-width: 100%;
					max-height: 100%;
					display: block;
					height: 600rpx;
				}
			}

			.Tips {
				position: absolute;
				top: 10px;
				left: 10px;
				font-size: 18rpx;
				color: #808080;
			}
		}

		.qin {
			width: 100%;
			margin-top: 24rpx;

			.nameCollect {
				width: 100%;
				empty-cells: 100%;

				.name {
					width: 100%;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 15rpx;
					color: #2F3437;

					.line {
						display: inline-block;
						width: 6rpx;
						height: 34rpx;
						background: #20CBC2;
						margin-right: 24rpx;
					}

					text {
						font-weight: normal;
						font-size: 28rpx;
						color: #2F3437;
						margin-left: 8rpx;
					}
				}

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

					image {
						width: 40rpx;
						height: 40rpx;
						vertical-align: sub;
					}
				}

				.jieshao {
					width: 100%;
					background: #F8F8F8;
					border-radius: 16rpx;
					padding: 20rpx 12rpx;
					font-size: 28rpx;
					color: #2F3437;
					line-height: 33rpx;
					box-sizing: border-box;
				}
			}
		}

		.service {
			font-size: 28rpx;
			color: #2F3437;
			line-height: 33rpx;
			margin: 24rpx 0;
		}

		.three {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 28rpx;
			color: #2F3437;
			padding: 20rpx 0;
			background-color: #F8F8F8;
			box-sizing: border-box;
			border-radius: 16rpx;

			view {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
			}
		}
	}

	.server {
		padding-bottom: 160rpx;

		.tab {
			font-size: 30rpx;
			color: #333;

			.Tips {
				margin-right: 30rpx;
				height: 42rpx;
				box-sizing: border-box;
			}

			.active {
				box-sizing: border-box;
				width: 100%;
				font-weight: bold;
				border-bottom: 6rpx solid #2BDAD1;
			}
		}

		.tab-pane {
			display: none;
		}

		.tab-pane.active {
			display: block;
		}

		.commentList {
			padding: 24rpx;
			border-bottom: 1px solid #f3f2f2;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
			border-radius: 24rpx;
			margin-bottom: 24rpx;

			.cTitile {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				align-items: center;

				.tt {
					font-size: 30rpx;
					color: #6a6a6a;
					font-weight: bolder;

					text {
						color: #ff5656;
					}
				}

				.time {
					font-size: 30rpx;
					color: #666666;
				}
			}

			.img {
				margin-top: 16rpx;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 6rpx;
				}
			}

			.cText {
				font-size: 28rpx;
				margin-top: 16rpx;
			}
		}

		.lists {
			background-color: #fff;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			padding: 24rpx 32rpx;
			border-radius: 24rpx;

			.imgs {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
				overflow: hidden;

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

			.right {
				flex: 1;
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.list_title {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: start;

					.name {}

					.price {
						font-size: 48rpx;
						color: #F53E54;
						display: flex;
						align-items: center;
						padding: 0;

						span {
							font-size: 24rpx
						}
					}
				}

				.num {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					color: #888888;
				}

				.time {
					// padding-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.money {
						font-size: 26rpx;
						color: #666666;
						font-weight: bold;
					}

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

						.minus {
							image {
								width: 36rpx;
								height: 36rpx;
							}
						}

						text {
							line-height: 24rpx;
							font-size: 28rpx;
							margin: 0px 24rpx;
						}
					}
				}
			}
		}

	}

	.reserved {
		width: 100%;
		height: 116rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 40rpx;
		text-align: center;
		box-shadow: 0 0 30rpx #ece9e9;
		background-color: #fff;
		box-sizing: border-box;

		view {
			background: linear-gradient(90deg, #1AD7CE 0%, #21C9C1 100%);
			color: #fff;
			width: 100%;
			height: 76rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 106rpx;
			font-weight: bold;
			font-size: 32rpx;
		}
	}
</style>