首页页面重做

src/App.vue

@@ -21,7 +21,7 @@
 				uni.setStorageSync('code', parameter.id)
 			}
 			this.updateManager()
-			this.anotherApplet()
+			// this.anotherApplet() //打包盲票小程序时候解开
 		},
 		methods: {
 			updateManager() {

src/packageOther/about/index.vue

@@ -11,7 +11,7 @@
 			<view class="flex about-logo">
 				<image src="../../static/public/logo.png" mode="scaleToFill"></image>
 				<!-- #ifndef MP-ALIPAY -->
-				<view class="edition">v 2.1.10</view>
+				<view class="edition">v 2.1.12</view>
 				<!-- #endif -->
 				<!-- #ifdef MP-ALIPAY -->
 				<view class="edition">v 2.1.25</view>

src/pages/core/index.vue

@@ -4,7 +4,8 @@
 		<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
 			<view class="u-nav-slot" slot="left">
 				<view class="u-nav-slot__input flex">
-					<u-input v-model="goodsTitle" @confirm="toGoodsList()" confirmType="search" placeholder="搜索商品" border="none" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" />
+					<u-input v-model="goodsTitle" @confirm="toGoodsList()" confirmType="search" placeholder="搜索商品"
+						border="none" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" />
 					<!-- <view class="u-nav-slot__input__btn" @click="toGoodsList()">搜索</view> -->
 				</view>
 			</view>
@@ -51,7 +52,8 @@
 					</view>
 					<view class="fixed-top-screen-content__coin" v-if="screenShow">
 						<view class="fixed-top-screen-content__coin__list">
-							<view class="item flex" :class="{ 'action': coinActionIndex == index }" v-for="(item, index) in coinList" :key="index" @click="selectCoin(item, index)">
+							<view class="item flex" :class="{ 'action': coinActionIndex == index }"
+								v-for="(item, index) in coinList" :key="index" @click="selectCoin(item, index)">
 								<text v-if="item.min">{{ item.min }}</text>
 								<text v-if="item.max">-{{ item.max }}</text>
 								<text>{{ item.desc }}</text>
@@ -62,31 +64,34 @@
 			</view>
 		</view>
 		<view class="core-none"></view>
-		
+
 		<!-- 轮播 -->
 		<view class="core-swiper" v-if="swiperList.length">
-			<swiper class="core-swiper-centent" circular :indicator-dots="true" :autoplay="true" :interval="3000" indicator-active-color="#fff">
+			<swiper class="core-swiper-centent" circular :indicator-dots="true" :autoplay="true" :interval="3000"
+				indicator-active-color="#fff">
 				<swiper-item class="swiper-item" v-for="(item, index) in swiperList" :key="index">
 					<image :src="item.picUrl" mode="scaleToFill" @click="toPage(item)"></image>
 				</swiper-item>
 			</swiper>
 		</view>
-		
+
 		<!-- 二级分类 -->
 		<view class="core-category">
 			<swiper class="core-category-swiper" :autoplay="false">
-				<swiper-item class="swiper-item" v-for="(item, index) in classifyIndex == 0 ? classifyListFilter : classifyList[classifyIndex].list" :key="index">
+				<swiper-item class="swiper-item"
+					v-for="(item, index) in classifyIndex == 0 ? classifyListFilter : classifyList[classifyIndex].list"
+					:key="index">
 					<view class="swiper-item-wrap">
 						<view class="swiper-item-wrap__content" v-for="(items, indexs) in item" :key="indexs">
 							<image :src="items.picUrl" mode="aspectFit" @click="toCategoryGoods(index, indexs)"></image>
 							<view class="name">{{ items.name }}</view>
 						</view>
 					</view>
-					
+
 				</swiper-item>
 			</swiper>
 		</view>
-		
+
 		<!-- 标签商品 -->
 		<view class="tag-goods" v-for="(item, index) in exclusiveSingle" :key="index">
 			<image class="tag-goods-imgBg" src="../../static/core/core_bg.png" mode="scaleToFill"></image>
@@ -102,9 +107,10 @@
 						<image src="../../static/core/core_right.png" mode="scaleToFill"></image>
 					</view>
 				</view>
-				
+
 				<view class="tag-goods-content-list">
-					<view class="tag-goods-content-list-item flex" v-for="(items, indexs) in item.data" :key="indexs" @click="toGoodsDetail(items)">
+					<view class="tag-goods-content-list-item flex" v-for="(items, indexs) in item.data" :key="indexs"
+						@click="toGoodsDetail(items)">
 						<view class="image flex">
 							<image :src="items.picUrl" mode="aspectFit"></image>
 						</view>
@@ -113,11 +119,12 @@
 				</view>
 			</view>
 		</view>
-		
+
 		<!-- 商品列表 -->
 		<view class="core-goods">
 			<view class="core-goods-list flex">
-				<view class="core-goods-list-item flex" v-for="(item, index) in list" :key="index" @click="toGoodsDetail(item)">
+				<view class="core-goods-list-item flex" v-for="(item, index) in list" :key="index"
+					@click="toGoodsDetail(item)">
 					<view class="image-wrap flex">
 						<image :src="item.picUrl" mode="aspectFit"></image>
 					</view>
@@ -143,13 +150,16 @@
 			</view>
 			<view class="flex empty" v-if="!list.length">
 				<view class="center">
-					<image class="center-img" src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_3.png" mode="scaleToFill"></image>
+					<image class="center-img"
+						src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_3.png"
+						mode="scaleToFill"></image>
 					<view class="center-font">还没有商品</view>
 				</view>
 			</view>
-			<u-loadmore :line="true" v-if="list.length" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到底了'" />
+			<u-loadmore :line="true" v-if="list.length" :status="status" :loading-text="'努力加载中'"
+				:nomore-text="'已经到底了'" />
 		</view>
-		
+
 		<custom-tab-bar :activeValue="'core'" />
 	</view>
 </template>
@@ -165,7 +175,7 @@
 		},
 		data() {
 			return {
-				status: 'nomore',//上拉刷新状态
+				status: 'nomore', //上拉刷新状态
 				pageNum: 1,
 				total: 0,
 				list: [],
@@ -183,14 +193,13 @@
 				priceStep: 0,
 				screenShow: false,
 				initData: {},
-				coinNum:{
+				coinNum: {
 					startPrice: null,
 					endPrice: null
 				},
 				coinActionIndex: 0,
 				coinActionInfo: {},
-				coinList:[
-					{
+				coinList: [{
 						min: null,
 						max: null,
 						desc: '全部'
@@ -232,7 +241,7 @@
 		},
 		onLoad(opthios) {
 			if (opthios.userId) {
-				uni.setStorageSync('shareUid', opthios.userId != 'undefined'?opthios.userId:null)
+				uni.setStorageSync('shareUid', opthios.userId != 'undefined' ? opthios.userId : null)
 				if (opthios.userId === undefined || opthios.userId === 'undefined') {
 					uni.getSystemInfo({
 						success(res) {
@@ -242,7 +251,7 @@
 						}
 					})
 				}
-				
+
 			}
 			if (opthios.type) {
 				uni.setStorageSync('shareType', opthios.type)
@@ -269,55 +278,59 @@
 				this.list = []
 				this.getList()
 			},
-			
+
 			// 获取分类
 			getClassify() {
 				$http.post('/api/v1/mp/user/exchange/category/listTree', {}).then(res => {
-					if(res.code == 0){
+					if (res.code == 0) {
 						let interval = 10
 						this.classifyList = res && res.rows
 						this.classifyList.forEach(item => {
-							item.picUrl = env.filePublic + item.picUrl.split(',')[0] + '?imageView2/2/w/340'
+							item.picUrl = env.filePublic + item.picUrl.split(',')[0] +
+								'?imageView2/2/w/340'
 							item.goodsCategoryList.forEach(ele => {
-								ele.picUrl = env.filePublic + ele.picUrl.split(',')[0] + '?imageView2/2/w/340'
+								ele.picUrl = env.filePublic + ele.picUrl.split(',')[0] +
+									'?imageView2/2/w/340'
 							})
 							item.list = []
-							if(item.goodsCategoryList.length > interval) {
+							if (item.goodsCategoryList.length > interval) {
 								let num = Math.ceil(item.goodsCategoryList.length / interval)
 								let arr = []
-								
+
 								let a = 0
 								let stop = interval
-								for(let i = 1; i <= num; i++) {
+								for (let i = 1; i <= num; i++) {
 									arr = item.goodsCategoryList.slice(a, stop)
 									a = i * interval
 									stop = stop + interval
-									
+
 								}
 							} else {
 								item.list.push(item.goodsCategoryList)
 							}
 						})
-						if(this.classifyList.length > interval) {
+						if (this.classifyList.length > interval) {
 							let num = Math.ceil(this.classifyList.length / interval)
 							let arr = []
-							
+
 							let a = 0
 							let stop = interval
-							for(let i = 1; i <= num; i++) {
+							for (let i = 1; i <= num; i++) {
 								arr = this.classifyList.slice(a, stop)
 								a = i * interval
 								stop = stop + interval
 								this.classifyListFilter.push(arr)
 							}
 						} else {
-							this.classifyListFilter =[ [ ...this.classifyList ] ]
+							this.classifyListFilter = [
+								[...this.classifyList]
+							]
 						}
 						this.classifyList.unshift({ name: '全部', categoryId: '' })
 					}
 				})
 			},
-			
+
 			//轮播图
 			getSwiper() {
 				$http.post(`/api/v1/mp/user/exchange/banner/list`, {
@@ -328,7 +341,7 @@
 					this.swiperList = res.data
 				})
 			},
-			
+
 			// 标签商品
 			async getExclusive() {
 				let resData = await $http.post(`/api/v1/mp/user/exchange/activity/list`, {
@@ -336,7 +349,7 @@
 				})
 				let goodsList = []
 				for (let item of resData.data) {
-			
+
 					let resDatas = await $http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=1&pageSize=10`, {
 						noToken: true,
 						tagIds: item.tagId
@@ -349,12 +362,13 @@
 				}
 				goodsList.forEach(item => {
 					item.data.forEach(items => {
-						items.picUrl = env.filePublic + items.picUrl.split(',')[0] + '?imageView2/2/w/340'
+						items.picUrl = env.filePublic + items.picUrl.split(',')[0] +
+							'?imageView2/2/w/340'
 					})
 				})
 				this.exclusiveSingle = goodsList
 			},
-			
+
 			// 商品列表
 			getList() {
 				uni.showLoading({
@@ -366,7 +380,7 @@
 					...this.coinNum,
 					noToken: true
 				}
-				$http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20`,data).then(
+				$http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20`, data).then(
 					res => {
 						uni.hideLoading();
 						if (res.code == 0) {
@@ -374,7 +388,7 @@
 								let picUrlArr = item.picUrl.split(',')
 								item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/340'
 							})
-			
+
 							this.total = res.total
 							this.list = this.list.concat(res.rows)
 						}
@@ -382,7 +396,7 @@
 					uni.hideLoading();
 				})
 			},
-			
+
 			getBean() {
 				uni.showLoading({
 					title: '加载中'
@@ -396,7 +410,7 @@
 					uni.hideLoading();
 				})
 			},
-			
+
 			// 切换分类
 			changeClassify(e) {
 				this.categoryId = e.categoryId
@@ -412,20 +426,20 @@
 				this.coinActionInfo = {}
 				this.pageList()
 			},
-			
+
 			// 盲豆筛选切换
 			changeScreen(num) {
 				this.screenIndex = num
-				if(num == 1) {
-					if(this.priceStep == 0) {
-						this.priceStep ++
+				if (num == 1) {
+					if (this.priceStep == 0) {
+						this.priceStep++
 						this.priceShow = true
 						this.priceSort = 1
 					} else if (this.priceStep == 1) {
-						this.priceStep ++
+						this.priceStep++
 						this.priceShow = false
 						this.priceSort = 2
-					} else if(this.priceStep == 2) {
+					} else if (this.priceStep == 2) {
 						this.priceStep = 0
 						this.priceShow = false
 						this.priceSort = null
@@ -439,7 +453,7 @@
 					this.priceSort = null
 				}
 			},
-			
+
 			selectCoin(item, index) {
 				this.coinActionIndex = index
 				this.coinActionInfo = item
@@ -468,21 +482,21 @@
 					url: `/packageGoods/goods/detail?id=${ item.goodsId }`
 				})
 			},
-			
+
 			// 商品列表
 			toGoodsList() {
 				uni.navigateTo({
 					url: `/packageGoods/goods/list?title=${ this.goodsTitle }`
 				})
 			},
-			
+
 			// 商品标签
 			toTagGoods(item) {
 				uni.navigateTo({
 					url: `/packageGoods/goods/list?name=${ item.name }&tagIds=${ item.tagId ? item.tagId : '' }`
 				})
 			},
-			
+
 			// 商品分类
 			toCategoryGoods(index, indexs) {
 				let list = this.classifyIndex == 0 ? this.classifyListFilter : this.classifyList[this.classifyIndex].list
@@ -502,38 +516,24 @@
 		},
 		onReachBottom() {
 			// 判断是否有数据
-			// if (this.total > this.pageNum * 20) {
-			// 	setTimeout(() => {
-			// 		++this.pageNum
-			// 		this.getList()
-			// 	}, 500)
-			// } else {
-			// 	uni.$u.toast('已经到底了')
-			// }
-			
-			if(this.total < this.pageNum * 20) return ;
+			if (this.total < this.pageNum * 20) return;
 			this.status = 'loading';
-			// setTimeout(() => {
 			++this.pageNum
-			if(this.total < this.pageNum * 20) this.status = 'nomore';
-				else this.status = 'loading';
+			if (this.total < this.pageNum * 20) this.status = 'nomore';
+			else this.status = 'loading';
 			this.getList()
-			// }, 2000)
 		},
 		//分享好友
 		onShareAppMessage(res) {
 			return {
 				title: '盲票，玩的就是有趣',
 				path: '/pages/index/index',
-				// imageUrl:'../../static/icon/lucky_bg.png',
 			}
 		},
 		//分享朋友圈
 		onShareTimeline() {
 			return {
 				title: '盲票，玩的就是有趣',
-				// query: { userId: this.userInfo.userId,
-				// 		type: 1, }
 				query: `userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
 			}
 		}
@@ -543,18 +543,18 @@
 <style lang="scss" scoped>
 	.core {
 		background-color: #fff;
-		
+
 		&-none {
 			height: 120rpx;
 		}
 	}
-	
+
 	// 搜索
 	.u-nav-slot {
 		text {
 			font-size: 32rpx;
 		}
-		
+
 		&__input {
 			position: relative;
 			height: 70rpx;
@@ -563,7 +563,7 @@
 			background: #F4F5F6;
 			border-radius: 35rpx;
 			padding-right: 30rpx;
-			
+
 			&__btn {
 				z-index: 200;
 				width: 140rpx;
@@ -578,19 +578,19 @@
 			}
 		}
 	}
-	
+
 	// 固定搜索、分类
 	.fixed-top {
 		position: fixed;
 		z-index: 100;
 		width: 100%;
 		background-color: #fff;
-		
+
 		// 搜索
 		&-search {
 			justify-content: space-between;
 			padding: 14rpx 30rpx 34rpx;
-			
+
 			&__input {
 				position: relative;
 				flex: 1;
@@ -598,7 +598,7 @@
 				padding-left: 46rpx;
 				background: #F4F5F6;
 				border-radius: 20rpx;
-				
+
 				&__btn {
 					position: absolute;
 					right: 0;
@@ -613,23 +613,23 @@
 					border-radius: 18rpx;
 				}
 			}
-			
+
 			image {
 				width: 52rpx;
 				height: 52rpx;
 				margin-left: 50rpx;
 			}
 		}
-		
+
 		// 分类
 		&-classify {
 			padding-bottom: 20rpx;
 		}
-		
+
 		// 盲豆筛选
 		&-screen {
 			height: 64rpx;
-			
+
 			&-content {
 				position: relative;
 				justify-content: space-between;
@@ -637,22 +637,22 @@
 				color: #fff;
 				height: 100%;
 				background: #F9822C;
-				
+
 				&__item {
 					.title {
 						margin-right: 14rpx;
 					}
-					
+
 					.select {
 						flex-direction: column;
-						
+
 						image {
 							width: 18rpx;
 							height: 26rpx;
 						}
 					}
 				}
-				
+
 				&__coin {
 					position: absolute;
 					right: 0;
@@ -661,17 +661,17 @@
 					height: 390rpx;
 					background: #FFFFFF;
 					box-shadow: 0px 0px 2px 0px rgba(100, 100, 100, 0.1);
-					
+
 					&__list {
 						padding-top: 20rpx;
 						color: #666;
-						
+
 						.item {
 							margin-bottom: 30rpx;
 							font-size: 26rpx;
 							line-height: 26rpx;
 						}
-						
+
 						.action {
 							color: #F9822C;
 						}
@@ -680,19 +680,19 @@
 			}
 		}
 	}
-	
+
 	// 轮播
 	.core-swiper {
 		margin: 0 34rpx 20rpx;
 		border-radius: 16rpx;
-		
+
 		&-centent {
 			height: 300rpx;
-			
+
 			.swiper-item {
 				width: 100%;
 				height: 100%;
-				
+
 				image {
 					width: 100%;
 					height: 100%;
@@ -701,28 +701,29 @@
 			}
 		}
 	}
-	
+
 	// 二级分类
 	.core-category {
 		width: 100%;
 		height: 360rpx;
 		margin-bottom: 34rpx;
 		padding: 0 34rpx;
-		
+
 		&-swiper {
-			
+
 			width: 100%;
 			height: 360rpx;
-			
+
 			.swiper-item {
 				width: 100%;
 				height: 360rpx;
-				
+
 				&-wrap {
 					width: 100%;
 					height: 100%;
 					display: flex;
 					flex-wrap: wrap;
+
 					&__content {
 						display: flex;
 						align-items: center;
@@ -730,18 +731,18 @@
 						justify-content: space-between;
 						width: 20%;
 						height: 50%;
-						
+
 						image {
 							width: 90%;
 							height: 70%;
 						}
 					}
 				}
-				
+
 			}
 		}
 	}
-	
+
 	// 标签商品
 	.tag-goods {
 		display: flex;
@@ -749,32 +750,32 @@
 		position: relative;
 		margin: 0 34rpx 34rpx;
 		height: 350rpx;
-		
+
 		&-imgBg {
 			position: absolute;
 			top: 0;
 			width: 100%;
 			height: 350rpx;
 		}
-		
+
 		&-content {
 			width: 100%;
 			position: absolute;
 			top: 0;
 			z-index: 5;
 			padding: 26rpx 22rpx;
-			
+
 			&-nav {
 				justify-content: space-between;
 				height: 40rpx;
 				margin-bottom: 10rpx;
-				
+
 				&__left {
 					image {
 						width: 40rpx;
 						height: 30rpx;
 					}
-					
+
 					.title {
 						font-family: YouSheBiaoTiHei;
 						font-weight: 400;
@@ -783,7 +784,7 @@
 						padding: 0 36rpx;
 					}
 				}
-				
+
 				&__right {
 					.title {
 						font-family: YouSheBiaoTiHei;
@@ -791,23 +792,23 @@
 						color: #FFFFFF;
 						margin-right: 12rpx;
 					}
-					
+
 					image {
 						width: 22rpx;
 						height: 20rpx;
 					}
 				}
 			}
-			
+
 			&-list {
 				display: flex;
 				height: 260rpx;
 				overflow-x: auto;
-				
+
 				&-item {
 					flex-direction: column;
 					margin-right: 14rpx;
-					
+
 					.image {
 						width: 180rpx;
 						height: 180rpx;
@@ -815,13 +816,13 @@
 						box-shadow: 0px 0px 4px 0px rgba(100, 100, 100, 0.13);
 						border-radius: 4rpx;
 						margin-bottom: 24rpx;
-						
+
 						image {
 							width: 100%;
 							height: 100%;
 						}
 					}
-					
+
 					.title {
 						text-align: center;
 						line-height: 28rpx;
@@ -831,16 +832,16 @@
 			}
 		}
 	}
-	
+
 	// 商品列表
 	.core-goods {
 		padding: 0 34rpx;
-		
+
 		&-list {
 			width: 100%;
 			justify-content: space-between;
 			flex-wrap: wrap;
-			
+
 			&-item {
 				flex-direction: column;
 				justify-content: flex-start;
@@ -850,23 +851,23 @@
 				box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.1);
 				border-radius: 16rpx;
 				margin-bottom: 30rpx;
-				
+
 				.image-wrap {
 					width: 100%;
 					height: 320rpx;
 					margin-bottom: 16rpx;
-					
+
 					image {
 						width: 100%;
 						height: 100%;
 						border-radius: 16rpx 16rpx 0 0;
 					}
 				}
-				
+
 				.content {
 					width: 100%;
 					padding: 0 22rpx;
-					
+
 					&-title {
 						height: 28rpx;
 						font-size: 28rpx;
@@ -874,6 +875,7 @@
 						font-weight: bold;
 						overflow: hidden;
 					}
+
 					&-titletwo {
 						height: 34rpx;
 						font-size: 28rpx;
@@ -883,52 +885,54 @@
 						overflow: hidden;
 						text-overflow: ellipsis;
 					}
-					
+
 					&-coin {
 						height: 34rpx;
 						font-size: 24rpx;
 						justify-content: space-between;
 						margin-top: 30rpx;
 						margin-bottom: 24rpx;
-						
+
 						&__left {
 							margin-right: 24rpx;
 							font-size: 28rpx;
 							font-weight: bold;
-							
+
 							text {
 								font-weight: normal;
 							}
-							
+
 							image {
 								width: 34rpx;
 								height: 34rpx;
 							}
 						}
-						
+
 						&__right {
 							color: #666666;
 							text-decoration: line-through;
 						}
 					}
-					
+
 					&-price {
 						font-size: 24rpx;
 						line-height: 24rpx;
 						color: #666666;
 					}
 				}
-			
+
 			}
 		}
+
 		.empty {
 			.center {
 				text-align: center;
+
 				&-img {
 					width: 228rpx;
 					height: 320rpx;
 				}
-			
+
 				&-font {
 					font-size: 30rpx;
 					font-weight: 400;

src/pages/index/index -2022-7-15.vue

@@ -0,0 +1,1213 @@
+<template>
+	<view>
+		<view class="box">
+			<view class="index" :style="{ top: statusHeight + 'px' }">
+				<view class="barrage">
+					<!-- 背景 -->
+					<image class="barrage-bg" src="../../static/index/barrage_bg.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="toRule">
+						<image src="../../static/index/index_tip.png" mode="scaleToFill"></image>
+						<text>查看规则</text>
+					</view>
+					<!-- #endif -->
+				</view>
+
+				<!-- 盲票轮播 -->
+				<view class="ticket">
+					<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[2]" mode="scaleToFill"></image>
+								<image class="ticket-swiper-item-prize" :src="item.picUrl[1]" mode="scaleToFill">
+								</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>
+					<!-- #ifdef MP-WEIXIN -->
+					<view class="proposal-tip" @click="contactService">
+						<image src="../../static/index/index_tip_bg.png" mode="scaleToFill"></image>
+						<text>投诉建议</text>
+					</view>
+					<!-- #endif -->
+
+				</view>
+
+				<!-- 中奖概率 -->
+				<view class="chance flex">
+					<view class="chance-title">中奖概率:</view>
+					<view class="chance-hitRate flex">
+						<view class="chance-hitRate-content flex"
+							v-for="(item, index) in ticketInfo.ticketAwardsLabelList" :key="index">
+							<image :src="item.picUrl" mode="scaleToFill"></image>
+							<text>{{ item.hitRate }}%</text>
+						</view>
+					</view>
+				</view>
+
+				<!-- 盲票名称轮播 -->
+				<view class="ticket-title" flex>
+					<swiper class="ticket-title-swiper flex" :duration="0" :current="ticketTitleIndex"
+						previous-margin="110px" next-margin="110px" :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>{{ 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_btn_left.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,
+			};
+		},
+		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) {
+					// wx.openCustomerServiceChat({
+					// 	extInfo: {
+					// 		url: 'https://work.weixin.qq.com/kfid/kfc36c0d90028adbd24'
+					// 	},
+					// 	corpId: 'ww02da63d80c66284b',
+					// })
+					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 = {
+					categoryId: '',
+					tagId: '',
+					type: 'online',
+					noToken: true
+				}
+				$http.post(`/api/v1/mp/user/mall/ticket/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 = {
+					categoryId: '',
+					tagId: '',
+					type: 'online',
+					noToken: true
+				}
+				$http.post(`/api/v1/mp/user/mall/ticket/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() {
+				if (!uni.getStorageSync('token')) {
+					uni.navigateTo({
+						url: '/pages/login/index'
+					})
+					return
+				}
+				if (this.ticketInfo && this.ticketInfo.boxId) {
+					uni.navigateTo({
+						url: `/packagePrize/rolling/index?boxId=${ this.ticketInfo.boxId }&isTry=1`
+					})
+				} else {
+					uni.$u.toast('盲票正在准备中');
+				}
+
+			},
+
+			// 线上立即刮票成功，跳转到刮奖过程
+			toProcess(id) {
+				this.payShow = false
+				uni.navigateTo({
+					url: `/packagePrize/rolling/index?boxId=${ this.ticketInfo.boxId }&orderId=${ id }&isTry=0`
+				})
+			},
+
+			// 点击盲票，跳转盲票详情
+			toTicketBox(item) {
+				uni.navigateTo({
+					url: `/pages/ticketBox/detail?boxId=${ item.boxId }`
+				})
+			},
+
+			// 点击奖品，跳转到奖品详情
+			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/index'
+				})
+			},
+
+			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,
+				// 		type: 1, },
+				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-1310078123.cos.ap-shanghai.myqcloud.com/v2/front_bk.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;
+				height: 34rpx;
+				margin-right: 14rpx;
+			}
+
+			text {
+				font-size: 40rpx;
+				font-family: 'YouSheBiaoTiHei';
+				font-weight: 400;
+				color: #FFFFFF;
+			}
+		}
+	}
+
+	// 盲票
+	.ticket {
+		height: 36vh;
+		position: relative;
+
+		&-swiper {
+			height: 100%;
+
+			&-item {
+				position: relative;
+				height: 100%;
+
+				&-box {
+					position: absolute;
+					bottom: 0;
+					width: 75vw;
+					height: 75%;
+				}
+
+				&-prize {
+					position: absolute;
+					top: 0;
+					width: 85vw;
+					height: 75%;
+					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;
+
+		&-swiper {
+			width: calc(100vw - 34px);
+			height: 100%;
+
+			&-item {
+				height: 100%;
+				background: rgba(255, 255, 255, .16);
+				margin: 0 17rpx;
+				color: #fff;
+				font-size: 34rpx;
+			}
+
+			.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: #FFFFFF;
+			}
+		}
+
+		&-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: #FFFFFF;
+			}
+		}
+	}
+
+	// 盲票价格
+	.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: #FFFFFF;
+			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: #FFFEFE;
+			}
+		}
+	}
+
+	// 奖品移动动画
+	@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>

src/pages/index/index.vue

@@ -4,7 +4,7 @@
 			<view class="index" :style="{ top: statusHeight + 'px' }">
 				<view class="barrage">
 					<!-- 背景 -->
-					<image class="barrage-bg" src="../../static/index/barrage_bg.png" mode="scaleToFill"></image>
+					<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">
@@ -12,7 +12,7 @@
 								<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 }}
+										{{ item.type == 1 ? '获得了' : '兑换了' }} {{ item.prizeInfo }}
 									</view>
 								</view>
 							</view>
@@ -23,23 +23,24 @@
 
 				<!-- 查看规则 -->
 				<view class="rule">
-					<!-- #ifndef MP-ALIPAY -->
-					<view class="rule-content flex" @click="toRule">
-						<image src="../../static/index/index_tip.png" mode="scaleToFill"></image>
-						<text>查看规则</text>
+					<!-- #ifdef MP-WEIXIN -->
+					<view class="rule-content flex" @click="contactService">
+						<image src="../../static/index/index_tip_bgTwo.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[2]" mode="scaleToFill"></image>
-								<image class="ticket-swiper-item-prize" :src="item.picUrl[1]" mode="scaleToFill">
-								</image>
+								<image class="ticket-swiper-item-box" :src="item.picUrl[0]" mode="scaleToFill"></image>
 							</view>
 						</swiper-item>
 					</swiper>
@@ -49,7 +50,6 @@
 					<view class="ticket-right" @click="ticketLeft()">
 						<image src="../../static/index/index_tip_left.png" mode="scaleToFill"></image>
 					</view>
-
 				</view>
 
 				<!-- 投诉建议 -->
@@ -66,31 +66,12 @@
 						<u-line-progress :percentage="percentage" height="3" :showText="false"
 							inactiveColor="rgba(255, 255, 255, .36)" activeColor="#fff" />
 					</view>
-					<!-- #ifdef MP-WEIXIN -->
-					<view class="proposal-tip" @click="contactService">
-						<image src="../../static/index/index_tip_bg.png" mode="scaleToFill"></image>
-						<text>投诉建议</text>
-					</view>
-					<!-- #endif -->
-
-				</view>
-
-				<!-- 中奖概率 -->
-				<view class="chance flex">
-					<view class="chance-title">中奖概率:</view>
-					<view class="chance-hitRate flex">
-						<view class="chance-hitRate-content flex"
-							v-for="(item, index) in ticketInfo.ticketAwardsLabelList" :key="index">
-							<image :src="item.picUrl" mode="scaleToFill"></image>
-							<text>{{ item.hitRate }}%</text>
-						</view>
-					</view>
 				</view>
 
 				<!-- 盲票名称轮播 -->
 				<view class="ticket-title" flex>
 					<swiper class="ticket-title-swiper flex" :duration="0" :current="ticketTitleIndex"
-						previous-margin="110px" next-margin="110px" :autoplay="false" :circular="true"
+						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)"
@@ -104,8 +85,8 @@
 				<!-- 刮开盲票 -->
 				<view class="ticket-btn flex">
 					<view class="ticket-btn-left flex" @click="toRollingGame">
-						<image src="../../static/index/index_btn_left.png" mode="scaleToFill"></image>
-						<view class="ticket-btn-left__title">试玩</view>
+						<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">
@@ -114,12 +95,12 @@
 							</image>
 						</view>
 						<view class="ticket-btn-center-wrap flex">
-							<view class="ticket-btn-center-wrap__title">刮开<br />盲票</view>
+							<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 class="ticket-btn-right__title">更多商品</view>
 					</view>
 				</view>
 
@@ -137,7 +118,8 @@
 
 		</view>
 		<!-- 引导页面 -->
-		<u-modal :show="showMp" content='“盲票”已升级为“码上快购”' width='530rpx' confirmText='立即前往' @confirm='toAnotherApplet'></u-modal>
+		<!-- <u-modal :show="showMp" content='“盲票”已升级为“码上快购”' width='530rpx' confirmText='立即前往' @confirm='toAnotherApplet'> -->
+		</u-modal>
 		<!-- tabbar组件 -->
 		<custom-tab-bar :activeValue="'index'" />
 		<!-- 支付弹框组件 -->
@@ -179,11 +161,12 @@
 				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)
@@ -274,12 +257,12 @@
 				 * envVersion: 'release',//正式版
 				 */
 				uni.navigateToMiniProgram({
-				    appId:'wxffb4598e70b9f871',// appid
-				    path:'/pages/index/index',// 首页路径
-				    envVersion:"release",
-				    success: res => {
-				      // 打开成功
-				    },
+					appId: 'wxffb4598e70b9f871', // appid
+					path: '/pages/index/index', // 首页路径
+					envVersion: "release",
+					success: res => {
+						// 打开成功
+					},
 				})
 			},
 			// 切换盲票
@@ -337,12 +320,6 @@
 			contactService() {
 				// #ifdef MP-WEIXIN
 				if (appId == 1) {
-					// wx.openCustomerServiceChat({
-					// 	extInfo: {
-					// 		url: 'https://work.weixin.qq.com/kfid/kfc36c0d90028adbd24'
-					// 	},
-					// 	corpId: 'ww02da63d80c66284b',
-					// })
 					uni.navigateTo({
 						url: `/pages/index/wxofficial`
 					})
@@ -374,12 +351,10 @@
 					title: '加载中'
 				});
 				let data = {
-					categoryId: '',
-					tagId: '',
 					type: 'online',
 					noToken: true
 				}
-				$http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
+				$http.post(`/api/v1/mp/user/mall/ticket/goods/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
 					res => {
 						uni.hideLoading();
 						if (res.code == 0) {
@@ -486,12 +461,10 @@
 
 			changeList() {
 				let data = {
-					categoryId: '',
-					tagId: '',
 					type: 'online',
 					noToken: true
 				}
-				$http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
+				$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()
@@ -642,8 +615,6 @@
 		onShareTimeline() {
 			return {
 				title: '盲票，玩的就是有趣',
-				// query: { userId: this.userInfo.userId,
-				// 		type: 1, },
 				query: `userId=${ this.userInfo.userId?this.userInfo.userId:null }&type=1`
 			}
 		}
@@ -666,7 +637,7 @@
 		position: relative;
 		width: 100%;
 		height: calc(100vh - 50px);
-		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/front_bk.png) center center no-repeat;
+		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 {
@@ -742,17 +713,17 @@
 		align-items: center;
 		justify-content: flex-end;
 		height: 34rpx;
-		padding-right: 34rpx;
 		margin-bottom: 24rpx;
 
 		&-content {
 			image {
-				width: 34rpx;
-				height: 34rpx;
-				margin-right: 14rpx;
+				width: 210rpx;
+				height: 50rpx;
 			}
 
 			text {
+				position: absolute;
+				right: 20rpx;
 				font-size: 40rpx;
 				font-family: 'YouSheBiaoTiHei';
 				font-weight: 400;
@@ -763,8 +734,21 @@
 
 	// 盲票
 	.ticket {
-		height: 36vh;
+		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%;
@@ -772,19 +756,13 @@
 			&-item {
 				position: relative;
 				height: 100%;
-
+				
 				&-box {
 					position: absolute;
-					bottom: 0;
-					width: 75vw;
-					height: 75%;
-				}
-
-				&-prize {
-					position: absolute;
-					top: 0;
-					width: 85vw;
-					height: 75%;
+					// bottom: 100rpx;
+					bottom: 20%;
+					width: 380rpx;
+					height: 380rpx;
 					animation: movePrize 2s linear infinite;
 				}
 			}
@@ -832,65 +810,11 @@
 		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;
-			}
-		}
 	}
 
 	// 中奖概率
@@ -926,6 +850,9 @@
 	.ticket-title {
 		height: 66rpx;
 		padding: 0 34rpx;
+		margin: 30rpx 0;
+		overflow: hidden;
+		// margin: 0 34rpx;
 
 		&-swiper {
 			width: calc(100vw - 34px);
@@ -933,10 +860,16 @@
 
 			&-item {
 				height: 100%;
-				background: rgba(255, 255, 255, .16);
+				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 {
@@ -966,7 +899,7 @@
 				font-size: 30rpx;
 				font-family: YouSheBiaoTiHei;
 				font-weight: 400;
-				color: #FFFFFF;
+				color: #666;
 			}
 		}
 
@@ -1029,7 +962,7 @@
 				font-size: 30rpx;
 				font-family: YouSheBiaoTiHei;
 				font-weight: 400;
-				color: #FFFFFF;
+				color: #666;
 			}
 		}
 	}
@@ -1057,7 +990,7 @@
 			font-family: YouSheBiaoTiHei;
 			font-weight: 400;
 			align-items: flex-end;
-			color: #FFFFFF;
+			color: #FE9E48;
 			margin-right: 20rpx;
 
 			.num {
@@ -1080,29 +1013,28 @@
 				font-size: 26rpx;
 				text-decoration: line-through;
 				font-style: italic;
-				color: #FFFEFE;
+				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)
 		}