qinshi501的博客

1. 门诊项目分类与详情用户进入小程序后，可以根据不同的门诊项目进行浏览。每个项目都配有详细的介绍，包括但不限于项目名称、价格、适用人群等信息。此外，还可以查看项目的特色优势及用户评价，帮助用户做出更好的选择。2. 医师介绍与详情除了项目本身的信息外，用户还可以查看提供这些服务的医师资料。每位医师都有独立的个人主页，展示其专业背景、擅长领域以及工作经历等。这有助于增强患者对医生的信任感，提高预约转化率。3. 预约功能用户可以根据自己的需求选择特定的门诊项目或指定医师来创建预约订单。

1 习惯目标生成创建习惯：用户可以添加新的习惯目标，每个习惯可以包含名称、描述、图标、目标天数。关联习惯完成：用户通过设定达成目标以后，生成习惯养成记录。2 习惯打卡简单快捷的打卡：提供一个直观的界面，用户可以通过点击按钮轻松完成每日或周期性的习惯打卡。多习惯管理：支持同时管理多个习惯，用户可以在一个界面上查看所有需要打卡的习惯。3 打卡日历可视化进度：使用日历形式展示用户的打卡情况，用户可以清晰看到自己在某个月份内的打卡频率和连续性。

分类识别记录识别记录分享记录退出登录

/ 假设接口返回的时间戳为秒。分类识别会展示不同分类的识别记录，最上面展示分类信息选项卡，切换分类选项卡，会调用不同的分类数据展示列表数据。console.error('获取分享记录失败', res);console.error('请求失败', err);// 切换类型后刷新数据。-- 如果没有数据，显示提示信息 -->-- 顶部导航栏 -->-- 页面标题 -->-- 内容区 -->

imageUrl: 'https://i-blog.csdnimg.cn/direct/0f429acc94724706a67008e67c0625a1.png', // 动态生成分享图片。识图小程序首页主要是识图类型的展示列表，目前只有四种类型的图像识别，点击对应的类型图标会跳转到识图页面，每个分类上面展示该类型识图的调用次数和分享按钮。title: '已经最新',console.log('分享成功', res);

url: app.globalData.data.request_url +'api.php/picture/upload', // 替换为你的服务器地址。sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有。sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有。sourceType: ['album'], // 从相册选择。2：图片上传识别处理。

- 标题、规格 -->-- 底部内容 -->购物车列表主要分为两个部分，一个是商品列表可以增加，减少商品数量，一个是勾选的商品信息和价格。2：底部商品价格信息。

收货地址在个人中心的我的地址里面，点击我的地址可以查看我的收货地址列表，可以新增收货地址，点击特定收货地址可以编辑和删除该地址信息。// 加载loding。

订单列表页面包含三个部分，最上面显示订单的状态信息，可以根据订单进行切换，中间显示订单的商品和价格信息，最下面显示订单的操作按钮，可以根据不同的状态操作订单。

订单详情页面包含三部分信息，分别是收货地址信息，订单商品信息和订单信息。

页面分为三个部分，底部显示用户信息和个人设置等。中间部分显示订单信息可以点击查看订单列表，底部显示其他模块信息。-- 副导航 -->-- 主导航 -->

在商品详情页面，点击立即购买按钮，跳转到商品订单结算页面，结算页面会展示商品的收货地址信息，商品的基础信息和订单价格信息，并且展示提交订单按钮。-- 订单商品表单 -->-- 商品主体 -->3：点击立即购买跳转到订单结算页面。1：商品立即购买按钮。

text class="cr-grey text-size-xs" @tap="popup_params_event" data-value="detail">查看全部参数 >>首先在顶部以轮播图形式展示图片信息，下面展示商品价格和商品名称和描述信息，然后显示商品的关键卖点信息，最后展示商品详情信息。-- 是否详情展示相册 -->-- 手机独立详情 -->-- web详情 -->商品详情页主要展示商品的图片，基础信息，详细描述信息，以及销量，库存信息等。-- 相册内容 -->

商品搜索页面，可以根据商品品牌，商品分类，商品价格等信息实现商品搜索和列表展示。

这里商品分类按照常规的分类页面样式设计，左侧为一级分类，右侧为二级分类。在左侧切换不同的一级分类可以修改右侧的二级分类数据。右侧的展现方式是最上面显示对应的一级分类logo图片，下面展示二级分类的logo和名称。

准备工作：1 创建一个uni-ui项目，创建完的工程目录如下：uniapp开发项目可以打包成h5,app和小程序，我们可以在微信开发工具中运行效果如下，下面我们实现商城首页。

在订单结算页面，点击提交订单，会调用接口创建订单，返回订单id,然后跳转到订单支付页面。订单支付页面包含订单的基本信息和支付方式选择，选择对应的支付方式完成支付。至此整个订单完成从下单到支付的所有流程。下面我们来实现下订单支付页面。

上一节我们实现了购物车列表，那么从购物车选择商品结算或者商品详情点击立即购买会跳转到订单结算页面，这个页面会展示用户的地址信息和购买的商品信息，以及优惠券相关信息等。因此会传递购物车里列表的选中的商品参数，具体是商品id和商品数量，到订单结算页面会根据选中的商品数量和商品价格展示订单的总价和优惠完的价格。//Span('12节').fontColor(Color.Black).fontSize(12).fontWeight(FontWeight.Bold)1：收货地址信息展示。2：订单商品信息获取。

分类导航采用左右结构布局，我们这里简单展示一级分类，以及该分类下的商品信息。左侧显示商品的一级分类，右侧显示显示该分类的商品。默认从首页进入该分类页面时，显示第一个分类的商品，切换一级分类时，传入分类参数，清空右侧商品，重新调用接口显示当前分类的商品，展示在右侧页面。1:主要组件：List：列表显示组件Grid：Grid组件显示几行几列布局效果。

上一节我们只是简单的展示了购物车的数据，这一节我们来实现购物车商品的增加和减少，并且数量和价格数据的实时更新。首先我们定义一个全局变量用来显示数量和总价，使用Counter组件实现增加和减少事件触发购物车列表数据更新，同时更新总价和总量。

上一节我们已经实现了首页的搜索框，但是点击搜索是没反应的。现在我们来实现下搜索功能，实现逻辑就是在搜索框输入关键字，点击搜索跳转到新页面，把参数带入新页面调用接口，获取商品信息来展示，同时在顶部加入返回按钮。

在 Vue.js 中，async 和 await 的高级用法通常涉及更复杂的异步逻辑处理，包括错误处理、条件逻辑、并发请求等。

上一节，我们实现了商品添加购物车，这一节我们实现购物车列表，可以展示购物车的数据，进行下单结算。1：主要组件Navigation：:路由导航组件，实现页面的跳转管理。Refresh：刷新组件，实现页面数据刷新。

上一节我们实现了首页的搜索和轮播图，这一节我们来显示商品列表，和商品跳转的部分逻辑。这里我们会使用axios请求接口数据，构造商品数组来接收数据，在页面循环渲染商品信息。（1）商品数据结构定义：GoodsItem。ListItem：展示列表某一行数据。router：路由组件，实现页面跳转。展示商品价格，图片，商名名称等信息。ForEach：循环展示列表内容。List：用来显示列表的组件。axios: 实现接口请求。//页面加载完请求数据。（2）循环展示商品信息。2：商品数据渲染展示。

上一节我们实现了商品详情页基础信息展示，这一节主要实现底部立即购买和加入购物车的功能。Button('加入购物车', { type: ButtonType.Capsule, stateEffect: true })Button('立即购买', { type: ButtonType.Capsule, stateEffect: true })Text('加入购物车').fontSize(20).margin({ top: 10 })Button：按钮显示底部按钮，定义点击事件。Button('确定')

这一节，我们实现商品详情页的开发，具体流程就是在首页的商品列表点击商品跳转到商品详情页面，同时传递参数到该页面，通过参数调用商品详情接口在详情页展示商品的的详情信息。这里我们为了方便返回首页，在最顶部加入返回和回到首页按钮，这样快速返回首页或者上一个页面。.borderRadius(15) // 添加圆弧效果。// 可以添加其他你认为 `getParams()` 会返回的属性。router： 获取页面跳转的传递的参数，以及页面的回退等。Text('运费')Text('销量')Text('商品详情')

这一节我们主要在鸿蒙OS系统中实现的一个底部导航功能，并在首页底部使用TabSwitch组件进行导航切换。同时，首页采用Search组件实现商品搜索框，Scroll和Swiper组件实现图片轮播功能，以展示推荐内容或图片。1：主要功能组件Tabs：容器组件，用于包裹多个TabContent。TabContent：内容页组件，每个TabContent对应底部导航栏中的一个选项卡。TabBar：导航页签栏，通过自定义TabBuilder函数组件实现，以增强页面的可读性和可用性。