YzXyh_v3/UI/XYH.APP/src/pages-sub/mine/profile/edit.vue

<script setup lang="ts">
import route from "@/route"
import appStore from "@/stores"
import apis from "@/api"
import type { AlumnusProfile } from "@/core/types"
//import { areaList } from "@vant/area-data"
import { areaList, useCascaderAreaData } from "@/core/config/area-data"
import { industryList, useCascaderIndustryData } from "@/core/config/industry-data"
const isAudit = computed(() => {
  return appStore.authStore.getAuditStatus() == 1 || form.value.auditStatus == 1
})
const progress = computed(() => {
  return appStore.amProfileStore.getProfileProgress() || 0
})

const formRef = ref()

const form = ref<AlumnusProfile>({
  gender: "0",
  type: "0",
  province: "江苏省",
  city: "盐城市",
  district: "亭湖区",
  amPublic: "0",
} as AlumnusProfile)
const birthday = ref()
const area = ref()
const industry = ref()

const amTypeItems = [
  { text: "我是校友", value: "0" },
  { text: "我是教职工", value: "1" },
  { text: "我是校友，也是教职工", value: "2" },
]

const formatOrgList = (data: any) => {
  const orgColumns: any = []
  if (data.length > 0) {
    data.forEach((v: any) => {
      if (v.parentId == 100) {
        orgColumns.push({ text: v.orgName, value: v.orgId })
      }
    })
  }
  return orgColumns
}
const yearColumns = computed(() => {
  const cols = []
  for (let i = new Date().getFullYear(); i >= 1950; i--) {
    cols.push({ text: i + "年", value: i })
  }
  return cols
})
const yearMonthColumns = computed(() => {
  const colList: any = [],
    cols1 = [],
    cols2 = []
  for (let i = new Date().getFullYear(); i >= 1950; i--) {
    let val = i + ""
    cols1.push({ text: val + "年", value: val })
  }
  for (let i = 1; i <= 12; i++) {
    let val = i + ""
    if (i < 10) {
      val = "0" + val
    }
    cols2.push({ text: val + "月", value: val })
  }
  colList.push(cols1)
  colList.push(cols2)
  return colList
})
const classColumns = computed(() => {
  const cols = []
  for (let i = 1; i <= 50; i++) {
    cols.push({ text: i + "班", value: i + "班" })
  }
  return cols
})
const areaColumns = [useCascaderAreaData()]
const industryColumns = [useCascaderIndustryData()]
const nativePlaceColumns = computed(() => {
  const arr = ["亭湖区", "盐都区", "大丰区", "东台市", "响水县", "滨海县", "阜宁县", "射阳县", "建湖县", "其他"]
  const cols: any[] = []
  arr.forEach((v) => {
    cols.push({ text: v, value: v })
  })
  return cols
})
const educationColumns = computed(() => {
  const arr = ["初中", "高中", "大专", "本科", "硕士", "博士", "博士后", "其他"]
  const cols: any[] = []
  arr.forEach((v) => {
    cols.push({ text: v, value: v })
  })
  return cols
})
const amPublicItems = [
  { text: "不公开个人隐私资料", value: "0" },
  { text: "公开个人隐私资料", value: "1" },
  { text: "对好友公开个人隐私资料", value: "2" },
]
function onOrgConfirm(v: string, data: any) {
  form.value.orgName = data.text
}
function onBirthdayConfirm(v: any) {
  form.value.birthday = v.join("-") + "-01"
  console.log("onBirthdayConfirm", v, form.value.birthday)
}

function onEnrolYearConfirm(v: any) {
  //console.log("onEnrolYearConfirm", v)
  if (new Date().getFullYear() - v > 3) {
    form.value.graduateYear = v + 3
  }
}

function onEnrolGraduateYearHide(v1: any, v2: Ref<boolean>) {
  v2.value = true
  if (form.value.enrolYear && form.value.graduateYear && form.value.graduateYear < form.value.enrolYear) {
    message.alert("毕业年份不能小于入学年份")
    v2.value = false
  }
}
function onAreaConfirm(v: any, data: any) {
  form.value.province = data[0].text
  form.value.city = data[1].text
  form.value.district = data[2].text
}
function onIndustryConfirm(v: any, data: any) {
  form.value.industry = data[0].text
  form.value.industryArea = data[1].text
}

function onBack() {
  if (appStore.authStore.getAuditStatus() != 1) {
    appStore.authStore.loadUserInfo().then(() => {
      route.reLaunch("welcome")
    })
  } else {
    route.back()
  }
}

function onSubmit() {
  formRef.value.validate().then(() => {
    console.log("values", form.value)
    appStore.amProfileStore.updateProfile(form.value)
  })
}

function loadProfile() {
  appStore.amProfileStore.loadProfile().then((res: any) => {
    form.value = reactive(Object.assign({}, form, res))
    if (!form.value.province) {
      form.value.province = "江苏省"
      form.value.city = "盐城市"
      form.value.district = "亭湖区"
    }
    formatArea()
    if (form.value.industry) {
      formatIndustry()
    }
    if (form.value.birthday) {
      const date = new Date(form.value.birthday)
      birthday.value = [date.getFullYear(), date.getMonth() + 1]
    }
  })
}

function formatArea() {
  const arr = []
  const val1 = Object.keys(areaList.province_list).find((p) => {
    return areaList.province_list[p] === form.value.province
  })
  const val2 = Object.keys(areaList.city_list).find((p) => {
    return areaList.city_list[p] === form.value.city
  })
  const val3 = Object.keys(areaList.county_list).find((p) => {
    return areaList.county_list[p] === form.value.district
  })
  arr.push(val1, val2, val3)
  area.value = arr
}

function formatIndustry() {
  const arr = []
  const val1 = Object.keys(industryList.industry_list).find((p) => {
    return industryList.industry_list[p] === form.value.industry
  })
  arr.push(val1)
  if (form.value.industryArea) {
    const val2 = Object.keys(industryList.area_list).find((p) => {
      return industryList.area_list[p] === form.value.industryArea
    })
    arr.push(val2)
  }

  industry.value = arr
}

onLoad(() => {
  loadProfile()
})
</script>

<template>
  <view class="page-container">
    <view v-if="!isAudit" class="text-danger" style="text-align: center; margin: 5px 0">完善资料，等待后台审核...</view>
    <view style="margin: 15px 0">
      <vb-progress :progress="progress" />
    </view>
    <uni-forms ref="formRef" :modelValue="form" :label-width="75" border validate-trigger="blur">
      <vb-cell-group outset>
        <uni-data-checkbox
          mode="list"
          icon="right"
          v-model="form.type"
          :localdata="amTypeItems"
          selectedColor="var(--vb-color)"
          selectedTextColor="var(--vb-color)"
        ></uni-data-checkbox>
      </vb-cell-group>
      <vb-cell-group outset>
        <uni-forms-item
          required
          label="校友会"
          name="orgId"
          :rules="[{ required: true, errorMessage: '请选择校友会' }]"
        >
          <vb-picker
            v-model="form.orgId"
            label="校友会"
            :columnsFun="apis.system.orgApi.listOrg"
            :formatter="formatOrgList"
            @confirm="onOrgConfirm"
          ></vb-picker>
        </uni-forms-item>
        <uni-forms-item required label="手机号码" name="phonenumber">
          <uni-easyinput
            type="text"
            v-model="form.phonenumber"
            disabled
            :inputBorder="false"
            placeholder="请输入手机号码"
          />
        </uni-forms-item>
        <uni-forms-item
          required
          label="用户姓名"
          name="name"
          :rules="[{ required: true, errorMessage: '请填写用户姓名' }]"
        >
          <uni-easyinput type="text" v-model="form.name" :inputBorder="false" placeholder="请填写真实姓名" />
        </uni-forms-item>
        <uni-forms-item required label="用户性别" name="gender">
          <uni-data-checkbox
            v-model="form.gender"
            :localdata="[
              { value: '0', text: '男' },
              { value: '1', text: '女' },
            ]"
            selectedColor="var(--vb-color)"
            selectedTextColor="var(--vb-color)"
          ></uni-data-checkbox>
        </uni-forms-item>
        <uni-forms-item
          required
          label="出生年月"
          name="birthday"
          :rules="[{ required: true, errorMessage: '请选择出生年月' }]"
        >
          <vb-picker-m
            v-model="birthday"
            label="出生年月"
            :columns="yearMonthColumns"
            @confirm="onBirthdayConfirm"
            splitString=""
          ></vb-picker-m>
        </uni-forms-item>
        <uni-forms-item
          required
          label="入学年份"
          name="enrolYear"
          :rules="[{ required: true, errorMessage: '请选择入学年份' }]"
        >
          <vb-picker
            v-model="form.enrolYear"
            label="入学年份"
            :columns="yearColumns"
            @confirm="onEnrolYearConfirm"
            @hide="onEnrolGraduateYearHide"
          ></vb-picker>
        </uni-forms-item>
        <uni-forms-item
          required
          label="毕业年份"
          name="graduateYear"
          :rules="[{ required: true, errorMessage: '请选择毕业年份' }]"
        >
          <vb-picker
            v-model="form.graduateYear"
            label="毕业年份"
            :columns="yearColumns"
            @hide="onEnrolGraduateYearHide"
          ></vb-picker>
        </uni-forms-item>
        <uni-forms-item
          required
          label="所在班级"
          name="amClass"
          :rules="[{ required: true, errorMessage: '请选择班级' }]"
        >
          <vb-picker v-model="form.amClass" label="班级" :columns="classColumns"></vb-picker>
        </uni-forms-item>
        <uni-forms-item
          required
          label="用户籍贯"
          name="nativePlace"
          :rules="[{ required: true, errorMessage: '请选择用户籍贯' }]"
        >
          <vb-picker v-model="form.nativePlace" label="用户籍贯" :columns="nativePlaceColumns"></vb-picker>
        </uni-forms-item>
        <uni-forms-item required label="所在地区" name="area">
          <vb-picker-m
            v-model="area"
            label="省市区"
            isCascade
            :columns="areaColumns"
            @confirm="onAreaConfirm"
          ></vb-picker-m>
        </uni-forms-item>
        <uni-forms-item required label="所在行业" name="area">
          <vb-picker-m
            v-model="industry"
            label="行业领域"
            isCascade
            :columns-size="2"
            :columns="industryColumns"
            @confirm="onIndustryConfirm"
          ></vb-picker-m>
        </uni-forms-item>
        <uni-forms-item
          required
          label="最高学历"
          name="education"
          :rules="[{ required: true, errorMessage: '请选择最高学历' }]"
        >
          <vb-picker v-model="form.education" label="最高学历" :columns="educationColumns"></vb-picker>
        </uni-forms-item>
      </vb-cell-group>
      <vb-cell-group outset>
        <uni-data-checkbox
          mode="list"
          icon="right"
          v-model="form.amPublic"
          :localdata="amPublicItems"
          selectedColor="var(--vb-color)"
          selectedTextColor="var(--vb-color)"
        ></uni-data-checkbox>
        <uni-forms-item label="电子邮箱" name="email">
          <uni-easyinput type="text" v-model="form.email" :inputBorder="false" placeholder="请输入电子邮箱" />
        </uni-forms-item>
        <uni-forms-item label="QQ" name="qq">
          <uni-easyinput type="text" v-model="form.qq" :inputBorder="false" placeholder="请输入QQ" />
        </uni-forms-item>
        <uni-forms-item label="微信" name="wechat">
          <uni-easyinput type="text" v-model="form.wechat" :inputBorder="false" placeholder="请输入微信" />
        </uni-forms-item>
        <uni-forms-item label="工作单位" name="workUnit">
          <uni-easyinput type="text" v-model="form.workUnit" :inputBorder="false" placeholder="请输入工作单位" />
        </uni-forms-item>
        <uni-forms-item label="岗位职务" name="position">
          <uni-easyinput type="text" v-model="form.position" :inputBorder="false" placeholder="请输入岗位职务" />
        </uni-forms-item>
      </vb-cell-group>
    </uni-forms>
    <uni-forms label-position="top">
      <vb-cell-group outset>
        <uni-forms-item label="自我介绍" name="selfIntroduction">
          <uni-easyinput
            type="textarea"
            autoHeight
            v-model="form.selfIntroduction"
            :inputBorder="false"
            placeholder="请输入自己的详细介绍"
          />
        </uni-forms-item>
      </vb-cell-group>
      <vb-cell-group outset>
        <uni-forms-item label="我的资源" label-position="top" name="resources">
          <uni-easyinput
            type="textarea"
            autoHeight
            v-model="form.resources"
            :inputBorder="false"
            placeholder="请输入能提供的资源"
          />
        </uni-forms-item>
      </vb-cell-group>
    </uni-forms>
    <view class="d-flex">
      <view style="width: 50%; margin-right: 10px">
        <vb-button v-if="isAudit" block plain @click="onBack">返回</vb-button>
      </view>
      <view style="width: 50%">
        <vb-button block @click="onSubmit">提交</vb-button>
      </view>
    </view>
  </view>
</template>