mp-ui-user/src/pages/index/index.vue

<template>
	<view>
		<view class="box">
			<view class="index" :style="{ top: statusHeight + 'px' }">
				<view class="barrage">
					<!-- 背景 -->
					<image class="barrage-bg" src="../../static/index/barrage_bgTwo.png" mode="scaleToFill"></image>
					<!-- 中奖信息轮播 -->
					<swiper class="barrage-swiper" :interval="2000" :autoplay="true" :vertical="true" :circular="true">
						<swiper-item v-for="(item, index) in prizeNewsListOne" :key="index">
							<view class="barrage-swiper-item flex">
								<view class="barrage-swiper-item-content flex">
									<image :src="item.avatar" mode="scaleToFill" />
									<view class="title ells-one">{{ item.nickName }}
										{{ item.type == 1 ? '获得了' : '兑换了' }} {{ item.prizeInfo }}
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="barrage-none"></view>
				</view>

				<!-- 查看规则 -->
				<view class="rule">
					<!-- #ifdef MP-WEIXIN -->
					<view class="rule-gameimg flex">
						<image src="../../static/index/games.png" @click="toExternalGames" mode="scaleToFill"></image>
					</view>
					<!-- #endif -->
					<!-- #ifndef MP-ALIPAY -->
					<!-- <view class="rule-content flex" @click="contactService">
						<image src="../../static/index/index_tip_bgTwo.png" mode="scaleToFill"></image>
						<text>投诉建议</text>
					</view> -->
					<view class="rule-content flex" @click="toRule">
						<image src="../../static/index/index_tip.png" mode="scaleToFill"></image>
						<text>查看规则</text>
					</view>
					<!-- #endif -->
				</view>
				<!-- <view @click="toLucky">这是测试盲票开奖入口</view> -->
				<!-- <view @click="toStore">这是测试门店盲票列表入口</view> -->
				<!-- 盲票轮播 -->
				<view class="ticket">
					<view class="ticket-bgc" @click="ticketLeft()">
						<image src="../../static/index/index_anniu.png" mode="scaleToFill"></image>
					</view>
					<swiper class="ticket-swiper" :current="ticketIndex" :autoplay="false" :circular="true" :duration="200"
						@change="changeTicket">
						<swiper-item v-for="(item, index) in ticketList" :key="index">
							<view class="ticket-swiper-item flex">
								<image class="ticket-swiper-item-box" @click="toTicketBox(item)" :src="item.picUrl[0]" mode="aspectFit">
								</image>
							</view>
						</swiper-item>
					</swiper>
					<view class="ticket-left" @click="ticketRight()">
						<image src="../../static/index/index_tip_left.png" mode="scaleToFill"></image>
					</view>
					<view class="ticket-right" @click="ticketLeft()">
						<image src="../../static/index/index_tip_left.png" mode="scaleToFill"></image>
					</view>
				</view>

				<!-- 投诉建议 -->
				<view class="proposal flex">
					<view class="proposal-time flex" v-if="activityTime && activityTime > 0" @click="toActivity">
						<image src="../../static/index/index_time_top.png" mode="scaleToFill"></image>
						<view class="time">
							<u-count-down :time="activityTime" format="HH:mm:ss:SSS" autoStart millisecond>
							</u-count-down>
						</view>
					</view>
					<view v-else></view>
					<view class="proposal-progress">
						<u-line-progress :percentage="percentage" height="3" :showText="false"
							inactiveColor="rgba(255, 255, 255, .36)" activeColor="#fff" />
					</view>
				</view>

				<!-- 盲票名称轮播 -->
				<view class="ticket-title" flex>
					<swiper class="ticket-title-swiper flex" :duration="0" :current="ticketTitleIndex" previous-margin="80px"
						next-margin="80px" :autoplay="false" :circular="true" @change="changeTicketTitle">
						<swiper-item v-for="(item, index) in ticketList" :key="index">
							<view class="ticket-title-swiper-item flex" @click="clickTicketTitle(index)"
								:class="{ 'action': ticketTitleIndex == index }">
								<text class="ells-one">{{ item.title }}</text>
							</view>
						</swiper-item>
					</swiper>
				</view>

				<!-- 刮开盲票 -->
				<view class="ticket-btn flex">
					<view class="ticket-btn-left flex" @click="toRollingGame">
						<image src="../../static/index/index_duihuandating.png" mode="scaleToFill"></image>
						<view class="ticket-btn-left__title">兑换大厅</view>
					</view>
					<view class="ticket-btn-center flex" @click="payment">
						<view class="image-wrap flex">
							<image class="btn" src="../../static/index/index_btn.png" mode="scaleToFill"></image>
							<image class="shadow" src="../../static/index/index_btn_shadow.png" mode="scaleToFill">
							</image>
						</view>
						<view class="ticket-btn-center-wrap flex">
							<view class="ticket-btn-center-wrap__title">购买<br />有礼</view>
						</view>
					</view>
					<view class="ticket-btn-right flex" @click="toTicket">
						<image src="../../static/index/index_btn_right.png" mode="scaleToFill"></image>
						<view class="ticket-btn-right__title">更多商品</view>
					</view>
				</view>

				<!-- 盲票价格 -->
				<view class="ticket-price flex">
					<view class="ticket-price-amt flex">
						<view class="num">{{ $numberFormat(ticketInfo.salePrice) }}</view>
						<view class="txt">元</view>
					</view>
					<view class="ticket-price-discount flex" v-if="ticketInfo.originPrice != 0">
						<view class="num">原价￥{{ $numberFormat(ticketInfo.originPrice) }}</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 引导页面 -->
		<!-- <u-modal :show="showMp" content='“盲票”已升级为“码上快购”' width='530rpx' confirmText='立即前往' @confirm='toAnotherApplet'> -->
		</u-modal>
		<!-- tabbar组件 -->
		<custom-tab-bar :activeValue="'index'" />
		<!-- 支付弹框组件 -->
		<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 CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
	import PayPopup from '../../components/pay-popup/pay-popup.vue'
	export default {
		components: {
			CustomTabBar,
			PayPopup,
		},
		data() {
			return {
				loginState: false, // 登录状态
				ticketList: [], // 盲票列表
				prizeList: [], // 奖品列表
				prizeNewsListOne: [], // 弹幕列表
				prizeNewsListTwo: [], // 弹幕列表
				payShow: false, // 支付弹框显示
				payInfo: {}, // 支付详情
				currentIndex: 0, // 盲票选中下标

				statusHeight: 20,
				ticketIndex: 0, // 盲票选中下标
				ticketTitleIndex: 0, // 盲票标题选中下边
				list: [1, 2, 3, 4, 5],
				percentage: 0,
				checkStatus: true,
				filterActivityList: [],
				activityTime: null,
				ticketInfo: {},
				clickLoading: true,
				userInfo: '',
				showMp: false,
				pageNum: 1,
			};
		},
		onLoad(opthios) {
			this.showMp = uni.getStorageSync('anotherApplet') ? true : false

			uni.hideTabBar()
			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/index/index.vue.`
							)
						}
					})
				}
			}
			if (opthios.type) {
				uni.setStorageSync('shareType', opthios.type)
			}
			/**
			 * 票赢天下小程序分享盲票跳转接受的参数
			 * shareUid: 用户ID
			 * shareType: 分享类型
			 * */
			if (opthios.scene) {
				let sceneStr = decodeURIComponent(opthios.scene)
				this.sceneArr = sceneStr.split('&')
				uni.setStorageSync('shareUid', this.sceneArr[0])
				if (this.sceneArr[0] === undefined || this.sceneArr[0] === 'undefined') {
					uni.getSystemInfo({
						success(res) {
							log.error(
								`基础库：${ res.SDKVersion },设备：${ res.model }-${ res.system },页面：/pages/index/index.vue，来源：票赢天下小程序分享盲票，`
							)
						}
					})
				}
				uni.setStorageSync('shareType', this.sceneArr[1])
			}
			/**
			 * 外部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/index/index.vue，来源：外部app，`
							)
						}
					})
				}
				uni.setStorageSync('shareType', opthios.t)
			}
			// #ifdef MP-WEIXIN
			const res = uni.getMenuButtonBoundingClientRect()
			this.statusHeight = res.top //胶囊距离顶部
			// #endif

			// #ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: (res) => {
					this.statusHeight = res.statusBarHeight + 7
				}
			})
			// #endif

			let num = Math.round(100 / this.list.length)
			this.percentage = num


			this.getList()
		},
		onShow() {
			this.loginState = uni.getStorageSync('token') ? true : false
			if (this.loginState) {
				this.getBaseInfo()
			}
			this.getPrizeNews()
			this.getActivityList()
		},
		methods: {
			toAnotherApplet() {
				/**
				 * envVersion 类型为字符串
				 * envVersion: 'develop', //开发版
				 * envVersion: 'trial', //体验版
				 * envVersion: 'release',//正式版
				 */
				uni.navigateToMiniProgram({
					appId: 'wxffb4598e70b9f871', // appid
					path: '/pages/index/index', // 首页路径
					envVersion: "release",
					success: res => {
						// 打开成功
					},
				})
			},
			// 切换盲票
			changeTicket({
				detail
			}) {
				if (this.clickLoading) {
					this.clickLoading = false
					this.ticketIndex = detail.current
					this.ticketTitleIndex = detail.current
					this.getTicketDetail(this.ticketList[detail.current].boxId)
					this.setNum(detail.current)
					setTimeout(() => {
						this.clickLoading = true
					}, 200)
				}
			},

			// 切换盲票名称
			changeTicketTitle({
				detail
			}) {
				if (this.clickLoading) {
					this.clickLoading = false
					this.ticketIndex = detail.current
					this.ticketTitleIndex = detail.current
					this.getTicketDetail(this.ticketList[detail.current].boxId)
					this.setNum(detail.current)
					setTimeout(() => {
						this.clickLoading = true
					}, 200)
				}
			},

			// 点击名称
			clickTicketTitle(index) {
				this.ticketIndex = index
				this.ticketTitleIndex = index
				this.getTicketDetail(this.ticketList[index].boxId)
				this.setNum(index)
			},

			setNum(index) {
				let num = Math.round(100 / this.list.length)
				if (index == 0) {
					this.percentage = uni.$u.range(0, 100, num)
				} else if (index == this.list.length - 1) {
					this.percentage = uni.$u.range(0, 100, 100)
				} else {
					this.percentage = uni.$u.range(0, 100, num * (index + 1))
				}
			},

			toLucky() {
				uni.navigateTo({
					url: `/pages/lucky/index?id=9a4b315da3ef4db5ea378c05f8b0b626f87d793d66714d29dcc7f4ccf9441317`
				})
			},
			toStore() {
				uni.navigateTo({
					url: `/packageOperate/store/index?channelId=26`
				})
			},

			// 投诉建议
			contactService() {
				// #ifdef MP-WEIXIN
				if (appId == 1) {
					uni.navigateTo({
						url: `/pages/index/wxofficial`
					})
				} else {
					wx.openCustomerServiceChat({
						extInfo: {
							url: 'https://work.weixin.qq.com/kfid/kfcf9da505d4dc18c87'
						},
						corpId: 'ww8522e336cfe5045b',
					})
				}
				// #endif
			},

			// 跳转酷玩星球
			toExternalGames() {
					/**
					 * envVersion 类型为字符串
					 * envVersion: 'develop', //开发版
					 * envVersion: 'trial', //体验版
					 * envVersion: 'release',//正式版
					 */
					uni.navigateToMiniProgram({
						appId: 'wx6b4030841ccd653b', // appid
						// path: '/pages/index/index', // 首页路径
						envVersion: "release",
						success: res => {
							// 打开成功
						},
					})
			},

			// 活动
			getActivityList() {
				$http.post(`/api/v1/mp/user/marketing/recent`, {}).then(res => {
					if (res && res.data) {
						let data = res && res.data
						let timestamp = parseInt(new Date().getTime())
						this.activityTime = data.endTime - timestamp
					}
				})
			},

			// 获取盲票列表
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				let data = {
					type: 'online',
					noToken: true
				}
				$http.post(`/api/v1/mp/user/mall/ticket/goods/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
					res => {
						uni.hideLoading();
						if (res.code == 0) {
							res.rows.forEach(item => item.picUrl = item.picUrl.split(',').map(item => env.filePublic +
								item + '?imageView2/2/w/750'))
							this.ticketList = res.rows
							this.getTicketDetail(this.ticketList[0].boxId)
						}
					}).catch(() => {
					uni.hideLoading();
				})
			},

			// 获取弹幕列表
			getPrizeNews() {
				$http.post('/api/v1/mp/user/ticket/hitPrizeBarrage', {}).then(res => {
					const {
						listOne,
						listTwo
					} = res && res.data
					listOne.forEach(item => {
						item.avatar = item.avatar ? env.filePublic + item.avatar : env.filePublic +
							'70/EJ305PQR2IBE45O9AFAI'
						item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo
							.substring(0, 15) + '...' : item.prizeInfo
					})

					listTwo.forEach(item => {
						item.avatar = item.avatar ? env.filePublic + item.avatar : env.filePublic +
							'70/EJ305PQR2IBE45O9AFAI'
						item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo
							.substring(0, 15) + '...' : item.prizeInfo
					})
					this.prizeNewsListOne = listOne
					this.prizeNewsListTwo = listTwo
				})
			},

			// 获取当前盲票的详情
			getTicketDetail(id) {
				this.prizeList = []
				$http.post('/api/v1/mp/user/mall/ticket/detail', {
					boxId: id,
					noToken: true
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.ticketInfo = {
							...res.data,
							ticketAwardsLabelList: res.data.ticketAwardsLabelList.map(item => {
								return {
									...item,
									picUrl: env.filePublic + item.picUrl
								}
							})
						}
						this.payInfo = this.ticketList[this.ticketIndex]
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			// 立即开刮
			payment() {
				this.payInfo = this.ticketList[this.ticketIndex]
				if (this.payInfo) {
					let data = {
						userCouponIds: [],
						autoCoupon: 1,
						boxId: this.payInfo.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.payInfo,
								picUrl: this.payInfo.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
						}
					}).catch(() => {
						uni.$u.toast('购买失败，请重试！');
					})
				} else {
					uni.$u.toast('商品正在准备中');
				}

			},

			// 关闭支付弹框
			close() {
				this.payShow = false
			},

			changeList() {
				let data = {
					type: 'online',
					noToken: true
				}
				$http.post(`/api/v1/mp/user/mall/ticket/goods/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
					res => {
						const boxIdStr = this.ticketList.map(item => item.boxId).join()
						let boxIdStrNew = res && res.rows && res.rows.map(item => item.boxId).join()
						if (boxIdStr != boxIdStrNew) {
							this.currentIndex = 0
							this.getList()
						}
					})
			},

			// 盲票向左箭头
			ticketLeft() {
				if ((this.ticketIndex >= 0) && (this.ticketIndex < (this.ticketList.length - 1))) {
					this.ticketIndex++
				} else if (this.ticketIndex == (this.ticketList.length - 1)) {
					this.ticketIndex = 0
				}
				this.ticketTitleIndex = this.ticketIndex
				this.getTicketDetail(this.ticketList[this.ticketTitleIndex].boxId)
			},

			// 盲票向右箭头
			ticketRight() {
				if (this.ticketIndex > 0) {
					this.ticketIndex--
				} else if (this.ticketIndex == 0) {
					this.ticketIndex = this.ticketList.length - 1
				}
				this.ticketTitleIndex = this.ticketIndex
				this.getTicketDetail(this.ticketList[this.ticketTitleIndex].boxId)
			},

			toRollingGame() {
				uni.switchTab({
					url: '/pages/core/index'
				})
			},

			// 线上立即刮票成功，跳转到刮奖过程
			toProcess(id) {
				this.payShow = false
				uni.navigateTo({
					url: `/packagePrize/purchase/index?boxId=${ this.ticketInfo.boxId }&orderId=${ id }&isTry=0`
				})
			},

			// 点击盲票，跳转关联商品详情
			toTicketBox(item) {
				if (item.refType && JSON.parse(item.refType).value === 'goods') {
					uni.navigateTo({
						url: `/packagePrize/goods/index?id=${ item.refId }&boxId=${ this.ticketInfo.boxId }`
					})
				} else if (item.refType && JSON.parse(item.refType).value === 'coin') {
					uni.navigateTo({
						url: `/packagePrize/goods/index?id=424&boxId=${ this.ticketInfo.boxId }`
					})
				} else if (item.refType && JSON.parse(item.refType).value === 'coupon' || JSON.parse(item.refType)
					.value === 'coupon_pkg') {
					if (item.couponDetail) {
						uni.setStorageSync('couponDetail', item.couponDetail);
					}
					uni.navigateTo({
						url: `/packagePrize/goods/index?id=425&boxId=${ this.ticketInfo.boxId }`
					})
				}
			},

			toActivity() {
				uni.switchTab({
					url: '/pages/activity/index'
				})
			},

			// 点击所有盲票
			toTicket() {
				uni.navigateTo({
					url: '/packageGoods/ticket/index'
				})
			},

			// 点击仓库
			toPrize() {
				if (!this.loginState) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return
				}
				uni.navigateTo({
					url: '/packagePrize/prize/index'
				})
			},

			// 点击规则说明
			toRule() {
				uni.navigateTo({
					url: '/packageOther/rule/purchase'
				})
			},

			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/index/index'
			}
		},
		//分享朋友圈
		onShareTimeline() {
			return {
				title: '盲票，玩的就是有趣',
				query: `userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}

	::v-deep .u-tabbar__placeholder {
		display: none;
	}
</style>

<style lang="scss" scoped>
	.box {
		position: relative;
		width: 100%;
		height: calc(100vh - 50px);
		background: url(https://mp-public-test-1309783959.cos.ap-shanghai.myqcloud.com/v2/bkg1.png) center center no-repeat;
		background-size: 100vw calc(100vh - 50px);

		.index {
			position: absolute;
			width: 100%;
		}
	}

	// 中奖信息
	.barrage {
		position: relative;
		width: 518rpx;
		height: 70rpx;

		border-radius: 42rpx;
		margin-bottom: 16rpx;
		margin-left: 34rpx;

		&-bg {
			position: absolute;
			width: 518rpx;
			height: 70rpx;
		}

		&-swiper {
			position: absolute;
			z-index: 10;
			width: 100%;
			height: 100%;
			border-radius: 42rpx;
			overflow: hidden;

			&-item {
				width: 100%;
				height: 100%;

				&-content {
					display: flex;
					align-items: center;
					width: 510rpx;
					height: 70rpx;

					image {
						width: 58rpx;
						height: 58rpx;
						border-radius: 50%;
						margin-right: 14rpx;
						border: 1px solid #fff;
						margin-left: 8rpx;
					}

					.title {
						flex: 1;
						font-size: 26rpx;
						font-weight: 500;
						color: #fff;
					}
				}
			}
		}

		&-none {
			position: absolute;
			width: 518rpx;
			height: 70rpx;
			z-index: 20;
		}
	}

	// 查看规则
	.rule {
		display: flex;
		align-items: center;
		/* #ifndef MP-WEIXIN */
		justify-content: flex-end;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		justify-content: space-between;
		/* #endif */
		height: 34rpx;
		padding: 0 34rpx; //
		margin-bottom: 24rpx;

		&-content {
			image {
				width: 34rpx; // 210rpx
				height: 34rpx; // 50rpx
				margin-right: 14rpx; //
			}

			text {
				// position: absolute;
				// right: 20rpx;
				font-size: 40rpx;
				font-family: 'YouSheBiaoTiHei';
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		&-gameimg {
			width: 165rpx;
			height: 155rpx;

			image {
				width: 165rpx;
				height: 155rpx;
				margin-top: 64px;
				z-index: 100000;
			}
		}
	}

	// 盲票
	.ticket {
		height: 37vh;
		position: relative;

		&-bgc {
			position: absolute;
			top: 77%;
			width: 100%;
			text-align: center;

			image {
				margin: 0 auto;
				height: 156rpx;
				width: 570rpx;
			}

		}

		&-swiper {
			height: 100%;

			&-item {
				position: relative;
				height: 100%;

				&-box {
					position: absolute;
					// bottom: 100rpx;
					bottom: 20%;
					width: 380rpx;
					height: 380rpx;
					animation: movePrize 2s linear infinite;
				}
			}
		}

		&-left {
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: 45%;
			left: 0;
			display: table-cell;
			vertical-align: middle;

			image {
				display: block;
				margin: 25rpx auto;
				width: 45rpx;
				height: 40rpx;
			}
		}

		&-right {
			width: 100rpx;
			height: 100rpx;
			position: absolute;
			top: 45%;
			right: 0;
			display: table-cell;
			vertical-align: middle;

			image {
				display: block;
				margin: 25rpx auto;
				width: 45rpx;
				height: 40rpx;
				transform: rotate(180deg);
			}
		}
	}

	// 投诉建议
	.proposal {
		position: relative;
		height: 66rpx;
		margin-bottom: 30rpx;

		&-time {
			position: absolute;
			left: 30rpx;
			bottom: 0;
			flex-direction: column;
			align-items: flex-start;

			image {
				width: 140rpx;
				height: 78rpx;
				margin-bottom: 12rpx;
				animation: scaleTime 3s linear infinite;
			}

			.time {
				animation: moveTime 0.5s linear infinite;

				::v-deep .u-count-down__text {
					line-height: 30rpx;
					font-size: 30rpx;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}

		&-progress {
			position: absolute;
			bottom: 0;
			width: 140rpx;
		}

		&-tip {
			display: flex;
			align-items: center;
			position: absolute;
			right: 0;
			bottom: 0;
			width: 212rpx;
			height: 66rpx;

			image {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 212rpx;
				height: 66rpx;
			}

			text {
				position: absolute;
				right: 16rpx;
				font-size: 40rpx;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	// 中奖概率
	.chance {
		justify-content: flex-start;
		height: 44rpx;
		margin: 0 34rpx 26rpx;
		background-color: rgba(000, 000, 000, .36);
		border-radius: 22rpx;
		color: #FFFFFF;
		font-family: YouSheBiaoTiHei;
		font-size: 14px;

		&-title {
			margin-left: 8rpx;
		}

		&-hitRate {
			flex: 1;
			justify-content: space-evenly;

			&-content {

				image {
					width: 56rpx;
					height: 50rpx;
				}
			}
		}
	}

	// 盲票名称轮播
	.ticket-title {
		height: 66rpx;
		padding: 0 34rpx;
		margin: 30rpx 0;
		overflow: hidden;
		// margin: 0 34rpx;

		&-swiper {
			width: calc(100vw - 34px);
			height: 100%;

			&-item {
				height: 100%;
				transform: skew(20deg);
				background: rgba(255, 169, 0, 0.16);

				margin: 0 17rpx;
				color: #fff;
				font-size: 34rpx;

				text {
					// padding: 0 20rpx;
					transform: skew(-20deg);
				}
			}

			.action {
				background: #FFAE00;
				box-shadow: 0px 3px 3px 0px rgba(220, 145, 107, 0.57);
			}
		}
	}

	// 刮开盲票
	.ticket-btn {
		justify-content: space-between;
		height: 20vh;
		padding: 0 30rpx;

		&-left {
			flex-direction: column;

			image {
				width: 142rpx;
				height: 142rpx;
				margin-bottom: 16rpx;
			}

			&__title {
				line-height: 30rpx;
				font-size: 30rpx;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #666;
			}
		}

		&-center {
			position: relative;
			flex-direction: column;
			height: 100%;

			.image-wrap {
				position: absolute;
				width: 310rpx;
				height: 90%;
				border-radius: 50%;
				overflow: hidden;
				box-shadow: 2px 2px 10px rgba(255, 189, 24, .8), -2px -2px 10px rgba(255, 189, 24, .8), 2px -2px 10px rgba(255, 189, 24, .8), -2px 2px 10px rgba(255, 189, 24, .8);

				.btn {
					width: 310rpx;
					height: 100%;
				}

				.shadow {
					position: absolute;
					width: 310rpx;
					height: 130%;
					left: 0;
					animation: shadowMove 1.5s linear infinite;
				}
			}

			&-wrap {
				width: 300rpx;
				position: absolute;
				animation: scaleBtn 1.5s linear infinite;

				&__title {
					width: 300rpx;
					text-align: center;
					font-size: 84rpx;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 72rpx;
					animation: shadowBtn 1.5s linear infinite;
				}
			}
		}

		&-right {
			flex-direction: column;

			image {
				width: 142rpx;
				height: 142rpx;
				margin-bottom: 16rpx;
			}

			&__title {
				line-height: 30rpx;
				font-size: 30rpx;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #666;
			}
		}
	}

	// 盲票价格
	.ticket-price {
		height: 44rpx;

		&-checkbox {
			width: 44rpx;
			height: 44rpx;
			background-color: #fff;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		&-amt {
			height: 44rpx;
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
			align-items: flex-end;
			color: #FE9E48;
			margin-right: 20rpx;

			.num {
				font-size: 56rpx;
				line-height: 40rpx;
			}

			.txt {
				line-height: 36rpx;
				font-size: 40rpx;
			}
		}

		&-discount {
			height: 44rpx;
			align-items: flex-end;

			.num {
				line-height: 26rpx;
				font-size: 26rpx;
				text-decoration: line-through;
				font-style: italic;
				color: #FFAE00;
			}
		}
	}

	// 奖品移动动画
	@keyframes movePrize {
		0% {
			transform: translate(0, 10px)
		}

		25% {
			transform: translate(0, 5px)
		}

		50% {
			transform: translate(0, 0px)
		}

		75% {
			transform: translate(0, 5px)
		}

		100% {
			transform: translate(0, 10px)
		}
	}

	// 倒计时移动动画
	@keyframes moveTime {
		0% {
			transform: translate(2px, 0)
		}

		25% {
			transform: translate(0, 0)
		}

		50% {
			transform: translate(1px, 0)
		}

		75% {
			transform: translate(0, 0)
		}

		100% {
			transform: translate(2px, 0)
		}
	}

	// 放大缩小动画
	@keyframes scaleTime {
		0% {
			transform: scale(1.05)
		}

		25% {
			transform: scale(1.02)
		}

		50% {
			transform: scale(0.9)
		}

		75% {
			transform: scale(1.02)
		}

		100% {
			transform: scale(1.05)
		}
	}

	// 刮开刮票呼吸动画
	@keyframes scaleBtn {
		0% {
			transform: scale(1.04)
		}

		25% {
			transform: scale(1.02)
		}

		50% {
			transform: scale(1)
		}

		75% {
			transform: scale(1.02)
		}

		100% {
			transform: scale(1.04)
		}
	}

	// 刮开刮票阴影动画
	@keyframes shadowBtn {
		0% {
			text-shadow: 2px -2px 3px #fff;
		}

		25% {
			text-shadow: none;
		}

		50% {
			text-shadow: none;
		}

		75% {
			text-shadow: none;
		}

		100% {
			text-shadow: 2px -2px 3px #fff;
		}
	}

	// 刮开盲票光影移动动画
	@keyframes shadowMove {
		0% {
			left: -100%;
		}

		100% {
			left: 110%;
		}
	}
</style>