微信小程序项目_秋泊优选60

最新推荐文章于 2024-09-19 21:14:44 发布

未闻花名酱

最新推荐文章于 2024-09-19 21:14:44 发布

阅读量129

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/cpcpn/article/details/108738647

版权

这篇博客介绍了如何在微信小程序中实现订单查询页面的动态渲染，通过使用VSCode的Generate CSS tree插件快速生成样式标签结构，并在index.less中进行样式设置。同时讲解了如何处理订单日期，将时间戳转换为可读格式，以及在index.js中遍历数据并修改orders值以实现动态显示。

摘要由CSDN通过智能技术生成

56、订单查询页面_动态渲染

pages\order\index.wxml

    <view class="order_main">
        <view
        wx:for="i{orders}}"
        wx:key="order_id"
        class="order_item">
        
            <view class="order_no_row">
                <view class="order_no_text">订单编号</view>
                <view class="order_no_value">{{item.order_number}}</view>
            </view>
            <view class="order_price_row">
                <view class="order_price_text">订单价格</view>
                <view class="order_price_value">￥{{item.order_price}}</view>
            </view>
            <view class="order_time_row">
                <view class="order_time_text">订单日期</view>
                <view class="order_time_value">{{item.create_time_cn}}</view>
            </view>

        </view>
    </view>

在vsc选中实现的标签样式——>快捷键Ctrl+Shift+p——>选择Generate CSS tree——>就会生成view.order_main{ Untitled-1
（利用Generate CSS tree插件快速生成样式标签结构）
将view.order_main{ Untitled-1文件标签结构复制到——>pages\order\index.less——>不需view标签名

.order_main {
    .order_item {
      .order_no_row {
        .order_no_text {
  
        }
  
        .order_no_value {
  
        }
      }
  
      .order_price_row {
        .order_price_text {
  
        }
  
        .order_price_value {
  
        }
      }
  
      .order_time_row {
        .order_time_text {
  
        }
  
        .order_time_value {
  
        }
      }
    }
  }

添加样式
pages\order\index.less

.order_main {
    .order_item {
        padding: 20rpx;
        border-bottom:1rpx solid #ccc;
        color:#666;
      .order_no_row {
        display: flex;
        padding:10rpx 0;
        justify-content: space-between;
        .order_no_text {
  
        }
  
        .order_no_value {
  
        }
      }
  
      .order_price_row {
        display: flex;
        padding:10rpx 0;
        justify-content: space-between;
        .order_price_text {
            
        }
  
        .order_price_value {
            color: var(--themeColor);
            font-size: 32rpx;
        }
      }
  
      .order_time_row {
        display: flex;
        padding:10rpx 0;
        justify-content: space-between;
        .order_time_text {
  
        }
  
        .order_time_value {
  
        }
      }
    }
  }

处理订单日期（时间戳，单位秒）
获取到数据遍历处理（修改orders值）
pages\order\index.js

  // 获取订单列表的方法
  async getOrders(type){
    const res=await request({url:"/my/orders/all", data:{type}});
    this.setData({
      orders: res.orders.map(v=>({...v,create_time_cn:(new Date(v.create_time*1000).toLocaleString())}))
    })
  },