<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("/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("/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("/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("/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>