BJ_web_developers / jy_parkingOS

Blame view

pages/businessCard/cardDetail.vue 11.1 KB
Edit Raw Normal View History Permalink
e3eb21f6   刘淇   发放券 
1
2
 
  <template>
      <view>
9bac797d   刘淇   卡券发放 
3
4
5
 
          <view class="statistics yellow-bg uni-list-cell-pd" style="color: #fff">
              共{{issuedCount}}张券被领取，合计金额{{$common.moneyFormat(totalFee)}}元，其中已使用{{usedCount}}张
          </view>
e3eb21f6   刘淇   发放券 
6
7
8
9
10
11
12
13
 
  
  
          <view class="uni-list">
              <view class="uni-list-cell">
                  <view class="uni-list-cell-left">
                      所有类型
                  </view>
                  <view class="uni-list-cell-db">
4a929260   刘淇   商户券明细 
14
15
 
                      <picker @change="bindPickerChange($event,array)" :value="index" :range="array" :range-key="'text'">
                          <view class="uni-input">{{array[index].text}}</view>
e3eb21f6   刘淇   发放券 
16
17
18
19
20
21
22
23
24
25
26
 
                      </picker>
                  </view>
              </view>
          </view>
  
          <view class="uni-list">
              <view class="uni-list-cell">
                  <view class="uni-list-cell-left">
                      所有状态
                  </view>
                  <view class="uni-list-cell-db">
4a929260   刘淇   商户券明细 
27
28
29
 
                      <picker @change="bindPickerChangeWay($event,arrayWay)" :value="indexWay" :range="arrayWay"
                              :range-key="'text'">
                          <view class="uni-input">{{arrayWay[indexWay].text}}</view>
e3eb21f6   刘淇   发放券 
30
31
32
33
34
35
36
37
38
39
40
41
 
                      </picker>
                  </view>
              </view>
          </view>
  
  
          <view class="uni-list">
              <view class="uni-list-cell">
                  <view class="uni-list-cell-left">
                      开始时间
                  </view>
                  <view class="uni-list-cell-db">
78e17486   刘淇   商户券明细 
42
43
44
 
                      <picker mode="date" :value="beginTime" :start="startDate" :end="endDate"
                              @change="bindStartDateChange">
                          <view class="uni-input">{{beginTime}}</view>
e3eb21f6   刘淇   发放券 
45
46
47
48
49
50
51
52
53
54
55
 
                      </picker>
                  </view>
              </view>
          </view>
  
          <view class="uni-list">
              <view class="uni-list-cell">
                  <view class="uni-list-cell-left">
                      结束时间
                  </view>
                  <view class="uni-list-cell-db">
78e17486   刘淇   商户券明细 
56
57
 
                      <picker mode="date" :value="endTime" :start="startDate" :end="endDate" @change="bindEndDateChange">
                          <view class="uni-input">{{endTime}}</view>
e3eb21f6   刘淇   发放券 
58
59
60
61
62
 
                      </picker>
                  </view>
              </view>
          </view>
4a929260   刘淇   商户券明细 
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
          <view v-if="dataList.length>0">
              <view v-for="(i, index) in dataList" :key="i.id">
                  <!--<uni-section :title="i.cardRuleName+'('+i.cardType|cardTypeFormate+')'" type="line">-->
                  <uni-section :title="`${i.cardRuleName}   (${$common.cardTypeFormat(i.cardType)})`" type="line">
                      <uni-list>
                          <uni-list-item>
                              <template v-slot:body>
                                  <view class="slot-box uni-con-width">
                                      <view class="uni-flex uni-space-between ">
                                          <view class="color-blue">
                                              {{i.cardNo}}
                                          </view>
                                          <view class="color-blue">
                                              {{i.carNumber}}
                                          </view>
78e17486   刘淇   商户券明细 
78
 
                                      </view>
4a929260   刘淇   商户券明细 
79
80
81
 
                                      <view class="uni-flex uni-space-between" style="padding: 10px 0">
                                          <view>
                                              <text class="color-blue paddingRight">领取时间</text>
9bac797d   刘淇   卡券发放 
82
83
 
                                              <uni-dateformat :date="i.issuedEffDate"
                                                              format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
4a929260   刘淇   商户券明细 
84
85
86
87
88
89
90
 
                                          </view>
                                          <view class="color-green" v-if="i.isUesed=='1'">
                                              已使用
                                          </view>
                                          <view class="color-blue" v-else>
                                              未使用
                                          </view>
78e17486   刘淇   商户券明细 
91
 
                                      </view>
4a929260   刘淇   商户券明细 
92
93
94
 
                                      <view class="uni-flex uni-space-between">
                                          <view>
                                              <text class="color-red paddingRight">使用时间</text>
1f1d835f   刘淇   卡券购买下单 
95
96
97
98
99
 
                                              <!--<uni-dateformat v-if="i.isUesed=='1'" :date="i.usedDate"-->
                                                              <!--format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>-->
                                              <!--<uni-dateformat v-else :date="i.exp_data"-->
                                                              <!--format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>-->
                                              <uni-dateformat :date="i.usedDate"
9bac797d   刘淇   卡券发放 
100
 
                                                              format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
1f1d835f   刘淇   卡券购买下单 
101
4a929260   刘淇   商户券明细 
102
103
 
                                          </view>
                                          <view class="color-green">
1f1d835f   刘淇   卡券购买下单 
104
 
                                              {{$common.moneyFormat(i.fullCutValue)}}元/张
4a929260   刘淇   商户券明细 
105
 
                                          </view>
78e17486   刘淇   商户券明细 
106
107
 
                                      </view>
                                  </view>
4a929260   刘淇   商户券明细 
108
109
110
111
112
 
                              </template>
                          </uni-list-item>
                      </uni-list>
                  </uni-section>
              </view>
438e8e43   刘淇   卡券购买下单 
113
 
              <!--<uni-load-more :status="status"/>-->
78e17486   刘淇   商户券明细 
114
 
          </view>
438e8e43   刘淇   卡券购买下单 
115
 
          <uni-load-more :status="status"/>
78e17486   刘淇   商户券明细 
116
e3eb21f6   刘淇   发放券 
117
118
119
120
 
      </view>
  </template>
  
  <script>
e3eb21f6   刘淇   发放券 
121
122
123
124
125
126
127
 
  export default {
    data() {
      const currentDate = this.getDate({
        format: true
      })
      return {
        title: 'picker',
4a929260   刘淇   商户券明细 
128
129
130
131
132
133
134
135
136
137
138
 
        array: [
          {text: '单次券', id: 1},
          {text: '时长券', id: 2},
          {text: '满减券', id: 3},
          {text: '金额券', id: 4},
          {text: '包天券', id: 5},
        ],
        arrayWay: [
          {text: '已使用/绑定', id: 1},
          {text: '未使用', id: 0},
        ],
e3eb21f6   刘淇   发放券 
139
140
 
        index: 0,
        indexWay: 0,
4a929260   刘淇   商户券明细 
141
142
 
        cardType: '1', //卡券类型 ：1-单次券，2-时长券，3-满减券，4-金额券，5-包天券
        isUesed: '1',  //1:已使用/绑定 0:未使用
78e17486   刘淇   商户券明细 
143
144
 
        beginTime: currentDate,
        endTime: currentDate,
78e17486   刘淇   商户券明细 
145
146
 
        pageNum: '1',//当前页
        pageSize: '10',//每页条数
9bac797d   刘淇   卡券发放 
147
 
        totalPages: '1', // 总条数
df5a06e0   刘淇   商户券明细 
148
 
        status: 'no-more',
78e17486   刘淇   商户券明细 
149
 
        dataList: [],
9bac797d   刘淇   卡券发放 
150
151
152
 
        issuedCount: 0,// 被领取张数
        usedCount: 0,// 使用张数
        totalFee: 0, // 金额
e3eb21f6   刘淇   发放券 
153
154
155
156
157
158
 
      }
    },
    onLoad(params) {
      wx.showShareMenu({
        withShareTicket: true
      })
df5a06e0   刘淇   商户券明细 
159
 
      this.fetchData()
9bac797d   刘淇   卡券发放 
160
 
      this.couponDetailSummary()
e3eb21f6   刘淇   发放券 
161
162
163
 
    },
    onShow() {
      var me = this;
e3eb21f6   刘淇   发放券 
164
 
    },
df5a06e0   刘淇   商户券明细 
165
166
167
168
169
170
171
172
173
174
175
176
 
    // 下拉刷新触发
    onPullDownRefresh(val) {
      console.log('下拉刷新触发')
      this.pageNum = 1
      this.pageSize = this.pageSize
      this.totalPages = 1
      this.dataList = []
      this.fetchData()
    },
    // 上拉加载触发
    onReachBottom() {
      console.log('上拉加载触发')
bc3fbd76   刘淇   商户券明细 
177
178
 
      console.log(this.totalPages)
      console.log(this.dataList.length)
ca970168   刘淇   商户券明细 
179
180
 
      if (this.totalPages == this.dataList.length) {
        this.status = 'no-more'
ca970168   刘淇   商户券明细 
181
182
183
 
        return
      } else {
        this.pageNum++;
bc3fbd76   刘淇   商户券明细 
184
 
        this.fetchData()
ca970168   刘淇   商户券明细 
185
 
      }
df5a06e0   刘淇   商户券明细 
186
 
    },
e3eb21f6   刘淇   发放券 
187
188
189
190
191
192
193
194
195
 
    computed: {
      startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      }
    },
    methods: {
df5a06e0   刘淇   商户券明细 
196
 
      fetchData: function () {
78e17486   刘淇   商户券明细 
197
 
        let that = this
df5a06e0   刘淇   商户券明细 
198
 
        that.status = 'loading'
78e17486   刘淇   商户券明细 
199
200
201
 
        let paramsData = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
9bac797d   刘淇   卡券发放 
202
203
 
          beginTime: this.beginTime + ' 00:00:00',
          endTime: this.endTime + ' 23:59:59',
4a929260   刘淇   商户券明细 
204
205
 
          cardType: this.cardType.toString(), //卡券类型 ：1-单次券，2-时长券，3-满减券，4-金额券，5-包天券
          isUesed: this.isUesed.toString(),  //1:已使用/绑定 0:未使用
78e17486   刘淇   商户券明细 
206
207
208
209
210
211
212
 
        }
        // 首页信息获取 接口
        that.$myRequest({
          url: that.$common.couponIssuedParkPage,
          method: 'POST',
          data: that.$common.requestSign(paramsData)
        }).then(res => {
df5a06e0   刘淇   商户券明细 
213
 
          // const resDataArray = that.dataList.concat(res.data.dataList);
438e8e43   刘淇   卡券购买下单 
214
215
216
217
218
219
220
221
222
 
          if(res.data.dataList.length>0){
            if (res.data.pageTotals < 10) {
              that.status = 'no-more'
            } else {
              that.status = 'more'
              console.log('more')
            }
          }else{
            that.status = 'no-more'
df5a06e0   刘淇   商户券明细 
223
 
          }
438e8e43   刘淇   卡券购买下单 
224
df5a06e0   刘淇   商户券明细 
225
226
227
 
          that.totalPages = res.data.pageTotals;
          that.dataList = that.dataList.concat(res.data.dataList)
          console.log(that.dataList.length)
78e17486   刘淇   商户券明细 
228
229
 
        })
      },
9bac797d   刘淇   卡券发放 
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
 
      couponDetailSummary: function () {
        let that = this
        that.status = 'loading'
        let paramsData = {
          beginTime: this.beginTime + ' 00:00:00',
          endTime: this.endTime + ' 23:59:59',
          cardType: this.cardType.toString(), //卡券类型 ：1-单次券，2-时长券，3-满减券，4-金额券，5-包天券
          isUesed: this.isUesed.toString(),  //1:已使用/绑定 0:未使用
        }
        // 首页信息获取 接口
        that.$myRequest({
          url: that.$common.couponDetailSummary,
          method: 'POST',
          data: that.$common.requestSign(paramsData)
        }).then(res => {
          console.log(res)
          this.issuedCount = res.data.issuedCount  // 被领取张数
          this.usedCount = res.data.usedCount  // 使用张数
          this.totalFee = res.data.totalFee  // 金额
        })
      },
4a929260   刘淇   商户券明细 
251
 
      bindPickerChange: function (e, storage) {
e3eb21f6   刘淇   发放券 
252
253
 
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.index = e.detail.value
4a929260   刘淇   商户券明细 
254
 
        this.cardType = storage[this.index].id
1e8bca1e   刘淇   商户券明细 
255
256
257
258
 
        this.pageNum = 1
        this.pageSize = this.pageSize
        this.totalPages = 1
        this.dataList = []
438e8e43   刘淇   卡券购买下单 
259
 
        this.fetchData()
9bac797d   刘淇   卡券发放 
260
 
        this.couponDetailSummary()
e3eb21f6   刘淇   发放券 
261
 
      },
4a929260   刘淇   商户券明细 
262
263
 
      bindPickerChangeWay: function (e, storage) {
        console.log(storage)
e3eb21f6   刘淇   发放券 
264
 
        this.indexWay = e.detail.value
4a929260   刘淇   商户券明细 
265
 
        this.isUesed = storage[this.indexWay].id
1e8bca1e   刘淇   商户券明细 
266
267
268
269
 
        this.pageNum = 1
        this.pageSize = this.pageSize
        this.totalPages = 1
        this.dataList = []
438e8e43   刘淇   卡券购买下单 
270
 
        this.fetchData()
9bac797d   刘淇   卡券发放 
271
 
        this.couponDetailSummary()
e3eb21f6   刘淇   发放券 
272
273
 
      },
      bindStartDateChange: function (e) {
4a929260   刘淇   商户券明细 
274
 
        console.log(e.detail.value)
78e17486   刘淇   商户券明细 
275
 
        this.beginTime = e.detail.value
1e8bca1e   刘淇   商户券明细 
276
277
278
279
 
        this.pageNum = 1
        this.pageSize = this.pageSize
        this.totalPages = 1
        this.dataList = []
438e8e43   刘淇   卡券购买下单 
280
 
        this.fetchData()
9bac797d   刘淇   卡券发放 
281
 
        this.couponDetailSummary()
e3eb21f6   刘淇   发放券 
282
283
 
      },
      bindEndDateChange: function (e) {
78e17486   刘淇   商户券明细 
284
 
        this.endTime = e.detail.value
1e8bca1e   刘淇   商户券明细 
285
286
287
288
 
        this.pageNum = 1
        this.pageSize = this.pageSize
        this.totalPages = 1
        this.dataList = []
438e8e43   刘淇   卡券购买下单 
289
 
        this.fetchData()
9bac797d   刘淇   卡券发放 
290
 
        this.couponDetailSummary()
e3eb21f6   刘淇   发放券 
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
 
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
e3eb21f6   刘淇   发放券 
311
78e17486   刘淇   商户券明细 
312
 
      .paddingRight {
e3eb21f6   刘淇   发放券 
313
314
315
 
          padding-right: 20px;
      }
  </style>