Files
jianbing/pages/recharge/recharge.vue
2025-04-29 18:00:10 +08:00

87 lines
2.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class="bg-white u-m-32 u-p-32 br16 block">
<view class="nr">充值金额</view>
<view class="u-m-t-16">
<text class="price">5.0</text>
<text class="bold-400 nr u-m-l-16"></text>
</view>
<view class="u-m-t-32 xs">
<text class="recharge">充值金额</text>
<text>5</text>
</view>
</view>
<view class="bg-white u-m-32 u-p-32 br16 block">
<view class="nr">选择支付方式</view>
<!-- #ifdef MP-WEIXIN -->
<view class="row-between u-m-t-32">
<view class="row-center">
<u-icon name="weixin-circle-fill" color="#28C445" size="80"></u-icon>
<view class="u-m-l-16 lg">微信</view>
</view>
<view class="flex1 row-end">
<u-radio-group v-model="pay.weixin">
<u-radio shape="circle" :active-color="themeColor"></u-radio>
</u-radio-group>
</view>
</view>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<view class="row-between u-m-t-32">
<view class="row-center">
<u-icon name="zhifubao-circle-fill" color="#1477FE" size="80"></u-icon>
<view class="u-m-l-16 lg">支付宝</view>
</view>
<view class="flex1 row-end">
<u-radio-group v-model="pay.alipay">
<u-radio shape="circle" :active-color="themeColor"></u-radio>
</u-radio-group>
</view>
</view>
<!-- #endif -->
</view>
<view class="fixed left-0 right-0 bottom-0 u-m-64">
<u-button @click="pay" hover-class="none" :customStyle="{height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx'}" :hair-line="false">立即支付</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
pay: {
weixin: 0,
alipay: 0
}
}
},
methods: {
pay() {
}
}
}
</script>
<style lang="scss">
.block {
box-shadow: 0rpx 10rpx 10rpx -6rpx rgba(0,0,0,0.1), 0rpx 16rpx 20rpx 2rpx rgba(0,0,0,0.06), 0rpx 6rpx 28rpx 4rpx rgba(0,0,0,0.05);
}
.price {
font-size: 48rpx;
}
.unit {
color: #1f1f1f;
}
.recharge {
color: rgba(0, 0, 0, 0.6);
}
</style>