template view view class=address view class=address-tel view class=address-pisific defaultAddressprovincedefaultAddresscitydefaultAddresscounty defaultAddressaddress view vie

本页面为订单预览页面，主要功能为展示用户购买的商品列表、默认地址和总价，并提供提交订单并支付的按钮。

页面组件：

• 顶部：展示默认地址信息
• 中部：展示商品列表
• 底部：展示总价和提交订单按钮

关键代码：

1. 获取页面数据

通过调用接口api.orderPreview()获取订单预览数据，包括商品列表和默认地址信息。在获取默认地址时，筛选res.address数组中is_default字段为1的地址，并将其赋值给defaultAddress变量。

async getOrderList(){
    const res = await this.$u.api.orderPreview()
    this.goodsList = res.carts
    // 判断哪个是默认地址
    const defArr = res.address.filter((currentValue)=>{
        return currentValue.is_default == 1
    })
    // 默认地址数组长度>0才返回位defaultAddress
    if(defArr.length >0){this.defaultAddress = defArr[0]}
},

2. 计算总价

通过计算商品列表中每个商品的价格和数量的乘积，然后将这些乘积累加起来，即可得到总价。

computed:{
    // 总价计算
    allMoney: function(){
        if(this.goodsList.length>0){return this.goodsList.reduce((prev,next)=> {
                return prev +  next.goods.price * next.num
            },0)
        }
        else {return 0}
    }
},

3. 提交订单

点击“提交订单并支付”按钮后，调用接口api.orderSubmit()提交订单，并在成功后跳转到支付页面。

toSubmitOrder(){
    this.$u.api.orderSubmit({
        address_id: this.defaultAddress.id
    }).then(res => {
        uni.navigateTo({
            url: `/pages/order/pay?id=${res.order_id}`
        })
    })
},

样式：

页面布局采用Flex布局，使页面元素能够自适应屏幕大小，并通过position属性控制商品数量的位置。

组件内外部通信说明：

• 跳转到选择地址页面：通过this.$u.route()方法实现。
• 点击“提交订单并支付”按钮：调用toSubmitOrder()方法实现。
• 更新默认地址：通过onShow()方法实现，在每次页面显示时从本地存储中获取addId，并通过接口api.addressInfoDetail()获取地址详情，最后将其赋值给defaultAddress变量