uniapp支付页面模板前端代码

以下是一个简单的支付页面模板的前端代码示例，使用uni-app框架：

<template>
  <view class="pay-page">
    <view class="pay-info">
      <image class="pay-icon" src="../static/icon-pay.png" mode="aspectFit"></image>
      <text class="pay-amount">{{amount}}元</text>
      <text class="pay-description">{{description}}</text>
    </view>
    <view class="pay-methods">
      <view class="pay-method" v-for="(method,index) in methods" :key="index" @click="selectMethod(index)">
        <image class="pay-method-icon" :src="method.icon" mode="aspectFit"></image>
        <text class="pay-method-name">{{method.name}}</text>
        <image class="pay-method-check" v-if="selectedMethodIndex === index" src="../static/icon-checked.png" mode="aspectFit"></image>
      </view>
    </view>
    <view class="pay-button" @click="pay">确认支付</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      amount: 10.00, // 支付金额
      description: '购买会员', // 支付描述
      methods: [ // 支付方式列表
        { name: '微信支付', icon: '../static/icon-wechat.png' },
        { name: '支付宝支付', icon: '../static/icon-alipay.png' },
      ],
      selectedMethodIndex: 0, // 选中的支付方式
    }
  },
  methods: {
    selectMethod(index) {
      this.selectedMethodIndex = index
    },
    pay() {
      // 调用支付服务接口进行支付
    },
  },
}
</script>

<style>
.pay-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.pay-icon {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}
.pay-amount {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
}
.pay-description {
  font-size: 16px;
  color: #999;
  margin-bottom: 30px;
}
.pay-methods {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 30px;
}
.pay-method {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background-color: #f5f5f5;
  margin-bottom: 10px;
}
.pay-method-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.pay-method-name {
  font-size: 16px;
  color: #333;
  flex: 1;
}
.pay-method-check {
  width: 20px;
  height: 20px;
}
.pay-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  border-radius: 25px;
  background-color: #007aff;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
</style>

在这个示例中，我们使用了uni-app框架的模板语法，定义了一个支付页面组件，包含以下元素：

- 支付信息：显示支付金额和描述
- 支付方式列表：包含多个支付方式，点击每个支付方式可以选择
- 确认支付按钮：点击后调用支付服务接口进行支付

你可以根据自己的需求对这个示例进行修改和扩展，添加更多的支付方式、支付参数等。