提交
This commit is contained in:
Ling53666
162
甲情_甲意/miniprogram/pages/gouwuche/gouwuche.acss
Normal file
162
甲情_甲意/miniprogram/pages/gouwuche/gouwuche.acss
Normal file
@ -0,0 +1,162 @@
|
||||
.box {
|
||||
width: 100%;
|
||||
min-height: 100vh; /* 确保容器至少占满屏幕的高度 */
|
||||
background-color: #eec2c7;
|
||||
overflow-y: auto; /* 允许竖直方向滚动 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
overflow:hidden; /* 防止溢出 */
|
||||
|
||||
}
|
||||
|
||||
.box3 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: rgba(252, 240, 240, 0.807);
|
||||
border-radius: 20px;
|
||||
margin: 5rpx;
|
||||
margin-bottom: 50px; /* 留出一些空间给底部结算栏 */
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.dianpuname{
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.dianpunamea{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.heizi{
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box5 {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
.jian{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.fenbu{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.boxd {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
border-radius: 30px;
|
||||
background-color: rgb(162, 12, 12);
|
||||
left: 570rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text1 {
|
||||
color: #ffffff;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.boxall {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.text2 {
|
||||
position: relative;
|
||||
left: 200rpx;
|
||||
}
|
||||
.text3{
|
||||
font-size:12px;
|
||||
color:#a8b0b8;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
.number{
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.beijing{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-color: white;
|
||||
font-size: 20p;
|
||||
|
||||
}
|
||||
.imagejiantou{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
.shangpinimage{
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
60
甲情_甲意/miniprogram/pages/gouwuche/gouwuche.axml
Normal file
60
甲情_甲意/miniprogram/pages/gouwuche/gouwuche.axml
Normal file
@ -0,0 +1,60 @@
|
||||
<view class="box">
|
||||
<!-- 购物车店铺 -->
|
||||
<view class="box3">
|
||||
<checkbox-group onChange="checkboxChange">
|
||||
<block a:for="{{productList}}" a:key="id">
|
||||
<view class="box1">
|
||||
<view class="dianpuname">
|
||||
<view class="dianpunamea">
|
||||
<text style="margin-left:25rpx;font-size:16px">{{item.name}}</text>
|
||||
<image class="imagejiantou" mode="scaleToFill" src="../image/jiantou.png" />
|
||||
</view>
|
||||
|
||||
<text class="text3" onTap="yichu" data-id="{{item.cartId}}">移除购物车</text>
|
||||
</view>
|
||||
<view class="heizi">
|
||||
<view class="box4">
|
||||
<!-- 给每个复选框绑定 data-index -->
|
||||
<checkbox color="red" checked="{{item.checked}}" value="{{item.cartId}}" />
|
||||
</view>
|
||||
<view class="shangpinimage">
|
||||
<image class="image" mode="scaleToFill" src="{{item.commoditiesImage}}" />
|
||||
</view>
|
||||
<view class="fenbu">
|
||||
<view class="box5">
|
||||
<view>
|
||||
<text class="text" style="font-size:20px">{{item.commoditiesName}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="text" style="font-size:15px">￥{{item.commoditiesPrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="container">
|
||||
<view class="jian">
|
||||
<view class="beijing" data-index="{{index}}" style="margin-right: 10rpx;" onTap="decreaseQuantity" >
|
||||
<text>-</text>
|
||||
</view>
|
||||
<view class="number">
|
||||
<text >{{item.quantity}}</text>
|
||||
</view>
|
||||
<view class="beijing" style="margin-left: 10rpx;"onTap="increaseQuantity" data-index="{{index}}" >
|
||||
<text >+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</checkbox-group>
|
||||
</view>
|
||||
|
||||
<!-- 底部结算栏 -->
|
||||
<view class="boxall">
|
||||
<checkbox color="red" checked="{{select_all}}" onChange="selectall"/>全选
|
||||
<text class="text2">合计：￥{{totalPrice}}</text>
|
||||
<view class="boxd" onTap="jiesuan">
|
||||
<text class="text1">结算</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
281
甲情_甲意/miniprogram/pages/gouwuche/gouwuche.js
Normal file
281
甲情_甲意/miniprogram/pages/gouwuche/gouwuche.js
Normal file
@ -0,0 +1,281 @@
|
||||
import { url } from '../request';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
id: '',
|
||||
productList: [], // 商品列表
|
||||
select_all: false,
|
||||
checkbox_productListid: '',
|
||||
totalPrice: 0,
|
||||
},
|
||||
// 计算总价
|
||||
calculateTotalPrice() {
|
||||
const totalPrice = this.data.productList
|
||||
.filter(item => item.checked) // 只计算勾选的商品
|
||||
.reduce((sum, item) => sum + item.quantity * item.commoditiesPrice, 0);
|
||||
|
||||
// 格式化总价为两位小数
|
||||
const formattedTotalPrice = totalPrice.toFixed(2);
|
||||
|
||||
// 更新 totalPrice
|
||||
this.setData({ totalPrice: formattedTotalPrice });
|
||||
},
|
||||
// 增加商品数量
|
||||
increaseQuantity(e) {
|
||||
const { index } = e.currentTarget.dataset; // 获取当前商品的索引
|
||||
const updatedProductList = [...this.data.productList];
|
||||
const item = updatedProductList[index];
|
||||
// 增加数量
|
||||
if (item.quantity < 999) {
|
||||
item.quantity += 1;
|
||||
}
|
||||
this.setData({ productList: updatedProductList });
|
||||
this.calculateTotalPrice(); // 重新计算总价
|
||||
},
|
||||
// 减少商品数量
|
||||
decreaseQuantity(e) {
|
||||
const { index } = e.currentTarget.dataset; // 获取当前商品的索引
|
||||
const updatedProductList = [...this.data.productList];
|
||||
const item = updatedProductList[index];
|
||||
// 减少数量
|
||||
if (item.quantity > 1) {
|
||||
item.quantity -= 1;
|
||||
}
|
||||
this.setData({ productList: updatedProductList });
|
||||
this.calculateTotalPrice(); // 重新计算总价
|
||||
},
|
||||
// 全选/取消全选
|
||||
selectall(e) {
|
||||
const newSelectAll = !this.data.select_all;
|
||||
const updatedProductList = this.data.productList.map(item => ({
|
||||
...item,
|
||||
checked: newSelectAll,
|
||||
}));
|
||||
|
||||
const checkbox_productListid = newSelectAll
|
||||
? updatedProductList.map(item => item.cartId).join(',')
|
||||
: '';
|
||||
|
||||
this.setData({
|
||||
productList: updatedProductList,
|
||||
select_all: newSelectAll,
|
||||
checkbox_productListid,
|
||||
});
|
||||
console.log("arr=", checkbox_productListid);
|
||||
this.calculateTotalPrice(); // 重新计算总价
|
||||
const selectedProducts = updatedProductList.filter(item => item.checked);
|
||||
this.setData({
|
||||
selectedProducts, // 存储勾选的商品信息
|
||||
});
|
||||
console.log(selectedProducts);
|
||||
},
|
||||
checkboxChange(e) {
|
||||
const { value } = e.detail; // 当前选中的值列表
|
||||
const updatedProductList = this.data.productList.map(item => ({
|
||||
...item,
|
||||
checked: value.includes(item.cartId.toString()),
|
||||
}));
|
||||
const select_all = updatedProductList.every(item => item.checked);
|
||||
this.setData({
|
||||
productList: updatedProductList,
|
||||
select_all,
|
||||
});
|
||||
this.calculateTotalPrice(); // 更新总价
|
||||
// 提取勾选的商品
|
||||
const selectedProducts = updatedProductList.filter(item => item.checked);
|
||||
this.setData({
|
||||
selectedProducts, // 存储勾选的商品信息
|
||||
});
|
||||
console.log(selectedProducts,'askldjaslkdaslkdjklas');
|
||||
},
|
||||
// 获取商品数据
|
||||
fetchProductDetails(cartItems) {
|
||||
const promises = cartItems.map((item) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
my.request({
|
||||
url: url + '/api/commodities/getById/commodities',
|
||||
method: 'GET',
|
||||
data: { id:item.cartVO.commoditiesId },
|
||||
headers: { 'content-type': 'application/json' },
|
||||
success: (res) => {
|
||||
console.log(res,'在这家');
|
||||
if (res.data.code === 0) {
|
||||
const productData = res.data.data;
|
||||
productData.cartId = item.cartVO.id; // 将 cartId 添加到商品数据中
|
||||
productData.quantity = 1; // 默认数量为 1
|
||||
productData.name = item.business.businessName;
|
||||
resolve(productData);
|
||||
} else {
|
||||
reject(`商品信息获取失败: ${res.data.message}`);
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
reject(error);
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all(promises)
|
||||
.then((productList) => {
|
||||
this.setData({ productList });
|
||||
this.calculateTotalPrice(); // 初始化总价
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('商品信息获取失败: ', error);
|
||||
my.alert({ content: '商品信息获取失败，请稍后重试' });
|
||||
});
|
||||
},
|
||||
|
||||
// 页面加载时获取商品数据
|
||||
onShow() {
|
||||
this.setData({
|
||||
select_all: false,
|
||||
selectedProducts:[],
|
||||
});
|
||||
my.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (res) => {
|
||||
const userInfo = res.data;
|
||||
if (userInfo && userInfo.cookie) {
|
||||
my.request({
|
||||
url: url + '/api/cart/selectByUserId',
|
||||
method: 'POST',
|
||||
data: {
|
||||
id: userInfo.id
|
||||
},
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
dataType: 'json',
|
||||
success: (res) => {
|
||||
console.log(res,'hhhhhhhhhhhh');
|
||||
if (res.data.code === 0) {
|
||||
console.log(res);
|
||||
const cartItems = res.data.data;
|
||||
this.fetchProductDetails(cartItems);
|
||||
} else {
|
||||
my.alert({
|
||||
content: '登录信息已过期，请重新登录',
|
||||
});
|
||||
my.navigateTo({
|
||||
url: '/pages/denglu/denglu',
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('请求失败: ', JSON.stringify(error));
|
||||
my.alert({ content: '请求失败，请稍后重试' });
|
||||
},
|
||||
});
|
||||
}
|
||||
else{
|
||||
my.alert({
|
||||
content:'您未登录，请先登录'
|
||||
})
|
||||
my.navigateTo({
|
||||
url:'/pages/denglu/denglu'
|
||||
})
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
yichu(e) {
|
||||
const cartId = e.currentTarget.dataset.id; // 获取商品的 cartId
|
||||
if (!cartId) {
|
||||
console.error('没有找到商品cartId');
|
||||
my.alert({ content: '商品ID未找到，请稍后重试' });
|
||||
return;
|
||||
}
|
||||
console.log('需要移除的商品cartId:', cartId);
|
||||
my.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (res) => {
|
||||
const userInfo = res.data;
|
||||
this.setData({
|
||||
id: userInfo.id, // 获取 id
|
||||
|
||||
});
|
||||
// 发送请求移除商品
|
||||
if (userInfo && userInfo.cookie) {
|
||||
my.request({
|
||||
url: url + '/api/cart/delete',
|
||||
method: 'POST',
|
||||
data: {
|
||||
id: cartId,
|
||||
userId: userInfo.id
|
||||
}, // 使用 cartId 作为参数
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
'Cookie': userInfo.cookie
|
||||
},
|
||||
dataType: 'json',
|
||||
success: (res) => {
|
||||
console.log(res);
|
||||
if (res.data.code === 0) {
|
||||
my.alert({ content: '成功移除商品' });
|
||||
console.log(res);
|
||||
// 更新购物车
|
||||
this.updateCartList();
|
||||
} else {
|
||||
my.alert({ content: '移除商品失败，请稍后重试' });
|
||||
console.log(res);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
// 移除后更新
|
||||
updateCartList() {
|
||||
this.setData({ select_all: false });
|
||||
my.getStorage({
|
||||
key: 'userInfo',
|
||||
success: (res) => {
|
||||
const userInfo = res.data;
|
||||
if (userInfo && userInfo.cookie) {
|
||||
my.request({
|
||||
url: url + '/api/cart/selectByUserId', // 获取最新的购物车数据
|
||||
method: 'POST',
|
||||
data: {
|
||||
id: this.data.id
|
||||
}, // 使用当前用户ID
|
||||
headers: {
|
||||
'content-type': 'application/json',
|
||||
'Cookie': userInfo.cookie
|
||||
},
|
||||
dataType: 'json',
|
||||
success: (res) => {
|
||||
if (res.data.code === 0) {
|
||||
const cartItems = res.data.data;
|
||||
this.fetchProductDetails(cartItems, userInfo.id);
|
||||
} else {
|
||||
my.alert({ content: '获取购物车数据失败，请稍后重试' });
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
console.error('请求失败: ', JSON.stringify(error));
|
||||
my.alert({ content: '请求失败，请稍后重试' });
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
jiesuan() {
|
||||
const products = this.data.selectedProducts;
|
||||
if(!products || products.length === 0){
|
||||
my.alert({
|
||||
content:'请选择商品'
|
||||
})
|
||||
}else{
|
||||
const productsStr = JSON.stringify(products)
|
||||
const prices =this.data.totalPrice
|
||||
my.navigateTo({
|
||||
url: '/pages/zhifujiemian/zhifujiemian?products='+encodeURIComponent(productsStr)+ '&prices=' + encodeURIComponent(prices)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
7
甲情_甲意/miniprogram/pages/gouwuche/gouwuche.json
Normal file
7
甲情_甲意/miniprogram/pages/gouwuche/gouwuche.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"defaultTitle": "购物车",
|
||||
"usingComponents": {
|
||||
|
||||
},
|
||||
"styleIsolation": "apply-shared"
|
||||
}
|
||||
Reference in New Issue
Block a user