基于鸿蒙HarmonyOS_NEXT的美团点餐案例

用户国营  金牌会员 | 2024-12-25 03:07:11 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 808|帖子 808|积分 2424

工程目录：
-pages
        -MeiTuan
                -api 请求
                -components 组件
                -models 类型
                -utils 工具类
                -MTIndex.ets(Page) 主页面


MTIndex
  1. import MTBottom from './components/MTBottom'
  2. import MTCart from './components/MTCart'
  3. import MTMain from './components/MTMain'
  4. import MTTop from './components/MTTop'
  5. import { FoodItem } from './models'
  6. import { CartStore } from './utils'
  7. import { promptAction } from '@kit.ArkUI'
  9. //主页面：
  10. @Entry
  11.   @Component
  12.   struct MTIndex {
  13.     @Provide//判断购物车是否出来的一个变量
  14.     showCart:boolean=false
  16.     @Provide//接收CartStore.getCarts()传过来的购物车数据，然后传给MTAddCut,MTCart，MTBottom的consume
  17.     userCart: FoodItem[] = []
  19.     // @StorageProp("user_cart")//创建一个data来拿到utils的数据，watch监听utils的数据变化
  20.     // @Watch("updateCart")
  21.     // data:FoodItem[]=[]
  23.     aboutToAppear(): void {//一打开页面就接收购物车,只执行一次
  24.       this.userCart = CartStore.getCarts()
  25.       getContext().eventHub.on("change_cart",()=>{  //监听线程间通信的更新
  26.         this.userCart = CartStore.getCarts()//重新赋值给userCart
  27.       })
  28.     }
  30.     // updateCart(){//监听到data变化，进行持久化数据的更新
  31.     //   this.userCart = CartStore.getCarts()
  32.     // }
  34.     build() {
  35.       Column() {
  36.         Stack({ alignContent: Alignment.Bottom }) {
  37.           Column() {
  38.             MTTop()
  39.             MTMain()
  40.           }
  41.           .height("100%")
  42.           if (this.showCart){  //如果showCart=1,打开购物车MTCart。
  43.             MTCart()
  44.           }
  45.           MTBottom()//底层组件
  46.         }.layoutWeight(1)
  47.       }
  48.       .width('100%')
  49.         .height("100%")
  50.         .backgroundColor($r("app.color.white"))
  51.     }
  52.   }
复制代码
API/index
  1. import { http } from '@kit.NetworkKit'
  2. import { promptAction } from '@kit.ArkUI'
  3. import { Category } from '../models'
  5. //发情网络请求方法 api/index.ets 使用 http 发送请求，获取数据
  7. export const getFoodData = async ()=>{
  8.   const res = http.createHttp()
  9.   try {
  10.     const result = await res.request('https://zhousg.atomgit.net/harmonyos-next/takeaway.json')
  11.     return  JSON.parse(result.result as string)as  Category[]
  12.   }
  13.   catch (error){//出现问题执行：
  14.     promptAction.showToast({message:error.message})
  15.     return Promise.reject(error)//逻辑请求已经出错，不能再继续了
  16.   }
  17.   finally {
  18.     res.destroy()//销毁这个请求
  19.   }
  21. }
复制代码
MTAddCut
  1. //夹菜和减菜的组件：
  2. import { FoodItem } from '../models'
  3. import { AddCutEnum, CartStore } from '../utils'
  5. @Component
  6.   struct MTAddCut {
  7.     @Consume
  8.     userCart:FoodItem[]//接收MTIndex的provide传过来的购物车
  9.     fid:number=0//接收MTFoodItem传过来的id来跟购物车判断：在不在购物车里
  10.     item:FoodItem = new FoodItem()//接收MTFoodItem传过来的item
  11.     getCount(){//判断当前的菜品和购物车的关系，只要当前菜品在购物车里，就把<数量>显示
  12.       return this.userCart.find(item => item.id === this.fid)?.count || 0  //去购物车里找有没有和这个id一样的菜品，如果有说明这个菜品在购物车里
  13.     }
  14.     build() {
  15.       Row({ space: 8 }) {
  16.         Row() {
  17.           Image($r('app.media.ic_screenshot_line'))
  18.             .width(10)
  19.             .aspectRatio(1)
  20.         }
  21.         .width(16)
  22.           .aspectRatio(1)
  23.           .justifyContent(FlexAlign.Center)
  24.           .backgroundColor($r("app.color.white"))
  25.           .borderRadius(4)
  26.           .border({ width: 0.5 , color: $r("app.color.main_color")})
  27.           .visibility(this.getCount() ? Visibility.Visible : Visibility.Hidden)//没有就消失，但是会占位
  28.           .onClick(()=>{//减菜
  29.             CartStore.addCutCart(AddCutEnum.CUT,this.item)//把item传给-菜方法
  30.           })
  31.         Text(this.getCount().toString())
  32.           .visibility(this.getCount() ? Visibility.Visible : Visibility.Hidden)//没有就消失，但是会占位
  34.         Row() {
  35.           Image($r('app.media.ic_public_add_filled'))
  36.             .width(10)
  37.             .aspectRatio(1)
  38.         }
  39.         .width(16)
  40.           .aspectRatio(1)
  41.           .justifyContent(FlexAlign.Center)
  42.           .backgroundColor($r("app.color.main_color"))
  43.           .borderRadius(4)
  44.           .onClick(()=>{//+菜
  45.             CartStore.addCutCart(AddCutEnum.ADD,this.item)//把item传给加菜方法
  46.           })
  47.       }
  48.     }
  49.   }
  50. export default MTAddCut
复制代码
MTBottom
  1. import { FoodItem } from '../models'
  3. @Component
  4.   struct MTBottom {
  5.     @Consume//用来接收MTIndex传过来的showCart
  6.     showCart:boolean
  7.     @Consume//接MTIndex传下来的购物车userCart
  8.     userCart:FoodItem[]
  10.     //总件数方法：
  11.     getTotalCount(){
  12.       return this.userCart.reduce((preValue:number,item:FoodItem)=>{
  13.         return preValue + item.count //0+总数
  14.       },0)
  15.     }
  16.     //算总价格：
  17.     getTotalPrice(){
  18.       return this.userCart.reduce((preValue:number,item:FoodItem)=>{
  19.         return preValue + item.count * item.price //0+总数
  20.       },0)
  21.     }
  23.     build() {
  24.       Row(){
  25.         Row(){
  26.           //小哥图像显示：
  27.           Badge({ value: this.getTotalCount().toString(), position: BadgePosition.Right, style:{badgeSize:18}}){
  28.             Image($r("app.media.ic_public_cart"))
  29.               .width(47)
  30.               .height(69)
  31.               .position({y:-20})
  32.           }
  33.           .margin({left:25,right:10})
  34.             .onClick(()=>{//点击小哥，就把showCart取反，来关闭和打开购物车
  35.               this.showCart=!this.showCart
  36.             })
  37.           //显示总费用：
  38.           Column(){
  39.             Text(){
  40.               //span imagespan
  41.               Span("￥")
  42.                 .fontSize(12)
  43.               Span(this.getTotalPrice().toString())
  44.                 .fontSize(24)
  45.             }
  46.             .fontColor($r("app.color.white"))
  47.             Text("预估另需配送费￥5元")
  48.               .fontColor($r("app.color.search_font_color"))
  49.               .fontSize(14)
  50.           }
  51.           .alignItems(HorizontalAlign.Start)//column的水平轴对齐方式
  52.             .layoutWeight(1)
  53.           //去结算按钮：
  54.           Text("去结算")
  55.             .height(50)
  56.             .textAlign(TextAlign.Center)//字要居中
  57.             .width(80)
  58.             .backgroundColor($r("app.color.main_color"))
  59.             .borderRadius({topRight:25,bottomRight:20})
  60.         }
  61.         .height(50)
  62.           .backgroundColor($r("app.color.bottom_back"))
  63.           .width('100%')
  64.           .borderRadius(25)
  65.       }
  66.       .padding({
  67.         left:20,
  68.         right:20,
  69.         bottom:20,
  70.       })
  71.         .width('100%')
  72.     }
  73.   }
  74. export default MTBottom
复制代码
MTCart
  1. import { FoodItem } from '../models'
  2. import { CartStore } from '../utils'
  3. import MTCartItem from './MTCartItem'
  4. //购物车组件：
  5. @Component
  6.   struct MTCart {
  7.     @Consume
  8.     userCart:FoodItem[]//接收MTIndex的provide传过来的购物车
  9.     build() {
  10.       Column(){
  11.         Column(){
  12.           Row(){
  13.             Text("购物车")
  14.               .fontSize(12)
  15.             Text("清空购物车")
  16.               .fontSize(12)
  17.               .fontColor($r("app.color.search_font_color"))
  18.               .onClick(()=>{
  19.                 CartStore.clearCart()
  20.               })
  21.           }
  22.           .height(50)
  23.             .width('100%')
  24.             .justifyContent(FlexAlign.SpaceBetween)//两头对其
  25.             .padding({left:15,right:15})
  26.           //生成n个的菜单项：
  27.           List({space:20}){
  28.             ForEach(this.userCart,(item:FoodItem)=>{
  29.               ListItem(){
  30.                 MTCartItem({item:item})
  31.               }}, (item:FoodItem) => item.id.toString() )//第三个参数 防止闪烁
  32.           }.padding({left:15,right:15})
  33.         }
  34.         .borderRadius({ topLeft:16,topRight:16})
  35.           .padding({ bottom:100 })
  36.           .width('100%')
  37.           .backgroundColor($r('app.color.white'))
  38.       }
  39.       .width('100%')
  40.         .height('100%')
  41.         .justifyContent(FlexAlign.End)
  42.         .backgroundColor("rgba(0,0,0,0.5)")//透明的背景色 0.5透明度
  43.     }
  44.   }
  45. export default MTCart
复制代码
MTCartItem
  1. import { FoodItem } from '../models'
  2. import MTAddCut from './MTAddCut'
  4. @Component
  5.   struct MTCartItem {//购物车里商品抽提成的组件   单个
  6.     item:FoodItem= new FoodItem()//接收MTCart的foreach传过来的item进行单个渲染
  7.     build() {
  8.       Row({space:10}){
  9.         Image(this.item.picture)
  10.           .width(60)
  11.           .aspectRatio(1)
  12.           .borderRadius(8)
  13.         Column(){
  14.           Text(this.item.name)
  15.             .fontSize(14)
  16.             .textOverflow({
  17.               overflow:TextOverflow.Ellipsis
  18.             })
  19.           Row(){
  20.             Text(){
  21.               Span("￥")
  22.                 .fontSize(10)
  23.               Span(this.item.price.toString())//价格
  24.                 .fontSize(20)
  25.                 .fontWeight(600)
  26.             }
  27.             .fontColor($r('app.color.font_main_color'))
  28.             MTAddCut({fid:this.item.id,item:this.item})
  29.           }
  30.           .width('100%')
  31.             .justifyContent(FlexAlign.SpaceBetween)
  32.         }
  33.         .layoutWeight(1)
  34.           .alignItems(HorizontalAlign.Start)//column的副轴对齐方式
  35.       }
  36.       .width('100%')
  37.     }
  38.   }
  39. export default MTCartItem
复制代码
MTFoodItem
  1. import { FoodItem } from '../models'
  2. import MTAddCut from './MTAddCut'
  4. @Component
  5.   struct MTFoodItem {       //菜单栏的商品抽提成的组件  单个
  6.     item :FoodItem = new FoodItem()//接收main的 ForEach传过来的数据并渲染
  7.     build() {
  8.       Row() {
  9.         Image(this.item.picture)
  10.           .width(90)
  11.           .aspectRatio(1)
  12.         Column({ space: 5 }) {
  13.           Text(this.item.name)
  14.             .textOverflow({
  15.               overflow: TextOverflow.Ellipsis,
  16.             })
  17.             .maxLines(2)
  18.             .fontWeight(600)
  19.           Text(this.item.description)
  20.             .textOverflow({
  21.               overflow: TextOverflow.Ellipsis,
  22.             })
  23.             .maxLines(1)
  24.             .fontSize(12)
  25.             .fontColor($r("app.color.food_item_second_color"))
  26.           ForEach(this.item.food_tag_list,(str:string)=>{
  27.             Text(str)
  28.               .fontSize(10)
  29.               .backgroundColor($r("app.color.food_item_label_color"))
  30.               .fontColor($r("app.color.font_main_color"))
  31.               .padding({ top: 2, bottom: 2, right: 5, left: 5 })
  32.               .borderRadius(2)
  33.           })
  34.           Text() {
  35.             Span('月销售'+this.item.month_saled)
  36.             Span(' ')
  37.             Span(this.item.like_ratio_desc)
  38.           }
  39.           .fontSize(12)
  40.             .fontColor($r("app.color.black"))
  42.           Row() {
  43.             Text() {
  44.               Span('¥ ')
  45.                 .fontColor($r("app.color.font_main_color"))
  46.                 .fontSize(10)
  47.               Span(this.item.price.toString())
  48.                 .fontColor($r("app.color.font_main_color"))
  49.                 .fontWeight(FontWeight.Bold)
  50.             }
  51.             MTAddCut({ fid:this.item.id ,item:this.item})//把id传给MTAddCut
  52.           }
  53.           .justifyContent(FlexAlign.SpaceBetween)
  54.             .width('100%')
  55.         }
  56.         .layoutWeight(1)
  57.           .alignItems(HorizontalAlign.Start)
  58.           .padding({ left: 10, right: 10 })
  59.       }
  60.       .padding(10)
  61.         .alignItems(VerticalAlign.Top)
  62.     }
  63.   }
  64. export default MTFoodItem
复制代码
MTMain
  1. import { getFoodData } from '../API'
  2. import { Category, FoodItem } from '../models'
  3. import MTFoodItem from './MTFoodItem'
  4. @Component
  5.   struct MTMain {
  6.     @State
  7.     list:Category[]=[]
  8.     // @State
  9.     // list:string[]=["一人套餐","特色烧烤","杂粮主食"]
  10.     @State
  11.     activeIndex:number = 0//激活项的点菜类型索引
  12.     aboutToAppear(): void {
  13.       this.getData()
  14.     }
  15.     //获取数据的方法：
  16.     async getData(){
  17.       this.list = await getFoodData()//调用网络请求方法,把数据传给list
  18.     }
  21.     build() {
  22.       Row(){
  24.         //左侧分类：
  25.         Column(){
  26.           ForEach(this.list,(item:Category,index:number)=>{
  27.             Text(item.name)
  28.               .height(50)
  29.               .width('100%')
  30.               .fontSize(14)
  31.               .backgroundColor(this.activeIndex === index?$r("app.color.white"):$r("app.color.left_back_color"))//选中的话显示白色，不选中默认色
  32.               .textAlign(TextAlign.Center)
  33.               .onClick(()=>{
  34.                 this.activeIndex=index//点到谁就把它的索引给激活项索引
  35.               })
  36.           })
  37.         }
  38.         .height('100%')
  39.           .backgroundColor($r("app.color.left_back_color"))
  40.           .width(90)
  42.         //右侧食物列表：
  43.         List(){
  44.           ForEach( this.list[this.activeIndex]?.foods || [] ,(item:FoodItem)=>{
  45.             ListItem(){
  46.               MTFoodItem({item:item})//把数据传给MTFoodItem去渲染一个一个的菜品
  47.             }
  48.           })
  49.         }
  50.         .height('100%')
  51.           .layoutWeight(1)
  52.           .padding({bottom:120})
  54.       }
  55.       .width('100%')
  56.     }
  57.   }
  58. export default MTMain
复制代码
MTTop
  1. @Component
  2.   struct MTTop {
  3.     @Builder
  4.     NavItem(active: boolean, title: string, subTitle?: string) {
  5.       Column() {
  6.         Text() {
  7.           Span(title)
  8.           if (subTitle) {
  9.             Span(' ' + subTitle)
  10.               .fontSize(10)
  11.               .fontColor(active ? $r("app.color.black") : $r("app.color.un_select_color"))
  12.           }
  13.         }.layoutWeight(1)
  14.           .fontColor(active ? $r("app.color.black") : $r("app.color.un_select_color"))
  15.           .fontWeight(active ? FontWeight.Bold : FontWeight.Normal)
  17.         Text()
  18.           .height(1)
  19.           .width(20)
  20.           .margin({ left: 6 })
  21.           .backgroundColor(active ? $r("app.color.select_border_color") : 'transparent')
  22.       }
  23.       .width(73)
  24.         .alignItems(HorizontalAlign.Start)
  25.         .padding({ top: 3 })
  26.     }
  27.     build() {
  28.       Row() {
  29.         this.NavItem(true, '点菜')
  30.         this.NavItem(false, '评价', '1796')
  31.         this.NavItem(false, '商家')
  32.         Row() {
  33.           Image($r('app.media.ic_public_search'))
  34.             .width(14)
  35.             .aspectRatio(1)
  36.             .fillColor($r("app.color.search_font_color"))
  37.           Text('请输入菜品名称')
  38.             .fontSize(12)
  39.             .fontColor($r("app.color.search_back_color"))
  40.         }
  41.         .backgroundColor($r("app.color.search_back_color"))
  42.           .height(25)
  43.           .borderRadius(13)
  44.           .padding({ left: 5, right: 5 })
  45.           .layoutWeight(1)
  47.       }
  48.       .padding({ left: 15, right: 15 })
  49.         .height(40)
  50.         .border({ width: { bottom: 0.5 }, color: $r("app.color.top_border_color") })
  51.     }
  52.   }
  54. export default MTTop
复制代码
model/index
  1. //数据类型：
  4. //1.菜品类型：
  5. export class FoodItem {
  6.   id: number = 0
  7.   name: string = ""
  8.   like_ratio_desc: string = ""//好评率
  9.   food_tag_list: string[] = []//点评网友推荐
  10.   price: number = 0//价格
  11.   picture: string = ""
  12.   description: string = ""//描述
  13.   tag: string = ""
  14.   month_saled: number = 0//月销量
  15.   count: number = 0
  16. }
  18. //2.分类类型：
  19. export class Category {
  20.   tag: string = ""
  21.   name: string =""
  22.   foods: FoodItem[] = []
  23. }
复制代码
utils/index
  1. import { it } from '@ohos/hypium'
  2. import { FoodItem } from '../models'
  3. //控制购物车的读取
  4. //单例 只有一个实例
  5. PersistentStorage.persistProp("user_cart",[]) //声明了一个持久化的数据叫user_cart，初始值为空数组
  7. export class CartStore {
  8.   //1.获取购物车方法:
  9.   static getCarts (): FoodItem[] {
  10.     return  AppStorage.get("user_cart") || [] as FoodItem[] //如果拿不到，给上一个空数组
  11.   }
  13.   //2.加菜和减菜的方法：
  14.   static addCutCart(type:AddCutEnum ,item:FoodItem){
  15.     const list = CartStore.getCarts()//拿到持久化购物车给list
  16.     const findFood = list.find(obj => obj.id === item.id)
  17.     if (type===AddCutEnum.ADD) {
  18.       //加菜：这个菜在购物车存在与否？
  19.       if (findFood) {//意味着你点击的菜购物车里已经有了
  20.         findFood.count++
  21.       }
  22.       else {//你的购物车里没有这个菜：给购物车加入这个菜，数量为1：
  23.         list.unshift(item)//把这个菜加到头部
  24.         item.count=1
  25.       }
  26.     }
  27.     else if (type===AddCutEnum.CUT){
  28.       //减菜：
  29.       if (findFood && findFood.count>0 ) {//意味着你点击的菜 购物车里已经有了
  30.         findFood.count--
  31.         if (findFood.count === 0) {//减完了，得把这个菜删除购物车
  32.           let index = list.findIndex(obj=>obj.id === findFood.id)
  33.           list.splice(index,1)
  34.         }
  35.       }
  36.     }
  37.     //最后要把这个list数据更新到持久化
  38.     AppStorage.set("user_cart",[...list])//写入持久化,把list进行了一次拷贝
  39.     //写入的时候，如果发现对象的地址一致，就不写入
  40.     //第二种方法：事件总线
  41.     //线程内事件总线，线程间事件总线，进程间事件总线
  42.     getContext().eventHub.emit("change_cart")//触发更新购物车事件
  43.   }
  45.   //3.清空购物车方法：
  46.   static clearCart(){
  47.     AppStorage.set("user_cart",[])//把"user_cart"设成空数组
  48.     getContext().eventHub.emit("change_cart")//触发更新购物车事件
  49.   }
  50. }
  52. //写成枚举给addCutCart用
  53. export enum AddCutEnum{
  54.   ADD,
  55.   CUT
  56. }
复制代码
效果：



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

用户国营

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表