342 lines
7.7 KiB
Vue
342 lines
7.7 KiB
Vue
<template>
|
|
<nut-noticebar v-if="!audit" :text="cart_txt" :background="`rgba(251, 248, 220, 1)`"
|
|
:custom-color="`#D9500B`"></nut-noticebar>
|
|
<nut-noticebar v-else text="各位员工选定商品后统一给仓库管理员处理" :background="`rgba(251, 248, 220, 1)`"
|
|
:custom-color="`#D9500B`"></nut-noticebar>
|
|
|
|
|
|
<view class="content">
|
|
<view class="cart-goods-list">
|
|
<nut-empty v-if="goods_list.length === 0" description="你还没有添加商品哦">
|
|
<template #image>
|
|
<image src="@/static/empty.png" />
|
|
</template>
|
|
</nut-empty>
|
|
|
|
<nut-checkbox-group v-model="selectedGoodsIds">
|
|
<view class="cart-goods" v-for="(item, idx) in goods_list" :name="String(item.goods_id)" :key="idx">
|
|
<nut-checkbox :label="item.goods_id" />
|
|
<image class="goods-img" :src="item.goods_house.image[0]?.file_path" mode="scaleToFill"
|
|
@click="navigateTo('/pages/mall/item/index?id=' + item.goods_id)" />
|
|
<view class="middle" @click="navigateTo('/pages/mall/item/index?id=' + item.goods_id)">
|
|
<view class="middle-header">
|
|
<nut-tag custom-color="#1a1a1a">{{ item.goods_house?.degree?.degree_name }}</nut-tag>
|
|
<text class="title">{{ item.goods_house?.goods_name }}</text>
|
|
</view>
|
|
<nut-price :price="item.goods_house?.goods_price" :need-symbol="true" />
|
|
<view class="middle-footer" @click.stop>
|
|
<view class="countdown">
|
|
<nut-countdown :end-time="item.deadline_time * 1000"></nut-countdown>
|
|
<text class="t">自动移除购物车</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-del-btn" @click="confirmDel(item.goods_id)">
|
|
<nut-icon name="del2" size="24"></nut-icon>
|
|
</view>
|
|
</view>
|
|
</nut-checkbox-group>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fixed_footer" v-if="!audit">
|
|
<view>
|
|
<nut-checkbox v-model="toggle_all_val" @change="toggleAll()">全选</nut-checkbox>
|
|
</view>
|
|
<view style="display: flex; flex-direction: row; gap: 10px">
|
|
<view class="price">
|
|
<text v-if="selectedGoodsIds.length > 0">{{ selectedGoodsIds.length }}件 </text>
|
|
<text>合计:</text>
|
|
<nut-price :price="total_price" size="large" :need-symbol="true" />
|
|
</view>
|
|
<nut-button type="primary" @click="submitOrder()">立即下单</nut-button>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="fixed_footer" v-else>
|
|
<view>
|
|
<nut-checkbox v-model="toggle_all_val" @change="toggleAll()">全选</nut-checkbox>
|
|
</view>
|
|
<view style="display: flex; flex-direction: row; gap: 10px">
|
|
<view class="price">
|
|
<text v-if="selectedGoodsIds.length > 0">{{ selectedGoodsIds.length }}件 </text>
|
|
<text>合计:</text>
|
|
<nut-price :price="total_price" size="large" :need-symbol="true" />
|
|
</view>
|
|
<nut-button type="primary" @click="submitOrderGL()">立即下单</nut-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
computed,
|
|
onMounted,
|
|
reactive,
|
|
ref
|
|
} from 'vue';
|
|
import {
|
|
onLoad,
|
|
onShow,
|
|
onHide
|
|
} from '@dcloudio/uni-app';
|
|
import {
|
|
fetchDelCart,
|
|
fetchCartList
|
|
} from '@/api/goods';
|
|
import {
|
|
fetchConfig
|
|
} from '@/api/index';
|
|
import {
|
|
navigateTo
|
|
} from '@/utils/helper';
|
|
|
|
|
|
const audit = ref(true);
|
|
const selectedGoodsIds = ref([]);
|
|
const goods_cart_ids = ref([]);
|
|
const cart_txt = ref('')
|
|
const goods_list = reactive([]);
|
|
const toggle_all_val = ref(false);
|
|
const confirmDel = id => {
|
|
uni.showModal({
|
|
content: '确定要删除吗？',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
delGoodsCart(id);
|
|
}
|
|
},
|
|
});
|
|
};
|
|
const delGoodsCart = id => {
|
|
fetchDelCart(id).then(res => {
|
|
let tmp_goods_list = goods_list.filter(item => item.goods_id !== id);
|
|
goods_list.length = 0;
|
|
Object.assign(goods_list, tmp_goods_list);
|
|
uni.setTabBarBadge({
|
|
index: 1,
|
|
text: goods_list.length.toString()
|
|
})
|
|
});
|
|
};
|
|
const toggleAll = () => {
|
|
let goods_ids = goods_list.reduce((acc, item) => {
|
|
if ('goods_id' in item) {
|
|
acc.push(item.goods_id);
|
|
}
|
|
return acc;
|
|
}, []);
|
|
if (toggle_all_val.value === true) {
|
|
selectedGoodsIds.value = goods_ids;
|
|
} else {
|
|
selectedGoodsIds.value.length = 0;
|
|
}
|
|
|
|
|
|
};
|
|
|
|
const submitOrderGL = () =>{
|
|
uni.showToast({
|
|
title: '仓管已收到清单',
|
|
icon: 'none',
|
|
});
|
|
return;
|
|
}
|
|
|
|
|
|
const submitOrder = () => {
|
|
if (selectedGoodsIds.value.length === 0) {
|
|
uni.showToast({
|
|
title: '请选择商品',
|
|
icon: 'none',
|
|
});
|
|
return;
|
|
}
|
|
navigateTo('/pages/order/preview/index?ids=' + selectedGoodsIds.value + '&from=cart');
|
|
};
|
|
|
|
|
|
|
|
const init = () => {
|
|
console.log("手机购物车初始化");
|
|
|
|
// 加载配置
|
|
fetchConfig().then(res => {
|
|
audit.value = (res.audit === "true");
|
|
console.log('audit', audit.value);
|
|
console.log(res.cart_txt);
|
|
cart_txt.value = res.cart_txt
|
|
})
|
|
|
|
// 进来购物车就清空已经选择的
|
|
selectedGoodsIds.value = [];
|
|
toggle_all_val.value = false;
|
|
console.log("手机购物车选中商品ids", selectedGoodsIds.value);
|
|
goods_list.length = 0;
|
|
fetchCartList().then(res => {
|
|
Object.assign(goods_list, res.list);
|
|
uni.setTabBarBadge({
|
|
index: 1,
|
|
text: goods_list.length.toString()
|
|
})
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
// 进入购物车就清空已经选择的
|
|
// selectedGoodsIds.value = [];
|
|
// toggle_all_val.value = false;
|
|
|
|
// console.log('1111', selectedGoodsIds.value);
|
|
init();
|
|
});
|
|
|
|
onShow(() => {
|
|
console.log("onshow");
|
|
init();
|
|
});
|
|
|
|
// 计算总价格
|
|
const total_price = computed(() => {
|
|
let total_price = 0;
|
|
console.log('goods_list', goods_list);
|
|
goods_list.forEach((item, idx) => {
|
|
if (selectedGoodsIds.value.includes(item.goods_id)) {
|
|
total_price = parseFloat(total_price) + parseFloat(item.goods_house.goods_price);
|
|
}
|
|
});
|
|
return total_price;
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* align-items: center; */
|
|
// justify-content: center;
|
|
background-color: #f2f3f5;
|
|
padding: 20rpx;
|
|
// height: calc(100% - 140rpx);
|
|
}
|
|
|
|
.fixed_footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 100rpx;
|
|
background: #fff;
|
|
width: calc(100% - 40rpx);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 0 auto;
|
|
padding: 10rpx 20rpx;
|
|
|
|
.price {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.cart-goods-list {
|
|
background: #fff;
|
|
display: flex;
|
|
height: calc(100vh - 230rpx);
|
|
gap: 30rpx;
|
|
flex-direction: column;
|
|
border-radius: 10rpx;
|
|
--nut-checkbox-label-margin-left: 0rpx;
|
|
--nut-checkbox-margin-right: 0rpx;
|
|
overflow-y: auto;
|
|
// padding-bottom: 20rpx;
|
|
|
|
.cart-goods {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30rpx;
|
|
width: calc(100% - 40rpx);
|
|
padding: 20rpx;
|
|
background: #fff;
|
|
margin-top: 20rpx;
|
|
|
|
.goods-img {
|
|
flex-shrink: 0;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.middle {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 5rpx;
|
|
width: 100%;
|
|
|
|
.middle-header {
|
|
display: flex;
|
|
gap: 10rpx;
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
.middle-footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 20rpx;
|
|
|
|
.countdown {
|
|
display: flex;
|
|
align-items: center;
|
|
--nut-countdown-color: #000;
|
|
--nut-countdown-font-size: 26rpx;
|
|
|
|
.t {
|
|
color: #000;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 删除按钮
|
|
.goods-del-btn {
|
|
// width: 140rpx;
|
|
height: 100%;
|
|
color: #fa2c19;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.touch-dom {
|
|
width: 100rpx;
|
|
// height: 100rpx;
|
|
background: #f52222;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style> |