小程序订单页

最新推荐文章于 2026-07-13 05:13:39 发布

原创最新推荐文章于 2026-07-13 05:13:39 发布 · 1.1k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

微信小程序

本文介绍了如何在微信小程序中创建订单页面，特别是处理订单列表显示。通过深拷贝技术（JSON.parse(JSON.stringify())）实现对本地存储数组的复制，限制显示一条记录，并动态更新列表件数。在用户操作时，根据数组长度调整显示内容。

在这里插入图片描述

<view>
	<view class="pay_header" wx:for='{{ cart }}' wx:key='index'>
		<view class="pay_top">
			<view>{{ item.title }}</view>
			<view>￥{{ item.price }}</view>
		</view>
		<view class="pay_bottom">x{{ item.num }}</view>
	</view>
</view>
<view class="total"  bindtap="_handleOrderToggle">
 <text>共{{_c.length}}件商品 {{ cart.length > 1 ? "收起" : "展开"}} <text class="iconfont {{cart.length > 1 ? 'icon-shouqi' : 'icon-zhankai'}}"></text></text>
</view>

<view class="money_box">
	<view>余额（4元）</view>
	<view>
		<switch bindchange="switch1Change" color='#f60' />
	</view>
</view>
<view class="money_box">
	<view>商品金额</view>
	<view>￥{{totalPrice}}</view>
</view>
<view class="money_box">
	<view>余额减扣</view>
	<view>-￥{{flag ? num : '0'}}</view>
</view>
<view class="info" ><icon type="info" color="#ccc"></icon>  请支付完成后携带商品</view>
<view class="active">
	<view>实际支付:<text>￥{{ totalPrice }}</text></view>
	<view bindtap="confirm">确认支付</view>
</view>

// pages/pay/pay.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    flag: false,
    cart:[],
    totalPrice:'',
    num:4,
    _c : [],
    _d : [],
  },
  // 价格计算
  setPrice(){
    let totalPrice = 0;   
    this.data.cart.forEach(v => {  
      totalPrice += v.num * v.price;  
    })
    if(this.data.flag){
      totalPrice -= this.data.num
    }
    this.setData({
      totalPrice:totalPrice.toFixed(2),
    })
  },

  switch1Change(e){ 
    this.setData({
      flag:e.detail.value
    })
    this.setPrice()
  },
  confirm(){
  wx.navigateTo({
    url: '/pages/confirm/confirm',
})
  },
  _handleOrderToggle(){
    console.log(this.data.cart.length)
    if(this.data.cart.length > 1){
      this.setData({
        cart : this.data._d
      })
    }else{
      this.setData({
        cart : this.data._c
      })
    }
    
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let cart = wx.getStorageSync("cart") || [];
    let _c = JSON.parse(JSON.stringify(cart));
    console.log(_c)
    cart.length = 1;
    let _d = JSON.parse(JSON.stringify(cart));
    if(cart.length>0){
      this.setData({
        cart :_d,
        _d,
        _c
      })
    }
  
    this.setPrice()
   
  }

})

在做微信小程序的时候有一个订单页面，默认只显示一条，其余的会隐藏，下面有一个隐藏收起，还有当前列表的件数，就用了一个深拷贝，通过JSON.parse(JSON.stringify(cart))对本地存储的数组进行深拷贝，再让列表的长度等于1，通过let _d=JSON.parse(JSON.stringify(cart))对本地存储的数组进行深拷贝第一条数据，如果数组长度>0,把_d赋给数组。