|
@@ -0,0 +1,124 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="usage-record-container">
|
|
|
|
+ <div class="usage-record-header grey" v-if="listData.length!=0">
|
|
|
|
+ <div class="header-item">服务内容</div>
|
|
|
|
+ <div class="header-item">使用门店</div>
|
|
|
|
+ <div class="header-item">使用时间</div>
|
|
|
|
+ </div>
|
|
|
|
+ <scroll-view scroll-y class="usage-record-content" @scrolltolower="scrolltolower">
|
|
|
|
+ <div class="usage-record-con">
|
|
|
|
+ <div v-for="(item,index) in listData" :key="index" :class="['usage-record-item', index%2==1 ? 'grey' : '']">
|
|
|
|
+ <div class="item-con">{{item.itemName}}</div>
|
|
|
|
+ <div class="item-con">{{item.usedType==2 ? '周卡自动过期' : item.usedStoreName}}</div>
|
|
|
|
+ <div class="item-con">{{item.usedTime}}</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ <no-data v-if="listData.length==0" :options="listData" name="暂无数据"/>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import NoData from '@/components/NoData';
|
|
|
|
+import { queryByOrderList } from '@/api/bundle'
|
|
|
|
+export default {
|
|
|
|
+ components: { 'no-data': NoData },
|
|
|
|
+ name: 'UsageRecord',
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ listData: [],
|
|
|
|
+ pageNo: 1, // 页码
|
|
|
|
+ pageSize: 20, // 每页多少条
|
|
|
|
+ isLastPage: false, // 是否最后一页
|
|
|
|
+ billNo: '' // 订单编号
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ getList() {
|
|
|
|
+ const _this = this
|
|
|
|
+ wx.showLoading({
|
|
|
|
+ mask: true,
|
|
|
|
+ title: '加载中'
|
|
|
|
+ })
|
|
|
|
+ queryByOrderList({billNo: _this.billNo, pageNo: _this.pageNo, pageSize: _this.pageSize}).then(res => {
|
|
|
|
+ wx.hideLoading()
|
|
|
|
+ if(res.status == 200){
|
|
|
|
+ res.data.list.map(item => {
|
|
|
|
+ item.usedTime = item.usedTime.substr(0,10)
|
|
|
|
+ })
|
|
|
|
+ if ( _this.pageNo == 1) {
|
|
|
|
+ _this.listData = res.data.list
|
|
|
|
+ } else {
|
|
|
|
+ _this.listData = _this.listData.concat(res.data.list)
|
|
|
|
+ }
|
|
|
|
+ if(_this.listData.length>=res.data.count){
|
|
|
|
+ if(_this.pageNo!=1){
|
|
|
|
+ wx.showToast({
|
|
|
|
+ title: '已经是最后一页'
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ _this.isLastPage = true
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 监听用户上拉触底事件
|
|
|
|
+ scrolltolower() {
|
|
|
|
+ if(!this.isLastPage){
|
|
|
|
+ this.pageNo = this.pageNo + 1
|
|
|
|
+ this.getList()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onShow() {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ onLoad(options){
|
|
|
|
+ this.billNo = options.billNo
|
|
|
|
+ this.pageNo = 1
|
|
|
|
+ this.listData = []
|
|
|
|
+ this.isLastPage = false
|
|
|
|
+ this.getList()
|
|
|
|
+ }
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="stylus" scoped>
|
|
|
|
+.usage-record-container {
|
|
|
|
+ height: 100%;
|
|
|
|
+ padding: 0 20rpx 20rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ .usage-record-header{
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ color: #333;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ flex-direction: row;
|
|
|
|
+ padding: 20rpx 10rpx;
|
|
|
|
+ .header-item{
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ width: 33.333%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .usage-record-content{
|
|
|
|
+ height: calc(100vh - 50px);
|
|
|
|
+ .usage-record-con{
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
+ color: #5a5a5a;
|
|
|
|
+ .usage-record-item{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 20rpx 10rpx;
|
|
|
|
+ .item-con{
|
|
|
|
+ flex-grow: 1;
|
|
|
|
+ width: 33.333%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .grey{
|
|
|
|
+ background-color: #f2f2f2;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|