ykt-wxapp/pages/work/profile.vue

<template>
  <full-page>
    <view class="p-15">
      <view class="bg-white px-10 mb-10 rounded">
        <form-input :form="formData" required wordLimit="10" title="anotherName" name="姓名" @change="onChange($event)" />
        <common-cell title="avatar" name="头像">
          <view class="flex-grow flex items-center justify-end" @click="chooseAvatar()">
            <image v-if="formData.avatar" class="avatar mr-5 rounded-full" :src="formData.avatar" />
            <image v-else class="avatar mr-5 rounded-full" src="/static/default-avatar.png" />
            <uni-icons color="#999" type="right" size="16" />
          </view>
        </common-cell>
        <form-select :form="formData" name="性别" title="gender" :range="genderOptions" @change="onChange($event)" />
        <form-input :form="formData" disableChange wordLimit="11" title="mobile" name="手机号 (不可修改)" />
      </view>

      <view class="bg-white px-10 mb-10 rounded">
        <!-- 填写认证资料的时候岗位必填 -->
        <common-cell :required="type === 'cert'" title="avatar" name="岗位">
          <view class="flex-grow flex items-center justify-end" @click="selectJob()">
            <view v-if="jobStr" class="text-base text-base">{{ jobStr }}</view>
            <!-- <view class="mr-5 rounded-full" style="width: 64rpx;height: 64rpx;background: red;"></view> -->
            <uni-icons color="#999" type="right" size="16" />
          </view>
        </common-cell>
        <common-cell title="avatar" name="职称">
          <view class="flex-grow flex items-center justify-end">
            <!-- <view class="mr-5 rounded-full" style="width: 64rpx;height: 64rpx;background: red;"></view> -->
            <uni-icons color="#999" type="right" size="16" />
          </view>
        </common-cell>
        <common-cell title="avatar" name="科室">
          <view class="flex-grow flex items-center justify-end">
            <!-- <view class="mr-5 rounded-full" style="width: 64rpx;height: 64rpx;background: red;"></view> -->
            <uni-icons color="#999" type="right" size="16" />
          </view>
        </common-cell>
      </view>

      <view class="bg-white rounded">
        <form-textarea :border="false" :form="formData" title="intro" name="个人介绍" :wordLimit="300"
          @change="onChange($event)" />
      </view>
    </view>
    <template #footer>
      <button-footer :cancelText="cancelText" :confirmText="confirmText" @confirm="save()" @cancel="back()" />
    </template>
  </full-page>
</template>

<script setup>
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import useGuard from "@/hooks/useGuard.js";
import useAccountStore from "@/store/account.js";
import api from "@/utils/api.js";
import { upload } from "@/utils/http.js";
import { toast } from "@/utils/widget";

import buttonFooter from '@/components/button-footer.vue';
import commonCell from "@/components/form-template/common-cell.vue";
import FormInput from "@/components/form-template/form-cell/form-input.vue";
import FormSelect from "@/components/form-template/form-cell/form-select.vue";
import FormTextarea from "@/components/form-template/form-cell/form-textarea.vue";
import fullPage from '@/components/full-page.vue';

const { account, doctorInfo } = storeToRefs(useAccountStore());
const { useLoad, useShow } = useGuard();
const { getDoctorInfo } = useAccountStore();

const job = { assistant: '医生助理', doctor: '医生' };

const form = ref({});
const type = ref('');
const formData = computed(() => ({ ...(doctorInfo.value || {}), ...form.value, mobile: account.value?.mobile }));
const cancelText = computed(() => doctorInfo.value ? '取消' : '暂不填写');
const confirmText = computed(() => type.value === 'cert' ? '下一步' : '保存');
const jobStr = computed(() => {
  const jobs = formData.value && Array.isArray(formData.value.job) ? formData.value.job.filter(i => i === 'assistant' || i === 'doctor') : [];
  return jobs[0] && job[jobs[0]] ? job[jobs[0]] : '';
})

// 选项数据
const genderOptions = [
  { label: "男", value: "0" },
  { label: "女", value: "1" },
];

// 打开科室选择
const openDepartmentSelect = () => {
  uni.navigateTo({
    url: "/pages/work/department-select",
    events: {
      deptSelected: ({ name, deptId }) => {
        formData.value.department = name || "";
        formData.value.departmentName = name || "";
        formData.value.departmentId = deptId || "";
      },
    },
  });
};

function back() {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
  } else {
    uni.switchTab({
      url: "/pages/work/work",
    });
  }
}

function chooseAvatar() {
  uni.chooseImage({
    count: 1,
    success: async (res) => {
      const [path] = res.tempFilePaths;
      const url = await upload(path);
      if (url) {
        form.value.avatar = url;
      } else {
        toast('上传失败')
      }
    }
  })
}

function onChange({ title, value }) {
  form.value[title] = value
}

function selectJob() {
  uni.showActionSheet({
    itemList: ['医生', '医生助理', '无'],
    success: ({ tapIndex }) => {
      const job = ['doctor', 'assistant',][tapIndex];
      form.value.job = job ? [job] : [];
    }
  })
}

function toCert() {
  if (jobStr.value === '医生') {
    uni.navigateTo({
      url: '/pages/work/verify/doctor'
    })
  } else if (jobStr.value === '医生助理') {
    uni.navigateTo({
      url: '/pages/work/verify/assistant'
    })
  } else {
    toast('请选择岗位信息')
  }
}

async function save() {
  if (typeof formData.value.anotherName !== 'string' || !formData.value.anotherName.trim()) {
    return toast('请输入姓名')
  }
  if (type.value === 'cert' && !jobStr.value) {
    return toast('请选择岗位信息')
  }
  const apiName = doctorInfo.value ? 'updateCorpMemberFromWxapp' : 'addCorpMemberFromWxapp';
  const data = {
    ...form.value,
    weChatOpenId: account.value.openid,
    mobile: account.value.mobile,
    corpId: account.value.corpId,
  }
  if (doctorInfo.value) {
    data.id = doctorInfo.value._id;
  }
  const res = await api(apiName, data);
  if (res && res.success) {
    await getDoctorInfo()
    form.value = {};
    if (type.value === 'cert') {
      toCert()
    } else {
      await toast('保存成功');
      back()
    }
  } else {
    await toast(res?.message || '保存失败');
  }
}

useLoad(opts => {
  type.value = opts?.type;
})

useShow(() => {
  getDoctorInfo()
});

</script>

<style lang="scss" scoped>
.avatar {
  width: 64rpx;
  height: 64rpx;
}
</style>