支付宝适配

login/forget-pwd-step2-ali.vue

@@ -0,0 +1,127 @@
+<!-- 注册第2步 -->
+<template>
+  <u-form  ref="myForm">
+  	<view class="from">
+  		<u-form-item prop="phone">
+  			<view class="from_item" style="background-color: #f7f7f7">
+  				<text><text style="color: red"></text>手机号：</text>
+  				<u-input v-model="phone" :disabled="true" class="input" />
+  			</view>
+  		</u-form-item>
+  		<u-form-item prop="code">
+  			<view class="from_item">
+  				<text><text style="color: red"></text>验证码：</text>
+  				<u-input v-model="code" placeholder="请输入验证码" class="input" />
+  				<view class="hint2">
+  					<view class="green">{{ codeDuration === 0 ? "" : codeDuration }}</view>
+  					<view class="grey" @click="sendRegisterCode">{{
+  				    codeDuration === 0 ? "发送验证码" : "秒后可重发"
+  				  }}</view>
+  				</view>
+  			</view>
+  		</u-form-item>
+  	</view>
+  </u-form>
+
+  <view class="btn">
+    <submit-button title="下一步" @submit="nextStep"></submit-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { msg, navTo } from "@/utils/utils";
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { request } from "@/utils/network/request";
+import { sendCode } from "@/utils/network/api.js";
+
+//上个界面传递的电话号码
+const phone = ref("");
+const code = ref(null);
+
+//倒计时时常
+const codeDuration = ref(0);
+let interval = null;
+
+onLoad((options) => {
+  phone.value = options.phone;
+  codeInterval();
+});
+
+/* 验证码倒计时 */
+const codeInterval = () => {
+  codeDuration.value = 60;
+  interval = setInterval(() => {
+    codeDuration.value--;
+    if (codeDuration.value === 0) {
+      if (interval) {
+        clearInterval(interval);
+        interval = null;
+      }
+    }
+  }, 1000);
+};
+
+/* 发送验证码 */
+const sendRegisterCode = () => {
+  if (codeDuration.value !== 0) {
+    return;
+  }
+  const options = {
+    type: 2,
+    data: { mobile: phone.value },
+    method: "POST",
+    showLoading: true,
+  };
+  request(sendCode, options).then((res) => {
+    msg("验证码发送成功！");
+    codeInterval();
+  });
+};
+
+/* 下一步 */
+const nextStep = () => {
+  if (!code.value) {
+    msg("请先输入验证码！");
+    return;
+  }
+  navTo(`/login/forget-pwd-step3?phone=${phone.value}&code=${code.value}`);
+};
+</script>
+
+<style lang="scss" scoped>
+.register-main {
+  border-top: 1rpx solid #dcdcdc;
+  padding: 78rpx 30rpx 50rpx;
+  .title {
+    font-size: 32rpx;
+    color: #333333;
+    font-weight: 600;
+  }
+  .hint {
+    font-size: 24rpx;
+    color: #999999;
+    margin-top: 20rpx;
+  }
+}
+.input-code {
+  margin: 100rpx -10rpx 0px;
+}
+.hint2 {
+  margin-top: 40rpx;
+  display: flex;
+  .green {
+    font-size: 28rpx;
+    color: #00b38b;
+  }
+  .grey {
+    font-size: 24rpx;
+    color: #999999;
+    margin-left: 16rpx;
+  }
+}
+
+.btn {
+  margin: 200rpx 40rpx 0px;
+}
+</style>

login/register-step2-ali.vue

@@ -0,0 +1,137 @@
+<!-- 注册第2步 -->
+<template>
+  <u-form  ref="myForm">
+  	<view class="from">
+  		<u-form-item prop="phone">
+  			<view class="from_item" style="background-color: #f7f7f7">
+  				<text><text style="color: red"></text>手机号：</text>
+  				<u-input v-model="phone" :disabled="true" class="input" />
+  			</view>
+  		</u-form-item>
+  		<u-form-item prop="code">
+  			<view class="from_item">
+  				<text><text style="color: red"></text>验证码：</text>
+  				<u-input v-model="code" placeholder="请输入验证码" class="input" />
+  				<view class="hint2">
+  					<view class="green">{{ codeDuration === 0 ? "" : codeDuration }}</view>
+  					<view class="grey" @click="sendRegisterCode">{{
+  				    codeDuration === 0 ? "发送验证码" : "秒后可重发"
+  				  }}</view>
+  				</view>
+  			</view>
+  		</u-form-item>
+  	</view>
+  </u-form>
+
+  <view class="btn">
+    <submit-button title="下一步" @submit="nextStep"></submit-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { msg, navTo } from "@/utils/utils";
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { request } from "@/utils/network/request";
+import { sendCode } from "@/utils/network/api.js";
+
+//上个界面传递的电话号码
+const phone = ref("");
+const code = ref(null);
+
+//倒计时时常
+const codeDuration = ref(0);
+let interval = null;
+
+onLoad((options) => {
+  phone.value = options.phone;
+  codeInterval();
+});
+
+/* 验证码倒计时 */
+const codeInterval = () => {
+  codeDuration.value = 60;
+  interval = setInterval(() => {
+    codeDuration.value--;
+    if (codeDuration.value === 0) {
+      if (interval) {
+        clearInterval(interval);
+        interval = null;
+      }
+    }
+  }, 1000);
+};
+
+/* 发送验证码 */
+const sendRegisterCode = () => {
+  if (codeDuration.value !== 0) {
+    return;
+  }
+  const options = {
+    type: 2,
+    data: { mobile: phone.value },
+    method: "POST",
+    showLoading: true,
+  };
+  request(sendCode, options).then((res) => {
+    msg("验证码发送成功！");
+    codeInterval();
+  });
+};
+
+/* 下一步 */
+const nextStep = () => {
+  if (!code.value) {
+    msg("请先输入验证码！");
+    return;
+  }
+
+  //TODO 目前后端规定验证码只能是123456，所以目前写死
+  navTo(`/login/register-step3?phone=${phone.value}&code=${code.value}`);
+  // navTo(`/login/register-step3?phone=${phone.value}&code=123456`);
+};
+</script>
+
+<style lang="scss" scoped>
+.register-main {
+  border-top: 1rpx solid #dcdcdc;
+  padding: 78rpx 30rpx 50rpx;
+  .title {
+    font-size: 32rpx;
+    color: #333333;
+    font-weight: 600;
+  }
+  .hint {
+    font-size: 24rpx;
+    color: #999999;
+    margin-top: 20rpx;
+  }
+}
+.input-code {
+  margin: 100rpx -10rpx 0px;
+  background: transparent !important;
+}
+::v-deep .flex-box .hide-input{
+	background: transparent !important;
+}
+::v-deep .code-box{
+	background: transparent !important;
+}
+.hint2 {
+  margin-top: 40rpx;
+  display: flex;
+  .green {
+    font-size: 28rpx;
+    color: #00b38b;
+  }
+  .grey {
+    font-size: 24rpx;
+    color: #999999;
+    margin-left: 16rpx;
+  }
+}
+
+.btn {
+  margin: 200rpx 40rpx 0px;
+}
+</style>