553 lines
12 KiB
Vue
553 lines
12 KiB
Vue
<script setup lang="ts">
|
||
import recommend from '../recommend/recommend.vue'
|
||
import {onMounted, ref,computed} from 'vue'
|
||
import { apiImageUrl } from '../../API/api'
|
||
|
||
const quantity=ref(1)
|
||
const incrementQuantity = (index) => {
|
||
if (cartItems.value[index].quantity < 9) {
|
||
cartItems.value[index].quantity++;
|
||
}
|
||
};
|
||
|
||
const decrementQuantity = (index) => {
|
||
if (cartItems.value[index].quantity > 1) {
|
||
cartItems.value[index].quantity--;
|
||
}
|
||
};
|
||
const cartItems=ref(uni.getStorageSync("cartItems"));
|
||
console.log("购物车order页面");
|
||
console.log(cartItems.value);
|
||
|
||
const deleteCard = (itemId) => {
|
||
|
||
uni.getStorage({
|
||
key: 'cartItems',
|
||
success: function (res) {
|
||
let cartItems = res.data;
|
||
|
||
console.log('原始购物车数据:', cartItems);
|
||
console.log('尝试删除的 itemId:', itemId.id);
|
||
|
||
|
||
const updatedCartItems = cartItems.filter(item => item.id !== itemId.id);
|
||
|
||
console.log('更新后的购物车数据:', updatedCartItems);
|
||
|
||
uni.setStorage({
|
||
key: 'cartItems',
|
||
data: updatedCartItems,
|
||
success: function () {
|
||
console.log('删除成功');
|
||
uni.reLaunch({ url: '/pages/order/order' });
|
||
},
|
||
fail: function (err) {
|
||
console.log('删除失败：' + err);
|
||
}
|
||
});
|
||
},
|
||
fail: function (err) {
|
||
console.log('获取购物车数据失败：' + err);
|
||
}
|
||
});
|
||
};
|
||
|
||
// 计算总金额
|
||
const totalAmount = computed(() => {
|
||
return cartItems.value.reduce((total, item) => {
|
||
return total + (item.dishesPrice * item.quantity);
|
||
}, 0);
|
||
});
|
||
|
||
// const account = () => {
|
||
// console.log('Total amount to pay:', totalAmount.value);
|
||
|
||
// uni.navigateTo({
|
||
// url: `/pages/account/account?totalAmount=${encodeURIComponent(totalAmount.value.toString())}`
|
||
// });
|
||
// };
|
||
|
||
const account = () => {
|
||
let businessid = uni.getStorageSync('businessItem') || '1830063677349658625';
|
||
// const cartItems = uni.getStorageSync('cartItem') || [];
|
||
// const totalAmount = computed(() => {
|
||
// return cartItems.reduce((total, item) => {
|
||
// return total + (item.dishesPrice * item.quantity);
|
||
// }, 0);
|
||
// });
|
||
// 构建 orderDetailAddRequest 数组
|
||
const orderDetails = cartItems.value.map(item => ({
|
||
attributeNames: "小份", // 假设每个商品都有一个属性名
|
||
dishesId: item.id,
|
||
quantity: item.quantity
|
||
}));
|
||
|
||
const data = {
|
||
businessId: String(businessid),
|
||
notes: "不要花生",
|
||
orderDetailAddRequest: orderDetails,
|
||
payMethod: 0,
|
||
phone: "15946398466",
|
||
pickupMethod: 0,
|
||
pickupTime: "",
|
||
totalPrice: totalAmount.value,
|
||
userName: "沙箱账号"
|
||
}
|
||
data.businessId = String(data.businessId)
|
||
uni.request({
|
||
url: apiImageUrl + '/api/orders/add',
|
||
method: 'POST',
|
||
data: data,
|
||
header: {
|
||
'cookie': uni.getStorageSync("cookie") || ''
|
||
},
|
||
success(res) {
|
||
console.log(data);
|
||
console.log('Success:', res.data.data);
|
||
const orderId = res.data.data;
|
||
createPayment(orderId);
|
||
//uni.setStorageSync('orderInfo', res.data);
|
||
// uni.navigateTo({
|
||
// url: '/pages/orderSettlement/orderSettlement'
|
||
// });
|
||
|
||
},
|
||
fail() {
|
||
console.error('Error:', '请求失败');
|
||
}
|
||
});
|
||
};
|
||
|
||
|
||
const createPayment = (orderId) => {
|
||
console.log('Total amount to pay:', totalAmount.value);
|
||
my.request({
|
||
url: apiImageUrl + '/api/Alipay/payment/create',
|
||
method: 'GET',
|
||
data: {
|
||
id: orderId
|
||
},
|
||
header: {
|
||
'Content-Type': 'application/json', // 确保设置正确的 Content-Type
|
||
'cookie': uni.getStorageSync("cookie") || ''
|
||
},
|
||
success: function (result) {
|
||
console.log(result);
|
||
console.log(result.data.data);
|
||
uni.setStorageSync("tradeNo",result.data.data)
|
||
my.tradePay({
|
||
tradeNO: result.data.data,
|
||
success: (res) => {
|
||
console.log('成功调用')
|
||
console.log(res);
|
||
console.log(res.resultCode);
|
||
if(res.resultCode==6001){
|
||
console.log("我是6001");
|
||
uni.setStorageSync("notPay",orderId);
|
||
uni.navigateTo({
|
||
url: '/pages/goToPay/goToPay'
|
||
});
|
||
}
|
||
else if(res.resultCode==9000){
|
||
uni.setStorageSync('orderId', orderId);
|
||
uni.navigateTo({
|
||
url: '/pages/testFive/testFive'
|
||
});
|
||
}
|
||
},
|
||
fail: (res) => {
|
||
my.alert({
|
||
content: JSON.stringify(res),
|
||
})
|
||
console.log('失败');
|
||
console.log(res);
|
||
}
|
||
});
|
||
}
|
||
})
|
||
// uni.navigateTo({
|
||
// url: `/pages/account/account?totalAmount=${encodeURIComponent(totalAmount.value.toString())}`
|
||
// });
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<scroll-view scroll-y class="scroll-view">
|
||
|
||
<template v-if="true">
|
||
|
||
<view class="cart-list" v-if="true">
|
||
|
||
<uni-swipe-action>
|
||
|
||
<uni-swipe-action-item v-for="(item,index) in cartItems" :key="index" class="cart-swipe">
|
||
|
||
<view class="goods">
|
||
|
||
<image class="checkbox" src="../../static/small/selected.png"/>
|
||
|
||
<navigator
|
||
:url="`/pages/goods/goods?id=1435025`"
|
||
hover-class="none"
|
||
class="navigator"
|
||
>
|
||
<image
|
||
mode="aspectFill"
|
||
class="picture"
|
||
:src="item.dishesImage"
|
||
></image>
|
||
<view class="meta">
|
||
<view class="name ellipsis">{{item.dishesName}}</view>
|
||
<view class="attrsText ellipsis">大碗加麻加辣</view>
|
||
<view class="price">￥{{item.dishesPrice}}</view>
|
||
</view>
|
||
</navigator>
|
||
|
||
<view class="count">
|
||
<view class="jia" @click="decrementQuantity(index)">-</view>
|
||
<text class="quantity-value">{{ item.quantity }}</text>
|
||
<view class="jian" @click="incrementQuantity(index)">+</view>
|
||
</view>
|
||
</view>
|
||
|
||
<template #right>
|
||
<view class="cart-swipe-right">
|
||
<button class="button delete-button" @click="deleteCard(item)">删除</button>
|
||
</view>
|
||
</template>
|
||
</uni-swipe-action-item>
|
||
</uni-swipe-action>
|
||
</view>
|
||
|
||
<view class="cart-blank" v-else>
|
||
<image src="/static/images/blank_cart.png" class="image" />
|
||
<text class="text">购物车还是空的，快来挑选好货吧</text>
|
||
<navigator open-type="switchTab" url="/pages/index/index" hover-class="none">
|
||
<button class="button">去首页看看</button>
|
||
</navigator>
|
||
</view>
|
||
|
||
<view class="toolbar">
|
||
<text class="iconfont">全选</text>
|
||
<text class="text">合计:</text>
|
||
<text class="amount">￥{{totalAmount}}</text>
|
||
<view class="button-grounp">
|
||
<view class="button payment-button" :class="{ disabled: true }" @click="account"> 去结算 </view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<view class="login-blank" v-else>
|
||
<text class="text">登录后可查看购物车中的商品</text>
|
||
<navigator url="/pages/login/login" hover-class="none">
|
||
<button class="button">去登录</button>
|
||
</navigator>
|
||
</view>
|
||
<view class="priceTitle">
|
||
<view class="meta">
|
||
<text class="symbol">热门推荐</text>
|
||
</view>
|
||
</view>
|
||
|
||
<recommend></recommend>
|
||
|
||
<view class="toolbar-height"></view>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<style lang="scss">
|
||
@font-face {
|
||
font-family: 'iconfont';
|
||
src: url('//at.alicdn.com/t/c/font_4635288_3w0kb9g7rgt.woff2?t=1722085167498') format('woff2'),
|
||
url('//at.alicdn.com/t/c/font_4635288_3w0kb9g7rgt.woff?t=1722085167498') format('woff'),
|
||
url('//at.alicdn.com/t/c/font_4635288_3w0kb9g7rgt.ttf?t=1722085167498') format('truetype');
|
||
}
|
||
|
||
:host {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
background-color: #f7f7f8;
|
||
}
|
||
|
||
.scroll-view {
|
||
flex: 1;
|
||
}
|
||
|
||
.cart-list {
|
||
margin: 0 auto;
|
||
padding: 0 20rpx;
|
||
|
||
.goods {
|
||
display: flex;
|
||
padding: 20rpx 2.2rem 20rpx 1.2rem;
|
||
border-radius: 10rpx;
|
||
background-color: #fff;
|
||
position: relative;
|
||
|
||
.navigator {
|
||
display: flex;
|
||
}
|
||
|
||
.checkbox {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-top: 0.6rem;
|
||
|
||
&::before {
|
||
font-family: 'erabbit' !important;
|
||
font-size: 40rpx;
|
||
color: #444;
|
||
}
|
||
|
||
&.checked::before {
|
||
color: #4095e5;
|
||
}
|
||
}
|
||
|
||
.picture {
|
||
width: 170rpx;
|
||
height: 170rpx;
|
||
}
|
||
|
||
.meta {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.name {
|
||
height: 72rpx;
|
||
font-size: 26rpx;
|
||
color: #444;
|
||
}
|
||
|
||
.attrsText {
|
||
line-height: 1.8;
|
||
padding: 0 15rpx;
|
||
font-size: 24rpx;
|
||
align-self: flex-start;
|
||
border-radius: 4rpx;
|
||
color: #888;
|
||
background-color: #f7f7f8;
|
||
}
|
||
|
||
.price {
|
||
line-height: 1;
|
||
font-size: 26rpx;
|
||
color: #444;
|
||
margin-bottom: 2rpx;
|
||
color: #cf4444;
|
||
|
||
&::before {
|
||
content: '￥';
|
||
font-size: 80%;
|
||
}
|
||
}
|
||
|
||
.count {
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
right: 5rpx;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 220rpx;
|
||
height: 48rpx;
|
||
|
||
.text {
|
||
height: 100%;
|
||
padding: 0 20rpx;
|
||
font-size: 32rpx;
|
||
color: #444;
|
||
}
|
||
|
||
.input {
|
||
height: 100%;
|
||
text-align: center;
|
||
border-radius: 4rpx;
|
||
font-size: 24rpx;
|
||
color: #444;
|
||
background-color: #f6f6f6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cart-swipe {
|
||
display: block;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.cart-swipe-right {
|
||
display: flex;
|
||
height: 100%;
|
||
|
||
.button {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
line-height: 1.5;
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.delete-button {
|
||
background-color: #cf4444;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cart-blank,
|
||
.login-blank {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
height: 60vh;
|
||
.image {
|
||
width: 400rpx;
|
||
height: 281rpx;
|
||
}
|
||
.text {
|
||
color: #444;
|
||
font-size: 26rpx;
|
||
margin: 20rpx 0;
|
||
}
|
||
.button {
|
||
width: 240rpx !important;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
margin-top: 20rpx;
|
||
font-size: 26rpx;
|
||
border-radius: 60rpx;
|
||
color: #fff;
|
||
background-color: #4095e5;
|
||
}
|
||
}
|
||
|
||
|
||
.toolbar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: var(--window-bottom);
|
||
z-index: 1;
|
||
|
||
height: 100rpx;
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-top: 1rpx solid #ededed;
|
||
border-bottom: 1rpx solid #ededed;
|
||
background-color: #fff;
|
||
box-sizing: content-box;
|
||
|
||
.all {
|
||
margin-left: 25rpx;
|
||
font-size: 14px;
|
||
color: #444;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.all::before {
|
||
font-family: 'erabbit' !important;
|
||
content: '\e6cd';
|
||
font-size: 40rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.checked::before {
|
||
content: '\e6cc';
|
||
color: #4095e5;
|
||
}
|
||
|
||
|
||
|
||
.amount {
|
||
font-size: 20px;
|
||
color: #cf4444;
|
||
|
||
.decimal {
|
||
font-size: 12px;
|
||
}
|
||
|
||
&::before {
|
||
content: '￥';
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
.button-grounp {
|
||
margin-left: auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
font-size: 13px;
|
||
color: #fff;
|
||
|
||
.button {
|
||
width: 240rpx;
|
||
margin: 0 10rpx;
|
||
border-radius: 72rpx;
|
||
}
|
||
|
||
.payment-button {
|
||
background-color: #4095e5;
|
||
|
||
&.disabled {
|
||
//opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.toolbar-height {
|
||
height: 100rpx;
|
||
}
|
||
.priceTitle {
|
||
width: 100%;
|
||
height: 50px;
|
||
background-color: #4095e5;
|
||
font-size: 20px;
|
||
color: #fff;
|
||
padding-left: 5px;
|
||
line-height: 50px;
|
||
}
|
||
.iconfont {
|
||
margin:auto 0;
|
||
font-size: 20px;
|
||
|
||
|
||
}
|
||
.jia,
|
||
.jian {
|
||
background-color: #fff;
|
||
padding: 3px 5px 3px 5px;
|
||
border: 1px solid #999;
|
||
|
||
}
|
||
.quantity-value {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin: 0 20rpx;
|
||
}
|
||
.iconfont {
|
||
margin-right: 15px;
|
||
}
|
||
</style> |