282 lines
7.2 KiB
Vue
282 lines
7.2 KiB
Vue
<template>
|
|
<view class="shop-cart">
|
|
<view class="u-m-32">
|
|
<view class="u-text-right nr" v-if="cartLists.length > 0" @click="isEdit = !isEdit">{{ !isEdit ? '编辑' : '完成' }}</view>
|
|
<view class="u-m-t-40" v-for="(item, index) in cartLists" :key="index">
|
|
<view class="bg-white br16 u-p-24 row">
|
|
<view class="select checkbox">
|
|
<checkbox type="circle" class="checkbox" :value="item.cart_id + ''" :checked="item.selected == 1" @click="changOneSelect(item.cart_id, item.selected)"></checkbox>
|
|
</view>
|
|
<view class="row flex1 u-col-top">
|
|
<view>
|
|
<u-image :src="item.img" width="160" height="160" border-radius="8"></u-image>
|
|
</view>
|
|
<view class="u-m-l-16">
|
|
<navigator :url="`/pages/shop/shop?id=${item.goods_id}`" hover-class="none">
|
|
<view class="u-line-2">{{ item.name }}</view>
|
|
</navigator>
|
|
<view class="sm text-999 u-m-t-8 attr u-text-center u-p-l-16 u-p-r-16 u-p-6-8 u-p-b-8">
|
|
<text>味浓芳香</text>
|
|
<text class="u-m-l-8 u-m-r-8">|</text>
|
|
<text>味浓芳香</text>
|
|
<text class="u-m-l-8 u-m-r-8">|</text>
|
|
<text>味浓芳香</text>
|
|
</view>
|
|
<view class="u-m-t-16 row-between">
|
|
<view class="primary">
|
|
<price-format :price="item.price" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
|
|
</view>
|
|
<view>
|
|
<view v-if="!isEdit">
|
|
<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 v-if="isEdit" @click.stop="deleteCartGoods(item.cart_id)">
|
|
<u-icon name="trash" size="32" color="#999"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="!(cartType != 2)" class="cart-null column-center mb20" style="padding: 80rpx 0 50rpx" v-show="!(cartType != 2)">
|
|
<image class="img-null" :src="cloudPath + 'img/cart_null.png'"></image>
|
|
<view class="muted mb20">购物车暂无任何商品~</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="!isLogin" class="login column-center u-m-t-80">
|
|
<image class="img-null" :src="cloudPath + 'img/cart_null.png'" width="1200" height="1200" mode="aspectFill"></image>
|
|
<view class="muted mt20">登录后才能查看购物车哦</view>
|
|
<navigator class="mt20 br60 row-center btn text-default" url="/pages/login/login" hover-class="none">
|
|
<text>去登录</text>
|
|
</navigator>
|
|
</view>
|
|
|
|
<view class="fixed footer bg-white w-full row-between u-col-center px32" v-if="!(cartType != 1)">
|
|
<view>
|
|
<!-- <u-checkbox shape="circle" :active-color="themeColor">全选</u-checkbox> -->
|
|
<checkbox-group class="row checkbox" @change="changeAllSelect">
|
|
<checkbox id="checkAll" value="all" :checked="isSelectedAll"></checkbox>
|
|
<label for="checkAll" class="ml10">全选</label>
|
|
</checkbox-group>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row-center">
|
|
<view>合计：</view>
|
|
<view class="primary u-m-l-8" style="margin-top: -8rpx;">
|
|
<price-format :price="totalPrice" :subscriptSize="32" :firstSize="40" :secondSize="32"></price-format>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-l-24">
|
|
<u-button @click="goToConfirm" hover-class="none" :customStyle="{width: '228rpx', height: '80rpx', backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0', borderRadius: '64rpx'}" :hair-line="false">结算</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getCartList,
|
|
changeCartSelect,
|
|
changeGoodsCount,
|
|
deleteGoods,
|
|
} from "@/api/store";
|
|
import {
|
|
mapGetters,
|
|
mapActions
|
|
} from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
isEdit: false,
|
|
cartType: 0,
|
|
isShow: false,
|
|
cartLists: [],
|
|
delPopup: false,
|
|
totalPrice: "",
|
|
}
|
|
},
|
|
|
|
onPullDownRefresh() {
|
|
this.getCartListFun();
|
|
},
|
|
|
|
onShow() {
|
|
this.isLogin && this.getCartListFun();
|
|
},
|
|
|
|
methods: {
|
|
...mapActions(["getCartNum"]),
|
|
|
|
// 获取购物车商品
|
|
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();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 购物车数组加减
|
|
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();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 删除购物车商品
|
|
deleteCartGoods(cartId) {
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
content: "是否确认删除该商品？",
|
|
success: ({ confirm }) => {
|
|
if (!confirm) return;
|
|
deleteGoods({
|
|
cart_id: cartId,
|
|
}).then((res) => {
|
|
if (res.code == 1) {
|
|
this.getCartListFun();
|
|
}
|
|
});
|
|
},
|
|
});
|
|
},
|
|
|
|
// 选择单个商品
|
|
changOneSelect(cartId, selected) {
|
|
selected = !selected;
|
|
this.changeCartSelectFun([cartId], selected);
|
|
},
|
|
|
|
// 更改全选状态
|
|
changeAllSelect() {
|
|
const {
|
|
isSelectedAll,
|
|
cartLists
|
|
} = this
|
|
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();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 去结算
|
|
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,
|
|
});
|
|
}
|
|
});
|
|
console.log("this.cartList>>>", goods);
|
|
|
|
if (goods.length == 0) return this.$toast({
|
|
title: "您还没有选择商品哦",
|
|
});
|
|
// uni.navigateTo({
|
|
// url: "/pages/confirm_order/confirm_order?data=" +
|
|
// encodeURIComponent(
|
|
// JSON.stringify({
|
|
// goods,
|
|
// type: "cart",
|
|
// })
|
|
// ),
|
|
// });
|
|
},
|
|
},
|
|
|
|
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;
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.shop-cart {
|
|
padding-bottom: 200rpx;
|
|
}
|
|
|
|
.attr {
|
|
background-color: #F5F5F5;
|
|
border-radius: 88rpx;
|
|
}
|
|
|
|
.fixed {
|
|
height: 112rpx;
|
|
position: fixed;
|
|
bottom: var(--window-bottom);
|
|
left: 0;
|
|
right: 0;
|
|
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style> |