feat(goodsDetail): 商品详情样式改造
This commit is contained in:
woody
parent
820dae5c84
commit
3b91428ca8
|
|
@ -59,7 +59,7 @@ body {
|
|||
/*定义滚动条轨道 内阴影+圆角*/
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 5px;
|
||||
background: rgba(216, 216, 216, 1);
|
||||
background: #eeeeee;
|
||||
}
|
||||
/*定义滑块 内阴影+圆角*/
|
||||
::-webkit-scrollbar-thumb {
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="page">
|
||||
<!-- <div class="page_top">
|
||||
<div class="page_top">
|
||||
<div class="page_top_l"></div>
|
||||
<div class="page_top_r">
|
||||
<div @click="globalDivisions">{{ "全球分布" }}</div>
|
||||
<!-- <div @click="globalDivisions">{{ "全球分布" }}</div>
|
||||
<div @click="abount">{{ "关于我们" }}</div>
|
||||
<div>
|
||||
<i class="el-icon-phone-outline"></i>
|
||||
{{ "联系电话" }} 400-111-2818
|
||||
</div>
|
||||
</div> -->
|
||||
<div @click="goMore(2)">
|
||||
<el-badge :value="wdNum" class="item">
|
||||
<i class="el-icon-message"></i>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<i class="el-icon-s-custom"></i> {{ "在线客服" }}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="page_btm">
|
||||
<div class="page_btm_c">
|
||||
<div class="fHeigh" v-show="!menu1" @click="goIndex">首页</div>
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zhan"></div>
|
||||
<div class="placeholder-block"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -696,8 +696,8 @@ export default {
|
|||
z-index: 1999;
|
||||
}
|
||||
|
||||
.zhan {
|
||||
height: 80px;
|
||||
.placeholder-block {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.page_top {
|
||||
|
|
@ -722,7 +722,8 @@ export default {
|
|||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
gap: 30px;
|
||||
height: 44px;
|
||||
|
||||
div {
|
||||
|
|
@ -782,7 +783,7 @@ export default {
|
|||
}
|
||||
|
||||
.aBsolt {
|
||||
width: 237px;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
color: #333;
|
||||
|
|
@ -791,12 +792,12 @@ export default {
|
|||
box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
padding: 10px 0; // padding: 10px 36px;
|
||||
transform: translate(-72px, 0);
|
||||
transform: translate(-62px, 0);
|
||||
// bottom: 0;
|
||||
}
|
||||
|
||||
.aBsolts {
|
||||
width: 237px;
|
||||
width: 200px;
|
||||
transform: translateX(0);
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
|
@ -827,13 +828,13 @@ export default {
|
|||
|
||||
.aBsolt_i:hover {
|
||||
color: #ffffff;
|
||||
background: #e80502;
|
||||
background: var(--primary-color);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
}
|
||||
|
||||
.aBsolt_iu:hover .aBsolt_ii {
|
||||
color: #ffffff;
|
||||
background: #e80502;
|
||||
background: var(--primary-color);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,39 +7,44 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="swiper_t">
|
||||
<img :src="mainImgUrl"
|
||||
v-show="!isVideo">
|
||||
<video :src="mainImgUrl"
|
||||
v-show="isVideo"
|
||||
class="video-avatar"
|
||||
:autoplay="true"
|
||||
controls="controls"
|
||||
muted
|
||||
loop></video>
|
||||
<img :src="mainImgUrl" v-show="!isVideo" />
|
||||
<video
|
||||
:src="mainImgUrl"
|
||||
v-show="isVideo"
|
||||
class="video-avatar"
|
||||
:autoplay="true"
|
||||
controls="controls"
|
||||
muted
|
||||
loop
|
||||
></video>
|
||||
</div>
|
||||
<div>
|
||||
<i class="el-icon-arrow-left leftArw"
|
||||
@click="imgLeft()"></i>
|
||||
<i class="el-icon-arrow-left leftArw" @click="imgLeft()"></i>
|
||||
<ul class="Img_ul">
|
||||
<li v-for="(item,index) in imgUrlList"
|
||||
:key="index"
|
||||
class="Img_li"
|
||||
v-show="item"
|
||||
:style="imgStyle"
|
||||
@click="changeImg(item, index)">
|
||||
<img :class="index === imgActiveIndex ? 'img_activeBorder' : 'img_border'"
|
||||
:src="item">
|
||||
<li
|
||||
v-for="(item, index) in imgUrlList"
|
||||
:key="index"
|
||||
class="Img_li"
|
||||
v-show="item"
|
||||
:style="imgStyle"
|
||||
@click="changeImg(item, index)"
|
||||
>
|
||||
<img
|
||||
:class="
|
||||
index === imgActiveIndex ? 'img_activeBorder' : 'img_border'
|
||||
"
|
||||
:src="item"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<i class="el-icon-arrow-right rightArw"
|
||||
@click="imgRight()"></i>
|
||||
<i class="el-icon-arrow-right rightArw" @click="imgRight()"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mainImgUrls: '',
|
||||
mainImgUrls: "",
|
||||
imgUrlLists: [],
|
||||
},
|
||||
data() {
|
||||
|
|
@ -65,118 +70,118 @@ export default {
|
|||
mainImgUrl: this.mainImgUrls,
|
||||
imgUrlList: this.imgUrlLists,
|
||||
// 初始视频
|
||||
videoMp: '',
|
||||
videoMp: "",
|
||||
isVideo: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
mainImgUrls: {
|
||||
deep: true,
|
||||
handler(n) {
|
||||
this.mainImgUrl = n
|
||||
this.videoMp = n
|
||||
this.mainImgUrl = n;
|
||||
this.videoMp = n;
|
||||
},
|
||||
},
|
||||
mainImgUrl(n) {
|
||||
if (
|
||||
n.substr(-3) == 'jpg' ||
|
||||
n.substr(-3) == 'png' ||
|
||||
n.substr(-3) == 'gif'
|
||||
n.substr(-3) == "jpg" ||
|
||||
n.substr(-3) == "png" ||
|
||||
n.substr(-3) == "gif"
|
||||
) {
|
||||
this.isVideo = false
|
||||
this.isVideo = false;
|
||||
} else {
|
||||
this.isVideo = true
|
||||
this.isVideo = true;
|
||||
}
|
||||
},
|
||||
imgUrlLists(n, o) {
|
||||
this.imgUrlList = n
|
||||
this.imgUrlList = n;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
imgStyle() {
|
||||
return {
|
||||
transform: `translate3d(${this.imgDistance}px, 0, 0)`, // 计算移动的距离(x,y,z)
|
||||
}
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeImg(item, index) {
|
||||
if (index == 0) {
|
||||
this.mainImgUrl = this.videoMp
|
||||
this.mainImgUrl = this.videoMp;
|
||||
} else {
|
||||
this.mainImgUrl = item
|
||||
this.mainImgUrl = item;
|
||||
}
|
||||
|
||||
this.imgActiveIndex = index
|
||||
this.imgActiveIndex = index;
|
||||
},
|
||||
imgLeft() {
|
||||
if (this.imgActiveIndex > 0) {
|
||||
this.imgActiveIndex-- // 索引值-1
|
||||
this.imgActiveIndex--; // 索引值-1
|
||||
this.imgUrlList.forEach((item, index) => {
|
||||
// 循环小图,通过判断索引值赋值给大图
|
||||
if (this.imgActiveIndex === index) {
|
||||
this.mainImgUrl = item
|
||||
this.mainImgUrl = item;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
if (this.imgActiveIndex >= 4) {
|
||||
var index = 0
|
||||
var index = 0;
|
||||
const temp = window.setInterval(() => {
|
||||
// 利用定时器实现图片左右移动的动画效果
|
||||
if (index < 38) {
|
||||
// 移动次数(33次)
|
||||
this.imgDistance += 2 // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
|
||||
index++
|
||||
return
|
||||
this.imgDistance += 2; // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
|
||||
index++;
|
||||
return;
|
||||
} else {
|
||||
window.clearInterval(temp) // 移动完清除定时器
|
||||
window.clearInterval(temp); // 移动完清除定时器
|
||||
}
|
||||
}, 10)
|
||||
}, 10);
|
||||
}
|
||||
},
|
||||
imgRight() {
|
||||
if (this.imgActiveIndex < this.imgUrlList.length - 1) {
|
||||
this.imgActiveIndex++
|
||||
this.imgActiveIndex++;
|
||||
this.imgUrlList.forEach((item, index) => {
|
||||
if (this.imgActiveIndex === index) {
|
||||
this.mainImgUrl = item
|
||||
this.mainImgUrl = item;
|
||||
}
|
||||
})
|
||||
});
|
||||
if (this.imgActiveIndex >= 5) {
|
||||
this.allDistance = -76 * (this.imgActiveIndex - 4)
|
||||
var index = 0
|
||||
this.allDistance = -76 * (this.imgActiveIndex - 4);
|
||||
var index = 0;
|
||||
const temp = window.setInterval(() => {
|
||||
if (index < 38) {
|
||||
this.imgDistance -= 2 // 每次向右移动的距离
|
||||
index++
|
||||
return
|
||||
this.imgDistance -= 2; // 每次向右移动的距离
|
||||
index++;
|
||||
return;
|
||||
} else {
|
||||
window.clearInterval(temp)
|
||||
window.clearInterval(temp);
|
||||
}
|
||||
}, 10)
|
||||
}, 10);
|
||||
}
|
||||
} else if (this.imgActiveIndex === this.imgUrlList.length - 1) {
|
||||
// 到达最后一张图片，再点击跳转回第一张
|
||||
this.imgActiveIndex = 0
|
||||
this.mainImgUrl = this.videoMp
|
||||
this.imgActiveIndex = 0;
|
||||
this.mainImgUrl = this.videoMp;
|
||||
|
||||
var index = 0
|
||||
var index = 0;
|
||||
const temp = window.setInterval(() => {
|
||||
// 利用定时器实现图片左右移动的动画效果
|
||||
if (index < Math.abs(this.allDistance / 2)) {
|
||||
// 取绝对值再除
|
||||
this.imgDistance += 2 // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
|
||||
index++
|
||||
return
|
||||
this.imgDistance += 2; // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
|
||||
index++;
|
||||
return;
|
||||
} else {
|
||||
window.clearInterval(temp) // 移动完清除定时器
|
||||
window.clearInterval(temp); // 移动完清除定时器
|
||||
}
|
||||
}, 1)
|
||||
}, 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.swiper_t {
|
||||
|
|
@ -230,7 +235,7 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
.img_activeBorder {
|
||||
border: 3px solid #c71222;
|
||||
border: 3px solid var(--primary-color);
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
border-radius: 10px;
|
||||
|
|
@ -242,5 +247,3 @@ export default {
|
|||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,3 @@
|
|||
<!--
|
||||
* @Descripttion:
|
||||
* @version:
|
||||
* @Author: kBank
|
||||
* @Date: 2023-01-12 16:21:41
|
||||
-->
|
||||
<template>
|
||||
<div class="contain" ref="box">
|
||||
<!-- 用户头 -->
|
||||
|
|
@ -17,9 +11,7 @@
|
|||
<!-- 面包屑 -->
|
||||
<div class="mianbao">
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">{{
|
||||
'首页'
|
||||
}}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item
|
||||
v-if="specialArea != 18 && specialArea != 19"
|
||||
:to="{ path: '/shoppingMall?id=' + specialArea }"
|
||||
|
|
@ -28,7 +20,7 @@
|
|||
<el-breadcrumb-item v-else :to="{ path: '/spaceMallList' }">{{
|
||||
labelName
|
||||
}}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>{{ '商品详情' }}</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>商品详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<div class="details_t">
|
||||
|
|
@ -51,17 +43,17 @@
|
|||
<div class="dis_flex jusc" v-if="goodDetail.preSaleStatus == 1">
|
||||
<div class="dis_flex">
|
||||
<img src="@/assets/images/clock.png" alt="" />
|
||||
<div>{{ '预计发货' }}</div>
|
||||
<div>{{ "预计发货" }}</div>
|
||||
</div>
|
||||
<div class="dis_flex jusc_r">
|
||||
<div>{{ '剩余时间' }}:</div>
|
||||
<div>{{ "剩余时间" }}:</div>
|
||||
<div class="jusc_ri">{{ countDown }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c_bai_b">
|
||||
<div class="dis_flex just">
|
||||
<div class="dis_flex">
|
||||
<div class="tit5">
|
||||
<div class="goods-price">
|
||||
{{ userInfo.currencyIcon
|
||||
}}{{ goodDetail.goodsPrice | toThousandthAndKeepDecimal }}
|
||||
</div>
|
||||
|
|
@ -71,17 +63,19 @@
|
|||
}}{{ goodDetail.retailPrice | toThousandthAndKeepDecimal }}
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="tit7">{{ '累计销售' }}</div>
|
||||
<div class="tit7">{{ "累计销售" }}</div>
|
||||
</div>
|
||||
<div class="dis_flex just m10">
|
||||
<div class="tit4 dis_flex">
|
||||
<div
|
||||
v-show="
|
||||
goodDetail.specialArea != 13 && goodDetail.specialArea != 31&& goodDetail.specialArea !=10
|
||||
goodDetail.specialArea != 13 &&
|
||||
goodDetail.specialArea != 31 &&
|
||||
goodDetail.specialArea != 10
|
||||
"
|
||||
style="margin-right: 20px"
|
||||
>
|
||||
{{ '业绩' }}:{{
|
||||
{{ "业绩" }}:{{
|
||||
goodDetail.goodsAchive | toThousandthAndKeepDecimal
|
||||
}}
|
||||
</div>
|
||||
|
|
@ -91,7 +85,7 @@
|
|||
"
|
||||
style="margin-right: 20px"
|
||||
>
|
||||
{{ '业绩' }}:{{
|
||||
{{ "业绩" }}:{{
|
||||
goodDetail.goodsAchive | toThousandthAndKeepDecimal
|
||||
}}
|
||||
</div>
|
||||
|
|
@ -100,7 +94,7 @@
|
|||
goodDetail.specialArea == 10 || goodDetail.specialArea == 11
|
||||
"
|
||||
>
|
||||
{{ '积分可抵扣' }}:{{
|
||||
{{ "积分可抵扣" }}:{{
|
||||
goodDetail.deductMoney | numberToCurrency
|
||||
}}
|
||||
</div>
|
||||
|
|
@ -110,11 +104,11 @@
|
|||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="tit5">{{ goodDetail.sales | seles }}</div>
|
||||
<div class="goods-price">{{ goodDetail.sales | seles }}</div>
|
||||
</div>
|
||||
<div class="dis_flex just m10">
|
||||
<div class="dis_flex" v-if="goodDetail.giftNames">
|
||||
<div class="tit8">{{ '赠品' }}：</div>
|
||||
<div class="tit8">{{ "赠品" }}：</div>
|
||||
<div class="tit9">{{ goodDetail.giftNames }}</div>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
|
|
@ -149,17 +143,17 @@
|
|||
v-if="item.waresItemsParamsList.length > 0"
|
||||
>
|
||||
<div class="gui_t">
|
||||
<div class="gui_th">{{ '规格' }}:</div>
|
||||
<div class="gui_th">{{ "规格" }}:</div>
|
||||
<div class="gui_y">
|
||||
<div class="gui_tt">{{ item.productName }}</div>
|
||||
<div class="gui_yi">{{ '应选' }}:</div>
|
||||
<div class="gui_yi">{{ "应选" }}:</div>
|
||||
<span class="coloNum">{{ item.quantity }}</span>
|
||||
<div class="gui_yi">{{ '已选' }}:</div>
|
||||
<div class="gui_yi">{{ "已选" }}:</div>
|
||||
<span class="coloNum">{{ item.quantitySel }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gui_b">
|
||||
<div class="gui_bt">{{ '型号' }}:</div>
|
||||
<div class="gui_bt">{{ "型号" }}:</div>
|
||||
<div class="gui_bb">
|
||||
<div
|
||||
v-for="(ctem, cndex) in item.waresItemsParamsList"
|
||||
|
|
@ -208,7 +202,7 @@
|
|||
class="dis_flex"
|
||||
v-if="userInfo.registerShare == 0 || userInfo.registerFans == 0"
|
||||
>
|
||||
<div>{{ '数量' }}：</div>
|
||||
<div>{{ "数量" }}：</div>
|
||||
<el-input-number v-model="num" :min="1"></el-input-number>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -219,12 +213,12 @@
|
|||
"
|
||||
@click="toAddCar"
|
||||
>
|
||||
{{ '加入购物车' }}
|
||||
加入购物车
|
||||
</div>
|
||||
<!-- <div class="addCar" v-else @click="goBuy">{{ '购买' }}</div> -->
|
||||
<!-- {{ '服务承诺' }} -->
|
||||
<div class="dis_flex fw">
|
||||
<div>{{ '服务承诺' }}:</div>
|
||||
<div>{{ "服务承诺" }}:</div>
|
||||
<div
|
||||
class="fw_i"
|
||||
v-for="item in goodDetail.ensureLabelList"
|
||||
|
|
@ -238,7 +232,7 @@
|
|||
<!-- 推荐 -->
|
||||
<!-- 商品列表 -->
|
||||
<div class="goodList">
|
||||
<div class="tited">{{ '精品推荐' }}</div>
|
||||
<div class="tited">{{ "精品推荐" }}</div>
|
||||
<div
|
||||
class="good_i"
|
||||
v-for="item in goodList"
|
||||
|
|
@ -248,7 +242,7 @@
|
|||
<img class="goodImg" :src="item.cover1" alt="" />
|
||||
<div class="goodBtm">
|
||||
<div class="disFlex">
|
||||
<div class="tit5">
|
||||
<div class="goods-price">
|
||||
{{ userInfo.currencyIcon
|
||||
}}{{ item.waresPrice | toThousandthAndKeepDecimal }}
|
||||
</div>
|
||||
|
|
@ -258,11 +252,9 @@
|
|||
<div class="tit3">{{ item.waresName }}</div>
|
||||
</div>
|
||||
<div class="disFlex">
|
||||
<div class="tit4">{{ "销量" }}:{{ item.sales | seles }}</div>
|
||||
<div class="tit4">
|
||||
{{ '销量' }}:{{ item.sales | seles }}
|
||||
</div>
|
||||
<div class="tit4">
|
||||
{{ '业绩' }}:{{
|
||||
{{ "业绩" }}:{{
|
||||
item.waresAchieve | toThousandthAndKeepDecimal
|
||||
}}
|
||||
</div>
|
||||
|
|
@ -277,13 +269,13 @@
|
|||
:class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
|
||||
@click="isMenu = 0"
|
||||
>
|
||||
{{ '商品介绍' }}
|
||||
{{ "商品介绍" }}
|
||||
</div>
|
||||
<div
|
||||
:class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
|
||||
@click="isMenu = 1"
|
||||
>
|
||||
{{ '售后保障' }}
|
||||
{{ "售后保障" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="xian"></div>
|
||||
|
|
@ -348,100 +340,100 @@ export default {
|
|||
moneySymbol: "",
|
||||
zoneList: [
|
||||
{
|
||||
label: '分享专区',
|
||||
label: "分享专区",
|
||||
value: 100,
|
||||
name: "share",
|
||||
children: [
|
||||
{
|
||||
label: '海粉分享',
|
||||
label: "海粉分享",
|
||||
value: 7,
|
||||
name: "hiFans",
|
||||
},
|
||||
{
|
||||
label: '免费注册',
|
||||
label: "免费注册",
|
||||
value: 21,
|
||||
name: "haiFans",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '注册专区',
|
||||
label: "注册专区",
|
||||
value: 1,
|
||||
name: "regiest",
|
||||
children: [
|
||||
{
|
||||
label: '自营专区',
|
||||
label: "自营专区",
|
||||
value: 1,
|
||||
name: "regiestArea",
|
||||
},
|
||||
{
|
||||
label: '乐学易考',
|
||||
label: "乐学易考",
|
||||
value: 24,
|
||||
name: "ezLearnReg",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '升级专区',
|
||||
label: "升级专区",
|
||||
value: 2,
|
||||
name: "upgrade",
|
||||
children: [
|
||||
{
|
||||
label: '自营专区',
|
||||
label: "自营专区",
|
||||
value: 2,
|
||||
name: "upgradeArea",
|
||||
},
|
||||
{
|
||||
label: '乐学易考',
|
||||
label: "乐学易考",
|
||||
value: 25,
|
||||
name: "ezLearnUp",
|
||||
},
|
||||
{
|
||||
label: '海粉专区',
|
||||
label: "海粉专区",
|
||||
value: 27,
|
||||
name: "haiFunUpd",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '复购专区',
|
||||
label: "复购专区",
|
||||
value: 3,
|
||||
name: "repurchase",
|
||||
children: [
|
||||
{
|
||||
label: '自营专区',
|
||||
label: "自营专区",
|
||||
value: 3,
|
||||
name: "self",
|
||||
},
|
||||
{
|
||||
label: '三方供应',
|
||||
label: "三方供应",
|
||||
value: 21,
|
||||
name: "haiFans",
|
||||
},
|
||||
{
|
||||
label: '复购合作',
|
||||
label: "复购合作",
|
||||
value: 22,
|
||||
name: "cooperation",
|
||||
},
|
||||
{
|
||||
label: '乐学易考',
|
||||
label: "乐学易考",
|
||||
value: 26,
|
||||
name: "ezLearnRep",
|
||||
},
|
||||
{
|
||||
label: '直播专区',
|
||||
label: "直播专区",
|
||||
value: 14,
|
||||
name: "live",
|
||||
},
|
||||
{
|
||||
label: '工具流',
|
||||
label: "工具流",
|
||||
value: 12,
|
||||
name: "gongju",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '福利专区',
|
||||
label: "福利专区",
|
||||
value: 13,
|
||||
children: [],
|
||||
name: "welfare",
|
||||
|
|
@ -453,7 +445,7 @@ export default {
|
|||
// name: 'integral',
|
||||
// },
|
||||
{
|
||||
label: '重消专区',
|
||||
label: "重消专区",
|
||||
value: 10,
|
||||
children: [],
|
||||
name: "rescission",
|
||||
|
|
@ -532,7 +524,6 @@ export default {
|
|||
}
|
||||
},
|
||||
goDetails(item) {
|
||||
let that = this;
|
||||
this.$router.replace({
|
||||
path: "/goodsDetails",
|
||||
query: {
|
||||
|
|
@ -573,7 +564,7 @@ export default {
|
|||
});
|
||||
if (allNum != selNum) {
|
||||
this.$message({
|
||||
message: '请添加产品',
|
||||
message: "请添加产品",
|
||||
type: "warning",
|
||||
});
|
||||
return false;
|
||||
|
|
@ -605,7 +596,7 @@ export default {
|
|||
pkCountry: this.pkCountry,
|
||||
});
|
||||
this.$message({
|
||||
message: '购物车添加成功',
|
||||
message: "购物车添加成功",
|
||||
type: "success",
|
||||
});
|
||||
});
|
||||
|
|
@ -632,7 +623,7 @@ export default {
|
|||
});
|
||||
if (allNum != selNum) {
|
||||
this.$message({
|
||||
message: '请添加产品',
|
||||
message: "请添加产品",
|
||||
type: "warning",
|
||||
});
|
||||
return false;
|
||||
|
|
@ -860,7 +851,7 @@ export default {
|
|||
this.goodDetail = res.data;
|
||||
let sl = this.goodDetail.sales + "";
|
||||
if (sl >= 10000) {
|
||||
sl = sl.substring(0, sl.length - 4) + '万' + "+";
|
||||
sl = sl.substring(0, sl.length - 4) + "万" + "+";
|
||||
}
|
||||
this.goodDetail.sales = sl;
|
||||
this.mainImgUrl = res.data.videoUrl;
|
||||
|
|
@ -947,8 +938,8 @@ export default {
|
|||
// })
|
||||
this.downTime();
|
||||
if (this.specialArea == 31) {
|
||||
this.$refs.sideBar.getSpecial(31);
|
||||
}
|
||||
this.$refs.sideBar.getSpecial(31);
|
||||
}
|
||||
});
|
||||
},
|
||||
downTime() {
|
||||
|
|
@ -1110,7 +1101,7 @@ export default {
|
|||
font-size: 16px;
|
||||
}
|
||||
.coloNum {
|
||||
color: #00417C;
|
||||
color: #00417c;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
margin-top: 3px;
|
||||
|
|
@ -1224,7 +1215,7 @@ export default {
|
|||
// }
|
||||
// }
|
||||
.addCar {
|
||||
background: #d61820;
|
||||
background: var(--primary-color);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
|
@ -1238,7 +1229,7 @@ export default {
|
|||
.tit1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #00417C;
|
||||
color: #00417c;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
|
@ -1264,10 +1255,10 @@ export default {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tit5 {
|
||||
.goods-price {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #00417C;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.tit6 {
|
||||
|
|
@ -1286,7 +1277,7 @@ export default {
|
|||
.tit8 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #00417C;
|
||||
color: #00417c;
|
||||
}
|
||||
|
||||
.tit9 {
|
||||
|
|
@ -1296,7 +1287,7 @@ export default {
|
|||
}
|
||||
|
||||
::v-deep .el-breadcrumb__inner.is-link:hover {
|
||||
color: #c01f1f !important;
|
||||
color: var(--primary-color) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-breadcrumb {
|
||||
|
|
@ -1322,7 +1313,7 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
.actMenu {
|
||||
border-bottom: 5px solid #00417C;
|
||||
border-bottom: 5px solid #00417c;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,175 +10,193 @@
|
|||
<personInfo></personInfo>
|
||||
<div class="allTable">
|
||||
<div class="allGoods">
|
||||
{{'全部商品'}} {{ carNum }}
|
||||
<div class="tips"
|
||||
v-if="isWarning">
|
||||
<div>{{'注：跨专区订单不可同时购买'}}</div>
|
||||
<img src="../../assets/images/x.png"
|
||||
alt=""
|
||||
@click="isWarning = false" />
|
||||
{{ "全部商品" }} {{ carNum }}
|
||||
<div class="tips" v-if="isWarning">
|
||||
<div>{{ "注：跨专区订单不可同时购买" }}</div>
|
||||
<img
|
||||
src="../../assets/images/x.png"
|
||||
alt=""
|
||||
@click="isWarning = false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table_tit table_width">
|
||||
<div class="tab_i1"
|
||||
style="margin-left: 20px">{{'商品'}}</div>
|
||||
<div>{{ '规格' }}</div>
|
||||
<div>{{ '商品单价' }}(¥)</div>
|
||||
<div>{{ '商品业绩' }}(PV)</div>
|
||||
<div>{{ '数量' }}</div>
|
||||
<div>{{ '总价格' }}(￥)</div>
|
||||
<div>{{ '总业绩' }}(PV)</div>
|
||||
<div>{{ '操作' }}</div>
|
||||
<div class="tab_i1" style="margin-left: 20px">{{ "商品" }}</div>
|
||||
<div>{{ "规格" }}</div>
|
||||
<div>{{ "商品单价" }}(¥)</div>
|
||||
<div>{{ "商品业绩" }}(PV)</div>
|
||||
<div>{{ "数量" }}</div>
|
||||
<div>{{ "总价格" }}(￥)</div>
|
||||
<div>{{ "总业绩" }}(PV)</div>
|
||||
<div>{{ "操作" }}</div>
|
||||
</div>
|
||||
<div v-for="(item, index) in shopCarList"
|
||||
:key="index">
|
||||
<div v-for="(item, index) in shopCarList" :key="index">
|
||||
<div class="t_top">
|
||||
<el-checkbox v-model="item.isSelected"
|
||||
@change="checkClickArea($event, item)"></el-checkbox>
|
||||
<el-checkbox
|
||||
v-model="item.isSelected"
|
||||
@change="checkClickArea($event, item)"
|
||||
></el-checkbox>
|
||||
<div class="zuanqu">{{ item.specialAreaVal }}</div>
|
||||
</div>
|
||||
<div v-for="(ctem, cndex) in item.shoppingCartList"
|
||||
:key="cndex"
|
||||
class="t_btm table_width">
|
||||
<div
|
||||
v-for="(ctem, cndex) in item.shoppingCartList"
|
||||
:key="cndex"
|
||||
class="t_btm table_width"
|
||||
>
|
||||
<div class="tab_i1">
|
||||
<el-checkbox v-model="ctem.isSelected"
|
||||
@change="checkClick($event, item, cndex, ctem)"></el-checkbox>
|
||||
<img :src="ctem.cover1"
|
||||
alt="" />
|
||||
<el-checkbox
|
||||
v-model="ctem.isSelected"
|
||||
@change="checkClick($event, item, cndex, ctem)"
|
||||
></el-checkbox>
|
||||
<img :src="ctem.cover1" alt="" />
|
||||
<div class="tab_i1_1">{{ ctem.waresName }}</div>
|
||||
</div>
|
||||
<div class="tab_i2"
|
||||
v-if="item.specialArea!=21">
|
||||
<div v-for="(stem,sndex) in ctem.productParams"
|
||||
:key="sndex"
|
||||
class="tab_i2i">
|
||||
<div class="tab_i2il"> {{ stem.productName }}{{ stem.waresItemsParamsList.length>0&&stem.waresItemsParamsList[0].specsName }}</div>
|
||||
<div class="tab_i2ir">*{{ stem.waresItemsParamsList.length>0&&stem.waresItemsParamsList[0].quantity }}</div>
|
||||
<div class="tab_i2" v-if="item.specialArea != 21">
|
||||
<div
|
||||
v-for="(stem, sndex) in ctem.productParams"
|
||||
:key="sndex"
|
||||
class="tab_i2i"
|
||||
>
|
||||
<div class="tab_i2il">
|
||||
{{ stem.productName
|
||||
}}{{
|
||||
stem.waresItemsParamsList.length > 0 &&
|
||||
stem.waresItemsParamsList[0].specsName
|
||||
}}
|
||||
</div>
|
||||
<div class="tab_i2ir">
|
||||
*{{
|
||||
stem.waresItemsParamsList.length > 0 &&
|
||||
stem.waresItemsParamsList[0].quantity
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab_i2"
|
||||
v-else>
|
||||
<div v-for="(stem,sndex) in ctem.waresSkuList"
|
||||
:key="sndex"
|
||||
class="tab_i2i"
|
||||
style="justify-content: center;">
|
||||
{{ stem.specValueNames}}
|
||||
<div class="tab_i2" v-else>
|
||||
<div
|
||||
v-for="(stem, sndex) in ctem.waresSkuList"
|
||||
:key="sndex"
|
||||
class="tab_i2i"
|
||||
style="justify-content: center"
|
||||
>
|
||||
{{ stem.specValueNames }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="hui">{{ userInfo.currencyIcon }}{{ ctem.waresPrice }}</div>
|
||||
<div class="hui">
|
||||
{{ userInfo.currencyIcon }}{{ ctem.waresPrice }}
|
||||
</div>
|
||||
<div class="hui">{{ ctem.achieve }}</div>
|
||||
<div>
|
||||
<el-input-number v-model="ctem.number"
|
||||
@change="changeCar(item, ctem, index, cndex)"
|
||||
:min="1"></el-input-number>
|
||||
<el-input-number
|
||||
v-model="ctem.number"
|
||||
@change="changeCar(item, ctem, index, cndex)"
|
||||
:min="1"
|
||||
></el-input-number>
|
||||
</div>
|
||||
|
||||
<div class="hui">{{ userInfo.currencyIcon }}{{ ctem.waresPrice*ctem.number |numberToCurrency }}</div>
|
||||
<div class="hui">{{ ctem.achieve*ctem.number |numberToCurrency }}</div>
|
||||
<div @click="delOne(ctem)"
|
||||
class="del1">{{ '删除' }}</div>
|
||||
<div class="hui">
|
||||
{{ userInfo.currencyIcon
|
||||
}}{{ (ctem.waresPrice * ctem.number) | numberToCurrency }}
|
||||
</div>
|
||||
<div class="hui">
|
||||
{{ (ctem.achieve * ctem.number) | numberToCurrency }}
|
||||
</div>
|
||||
<div @click="delOne(ctem)" class="del1">{{ "删除" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 100px"></div>
|
||||
<div class="footer">
|
||||
<div class="foot_l">
|
||||
<div @click="dellot"
|
||||
class="del">{{ '删除选中的商品' }}</div>
|
||||
<div @click="emptyCar"
|
||||
class="del">{{ '清空购物车' }}</div>
|
||||
<div @click="dellot" class="del">{{ "删除选中的商品" }}</div>
|
||||
<div @click="emptyCar" class="del">{{ "清空购物车" }}</div>
|
||||
</div>
|
||||
<div class="foot_r">
|
||||
<div>
|
||||
{{ '已选择' }}<span class="red">{{ num }}</span>{{ '件商品' }}
|
||||
{{ "已选择" }}<span class="red">{{ num }}</span
|
||||
>{{ "件商品" }}
|
||||
</div>
|
||||
<div class="foot_ri red">
|
||||
{{ '总价' }}:
|
||||
{{ "总价" }}:
|
||||
<div>
|
||||
{{ userInfo.currencyIcon }}{{ totalPrice | numberToCurrency }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="foot_ri lan">
|
||||
{{ '业绩' }}:
|
||||
{{ "业绩" }}:
|
||||
<div>
|
||||
{{ totalAchive | numberToCurrency }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn del"
|
||||
v-show="this.goodsCheck.length == 1"
|
||||
@click="toBuy">
|
||||
{{ '购买' }}
|
||||
<div
|
||||
class="btn del"
|
||||
v-show="this.goodsCheck.length == 1"
|
||||
@click="toBuy"
|
||||
>
|
||||
{{ "购买" }}
|
||||
</div>
|
||||
<div class="btn1" v-show="this.goodsCheck.length != 1">
|
||||
{{ "购买" }}
|
||||
</div>
|
||||
<div class="btn1"
|
||||
v-show="this.goodsCheck.length != 1">{{ '购买' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="赠品列表"
|
||||
:visible.sync="dialogVisible2"
|
||||
width="50%"
|
||||
:before-close="handleClose2">
|
||||
<el-table :data="tableData"
|
||||
style="width: 100%"
|
||||
height="400px"
|
||||
:header-cell-style="{ background: '#EEEEEE' }"
|
||||
:row-class-name="tableRowClassName"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection"
|
||||
width="55"> </el-table-column>
|
||||
<el-table-column align="center"
|
||||
prop="cover1"
|
||||
label="商品图片">
|
||||
<el-dialog
|
||||
title="赠品列表"
|
||||
:visible.sync="dialogVisible2"
|
||||
width="50%"
|
||||
:before-close="handleClose2"
|
||||
>
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
height="400px"
|
||||
:header-cell-style="{ background: '#EEEEEE' }"
|
||||
:row-class-name="tableRowClassName"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="55"> </el-table-column>
|
||||
<el-table-column align="center" prop="cover1" label="商品图片">
|
||||
<template slot-scope="scope">
|
||||
<img class="bgImg"
|
||||
:src="scope.row.cover1"
|
||||
alt="" />
|
||||
<img class="bgImg" :src="scope.row.cover1" alt="" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center"
|
||||
prop="waresName"
|
||||
label="商品名称">
|
||||
<el-table-column align="center" prop="waresName" label="商品名称">
|
||||
</el-table-column>
|
||||
<el-table-column align="center"
|
||||
prop="waresCode"
|
||||
label="商品编号">
|
||||
<el-table-column align="center" prop="waresCode" label="商品编号">
|
||||
</el-table-column>
|
||||
<el-table-column align="center"
|
||||
prop="waresPrice"
|
||||
label="商品价格">
|
||||
<el-table-column align="center" prop="waresPrice" label="商品价格">
|
||||
</el-table-column>
|
||||
<el-table-column align="center"
|
||||
prop=""
|
||||
label="数量">
|
||||
<el-table-column align="center" prop="" label="数量">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number size="mini"
|
||||
@change="calPrice"
|
||||
v-model="scope.row.quantity"
|
||||
:min="1"></el-input-number>
|
||||
<el-input-number
|
||||
size="mini"
|
||||
@change="calPrice"
|
||||
v-model="scope.row.quantity"
|
||||
:min="1"
|
||||
></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="total">合计:{{ total |toThousandthAndKeepDecimal}}</div>
|
||||
<span slot="footer"
|
||||
class="dialog-footer">
|
||||
<div class="total">合计:{{ total | toThousandthAndKeepDecimal }}</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible2 = false">取 消</el-button>
|
||||
<el-button type="primary"
|
||||
@click="tableTrue">确 定</el-button>
|
||||
<el-button type="primary" @click="tableTrue">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import personInfo from '@/components/personInfo.vue'
|
||||
import * as api from '@/api/goods.js'
|
||||
import { memLevel } from '@/api/register.js'
|
||||
import { mapGetters } from 'vuex'
|
||||
import personInfo from "@/components/personInfo.vue";
|
||||
import * as api from "@/api/goods.js";
|
||||
import { memLevel } from "@/api/register.js";
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
components: {
|
||||
personInfo,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo']),
|
||||
...mapGetters(["userInfo"]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -190,27 +208,27 @@ export default {
|
|||
isWarning: true,
|
||||
carNum: 0,
|
||||
tableData: [],
|
||||
dialogVisible2:false,
|
||||
selTable:[],
|
||||
total:'0.00'
|
||||
}
|
||||
dialogVisible2: false,
|
||||
selTable: [],
|
||||
total: "0.00",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getCarList()
|
||||
this.getShoppingCount()
|
||||
this.getCarList();
|
||||
this.getShoppingCount();
|
||||
},
|
||||
methods: {
|
||||
getShoppingCount() {
|
||||
api.getShoppingCount().then((res) => {
|
||||
this.carNum = res.data.cont
|
||||
})
|
||||
this.carNum = res.data.cont;
|
||||
});
|
||||
},
|
||||
toBuy() {
|
||||
let shoppArr = this.goodsCheck[0].orderItemsParams.map((item) => {
|
||||
return item.shoppingId
|
||||
})
|
||||
localStorage.setItem('allGoods', '')
|
||||
localStorage.setItem('allGoods', JSON.stringify(shoppArr))
|
||||
return item.shoppingId;
|
||||
});
|
||||
localStorage.setItem("allGoods", "");
|
||||
localStorage.setItem("allGoods", JSON.stringify(shoppArr));
|
||||
if (
|
||||
this.goodsCheck[0].specialArea == 3 ||
|
||||
this.goodsCheck[0].specialArea == 12 ||
|
||||
|
|
@ -220,27 +238,27 @@ export default {
|
|||
this.goodsCheck[0].specialArea == 28
|
||||
) {
|
||||
this.$router.push({
|
||||
path: 'repurchase',
|
||||
path: "repurchase",
|
||||
query: {
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
},
|
||||
})
|
||||
}else if(this.goodsCheck[0].specialArea == 31){
|
||||
});
|
||||
} else if (this.goodsCheck[0].specialArea == 31) {
|
||||
if (this.totalPrice < 1000) {
|
||||
this.$message({
|
||||
message: "购买商品总价格不能低于1000元",
|
||||
type: "warning",
|
||||
});
|
||||
return false;
|
||||
}else{
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: "repurchase",
|
||||
query: {
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
},
|
||||
});
|
||||
path: "repurchase",
|
||||
query: {
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
},
|
||||
});
|
||||
}
|
||||
}else if (this.goodsCheck[0].specialArea == 30) {
|
||||
} else if (this.goodsCheck[0].specialArea == 30) {
|
||||
if (this.goodsCheck[0].orderItemsParams.length > 1) {
|
||||
this.$message({
|
||||
message: "续约专区每次只能购买一件商品",
|
||||
|
|
@ -268,20 +286,20 @@ export default {
|
|||
}
|
||||
} else if (this.goodsCheck[0].specialArea == 13) {
|
||||
this.$router.push({
|
||||
path: 'welfare',
|
||||
})
|
||||
path: "welfare",
|
||||
});
|
||||
} else if (this.goodsCheck[0].specialArea == 14) {
|
||||
this.$router.push({
|
||||
path: 'tvIng',
|
||||
})
|
||||
path: "tvIng",
|
||||
});
|
||||
} else if (this.goodsCheck[0].specialArea == 11) {
|
||||
this.$router.push({
|
||||
path: 'integral',
|
||||
})
|
||||
path: "integral",
|
||||
});
|
||||
} else if (this.goodsCheck[0].specialArea == 10) {
|
||||
this.$router.push({
|
||||
path: 'rescission',
|
||||
})
|
||||
path: "rescission",
|
||||
});
|
||||
} else if (
|
||||
this.goodsCheck[0].specialArea == 1 ||
|
||||
this.goodsCheck[0].specialArea == 24
|
||||
|
|
@ -310,12 +328,12 @@ export default {
|
|||
// })
|
||||
// }
|
||||
// })
|
||||
let deleteList = []
|
||||
let deleteList = [];
|
||||
shoppArr.forEach((item) => {
|
||||
deleteList.push({
|
||||
shoppingId: item,
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
api
|
||||
.validShop({
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
|
|
@ -329,21 +347,21 @@ export default {
|
|||
})
|
||||
.then((response) => {
|
||||
if (response.data && response.data.length > 0) {
|
||||
this.tableData = response.data
|
||||
this.tableData = response.data;
|
||||
this.tableData.forEach((item) => {
|
||||
this.$set(item, 'quantity', 1)
|
||||
})
|
||||
this.dialogVisible2 = true
|
||||
this.$set(item, "quantity", 1);
|
||||
});
|
||||
this.dialogVisible2 = true;
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: 'register',
|
||||
path: "register",
|
||||
query: {
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
} else if (this.goodsCheck[0].specialArea == 2) {
|
||||
// let deleteList = []
|
||||
// shoppArr.forEach((item) => {
|
||||
|
|
@ -371,12 +389,12 @@ export default {
|
|||
// })
|
||||
// }
|
||||
// })
|
||||
let deleteList = []
|
||||
let deleteList = [];
|
||||
shoppArr.forEach((item) => {
|
||||
deleteList.push({
|
||||
shoppingId: item,
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
api
|
||||
.validShop({
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
|
|
@ -390,186 +408,186 @@ export default {
|
|||
})
|
||||
.then((response) => {
|
||||
if (response.data && response.data.length > 0) {
|
||||
this.tableData = response.data
|
||||
this.tableData = response.data;
|
||||
this.tableData.forEach((item) => {
|
||||
this.$set(item, 'quantity', 1)
|
||||
})
|
||||
this.dialogVisible2 = true
|
||||
this.$set(item, "quantity", 1);
|
||||
});
|
||||
this.dialogVisible2 = true;
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: 'upgrade',
|
||||
path: "upgrade",
|
||||
query: {
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
} else if (
|
||||
this.goodsCheck[0].specialArea == 25 ||
|
||||
this.goodsCheck[0].specialArea == 27
|
||||
) {
|
||||
this.$router.push({
|
||||
path: 'upgrade',
|
||||
path: "upgrade",
|
||||
query: {
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
},
|
||||
})
|
||||
});
|
||||
} else if (
|
||||
this.goodsCheck[0].specialArea == 7 ||
|
||||
this.goodsCheck[0].specialArea == 101
|
||||
) {
|
||||
this.$router.push({
|
||||
path: 'hiFans',
|
||||
path: "hiFans",
|
||||
query: {
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
},
|
||||
})
|
||||
});
|
||||
} else if (this.goodsCheck[0].specialArea == 18) {
|
||||
this.$router.push({
|
||||
path: 'spaceRegister',
|
||||
path: "spaceRegister",
|
||||
query: {
|
||||
specialArea: 18,
|
||||
},
|
||||
})
|
||||
});
|
||||
} else if (this.goodsCheck[0].specialArea == 19) {
|
||||
this.$router.push({
|
||||
path: 'spaceRegister',
|
||||
path: "spaceRegister",
|
||||
query: {
|
||||
specialArea: 19,
|
||||
},
|
||||
})
|
||||
});
|
||||
} else if (this.goodsCheck[0].specialArea == 21) {
|
||||
this.$router.push({
|
||||
path: 'shareConfirm',
|
||||
path: "shareConfirm",
|
||||
query: {
|
||||
specialArea: 21,
|
||||
allData: JSON.stringify(this.goodsCheck[0].orderItemsParams),
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
// 多删
|
||||
dellot() {
|
||||
let deleteList = []
|
||||
let deleteList = [];
|
||||
this.shopCarList.forEach((item) => {
|
||||
item.shoppingCartList.forEach((ctem) => {
|
||||
if (ctem.isSelected) {
|
||||
deleteList.push({
|
||||
shoppingId: ctem.shoppingId,
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
})
|
||||
this.$confirm('确认删除选中商品' + '?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
});
|
||||
this.$confirm("确认删除选中商品" + "?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
api.batchDelShopping({ deleteList: deleteList }).then((res) => {
|
||||
this.getCarList()
|
||||
this.getShoppingCount()
|
||||
this.getCarList();
|
||||
this.getShoppingCount();
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功' + '!',
|
||||
})
|
||||
})
|
||||
})
|
||||
type: "success",
|
||||
message: "删除成功" + "!",
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
// waresPrice
|
||||
let total = 0
|
||||
val.forEach(item => {
|
||||
total+=Number(item.waresPrice)*item.quantity
|
||||
})
|
||||
this.total = total
|
||||
this.selTable = val
|
||||
let total = 0;
|
||||
val.forEach((item) => {
|
||||
total += Number(item.waresPrice) * item.quantity;
|
||||
});
|
||||
this.total = total;
|
||||
this.selTable = val;
|
||||
},
|
||||
calPrice(e){
|
||||
let total = 0
|
||||
this.selTable.forEach(item => {
|
||||
total+=Number(item.waresPrice)*item.quantity
|
||||
})
|
||||
this.total = total
|
||||
calPrice(e) {
|
||||
let total = 0;
|
||||
this.selTable.forEach((item) => {
|
||||
total += Number(item.waresPrice) * item.quantity;
|
||||
});
|
||||
this.total = total;
|
||||
},
|
||||
handleClose2() {
|
||||
this.dialogVisible2 = false
|
||||
this.dialogVisible2 = false;
|
||||
},
|
||||
tableTrue() {
|
||||
if (this.selTable.length > 0) {
|
||||
let a = {
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
orderItemsParams: [],
|
||||
}
|
||||
};
|
||||
a.orderItemsParams = this.selTable.map((item) => {
|
||||
return {
|
||||
waresCode: item.waresCode,
|
||||
quantity: item.quantity,
|
||||
waresItemsParamList: item.productGroup,
|
||||
energySilo: 1,
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
a.orderItemsParams.forEach((item) => {
|
||||
item.waresItemsParamList = item.waresItemsParamList.map((ctem) => {
|
||||
return {
|
||||
pkWaresSpecsSku: ctem.pkSkuId,
|
||||
quantity:ctem.quantity
|
||||
}
|
||||
})
|
||||
})
|
||||
quantity: ctem.quantity,
|
||||
};
|
||||
});
|
||||
});
|
||||
api.energyShopSilo(a).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.dialogVisible2 = false
|
||||
this.dialogVisible2 = false;
|
||||
if (this.goodsCheck[0].specialArea == 1) {
|
||||
this.$router.push({
|
||||
path: 'register',
|
||||
path: "register",
|
||||
query: {
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
selTable: JSON.stringify(this.selTable),
|
||||
},
|
||||
})
|
||||
});
|
||||
} else if (this.goodsCheck[0].specialArea == 2) {
|
||||
this.$router.push({
|
||||
path: 'upgrade',
|
||||
path: "upgrade",
|
||||
query: {
|
||||
specialArea: this.goodsCheck[0].specialArea,
|
||||
selTable: JSON.stringify(this.selTable),
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: '请选择赠品',
|
||||
type: 'warning',
|
||||
})
|
||||
message: "请选择赠品",
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
},
|
||||
// 清空购物车
|
||||
emptyCar() {
|
||||
let deleteList = []
|
||||
let deleteList = [];
|
||||
this.shopCarList.forEach((item) => {
|
||||
item.shoppingCartList.forEach((ctem) => {
|
||||
deleteList.push({
|
||||
shoppingId: ctem.shoppingId,
|
||||
})
|
||||
})
|
||||
})
|
||||
this.$confirm('确认清空购物车' + '?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
});
|
||||
});
|
||||
this.$confirm("确认清空购物车" + "?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
api.batchDelShopping({ deleteList: deleteList }).then((res) => {
|
||||
this.getCarList()
|
||||
this.getCarList();
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功' + '!',
|
||||
})
|
||||
})
|
||||
})
|
||||
this.getShoppingCount()
|
||||
type: "success",
|
||||
message: "删除成功" + "!",
|
||||
});
|
||||
});
|
||||
});
|
||||
this.getShoppingCount();
|
||||
},
|
||||
// 单删
|
||||
delOne(ctem) {
|
||||
|
|
@ -577,21 +595,21 @@ export default {
|
|||
{
|
||||
shoppingId: ctem.shoppingId,
|
||||
},
|
||||
]
|
||||
this.$confirm('确认删除该商品' + '?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
];
|
||||
this.$confirm("确认删除该商品" + "?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
api.batchDelShopping({ deleteList: deleteList }).then((res) => {
|
||||
this.getCarList()
|
||||
this.getShoppingCount()
|
||||
this.getCarList();
|
||||
this.getShoppingCount();
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功' + '!',
|
||||
})
|
||||
})
|
||||
})
|
||||
type: "success",
|
||||
message: "删除成功" + "!",
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
// 修改数量
|
||||
changeCar(item, ctem, index, cndex) {
|
||||
|
|
@ -602,63 +620,63 @@ export default {
|
|||
specialArea: item.specialArea,
|
||||
})
|
||||
.then((res) => {
|
||||
this.checkArea()
|
||||
this.getShoppingCount()
|
||||
this.checkArea();
|
||||
this.getShoppingCount();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.getCarList()
|
||||
})
|
||||
this.getCarList();
|
||||
});
|
||||
},
|
||||
getCarList() {
|
||||
api.getShopping().then((res) => {
|
||||
res.data.forEach((item) => {
|
||||
item.isSelected = false
|
||||
item.isSelected = false;
|
||||
item.shoppingCartList.forEach((ctem) => {
|
||||
ctem.isSelected = false
|
||||
ctem.waresItemsParamList = []
|
||||
ctem.isSelected = false;
|
||||
ctem.waresItemsParamList = [];
|
||||
if (item.specialArea != 21) {
|
||||
ctem.productParams.forEach((stem) => {
|
||||
if (stem.waresItemsParamsList.length > 0) {
|
||||
stem.waresItemsParamsList[0].pkWaresSpecsSku =
|
||||
stem.waresItemsParamsList[0].pkSkuId
|
||||
stem.waresItemsParamsList[0].productName = stem.productName
|
||||
ctem.waresItemsParamList.push(stem.waresItemsParamsList[0])
|
||||
stem.waresItemsParamsList[0].pkSkuId;
|
||||
stem.waresItemsParamsList[0].productName = stem.productName;
|
||||
ctem.waresItemsParamList.push(stem.waresItemsParamsList[0]);
|
||||
}
|
||||
})
|
||||
});
|
||||
} else {
|
||||
}
|
||||
})
|
||||
})
|
||||
this.shopCarList = res.data
|
||||
})
|
||||
});
|
||||
});
|
||||
this.shopCarList = res.data;
|
||||
});
|
||||
},
|
||||
checkClickArea(e, item) {
|
||||
item.shoppingCartList.forEach((ctem) => {
|
||||
if (e) {
|
||||
ctem.isSelected = true
|
||||
ctem.isSelected = true;
|
||||
} else {
|
||||
ctem.isSelected = false
|
||||
ctem.isSelected = false;
|
||||
}
|
||||
})
|
||||
this.checkArea()
|
||||
});
|
||||
this.checkArea();
|
||||
},
|
||||
checkClick(e, item) {
|
||||
let arr = []
|
||||
let arr = [];
|
||||
item.shoppingCartList.forEach((ctem) => {
|
||||
if (ctem.isSelected == true) {
|
||||
arr.push(1)
|
||||
arr.push(1);
|
||||
}
|
||||
})
|
||||
});
|
||||
if (arr.length == item.shoppingCartList.length) {
|
||||
item.isSelected = true
|
||||
item.isSelected = true;
|
||||
} else {
|
||||
item.isSelected = false
|
||||
item.isSelected = false;
|
||||
}
|
||||
this.checkArea()
|
||||
this.checkArea();
|
||||
},
|
||||
// 校验选中了几个专区的商品
|
||||
checkArea() {
|
||||
let arr = []
|
||||
let arr = [];
|
||||
this.shopCarList.forEach((item) => {
|
||||
item.shoppingCartList.forEach((ctem) => {
|
||||
if (ctem.isSelected) {
|
||||
|
|
@ -675,52 +693,52 @@ export default {
|
|||
quantity: ctem.number,
|
||||
waresItemsParamList: ctem.waresItemsParamList,
|
||||
waresSkuList: ctem.waresSkuList || [],
|
||||
source: ctem.source || '',
|
||||
source: ctem.source || "",
|
||||
},
|
||||
],
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
const arrayHashmap = arr.reduce((obj, item) => {
|
||||
obj[item.specialArea]
|
||||
? obj[item.specialArea].orderItemsParams.push(
|
||||
...item.orderItemsParams
|
||||
)
|
||||
: (obj[item.specialArea] = item)
|
||||
return obj
|
||||
}, {})
|
||||
this.goodsCheck = Object.values(arrayHashmap)
|
||||
this.checkPrice()
|
||||
: (obj[item.specialArea] = item);
|
||||
return obj;
|
||||
}, {});
|
||||
this.goodsCheck = Object.values(arrayHashmap);
|
||||
this.checkPrice();
|
||||
},
|
||||
// 计算价格
|
||||
checkPrice() {
|
||||
let totalPrice = 0
|
||||
let totalAchive = 0
|
||||
let num = 0
|
||||
let totalPrice = 0;
|
||||
let totalAchive = 0;
|
||||
let num = 0;
|
||||
this.goodsCheck.forEach((item) => {
|
||||
item.orderItemsParams.forEach((ctem) => {
|
||||
totalPrice += parseFloat(ctem.waresPrice * ctem.quantity)
|
||||
totalAchive += parseFloat(ctem.achieve * ctem.quantity)
|
||||
num += ctem.quantity
|
||||
})
|
||||
})
|
||||
totalPrice += parseFloat(ctem.waresPrice * ctem.quantity);
|
||||
totalAchive += parseFloat(ctem.achieve * ctem.quantity);
|
||||
num += ctem.quantity;
|
||||
});
|
||||
});
|
||||
// if (this.goodsCheck.length != 1) {
|
||||
this.totalPrice = totalPrice.toFixed(2)
|
||||
this.totalAchive = totalAchive.toFixed(2)
|
||||
this.num = num
|
||||
this.totalPrice = totalPrice.toFixed(2);
|
||||
this.totalAchive = totalAchive.toFixed(2);
|
||||
this.num = num;
|
||||
// }
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
if (rowIndex % 2 == 1) {
|
||||
return 'warning-row'
|
||||
return "warning-row";
|
||||
} else if (rowIndex % 2 == 0) {
|
||||
return 'success-row'
|
||||
return "success-row";
|
||||
}
|
||||
return ''
|
||||
return "";
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -936,7 +954,7 @@ export default {
|
|||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
.total{
|
||||
.total {
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
|
|
@ -945,4 +963,4 @@ export default {
|
|||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="contain">
|
||||
<!-- 用户头 -->
|
||||
<!-- <personInfo></personInfo> -->
|
||||
<personInfo></personInfo>
|
||||
<!-- 侧边栏 -->
|
||||
<Sidebar
|
||||
:showCar="true"
|
||||
|
|
@ -411,7 +411,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
// import personInfo from "@/components/personInfo.vue";
|
||||
import personInfo from "@/components/personInfo.vue";
|
||||
import Sidebar from "@/components/Sidebar.vue";
|
||||
import poster from "@/components/poster.vue";
|
||||
import * as api from "@/api/goods.js";
|
||||
|
|
@ -423,7 +423,7 @@ import * as ads from "@/api/register.js";
|
|||
export default {
|
||||
components: {
|
||||
noticePopup,
|
||||
// personInfo,
|
||||
personInfo,
|
||||
Sidebar,
|
||||
poster,
|
||||
selSpaceGoods,
|
||||
|
|
|
|||
Loading…
Reference in New Issue