angelo
/
web-base-pc
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(goodsDetail): 商品详情样式改造

This commit is contained in:
woody 2025-04-27 17:53:47 +08:00
parent 820dae5c84
commit 3b91428ca8
6 changed files with 457 additions and 444 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@ -59,7 +59,7 @@ body {
/*定义滚动条轨道 内阴影+圆角*/ /*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-radius: 5px; border-radius: 5px;
background: rgba(216, 216, 216, 1); background: #eeeeee;
} }
/*定义滑块 内阴影+圆角*/ /*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {

27
src/components/HeaderTop.vue
View File

@ -7,15 +7,15 @@
<template> <template>
<div> <div>
<div class="page"> <div class="page">
<!-- <div class="page_top"> <div class="page_top">
<div class="page_top_l"></div> <div class="page_top_l"></div>
<div class="page_top_r"> <div class="page_top_r">
<div @click="globalDivisions">{{ "全球分布" }}</div> <!-- <div @click="globalDivisions">{{ "全球分布" }}</div>
<div @click="abount">{{ "关于我们" }}</div> <div @click="abount">{{ "关于我们" }}</div>
<div> <div>
<i class="el-icon-phone-outline"></i> <i class="el-icon-phone-outline"></i>
{{ "联系电话" }} 400-111-2818 {{ "联系电话" }} 400-111-2818
</div> </div> -->
<div @click="goMore(2)"> <div @click="goMore(2)">
<el-badge :value="wdNum" class="item"> <el-badge :value="wdNum" class="item">
<i class="el-icon-message"></i> <i class="el-icon-message"></i>
@ -29,7 +29,7 @@
<i class="el-icon-s-custom"></i> {{ "在线客服" }} <i class="el-icon-s-custom"></i> {{ "在线客服" }}
</div> </div>
</div> </div>
</div> --> </div>
<div class="page_btm"> <div class="page_btm">
<div class="page_btm_c"> <div class="page_btm_c">
<div class="fHeigh" v-show="!menu1" @click="goIndex">首页</div> <div class="fHeigh" v-show="!menu1" @click="goIndex">首页</div>
@ -170,7 +170,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="zhan"></div> <div class="placeholder-block"></div>
</div> </div>
</template> </template>
@ -696,8 +696,8 @@ export default {
z-index: 1999; z-index: 1999;
} }
.zhan { .placeholder-block {
height: 80px; height: 120px;
} }
.page_top { .page_top {
@ -722,7 +722,8 @@ export default {
flex: 1; flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-end;
gap: 30px;
height: 44px; height: 44px;
div { div {
@ -782,7 +783,7 @@ export default {
} }
.aBsolt { .aBsolt {
width: 237px; width: 200px;
text-align: center; text-align: center;
position: absolute; position: absolute;
color: #333; color: #333;
@ -791,12 +792,12 @@ export default {
box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3); box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
padding: 10px 0; // padding: 10px 36px; padding: 10px 0; // padding: 10px 36px;
transform: translate(-72px, 0); transform: translate(-62px, 0);
// bottom: 0; // bottom: 0;
} }
.aBsolts { .aBsolts {
width: 237px; width: 200px;
transform: translateX(0); transform: translateX(0);
text-align: center; text-align: center;
position: absolute; position: absolute;
@ -827,13 +828,13 @@ export default {
.aBsolt_i:hover { .aBsolt_i:hover {
color: #ffffff; color: #ffffff;
background: #e80502; background: var(--primary-color);
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
} }
.aBsolt_iu:hover .aBsolt_ii { .aBsolt_iu:hover .aBsolt_ii {
color: #ffffff; color: #ffffff;
background: #e80502; background: var(--primary-color);
border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;
} }

119
src/components/Swiper.vue
View File

@ -7,39 +7,44 @@
<template> <template>
<div> <div>
<div class="swiper_t"> <div class="swiper_t">
<img :src="mainImgUrl" <img :src="mainImgUrl" v-show="!isVideo" />
v-show="!isVideo"> <video
<video :src="mainImgUrl" :src="mainImgUrl"
v-show="isVideo" v-show="isVideo"
class="video-avatar" class="video-avatar"
:autoplay="true" :autoplay="true"
controls="controls" controls="controls"
muted muted
loop></video> loop
></video>
</div> </div>
<div> <div>
<i class="el-icon-arrow-left leftArw" <i class="el-icon-arrow-left leftArw" @click="imgLeft()"></i>
@click="imgLeft()"></i>
<ul class="Img_ul"> <ul class="Img_ul">
<li v-for="(item,index) in imgUrlList" <li
v-for="(item, index) in imgUrlList"
:key="index" :key="index"
class="Img_li" class="Img_li"
v-show="item" v-show="item"
:style="imgStyle" :style="imgStyle"
@click="changeImg(item, index)"> @click="changeImg(item, index)"
<img :class="index === imgActiveIndex ? 'img_activeBorder' : 'img_border'" >
:src="item"> <img
:class="
index === imgActiveIndex ? 'img_activeBorder' : 'img_border'
"
:src="item"
/>
</li> </li>
</ul> </ul>
<i class="el-icon-arrow-right rightArw" <i class="el-icon-arrow-right rightArw" @click="imgRight()"></i>
@click="imgRight()"></i>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
mainImgUrls: '', mainImgUrls: "",
imgUrlLists: [], imgUrlLists: [],
}, },
data() { data() {
@ -65,118 +70,118 @@ export default {
mainImgUrl: this.mainImgUrls, mainImgUrl: this.mainImgUrls,
imgUrlList: this.imgUrlLists, imgUrlList: this.imgUrlLists,
// 初始视频 // 初始视频
videoMp: '', videoMp: "",
isVideo: false, isVideo: false,
} };
}, },
watch: { watch: {
mainImgUrls: { mainImgUrls: {
deep: true, deep: true,
handler(n) { handler(n) {
this.mainImgUrl = n this.mainImgUrl = n;
this.videoMp = n this.videoMp = n;
}, },
}, },
mainImgUrl(n) { mainImgUrl(n) {
if ( if (
n.substr(-3) == 'jpg' || n.substr(-3) == "jpg" ||
n.substr(-3) == 'png' || n.substr(-3) == "png" ||
n.substr(-3) == 'gif' n.substr(-3) == "gif"
) { ) {
this.isVideo = false this.isVideo = false;
} else { } else {
this.isVideo = true this.isVideo = true;
} }
}, },
imgUrlLists(n, o) { imgUrlLists(n, o) {
this.imgUrlList = n this.imgUrlList = n;
}, },
}, },
computed: { computed: {
imgStyle() { imgStyle() {
return { return {
transform: `translate3d(${this.imgDistance}px, 0, 0)`, // 计算移动的距离(x,y,z) transform: `translate3d(${this.imgDistance}px, 0, 0)`, // 计算移动的距离(x,y,z)
} };
}, },
}, },
methods: { methods: {
changeImg(item, index) { changeImg(item, index) {
if (index == 0) { if (index == 0) {
this.mainImgUrl = this.videoMp this.mainImgUrl = this.videoMp;
} else { } else {
this.mainImgUrl = item this.mainImgUrl = item;
} }
this.imgActiveIndex = index this.imgActiveIndex = index;
}, },
imgLeft() { imgLeft() {
if (this.imgActiveIndex > 0) { if (this.imgActiveIndex > 0) {
this.imgActiveIndex-- // 索引值-1 this.imgActiveIndex--; // 索引值-1
this.imgUrlList.forEach((item, index) => { this.imgUrlList.forEach((item, index) => {
// 循环小图,通过判断索引值赋值给大图 // 循环小图,通过判断索引值赋值给大图
if (this.imgActiveIndex === index) { if (this.imgActiveIndex === index) {
this.mainImgUrl = item this.mainImgUrl = item;
} }
}) });
} }
if (this.imgActiveIndex >= 4) { if (this.imgActiveIndex >= 4) {
var index = 0 var index = 0;
const temp = window.setInterval(() => { const temp = window.setInterval(() => {
// 利用定时器实现图片左右移动的动画效果 // 利用定时器实现图片左右移动的动画效果
if (index < 38) { if (index < 38) {
// 移动次数(33次) // 移动次数(33次)
this.imgDistance += 2 // 每次向左移动的距离 (移动总距离为33*this.imgDistance) this.imgDistance += 2; // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
index++ index++;
return return;
} else { } else {
window.clearInterval(temp) // 移动完清除定时器 window.clearInterval(temp); // 移动完清除定时器
} }
}, 10) }, 10);
} }
}, },
imgRight() { imgRight() {
if (this.imgActiveIndex < this.imgUrlList.length - 1) { if (this.imgActiveIndex < this.imgUrlList.length - 1) {
this.imgActiveIndex++ this.imgActiveIndex++;
this.imgUrlList.forEach((item, index) => { this.imgUrlList.forEach((item, index) => {
if (this.imgActiveIndex === index) { if (this.imgActiveIndex === index) {
this.mainImgUrl = item this.mainImgUrl = item;
} }
}) });
if (this.imgActiveIndex >= 5) { if (this.imgActiveIndex >= 5) {
this.allDistance = -76 * (this.imgActiveIndex - 4) this.allDistance = -76 * (this.imgActiveIndex - 4);
var index = 0 var index = 0;
const temp = window.setInterval(() => { const temp = window.setInterval(() => {
if (index < 38) { if (index < 38) {
this.imgDistance -= 2 // 每次向右移动的距离 this.imgDistance -= 2; // 每次向右移动的距离
index++ index++;
return return;
} else { } else {
window.clearInterval(temp) window.clearInterval(temp);
} }
}, 10) }, 10);
} }
} else if (this.imgActiveIndex === this.imgUrlList.length - 1) { } else if (this.imgActiveIndex === this.imgUrlList.length - 1) {
// 到达最后一张图片，再点击跳转回第一张 // 到达最后一张图片，再点击跳转回第一张
this.imgActiveIndex = 0 this.imgActiveIndex = 0;
this.mainImgUrl = this.videoMp this.mainImgUrl = this.videoMp;
var index = 0 var index = 0;
const temp = window.setInterval(() => { const temp = window.setInterval(() => {
// 利用定时器实现图片左右移动的动画效果 // 利用定时器实现图片左右移动的动画效果
if (index < Math.abs(this.allDistance / 2)) { if (index < Math.abs(this.allDistance / 2)) {
// 取绝对值再除 // 取绝对值再除
this.imgDistance += 2 // 每次向左移动的距离 (移动总距离为33*this.imgDistance) this.imgDistance += 2; // 每次向左移动的距离 (移动总距离为33*this.imgDistance)
index++ index++;
return return;
} else { } else {
window.clearInterval(temp) // 移动完清除定时器 window.clearInterval(temp); // 移动完清除定时器
} }
}, 1) }, 1);
} }
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.swiper_t { .swiper_t {
@ -230,7 +235,7 @@ export default {
cursor: pointer; cursor: pointer;
} }
.img_activeBorder { .img_activeBorder {
border: 3px solid #c71222; border: 3px solid var(--primary-color);
width: 66px; width: 66px;
height: 66px; height: 66px;
border-radius: 10px; border-radius: 10px;
@ -242,5 +247,3 @@ export default {
border-radius: 10px; border-radius: 10px;
} }
</style> </style>

125
src/views/goodsDetails/index.vue
View File

@ -1,9 +1,3 @@
<!--
* @Descripttion:
* @version:
* @Author: kBank
* @Date: 2023-01-12 16:21:41
-->
<template> <template>
<div class="contain" ref="box"> <div class="contain" ref="box">
<!-- 用户头 --> <!-- 用户头 -->
@ -17,9 +11,7 @@
<!-- 面包屑 --> <!-- 面包屑 -->
<div class="mianbao"> <div class="mianbao">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">{{ <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
'首页'
}}</el-breadcrumb-item>
<el-breadcrumb-item <el-breadcrumb-item
v-if="specialArea != 18 && specialArea != 19" v-if="specialArea != 18 && specialArea != 19"
:to="{ path: '/shoppingMall?id=' + specialArea }" :to="{ path: '/shoppingMall?id=' + specialArea }"
@ -28,7 +20,7 @@
<el-breadcrumb-item v-else :to="{ path: '/spaceMallList' }">{{ <el-breadcrumb-item v-else :to="{ path: '/spaceMallList' }">{{
labelName labelName
}}</el-breadcrumb-item> }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ '商品详情' }}</el-breadcrumb-item> <el-breadcrumb-item>商品详情</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div class="details_t"> <div class="details_t">
@ -51,17 +43,17 @@
<div class="dis_flex jusc" v-if="goodDetail.preSaleStatus == 1"> <div class="dis_flex jusc" v-if="goodDetail.preSaleStatus == 1">
<div class="dis_flex"> <div class="dis_flex">
<img src="@/assets/images/clock.png" alt="" /> <img src="@/assets/images/clock.png" alt="" />
<div>{{ '预计发货' }}</div> <div>{{ "预计发货" }}</div>
</div> </div>
<div class="dis_flex jusc_r"> <div class="dis_flex jusc_r">
<div>{{ '剩余时间' }}:</div> <div>{{ "剩余时间" }}:</div>
<div class="jusc_ri">{{ countDown }}</div> <div class="jusc_ri">{{ countDown }}</div>
</div> </div>
</div> </div>
<div class="c_bai_b"> <div class="c_bai_b">
<div class="dis_flex just"> <div class="dis_flex just">
<div class="dis_flex"> <div class="dis_flex">
<div class="tit5"> <div class="goods-price">
{{ userInfo.currencyIcon {{ userInfo.currencyIcon
}}{{ goodDetail.goodsPrice | toThousandthAndKeepDecimal }} }}{{ goodDetail.goodsPrice | toThousandthAndKeepDecimal }}
</div> </div>
@ -71,17 +63,19 @@
}}{{ goodDetail.retailPrice | toThousandthAndKeepDecimal }} }}{{ goodDetail.retailPrice | toThousandthAndKeepDecimal }}
</div> --> </div> -->
</div> </div>
<div class="tit7">{{ '累计销售' }}</div> <div class="tit7">{{ "累计销售" }}</div>
</div> </div>
<div class="dis_flex just m10"> <div class="dis_flex just m10">
<div class="tit4 dis_flex"> <div class="tit4 dis_flex">
<div <div
v-show=" v-show="
goodDetail.specialArea != 13 && goodDetail.specialArea != 31&& goodDetail.specialArea !=10 goodDetail.specialArea != 13 &&
goodDetail.specialArea != 31 &&
goodDetail.specialArea != 10
" "
style="margin-right: 20px" style="margin-right: 20px"
> >
{{ '业绩' }}:{{ {{ "业绩" }}:{{
goodDetail.goodsAchive | toThousandthAndKeepDecimal goodDetail.goodsAchive | toThousandthAndKeepDecimal
}} }}
</div> </div>
@ -91,7 +85,7 @@
" "
style="margin-right: 20px" style="margin-right: 20px"
> >
{{ '业绩' }}:{{ {{ "业绩" }}:{{
goodDetail.goodsAchive | toThousandthAndKeepDecimal goodDetail.goodsAchive | toThousandthAndKeepDecimal
}} }}
</div> </div>
@ -100,7 +94,7 @@
goodDetail.specialArea == 10 || goodDetail.specialArea == 11 goodDetail.specialArea == 10 || goodDetail.specialArea == 11
" "
> >
{{ '积分可抵扣' }}:{{ {{ "积分可抵扣" }}:{{
goodDetail.deductMoney | numberToCurrency goodDetail.deductMoney | numberToCurrency
}} }}
</div> </div>
@ -110,11 +104,11 @@
}} }}
</div> </div>
</div> </div>
<div class="tit5">{{ goodDetail.sales | seles }}</div> <div class="goods-price">{{ goodDetail.sales | seles }}</div>
</div> </div>
<div class="dis_flex just m10"> <div class="dis_flex just m10">
<div class="dis_flex" v-if="goodDetail.giftNames"> <div class="dis_flex" v-if="goodDetail.giftNames">
<div class="tit8">{{ '赠品' }}：</div> <div class="tit8">{{ "赠品" }}：</div>
<div class="tit9">{{ goodDetail.giftNames }}</div> <div class="tit9">{{ goodDetail.giftNames }}</div>
</div> </div>
<div v-else></div> <div v-else></div>
@ -149,17 +143,17 @@
v-if="item.waresItemsParamsList.length > 0" v-if="item.waresItemsParamsList.length > 0"
> >
<div class="gui_t"> <div class="gui_t">
<div class="gui_th">{{ '规格' }}:</div> <div class="gui_th">{{ "规格" }}:</div>
<div class="gui_y"> <div class="gui_y">
<div class="gui_tt">{{ item.productName }}</div> <div class="gui_tt">{{ item.productName }}</div>
<div class="gui_yi">{{ '应选' }}:</div> <div class="gui_yi">{{ "应选" }}:</div>
<span class="coloNum">{{ item.quantity }}</span> <span class="coloNum">{{ item.quantity }}</span>
<div class="gui_yi">{{ '已选' }}:</div> <div class="gui_yi">{{ "已选" }}:</div>
<span class="coloNum">{{ item.quantitySel }}</span> <span class="coloNum">{{ item.quantitySel }}</span>
</div> </div>
</div> </div>
<div class="gui_b"> <div class="gui_b">
<div class="gui_bt">{{ '型号' }}:</div> <div class="gui_bt">{{ "型号" }}:</div>
<div class="gui_bb"> <div class="gui_bb">
<div <div
v-for="(ctem, cndex) in item.waresItemsParamsList" v-for="(ctem, cndex) in item.waresItemsParamsList"
@ -208,7 +202,7 @@
class="dis_flex" class="dis_flex"
v-if="userInfo.registerShare == 0 || userInfo.registerFans == 0" v-if="userInfo.registerShare == 0 || userInfo.registerFans == 0"
> >
<div>{{ '数量' }}：</div> <div>{{ "数量" }}：</div>
<el-input-number v-model="num" :min="1"></el-input-number> <el-input-number v-model="num" :min="1"></el-input-number>
</div> </div>
<div <div
@ -219,12 +213,12 @@
" "
@click="toAddCar" @click="toAddCar"
> >
{{ '加入购物车' }} 加入购物车
</div> </div>
<!-- <div class="addCar" v-else @click="goBuy">{{ '购买' }}</div> --> <!-- <div class="addCar" v-else @click="goBuy">{{ '购买' }}</div> -->
<!-- {{ '服务承诺' }} --> <!-- {{ '服务承诺' }} -->
<div class="dis_flex fw"> <div class="dis_flex fw">
<div>{{ '服务承诺' }}:</div> <div>{{ "服务承诺" }}:</div>
<div <div
class="fw_i" class="fw_i"
v-for="item in goodDetail.ensureLabelList" v-for="item in goodDetail.ensureLabelList"
@ -238,7 +232,7 @@
<!-- 推荐 --> <!-- 推荐 -->
<!-- 商品列表 --> <!-- 商品列表 -->
<div class="goodList"> <div class="goodList">
<div class="tited">{{ '精品推荐' }}</div> <div class="tited">{{ "精品推荐" }}</div>
<div <div
class="good_i" class="good_i"
v-for="item in goodList" v-for="item in goodList"
@ -248,7 +242,7 @@
<img class="goodImg" :src="item.cover1" alt="" /> <img class="goodImg" :src="item.cover1" alt="" />
<div class="goodBtm"> <div class="goodBtm">
<div class="disFlex"> <div class="disFlex">
<div class="tit5"> <div class="goods-price">
{{ userInfo.currencyIcon {{ userInfo.currencyIcon
}}{{ item.waresPrice | toThousandthAndKeepDecimal }} }}{{ item.waresPrice | toThousandthAndKeepDecimal }}
</div> </div>
@ -258,11 +252,9 @@
<div class="tit3">{{ item.waresName }}</div> <div class="tit3">{{ item.waresName }}</div>
</div> </div>
<div class="disFlex"> <div class="disFlex">
<div class="tit4">{{ "销量" }}:{{ item.sales | seles }}</div>
<div class="tit4"> <div class="tit4">
{{ '销量' }}:{{ item.sales | seles }} {{ "业绩" }}:{{
</div>
<div class="tit4">
{{ '业绩' }}:{{
item.waresAchieve | toThousandthAndKeepDecimal item.waresAchieve | toThousandthAndKeepDecimal
}} }}
</div> </div>
@ -277,13 +269,13 @@
:class="['menu_i', isMenu == 0 ? 'actMenu' : '']" :class="['menu_i', isMenu == 0 ? 'actMenu' : '']"
@click="isMenu = 0" @click="isMenu = 0"
> >
{{ '商品介绍' }} {{ "商品介绍" }}
</div> </div>
<div <div
:class="['menu_i', isMenu == 1 ? 'actMenu' : '']" :class="['menu_i', isMenu == 1 ? 'actMenu' : '']"
@click="isMenu = 1" @click="isMenu = 1"
> >
{{ '售后保障' }} {{ "售后保障" }}
</div> </div>
</div> </div>
<div class="xian"></div> <div class="xian"></div>
@ -348,100 +340,100 @@ export default {
moneySymbol: "", moneySymbol: "",
zoneList: [ zoneList: [
{ {
label: '分享专区', label: "分享专区",
value: 100, value: 100,
name: "share", name: "share",
children: [ children: [
{ {
label: '海粉分享', label: "海粉分享",
value: 7, value: 7,
name: "hiFans", name: "hiFans",
}, },
{ {
label: '免费注册', label: "免费注册",
value: 21, value: 21,
name: "haiFans", name: "haiFans",
}, },
], ],
}, },
{ {
label: '注册专区', label: "注册专区",
value: 1, value: 1,
name: "regiest", name: "regiest",
children: [ children: [
{ {
label: '自营专区', label: "自营专区",
value: 1, value: 1,
name: "regiestArea", name: "regiestArea",
}, },
{ {
label: '乐学易考', label: "乐学易考",
value: 24, value: 24,
name: "ezLearnReg", name: "ezLearnReg",
}, },
], ],
}, },
{ {
label: '升级专区', label: "升级专区",
value: 2, value: 2,
name: "upgrade", name: "upgrade",
children: [ children: [
{ {
label: '自营专区', label: "自营专区",
value: 2, value: 2,
name: "upgradeArea", name: "upgradeArea",
}, },
{ {
label: '乐学易考', label: "乐学易考",
value: 25, value: 25,
name: "ezLearnUp", name: "ezLearnUp",
}, },
{ {
label: '海粉专区', label: "海粉专区",
value: 27, value: 27,
name: "haiFunUpd", name: "haiFunUpd",
}, },
], ],
}, },
{ {
label: '复购专区', label: "复购专区",
value: 3, value: 3,
name: "repurchase", name: "repurchase",
children: [ children: [
{ {
label: '自营专区', label: "自营专区",
value: 3, value: 3,
name: "self", name: "self",
}, },
{ {
label: '三方供应', label: "三方供应",
value: 21, value: 21,
name: "haiFans", name: "haiFans",
}, },
{ {
label: '复购合作', label: "复购合作",
value: 22, value: 22,
name: "cooperation", name: "cooperation",
}, },
{ {
label: '乐学易考', label: "乐学易考",
value: 26, value: 26,
name: "ezLearnRep", name: "ezLearnRep",
}, },
{ {
label: '直播专区', label: "直播专区",
value: 14, value: 14,
name: "live", name: "live",
}, },
{ {
label: '工具流', label: "工具流",
value: 12, value: 12,
name: "gongju", name: "gongju",
}, },
], ],
}, },
{ {
label: '福利专区', label: "福利专区",
value: 13, value: 13,
children: [], children: [],
name: "welfare", name: "welfare",
@ -453,7 +445,7 @@ export default {
// name: 'integral', // name: 'integral',
// }, // },
{ {
label: '重消专区', label: "重消专区",
value: 10, value: 10,
children: [], children: [],
name: "rescission", name: "rescission",
@ -532,7 +524,6 @@ export default {
} }
}, },
goDetails(item) { goDetails(item) {
let that = this;
this.$router.replace({ this.$router.replace({
path: "/goodsDetails", path: "/goodsDetails",
query: { query: {
@ -573,7 +564,7 @@ export default {
}); });
if (allNum != selNum) { if (allNum != selNum) {
this.$message({ this.$message({
message: '请添加产品', message: "请添加产品",
type: "warning", type: "warning",
}); });
return false; return false;
@ -605,7 +596,7 @@ export default {
pkCountry: this.pkCountry, pkCountry: this.pkCountry,
}); });
this.$message({ this.$message({
message: '购物车添加成功', message: "购物车添加成功",
type: "success", type: "success",
}); });
}); });
@ -632,7 +623,7 @@ export default {
}); });
if (allNum != selNum) { if (allNum != selNum) {
this.$message({ this.$message({
message: '请添加产品', message: "请添加产品",
type: "warning", type: "warning",
}); });
return false; return false;
@ -860,7 +851,7 @@ export default {
this.goodDetail = res.data; this.goodDetail = res.data;
let sl = this.goodDetail.sales + ""; let sl = this.goodDetail.sales + "";
if (sl >= 10000) { if (sl >= 10000) {
sl = sl.substring(0, sl.length - 4) + '万' + "+"; sl = sl.substring(0, sl.length - 4) + "万" + "+";
} }
this.goodDetail.sales = sl; this.goodDetail.sales = sl;
this.mainImgUrl = res.data.videoUrl; this.mainImgUrl = res.data.videoUrl;
@ -1110,7 +1101,7 @@ export default {
font-size: 16px; font-size: 16px;
} }
.coloNum { .coloNum {
color: #00417C; color: #00417c;
font-weight: 600; font-weight: 600;
margin: 0 10px; margin: 0 10px;
margin-top: 3px; margin-top: 3px;
@ -1224,7 +1215,7 @@ export default {
// } // }
// } // }
.addCar { .addCar {
background: #d61820; background: var(--primary-color);
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
@ -1238,7 +1229,7 @@ export default {
.tit1 { .tit1 {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #00417C; color: #00417c;
margin-right: 10px; margin-right: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -1264,10 +1255,10 @@ export default {
margin-right: 10px; margin-right: 10px;
} }
.tit5 { .goods-price {
font-size: 24px; font-size: 24px;
font-weight: 600; font-weight: 600;
color: #00417C; color: var(--price-color);
} }
.tit6 { .tit6 {
@ -1286,7 +1277,7 @@ export default {
.tit8 { .tit8 {
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
color: #00417C; color: #00417c;
} }
.tit9 { .tit9 {
@ -1296,7 +1287,7 @@ export default {
} }
::v-deep .el-breadcrumb__inner.is-link:hover { ::v-deep .el-breadcrumb__inner.is-link:hover {
color: #c01f1f !important; color: var(--primary-color) !important;
} }
::v-deep .el-breadcrumb { ::v-deep .el-breadcrumb {
@ -1322,7 +1313,7 @@ export default {
cursor: pointer; cursor: pointer;
} }
.actMenu { .actMenu {
border-bottom: 5px solid #00417C; border-bottom: 5px solid #00417c;
} }
} }

546
src/views/shoppingCart/index.vue
View File

@ -10,175 +10,193 @@
<personInfo></personInfo> <personInfo></personInfo>
<div class="allTable"> <div class="allTable">
<div class="allGoods"> <div class="allGoods">
{{'全部商品'}} {{ carNum }} {{ "全部商品" }} {{ carNum }}
<div class="tips" <div class="tips" v-if="isWarning">
v-if="isWarning"> <div>{{ "注：跨专区订单不可同时购买" }}</div>
<div>{{'注：跨专区订单不可同时购买'}}</div> <img
<img src="../../assets/images/x.png" src="../../assets/images/x.png"
alt="" alt=""
@click="isWarning = false" /> @click="isWarning = false"
/>
</div> </div>
</div> </div>
<div class="table_tit table_width"> <div class="table_tit table_width">
<div class="tab_i1" <div class="tab_i1" style="margin-left: 20px">{{ "商品" }}</div>
style="margin-left: 20px">{{'商品'}}</div> <div>{{ "规格" }}</div>
<div>{{ '规格' }}</div> <div>{{ "商品单价" }}(¥)</div>
<div>{{ '商品单价' }}(¥)</div> <div>{{ "商品业绩" }}(PV)</div>
<div>{{ '商品业绩' }}(PV)</div> <div>{{ "数量" }}</div>
<div>{{ '数量' }}</div> <div>{{ "总价格" }}(￥)</div>
<div>{{ '总价格' }}(￥)</div> <div>{{ "总业绩" }}(PV)</div>
<div>{{ '总业绩' }}(PV)</div> <div>{{ "操作" }}</div>
<div>{{ '操作' }}</div>
</div> </div>
<div v-for="(item, index) in shopCarList" <div v-for="(item, index) in shopCarList" :key="index">
:key="index">
<div class="t_top"> <div class="t_top">
<el-checkbox v-model="item.isSelected" <el-checkbox
@change="checkClickArea($event, item)"></el-checkbox> v-model="item.isSelected"
@change="checkClickArea($event, item)"
></el-checkbox>
<div class="zuanqu">{{ item.specialAreaVal }}</div> <div class="zuanqu">{{ item.specialAreaVal }}</div>
</div> </div>
<div v-for="(ctem, cndex) in item.shoppingCartList" <div
v-for="(ctem, cndex) in item.shoppingCartList"
:key="cndex" :key="cndex"
class="t_btm table_width"> class="t_btm table_width"
>
<div class="tab_i1"> <div class="tab_i1">
<el-checkbox v-model="ctem.isSelected" <el-checkbox
@change="checkClick($event, item, cndex, ctem)"></el-checkbox> v-model="ctem.isSelected"
<img :src="ctem.cover1" @change="checkClick($event, item, cndex, ctem)"
alt="" /> ></el-checkbox>
<img :src="ctem.cover1" alt="" />
<div class="tab_i1_1">{{ ctem.waresName }}</div> <div class="tab_i1_1">{{ ctem.waresName }}</div>
</div> </div>
<div class="tab_i2" <div class="tab_i2" v-if="item.specialArea != 21">
v-if="item.specialArea!=21"> <div
<div v-for="(stem,sndex) in ctem.productParams" 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" :key="sndex"
class="tab_i2i" class="tab_i2i"
style="justify-content: center;"> >
<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 }} {{ stem.specValueNames }}
</div> </div>
</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 class="hui">{{ ctem.achieve }}</div>
<div> <div>
<el-input-number v-model="ctem.number" <el-input-number
v-model="ctem.number"
@change="changeCar(item, ctem, index, cndex)" @change="changeCar(item, ctem, index, cndex)"
:min="1"></el-input-number> :min="1"
></el-input-number>
</div> </div>
<div class="hui">{{ userInfo.currencyIcon }}{{ ctem.waresPrice*ctem.number |numberToCurrency }}</div> <div class="hui">
<div class="hui">{{ ctem.achieve*ctem.number |numberToCurrency }}</div> {{ userInfo.currencyIcon
<div @click="delOne(ctem)" }}{{ (ctem.waresPrice * ctem.number) | numberToCurrency }}
class="del1">{{ '删除' }}</div> </div>
<div class="hui">
{{ (ctem.achieve * ctem.number) | numberToCurrency }}
</div>
<div @click="delOne(ctem)" class="del1">{{ "删除" }}</div>
</div> </div>
</div> </div>
</div> </div>
<div style="height: 100px"></div> <div style="height: 100px"></div>
<div class="footer"> <div class="footer">
<div class="foot_l"> <div class="foot_l">
<div @click="dellot" <div @click="dellot" class="del">{{ "删除选中的商品" }}</div>
class="del">{{ '删除选中的商品' }}</div> <div @click="emptyCar" class="del">{{ "清空购物车" }}</div>
<div @click="emptyCar"
class="del">{{ '清空购物车' }}</div>
</div> </div>
<div class="foot_r"> <div class="foot_r">
<div> <div>
{{ '已选择' }}<span class="red">{{ num }}</span>{{ '件商品' }} {{ "已选择" }}<span class="red">{{ num }}</span
>{{ "件商品" }}
</div> </div>
<div class="foot_ri red"> <div class="foot_ri red">
{{ '总价' }}: {{ "总价" }}:
<div> <div>
{{ userInfo.currencyIcon }}{{ totalPrice | numberToCurrency }} {{ userInfo.currencyIcon }}{{ totalPrice | numberToCurrency }}
</div> </div>
</div> </div>
<div class="foot_ri lan"> <div class="foot_ri lan">
{{ '业绩' }}: {{ "业绩" }}:
<div> <div>
{{ totalAchive | numberToCurrency }} {{ totalAchive | numberToCurrency }}
</div> </div>
</div> </div>
<div class="btn del" <div
class="btn del"
v-show="this.goodsCheck.length == 1" v-show="this.goodsCheck.length == 1"
@click="toBuy"> @click="toBuy"
{{ '购买' }} >
{{ "购买" }}
</div> </div>
<div class="btn1" <div class="btn1" v-show="this.goodsCheck.length != 1">
v-show="this.goodsCheck.length != 1">{{ '购买' }}</div> {{ "购买" }}
</div> </div>
</div> </div>
<el-dialog title="赠品列表" </div>
<el-dialog
title="赠品列表"
:visible.sync="dialogVisible2" :visible.sync="dialogVisible2"
width="50%" width="50%"
:before-close="handleClose2"> :before-close="handleClose2"
<el-table :data="tableData" >
<el-table
:data="tableData"
style="width: 100%" style="width: 100%"
height="400px" height="400px"
:header-cell-style="{ background: '#EEEEEE' }" :header-cell-style="{ background: '#EEEEEE' }"
:row-class-name="tableRowClassName" :row-class-name="tableRowClassName"
@selection-change="handleSelectionChange"> @selection-change="handleSelectionChange"
<el-table-column type="selection" >
width="55"> </el-table-column> <el-table-column type="selection" width="55"> </el-table-column>
<el-table-column align="center" <el-table-column align="center" prop="cover1" label="商品图片">
prop="cover1"
label="商品图片">
<template slot-scope="scope"> <template slot-scope="scope">
<img class="bgImg" <img class="bgImg" :src="scope.row.cover1" alt="" />
:src="scope.row.cover1"
alt="" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column align="center" <el-table-column align="center" prop="waresName" label="商品名称">
prop="waresName"
label="商品名称">
</el-table-column> </el-table-column>
<el-table-column align="center" <el-table-column align="center" prop="waresCode" label="商品编号">
prop="waresCode"
label="商品编号">
</el-table-column> </el-table-column>
<el-table-column align="center" <el-table-column align="center" prop="waresPrice" label="商品价格">
prop="waresPrice"
label="商品价格">
</el-table-column> </el-table-column>
<el-table-column align="center" <el-table-column align="center" prop="" label="数量">
prop=""
label="数量">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input-number size="mini" <el-input-number
size="mini"
@change="calPrice" @change="calPrice"
v-model="scope.row.quantity" v-model="scope.row.quantity"
:min="1"></el-input-number> :min="1"
></el-input-number>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="total">合计:{{ total | toThousandthAndKeepDecimal }}</div> <div class="total">合计:{{ total | toThousandthAndKeepDecimal }}</div>
<span slot="footer" <span slot="footer" class="dialog-footer">
class="dialog-footer">
<el-button @click="dialogVisible2 = false">取 消</el-button> <el-button @click="dialogVisible2 = false">取 消</el-button>
<el-button type="primary" <el-button type="primary" @click="tableTrue">确 定</el-button>
@click="tableTrue">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import personInfo from '@/components/personInfo.vue' import personInfo from "@/components/personInfo.vue";
import * as api from '@/api/goods.js' import * as api from "@/api/goods.js";
import { memLevel } from '@/api/register.js' import { memLevel } from "@/api/register.js";
import { mapGetters } from 'vuex' import { mapGetters } from "vuex";
export default { export default {
components: { components: {
personInfo, personInfo,
}, },
computed: { computed: {
...mapGetters(['userInfo']), ...mapGetters(["userInfo"]),
}, },
data() { data() {
return { return {
@ -192,25 +210,25 @@ export default {
tableData: [], tableData: [],
dialogVisible2: false, dialogVisible2: false,
selTable: [], selTable: [],
total:'0.00' total: "0.00",
} };
}, },
mounted() { mounted() {
this.getCarList() this.getCarList();
this.getShoppingCount() this.getShoppingCount();
}, },
methods: { methods: {
getShoppingCount() { getShoppingCount() {
api.getShoppingCount().then((res) => { api.getShoppingCount().then((res) => {
this.carNum = res.data.cont this.carNum = res.data.cont;
}) });
}, },
toBuy() { toBuy() {
let shoppArr = this.goodsCheck[0].orderItemsParams.map((item) => { let shoppArr = this.goodsCheck[0].orderItemsParams.map((item) => {
return item.shoppingId return item.shoppingId;
}) });
localStorage.setItem('allGoods', '') localStorage.setItem("allGoods", "");
localStorage.setItem('allGoods', JSON.stringify(shoppArr)) localStorage.setItem("allGoods", JSON.stringify(shoppArr));
if ( if (
this.goodsCheck[0].specialArea == 3 || this.goodsCheck[0].specialArea == 3 ||
this.goodsCheck[0].specialArea == 12 || this.goodsCheck[0].specialArea == 12 ||
@ -220,11 +238,11 @@ export default {
this.goodsCheck[0].specialArea == 28 this.goodsCheck[0].specialArea == 28
) { ) {
this.$router.push({ this.$router.push({
path: 'repurchase', path: "repurchase",
query: { query: {
specialArea: this.goodsCheck[0].specialArea, specialArea: this.goodsCheck[0].specialArea,
}, },
}) });
} else if (this.goodsCheck[0].specialArea == 31) { } else if (this.goodsCheck[0].specialArea == 31) {
if (this.totalPrice < 1000) { if (this.totalPrice < 1000) {
this.$message({ this.$message({
@ -268,20 +286,20 @@ export default {
} }
} else if (this.goodsCheck[0].specialArea == 13) { } else if (this.goodsCheck[0].specialArea == 13) {
this.$router.push({ this.$router.push({
path: 'welfare', path: "welfare",
}) });
} else if (this.goodsCheck[0].specialArea == 14) { } else if (this.goodsCheck[0].specialArea == 14) {
this.$router.push({ this.$router.push({
path: 'tvIng', path: "tvIng",
}) });
} else if (this.goodsCheck[0].specialArea == 11) { } else if (this.goodsCheck[0].specialArea == 11) {
this.$router.push({ this.$router.push({
path: 'integral', path: "integral",
}) });
} else if (this.goodsCheck[0].specialArea == 10) { } else if (this.goodsCheck[0].specialArea == 10) {
this.$router.push({ this.$router.push({
path: 'rescission', path: "rescission",
}) });
} else if ( } else if (
this.goodsCheck[0].specialArea == 1 || this.goodsCheck[0].specialArea == 1 ||
this.goodsCheck[0].specialArea == 24 this.goodsCheck[0].specialArea == 24
@ -310,12 +328,12 @@ export default {
// }) // })
// } // }
// }) // })
let deleteList = [] let deleteList = [];
shoppArr.forEach((item) => { shoppArr.forEach((item) => {
deleteList.push({ deleteList.push({
shoppingId: item, shoppingId: item,
}) });
}) });
api api
.validShop({ .validShop({
specialArea: this.goodsCheck[0].specialArea, specialArea: this.goodsCheck[0].specialArea,
@ -329,21 +347,21 @@ export default {
}) })
.then((response) => { .then((response) => {
if (response.data && response.data.length > 0) { if (response.data && response.data.length > 0) {
this.tableData = response.data this.tableData = response.data;
this.tableData.forEach((item) => { this.tableData.forEach((item) => {
this.$set(item, 'quantity', 1) this.$set(item, "quantity", 1);
}) });
this.dialogVisible2 = true this.dialogVisible2 = true;
} else { } else {
this.$router.push({ this.$router.push({
path: 'register', path: "register",
query: { query: {
specialArea: this.goodsCheck[0].specialArea, specialArea: this.goodsCheck[0].specialArea,
}, },
}) });
} }
}) });
}) });
} else if (this.goodsCheck[0].specialArea == 2) { } else if (this.goodsCheck[0].specialArea == 2) {
// let deleteList = [] // let deleteList = []
// shoppArr.forEach((item) => { // shoppArr.forEach((item) => {
@ -371,12 +389,12 @@ export default {
// }) // })
// } // }
// }) // })
let deleteList = [] let deleteList = [];
shoppArr.forEach((item) => { shoppArr.forEach((item) => {
deleteList.push({ deleteList.push({
shoppingId: item, shoppingId: item,
}) });
}) });
api api
.validShop({ .validShop({
specialArea: this.goodsCheck[0].specialArea, specialArea: this.goodsCheck[0].specialArea,
@ -390,186 +408,186 @@ export default {
}) })
.then((response) => { .then((response) => {
if (response.data && response.data.length > 0) { if (response.data && response.data.length > 0) {
this.tableData = response.data this.tableData = response.data;
this.tableData.forEach((item) => { this.tableData.forEach((item) => {
this.$set(item, 'quantity', 1) this.$set(item, "quantity", 1);
}) });
this.dialogVisible2 = true this.dialogVisible2 = true;
} else { } else {
this.$router.push({ this.$router.push({
path: 'upgrade', path: "upgrade",
query: { query: {
specialArea: this.goodsCheck[0].specialArea, specialArea: this.goodsCheck[0].specialArea,
}, },
}) });
} }
}) });
}) });
} else if ( } else if (
this.goodsCheck[0].specialArea == 25 || this.goodsCheck[0].specialArea == 25 ||
this.goodsCheck[0].specialArea == 27 this.goodsCheck[0].specialArea == 27
) { ) {
this.$router.push({ this.$router.push({
path: 'upgrade', path: "upgrade",
query: { query: {
specialArea: this.goodsCheck[0].specialArea, specialArea: this.goodsCheck[0].specialArea,
}, },
}) });
} else if ( } else if (
this.goodsCheck[0].specialArea == 7 || this.goodsCheck[0].specialArea == 7 ||
this.goodsCheck[0].specialArea == 101 this.goodsCheck[0].specialArea == 101
) { ) {
this.$router.push({ this.$router.push({
path: 'hiFans', path: "hiFans",
query: { query: {
specialArea: this.goodsCheck[0].specialArea, specialArea: this.goodsCheck[0].specialArea,
}, },
}) });
} else if (this.goodsCheck[0].specialArea == 18) { } else if (this.goodsCheck[0].specialArea == 18) {
this.$router.push({ this.$router.push({
path: 'spaceRegister', path: "spaceRegister",
query: { query: {
specialArea: 18, specialArea: 18,
}, },
}) });
} else if (this.goodsCheck[0].specialArea == 19) { } else if (this.goodsCheck[0].specialArea == 19) {
this.$router.push({ this.$router.push({
path: 'spaceRegister', path: "spaceRegister",
query: { query: {
specialArea: 19, specialArea: 19,
}, },
}) });
} else if (this.goodsCheck[0].specialArea == 21) { } else if (this.goodsCheck[0].specialArea == 21) {
this.$router.push({ this.$router.push({
path: 'shareConfirm', path: "shareConfirm",
query: { query: {
specialArea: 21, specialArea: 21,
allData: JSON.stringify(this.goodsCheck[0].orderItemsParams), allData: JSON.stringify(this.goodsCheck[0].orderItemsParams),
}, },
}) });
} }
}, },
// 多删 // 多删
dellot() { dellot() {
let deleteList = [] let deleteList = [];
this.shopCarList.forEach((item) => { this.shopCarList.forEach((item) => {
item.shoppingCartList.forEach((ctem) => { item.shoppingCartList.forEach((ctem) => {
if (ctem.isSelected) { if (ctem.isSelected) {
deleteList.push({ deleteList.push({
shoppingId: ctem.shoppingId, shoppingId: ctem.shoppingId,
}) });
} }
}) });
}) });
this.$confirm('确认删除选中商品' + '?', '提示', { this.$confirm("确认删除选中商品" + "?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning', type: "warning",
}).then(() => { }).then(() => {
api.batchDelShopping({ deleteList: deleteList }).then((res) => { api.batchDelShopping({ deleteList: deleteList }).then((res) => {
this.getCarList() this.getCarList();
this.getShoppingCount() this.getShoppingCount();
this.$message({ this.$message({
type: 'success', type: "success",
message: '删除成功' + '!', message: "删除成功" + "!",
}) });
}) });
}) });
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
// waresPrice // waresPrice
let total = 0 let total = 0;
val.forEach(item => { val.forEach((item) => {
total+=Number(item.waresPrice)*item.quantity total += Number(item.waresPrice) * item.quantity;
}) });
this.total = total this.total = total;
this.selTable = val this.selTable = val;
}, },
calPrice(e) { calPrice(e) {
let total = 0 let total = 0;
this.selTable.forEach(item => { this.selTable.forEach((item) => {
total+=Number(item.waresPrice)*item.quantity total += Number(item.waresPrice) * item.quantity;
}) });
this.total = total this.total = total;
}, },
handleClose2() { handleClose2() {
this.dialogVisible2 = false this.dialogVisible2 = false;
}, },
tableTrue() { tableTrue() {
if (this.selTable.length > 0) { if (this.selTable.length > 0) {
let a = { let a = {
specialArea: this.goodsCheck[0].specialArea, specialArea: this.goodsCheck[0].specialArea,
orderItemsParams: [], orderItemsParams: [],
} };
a.orderItemsParams = this.selTable.map((item) => { a.orderItemsParams = this.selTable.map((item) => {
return { return {
waresCode: item.waresCode, waresCode: item.waresCode,
quantity: item.quantity, quantity: item.quantity,
waresItemsParamList: item.productGroup, waresItemsParamList: item.productGroup,
energySilo: 1, energySilo: 1,
} };
}) });
a.orderItemsParams.forEach((item) => { a.orderItemsParams.forEach((item) => {
item.waresItemsParamList = item.waresItemsParamList.map((ctem) => { item.waresItemsParamList = item.waresItemsParamList.map((ctem) => {
return { return {
pkWaresSpecsSku: ctem.pkSkuId, pkWaresSpecsSku: ctem.pkSkuId,
quantity:ctem.quantity quantity: ctem.quantity,
} };
}) });
}) });
api.energyShopSilo(a).then((res) => { api.energyShopSilo(a).then((res) => {
if (res.code == 200) { if (res.code == 200) {
this.dialogVisible2 = false this.dialogVisible2 = false;
if (this.goodsCheck[0].specialArea == 1) { if (this.goodsCheck[0].specialArea == 1) {
this.$router.push({ this.$router.push({
path: 'register', path: "register",
query: { query: {
specialArea: this.goodsCheck[0].specialArea, specialArea: this.goodsCheck[0].specialArea,
selTable: JSON.stringify(this.selTable), selTable: JSON.stringify(this.selTable),
}, },
}) });
} else if (this.goodsCheck[0].specialArea == 2) { } else if (this.goodsCheck[0].specialArea == 2) {
this.$router.push({ this.$router.push({
path: 'upgrade', path: "upgrade",
query: { query: {
specialArea: this.goodsCheck[0].specialArea, specialArea: this.goodsCheck[0].specialArea,
selTable: JSON.stringify(this.selTable), selTable: JSON.stringify(this.selTable),
}, },
}) });
} }
} }
}) });
} else { } else {
this.$message({ this.$message({
message: '请选择赠品', message: "请选择赠品",
type: 'warning', type: "warning",
}) });
} }
}, },
// 清空购物车 // 清空购物车
emptyCar() { emptyCar() {
let deleteList = [] let deleteList = [];
this.shopCarList.forEach((item) => { this.shopCarList.forEach((item) => {
item.shoppingCartList.forEach((ctem) => { item.shoppingCartList.forEach((ctem) => {
deleteList.push({ deleteList.push({
shoppingId: ctem.shoppingId, shoppingId: ctem.shoppingId,
}) });
}) });
}) });
this.$confirm('确认清空购物车' + '?', '提示', { this.$confirm("确认清空购物车" + "?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning', type: "warning",
}).then(() => { }).then(() => {
api.batchDelShopping({ deleteList: deleteList }).then((res) => { api.batchDelShopping({ deleteList: deleteList }).then((res) => {
this.getCarList() this.getCarList();
this.$message({ this.$message({
type: 'success', type: "success",
message: '删除成功' + '!', message: "删除成功" + "!",
}) });
}) });
}) });
this.getShoppingCount() this.getShoppingCount();
}, },
// 单删 // 单删
delOne(ctem) { delOne(ctem) {
@ -577,21 +595,21 @@ export default {
{ {
shoppingId: ctem.shoppingId, shoppingId: ctem.shoppingId,
}, },
] ];
this.$confirm('确认删除该商品' + '?', '提示', { this.$confirm("确认删除该商品" + "?", "提示", {
confirmButtonText: '确定', confirmButtonText: "确定",
cancelButtonText: '取消', cancelButtonText: "取消",
type: 'warning', type: "warning",
}).then(() => { }).then(() => {
api.batchDelShopping({ deleteList: deleteList }).then((res) => { api.batchDelShopping({ deleteList: deleteList }).then((res) => {
this.getCarList() this.getCarList();
this.getShoppingCount() this.getShoppingCount();
this.$message({ this.$message({
type: 'success', type: "success",
message: '删除成功' + '!', message: "删除成功" + "!",
}) });
}) });
}) });
}, },
// 修改数量 // 修改数量
changeCar(item, ctem, index, cndex) { changeCar(item, ctem, index, cndex) {
@ -602,63 +620,63 @@ export default {
specialArea: item.specialArea, specialArea: item.specialArea,
}) })
.then((res) => { .then((res) => {
this.checkArea() this.checkArea();
this.getShoppingCount() this.getShoppingCount();
}) })
.catch((err) => { .catch((err) => {
this.getCarList() this.getCarList();
}) });
}, },
getCarList() { getCarList() {
api.getShopping().then((res) => { api.getShopping().then((res) => {
res.data.forEach((item) => { res.data.forEach((item) => {
item.isSelected = false item.isSelected = false;
item.shoppingCartList.forEach((ctem) => { item.shoppingCartList.forEach((ctem) => {
ctem.isSelected = false ctem.isSelected = false;
ctem.waresItemsParamList = [] ctem.waresItemsParamList = [];
if (item.specialArea != 21) { if (item.specialArea != 21) {
ctem.productParams.forEach((stem) => { ctem.productParams.forEach((stem) => {
if (stem.waresItemsParamsList.length > 0) { if (stem.waresItemsParamsList.length > 0) {
stem.waresItemsParamsList[0].pkWaresSpecsSku = stem.waresItemsParamsList[0].pkWaresSpecsSku =
stem.waresItemsParamsList[0].pkSkuId stem.waresItemsParamsList[0].pkSkuId;
stem.waresItemsParamsList[0].productName = stem.productName stem.waresItemsParamsList[0].productName = stem.productName;
ctem.waresItemsParamList.push(stem.waresItemsParamsList[0]) ctem.waresItemsParamList.push(stem.waresItemsParamsList[0]);
} }
}) });
} else { } else {
} }
}) });
}) });
this.shopCarList = res.data this.shopCarList = res.data;
}) });
}, },
checkClickArea(e, item) { checkClickArea(e, item) {
item.shoppingCartList.forEach((ctem) => { item.shoppingCartList.forEach((ctem) => {
if (e) { if (e) {
ctem.isSelected = true ctem.isSelected = true;
} else { } else {
ctem.isSelected = false ctem.isSelected = false;
} }
}) });
this.checkArea() this.checkArea();
}, },
checkClick(e, item) { checkClick(e, item) {
let arr = [] let arr = [];
item.shoppingCartList.forEach((ctem) => { item.shoppingCartList.forEach((ctem) => {
if (ctem.isSelected == true) { if (ctem.isSelected == true) {
arr.push(1) arr.push(1);
} }
}) });
if (arr.length == item.shoppingCartList.length) { if (arr.length == item.shoppingCartList.length) {
item.isSelected = true item.isSelected = true;
} else { } else {
item.isSelected = false item.isSelected = false;
} }
this.checkArea() this.checkArea();
}, },
// 校验选中了几个专区的商品 // 校验选中了几个专区的商品
checkArea() { checkArea() {
let arr = [] let arr = [];
this.shopCarList.forEach((item) => { this.shopCarList.forEach((item) => {
item.shoppingCartList.forEach((ctem) => { item.shoppingCartList.forEach((ctem) => {
if (ctem.isSelected) { if (ctem.isSelected) {
@ -675,52 +693,52 @@ export default {
quantity: ctem.number, quantity: ctem.number,
waresItemsParamList: ctem.waresItemsParamList, waresItemsParamList: ctem.waresItemsParamList,
waresSkuList: ctem.waresSkuList || [], waresSkuList: ctem.waresSkuList || [],
source: ctem.source || '', source: ctem.source || "",
}, },
], ],
}) });
} }
}) });
}) });
const arrayHashmap = arr.reduce((obj, item) => { const arrayHashmap = arr.reduce((obj, item) => {
obj[item.specialArea] obj[item.specialArea]
? obj[item.specialArea].orderItemsParams.push( ? obj[item.specialArea].orderItemsParams.push(
...item.orderItemsParams ...item.orderItemsParams
) )
: (obj[item.specialArea] = item) : (obj[item.specialArea] = item);
return obj return obj;
}, {}) }, {});
this.goodsCheck = Object.values(arrayHashmap) this.goodsCheck = Object.values(arrayHashmap);
this.checkPrice() this.checkPrice();
}, },
// 计算价格 // 计算价格
checkPrice() { checkPrice() {
let totalPrice = 0 let totalPrice = 0;
let totalAchive = 0 let totalAchive = 0;
let num = 0 let num = 0;
this.goodsCheck.forEach((item) => { this.goodsCheck.forEach((item) => {
item.orderItemsParams.forEach((ctem) => { item.orderItemsParams.forEach((ctem) => {
totalPrice += parseFloat(ctem.waresPrice * ctem.quantity) totalPrice += parseFloat(ctem.waresPrice * ctem.quantity);
totalAchive += parseFloat(ctem.achieve * ctem.quantity) totalAchive += parseFloat(ctem.achieve * ctem.quantity);
num += ctem.quantity num += ctem.quantity;
}) });
}) });
// if (this.goodsCheck.length != 1) { // if (this.goodsCheck.length != 1) {
this.totalPrice = totalPrice.toFixed(2) this.totalPrice = totalPrice.toFixed(2);
this.totalAchive = totalAchive.toFixed(2) this.totalAchive = totalAchive.toFixed(2);
this.num = num this.num = num;
// } // }
}, },
tableRowClassName({ row, rowIndex }) { tableRowClassName({ row, rowIndex }) {
if (rowIndex % 2 == 1) { if (rowIndex % 2 == 1) {
return 'warning-row' return "warning-row";
} else if (rowIndex % 2 == 0) { } else if (rowIndex % 2 == 0) {
return 'success-row' return "success-row";
} }
return '' return "";
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

6
src/views/shoppingMall/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="contain"> <div class="contain">
<!-- 用户头 --> <!-- 用户头 -->
<!-- <personInfo></personInfo> --> <personInfo></personInfo>
<!-- 侧边栏 --> <!-- 侧边栏 -->
<Sidebar <Sidebar
:showCar="true" :showCar="true"
@ -411,7 +411,7 @@
</template> </template>
<script> <script>
// import personInfo from "@/components/personInfo.vue"; import personInfo from "@/components/personInfo.vue";
import Sidebar from "@/components/Sidebar.vue"; import Sidebar from "@/components/Sidebar.vue";
import poster from "@/components/poster.vue"; import poster from "@/components/poster.vue";
import * as api from "@/api/goods.js"; import * as api from "@/api/goods.js";
@ -423,7 +423,7 @@ import * as ads from "@/api/register.js";
export default { export default {
components: { components: {
noticePopup, noticePopup,
// personInfo, personInfo,
Sidebar, Sidebar,
poster, poster,
selSpaceGoods, selSpaceGoods,