menduner-uniapp/layout/components/authModal/necessaryInfo/index.vue

<!-- 校验是否完善人才必填信息 -->
<template>
  <scroll-view class="scrollBox" scroll-y="true">
    <view class="content">
      <view class="text-center font-size-20 color-primary MiSans-Medium" :class="{'ss-m-b-50': !wxLoginCode}">请完善您的基本信息</view>
      <view v-if="wxLoginCode" class="font-size-14 color-666 ss-m-b-50 ss-m-t-10 text-center">扫码登录网页时，需完善信息后方可授权成功！</view>
      <uni-forms
        ref="baseInfoRef"
        v-model="formData"
        :rules="formRules"
        validateTrigger="bind"
        label-width="86px"
        labelAlign="center"
      >
        <uni-forms-item label="头像" name="avatar" class="f-straight" required>
          <view style="display: flex;flex-wrap: wrap;">
            <view class="upload-img" v-if="formData?.avatar">
              <uni-icons size="35" type="clear" color="#fe574a" style="position: absolute;right: -15px; top: -15px; z-index: 9" @click="formData.avatar = ''"></uni-icons>
              <image :src="formData?.avatar" mode="contain" style="width: 200rpx;height: 200rpx;" @click="handlePreviewImage"></image>
            </view>
            <view v-else class="upload-file" @click="uploadPhotos">
              <uni-icons type="plusempty" size="50" color="#f1f1f1"></uni-icons>
            </view>
          </view>
        </uni-forms-item>
        <uni-forms-item name="name" label="姓名" required>
          <uni-easyinput placeholder="请输入姓名" v-model="formData.name" :inputBorder="false" type="text"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="sex" label="性别" required>
          <uni-data-picker v-model="formData.sex" :localdata="dictObj.sex" :clear-icon="false" popup-title="请选择性别" :map="{ text: 'label', value: 'value' }"></uni-data-picker>
        </uni-forms-item>
        <uni-forms-item name="phone" label="联系电话" required>
          <uni-easyinput placeholder="请输入联系电话" v-model="formData.phone" :inputBorder="false" type="number"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="email" label="常用邮箱" required>
          <uni-easyinput v-model="formData.email" placeholder="请输入常用邮箱" />
        </uni-forms-item>
        <uni-forms-item required label="出生日期" name="birthday">
          <uni-datetime-picker type="date" return-type="timestamp" v-model="formData.birthday" />
        </uni-forms-item>
        <uni-forms-item name="enterpriseName" label="任职企业名称" required>
          <uni-easyinput placeholder="请填写任职企业名称（可填暂无）" v-model="formData.enterpriseName" :clear-icon="true" type="text"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="positionName" label="任职职位名称" required>
          <uni-easyinput placeholder="请填写任职职位名称（可填暂无）" v-model="formData.positionName" :clear-icon="true" type="text"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="interestedPositionId" label="意向职位" required>
          <uni-data-picker v-model="formData.interestedPositionId" :localdata="dictObj.positionSecondData" :clear-icon="false" popup-title="请选择意向职位" :map="{ text: 'nameCn', value: 'id' }"></uni-data-picker>
        </uni-forms-item>
        <uni-forms-item name="jobStatus" label="求职状态" required>
          <uni-data-picker v-model="formData.jobStatus" :localdata="dictObj.jobStatus" :clear-icon="false" popup-title="请选择求职状态" :map="{ text: 'label', value: 'value' }"></uni-data-picker>
        </uni-forms-item>
        <uni-forms-item name="expType" label="工作经验" required>
          <uni-data-picker v-model="formData.expType" :localdata="dictObj.exp" :clear-icon="false" popup-title="请选择工作经验" :clear="false" :map="{ text: 'label', value: 'value' }"></uni-data-picker>
        </uni-forms-item>
        <uni-forms-item name="eduType" label="最高学历" required>
          <uni-data-picker v-model="formData.eduType" :localdata="dictObj.edu" :clear-icon="false" popup-title="请选择最高学历" :clear="false" :map="{ text: 'label', value: 'value' }"></uni-data-picker>
        </uni-forms-item>
      </uni-forms>
      <view class="f-horizon-center">
        <button type="primary" size="default" class="send-button" @click="submit">提 交</button>
      </view>
      <view class="f-horizon-center">
        <view class="changeRole" @tap="handleLogout">切换账号</view>
      </view>
    </view>
    <uni-popup ref="logoutPopup" type="dialog">
      <uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" title="系统提示" content="确认退出账号？" @confirm="handleLogoutConfirm" @close="handleLogoutClose">
      </uni-popup-dialog>
    </uni-popup>
  </scroll-view>
</template>
<script setup>
import { ref, unref, onMounted, nextTick } from 'vue'
import { mobile, emailRequired } from '@/utils/validate'
import { dictObj } from '@/utils/position.js'
import { savePersonSimpleInfo } from '@/api/user'
import { showAuthModal } from '@/hooks/useModal'
import { userStore } from '@/store/user'; const useUserStore = userStore()
import { uploadFile } from '@/api/file'
import { weixinLoginAuthorize } from '@/api/qrcodeLogin.js'

const wxLoginCode = uni.getStorageSync('wxLoginCode')
const baseInfoRef = ref()
const formData = ref({ // 必填项目
  name: null,
  sex: null,
  phone: null,
  email: null,
  birthday: '1990-01-01',
  enterpriseName: null,
  positionName: null,
  interestedPositionId: null,
  jobStatus: null,
  expType: null,
  eduType: null,
})

onMounted(() => {
  nextTick(() => {
    const baseInfo = useUserStore?.baseInfo || null
    if (baseInfo && Object.keys(baseInfo).length) {
      Object.keys(formData.value).forEach(key => {
        formData.value[key] = baseInfo[key] || baseInfo[key] === 0 ? baseInfo[key] : formData.value[key] ? formData.value[key] : null
      })
    }
    if (!formData.value.phone && useUserStore?.phone) formData.value.phone = useUserStore.phone
  })
})

const formRules = {
	avatar:{
		rules: [{required: true, errorMessage: '请上传头像' }]
	},
	name:{
		rules: [{required: true, errorMessage: '请输入姓名' }]
	},
  sex : {
    rules: [{required: true, errorMessage: '请选择您的性别' }]
  },
  phone: mobile,
  birthday:{
		rules: [{required: true, errorMessage: '请选择您的出生日期' }]
	},
  enterpriseName:{
		rules: [{required: true, errorMessage: '请填写任职企业名称（可填暂无）' }]
	},
  positionName:{
		rules: [{required: true, errorMessage: '请填写任职职位名称（可填暂无）' }]
	},
  email: emailRequired,
  expType: {
		rules: [{required: true, errorMessage: '请选择您的工作年限' }]
	},
  eduType: {
		rules: [{required: true, errorMessage: '请选择您的最高学历' }]
	},
  jobStatus: {
		rules: [{required: true, errorMessage: '请选择您的求职状态' }]
	}
}

const logoutPopup = ref()
// 退出登录
const handleLogout = () => {
  logoutPopup.value.open()
}
const handleLogoutClose = () => {
  logoutPopup.value.close()
}
const handleLogoutConfirm = async () => {
  await useUserStore.handleLogout()
  showAuthModal()
}

// 图片预览
const handlePreviewImage = () => {
  uni.previewImage({
    current: 0,
    urls: [formData.value.avatar]
  })
}
// 选择头像
const uploadPhotos = () => {
  wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function(res){
      const size = res.tempFiles[0]?.size || 0
      if (size >= 31457280) {
        uni.showToast({
          icon: 'none',
          title: '头像上传大小不得超过 20MB !',
          duration: 2000
        })
        return
      }
      const path = res.tempFilePaths[0]
      uploadFile(path, 'img').then(res => {
        formData.value.avatar = res.data
      }).catch(error => {
        uni.showToast({
          icon: 'error',
          title: '图片上传失败!',
          duration: 2000
        })
      })
    }
  })
}

const dealQuery = () => {
  const interestedList = [{ positionId: formData.value.interestedPositionId || null }]
  const workExpList = [{
    enterpriseName: formData.value.enterpriseName || null,
    positionName: formData.value.positionName || null,
  }]
  return { ...formData.value, interestedList, workExpList }
}

const handleRemove = () => {
  uni.removeStorageSync('wxLoginCode')
  setTimeout(() => {
		uni.switchTab({
			url: '/pages/index/my'
		})
	}, 2000)
}

// 微信扫码登录授权给pc
const handleWeiXinQrCodeAuthorize = async () => {
  if (!uni.getStorageSync('wxLoginCode')) {
    return uni.showToast({ title: '请重新扫码进行授权', icon: 'none', duration: 2000 })
  }
	try {
		await weixinLoginAuthorize({ uuid: uni.getStorageSync('wxLoginCode') })
		uni.showToast({ title: '授权网页登录成功', duration: 2000, icon: 'none' })
    handleRemove()
	} catch (error) {
    console.log(error, '授权接口error');
    handleRemove()
  }
}

const submit = async () => {
  const validate = await unref(baseInfoRef).validate()
  if (!validate) return uni.showToast({ title: '请将信息补充完整', icon: 'none' })
  
  try {
    const query = dealQuery()
    await savePersonSimpleInfo(query)
    uni.showToast({ title: '保存成功', icon: 'none' })
    await useUserStore.getInfo()
    // await useUserStore.getUserInfo()
	
    // 若是扫码登录且账号未注册的，注册后需授权给pc登录
    if (wxLoginCode) handleWeiXinQrCodeAuthorize()
  } catch (err) {
    uni.showToast({ title: err?.msg || '保存失败', icon: 'none' })
  }
}

</script>

<style lang="scss" scoped>
.scrollBox {
  width: 100vw;
  // height: 100vh;
  height: calc(100vh - 30rpx);
  margin-bottom: 30rpx;
}
.content {
  padding: 30rpx;
}

.changeRole {
  color: var(--color-666);
  font-size: 15px;
  line-height: 26px;
  margin-bottom: 40rpx;
}
.upload-img{
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  margin: 10rpx;
}
.upload-file{
  width: 200rpx;
  height: 200rpx;
  border: 1px solid #f1f1f1;
  margin: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
}
</style>