i

src/pages/users/login/index.vue

@@ -1,15 +1,89 @@
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script setup lang="ts">
+import Taro from "@tarojs/taro";
+import UserModal from "@/components/UserModal.vue";
+import { ref } from "vue";
+import logoImg from "../../../static/logo.jpg";
 
-export default defineComponent({
-name: "index"
-})
+const isShow = ref(false);
+
+const getCode = () => {
+    Taro.showLoading({
+        title: "授权中...",
+        mask: true,
+    });
+    Taro.login({
+        success: (res) => {
+            console.log(res);
+            Taro.setStorageSync("wx_code", res.code);
+            isShow.value = true;
+        },
+        complete: () => {
+            Taro.hideLoading();
+        },
+    });
+};
+
+const toPage = () => {
+    Taro.navigateTo({
+        url: "/pages/users/bindPhone/index?type=1",
+    });
+};
 </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-button type="success" @click="getCode">微信登录</nut-button>
+            <nut-button style="margin-top: 15px" @click="toPage"
+                >手机号登录</nut-button
+            >
+        </view>
+        <UserModal v-model:isShow="isShow" @closeEdit="isShow = false" />
+    </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: 50%;
+        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: 80%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        padding: 10px 100px;
+    }
+}
+</style>