fix

Helius

2021-02-20 45fb4b11ad51bb38306765b11a6747402e382cee

 hive-app/pages/member/membershipCard.vue

@@ -1,18 +1,19 @@
<template>
   <view class="container">
      <view class="card-item">
         <view class="card-header">
            <text class="name">会员卡</text>
            <text>NO 23564</text>
         </view>
         <view class="card-content">
            <text>
               ¥ 5656789
            </text>
         </view>
         <view class="card-footer">
            <text>赠送金额 ¥ 5656</text>
            <text>有效期：2025-10-20</text>
      <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>
@@ -20,44 +21,73 @@

<script>
   export default{
      components:{
			
      },
      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 10px;
      padding: 10px 15px;
   }
   .card-item{
      background: #F0AD4E;
   .list-item-bg{
      border-radius: 10px;
   }
   .list-item{
      color: #FFFFFF;
      font-size: 14px;
      padding: 12px 15px;
      border-radius: 4px;
      padding: 18px 18px;
      margin-bottom: 10px;
   }
   .card-header{
   .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;
   }
   .card-header .name{
      font-size: 22px;
   .list-header .name{
      font-size: 16px;
      font-weight: bold;
   }
   .card-content{
		
   .list-content{
      padding: 20px 0;
      font-size: 26px;
      line-height: 30px;
   }
   .card-footer{
		
   .list-footer{
      display: flex;
      justify-content: space-between;
      align-items: center;
   }
</style>