<template>
|
<view>
|
<view v-if="cardInfo.type === 0" class="bg-fff u-p-30">
|
<view class="u-font-34 font-bold">会员卡充值</view>
|
<view class="item-box">
|
<view @click="clickItem(0)" class="item" :class="{'act-item': current==0}">
|
<view>
|
<text>充</text>
|
<text class="big-num">200</text>
|
</view>
|
<view class="u-font-26">送20</view>
|
</view>
|
<view @click="clickItem(1)" class="item" :class="{'act-item': current==1}">
|
<view>
|
<text>充</text>
|
<text class="big-num">80</text>
|
</view>
|
<view class="u-font-26">送5</view>
|
</view>
|
</view>
|
|
</view>
|
<view v-if="cardInfo.type === 1" class="bg-f u-p-30">
|
<view class="u-font-34 font-bold">次卡购买</view>
|
<view class="item-box">
|
<view @click="clickItem(0)" class="item" :class="{'act-item': current==0}">
|
<view><text>￥</text><text class="big-num">200</text></view>
|
<view class="u-font-26">12次</view>
|
</view>
|
<view @click="clickItem(1)" class="item" :class="{'act-item': current==1}">
|
<view><text>￥</text><text class="big-num">100</text></view>
|
<view class="u-font-26">5次</view>
|
</view>
|
</view>
|
|
</view>
|
<view class="u-p-30">
|
<button class="u-reset-button" @click="">
|
<view v-if="cardInfo.type === 1" class="u-font-32">马上购买</view>
|
<view v-else class="u-font-32">马上充值</view>
|
<view class="u-font-20">余额随时可退</view>
|
</button>
|
<view class="tips u-flex">
|
<view class="u-flex-1 u-flex u-row-center">
|
<image src="/static/zjjg/zjbz.png"></image>
|
<view>资金保障安全</view>
|
</view>
|
<view class="u-flex u-flex-1 u-row-center">
|
<image src="/static/zjjg/tuikuan.png"></image>
|
<view class="u-m-l-4">余额随时可退</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
cardInfo: {
|
type: '',
|
name: '',
|
amount: 0,
|
score: 0,
|
times: 0
|
},
|
current: 0
|
};
|
},
|
onLoad(opt) {
|
this.cardInfo = JSON.parse(decodeURIComponent(opt.cardInfo))
|
},
|
methods: {
|
clickItem(index){
|
this.current = index
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.item-box{
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
}
|
.item{
|
width: 330rpx;
|
text-align: center;
|
margin-top: 30rpx;
|
padding: 24rpx;
|
border-radius: 16rpx;
|
background-color: #fff;
|
color: #999;
|
border: 1px solid #eee;
|
}
|
.act-item{
|
background-color: #e93b3d;
|
color: #fff;
|
}
|
.big-num{
|
font-size: 50rpx;
|
font-weight: bold;
|
}
|
.u-reset-button{
|
background-color: #e93b3d;
|
color: #fff;
|
padding: 18rpx 0;
|
}
|
.tips{
|
border-radius: 8rpx;
|
margin-top: 30rpx;
|
background-color: #eee;
|
font-size: 24rpx;
|
text-align: center;
|
padding: 10rpx 0;
|
image{
|
width: 40rpx;
|
height: 40rpx;
|
}
|
}
|
</style>
|
