【鸿蒙实战应用开发】HarmonyOS实现叮当买药购物车

「已注销」

已于 2024-07-02 18:37:08 修改

阅读量1.7k

点赞数 9

CC 4.0 BY-SA版权

文章标签： harmonyos 华为鸿蒙鸿蒙开发鸿蒙系统

于 2024-07-02 17:07:32 首次发布

本文链接：https://blog.csdn.net/HarmonyOS_001/article/details/140130898

开始

上一期我们讲了怎么封装用户首选项、网络请求库，这一期直接来点绝活，做个叮当买药购物车列表，废话不多说，先上图看看效果！

效果图

点击查看

页面布局

首先，购物车的布局大致可以分成四块

●左侧菜单列表
在这里插入图片描述

●右侧药品列表
在这里插入图片描述

●底部价格展示view

在这里插入图片描述

●购物车弹出层
在这里插入图片描述

开发环境

●Windows

●DevEco Studio NEXT Developer Preview2

●HarmonyOS next Developer Preview2

●java version “11.0.18” 2023-01-17 LTS

●hdc 1.2.0a

●手机：Mate 60Pro (HarmonyOS NEXT Developer Preview2)

实现思路

●首先准备好数据源

@State list: Category[] = [
  {
    "tag": "318569657",
    "name": "感冒用药",
    "foods": [new FoodItemModel({
      "id": 8078956697,
      "name": "感冒胶囊",
      "like_ratio_desc": "8折 限1份",
      "price": 90,
      "picture": 'https://img1.baidu.com/it/u=3695446799,2653776768&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      'count': 1
    }), new FoodItemModel({
      "id": 8078956621,
      "name": "感冒灵颗粒",
      "like_ratio_desc": "8折 限1份",
      "price": 25,
      "picture": 'https://img2.baidu.com/it/u=4014310530,4016360647&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=567',
      'count': 1
    }), new FoodItemModel({
      "id": 80789566133,
      "name": "感冒软胶囊",
      "like_ratio_desc": "8折 限1份",
      "price": 33,
      "picture": 'https://roadlady.com/uploads/allimg/190610/011913C11-2.jpg',
      'count': 1
    }), new FoodItemModel({
      "id": 80789566123,
      "name": "四季感冒片",
      "like_ratio_desc": "8折 限1份",
      "price": 66,
      "picture": 'https://img.huopinyuan.com/coll/202110/OT20211012102623937.jpg',
      'count': 1
    }), new FoodItemModel({
      "id": 807895664324,
      "name": "风寒感冒颗粒",
      "like_ratio_desc": "8折 限1份",
      "price": 30,
      "picture": 'https://gimg2.baidu.com/image_search/src=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi4%2F2209144028871%2FO1CN01Vh5TDK2FOyAXIKOaE_%21%210-item_pic.jpg_300x300.jpg&refer=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1718075025&t=aa13f0c84fcbef902ef29e954fb8b55e',
      'count': 1
    }), new FoodItemModel({
      "id": 807895663123,
      "name": "四季感冒片",
      "like_ratio_desc": "8折 限1份",
      "price": 10,
      "picture": 'https://roadlady.com/uploads/allimg/190610/011913C11-2.jpg',
      'count': 1
    }), new FoodItemModel({
      "id": 423423423434,
      "name": "白加黑",
      "like_ratio_desc": "8折 限1份",
      "price": 10,
      "picture": 'https://img1.baidu.com/it/u=4135825917,1002141753&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=375',
      'count': 1

最低0.47元/天解锁文章