From 1c0dabadb006cdfcf350feb5dedfe92b137190aa Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123 <819527061@qq.com>
Date: 星期二, 03 一月 2023 22:05:13 +0800
Subject: [PATCH] 微信判断
---
src/components/page/invoice/index.vue | 130 +++++++++++++++++++------
src/components/page/invoice/invoiceForm.vue | 158 ++++++++++++-------------------
2 files changed, 160 insertions(+), 128 deletions(-)
diff --git a/src/components/page/invoice/index.vue b/src/components/page/invoice/index.vue
index 877c1c0..a4ab06a 100644
--- a/src/components/page/invoice/index.vue
+++ b/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();
+ //閫氳繃姝ｅ垯琛ㄨ揪寮忓尮閰島a涓槸鍚﹀惈鏈塎icroMessenger瀛楃涓�
+ 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;
diff --git a/src/components/page/invoice/invoiceForm.vue b/src/components/page/invoice/invoiceForm.vue
index 487a110..224a2a3 100644
--- a/src/components/page/invoice/invoiceForm.vue
+++ b/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();
- //閫氳繃姝ｅ垯琛ㄨ揪寮忓尮閰島a涓槸鍚﹀惈鏈塎icroMessenger瀛楃涓�
- 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{
--
Gitblit v1.9.1