449 lines
9.2 KiB
Vue
449 lines
9.2 KiB
Vue
<script setup lang="ts">
|
|
import recommend from '../recommend/recommend.vue'
|
|
import {onMounted, ref,computed} from 'vue'
|
|
|
|
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())}`
|
|
});
|
|
};
|
|
</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> |