需要仿支付宝充值中心的uni-app小程序页面

当然，为了仿制支付宝充值中心的uni-app小程序页面，我们需要创建一个基本的页面布局，并模拟一些核心功能。以下是一个简单的示例代码，展示了如何创建一个充值中心页面。

1. 创建页面结构

首先，在pages目录下创建一个新的页面，比如recharge。

recharge.vue

<template>
  <view class="container">
    <view class="header">
      <text>充值中心</text>
    </view>
    <view class="amount-selector">
      <radio-group @change="onAmountChange">
        <label v-for="amount in amounts" :key="amount">
          <radio :value="amount">{{ amount }} 元</radio>
        </label>
      </radio-group>
    </view>
    <view class="payment-methods">
      <button v-for="method in paymentMethods" :key="method.name" @click="selectPaymentMethod(method)">
        <image :src="method.icon" class="method-icon"/>
        <text>{{ method.name }}</text>
      </button>
    </view>
    <view class="confirm-button">
      <button @click="confirmPayment">立即充值</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      amounts: [10, 30, 50, 100],
      selectedAmount: 10,
      paymentMethods: [
        { name: '支付宝', icon: '/static/alipay.png' },
        { name: '微信支付', icon: '/static/wechat.png' },
      ],
      selectedPaymentMethod: null,
    };
  },
  methods: {
    onAmountChange(e) {
      this.selectedAmount = e.detail.value;
    },
    selectPaymentMethod(method) {
      this.selectedPaymentMethod = method;
    },
    confirmPayment() {
      // 处理支付逻辑
      console.log('支付金额:', this.selectedAmount);
      console.log('支付方式:', this.selectedPaymentMethod.name);
      // 跳转到支付确认页面或发起支付请求
    },
  },
};
</script>

<style>
/* 添加样式以匹配支付宝界面 */
.container {
  padding: 20px;
}
.header {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
.amount-selector, .payment-methods {
  margin-top: 20px;
}
.method-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.confirm-button {
  margin-top: 40px;
  text-align: center;
}
button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>

2. 注册页面

在pages.json中注册这个新页面：

{
  "pages": [
    {
      "path": "pages/recharge/recharge",
      "style": {
        "navigationBarTitleText": "充值中心"
      }
    }
    // 其他页面...
  ]
}

这个示例代码展示了如何创建一个基本的充值中心页面，包括金额选择器和支付方式选择器。你可以根据具体需求进一步扩展和完善这个页面，比如添加更多的支付方式、处理实际的支付请求等。