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="rule.anotherName.required" wordLimit="10" title="anotherName"
          :name="rule.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/home/avatar.svg" />
            <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="job" :name="rule.job.name">
          <picker mode="selector" :disable="rule.job.disable" :range="jobOptions" range-key="name"
            @change="changeJob($event)">
            <view class="flex-grow flex items-center justify-end">
              <view v-if="jobStr" class="text-base text-base">{{ jobStr }}</view>
              <uni-icons color="#999" type="right" size="16" />
            </view>
          </picker>
        </common-cell>
        <common-cell title="title" :name="rule.title.name">
          <picker mode="selector" :disable="rule.title.disable" :range="titleOptions" @change="changeTitle($event)">
            <view class="flex-grow flex items-center justify-end">
              <view class="text-base text-base">{{ formData.title }}</view>
              <uni-icons color="#999" type="right" size="16" />
            </view>
          </picker>
        </common-cell>
        <common-cell title="dept" :name="rule.dept.name">
          <view class="flex-grow flex items-center justify-end" @click="selectDept()">
            <view class="text-base text-base">{{ deptNames }}</view>
            <uni-icons color="#999" type="right" size="16" />
          </view>
        </common-cell>
      </view>

      <view class="bg-white rounded">
        <form-textarea autoHeight :border="false" :form="formData" title="memberTroduce" 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 { titleList } from "@/baseData";
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 jobOptions = [{ name: '医生', value: 'doctor' }, { name: '医生助理', value: 'assistant' }, { name: '无', value: '' }];
const titleOptions = [...titleList, '无'];

const form = ref({});
const inviteTeamId = 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 rule = computed(() => {
  if (
    doctorInfo.value &&
    ["verified", "verifying"].includes(doctorInfo.value.verifyStatus)
  ) {
    return {
      anotherName: { name: "姓名 (不可修改)", required: false, disabled: true },
      job: { name: "岗位 (不可修改)", disabled: true },
      title: { name: "职称 (不可修改)", disabled: true },
      dept: { name: "科室 (不可修改)", disabled: true },
    };
  }
  return {
    anotherName: { name: "姓名", required: true, disabled: false },
    job: { name: "岗位", disabled: false },
    title: { name: "职称", disabled: false },
    dept: { name: "科室", disabled: false },
  };
});
const deptNames = computed(() => {
  const hlwDepts = formData.value.hlwDepts || [];
  return hlwDepts.map(i => i && i.deptName ? i.deptName : '').filter(Boolean).join(',')
})

// 选项数据
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/home/work-home",
    });
  }
}

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 changeJob(e) {
  const data = jobOptions[e.detail.value];
  form.value.job = data.value;
}

function changeTitle(e) {
  const data = titleList[e.detail.value];
  form.value.title = data || '';
}

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("请选择岗位信息");
  }
}

function selectDept() {
  const eventName = `selectDept_${Date.now()}`
  const deptIds = (formData.value.hlwDepts || []).map(i => i.deptId).filter(Boolean).join(',')
  uni.navigateTo({
    url: `/pages/work/department-select?eventName=${eventName}&deptIds=${deptIds}`
  })
  uni.$once(eventName, data => {
    form.value.hlwDepts = data
  })
}

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;
  }
  if (inviteTeamId.value) {
    data.inviteTeamId = inviteTeamId.value;
  }
  const res = await api(apiName, data);
  if (res && res.success) {
    await getDoctorInfo({ withHlwDeptInfo: true });
    form.value = {};
    if (type.value === "cert") {
      toCert();
    } else {
      await toast("保存成功");
      back();
    }
  } else {
    await toast(res?.message || "保存失败");
  }
}

useLoad((opts) => {
  type.value = opts?.type;
  if (type.value === "joinTeam" && opts.teamId) {
    inviteTeamId.value = opts.teamId;
  }
});

useShow(() => {
  getDoctorInfo({ withHlwDeptInfo: true });
});
</script>

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