1 changed files with 92 additions and 88 deletions
@ -1,117 +1,121 @@ |
|||
<template> |
|||
<view class="app-container"> |
|||
|
|||
<u-tabs :list="list" lineColor="#F52F3E" @click="change" lineWidth="160rpx" @change="change" |
|||
itemStyle="padding-left: 0; padding-right: 0;width: 50%; height: 90rpx;font-size: 14px" |
|||
lineHeight="2" |
|||
:activeStyle="{ |
|||
|
|||
<u-tabs :list="tabList" lineColor="#F52F3E" lineWidth="160rpx" @change="change" |
|||
itemStyle="padding-left: 0; padding-right: 0;width: 50%; height: 90rpx;font-size: 14px" lineHeight="2" |
|||
:activeStyle="{ |
|||
color: '#F52F3E' |
|||
}" |
|||
></u-tabs> |
|||
}"></u-tabs> |
|||
<u-gap height="10rpx" bgColor="#F7F7F7"></u-gap> |
|||
<view class="his-content"> |
|||
<view class="his-item u-border-bottom"> |
|||
<view class="his-item u-border-bottom" v-for="item in queueList" :key="item.id"> |
|||
<view class="hit-left"> |
|||
<view class="his-name"> |
|||
李姐烧烤（普罗旺斯店） |
|||
{{item.merchant.name}} |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="hit-right"> |
|||
购买时排队<span class="text-style">10</span> ，当前 2 |
|||
购买时排队<span class="text-style">{{item.buy_queue_index}}</span> ，当前<span class="text-style">{{item.now_queue_index}}</span> |
|||
</view> |
|||
</view> |
|||
<view class="his-item u-border-bottom"> |
|||
<view class="hit-left"> |
|||
<view class="his-name"> |
|||
李姐烧烤（普罗旺斯店） |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="hit-right"> |
|||
购买时排队<span class="text-style">10</span> ，当前 2 |
|||
</view> |
|||
</view> |
|||
<view class="his-item u-border-bottom"> |
|||
<view class="hit-left"> |
|||
<view class="his-name"> |
|||
李姐烧烤（普罗旺斯店） |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="hit-right"> |
|||
购买时排队<span class="text-style">10</span> ，当前 2 |
|||
</view> |
|||
</view> |
|||
<view class="his-item u-border-bottom"> |
|||
<view class="hit-left"> |
|||
<view class="his-name"> |
|||
李姐烧烤（普罗旺斯店） |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="hit-right"> |
|||
购买时排队<span class="text-style">10</span> ，当前 2 |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
<view class="load-more" @click="getQueueList">{{ hasMore ? '加载更多数据...' : '已加载完毕' }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
list: [{ |
|||
name: '按时间排序' |
|||
}, { |
|||
name: '待最快排序' |
|||
}], |
|||
current: 0 |
|||
}; |
|||
}, |
|||
methods: { |
|||
change(index) { |
|||
this.current = Number(index); |
|||
import { |
|||
userQueueRebateList |
|||
} from '../../common/api.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
tabList: [{ |
|||
name: '按时间排序' |
|||
}, { |
|||
name: '待最快排序' |
|||
}], |
|||
currentTab: 0, |
|||
queueList: [], |
|||
hasMore: true, |
|||
page: 0, |
|||
}; |
|||
}, |
|||
onLoad() { |
|||
this.getQueueList(); |
|||
}, |
|||
onReachBottom() { |
|||
this.getQueueList() |
|||
}, |
|||
methods: { |
|||
change(e) { |
|||
console.log(e.index) |
|||
this.currentTab = Number(e.index); |
|||
this.queueList = []; |
|||
this.hasMore = true; |
|||
this.page = 0; |
|||
this.getQueueList(); |
|||
}, |
|||
getQueueList() { |
|||
if (!this.hasMore) { |
|||
return |
|||
} |
|||
this.page++ |
|||
userQueueRebateList({ |
|||
page: this.page, |
|||
page_size: 15, |
|||
status: 0, |
|||
sort_type: this.currentTab == 0 ? 1 : 2 |
|||
}).then(data => { |
|||
this.queueList = [...this.queueList, ...data.list] |
|||
this.hasMore = data.has_more |
|||
}) |
|||
}, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.his-content { |
|||
padding: 0 30rpx; |
|||
.his-content { |
|||
padding: 0 30rpx; |
|||
|
|||
.his-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid #eee; |
|||
.his-item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-bottom: 1rpx solid #eee; |
|||
|
|||
.hit-left { |
|||
font-size: 24rpx; |
|||
color: #454545; |
|||
font-weight: bold; |
|||
} |
|||
.hit-left { |
|||
font-size: 24rpx; |
|||
color: #454545; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.hit-right { |
|||
height: 130rpx; |
|||
line-height: 130rpx; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
.hit-right { |
|||
height: 130rpx; |
|||
line-height: 130rpx; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
span.text-style { |
|||
font-size: 24rpx; |
|||
color: #F52F3E; |
|||
padding: 0 15rpx; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
span.text-style{ |
|||
font-size: 24rpx; |
|||
color: #F52F3E; |
|||
padding: 0 15rpx; |
|||
font-weight: bold; |
|||
|
|||
.u-border-bottom, |
|||
.u-border-top { |
|||
border-color: #eee !important; |
|||
} |
|||
} |
|||
|
|||
.u-border-bottom, |
|||
.u-border-top { |
|||
border-color: #eee !important; |
|||
|
|||
.load-more { |
|||
text-align: center; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
</style> |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue