优惠券详情 订单详情跳转

src/packageGoods/order/detail.vue

@@ -49,8 +49,8 @@
 		<view class="goods">
 			<view class="goods-title">商品信息</view>
 			<view class="goods-item" v-for="(item, index) in list" :key="index">
-				<image :src="item.picUrl" mode="aspectFit"></image>
-				<view class="info">
+				<image :src="item.picUrl" mode="aspectFit" @click="toGoodsDetail(item)"></image>
+				<view class="info" @click="toGoodsDetail(item)">
 					<view class="info-title ells">{{ item.title }}</view>
 					<view class="info-num flex">
 						<view class="info-num-sku ells-one" v-if="info.type === 1">规格：{{ item.properties || '-' }}</view>
@@ -216,6 +216,12 @@
 				}).catch(() => {
 					uni.hideLoading();
 				})
+			},
+			
+			toGoodsDetail(item) {
+				uni.navigateTo({
+					url: `/packagePrize/goods/detail?id=${ item.goodsId }`
+				})
 			},
 
 			cancelOrder() {

src/packagePrize/choice/index.vue

@@ -96,15 +96,15 @@
 			</view>
 			<view class="choice-tip flex" @click="again" v-if="comfirmShow && type == 'online'">
 				<view class="txt">再买一个</view>
-			</view>
-			<!-- #ifdef MP-WEIXIN -->
-				<view class="choice-download flex" @click="saveImg" v-if="comfirmShow">
-					<image src="../../packagePrize/static/download1.png" mode="aspectFit"></image>
-					<view>下载海报</view>
-				</view>
+			</view>
+			<!-- #ifdef MP-WEIXIN -->
+				<view class="choice-download flex" @click="saveImg" v-if="comfirmShow">
+					<image src="../../packagePrize/static/download1.png" mode="aspectFit"></image>
+					<view>下载海报</view>
+				</view>
 			<!-- #endif -->
-		</view>
-		<view v-else class="poster">
+		</view>
+		<view v-else class="poster">
 		</view>
 
 		<!-- 详情 -->
@@ -138,7 +138,7 @@
 				total: 0,
 				actionIndex: 0,
 				tipShow: false,
-				comfirmShow: false,
+				comfirmShow: false,
 				comfirmShow1: false,
 				actionInfo: {},
 				type: '',
@@ -147,103 +147,103 @@
 				detailShow: false,
 				description: '',
 
-				// 图片数据
-				// #ifdef H5
-				posterData: {
-					poster: {
-						//根据屏幕大小自动生成图片背景大小
-						url: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/prizeBackground.png", //图片地址
-						r: 15, //圆角半径
-						w: 350, //图片宽度
-						h: 600, //图片高度
-						p: 20 //图片内边距padding
-					},
-					title: {
-						// 商品名称
-						text: "", //文本
-						fontSize: 26, //字体大小
-						color: "#fff", //颜色
-						lineHeight: 44, //行高#4F4F4F 100%
-						mt: 90, //margin-top
-						w: 310,
-						align: "left"
-					},
-					mainImg: {
-						// 商品图
-						url: "", //图片地址
-						r: 5, //圆角半径
-						w: 160, //宽度
-						h: 160, //高度
-						mt: 270
-					},
-					codeImg: {
-						// 小程序码
-						url: "", //图片地址
-						w: 60, //宽度
-						h: 60, //高度
-						r: 2, //圆角半径
-						mt: 475
-					},
-					tips: []
-				},
-				// #endif
-				// #ifndef H5
-				posterData: {
-					poster: {
-						//根据屏幕大小自动生成图片背景大小
-						url: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/prizeBackground.png", //图片地址
-						r: 15, //圆角半径
-						w: 350, //图片宽度
-						h: 600, //图片高度
-						p: 20 //图片内边距padding
-					},
-					title: {
-						// 商品名称
-						text: "", //文本
-						fontSize: 26, //字体大小
-						color: "#fff", //颜色
-						lineHeight: 44, //行高#4F4F4F 100%
-						mt: 90, //margin-top
-						w: 310,
-						align: "left"
-					},
-					mainImg: {
-						// 商品图
-						url: "", //图片地址
-						r: 5, //圆角半径
-						w: 160, //宽度
-						h: 160, //高度
-						mt: 270
-					},
-					codeImg: {
-						// 小程序码
-						url: "", //图片地址
-						w: 60, //宽度
-						h: 60, //高度
-						r: 2, //圆角半径
-						mt: 475
-					},
-					tips: []
-				},
+				// 图片数据
+				// #ifdef H5
+				posterData: {
+					poster: {
+						//根据屏幕大小自动生成图片背景大小
+						url: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/prizeBackground.png", //图片地址
+						r: 15, //圆角半径
+						w: 350, //图片宽度
+						h: 600, //图片高度
+						p: 20 //图片内边距padding
+					},
+					title: {
+						// 商品名称
+						text: "", //文本
+						fontSize: 26, //字体大小
+						color: "#fff", //颜色
+						lineHeight: 44, //行高#4F4F4F 100%
+						mt: 90, //margin-top
+						w: 310,
+						align: "left"
+					},
+					mainImg: {
+						// 商品图
+						url: "", //图片地址
+						r: 5, //圆角半径
+						w: 160, //宽度
+						h: 160, //高度
+						mt: 270
+					},
+					codeImg: {
+						// 小程序码
+						url: "", //图片地址
+						w: 60, //宽度
+						h: 60, //高度
+						r: 2, //圆角半径
+						mt: 475
+					},
+					tips: []
+				},
+				// #endif
+				// #ifndef H5
+				posterData: {
+					poster: {
+						//根据屏幕大小自动生成图片背景大小
+						url: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/prizeBackground.png", //图片地址
+						r: 15, //圆角半径
+						w: 350, //图片宽度
+						h: 600, //图片高度
+						p: 20 //图片内边距padding
+					},
+					title: {
+						// 商品名称
+						text: "", //文本
+						fontSize: 26, //字体大小
+						color: "#fff", //颜色
+						lineHeight: 44, //行高#4F4F4F 100%
+						mt: 90, //margin-top
+						w: 310,
+						align: "left"
+					},
+					mainImg: {
+						// 商品图
+						url: "", //图片地址
+						r: 5, //圆角半径
+						w: 160, //宽度
+						h: 160, //高度
+						mt: 270
+					},
+					codeImg: {
+						// 小程序码
+						url: "", //图片地址
+						w: 60, //宽度
+						h: 60, //高度
+						r: 2, //圆角半径
+						mt: 475
+					},
+					tips: []
+				},
 				// #endif
 			};
 		},
-		onLoad(options) {
-			if(options.toIndex) {
-				this.toIndex()
-				return
-			}else {
-				this.comfirmShow1 = true
+		onLoad(options) {
+			if(options.toIndex) {
+				this.toIndex()
+				return
+			}else {
+				this.comfirmShow1 = true
 			}
 			this.ticketId = options.id
 			// #ifdef MP-WEIXIN
 			const res = uni.getMenuButtonBoundingClientRect()
 			this.statusHeight = res.top //胶囊距离顶部
 			// #endif
-			this.getPrizeList()
-		},
-		onShow() {
-			this.getUrl()
+			this.getPrizeList()
+		},
+		onShow() {
+			this.getUrl()
 		},
 		methods: {
 			getPrizeList() {
@@ -256,16 +256,16 @@
 				$http.post('/api/v1/mp/user/ticket/queryHitPrizeList', data).then(res => {
 					uni.hideLoading();
 					if (res.code == 0) {
-						this.type = res.data.type
+						this.type = res.data.type
 						res.data.prizeList.forEach(item => {
 							let picUrlArr = item.picUrl.split(',')
 							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
 							item.prizeType = JSON.parse(item.prizeType)
 						})
 						if (res.data.prizeList.length == 1) {
-							let item = res.data.prizeList[this.actionIndex]
-							// this.posterData.title.text = item.title || ''
-							this.posterData.title.text = item.title.length > 11 ? item.title.slice(0, 11).concat("...") : item.title ;
+							let item = res.data.prizeList[this.actionIndex]
+							// this.posterData.title.text = item.title || ''
+							this.posterData.title.text = item.title.length > 11 ? item.title.slice(0, 11).concat("...") : item.title ;
 							this.posterData.mainImg.url = item.picUrl
 							this.actionInfo = item
 							$http.post('/api/v1/mp/user/ticket/cashPrize', {
@@ -298,9 +298,9 @@
 
 			confirmPrize() {
 				let _this = this
-				let item = _this.prizeList[_this.actionIndex]
-				// this.posterData.title.text = item.title || ''
-				this.posterData.title.text = item.title.length > 11 ? item.title.slice(0, 11).concat("...") : item.title ;
+				let item = _this.prizeList[_this.actionIndex]
+				// this.posterData.title.text = item.title || ''
+				this.posterData.title.text = item.title.length > 11 ? item.title.slice(0, 11).concat("...") : item.title ;
 				this.posterData.mainImg.url = item.picUrl
 				_this.actionInfo = item
 				if (_this.prizeList.length > 1) {
@@ -382,7 +382,25 @@
 				}
 				//门店优惠券
 				if (item.prizeType.value == "coupon" || item.prizeType.value == "coupon_pkg") {
-					this.getGoodsDetail(425)
+					if(item.couponDetail && item.couponDetail != '') {
+						this.detailShow = true
+						// 处理富文本
+						// #ifndef MP-ALIPAY
+						const description = item.couponDetail.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
+							.replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
+								".png?imageView2/2/w/750\"");
+						this.description = formatRichText(description);
+						// #endif
+						// #ifdef MP-ALIPAY
+						item.couponDetail.split(".jpg\"").join(".jpg?imageView2/2/w/750\"")
+						item.couponDetail.split(".jpeg\"").join(".jpeg?imageView2/2/w/750\"")
+						item.couponDetail.split(".png\"").join(".png?imageView2/2/w/750\"")
+						this.description = formatRichText(item.couponDetail);
+						// #endif
+					}else {
+						this.getGoodsDetail(425)
+					}
+					
 				}
 				// 盲豆
 				if (item.prizeType.value == "coin") {
@@ -448,20 +466,20 @@
 						}
 					});
 				}
-			},
-			
-			getUrl() {
-				//获取二维码
-				$http.post('/api/v1/mp/user/share/code/generate', {
-					boxId: this.boxId,
-					type: "1",
-					poster: "1",
-				}).then(res => {
-					this.posterData.codeImg.url = env.filePublic + res.data
-				})
+			},
+			
+			getUrl() {
+				//获取二维码
+				$http.post('/api/v1/mp/user/share/code/generate', {
+					boxId: this.boxId,
+					type: "1",
+					poster: "1",
+				}).then(res => {
+					this.posterData.codeImg.url = env.filePublic + res.data
+				})
 			},
 
-			saveImg() {
+			saveImg() {
 				//下载海报
 				this.$refs.shareCode.posterShow()
 			},
@@ -469,31 +487,31 @@
 		onShareAppMessage(res) {
 			return {
 				title: '分享奖品',
-				path: `/pages/index/index`,
+				path: `/pages/index/index`,
+				imageUrl: 'https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/sharePosterCover.png',
+			}
+		},
+		//分享朋友圈
+		onShareTimeline() {
+			return {
+				title: '分享奖品',
+				query: `toIndex=true`,
 				imageUrl: 'https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/sharePosterCover.png',
 			}
-		},
-		//分享朋友圈
-		onShareTimeline() {
-			return {
-				title: '分享奖品',
-				query: `toIndex=true`,
-				imageUrl: 'https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/sharePosterCover.png',
-			}
 		}
 	}
 </script>
 
-<style lang="scss" scoped>
-	.poster {
-		display: flex;
-		flex-direction: column;
-		position: relative;
-		width: 100%;
-		height: 100vh;
-		background: url(https://mp-public-test-1309783959.cos.ap-shanghai.myqcloud.com/EQCE9TSY4VTY2C4RCTPW.jpg) center center no-repeat;
-		background-size: 100vw 100vh;
-		overflow: hidden;
+<style lang="scss" scoped>
+	.poster {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		width: 100%;
+		height: 100vh;
+		background: url(https://mp-public-test-1309783959.cos.ap-shanghai.myqcloud.com/EQCE9TSY4VTY2C4RCTPW.jpg) center center no-repeat;
+		background-size: 100vw 100vh;
+		overflow: hidden;
 	}
 	.choice {
 		display: flex;
@@ -869,4 +887,4 @@
 			}
 		}
 	}
-</style>
+</style>

src/packagePrize/goods/detail.vue

@@ -1,268 +1,291 @@
-<template>
-	<view>
-		<!-- #ifdef MP-ALIPAY -->
-		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="奖品详情" leftIconSize="0"></u-navbar>
-		<!-- #endif -->
-		<!-- #ifdef MP-WEIXIN -->
-		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="奖品详情"></u-navbar>
-		<!-- #endif -->
-		<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
-		<view v-if="pagesNum > 1">
-			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="奖品详情" />
-		</view>
-		<view v-else>
-			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :border="true" title="奖品详情">
-				<view class="nav-left flex" slot="left" @click="$toIndex()">
-					<u-icon name="arrow-left" size="20" color="#333"></u-icon>
-				</view>
-			</u-navbar>
-		</view>
-		<!-- #endif -->
-		
-		<view class="detail">
-			<view class="detail-swiper">
-				<u-swiper :list="picUrlArr" height="375" radius="0" :indicator="true" :circular="true" indicatorMode="dot" indicatorActiveColor="#FA822C"></u-swiper>
-			</view>
-			<!-- 详情 -->
-			<view class="detail-info flex">
-				<view class="detail-info-left">
-					<view class="detail-info-left__title ells">{{ info.title }}</view>
-					<!-- <view class="detail-info-left__coin">
-						<view class="content flex">
-							<image src="../../static/public/goods_coin.png" mode=""></image>
-							<view><text>×</text>{{ info.exchangePrice }}</view>
-						</view>
-						<view class="txt" v-if="info.originPrice">原盲豆：<text>{{ info.originPrice }}</text></view>
-					</view>
-					<view class="detail-info-left__price">￥{{ $numberFormat(info.value) }}</view> -->
-				</view>
-				<view class="detail-info-right" v-show="false">销量：30个</view>
-			</view>
-			<view class="detail-goods">产品介绍</view>
-			<view class="detail-description">
-				<u-parse :content="description" :selectable="true"></u-parse>
-			</view>
-			<view style="detail-merchant" @click="toCompanyData" v-if="info.merchantInfo?true:false">
-				<view class="detail-merchant-warp">
-					<view class="detail-merchant-warp-one">商家信息</view>
-					<view class="detail-merchant-warp-two">
-						<view style="float: left;">前往查看</view>
-						<u-icon style="float: right;" name="arrow-right" size="18"></u-icon>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import env from '../../config/env.js'
-	import $http from '@/utils/request.js'
-	import appId from '@/config/appId.js'
-	import { formatRichText } from '@/utils/util.js'
-	export default {
-		data() {
-			return {
-				boxId: '',
-				picUrlArr: [],
-				info: {},
-				prizeList: [],
-				description: '',
-				goodsId: '',
-
-				payShow: false,
-				payInfo: {},
-				pagesNum: '',
-			};
-		},
-		onShow() {
-			this.pagesNum = getCurrentPages().length
-		},
-		onLoad(opthios) {
-			this.getDetail(opthios.id)
-			this.goodsId = opthios.id
-		},
-		methods: {
-			getDetail(id) {
-				uni.showLoading({
-					title: '加载中'
-				});
-				$http.post('/api/v1/mp/user/exchange/goods/detail', {
-					noToken: true,
-					goodsId: id
-				}).then(res => {
-					uni.hideLoading();
-					if (res.code == 0) {
-						this.info = res.data
-						let picUrlArr = res.data.picUrl.split(',')
-						picUrlArr.forEach(item => {
-							this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
-						})
-						// 处理富文本
-						// #ifndef MP-ALIPAY
-						const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
-							.replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
-								".png?imageView2/2/w/750\"");
-						this.description = formatRichText(description);
-						// #endif
-						
-						// #ifdef MP-ALIPAY
-						res.data.description.split(".jpg\"").join(".jpg?imageView2/2/w/750\"")
-						res.data.description.split(".jpeg\"").join(".jpeg?imageView2/2/w/750\"")
-						res.data.description.split(".png\"").join(".png?imageView2/2/w/750\"")
-						this.description = formatRichText(res.data.description);
-						// #endif
-						
-					}
-				}).catch(() => {
-					uni.hideLoading();
-				})
-			},
-
-			close() {
-				this.payShow = false
-			},
-
-			exchange() {
-				let data = {
-					couponIds: [],
-					autoCoupon: 1,
-					boxId: this.info.boxId,
-					ticketId: this.info.ticketId,
-					orderNum: 1,
-					appSource: appId
-				}
-				$http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
-					if (res.code == 0) {
-						let info = {
-							...res.data,
-							...this.info,
-							picUrl: env.filePublic + res.data.picUrl,
-						}
-						this.payInfo = info
-						this.payShow = true
-					}
-				})
-			},
-			
-			toCompanyData(){
-				uni.navigateTo({
-					url:`/packageGoods/goods/company?goodsId=${ this.goodsId }`
-				})
-			},
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.detail {
-
-		// 商品轮播
-		&-swiper {
-			background-color: #FFFFFF;
-		}
-		
-		// 详情
-		&-info {
-			background-color: #fff;
-			justify-content: space-between;
-			padding: 34rpx;
-			margin-bottom: 22rpx;
-			
-			&-left {
-				flex: 1;
-				
-				&__title {
-					font-size: 34rpx;
-					line-height: 40rpx;
-					max-height: 80rpx;
-					overflow: hidden;
-					// margin-bottom: 26rpx;
-					font-weight: bold;
-				}
-				
-				&__coin {
-					display: flex;
-					line-height: 30rpx;
-					margin-bottom: 26rpx;
-					
-					.content {
-						color: #FA822C;
-						margin-right: 34rpx;
-						font-weight: bold;
-						font-size: 30rpx;
-						
-						image {
-							width: 34rpx;
-							height: 30rpx;
-						}
-						
-						text {
-							font-weight: normal;
-						}
-					}
-					
-					.txt {
-						font-size: 26rpx;
-						color: #666666;
-						text-decoration: line-through;
-					}
-				}
-				
-				&__price {
-					line-height: 24rpx;
-					color: #666666;
-				}
-			}
-			
-			&-right {
-				color: #666666;
-			}
-		}
-		
-		&-goods {
-			height: 90rpx;
-			text-align: center;
-			line-height: 90rpx;
-			font-weight: bold;
-			font-size: 30rpx;
-			background-color: #FFFFFF;
-		}
-
-		&-description {
-			image {
-				width: 100%;
-			}
-		}
-
-		&-merchant {
-			height: 88rpx;
-			// text-align: center;
-			line-height: 88rpx;
-			font-weight: bold;
-			background-color: #FFFFFF;
-
-			&-warp {
-				height: 88rpx;
-				width: 100%;
-				background-color: #ffffff;
-
-				&-one {
-					float: left;
-					margin: 20rpx;
-					font-weight: 600;
-				}
-
-				&-two {
-					float: right;
-					margin: 20rpx;
-					font-weight: 600;
-				}
-			}
-		}
-
-		// 设置ios刘海屏底部横线安全区域
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-	}
-</style>
+<template>
+	<view>
+		<!-- #ifdef MP-ALIPAY -->
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="奖品详情"
+			leftIconSize="0"></u-navbar>
+		<!-- #endif -->
+		<!-- #ifdef MP-WEIXIN -->
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="奖品详情"></u-navbar>
+		<!-- #endif -->
+		<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
+		<view v-if="pagesNum > 1">
+			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="奖品详情" />
+		</view>
+		<view v-else>
+			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :border="true" title="奖品详情">
+				<view class="nav-left flex" slot="left" @click="$toIndex()">
+					<u-icon name="arrow-left" size="20" color="#333"></u-icon>
+				</view>
+			</u-navbar>
+		</view>
+		<!-- #endif -->
+
+		<view class="detail">
+			<view class="detail-swiper">
+				<u-swiper :list="picUrlArr" height="375" radius="0" :indicator="true" :circular="true" indicatorMode="dot"
+					indicatorActiveColor="#FA822C"></u-swiper>
+			</view>
+			<!-- 详情 -->
+			<view class="detail-info flex">
+				<view class="detail-info-left">
+					<view class="detail-info-left__title ells">{{ info.title }}</view>
+					<!-- <view class="detail-info-left__coin">
+						<view class="content flex">
+							<image src="../../static/public/goods_coin.png" mode=""></image>
+							<view><text>×</text>{{ info.exchangePrice }}</view>
+						</view>
+						<view class="txt" v-if="info.originPrice">原盲豆：<text>{{ info.originPrice }}</text></view>
+					</view>
+					<view class="detail-info-left__price">￥{{ $numberFormat(info.value) }}</view> -->
+				</view>
+				<view class="detail-info-right" v-show="false">销量：30个</view>
+			</view>
+			<view class="detail-goods">产品介绍</view>
+			<view class="detail-description">
+				<u-parse :content="description" :selectable="true"></u-parse>
+			</view>
+			<view style="detail-merchant" @click="toCompanyData" v-if="info.merchantInfo?true:false">
+				<view class="detail-merchant-warp">
+					<view class="detail-merchant-warp-one">商家信息</view>
+					<view class="detail-merchant-warp-two">
+						<view style="float: left;">前往查看</view>
+						<u-icon style="float: right;" name="arrow-right" size="18"></u-icon>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import env from '../../config/env.js'
+	import $http from '@/utils/request.js'
+	import appId from '@/config/appId.js'
+	import { formatRichText } from '@/utils/util.js'
+	export default {
+		data() {
+			return {
+				boxId: '',
+				picUrlArr: [],
+				info: {},
+				prizeList: [],
+				description: '',
+				goodsId: '',
+
+				payShow: false,
+				payInfo: {},
+				pagesNum: '',
+				couponDetail: '',
+			};
+		},
+		onShow() {
+			this.pagesNum = getCurrentPages().length
+		},
+		onLoad(opthios) {
+			this.couponDetail = uni.getStorageSync('couponDetail') ? uni.getStorageSync('couponDetail') : ''
+			this.getDetail(opthios.id)
+			this.goodsId = opthios.id
+		},
+		methods: {
+			getDetail(id) {
+				uni.showLoading({
+					title: '加载中'
+				});
+				$http.post('/api/v1/mp/user/exchange/goods/detail', {
+					noToken: true,
+					goodsId: id
+				}).then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						this.info = res.data
+						let picUrlArr = res.data.picUrl.split(',')
+						picUrlArr.forEach(item => {
+							this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
+						})
+						if (this.couponDetail && this.couponDetail != '') {
+							// 处理富文本
+							// #ifndef MP-ALIPAY
+							const description = this.couponDetail.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
+								.replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
+									".png?imageView2/2/w/750\"");
+							this.description = formatRichText(description);
+							// #endif
+
+							// #ifdef MP-ALIPAY
+							this.couponDetail.split(".jpg\"").join(".jpg?imageView2/2/w/750\"")
+							this.couponDetail.split(".jpeg\"").join(".jpeg?imageView2/2/w/750\"")
+							this.couponDetail.split(".png\"").join(".png?imageView2/2/w/750\"")
+							this.description = formatRichText(this.couponDetail);
+							// #endif
+						} else {
+							// 处理富文本
+							// #ifndef MP-ALIPAY
+							const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
+								.replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
+									".png?imageView2/2/w/750\"");
+							this.description = formatRichText(description);
+							// #endif
+
+							// #ifdef MP-ALIPAY
+							res.data.description.split(".jpg\"").join(".jpg?imageView2/2/w/750\"")
+							res.data.description.split(".jpeg\"").join(".jpeg?imageView2/2/w/750\"")
+							res.data.description.split(".png\"").join(".png?imageView2/2/w/750\"")
+							this.description = formatRichText(res.data.description);
+							// #endif
+						}
+					}
+				}).catch(() => {
+					uni.hideLoading();
+				})
+			},
+
+			close() {
+				this.payShow = false
+			},
+
+			exchange() {
+				let data = {
+					couponIds: [],
+					autoCoupon: 1,
+					boxId: this.info.boxId,
+					ticketId: this.info.ticketId,
+					orderNum: 1,
+					appSource: appId
+				}
+				$http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
+					if (res.code == 0) {
+						let info = {
+							...res.data,
+							...this.info,
+							picUrl: env.filePublic + res.data.picUrl,
+						}
+						this.payInfo = info
+						this.payShow = true
+					}
+				})
+			},
+
+			toCompanyData() {
+				uni.navigateTo({
+					url: `/packageGoods/goods/company?goodsId=${ this.goodsId }`
+				})
+			},
+		},
+		onUnload() {
+			uni.removeStorageSync('couponDetail')
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.detail {
+
+		// 商品轮播
+		&-swiper {
+			background-color: #FFFFFF;
+		}
+
+		// 详情
+		&-info {
+			background-color: #fff;
+			justify-content: space-between;
+			padding: 34rpx;
+			margin-bottom: 22rpx;
+
+			&-left {
+				flex: 1;
+
+				&__title {
+					font-size: 34rpx;
+					line-height: 40rpx;
+					max-height: 80rpx;
+					overflow: hidden;
+					// margin-bottom: 26rpx;
+					font-weight: bold;
+				}
+
+				&__coin {
+					display: flex;
+					line-height: 30rpx;
+					margin-bottom: 26rpx;
+
+					.content {
+						color: #FA822C;
+						margin-right: 34rpx;
+						font-weight: bold;
+						font-size: 30rpx;
+
+						image {
+							width: 34rpx;
+							height: 30rpx;
+						}
+
+						text {
+							font-weight: normal;
+						}
+					}
+
+					.txt {
+						font-size: 26rpx;
+						color: #666666;
+						text-decoration: line-through;
+					}
+				}
+
+				&__price {
+					line-height: 24rpx;
+					color: #666666;
+				}
+			}
+
+			&-right {
+				color: #666666;
+			}
+		}
+
+		&-goods {
+			height: 90rpx;
+			text-align: center;
+			line-height: 90rpx;
+			font-weight: bold;
+			font-size: 30rpx;
+			background-color: #FFFFFF;
+		}
+
+		&-description {
+			image {
+				width: 100%;
+			}
+		}
+
+		&-merchant {
+			height: 88rpx;
+			// text-align: center;
+			line-height: 88rpx;
+			font-weight: bold;
+			background-color: #FFFFFF;
+
+			&-warp {
+				height: 88rpx;
+				width: 100%;
+				background-color: #ffffff;
+
+				&-one {
+					float: left;
+					margin: 20rpx;
+					font-weight: 600;
+				}
+
+				&-two {
+					float: right;
+					margin: 20rpx;
+					font-weight: 600;
+				}
+			}
+		}
+
+		// 设置ios刘海屏底部横线安全区域
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+</style>

src/pages/ticketBox/detail.vue

@@ -1,785 +1,796 @@
-<template>
-	<view class="ticket-wrap">
-		<!-- #ifdef MP-ALIPAY -->
-		<view v-if="pagesNum > 1">
-			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票详情" leftIconSize="0"></u-navbar>
-		</view>
-		<view v-else>
-			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" title="盲票详情">
-				<view class="nav-left flex" slot="left" @click="$toIndex()">
-					<u-icon name="home" size="20" color="#333"></u-icon>
-					<view class="nav-left__code">首页</view>
-				</view>
-			</u-navbar>
-		</view>
-		<!-- #endif -->
-		<!-- #ifndef MP-ALIPAY -->
-		<view v-if="pagesNum > 1">
-			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票详情"></u-navbar>
-		</view>
-		<view v-else>
-			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" title="盲票详情">
-				<view class="nav-left flex" slot="left" @click="$toIndex()">
-					<u-icon name="home" size="20" color="#333"></u-icon>
-					<view class="nav-left__code">首页</view>
-				</view>
-			</u-navbar>
-		</view>
-		<!-- #endif -->
-		
-		<!-- 奖品轮播 -->
-		<view class="prize">
-			<!-- 查看规则 -->
-			<view class="prize-rule" @click="toRule">
-				<!-- #ifndef MP-ALIPAY -->
-				<view class="prize-rule-content flex">
-					<image src="../../static/index/index_tip.png" mode="scaleToFill"></image>
-					<text>查看规则</text>
-				</view>
-			<!-- #endif -->
-			</view>
-			
-			<!-- 奖品 -->
-			<swiper class="prize-swiper" previous-margin="100px" next-margin="100px" :interval="4000" :autoplay="true" :circular="true" @change="changePrizeSwiper">
-				<swiper-item :class="prizeIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in prizeList.slice(0, 10)" :key="index">
-					<view class="prize-swiper-item flex" @click="toPrizeGoods(item)">
-						<image :class="prizeIndex == index ? 'img' : 'img-side'" :src="item.picUrl" mode="aspectFit"></image>
-					</view>
-				</swiper-item>
-			</swiper>
-
-			<!-- 奖品价格 -->
-			<view class="prize-price flex">
-				<view class="prize-price-present" v-if="prizeInfo.prizeType != 'coin'">￥{{ $numberFormat(prizeInfo.value) }}</view>
-				<view class="prize-price-present" v-else>{{ prizeInfo.value }}个</view>
-				<view class="prize-price-txt ells-one">{{ prizeInfo.title }}</view>
-				<view class="prize-price__ticket-price flex">
-					<image src="../../static/ticketBox/ticket_block.png" mode="scaleToFill"></image>
-					<view class="txt">￥{{ $numberFormat(info.salePrice) }}</view>
-				</view>
-				<view class="prize-price-past" v-if="info.originPrice != 0">原价：￥{{ $numberFormat(info.originPrice) }}</view>
-			</view>
-			
-			<!-- 开启盲票 -->
-			<view class="ticket-btn flex">
-				<!-- <image class="ticket-btn-game" src="../../static/ticketBox/ticket_game.png" mode="scaleToFill" @click="toRollingGame"></image> -->
-				<image class="ticket-btn-game" src="" mode="scaleToFill" ></image>
-				<view class="ticket-btn-center flex" @click="exchange">
-					<image src="../../static/ticketBox/ticket_btn_center.png" mode="scaleToFill"></image>
-					<view class="ticket-btn-center-txt">刮开盲票</view>
-				</view>
-				<view class="ticket-btn-share flex">
-					<!-- #ifdef MP-WEIXIN -->
-					<image src="../../static/ticketBox/ticket_share.png" mode="scaleToFill" @click="toShare"></image>
-					<button type="default" open-type="share" v-if="loginState"></button>
-					<!-- #endif -->
-				</view>
-			</view>
-		</view>
-		
-		<!-- 盲票奖品说明 -->
-		<view class="explain flex">
-			<image class="image-left" src="../../static/ticketBox/ticket_explain_left.png" mode="aspectFit"></image>
-			<view class="explain-title">刮开必出以下宝贝之一</view>
-			<image class="image-right" src="../../static/ticketBox/ticket_explain_right.png" mode="aspectFit"></image>
-		</view>
-		
-		<!-- 盲票奖品数量、概率 -->
-		<view class="prize-total">
-			<view class="prize-total-num">共{{ total }}款</view>
-			<!-- 中奖概率 -->
-			<view class="prize-total-chance flex">
-				<view class="prize-total-chance-content flex" v-for="(item, index) in info.ticketAwardsLabelList">
-					<image :src="item.picUrl" mode="scaleToFill"></image>
-					<text>{{ item.hitRate }}%</text>
-				</view>
-			</view>
-			<!-- 文字说明 -->
-			<view class="prize-total-txt">因概率对小数点后三位进行四舍五入处理，故存在总值不为100%的可能。商品抽奖存在概率性，付费请谨慎!未成年人请在家长监督下使用。</view>
-		</view>
-		
-		<!-- 盲票奖品列表 -->
-		<view class="prize-list">
-			<view class="prize-list-item flex" v-for="(item, index) in prizeList" :key="index" @click="toPrizeGoods(item)">
-				<image :src="item.picUrl" mode="aspectFit"></image>
-				<view class="prize-list-item-info flex">
-					<view class="title ells">{{ item.title }}</view>
-					<view class="price" v-if="item.prizeType != 'coin'">￥{{ $numberFormat(item.value) }}</view>
-					<view class="price" v-else>{{ item.value }}个</view>
-				</view>
-				<view class="prize-list-item-grade">
-					<image :src="item.awardsLabelPicUrl" />
-				</view>
-			</view>
-			<u-loadmore :line="true" v-if="prizeList.length>10" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到底了'" />
-		</view>
-		
-		<view class="footer-fixed" v-if="btnFixed">
-			<view class="footer-fixed-btn flex">
-				<view class="footer-fixed-btn-center flex" @click="exchange">
-					<image src="../../static/ticketBox/ticket_btn_center.png" mode="scaleToFill"></image>
-					<view class="footer-fixed-btn-center-txt">刮开盲票</view>
-				</view>
-			</view>
-		</view>
-		
-		<!-- 支付弹层 -->
-		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" v-if="payShow" />
-	</view>
-</template>
-
-<script>
-	import env from '../../config/env.js'
-	import $http from '@/utils/request.js'
-	import appId from '@/config/appId.js'
-	import PayPopup from '../../components/pay-popup/pay-popup.vue'
-	export default {
-		components: {
-			PayPopup
-		},
-		data() {
-			return {
-				boxId: '',
-				picUrlArr: [],
-				info: {},
-				status: 'nomore',//上拉刷新状态
-				pageNum: 1,
-				total: 0,
-				prizeList: [],
-
-				payShow: false,
-				payInfo: {},
-				sceneArr: null,
-				
-				prizeIndex: 0,
-				contnetHeight: 0,
-				btnFixed: false,
-				prizeInfo: {},
-				userInfo: {},
-				loginState: false,
-				pagesNum: '',
-			};
-		},
-		onLoad(opthios) {
-			//票赢天下跳转
-			if (opthios.scene) {
-				let sceneStr = decodeURIComponent(opthios.scene)
-				this.sceneArr = sceneStr.split('&')
-				this.boxId = this.sceneArr[0]
-				uni.setStorageSync('shareUid', this.sceneArr[1])
-				if (this.sceneArr[1] === undefined || this.sceneArr[1] === 'undefined') {
-					uni.getSystemInfo({
-						success(res) {
-							log.error(
-								`基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system },页面：/pages/ticketBox/detail.vue，来源：票赢天下小程序分享盲票，`
-							)
-						}
-					})
-				}
-				uni.setStorageSync('shareType', this.sceneArr[2])
-			}
-			
-			if (opthios.boxId) {
-				this.boxId = opthios.boxId
-			}
-			if (opthios.userId) {
-				uni.setStorageSync('shareUid', opthios.userId != 'undefined' ? opthios.userId:null)
-				if (opthios.userId === undefined || opthios.userId === 'undefined') {
-					uni.getSystemInfo({
-						success(res) {
-							log.error(
-								`基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system },页面：/pages/ticketBox/detail.vue.`
-							)
-						}
-					})
-				}
-			}
-			if (opthios.type) {
-				uni.setStorageSync('shareType', opthios.type)
-			}
-			
-			/**
-			* 外部app跳转接受的参数
-			* shareUid: 用户ID
-			* shareType: 分享类型
-			* */
-			if(opthios.uid) {
-				uni.setStorageSync('shareUid', opthios.uid != 'undefined' ? opthios.uid:null)
-				if (opthios.uid === undefined || opthios.uid === 'undefined') {
-					uni.getSystemInfo({
-						success(res) {
-							log.error(
-								`基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system },页面：/pages/ticketBox/detail.vue，来源：外部app，`
-							)
-						}
-					})
-				}
-				uni.setStorageSync('shareType', opthios.t)
-			}
-		},
-		
-		mounted() {
-			let _this = this;
-			let info = uni.createSelectorQuery().select(".prize");
-			info.boundingClientRect(function(data) { //data - 各种参数
-				_this.contnetHeight = data.height
-			}).exec()
-		},
-		
-		onPageScroll: function(e) {
-			let _this = this;
-			_this.btnFixed = _this.contnetHeight <= e.scrollTop;
-		},
-		
-		onShow() {
-			this.pagesNum = getCurrentPages().length
-			this.loginState = uni.getStorageSync('token') ? true : false
-			if(this.loginState) {
-				this.getBaseInfo()
-			}
-			if (this.boxId && this.boxId != undefined) {
-				this.getDetail()
-			}
-			
-		},
-
-		methods: {
-			changePrizeSwiper({ detail }) {
-				this.prizeIndex = detail.current
-				this.prizeInfo = this.prizeList[detail.current]
-			},
-			
-			getDetail() {
-				$http.post('/api/v1/mp/user/mall/ticket/detail/new', {
-					boxId: this.boxId,
-					noToken: true
-				}).then(res => {
-					if (res.code == 0) {
-						this.info = {
-							...res.data,
-							picUrl: res.data.picUrl.split(',').map(item => env.filePublic + item + '?imageView2/2/w/375'),
-							ticketAwardsLabelList: res.data.ticketAwardsLabelList.map(item => {
-								return { ...item, picUrl: env.filePublic + item.picUrl }
-							})
-						}
-						this.pageNum = 1
-						this.total = 0
-						this.prizeList = []
-						this.getPrizeList()
-					}
-				}).catch(() => {
-				})
-			},
-			getPrizeList() {
-				$http.post(`/api/v1/mp/user/ticket/prize/list/${this.boxId}?pageNum=${this.pageNum}&pageSize=10`,{}).then(res => {
-					if (res.code == 0) {
-						let prizeList = res.rows
-						prizeList.forEach(item => {
-							item.picUrl = env.filePublic + item.picUrl.split(',')[0] + '?imageView2/2/w/375'
-							item.awardsLabelPicUrl = env.filePublic + item.awardsLabelPicUrl
-						})
-						this.total = res.total
-						this.prizeList = this.prizeList.concat(prizeList)
-						this.prizeInfo = this.prizeList[this.prizeIndex]
-					}
-				})
-			},
-
-			getPageNum() {
-				let pages = getCurrentPages();
-			},
-
-			close() {
-				this.payShow = false
-			},
-
-			toProcess(id) {
-				this.payShow = false
-				// uni.navigateTo({
-				// 	url: `/packagePrize/rolling/index?boxId=${ this.info.boxId }&orderId=${ id }&isTry=0`
-				// })
-				uni.navigateTo({
-					url: `/packagePrize/purchase/index?boxId=${ this.info.boxId }&orderId=${ id }&isTry=0`
-				})
-			},
-
-			exchange() {
-				let data = {
-					userCouponIds: [],
-					autoCoupon: 1,
-					boxId: this.info.boxId,
-					orderNum: 1,
-					appSource: appId
-				}
-				$http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
-					if (res.code == 0) {
-						let info = {
-							...res.data,
-							...this.info,
-							picUrl: this.info.picUrl[0],
-							couponTitle: res.data && res.data.couponList && res.data.couponList.length && res
-								.data.couponList[0].title,
-							couponId: res.data && res.data.couponList && res.data.couponList.length && res.data
-								.couponList[0].id
-						}
-						this.payInfo = info
-						this.payShow = true
-					}
-				})
-			},
-			
-			toRollingGame() {
-				if (!uni.getStorageSync('token')) {
-					uni.navigateTo({
-						url: '/pages/login/index'
-					})
-					return
-				}
-				uni.navigateTo({
-					url: `/packagePrize/rolling/index?boxId=${ this.info.boxId }&isTry=1`
-				})
-			},
-
-			toShare() {
-				this.getBaseInfo()
-				// if (!uni.getStorageSync('token')) {
-				// 	uni.navigateTo({
-				// 		url: "/pages/login/index"
-				// 	})
-				// 	return
-				// }
-				// uni.navigateTo({
-				// 	url: `/packageOperate/share/index?boxId=${ this.info.boxId }`
-				// })
-			},
-			
-			// 点击规则说明
-			toRule() {
-				uni.navigateTo({
-					url: '/packageOther/rule/index'
-				})
-			},
-
-			toPrizeGoods(item) { 
-				if (item.prizeType == "goods") {
-					uni.navigateTo({
-						url: `/packagePrize/goods/detail?id=${ item.refId }`
-					})
-				}
-				//门店优惠券
-				if (item.prizeType == "coupon" || item.prizeType == "coupon_pkg") {
-					uni.navigateTo({
-						url: `/packagePrize/goods/detail?id=425`
-					})
-				}
-				// 盲豆
-				if (item.prizeType == "coin") {
-					uni.navigateTo({
-						url: `/packagePrize/goods/detail?id=424`
-					})
-				}
-			},
-			
-			getBaseInfo() {
-				$http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
-					uni.hideLoading();
-					if (res.code == 0) {
-						this.userInfo = res.data
-					}
-				})
-			},
-		},
-		
-		onShareAppMessage(res) {
-			return {
-				title: '一起来刮盲票吧',
-				path: `/pages/ticketBox/detail?boxId=${ this.info.boxId }&userId=${ this.userInfo.userId }&type=1`,
-				type: 2,
-			}
-		},
-		//分享朋友圈
-		onShareTimeline() {
-			return {
-				title: '一起来刮盲票吧',
-				query: `boxId=${ this.info.boxId }&userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
-						
-			}
-		},
-		onReachBottom() {
-			if(this.total < this.pageNum * 10) return ;
-			this.status = 'loading';
-			++this.pageNum
-			if(this.total < this.pageNum * 10) this.status = 'nomore';
-				else this.status = 'loading';
-			this.getPrizeList()
-		},
-	}
-</script>
-
-<style lang="scss" scoped>
-	.ticket-wrap {
-		background: #FFF3EB;
-		padding-bottom: 100rpx;
-	}
-	.nav-left {
-		&__code {
-			margin-left: 10rpx;
-		}
-	}
-	
-	// 奖品轮播
-	.prize {
-		// height: 71vh;
-		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/detail_3.png) center center no-repeat;
-		background-size: 100vw 71vh;
-		margin-bottom: 14rpx;
-		
-		// 查看规则
-		&-rule {
-			display: flex;
-			align-items: center;
-			height: 34rpx;
-			padding: 44rpx 0 0 34rpx;
-			margin-bottom: 60rpx;
-			
-			&-content {
-				image {
-					width: 34rpx;
-					height: 34rpx;
-					margin-right: 14rpx;
-				}
-				
-				text {
-					font-size: 40rpx;
-					font-family: 'YouSheBiaoTiHei';
-					font-weight: 400;
-					color: #FFFFFF;
-				}
-			}
-		}
-		
-		// 奖品轮播
-		&-swiper {
-			height: 534rpx;
-			
-			.swiper-item {
-				width: 100%;
-				height: 100%;
-				// 80
-			}
-			
-			.swiper-item-side {
-				width: 100%;
-				height: 100%;
-				margin: 0;
-			}
-			
-			&-item {
-				height: 267px;
-				
-				.img {
-					position: absolute;
-	
-					width: 100%;
-					height: 100%;
-					animation: prizeBig .3s;
-				}
-				
-				.img-side {
-					width: 60%;
-					height: 60%;
-					animation: prizeMini .3s;
-					opacity: .5;
-				}
-			}
-		}
-		
-		// 奖品价格
-		&-price {
-			flex-direction: column;
-			justify-content: space-between;
-			height: 14vh;
-			margin-bottom: 30rpx;
-			
-			&-present {
-				font-size: 26rpx;
-				font-weight: bold;
-			}
-			
-			&-txt {
-				padding: 0 34rpx;
-				font-size: 30rpx;
-				font-weight: bold;
-			}
-			
-			&__ticket-price {
-				position: relative;
-				height: 66rpx;
-				
-				image {
-					width: 276rpx;
-					height: 66rpx;
-				}
-				
-				.txt {
-					position: absolute;
-					font-size: 40rpx;
-					line-height: 66rpx;
-					font-family: YouSheBiaoTiHei;
-					font-weight: 400;
-					color: #FFFFFF;
-				}
-			}
-			
-			&-past {
-				font-size: 26rpx;
-				font-weight: bold;
-				text-decoration: line-through;
-				color: #5E3909;
-			}
-		}
-		
-		// 开启盲票
-		.ticket-btn {
-			justify-content: space-between;
-			height: 10vh;
-			padding: 0 34rpx;
-			
-			&-game {
-				width: 110rpx;
-				height: 110rpx;
-			}
-			
-			&-center {
-				position: relative;
-				height: 100%;
-				
-				image {
-					height: 100%;
-					width: 55vw;
-				}
-				
-				&-txt {
-					position: absolute;
-					top: 30rpx;
-					font-size: 72rpx;
-					line-height: 72rpx;
-					font-family: YouSheBiaoTiHei;
-					font-weight: 400;
-					color: #FFFFFF;
-				}
-			}
-			
-			&-share {
-				position: relative;
-				width: 110rpx;
-				height: 110rpx;
-				
-				image {
-					position: absolute;
-					width: 110rpx;
-					height: 110rpx;
-				}
-				
-				::v-deep button {
-					position: absolute;
-					z-index: 5;
-					width: 110rpx;
-					height: 110rpx;
-					background: none;
-					border: none !important;
-				}
-				::v-deep uni-button:after {
-					border: none !important;
-				}
-				::v-deep button:after {
-					border: none !important;
-				}
-			}
-		}
-	}
-	
-	// 盲票奖品说明
-	.explain {
-		width: 100vw;
-		position: relative;
-		height: 40rpx;
-		margin-bottom: 32rpx;
-		
-		.image-left {
-			width: 18vw;
-			height: 40rpx;
-		}
-		
-		.image-right {
-			width: 18vw;
-			height: 40rpx;
-		}
-		
-		&-title {
-			font-size: 46rpx;
-			line-height: 46rpx;
-			font-family: YouSheBiaoTiHei;
-			font-weight: 400;
-			color: #5E3909;
-			padding: 0 8rpx;
-		}
-	}
-	
-	// 盲票奖品数量、概率
-	.prize-total {
-		margin-bottom: 34rpx;
-		
-		&-num {
-			font-size: 26rpx;
-			text-align: center;
-			font-weight: bold;
-			color: #744111;
-			margin-bottom: 24rpx;
-		}
-		
-		&-chance {
-			margin-bottom: 32rpx;
-			
-			&-content {
-				margin-right: 40rpx;
-				
-				image {
-					width: 56rpx;
-					height: 50rpx;
-				}
-				
-				text {
-					font-size: 28rpx;
-					font-family: YouSheBiaoTiHei;
-					font-weight: 400;
-					color: #622C06;
-				}
-			}
-			
-			&-content:last-child {
-				margin: 0;
-			}
-		}
-		
-		&-txt {
-			padding: 0 100rpx;
-			font-size: 26rpx;
-			font-weight: 500;
-			color: #956B33;
-			line-height: 42rpx;
-			text-align: center;
-		}
-	}
-	
-	// 盲票奖品列表
-	.prize-list {
-		padding: 0 34rpx 70rpx;
-		
-		&-item {
-			position: relative;
-			padding: 0 110rpx 0 84rpx;
-			justify-content: flex-start;
-			height: 264rpx;
-			background: #FFFFFF;
-			border-radius: 22rpx;
-			margin-bottom: 26rpx;
-			
-			image {
-				width: 166rpx;
-				height: 166rpx;
-				margin-right: 34rpx;
-			}
-			
-			&-info {
-				height: 166rpx;
-				flex: 1;
-				flex-direction: column;
-				align-items: flex-start;
-				justify-content: space-between;
-				
-				.title {
-					font-size: 30rpx;
-					font-weight: bold;
-					line-height: 42rpx;
-				}
-				
-				.price {
-					font-size: 36rpx;
-					font-weight: bold;
-					color: #FF4208;
-					line-height: 42rpx;
-				}
-			}
-			
-			&-grade {
-				position: absolute;
-				top: -12rpx;
-				left: 0;
-				
-				image {
-					width: 66rpx;
-					height: 60rpx;
-				}
-			}
-		}
-	}
-	
-	// 滚动固定按钮
-	.footer-fixed {
-		position: fixed;
-		bottom: var(--window-bottom);
-		left: 0;
-		right: 0; 
-		
-		&-btn {
-			height: 10vh;
-			
-			&-center {
-				position: relative;
-				height: 100%;
-				
-				image {
-					height: 100%;
-					width: 55vw;
-				}
-				
-				&-txt {
-					position: absolute;
-					top: 30rpx;
-					font-size: 72rpx;
-					line-height: 72rpx;
-					font-family: YouSheBiaoTiHei;
-					font-weight: 400;
-					color: #FFFFFF;
-				}
-			}
-		}
-	}
-	
-	// 奖品缩小动画
-	@keyframes prizeMini
-	{
-		from {
-			width: 100%;
-			height: 100%;
-		}
-		to {
-			width: 60%;
-			height: 60%;
-		}
-	}
-	
-	// 奖品放大动画
-	@keyframes prizeBig
-	{
-		from {
-			width: 60%;
-			height: 60%;
-		}
-		to {
-			width: 100%;
-			height: 100%;
-		}
-	}
-</style>
+<template>
+	<view class="ticket-wrap">
+		<!-- #ifdef MP-ALIPAY -->
+		<view v-if="pagesNum > 1">
+			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票详情"
+				leftIconSize="0"></u-navbar>
+		</view>
+		<view v-else>
+			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" title="盲票详情">
+				<view class="nav-left flex" slot="left" @click="$toIndex()">
+					<u-icon name="home" size="20" color="#333"></u-icon>
+					<view class="nav-left__code">首页</view>
+				</view>
+			</u-navbar>
+		</view>
+		<!-- #endif -->
+		<!-- #ifndef MP-ALIPAY -->
+		<view v-if="pagesNum > 1">
+			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票详情"></u-navbar>
+		</view>
+		<view v-else>
+			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" title="盲票详情">
+				<view class="nav-left flex" slot="left" @click="$toIndex()">
+					<u-icon name="home" size="20" color="#333"></u-icon>
+					<view class="nav-left__code">首页</view>
+				</view>
+			</u-navbar>
+		</view>
+		<!-- #endif -->
+
+		<!-- 奖品轮播 -->
+		<view class="prize">
+			<!-- 查看规则 -->
+			<view class="prize-rule" @click="toRule">
+				<!-- #ifndef MP-ALIPAY -->
+				<view class="prize-rule-content flex">
+					<image src="../../static/index/index_tip.png" mode="scaleToFill"></image>
+					<text>查看规则</text>
+				</view>
+				<!-- #endif -->
+			</view>
+
+			<!-- 奖品 -->
+			<swiper class="prize-swiper" previous-margin="100px" next-margin="100px" :interval="4000" :autoplay="true"
+				:circular="true" @change="changePrizeSwiper">
+				<swiper-item :class="prizeIndex == index ? 'swiper-item' : 'swiper-item-side'"
+					v-for="(item, index) in prizeList.slice(0, 10)" :key="index">
+					<view class="prize-swiper-item flex" @click="toPrizeGoods(item)">
+						<image :class="prizeIndex == index ? 'img' : 'img-side'" :src="item.picUrl" mode="aspectFit"></image>
+					</view>
+				</swiper-item>
+			</swiper>
+
+			<!-- 奖品价格 -->
+			<view class="prize-price flex">
+				<view class="prize-price-present" v-if="prizeInfo.prizeType != 'coin'">￥{{ $numberFormat(prizeInfo.value) }}
+				</view>
+				<view class="prize-price-present" v-else>{{ prizeInfo.value }}个</view>
+				<view class="prize-price-txt ells-one">{{ prizeInfo.title }}</view>
+				<view class="prize-price__ticket-price flex">
+					<image src="../../static/ticketBox/ticket_block.png" mode="scaleToFill"></image>
+					<view class="txt">￥{{ $numberFormat(info.salePrice) }}</view>
+				</view>
+				<view class="prize-price-past" v-if="info.originPrice != 0">原价：￥{{ $numberFormat(info.originPrice) }}</view>
+			</view>
+
+			<!-- 开启盲票 -->
+			<view class="ticket-btn flex">
+				<!-- <image class="ticket-btn-game" src="../../static/ticketBox/ticket_game.png" mode="scaleToFill" @click="toRollingGame"></image> -->
+				<image class="ticket-btn-game" src="" mode="scaleToFill"></image>
+				<view class="ticket-btn-center flex" @click="exchange">
+					<image src="../../static/ticketBox/ticket_btn_center.png" mode="scaleToFill"></image>
+					<view class="ticket-btn-center-txt">刮开盲票</view>
+				</view>
+				<view class="ticket-btn-share flex">
+					<!-- #ifdef MP-WEIXIN -->
+					<image src="../../static/ticketBox/ticket_share.png" mode="scaleToFill" @click="toShare"></image>
+					<button type="default" open-type="share" v-if="loginState"></button>
+					<!-- #endif -->
+				</view>
+			</view>
+		</view>
+
+		<!-- 盲票奖品说明 -->
+		<view class="explain flex">
+			<image class="image-left" src="../../static/ticketBox/ticket_explain_left.png" mode="aspectFit"></image>
+			<view class="explain-title">刮开必出以下宝贝之一</view>
+			<image class="image-right" src="../../static/ticketBox/ticket_explain_right.png" mode="aspectFit"></image>
+		</view>
+
+		<!-- 盲票奖品数量、概率 -->
+		<view class="prize-total">
+			<view class="prize-total-num">共{{ total }}款</view>
+			<!-- 中奖概率 -->
+			<view class="prize-total-chance flex">
+				<view class="prize-total-chance-content flex" v-for="(item, index) in info.ticketAwardsLabelList" :key="index">
+					<image :src="item.picUrl" mode="scaleToFill"></image>
+					<text>{{ item.hitRate }}%</text>
+				</view>
+			</view>
+			<!-- 文字说明 -->
+			<view class="prize-total-txt">因概率对小数点后三位进行四舍五入处理，故存在总值不为100%的可能。商品抽奖存在概率性，付费请谨慎!未成年人请在家长监督下使用。</view>
+		</view>
+
+		<!-- 盲票奖品列表 -->
+		<view class="prize-list">
+			<view class="prize-list-item flex" v-for="(item, index) in prizeList" :key="index" @click="toPrizeGoods(item)">
+				<image :src="item.picUrl" mode="aspectFit"></image>
+				<view class="prize-list-item-info flex">
+					<view class="title ells">{{ item.title }}</view>
+					<view class="price" v-if="item.prizeType != 'coin'">￥{{ $numberFormat(item.value) }}</view>
+					<view class="price" v-else>{{ item.value }}个</view>
+				</view>
+				<view class="prize-list-item-grade">
+					<image :src="item.awardsLabelPicUrl" />
+				</view>
+			</view>
+			<u-loadmore :line="true" v-if="prizeList.length>10" :status="status" :loading-text="'努力加载中'"
+				:nomore-text="'已经到底了'" />
+		</view>
+
+		<view class="footer-fixed" v-if="btnFixed">
+			<view class="footer-fixed-btn flex">
+				<view class="footer-fixed-btn-center flex" @click="exchange">
+					<image src="../../static/ticketBox/ticket_btn_center.png" mode="scaleToFill"></image>
+					<view class="footer-fixed-btn-center-txt">刮开盲票</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 支付弹层 -->
+		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" v-if="payShow" />
+	</view>
+</template>
+
+<script>
+	import env from '../../config/env.js'
+	import $http from '@/utils/request.js'
+	import appId from '@/config/appId.js'
+	import PayPopup from '../../components/pay-popup/pay-popup.vue'
+	export default {
+		components: {
+			PayPopup
+		},
+		data() {
+			return {
+				boxId: '',
+				picUrlArr: [],
+				info: {},
+				status: 'nomore', //上拉刷新状态
+				pageNum: 1,
+				total: 0,
+				prizeList: [],
+
+				payShow: false,
+				payInfo: {},
+				sceneArr: null,
+
+				prizeIndex: 0,
+				contnetHeight: 0,
+				btnFixed: false,
+				prizeInfo: {},
+				userInfo: {},
+				loginState: false,
+				pagesNum: '',
+			};
+		},
+		onLoad(opthios) {
+			//票赢天下跳转
+			if (opthios.scene) {
+				let sceneStr = decodeURIComponent(opthios.scene)
+				this.sceneArr = sceneStr.split('&')
+				this.boxId = this.sceneArr[0]
+				uni.setStorageSync('shareUid', this.sceneArr[1])
+				if (this.sceneArr[1] === undefined || this.sceneArr[1] === 'undefined') {
+					uni.getSystemInfo({
+						success(res) {
+							log.error(
+								`基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system },页面：/pages/ticketBox/detail.vue，来源：票赢天下小程序分享盲票，`
+							)
+						}
+					})
+				}
+				uni.setStorageSync('shareType', this.sceneArr[2])
+			}
+
+			if (opthios.boxId) {
+				this.boxId = opthios.boxId
+			}
+			if (opthios.userId) {
+				uni.setStorageSync('shareUid', opthios.userId != 'undefined' ? opthios.userId : null)
+				if (opthios.userId === undefined || opthios.userId === 'undefined') {
+					uni.getSystemInfo({
+						success(res) {
+							log.error(
+								`基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system },页面：/pages/ticketBox/detail.vue.`
+							)
+						}
+					})
+				}
+			}
+			if (opthios.type) {
+				uni.setStorageSync('shareType', opthios.type)
+			}
+
+			/**
+			 * 外部app跳转接受的参数
+			 * shareUid: 用户ID
+			 * shareType: 分享类型
+			 * */
+			if (opthios.uid) {
+				uni.setStorageSync('shareUid', opthios.uid != 'undefined' ? opthios.uid : null)
+				if (opthios.uid === undefined || opthios.uid === 'undefined') {
+					uni.getSystemInfo({
+						success(res) {
+							log.error(
+								`基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system },页面：/pages/ticketBox/detail.vue，来源：外部app，`
+							)
+						}
+					})
+				}
+				uni.setStorageSync('shareType', opthios.t)
+			}
+		},
+
+		mounted() {
+			let _this = this;
+			let info = uni.createSelectorQuery().select(".prize");
+			info.boundingClientRect(function(data) { //data - 各种参数
+				_this.contnetHeight = data.height
+			}).exec()
+		},
+
+		onPageScroll: function(e) {
+			let _this = this;
+			_this.btnFixed = _this.contnetHeight <= e.scrollTop;
+		},
+
+		onShow() {
+			this.pagesNum = getCurrentPages().length
+			this.loginState = uni.getStorageSync('token') ? true : false
+			if (this.loginState) {
+				this.getBaseInfo()
+			}
+			if (this.boxId && this.boxId != undefined) {
+				this.getDetail()
+			}
+
+		},
+
+		methods: {
+			changePrizeSwiper({ detail }) {
+				this.prizeIndex = detail.current
+				this.prizeInfo = this.prizeList[detail.current]
+			},
+
+			getDetail() {
+				$http.post('/api/v1/mp/user/mall/ticket/detail/new', {
+					boxId: this.boxId,
+					noToken: true
+				}).then(res => {
+					if (res.code == 0) {
+						this.info = {
+							...res.data,
+							picUrl: res.data.picUrl.split(',').map(item => env.filePublic + item + '?imageView2/2/w/375'),
+							ticketAwardsLabelList: res.data.ticketAwardsLabelList.map(item => {
+								return { ...item, picUrl: env.filePublic + item.picUrl }
+							})
+						}
+						this.pageNum = 1
+						this.total = 0
+						this.prizeList = []
+						this.getPrizeList()
+					}
+				}).catch(() => {})
+			},
+			getPrizeList() {
+				$http.post(`/api/v1/mp/user/ticket/prize/list/${this.boxId}?pageNum=${this.pageNum}&pageSize=10`, {}).then(
+				res => {
+					if (res.code == 0) {
+						let prizeList = res.rows
+						prizeList.forEach(item => {
+							item.picUrl = env.filePublic + item.picUrl.split(',')[0] + '?imageView2/2/w/375'
+							item.awardsLabelPicUrl = env.filePublic + item.awardsLabelPicUrl
+						})
+						this.total = res.total
+						this.prizeList = this.prizeList.concat(prizeList)
+						this.prizeInfo = this.prizeList[this.prizeIndex]
+					}
+				})
+			},
+
+			getPageNum() {
+				let pages = getCurrentPages();
+			},
+
+			close() {
+				this.payShow = false
+			},
+
+			toProcess(id) {
+				this.payShow = false
+				// uni.navigateTo({
+				// 	url: `/packagePrize/rolling/index?boxId=${ this.info.boxId }&orderId=${ id }&isTry=0`
+				// })
+				uni.navigateTo({
+					url: `/packagePrize/purchase/index?boxId=${ this.info.boxId }&orderId=${ id }&isTry=0`
+				})
+			},
+
+			exchange() {
+				let data = {
+					userCouponIds: [],
+					autoCoupon: 1,
+					boxId: this.info.boxId,
+					orderNum: 1,
+					appSource: appId
+				}
+				$http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
+					if (res.code == 0) {
+						let info = {
+							...res.data,
+							...this.info,
+							picUrl: this.info.picUrl[0],
+							couponTitle: res.data && res.data.couponList && res.data.couponList.length && res
+								.data.couponList[0].title,
+							couponId: res.data && res.data.couponList && res.data.couponList.length && res.data
+								.couponList[0].id
+						}
+						this.payInfo = info
+						this.payShow = true
+					}
+				})
+			},
+
+			toRollingGame() {
+				if (!uni.getStorageSync('token')) {
+					uni.navigateTo({
+						url: '/pages/login/index'
+					})
+					return
+				}
+				uni.navigateTo({
+					url: `/packagePrize/rolling/index?boxId=${ this.info.boxId }&isTry=1`
+				})
+			},
+
+			toShare() {
+				this.getBaseInfo()
+				// if (!uni.getStorageSync('token')) {
+				// 	uni.navigateTo({
+				// 		url: "/pages/login/index"
+				// 	})
+				// 	return
+				// }
+				// uni.navigateTo({
+				// 	url: `/packageOperate/share/index?boxId=${ this.info.boxId }`
+				// })
+			},
+
+			// 点击规则说明
+			toRule() {
+				uni.navigateTo({
+					url: '/packageOther/rule/index'
+				})
+			},
+
+			toPrizeGoods(item) {
+				if (item.prizeType == "goods") {
+					uni.navigateTo({
+						url: `/packagePrize/goods/detail?id=${ item.refId }`
+					})
+				}
+				//门店优惠券
+				if (item.prizeType == "coupon" || item.prizeType == "coupon_pkg") {
+					if (item.couponDetail) {
+						uni.setStorageSync('couponDetail', item.couponDetail);
+					}
+					uni.navigateTo({
+						url: `/packagePrize/goods/detail?id=425`
+					})
+				}
+				// 盲豆
+				if (item.prizeType == "coin") {
+					uni.navigateTo({
+						url: `/packagePrize/goods/detail?id=424`
+					})
+				}
+			},
+
+			getBaseInfo() {
+				$http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						this.userInfo = res.data
+					}
+				})
+			},
+		},
+
+		onShareAppMessage(res) {
+			return {
+				title: '一起来刮盲票吧',
+				path: `/pages/ticketBox/detail?boxId=${ this.info.boxId }&userId=${ this.userInfo.userId }&type=1`,
+				type: 2,
+			}
+		},
+		//分享朋友圈
+		onShareTimeline() {
+			return {
+				title: '一起来刮盲票吧',
+				query: `boxId=${ this.info.boxId }&userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
+
+			}
+		},
+		onReachBottom() {
+			if (this.total < this.pageNum * 10) return;
+			this.status = 'loading';
+			++this.pageNum
+			if (this.total < this.pageNum * 10) this.status = 'nomore';
+			else this.status = 'loading';
+			this.getPrizeList()
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.ticket-wrap {
+		background: #FFF3EB;
+		padding-bottom: 100rpx;
+	}
+
+	.nav-left {
+		&__code {
+			margin-left: 10rpx;
+		}
+	}
+
+	// 奖品轮播
+	.prize {
+		// height: 71vh;
+		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/detail_3.png) center center no-repeat;
+		background-size: 100vw 71vh;
+		margin-bottom: 14rpx;
+
+		// 查看规则
+		&-rule {
+			display: flex;
+			align-items: center;
+			height: 34rpx;
+			padding: 44rpx 0 0 34rpx;
+			margin-bottom: 60rpx;
+
+			&-content {
+				image {
+					width: 34rpx;
+					height: 34rpx;
+					margin-right: 14rpx;
+				}
+
+				text {
+					font-size: 40rpx;
+					font-family: 'YouSheBiaoTiHei';
+					font-weight: 400;
+					color: #FFFFFF;
+				}
+			}
+		}
+
+		// 奖品轮播
+		&-swiper {
+			height: 534rpx;
+
+			.swiper-item {
+				width: 100%;
+				height: 100%;
+				// 80
+			}
+
+			.swiper-item-side {
+				width: 100%;
+				height: 100%;
+				margin: 0;
+			}
+
+			&-item {
+				height: 267px;
+
+				.img {
+					position: absolute;
+
+					width: 100%;
+					height: 100%;
+					animation: prizeBig .3s;
+				}
+
+				.img-side {
+					width: 60%;
+					height: 60%;
+					animation: prizeMini .3s;
+					opacity: .5;
+				}
+			}
+		}
+
+		// 奖品价格
+		&-price {
+			flex-direction: column;
+			justify-content: space-between;
+			height: 14vh;
+			margin-bottom: 30rpx;
+
+			&-present {
+				font-size: 26rpx;
+				font-weight: bold;
+			}
+
+			&-txt {
+				padding: 0 34rpx;
+				font-size: 30rpx;
+				font-weight: bold;
+			}
+
+			&__ticket-price {
+				position: relative;
+				height: 66rpx;
+
+				image {
+					width: 276rpx;
+					height: 66rpx;
+				}
+
+				.txt {
+					position: absolute;
+					font-size: 40rpx;
+					line-height: 66rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #FFFFFF;
+				}
+			}
+
+			&-past {
+				font-size: 26rpx;
+				font-weight: bold;
+				text-decoration: line-through;
+				color: #5E3909;
+			}
+		}
+
+		// 开启盲票
+		.ticket-btn {
+			justify-content: space-between;
+			height: 10vh;
+			padding: 0 34rpx;
+
+			&-game {
+				width: 110rpx;
+				height: 110rpx;
+			}
+
+			&-center {
+				position: relative;
+				height: 100%;
+
+				image {
+					height: 100%;
+					width: 55vw;
+				}
+
+				&-txt {
+					position: absolute;
+					top: 30rpx;
+					font-size: 72rpx;
+					line-height: 72rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #FFFFFF;
+				}
+			}
+
+			&-share {
+				position: relative;
+				width: 110rpx;
+				height: 110rpx;
+
+				image {
+					position: absolute;
+					width: 110rpx;
+					height: 110rpx;
+				}
+
+				::v-deep button {
+					position: absolute;
+					z-index: 5;
+					width: 110rpx;
+					height: 110rpx;
+					background: none;
+					border: none !important;
+				}
+
+				::v-deep uni-button:after {
+					border: none !important;
+				}
+
+				::v-deep button:after {
+					border: none !important;
+				}
+			}
+		}
+	}
+
+	// 盲票奖品说明
+	.explain {
+		width: 100vw;
+		position: relative;
+		height: 40rpx;
+		margin-bottom: 32rpx;
+
+		.image-left {
+			width: 18vw;
+			height: 40rpx;
+		}
+
+		.image-right {
+			width: 18vw;
+			height: 40rpx;
+		}
+
+		&-title {
+			font-size: 46rpx;
+			line-height: 46rpx;
+			font-family: YouSheBiaoTiHei;
+			font-weight: 400;
+			color: #5E3909;
+			padding: 0 8rpx;
+		}
+	}
+
+	// 盲票奖品数量、概率
+	.prize-total {
+		margin-bottom: 34rpx;
+
+		&-num {
+			font-size: 26rpx;
+			text-align: center;
+			font-weight: bold;
+			color: #744111;
+			margin-bottom: 24rpx;
+		}
+
+		&-chance {
+			margin-bottom: 32rpx;
+
+			&-content {
+				margin-right: 40rpx;
+
+				image {
+					width: 56rpx;
+					height: 50rpx;
+				}
+
+				text {
+					font-size: 28rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #622C06;
+				}
+			}
+
+			&-content:last-child {
+				margin: 0;
+			}
+		}
+
+		&-txt {
+			padding: 0 100rpx;
+			font-size: 26rpx;
+			font-weight: 500;
+			color: #956B33;
+			line-height: 42rpx;
+			text-align: center;
+		}
+	}
+
+	// 盲票奖品列表
+	.prize-list {
+		padding: 0 34rpx 70rpx;
+
+		&-item {
+			position: relative;
+			padding: 0 110rpx 0 84rpx;
+			justify-content: flex-start;
+			height: 264rpx;
+			background: #FFFFFF;
+			border-radius: 22rpx;
+			margin-bottom: 26rpx;
+
+			image {
+				width: 166rpx;
+				height: 166rpx;
+				margin-right: 34rpx;
+			}
+
+			&-info {
+				height: 166rpx;
+				flex: 1;
+				flex-direction: column;
+				align-items: flex-start;
+				justify-content: space-between;
+
+				.title {
+					font-size: 30rpx;
+					font-weight: bold;
+					line-height: 42rpx;
+				}
+
+				.price {
+					font-size: 36rpx;
+					font-weight: bold;
+					color: #FF4208;
+					line-height: 42rpx;
+				}
+			}
+
+			&-grade {
+				position: absolute;
+				top: -12rpx;
+				left: 0;
+
+				image {
+					width: 66rpx;
+					height: 60rpx;
+				}
+			}
+		}
+	}
+
+	// 滚动固定按钮
+	.footer-fixed {
+		position: fixed;
+		bottom: var(--window-bottom);
+		left: 0;
+		right: 0;
+
+		&-btn {
+			height: 10vh;
+
+			&-center {
+				position: relative;
+				height: 100%;
+
+				image {
+					height: 100%;
+					width: 55vw;
+				}
+
+				&-txt {
+					position: absolute;
+					top: 30rpx;
+					font-size: 72rpx;
+					line-height: 72rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #FFFFFF;
+				}
+			}
+		}
+	}
+
+	// 奖品缩小动画
+	@keyframes prizeMini {
+		from {
+			width: 100%;
+			height: 100%;
+		}
+
+		to {
+			width: 60%;
+			height: 60%;
+		}
+	}
+
+	// 奖品放大动画
+	@keyframes prizeBig {
+		from {
+			width: 60%;
+			height: 60%;
+		}
+
+		to {
+			width: 100%;
+			height: 100%;
+		}
+	}
+</style>