微信判断

zhangxiaoxu123

2023-01-03 1c0dabadb006cdfcf350feb5dedfe92b137190aa

微信判断

 src/components/page/invoice/index.vue

@@ -1,36 +1,44 @@
<template>
    <div class="invoice-wrap">
        <div class="invoice-main">
            <img class="logoPhone" src="@/assets/images/logoImg.png" alt="">
            <h1>发票查询</h1>
        <div class="weixin-box" v-if="!isWeiXin">
            <div class="invoice-main">
                <img class="logoPhone" src="@/assets/images/logoImg.png" alt="">
                <h1>发票查询</h1>
            </div>
            <div class="invoice-main2">
                <el-form
                        :model="form"
                        class="invoice-main2-box"
                        ref="form"
                        :rules="rules">
                    <el-form-item
                            prop="carNo"
                            class="carNum"
                            label="车牌号:"
                            label-width="80px">
                        <el-input v-model="form.carNo" placeholder="输入车牌号"></el-input>
                    </el-form-item>
                    <el-form-item
                            prop="phone"
                            class="carNum"
                            label="手机号:"
                            label-width="80px">
                        <el-input v-model="form.phone" placeholder="输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item class="invoice-btn" v-if="isShowBtn">
                        <el-button
                                id="fixBtn"
                                @click="submitInvoice('form')"
                                class="jiaofei-btn"
                                type="primary">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="invoice-main2">
            <el-form
                 :model="form"
                 class="invoice-main2-box"
                 ref="form"
                 :rules="rules">
                <el-form-item
                        prop="carNo"
                        class="carNum"
                        label="车牌号:"
                        label-width="80px">
                    <el-input v-model="form.carNo" placeholder="输入车牌号"></el-input>
                </el-form-item>
                <el-form-item
                        prop="phone"
                        class="carNum"
                        label="手机号:"
                        label-width="80px">
                    <el-input v-model="form.phone" placeholder="输入手机号"></el-input>
                </el-form-item>
                <el-form-item class="invoice-btn">
                    <el-button
                            @click="submitInvoice('form')"
                            class="jiaofei-btn"
                            type="primary">确定</el-button>
                </el-form-item>
            </el-form>
        <div class="middlePge-wrap" v-else>
            <div class="middlePge-main">
                <img src="../../../assets/images/middlePage.png" alt="">
            </div>
        </div>
    </div>
</template>
@@ -52,6 +60,10 @@
                }
            }
            return {
                isWeiXin: false,
                isShowBtn: true, //确定按钮显示 解决安卓button被顶起的问题
                docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
                showHeight: document.documentElement.clientHeight,   //实时屏幕高度
                form: {
                    carNo:'',
                    phone:''
@@ -67,7 +79,45 @@
                }
            }
        },
        created() {
            this.checkWeiXin()
        },
        watch: {
            showHeight() {
                // 解决安卓底部固定部位被软键盘顶上去问题
                //监听屏幕高度变化
                if(this.docmHeight > this.showHeight){
                    this.isShowBtn = false
                }else {
                    this.isShowBtn = true
                }
            }
        },
        mounted() {
            //首次进入的原始高度
            window.addEventListener('resize', this.watchResize);
        },
        methods: {
            watchResize() {
                //实时变化的窗口高度
                this.showHeight = window.innerHeight;
            },
            checkWeiXin() {
                // let userAgent = navigator.userAgent;
                // console.log(userAgent)
                // if (userAgent.includes("MicroMessenger")) {
                //     this.isWeiXin = true
                // } else {
                //     this.isWeiXin = false
                // }
                let ua = window.navigator.userAgent.toLowerCase();
                //通过正则表达式匹配ua中是否含有MicroMessenger字符串
                if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                    this.isWeiXin = true
                } else{
                    this.isWeiXin = false
                }
            },
            submitInvoice(formName) {
                this.$refs[formName].validate(valid => {
                    if(valid) {
@@ -82,7 +132,10 @@
                })

            }
        }
        },
        beforeDestroy() {
            window.removeEventListener("resize", this.watchResize);
        },
    }
</script>

@@ -106,12 +159,27 @@
            width: 88%;
            padding-right: 2.67vw  /* 20/7.5 */;
        }
        .el-form-item__label{
            font-size: 3.73vw  /* 28/7.5 */;
        }
    }
.invoice-wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    .weixin-box{
        width: 100%;
        height: 100%;
    }
    .middlePge-wrap{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        img{
            width: 100%;
        }
    }
   .invoice-main{
        width: 100%;
        display: flex;

 src/components/page/invoice/invoiceForm.vue

@@ -1,77 +1,71 @@
<template>
    <div class="invoiceForm-wrap">
        <div v-if="isWeiXin ">
            <div class="title">订单发票</div>
            <div class="invoiceForm-main">
                <div class="invoiceForm-main-inside">
                    <div class="invoice-date-box">
                        <el-date-picker
                                :editable="false"
                                format="yyyy-MM"
                                value-format="yyyy-MM"
                                v-model="date"
                                type="month"
                                @change="changeDate"
                                placeholder="选择日期">
                        </el-date-picker>
        <div class="title">订单发票</div>
        <div class="invoiceForm-main">
            <div class="invoiceForm-main-inside">
                <div class="invoice-date-box">
                    <el-date-picker
                            :editable="false"
                            format="yyyy-MM"
                            value-format="yyyy-MM"
                            v-model="date"
                            type="month"
                            @change="changeDate"
                            placeholder="选择日期">
                    </el-date-picker>
                </div>
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        :offset="50"
                        :immediate-check="false"
                        @load="onLoad"
                >

                    <div v-for="(item,index) in invoiceData" :key="index">
                        <el-checkbox
                                v-model="item.isShow"
                                class="invoiceForm-block"
                                @change="handleCheckedCitiesChange(invoiceData)">
                            <div>
                                <div class="invoiceForm-content">

                                    <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                        <use xlink:href="#icon-shijian3"></use>
                                    </svg>
                                    {{item.enterTime}}
                                </div>
                                <div class="invoiceForm-content">

                                    <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                        <use xlink:href="#icon-shijian3"></use>
                                    </svg>
                                    {{item.outTime}}
                                </div>
                                <div class="invoiceForm-content">
                                    <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                        <use xlink:href="#icon-dizhi1"></use>
                                    </svg>
                                    {{item.address}}
                                </div>
                            </div>
                            <div class="money-main">
                                <h1 class="money-box">{{item.money}}<font class="money-small">元</font></h1>
                            </div>
                        </el-checkbox>
                    </div>
                    <van-list
                            v-model="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            :offset="50"
                            :immediate-check="false"
                            @load="onLoad"
                    >

                        <div v-for="(item,index) in invoiceData" :key="index">
                            <el-checkbox
                                    v-model="item.isShow"
                                    class="invoiceForm-block"
                                    @change="handleCheckedCitiesChange(invoiceData)">
                                <div>
                                    <div class="invoiceForm-content">

                                        <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                            <use xlink:href="#icon-shijian3"></use>
                                        </svg>
                                        {{item.enterTime}}
                                    </div>
                                    <div class="invoiceForm-content">

                                        <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                            <use xlink:href="#icon-shijian3"></use>
                                        </svg>
                                        {{item.outTime}}
                                    </div>
                                    <div class="invoiceForm-content">
                                        <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                            <use xlink:href="#icon-dizhi1"></use>
                                        </svg>
                                        {{item.address}}
                                    </div>
                                </div>
                                <div class="money-main">
                                    <h1 class="money-box">{{item.money}}<font class="money-small">元</font></h1>
                                </div>
                            </el-checkbox>
                        </div>
                    </van-list>
                    <div class="fapiao-btn">
                        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        <div class="fapiao-right">
                            <span class="money">金额：<font class="big">{{countMoney}}</font>元</span>
                            <el-button size="mini" @click="seeInvoice">下载发票</el-button>
                        </div>
                </van-list>
                <div class="fapiao-btn">
                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div class="fapiao-right">
                        <span class="money">金额：<font class="big">{{countMoney}}</font>元</span>
                        <el-button size="mini" @click="seeInvoice">下载发票</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="middlePge-wrap" v-else>
            <div class="middlePge-main">
                <img src="../../../assets/images/middlePage.png" alt="">
            </div>
        </div>

    </div>
</template>

@@ -84,7 +78,6 @@
        },
        data() {
            return {
                isWeiXin: false,
                date:'',
                checkedInvoices: [1,2],
                invoiceData:[],
@@ -99,29 +92,12 @@
            }
        },
        created() {
            this.checkWeiXin()
            this.date = this.$byutil.dateFormat(new Date(), "yyyy-MM");
        },
        mounted() {
            this.getByCarNo()
        },
        methods: {
            checkWeiXin() {
                // let userAgent = navigator.userAgent;
                // console.log(userAgent)
                // if (userAgent.includes("MicroMessenger")) {
                //     this.isWeiXin = true
                // } else {
                //     this.isWeiXin = false
                // }
                let ua = window.navigator.userAgent.toLowerCase();
                //通过正则表达式匹配ua中是否含有MicroMessenger字符串
                if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                    this.isWeiXin = true
                } else{
                    this.isWeiXin = false
                }
            },
            onLoad() {
                this.loading = true
                this.current += 1
@@ -292,18 +268,6 @@
        .el-checkbox__inner::after{
            left: 5px;
            top: 2px;
        }
    }
    .middlePge-wrap{
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        .middlePge-main{
            width: 100%;
            height: 100%;
            img{
                width: 100%;
            }
        }
    }
    .iconSvg{