liruiqiang
2 months ago
7 changed files with 597 additions and 414 deletions
-
52src/components/vk-data-input-number-box/vk-data-input-number-box.d.ts
-
8src/pages.json
-
419src/pages/cart/cart.vue
-
13src/pages/cart/cart2.vue
-
489src/pages/cart/components/CartMain.vue
-
2src/pages/goods/goods.vue
-
28src/services/cart.ts
@ -0,0 +1,52 @@ |
|||||
|
import { Component } from '@uni-helper/uni-app-types' |
||||
|
|
||||
|
/** 步进器 */ |
||||
|
export type InputNumberBox = Component<InputNumberBoxProps> |
||||
|
|
||||
|
/** 步进器实例 */ |
||||
|
export type InputNumberBoxInstance = InstanceType<InputNumberBox> |
||||
|
|
||||
|
/** 步进器属性 */ |
||||
|
export type InputNumberBoxProps = { |
||||
|
/** 输入框初始值（默认1） */ |
||||
|
modelValue: number |
||||
|
/** 用户可输入的最小值（默认0） */ |
||||
|
min: number |
||||
|
/** 用户可输入的最大值（默认99999） */ |
||||
|
max: number |
||||
|
/** 步长，每次加或减的值（默认1） */ |
||||
|
step: number |
||||
|
/** 是否禁用操作，包括输入框，加减按钮 */ |
||||
|
disabled: boolean |
||||
|
/** 输入框宽度，单位rpx（默认80） */ |
||||
|
inputWidth: string | number |
||||
|
/** 输入框和按钮的高度，单位rpx（默认50） */ |
||||
|
inputHeight: string | number |
||||
|
/** 输入框和按钮的背景颜色（默认#F2F3F5） */ |
||||
|
bgColor: string |
||||
|
/** 步进器标识符 */ |
||||
|
index: string |
||||
|
/** 输入框内容发生变化时触发 */ |
||||
|
onChange: (event: InputNumberBoxEvent) => void |
||||
|
/** 输入框失去焦点时触发 */ |
||||
|
onBlur: (event: InputNumberBoxEvent) => void |
||||
|
/** 点击增加按钮时触发 */ |
||||
|
onPlus: (event: InputNumberBoxEvent) => void |
||||
|
/** 点击减少按钮时触发 */ |
||||
|
onMinus: (event: InputNumberBoxEvent) => void |
||||
|
} |
||||
|
|
||||
|
/** 步进器事件对象 */ |
||||
|
export type InputNumberBoxEvent = { |
||||
|
/** 输入框当前值 */ |
||||
|
value: number |
||||
|
/** 步进器标识符 */ |
||||
|
index: string |
||||
|
} |
||||
|
|
||||
|
/** 全局组件类型声明 */ |
||||
|
declare module 'vue' { |
||||
|
export interface GlobalComponents { |
||||
|
'vk-data-input-number-box': InputNumberBox |
||||
|
} |
||||
|
} |
||||
@ -1,418 +1,13 @@ |
|||||
<template> |
|
||||
<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"> |
<script setup lang="ts"> |
||||
import { getMemberCartAPI, deleteMemberCartAPI } 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 |
|
||||
} |
|
||||
|
|
||||
// 点击删除按钮 |
|
||||
const onDeleteCart = (skuId: string) => { |
|
||||
// 弹窗二次确认 |
|
||||
uni.showModal({ |
|
||||
content: '是否删除', |
|
||||
success: async (res) => { |
|
||||
if (res.confirm) { |
|
||||
// 后端删除单品 |
|
||||
await deleteMemberCartAPI({ ids: [skuId] }) |
|
||||
// 重新获取列表 |
|
||||
getMemberCartData() |
|
||||
} |
|
||||
}, |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
// 初始化调用: 页面显示触发 |
|
||||
onShow(() => { |
|
||||
// 用户已登录才允许调用 |
|
||||
if (memberStore.profile) { |
|
||||
getMemberCartData() |
|
||||
} |
|
||||
}) |
|
||||
|
import CartMain from './components/CartMain.vue' |
||||
</script> |
</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; |
|
||||
|
<template> |
||||
|
<CartMain /> |
||||
|
</template> |
||||
|
|
||||
&.disabled { |
|
||||
opacity: 0.6; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
// 底部占位空盒子 |
|
||||
.toolbar-height { |
|
||||
height: 100rpx; |
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
height: 100%; |
||||
} |
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,13 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import CartMain from './components/CartMain.vue' |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<CartMain /> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page { |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,489 @@ |
|||||
|
<template> |
||||
|
<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 @tap="onChangeSelectedAll" class="all" :class="{ checked: isSelectedAll }">全选</text> |
||||
|
<text class="text">合计:</text> |
||||
|
<text class="amount">{{ selectedCartListMoney }}</text> |
||||
|
<view class="button-grounp"> |
||||
|
<view |
||||
|
@tap="gotoPayment" |
||||
|
class="button payment-button" |
||||
|
:class="{ disabled: selectedCartListCount === 0 }" |
||||
|
> |
||||
|
去结算({{ selectedCartListCount }}) |
||||
|
</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 type { InputNumberBoxEvent } from '@/components/vk-data-input-number-box/vk-data-input-number-box' |
||||
|
import { |
||||
|
getMemberCartAPI, |
||||
|
deleteMemberCartAPI, |
||||
|
putMemberCartBySkuIdAPI, |
||||
|
putMemberCartSelectedAPI, |
||||
|
} from '@/services/cart' |
||||
|
import { useMemberStore } from '@/stores' |
||||
|
import type { CartItem } from '@/types/cart' |
||||
|
import { onShow } from '@dcloudio/uni-app' |
||||
|
import { computed, ref } from 'vue' |
||||
|
|
||||
|
// 获取会员Store |
||||
|
const memberStore = useMemberStore() |
||||
|
|
||||
|
// 获取购物车数据 |
||||
|
const cartList = ref<CartItem[]>([]) |
||||
|
const getMemberCartData = async () => { |
||||
|
const res = await getMemberCartAPI() |
||||
|
cartList.value = res.result |
||||
|
} |
||||
|
|
||||
|
// 点击删除按钮 |
||||
|
const onDeleteCart = (skuId: string) => { |
||||
|
// 弹窗二次确认 |
||||
|
uni.showModal({ |
||||
|
content: '是否删除', |
||||
|
success: async (res) => { |
||||
|
if (res.confirm) { |
||||
|
// 后端删除单品 |
||||
|
await deleteMemberCartAPI({ ids: [skuId] }) |
||||
|
// 重新获取列表 |
||||
|
getMemberCartData() |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 修改商品数量 |
||||
|
const onChangeCount = (ev: InputNumberBoxEvent) => { |
||||
|
putMemberCartBySkuIdAPI(ev.index, { count: ev.value }) |
||||
|
} |
||||
|
|
||||
|
// 修改选中状态-单品修改 |
||||
|
const onChangeSelected = (item: CartItem) => { |
||||
|
// 前端数据更新-是否选中取反 |
||||
|
item.selected = !item.selected |
||||
|
// 后端数据更新 |
||||
|
putMemberCartBySkuIdAPI(item.skuId, { selected: item.selected }) |
||||
|
} |
||||
|
|
||||
|
// 计算全选状态 |
||||
|
const isSelectedAll = computed(() => { |
||||
|
return cartList.value.length && cartList.value.every((v) => v.selected) |
||||
|
}) |
||||
|
|
||||
|
// 修改选中状态-全选修改 |
||||
|
const onChangeSelectedAll = () => { |
||||
|
// 全选状态取反 |
||||
|
const _isSelectedAll = !isSelectedAll.value |
||||
|
// 前端数据更新 |
||||
|
cartList.value.forEach((item) => { |
||||
|
item.selected = _isSelectedAll |
||||
|
}) |
||||
|
// 后端数据更新 |
||||
|
putMemberCartSelectedAPI({ selected: _isSelectedAll }) |
||||
|
} |
||||
|
|
||||
|
// 初始化调用: 页面显示触发 |
||||
|
onShow(() => { |
||||
|
// 用户已登录才允许调用 |
||||
|
if (memberStore.profile) { |
||||
|
getMemberCartData() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
// 计算选中单品列表 |
||||
|
const selectedCartList = computed(() => { |
||||
|
return cartList.value.filter((v) => v.selected) |
||||
|
}) |
||||
|
|
||||
|
// 计算选中总件数 |
||||
|
const selectedCartListCount = computed(() => { |
||||
|
return selectedCartList.value.reduce((sum, item) => sum + item.count, 0) |
||||
|
}) |
||||
|
|
||||
|
// 计算选中总金额 |
||||
|
const selectedCartListMoney = computed(() => { |
||||
|
return selectedCartList.value |
||||
|
.reduce((sum, item) => sum + item.count * item.nowPrice, 0) |
||||
|
.toFixed(2) |
||||
|
}) |
||||
|
|
||||
|
// 结算按钮 |
||||
|
const gotoPayment = () => { |
||||
|
if (selectedCartListCount.value === 0) { |
||||
|
return uni.showToast({ |
||||
|
icon: 'none', |
||||
|
title: '请选择商品', |
||||
|
}) |
||||
|
} |
||||
|
// 跳转到结算页 |
||||
|
uni.navigateTo({ url: '/pagesOrder/create/create' }) |
||||
|
} |
||||
|
</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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue