87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
<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> |