veterans_H5/h5_web/pages/evaluationIntention/evaluationIntention.vue

<!-- 自我评价和求职意向 -->
<template>
  <view class="evaluate-intention">
    <!-- 导航栏 -->
    <u-navbar
      class="evaluate-intention-bar"
      back-text=""
      title=""
      :background="{ backgroundColor: '#3D5D4C' }"
      title-color="#fff"
      back-icon-color="#fff"
    >
    </u-navbar>

    <view class="evaluate-intention-explain">
      <view>继续完善加分项</view>
      <view>据平台数据显示，完善后，被HR查看几率更高</view>
    </view>

    <!-- tab页 -->
    <view class="evaluate-intention-tabs">
      <view
        class="evaluate-intention-tabs-item"
        v-for="(item, index) in list"
        :key="index"
        :class="{ 'evaluate-intention-tabs-active': tabCur === index }"
        @click="tabCur = index"
      >
        {{ item.name }}
      </view>
    </view>

    <!-- 工作意向 -->
    <view class="evaluate-intention-intention" v-if="tabCur === 0">
      <u-form :model="intentionForm" ref="intentionForm" label-position="top">
        <u-form-item label="工作城市" prop="cityName" required>
          <u-input v-model="intentionForm.workCity" type="select" @click="workCityClick" placeholder="请选择工作城市" />
          <!-- <u-select v-model="cityShow" :list="cityList" @confirm="cityConfirm"></u-select> -->
          <city-select-unlimited v-if="cityShow" v-model="cityShow" :default-region="defaultRegion" @city-change="cityConfirm" />
        </u-form-item>
        <!-- <u-form-item label="期望职位" prop="position" required>
					<u-input v-model="intentionForm.position" type="select" @click="positionShow = true" placeholder="请选择期望职位"/>
					<u-select v-model="positionShow" :list="positionList" @confirm="positionConfirm"></u-select>
				</u-form-item>
				<u-form-item label="期望行业" prop="industry" required>
					<u-input v-model="intentionForm.industry" type="select" @click="industryShow = true" placeholder="请选择期望行业"/>
					<u-select v-model="industryShow" :list="industryList" @confirm="industryConfirm"></u-select>
				</u-form-item> -->
        <u-form-item label="最低薪资要求(k)" prop="expectedLowestSalary" required>
          <u-input v-model="intentionForm.expectedLowestSalary" type="select" @click="lowestsalaryShow = true" placeholder="请选择薪资要求" />
          <u-select
            v-model="lowestsalaryShow"
            :list="salaryList"
            @confirm="salaryLowestConfirm"
            :default-value="[Number(intentionForm.expectedLowestSalary) - 1]"
          ></u-select>
        </u-form-item>
        <u-form-item label="最高薪资要求(k)" prop="expectedHighestSalary" required>
          <u-input v-model="intentionForm.expectedHighestSalary" type="select" @click="highestSalaryShow = true" placeholder="请选择薪资要求" />
          <u-select
            v-model="highestSalaryShow"
            :list="salaryList"
            @confirm="salaryHighestConfirm"
            :default-value="[Number(intentionForm.expectedHighestSalary) - 1]"
          ></u-select>
        </u-form-item>
      </u-form>
      <view class="evaluate-intention-intention-submit">
        <u-button type="primary" class="btn" @click="submitIntention">开始找工作</u-button>
      </view>
      <view class="evaluate-intention-intention-explain">去完善项目经历，让更多HR看到你</view>
    </view>

    <!-- 自我评价 -->
    <view class="evaluate-intention-evaluate" v-else-if="tabCur === 1">
      <u-form :model="evaluateForm" ref="evaluateForm" label-position="top">
        <u-form-item label="自我评价">
          <u-input v-model="evaluateForm.content" type="textarea" :border="true" :height="150" :auto-height="true" />
        </u-form-item>
      </u-form>
      <view class="evaluate-intention-evaluate-submit">
        <u-button type="primary" class="btn" @click="submitEvaluation">提交</u-button>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { industry } from './industry.js';
import citySelectUnlimited from '../../uview-ui/components/u-city-select-unlimited/u-city-select-unlimited.vue';
export default {
  components: {
    citySelectUnlimited
  },
  data() {
    return {
      list: [
        {
          name: '期望薪资'
        },
        {
          name: '自我评价'
        }
      ],
      tabCur: 0,
      intentionForm: {
        provinceName: '',
        provinceId: '',
        cityName: '',
        cityId: '',
        areaName: '',
        areaId: '',
        // position: '',
        // positionId: '',
        // industry: '',
        // industryId: '',
        expectedLowestSalary: '',
        expectedHighestSalary: '',
        workCity: ''
      },
      defaultRegion: [],
      intentionRules: {
        cityName: [
          {
            required: true,
            message: '请选择您的工作城市',
            trigger: ['change', 'blur']
          }
        ],
        // position: [
        // 	{
        // 		required: true,
        // 		message: '请选择您的期望职位',
        // 		trigger: ['change', 'blur']
        // 	}
        // ],
        // industry: [
        // 	{
        // 		required: true,
        // 		message: '请选择您的期望行业',
        // 		trigger: ['change', 'blur']
        // 	}
        // ],
        expectedLowestSalary: [
          {
            required: true,
            message: '请选择您的最低薪资要求',
            trigger: ['change', 'blur']
          }
        ],
        expectedHighestSalary: [
          {
            required: true,
            message: '请选择您的最高薪资要求',
            trigger: ['change', 'blur']
          },
          {
            validator: (rule, value, callback) => {
              return Number(value) >= Number(this.intentionForm.expectedLowestSalary);
            },
            message: '最高薪资要求不能小于最低薪资要求',
            trigger: ['change', 'blur']
          }
        ]
      },
      // 城市下拉显示
      cityShow: false,
      // 职位下拉显示
      positionShow: false,
      // 职位列表
      positionList: [
        {
          value: 1,
          label: '保安'
        },
        {
          value: 2,
          label: '服务员'
        },
        {
          value: 3,
          label: '消防员'
        }
      ],
      // 行业下拉显示
      industryShow: false,
      // 行业列表
      industryList: industry,
      // 薪资下拉显示
      highestSalaryShow: false,
      lowestsalaryShow: false,
      // 薪资列表
      salaryList: [],
      // 自我评价
      evaluateForm: {
        content: ''
      }
    };
  },
  onLoad(page) {
    this.getMemberinfo();
    if (page.tabCur) {
      this.tabCur = Number(page.tabCur);
    }
    // 设置薪资范围
    let numList = [];
    for (let i = 1; i < 51; i++) {
      const obj = {
        value: String(i),
        label: String(i)
      };
      numList.push(obj);
    }
    this.salaryList = numList;
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    if (this.tabCur === 0) {
      this.$refs.intentionForm.setRules(this.intentionRules);
    }
  },
  methods: {
    /**
     * 获取用户基本信息
     */
    getMemberinfo() {
      this.$u.api
        .getmemberinfo()
        .then((res) => {
          if (res.code === 200) {
            const data = res.data;
            this.evaluateForm.content = data.selfAssessment;
            // this.intentionForm.position = res.data.expectedPost
            // this.intentionForm.industry = res.data.expectedIndustry
            this.intentionForm.expectedLowestSalary = data.expectedLowestSalary ? String(data.expectedLowestSalary) : '';
            this.intentionForm.expectedHighestSalary = data.expectedHighestSalary ? String(data.expectedHighestSalary) : '';
            if (data.provinceName) {
              this.intentionForm.workCity = data.provinceName + '-' + data.cityName + '-' + data.areaName;
            }
            this.intentionForm.provinceId = data.provinceId;
            this.intentionForm.provinceName = data.provinceName;
            this.intentionForm.cityId = data.cityId;
            this.intentionForm.cityName = data.cityName;
            this.intentionForm.areaId = data.areaId;
            this.intentionForm.areaName = data.areaName;
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
        });
    },
    /**
     * 城市下拉
     * @param { Object } item
     */
    cityConfirm(item) {
      this.intentionForm.provinceName = item.province.label;
      this.intentionForm.provinceId = item.province.value;
      this.intentionForm.cityName = item.city.label;
      this.intentionForm.cityId = item.city.value;
      this.intentionForm.areaName = item.area.label;
      this.intentionForm.areaId = item.area.value;
      this.intentionForm.workCity = item.province.label + '-' + item.city.label + '-' + item.area.label;
    },
    /**
     * 职位下拉
     * @param {Object} item
     */
    positionConfirm(item) {
      this.intentionForm.position = item[0].label;
      this.intentionForm.positionId = item[0].value;
    },
    /**
     * 行业下拉
     * @param {Object} item
     */
    industryConfirm(item) {
      this.intentionForm.industry = item[0].label;
      this.intentionForm.industryId = item[0].value;
    },
    /**
     * 最低薪资下拉
     * @param {Object} item
     */
    salaryLowestConfirm(item) {
      this.intentionForm.expectedLowestSalary = item[0].label;
    },
    /**
     * 最高薪资下拉
     * @param {Object} item
     */
    salaryHighestConfirm(item) {
      this.intentionForm.expectedHighestSalary = item[0].label;
    },
    /**
     * 跳转到指定页面
     */
    jumpPage(url, type) {
      if (type === 'redirectTo') {
        uni.redirectTo({
          url
        });
      } else {
        this.$u.route(url);
      }
    },
    /**
     * 提交求职意向
     */
    submitIntention() {
      this.$refs.intentionForm.validate((valid) => {
        if (valid) {
          const form = {
            ...this.intentionForm
          };
          uni.showLoading({
            title: '数据提交中，请等待'
          });
          this.$u.api.resume
            .submitJobIntention({
              provinceName: form.provinceName,
              provinceId: form.provinceId,
              cityName: form.cityName,
              cityId: form.cityId,
              areaName: form.areaName,
              areaId: form.areaId,
              expectedLowestSalary: form.expectedLowestSalary,
              expectedHighestSalary: form.expectedHighestSalary
            })
            .then((res) => {
              if (res.code === 200) {
                this.$refs.uToast.show({
                  title: '更新成功',
                  type: 'success'
                });
                setTimeout(() => {
                  uni.hideLoading();
                  this.jumpPage('/pages/myResume/myResume', 'redirectTo');
                }, 300);
              } else {
                uni.hideLoading();
                this.$refs.uToast.show({
                  title: res.msg,
                  type: 'error'
                });
              }
            })
            .catch(() => {
              uni.hideLoading();
              this.$refs.uToast.show({
                title: '系统异常',
                type: 'error'
              });
            });
        }
      });
    },
    /**
     * 提交自我评价
     */
    submitEvaluation() {
      if (this.evaluateForm.content) {
        uni.showLoading({
          title: '数据提交中，请等待'
        });
        this.$u.api.resume
          .submitSelfAssessment({
            selfAssessment: this.evaluateForm.content
          })
          .then((res) => {
            if (res.code === 200) {
              this.$refs.uToast.show({
                title: '更新成功',
                type: 'success'
              });
              setTimeout(() => {
                uni.hideLoading();
                this.jumpPage('/pages/myResume/myResume', 'redirectTo');
              }, 300);
            } else {
              uni.hideLoading();
              this.$refs.uToast.show({
                title: res.msg,
                type: 'error'
              });
            }
          })
          .catch(() => {
            uni.hideLoading();
            this.$refs.uToast.show({
              title: '系统异常',
              type: 'error'
            });
          });
      } else {
        uni.hideLoading();
        this.$refs.uToast.show({
          title: '请输入自我评价',
          type: 'warning'
        });
      }
    },
    /**
     * 城市下拉
     */
    workCityClick() {
      this.defaultRegion = [this.intentionForm.provinceName, this.intentionForm.cityName, this.intentionForm.areaName];
      this.cityShow = true;
    }
  }
};
</script>

<style lang="scss" scoped>
@import './evaluationIntention.scss';
</style>