线下票开奖流程动画修改

package-lock.json

@@ -3176,6 +3176,44 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
         "globby": {
           "version": "9.2.0",
           "resolved": "https://registry.npmmirror.com/globby/-/globby-9.2.0.tgz",
@@ -3192,6 +3230,13 @@
             "slash": "^2.0.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
         "hash-sum": {
           "version": "2.0.0",
           "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
@@ -3204,6 +3249,25 @@
           "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
           "dev": true
         },
+        "json5": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz",
+          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
         "slash": {
           "version": "2.0.0",
           "resolved": "https://registry.npmmirror.com/slash/-/slash-2.0.0.tgz",
@@ -3218,6 +3282,28 @@
           "requires": {
             "minipass": "^3.1.1"
           }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.8.3",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
         }
       }
     },
@@ -15267,101 +15353,6 @@
         "vue-style-loader": "^4.1.0"
       }
     },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.8.3",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
-      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "hash-sum": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-2.0.0.tgz",
-          "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
-          "dev": true,
-          "optional": true
-        },
-        "json5": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz",
-          "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz",
-          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

src/pages/lucky/index.vue

@@ -9,17 +9,22 @@
 					</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>
+							<image src="../../static/lucky/lucky_gkmp.png" mode=""></image>
+						</view>
+						<view class="luck-info-content-img">
+							<view class="luck-info-content-img-word">
+								<image class="img" src="../../static/lucky/lucky_tu.png" mode=""></image>
+								<view class="luck-info-content-img-word__content">
+									<text>{{ info.awardsName }}</text>
+								</view>
+								<image class="imgtwo" src="../../static/lucky/lucky_xiaoguo.png" mode="" v-if="infoimg">
+								</image>
+								<image class="img" src="../../static/lucky/lucky_guajiangqu.png" mode="" v-if="info.status == 1">
+								<image class="imgone" src="../../static/lucky/lucky_yidong.png" v-else-if="info.status == 2"></image>
+							</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>
+							<image src="../../static/lucky/lucky_piaohao.png" mode=""></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 }}
@@ -27,10 +32,10 @@
 							</view>
 						</view>
 						<view class="luck-info-content-btn" @click="pay" v-if="info.status == 1 && info.salePrice != 0">
-							支付{{ info.salePrice / 100 }}元 立即查看</view>
+							支付{{ info.salePrice / 100 }}元 立即刮开盲票</view>
 						<view class="luck-info-content-btn" @click="payDetail"
-							v-else-if="info.status == 1 && info.salePrice == 0">收下盲票，查看幸运数字</view>
-						<view class="luck-info-content-btn code" @click="scanCode" v-else>扫码兑奖</view>
+							v-else-if="info.status == 1 && info.salePrice == 0">收下盲票，立即刮开盲票</view>
+						<view class=" code" v-else>开奖啦!</view>
 					</view>
 					<view class="luck-info-close flex">
 						<navigator open-type="exit" target="miniProgram" hover-class="none"
@@ -45,10 +50,17 @@
 		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="getDetailInfo" v-if="payShow" />
 
 		<u-popup :show="showNull" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
+			@touchmove.prevent.stop>
+			<view class="null-prize">
+				<view class="title">该盲票已兑奖</view>
+				<view class="btn" @click="toUser">确认</view>
+			</view>
+		</u-popup>
+		
+		<u-popup :show="tipShow" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
 			@touchmove.prevent.stop>
 			<view class="null-prize">
 				<view class="title">该盲票已被他人买走了</view>
-				<!-- <navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator> -->
 				<view class="btn" @click="toUser">确认</view>
 			</view>
 		</u-popup>
@@ -85,6 +97,7 @@
 				luckyShow: false,
 				status: 2,
 				showAction: false,
+				infoimg: false,
 			};
 		},
 
@@ -98,29 +111,10 @@
 				let obj = urlParameter(decodeURIComponent(options.q))
 				this.serialNo = obj.id
 				this.getDetail()
-				// let url = JSON.stringify(options.q)
-				// this.serialNo = url.substring(url.length - 22, url.length - 1)
-				// this.getDetail()
 			}
 		},
 
 		methods: {
-			scanCode() {
-				let _this = this
-				uni.scanCode({
-					scanType: ['qrCode'],
-					success(res) {
-						let url = res.result
-						// _this.serialNo = url.substring(url.length - 21, url.length)
-						_this.serialNo = urlParameter(url).id
-						_this.getDetail()
-					},
-					fail() {
-						uni.$u.toast('请扫二维码');
-					}
-				});
-			},
-
 			getDetail() {
 				uni.showLoading({
 					title: '加载中'
@@ -140,6 +134,7 @@
 								uni.redirectTo({
 									url: `/packagePrize/choice/index?id=${ res.data.ticketId }&type=offLine`
 								})
+
 							} else {
 								this.luckyShow = true
 								uni.showModal({
@@ -190,7 +185,14 @@
 					if (res.code == 0) {
 						if (res.data.status == 2) {
 							_this.info = res.data
-							let num = res.data.plainLuckyNum
+							setTimeout(() => {
+								this.infoimg = true
+								setTimeout(() => {
+									uni.redirectTo({
+										url: `/packagePrize/choice/index?id=${ res.data.ticketId }&type=offLine`
+									})
+								}, 500)
+							}, 500)
 						} else {
 							let num = 0
 							let time = setInterval(() => {
@@ -206,7 +208,14 @@
 										uni.hideLoading();
 										clearInterval(time)
 										_this.info = res.data
-										let num = res.data.plainLuckyNum
+										setTimeout(() => {
+											this.infoimg = true
+											setTimeout(() => {
+												uni.redirectTo({
+													url: `/packagePrize/choice/index?id=${ res.data.ticketId }&type=offLine`
+												})
+											}, 500)
+										}, 500)
 									}
 								})
 								if (num == 10) {
@@ -243,8 +252,8 @@
 								uni.hideLoading();
 								if (res.code == 0) {
 									this.getDetailInfo()
-								}else {
-									this.showNull = true
+								} else {
+									this.tipShow = true
 									this.luckyShow = false
 								}
 							}).catch(() => {
@@ -309,7 +318,6 @@
 			position: relative;
 			width: 87vw;
 			height: 60vh;
-			// background-color: #fff;
 
 			&-bg {
 				position: absolute;
@@ -332,10 +340,10 @@
 
 				&-num {
 					position: relative;
-					width: 60%;
-					height: 10vh;
-					margin-top: 17vh;
-					margin-bottom: 2vh;
+					width: 422rpx;
+					height: 8vh;
+					margin-top: 16vh;
+					margin-bottom: 3vh;
 
 					image {
 						position: absolute;
@@ -344,17 +352,61 @@
 						height: 100%;
 					}
 
-					&__content {
+
+				}
+
+				&-img {
+					position: relative;
+					width: 73%;
+					height: 10vh;
+					background-color: #fff;
+					border-radius: 12rpx;
+
+					&-word {
 						position: absolute;
-						top: 0;
-						width: 100%;
-						height: 100%;
-						z-index: 5;
-						font-size: 120rpx;
-						font-family: YouSheBiaoTiHei;
-						font-weight: 400;
-						color: #FD3331;
+						top: 15%;
+						left: 5%;
+						width: 90%;
+						height: 85%;
+						overflow: hidden;
+
+						.img {
+							position: absolute;
+							width: 100%;
+							height: 82.6%;
+						}
+
+						.imgtwo {
+							position: absolute;
+							width: 20%;
+							height: 82%;
+							left: -20%;
+							animation: shadowTwoMove 0.5s linear infinite;
+							animation-iteration-count: 1;
+						}
+
+						.imgone {
+							position: absolute;
+							left: 100%;
+							width: 100%;
+							height: 100%;
+							animation: shadowMove 0.5s linear infinite;
+							animation-iteration-count: 1;
+						}
+
+						&__content {
+							position: absolute;
+							top: 25%;
+							text-align: center;
+							width: 100%;
+							height: 100%;
+							font-size: 36rpx;
+							font-family: YouSheBiaoTiHei;
+							font-weight: 400;
+							color: #fff;
+						}
 					}
+
 				}
 
 				&-title {
@@ -374,20 +426,21 @@
 
 				&-ticket {
 					position: relative;
-					width: 96%;
-					height: 14vh;
-					margin-bottom: 2vh;
+					width: 73%;
+					height: 10vh;
+					margin-top: 2vh;
 
 					image {
 						position: absolute;
 						top: 0;
 						width: 100%;
-						height: 100%;
+						height: 95%;
 					}
 
 					&-info {
-						width: 100%;
-						height: 100%;
+						width: 90%;
+						height: 75%;
+						left: 5%;
 						position: absolute;
 						top: 0;
 						z-index: 5;
@@ -395,15 +448,15 @@
 						flex-direction: column;
 
 						.title {
-							font-size: 36rpx;
-							line-height: 36rpx;
-							font-weight: bold;
+							font-size: 30rpx;
+							line-height: 30rpx;
 							color: #FF6D2C;
-							margin-bottom: 2vh;
+							margin-top: 1vh;
+							margin-bottom: 1vh;
 						}
 
 						.serialNo {
-							font-size: 26rpx;
+							font-size: 24rpx;
 							color: #FF6D2C;
 						}
 
@@ -414,19 +467,26 @@
 				}
 
 				&-btn {
-					padding: 0 13%;
-					height: 8vh;
-					line-height: 8vh;
+					padding: 0 8%;
+					height: 7vh;
+					line-height: 7vh;
 					background: linear-gradient(0deg, #FF4924, #F9D448);
 					box-shadow: 0px 6px 9px 0px rgba(135, 19, 3, 0.49);
 					border-radius: 4vh;
 					text-align: center;
 					color: #FEFEFE;
 					font-size: 40rpx;
+					margin-top: 1vh;
 				}
 
 				.code {
 					padding: 0 20%;
+					height: 7vh;
+					line-height: 10vh;
+					text-align: center;
+					color: #FEFEFE;
+					font-family: YouSheBiaoTiHei;
+					font-size: 38rpx
 				}
 			}
 
@@ -474,4 +534,26 @@
 			text-align: center;
 		}
 	}
+
+	// 支付后移动动画
+	@keyframes shadowMove {
+		0% {
+			left: 0%;
+		}
+
+		100% {
+			left: 100%;
+		}
+	}
+
+	// 支付后移动动画
+	@keyframes shadowTwoMove {
+		0% {
+			left: -20%;
+		}
+
+		100% {
+			left: 100%;
+		}
+	}
 </style>