dy_app/src/pages/my/views/userInfo.vue

<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>