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框架的模板语法，定义了一个支付页面组件，包含以下元素：

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

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