推广员列表搜索、首页格式化

src/packageGoods/promoters/index.vue

@@ -8,7 +8,9 @@
 		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="选择盲票天使"></u-navbar>
 		<!-- #endif -->
 
-		<view class="coupon-title">搜索栏</view>
+		<view class="coupon-title">
+			<u-search placeholder="请输入名字或工号" v-model="searchValue" @blur="pageList()" :showAction="false"></u-search>
+		</view>
 		<view class="coupon-list">
 			<u-radio-group v-model="radiovalue1" placement="column" @change="changeChechk()">
 				<view class="flex coupon-list-item" v-for="(item,index) in list" :key="index">
@@ -47,7 +49,8 @@
 				radiovalue1: '', //选中项的下标
 				channelId: '', //选中项的id
 				id: '', //门店的channelId
-				status: 'nomore', //上拉刷新状态
+				status: 'nomore', //上拉刷新状态
+				searchValue: '', //搜索
 			};
 		},
 		onShow() {
@@ -63,14 +66,16 @@
 		},
 		methods: {
 			pageList() {
-				this.list = []
+				this.list = []
+				this.pageNum = 1
 				this.getList()
 			},
 
 			getList() {
 				let _this = this
 				$http.post(`/api/v1/mp/channel/promoter/list?pageNum=${_this.pageNum}&pageSize=20`, {
-					channelId: this.id,
+					channelId: this.id,
+					searchValue: this.searchValue,
 				}).then(
 					res => {
 						if (res.code == 0) {

src/pages/index/index.vue

@@ -1,1204 +1,1207 @@
-<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">
-					<!-- #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 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" @click="toTicketBox(item)">
-								<image class="ticket-swiper-item-box" :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))
-				}
-			},
-
-			// 投诉建议
-			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
-			},
-
-			// 活动
-			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/detail?id=424`
-          })
-        }else if(item.refType && JSON.parse(item.refType).value === 'coupon' || JSON.parse(item.refType).value === 'coupon_pkg') {
-          uni.navigateTo({
-            url: `/packagePrize/goods/detail?id=425`
-          })
-        }
-
-			},
-
-			// 点击奖品，跳转到奖品详情
-			toPrizeGoods(item) {
-				if (item.prizeType == "goods") {
-					uni.navigateTo({
-						url: `/packagePrize/goods/detail?id=${ item.refId }`
-					})
-				}
-				//门店优惠券
-				if (item.prizeType == "coupon") {
-					// 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`
-					})
-				}
-			},
-
-			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-1307117429.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;
-		justify-content: flex-end;
-		height: 34rpx;
-		padding-right: 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;
-			}
-		}
-	}
-
-	// 盲票
-	.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%;
-		}
-	}
+<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">
+					<!-- #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 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" @click="toTicketBox(item)">
+								<image class="ticket-swiper-item-box" :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))
+				}
+			},
+
+			// 投诉建议
+			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
+			},
+
+			// 活动
+			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/detail?id=424`
+					})
+				} else if (item.refType && JSON.parse(item.refType).value === 'coupon' || JSON.parse(item.refType)
+					.value === 'coupon_pkg') {
+					uni.navigateTo({
+						url: `/packagePrize/goods/detail?id=425`
+					})
+				}
+
+			},
+
+			// 点击奖品，跳转到奖品详情
+			toPrizeGoods(item) {
+				if (item.prizeType == "goods") {
+					uni.navigateTo({
+						url: `/packagePrize/goods/detail?id=${ item.refId }`
+					})
+				}
+				//门店优惠券
+				if (item.prizeType == "coupon") {
+					// 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`
+					})
+				}
+			},
+
+			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-1307117429.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;
+		justify-content: flex-end;
+		height: 34rpx;
+		padding-right: 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;
+			}
+		}
+	}
+
+	// 盲票
+	.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>