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

<template>
	<view>
		<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">
				<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" :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>
		
		<!-- 开启盲票 -->
		<view class="ticket-btn">
			
		</view>
		
		<!-- 盲票奖品说明 -->
		<view class="explain">
			
		</view>
		
		<!-- 盲票奖品数量、概率 -->
		<view class="prize-total">
			
		</view>
		
		<!-- 盲票奖品列表 -->
		<view class="prize-list">
			
		</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
			};
		},

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

		onShow() {
			this.pagesNum = getCurrentPages().length
			if (this.boxId) {
				this.getDetail()
			}
		},

		methods: {
			changePrizeSwiper({ detail }) {
				console.log(detail);
				this.prizeIndex = 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
						let picUrlArr = res.data.picUrl.split(',')
						picUrlArr.forEach(item => {
							this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
						})
						let prizeList = res.data.prizeList
						prizeList.forEach(item => {
							let picUrlArr = item.picUrl.split(',')
							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
						})
						this.prizeList = prizeList
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			getPageNum() {
				let pages = getCurrentPages();
			},

			close() {
				this.payShow = false
			},

			toProcess(id) {
				this.payShow = false
				uni.navigateTo({
					url: `/packageOperate/process/index?id=${ id }`
				})
			},

			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: env.filePublic + res.data.picUrl,
							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
					}
				})
			},

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

			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.couponType == "1") {
					// 	uni.navigateTo({
					// 		url: `/packagePrize/goods/detail?id=426`
					// 	})
					// }
					// if (item.couponType == "2") {
					// 	uni.navigateTo({
					// 		url: `/packagePrize/goods/detail?id=425`
					// 	})
					// }
					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>
	.nav-left {
		&__code {
			margin-left: 10rpx;
		}
	}
	
	// 奖品轮播
	.prize {
		height: 63vh;
		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/detail_2.png) center center no-repeat;
		background-size: 100vw 63vh;
		
		// 查看规则
		&-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 {
			border: 1px solid #fff;
			height: 33vh;
			
			.swiper-item {
				width: 60vw;
				height: 80%;
			}
			
			.swiper-item-side {
				width: 60%;
				height: 60%;
			}
			
			&-item {
				height: 100%;
				
				.img {
					position: absolute;
					border: 1px solid #fff;
					width: 60vw;
					height: 80%;
					animation: prizeBig .3s;
				}
				
				.img-side {
					border: 1px solid #fff;
					width: 60%;
					height: 60%;
					animation: prizeMini .3s;
					opacity: .5;
				}
			}
		}
	}
	
	// 开启盲票
	.ticket-btn {
		height: 14vh;
		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/detail_1.png) center center no-repeat;
		background-size: 100vw 14vh;
	}
	
	// 盲票奖品说明
	.explain {
		
	}
	
	// 盲票奖品数量、概率
	.prize-total {
		
	}
	
	// 盲票奖品列表
	.prize-list {
		
	}
	
	// 奖品缩小动画
	@keyframes prizeMini
	{
		from {
			width: 60vw;
			height: 80%;
		}
		to {
			width: 50%;
			height: 60%;
		}
	}
	
	// 奖品放大动画
	@keyframes prizeBig
	{
		from {
			width: 50%;
			height: 60%;
		}
		to {
			width: 60vw;
			height: 80%;
		}
	}
</style>