merchant-app/pages/addEmployeeAndBaoming.vue

<template>

  <view >
    <view class="input-line">
      <view class="line-lab required">用工类型</view>
      <input class="line-input" :value="queryParams.employeeType == 0 ? '灵活用工' : queryParams.employeeType == 1 ? '固定长期用工' : ''" disabled @click="openTypeSelect()" placeholder="请选择"/>
    </view>
    <view class="input-line">
      <view class="line-lab required">姓名</view>
      <input class="line-input" v-model="queryParams.realName" type="text" maxlength="30"   placeholder="请输入"/>
    </view>
    <view class="input-line">
      <view class="line-lab required">手机号码</view>
      <input class="line-input" v-model="queryParams.phone" type="number"  maxlength="30"   placeholder="请输入"/>
    </view>
    <view class="input-line">
      <view class="line-lab required">身份证号码</view>
      <input class="line-input" v-model="queryParams.idCard" type="text"  maxlength="30"   placeholder="请输入"/>
    </view>
    <view class="input-line">
      <view class="line-lab">性别</view>
      <input class="line-input" :value="queryParams.sex == 0 ? '女' : queryParams.sex == 1 ? '男' : ''" type="text" disabled @click="openSexSelect()"  placeholder="请选择"/>
    </view>
    <view class="input-line">
      <view class="line-lab">民族</view>
      <input class="line-input" v-model="queryParams.nation" type="text"  maxlength="30"   placeholder="请输入"/>
    </view>
    <view class="input-line">
      <view class="line-lab">年龄</view>
      <input class="line-input" v-model="queryParams.age" type="number"  maxlength="30"   placeholder="请输入"/>
    </view>
    <view class="input-line">
      <view class="line-lab">面试日期</view>
<!--      <input class="line-input" v-model="queryParams.interviewDate" type="text" maxlength="30"  placeholder="请输入" />-->


      <uni-datetime-picker type="date" v-model="queryParams.interviewDate" @maskClick="maskClick" @change="timeChange($event)">
        {{queryParams.interviewDate == null ? "请选择" : queryParams.interviewDate}}
      </uni-datetime-picker>


    </view>
    <view class="input-line">
      <view class="line-lab">入职日期</view>
<!--      <input class="line-input" v-model="queryParams.entryDate" type="text"  maxlength="30"   placeholder="请输入"/>-->

      <uni-datetime-picker type="date" v-model="queryParams.entryDate" @maskClick="maskClick" @change="timeChange($event)">
        {{queryParams.entryDate == null ? "请选择" : queryParams.entryDate}}
      </uni-datetime-picker>

    </view>
    <view class="input-line">
      <view class="line-lab">用工单位</view>
      <input class="line-input" v-model="queryParams.useUnit" type="text"  maxlength="30"   placeholder="请输入"/>
    </view>
    <view class="input-line">
      <view class="line-lab">供应商</view>
      <input class="line-input" v-model="queryParams.supplier" type="text"  maxlength="30"  placeholder="请输入" />
    </view>
    <view class="input-line">
      <view class="line-lab">员工单价</view>
      <input class="line-input" v-model="queryParams.employeePrice" type="text"  maxlength="30"   placeholder="请输入"/>
    </view>
    <view class="input-line">
      <view class="line-lab">供应商单价</view>
      <input class="line-input" v-model="queryParams.supplierPrice" type="text"  maxlength="30"  placeholder="请输入" />
    </view>


    <uni-popup style="z-index: 10000" ref="sexPopup" type="bottom" border-radius="10px 10px 0 0">
      <view class="selectContext">
        <view class="select-item" @click="filterSex(1)">男</view>
        <view class="select-item" @click="filterSex(0)">女</view>
      </view>
    </uni-popup>

    <uni-popup style="z-index: 10000" ref="typePopup" type="bottom" border-radius="10px 10px 0 0">
      <view class="selectContext">
        <view class="select-item" @click="filterType(0)">灵活用工</view>
        <view class="select-item" @click="filterType(1)">固定长期用工</view>
      </view>
    </uni-popup>



    <view class="add-bottom">
<!--      <view class="all-select" @click="addEmployeeAndBaoming">添加员工并报名</view>-->
      <view class="submit-btn" @click="submit">确定</view>
    </view>
  </view>




</template>

<script>
import { searchUser } from "@/api/system/user";
import { addAndSign } from "@/api/task";
export default {
  data() {
    return {
      queryParams: {
        employeeType: null,
        realName: null,
        phone: null,
        idCard: null,
        sex: null,
        nation: null,
        age: null,
        interviewDate: null,
        entryDate: null,
        useUnit: null,
        supplier: null,
        employeePrice: null,
        supplierPrice: null,
        taskId: null,
      },
      task: {},
      title: "添加员工并报名",
      signInfo: {},
      searchVal: "",
      showSign: [],
      selectItems: {},//key为uid value = user对象
    };
  },

  onLoad: function(options) {
    this.queryParams.taskId = options.id;
  },
  onUnload: function() {
    // console.log('关闭页面');
    var pages = getCurrentPages();
    // console.log(pages.length);
    var Page = pages[pages.length-1];//当前页
    // console.log(pages[pages.length-1].route);//输出当前路由
    var prevPage = pages[pages.length-2];
    // console.log(pages[pages.length-2].route);//输出上一个页面的路由
    if(pages[pages.length-2].route == 'pages/index'){  //确定要返回到相应页面，在触发
      prevPage.$vm.reload()
    }
  },
  methods:{
    submit(){
      if (this.queryParams.employeeType === '' || this.queryParams.employeeType == null){
        console.log(this.queryParams.employeeType)
        wx.showToast({
          title: '用工类型不能为空',
          icon: 'none',
          duration: 2000,
        })
        return;
      }
      if (this.queryParams.realName === '' || this.queryParams.realName == null){
        // this.$modal.msgError("姓名不能为空");
        wx.showToast({
          title: '姓名不能为空',
          icon: 'none',
          duration: 2000,
        })
        return;
      }
      if (this.queryParams.phone == null || this.queryParams.phone.length != 11){
        // this.$modal.msgError("手机号码不能为空");
        wx.showToast({
          title: '手机号码不能为空或格式不正确',
          icon: 'none',
          duration: 2000,
        })
        return;
      }
      if (this.queryParams.idCard == null || this.queryParams.idCard.length != 18){
        // this.$modal.msgError("身份证号码不能为空或格式不正确");
        wx.showToast({
          title: '身份证号码不能为空或格式不正确',
          icon: 'none',
          duration: 2000,
        })
        return;
      }

      addAndSign(this.queryParams).then(response => {
        this.$modal.msgSuccess("报名成功");
        uni.navigateTo({
          url: "helpBaoming?id=" + this.queryParams.taskId
        })
      })
    },
    timeChange(e) {
      this.single = e;
      console.log("-change事件:", e);
      this.queryParams.taskDate = e;
      this.queryParams.pageNum = 1;
      this.getList();
    },
    filterSex(type){
      this.queryParams.sex = type;
      this.closeSexSelect();
    },
    filterType(type){
      this.queryParams.employeeType = type;
      this.closeTypeSelect();
    },

    openSexSelect(){
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.sexPopup.open('bottom')
    },
    openTypeSelect(){
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.typePopup.open('bottom')
    },
    closeSexSelect(){
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.sexPopup.close()
    },
    closeTypeSelect(){
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.typePopup.close()
    },



  }
}
</script>

<style lang='scss' >

.selectContext{
  background-color: #ffffff;
  width: 100%;
  /*height: 500rpx;*/
  margin-bottom: 0px;
  border-radius: 10rpx 10rpx 0 0;
  .select-item{
    height: 100rpx;
    width: 100%;
    display: grid;
    place-items: center;
    font-size: 35rpx;
    border-bottom: 1rpx solid #dbdbdb;
  }
  .select-item:last-child {
    border-bottom: none;
  }
}
.input-line{
  display: flex;
  height: 110rpx;
  border-bottom: #b6b6b6 1rpx solid;
  align-items: center;
  margin: 0 15rpx 0 15rpx;
  font-size: 30rpx;
  .line-lab{
      width: 210rpx;
  }
  .required::after {
    content: "*";
    color: red;
  }
  .line-input{
    margin-left: 5rpx;
    width: 100%;
    text-align: right;
    line-height: 60rpx;
    height: 80rpx;
  }

}


.uni-date-editor {
  justify-content: flex-end !important;
  font-weight: 500;
  line-height: 80rpx;
}


.add-bottom {
  width: 100%;
  height: 180rpx;
  /*bottom: env(safe-area-inset-bottom);*/
  display: flex;
  align-items: center;
  justify-items: center;
  padding: 0rpx 50rpx 0rpx 50rpx;

  .submit-btn {
    width: 100%;
    background-color: #107ff6;
    color: #ffffff;
    font-weight: 650;
    font-size: 30rpx;
    border-radius: 10rpx;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

//.input-line {
//  :deep(.uni-date-editor) {
//    justify-content: flex-end;
//    font-weight: 100;
//  }
//}
//:deep(.el-empty__description .uni-date-editor) {
//  font-size: 13px;
//}
</style>