From 1d1e327a1cbf8bd822078a9f71894f25ddcee437 Mon Sep 17 00:00:00 2001 From: queenwuli <942534046@qq.com> Date: Mon, 11 Jan 2021 10:32:49 +0800 Subject: [PATCH] gx --- hive-app/pages/member/membershipCard.vue | 90 ++++++++++++++++++++++++++++++--------------- 1 files changed, 60 insertions(+), 30 deletions(-) diff --git a/hive-app/pages/member/membershipCard.vue b/hive-app/pages/member/membershipCard.vue index 6b5db92..90931f9 100644 --- a/hive-app/pages/member/membershipCard.vue +++ b/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> -- Gitblit v1.9.1