joolun微信小程序将待发货和待收货的订单信息修改为列表（小程序将后台传递的数组遍历到小程序页面上）

原创于 2023-02-01 16:24:27 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信小程序

文章描述了如何在Java后端将订单的物流信息修改为List类型，通过Mapper进行SQL查询，然后在ServiceImpl中处理数据。接着，小程序端调用接口获取数据并在WXML中使用wx:for遍历显示物流详情。

先将实体类修改成list类型

在这里插入图片描述

@TableField(exist = false)
private List<OrderLogistics> orderLogistics;

然后在mapper中添加查询订单信息

//订单对物流表
List<OrderLogistics> selectList(String logistics_id);

继续在mapper.xml中写SQL查询

在这里插入图片描述

<select id="selectList" resultType="com.joolun.mall.entity.OrderLogistics">
		select
		       *
		from
		     order_logistics
		where
		      order_logistics.info_id = #{id}
	</select>

然后在小程序找到订单页面所对应的后台接口

在这里插入图片描述

这里找到接口后，不能最直接写在controller上，应该将这个查询订单列表写在serviceImpl中

在这里插入图片描述

//通过物流的id查询发货信息
List<OrderLogistics> orderLogisticsList = orderInfoMapper.selectList(orderInfo.getId());
//将查到的orderLogisticsList set赋值给实体定义的orderLogistics
orderInfo.setOrderLogistics(orderLogisticsList);
System.out.println("成功");

然后重启后端，继续修改小程序，将查到的数组显示在小程序上

这里可以看到小程序调用接口已经接受到了订单的数组

在这里插入图片描述

在小程序的index.wxml找到所对应的模块，这里js所接收的orderInfo已经包含了这个订单的数组，所有不用在定义

在这里插入图片描述

代码如下
要遍历数组的话，使用wx:for，wx:key应该是根据哪一个值进行遍历。
这里的item就代表的是orderInfo.orderLogistics这个数组的内容，不能写成orderInfo.orderLogistics.id，这样就不会显示。

  <view class="cu-card mar-top-30" wx:for="{{orderInfo.orderLogistics}}" wx:key="{{item.id}}">
    <view class="cu-item">
      <view class="cu-bar bg-white">
        <view class="action">
          <text class="cuIcon-titles text-orange "></text> 物流信息
        </view>
      </view>
      <view class="margin flex">
        <text class="flex-sub">姓名</text>
        <view class="flex-twice">
          {{item.userName}}
        </view>
      </view>
      <view class="margin flex">
        <text class="flex-sub">电话</text>
        <view class="flex-twice">
          {{item.telNum}}
        </view>
      </view>
      <view class="margin flex">
        <text class="flex-sub">地址</text>
        <view class="flex-twice">
          {{item.address}}
        </view>
      </view>
      <view class="margin flex">
        <text class="flex-sub">快递公司</text>
        <view class="flex-twice">
          {{item.logisticsDesc}}
        </view>
      </view>
      <view class="margin flex">
        <text class="flex-sub">快递单号</text>
        <view class="flex-twice">
          {{item.id}}
          <button class="cu-btn sm" bindtap="copyData" data-data="{{item.id}}">复制</button>
        </view>
      </view>
    </view>
  </view>