ruoyi-miniapp/sub/owner/edit.vue

<template>
  <cs-page isCustom>
    <template #header>
      <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
        <u-icon name="arrow-left" v-if="form.mobile"></u-icon>
        <text class="wd-font-800 wd-text-16">编辑个人信息</text>
      </view>
    </template>
    <view class="container">
      <!-- 我的头像 -->
      <view class="section wd-flex wd-flex-row wd-justify-between wd-items-center">
        <text class="wd-font-800">我的头像</text>
        <button
          class="wd-flex wd-flex-row wd-items-center avatarBtn"
          style="gap: 8px"
          type="balanced"
          open-type="chooseAvatar"
          @chooseavatar="chooseAvatar"
        >
          <u-avatar :src="form.avatar"></u-avatar>
          <u-icon name="arrow-right"></u-icon>
        </button>
      </view>
      <!-- 真实姓名 -->
      <view class="section wd-flex wd-flex-row wd-justify-between wd-items-center">
        <text class="wd-font-800">姓名</text>
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
          <input
            class="wd-text-right"
            type="text"
            placeholder-class="txt"
            placeholder="请输入姓名"
            v-model="form.realName"
          />
          <u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
        </view>
      </view>
      <!-- 用户性别 -->
      <view class="section wd-flex wd-flex-row wd-justify-between wd-items-center">
        <text class="wd-font-800">性别</text>
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
          <input
            class="wd-text-right"
            type="number"
            placeholder-class="txt"
            placeholder="请选择性别"
            v-model="form.sex"
            disabled
            @click="showPicker()"
          />
          <u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
        </view>
      </view>
      <!-- 手机号码 -->
      <view class="section wd-flex wd-flex-row wd-justify-between wd-items-center">
        <text class="wd-font-800">手机号码</text>
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
          <input
            class="wd-text-right"
            type="number"
            placeholder-class="txt"
            placeholder="请输入手机号码"
            v-model="form.mobile"
          />
          <u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
        </view>
      </view>
      <!-- 所属部门 -->
      <view class="section wd-flex wd-flex-row wd-justify-between wd-items-center">
        <text class="wd-font-800">部门</text>
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
          <input
            class="wd-text-right"
            type="number"
            placeholder-class="txt"
            placeholder="请选择部门"
            v-model="form.dept"
            disabled
            @click="showPicker()"
          />
          <u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
        </view>
      </view>
      <!-- 身份 -->
      <view class="section wd-flex wd-flex-row wd-justify-between wd-items-center" @click="showPicker()">
        <text class="wd-font-800">角色</text>
        <view class="wd-flex wd-flex-row wd-items-center" style="gap: 8px">
          <text v-if="form.userType">{{ $dict.echoDicValue(dictMap.wx_user_type, form.userType) }}</text>
          <text class="placeholder" v-else>请选择角色</text>
          <u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
        </view>
      </view>
      <button class="button">提交</button>
    </view>
    <u-picker
      :show="picker.show"
      :columns="picker.columns"
      @cancel="closePicker"
      closeOnClickOverlay
      @close="closePicker"
    ></u-picker>
  </cs-page>
</template>

<script>
import { getUserProfile, uploadAvatar } from '@/api/system/user.js'
import { getDictBatchByType } from '@/api/system/dict.js'
export default {
  data() {
    return {
      dictMap: {},
      form: {
        avatar: undefined,
        realName: undefined,
        mobile: undefined,
        department: undefined,
        sex: undefined
      },
      picker: {
        show: false,
        colums: []
      }
    }
  },
  onLoad() {
    this.getDict()
  },
  onShow() {
    // this.init()
  },
  methods: {
    showPicker() {
      this.picker.show = true
    },
    closePicker() {
      this.picker = {
        show: false,
        colums: []
      }
    },
    init() {
      getUserProfile().then(res => {
        this.form = res.data
      })
    },
    getDict() {
      getDictBatchByType({ type: ['system_user_sex', 'wx_user_type'].join(',') }).then(res => {
        this.dictMap = res.data
      })
    },
    chooseAvatar(e) {
      const data = {
        name: 'avatarFile',
        filePath: e.detail.avatarUrl
      }
      uploadAvatar(data).then(res => {
        this.init()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  padding: 10px;
  position: relative;
  .section {
    border-radius: $cs-border-radius;
    background: #fff;
    box-shadow: 0 0 4px 2px $cs-shadow-color;
    margin-bottom: $cs-gap;
    padding: 24px;
  }
  .button {
    background-color: $uni-color-primary;
    color: #fff;
    border-radius: 30px;
    position: fixed;
    bottom: 30px;
    right: 10px;
    left: 10px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
  }
  .placeholder {
    color: $uni-text-color-grey;
  }
  button {
    padding-left: 0;
    padding-right: 0;
  }
  .avatarBtn {
    background-color: #fff;
    flex: 1;
    justify-content: flex-end;
    &::after {
      content: '';
      display: none;
    }
  }
}
</style>