<template>
|
<view class="container">
|
<view class="list-item-bg" :class="item.status==2?'failure':''" v-for="item in list">
|
<view class="list-item">
|
<view class="list-header">
|
<text class="name">{{item.cardName}}</text>
|
</view>
|
<view class="list-content">
|
<text>
|
¥<text class="ml-10">{{item.realMoney}}</text>
|
</text>
|
</view>
|
<view class="list-footer">
|
<text>赠送金额 ¥ {{item.giftMoney}}</text>
|
<text>有效期：{{item.failTime}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default{
|
data(){
|
return {
|
list: []
|
}
|
},
|
onLoad(options) {
|
this.loadList(options.id)
|
},
|
methods:{
|
loadList(id){
|
this.$httpUtils.request('/api/vip/findVipCardInfo/'+id).then((res) => {
|
if(res.status == 200){
|
this.list = res.rows;
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.container{
|
padding: 10px 15px;
|
}
|
.list-item-bg{
|
border-radius: 10px;
|
}
|
.list-item{
|
color: #FFFFFF;
|
font-size: 14px;
|
padding: 18px 18px;
|
margin-bottom: 10px;
|
}
|
.list-item-bg:nth-child(2n+1){
|
background: url(../../static/images/card-bg2.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
.list-item-bg:nth-child(2n+2){
|
background: url(../../static/images/card-bg3.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
.list-item-bg:nth-child(1){
|
background: url(../../static/images/card-bg1.png) no-repeat;
|
background-size: 100% 100%;
|
}
|
.list-item-bg.failure{
|
background: url(../../static/images/card-bg4.png) no-repeat;
|
background-size: 100% 100%;
|
opacity: 0.8;
|
}
|
.list-header{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.list-header .name{
|
font-size: 16px;
|
font-weight: bold;
|
}
|
.list-content{
|
padding: 20px 0;
|
font-size: 26px;
|
line-height: 30px;
|
}
|
.list-footer{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
</style>
|
