wip: 登录页

src/components/MButton/index.vue

@@ -0,0 +1,14 @@
+<!--
+ * @Author: wjc
+ * @Date: 2024-06-11 17:38:37
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-06-11 17:39:00
+ * @Description: 
+-->
+<template>
+  <view></view>
+</template>
+
+<script setup lang="ts">
+  defineOptions({ name: 'MButton' })
+</script>

src/main.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-05-27 11:49:45
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-05 16:44:22
+ * @LastEditTime: 2024-06-11 10:21:38
  * @Description:
  */
 import { createSSRApp } from 'vue'
@@ -10,6 +10,8 @@ import * as Pinia from 'pinia'
 import uviewPlus from 'uview-plus'
 import 'virtual:uno.css'
 import { setupStores } from '@/stores'
+import '@/static/styles/vars.scss'
+import '@/static/styles/index.scss'
 
 import App from './App.vue'
 

src/pages.json

@@ -15,6 +15,18 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/login/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/privacy/index",
+			"style": {
+				"navigationBarTitleText": "绘管家个人信息保护政策"
+			}
+		},
 		{
 			"path": "pages/index/index",
 			"style": {

src/pages/login/components/privacy.vue

@@ -0,0 +1,41 @@
+<!--
+ * @Author: wjc
+ * @Date: 2024-06-06 16:27:16
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-06-11 17:39:16
+ * @Description: 
+-->
+<template>
+  <up-modal :show="show" class="" :z-index="99">
+    <view class="relative w-full h-450px">
+      <view class="text-16px font-600 text-center mb-30px">绘管家个人信息保护政策</view>
+      <web-view
+        src="https://app.huiguanjia.cn/privacy.html"
+        class="relative mt-30px h-400px"
+      ></web-view>
+    </view>
+    <template #confirmButton>
+      <view class="flex justify-between text-center gap-20px">
+        <view class="btn-default flex-1" @click="onNotAgree">不同意</view>
+        <view class="btn-primary flex-1" @click="onAgree">同意</view>
+      </view>
+    </template>
+  </up-modal>
+</template>
+
+<script setup lang="ts">
+  defineOptions({ name: 'PrivacyModal' })
+
+  const show = ref(true)
+
+  const onNotAgree = () => {
+    show.value = false
+  }
+  const onAgree = () => {
+    uni.navigateTo({
+      url: '/pages/privacy/index',
+    })
+  }
+
+  onMounted(() => {})
+</script>

src/pages/login/index.vue

@@ -0,0 +1,134 @@
+<!--
+ * @Author: wjc
+ * @Date: 2024-06-06 14:51:25
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-06-11 17:33:05
+ * @Description: 
+-->
+<template>
+  <view class="login-container">
+    <view class="header">
+      <image :src="logo" class="logo"></image>
+      <view class="title">欢迎登录绘管家</view>
+      <view class="desc">可使用企业号、账号密码登录</view>
+    </view>
+    <view class="form">
+      <up-form ref="formRef" :model="formState" :rules="rules" error-type="toast">
+        <up-form-item prop="entCode">
+          <up-input v-model="formState.entCode" border="none" placeholder="请输入企业号"></up-input>
+        </up-form-item>
+        <up-form-item prop="account">
+          <up-input v-model="formState.account" border="none" placeholder="请输入账号"></up-input>
+        </up-form-item>
+        <up-form-item prop="password">
+          <up-input
+            v-model="formState.password"
+            border="none"
+            type="password"
+            placeholder="请输入密码"
+          ></up-input>
+        </up-form-item>
+      </up-form>
+      <view class="flex items-center color-gray text-14px mt-24px mb-24px">
+        <up-checkbox
+          shape="circle"
+          name="isCheck"
+          :checked="formState.isCheck"
+          label="我已阅读同意"
+          :label-size="14"
+        ></up-checkbox>
+        <text class="font-500 color-black" @click="goPrivacy">《绘管家个人信息保护政策》</text>
+      </view>
+      <up-button type="primary" class="btn-primary" @click="onSubmit">登录</up-button>
+    </view>
+    <view class="footer">
+      <view>绘管家</view>
+      <view>2016-{{ new Date().getFullYear() }} Ⓒ 海南智慧城科技有限公司</view>
+      <view>琼ICP备18001846号-4A</view>
+    </view>
+    <PrivacyModal></PrivacyModal>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import logo from '@/static/images/logo.png'
+  import PrivacyModal from './components/privacy.vue'
+
+  defineOptions({ name: 'Login' })
+
+  const formRef = ref(null)
+  const formState = ref({
+    entCode: '',
+    account: '',
+    password: undefined,
+    isCheck: false,
+  })
+  const rules = ref({
+    entCode: {
+      type: 'number',
+      required: true,
+      message: '请输入企业号',
+      trigger: ['blur', 'change'],
+    },
+    account: {
+      type: 'number',
+      required: true,
+      message: '请输入账号',
+      trigger: ['blur', 'change'],
+    },
+    password: {
+      type: 'number',
+      required: true,
+      message: '请输入密码',
+      trigger: ['blur', 'change'],
+    },
+  })
+
+  const goPrivacy = () => {
+    uni.navigateTo({ url: '/pages/privacy/index' })
+  }
+  const onSubmit = () => {
+    formRef.value
+      .validate()
+      .then((valid) => {
+        if (valid) {
+          console.log(124)
+        }
+      })
+      .catch(() => {
+        // 处理验证错误
+      })
+  }
+</script>
+
+<style scoped lang="scss">
+  .login-container {
+    @apply h-full p-24px;
+    background: url('@/static/images/login/bg.png') no-repeat;
+    background-size: contain;
+    .header {
+      @apply mt-140px;
+      .logo {
+        @apply wh-60px;
+      }
+      .title {
+        @apply text-30px mt-20px mb-10px;
+      }
+      .desc {
+        @apply text-16px color-gray;
+      }
+    }
+    .form {
+      @apply my-24px;
+      .u-form {
+        @apply flex flex-col gap-18px;
+        .u-form-item {
+          @apply bg-bg-page rounded-20px px-16px;
+        }
+      }
+    }
+    .footer {
+      @apply text-12px text-center color-gray;
+    }
+  }
+</style>

src/pages/privacy/index.vue

@@ -0,0 +1,14 @@
+<!--
+ * @Author: wjc
+ * @Date: 2024-06-11 14:24:46
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-06-11 14:55:30
+ * @Description: 
+-->
+<template>
+  <web-view src="https://app.huiguanjia.cn/privacy.html"></web-view>
+</template>
+
+<script setup lang="ts">
+  defineOptions({ name: 'Privacy' })
+</script>

src/pages/splash/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-05 15:04:50
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-05 17:27:16
+ * @LastEditTime: 2024-06-06 15:23:27
  * @Description: 
 -->
 <template>
@@ -10,7 +10,13 @@
     <template v-if="isInstall">
       <image :src="splash" class="splash-img"></image>
     </template>
-    <up-swiper v-else :list="list" height="100vh" :autoplay="false"></up-swiper>
+    <up-swiper
+      v-else
+      :list="list"
+      height="100vh"
+      :autoplay="false"
+      @click="onTapSwiper"
+    ></up-swiper>
   </view>
 </template>
 
@@ -27,6 +33,24 @@
   const userStore = useUserStore()
   const isInstall = computed(() => userStore.isInstall)
   const list = ref([guide1, guide2, guide3])
+
+  const onTapSwiper = (index: number) => {
+    if (index === 2) {
+      uni.navigateTo({
+        url: '/pages/login/index',
+      })
+    }
+  }
+
+  onMounted(() => {
+    if (isInstall.value) {
+      setTimeout(() => {
+        uni.navigateTo({
+          url: '/pages/login/index',
+        })
+      }, 2000)
+    }
+  })
 </script>
 
 <style scoped lang="scss">

src/static/styles/comm.scss

@@ -0,0 +1,7 @@
+.btn-default {
+  @apply rounded-20px text-16px p-12px bg-bg-page;
+}
+
+.btn-primary {
+  @apply rounded-20px text-16px p-12px bg-bg-primary color-white;
+}

src/static/styles/index.scss

@@ -0,0 +1 @@
+@import './comm';

src/static/styles/vars.scss

@@ -0,0 +1,10 @@
+:root {
+  --color-primary: #0f67f8;
+  --color-success: #10b86f;
+  --color-warning: #ffa800;
+  --color-danger: #ff495e;
+  --color-error: #ff495e;
+  --color-info: #26a2fa;
+
+  --bg-page: #f1f1f3;
+}

src/stores/modules/userStore.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-05 17:13:30
  * @LastEditors: wjc
- * @LastEditTime: 2024-06-05 17:19:23
+ * @LastEditTime: 2024-06-06 15:23:42
  * @Description:
  */
 import { defineStore } from 'pinia'

uno.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2023-05-07 20:59:28
  * @LastEditors: wjc
- * @LastEditTime: 2024-05-29 11:11:07
+ * @LastEditTime: 2024-06-11 15:11:30
  * @Description:
  */
 import {
@@ -67,12 +67,12 @@ export default defineConfig({
       xl: '1920px',
     },
     colors: {
-      primary: 'var(--primary-color)',
-      success: 'var(--success-color)',
-      warning: 'var(--warning-color)',
-      danger: 'var(--danger-color)',
-      error: 'var(--error-color)',
-      info: 'var(--info-color)',
+      primary: 'var(--color-primary)',
+      success: 'var(--color-success)',
+      warning: 'var(--color-warning)',
+      danger: 'var(--color-danger)',
+      error: 'var(--color-error)',
+      info: 'var(--color-info)',
       color: {
         '1': 'var(--text-color-1)',
         '2': 'var(--text-color-2)',
@@ -92,7 +92,7 @@ export default defineConfig({
         place: 'var(--text-color-place)',
         divider: 'var(--bg-divider)',
         overlay: 'var(--bg-overlay)',
-        primary: 'var(--primary-color)',
+        primary: 'var(--color-primary)',
       },
     },
   },