147 lines
3.0 KiB
Vue
147 lines
3.0 KiB
Vue
<template>
|
||
<view class='content'>
|
||
<view class='balance-view'>
|
||
<image :src='assetsUrl("bg_member_recharge.png")' />
|
||
<view class='balance-content'>
|
||
<text>累计余额（元）</text>
|
||
<text>￥1</text>
|
||
</view>
|
||
<view class='balance-content'>
|
||
<text>当前余额（元）</text>
|
||
<text class='accent-text-color'>￥1</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class='recharge-option-card'>
|
||
<text>充值金额</text>
|
||
<tabbar :titles='rechargeItems?.map(res=>res.title)' @change='change' />
|
||
<view class='divider' />
|
||
<view class='option-item'>
|
||
<image :src='assetsUrl("bg_member_recharge_item.png")' />
|
||
<text>充值{{ rechargeItems[currentIndex].title }}送{{ rechargeItems[currentIndex].price / 10 }}元</text>
|
||
<text class='accent-text-color'>
|
||
实得{{ rechargeItems[currentIndex].price + (rechargeItems[currentIndex].price / 10) }}元
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class='bottom-button-view'>
|
||
<button class='primary-button'>充值</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang='ts' setup>
|
||
import { assetsUrl } from '@/utils/assets';
|
||
|
||
const rechargeItems = ref([
|
||
{
|
||
title: '100元',
|
||
price: 100
|
||
},
|
||
{
|
||
title: '200元',
|
||
price: 200
|
||
},
|
||
{
|
||
title: '500元',
|
||
price: 500
|
||
}, {
|
||
title: '1000元',
|
||
price: 1000
|
||
}]);
|
||
const currentIndex = ref<number>(0);
|
||
|
||
const change = (index: number) => {
|
||
currentIndex.value = index;
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.balance-view {
|
||
display: flex;
|
||
flex-direction: row;
|
||
height: 280rpx;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
}
|
||
|
||
.balance-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
flex: 1;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
color: white;
|
||
|
||
text:nth-of-type(1) {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
text:nth-of-type(2) {
|
||
font-size: 40rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.recharge-option-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
position: relative;
|
||
margin-top: -25rpx;
|
||
|
||
text:nth-of-type(1) {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-top: 20rpx;
|
||
margin-left: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.option-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
margin: 36rpx 20rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 167rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
text:nth-of-type(1) {
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 27rpx;
|
||
margin-left: 30rpx;
|
||
position: absolute;
|
||
}
|
||
|
||
text:nth-of-type(2) {
|
||
display: flex;
|
||
font-size: 30rpx;
|
||
margin-top: 85rpx;
|
||
margin-left: 30rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 185rpx;
|
||
height: 50rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 25rpx;
|
||
position: absolute;
|
||
}
|
||
}
|
||
}
|
||
</style>
|