feat(custom): build
This commit is contained in:
@@ -1,106 +1,200 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="list.length > 0">
|
||||
<nut-swipe v-for="(item, index) in list" :key="index">
|
||||
<view class="item">
|
||||
<nut-checkbox v-model="item.checkbox" @click="select">{{
|
||||
item.ID
|
||||
}}</nut-checkbox>
|
||||
<image
|
||||
src="https://s2.loli.net/2023/08/16/6KgdSQa4WRoT3sz.jpg"
|
||||
style="width: 100px; height: 100px"
|
||||
/>
|
||||
<view class="text">
|
||||
<view>{{ item.name }}</view>
|
||||
<view class="bom">
|
||||
<nut-price
|
||||
:price="item.number"
|
||||
size="normal"
|
||||
:need-symbol="false"
|
||||
/>
|
||||
<nut-cell-group v-for="(itm, idx) in list" :key="idx">
|
||||
<nut-cell>
|
||||
<nut-checkbox
|
||||
v-model="itm.state.checkbox"
|
||||
:indeterminate="itm.state.indeterminate"
|
||||
@change="(val: boolean) => changeBoxAll(val,idx)"
|
||||
>{{ itm.StoreName }}
|
||||
</nut-checkbox>
|
||||
</nut-cell>
|
||||
<nut-checkbox-group
|
||||
v-model="itm.state.checkboxgroup"
|
||||
:ref="(el) => getGroup(el, idx)"
|
||||
@change="(label) => changeBox(label, itm)"
|
||||
>
|
||||
<nut-cell v-for="(item, idx1) in itm.Goods" :key="idx1">
|
||||
<nut-checkbox :label="item.gid" style="width: 10%"></nut-checkbox>
|
||||
<view class="box">
|
||||
<view class="box-left">
|
||||
<img class="cover" :src="item.cover" alt="" />
|
||||
<view class="center">
|
||||
<view>{{ item.name }}</view>
|
||||
<view class="price">
|
||||
<view>{{ item.price }} 元</view>
|
||||
<view>{{ item.exchange }} 积分</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<nut-input-number
|
||||
v-model="item.number"
|
||||
readonly
|
||||
@add="select()"
|
||||
@reduce="select()"
|
||||
v-model="item.count"
|
||||
:min="-1"
|
||||
@add.stop="() => onAdd(item)"
|
||||
@reduce.stop="() => onReduce(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template #right>
|
||||
<nut-button shape="square" style="height: 100%" type="danger"
|
||||
>删除</nut-button
|
||||
>
|
||||
</template>
|
||||
</nut-swipe>
|
||||
</nut-cell>
|
||||
</nut-checkbox-group>
|
||||
</nut-cell-group>
|
||||
</view>
|
||||
<nut-empty v-else description="购物车暂无数据">
|
||||
<!-- <nut-button icon="refresh" type="primary" @click="toPage()">去兑换商品</nut-button>-->
|
||||
</nut-empty>
|
||||
<nut-empty v-else description="购物车暂无数据"></nut-empty>
|
||||
<view>
|
||||
<view style="height: 100px"></view>
|
||||
<view style="height: 100rpx"></view>
|
||||
</view>
|
||||
<view class="bottom-box">
|
||||
<view class="left">
|
||||
<nut-checkbox v-model="selectAllVal" @change="selectAll"
|
||||
>全选</nut-checkbox
|
||||
>
|
||||
<view class="text-box">
|
||||
总计积分：
|
||||
<nut-price
|
||||
v-model:price="localCount"
|
||||
size="normal"
|
||||
:need-symbol="false"
|
||||
/>
|
||||
<!-- <nut-checkbox v-model="selectAllVal" @change="selectAll"
|
||||
>全选
|
||||
</nut-checkbox> -->
|
||||
<view>
|
||||
<view class="text-box">
|
||||
总金额：
|
||||
<nut-price
|
||||
v-model:price="localCount.price"
|
||||
size="normal"
|
||||
:need-symbol="false"
|
||||
/>
|
||||
</view>
|
||||
<view class="text-box">
|
||||
总积分：
|
||||
<nut-price
|
||||
v-model:price="localCount.exchange"
|
||||
size="normal"
|
||||
:need-symbol="false"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<nut-button type="primary" @click="sub">去结算</nut-button>
|
||||
</view>
|
||||
<!-- 支付 -->
|
||||
<Pay
|
||||
:is-show-pay="isShowPay"
|
||||
:interval="true"
|
||||
v-model:jfInfo="orderData"
|
||||
@closePay="closePay"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { nextTick, ref } from "vue";
|
||||
import Taro from "@tarojs/taro";
|
||||
import { getCartList } from "@/api/goods";
|
||||
import { addCart, getAllCart } from "@/api/cart";
|
||||
import { createActiveOrder } from "@/api/goods";
|
||||
import Pay from "@/components/Pay.vue";
|
||||
|
||||
const selectAllVal = ref(false);
|
||||
interface CardList {
|
||||
name: string;
|
||||
cover: string;
|
||||
bid: string;
|
||||
gid: string;
|
||||
number: string;
|
||||
price: number;
|
||||
exchange: number;
|
||||
}
|
||||
|
||||
const list = ref([]);
|
||||
// const selectAllVal = ref(false);
|
||||
|
||||
const localCount = ref(0);
|
||||
interface List {
|
||||
StoreName: string;
|
||||
Goods: CardList[];
|
||||
state: {
|
||||
checkbox: boolean;
|
||||
indeterminate: boolean;
|
||||
checkboxgroup: string[];
|
||||
};
|
||||
}
|
||||
|
||||
const list = ref<List[]>([]);
|
||||
|
||||
const groupList = ref(new Map());
|
||||
|
||||
const localCount = ref({
|
||||
price: 0,
|
||||
exchange: 0,
|
||||
});
|
||||
|
||||
const getGroup = (el: any, idx: number) => {
|
||||
return groupList.value.set(idx, el);
|
||||
};
|
||||
|
||||
const changeBoxAll = async (value: boolean, idx: number) => {
|
||||
await nextTick(() => {
|
||||
groupList.value.get(idx).toggleAll(value);
|
||||
});
|
||||
};
|
||||
|
||||
const changeBox = (label: string[], item: any) => {
|
||||
localCount.value = {
|
||||
price: 0,
|
||||
exchange: 0,
|
||||
};
|
||||
|
||||
item["Count"] = {
|
||||
priceCount: 0,
|
||||
exchangeCount: 0,
|
||||
};
|
||||
|
||||
if (label.length > 0) {
|
||||
label.forEach((id: string) => {
|
||||
item.Goods.forEach((itm: any) => {
|
||||
if (itm.gid === id) {
|
||||
item["Count"].priceCount += itm.price * itm.number;
|
||||
item["Count"].exchangeCount += itm.exchange * itm.number;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
list.value.forEach((item: any) => {
|
||||
localCount.value.price += item.Count.priceCount;
|
||||
localCount.value.exchange += item.Count.exchangeCount;
|
||||
});
|
||||
|
||||
if (label.length === item.Goods.length) {
|
||||
item.state.checkbox = true;
|
||||
item.state.indeterminate = false;
|
||||
} else if (label.length && label.length < item.Goods.length) {
|
||||
item.state.indeterminate = true;
|
||||
} else {
|
||||
item.state.indeterminate = false;
|
||||
item.state.checkbox = false;
|
||||
}
|
||||
};
|
||||
|
||||
Taro.useDidShow(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
const select = () => {
|
||||
localCount.value = 0;
|
||||
list.value.forEach((item: any) => {
|
||||
if (item.checkbox) {
|
||||
setTimeout(() => {
|
||||
item.countNum = Number(item.number) * Number(item.count);
|
||||
localCount.value += item.countNum;
|
||||
console.log(localCount.value);
|
||||
}, 1);
|
||||
selectAllVal.value = true;
|
||||
} else {
|
||||
selectAllVal.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// const selectAll = () => {
|
||||
// localCount.value = {
|
||||
// price: 0,
|
||||
// exchange: 0,
|
||||
// };
|
||||
// groupList.value.forEach((item: any) => {
|
||||
// item.toggleAll(selectAllVal.value);
|
||||
// });
|
||||
// list.value.forEach((item: any) => {
|
||||
// if (item.state.checkboxgroup.length > 0) {
|
||||
// item.Goods.forEach((itm: any) => {
|
||||
// localCount.value.price += itm.price;
|
||||
// localCount.value.exchange += itm.exchange;
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// };
|
||||
|
||||
const selectAll = () => {
|
||||
localCount.value = 0;
|
||||
list.value.forEach((item: any) => {
|
||||
item.checkbox = selectAllVal.value;
|
||||
});
|
||||
select();
|
||||
console.log(list.value);
|
||||
};
|
||||
const isShowPay = ref(false);
|
||||
const orderData = ref<any>([]);
|
||||
|
||||
const sub = () => {
|
||||
const arr = list.value.filter((item: any) => item.checkbox);
|
||||
const sub = async () => {
|
||||
const arr: any = list.value.filter(
|
||||
(item: any) => item.state.checkboxgroup.length > 0
|
||||
);
|
||||
if (arr.length === 0) {
|
||||
Taro.showToast({
|
||||
title: "请选择商品",
|
||||
@@ -109,27 +203,89 @@ const sub = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data: res } = await createActiveOrder({
|
||||
Bid: arr.map((item: any) => item.StoreBid),
|
||||
});
|
||||
if (res.oid) {
|
||||
orderData.value = res?.oid;
|
||||
isShowPay.value = true;
|
||||
}
|
||||
} catch (e) {
|
||||
Taro.showToast({
|
||||
title: e.msg,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const closePay = async (val: boolean) => {
|
||||
isShowPay.value = val;
|
||||
orderData.value = [];
|
||||
await getList();
|
||||
Taro.navigateTo({
|
||||
url: "/pages/goods/order_create/index",
|
||||
url: "/pages/users/order_list/index?type=0",
|
||||
});
|
||||
};
|
||||
|
||||
const getList = async () => {
|
||||
const res = await getCartList();
|
||||
list.value = res.data.data.Goods.map((item: any) => {
|
||||
return {
|
||||
localCount.value = {
|
||||
price: 0,
|
||||
exchange: 0,
|
||||
};
|
||||
const res = await getAllCart();
|
||||
list.value = res.data.data || [];
|
||||
if (list.value.length > 0) {
|
||||
list.value = list.value.map((item: any) => ({
|
||||
...item,
|
||||
count: 1,
|
||||
countNum: item.number,
|
||||
checkbox: false,
|
||||
};
|
||||
});
|
||||
Goods: item.Goods.sort(
|
||||
(a: CardList, b: CardList) => Number(a.gid) - Number(b.gid)
|
||||
),
|
||||
state: {
|
||||
indeterminate: false,
|
||||
checkbox: false,
|
||||
checkboxgroup: [],
|
||||
},
|
||||
Count: {
|
||||
priceCount: 0,
|
||||
exchangeCount: 0,
|
||||
},
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const toPage = () => {
|
||||
Taro.switchTab({
|
||||
url: "/pages/index/index",
|
||||
});
|
||||
// const toPage = () => {
|
||||
// Taro.switchTab({
|
||||
// url: "/pages/index/index",
|
||||
// });
|
||||
// };
|
||||
|
||||
const onAdd = async (item: CardList) => {
|
||||
await add_cart(item, Number(item.number) + 1);
|
||||
};
|
||||
|
||||
const onReduce = async (item: CardList) => {
|
||||
await add_cart(item, Number(item.number) - 1);
|
||||
};
|
||||
|
||||
const add_cart = async (item: CardList, num: number = 1) => {
|
||||
try {
|
||||
const res = await addCart({
|
||||
Bid: item.bid,
|
||||
Gid: item.gid,
|
||||
Number: Number(num),
|
||||
});
|
||||
Taro.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
});
|
||||
await getList();
|
||||
} catch (e) {
|
||||
Taro.showToast({
|
||||
title: e.msg,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -141,33 +297,34 @@ const toPage = () => {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
justify-content: space-between;
|
||||
.box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
image {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 60%;
|
||||
margin-left: 20px;
|
||||
.box-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.bom {
|
||||
.cover {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
margin-right: 15rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -179,20 +336,21 @@ const toPage = () => {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
z-index: 999;
|
||||
height: 100rpx;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
box-shadow: 100px 104px 288px rgba(0, 0, 0, 0.01);
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 100rpx 104rpx 288rpx rgba(0, 0, 0, 0.01);
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.text-box {
|
||||
margin-left: 10px;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user