Pad_New/src/pages/my/myInfo.vue

<template>
  <div class="page_myInfo">
    <div class="myInfoTitle">
      <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
      <span class="titleName">我的信息</span>
    </div>
    <div class="infoBox">
      <div class="infoBoxOne">
        <p>头像</p>
        <div class="infoBoxOneRight">
          <img v-if="roleInfo.avatar != ''" :src="roleInfo.avatar" alt />
          <img
            v-if="roleInfo.avatar == ''"
            src="../../assets/images/mydefault.png"
            alt
          />
          <van-icon class="arrow" name="arrow" />
        </div>
      </div>
      <div class="infoBoxTwo" @click="editName">
        <p>姓名</p>
        <div class="infoBoxOneRight">
          <p>{{ roleInfo.user_name }}</p>
          <van-icon class="arrow" name="arrow" />
        </div>
      </div>
      <div class="infoBoxTwo" @click="show = true">
        <p>性别</p>
        <div class="infoBoxOneRight">
          <p>{{ sex }}</p>
          <van-icon class="arrow" name="arrow" />
        </div>
      </div>
      <div class="infoBoxTwo" @click="show1 = true">
        <p>生日</p>
        <div class="infoBoxOneRight">
          <p>{{ birthday }}</p>
          <van-icon class="arrow" name="arrow" />
        </div>
      </div>
      <div class="infoBoxTwo" @click="toMyPersonalsign">
        <p>个性签名</p>
        <div class="infoBoxOneRight">
          <p>{{ roleInfo.message }}</p>
          <van-icon class="arrow" name="arrow" />
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <div>
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-picker
          :columns="columns"
          show-toolbar
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
      <van-popup v-model="show1" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="onCancelOne"
          @confirm="onConfirmOne"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getMyInforName, SaveSex, SaveBirthday } from "@/api/patient/patient";
import { uParseTime } from "@/utils/tools";
import { setRem } from "@/libs/functionRem";
export default {
  data() {
    return {
      sex: "",
      birthday: "",
      show: false,
      show1: false,
      columns: ["男", "女"],
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      roleInfo: {
        avatar: "",
        user_name: "",
        message: ""
      },
      admin_user_id: "",
      form: {
        sex: ""
      }
    };
  },
  methods: {
    getMyInforName(id) {
      getMyInforName(id).then(response => {
        if (response.data.state === 1) {
          var roleInfo = response.data.data.Rolename;
          var username = response.data.data.Username;
          if (roleInfo.sex === 1) {
            this.sex = "男";
          }
          if (roleInfo.sex === 2) {
            this.sex = "女";
          }
          this.birthday = this.getTime(roleInfo.birthday);
          this.roleInfo.user_name = roleInfo.user_name;
          this.roleInfo.avatar = roleInfo.avatar;
          this.roleInfo.message = roleInfo.message;
          if (roleInfo.user_name == "") {
            this.roleInfo.user_name = username.name;
          }
          this.userName = username;
        }
      });
    },
    toMyPersonalsign() {
      this.$router.push("/personalsign?id=" + this.admin_user_id);
    },
    editName() {
      this.$router.push("/editname?id=" + this.admin_user_id);
    },
    onConfirm(value) {
      if (value === "男") {
        this.form.sex = 1;
      }
      if (value === "女") {
        this.form.sex = 2;
      }

      SaveSex(this.form.sex, this.admin_user_id).then(response => {
        if (response.data.state === 1) {
          var role = response.data.data.role;
          this.sex = value;
          this.getMyInformation(this.admin_user_id);
        }
      });

      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
    onCancelOne() {
      this.show1 = false;
    },
    onConfirmOne(value) {
      let year = value.getFullYear();
      let month = value.getMonth() + 1;
      let day = value.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      this.birthday = `${year}-${month}-${day}`;
      const params = {
        birth: this.birthday,
        id: this.admin_user_id
      };
      SaveBirthday(params).then(response => {
        if (response.data.state === 1) {
          var role = response.data.data.role;
          this.birthday = this.birthday;
          this.getMyInformation(this.admin_user_id);
        }
      });
      this.show1 = false;
    },
    getTime(time) {
      if (time == 0) {
        return "";
      }
      // return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
      return uParseTime(time, "{y}-{m}-{d}");
    }
  },
  created() {
    setRem()
    var id = this.$route.query.id;
    this.admin_user_id = id;
    this.getMyInforName(id);
  }
};
</script>

<style lang="scss" scoped>
.page_myInfo {
  height: 100%;
  overflow-y: auto;
  background: #fafafa;
  .myInfoTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 7rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .infoBox {
    margin-top: 1rem;

    background: #fff;
    >div:last-child{
      border: none;
    }
    .infoBoxOne {
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 4.5rem;
      padding: 0 0.875rem;
      // box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid #e5e5e5;
      .infoBoxOneRight {
        display: flex;
        align-items: center;
        img {
          width: 2.5rem;
          height: 2.5rem;
        }
        .arrow {
          margin-left: 0.75rem;
          color: #9f9f9f;
        }
      }
    }
    .infoBoxTwo {
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 2.8125rem;
      padding: 0 0.875rem;
      // box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid #e5e5e5;
      .infoBoxOneRight {
        display: flex;
        align-items: center;
        p {
          width: 13.75rem;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          text-align: right;
        }
        .arrow {
          margin-left: 0.75rem;
          color: #9f9f9f;
        }
      }
    }
  }
  a {
    color: #000;
  }
}
</style>