purchase-let/pages/cart/cart.vue

412 lines
12 KiB
Vue
Raw Normal View History

2024-04-25 18:02:30 +08:00
<template>
<view>
2024-04-29 18:14:58 +08:00
<up-navbar placeholder :autoBack="true">
<template #center>
<view style="display: flex;align-items: center;width: 100%;justify-content: flex-start;margin-left: 100rpx;">
2024-04-26 18:04:56 +08:00
<view class="tabs" :class="{'tabs-active': tabsActive==index}" v-for="(item, index) in list" :key="index"
2024-04-25 18:02:30 +08:00
@click="changeTab(index)">
{{item}}
</view>
</view>
</template>
</up-navbar>
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box1">
<view class="total">
2024-04-29 18:14:58 +08:00
<view>共计<text style="color: #20B128;">{{cartList.length}}</text></view>
2024-04-30 16:24:55 +08:00
<view v-if="!isAdmin" @click="isAdmin=true;">管理</view>
<view v-else @click="isAdmin=false;">完成</view>
2024-04-25 18:02:30 +08:00
</view>
2024-04-30 16:24:55 +08:00
<view v-if="cartList.length>0" class="list" style="margin-top: 80rpx;">
2024-04-29 18:14:58 +08:00
<view class="shop-item" v-for="(item, index) in cartList" :key="index" @click="openGoodPopup(item)">
2024-04-30 16:24:55 +08:00
<view class="shop-check" @click.stop="checkItem(item, !item.check)">
2024-04-29 18:14:58 +08:00
<image v-if="!item.check" src="@/static/icon/n-check.png"></image>
2024-04-25 18:02:30 +08:00
<image v-else src="@/static/icon/check.png"></image>
</view>
2024-04-29 18:14:58 +08:00
<image class="shop-img" :src="item.imgs"></image>
2024-04-25 18:02:30 +08:00
<view class="shop-content">
<view class="title">
2024-04-29 18:14:58 +08:00
<view class="name u-line-2">{{item.goods_name}}</view>
<view class="tip u-line-1">{{item.unit_name}}</view>
2024-04-25 18:02:30 +08:00
</view>
<view class="price-btn">
2024-04-30 16:24:55 +08:00
<view class="price">{{item.sell}}</view>
2024-04-25 18:02:30 +08:00
<view class="btn">
2024-04-29 18:14:58 +08:00
<view class="num">{{item.cart_num}}</view>
2024-04-25 18:02:30 +08:00
<u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
</view>
</view>
</view>
</view>
</view>
2024-04-26 18:04:56 +08:00
<view v-else style="margin-top: 100rpx;">
<up-empty text="购物车空空如也"
icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
</up-empty>
</view>
<view style="width: 100%;height: 200rpx;"></view>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box1">
2024-05-07 17:35:35 +08:00
<view v-if="frequentlyList.length>0" class="list">
2024-05-08 14:50:27 +08:00
<view class="shop-item" v-for="(item, index) in frequentlyList" :key="index" @click="openGoodPopup(item)">
2024-04-30 16:24:55 +08:00
<image class="shop-img" :src="item.imgs"></image>
2024-04-26 18:04:56 +08:00
<view class="shop-content" style="width: 490rpx;">
<view class="title">
2024-04-30 16:24:55 +08:00
<view class="name u-line-2">{{item.name}}</view>
<view class="tip u-line-1">{{item.unit_name}}</view>
2024-04-26 18:04:56 +08:00
</view>
<view class="price-btn">
2024-04-30 16:24:55 +08:00
<view class="price">{{item.sell}}</view>
2024-04-26 18:04:56 +08:00
<view class="btn">
<up-button size="small" plain color="#20b128" shape="circle">加入购物车</up-button>
</view>
</view>
</view>
</view>
</view>
<view v-else style="margin-top: 100rpx;">
<up-empty text="没有常买的商品"
icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
</up-empty>
</view>
2024-04-25 18:02:30 +08:00
<view style="width: 100%;height: 200rpx;"></view>
</view>
</scroll-view>
</swiper-item>
</swiper>
2024-04-26 18:04:56 +08:00
<up-transition :show="tabsActive==0">
2024-04-30 16:24:55 +08:00
<view class="fiexd-btn-box cart-btn">
<view class="cart-check" @click="changeAll(checkAll===cartInfo.count)">
<image v-if="checkAll!=cartInfo.count" src="@/static/icon/n-check.png"></image>
2024-04-26 18:04:56 +08:00
<image v-else src="@/static/icon/check.png"></image>
<text style="font-size: 24rpx;">全选</text>
2024-04-30 16:24:55 +08:00
<text style="font-size: 24rpx;" v-if="checkAll">({{checkAll}})</text>
2024-04-26 18:04:56 +08:00
</view>
2024-04-30 16:24:55 +08:00
<view v-if="!isAdmin" class="btn-boxs">
2024-04-26 18:04:56 +08:00
<view class="all-price">
<view style="width: 80rpx;">合计:</view>
<view class="price">
<text style="font-size: 24rpx;">¥</text>
2024-04-30 16:24:55 +08:00
<text style="font-size: 34rpx;">{{c_price0}}</text>
<text style="font-size: 24rpx;">.{{c_price1}}</text>
2024-04-26 18:04:56 +08:00
</view>
</view>
2024-04-30 16:24:55 +08:00
<view style="width: 200rpx;">
<up-button color="#20b128" shape="circle" :disabled="!checkAll" @click="settleAccounts">去结算<text v-if="checkAll">({{checkAll}})</text></up-button>
</view>
2024-04-26 18:04:56 +08:00
</view>
2024-04-28 18:08:57 +08:00
<view v-else class="btn-boxs">
2024-04-27 18:02:43 +08:00
<!-- <view style="width: 100px;margin-right: 20rpx;"><up-button size="small" plain color="#989898" shape="circle">移入收藏夹</up-button></view> -->
2024-04-30 16:24:55 +08:00
<view style="width: 100px;"><up-button @click="deleteCartList()" size="small" plain color="#989898" shape="circle">删除</up-button></view>
2024-04-26 18:04:56 +08:00
</view>
</view>
</up-transition>
2024-04-29 18:14:58 +08:00
<goodPopup ref="goodRef" :show="showGoodPopup" @close="showGoodPopup=false" @change="changeGood" />
2024-04-25 18:02:30 +08:00
</view>
</template>
<script setup>
2024-04-29 18:14:58 +08:00
import { onShow } from "@dcloudio/uni-app"
2024-04-30 16:24:55 +08:00
import { computed, ref, watch } from 'vue';
import { cartListApi, cartChangeApi, cartCreateApi, cartDeleteApi, frequentlyPurchaseApi } from "@/api/cart.js"
2024-04-29 18:14:58 +08:00
import goodPopup from "@/components/goodPopup.vue"
2024-04-30 16:24:55 +08:00
import useCartStore from "@/store/cart.js"
const cartStore = useCartStore();
2024-04-25 18:02:30 +08:00
// 创建响应式数据
2024-04-26 18:04:56 +08:00
const list = ref(['购物车', '常买']);
2024-04-25 18:02:30 +08:00
const tabsActive = ref(0)
// 定义方法
const changeTab = (e) => {
tabsActive.value = e;
2024-04-26 18:04:56 +08:00
swiperCurrent.value = e;
2024-04-25 18:02:30 +08:00
}
const swiperCurrent = ref(0);
const animationfinish = ({ detail: { current } }) => {
swiperCurrent.value = current;
tabsActive.value = current;
2024-05-07 17:27:36 +08:00
if(swiperCurrent.value==1) getFrequentlyPurchase();
2024-04-25 18:02:30 +08:00
}
2024-04-27 18:02:43 +08:00
// 结算
const settleAccounts = ()=>{
2024-04-30 16:24:55 +08:00
let list = [];
cartList.value.forEach(item=>{
if(item.check) list.push(item.cart_id);
})
cartStore.setCartList(list);
2024-04-28 18:08:57 +08:00
uni.navigateTo({
url: '/pagesOrder/settle/settle'
})
2024-04-27 18:02:43 +08:00
}
2024-04-30 16:24:55 +08:00
// 删除
const deleteCartList = ()=>{
let list = [];
cartList.value.forEach(item=>{
if(item.check) list.push(item.cart_id);
})
cartDeleteApi({
cart_id: list
}).then(()=>{
getcartList(false);
})
}
2024-04-28 18:08:57 +08:00
2024-04-30 16:24:55 +08:00
// 购物车相关
2024-04-29 18:14:58 +08:00
const addCart = (id, cart_num) => { //加入购物车
2024-04-30 16:24:55 +08:00
cartCreateApi({
cart_num: +cart_num,
goods_id: id
2024-04-29 18:14:58 +08:00
}).then(res => {
getcartList();
})
}
2024-04-30 16:24:55 +08:00
const isAdmin = ref(false); //是否管理
2024-04-29 18:14:58 +08:00
// 选择商品相关
const showGoodPopup = ref(false);
const goodRef = ref(null);
const goodData = ref({});
const openGoodPopup = (item) => { // 打开数量/重量弹窗
2024-04-30 16:24:55 +08:00
goodData.value = JSON.parse(JSON.stringify(item));
goodRef.value.setData(goodData.value);
2024-04-29 18:14:58 +08:00
showGoodPopup.value = true;
};
const changeGood = (data)=>{ // 确定选择商品重量
showGoodPopup.value = false;
2024-04-30 16:24:55 +08:00
addCart(data.goods_id||data.id, data.cart_num);
2024-04-29 18:14:58 +08:00
}
2024-04-28 18:08:57 +08:00
const cartList = ref([]);
2024-04-29 18:14:58 +08:00
const cartInfo = ref({});
2024-04-30 16:24:55 +08:00
const getcartList = (check=true)=>{
2024-04-28 18:08:57 +08:00
cartListApi().then(res=>{
2024-04-30 16:24:55 +08:00
if(check) {
res.data.lists = res.data.lists.map(item=>{
item.check = true;
return item;
})
checkAll.value = res.data?.count || 0
}else {
checkAll.value = 0
}
2024-04-29 18:14:58 +08:00
cartList.value = res.data.lists;
2024-04-30 16:24:55 +08:00
cartInfo.value = {
total_price: res.data?.extend.total_price || '0.00',
count: res.data?.count || 0
}
})
}
const c_price0 = computed(()=>{
let price = cartInfo.value.total_price + '';
return price.split('.')[0] || '0';
})
const c_price1 = computed(()=>{
let price = cartInfo.value.total_price + '';
return price.split('.')[1] || '00';
})
// 选中
let checkAll = ref(0)
const checkItem = (item, type)=>{
item.check = type;
let price = Number(cartInfo.value.total_price);
if(type){
price += item.sell * item.cart_num;
checkAll.value++;
}else {
price -= item.sell * item.cart_num;
checkAll.value--;
}
cartInfo.value.total_price = price.toFixed(2);
}
const changeAll = (flag=false)=>{
cartList.value.forEach(item=>{
item.check = !flag;
2024-04-28 18:08:57 +08:00
})
2024-04-30 16:24:55 +08:00
if(!flag) checkAll.value = cartInfo.value.count;
else checkAll.value = 0;
2024-04-28 18:08:57 +08:00
}
2024-04-29 18:14:58 +08:00
2024-04-30 16:24:55 +08:00
// 常买记录
const frequentlyList = ref([]);
const where = ref({
page_no: 1,
page_size: 25
})
const getFrequentlyPurchase = ()=>{
frequentlyPurchaseApi({
...where.value
}).then(res=>{
frequentlyList.value = res.data;
})
2024-04-29 18:14:58 +08:00
}
2024-05-07 17:27:36 +08:00
2024-04-29 18:14:58 +08:00
onShow(()=>{
getcartList();
})
2024-04-25 18:02:30 +08:00
</script>
<style lang="scss">
.tabs {
color: #444444;
font-size: 32rpx;
margin-right: 30rpx;
}
.tabs-active {
color: #20B128;
2024-04-26 18:04:56 +08:00
// font-size: 34rpx;
2024-04-25 18:02:30 +08:00
transition: 300ms;
}
.swiper-box {
flex: 1;
2024-04-30 16:24:55 +08:00
height: calc(100vh - var(--window-top));
2024-04-25 18:02:30 +08:00
/* #ifdef H5 */
2024-04-30 16:24:55 +08:00
height: calc(100vh - 44px);
2024-04-25 18:02:30 +08:00
/* #endif */
width: 100%;
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
.swiper-item {
height: 100%;
}
}
2024-04-26 18:04:56 +08:00
.page-box1 {
2024-04-25 18:02:30 +08:00
position: relative;
2024-04-26 18:04:56 +08:00
.total {
2024-04-25 18:02:30 +08:00
padding: 0 20rpx;
display: flex;
justify-content: space-between;
position: fixed;
top: var(--window-top);
left: 0;
right: 0;
2024-04-28 18:08:57 +08:00
background-color: #f6f6f6;
2024-04-25 18:02:30 +08:00
z-index: 100;
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
color: #444;
}
2024-04-26 18:04:56 +08:00
.list {
2024-04-25 18:02:30 +08:00
margin: 20rpx;
border-radius: 20rpx;
overflow: hidden;
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
.shop-item {
padding: 20rpx;
2024-04-28 18:08:57 +08:00
border-bottom: 1rpx solid #f6f6f6;
2024-04-25 18:02:30 +08:00
background-color: #fff;
display: flex;
2024-04-26 18:04:56 +08:00
.shop-check {
2024-04-25 18:02:30 +08:00
width: 60rpx;
height: 160rpx;
display: flex;
align-items: center;
2024-04-26 18:04:56 +08:00
image {
2024-04-25 18:02:30 +08:00
width: 40rpx;
height: 40rpx;
}
}
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
.shop-img {
height: 160rpx;
width: 160rpx;
margin-right: 20rpx;
border-radius: 14rpx;
}
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
.shop-content {
width: 430rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
.title {
.name {
font-size: 28rpx;
}
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
.tip {
color: #999;
font-size: 24rpx;
margin: 12rpx 0;
}
}
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
.price {
font-size: 30rpx;
font-weight: bold;
color: #F55726;
}
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
.price-btn {
display: flex;
justify-content: space-between;
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
.btn {
display: flex;
align-items: center;
2024-04-26 18:04:56 +08:00
2024-04-25 18:02:30 +08:00
.num {
2024-05-08 14:50:27 +08:00
margin: 0 20rpx;
2024-04-25 18:02:30 +08:00
text-align: center;
}
}
}
}
}
}
}
2024-04-26 18:04:56 +08:00
.cart-btn {
.cart-check {
display: flex;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
margin: 0 10rpx;
}
}
2024-04-28 18:08:57 +08:00
.btn-boxs {
2024-04-26 18:04:56 +08:00
display: flex;
.all-price {
display: flex;
align-items: center;
margin-right: 20rpx;
.price {
color: #20B128;
display: table-cell;
vertical-align: bottom;
font-weight: bold;
}
}
}
2024-04-25 18:02:30 +08:00
}
</style>