code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-19 09:25:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 10:56:04 +08:00
commit ec3e958037
728 changed files with 132685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

658
buyer/src/components/goodsDetail/ShowGoods.vue Normal file
View File

@@ -0,0 +1,658 @@
<template>
<div class="wrapper">
<div class="item-detail-show">
<!-- 详情左侧展示数据、图片，收藏、举报 -->
<div class="item-detail-left">
<!-- 大图、放大镜 -->
<div class="item-detail-big-img">
<pic-zoom :url="imgList[imgIndex].url" :scale="2"></pic-zoom>
</div>
<div class="item-detail-img-row">
<div
class="item-detail-img-small"
@mouseover="imgIndex = index"
v-for="(item, index) in imgList"
:key="index"
>
<img :src="item.url" />
</div>
</div>
<div class="goodsConfig mt_10">
<span @click="collect" ><Icon type="ios-heart" :color="isCollected ? '#ed3f14' : '#666'" />{{isCollected?'已收藏':'收藏'}}</span>
<!-- <span>举报</span> -->
</div>
</div>
<!-- 右侧商品信息、活动信息、操作展示 -->
<div class="item-detail-right">
<div class="item-detail-title">
<p>
{{ skuDetail.goodsName }}
</p>
</div>
<!-- 限时秒杀 -->
<Promotion v-if="promotionMap['SECKILL']" :time="promotionMap['SECKILL'].endTime"></Promotion>
<!-- 商品详细 价格、优惠券、促销 -->
<div class="item-detail-price-row">
<div class="item-price-left">
<!-- 商品原价 -->
<div class="item-price-row" v-if="!skuDetail.promotionPrice">
<p>
<span class="item-price-title">价 &nbsp;&nbsp;&nbsp;&nbsp;格</span>
<span class="item-price">{{skuDetail.price | unitPrice("￥")}}</span>
</p>
</div>
<!-- 秒杀价格 -->
<div class="item-price-row" v-if="skuDetail.promotionPrice">
<p>
<span class="item-price-title" v-if="promotionMap['SECKILL']">秒 &nbsp;杀&nbsp;价</span>
<span class="item-price">{{skuDetail.promotionPrice | unitPrice("￥")}}</span>
<span class="item-price-old">{{skuDetail.price | unitPrice("￥")}}</span>
</p>
</div>
<!-- 优惠券展示 -->
<div class="item-price-row" v-if="promotionMap['COUPON'].length">
<p>
<span class="item-price-title">优 惠 券</span>
<span
class="item-coupon"
v-for="(item, index) in promotionMap['COUPON']"
:key="index"
@click="receiveCoupon(item.id)"
>
<span v-if="item.couponType == 'PRICE'">满{{ item.consumeThreshold }}减{{item.price}}</span>
<span v-if="item.couponType == 'DISCOUNT'">满{{ item.consumeThreshold }}打{{item.couponDiscount}}折</span>
</span>
</p>
</div>
<!-- 满减展示 -->
<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-promotion">满减</span>
<span class="item-desc-pintuan" v-if="promotionMap['FULL_DISCOUNT'].fullMinus">满{{ promotionMap['FULL_DISCOUNT'].fullMoney }}元，立减现金{{ promotionMap['FULL_DISCOUNT'].fullMinus}}元</span>
<span class="item-desc-pintuan" v-if="promotionMap['FULL_DISCOUNT'].fullRate">满{{ promotionMap['FULL_DISCOUNT'].fullMoney }}元，立享{{ promotionMap['FULL_DISCOUNT'].fullRate}}折</span>
</p>
</div>
</div>
<div class="item-price-right">
<div class="item-remarks-sum">
<p>累计评价</p>
<p>
<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.id">
<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.id">
<div class="item-select-box" @click="select(index, sku.id, item.id)"
:class="{ 'item-select-box-active': item.id === currentSelceted[index] }"
>
<div class="item-select-intro">
<p>{{ item.value }}</p>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="add-buy-car-box">
<div class="item-select">
<div class="item-select-title">
<p>数量</p>
</div>
<div class="item-select-row">
<InputNumber :min="1" :disabled="skuDetail.quantity === 0" v-model="count"></InputNumber>
<span class="inventory"> 库存{{skuDetail.quantity}}</span>
</div>
</div>
<div class="item-select">
<div class="item-select-title">
<p>重量</p>
</div>
<div class="item-select-row">
<span class="inventory"> {{skuDetail.weight}}kg</span>
</div>
</div>
<div class="add-buy-car">
<Button type="error" :loading="loading" :disabled="skuDetail.quantity === 0" @click="addShoppingCartBtn">加入购物车</Button>
<Button type="warning" :loading="loading1" :disabled="skuDetail.quantity === 0" @click="buyNow">立即购买</Button>
</div>
</div>
</div>
<!-- <div class="item-detail-see">
<Divider>更多推荐</Divider>
<Row>
<Col :span="24" class="see-Item">
<img class="see-Img" src="https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489099128797.jpg" alt="" />
<p>
名龙堂i7 6700升7700 GTX1060 6G台式电脑主机DIY游戏组装整机
升6GB独显 送正版WIN10 一年上门
</p>
<p class="global_color">￥2500.00</p>
</Col>
<Col :span="24" class="see-Item">
<img
class="see-Img"
src="https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489099128797.jpg"
alt=""
/>
<p>
名龙堂i7 6700升7700 GTX1060 6G台式电脑主机DIY游戏组装整机
升6GB独显 送正版WIN10 一年上门
</p>
<p class="global_color">￥2500.00</p>
</Col>
</Row>
</div> -->
</div>
</div>
</template>
<script>
import Promotion from './Promotion.vue';
import PicZoom from 'vue-piczoom'; // 图片放大 https://github.com/826327700/vue-piczoom
import { collectGoods, isCollection, receiveCoupon, cancelCollect } from '@/api/member.js';
import { addCartGoods } from '@/api/cart.js';
export default {
name: 'ShowGoods',
props: {
detail: {
type: Object,
default: null
}
},
data () {
return {
count: 1, // 商品数量
imgIndex: 0, // 展示图片下标
currentSelceted: [], // 当前商品sku
imgList: this.detail.data.specList[0].specImage, // 商品图片列表
skuDetail: this.detail.data, // sku详情
goodsSpecList: this.detail.specs, // 商品spec
promotionMap: { // 活动状态
SECKILL: null,
FULL_DISCOUNT: null,
COUPON: []
}, // 促销活动
formatList: [], // 选择商品品类的数组
loading: false, // 立即购买loading
loading1: false, // 加入购物车loading
isCollected: false // 是否收藏
};
},
components: {
PicZoom,
Promotion
},
methods: {
select (index, id, valueId) { // 选择规格
this.$set(this.currentSelceted, index, valueId);
let selectedSkuId = this.goodsSpecList.find((i) => {
let matched = true;
let specValues = i.specValues.filter((j) => j.specName !== 'images');
for (let n = 0; n < specValues.length; n++) {
if (specValues[n].specValueId !== this.currentSelceted[n]) {
matched = false;
return;
}
}
if (matched) {
return i;
}
});
console.log(selectedSkuId);
this.$router.push({
path: '/goodsDetail',
query: { skuId: selectedSkuId.skuId, goodsId: this.skuDetail.goodsId }
});
},
addShoppingCartBtn () { // 添加购物车
const params = {
num: this.count,
skuId: this.skuDetail.id
};
this.loading = true;
addCartGoods(params).then(res => {
this.loading = false;
if (res.code === 200) {
this.$router.push({path: '/shoppingCart', query: {detail: this.skuDetail, count: this.count}});
} else {
this.$Message.warning(res.message);
}
});
},
buyNow () { // 立即购买
const params = {
num: this.count,
skuId: this.skuDetail.id,
cartType: 'BUY_NOW'
};
this.loading1 = true;
addCartGoods(params).then(res => {
this.loading1 = false;
if (res.code === 200) {
this.$router.push({path: '/pay', query: {way: 'BUY_NOW'}});
} else {
this.$Message.warning(res.message);
}
});
},
async collect () { // 收藏商品
if (this.isCollected) {
let cancel = await cancelCollect('GOODS', this.skuDetail.id)
if (cancel.success) {
this.$Message.success('取消收藏成功')
this.isCollected = false
}
} else {
let collect = await collectGoods('GOODS', this.skuDetail.id);
if (collect.code === 200) {
this.isCollected = true;
this.$Message.success('收藏商品成功,可以前往个人中心我的收藏查看');
}
}
},
formatSku (list) {
// 格式化数据
let arr = [{}];
list.forEach((item, index) => {
item.specValues.forEach((spec, specIndex) => {
let id = spec.specNameId;
let name = spec.specName;
let values = {
id: spec.specValueId,
value: spec.specValue,
quantity: item.quantity
};
if (name === 'images') {
return;
}
arr.forEach((arrItem, arrIndex) => {
if (
arrItem.name === name &&
arrItem.values &&
!arrItem.values.find((i) => i.id === values.id)
) {
arrItem.values.push(values);
}
let keys = arr.map((key) => {
return key.name;
});
if (!keys.includes(name)) {
arr.push({
id: id,
name: name,
values: [values]
});
}
});
});
});
arr.shift();
this.formatList = arr;
let cur = list.filter((i) => i.skuId === this.$route.query.skuId)[0];
if (cur) {
cur.specValues.filter((i) => i.specName !== 'images')
.forEach((value, _index) => {
this.currentSelceted[_index] = value.specValueId;
});
}
this.skuList = list;
},
receiveCoupon (id) { // 领取优惠券
receiveCoupon(id).then(res => {
if (res.success) {
this.$Message.success('优惠券领取成功')
} else {
this.$Message.warning(res.message)
}
})
},
promotion () { // 格式化促销活动，返回当前促销的对象
let keysArr = Object.keys(this.detail.promotionMap);
if (keysArr.length === 0) return false;
for (let i = 0; i < keysArr.length; i++) {
let key = keysArr[i].split('-')[0]
if (key === 'COUPON') {
this.promotionMap[key].push(this.detail.promotionMap[keysArr[i]])
} else {
this.promotionMap[key] = this.detail.promotionMap[keysArr[i]]
}
}
}
},
mounted () {
if (this.Cookies.getItem('userInfo')) {
isCollection('GOODS', this.skuDetail.id).then(res => {
if (res.success && res.result) {
this.isCollected = true;
}
})
}
this.formatSku(this.goodsSpecList);
this.promotion()
document.title = this.skuDetail.goodsName
}
};
</script>
<style scoped lang="scss">
/******************商品图片及购买详情开始******************/
.item-detail-see {
width: 175px;
margin-left: 30px;
}
.inventory {
padding-left: 4px;
@include sub_color($light_sub_color);
}
.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-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-detail-show {
width: 1200px;
margin: 0 auto;
padding: 30px;
display: flex;
flex-direction: row;
}
.item-detail-left {
width: 350px;
margin-right: 30px;
}
.item-detail-big-img {
width: 350px;
height: 350px;
box-shadow: 0px 0px 8px $border_color;
cursor: pointer;
}
.item-detail-big-img img {
width: 100%;
}
.item-detail-img-row {
margin-top: 15px;
display: flex;
}
.item-detail-img-small {
width: 68px;
height: 68px;
box-shadow: 0px 0px 8px #ccc;
cursor: pointer;
margin-left: 5px;
}
.item-detail-img-small img {
height: 100%;
width: 100%;
}
/*商品选购详情*/
.item-detail-right {
flex: 1;
display: flex;
flex-direction: column;
}
.item-detail-title p {
@include content_color($light_content_color);
font-weight: bold;
font-size: 20px;
padding: 8px 0;
}
.item-detail-express {
font-size: 14px;
padding: 2px 3px;
border-radius: 3px;
background-color: $theme_color;
color: #fff;
}
/*商品标签*/
.item-detail-tag {
padding: 8px 0;
font-size: 12px;
color: $theme_color;
}
/*价格详情等*/
.item-detail-price-row {
padding: 10px;
display: flex;
// width: 555px;
flex-direction: row;
justify-content: space-between;
// @include background_color($light_background_color);
background: url("../../assets/images/goodsDetail/price-bg.png");
}
.item-price-left {
display: flex;
flex-direction: column;
}
.item-price-title {
color: #999999;
font-size: 14px;
margin-right: 15px;
}
.item-price-row {
margin: 5px 0px;
}
.item-price {
color: $theme_color;
font-size: 20px;
cursor: pointer;
}
.item-price-old {
color: gray;
text-decoration: line-through;
font-size: 14px;
margin-left: 5px;
}
.item-coupon {
margin-right: 5px;
padding: 3px;
color: $theme_color;
font-size: 12px;
background-color: #ffdedf;
border: 1px dotted $theme_color;
cursor: pointer;
}
.item-promotion {
margin-right: 5px;
padding: 3px;
color: $theme_color;
font-size: 12px;
border: 1px solid $theme_color;
}
.item-remarks-sum {
padding-left: 8px;
border-left: 1px solid $border_color;
}
.item-remarks-sum p {
color: #999999;
font-size: 12px;
line-height: 10px;
text-align: center;
}
.item-remarks-num {
line-height: 18px;
color: #005eb7;
}
.item-select {
display: flex;
flex-direction: row;
margin-top: 15px;
}
.item-select-title {
@include content_color($light_content_color);
font-size: 14px;
margin-right: 15px;
width: 60px;
}
.item-select-column {
display: flex;
flex-wrap: wrap;
flex: 1;
}
.item-select-row {
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
margin-bottom: 8px;
}
.item-select-box {
display: flex;
flex-direction: row;
align-items: center;
}
.item-select-img {
width: 36px;
}
.item-select-box {
padding: 5px;
margin-right: 8px;
@include background_color($light_background_color);
border: 0.5px solid $border_color;
cursor: pointer;
@include content_color($light_content_color);
}
.item-select-box:hover {
border: 0.5px solid $theme_color;
}
.item-select-box-active {
border: 0.5px solid $theme_color;
}
.item-select-box-disabled {
background-color: gray;
}
.item-select-img img {
width: 100%;
}
.item-select-intro p {
margin: 0px;
padding: 5px;
}
.item-select-class {
padding: 5px;
margin-right: 8px;
@include sub_background_color($light_background_color);
border: 0.5px solid #ccc;
cursor: pointer;
}
.item-select-class:hover {
border: 0.5px solid $theme_color;
}
.add-buy-car-box {
width: 100%;
margin-top: 15px;
border-top: 1px dotted $border_color;
}
.add-buy-car {
margin-top: 15px;
}
.goodsConfig {
display: flex;
justify-content: space-between;
> span {
padding-right: 10px;
&:hover{
cursor: pointer;
color: $theme_color;
}
}
}
/******************商品图片及购买详情结束******************/
</style>