将调试内容抽离出Component

miniprogram/src/components/DebugComp.vue

@@ -0,0 +1,49 @@
+<template>
+  <view v-if="debugMode">
+    <button @tap='debugCleanCache'>清除缓存</button>
+    <textarea maxlength="-1" disabled="true" auto-height="true" :value="debugText"></textarea>
+  </view>
+</template>
+
+<script>
+import Taro from '@tarojs/taro'
+import { eventCenter, getCurrentInstance } from '@tarojs/taro'
+
+export default {
+  data() {
+    return {
+      userInfo: null,
+      debugMode: Taro.getApp().globalData.debugMode,
+      debugText: "",
+    }
+  },
+  mounted() {
+    eventCenter.once(getCurrentInstance().router.onShow, () => {
+      this.userInfo = Taro.getStorageSync("userInfo");
+      this.displayUsername = this.userInfo?.username ?? "请登录";
+      this.debugText = JSON.stringify({
+        "TARO_ENV": process.env.TARO_ENV,
+        // "isVisitor": this.isVisitor,
+        // "isUser": this.isUser,
+        // "isAdmin": this.isAdmin,
+        "userInfo": this.userInfo || 'null'
+      }, null, 4)
+    })
+  },
+  methods: {
+    debugCleanCache() {
+      Taro.clearStorage({
+        success: function () {
+          Taro.showToast({
+            title: "成功",
+            icon: 'success'
+          })
+          Taro.reLaunch({
+            url: '/pages/index/index'
+          })
+        }
+      })
+    }
+  }
+}
+</script>

miniprogram/src/pages/index/index.vue

@@ -96,16 +96,14 @@
     </view>
   </view>
 
-  <view v-if="debugMode">
-    <button @tap='debugCleanCache'>清除缓存</button>
-    <text decode="nbsp">{{ debugText }}</text>
-  </view>
+  <DebugComp />
 </template>
 
 <script>
 import Taro from '@tarojs/taro'
 import { eventCenter, getCurrentInstance } from '@tarojs/taro'
 import ENUM from '../../utils/const.js'
+import DebugComp from '../../components/DebugComp.vue'
 
 import './index.css'
 
@@ -118,15 +116,15 @@ export default {
       isVisitor: false,
       isUser: false,
       isAdmin: false,
-      debugMode: Taro.getApp().globalData.debugMode,
-      debugText: "",
     }
   },
+  components: {
+    DebugComp
+  },
   mounted() {
     eventCenter.once(getCurrentInstance().router.onShow, () => {
       console.log('onShow')
       console.log("ENUM", ENUM)
-      console.log("debugMode", this.debugMode)
 
       this.userInfo = Taro.getStorageSync("userInfo");
       this.displayUsername = this.userInfo?.username ?? "请登录";
@@ -154,36 +152,14 @@ export default {
           "isUser", this.isUser,
           "isAdmin", this.isAdmin
         )
-        this.debugText = JSON.stringify({
-          "isVisitor": this.isVisitor,
-          "isUser": this.isUser,
-          "isAdmin": this.isAdmin,
-          "userInfo": this.userInfo
-        }, null, 4).replace(/[ ]/g, '&nbsp;&nbsp;')
       }
     })
   },
   methods: {
     goCode() {
-      // Taro.navigateTo({
-      //   url: '/pages/residents/code'
-      // })
       Taro.switchTab({
         url: '/pages/residents/code'
       })
-    },
-    debugCleanCache() {
-      Taro.clearStorage({
-        success: function () {
-          Taro.showToast({
-            title: "成功",
-            icon: 'success'
-          })
-          Taro.reLaunch({
-            url: '/pages/index/index'
-          })
-        }
-      })
     }
   }
 }

miniprogram/src/pages/index/login.vue

@@ -1,5 +1,4 @@
 <template>
-  <!--pages/login/login.wxml-->
   <view class="container">
     <view class="login-icon">
       <image class="login-img" src="../../image/icon/login-background.svg"></image>
@@ -7,9 +6,9 @@
     <view class="login-from">
       <view class="inputView">
         <!--账号-->
-        <input v-model="username" class="inputText" placeholder="账号" />
+        <input class="inputText" placeholder="账号" v-model="username" />
         <!--密码-->
-        <input v-model="password" class="inputText" placeholder="密码" password="true" />
+        <input class="inputText" placeholder="密码" v-model="password" password="true" />
       </view>
       <view class="loginBtnView">
         <!--按钮-->