refactor: ♻️ 重构我的页面部分内容

重构我的页面部分内容
2024-11-29 17:40:48 +08:00
parent dc856f9aa9
commit 6c3464a01b
4 changed files with 115 additions and 86 deletions
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -30,10 +30,16 @@
      </wd-form>
    </view>
    <view class="agreement-text">
-      登录即同意
-      <text class="link" clickable @click="goToUserAgreement">《用户协议》</text>
-      和
-      <text class="link" clickable @click="goToPrivacy">《隐私政策》</text>
+      <view class="agreement-links">
+        <text class="normal-text">登录即同意</text>
+        <text class="link" @click="goToUserAgreement">《用户协议》</text>
+        <text class="normal-text">和</text>
+        <text class="link" @click="goToPrivacy">《隐私政策》</text>
+      </view>
+      <view class="copyright">
+        <text class="copyright-text">Copyright © {{ getYear() }} 有来开源组织</text>
+        <text class="copyright-text">All Rights Reserved</text>
+      </view>
    </view>
  </view>
 </template>
@@ -88,6 +94,9 @@ const goToPrivacy = () => {
    url: "/pages/mine/privacy/index",
  });
 };
+const getYear = () => {
+  return new Date().getFullYear();
+};
 </script>

 <style lang="scss" scoped>
@@ -97,19 +106,46 @@ const goToPrivacy = () => {
  align-items: center;
  justify-content: center;
  height: calc(100vh - 50px);
-}
-.agreement-text {
-  position: fixed;
-  bottom: 30px;
-  width: 100%;
-  margin-top: 20px;
-  font-size: 12px;
-  color: #666;
-  text-align: center;
+  .agreement-text {
+    position: fixed;
+    right: 0;
+    bottom: 30px;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 20px;

-  .link {
-    color: #2979ff;
-    cursor: pointer;
+    .agreement-links {
+      margin-bottom: 8px;
+      font-size: 14px;
+      line-height: 1.5;
+
+      .normal-text {
+        color: #666;
+      }
+
+      .link {
+        padding: 0 2px;
+        color: #2979ff;
+
+        &:active {
+          opacity: 0.8;
+        }
+      }
+    }
+
+    .copyright {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .copyright-text {
+        font-size: 12px;
+        line-height: 1.5;
+        color: #999;
+      }
+    }
  }
 }
 </style>
--- a/src/pages/mine/about/index.vue
+++ b/src/pages/mine/about/index.vue
@@ -4,7 +4,7 @@
    <view class="logo-section">
      <image class="logo" src="/static/images/youlaiorg.png" mode="aspectFit" />
      <text class="app-name">vue-uniapp-template</text>
-      <text class="version">版本 1.0.0</text>
+      <text class="version">版本 {{ version }}</text>
    </view>

    <!-- 公司信息区域 -->
@@ -19,15 +19,6 @@
      <view class="list-header">
        <text class="header-title">优质项目</text>
      </view>
-      <view class="info-item">
-        <view class="item-content">
-          <text class="item-label">vue-uniapp-template</text>
-          <text class="item-desc">
-            基于 uni-app + Vue 3 + TypeScript 的项目，集成了 ESLint、Prettier、Stylelint、Husky 和
-            Commitlint 等工具，确保代码规范与质量。
-          </text>
-        </view>
-      </view>
      <view class="info-item">
        <view class="item-content">
          <text class="item-label">vue3-element-admin</text>
@@ -37,7 +28,15 @@
          </text>
        </view>
      </view>
-
+      <view class="info-item">
+        <view class="item-content">
+          <text class="item-label">vue-uniapp-template</text>
+          <text class="item-desc">
+            基于 uni-app + Vue 3 + TypeScript 的项目，集成了 ESLint、Prettier、Stylelint、Husky 和
+            Commitlint 等工具，确保代码规范与质量。
+          </text>
+        </view>
+      </view>
      <view class="info-item">
        <view class="item-content">
          <text class="item-label">youlai-boot</text>
@@ -57,15 +56,16 @@
  </view>
 </template>

-<script>
-export default {
-  name: "About",
-  methods: {
-    getYear() {
-      return new Date().getFullYear();
-    },
-  },
+<script lang="ts" setup>
+const version = ref("1.0.0");
+const getYear = () => {
+  return new Date().getFullYear();
 };
+onMounted(() => {
+  // #ifdef MP-WEIXIN
+  version.value = uni.getSystemInfoSync().appVersion;
+  // #endif
+});
 </script>

 <style lang="scss" scoped>
--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@@ -36,24 +36,24 @@
      <!-- 菜单列表 -->
      <view class="mt50rpx">
        <wd-cell-group border>
-          <wd-cell title="常见问题" icon="setting" @click="goToFAQ">
+          <wd-cell title="常见问题" icon="help-circle" @click="goToFAQ">
            <wd-icon name="arrow-right" />
          </wd-cell>
-          <wd-cell title="关于我们" icon="setting" clickable @click="goToAbout">
+          <wd-cell title="关于我们" icon="warning" clickable @click="goToAbout">
            <wd-icon name="arrow-right" />
          </wd-cell>
-          <wd-cell title="用户协议" icon="setting" clickable @click="goToUserAgreement">
+          <wd-cell title="用户协议" icon="user" clickable @click="goToUserAgreement">
            <wd-icon name="arrow-right" />
          </wd-cell>
-          <wd-cell title="隐私政策" icon="setting" clickable @click="goToPrivacy">
+          <wd-cell title="隐私政策" icon="folder" clickable @click="goToPrivacy">
            <wd-icon name="arrow-right" />
          </wd-cell>
-          <wd-cell title="网络检测" icon="setting" clickable @click="goToNetworkTest">
+          <wd-cell title="网络检测" icon="wifi" clickable @click="goToNetworkTest">
            <wd-icon name="arrow-right" />
          </wd-cell>
          <wd-cell
            title="清除缓存"
-            icon="setting"
+            icon="delete"
            :value="cacheSize"
            clickable
            @click="handleClearCache"
@@ -61,7 +61,7 @@
          <wd-cell title="应用设置" icon="setting" clickable @click="goToSettings">
            <wd-icon name="arrow-right" />
          </wd-cell>
-          <wd-cell title="退出登录" icon="setting" clickable @click="handleLogout">
+          <wd-cell title="退出登录" icon="logout" clickable @click="handleLogout">
            <wd-icon name="arrow-right" />
          </wd-cell>
        </wd-cell-group>
--- a/src/pages/mine/privacy/index.vue
+++ b/src/pages/mine/privacy/index.vue
@@ -14,51 +14,44 @@
  </view>
 </template>

-<script>
-export default {
-  name: "Privacy",
-  data() {
-    return {
-      privacyContent: [
-        {
-          title: "1. 信息收集",
-          content:
-            "我们可能收集您的基本信息（如设备信息、操作日志等）以提供更好的服务体验。我们承诺对这些信息进行严格保密，并只用于改善产品服务。",
-        },
-        {
-          title: "2. 信息使用",
-          content:
-            "收集的信息将用于：优化用户体验、提供客户支持、发送重要通知、保障账号安全等。未经您的同意，我们不会向第三方分享您的个人信息。",
-        },
-        {
-          title: "3. 信息安全",
-          content:
-            "我们采用业界标准的安全技术和程序来保护您的个人信息，防止未经授权的访问、使用或泄露。我们定期审查信息收集、存储和处理实践。",
-        },
-        {
-          title: "4. Cookie 使用",
-          content:
-            "我们使用 Cookie 和类似技术来提供、保护和改进我们的产品和服务。这些技术帮助我们了解用户行为，告诉我们哪些功能最受欢迎。",
-        },
-        {
-          title: "5. 第三方服务",
-          content:
-            "我们的应用可能包含第三方服务。这些第三方服务有自己的隐私政策，我们建议您查看这些政策。我们不对第三方的隐私实践负责。",
-        },
-        {
-          title: "6. 未成年人保护",
-          content:
-            "我们非常重视对未成年人个人信息的保护。若您是未成年人，请在监护人指导下使用我们的服务。如果您是监护人，当您对您所监护的未成年人的个人信息有疑问时，请联系我们。",
-        },
-        {
-          title: "7. 隐私政策更新",
-          content:
-            "我们可能会不时更新本隐私政策。当我们更新隐私政策时，我们会在本页面上发布更新后的版本并修改更新日期。建议您定期查看本页面。",
-        },
-      ],
-    };
+<script lang="ts" setup>
+const privacyContent = ref([
+  {
+    title: "1. 信息收集",
+    content:
+      "我们可能收集您的基本信息（如设备信息、操作日志等）以提供更好的服务体验。我们承诺对这些信息进行严格保密，并只用于改善产品服务。",
  },
-};
+  {
+    title: "2. 信息使用",
+    content:
+      "收集的信息将用于：优化用户体验、提供客户支持、发送重要通知、保障账号安全等。未经您的同意，我们不会向第三方分享您的个人信息。",
+  },
+  {
+    title: "3. 信息安全",
+    content:
+      "我们采用业界标准的安全技术和程序来保护您的个人信息，防止未经授权的访问、使用或泄露。我们定期审查信息收集、存储和处理实践。",
+  },
+  {
+    title: "4. Cookie 使用",
+    content:
+      "我们使用 Cookie 和类似技术来提供、保护和改进我们的产品和服务。这些技术帮助我们了解用户行为，告诉我们哪些功能最受欢迎。",
+  },
+  {
+    title: "5. 第三方服务",
+    content:
+      "我们的应用可能包含第三方服务。这些第三方服务有自己的隐私政策，我们建议您查看这些政策。我们不对第三方的隐私实践负责。",
+  },
+  {
+    title: "6. 未成年人保护",
+    content:
+      "我们非常重视对未成年人个人信息的保护。若您是未成年人，请在监护人指导下使用我们的服务。如果您是监护人，当您对您所监护的未成年人的个人信息有疑问时，请联系我们。",
+  },
+  {
+    title: "7. 隐私政策更新",
+    content:
+      "我们可能会不时更新本隐私政策。当我们更新隐私政策时，我们会在本页面上发布更新后的版本并修改更新日期。建议您定期查看本页面。",
+  },
+]);
 </script>

 <style lang="scss" scoped>