zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

批量价格显示的样式

master
lemon橪 2022-05-27 10:28:37 +08:00
parent f19071542a
commit e97dbe1c90
2 changed files with 164 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
buyer/src/components/goodsDetail/ShowGoods.vue
View File

@ -7,8 +7,18 @@
<div class="item-detail-big-img">
<pic-zoom :url="imgList[imgIndex].url" :scale="2"></pic-zoom>
</div>
<div v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'" style="margin-top:10px;rgb(153, 149, 149);">实物商品</div>
<div v-else-if="skuDetail.goodsType == 'VIRTUAL_GOODS'" style="margin-top:10px;rgb(153, 149, 149);">虚拟商品</div>
<div
v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
style="margin-top:10px;rgb(153, 149, 149);"
>
实物商品
</div>
<div
v-else-if="skuDetail.goodsType == 'VIRTUAL_GOODS'"
style="margin-top:10px;rgb(153, 149, 149);"
>
虚拟商品
</div>
<div class="item-detail-img-row">
<div
class="item-detail-img-small"
@ -22,9 +32,10 @@
<div class="goodsConfig mt_10">
<span @click="collect"
><Icon type="ios-heart" :color="isCollected ? '#ed3f14' : '#666'" />{{
isCollected ? "已收藏" : "收藏"
}}</span
><Icon
type="ios-heart"
:color="isCollected ? '#ed3f14' : '#666'"
/>{{ isCollected ? "已收藏" : "收藏" }}</span
>
</div>
</div>
@ -46,9 +57,11 @@
<!-- 商品详细 价格、优惠券、促销 -->
<div class="item-detail-price-row">
<div class="item-price-left">
<!-- 秒杀价格 -->
<div class="item-price-row" v-if="skuDetail.promotionPrice && promotionMap['SECKILL']">
<div
class="item-price-row"
v-if="skuDetail.promotionPrice && promotionMap['SECKILL']"
>
<p>
<span class="item-price-title" v-if="promotionMap['SECKILL']"
>秒 &nbsp;杀&nbsp;价</span
@ -63,10 +76,34 @@
</div>
<!-- 商品原价 -->
<div class="item-price-row" v-else>
<p>
<span class="item-price-title">价 &nbsp;&nbsp;&nbsp;&nbsp;格</span>
<span class="item-price">{{ skuDetail.price | unitPrice("￥") }}</span>
</p>
<!-- 普通价格 -->
<div>
<span class="item-price-title"
>价 &nbsp;&nbsp;&nbsp;&nbsp;格</span
>
<span class="item-price">{{
skuDetail.price | unitPrice("￥")
}}</span>
</div>
<!-- 批发价格 -->
<div>
<div class="flex">
<div class="item-price-title">
价 &nbsp;&nbsp;&nbsp;&nbsp;格
</div>
<div class="item-price item-num">{{
skuDetail.price | unitPrice("￥")
}}</div>
<div class="item-price item-num">{{
skuDetail.price | unitPrice("￥")
}}</div>
</div>
<div class="flex">
<div class="item-price-title">起 批 量</div>
<div class="item-num item-price-num">20-39</div>
<div class="item-num item-price-num">40-90</div>
</div>
</div>
</div>
<!-- 优惠券展示 -->
<div class="item-price-row" v-if="promotionMap['COUPON'].length">
@ -82,7 +119,9 @@
>满{{ item.consumeThreshold }}减{{ item.price }}</span
>
<span v-if="item.couponType == 'DISCOUNT'"
>满{{ item.consumeThreshold }}打{{ item.couponDiscount }}折</span
>满{{ item.consumeThreshold }}打{{
item.couponDiscount
}}折</span
>
</span>
</p>
@ -90,7 +129,9 @@
<!-- 满减展示 -->
<div class="item-price-row" v-if="promotionMap['FULL_DISCOUNT']">
<p>
<span class="item-price-title">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
<span class="item-price-title"
>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span
>
<span class="item-promotion">满减</span>
<span
class="item-desc-pintuan"
@ -101,7 +142,10 @@
>
<span
class="item-desc-pintuan"
v-if="promotionMap['FULL_DISCOUNT'].fullRate && promotionMap['FULL_DISCOUNT'].fullRateFlag"
v-if="
promotionMap['FULL_DISCOUNT'].fullRate &&
promotionMap['FULL_DISCOUNT'].fullRateFlag
"
>满{{ promotionMap["FULL_DISCOUNT"].fullMoney }}元，立享{{
promotionMap["FULL_DISCOUNT"].fullRate
}}折</span
@ -113,23 +157,34 @@
<div class="item-remarks-sum">
<p>累计评价</p>
<p>
<span class="item-remarks-num">{{ skuDetail.commentNum || 0 }} 条</span>
<span class="item-remarks-num"
>{{ skuDetail.commentNum || 0 }} 条</span
>
</p>
</div>
</div>
</div>
<!-- 选择颜色 -->
<div class="item-select" v-for="(sku, index) in formatList" :key="sku.name">
<div
class="item-select"
v-for="(sku, index) in formatList"
:key="sku.name"
>
<div class="item-select-title">
<p>{{ sku.name }}</p>
</div>
<div class="item-select-column">
<div class="item-select-row" v-for="item in sku.values" :key="item.value">
<div
class="item-select-row"
v-for="item in sku.values"
:key="item.value"
>
<div
class="item-select-box"
@click="select(index, item.value)"
:class="{
'item-select-box-active': item.value === currentSelceted[index],
'item-select-box-active':
item.value === currentSelceted[index],
}"
>
<div class="item-select-intro">
@ -158,7 +213,9 @@
</div>
<div
class="item-select"
v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS' && skuDetail.weight !== 0"
v-if="
skuDetail.goodsType !== 'VIRTUAL_GOODS' && skuDetail.weight !== 0
"
>
<div class="item-select-title">
<p>重量</p>
@ -224,13 +281,25 @@ export default {
default: null,
},
},
watch: {
detail: {
handler(val) {
this.skuDetail = val.data;
this.swiperGoodsImg();
},
deep: true,
immediate: true,
},
},
data() {
return {
count: 1, // 商品数量
imgIndex: 0, // 展示图片下标
currentSelceted: [], // 当前商品sku
imgList: [{ url: "" }], // 商品图片列表
skuDetail: this.detail.data, // sku详情
skuDetail: {
specList: [],
}, // sku详情
goodsSpecList: this.detail.specs, // 商品spec
promotionMap: {
// 活动状态
@ -262,9 +331,9 @@ export default {
return i;
}
});
this.$router.push({
path: "/goodsDetail",
query: { skuId: selectedSkuId.skuId, goodsId: this.skuDetail.goodsId },
this.$emit("handleClickSku", {
skuId: selectedSkuId.skuId,
goodsId: this.skuDetail.goodsId,
});
},
@ -307,7 +376,10 @@ export default {
.then((res) => {
this.loading1 = false;
if (res.success) {
this.$router.push({ path: "/pay", query: { way: params.cartType } });
this.$router.push({
path: "/pay",
query: { way: params.cartType },
});
} else {
this.$Message.warning(res.message);
}
@ -405,6 +477,13 @@ export default {
}
}
},
swiperGoodsImg() {
this.skuDetail.specList.forEach((e) => {
if (e.specName === "images") {
this.imgList = e.specImage;
}
});
},
},
mounted() {
// 用户登录才会判断是否收藏
@ -415,11 +494,7 @@ export default {
}
});
}
this.detail.data.specList.forEach((e) => {
if (e.specName === "images") {
this.imgList = e.specImage;
}
});
this.formatSku(this.goodsSpecList);
this.promotion();
document.title = this.skuDetail.goodsName;
@ -433,57 +508,25 @@ export default {
width: 175px;
margin-left: 30px;
}
.flex{
display: flex;
}
.inventory {
padding-left: 4px;
}
.global_color {
text-align: center;
}
.see-Img {
width: 100%;
height: 175px;
}
.see-Item {
> p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.Report {
color: $theme_color !important;
}
.wrapper {
@include white_background_color();
}
.item-sale-flex {
width: 29%;
padding: 0 3%;
.item-num{
text-align:center;
width: 100px;
}
.item-sale {
margin: 10px 0;
> h3 {
width: 13%;
text-align: center;
font-size: 20px;
line-height: 60px;
box-sizing: border-box;
border-right: 1px solid $border_color;
}
height: 60px;
justify-content: center;
align-items: center;
display: flex;
width: 1200px;
margin: 0 auto;
margin-bottom: 10px;
border: 1px solid $border_color;
background: #f7f7f7;
.item-price-num{
font-size: 16px;
color: #666;
}
.item-detail-show {

74
buyer/src/pages/GoodsDetail.vue
View File

@ -1,5 +1,5 @@
<template>
<div style="background:#fff;">
<div style="background: #fff">
<BaseHeader></BaseHeader>
<Search></Search>
<drawer></drawer>
@ -8,25 +8,39 @@
<div class="shop-nav-container">
<Breadcrumb>
<BreadcrumbItem to="/">首页</BreadcrumbItem>
<BreadcrumbItem v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">
<BreadcrumbItem
v-for="(item, index) in categoryBar"
:to="goGoodsList(index)"
target="_blank"
:key="index"
>
{{ item.name }}
</BreadcrumbItem>
</Breadcrumb>
<div class="store-collect">
<span class="mr_10" v-if="goodsMsg.data">
<router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{ goodsMsg.data.storeName }}</router-link>
<router-link :to="'Merchant?id=' + goodsMsg.data.storeId">{{
goodsMsg.data.storeName
}}</router-link>
</span>
<span @click="collect">
<Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#666'" />
{{storeCollected ? '已收藏店铺' : '收藏店铺'}}
<Icon
type="ios-heart"
:color="storeCollected ? '#ed3f14' : '#666'"
/>
{{ storeCollected ? "已收藏店铺" : "收藏店铺" }}
</span>
<span class="ml_10" @click="IMService()">联系客服</span>
</div>
</div>
</div>
<!-- 商品信息展示 -->
<ShowGoods v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoods>
<ShowGoods
@handleClickSku="targetClickSku"
v-if="goodsMsg.data"
:detail="goodsMsg"
></ShowGoods>
<!-- 商品详细展示 -->
<ShowGoodsDetail v-if="goodsMsg.data" :detail="goodsMsg"></ShowGoodsDetail>
@ -73,13 +87,19 @@ export default {
// 跳转im客服
async IMService() {
// 获取访问Token
let accessToken = Storage.getItem('accessToken');
let accessToken = Storage.getItem("accessToken");
await this.getIMDetailMethods();
if (!accessToken) {
this.$Message.error("请登录后再联系客服");
return;
}
window.open(this.IMLink + "?token=" + accessToken + "&id=" + this.goodsMsg.data.storeId);
window.open(
this.IMLink +
"?token=" +
accessToken +
"&id=" +
this.goodsMsg.data.storeId
);
},
// 获取im信息
async getIMDetailMethods() {
@ -88,10 +108,18 @@ export default {
this.IMLink = res.result;
}
},
// 点击规格
targetClickSku(val) {
// {skuId,goodId}
console.log("%c 规格信息", "color:green");
console.log(val);
this.getGoodsDetail(val);
},
// 获取商品详情
getGoodsDetail() {
getGoodsDetail(val) {
this.isLoading = true;
const params = this.$route.query;
const params = val || this.$route.query;
// 分销员id
let distributionId =
params && params.distributionId
@ -128,7 +156,7 @@ export default {
});
});
this.categoryBar = cateArr;
this.goodsMsg = res.result;
this.$set(this, "goodsMsg", res.result);
// 判断是否收藏
if (this.Cookies.getItem("userInfo")) {
isCollection("STORE", this.goodsMsg.data.storeId).then((res) => {
@ -137,18 +165,20 @@ export default {
}
});
}
// 获取店铺信息
getDetailById(this.goodsMsg.data.storeId).then((res) => {
if (res.success) {
this.storeMsg = res.result;
}
});
if (!this.storeMsg) {
// 获取店铺信息
getDetailById(this.goodsMsg.data.storeId).then((res) => {
if (res.success) {
this.storeMsg = res.result;
}
});
}
} else {
this.$Message.error(res.message);
this.$router.push("/");
}
})
.catch(() => {
.catch((e) => {
this.$router.push("/");
});
},
@ -179,11 +209,7 @@ export default {
}
},
},
watch: {
"$route.query.skuId": function (val) {
location.reload();
},
},
watch: {},
components: {
Search,
ShopHeader,