GuangYuYuan-app/src/pages/identify/details.vue

<template>
	<view class="page-container">
		<view class="detail-content">
			<view class="swiper-box">
				<text class="tips">图片仅供参考</text>
				<MySwiper :list="swipeList" :autoplay="false" />
			</view>
			<view class="qin">
				<view class="info">
					<text class="line"></text> 
					<text class="name">{{details.cNickName}}</text>
					<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 class="service">
				服务履约保障
			</view>
			<view class="three">
				<view>
					<image src="/static/identify/approve.png" mode="" />实名认证
				</view>
				<view>
					<image src="/static/identify/approve.png" mode="" />爽约包赔
				</view>
				<view @click="goApprove(details.id)">
					<image src="/static/identify/approve.png" mode="" />商户认证
				</view>
			</view>
		</view>
		<view class="server-content">
			<view class="tab">
				<text class="tips" :class=" checkedIndex === 0 ? 'active' : '' " @click="switchTab(0)">服务内容</text>
				<text class="tips" :class=" checkedIndex === 2 ? 'active' : '' " @click="switchTab(2)">技师动态</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="info-box">
								<view class="name"> {{item.cTitle}} </view>
								<!-- <view class="time">{{item.nMinute}}分钟</view> -->
								<view class="price">
									<text class="unit">￥</text>
									<text>{{item.dPrice}}</text>
								</view>
							</view>
							<view class="desc-box">
								<view>{{item.cLdList}}</view>
								<view style="flex-shrink: 0">超{{item.nSaleNumber}}人选择</view>
							</view>
							<view class="time">
								<view class="money">{{item.nMinute}}分钟</view>
								<view class="counter">
									<u-number-box 
										integer
										min="0"
										button-size="28"
										v-model="item.number" 
										@change="onQuantityChange($event, item)"
									>
										<view slot="minus" class="abtn">
											<u-icon bold name="minus" size="12" color="#202726"></u-icon>
										</view>
										<text slot="input" class="input">{{ item.number }}</text>
										<view slot="plus" class="abtn">
											<u-icon bold name="plus" size="12" color="#202726"></u-icon>
										</view>
									</u-number-box>

									<!-- <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>
							</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 class="tab-pane" :class="checkedIndex === 2 ? 'active' : ''">
          <!-- 技师动态列表 -->
					<MyDynamicList :data-list="dynamicList" type="merchant" />
					<!-- 空状态 -->
          <view v-if="dynamicList < 1" style="text-align: center;padding:50rpx 0;font-size: 28rpx;color: #ccc;">暂无动态
					</view>
        </view>
			</view>
		</view>
		<view class="reserved">
			<view @click="nowYuyue(details.id,details.nStatus)">立即预约</view>
		</view>
	</view>
</template>

<script>
import {
	engineerDetails,
	addOrder,
	addCollect,
	cancleCollect
} from '@/api/index.js';
import { jsDynamicList } from '@/api/dynamic.js'
import MySwiper from '@/components/swiper/index.vue';
import MyDynamicList from '@/pages/my/dynamic/components/my_list.vue';
export default {
    components: { MySwiper, MyDynamicList },
	data() {
		return {
			details: '',
			indicatorDots: true,
			autoplay: true,
			projects: [],
			collectShow: true,
			checkedIndex: 0,
			comList: [],
			public: this.$globalData.publicUrl, //图片前缀
			swiper: [],
			swipeList: [],
      dynamicList: [] // 技师动态列表
		}
	},
	onLoad(options) {
		this.getDetails(options.id)
    // 技师动态列表
		this.getJsDynamicList(options.id)
	},
	methods: {
		switchTab(index) {
			if (this.checkedIndex === index) {
				return false;
			} else {
				this.checkedIndex = index
			}
		},
		getJsDynamicList(id) {
			let params = {
				technicianId: id,
			}
			jsDynamicList(params).then(res => {
				if (res.data.code === 200 && res.data.data) {
					let data = res.data.data
					data.forEach(item => {
						item.publishTime = item.publishTime
							.replace('T', ' ')
							.substring(0, 16)
					})
					this.dynamicList = data
				}
			})
		},
		//查看认证信息
		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: '/pages/address/address-edit?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 {
								src: item,
								type: isVideo ? 'video' : 'image',
								// 视频封面（需替换）
								poster: isVideo ?this.public +res.data.data.cImgList[0]: item.image, 
							};
						});
					}
					
					this.details = res.data.data
					this.projects = res.data.data.projects.map(item => ({ ...item, number: 0 }))
					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;
		},
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	padding: 24rpx;
	background-color: #F7FFFF;
}

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

	swiper {
		height: 600rpx;
	}

	.swiper-box {
		width: 100%;
		height: 600rpx;
		position: relative;

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

	.qin {
		margin-top: 24rpx;

		.info {
			font-size: 28rpx;
			color: #2F3437;
			margin-bottom: 15rpx;
			display: flex;
			align-items: baseline;

			.line {
				width: 6rpx;
				height: 28rpx;
				background: #20CBC2;
				display: inline-block;
			}

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #000;
				margin-left: 8rpx;
				padding: 0 12rpx;
			}
		}

		.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-content {
	padding-bottom: 190rpx;

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

		.tips {
			height: 42rpx;
			margin-right: 30rpx;
		}

		.active {
			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;

			.info-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

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

					.unit {
						font-size: 24rpx
					}
				}
			}

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

			.time {
				display: flex;
				align-items: center;
				justify-content: space-between;

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

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

					.abtn {
						width: 38rpx;
						height: 38rpx;
						border: 1rpx dashed #202726;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.input {
						width: 58rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						margin: 0 10rpx;
						background: #F8F9FD;
						border-radius: 4rpx;
					}
				}
			}
		}
	}

}

.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>