From b6809f71253a524d81c086ef1293acafdaba395e Mon Sep 17 00:00:00 2001
From: kongdeqiang <123456>
Date: 星期二, 12 九月 2023 15:45:07 +0800
Subject: [PATCH] 修改前端页面
---
src/components/page/invoice/index.vue | 167 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 131 insertions(+), 36 deletions(-)
diff --git a/src/components/page/invoice/index.vue b/src/components/page/invoice/index.vue
index 6042394..7b029cf 100644
--- a/src/components/page/invoice/index.vue
+++ b/src/components/page/invoice/index.vue
@@ -1,35 +1,45 @@
<template>
<div class="invoice-wrap">
- <div class="invoice-main">
- <img class="logoPhone" src="@/assets/images/logoImg.png" alt="">
+ <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
+ :inline="true"
+ :model="form"
+ class="invoice-main2-box"
+ ref="form"
+ :rules="rules">
+ <el-form-item
+ prop="carNo"
+ class="carNum"
+ label="杞︾墝鍙�:"
+ >
+ <el-input v-model="form.carNo" placeholder="杈撳叆杞︾墝鍙�"></el-input>
+ </el-form-item>
+ <el-form-item
+ prop="phone"
+ class="carNum"
+ label="鎵嬫満鍙�:"
+ >
+ <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="100px">
- <el-input v-model="form.carNo" placeholder="杈撳叆杞︾墝鍙�"></el-input>
- </el-form-item>
- <el-form-item
- prop="mobile"
- class="carNum"
- label="鎵嬫満鍙�:"
- label-width="100px">
- <el-input v-model="form.mobile" 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>
@@ -51,22 +61,64 @@
}
}
return {
+ isWeiXin: false,
+ isShowBtn: true, //纭畾鎸夐挳鏄剧ず 瑙ｅ喅瀹夊崜button琚《璧风殑闂
+ docmHeight: document.documentElement.clientHeight, //榛樿灞忓箷楂樺害
+ showHeight: document.documentElement.clientHeight, //瀹炴椂灞忓箷楂樺害
form: {
carNo:'',
- mobile:''
+ phone:''
},
rules:{
carNo: [
{required: true, message: '杞︾墝鍙风爜涓嶈兘涓虹┖',trigger: 'blur'}
],
- mobile: [
+ phone: [
{ required: true, message: '鎵嬫満鍙蜂笉鑳戒负绌�' },
{validator: validateMobile, trigger: 'blur'}
]
}
}
},
+ 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 = document.body.clientHeight;
+ },
+ 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) {
@@ -74,37 +126,78 @@
path: '/invoiceForm',
query: {
carNo: this.form.carNo,
- //mobile: this.form.mobile
+ phone: this.form.phone
}
})
}
})
}
- }
+ },
+ beforeDestroy() {
+ window.removeEventListener("resize", this.watchResize);
+ },
}
</script>
+<style lang="scss">
+ .invoice-wrap{
+ .jiaofei-btn{
+ span{
+ color: #fff;
+ }
+ }
+ }
+
+</style>
<style lang="scss" scoped>
+ *{
+ font-family: '鑻规柟';
+ color: #626262;
+ }
::v-deep{
.el-form{
width: 88%;
+ padding-right: 2.67vw /* 20/7.5 */;
+ }
+ .el-form-item__label{
+ font-size: 3.73vw /* 28/7.5 */;
+ width: 24vw /* 180/7.5 */;
}
.el-form-item__content{
- display: flex;
- justify-content: center;
+ width: calc(100% - 24vw - 15px);
}
+
}
.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;
+ flex-direction: column;
justify-content: center;
+ align-items: center;
margin-top: 10vw;
+ h1{
+ font-size: 3.73vw /* 28/7.5 */;
+ line-height: 2;
+ margin-top: 2.67vw /* 20/7.5 */;
+ }
}
.logoPhone{
margin-top: 10vw;
@@ -116,7 +209,7 @@
display: flex;
justify-content: center;
margin-top: 10vw;
- height: calc(100% - 50vw);
+ height: calc(100% - 60vw);
position: relative;
}
.jiaofei-btn{
@@ -129,6 +222,7 @@
}
.carNum{
margin-top: 10vw;
+ width: 100%;
}
.invoice-btn{
position: absolute;
@@ -137,4 +231,5 @@
}
}
+
</style>
--
Gitblit v1.9.1