liruiqiang
2 months ago
4 changed files with 436 additions and 7 deletions
-
403src/pages/cart/cart.vue
-
3src/pages/login/login.vue
-
12src/services/cart.ts
-
25src/types/cart.d.ts
@ -1,11 +1,402 @@ |
|||
<script setup lang="ts"> |
|||
// |
|||
</script> |
|||
|
|||
<template> |
|||
<view class="cart">cart</view> |
|||
<scroll-view scroll-y class="scroll-view"> |
|||
<!-- 已登录: 显示购物车 --> |
|||
<template v-if="memberStore.profile"> |
|||
<!-- 购物车列表 --> |
|||
<view class="cart-list" v-if="cartList.length"> |
|||
<!-- 优惠提示 --> |
|||
<view class="tips"> |
|||
<text class="label">满减</text> |
|||
<text class="desc">满1件, 即可享受9折优惠</text> |
|||
</view> |
|||
<!-- 滑动操作分区 --> |
|||
<view> |
|||
<!-- 滑动操作项 --> |
|||
<view v-for="item in cartList" :key="item.skuId" class="cart-swipe"> |
|||
<!-- 商品信息 --> |
|||
<view class="goods"> |
|||
<!-- 选中状态 --> |
|||
<text |
|||
@tap="onChangeSelected(item)" |
|||
class="checkbox" |
|||
:class="{ checked: item.selected }" |
|||
></text> |
|||
<navigator |
|||
:url="`/pages/goods/goods?id=${item.id}`" |
|||
hover-class="none" |
|||
class="navigator" |
|||
> |
|||
<image mode="aspectFill" class="picture" :src="item.picture"></image> |
|||
<view class="meta"> |
|||
<view class="name ellipsis">{{ item.name }}</view> |
|||
<view class="attrsText ellipsis">{{ item.attrsText }}</view> |
|||
<view class="price">{{ item.nowPrice }}</view> |
|||
</view> |
|||
</navigator> |
|||
<!-- 商品数量 --> |
|||
<view class="count"> |
|||
<vk-data-input-number-box |
|||
v-model="item.count" |
|||
:min="1" |
|||
:max="item.stock" |
|||
:index="item.skuId" |
|||
@change="onChangeCount" |
|||
/> |
|||
</view> |
|||
</view> |
|||
<!-- 右侧删除按钮 --> |
|||
<template #right> |
|||
<view class="cart-swipe-right"> |
|||
<button @tap="onDeleteCart(item.skuId)" class="button delete-button">删除</button> |
|||
</view> |
|||
</template> |
|||
</view> |
|||
</view> |
|||
</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="all" :class="{ checked: true }">全选</text> |
|||
<text class="text">合计:</text> |
|||
<text class="amount">100</text> |
|||
<view class="button-grounp"> |
|||
<view class="button payment-button" :class="{ disabled: true }"> 去结算(10) </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> |
|||
<!-- 猜你喜欢 --> |
|||
<XtxGuess ref="guessRef"></XtxGuess> |
|||
<!-- 底部占位空盒子 --> |
|||
<view class="toolbar-height"></view> |
|||
</scroll-view> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { getMemberCartAPI } from '@/services/cart' |
|||
import { useMemberStore } from '@/stores' |
|||
import type { CartItem } from '@/types/cart' |
|||
import { onShow } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue' |
|||
|
|||
// 获取会员Store |
|||
const memberStore = useMemberStore() |
|||
|
|||
// 获取购物车数据 |
|||
const cartList = ref<CartItem[]>([]) |
|||
const getMemberCartData = async () => { |
|||
const res = await getMemberCartAPI() |
|||
cartList.value = res.result |
|||
} |
|||
|
|||
// 初始化调用: 页面显示触发 |
|||
onShow(() => { |
|||
// 用户已登录才允许调用 |
|||
if (memberStore.profile) { |
|||
getMemberCartData() |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
// |
|||
// 根元素 |
|||
:host { |
|||
height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow: hidden; |
|||
background-color: #f7f7f8; |
|||
} |
|||
|
|||
// 滚动容器 |
|||
.scroll-view { |
|||
flex: 1; |
|||
} |
|||
|
|||
// 购物车列表 |
|||
.cart-list { |
|||
padding: 0 20rpx; |
|||
|
|||
// 优惠提示 |
|||
.tips { |
|||
display: flex; |
|||
align-items: center; |
|||
line-height: 1; |
|||
margin: 30rpx 10rpx; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
|
|||
.label { |
|||
color: #fff; |
|||
padding: 7rpx 15rpx 5rpx; |
|||
border-radius: 4rpx; |
|||
font-size: 24rpx; |
|||
background-color: #27ba9b; |
|||
margin-right: 10rpx; |
|||
} |
|||
} |
|||
|
|||
// 购物车商品 |
|||
.goods { |
|||
display: flex; |
|||
padding: 20rpx 20rpx 20rpx 80rpx; |
|||
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: 80rpx; |
|||
height: 100%; |
|||
|
|||
&::before { |
|||
content: '\e6cd'; |
|||
font-family: 'erabbit' !important; |
|||
font-size: 40rpx; |
|||
color: #444; |
|||
} |
|||
|
|||
&.checked::before { |
|||
content: '\e6cc'; |
|||
color: #27ba9b; |
|||
} |
|||
} |
|||
|
|||
.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: 50px; |
|||
padding: 6px; |
|||
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: #27ba9b; |
|||
} |
|||
} |
|||
|
|||
// 吸底工具栏 |
|||
.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: #27ba9b; |
|||
} |
|||
|
|||
.text { |
|||
margin-right: 8rpx; |
|||
margin-left: 32rpx; |
|||
color: #444; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.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: #27ba9b; |
|||
|
|||
&.disabled { |
|||
opacity: 0.6; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// 底部占位空盒子 |
|||
.toolbar-height { |
|||
height: 100rpx; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,25 @@ |
|||
/** 购物车类型 */ |
|||
export type CartItem = { |
|||
/** 商品 ID */ |
|||
id: string |
|||
/** SKU ID */ |
|||
skuId: string |
|||
/** 商品名称 */ |
|||
name: string |
|||
/** 图片 */ |
|||
picture: string |
|||
/** 数量 */ |
|||
count: number |
|||
/** 加入时价格 */ |
|||
price: number |
|||
/** 当前的价格 */ |
|||
nowPrice: number |
|||
/** 库存 */ |
|||
stock: number |
|||
/** 是否选中 */ |
|||
selected: boolean |
|||
/** 属性文字 */ |
|||
attrsText: string |
|||
/** 是否为有效商品 */ |
|||
isEffective: boolean |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue