修改前端页面

kongdeqiang

2023-09-15 bfd108cc9ecdae0ee9b118d2307715a357cbcee2

 src/components/page/IndexTest.vue

@@ -50,6 +50,39 @@

            </div>
        </div>
      <div class="dialog-box">
        <el-dialog
            title="支付"
            :close-on-click-modal="false"
            :visible.sync="dialogVisible"
            width="100%">
          <div class="dialog-main-box">
            <div class="dialog-main-line">
              <h1>合计费用</h1>
              <h1>{{this.statisticData.price}}元</h1>
            </div>
            <div class="dialog-main-line">
              <h1>停车时长</h1>
              <h1>{{this.statisticData.timeStr}}</h1>
            </div>
            <div class="dialog-main-line-middle">
              <h1>{{this.statisticData.price}}<font>元</font></h1>
            </div>
            <div class="wx-img-box">
              <div class="wx-img-l">
                <img src="../../assets/images/wxIcon.png" alt="">
                <h1>微信支付</h1>
              </div>
              <div class="wx-img-r">
                <img src="../../assets/images/duigouIcon.png" alt="">
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="pay()">立 即 支 付</el-button>
          </span>
        </el-dialog>
      </div>

    </div>
</template>
@@ -60,6 +93,7 @@
        name: 'dashboard',
        data() {
            return {
                dialogVisible:false,
                payFlag:false,
                outParkId:"",
                type:null,
@@ -86,11 +120,10 @@
            //支付宝
            this.type = 1
          }
          if(this.type == null){
            this.$message.error("请用微信或支付宝扫描二维码")
            return;
          }

          // if(this.type == null){
          //   this.$message.error("请用微信或支付宝扫描二维码")
          //   return;
          // }

            var url = window.location.href;
            var count = url.split('?').length-1;
@@ -98,6 +131,12 @@
              this.code = this.getCodeFromUrl(url)
              this.code2 = this.getCode2FromUrl(url)
              window.location.href = "http://hesuancj.cn/#/indexTest?code="+this.code+"&state=STATE&code2="+this.code2
            }
            console.log('this.code====',this.code)
            if(this.code != null && this.code != '') {
              this.dialogVisible = true
            }else {
              this.dialogVisible = false
            }
            var cs = url.split('?')[1];
            var cs_arr = cs.split('&');
@@ -265,7 +304,7 @@
            this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/getById', {id: this.outParkId}, res => {
              if (res.code == 0) {
                let outpark = res.data
                if(outPark.status == 1){
                if(outpark.status == 1){
                  window.location.href = "http://hesuancj.cn/#/indexOk?code2="+this.code2
                }else {
                  window.location.href = "http://hesuancj.cn/#/indexFail?code2="+this.code2
@@ -300,6 +339,39 @@
            padding: 11px 15px;
            font-size: 0.347rem  /* 26/75 */;
        }
    }
    .dialog-box{
      .el-dialog{
        bottom: 0;
        position: fixed;
        left: 0;
        margin: 0;
      }
      .el-dialog__body{
        padding: 2.67vw  /* 20/7.5 */ 5.33vw  /* 40/7.5 */;
      }
      .el-dialog__header{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.87vw  /* 14/7.5 */;
        background: rgba(103,201,122,0.1);
      }
      .el-dialog__title{
        font-size: 4vw  /* 30/7.5 */;
      }
      .el-dialog__headerbtn{
        top: 2.67vw  /* 20/7.5 */;
      }
      .dialog-footer{
        display: flex;
        width: 100% !important;
        .el-button{
          width: 100%;
          background: rgba(74,76,89,1);
        }
      }
    }

</style>
@@ -385,4 +457,53 @@
    .weizhang-main-bootom{
        margin-top: 0.333rem  /* 25/75 */;
    }
    .dialog-main-box{
      .dialog-main-line{
        display: flex;
        justify-content: space-between;
        h1{
          font-size: 3.2vw  /* 24/7.5 */;
          color: rgba(0,0,0,0.9);
          line-height: 2;
        }
      }
      .dialog-main-line-middle{
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 2.67vw  /* 20/7.5 */ 0;
        h1{
          font-size: 8vw  /* 60/7.5 */;
          line-height: 2;
          color: rgba(0,0,0,1);
          font{
            font-size: 3.73vw  /* 28/7.5 */;
            margin-left: 0.67vw  /* 5/7.5 */;
          }
        }
      }
      .wx-img-box{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .wx-img-l{
          display: flex;
          img{
            width: 5.33vw  /* 40/7.5 */;
            object-fit: contain;
          }
          h1{
            font-size: 3.47vw  /* 26/7.5 */;
            margin-left: 1.33vw  /* 10/7.5 */;
          }
        }
        .wx-img-r{
          width: 4vw  /* 30/7.5 */;
          height: 4vw  /* 30/7.5 */;
          img{
            width: 100%;
          }
        }
      }
    }
</style>