uk_front/pages/home/projects.vue

<template>
  <div class="com-main com-width-1400 com-margin-auto main pro-wrap">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
      <el-breadcrumb-item>My Projects</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="topbar com-flex">
      <div class="search-input">
        <el-input @keyup.enter.native="getProjectList"
          v-model="keyword" clearable @clear="getProjectList"
          placeholder="Search Item here"
        ><i slot="suffix" class="el-input__icon el-icon-search" @click="getProjectList" ></i></el-input>
      </div>
      <div class="topbar-item com-flex">{{ total }} Projects</div>
    </div>

    <section class="project-wrap" v-if="total">
      <ul class="project">
        <li class="project-li" v-for="(items, index) in list" :key="items.id">
          <div class="head">
            <div class="head-item left">
              <img
                :src="items.open ? close : open"
                @click="toggle(index)"
                class="toggle"/>
              <el-input @keyup.enter.native="toggleEdit(items)" v-model="items.label_type" size="medium"
                class="edit-input" 
                v-if="items.lableEdit"
              />
              <span v-else>{{ items.label_type }}</span>
              <img src="@/assets/img/edit.png" @click="toggleEdit(items)" />
            </div>
            <!-- <div class="head-item right" @click="sendEnquiry">
              <img src="@/assets/img/email1.png" alt="" />
              Send enquiry
            </div> -->
          </div>
          <transition name="fade">
            <div v-show="items.open">
              <ul class="content" v-if="items.lists.length">
                <li
                  class="content-li"
                  v-for="(item, idx) in items.lists"
                  :key="item.id">
                  <div class="content-li-wrap">
                  <el-image lazy 
                    :src="item.info?.image"
                    fit="cover"
                    style="width: 335px; height: 290px"
                  ></el-image>
                  <div class="content-li-r">
                    <ul class="info">
                      <li>
                        <div class="name">{{ item.goods?.product_name }}</div>
                      </li>
                      <li>
                        <div class="left">Model</div>
                        <div class="right">
                          {{ item.goods?.product_code }}<span v-if="item.cycle?.name">,{{ item.cycle?.name }}</span>
                          <span v-if="item.priceUnit?.point">, {{ item.priceUnit?.point }} </span>
                          <span v-if="item.priceUnit?.colours_number">, {{ item.priceUnit?.colours_number }} colours</span>
                        </div>
                      </li>
                      <li v-if="item.goods_cart_decunit?.length">
                        <div class="left">Decoration</div>
                        <div class="right">
                          <div
                            v-for="option in item.goods_cart_decunit"
                            :key="option.id">
                          {{ option.point }} , {{ option.dec_name }} <span v-if="option.colours_number"></span>
                          </div>
                        </div>
                      </li>
                      <li  v-if="item.addition">
                        <div class="left">Addon</div>
                        <div class="right">{{ item.addition }}</div>
                      </li>
                      <li v-if="item.packaging_addition">
                        <div class="left">Packaging</div>
                        <div class="right">{{ item.packaging_addition }}</div>
                      </li>
                      <!-- <li>
                      <div class="left">3D link</div>
                      <div class="right">{{item.create_time}}</div>
                    </li> -->
                      <li>
                        <div class="left">Created</div>
                        <div class="right">
                          {{ item.create_time | setTime }}
                        </div>
                      </li>
                      <li>
                        <div class="left">Last Edited</div>
                        <div class="right">
                          {{ item.update_time | setTime }}
                        </div>
                      </li>
                    </ul>
                    <div class="func">
                      <el-tooltip
                        content="Copy"
                        placement="bottom"
                        effect="light"
                      >
                        <img
                          src="@/assets/img/copy.png"
                          alt=""
                          @click="copy(item)"
                        />
                      </el-tooltip>
                      <!-- <el-tooltip  content="Edit" placement="bottom" effect="light">
                      <img src="@/assets/img/pan.png" alt="">
                    </el-tooltip>
                    <el-tooltip  content="Build" placement="bottom" effect="light">
                      <img src="@/assets/img/build.png" alt="">
                    </el-tooltip> -->
                      <el-tooltip
                        content="Delete"
                        placement="bottom"
                        effect="light"
                      >
                        <img
                          src="@/assets/img/del.png"
                          alt=""
                          @click="del(item, index, idx)"
                        />
                      </el-tooltip>
                    </div>
                  </div>
                  </div>
                  <div class="mask" v-if="item.goods_check_update || item.goods?.for_au==0">
                    <p v-if="!item.goods?.for_au">This item has been discontinued and cannot be purchased</p>
                    <p v-else>Product information changes, please revise your project</p>
                    <div class="mask-btn">
                      <span class="del" @click="delGoods(item.id,index, idx)">remove</span>
                      <span class="edit" v-if="!item.goods?.for_au">Edit</span>
                      <span class="edit" v-else @click="goCategory(item.cate_arr)">buy the same item</span>
                    </div>
                  </div>
                </li>
              </ul>
              <el-empty
                v-else
                :image="empty"
                description="No Data!"
                :image-size="180"
              ></el-empty>
            </div>
          </transition>
        </li>
      </ul>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getProjectList"
      />
    </section>
    <el-empty
      v-else
      :image="empty"
      description="No projects have been saved yet!"
      :image-size="180"
    ></el-empty>
    <project-dialog
      :visible.sync="projectdDialogVisible"
      :id="projectId" @sendFinish="finishCopy"
    ></project-dialog>
    <!-- 邮箱 -->
    <form-dialog :emailForm="emailForm"  :visible.sync="formDialogVisible" @handleSend="sendPriceMail" :rules="rules" :labelWidth="90"></form-dialog>
      <!-- <mail-table ref="mailtable" :mailData="mailData" v-show="false"></mail-table> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      empty: require("@/assets/img/empty.png"),
      open: require("@/assets/img/open.png"),
      close: require("@/assets/img/close.png"),
      keyword: "",
      listQuery: {
        page: 1,
        limit: 10,
      },
      total: 0,
      list: [],
      projectdDialogVisible: false,
      projectId: null,
      old_label_type:"",
      formDialogVisible:false,
      emailForm:{
        Name:'',
        Email:'',
        Phone:'',
        Quantity:'',
        Comments:'',
      },
      rules:{
        Name: [{ required: true, message: "Please enter", trigger: "blur" }],
        Email: [{ required: true, message: "Please enter the correct format", pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/,trigger: "blur" }],
        Phone: [{ required: true, message: "Please enter the correct format",  pattern:/^1[0-9]{10}$/, trigger: "blur" }],
        Quantity: [{ required: true, message: "Please enter", trigger: "blur" }],
      },
    };
  },
  filters: {
    setTime(val) {
      if (val) {
        let tempArr = val.split(" ");
        let timeStr = tempArr[0];
        let timeArr = timeStr.split("-");
        return `${timeArr[2]}/${timeArr[1]}/${timeArr[0]}`;
      }
    },
  },
  mounted() {
    this.getProjectList();
  },
  methods: {
    getProjectList() {
      this.$axios
        .post("/api/goods_cart/lists", {
          keyword: this.keyword,
          page: this.listQuery.page,
          limit: this.listQuery.limit,
        })
        .then((res) => {
          if (res.code == 1) {
            this.list = res.result.data;
            this.total = res.result.total;
            this.list.forEach((items, i) => {
              this.$set(items, "lableEdit", false);
              i == 0
                ? this.$set(items, "open", true)
                : this.$set(items, "open", false);
            });
          }
        })
        .catch(() => {});
    },
    // 修改input
    toggleEdit(items,) {
      // this.$nextTick(function() {
      //     this.$refs[row.id].querySelector('input').focus();
      // })
      if (items.lableEdit) {
        if(!items.label_type){
          this.$message.warning('Please enter');
          return
        }
        this.$axios
        .post("/api/goods_cart/cartLabelEdit", {
          label_type_new: items.label_type,
          label_type_used: this.old_label_type
        })
        .then((res) => {});
      }else{
        this.old_label_type=items.label_type
      }
      items.lableEdit = !items.lableEdit;
    },
    toggle(i) {
      this.list[i].open = !this.list[i].open;
    },
    sendEnquiry(){
      this.formDialogVisible=true
    },
    sendPriceMail(){

    },
    copy(i) {
      this.projectdDialogVisible = true;
      this.projectId = i.id;
    },
    finishCopy(){
      this.projectdDialogVisible=false;
      location.reload()
    },
    del(item, index, idx) {
      this.$confirm("Are you sure that you want to delete your project?", {
        confirmButtonText: "Yes,remove",
        cancelButtonText: "No,thanks",
        showCancelButton: true,
        type: "error",
        center: true,
        confirmButtonClass: "project-sure",
        cancelButtonClass: "project-cancel",
        showClose: false,
        customClass: "message_style",
      }).then(() => {
        this.$axios.post("/api/goods_cart/delete", { id: item.id }).then((res) => {
          this.list[index].lists.splice(idx, 1);
          if (!this.list[index].lists.length) {
            this.list.splice(index, 1);
            this.total-=1;
          }
          this.projectdDialogVisible = false;
          this.$message.success("successfully deleted");
        });
      });
    },
    delGoods(id,index,idx){
      this.$axios.post("/api/goods_cart/delete", { id: id }).then((res) => {
          this.list[index].lists.splice(idx, 1);
          if (!this.list[index].lists.length) {
            this.list.splice(index, 1);
            this.total-=1;
          }
          this.$message.success("successfully deleted");
        });
    },
    goCategory(cate_arr){
      let index=cate_arr.length-1
      console.log('index: ', index);
      switch (index) {
        case 0:
          this.$router.push({
            name: "category-firstCategory",
            params: {
              firstCategory: cate_arr[0].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase(),
            },
          });
          break;
        case 1:
          this.$router.push({
            name: "category-firstCategory-secondCategory",
            params: {
              firstCategory: cate_arr[0].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase(),
              secondCategory: cate_arr[1].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase(),
            },
          });
          break;

        case 2:
          this.$router.push({
            name: "category-firstCategory-secondCategory-thirdCategory",
            params: {
              firstCategory: cate_arr[0].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase(),
              secondCategory: cate_arr[1].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase(),
              thirdCategory: cate_arr[2].name
                .replace(/\s+/g, "-")
                .replace("-&", "")
                .toLowerCase()
            },
          });
          break;

          default:
          this.$router.push({ path: '/category' })

      }
    }
  },
};
</script>

<style lang="scss" >
.pro-wrap {
  :deep(.el-breadcrumb) {
    font-family: Proxima Nova;
    font-style: italic;
    margin-top: 15px;
    line-height: 19px;
    .el-breadcrumb__item {
      .el-breadcrumb__inner.is-link {
        color: #4a596c;
      }
      .el-breadcrumb__inner {
        color: #0b6dc9;
      }
    }
  }

  :deep(.el-empty) {
    p {
      font-size: 24px;
      font-family: ProximaNova-Regular;
    }
  }
  .main {
    font-size: 16px;
  }
  .topbar {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    padding: 0 10px;
    .search-input {
      width: 60%;
      padding: 0 26px 0 0;
      position: relative;
      i{
        cursor: pointer;
      }
    }
    :deep(.el-input) {
      .el-input__inner {
        border-radius: 18px;
      }
    }
    .topbar-item {
      color: #102f47;
    }
  }
  .project-wrap {
    ul.project {
      .project-li {
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 14px;
        .head {
          position: relative;
          z-index: 1;
          padding: 0 20px;
          height: 45px;
          line-height: 45px;
          background-color: #00213b;
          color: #fff;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .head-item {
            display: flex;
            align-items: center;
          }
          .edit-input {
            display: inline-block;
            width: 150px;
            margin: 0 10px;
            :deep(.el-input__inner) {
              font-size: 16px;
              border-top: none;
              border-left: none;
              border-right: none;
              border-bottom: 1px solid rgb(196, 194, 194);
              color: #fff;
              border-radius: 0;
              background-color: #00213b;
            }
          }
          .left {
            img {
              cursor: pointer;
            }
            span {
              margin: 0 10px;
            }
          }
          .right {
            font-size: 12px;
            border: 1px solid #fff;
            padding: 0 8px;
            height: 36px;
            border-radius: 2px;
            cursor: pointer;
            img {
              margin-right: 10px;
            }
          }
        }
        ul.content {
          border-right: 1px solid #eee;
          border-left: 1px solid #eee;
          border-bottom: 1px solid #eee;
          // display: flex;
          // flex-direction: row;
          // align-items: center;
          .content-li {
            &:not(:first-child){
              border-top: 1px solid #eee;
            }
            position:relative;
            .content-li-wrap{
              padding: 14px 20px;
              display: flex;
              align-items: center;
            }
            .content-li-r {
              flex: 1;
              display: flex;
              ul.info {
                flex: 1;
                color: #666;
                margin-left: 20px;
                font-size: 16px;
                li {
                  display: flex;
                  margin-bottom: 20px;
                  .name {
                    font-size: 24px;
                    color: #333;
                    font-family: ProximaNova-Bold;
                    font-weight: bold;
                  }
                  .left {
                    width: 110px;
                    text-align: right;
                    margin-right: 24px;
                  }
                  .right {
                    div:nth-child(1) {
                      margin-bottom: 15px;
                    }
                  }
                }
              }
              .func {
                // align-self:flex-start;
                img {
                  cursor: pointer;
                  margin-left: 20px;
                }
              }
            }
            .mask{
              position: absolute;
              top:0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0,0,0,0.6);
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              p{
                color:#fff;
                font-size: 22px;
                margin-bottom: 20px;
              }
              .mask-btn{
                font-size: 16px;
                span{
                  display: inline-block;
                  padding:10px 0;
                  width: 160px;
                  text-align: center;
                  border-radius: 5px;
                  cursor: pointer;
                }
                .del{
                  border: 1px solid #e90000;
                  color:#e90000;
                  margin-right: 20px;
                  &:hover{
                    background-color: rgba(233, 0, 0,0.9);
                    color:#fff;
                  }
                }
                .edit{
                  border: 1px solid #fff;
                  color:#fff;
                }
              }
            }
          }
        }
      }
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.6s;
  }

  .fade-enter,
  .fade-leave-to {
    transform: translateY(-100%);
  }
}

.message_style {
  width: 550px;
  .el-message-box__content {
    font-size: 20px;
  }
  .el-message-box__btns {
    display: block !important;
    margin-top: 20px;
  }
  .project-sure {
    background-color: #00213b;
    color: #fff;
  }
  .project-cancel {
    color: #00213b;
    border: 1px solid #00213b;
  }
}
</style>