proginn-frontend/components/sign/step-project.vue

<template>
  <div class="sign-new-project">
    <div class="sign-new-tips">
      项目是最重要的信息；据客栈统计，<b>83%</b>的客户特别倾向有类似项目经历，且信息完善的开发者！
    </div>
    <div class="sign-project-main">
      <header class="sign-new-header">
        <div class="sign-new-header-title">作品（3-5个项目）</div>
      </header>

      <section class="sign-new-works-list">
        <div v-if="works.length > 0">
          <template v-for="(item, idx) in works">
            <div
              v-if="editingItem.indexOf(idx) < 0"
              :key="`works_${idx}`"
              class="show"
            >
              <span
                class="image"
                :style="{
                  'background-image': `url('${works[idx].image_list[0].url}')`
                }"
                v-if="works[idx].image_list && works[idx].image_list[0]"
              >
              </span>
              <div class="des">
                <div class="des-title">
                  <div class="des-title-name text-line-1">{{ item.name }}</div>
                  <div class="des-title-time">{{ item.update_time_name }}</div>
                </div>
                <div class="des-content text-line-3">
                  {{ item.description }}
                </div>
                <div class="des-state">
                  <div class="des-state-item fl">
                    <img
                      src="~@/assets/img/svg/read.svg"
                      class="des-state-icon"
                    />
                    <span>{{ item.browse }}</span>
                  </div>
                  <div class="des-state-item fl">
                    <img
                      src="~@/assets/img/svg/like.svg"
                      class="des-state-icon"
                    />
                    <span>{{ item.hit }}</span>
                  </div>
                  <div class="des-state-item fr">
                    <img
                      src="~@/assets/img/svg/del.svg"
                      class="des-state-icon"
                    />
                  </div>
                  <div class="des-state-item fr" @click="editItem(idx)">
                    <img
                      src="~@/assets/img/svg/edit.svg"
                      class="des-state-icon"
                    />
                  </div>
                </div>
              </div>
            </div>
            <work-form
              v-else
              :key="`works_edit_${idx}`"
              :idx="idx"
              :work="works[idx]"
              :industries="industries"
              :functions="functions"
              :handleCancel="handleCancel"
              :onSubmit="onSubmit"
              :handleDelete="handleDelete"
            ></work-form>
          </template>
          <div class="sign-new-project-add" @click="handleAdd">
            <img
              src="~@/assets/img/svg/add-project.svg"
              class="sign-new-project-add-icon"
            />
            <div class="sign-new-project-add-tips">添加作品</div>
          </div>
        </div>
        <div v-else class="empty">
          点击右上角“添加”按钮添加作品(至少添加1项）
        </div>
      </section>
    </div>

    <div class="sign-new-next">
      <div class="sign-new-next-btn">下一步</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import qs from "qs";
import workForm from "./work-form";
export default {
  data() {
    return {
      // editing: true,
      editingItem: [],
      init: {
        name: "",
        industry_id: "",
        function_ops: "",
        duty: "",
        description: "",
        url: "",
        image_list: []
      },
      works: [],
      current: null,
      originWorks: [],
      industries: [],
      functions: []
    };
  },
  components: {
    workForm
  },
  computed: {
    ...mapState(["userinfo"])
  },
  watch: {},
  async mounted() {
    await this.getIndustry();
    this.getFunction();
    this.getData();
  },
  methods: {
    async onSubmit(work, idx) {
      const queryParams = {
        ...work,
        // id: 1, //传ID是更新，不传ID是新增
        // name: "作品名称",
        // duty: "作品指责",
        // description: "作品描述",
        function_ops: work.function_ops.join(","), //是多个ID，用英文逗号分割，关键功能
        industry_id: parseInt(work.industry_id[1]), //id,是int类型啊，不是文字
        // url: "https://a.com",
        image_list: work.image_list.map(it => it.url).join(",") //是图片地址，多个图片用逗号分割，
      };
      const res = await this.$axios.$post(`/api/user_works/save`, queryParams);
      if (res.status === 1) {
        this.$message.success("保存成功！");
        this.init = {
          name: "",
          industry_id: "",
          function_ops: "",
          duty: "",
          description: "",
          url: "",
          image_list: []
        };
        this.editingItem = [];
        this.getData();
      }
    },
    async getData() {
      const res = await this.$axios.$post("/api/user_works/get_list");
      const data = !res.data ? [] : res.data;
      this.works = data.map(it => {
        const image_list = it.image_list
          ? it.image_list.split(",").map(it => ({ name: it, url: it }))
          : [];
        let industry_id;
        this.industries.map(item1 => {
          return item1.children.map(item2 => {
            if (item2.value == it.industry_id) {
              industry_id = [item1.value, item2.value];
            }
          });
        });
        console.log(industry_id);
        return {
          ...it,
          industry_id,
          function_ops: it.function_ops ? it.function_ops.split(",") : [],
          image_list
        };
      });
    },
    async getIndustry() {
      const res = await this.$axios.$post("/api/user_works/get_industry");
      const data = !res.data ? [] : res.data;
      this.industries = data.map(it => ({
        label: it.name,
        value: it.id,
        children: it.child.map(it => ({
          label: it.name,
          value: it.id
        }))
      }));
      return this.industries;
    },
    async getFunction() {
      const res = await this.$axios.$post("/api/user_works/get_function");
      const data = !res.data ? [] : res.data;
      this.functions = data.map(it => ({
        label: it.outsourcefunc_name,
        value: it.outsourcefunc_id
      }));
    },
    async fetchWork(keyword) {
      // console.log(keyword);
      // this.loadingWork = true;
      // const res = await this.$axios.$post("/api/simple_data/select_skill", {
      //   keyword
      // });
      // this.loadingWork = false;
      // const data = res.data || [];
      // this.skillList = data.map(it => ({ value: it.id, label: it.name }));
    },
    handleAdd() {
      if (this.userinfo && this.userinfo.realname_verify_status === "0") {
        this.$message.error("请先进行实名认证");
        return;
      }
      if (this.editingItem.length > 0 && !this.works[this.editingItem[0]].id) {
        this.$message.error("请先保存现有修改");
        return;
      }
      // this.works.push(this.init);
      // this.editingItem = [this.works.length - 1];
      window.location.href = "/otherpage/works/create";
    },
    async handleDelete(work, idx) {
      const deleteComplete = () => {
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.works.splice(idx, 1);
        this.editingItem = [];
      };
      this.$confirm("确认删除该作品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          if (work.wid) {
            const res = await this.$axios.$post(`/api/user_works/delete`, {
              id: work.wid
            });
            if (res.status === 1) {
              deleteComplete();
              // this.$message.success(res.info);
              this.getData();
            }
          } else {
            deleteComplete();
          }
        })
        .catch(err => {
          console.log(err);
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleCancel(work, idx) {
      this.editingItem = [];
      if (!work.wid) {
        this.works.splice(idx, 1);
      }
    },
    editItem(idx) {
      // this.editingItem = [idx];
      window.location.href =
        "/otherpage/works/create?wid=" + this.works[idx].wid;
    }
  }
};
</script>

<style lang="scss">
.sign-project-main {
  header .el-icon-plus {
    font-size: 18px;
  }
  .show {
    display: flex;
    justify-content: space-between;
    padding: 30px 24px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #ced3d9;
    margin-bottom: 30px;

    &:last-of-type {
      /* border: 0; */
      margin-bottom: 30px;
    }
    .star {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100px;
      img {
        margin-bottom: 5px;
        width: 26px;
        height: 26px;
      }
    }
    .image {
      margin-right: 10px;
      width: 116px;
      height: 116px;
      overflow: hidden;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .des {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    h4 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 24px;
      font-size: 14px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      color: #308eff;
      line-height: 24px;
    }
    p {
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 24px;
    }
  }

  .empty {
    margin: 112px auto 104px;
    font-size: 27px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: rgba(205, 205, 205, 1);
    line-height: 38px;
  }
  footer p {
    margin-top: 15px;
    width: 766px;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(145, 154, 167, 1);
    line-height: 17px;
  }
}
.sign-project-main {
  margin-top: 60px;
  margin-bottom: 130px;
  .sign-new-header {
    border: none;
  }
}

.des-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.des-title-name {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #0b111a;
  line-height: 21px;
  max-width: 35em;
}
.des-title-time {
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #828c99;
  line-height: 18px;
}
.des-content {
  margin-top: 8px;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #828c99;
  line-height: 18px;
}
.des-state {
  margin-top: 15px;
  overflow: hidden;
  .fl {
    float: left;
    margin-right: 20px;
    .des-state-icon {
      margin-right: 4px;
    }
  }
  .fr {
    float: right;
    margin-left: 20px;
    .des-state-icon {
      cursor: pointer;
    }
  }
}
.des-state-icon {
  // width: 14px;
  height: 16px;
}
.des-state-item {
  display: flex;
  align-items: center;

  span {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828c99;
  }
}

.text-line-3 {
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sign-new-project-add {
  height: 176px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #ced3d9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.sign-new-project-add-icon {
  width: 36px;
}
.sign-new-project-add-tips {
  margin-top: 16px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #0b121a;
  line-height: 22px;
}
.sign-new-works-list {
  margin-top: 18px;
}
.sign-new-project {
  padding-bottom: 30px;
}
</style>