初始提交

src/pages/my/views/userInfo.vue

@@ -0,0 +1,182 @@
+<template>
+  <van-config-provider :theme-vars="themeVars">
+    <div style="padding-top: 13vw">
+      <TopNav navTitle="个人信息" />
+      <div class="user_function_box">
+        <div
+          class="user_function_item"
+          v-for="(item, index) in functionList.list"
+          :key="index"
+        >
+          <span class="function_title">{{ item.name }}</span>
+          <van-image
+            width="45px"
+            height="45px"
+            fit="contain"
+            :src="item.message"
+            v-if="item.isImg"
+          >
+            <template v-slot:loading>
+              <van-loading type="spinner" size="20" />
+            </template>
+            <!-- <template v-slot:error>图片加载失败</template> -->
+          </van-image>
+          <van-field
+            v-model="item.message"
+            input-align="right"
+            :readonly="item.readonly"
+            v-else
+          />
+        </div>
+      </div>
+      <div style="margin: 10vw 3vw" @click="onClickSave">
+        <van-button type="primary" round block>保存</van-button>
+      </div>
+    </div>
+  </van-config-provider>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import TopNav from "../../../components/topNav.vue";
+import { hintToast } from "../../../utils/tools.js";
+const themeType = ref(getStorage("themeSetting"));
+const themeVars = ref({
+  cellBackgroundColor: themeType.value == "light" ? "#fff" : "#092556",
+  fieldInputTextColor: themeType.value == "light" ? "#333" : "#fff",
+});
+//功能模块
+const functionList = reactive({
+  list: [
+    {
+      name: "姓名",
+      message: "警官",
+      readonly: true,
+    },
+    {
+      name: "照片",
+      message: require("../../../assets/images/tx.png"),
+      isImg: true,
+    },
+    {
+      name: "性别",
+      message: "男",
+      readonly: true,
+    },
+    {
+      name: "座机电话",
+      message: "02812345678",
+      readonly: false,
+    },
+    {
+      name: "手机",
+      message: "13612345678",
+      readonly: false,
+    },
+    {
+      name: "组织机构",
+      message: "测试部门",
+      readonly: true,
+    },
+    {
+      name: "警号",
+      message: "121380",
+      readonly: true,
+    },
+  ],
+});
+onMounted(() => {
+  let user = JSON.parse(getStorage("userInfo"));
+  functionList.list.forEach((item) => {
+    switch (item.name) {
+      case "姓名":
+        item.message = user.userName;
+        break;
+      case "性别":
+        if (user.sex == 1) {
+          item.message = "男";
+        } else if (user.sex == 2) {
+          item.message = "女";
+        } else {
+          item.message = "未知";
+        }
+        break;
+      case "座机电话":
+        item.message = user.telePhone;
+        break;
+      case "手机":
+        item.message = user.mobile;
+        break;
+      case "组织机构":
+        item.message = user.deptName;
+        break;
+      case "警号":
+        item.message = user.inDustRialId;
+        break;
+    }
+  });
+});
+
+//保存
+function onClickSave() {
+  hintToast("保存成功")
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../assets/styles/mixin.scss";
+
+.user_function_box,
+.user_box {
+  @include font_color($font-color-theme);
+}
+
+.user_box {
+  // background: url('../../../assets/images/my-info-bg@2x.png') no-repeat;
+  // background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  padding: 4vw 3vw;
+  margin: 3vw;
+  border-radius: 5px;
+  @include user_function_item_color($user-function-item-theme);
+  .user {
+    display: flex;
+    flex-direction: column;
+    margin-left: 3vw;
+    .user_name {
+      @include font_size($font_large_s);
+    }
+    .user_dep {
+      @include font_size($font_medium_s);
+      margin-top: 2vw;
+    }
+  }
+}
+
+.user_function_box {
+  margin-bottom: 10vw;
+  @include user_function_item_color($user-function-item-theme);
+  @include font_size($font_medium_s);
+  padding: 2vw 3vw;
+  margin: 3vw;
+  border-radius: 5px;
+  .user_function_item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @include item_bottom_color($bottom-border-top-clore-theme);
+    padding: 2vw 0;
+    .function_title {
+      width: 22vw;
+    }
+  }
+  .user_function_item:last-child {
+    border-bottom: none;
+  }
+}
+::v-deep .van-field__control--right {
+  @include font_size($font_medium_s);
+}
+</style>