i

src/pages/users/bindPhone/index.vue

@@ -1,15 +1,166 @@
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script lang="ts" setup>
+import Taro from "@tarojs/taro";
+import { ref } from "vue";
+import { getVerifyCode, phoneLogin } from "@/api/user";
+import logoImg from "../../../static/logo.jpg";
 
-export default defineComponent({
-name: "index"
-})
+Taro.useLoad((options) => {
+    console.log(options);
+});
+
+const basicData = ref({
+    phone: "",
+    code: "",
+});
+
+const smsDisabled = ref(false);
+
+const smsStr = ref("获取验证码");
+
+// 获取验证码
+const getSmsCode = async () => {
+    if (
+        !/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
+            basicData.value.phone
+        )
+    )
+        return Taro.showToast({
+            title: "请输入正确的手机号码",
+            icon: "none",
+        });
+    await getVerifyCode({
+        phone: basicData.value.phone.toString(),
+    });
+    smsDisabled.value = true;
+    let time = 60;
+    const timer = setInterval(() => {
+        time--;
+        smsStr.value = `${time}s`;
+        if (time === 0) {
+            clearInterval(timer);
+            smsDisabled.value = false;
+            smsStr.value = "获取验证码";
+        }
+    }, 1000);
+};
+
+const login = async () => {
+    if (
+        !/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(
+            basicData.value.phone
+        )
+    )
+        return Taro.showToast({
+            title: "请输入正确的手机号码",
+            icon: "none",
+        });
+    if (!basicData.value.code)
+        return Taro.showToast({
+            title: "请输入验证码",
+            icon: "none",
+        });
+
+    const res = await phoneLogin({
+        Phone: basicData.value.phone,
+        Code: basicData.value.code,
+        Referee: Taro.getStorageSync("bind_id") || "",
+    });
+    Taro.showToast({
+        title: res.msg,
+        icon: "success",
+        duration: 2000,
+    });
+    Taro.setStorageSync("token", res.data.token);
+    setTimeout(() => {
+        Taro.removeStorageSync("bind_id");
+        Taro.switchTab({
+            url: "/pages/user/index",
+        });
+    }, 2000);
+};
 </script>
 
 <template>
-  $END$
+    <view class="wrapper">
+        <image src="../../../static/wechat_login.jpg" />
+        <view class="logo">
+            <image :src="logoImg" />
+            <view>捷兑通</view>
+        </view>
+        <view class="center">
+            <nut-form :model-value="basicData" ref="RefForm">
+                <nut-form-item label="手机号码：">
+                    <nut-input
+                        v-model="basicData.phone"
+                        class="nut-input-text"
+                        placeholder="请输入手机号码"
+                        type="text"
+                    />
+                </nut-form-item>
+                <nut-form-item label="验证码：">
+                    <view style="display: flex">
+                        <nut-input
+                            v-model="basicData.code"
+                            class="nut-input-text"
+                            placeholder="请输入验证码"
+                            type="text"
+                        />
+                        <nut-button
+                            size="mini"
+                            style="margin-left: 10px"
+                            @click="getSmsCode"
+                            :disabled="smsDisabled"
+                            >{{ smsStr }}</nut-button
+                        >
+                    </view>
+                </nut-form-item>
+                <nut-form-item>
+                    <nut-button type="primary" block @click="login"
+                        >登录</nut-button
+                    >
+                </nut-form-item>
+            </nut-form>
+        </view>
+    </view>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
+page {
+    background: #fff;
+}
 
-</style>
+.wrapper {
+    position: relative;
+
+    image {
+        width: 100%;
+        height: 838px;
+    }
+
+    .logo {
+        position: absolute;
+        top: 35%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+        font-size: 35px;
+        line-height: 70px;
+
+        image {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+        }
+    }
+
+    .center {
+        position: absolute;
+        top: 55%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        padding: 0px 10px;
+    }
+}
+</style>