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"> |
|||
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> |
|||
|
|||
<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> |
|||
@ -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