You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
3.8 KiB
145 lines
3.8 KiB
<template>
|
|
<view class="recharge">
|
|
<view class="recharge-header font-28 theme-color flex justify-end m-b-30" >
|
|
<view @click="detail">
|
|
<text class="m-r-10">充值明细</text>
|
|
<u-icon name="arrow-right" color="#01AEEA" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="recharge-container flex align-center flex-wrap justify-between">
|
|
<view
|
|
class="recharge-container-item flex flex-column align-center justify-between m-b-20"
|
|
:class="{ 'recharge-container-item--active': item === current }"
|
|
v-for="item in 6"
|
|
:key="item"
|
|
@click="handleClick(item)"
|
|
>
|
|
<view class="m-b-10">
|
|
<text class="font-16 recharge-container-item-txt m-r-20">充</text>
|
|
<text class="font-26 recharge-container-item-txt">10</text>
|
|
</view>
|
|
<view class="m-b-10">
|
|
<text class="font-16 recharge-container-item-txt m-r-10">得</text>
|
|
<text class="font-50 recharge-container-item-txt">20</text>
|
|
</view>
|
|
<text class="font-18 recharge-container-item-txt m-b-10 text-center">（500消费金+100兑购金）</text>
|
|
<text class="font-16 text-red text-center">活动结束时间： 2022/05/28 12:00</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="recharge-tips">
|
|
<view class="font-32 text-black font-weight-bold m-b-20">充值说明</view>
|
|
<view class="font-26 text-black">1、1个消费金等于1元，1个兑购金等于1元；消费金可用于 全场购物(特价除外)，兑购金可用于兑购商城里购物！</view>
|
|
</view>
|
|
|
|
<view class="recharge-welfare position-relative">
|
|
<view class="position-absolute recharge-welfare-circular flex align-center">
|
|
<view class="recharge-welfare-circular-item flex align-center justify-center" v-for="(item, index) in textList" :key="index">
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
<u-collapse-item
|
|
:accordion="false"
|
|
:open="item.open"
|
|
:title="item.head"
|
|
v-for="(item, index) in itemList"
|
|
:key="index"
|
|
>
|
|
{{ item.body }}
|
|
</u-collapse-item>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
current: null,
|
|
textList: ['充', '值', '福', '利'],
|
|
itemList: [
|
|
{
|
|
head: '普通用户',
|
|
body: '只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来',
|
|
open: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
head: '次卡会员',
|
|
body: '学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美',
|
|
open: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
head: '银卡会员',
|
|
body: '但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美',
|
|
open: true,
|
|
disabled: true
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
handleClick(index) {
|
|
this.current = index;
|
|
},
|
|
detail () {
|
|
this.$tools.navigateTo({
|
|
url: '/pages/home/rechargeDetail'
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.recharge {
|
|
padding: 40rpx 40rpx 30rpx;
|
|
&-container {
|
|
margin-bottom: 70rpx;
|
|
&-item {
|
|
width: 32%;
|
|
background: #ffffff;
|
|
border: 2rpx solid #707070;
|
|
border-radius: 24rpx;
|
|
box-shadow: 0 4rpx 6rpx 0 rgba(0, 0, 0, 0.16);
|
|
padding: 12rpx 0;
|
|
&-txt {
|
|
color: #707070;
|
|
}
|
|
&--active {
|
|
border-color: $u-type-primary;
|
|
.recharge-container-item-txt {
|
|
color: $u-type-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-tips {
|
|
margin-bottom: 50rpx;
|
|
}
|
|
|
|
&-welfare {
|
|
border: 6rpx solid #f6cb86;
|
|
padding: 60rpx 50rpx;
|
|
border-radius: 20rpx;
|
|
&-circular {
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
&-item {
|
|
width: 83rpx;
|
|
height: 84rpx;
|
|
background: #f6cb86;
|
|
border-radius: 50%;
|
|
font-size: 43rpx;
|
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
|
font-weight: 700;
|
|
color: #a12527;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|