BJ_web_developers / HSpark

Blame view

src/views/cardticket/index.vue 3.93 KB
Edit Raw Normal View History Permalink
a72ae217   王富生   第一次提交 
1
f53f45e7   Andy   add 我的卡券 账户前端页面 t... 
2
3
 
  <template>
    <div class="app-container" style="padding: 0px">
dfc9b132   Andy   首页add 地图缩放 
4
5
6
7
 
      <div class="card_null" v-if="ticketList===null || ticketList.length===0" >
        <img src="../../assets/service/nodatacard.png" alt=""/>
        <p class="card_nulltit">暂无卡券</p>
      </div>
f53f45e7   Andy   add 我的卡券 账户前端页面 t... 
8
 
      <!--卡券 sta-->
dfc9b132   Andy   首页add 地图缩放 
9
10
11
12
13
14
15
16
17
18
19
20
 
      <div v-else>
        <el-row :gutter="16" >
          <el-col :span="6" v-for="(ticket,id) in ticketList" :key="id" class="margin-bottom16">
            <el-card class="box-card">
              <div class="ticket-title boxshadow-4 eff-bgcolor " >
                <div class=" float-left eff-icon"></div>
                <div class="ticket-name hs-hidden-nowrap hs-cursor-pointer float-left" >{{ticket.orgName}}-{{ticket.cardName}}</div>
                <div class="ticket-oper float-right">有效</div>
              </div>
              <div class="ticket-content">
                <div class="ticket-main clearfix" >
                  <div class=" hs-hidden-nowrap hs-cursor-pointer float-left ticket-effmoney"  >{{ticket.fullCutValue | fen2Yuan}}</div>
ea291b39   王富生   提交登陆 
21
dfc9b132   Andy   首页add 地图缩放 
22
23
24
 
                  <div class="ticket-notes float-left">元 优惠券</div>
                </div>
                <div class="ticket-time">有效时间:{{ticket.endTime | string2Date(1)}}</div>
f53f45e7   Andy   add 我的卡券 账户前端页面 t... 
25
 
              </div>
dfc9b132   Andy   首页add 地图缩放 
26
27
28
29
 
            </el-card>
          </el-col>
        </el-row>
      </div>
a72ae217   王富生   第一次提交 
30
31
32
33
 
    </div>
  </template>
  
  <script>
ea291b39   王富生   提交登陆 
34
 
    import {getCouponPerson} from '@/api/cardticket.js';
a72ae217   王富生   第一次提交 
35
 
  export default {
a72ae217   王富生   第一次提交 
36
37
 
    data() {
      return {
dfc9b132   Andy   首页add 地图缩放 
38
 
        ticketList:[]
a72ae217   王富生   第一次提交 
39
40
 
      }
    },
a72ae217   王富生   第一次提交 
41
 
    methods: {
ea291b39   王富生   提交登陆 
42
43
44
45
46
47
48
49
50
51
52
 
      /**查询车主个人卡券*/
      getCouponPerson:function () {
        getCouponPerson().then(response =>{
          if(response.code='8888'){
               this.ticketList=response.data;
          }
        });
      }
    },
    mounted:function () {
      this.getCouponPerson();
a72ae217   王富生   第一次提交 
53
54
55
56
 
    }
  }
  </script>
f53f45e7   Andy   add 我的卡券 账户前端页面 t... 
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
  <style lang="scss" scoped>
    .el-card__body{
      padding: 0;
    }
    .ticket-title{
      height: 46px;
      line-height: 46px;
      width: 100%;
    }
    .ticket-content{
      height: 98px;
      width: 100%;
    }
    .eff-bgcolor{
      background-color: rgb(64, 158, 255);
    }
    .off-bgcolor{
      background-color: #909399;
    }
    .eff-icon{
      margin:8px 8px 8px 16px;
      height: 30px;
      width: 30px;
      background-image: url("../../assets/cardticket/card_red.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .off-icon{
      margin:8px 8px 8px 16px;
      height: 30px;
      width: 30px;
      background-image: url("../../assets/cardticket/card_gray.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .ticket-name{
      width:120px;
      height:46px;
      font-size:14px;
      font-weight:500;
      color:rgba(255,255,255,1);
      line-height:46px;
    }
    .ticket-oper{
      font-size:12px;
      font-weight:500;
      color:rgba(255,255,255,1);
      width:42px;
      height:20px;
      line-height: 20px;
      text-align: center;
      border-radius:2px;
      margin-top: 10px;
      margin-right: 16px;
      border:1px solid rgba(255,255,255,1);
    }
    .ticket-main{
      width:100%;
      height:62px;
      .ticket-effmoney{
        font-size:44px;
        font-weight:600;
        color:rgb(64, 158, 255);
        height:62px;
        line-height:62px;
        margin-left: 16px;
        max-width: 120px;
      }
      .ticket-offmoney{
        font-size:44px;
        font-weight:600;
        color:rgba(92,92,92,1);
        height:62px;
        line-height:62px;
        margin-left: 16px;
        max-width: 120px;
      }
      .ticket-notes{
        height: 20px;
        line-height: 20px;
        font-size:14px;
        font-weight:500;
        color:rgba(64,64,64,1);
        width: 70px;
        margin-left: 10px;
        margin-top: 30px;
      }
    }
    .ticket-time{
      width:143px;
      height:20px;
      font-size:14px;
      font-weight:500;
      color:rgba(64,64,64,1);
      line-height:20px;
      margin-left: 16px;
    }
dfc9b132   Andy   首页add 地图缩放 
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
 
    .card_null{
      margin-top: 50px;
      text-align: center;
    }
    .card_null img{
      width: 184px;
      height: 184px;
    }
    .card_nulltit{
      font-size: 20px;
      font-weight: 400;
      height: 30px;
      line-height: 30px;
      color: rgb(144, 147, 153);
    }
f53f45e7   Andy   add 我的卡券 账户前端页面 t... 
169
170
 
  
  </style>