mp-ui-user/pages/ticketBox/detail.vue

<template>
	<view class="ticket-wrap">
		<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>
		<!-- 奖品轮播 -->
		<view class="prize">
			<!-- 查看规则 -->
			<view class="prize-rule" @click="toRule">
				<view class="prize-rule-content flex">
					<image src="../../static/index/index_tip.png" mode=""></image>
					<text>查看规则</text>
				</view>
			</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, 11)" :key="index">
					<view class="prize-swiper-item flex">
						<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>
				<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>
				<image class="ticket-btn-share" src="../../static/ticketBox/ticket_share.png" mode="scaleToFill"></image>
			</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">共{{ prizeList.length }}款</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>
		</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" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import PayPopup from '../../components/pay-popup/pay-popup.vue'
	export default {
		components: {
			PayPopup
		},
		data() {
			return {
				boxId: '',
				picUrlArr: [],
				info: {},
				prizeList: [],

				payShow: false,
				payInfo: {},
				pagesNum: null,
				sceneArr: null,
				
				prizeIndex: 0,
				contnetHeight: 0,
				btnFixed: false,
				prizeInfo: {}
			};
		},

		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])
				uni.setStorageSync('shareType', this.sceneArr[2])
			}

			if (opthios.boxId) {
				this.boxId = opthios.boxId
			}

			if (opthios.userId) {
				uni.setStorageSync('shareUid', opthios.userId)
			}

			if (opthios.type) {
				uni.setStorageSync('shareType', opthios.type)
			}
		},
		
		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
			if (this.boxId) {
				this.getDetail()
			}
		},

		methods: {
			changePrizeSwiper({ detail }) {
				this.prizeIndex = detail.current
				this.prizeInfo = this.prizeList[detail.current]
			},
			
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/mall/ticket/detail', {
					boxId: this.boxId,
					noToken: true
				}).then(res => {
					uni.hideLoading();
					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 }
							})
						}
						let prizeList = res.data.prizeList
						prizeList.forEach(item => {
							item.picUrl = env.filePublic + item.picUrl.split(',')[0] + '?imageView2/2/w/375'
							item.awardsLabelPicUrl = env.filePublic + item.awardsLabelPicUrl
						})
						this.prizeList = prizeList
						this.prizeInfo = this.prizeList[this.prizeIndex]
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			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`
				})
			},

			exchange() {
				let data = {
					userCouponIds: [],
					autoCoupon: 1,
					boxId: this.info.boxId,
					orderNum: 1
				}
				$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() {
				uni.navigateTo({
					url: `/packagePrize/rolling/index?boxId=${ this.info.boxId }&isTry=1`
				})
			},

			toShare() {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return
				}
				uni.navigateTo({
					url: `/packageOperate/share/index?boxId=${ this.info.boxId }`
				})
			},

			toIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			
			// 点击规则说明
			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`
					})
				}
			}
		}
	}
</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: 33vh;
			
			.swiper-item {
				width: 60vw;
				height: 80%;
			}
			
			.swiper-item-side {
				width: 60%;
				height: 60%;
				margin: 0;
			}
			
			&-item {
				height: 100%;
				
				.img {
					position: absolute;
	
					width: 100%;
					height: 80%;
					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 {
				width: 110rpx;
				height: 110rpx;
			}
		}
	}
	
	// 盲票奖品说明
	.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;
		
		&-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: 80%;
		}
		to {
			width: 50%;
			height: 60%;
		}
	}
	
	// 奖品放大动画
	@keyframes prizeBig
	{
		from {
			width: 50%;
			height: 60%;
		}
		to {
			width: 100%;
			height: 80%;
		}
	}
</style>