1.新增红包领取页面;

src/pages.json

@@ -341,7 +341,15 @@
 				"navigationBarBackgroundColor":"#01CB88",
 				"enablePullDownRefresh": false
 			}
-
+		},
+		{
+			"path": "pages/ReceiveMoney/ReceiveMoney",
+			"style": {
+				"navigationBarTitleText": "领取红包",
+				 "navigationStyle":"custom",
+				"enablePullDownRefresh": false
+			}
+		
 		}
 	],
 	"globalStyle": {

src/pages/ReceiveMoney/ReceiveMoney.vue

+<template>
+	<view class="contaner">
+		<view class="headerbox">
+			<image src="../../static/ReceiveMoney.png" mode="aspectFit"></image>
+		</view>
+		<view class="LoginBox">
+			<view class="phon">
+				<input type="number" class="phonNumber" :adjust-position="true" maxlength="11" v-model="phonNumber"
+					value="" placeholder="请输入手机号" placeholder-class="placeholder" />
+			</view>
+			<view class="VerificationCode">
+				<input type="number" class="code" value="" :adjust-position="true" maxlength="6"
+					v-model="VerificationCode" placeholder="请输入验证码" placeholder-class="placeholder" />
+				<view class="sendBtn" @click="getVerificationCode">
+					{{timer?second+'s后获取':'获取验证码'}}
+				</view>
+			</view>
+			<view class="ReceiveMoney" @tap="ReceiveMoney">
+				领取红包
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "ReceiveMoney",
+		data() {
+			return {
+				phonNumber: "",
+				VerificationCode: "",
+				timer: null,
+				second: 3
+			}
+		},
+		methods: {
+			// 获取验证码
+			async getVerificationCode() {
+				try {
+					if (!this.phonNumber) {
+						this.$toast("请输入手机号码!");
+						return
+					}
+					if (this.timer) {
+						return
+					}
+					this.$toast.loading({
+						duration: 0,
+						message: '请稍后...',
+						forbidClick: true,
+						loadingType: 'spinner',
+					});
+					this.timer = setInterval(() => {
+						this.second--;
+						if (!this.second) {
+							clearInterval(this.timer);
+							// 手动清除 Toast
+							this.$toast.clear();
+							this.second = 60
+							this.timer = null
+						}
+					}, 1000);
+				} catch (e) {
+					//TODO handle the exception
+					console.log(e);
+				}
+			},
+			// 验证手机号码领取红包
+			async ReceiveMoney() {
+				try {
+					if (!this.phonNumber) {
+						this.$toast("请输入手机号码!");
+						return
+					}
+					if (!this.VerificationCode) {
+						this.$toast("请输入验证码!");
+						return
+					}
+					this.$toast.loading({
+						duration: 3000,
+						message: '请稍后...',
+						forbidClick: true,
+						loadingType: 'spinner',
+					});
+					await new Promise((res, rej) => {
+						setTimeout(() => {
+							res()
+						}, 3000)
+					})
+					await this.$dialog.alert({
+						title: '系统提示',
+						message: '领取成功!',
+						theme: 'round-button',
+					});
+					if (typeof WeixinJSBridge !== 'undefined') {
+						WeixinJSBridge.call('closeWindow');
+					} else {
+						window.opener = null;
+						window.close()
+					}
+				} catch (e) {
+					//TODO handle the exception
+					console.warn("----", e);
+				}
+			}
+
+		}
+	}
+</script>
+
+<style>
+	page {
+		width: 750pxr;
+		height: 100vh;
+		background: linear-gradient(0deg, #790003 0%, #BD000B 100%);
+		position: relative;
+	}
+
+	.headerbox {
+		width: 750rpx;
+		height: 268rpx;
+	}
+
+	.headerbox image {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+
+	.LoginBox {
+		width: 570rpx;
+		height: 450rpx;
+		margin: 0 auto;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 404rpx;
+	}
+
+	.placeholder {
+		/* width: 310rpx; */
+		font-size: 30rpx;
+		font-family: Source Han Sans CN;
+		font-weight: 400;
+		color: #999999;
+		/* padding-left: 31rpx; */
+	}
+
+	.phonNumber {
+		/* width: 570rpx; */
+		height: 100rpx;
+		background: #FFFFFF;
+		border-radius: 8rpx;
+		padding-left: 31rpx;
+	}
+
+	.VerificationCode {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 50rpx;
+	}
+
+	.code {
+		width: 350rpx;
+		height: 100rpx;
+		background: #FFFFFF;
+		border-radius: 8rpx;
+		padding-left: 31rpx;
+	}
+
+	.sendBtn {
+		width: 170rpx;
+		height: 100rpx;
+		background: #FFE49C;
+		border-radius: 8rpx;
+		line-height: 100rpx;
+		text-align: center;
+		font-size: 28rpx;
+		font-family: Source Han Sans CN;
+		font-weight: 400;
+		color: #222222;
+	}
+
+	.ReceiveMoney {
+		width: 570rpx;
+		height: 100rpx;
+		background: #FFC948;
+		border-radius: 8rpx;
+		line-height: 100rpx;
+		text-align: center;
+		font-size: 36rpx;
+		font-family: Source Han Sans CN;
+		font-weight: 500;
+		color: #222222;
+		margin-top: 100rpx;
+	}
+</style>