预览
购物车预览视频
主要组件
Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
Row：沿水平方向布局容器。
Refresh：可以进行页面下拉操作并显示刷新动效的容器组件。
Counter：计数器组件，提供相应的增加或者减少的计数操作。
promptAction ：创建并显示文本提示框、对话框和操作菜单。
interface
/*购物车商品列表对象类型*/
export interface CartGoodsItemTypes {
id: string,
name: string,
imgUrl: string,
price: number,
market_price: number,
selected: boolean,
spec_value_str: string,
num: number
}
完整代码
import { CartGoodsItemTypes } from "../../types/index"
import GoodsList from '../../components/GoodsList';
import { promptAction } from "@kit.ArkUI";
@Entry
@Component
export default struct Cart {
scroller: Scroller = new Scroller;
@State totalPrice: number = 0.00
@State showEdit: boolean = false
@State isRefreshing: boolean = false
@State selectedList: CartGoodsItemTypes[] = []
@State list: CartGoodsItemTypes[] = [
{
id: '111',
name: '安踏板鞋男鞋2021新款夏季官方旗舰休闲潮流运动小白鞋子白板鞋',
imgUrl: 'https://php-b2c.likeshop.cn/uploads/images/20210811152141638673475.png',
price: 199,
market_price: 299,
selected: false,
spec_value_str: '43码',
num: 1
},
{
id: '222',
name: '安踏板鞋男鞋2021新款夏季官方旗舰休闲潮流运动小白鞋子白板鞋',
imgUrl: 'https://php-b2c.likeshop.cn/uploads/images/20210811152141638673475.png',
price: 299,
market_price: 399,
selected: false,
spec_value_str: '44码',
num: 2
}]
/*计算总价*/
computeTotalPrice() {
this.totalPrice = 0
for (let item of this.selectedList) {
this.totalPrice += item.price * item.num
}
this.totalPrice = Number(this.totalPrice.toFixed(2))
}
build() {
Scroll(this.scroller) {
Column() {
/*顶部操作栏*/
Row() {
Row() {
Text('购物车').fontSize(18).fontWeight(600)
Row() {
Image($r('app.media.local_fill')).width(15).height(15)
Text('请填写收货地址').fontColor($r('app.color.color_info')).fontSize(12).margin({ left: 2 })
Image($r('app.media.arrow_right')).width(15).height(15)
}.backgroundColor('#f4f4f4').padding(4).borderRadius(30).margin({ left: 10 })
}
if (this.showEdit) {
Text('完成').fontSize(14).onClick(() => {
this.showEdit = false
})
} else {
Text('管理').fontSize(14).onClick(() => {
this.showEdit = true
})
}
}.justifyContent(FlexAlign.SpaceBetween).backgroundColor('#fff').padding(15).width('100%')
/*购物车列表*/
Refresh({ refreshing: $$this.isRefreshing, promptText: '加载中...' }) {
Scroll(this.scroller) {
Column() {
ForEach(this.list, (item: CartGoodsItemTypes, index: number) => {
Row() {
/*是否选中*/
if (item.selected) {
Image($r('app.media.ic_public_todo_filled')).width(15).height(15)
.onClick(() => {
item.selected = false
this.selectedList.splice(index, 1)
this.computeTotalPrice()
})
} else {
Image($r('app.media.ic_screenshot_circle')).width(18).height(18)
.onClick(() => {
item.selected = true
this.selectedList.push(item)
this.computeTotalPrice()
})
}
/*商品图片*/
Image(item.imgUrl).width(80).height(80).borderRadius(4).margin({ left: 5 })
/*商品信息*/
Column() {
/*名称*/
Text(item.name).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).fontSize(14)
/*规格*/
Text(item.spec_value_str)
.fontSize(12)
.fontColor($r('app.color.color_info'))
.width('100%')
.margin({ top: 5 })
Row() {
/*价格*/
Row() {
Text('￥').fontSize(10).fontColor($r('app.color.color_primary'))
Text(String(item.price))
.fontSize(14)
.fontColor($r('app.color.color_primary'))
.fontWeight(600)
.textAlign(TextAlign.Start)
.width('100%')
}.width(90)
/*数量*/
Counter() {
Text(String(item.num))
}.height(20)
.onInc(() => {
this.list[index].num++
}).onDec(() => {
this.list[index].num--
})
}.margin({ top: 20 })
}.margin({ left: 10 }).width('60%').height(80).justifyContent(FlexAlign.Start)
}
.padding(10)
.width('90%')
.margin(10)
.borderRadius(4)
.backgroundColor(0xFFFFFF)
}, (item: CartGoodsItemTypes) => item.id)
/*热门推荐*/
Row() {
Text('热门推荐').fontColor($r('app.color.color_primary')).fontWeight(700)
}.margin({ top: 15, bottom: 15 })
/*商品列表 瀑布流*/
GoodsList()
}
}
.padding({ bottom: 150 })
.height('100%')
.backgroundColor('#f8f8f8')
.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
.scrollBar(BarState.Off) // 滚动条隐藏
.edgeEffect(EdgeEffect.Spring)
}
.backgroundColor('#f4f4f4')
.onRefreshing(() => {
setTimeout(() => {
this.isRefreshing = false
}, 2000)
console.log('onRefreshing test')
})
/*结算栏*/
Row() {
Row() {
if (this.selectedList.length == this.list.length) {
Image($r('app.media.ic_public_todo_filled')).width(20).height(20).onClick(() => {
this.selectedList = []
this.computeTotalPrice()
})
} else {
Image($r('app.media.ic_screenshot_circle')).width(20).height(20).onClick(() => {
this.selectedList = this.list
this.computeTotalPrice()
})
}
Text('全选').margin({ left: 5 })
}
if (this.showEdit) {
Button('删除').backgroundColor($r('app.color.color_error')).width(100).height(30).margin({ left: 20 })
.onClick(()=>{
promptAction.showDialog({
title: '提示',
message: '确定要删除吗？',
buttons: [
{text: '取消',color: '#000'},
{text: '确定', color: $r('app.color.color_primary')}
]
}).then(()=>{
promptAction.showToast({
message: '删除成功'
})
this.showEdit = false
})
})
} else {
Row() {
Text('合计：')
Text('￥' + this.totalPrice).fontColor($r('app.color.color_error')).fontSize(14)
Button('结算').backgroundColor($r('app.color.color_error')).width(100).height(30).margin({ left: 20 })
}
}
}
.border({
width: 1, color: '#f4f4f4', style: {
top: BorderStyle.Solid,
}
})
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.backgroundColor('#ffffff')
.padding(15)
.position({ x: 0, y: '92%' })
.zIndex(999)
}
}
.backgroundColor('#f8f8f8')
.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
.scrollBar(BarState.Off) // 滚动条隐藏
.edgeEffect(EdgeEffect.Spring)
}
}