盲票详情接口对接

pages/ticketBox/detail.vue

@@ -23,7 +23,7 @@
 			
 			<!-- 奖品 -->
 			<swiper class="prize-swiper" previous-margin="100px" next-margin="100px" :interval="4000" :autoplay="true" :circular="true" @change="changePrizeSwiper">
-				<swiper-item :class="prizeIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in prizeList" :key="index">
+				<swiper-item :class="prizeIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in prizeList.slice(0, 11)" :key="index">
 					<view class="prize-swiper-item flex">
 						<image :class="prizeIndex == index ? 'img' : 'img-side'" :src="item.picUrl" mode="aspectFit"></image>
 					</view>
@@ -32,13 +32,14 @@
 			
 			<!-- 奖品价格 -->
 			<view class="prize-price flex">
-				<view class="prize-price-present">{{ $numberFormat(2999) }}</view>
-				<view class="prize-price-txt ells-one">微软（Miceosoft)日版Xbox Seies S</view>
+				<view class="prize-price-present" v-if="prizeList[prizeIndex].prizeType != 'coin'">￥{{ $numberFormat(prizeList[prizeIndex].value) }}</view>
+				<view class="prize-price-present" v-else>{{ prizeList[prizeIndex].value }}颗</view>
+				<view class="prize-price-txt ells-one">{{ prizeList[prizeIndex].title }}</view>
 				<view class="prize-price__ticket-price flex">
 					<image src="../../static/ticketBox/ticket_block.png" mode="scaleToFill"></image>
-					<view class="txt">￥{{ 56 }} /个</view>
+					<view class="txt">￥{{ $numberFormat(info.salePrice) }} /个</view>
 				</view>
-				<view class="prize-price-past">原价：￥{{ $numberFormat(4000) }}/个</view>
+				<view class="prize-price-past">原价：￥{{ $numberFormat(info.originPrice) }}/个</view>
 			</view>
 			
 			<!-- 开启盲票 -->
@@ -64,25 +65,13 @@
 			<view class="prize-total-num">共90款</view>
 			<!-- 中奖概率 -->
 			<view class="prize-total-chance flex">
-				<view class="prize-total-chance-content flex">
-					<image src="../../static/index/index_chance_1.png" mode="scaleToFill"></image>
-					<text>0.1%</text>
-				</view>
-				<view class="prize-total-chance-content flex">
-					<image src="../../static/index/index_chance_2.png" mode="scaleToFill"></image>
-					<text>10.0%</text>
-				</view>
-				<view class="prize-total-chance-content flex">
-					<image src="../../static/index/index_chance_3.png" mode="scaleToFill"></image>
-					<text>10.0%</text>
-				</view>
-				<view class="prize-total-chance-content flex">
-					<image src="../../static/index/index_chance_4.png" mode="scaleToFill"></image>
-					<text>10.0%</text>
+				<view class="prize-total-chance-content flex" v-for="(item, index) in info.ticketAwardsLabelList">
+					<image :src="item.picUrl" mode="scaleToFill"></image>
+					<text>{{ item.hitRate }}%</text>
 				</view>
 			</view>
 			<!-- 文字说明 -->
-			<view class="prize-total-txt">因概率对小数点后三位进行四舍五入处理，故存在总值不为100%的可能。商品抽奖存在概率性，付费请谨慎!未成年人请在家长监督下使用回收率约70%(支付余额不支持提现)全国包邮（偏远地区除外)</view>
+			<view class="prize-total-txt">因概率对小数点后三位进行四舍五入处理，故存在总值不为100%的可能。商品抽奖存在概率性，付费请谨慎!未成年人请在家长监督下使用。</view>
 		</view>
 		
 		<!-- 盲票奖品列表 -->
@@ -94,6 +83,9 @@
 					<view class="price" v-if="item.prizeType != 'coin'">￥{{ $numberFormat(item.value) }}</view>
 					<view class="price" v-else>{{ item.value }}颗</view>
 				</view>
+				<view class="prize-list-item-grade">
+					<image :src="item.awardsLabelPicUrl" />
+				</view>
 			</view>
 		</view>
 		
@@ -181,7 +173,6 @@
 
 		methods: {
 			changePrizeSwiper({ detail }) {
-				// console.log(detail);
 				this.prizeIndex = detail.current
 			},
 			
@@ -195,15 +186,18 @@
 				}).then(res => {
 					uni.hideLoading();
 					if (res.code == 0) {
-						this.info = res.data
-						let picUrlArr = res.data.picUrl.split(',')
-						picUrlArr.forEach(item => {
-							this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
-						})
+						this.info = {
+							...res.data,
+							picUrl: res.data.picUrl.split(',').map(item => env.filePublic + item + '?imageView2/2/w/375'),
+							ticketAwardsLabelList: res.data.ticketAwardsLabelList.map(item => {
+								return { ...item, picUrl: env.filePublic + item.picUrl }
+							})
+						}
+						console.log(this.info);
 						let prizeList = res.data.prizeList
 						prizeList.forEach(item => {
-							let picUrlArr = item.picUrl.split(',')
-							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
+							item.picUrl = env.filePublic + item.picUrl.split(',')[0] + '?imageView2/2/w/170'
+							item.awardsLabelPicUrl = env.filePublic + item.awardsLabelPicUrl
 						})
 						this.prizeList = prizeList
 					}
@@ -239,7 +233,7 @@
 						let info = {
 							...res.data,
 							...this.info,
-							picUrl: env.filePublic + res.data.picUrl,
+							picUrl: this.info.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
@@ -400,6 +394,7 @@
 			}
 			
 			&-txt {
+				padding: 0 34rpx;
 				font-size: 30rpx;
 				font-weight: bold;
 			}
@@ -515,8 +510,8 @@
 				margin-right: 40rpx;
 				
 				image {
-					width: 44rpx;
-					height: 44rpx;
+					width: 56rpx;
+					height: 50rpx;
 				}
 				
 				text {
@@ -547,6 +542,7 @@
 		padding: 0 34rpx;
 		
 		&-item {
+			position: relative;
 			padding: 0 110rpx 0 84rpx;
 			justify-content: flex-start;
 			height: 264rpx;
@@ -580,6 +576,17 @@
 					line-height: 42rpx;
 				}
 			}
+			
+			&-grade {
+				position: absolute;
+				top: -12rpx;
+				left: 0;
+				
+				image {
+					width: 66rpx;
+					height: 60rpx;
+				}
+			}
 		}
 	}