403 lines
10 KiB
Vue
403 lines
10 KiB
Vue
<template>
|
||
<view class="shop-cart">
|
||
<view
|
||
class="main"
|
||
:style="{ 'padding-bottom': cartType == 1 ? '100rpx' : 0 }"
|
||
>
|
||
<view
|
||
v-for="(item, index) in cartLists"
|
||
:key="index"
|
||
class="cart-list mb20"
|
||
v-show="!(cartType != 1)"
|
||
>
|
||
<view
|
||
class="cart-item bg-white"
|
||
:class="{ invalid: item.cart_status != 0 }"
|
||
>
|
||
<view class="row-between select" v-if="item.cart_status == 0">
|
||
<checkbox
|
||
:value="item.cart_id + ''"
|
||
:checked="item.selected == 1"
|
||
@click="changOneSelect(item.cart_id, item.selected)"
|
||
>选择</checkbox
|
||
>
|
||
<view
|
||
:data-cartid="item.cart_id"
|
||
@click="changeDelPopup(item.cart_id)"
|
||
>
|
||
<image class="icon-xl" src="/static/images/icon_del.png" />
|
||
</view>
|
||
</view>
|
||
<view class="select row-between sm muted" v-else>
|
||
已失效
|
||
<view
|
||
:data-cartid="item.cart_id"
|
||
@click="changeDelPopup(item.cart_id)"
|
||
>
|
||
<image class="icon-xl" src="/static/images/icon_del.png" />
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="row"
|
||
style="padding: 20rpx"
|
||
@tap="goPage"
|
||
:data-url="'/pages/goods_details/goods_details?id=' + item.goods_id"
|
||
>
|
||
<custom-image
|
||
width="180rpx"
|
||
height="180rpx"
|
||
radius="10rpx"
|
||
class="goods-img mr20"
|
||
lazy-load
|
||
:src="item.img"
|
||
/>
|
||
<view class="info" style="flex: 1">
|
||
<view class="line2 nr">{{ item.name }}</view>
|
||
<view class="muted xs line1 mt10">
|
||
{{ item.spec_value_str }}
|
||
</view>
|
||
<view class="row-between mt20">
|
||
<view class="price row primary">
|
||
<price-format
|
||
:price="item.price"
|
||
:firstSize="32"
|
||
:secondSize="32"
|
||
:showSubscript="true"
|
||
:subscriptSize="32"
|
||
></price-format>
|
||
</view>
|
||
<view class="cartNum" @tap.stop="">
|
||
<u-number-box
|
||
:disabled="item.cart_status != 0"
|
||
:value="item.goods_num"
|
||
:min="1"
|
||
:max="item.item_stock"
|
||
@change="countChange($event, item.cart_id, item)"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="cart-null column-center bg-white mb20"
|
||
style="padding: 80rpx 0 50rpx"
|
||
v-show="!(cartType != 2)"
|
||
>
|
||
<image class="img-null" src="/static/images/cart_null.png"></image>
|
||
<view class="muted mb20">购物车暂无任何商品~</view>
|
||
<navigator
|
||
open-type="switchTab"
|
||
url="/pages/index/index"
|
||
hover-class="none"
|
||
class="primary br60 btn row-center"
|
||
>去逛逛</navigator
|
||
>
|
||
</view>
|
||
<view v-if="!isLogin" class="login column-center">
|
||
<image class="img-null" src="/static/images/cart_null.png"></image>
|
||
<view class="muted mt20">登录后才能查看购物车哦</view>
|
||
<navigator class="white br60 row-center btn" url="/pages/login/login">
|
||
<!-- <image class="mr10" src="/static/images/icon_wechat.png"></image> -->
|
||
<text>去登录</text>
|
||
</navigator>
|
||
</view>
|
||
<recommend v-if="isShow"></recommend>
|
||
</view>
|
||
<view class="footer row bg-white" v-show="!(cartType != 1)">
|
||
<checkbox-group class="row" @change="changeAllSelect">
|
||
<checkbox id="checkAll" value="all" :checked="isSelectedAll"></checkbox>
|
||
<label for="checkAll" class="ml10">全选</label>
|
||
</checkbox-group>
|
||
<view class="all-price lg mr20 row-end">
|
||
<view>合计：</view>
|
||
<view class="primary">￥{{ totalPrice || 0 }}</view>
|
||
</view>
|
||
<view
|
||
class="right-btn br60 white"
|
||
:style="' ' + (nullSelect ? 'background: #d7d7d7' : '')"
|
||
@tap="goToConfirm"
|
||
>去结算</view
|
||
>
|
||
</view>
|
||
<u-modal
|
||
v-model="delPopup"
|
||
:showCancelButton="true"
|
||
comfirm-text="狠心删除"
|
||
confirm-color="#FF2C3C"
|
||
:show-title="false"
|
||
@confirm="goodsDelete"
|
||
@cancel="changeDelPopup"
|
||
>
|
||
<view class="column-center tips-dialog" style="padding-top: 40rpx">
|
||
<image class="icon-lg" src="/static/images/icon_warning.png" />
|
||
<view style="margin: 30rpx 0">确认删除该商品吗？</view>
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getCartList,
|
||
changeCartSelect,
|
||
changeGoodsCount,
|
||
deleteGoods,
|
||
} from "@/api/store";
|
||
import { getUser } from "@/api/user";
|
||
import { mapGetters, mapActions } from "vuex";
|
||
import Cache from "@/utils/cache";
|
||
import { setTabbar } from "@/utils/tools";
|
||
export default {
|
||
data() {
|
||
return {
|
||
//购物车状态 1为有 2为空 0则什么都不显示
|
||
cartType: 0,
|
||
isShow: false,
|
||
cartLists: [],
|
||
delPopup: false,
|
||
totalPrice: "",
|
||
};
|
||
},
|
||
|
||
components: {},
|
||
computed: {
|
||
...mapGetters(["cartNum"]),
|
||
nullSelect() {
|
||
let index = this.cartLists.findIndex(
|
||
(item) => item.selected == 1 && item.cart_status == 0
|
||
);
|
||
|
||
if (index == -1) {
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
},
|
||
isSelectedAll() {
|
||
let index = this.cartLists.findIndex(
|
||
(item) => item.selected == 0 && item.cart_status == 0
|
||
);
|
||
|
||
if (index == -1) {
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
},
|
||
},
|
||
onLoad() {
|
||
setTabbar();
|
||
},
|
||
onShow() {
|
||
this.isLogin && this.getCartListFun();
|
||
},
|
||
|
||
onPullDownRefresh() {
|
||
this.getCartListFun();
|
||
},
|
||
// onShareAppMessage() {
|
||
// const shareInfo = Cache.get('shareInfo')
|
||
// return {
|
||
// title: shareInfo.mnp_share_title,
|
||
// path: "pages/index/index?invite_code=" + this.userInfo.distribution_code
|
||
// };
|
||
// },
|
||
methods: {
|
||
...mapActions(["getCartNum"]),
|
||
goodsDelete() {
|
||
this.delPopup = false;
|
||
deleteGoods({
|
||
cart_id: this.cartId,
|
||
}).then((res) => {
|
||
if (res.code == 1) {
|
||
this.getCartListFun();
|
||
}
|
||
});
|
||
},
|
||
changeDelPopup(cartId) {
|
||
if (cartId) {
|
||
this.cartId = cartId;
|
||
}
|
||
|
||
this.delPopup = !this.delPopup;
|
||
},
|
||
|
||
getCartListFun() {
|
||
getCartList().then((res) => {
|
||
uni.stopPullDownRefresh({
|
||
success: (res) => {},
|
||
});
|
||
|
||
if (res.code == 1) {
|
||
let { lists, total_amount } = res.data;
|
||
let cartType = 0;
|
||
|
||
if (lists.length == 0) {
|
||
cartType = 2;
|
||
} else {
|
||
cartType = 1;
|
||
}
|
||
|
||
this.cartLists = lists;
|
||
this.cartType = cartType;
|
||
this.totalPrice = total_amount;
|
||
this.isShow = true;
|
||
this.getCartNum();
|
||
}
|
||
});
|
||
},
|
||
|
||
changOneSelect(cartId, selected) {
|
||
selected = !selected;
|
||
this.changeCartSelectFun([cartId], selected);
|
||
},
|
||
|
||
// 更改全选状态
|
||
changeAllSelect() {
|
||
const { isSelectedAll, cartLists } = this;
|
||
console.log(cartLists, "###");
|
||
let cartid = cartLists.map((item) => item.cart_id);
|
||
this.changeCartSelectFun(cartid, !isSelectedAll);
|
||
},
|
||
|
||
changeCartSelectFun(cartId, selected) {
|
||
console.log("selected ", selected);
|
||
changeCartSelect({
|
||
cart_id: cartId,
|
||
selected: selected ? 1 : 0,
|
||
}).then((res) => {
|
||
if (res.code == 1) {
|
||
this.getCartListFun();
|
||
}
|
||
});
|
||
},
|
||
|
||
countChange({ value }, cartId, item) {
|
||
console.log("countChange", value, cartId, item);
|
||
changeGoodsCount({
|
||
cart_id: cartId,
|
||
goods_num: value,
|
||
}).then((res) => {
|
||
if (res.code == 1) {
|
||
this.getCartListFun();
|
||
} else {
|
||
this.getCartListFun();
|
||
}
|
||
});
|
||
},
|
||
|
||
goToConfirm() {
|
||
let { cartLists } = this;
|
||
let goods = [];
|
||
cartLists.forEach((item) => {
|
||
if (item.selected && item.cart_status == 0) {
|
||
goods.push({
|
||
item_id: item.item_id,
|
||
num: item.goods_num,
|
||
});
|
||
}
|
||
});
|
||
if (goods.length == 0)
|
||
return this.$toast({
|
||
title: "您还没有选择商品哦",
|
||
});
|
||
uni.navigateTo({
|
||
url:
|
||
"/pages/confirm_order/confirm_order?data=" +
|
||
encodeURIComponent(
|
||
JSON.stringify({
|
||
goods,
|
||
type: "cart",
|
||
})
|
||
),
|
||
});
|
||
},
|
||
|
||
goPage(e) {
|
||
const { url } = e.currentTarget.dataset;
|
||
uni.navigateTo({
|
||
url,
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.shop-cart {
|
||
.main {
|
||
padding-bottom: 100rpx;
|
||
}
|
||
|
||
.cart-list {
|
||
.cart-item {
|
||
margin: 20rpx 20rpx 0;
|
||
border-radius: 10rpx;
|
||
// &.invalid {
|
||
// background-color: $color-body;
|
||
// }
|
||
}
|
||
|
||
.select {
|
||
height: 80rpx;
|
||
padding: 0 20rpx;
|
||
border-bottom: $solid-border;
|
||
}
|
||
}
|
||
|
||
.cart-null {
|
||
.btn {
|
||
border: 1px solid $color-primary;
|
||
width: 184rpx;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
padding: 8rpx 24rpx;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
padding: 0 24rpx;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
|
||
bottom: var(--window-bottom);
|
||
box-sizing: border-box;
|
||
z-index: 20;
|
||
|
||
.all-price {
|
||
text-align: right;
|
||
flex: 1;
|
||
}
|
||
|
||
.right-btn {
|
||
padding: 13rpx 45rpx;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(249, 95, 47, 1) 0%,
|
||
rgba(255, 44, 60, 1) 100%
|
||
);
|
||
}
|
||
}
|
||
|
||
.login {
|
||
height: calc(100vh - var(--window-bottom));
|
||
background: #fff;
|
||
text-align: center;
|
||
|
||
.btn {
|
||
background-color: #09bb07;
|
||
width: 280rpx;
|
||
line-height: 70rpx;
|
||
margin: 40rpx auto 0;
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|