幸运数字修改

pages/lucky/index.vue

@@ -1,53 +1,10 @@
 <template>
 	<view>
-		<u-navbar leftIconSize="0" title="盲票详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
-		<view class="detail">
-			<view class="detail-top">
-				<u-swiper :list="picUrlArr" height="375" imgMode="aspectFit" bgColor="#fff" radius="0" :indicator="true"
-					:circular="true"></u-swiper>
-			</view>
-			<view class="flex detail-info">
-				<view class="detail-info__left">
-					<text class="title">{{ boxInfo.title }}</text>
-					<view class="flex num">
-						<u-icon name="gift" size="25" color="#EB7009"></u-icon>
-						<text>100%抽中，奖品多多</text>
-					</view>
-					<view class="tip">图片仅供参考，请以实物为准</view>
-				</view>
-				<view class="detail-info__right">
-					<text class="money">￥{{ $numberFormat(boxInfo.salePrice) }}</text>
-					<text>销量 {{ boxInfo.saleQty }}</text>
-				</view>
-			</view>
-			<view class="detail-goods">
-				<view class="detail-goods-title">可获得奖品</view>
-				<view class="detail-goods-list">
-					<!-- <navigator :url="`/packagePrize/goods/detail?id=${ item.prizeId }`" class="detail-goods-list-item"
-						hover-class="navigator-hover" v-for="(item, index) in prizeList" :key="index"> -->
-					<view class="detail-goods-list-item" v-for="(item, index) in prizeList" :key="index">
-						<view class="detail-goods-list-item__value">
-							<view class="flex image-wrap">
-								<image :src="item.picUrl" mode="scaleToFill"></image>
-							</view>
-							<view class="info">
-								<text class="title">{{ item.title }}</text>
-								<text class="num"
-									v-if="item.prizeType != 'coin'">价值：￥{{ $numberFormat(item.value) }}</text>
-								<text class="num" v-else>数量：{{ item.value }}个</text>
-								<text class="num">概率：{{ item.hitRate }}%</text>
-							</view>
-							<view class="name">{{ item.name }}</view>
-						</view>
-					</view>
-					<!-- </navigator> -->
-				</view>
-			</view>
-		</view>
+		<view class="lucky"></view>
 		<u-overlay :show="luckyShow" :opacity="0.8" zIndex="100">
 			<view class="flex luck-warp" @touchmove.prevent.stop>
 				<view class="luck-info">
-					<view class="flex luck-info-image">
+					<!-- <view class="flex luck-info-image">
 						<image class="image1" src="../../static/icon/lucky_bg.png" mode="" v-if="info.status == 1">
 						</image>
 						<image class="image2" src="../../static/icon/lucky_bg2.png" mode="" v-else></image>
@@ -70,7 +27,37 @@
 						<navigator open-type="exit" target="miniProgram" hover-class="none" class="flex">
 							<u-icon name="close" color="#333" size="20"></u-icon>
 						</navigator>
+					</view> -->
+					
+					<view class="luck-info-bg">
+						<image src="../../static/lucky/lucky_bg.png" mode=""></image>
+					</view>
+					<view class="luck-info-content flex">
+						<view class="luck-info-content-num">
+							<image src="../../static/lucky/lucky_not_num.png" mode="" v-if="info.status == 1"></image>
+							<image src="../../static/lucky/lucky_ok_num.png" mode="" v-else></image>
+							<view class="luck-info-content-num__content flex" v-if="info.status == 2">
+								<text>{{ info.plainLuckyNum }}</text>
+							</view>
+						</view>
+						<view class="luck-info-content-title" v-if="info.status == 1">- 幸运数字 -</view>
+						<view class="luck-info-content-tip" v-else>请刮开纸质票面的数字，与此幸运数字相同的就是所中奖项</view>
+						<view class="luck-info-content-ticket">
+							<image src="../../static/lucky/lucky_not.png" mode="" v-if="info.status == 1"></image>
+							<image src="../../static/lucky/lucky_ok.png" mode="" v-else></image>
+							<view class="luck-info-content-ticket-info flex">
+								<view class="title" :class="{ 'action': info.status == 2 }">{{ info.title }}</view>
+								<view class="serialNo" :class="{ 'action': info.status == 2 }">盲票序列号：{{ info.serialNo }}</view>
+							</view>
+						</view>
+						<view class="luck-info-content-btn" @click="pay" v-if="info.status == 1">支付{{ info.salePrice / 100 }}元 立即查看</view>
+						<view class="luck-info-content-btn code" @click="scanCode" v-else>扫码兑奖</view>
 					</view>
+					<view class="luck-info-close flex">
+						<navigator open-type="exit" target="miniProgram" hover-class="none" class="luck-info-close-content flex">
+							<u-icon name="close" color="#fff" size="20"></u-icon>
+						</navigator>
+					</view> -->
 				</view>
 			</view>
 		</u-overlay>
@@ -112,12 +99,8 @@
 				payShow: false,
 				payLookFlag: true,
 				showNull: false,
-				luckyShow: true,
+				luckyShow: false,
 				status: 2,
-				boxId: '',
-				picUrlArr: [],
-				boxInfo: {},
-				prizeList: [],
 				showAction: false,
 			};
 		},
@@ -125,17 +108,17 @@
 		onLoad(options) {
 			if (options.id) {
 				this.serialNo = options.id
+				this.getDetail()
 			}
 
 			if (options.q) {
 				let url = JSON.stringify(options.q)
 				this.serialNo = url.substring(url.length - 22, url.length - 1)
+				this.getDetail()
 			}
 		},
 		onShow() {
-			if (this.serialNo && this.payLookFlag) {
-				this.getDetail()
-			}
+			
 		},
 		methods: {
 			scanCode() {
@@ -153,7 +136,6 @@
 				});
 			},
 
-
 			getDetail() {
 				uni.showLoading({
 					title: '加载中'
@@ -164,9 +146,9 @@
 				}).then(res => {
 					uni.hideLoading();
 					if (res.code == 0) {
-						this.getBoxDetail(res.data.boxId)
 						if (res.data.status == 1) {
 							this.info = res.data
+							this.luckyShow = true
 						} else if (res.data.status == 2) {
 							this.info = res.data
 							if (uni.getStorageSync('token')) {
@@ -174,6 +156,7 @@
 									url: `/packagePrize/choice/index?id=${ res.data.ticketId }&type=offLine`
 								})
 							} else {
+								this.luckyShow = true
 								uni.showModal({
 									title: '提示',
 									content: '您未登录或登录失效！',
@@ -253,33 +236,6 @@
 				})
 			},
 
-			getBoxDetail(id) {
-				uni.showLoading({
-					title: '加载中'
-				});
-				$http.post('/api/v1/mp/user/mall/ticket/detail', {
-					boxId: id,
-					noToken: true
-				}).then(res => {
-					uni.hideLoading();
-					if (res.code == 0) {
-						this.boxInfo = res.data
-						let picUrlArr = res.data.picUrl.split(',')
-						picUrlArr.forEach(item => {
-							this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
-						})
-						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
-					}
-				}).catch(() => {
-					uni.hideLoading();
-				})
-			},
-
 			close() {
 				this.payShow = false
 			},
@@ -328,264 +284,152 @@
 
 		.luck-info {
 			position: relative;
-			width: 85%;
-			border-radius: 40rpx;
-			background-color: #fff;
-
-			.luck-info-image {
-				// margin-bottom: 30rpx;
-
-				.image1 {
-					width: 400rpx;
-					height: 400rpx;
-					margin-top: -200rpx;
-				}
-
-				.image2 {
-					width: 700rpx;
-					height: 700rpx;
-					margin-top: -446rpx;
-					// padding-bottom: 50rpx;
-				}
-			}
-
-			.luck-info-tip {
-				.tip {
-					width: 460rpx;
-					height: 100rpx;
-					line-height: 50rpx;
-					font-size: 24rpx;
-					padding: 0 26rpx;
-					color: #666666;
-					text-align: center;
-					border-radius: 10rpx;
-					background: rgba(255, 109, 28, 0.2);
+			width: 87vw;
+			height: 60vh;
+			// background-color: #fff;
+			
+			&-bg {
+				position: absolute;
+				top: 0;
+				
+				image {
+					width: 87vw;
+					height: 60vh;
 				}
 			}
-
-			.luck-info-content {
+			
+			&-content {
 				flex-direction: column;
-
-				.title {
-					line-height: 68rpx;
-					font-size: 48rpx;
-					color: #FA6401;
-					font-size: 60rpx;
-					font-weight: bold;
-					margin-bottom: 72rpx;
-				}
-
-				.name {
-					font-size: 40rpx;
-					line-height: 56rpx;
-					margin-bottom: 20rpx;
-				}
-
-				.num {
-					font-size: 32rpx;
-					color: #666666;
-					line-height: 44rpx;
-				}
-			}
-
-
-			.mat {
-				margin-bottom: 140rpx;
-			}
-
-			.mat2 {
-				margin-bottom: 20rpx;
-			}
-
-			.luck-info-btn {
-				margin-top: 20rpx;
-
-				.btn {
-					width: 530rpx;
-					height: 100rpx;
-					line-height: 100rpx;
-					color: #FFFFFF;
-					font-size: 48rpx;
-					text-align: center;
-					border-radius: 200rpx;
-					background: linear-gradient(180deg, #FFB266 0%, #FFB266 0%, #FF843A 100%, #FF843A 100%);
-					box-shadow: 0px 4px 10px 0px rgba(182, 85, 24, 0.6);
-					margin-bottom: 72rpx;
-				}
-			}
-
-			.luck-info-num {
+				justify-content: flex-start;
 				position: absolute;
-				top: -280rpx;
+				top: 0;
+				z-index: 10;
 				width: 100%;
-				font-size: 260rpx;
-				font-family: LucidaSans-Demi, LucidaSans;
-				color: #FFBD4E;
-				text-shadow: 1px 1px rgba(255, 255, 255, .7);
-				font-weight: bold;
-			}
-
-			.luck-info-close {
-				position: absolute;
-				width: 70rpx;
-				height: 70rpx;
-				background-color: #b9b9b9;
-				border-radius: 50%;
-				right: 10rpx;
-				top: -80rpx;
-			}
-		}
-	}
-
-
-	.detail {
-		padding-bottom: 100rpx;
-
-		&-top {
-			margin-bottom: 20rpx;
-		}
-
-		&-info {
-			justify-content: space-between;
-			box-sizing: border-box;
-			padding: 24rpx 16rpx;
-			background-color: #fff;
-			margin: 10rpx 10rpx 20rpx;
-			border-radius: 10rpx;
-
-			&__left {
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-
-				text {
-					line-height: 24rpx;
-					display: inline-block;
-				}
-
-				.title {
-					color: rgba(16, 16, 16, 100);
-					font-size: 32rpx;
-					line-height: 32rpx;
-					font-weight: bold;
-				}
-
-				.num {
-					color: $uni-text-color;
-					font-size: 28rpx;
-					justify-content: flex-start;
-					margin: 20rpx 0;
-				}
-
-				.tip {
-					font-size: 24rpx;
-				}
-			}
-
-			&__right {
-				display: flex;
-				flex-direction: column;
-				align-items: flex-end;
-				justify-content: space-between;
-				height: 162rpx;
-
-				text {
-					color: rgba(157, 157, 157, 100);
-					font-size: 14px;
+				height: 100%;
+				
+				&-num {
+					position: relative;
+					width: 60%;
+					height: 10vh;
+					margin-top: 17vh;
+					margin-bottom: 2vh;
+					
+					image {
+						position: absolute;
+						top: 0;
+						width: 100%;
+						height: 100%;
+					}
+					
+					&__content {
+						position: absolute;
+						top: 0;
+						width: 100%;
+						height: 100%;
+						z-index: 5;
+						font-size: 120rpx;
+						font-family: YouSheBiaoTiHei;
+						font-weight: 400;
+						color: #FD3331;
+					}
 				}
-
-				.money {
+				
+				&-title {
 					font-size: 40rpx;
-					font-weight: bold;
 					line-height: 40rpx;
-					font-weight: bold;
-					color: $uni-text-color;
-					margin-bottom: 40rpx;
+					color: #FEFEFE;
+					margin-bottom: 1vh;
 				}
-			}
-		}
-
-		&-sku {
-			background-color: #fff;
-			border-radius: 10rpx;
-			margin: 10rpx 10rpx 20rpx;
-
-			&-title {
-				padding: 24rpx 16rpx 12rpx;
-			}
-
-			&-item {
-				padding-bottom: 10rpx;
-
-				view {
-					padding-left: 50rpx;
-					line-height: 50rpx;
+				
+				&-tip {
+					width: 80%;
+					font-size: 26rpx;
+					line-height: 35rpx;
+					text-align: center;
+					color: #fff;
 				}
-			}
-		}
-
-		&-goods {
-			margin: 10rpx 10rpx 20rpx;
-
-			&-title {
-				margin-bottom: 20rpx;
-			}
-
-			&-list {
-				padding-bottom: 100rpx;
-
-				&-item {
+				
+				&-ticket {
 					position: relative;
-					background-color: #FFFFFF;
-					margin-bottom: 30rpx;
-					border-radius: 10rpx;
-					padding: 30rpx 20rpx;
-
-					&__value {
-						display: flex;
-					}
-
+					width: 96%;
+					height: 14vh;
+					margin-bottom: 2vh;
+					
 					image {
-						width: 200rpx;
-						height: 200rpx;
-					}
-
-					.name {
 						position: absolute;
-						left: 0rpx;
-						top: 0rpx;
-						line-height: 28rpx;
-						padding: 10rpx 40rpx;
-						color: #FFFFFF;
-						border-top-left-radius: 10rpx;
-						border-bottom-right-radius: 40rpx;
-						background-color: $uni-bg-color;
+						top: 0;
+						width: 100%;
+						height: 100%;
 					}
-
-					.info {
-						display: flex;
+					
+					&-info {
+						width: 100%;
+						height: 100%;
+						position: absolute;
+						top: 0;
+						z-index: 5;
+						
 						flex-direction: column;
-						justify-content: space-between;
-						font-size: 30rpx;
-						padding-left: 50rpx;
-
+						
 						.title {
+							font-size: 36rpx;
+							line-height: 36rpx;
 							font-weight: bold;
+							color: #FF6D2C;
+							margin-bottom: 2vh;
 						}
-
-						.num {
-							color: #848484;
+						
+						.serialNo {
+							font-size: 26rpx;
+							color: #FF6D2C;
+						}
+						
+						.action {
+							color: #FFCBAA;
 						}
 					}
 				}
-
-				&-item:last-child {
-					border: none;
+				
+				&-btn {
+					// width: 80%;
+					padding: 0 13%;
+					height: 8vh;
+					line-height: 8vh;
+					background: linear-gradient(0deg, #F9D448, #FF4924);
+					box-shadow: 0px 6px 9px 0px rgba(135, 19, 3, 0.49);
+					border-radius: 4vh;
+					text-align: center;
+					color: #FEFEFE;
+					font-size: 40rpx;
+				}
+				
+				.code {
+					padding: 0 20%;
+				}
+			}
+			
+			&-close {
+				width: 100%;
+				position: absolute;
+				bottom: -140rpx;
+				
+				&-content {
+					width: 70rpx;
+					height: 70rpx;
+					border-radius: 50%;
+					border: 1px solid #fff;
 				}
 			}
 		}
 	}
 
+	.lucky {
+		width: 100%;
+		height: 100vh;
+		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/hit_bkg.png) center center no-repeat;
+		background-size: 100vw 100vh;
+	}
+
 	.null-prize {
 		display: flex;
 		flex-direction: column;