首页接口对接

pages/index/index.vue

@@ -27,10 +27,10 @@
 				<!-- 盲票轮播 -->
 				<view class="ticket">
 					<swiper class="ticket-swiper" :current="ticketIndex" :autoplay="false" :circular="true" @change="changeTicket">
-						<swiper-item v-for="(item, index) in list" :key="index">
+						<swiper-item v-for="(item, index) in ticketList" :key="index" @click="toTicketBox(item)">
 							<view class="ticket-swiper-item flex">
-								<image class="box" src="../../static/index/index_ticket.png" mode="scaleToFill"></image>
-								<image class="prize" src="../../static/index/index_prize.png" mode="scaleToFill"></image>
+								<image class="box" :src="item.picUrl[1]" mode="scaleToFill"></image>
+								<image class="prize" :src="item.picUrl[0]" mode="scaleToFill"></image>
 							</view>
 						</swiper-item>
 					</swiper>
@@ -56,30 +56,18 @@
 				<!-- 中奖概率 -->
 				<view class="chance flex">
 					<view class="chance-title">中奖概率:</view>
-					<view class="chance-content flex">
-						<image src="../../static/index/index_chance_1.png" mode="scaleToFill"></image>
-						<text>0.1%</text>
-					</view>
-					<view class="chance-content flex">
-						<image src="../../static/index/index_chance_2.png" mode="scaleToFill"></image>
-						<text>10.0%</text>
-					</view>
-					<view class="chance-content flex">
-						<image src="../../static/index/index_chance_3.png" mode="scaleToFill"></image>
-						<text>10.0%</text>
-					</view>
-					<view class="chance-content flex">
-						<image src="../../static/index/index_chance_4.png" mode="scaleToFill"></image>
-						<text>10.0%</text>
+					<view class="chance-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 class="ticket-title" flex>
 					<swiper class="ticket-title-swiper flex" :current="ticketTitleIndex" previous-margin="110px" next-margin="110px" :autoplay="false" :circular="true" @change="changeTicketTitle">
-						<swiper-item v-for="(item, index) in list" :key="index">
+						<swiper-item v-for="(item, index) in ticketList" :key="index">
 							<view class="ticket-title-swiper-item flex" :class="{ 'action': ticketTitleIndex == index }">
-								<text>爆款必抽</text>
+								<text>{{ item.title }}</text>
 							</view>
 						</swiper-item>
 					</swiper>
@@ -91,7 +79,7 @@
 						<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">
+					<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>
@@ -115,11 +103,11 @@
 						<image src="../../static/index/index_price_checkout.png" mode="scaleToFill"></image>
 					</view>
 					<view class="ticket-price-amt flex">
-						<view class="num">49.00</view>
+						<view class="num">{{ $numberFormat(ticketInfo.salePrice) }}</view>
 						<view class="txt">元/个</view>
 					</view>
 					<view class="ticket-price-discount flex">
-						<view class="num">原价￥68.00元</view>
+						<view class="num">原价￥{{ $numberFormat(ticketInfo.originPrice) }}</view>
 					</view>
 				</view>
 			</view>
@@ -156,7 +144,6 @@
 				payShow: false, // 支付弹框显示
 				payInfo: {}, // 支付详情
 				currentIndex: 0, // 盲票选中下标
-				activeAnimation: 'moveLeft 10s linear infinite normal', // 奖品动画
 
 				statusHeight: 20,
 				ticketIndex: 0, // 盲票选中下标
@@ -169,6 +156,7 @@
 				activityShow: false,//助力邀请弹框
 				filterActivityList: [],
 				activityTime: null,
+				ticketInfo: {}
 			};
 		},
 		onLoad(opthios) {
@@ -213,17 +201,17 @@
 		methods: {
 			// 切换盲票
 			changeTicket({ detail }) {
-				console.log(detail);
 				this.ticketIndex = detail.current
 				this.ticketTitleIndex = detail.current
+				this.getTicketDetail(this.ticketList[detail.current].boxId)
 				this.setNum(detail.current)
 			},
 			
 			// 切换盲票名称
 			changeTicketTitle({ detail }) {
-				console.log(detail);
 				this.ticketIndex = detail.current
 				this.ticketTitleIndex = detail.current
+				this.getTicketDetail(this.ticketList[detail.current].boxId)
 				this.setNum(detail.current)
 			},
 			
@@ -280,10 +268,9 @@
 					res => {
 						uni.hideLoading();
 						if (res.code == 0) {
-							res.rows.forEach(item => item.picUrl = env.filePublic + item.picUrl.split(',')[0] +
-								'?imageView2/2/w/375')
+							res.rows.forEach(item => item.picUrl = item.picUrl.split(',').map(item => env.filePublic + item + '?imageView2/2/w/375'))
 							this.ticketList = res.rows
-							this.getPrize(this.ticketList[0].boxId)
+							this.getTicketDetail(this.ticketList[0].boxId)
 						}
 					}).catch(() => {
 					uni.hideLoading();
@@ -315,8 +302,8 @@
 				})
 			},
 
-			// 获取当前盲票的奖品列表
-			getPrize(id) {
+			// 获取当前盲票的详情
+			getTicketDetail(id) {
 				this.prizeList = []
 				$http.post('/api/v1/mp/user/mall/ticket/detail', {
 					boxId: id,
@@ -324,16 +311,13 @@
 				}).then(res => {
 					uni.hideLoading();
 					if (res.code == 0) {
-						let prizeList = res.data.prizeList
-						prizeList.forEach(item => {
-							let picUrlArr = item.picUrl.split(',')
-							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
-						})
-						this.prizeList = prizeList
-						// 根据奖品数量动态设置动画时间
-						let time = Math.ceil(this.prizeList.length / 5 * 10)
-						this.activeAnimation = `moveLeft ${ time }s linear infinite normal`,
-							this.payInfo = this.ticketList[this.currentIndex]
+						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();
@@ -342,7 +326,7 @@
 
 			// 立即开刮
 			payment() {
-				this.payInfo = this.ticketList[this.currentIndex]
+				this.payInfo = this.ticketList[this.ticketIndex]
 				let data = {
 					userCouponIds: [],
 					autoCoupon: 1,
@@ -354,6 +338,7 @@
 						let info = {
 							...res.data,
 							...this.payInfo,
+							picUrl: this.payInfo.picUrl[2],
 							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
@@ -373,14 +358,6 @@
 				this.activityShow = false
 			},
 
-			// // 盲票选中改变
-			// changeTicket({
-			// 	detail
-			// }) {
-			// 	this.currentIndex = detail.current
-			// 	this.getPrize(this.ticketList[this.currentIndex].boxId)
-			// },
-
 			changeList() {
 				let data = {
 					categoryId: '',
@@ -428,8 +405,7 @@
 			},
 
 			// 点击盲票，跳转盲票详情
-			toTicketBox() {
-				let item = this.ticketList[this.currentIndex]
+			toTicketBox(item) {
 				uni.navigateTo({
 					url: `/pages/ticketBox/detail?boxId=${ item.boxId }`
 				})
@@ -700,6 +676,7 @@
 	
 	// 中奖概率
 	.chance {
+		justify-content: space-evenly;
 		height: 44rpx;
 		margin: 0 34rpx 26rpx;
 		background-color: rgba(000, 000, 000, .36);
@@ -709,17 +686,12 @@
 		font-size: 14px;
 		
 		&-content {
-			margin-right: 16rpx;
 			
 			image {
-				width: 44rpx;
-				height: 44rpx;
+				width: 56rpx;
+				height: 50rpx;
 			}
 		}
-		
-		&-content:last-child {
-			margin: 0;
-		}
 	}
 	
 	// 盲票名称轮播