<template>
<view class="">
<u-sticky style="top:0">
<view class="header-wrap">
<view class="status_bar">
</view>
<view class="header-title">
<view class="title">
票务
</view>
<view class="actions" @click="openFilter">
<image src="../../static/images/filter.png" mode=""></image>
</view>
</view>
<view class="tabs">
<u-tabs :list="tabs" :current="tabIndex" :scrollable="false" lineWidth="20" lineColor="#5467C5"
:activeStyle="{
color: '#5467C5',
fontWeight: 'bold',
transform: 'scale(1.05)'
}" :inactiveStyle="{
color: '#606266',
transform: 'scale(1)'
}" itemStyle="padding-left: 30px; padding-right: 30px; height: 34px;" @click="handleChangeTab"></u-tabs>
</view>
<view class="search" @click.top="openTips">
<!-- <u-search :showAction="showBtn" placeholder="请输入关键字" v-model="keyword" @search='search'></u-search> -->
<u-search :showAction="false" placeholder="请输入关键字" v-model="keyword" @search='search' :animation="true"></u-search>
<view class="content" ref="tooltips" @ok='ok' @click.top="closeTips">
<uniTooltip :visible.sync="isShow" placement="bottom right-end" color="#dddddd">
<view slot="content">支持手机号、用户名、备注、用户ID、订单ID</view>
</uniTooltip>
</view>
</view>
</view>
</u-sticky>
<mescroll-body :sticky="true" ref="mescrollRef" :up="upOption" @init="mescrollInit" @down="downCallback"
@up="upCallback">
<view class="list">
<order-item :item="item" v-for="(item,index) in orderList" :key="index"></order-item>
</view>
</mescroll-body>
<order-filter ref="orderFilter" @ok='ok'></order-filter>
</view>
</template>
<script>
import {
getOrderList,
getHZOrderList,
getMsg,
} from "../../config/api.js"
import OrderItem from "../../components/OrderItem.vue"
import OrderFilter from "../../components/OrderFilter.vue"
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update.js'
import uniTooltip from '@/uni_modules/zb-tooltip/zb-tooltip.vue'
export default {
mixins: [MescrollMixin], // 使用mixin
data() {
return {
showBtn:true,
type: '',
order:'',
lottery: '',
keyword: '',
tabIndex: 0,
pageNo: 1,
loop: true,
isShow: false,
preRecordTime: 0,
tabs: [{
id: 0,
name: '体彩'
},
{
id: 1,
name: '福彩'
},
{
id: 2,
name: '合作'
}
],
upOption: {
page: {
size: 10 // 每页数据的数量,默认10
},
textNoMore: '--已经到底了哦--',
empty: {
icon: "/static/images/empty.png",
tip: '暂无数据'
}
},
orderList: []
}
},
components: {
OrderItem,
OrderFilter,
uniTooltip
},
onLoad() {
this.checkMsg();
//this.mescroll.resetUpScroll()
},
onShow() {
//this.checkMsg();
let self = this;
self.$nextTick(function() {
self.mescroll.resetUpScroll()
})
},
onUnload() {
this.loop = false;
},
mounted() {
setTimeout(() => {
checkUpdate()
}, 5000)
},
methods: {
reFresh: function() {
// 执行方法刷新数据
this.mescroll.resetUpScroll()
console.log("页面已重新加载");
},
closeTips() {
if (this.isShow) {
this.isShow = false
} else {
this.isShow = true
}
//this.$refs['tooltips'].close();
},
openTips() {
if (this.isShow) {
this.isShow = false
} else {
this.isShow = true
}
//this.$refs['tooltips'].open();
},
handleChangeTab(op) {
this.tabIndex = op.index;
//if ( this.orderList.length>0 )
this.mescroll.resetUpScroll()
this.closeTips;
},
//打开筛选框
openFilter() {
this.$refs.orderFilter.open()
},
search(value) {
this.keyword = value;
//if ( this.orderList.length>0 )
this.mescroll.resetUpScroll();
this.closeTips;
},
ok(e) {
console.log('e=>' + JSON.stringify(e));
this.order = e.order;
this.type = e.type;
this.lottery = e.lottery;
this.mescroll.resetUpScroll();
this.$refs.orderFilter.close()
},
downCallback() {
this.closeTips
let self = this;
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
//if ( this.orderList.length>0 )
self.mescroll.resetUpScroll()
setTimeout(function() {
self.mescroll.endSuccess();
}, 2000)
},
/*上拉加载的回调*/
upCallback(page) {
let userInfo = uni.getStorageSync('userInfo');
if (this.tabIndex == 2) {
getHZOrderList({
page: page.num,
pageSize: 10,
keyword: this.keyword,
uid: userInfo.user_id,
type: this.type,
order: this.order,
lottery: this.lottery,
}).then(res => {
let arr = res.data.rows;
if (page.num === 1) this.orderList = [];
this.orderList = this.orderList.concat(res.data.rows);
this.$nextTick(() => {
this.mescroll.endSuccess(arr.length)
})
}).catch((e) => {
this.mescroll.endErr();
});
} else {
getOrderList({
page: page.num,
pageSize: 10,
uid: userInfo.user_id,
keyword: this.keyword,
order: this.order,
type: this.type,
lottery: this.lottery,
classid: this.tabs[this.tabIndex]['id'],
}).then(res => {
if (res.data.result == "failed") {
uni.reLaunch({
url: "/pages/login/login"
})
}
let arr = res.data.rows;
/* if (arr.length==0){
this.mescroll.endErr();
return;
}
*/
if (page.num === 1) this.orderList = [];
this.orderList = this.orderList.concat(res.data.rows);
this.$nextTick(() => {
this.mescroll.endSuccess(arr.length)
})
//}
}).catch((e) => {
this.mescroll.endErr();
});
}
},
checkMsg() {
this.preRecordTime = new Date().getTime();
let userInfo = uni.getStorageSync('userInfo');
let data = {
uid: userInfo.user_id,
}
getMsg(data).then(res => {
if (res.data.result == "success") {
if (res.data.rows.sound_withdraw == 1 && res.data.rows.withdraw_count > 0 && this.$store.state.withdraw_count < res.data.rows.withdraw_count) {
this.ScanAudio("static/mp3/ring.mp3");
}
if (res.data.rows.sound_pay == 1 && res.data.rows.pay_count > 0 && this.$store.state.pay_count < res.data.rows.pay_count) {
this.ScanAudio("static/mp3/pay.mp3");
}
if (res.data.rows.sound_ticket == 1 && res.data.rows.ticket_count > 0 && this.$store.state.ticket_count < res.data.rows.ticket_count) {
this.ScanAudio("static/mp3/ticket.mp3");
}
if ( res.data.rows.ticket_count > 0 && this.$store.state.ticket_count < res.data.rows.ticket_count) {
this.mescroll.resetUpScroll();
}
var _this = this;
//setTimeout(function() {
_this.$store.commit("setPayCount", res.data.rows.pay_count);
_this.$store.commit("setTicketCount", res.data.rows.ticket_count);
_this.$store.commit("setWithDrawCount", res.data.rows.withdraw_count);
_this.$store.commit("setUndorewardCount", res.data.rows.undoreward_count);
//},1000);
if (res.data.rows.ticket_count > 0) {
uni.setTabBarBadge({ //显示数字
index: 0, //tabbar下标
text: res.data.rows.ticket_count
})
} else {
uni.removeTabBarBadge({ //隐藏数字标
index: 0 //tabbar下标
})
}
}
if (this.loop) {
this.delayDoMsg();
}
}).catch((err) => {
if (this.loop) {
this.delayDoMsg();
}
})
},
delayDoMsg() {
let that = this;
let timestamp = 15 * 1000 - (new Date().getTime() - this.preRecordTime);
setTimeout(function() {
that.checkMsg();
}, timestamp);
}
}
}
</script>
<style>
page {
background: #f6f6f6;
}
.status_bar {
height: var(--status-bar-height);
width: 100%;
background: #FFFFFF;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
left: 80rpx;
margin-top: 40rpx;
}
</style>
<style lang="less" scoped>
.header-wrap {
background: #FFFFFF;
.header-title {
display: flex;
align-items: center;
position: relative;
height: 80rpx;
.back {
display: flex;
align-items: center;
justify-content: center;
width: 80rpx;
height: 80rpx;
position: absolute;
left: 0;
top: 0;
}
.title {
display: flex;
justify-content: center;
font-size: 32rpx;
flex: 1;
}
.actions {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
font-size: 28rpx;
height: 80rpx;
right: 20rpx;
top: 0;
image {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
}
.search {
// margin-left:20rpx;
display: flex;
justify-content: center;
padding: 20rpx 30rpx;
}
}
.list {
padding: 30rpx;
}
</style>