From 8866ea3313e8d30a0b3fa438fca243d4756d95c2 Mon Sep 17 00:00:00 2001
From: Wik-T <812952667@qq.com>
Date: Mon, 10 Jan 2022 09:29:43 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BF=AE=E6=94=B9=E8=A7=86=E9=A2=91=E6=92=AD?=
 =?UTF-8?q?=E6=94=BE=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mineCouponsDestails.vue                   | 457 +++++++++---------
 1 file changed, 237 insertions(+), 220 deletions(-)

diff --git a/high-unionPay/pages/user/mineCouponsDestails/mineCouponsDestails.vue b/high-unionPay/pages/user/mineCouponsDestails/mineCouponsDestails.vue
index ab6938a..cc7c5de 100644
--- a/high-unionPay/pages/user/mineCouponsDestails/mineCouponsDestails.vue
+++ b/high-unionPay/pages/user/mineCouponsDestails/mineCouponsDestails.vue
@@ -1,224 +1,241 @@
-<template>
-	<view>
-		<view class="width90">
-			<view class="flright fotct">
-				<image class="coupon-img" :src="imageUrl+couponsDetails.highDiscount.discountImg"></image>
-			</view>
-			<view class="coupon-mes mart10" style="margin-right: 90px;">
-				<view class="fcor333 fontwig6 font24 width100 text2">{{couponsDetails.highDiscount.discountName}}</view>
-				<view class="fcor666  font13 width100 mart5">
-					使用截止时间:{{salesEndTime | formatDate('-')}}</view>
-			</view>
-			<view class="fcor666  font13 width100 mart5">
-				领取有效期:{{couponsDetails.highDiscount.effectiveDay}}天
-			</view>
-		</view>
-		<view class="line1 mart15"></view>
-		<view class="width90 mart10 fcor666">可购买的商品</view>
-		<view v-if="minecoupones == '' " class="mart60 fotct font14 fcor666">
-			<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
-		</view>
-		<view class="product-list mart20 width90">
-			<view class="product" v-for="product in minecoupones" :key="product.id"
-				@tap="toGoods(product.highCoupon.id)">
-				<image mode="widthFix" :src="imageUrl+product.highCoupon.couponImg"></image>
-				<view class="name">{{ product.highCoupon.couponName }}</view>
-				<view class="info" v-if="product.highCoupon.payType == 1">
-					<view class="price">
-						￥{{ product.highCoupon.discountPrice}}
-					</view>
-					<view class="slogan" v-if="product.highCoupon.discountPrice !== product.highCoupon.salesPrice">
-						￥{{ product.highCoupon.salesPrice}}
-					</view>
-				</view>
-				<view class="info" v-else>
-					<view class="price">
-						<image style="width: 15px;height: 15px;vertical-align: sub;"
-							src="../../../static/img/jfx.png">
-						</image>{{ product.highCoupon.discountPrice*100}}
-					</view>
-					<view class="slogan" v-if="product.highCoupon.discountPrice !== product.highCoupon.salesPrice">
-						<image style="width: 15px;height: 15px;vertical-align: sub;"
-							src="../../../static/img/jfh.png">
-						</image>{{ product.highCoupon.salesPrice*100}}
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="width90 mart10 fcor666" v-if="videourl !=''">视频教程</view>
-		<view class="width80 mart10 marb30" v-if="videourl !=''">
-			<yy-video-player :auto-play="false" :url="imageUrl+imagedess1" :poster="poster" :show-back-btn="true">
-			</yy-video-player>
-		</view>
-	</view>
-</template>
-
-<script>
-	import {
-		getCouponByDiscount,
-		getDiscountByUserDiscountId,
-		getCmsContent
-	} from '../../../Utils/Api.js';
-	import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue'
-	let app = getApp();
-	export default {
-		components: {
-			xiaoVideoElement
-		},
-		data() {
-			return {
-				minecoupones: [],
-				imageUrl: app.globalData.imgUrl,
-				imagewxUrl: app.globalData.imageWxImg,
-				imgadres:'noorder.png',
-				imagedess1: '/CMS/html/11641540903873.mp4',
-				pageNum: 1,
-				pageSize: 10,
-				isNoMoreData: false,
-				couponsDetails: '',
-				salesEndTime: '',
-				couponId: '',
-				videourl: '' //视频地址
-			}
-		},
-		filters: {
-			//过滤器 用于格式化时间
-			formatDate: function(value, spe = '/') {
-				let data = new Date(value);
-				let year = data.getFullYear();
-				let month = data.getMonth() + 1;
-				let day = data.getDate();
-				let h = data.getHours();
-				let mm = data.getMinutes();
-				let s = data.getSeconds();
-				month = month >= 10 ? month : "0" + month;
-				day = day >= 10 ? day : "0" + day;
-				h = h >= 10 ? h : "0" + h;
-				mm = mm >= 10 ? mm : "0" + mm;
-				s = s >= 10 ? s : "0" + s;
-				return `${year}${spe}${month}${spe}${day}`;
-			}
-		},
-		onLoad(option) {
-			this.couponId = option.id;
-			this.getDiscountByUserDiscountId();
-			this.getCmsContentvideo();
-		},
-		methods: {
-			//获取视频资料
-			getCmsContentvideo() {
-				let params = {
-					regionId: app.globalData.cityId,
-					categoryCode: 'CMS_H5_VIDEO'
-				}
-				getCmsContent(params).then(res => {
-					if (res.return_code == '000000') {
-						this.videourl = res.return_data;
-					}
-				});
+<template>
+	<view>
+		<view class="width90">
+			<view class="flright fotct">
+				<image class="coupon-img" :src="imageUrl+couponsDetails.highDiscount.discountImg"></image>
+			</view>
+			<view class="coupon-mes mart10" style="margin-right: 90px;">
+				<view class="fcor333 fontwig6 font24 width100 text2">{{couponsDetails.highDiscount.discountName}}</view>
+				<view class="fcor666  font13 width100 mart5">
+					使用截止时间:{{salesEndTime | formatDate('-')}}</view>
+			</view>
+			<view class="fcor666  font13 width100 mart5">
+				领取有效期:{{couponsDetails.highDiscount.effectiveDay}}天
+			</view>
+		</view>
+		<view class="line1 mart15"></view>
+		<view class="width90 mart10 fcor666">可购买的商品</view>
+		<view v-if="minecoupones == '' " class="mart60 fotct font14 fcor666">
+			<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
+		</view>
+		<view class="product-list mart20 width90">
+			<view class="product" v-for="product in minecoupones" :key="product.id"
+				@tap="toGoods(product.highCoupon.id)">
+				<image mode="widthFix" :src="imageUrl+product.highCoupon.couponImg"></image>
+				<view class="name">{{ product.highCoupon.couponName }}</view>
+				<view class="info" v-if="product.highCoupon.payType == 1">
+					<view class="price">
+						￥{{ product.highCoupon.discountPrice}}
+					</view>
+					<view class="slogan" v-if="product.highCoupon.discountPrice !== product.highCoupon.salesPrice">
+						￥{{ product.highCoupon.salesPrice}}
+					</view>
+				</view>
+				<view class="info" v-else>
+					<view class="price">
+						<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfx.png">
+						</image>{{ product.highCoupon.discountPrice*100}}
+					</view>
+					<view class="slogan" v-if="product.highCoupon.discountPrice !== product.highCoupon.salesPrice">
+						<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../../static/img/jfh.png">
+						</image>{{ product.highCoupon.salesPrice*100}}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="width90 mart40 fcor666" v-if="videourl != ''">视频教程</view>
+		<view class="btnplay" @click="playvideo" v-if="videourl != ''">播放视频教学</view>
+		<view class="width80 mart20 marb30" v-if="isplayvideo">
+			<yy-video-player :auto-play="false" :url="imageUrl+imagedess1" :poster="poster" :show-back-btn="true">
+			</yy-video-player>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import {
+		getCouponByDiscount,
+		getDiscountByUserDiscountId,
+		getCmsContent
+	} from '../../../Utils/Api.js';
+	import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue'
+	let app = getApp();
+	export default {
+		components: {
+			xiaoVideoElement
+		},
+		data() {
+			return {
+				minecoupones: [],
+				imageUrl: app.globalData.imgUrl,
+				imagewxUrl: app.globalData.imageWxImg,
+				imgadres: 'noorder.png',
+				imagedess1: '/CMS/html/11641540903873.mp4',
+				pageNum: 1,
+				pageSize: 10,
+				isNoMoreData: false,
+				couponsDetails: '',
+				salesEndTime: '',
+				couponId: '',
+				videourl: '' ,//视频地址
+				isplayvideo: false  //视频播放
+			}
+		},
+		filters: {
+			//过滤器 用于格式化时间
+			formatDate: function(value, spe = '/') {
+				let data = new Date(value);
+				let year = data.getFullYear();
+				let month = data.getMonth() + 1;
+				let day = data.getDate();
+				let h = data.getHours();
+				let mm = data.getMinutes();
+				let s = data.getSeconds();
+				month = month >= 10 ? month : "0" + month;
+				day = day >= 10 ? day : "0" + day;
+				h = h >= 10 ? h : "0" + h;
+				mm = mm >= 10 ? mm : "0" + mm;
+				s = s >= 10 ? s : "0" + s;
+				return `${year}${spe}${month}${spe}${day}`;
+			}
+		},
+		onLoad(option) {
+			this.couponId = option.id;
+			this.getDiscountByUserDiscountId();
+			this.getCmsContentvideo();
+		},
+		methods: {
+			//获取视频资料
+			getCmsContentvideo() {
+				let params = {
+					regionId: app.globalData.cityId,
+					categoryCode: 'CMS_H5_VIDEO'
+				}
+				getCmsContent(params).then(res => {
+					if (res.return_code == '000000') {
+						this.videourl = res.return_data;
+					}
+				});
+			},
+			//获取卡券详情
+			getDiscountByUserDiscountId() {
+				let params = {
+					userDiscountId: this.couponId
+				}
+				getDiscountByUserDiscountId(params).then(res => {
+					if (res.return_code == '000000') {
+						this.couponsDetails = res.return_data;
+						this.salesEndTime = res.return_data.useEndTime;
+						this.getCouponByDiscount(res.return_data.highDiscount.id);
+					}
+				})
+			},
+			//根据优惠券查询卡券列表
+			getCouponByDiscount(item) {
+				let params = {
+					discountId: item
+				}
+				getCouponByDiscount(params).then(res => {
+					if (res.return_code == '000000') {
+						this.minecoupones = res.return_data;
+					}
+				})
+			},
+			//商品跳转
+			toGoods(e) {
+				uni.navigateTo({
+					url: '../../order/confirmation?id=' + e
+				})
+				// uni.navigateTo({
+				// 	url: '../../goods/goods?id='+e
+				// });
 			},
-			//获取卡券详情
-			getDiscountByUserDiscountId() {
-				let params = {
-					userDiscountId: this.couponId
-				}
-				getDiscountByUserDiscountId(params).then(res => {
-					if (res.return_code == '000000') {
-						this.couponsDetails = res.return_data;
-						this.salesEndTime = res.return_data.useEndTime;
-						this.getCouponByDiscount(res.return_data.highDiscount.id);
-					}
-				})
-			},
-			//根据优惠券查询卡券列表
-			getCouponByDiscount(item) {
-				let params = {
-					discountId: item
-				}
-				getCouponByDiscount(params).then(res => {
-					if (res.return_code == '000000') {
-						this.minecoupones = res.return_data;
-					}
-				})
-			},
-			//商品跳转
-			toGoods(e) {
-				uni.navigateTo({
-					url: '../../order/confirmation?id=' + e
-				})
-				// uni.navigateTo({
-				// 	url: '../../goods/goods?id='+e
-				// });
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	.coupon-mes {
-		// margin-right: 90px;
+			//播放视频
+			playvideo(){
+				this.isplayvideo = true;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.coupon-mes {
+		// margin-right: 90px;
+	}
+
+	.coupon-img {
+		width: 80px;
+		height: 80px;
+	}
+
+	.product-list {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+
+		.product {
+			width: 48%;
+			border-radius: 20upx;
+			background-color: #fff;
+			margin: 0 0 15upx 0;
+			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
+
+			image {
+				width: 100%;
+				border-radius: 20upx 20upx 0 0;
+			}
+
+			.name {
+				width: 92%;
+				padding: 8upx 4%;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 1;
+				text-align: justify;
+				overflow: hidden;
+				font-size: 30upx;
+			}
+
+			.info {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-end;
+				width: 92%;
+				padding: 10upx 4% 10upx 4%;
+
+				.price {
+					color: #e65339;
+					font-size: 30upx;
+					font-weight: 600;
+				}
+
+				.slogan {
+					color: #807c87;
+					font-size: 24upx;
+					text-decoration: line-through;
+					margin-right: 10px;
+				}
+			}
+		}
+	}
+
+	.coupne-btn {
+		position: fixed;
+		bottom: 0px;
+		background-color: red;
+		color: #FFFFFF;
+		border-radius: 0px;
 	}
-
-	.coupon-img {
-		width: 80px;
-		height: 80px;
-	}
-
-	.product-list {
-		display: flex;
-		justify-content: space-between;
-		flex-wrap: wrap;
-
-		.product {
-			width: 48%;
-			border-radius: 20upx;
-			background-color: #fff;
-			margin: 0 0 15upx 0;
-			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
-
-			image {
-				width: 100%;
-				border-radius: 20upx 20upx 0 0;
-			}
-
-			.name {
-				width: 92%;
-				padding: 8upx 4%;
-				display: -webkit-box;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 1;
-				text-align: justify;
-				overflow: hidden;
-				font-size: 30upx;
-			}
-
-			.info {
-				display: flex;
-				justify-content: space-between;
-				align-items: flex-end;
-				width: 92%;
-				padding: 10upx 4% 10upx 4%;
-
-				.price {
-					color: #e65339;
-					font-size: 30upx;
-					font-weight: 600;
-				}
-
-				.slogan {
-					color: #807c87;
-					font-size: 24upx;
-					text-decoration: line-through;
-					margin-right: 10px;
-				}
-			}
-		}
-	}
-
-	.coupne-btn {
-		position: fixed;
-		bottom: 0px;
-		background-color: red;
+	.btnplay{
+		width: 120px;
+		text-align: center;
+		height: 40px;
+		line-height: 40px;
 		color: #FFFFFF;
-	}
+		background-color: #089bf5;
+		border-radius: 5px;
+		margin-left: 5%;
+		margin-top: 20px;
+	}
 </style>