修改前端页面

kongdeqiang

2023-06-08 901dbec925bdf4f26ba704f0c7754e7e709d281d

修改前端页面

 src/components/page/Index.vue

@@ -81,7 +81,7 @@
        methods: {
            pay(){
                //window.location.href = "https://payapp.weixin.qq.com/life/index?fr=PSBC&pg=charge&ct=39&sv=20&wx=130100002001&bk=13040621E00000002330"
                this.$byutil.postData(this, this.$systemconfig.basePath + '/ffPay/zhiFa', {id:this.ticketId}, res => {
                this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/ffPay/zhifa', {id:this.ticketId}, res => {
                    this.$message({
                        message: '2秒后自动跳转到支付页面，防止内外网数据同步延迟，请稍等',
                        type: 'success',

 src/components/page/Index2.vue

@@ -76,6 +76,7 @@
                showFlag2:true,
                status3:0,
                carNo:"",
                oldCarNo:"",
                code2:""
            }
        },
@@ -93,6 +94,7 @@
                this.statisticData = res.data;
                this.outParkId = this.statisticData.id;
                this.status3 = this.statisticData.status3;
                this.oldCarNo = this.statisticData.carNo;
                this.payFlag = false
                if(this.status3==1){
                    this.$message({
@@ -120,19 +122,27 @@
                })
            },
            noCarOut(){
                if(this.carNo){
                if(this.oldCarNo == '无车牌'){
                  if(this.carNo){
                    this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/car/outParkByPhone', {code2:this.code2,carNo:this.carNo}, res => {
                        if(res.code===0){
                          this.statisticData = res.data;
                          this.outParkId = this.statisticData.id;
                        }
                      if(res.code===0){
                        this.statisticData = res.data;
                        this.outParkId = this.statisticData.id;
                      }
                    })
                }else{
                  }else{
                    this.$message({
                        message: '请输入手机号',
                        type: 'error',
                      message: '请输入手机号',
                      type: 'error',
                    });
                  }
                }else {
                  this.$message({
                    message: '非法输入',
                    type: 'error',
                  });
                }

            },
        }
    }

 src/components/page/Index5.vue

New file
@@ -0,0 +1,204 @@
<template>
    <div class="weizhang-box">
       <!--<div class="weizhang-header">-->
           <!--<div class="iconfont leftjiantou">&#xe606;</div>-->
           <!--<div class="text"><h1>峰峰矿区综合行政执法局</h1></div>-->
           <!--<div class="right"></div>-->
       <!--</div>-->
        <div class="weizhang-main-box">
            <div class="weizhang-main-top">
                <img class="logoPhone" src="../../assets/images/logoImg.png" alt="">
                <span class="weizhang">罚没金额</span>
                <span class="money">￥{{this.statisticData.money}}</span>

            </div>
            <div class="weizhang-main-bootom">
                <div class="weizhang-main-form">
                    <el-form label-width="100px" :model="statisticData" label-position="left">
                        <el-form-item label="车牌号：" style="margin-left: 25px;">
                            <el-input v-model="statisticData.carNo" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="车辆类型：" style="margin-left: 25px;">
                            <el-input v-model="statisticData.carType" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="违法类型：" style="margin-left: 25px;">
                            <el-input v-model="statisticData.violationTypeName" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="违法编号：" style="margin-left: 25px;">
                            <el-input v-model="statisticData.userName" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="违法时间：" style="margin-left: 25px;">
                            <el-input v-model="statisticData.createTime" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="违停地点：" style="margin-left: 25px;">
                            <el-input v-model="statisticData.address" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="订单号：" style="margin-left: 25px;">
                            <el-input v-model="statisticData.code" readonly></el-input>
                        </el-form-item>
                        <div class="weizhang-tiaokuan" style="margin-left: 25px;">
                            <h1>
                                {{this.statisticData.remark}}
                            </h1>
                        </div>
                        <el-form-item class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 4.498vh" label-width="0" v-if="showFlag">
                            <el-button class="jiaofei-btn" type="primary" @click="pay()">去缴费</el-button>
                        </el-form-item>
                    </el-form>

                </div>

            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: 'dashboard',
        data() {
            return {
                ticketId:"",
                statisticData:{
                },
                showFlag:true,
            }
        },
        created(){
            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/ffPay/getZhifaId', null, res => {
              if(res.code === 0){
                this.statisticData = res.data;
                this.ticketId = this.statisticData.id
              }else {
                this.$message({
                  message: res.msg,
                  type: 'error',
                });
                return;
              }
            })
        },
        methods: {
            pay(){
                //window.location.href = "https://payapp.weixin.qq.com/life/index?fr=PSBC&pg=charge&ct=39&sv=20&wx=130100002001&bk=13040621E00000002330"
                this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/ffPay/zhifa', {id:this.ticketId}, res => {
                    this.$message({
                        message: '2秒后自动跳转到支付页面，防止内外网数据同步延迟，请稍等',
                        type: 'success',
                        duration:2000,
                    });
                    setTimeout(function(){window.location.href = res.msg;},2000);
                    this.showFlag = false;
                })
            }
        }
    }

</script>


<style lang="scss">
    .weizhang-main-bootom{
        .el-input__inner{
            border:none;
        }
        .el-form-item__label{
            color: #000;
            font-weight: 600;
        }
    }
    .weizhang-footer-box{
        .el-form-item__content{
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .el-button--small{
            padding: 11px 15px;
            font-size: 0.347rem  /* 26/75 */;
        }
    }

</style>
<style lang="scss" scoped>
h1,h2,h3,h4,h5{
    font-family: '苹方 中等';
    font-weight: normal;
}
.weizhang-header{
    display: flex;
    height: 12.8vw  /* 96/7.5 */;
    align-items: center;
    border-bottom:1px solid rgba(154,154,154,0.2);
    .text{
        flex: 1;
        text-align: center;
        h1{
            font-size: 2.699vh  /* 36/13.34 */;
        }
    }
    .right{
        width: 6.747vh  /* 90/13.34 */;
    }
    .leftjiantou{
        font-size: 5.33vw;
        width: 6.747vh  /* 90/13.34 */;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.weizhang-main-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding:5.33vw  /* 40/7.5 */;
}
.weizhang-main-top{
    height: 22.489vh  /* 300/13.34 */;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    .money{
        font-size: 6.93vw  /* 52/7.5 */;
        font-weight: 550;
    }
    .weizhang{
        font-size: 0.4rem  /* 30/75 */;
        line-height: 2;
        font-weight: normal;
        margin-top:1.33vw  /* 10/7.5 */;
        color: #000;
    }
}
    .weizhang-main-form{
    }
    .weizhang-tiaokuan{
        margin-top: 2.67vw  /* 20/7.5 */;
        h1{
            font-size:3.2vw  /* 24/7.5 */;
            color: #999999;
            text-indent: 2.5em;
            line-height: 2;
        }
    }
    .jiaofei-btn{
        width: 64.53vw  /* 484/7.5 */;
        border-radius: 5.33vw  /* 40/7.5 */;
        background-image: linear-gradient(to right,#33b1fe,#0679dc);
    }
.logoPhone{
    margin-top: 0.67vw;
    width: 1.333rem  /* 100/75 */;
    height: 1.333rem  /* 100/75 */;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
.weizhang-main-bootom{
    margin-top: 0.333rem  /* 25/75 */;
}
</style>

 src/router/index.js

@@ -106,6 +106,11 @@
            meta: { title: '无牌入场' }
        },
        {
            path: '/index5',
            component: resolve => require(['../components/page/Index5.vue'], resolve),
            meta: { title: '罚没缴费' }
        },
        {
            path: '/indexTest',
            component: resolve => require(['../components/page/IndexTest.vue'], resolve),
            meta: { title: '邮储测试' }