yizhizan-h5/my/publish/workhistory.vue

<template>
  <view class="page-box">
    <navBar title="工作信息" color="#000" />
    <view class="page-content">
      <view class="box" v-if="resumesClassify == 1">
        <view class="flex align-center justify-between">
          <view class="text-bold" style="width: 150rpx">公司名称</view>
          <view class="flex align-center">
            <u-input
              v-model="resumesTitle"
              placeholder="请输入公司名称"
              placeholder-style="color:#999999;"
            />
            <view class="margin-left-sm">
              <image
                src="../../static/images/my/right_icon.png"
                style="width: 12upx; height: 21upx"
              ></image>
            </view>
          </view>
        </view>
        <view
          class="margin-tb"
          style="width: 100%; height: 1rpx; background: #f2f2f2"
        ></view>
        <!-- <view class="flex align-center justify-between">
				<view class=" text-bold" style="width: 150rpx;">项目名称</view>
				<view class="flex align-center">
					<u-input v-model="resumesProject" placeholder="请输入项目名称" placeholder-style="color:#999999;" />
					<view class="margin-left-sm">
						<image src="../../static/images/my/right_icon.png" style="width: 12upx;height: 21upx;"></image>
					</view>
				</view>
			</view>
			<view class="margin-tb" style="width: 100%;height: 1rpx;background: #F2F2F2;"></view> -->
        <view class="flex align-center justify-between">
          <view class="text-bold" style="width: 150rpx">担任岗位</view>
          <view class="text-right flex align-center">
            <u-input
              v-model="resumesPost"
              placeholder="请输入岗位名称"
              placeholder-style="color:#999999;;"
            />
            <view class="margin-left-sm">
              <image
                src="../../static/images/my/right_icon.png"
                style="width: 12upx; height: 21upx"
              ></image>
            </view>
          </view>
        </view>
        <view
          class="margin-tb"
          style="width: 100%; height: 1rpx; background: #f2f2f2"
        ></view>
        <view class="flex align-center justify-between">
          <view class="text-bold" style="width: 150rpx">在职时间</view>
          <view class="text-right flex align-center">
            <view :style="resumesTime1 ? '' : 'color: gray;'" @click="show = true">{{
              resumesTime1 ? resumesTime1 : "请选择开始时间"
            }}</view>
            <span style="padding: 0 10rpx 0 10rpx">至</span>
            <view :style="resumesTime2 ? '' : 'color: gray;'" @click="show2 = true">{{
              resumesTime2 ? resumesTime2 : "请选择结束时间"
            }}</view>
            <view class="margin-left-sm">
              <image
                src="../../static/images/my/right_icon.png"
                style="width: 12upx; height: 21upx"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <view class="box" v-if="resumesClassify == 2">
        <view class="flex align-center justify-between">
          <view class="text-bold" style="width: 150rpx">项目名称</view>
          <view class="flex align-center">
            <u-input
              v-model="resumesTitle"
              placeholder="请输入项目名称"
              placeholder-style="color:#999999;"
            />
            <view class="margin-left-sm">
              <image
                src="../../static/images/my/right_icon.png"
                style="width: 12upx; height: 21upx"
              ></image>
            </view>
          </view>
        </view>
        <view
          class="margin-tb"
          style="width: 100%; height: 1rpx; background: #f2f2f2"
        ></view>
        <view class="flex align-center justify-between">
          <view class="text-bold" style="width: 150rpx">担任岗位</view>
          <view class="text-right flex align-center">
            <u-input
              v-model="resumesPost"
              placeholder="请输入担任岗位"
              placeholder-style="color:#999999;;"
            />
            <view class="margin-left-sm">
              <image
                src="../../static/images/my/right_icon.png"
                style="width: 12upx; height: 21upx"
              ></image>
            </view>
          </view>
        </view>
        <view
          class="margin-tb"
          style="width: 100%; height: 1rpx; background: #f2f2f2"
        ></view>
        <view class="flex align-center justify-between">
          <view class="text-bold" style="width: 150rpx">项目时间</view>
          <view class="text-right flex align-center">
            <view :style="resumesTime1 ? '' : 'color: gray;'" @click="show = true">{{
              resumesTime1 ? resumesTime1 : "请选择开始时间"
            }}</view>
            <span style="padding: 0 10rpx 0 10rpx">至</span>
            <view :style="resumesTime2 ? '' : 'color: gray;'" @click="show2 = true">{{
              resumesTime2 ? resumesTime2 : "请选择结束时间"
            }}</view>
            <view class="margin-left-sm">
              <image
                src="../../static/images/my/right_icon.png"
                style="width: 12upx; height: 21upx"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <view class="box">
        <view class="text-bold">工作内容</view>
        <view class="padding-tb-sm">
          <u-input
            v-model="resumesContent"
            type="textarea"
            height="300"
            placeholder="添加工作经历,向企业全面展示你的能力"
            inputAlign="text-alight:left"
          />
        </view>
      </view>
      <view class="btn" @click="submit">保存</view>
      <u-picker v-model="show" mode="time" @confirm="Dataconfirm"></u-picker>
      <u-picker v-model="show2" mode="time" @confirm="Dataconfirm2"></u-picker>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {
      show2: false,
      resumesTitle: "",
      resumesProject: "", //项目名称
      resumesPost: "",
      resumesTime: "",
      resumesTime1: "",
      resumesTime2: "",
      resumesContent: "",
      resumesCompanyList: [],
      resumesWorkList: [],
      show: false,
      resumesClassify: "",
      index: "",
    };
  },
  components: {
    navBar,
  },
  onLoad(option) {
    if (option.state) {
      this.resumesClassify = option.state;
      if (option.state == 2) {
        uni.setNavigationBarTitle({
          title: "项目经验",
        });
        if (uni.getStorageSync("resumesWorkList")) {
          //项目经验
          this.resumesWorkList = uni.getStorageSync("resumesWorkList");
          if (option.index != 1) {
            this.index = option.index;
            let obj = JSON.parse(option.list);
            this.resumesTitle = obj.resumesTitle;
            this.resumesProject = obj.resumesProject;
            this.resumesPost = obj.resumesPost;
            this.resumesContent = obj.resumesContent;
            let time = obj.resumesTime.split(" - ");
            this.resumesTime1 = time[0];
            this.resumesTime2 = time[1];
            this.$forceUpdate();
          }
        }
      } else {
        if (uni.getStorageSync("resumesCompanyList")) {
          //工作经验
          this.resumesCompanyList = uni.getStorageSync("resumesCompanyList");
          if (option.index) {
            this.index = option.index;
            let obj = JSON.parse(option.list);
            this.resumesTitle = obj.resumesTitle;
            this.resumesProject = obj.resumesProject;
            this.resumesPost = obj.resumesPost;
            this.resumesContent = obj.resumesContent;
            let time = obj.resumesTime.split(" - ");
            this.resumesTime1 = time[0];
            this.resumesTime2 = time[1];
            this.$forceUpdate();
          }
        }
      }
    }
  },
  onShow() {},
  methods: {
    Dataconfirm2(e) {
      this.resumesTime2 = e.year + "-" + e.month + "-" + e.day;
    },
    Dataconfirm(e) {
      this.resumesTime1 = e.year + "-" + e.month + "-" + e.day;
    },
    submit() {
      this.resumesTime = this.resumesTime1 + " - " + this.resumesTime2;
      if (this.resumesClassify == 1 && !this.resumesTitle) {
        uni.showToast({
          title: "请输入公司名称",
          icon: "none",
          duration: 1000,
        });
        return;
      }
      // if (!this.resumesProject) {
      // 	uni.showToast({
      // 		title: '请输入项目名称',
      // 		icon: 'none',
      // 		duration: 1000
      // 	})
      // 	return
      // }
      if (!this.resumesPost) {
        uni.showToast({
          title: "请输入岗位名称 ",
          icon: "none",
          duration: 1000,
        });
        return;
      }
      if (!this.resumesTime1) {
        uni.showToast({
          title: "请选择开始时间",
          icon: "none",
          duration: 1000,
        });
        return;
      }
      if (!this.resumesTime2) {
        uni.showToast({
          title: "请选择结束时间",
          icon: "none",
          duration: 1000,
        });
        return;
      }
      if (!this.resumesContent) {
        uni.showToast({
          title: "添加工作经历向企业全面展示你的能力",
          icon: "none",
          duration: 1000,
        });
        return;
      }
      if (this.resumesClassify == "1") {
        let data = {
          resumesTitle: this.resumesTitle,
          resumesPost: this.resumesPost,
          resumesTime: this.resumesTime,
          resumesContent: this.resumesContent,
          resumesClassify: this.resumesClassify,
          resumesProject: this.resumesProject,
        };
        if (this.index && this.index != "") {
          this.resumesCompanyList[this.index] = data;
        } else {
          this.resumesCompanyList.push(data);
        }
        uni.setStorageSync("resumesCompanyList", this.resumesCompanyList);
      } else if (this.resumesClassify == "2") {
        let data = {
          resumesTitle: this.resumesTitle,
          resumesPost: this.resumesPost,
          resumesTime: this.resumesTime,
          resumesContent: this.resumesContent,
          resumesClassify: this.resumesClassify,
          resumesProject: this.resumesProject,
        };
        if (this.index && this.index != "") {
          this.resumesWorkList[this.index] = data;
        } else {
          this.resumesWorkList.push(data);
        }
        uni.setStorageSync("resumesWorkList", this.resumesWorkList);
      }
      this.index = "";
      this.resumesTitle = "";
      this.resumesProject = "";
      this.resumesPost = "";
      this.resumesContent = "";
      this.resumesTime1 = "";
      this.resumesTime2 = "";
      uni.navigateBack();
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: #f2f2f7;
}
.page-box {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .page-content {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
  }
}

.box {
  background: #ffffff;
  border-radius: 24upx;
  margin: 30upx;
  padding: 30upx;
}

.btn {
  background: #016bf6;
  border-radius: 10upx;
  text-align: center;
  // margin-top: 30upx;
  padding: 30upx 0upx;
  color: #ffffff;
  // font-weight: bold;
  // letter-spacing: 2rpx;
  margin: 30upx;
}
</style>