YingXingAI/pages/my/AddEducation/AddEducation.vue

<template>
  <view class="flex-col page">
    <u-navbar title="添加教育经历"></u-navbar>
    <view class="flex-col group_3 userList">
      <!-- <h3 class="text_3">填写学校信息</h3> -->
      <view class="flex-col group_4">
        <view class="justify-between list-item group_5">
          <text class="text_8 must">学历</text>
          <view class="item-wrapper">
            <view class="input-cover" @click="educationalShow = true"></view>
            <u-input v-model="form.educationStr" placeholder="请选择学历" inputAlign="right"
              disabled/>
            <view class="img">
              <image style="width: 15rpx; height: 25rpx; margin-left: 10rpx" src="/static/common/img/row_right.png" />
            </view>
          </view>
          <u-action-sheet :list="educationalList" v-model="educationalShow" @click="educationalSelect">
          </u-action-sheet>
        </view>
        <view class="justify-between list-item">
          <text class="text_8 must">学校名称</text>
          <view class="item-wrapper">
            <view class="input-cover" @click="shoolShow = true"></view>
          
            <u-input v-model="shoolName" placeholder="请选择学校" disabled inputAlign="right" />
            <view class="img">
              <image style="width: 15rpx; height: 25rpx; margin-left: 10rpx" src="/static/common/img/row_right.png" />
            </view>
        </view>
          <u-select v-model="shoolShow" mode="single-column" title="学校选择" :list="shoolList" @confirm="shoolSelect">
          </u-select>
          <!-- :default-value="defaultTime" -->
        </view>
        <view class="justify-between list-item">
          <text class="text_8 must">学院</text>
          <view class="item-wrapper">
            <view class="input-cover" @click="collegeShow = true"></view>
            <u-input v-model="form.college" placeholder="请选择学院" disabled
              inputAlign="right" />
              <view class="img">
              <image style="width: 15rpx; height: 25rpx; margin-left: 10rpx" src="/static/common/img/row_right.png" />
            </view>
          </view>
          <u-select v-model="collegeShow" mode="single-column" :list="CollegeList" @confirm="selectCpllege"></u-select>
          <!-- :default-value="collegeId" -->
        </view>
        <view class="justify-between list-item">
          <text class="text_8 must">专业</text>
          <view class="item-wrapper">
            <view class="input-cover" @click="majorShow = true"></view>
          <!-- <u-input v-model="form.major" placeholder="请输入专业" type="text" /> -->
              <u-input v-model="form.major" placeholder="请选择专业" disabled
                inputAlign="right" />
                <view class="img">
                <image style="width: 15rpx; height: 25rpx; margin-left: 10rpx" src="/static/common/img/row_right.png" />
              </view>
            </view>
          <u-select v-model="majorShow" mode="single-column" :list="MajorList" @confirm="selectMajor"></u-select>
          <!-- :default-value="majorId" -->
        </view>
        <view class="justify-between list-item">
          <text class="text_8 must">时间</text>
          <view class="item-wrapper">
            <view class="input-cover" @click="timeShow = true"></view>
            <u-input v-model="showTime" placeholder="请选择时间" disabled inputAlign="right" />
            <view class="img">
              <image style="width: 15rpx; height: 25rpx; margin-left: 10rpx" src="/static/common/img/row_right.png" />
            </view>
          </view>
          <u-select v-model="timeShow" :default-value="defaultTime" mode="mutil-column" title="在校时间" :list="timeList"
            @confirm="confirm">
          </u-select>
        </view>
      </view>
      <view class="btn-box">
        <u-button shape="circle" class="button text-wrapper_1" type="primary" @click="complete">保存</u-button>
      </view>
    </view>
    <u-top-tips :z-index="999" ref="uTips" :navbar-height="0"></u-top-tips>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { Debounce } from "../../../common/utils.js";
export default {
  data() {
    return {
      step: 1,
      headerImg: "",
      shoolName: "",
      showTime: "",
      form: {
        userId: "", //用户id
        educationStr: "", //学历
        schoolId: "", //学校
        college: "", //学院
        major: "", //专业
        startYear: "", //开始时间
        endYear: "", //结束时间
        collegeId: "", //学院Id
        majorId: "", //专业Id
      },
      background: {
        backgroundColor: "#fff",
      },
      value: "",
      defaultTime: "",
      // collegeId:"",
      // majorId:"",
      show: false,
      educationalShow: false,
      educationalList: [
        //学历选择列表
        {
          text: "大专",
        },
        {
          text: "本科",
        },
        {
          text: "硕士研究生",
        },
        {
          text: "博士研究生",
        },
      ],
      shoolShow: false,
      collegeShow: false,
      majorShow: false,
      shoolList: [], //学校选择
      CollegeList: [], //学院选择
      MajorList: [], //专业选择
      timeShow: false,
      timeList: [], //时间选择
    };
  },
  onLoad(e) {
    // 监听从裁剪页发布的事件，获得裁剪结果
    uni.$on("uAvatarCropper", (path) => {
      this.headerImg = path;
      let file = this.common.base64toFile(path, new Date().getTime());
      if (file.type.indexOf("image") < 0) {
        // this.$tips("请选择图片", "error");
        this.$refs.uToast.show({
          title: '请选择图片',
          type: "error",
        });
        return false;
      }
      uni.uploadFile({
        url: this.$u.http.config.imgUrl + "/app/User/File",
        file: file,
        fileType: "image",
        header: {
          Authorization: "Bearer " + this.vuex_token,
        },
        complete: (res) => {
          this.form.path = res.data;
        },
      });
    });
    if (this.vuex_user.id) {
      this.form.userId = this.vuex_user.id;
    } else {
      this.$u.route({
        url: "/pages/login/login/login",
      });
    }
    this.getShool();
    var arr1 = [],
      arr2 = [];
    var isyear = new Date().getFullYear();
    for (var i = 1990; i <= isyear + 10; i++) {
      if (i <= isyear) {
        arr1.push({
          value: i,
          label: i,
        });
      }
      arr2.push({
        value: i,
        label: i,
      });
    }
    this.timeList.push(arr1);
    this.timeList.push(arr2);
    this.defaultTime = [arr1.length - 1, arr2.length - 7];
  },
  methods: {
    //完成信息填写
    complete: Debounce(function (e) {
      var data = this.form;
      if (data.educationStr == "") {
        // return this.$tips("请选择学历", "error");
        return this.$refs.uToast.show({
          title: '请选择学历',
          type: "error",
        });
      }
      if (data.schoolId == "") {
        // return this.$tips("请选择学校", "error");
        return this.$refs.uToast.show({
          title: '请选择学校',
          type: "error",
        });
      }
      if (data.college == "") {
        // return this.$tips("请填写学院", "error");
        return this.$refs.uToast.show({
          title: '请填写学院',
          type: "error",
        });
      }
      if (data.major == "") {
        // return this.$tips("请填写专业", "error");
        return this.$refs.uToast.show({
          title: '请填写专业',
          type: "error",
        });
      }
      if (data.startYear == "" && data.endYear == "") {
        // return this.$tips("请选择在校时间", "error");
        return this.$refs.uToast.show({
          title: '请选择在校时间',
          type: "error",
        });
      }
      if (data.startYear > data.endYear) {
        // return this.$tips("请选择正确的在校时间", "error");
        return this.$refs.uToast.show({
          title: '请选择正确的在校时间',
          type: "error",
        });
      }
      this.$u.apiList
        .AddEducation(this.form)
        .then((res) => {
          // this.$tips("提交成功","success");
          this.$refs.uTips.show({
            title: "提交成功",
            type: "success",
          });

          setTimeout(() => {
            /* uni.switchTab({
              url: "../my/my",
            }); */
            uni.navigateBack({
                delta: 1, // 返回上一级页面
              });
          }, 1000);
        })
        .catch((err) => {
          // this.$tips(err.error,"error");
          this.$refs.uToast.show({
            title: err.error,
            type: "error",
          });

        });
    }, 1000),
    // 获取学校
    getShool() {
      this.shoolList = [];
      this.$u.api.GetAllSchool().then((res) => {
        for (let i = 0; i < res.length; i++) {
          this.shoolList.push({
            label: res[i].schoolName + "",
            value: res[i].id + "",
          });
        }
      });
    },
    //获取学院
    getColleg(id, name) {
      this.CollegeList = [];
      const data = {
        schoolid: id,
      };
      this.$u.apiList.GetCollegeList(data).then((res) => {
        for (let i = 0; i < res.length; i++) {
          this.CollegeList.push({
            label: res[i].name + "",
            value: res[i].id + "",
          });
        }
      });
    },
    //获取学院专业
    getMajor(id) {
      this.MajorList = [];
      const data = {
        schoolid: this.form.schoolId,
        collegeid: id,
        // name:name
      };
      this.$u.apiList.GetMajorList(data).then((res) => {
        for (let i = 0; i < res.length; i++) {
          this.MajorList.push({
            label: res[i].name + "",
            value: res[i].id + "",
          });
        }
      });
    },
    // 学历选择
    educationalSelect(index) {
      this.form.educationStr = this.educationalList[index].text;
    },
    // 时间选择
    confirm(e) {
      this.showTime = e[0].value + " - " + e[1].value;
      this.form.startYear = e[0].value + "";
      this.form.endYear = e[1].value + "";
    },
    // 学校选择
    shoolSelect(e) {
      this.form.college = "";
      this.form.collegeId = "";
      this.form.major = "";
      this.form.majorId = "";
      this.shoolName = e[0].label;
      this.form.schoolId = e[0].value;
      this.getColleg(this.form.schoolId);
    },
    //选择所属院系
    selectCpllege(e) {
      this.form.major = "";
      this.form.majorId = "";
      this.form.college = e[0].label;
      this.form.collegeId = e[0].value;
      this.getMajor(this.form.collegeId);
    },
    //选择专业
    selectMajor(e) {
      this.form.major = e[0].label;

      this.form.majorId = e[0].value;
    },
    //返回上一级
    router() {
      uni.switchTab({
        url: "../../my/my/my",
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: rgb(255, 255, 255);
  overflow-y: auto;
  width: 100%;
  overflow-x: hidden;
  height: 100%;
}

.userList {
  // padding-left: 0.16rem;
  // padding-top: 0.3rem;

  .text-wrapper_1 {
    padding: 0.15rem 0 0.14rem;
    // background-image: linear-gradient(
    //   90deg,
    //   #87e6fe 0%,
    //   #5bc0fe 52%,
    //   #2e9bff 100%
    // );
    box-shadow: 0px 0.03rem 0.09rem rgba(38, 122, 199, 0.34);
    border-radius: 0.23rem;
  }

  // 按钮
  .btn-box {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 150rpx;
    border-top: 1px solid #f1f2f6;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
  }

  .button {
    width: 80%;
  }

  .text_3 {
    align-self: center;
    color: rgb(51, 51, 51);
    font-size: 0.18rem;
    font-family: PingFang;
    line-height: 0.17rem;
  }

  .group_4 {
    // margin-top: 0.44rem;

    .list-item {
      font-size: 30rpx;
      padding: 16rpx 24rpx;
      border-bottom: solid 2rpx #eeeeee;

      .text_8 {
        color: #000;
        font-size: 30rpx;
        font-family: PingFang;
        line-height: 0.35rem;
        margin-right: 0.15rem;
      }

      .text_26 {
        color: #000;
        font-size: 0.17rem;
        font-family: PingFang;
        line-height: 0.16rem;
      }
    }

    .item-wrapper{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .input-cover{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
    }

    .group_5 {
      margin-top: 0;

    }

    .img {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 15rpx;
      // padding-top: 4rpx;
      margin-left: 5rpx;
      // padding-right: 30rpx;
    }

    ::v-deep .u-input__input {
      font-size: 30rpx;
      color: #666666
    }
  }
}
// 必填的样式
.must {
  position: relative;

  &::before {
    content: "*";
    color: red;
    position: absolute;
    top: -10rpx;
    right: -17rpx;
    transform: scale(0.8);
    /* 相对于父元素的左上角定位 */
  }
}
</style>