123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- <template>
- <view class="pages-content">
- <view class="tabs">
- <u-tabs-swiper ref="uTabs" active-color="red" :list="tabsList" bar-width="100" :current="current" @change="tabsChange" :is-scroll="false"
- swiperWidth="750"></u-tabs-swiper>
- </view>
- <swiper style="height: calc(100% - 50px);" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
- <swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
- <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
- <couponTpl :list="index==current?couponList:[]"></couponTpl>
- <u-empty :text="noDataText" img-width="120" v-if="couponList.length==0 && status!='loading'" mode="list"></u-empty>
- <view style="padding: 20upx;">
- <u-loadmore v-if="count>pageSize || status=='loading'" :status="status" />
- </view>
- </scroll-view>
- </swiper-item>
- </swiper>
- </view>
- </template>
- <script>
- import couponTpl from '@/pages/coupon/couponTpl.vue'
- import {couponListFind} from '@/api/coupon.js'
- export default {
- components: {
- couponTpl
- },
- data() {
- return {
- noDataText: '暂无数据',
- status: 'loading',
- tabsList: [{
- name: '未使用',
- status: 0
- }, {
- name: '已使用',
- status: 1
- }, {
- name: '已过期',
- status: -1
- }],
- couponList: [], // 优惠卷列表
- // 因为内部的滑动机制限制,请将tabs组件和swiper组件的current用不同变量赋值
- current: 0, // tabs组件的current值,表示当前活动的tab选项
- swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
- pageNo:1,
- pageSize:10,
- count:0
- };
- },
- onLoad() {
- this.pageInit()
- },
- methods: {
- pageInit () {
- this.current = 0 // tabs组件的current值,表示当前活动的tab选项
- this.swiperCurrent = 0
- this.couponList = []
- this.pageNo = 1
- this.status = 'loading'
- this.getList()
- },
- // tabs通知swiper切换
- tabsChange(index) {
- this.swiperCurrent = index;
- },
- // swiper-item左右移动,通知tabs的滑块跟随移动
- transition(e) {
- let dx = e.detail.dx;
- this.$refs.uTabs.setDx(dx);
- },
- swiperChange(event){
- console.log(event.detail)
- this.couponList = []
- this.status = 'loading'
- },
- // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
- // swiper滑动结束,分别设置tabs和swiper的状态
- animationfinish(e) {
- let current = e.detail.current;
- if (current != this.current) {
- this.$refs.uTabs.setFinishCurrent(current);
- this.swiperCurrent = current;
- this.current = current;
- this.getList()
- }
- },
- // 获取优惠卷列表
- getList(num){
- if(num) {
- this.pageNo = num
- }
- let item = this.tabsList[this.swiperCurrent]
- let params = {
- pageNo: this.pageNo,
- pageSize: this.pageSize,
- status: item.status
- }
- couponListFind(params).then(res=>{
- this.status = 'loadmore'
- if (res.status == 200) {
- let list = res.data.list
- this.couponList = this.couponList.concat(list)
- this.count = res.data.count
- } else {
- this.couponList = []
- this.count = 0
- }
- })
- },
- // scroll-view到底部加载更多
- onreachBottom() {
- if (this.couponList.length<this.count) {
- this.pageNo++
- this.getList()
- } else {
- this.status = "nomore"
- }
- }
- }
- };
- </script>
- <style lang="scss">
- page{
- height: 100%;
- }
- .pages-content{
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- uni-swiper{
- flex-grow: 1;
- }
- .u-empty{
- height: auto!important;
- }
- }
- </style>
|