zsw-farm-bxg/pages/shop/Evaluations/EvaluationDetail/index.vue

<template>
	<view>
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true" :hasShadow="true">
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<block slot="content">
					<view class="tab-title">甄选测评</view>
				</block>
			</cu-custom>
		</view>
		
		<view class="synopsis-box acea-row" v-if="info.synopsis">
			<view class="left-circle"></view>
			<view class="info">
				<text>甄选评测介绍</text>{{' ' + info.synopsis}}
			</view>
			<image src="../../../../static/images/evaluation-icon.png" mode=""></image>
		</view>
		
		<view class="video-box" v-if="info.videoInput">
			<video 
				id="myVideo" 
				:src="info.videoInput"
				@error="videoErrorCallback"
				:show-center-play-btn="true"
				:show-play-btn="true"
				:show-mute-btn="true"
				controls
			></video>
			<!-- picture-in-picture-mode="{{['push', 'pop']}}"
				bindenterpictureinpicture='bindVideoEnterPictureInPicture'
			bindleavepictureinpicture='bindVideoLeavePictureInPicture' -->
		</view>
		
		<view class="productInfo-box acea-row row-between" v-if="info.productInfo">
			<image :src="info.productInfo.image" mode="aspectFill"></image>
			<view class="right-text">
				<view class="name line1">{{info.productInfo.storeName}}</view>
				<view class="info line1">{{info.productInfo.storeInfo}}</view>
				<view class="acea-row row-between">
					<view class="price-box">
						<view class="price">¥{{info.productInfo.price}}</view>
						<view class="otPrice">¥{{info.productInfo.otPrice}}</view>
					</view>
					<view class="btn" @click="goGoodsDetail">查看详情</view>
				</view>
			</view>
		</view>
		
		<view class="wrapper">
			<view class="item" v-if="info.summary">
				<view class="title-box acea-row row-middle">
					<view class="num">1</view>
					<view class="">眼界甄选评测员总结</view>
				</view>
				<view class="info-text">{{info.summary}}</view>
			</view>
			<view class="item" v-if="info.feelSynopsis || info.feelImage">
				<view class="title-box acea-row row-middle">
					<view class="num">{{info.summary?'2':'1'}}</view>
					<view class="">实用体验感受</view>
				</view>
				<view class="info-text" v-if="info.feelSynopsis">{{info.feelSynopsis}}</view>
				<view class="images-box" v-if="info.feelImage">
					<swiper @change="feelCurrentChange">
						<swiper-item v-for="(item, index) in info.feelImageArr" :key="index">
							<image :src="item" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<view class="dot-box acea-row row-center">
						<view :class="'dot ' + (feelCurrent == index?'on':'')" v-for="(item,index) in info.feelImageArr" :key="index"></view>
					</view>
				</view>
			</view>
			<view class="item" v-if="info.accessibilitySynopsis || info.accessibilityImage">
				<view class="title-box acea-row">
					<view class="num">{{info.summary?(info.feelSynopsis || info.feelImage?'3':'2'):(info.feelSynopsis || info.feelImage?'2':'1')}}</view>
					<view class="">易用性体验</view>
				</view>
				<view class="info-text" v-if="info.accessibilitySynopsis">{{info.accessibilitySynopsis}}</view>
				<view class="images-box" v-if="info.accessibilityImage">
					<swiper @change="accessibilityCurrentChange">
						<swiper-item v-for="(item, index) in info.accessibilityImageArr" :key="index">
							<image :src="item" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
					<view class="dot-box acea-row row-center">
						<view :class="'dot ' + (accessibilityCurrent == index?'on':'')" v-for="(item,index) in info.accessibilityImageArr" :key="index"></view>
					</view>
				</view>
			</view>
		</view>
		
		<view :style="addBottom?'height: 162rpx;':'height: 122rpx;'"></view>
		<view class="footer acea-row row-between" :style="addBottom?'height: 162rpx;':'height: 122rpx;'">
			<view class="acea-row btn-box row-around">
				<button class="item contacButton" open-type="share" hover-class="none">
				  <image src="../../../../static/images/share-icon.png" mode=""></image>
				  <view class="">分享</view>
				</button>
				<button class="item contacButton" hover-class="none" @click="getCollection">
				  <image :src="`../../../../static/images/${isCollection?'star-light':'star'}.png`" mode=""></image>
				  <view class="">{{isCollection? '已收藏':'收藏'}}</view>
				</button>
				<!-- <view class="item" @click="share">
					<image src="../../../../static/images/share-icon.png" mode=""></image>
					<view class="">分享</view>
				</view> -->
			</view>
			<view class="btn" @click="goGoodsDetail">立即购买</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import { getEvaluationDetail,getUserCollection,delUserCollection} from '@/api/store'
	export default {
		data() {
			return {
				isCollection:false,
				addBottom: this.addBottom,
				id: 0,
				info: {},
				feelCurrent: 0,
				accessibilityCurrent: 0,
			};
		},
		onLoad() {
			this.id = this._route.query.id
			this.getInfo(this.id);
			this.getEvaluation(this.id)
		},
		onShareAppMessage() {
			return {
				title: '甄选测评',
				path: '/pages/shop/Evaluations/EvaluationDetail/index?id='+this.id
			}
		},
		methods: {
			// 删除
			// del(){
			// 	delUserCollection().then(res=>{
			// 		var param={}
			// 		param.id=this.id
			// 		param.category= ""
			// 		delUserCollection(param).then(res=>{
			// 			console.log(res,'==========11');
			// 		})
			// 		this.isCollection=!this.isCollection
			// 		console.log('++++++++');
			// 	})
			// },
			
			
			
			// 是否已经收藏
			getEvaluation(id){
				// collectEvaluation/add
			},
			// 收藏
			
			getCollection(){
				
				var param={}
				param.id=this.id
				param.category= ""
				getUserCollection(param).then(res=>{
					console.log(res,'==========11');
				})
				this.isCollection=!this.isCollection
				console.log('收藏---------');
			},
			
			getInfo(id) {
				uni.showLoading({
					title: ''
				})
				getEvaluationDetail(id).then(res => {
					this.info = res.data;
					console.log(this.info,4444444441);
					uni.hideLoading();
				})
			},
			videoErrorCallback(e) {
				console.log('视频错误信息:')
				console.log(e.detail.errMsg)
			},
			goGoodsDetail() {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: this.info.productInfo.id,
					},
				})
			},
			feelCurrentChange(e) {
				this.feelCurrent = e.detail.current;
			},
			accessibilityCurrentChange(e) {
				this.accessibilityCurrent = e.detail.current;
			},
		}
	}
</script>

<style lang="less" scoped>
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.synopsis-box {
		margin: 20rpx 32rpx 0rpx 90rpx;
		padding: 20rpx 0rpx 20rpx 50rpx;
		width: 628rpx;
		height: 146rpx;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
		border-radius: 16rpx;
		position: relative;
		.left-circle {
			height: 98rpx;
			width: 98rpx;
			background: #F1F1F1;
			border-radius: 50%;
			position: absolute;
			top: 22rpx;
			left: -50rpx;
			// box-shadow: 0rpx 10rpx 8rpx 0rpx rgba(0,0,0,0.15);
		}
		image {
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			top: 24rpx;
			left: -66rpx;
		}
		.info {
			height: 100%;
			overflow: hidden;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #2DB5AE;
			line-height: 26rpx;
			padding: 0rpx 8rpx;
			text {
				font-weight: 600;
				// padding-right: 6rpx;
			}
		}
	}
	
	.video-box {
		margin: 20rpx 32rpx 0rpx;
		width: 686rpx;
		height: 384rpx;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
		border-radius: 16rpx;
		#myVideo {
			width: 686rpx;
			height: 384rpx;
			border-radius: 16rpx;
		}
	}
	
	.productInfo-box {
		margin: 20rpx 32rpx 0rpx;
		width: 686rpx;
		height: 178rpx;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
		border-radius: 16rpx;
		padding: 8rpx;
		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 16rpx;
		}
		.right-text {
			width: 478rpx;
			margin-right: 8rpx;
			padding-top: 8rpx;
			font-size: 20rpx;
			font-family: SourceHanSansSCVF;
			font-weight: 600;
			color: #999999;
			line-height: 28rpx;
			.name {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3A3A3C;
				line-height: 38rpx;
			}
			.info {
				padding-bottom: 14rpx;
			}
			.price-box {
				font-family: Futura;
				.price {
					color: #3A3A3C;
					line-height: 36rpx;
					font-size: 30rpx;
				}
				.otPrice {
					text-decoration: line-through;
				}
			}
			.btn {
				margin-top: 18rpx;
				width: 138rpx;
				height: 42rpx;
				background: #2DB5AE;
				border-radius: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				line-height: 42rpx;
				text-align: center;
			}
		}
	}
	
	.wrapper {
		margin: 20rpx 32rpx;
		padding: 16rpx 24rpx;
		width: 686rpx;
		background: #F5F6F8;
		box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
		border-radius: 16rpx;
		.item {
			padding-bottom: 22rpx;
			.title-box {
				font-size: 30rpx;
				font-family: SourceHanSansSCVF;
				font-weight: 600;
				color: #3A3A3C;
				line-height: 23px;
				.num {
					width: 34rpx;
					height: 34rpx;
					border-radius: 50%;
					background: #2DB5AE;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 34rpx;
					text-align: center;
					margin-right: 8rpx;
				}
			}
			.info-text {
				margin-bottom: 24rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #3A3A3C;
				line-height: 32rpx;
				text-indent: 42rpx;
			}
			.images-box {
				padding-bottom: 24rpx;
				position: relative;
				swiper {
					width: 638rpx;
					height: 360rpx;
					border-radius: 16rpx;
					overflow: hidden;
					swiper-item {
						border-radius: 16rpx;
						image {
							width: 638rpx;
							height: 360rpx;
							border-radius: 16rpx;
						}
					}
				}
				.dot-box {
					position: absolute;
					bottom: 40rpx;
					left: 50%;
					transform: translateX(-50%);
					.dot {
						width: 8rpx;
						height: 8rpx;
						background: #FFFFFF;
						border-radius: 6rpx;
						margin: 0rpx 8rpx;
						transition: width .5s cubic-bezier(.18,.89,.17,.88);
					}
					.on {
						width: 36rpx;
						background: #2DB5AE;
						transition: width .5s cubic-bezier(.18,.89,.17,.88);
					}
				}
			}
		}
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		background: #F1F1F1;
		box-shadow: 0rpx -4rpx 38rpx 0rpx rgba(0,0,0,0.2);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 12rpx 32rpx 0rpx;
		.btn-box{
			width: 35%;
		}
		.contacButton {
			height: 80rpx;
		  padding: 0;
		  background-color: #F1F1F1;
		}
		.contacButton::after {
		  border: 0;
		}
		.item {
			text-align: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3A3A3C;
			line-height: 22rpx;
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
		.btn {
			margin-top: 6rpx;
			width: 386rpx;
			height: 66rpx;
			background: #2DB5AE;
			border-radius: 16rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 66rpx;
			text-align: center;
		}
	}

</style>