VUE多用户竞彩体彩店管理系统源码分享,SAAS架构

<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>

  • 14
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值