提交一波登录

wxmp/package.json

@@ -25,6 +25,7 @@
     "axios": "^0.27.2",
     "axios-miniprogram-adapter": "^0.3.5",
     "dayjs": "^1.11.7",
+    "pinia": "^2.0.28",
     "query-string": "^8.1.0",
     "vue": "^3.2.45",
     "vue-i18n": "^9.1.9"

wxmp/src/App.vue

@@ -97,4 +97,8 @@ export default {
   font-size: 14px;
 }
 
+.rtl {
+  direction: rtl;
+}
+
 </style>

wxmp/src/components/AiBottom.vue

@@ -41,7 +41,7 @@ export default {
     text-align: center;
     font-weight: 500;
     color: #FFFFFF;
-    background: #1365DD;
+    background: $uni-color-primary;
     box-shadow: inset 0 1px 0 0 #EEEEEE;
 
     &.circle {
@@ -57,4 +57,4 @@ export default {
     opacity: 0;
   }
 }
-</style>
+</style>

wxmp/src/components/AiItem.vue

@@ -49,21 +49,25 @@ export default {
 .AiItem {
   font-family: PingFangSC-Regular, PingFang SC;
 
+  .flex {
+    align-items: center;
+  }
+
   &.border {
     .normal {
-      border-bottom: 2px solid #ddd;
+      border-bottom: 1px solid #ddd;
     }
 
     .topLabel {
-      border-bottom: 2px solid #ddd;
+      border-bottom: 1px solid #ddd;
     }
   }
 
   .normal {
     width: 100%;
-    padding-right: 32px;
+    padding-right: 16px;
     box-sizing: border-box;
-    height: 112px;
+    height: 56px;
 
     .flexContent {
       max-width: 62vw;
@@ -92,7 +96,7 @@ export default {
     }
   }
 
-  ::v-deep.topLabel {
+  :deep(.topLabel) {
     padding: 32px 32px 32px 0;
 
     .labelPane {

wxmp/src/main.js

@@ -1,10 +1,12 @@
 import {createSSRApp} from "vue";
 import App from "./App.vue";
 import util from "./utils/util";
+import {createPinia} from "pinia/dist/pinia";
 
 export function createApp() {
   const app = createSSRApp(App);
   Object.keys(util).map(e => app.config.globalProperties[e] = util[e])
+  app.use(createPinia())
   return {
     app,
   };

wxmp/src/mods/AppAuth/AppAuth.vue

@@ -0,0 +1,61 @@
+<template>
+  <section class="AppAuth">
+    <ai-item label="头像">
+      <button class="avatarBtn" open-type="chooseAvatar" @chooseavatar="handleAvatar">
+        <image class="avatar" :src="form.avatar"/>
+      </button>
+    </ai-item>
+    <ai-item label="昵称">
+      <input type="nickname" v-model="form.name" placeholder="设置用户名" class="rtl"/>
+    </ai-item>
+    <ai-bottom text="登录" @click="handleSignIn"/>
+  </section>
+</template>
+
+<script>
+import {mainStore} from "../../utils/pinia";
+import AiItem from "../../components/AiItem";
+import AiBottom from "../../components/AiBottom";
+
+export default {
+  name: "AppAuth",
+  components: {AiBottom, AiItem},
+  appName: "用户登录",
+  data() {
+    return {
+      form: {
+        avatar: "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
+        name: ""
+      }
+    }
+  },
+  methods: {
+    handleAvatar({detail}) {
+      this.form.avatar = detail.avatarUrl
+    },
+    handleSignIn() {
+      this.store.getCode().then(code => this.store.getToken({...this.form, code})).then(() => uni.navigateBack())
+    }
+  },
+  setup() {
+    const store = mainStore()
+    return {store}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppAuth {
+  .w100 {
+    width: 100%;
+  }
+
+  .avatarBtn {
+    padding: 0;
+    width: initial;
+    height: 40px;
+    flex-shrink: 0;
+
+  }
+}
+</style>

wxmp/src/pages/AppMine.vue

@@ -1,17 +1,32 @@
 <template>
   <section class="AppMine">
-
+    <div class="flex center pad-16" @click="handleLogin">
+      <image class="avatar circle" :src="avatar"/>
+      <div class="mar-l8 fill bold">{{ userName }}</div>
+    </div>
   </section>
 </template>
 
 <script>
+import {mapState} from "pinia/dist/pinia";
+import {mainStore} from "../utils/pinia";
+
 export default {
   name: "AppMine",
   appName: "个人中心",
+  computed: {
+    ...mapState(mainStore, ["token", "user"]),
+    avatar: v => v.user.avatar || "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
+    userName: v => v.user.name || "微信用户(点击登录)"
+  },
   data() {
     return {}
   },
-  methods: {},
+  methods: {
+    handleLogin() {
+      uni.navigateTo({url: "/mods/AppAuth/AppAuth"})
+    }
+  },
   created() {
   }
 }

wxmp/src/utils/pinia.js

@@ -0,0 +1,46 @@
+import {defineStore} from "pinia/dist/pinia";
+import http from "./http";
+
+export const mainStore = defineStore('main', {
+  state: () => ({
+    user: {},
+    token: ""
+  }),
+  actions: {
+    getCode(count = 0) {
+      console.log("getCode:%s", count)
+      if (count > 3) {
+        return Promise.reject("无法获取code")
+      } else return new Promise((resolve, reject) => {
+        uni.login({
+          success: res => {
+            if (res?.code) {
+              resolve(res.code);
+            } else {
+              reject(res);
+            }
+          },
+          fail: () => resolve(this.getCode(++count))
+        })
+      })
+    },
+    getToken(params) {
+      http.post("/api/auth/token", null, {
+        withoutToken: true,
+        headers: {passport: "c799f2d92de34b97"},
+        params: {...params}
+      }).then(res => {
+        if (res?.data) {
+          this.token = res.data
+        }
+      })
+    },
+    getUserInfo() {
+      http.post("/api/user/info").then(res => {
+        if (res?.data) {
+          this.user = res.data
+        }
+      })
+    }
+  }
+})