当前位置：首页 > uni-app

uniapp结算页面

2026-01-16 16:12:00uni-app

uniapp 结算页面实现

页面布局设计

结算页面通常包含商品列表、价格汇总、收货地址和支付方式选择。使用 uni-list 组件展示商品信息，uni-forms 收集用户收货信息，radio-group 选择支付方式。

uniapp结算页面

<template>
  <view class="checkout-container">
    <uni-list>
      <uni-list-item v-for="item in cartItems" :key="item.id" :title="item.name" :note="`¥${item.price} x ${item.quantity}`"></uni-list-item>
    </uni-list>

    <view class="price-section">
      <text>总金额: ¥{{totalPrice}}</text>
    </view>

    <uni-forms ref="form" :model="formData">
      <uni-forms-item label="收货地址" name="address">
        <uni-easyinput v-model="formData.address" placeholder="请输入详细地址"></uni-easyinput>
      </uni-forms-item>
    </uni-forms>

    <radio-group @change="handlePaymentChange">
      <label v-for="method in paymentMethods" :key="method.value">
        <radio :value="method.value" :checked="method.checked"/> {{method.name}}
      </label>
    </radio-group>

    <button type="primary" @click="submitOrder">提交订单</button>
  </view>
</template>

数据绑定与计算

在 script 部分定义响应式数据，计算总价逻辑：

uniapp结算页面

<script>
export default {
  data() {
    return {
      cartItems: [
        {id: 1, name: '商品A', price: 99, quantity: 2},
        {id: 2, name: '商品B', price: 199, quantity: 1}
      ],
      formData: {
        address: ''
      },
      paymentMethods: [
        {name: '微信支付', value: 'wechat', checked: true},
        {name: '支付宝', value: 'alipay'}
      ],
      selectedPayment: 'wechat'
    }
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0)
    }
  },
  methods: {
    handlePaymentChange(e) {
      this.selectedPayment = e.detail.value
    },
    submitOrder() {
      uni.showLoading({title: '订单处理中'})
      // 调用订单API
      setTimeout(() => {
        uni.hideLoading()
        uni.redirectTo({url: '/pages/order/success'})
      }, 1500)
    }
  }
}
</script>

样式优化

添加基础样式增强用户体验：

<style>
.checkout-container {
  padding: 20rpx;
}
.price-section {
  padding: 30rpx 0;
  text-align: right;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}
radio-group {
  margin: 40rpx 0;
}
radio-group label {
  display: block;
  padding: 20rpx 0;
}
</style>

支付功能集成

根据选择的支付方式调用不同API：

// 在submitOrder方法中扩展支付逻辑
if(this.selectedPayment === 'wechat') {
  uni.requestPayment({
    provider: 'wxpay',
    orderInfo: { /* 从服务器获取的支付参数 */ },
    success: () => { /* 支付成功处理 */ },
    fail: (err) => { /* 失败处理 */ }
  })
} else {
  uni.requestPayment({
    provider: 'alipay',
    orderInfo: { /* 支付宝支付参数 */ }
  })
}