1 changed files with 92 additions and 88 deletions
@ -1,117 +1,121 @@ |
|||||
<template> |
<template> |
||||
<view class="app-container"> |
<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' |
color: '#F52F3E' |
||||
}" |
|
||||
></u-tabs> |
|
||||
|
}"></u-tabs> |
||||
<u-gap height="10rpx" bgColor="#F7F7F7"></u-gap> |
<u-gap height="10rpx" bgColor="#F7F7F7"></u-gap> |
||||
<view class="his-content"> |
<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="hit-left"> |
||||
<view class="his-name"> |
<view class="his-name"> |
||||
李姐烧烤（普罗旺斯店） |
|
||||
|
{{item.merchant.name}} |
||||
</view> |
</view> |
||||
|
|
||||
</view> |
</view> |
||||
<view class="hit-right"> |
<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> |
</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> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<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> |
</script> |
||||
|
|
||||
<style lang="scss"> |
<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