mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-18 17:05:54 +08:00
适配重构促销
This commit is contained in:
@@ -19,7 +19,11 @@
|
||||
</div>
|
||||
|
||||
<div class="goodsConfig mt_10">
|
||||
<span @click="collect" ><Icon type="ios-heart" :color="isCollected ? '#ed3f14' : '#666'" />{{isCollected?'已收藏':'收藏'}}</span>
|
||||
<span @click="collect"
|
||||
><Icon type="ios-heart" :color="isCollected ? '#ed3f14' : '#666'" />{{
|
||||
isCollected ? "已收藏" : "收藏"
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧商品信息、活动信息、操作展示 -->
|
||||
@@ -30,10 +34,13 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="sell-point">
|
||||
{{skuDetail.sellingPoint}}
|
||||
{{ skuDetail.sellingPoint }}
|
||||
</div>
|
||||
<!-- 限时秒杀 -->
|
||||
<Promotion v-if="promotionMap['SECKILL']" :time="promotionMap['SECKILL'].endTime"></Promotion>
|
||||
<Promotion
|
||||
v-if="promotionMap['SECKILL']"
|
||||
:time="promotionMap['SECKILL'].endTime"
|
||||
></Promotion>
|
||||
<!-- 商品详细 价格、优惠券、促销 -->
|
||||
<div class="item-detail-price-row">
|
||||
<div class="item-price-left">
|
||||
@@ -41,19 +48,25 @@
|
||||
<div class="item-price-row" v-if="!skuDetail.promotionPrice">
|
||||
<p>
|
||||
<span class="item-price-title">价 格</span>
|
||||
<span class="item-price">{{skuDetail.price | unitPrice("¥")}}</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']">秒 杀 价</span>
|
||||
<span class="item-price">{{skuDetail.promotionPrice | unitPrice("¥")}}</span>
|
||||
<span class="item-price-old">{{skuDetail.price | unitPrice("¥")}}</span>
|
||||
<span class="item-price-title" v-if="promotionMap['SECKILL']"
|
||||
>秒 杀 价</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">
|
||||
<div class="item-price-row" v-if="promotionMap['COUPON'].length">
|
||||
<p>
|
||||
<span class="item-price-title">优 惠 券</span>
|
||||
<span
|
||||
@@ -61,10 +74,14 @@
|
||||
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 == 'PRICE'">满{{ item.consumeThreshold }}减{{item.price}}</span>
|
||||
<span v-if="item.couponType == 'DISCOUNT'">满{{ item.consumeThreshold }}打{{item.couponDiscount}}折</span>
|
||||
</span>
|
||||
<span v-if="item.couponType == 'DISCOUNT'"
|
||||
>满{{ item.consumeThreshold }}打{{ item.couponDiscount }}折</span
|
||||
>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- 满减展示 -->
|
||||
@@ -72,8 +89,20 @@
|
||||
<p>
|
||||
<span class="item-price-title">促 销</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>
|
||||
<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>
|
||||
@@ -92,9 +121,13 @@
|
||||
<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-box" @click="select(index, item.value)"
|
||||
:class="{ 'item-select-box-active': item.value === currentSelceted[index] }"
|
||||
<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],
|
||||
}"
|
||||
>
|
||||
<div class="item-select-intro">
|
||||
<p>{{ item.value }}</p>
|
||||
@@ -110,26 +143,57 @@
|
||||
<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>
|
||||
<InputNumber
|
||||
:min="1"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
v-model="count"
|
||||
></InputNumber>
|
||||
<span class="inventory"> 库存{{ skuDetail.quantity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-select" v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS' && skuDetail.weight !== 0">
|
||||
<div
|
||||
class="item-select"
|
||||
v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS' && skuDetail.weight !== 0"
|
||||
>
|
||||
<div class="item-select-title">
|
||||
<p>重量</p>
|
||||
</div>
|
||||
<div class="item-select-row">
|
||||
<span class="inventory"> {{skuDetail.weight}}kg</span>
|
||||
<span class="inventory"> {{ skuDetail.weight }}kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="add-buy-car" v-if="$route.query.way === 'POINT' && skuDetail.isAuth === 'PASS'">
|
||||
<Button type="error" :loading="loading" :disabled="skuDetail.quantity === 0" @click="pointPay">积分购买</Button>
|
||||
<div
|
||||
class="add-buy-car"
|
||||
v-if="$route.query.way === 'POINT' && skuDetail.isAuth === 'PASS'"
|
||||
>
|
||||
<Button
|
||||
type="error"
|
||||
:loading="loading"
|
||||
:disabled="skuDetail.quantity === 0"
|
||||
@click="pointPay"
|
||||
>积分购买</Button
|
||||
>
|
||||
</div>
|
||||
<div class="add-buy-car" v-if="$route.query.way !== 'POINT' && skuDetail.isAuth === 'PASS'">
|
||||
<Button type="error" v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'" :loading="loading" :disabled="skuDetail.quantity === 0" @click="addShoppingCartBtn">加入购物车</Button>
|
||||
<Button type="warning" :loading="loading1" :disabled="skuDetail.quantity === 0" @click="buyNow">立即购买</Button>
|
||||
<div
|
||||
class="add-buy-car"
|
||||
v-if="$route.query.way !== 'POINT' && skuDetail.isAuth === 'PASS'"
|
||||
>
|
||||
<Button
|
||||
type="error"
|
||||
v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'"
|
||||
: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>
|
||||
@@ -137,20 +201,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Promotion from './Promotion.vue';
|
||||
import PicZoom from 'vue-piczoom'; // 图片放大
|
||||
import { collectGoods, isCollection, receiveCoupon, cancelCollect } from '@/api/member.js';
|
||||
import { addCartGoods } from '@/api/cart.js';
|
||||
import Promotion from "./Promotion.vue";
|
||||
import PicZoom from "vue-piczoom"; // 图片放大
|
||||
import {
|
||||
collectGoods,
|
||||
isCollection,
|
||||
receiveCoupon,
|
||||
cancelCollect,
|
||||
} from "@/api/member.js";
|
||||
import { addCartGoods } from "@/api/cart.js";
|
||||
export default {
|
||||
name: 'ShowGoods',
|
||||
name: "ShowGoods",
|
||||
props: {
|
||||
// 商品数据
|
||||
detail: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
count: 1, // 商品数量
|
||||
imgIndex: 0, // 展示图片下标
|
||||
@@ -158,24 +227,26 @@ export default {
|
||||
imgList: [{}], // 商品图片列表
|
||||
skuDetail: this.detail.data, // sku详情
|
||||
goodsSpecList: this.detail.specs, // 商品spec
|
||||
promotionMap: { // 活动状态
|
||||
promotionMap: {
|
||||
// 活动状态
|
||||
SECKILL: null,
|
||||
FULL_DISCOUNT: null,
|
||||
COUPON: []
|
||||
COUPON: [],
|
||||
}, // 促销活动
|
||||
formatList: [], // 选择商品品类的数组
|
||||
loading: false, // 立即购买loading
|
||||
loading1: false, // 加入购物车loading
|
||||
isCollected: false // 是否收藏
|
||||
isCollected: false, // 是否收藏
|
||||
};
|
||||
},
|
||||
components: { PicZoom, Promotion },
|
||||
methods: {
|
||||
select (index, value) { // 选择规格
|
||||
select(index, value) {
|
||||
// 选择规格
|
||||
this.$set(this.currentSelceted, index, value);
|
||||
let selectedSkuId = this.goodsSpecList.find((i) => {
|
||||
let matched = true;
|
||||
let specValues = i.specValues.filter((j) => j.specName !== 'images');
|
||||
let specValues = i.specValues.filter((j) => j.specName !== "images");
|
||||
for (let n = 0; n < specValues.length; n++) {
|
||||
if (specValues[n].specValue !== this.currentSelceted[n]) {
|
||||
matched = false;
|
||||
@@ -187,76 +258,86 @@ export default {
|
||||
}
|
||||
});
|
||||
this.$router.push({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId: selectedSkuId.skuId, goodsId: this.skuDetail.goodsId }
|
||||
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.success) {
|
||||
this.$router.push({path: '/shoppingCart', query: {detail: this.skuDetail, count: this.count}});
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
buyNow () { // 立即购买
|
||||
addShoppingCartBtn() {
|
||||
// 添加购物车
|
||||
const params = {
|
||||
num: this.count,
|
||||
skuId: this.skuDetail.id,
|
||||
cartType: 'BUY_NOW'
|
||||
};
|
||||
this.loading = true;
|
||||
addCartGoods(params)
|
||||
.then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.$router.push({
|
||||
path: "/shoppingCart",
|
||||
query: { detail: this.skuDetail, count: this.count },
|
||||
});
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
buyNow() {
|
||||
// 立即购买
|
||||
const params = {
|
||||
num: this.count,
|
||||
skuId: this.skuDetail.id,
|
||||
cartType: "BUY_NOW",
|
||||
};
|
||||
// 虚拟商品购买
|
||||
if (this.skuDetail.goodsType === 'VIRTUAL_GOODS') {
|
||||
params.cartType = 'VIRTUAL'
|
||||
if (this.skuDetail.goodsType === "VIRTUAL_GOODS") {
|
||||
params.cartType = "VIRTUAL";
|
||||
}
|
||||
this.loading1 = true;
|
||||
addCartGoods(params).then(res => {
|
||||
this.loading1 = false;
|
||||
if (res.success) {
|
||||
this.$router.push({path: '/pay', query: {way: params.cartType}});
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
}).catch(() => {
|
||||
this.loading1 = false;
|
||||
});
|
||||
addCartGoods(params)
|
||||
.then((res) => {
|
||||
this.loading1 = false;
|
||||
if (res.success) {
|
||||
this.$router.push({ path: "/pay", query: { way: params.cartType } });
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading1 = false;
|
||||
});
|
||||
},
|
||||
async collect () { // 收藏商品
|
||||
async collect() {
|
||||
// 收藏商品
|
||||
if (this.isCollected) {
|
||||
let cancel = await cancelCollect('GOODS', this.skuDetail.id)
|
||||
let cancel = await cancelCollect("GOODS", this.skuDetail.id);
|
||||
if (cancel.success) {
|
||||
this.$Message.success('取消收藏成功')
|
||||
this.isCollected = false
|
||||
this.$Message.success("取消收藏成功");
|
||||
this.isCollected = false;
|
||||
}
|
||||
} else {
|
||||
let collect = await collectGoods('GOODS', this.skuDetail.id);
|
||||
let collect = await collectGoods("GOODS", this.skuDetail.id);
|
||||
if (collect.code === 200) {
|
||||
this.isCollected = true;
|
||||
this.$Message.success('收藏商品成功,可以前往个人中心我的收藏查看');
|
||||
this.$Message.success("收藏商品成功,可以前往个人中心我的收藏查看");
|
||||
}
|
||||
}
|
||||
},
|
||||
// 格式化数据
|
||||
formatSku (list) {
|
||||
formatSku(list) {
|
||||
let arr = [{}];
|
||||
list.forEach((item, index) => {
|
||||
item.specValues.forEach((spec, specIndex) => {
|
||||
let name = spec.specName;
|
||||
let values = {
|
||||
value: spec.specValue,
|
||||
quantity: item.quantity
|
||||
quantity: item.quantity,
|
||||
};
|
||||
if (name === 'images') {
|
||||
if (name === "images") {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -275,7 +356,7 @@ export default {
|
||||
if (!keys.includes(name)) {
|
||||
arr.push({
|
||||
name: name,
|
||||
values: [values]
|
||||
values: [values],
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -286,55 +367,67 @@ export default {
|
||||
|
||||
let cur = list.filter((i) => i.skuId === this.$route.query.skuId)[0];
|
||||
if (cur) {
|
||||
cur.specValues.filter((i) => i.specName !== 'images')
|
||||
cur.specValues
|
||||
.filter((i) => i.specName !== "images")
|
||||
.forEach((value, _index) => {
|
||||
this.currentSelceted[_index] = value.specValue;
|
||||
});
|
||||
}
|
||||
this.skuList = list;
|
||||
},
|
||||
receiveCoupon (id) { // 领取优惠券
|
||||
receiveCoupon(id).then(res => {
|
||||
receiveCoupon(id) {
|
||||
// 领取优惠券
|
||||
receiveCoupon(id).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success('优惠券领取成功')
|
||||
this.$Message.success("优惠券领取成功");
|
||||
} else {
|
||||
this.$Message.warning(res.message)
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
promotion () { // 格式化促销活动,返回当前促销的对象
|
||||
promotion() {
|
||||
// 格式化促销活动,返回当前促销的对象
|
||||
if (!this.detail.promotionMap) return false;
|
||||
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]])
|
||||
let key = keysArr[i].split("-")[0];
|
||||
if (
|
||||
(new Date(this.detail.promotionMap[keysArr[i]].startTime).getTime >
|
||||
new Date().getTime() &&
|
||||
new Date(this.detail.promotionMap[keysArr[i]].endTime).getTime <
|
||||
new Date().getTime()) ||
|
||||
this.detail.promotionMap[keysArr[i]].getType !== "FREE"
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
if (key === "COUPON") {
|
||||
this.promotionMap[key].push(this.detail.promotionMap[keysArr[i]]);
|
||||
} else {
|
||||
this.promotionMap[key] = this.detail.promotionMap[keysArr[i]]
|
||||
this.promotionMap[key] = this.detail.promotionMap[keysArr[i]];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
// 用户登录才会判断是否收藏
|
||||
if (this.Cookies.getItem('userInfo')) {
|
||||
isCollection('GOODS', this.skuDetail.id).then(res => {
|
||||
if (this.Cookies.getItem("userInfo")) {
|
||||
isCollection("GOODS", this.skuDetail.id).then((res) => {
|
||||
if (res.success && res.result) {
|
||||
this.isCollected = true;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
this.detail.data.specList.forEach(e => {
|
||||
if (e.specName === 'images') {
|
||||
this.imgList = e.specImage
|
||||
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
|
||||
}
|
||||
this.promotion();
|
||||
document.title = this.skuDetail.goodsName;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -346,7 +439,6 @@ export default {
|
||||
}
|
||||
.inventory {
|
||||
padding-left: 4px;
|
||||
|
||||
}
|
||||
|
||||
.global_color {
|
||||
@@ -597,7 +689,7 @@ export default {
|
||||
|
||||
.add-buy-car {
|
||||
margin-top: 15px;
|
||||
>*{
|
||||
> * {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
@@ -607,7 +699,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
> span {
|
||||
padding-right: 10px;
|
||||
&:hover{
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
@@ -4,9 +4,10 @@
|
||||
<!-- LOGO 搜索 -->
|
||||
<div class="width_1200 logo">
|
||||
<div>
|
||||
<router-link to="/"><img :src="$store.state.logoImg" /></router-link>
|
||||
<router-link to="/"><img :src="$store.state.logoImg" /></router-link>
|
||||
<div>
|
||||
购物车(<span>{{ goodsTotal }}</span>)
|
||||
购物车(<span>{{ goodsTotal }}</span
|
||||
>)
|
||||
</div>
|
||||
</div>
|
||||
<Search :showTag="false" :showLogo="false"></Search>
|
||||
@@ -17,9 +18,15 @@
|
||||
<div class="available-area">
|
||||
<div class="cart-steps">
|
||||
<span :class="stepIndex == 0 ? 'active' : ''">1.我的购物车</span>
|
||||
<Icon :class="stepIndex == 0 ? 'active-arrow' : ''" custom="icomoon icon-next"></Icon>
|
||||
<Icon
|
||||
:class="stepIndex == 0 ? 'active-arrow' : ''"
|
||||
custom="icomoon icon-next"
|
||||
></Icon>
|
||||
<span :class="stepIndex == 1 ? 'active' : ''">2.填写订单信息</span>
|
||||
<Icon :class="stepIndex == 1 ? 'active-arrow' : ''" custom="icomoon icon-next"></Icon>
|
||||
<Icon
|
||||
:class="stepIndex == 1 ? 'active-arrow' : ''"
|
||||
custom="icomoon icon-next"
|
||||
></Icon>
|
||||
<span :class="stepIndex == 2 ? 'active' : ''">3.成功提交订单</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,7 +34,9 @@
|
||||
<div class="cart-goods">
|
||||
<div class="cart-goods-title">
|
||||
<div class="width_60">
|
||||
<Checkbox v-model="allChecked" @on-change="changeChecked(allChecked, 'all')">全选</Checkbox>
|
||||
<Checkbox v-model="allChecked" @on-change="changeChecked(allChecked, 'all')"
|
||||
>全选</Checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="goods-title">商品</div>
|
||||
<div class="width_150">单价(元)</div>
|
||||
@@ -39,83 +48,140 @@
|
||||
<p>购物车空空如也</p>
|
||||
<router-link to="/">去选购></router-link>
|
||||
</div>
|
||||
<div v-else class="cart-goods-items" v-for="(shop, index) in cartList" :key="index">
|
||||
<div
|
||||
v-else
|
||||
class="cart-goods-items"
|
||||
v-for="(shop, index) in cartList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="shop-name">
|
||||
<div>
|
||||
<Checkbox v-model="shop.checked" @on-change="changeChecked(shop.checked, 'shop', shop.storeId)"></Checkbox>
|
||||
<span class="go-shop-page" @click="goShopPage(shop.storeId)">{{shop.storeName}}</span>
|
||||
<Checkbox
|
||||
v-model="shop.checked"
|
||||
@on-change="changeChecked(shop.checked, 'shop', shop.storeId)"
|
||||
></Checkbox>
|
||||
<span class="go-shop-page" @click="goShopPage(shop.storeId)">{{
|
||||
shop.storeName
|
||||
}}</span>
|
||||
</div>
|
||||
<span class="shop-coupon" v-if="shop.couponList.length" :class="couponAvailable === index ? 'shop-coupon-show' : ''" @click.stop="showCoupon(shop.id, index)">
|
||||
<span
|
||||
class="shop-coupon"
|
||||
v-if="shop.couponList.length"
|
||||
:class="couponAvailable === index ? 'shop-coupon-show' : ''"
|
||||
@click.stop="showCoupon(shop.id, index)"
|
||||
>
|
||||
<!-- 优惠券模态框 -->
|
||||
<div v-if="couponAvailable === index">
|
||||
<div class="coupon-item" v-for="(item, index) in shop.couponList" :key="index">
|
||||
<div
|
||||
class="coupon-item"
|
||||
v-for="(item, index) in shop.couponList"
|
||||
:key="index"
|
||||
>
|
||||
<span v-if="item.couponType === 'PRICE'">¥{{ item.price }}</span>
|
||||
<span v-if="item.couponType === 'DISCOUNT'">{{ item.couponDiscount }}折</span>
|
||||
<span>满{{item.consumeThreshold}}元可用</span>
|
||||
<Button class="coupon-btn" size="small" type="primary" @click="receiveShopCoupon(item)" :disabled="item.disabled">{{ item.disabled ? "已领取" : "领取" }}</Button>
|
||||
<span v-if="item.couponType === 'DISCOUNT'"
|
||||
>{{ item.couponDiscount }}折</span
|
||||
>
|
||||
<span>满{{ item.consumeThreshold }}元可用</span>
|
||||
<Button
|
||||
class="coupon-btn"
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="receiveShopCoupon(item)"
|
||||
:disabled="item.disabled"
|
||||
>{{ item.disabled ? "已领取" : "领取" }}</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div class="promotion-notice">{{shop.promotionNotice}}</div>
|
||||
<div class="promotion-notice">{{ shop.promotionNotice }}</div>
|
||||
</div>
|
||||
<template v-for="(goods, goodsIndex) in shop.skuList">
|
||||
<div class="goods-item" :key="goodsIndex">
|
||||
<div class="width_60">
|
||||
<Checkbox v-model="goods.checked" @on-change="changeChecked(goods.checked, 'goods', goods.goodsSku.id)"></Checkbox>
|
||||
<Checkbox
|
||||
v-model="goods.checked"
|
||||
@on-change="changeChecked(goods.checked, 'goods', goods.goodsSku.id)"
|
||||
></Checkbox>
|
||||
</div>
|
||||
<div class="goods-title" @click="goGoodsDetail(goods.goodsSku.id, goods.goodsSku.goodsId)">
|
||||
<img :src="
|
||||
goods.goodsSku.thumbnail || '../assets/images/goodsDetail/item-detail-1.jpg'
|
||||
" />
|
||||
<div
|
||||
class="goods-title"
|
||||
@click="goGoodsDetail(goods.goodsSku.id, goods.goodsSku.goodsId)"
|
||||
>
|
||||
<img
|
||||
:src="
|
||||
goods.goodsSku.thumbnail ||
|
||||
'../assets/images/goodsDetail/item-detail-1.jpg'
|
||||
"
|
||||
/>
|
||||
<div>
|
||||
<p>{{ goods.goodsSku.goodsName }}</p>
|
||||
<template v-for="(promotion, promotionIndex) in goods.promotions">
|
||||
<div class="promotion" :key="promotionIndex" v-if="promotion.promotionType === 'SECKILL'">
|
||||
<div
|
||||
class="promotion"
|
||||
:key="promotionIndex"
|
||||
v-if="promotion.promotionType === 'SECKILL'"
|
||||
>
|
||||
<span>秒杀</span>
|
||||
<promotion :time="promotion.endTime" type="cart"></promotion>
|
||||
</div>
|
||||
</template>
|
||||
<template v-for="(promotion, promotionIndex) in goods.promotions">
|
||||
<div class="promotion" :key="promotionIndex" v-if="promotion.promotionType === 'FULL_DISCOUNT'">
|
||||
<div
|
||||
class="promotion"
|
||||
:key="promotionIndex"
|
||||
v-if="promotion.promotionType === 'FULL_DISCOUNT'"
|
||||
>
|
||||
<span>满优惠活动</span>
|
||||
<promotion :time="promotion.endTime" type="cart"></promotion>
|
||||
</div>
|
||||
</template>
|
||||
<template v-for="(promotion, promotionIndex) in goods.promotions">
|
||||
<div class="promotion" :key="promotionIndex" v-if="promotion.promotionType === 'COUPON'">
|
||||
<span>优惠券</span>
|
||||
<promotion :time="promotion.endTime" type="cart"></promotion>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width_150">
|
||||
{{ goods.purchasePrice | unitPrice("¥") }}
|
||||
</div>
|
||||
<div class="width_100">
|
||||
<InputNumber :min="1" size="small" v-model="goods.num" @on-change="changeNum(goods.num, goods.goodsSku.id)"></InputNumber>
|
||||
<div class="fontsize_12">{{goods.goodsSku.quantity > 0 ? '有货' : '无货'}}</div>
|
||||
<InputNumber
|
||||
:min="1"
|
||||
size="small"
|
||||
v-model="goods.num"
|
||||
@on-change="changeNum(goods.num, goods.goodsSku.id)"
|
||||
></InputNumber>
|
||||
<div class="fontsize_12">
|
||||
{{ goods.goodsSku.quantity > 0 ? "有货" : "无货" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="width_150">
|
||||
{{ goods.subTotal | unitPrice("¥") }}
|
||||
</div>
|
||||
<div class="width_100">
|
||||
<span class="handle-btn" v-if="!goods.errorMessage" @click="delGoods(goods.goodsSku.id)">删除</span>
|
||||
<span class="handle-btn" v-if="!goods.errorMessage" @click="collectGoods(goods.goodsSku.id)">收藏</span>
|
||||
<span
|
||||
class="handle-btn"
|
||||
v-if="!goods.errorMessage"
|
||||
@click="delGoods(goods.goodsSku.id)"
|
||||
>删除</span
|
||||
>
|
||||
<span
|
||||
class="handle-btn"
|
||||
v-if="!goods.errorMessage"
|
||||
@click="collectGoods(goods.goodsSku.id)"
|
||||
>收藏</span
|
||||
>
|
||||
</div>
|
||||
<div class="error-goods" v-if="goods.errorMessage">
|
||||
<div>{{goods.errorMessage}}</div>
|
||||
<div>{{ goods.errorMessage }}</div>
|
||||
<Button type="primary" @click="delGoods(goods.goodsSku.id)">删除</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</div>
|
||||
<!-- 底部支付栏 -->
|
||||
<div class="cart-goods-footer">
|
||||
<div>
|
||||
<div class="width_60">
|
||||
<Checkbox v-model="allChecked" @on-change="changeChecked(allChecked, 'all')">全选</Checkbox>
|
||||
<Checkbox v-model="allChecked" @on-change="changeChecked(allChecked, 'all')"
|
||||
>全选</Checkbox
|
||||
>
|
||||
</div>
|
||||
<div class="width_100 handle-btn" @click="delGoods">删除选中商品</div>
|
||||
<!-- <div class="width_100 handle-btn" @click="collectGoods">移到我的收藏</div> -->
|
||||
@@ -123,13 +189,15 @@
|
||||
</div>
|
||||
<div>
|
||||
<div class="selected-count">
|
||||
已选择<span>{{ checkedNum }}</span>件商品
|
||||
已选择<span>{{ checkedNum }}</span
|
||||
>件商品
|
||||
</div>
|
||||
<div class="ml_20 save-price">
|
||||
已节省<span>{{ priceDetailDTO.discountPrice | unitPrice("¥") }}</span>
|
||||
</div>
|
||||
<div class="ml_20 total-price">
|
||||
总价(不含运费):<div>{{ priceDetailDTO.flowPrice | unitPrice("¥") }}</div>
|
||||
总价(不含运费):
|
||||
<div>{{ priceDetailDTO.flowPrice | unitPrice("¥") }}</div>
|
||||
</div>
|
||||
<div class="pay ml_20" @click="pay">去结算</div>
|
||||
</div>
|
||||
@@ -142,21 +210,21 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Promotion from '@/components/goodsDetail/Promotion';
|
||||
import Search from '@/components/Search';
|
||||
import * as APICart from '@/api/cart';
|
||||
import * as APIMember from '@/api/member';
|
||||
import Promotion from "@/components/goodsDetail/Promotion";
|
||||
import Search from "@/components/Search";
|
||||
import * as APICart from "@/api/cart";
|
||||
import * as APIMember from "@/api/member";
|
||||
export default {
|
||||
name: 'Cart',
|
||||
beforeRouteEnter (to, from, next) {
|
||||
name: "Cart",
|
||||
beforeRouteEnter(to, from, next) {
|
||||
window.scrollTo(0, 0);
|
||||
next();
|
||||
},
|
||||
components: {
|
||||
Search,
|
||||
Promotion
|
||||
Promotion,
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
couponAvailable: false, // 展示优惠券
|
||||
stepIndex: 0, // 当前处于哪一步,购物车==0,填写订单信息==1,成功提交订单==2
|
||||
@@ -167,44 +235,44 @@ export default {
|
||||
cartList: [], // 购物车列表
|
||||
couponList: [], // 优惠券列表
|
||||
priceDetailDTO: {}, // 价格明细
|
||||
skuList: [] // sku列表
|
||||
skuList: [], // sku列表
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 跳转商品详情
|
||||
goGoodsDetail (skuId, goodsId) {
|
||||
goGoodsDetail(skuId, goodsId) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/goodsDetail',
|
||||
query: { skuId, goodsId }
|
||||
path: "/goodsDetail",
|
||||
query: { skuId, goodsId },
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
window.open(routeUrl.href, "_blank");
|
||||
},
|
||||
// 跳转店铺首页
|
||||
goShopPage (id) {
|
||||
goShopPage(id) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/Merchant',
|
||||
query: { id }
|
||||
path: "/Merchant",
|
||||
query: { id },
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
window.open(routeUrl.href, "_blank");
|
||||
},
|
||||
// 收藏商品
|
||||
collectGoods (id) {
|
||||
collectGoods(id) {
|
||||
this.$Modal.confirm({
|
||||
title: '收藏',
|
||||
content: '<p>商品收藏后可在个人中心我的收藏查看</p>',
|
||||
title: "收藏",
|
||||
content: "<p>商品收藏后可在个人中心我的收藏查看</p>",
|
||||
onOk: () => {
|
||||
APIMember.collectGoods('GOODS', id).then((res) => {
|
||||
APIMember.collectGoods("GOODS", id).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success('收藏商品成功');
|
||||
this.$Message.success("收藏商品成功");
|
||||
this.getCartList();
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel: () => {}
|
||||
onCancel: () => {},
|
||||
});
|
||||
},
|
||||
// 删除商品
|
||||
delGoods (id) {
|
||||
delGoods(id) {
|
||||
const idArr = [];
|
||||
if (!id) {
|
||||
const list = this.cartList;
|
||||
@@ -217,51 +285,51 @@ export default {
|
||||
idArr.push(id);
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: '删除',
|
||||
content: '<p>确定要删除该商品吗?</p>',
|
||||
title: "删除",
|
||||
content: "<p>确定要删除该商品吗?</p>",
|
||||
onOk: () => {
|
||||
APICart.delCartGoods({ skuIds: idArr.toString() }).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success('删除成功');
|
||||
this.$Message.success("删除成功");
|
||||
this.getCartList();
|
||||
} else {
|
||||
this.$Message.error(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
// 清空购物车
|
||||
clearCart () {
|
||||
clearCart() {
|
||||
this.$Modal.confirm({
|
||||
title: '提示',
|
||||
content: '<p>确定要清空购物车吗?清空后不可恢复</p>',
|
||||
title: "提示",
|
||||
content: "<p>确定要清空购物车吗?清空后不可恢复</p>",
|
||||
onOk: () => {
|
||||
APICart.clearCart().then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success('清空购物车成功');
|
||||
this.$Message.success("清空购物车成功");
|
||||
this.getCartList();
|
||||
} else {
|
||||
this.$Message.error(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
// 跳转支付页面
|
||||
pay () {
|
||||
pay() {
|
||||
if (this.checkedNum) {
|
||||
this.$router.push({ path: '/pay', query: { way: 'CART' } });
|
||||
this.$router.push({ path: "/pay", query: { way: "CART" } });
|
||||
} else {
|
||||
this.$Message.warning('请至少选择一件商品');
|
||||
this.$Message.warning("请至少选择一件商品");
|
||||
}
|
||||
},
|
||||
// 展示优惠券
|
||||
showCoupon (storeId, index) {
|
||||
showCoupon(storeId, index) {
|
||||
this.couponAvailable = index;
|
||||
},
|
||||
// 设置购买数量
|
||||
changeNum (val, id) {
|
||||
changeNum(val, id) {
|
||||
console.log(val, id);
|
||||
APICart.setCartGoodsNum({ skuId: id, num: val }).then((res) => {
|
||||
console.log(res);
|
||||
@@ -271,12 +339,12 @@ export default {
|
||||
});
|
||||
},
|
||||
// 设置商品选中状态
|
||||
async changeChecked (status, type, id) {
|
||||
async changeChecked(status, type, id) {
|
||||
const check = status ? 1 : 0;
|
||||
if (type === 'all') {
|
||||
if (type === "all") {
|
||||
// 全选
|
||||
await APICart.setCheckedAll({ checked: check });
|
||||
} else if (type === 'shop') {
|
||||
} else if (type === "shop") {
|
||||
// 选中店铺所有商品
|
||||
await APICart.setCheckedSeller({ checked: check, storeId: id });
|
||||
} else {
|
||||
@@ -287,17 +355,17 @@ export default {
|
||||
this.getCartList();
|
||||
},
|
||||
// 领取优惠券
|
||||
async receiveShopCoupon (item) {
|
||||
async receiveShopCoupon(item) {
|
||||
let res = await APIMember.receiveCoupon(item.id);
|
||||
if (res.success) {
|
||||
this.$set(item, 'disabled', true);
|
||||
this.$Message.success('领取成功');
|
||||
this.$set(item, "disabled", true);
|
||||
this.$Message.success("领取成功");
|
||||
} else {
|
||||
this.$Message.error(res.message);
|
||||
}
|
||||
},
|
||||
// 购物车列表
|
||||
async getCartList () {
|
||||
async getCartList() {
|
||||
this.loading = true;
|
||||
try {
|
||||
let res = await APICart.cartGoodsAll();
|
||||
@@ -326,15 +394,15 @@ export default {
|
||||
} catch (error) {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.getCartList();
|
||||
APICart.cartCount().then((res) => {
|
||||
// 购物车商品数量
|
||||
if (res.success) this.goodsTotal = res.result;
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -657,12 +725,12 @@ export default {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.cart-goods-footer > div{
|
||||
.cart-goods-footer > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.total-price{
|
||||
.total-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user