赤峰静态码测试完成

liuqimichale
1 parent c9972cc9
Showing 4 changed files with 268 additions and 96 deletions
src/components/dynCodePay.vue
src/components/plateNumber.vue
src/router/index.js
src/utils/utils.js
@@ -25,9 +25,12 @@
         <span>停车时长</span>
         <span>{{ $utils.dateFormat(staytime) }}</span>
       </li>
+
+
+
       <li>
         <span>待缴金额</span>
-        <span>{{(orderFee/100).toFixed(2)}}</span>
+        <span>{{(orderFee/100).toFixed(2)}} 元</span>
       </li>
     </ul>
@@ -66,6 +69,7 @@ export default {
       outtime: '', // 出场时间
       staytime: '', // 停车时长
       orderFee: '', // 需要支付的费用
+
       arrearageActFee: 0,
       arrearageDiscFee: 0,
       arrearageActFee: 0,
 <template>
   <div id="page">
     <div class="wrap">
-      <p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>
+      <!--<p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>-->
-      <ul class="color-choose">
-        <li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"
-        :style="{color:currentColor==index?'#FFF':'',background:  currentColor==index?activeBG:'' }"
-        >
-          {{i.name}}
-        </li>
+      <!--<ul class="color-choose">-->
+      <!--<li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"-->
+      <!--:style="{color:currentColor==index?'#FFF':'',background:  currentColor==index?activeBG:'' }"-->
+      <!--&gt;-->
+      <!--{{i.name}}-->
+      <!--</li>-->
-      </ul>
+      <!--</ul>-->
-      <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>
-      <div class="num-box">
+      <p style="margin-bottom: 18px;margin-top: 18px;">
+        {{formData.commonCard == '3'?'请输入手机号码':'请输入车牌号码'}}
+      </p>
+
+
+      <div v-if="formData.commonCard == '3'">
+        <input type="text" class="iphone-box" v-model="carNum" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')">
+      </div>
+
+      <div class="num-box" v-else>
         <div class="num0" @click="clickFirstWrap()">
           <span>{{formData.num0}}</span>
         </div>
@@ -24,12 +32,15 @@
         <div class="num1" @click="clickKeyWordWrap(4)"><span>{{formData.num4}}</span></div>
         <div class="num1" @click="clickKeyWordWrap(5)"><span>{{formData.num5}}</span></div>
         <div class="num1" @click="clickKeyWordWrap(6)"><span>{{formData.num6}}</span></div>
-        <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)"><span>{{formData.num7}}</span></div>
+        <div v-if="formData.commonCard == '2'" class="num1" @click="clickKeyWordWrap(7)"><span>{{formData.num7}}</span>
+        </div>
       </div>
+
+
       <div class="radio-box">
-        <label class="flex-items-center">
+        <label class="flex-items-center" @click="keyBoardStatus = true">
           <img v-if="formData.commonCard == 1"
                src="../assets/images/icon_chose_s@2x.png"
                alt="">
@@ -38,9 +49,9 @@
                alt="">
           <input type="radio"
                  v-model="formData.commonCard"
-                 value="1" />普通车牌
+                 value="1"/>普通车牌
         </label>
-        <label class="flex-items-center">
+        <label class="flex-items-center" @click="keyBoardStatus = true">
           <img v-if="formData.commonCard == 2"
                src="../assets/images/icon_chose_s@2x.png"
                alt="">
@@ -49,7 +60,18 @@
                alt="">
           <input type="radio"
                  v-model="formData.commonCard"
-                 value="2" />新能源车牌
+                 value="2"/>新能源车牌
+        </label>
+        <label class="flex-items-center" @click.self="changeTab">
+          <img v-if="formData.commonCard == 3"
+               src="../assets/images/icon_chose_s@2x.png"
+               alt="">
+          <img v-else
+               src="../assets/images/icon_chose_n@2x.png"
+               alt="">
+          <input type="radio"
+                 v-model="formData.commonCard"
+                 value="3"/>无牌车
         </label>
       </div>
@@ -169,7 +191,7 @@
         </div>
       </div>
     </div>
-    <div class="keyboard-wrap" v-if="keyBoardStatus === true">
+    <div class="keyboard-wrap" v-show="keyBoardStatus == true">
       <!-- <div class="number-wrap"></div>
       <div class="letter-wrap"></div>
       <div class="cn-wrap"></div> -->
@@ -229,7 +251,7 @@
     <modal-alert ref="alert">
       <div class="trave-tip-content txt-l" slot="content">
         <div class="confirm-text">
-          <p>请输入正确的车牌号</p>
+          <p>请输入正确的{{tip}}</p>
         </div>
       </div>
       <span slot="button">知道了</span>
@@ -237,33 +259,35 @@
   </div>
 </template>
 <script>
+import {noCarQRcodeInOutPark} from '@/api/plateNumber/plateNumber'
+
 export default {
-  data () {
+  data() {
     return {
-      colorList:[
+      colorList: [
         {
-          name:'蓝牌',
-          id:'1'
+          name: '蓝牌',
+          id: '1'
         },
         {
-          name:'黄牌',
-          id:'2'
+          name: '黄牌',
+          id: '2'
         },
         {
-          name:'白牌',
-          id:'3'
+          name: '绿牌',
+          id: '3'
         },
         {
-          name:'黑牌',
-          id:'4'
+          name: '白牌',
+          id: '4'
         },
         {
-          name:'绿牌',
-          id:'5'
+          name: '黑牌',
+          id: '5'
         },
       ],
-      currentColor:0,
-      activeBG:'#0054C0',
+      currentColor: 0,
+      activeBG: '#0054C0',
       formData: {
         commonCard: '1',
         num0: '',
@@ -290,40 +314,107 @@ export default {
       confirmTitle: '',
       submitConfirm: false,
       submitConfirmFalse: false,
-      submitConfirmText: ''
+      submitConfirmText: '',
+      carNum:'',
+      tip:'车牌号',
     }
   },
-  mounted () {
+  mounted() {
+    console.log(window.location)
+    console.log(this.$route.query)
+    let params = this.$route.query
+    if (Object.keys(params).length == 0) {
+      alert('1')
+    } else {
+      this.noCarQRcodeInOutPark()
+    }
   },
   methods: {
-    chooseColor (index){ // 颜色选择
-      this.currentColor = index
-      switch (this.currentColor) {
-        case 0 :
-          return this.activeBG = '#0054C0'
-          break;
-        case 1 :
-          return this.activeBG = '#FEBE00'
-          break;
-        case 2 :
-          return this.activeBG = '#E4E5E7'
-          break;
-        case 3 :
-          return this.activeBG = '#333333'
-          break;
-        case 4 :
-          return this.activeBG = '#97DEA1'
-          break;
-      }
+    // chooseColor (index){ // 颜色选择
+    //   this.currentColor = index
+    //   switch (this.currentColor) {
+    //     case 0 :
+    //       return this.activeBG = '#0054C0'
+    //       break;
+    //     case 1 :
+    //       return this.activeBG = '#FEBE00'
+    //       break;
+    //     case 2 :
+    //       return this.activeBG = '#97DEA1'
+    //       break;
+    //     case 3 :
+    //       return this.activeBG = '#E4E5E7'
+    //       break;
+    //     case 4 :
+    //       return this.activeBG = '#333333'
+    //       break;
+    //   }
+    // },
+    noCarQRcodeInOutPark() {
+      let params = this.$route.query
+      params.payType = this.$utils.IsWeixinOrAlipay()//4：微信     1：支付宝
+      params.terminalSource = "7";//1:任你听 3：微信公共号 4:云平台 7:H5
+      params.app_id = 1,
+      params.salt = 2,
+      params.deviceInfo = 3,
+      params.sign_type = 'md5',
+      params.sign = 4,
+      params.token = '666'
+      params.carNumber = this.carNum
+      noCarQRcodeInOutPark(params).then(res => {
+        console.log(res)
+        if (res.code == 0) {//进场
+          //alertMsg("出场成功");
+          if (res.data) {
+            var tmpObj = res.data;
+            //判断是否需要支付
+            if (tmpObj.needPay) {
+
+              var queryParams = this.$utils.parseParams(tmpObj);
+              console.log(queryParams)
+              console.log(tmpObj)
+              //
+              this.$router.push({
+                path: 'pay',
+                query: tmpObj
+              })
+
+              // window.location.href = "../pay.html?" + queryParams;
+            } else {
+              alert('无需缴费，欢迎下次光临')
+
+            }
+            //var tel = document.getElementById("inputPhoneNum").value.replace(/\s/g, "");//去除空格
+            //var orderFee = keepTwoDecimalFull((tmpObj.orderFee / 100));//本次出场实际应付金额（减去折扣，优惠券等之后的应付金额）
+            //var tmpUrl = "orderId=" + tmpObj.orderId + "&outtime=" + tmpObj.outtime + "&tel=" + tel + "&orderFee=" + orderFee;
+
+          } else {
+            alert("没有找到订单");
+          }
+        } else {//其他情况如【该卡号场内已存在】
+          console.log(res.message);
+          alert(res.message);
+
+        }
+
+      })
     },
-    clickFirstWrap () {
+    changeTab() {
+      // this.firstSelectStatus = false
+      // this.firstWrapStatus = false
+      this.keyBoardStatus = false
+      this.firstClickStatus = false
+      this.firstWrapStatus = false
+
+    },
+    clickFirstWrap() {
       // 点击第一个输入框
       this.firstClickStatus = true
       this.firstWrapStatus = true
       this.keyBoardStatus = false
       this.formData.num0 = ''
     },
-    selectFirstWord (event) {
+    selectFirstWord(event) {
       // 选择省份
       if (event.target.localName !== 'span') {
         return
@@ -337,7 +428,7 @@ export default {
       // this.$refs.num1.focus()
       // document.getElementById('num1').focus()
     },
-    clickKeyBoard (item) { // 点击自定义键盘
+    clickKeyBoard(item) { // 点击自定义键盘
       console.log(item)
       this.formData['num' + this.activeKeyWordIndex] = item
@@ -353,7 +444,7 @@ export default {
         }
       }
     },
-    deleteWord () { // 退格
+    deleteWord() { // 退格
       // console.log(this.activeKeyWordIndex)
       // console.log(this.formData['num' + (this.activeKeyWordIndex - 1)])
       if (this.activeKeyWordIndex > 1) {
@@ -361,17 +452,18 @@ export default {
         this.activeKeyWordIndex--
       }
     },
-    clickKeyWordWrap (activeKeyWordIndex) {
+    clickKeyWordWrap(activeKeyWordIndex) {
       this.keyBoardStatus = true
       this.activeKeyWordIndex = activeKeyWordIndex
       this.formData['num' + this.activeKeyWordIndex] = ''
     },
-    submitFn () {
+    submitFn() {
       let plateLicense
       if (this.formData.commonCard === '1') {
         plateLicense = this.plate_license_1
         plateLicense = this.palindrome(plateLicense)
         if (plateLicense.length < 7) {
+          this.tip = '车牌号'
           this.$refs.alert.open()
           return
         }
@@ -380,21 +472,35 @@ export default {
         plateLicense = this.plate_license_2
         plateLicense = this.palindrome(plateLicense)
         if (plateLicense.length < 8) {
+          this.tip = '车牌号'
           this.$refs.alert.open()
           return
         }
       }
-      this.$emit('getPlateLicense',plateLicense)
-      console.log(plateLicense);
-      this.$router.push({
-        path:'parkRecord',
-        query:{
-          carNumber:plateLicense,
-          carNumberColor: this.currentColor
+
+      if (this.formData.commonCard === '3') {
+        plateLicense = this.plate_license_2
+        plateLicense = this.palindrome(plateLicense)
+        if (plateLicense.length < 11) {
+          this.tip = '手机号'
+          this.$refs.alert.open()
+          return
         }
-      })
+      }
+      //
+      // this.$emit('getPlateLicense', plateLicense)
+      console.log(plateLicense);
+      this.carNum = plateLicense
+      // this.$router.push({
+      //   path: 'pay',
+      //   query: {
+      //     carNumber: plateLicense
+      //   }
+      // })
+
+      this.noCarQRcodeInOutPark()
     },
-    palindrome (str) {
+    palindrome(str) {
       var arr = str.split('')
       arr = arr.filter(function (val) {
         return (
@@ -417,7 +523,7 @@ export default {
       })
       return arr.join('')
     },
-    checkIsHasSpecialStr (str) {
+    checkIsHasSpecialStr(str) {
       var flag = false
       var arr = str.split('')
       arr.forEach(val => {
@@ -451,7 +557,7 @@ export default {
       })
       return flag
     },
-    checkIsHasChineseStr (str) {
+    checkIsHasChineseStr(str) {
       var Reg = /.*[\u4e00-\u9fa5]+.*/
       if (Reg.test(str)) {
         return true
@@ -460,7 +566,7 @@ export default {
     }
   },
   computed: {
-    plate_license_1 () {
+    plate_license_1() {
       return (
         this.formData.num0 +
         this.formData.num1 +
@@ -471,7 +577,7 @@ export default {
         this.formData.num6
       )
     },
-    plate_license_2 () {
+    plate_license_2() {
       return (
         this.formData.num0 +
         this.formData.num1 +
@@ -491,8 +597,9 @@ export default {
     display: flex;
     align-items: center;
   }
+
   .wrap {
-    padding:0 18px;
+    padding: 0 18px;
     .radio-box {
       display: flex;
       align-items: center;
@@ -512,14 +619,14 @@ export default {
       }
     }
-    .color-choose{
+    .color-choose {
       width: 265px;
       height: 34px;
       margin: 0 auto;
       background: #F3F3F3;
       border-radius: 6px;
       display: flex;
-      li{
+      li {
         flex: 1;
         text-align: center;
         line-height: 34px;
@@ -620,6 +727,7 @@ export default {
       }
     }
   }
+
   .first-word-wrap {
     // height: 9.4rem;
     background-color: #D2D5DB;
@@ -637,12 +745,12 @@ export default {
         width: 1.8rem;
         height: 1.8rem;
         // border: 1px solid #9cbce2;
-        box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
         border-radius: 0.16rem;
         text-align: center;
         &.bordernone {
           border: none;
-          box-shadow:none
+          box-shadow: none
         }
         span {
           box-sizing: border-box;
@@ -661,11 +769,12 @@ export default {
           width: 1.6rem;
         }
       }
-      &:nth-last-of-type(1){
+      &:nth-last-of-type(1) {
         margin-bottom: 0rem;
       }
     }
   }
+
   .keyboard-wrap {
     background-color: #D2D5DB;
     position: fixed;
@@ -687,33 +796,33 @@ export default {
         justify-content: center;
         height: 1.8rem;
         margin: 0 0.3rem;
-        box-shadow: 0px 1px 4px  rgba(0, 0, 0, 0.35);
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.35);
         background-color: #fff;
         border-radius: 0.125rem;
         &:active {
           background-color: #e4e4e4;
         }
-        &.bordernone{
+        &.bordernone {
           border: none;
           box-shadow: none;
           background-color: #D2D5DB;
-          &:active{
-            background-color:#D2D5DB;
+          &:active {
+            background-color: #D2D5DB;
           }
         }
-        &.delete{
+        &.delete {
           background-color: #465266;
-          img{
+          img {
             width: 1.15rem;
           }
         }
       }
     }
-    .cancel{
+    .cancel {
       display: flex;
       justify-content: flex-end;
       align-items: center;
-      span{
+      span {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -725,4 +834,20 @@ export default {
       }
     }
   }
+
+  input[type="text"]:focus {
+    border: 0;
+    border: 1px solid #e4e4e4 !important;
+  }
+
+  .iphone-box {
+    border: 0;
+    width: 100%;
+    height: 1.8rem;
+    line-height: 1.8rem;
+    padding-left: 20px;
+    border: 1px solid #e4e4e4;
+    font-size: 14px;
+  }
+
 </style>
@@ -24,16 +24,16 @@ export default new Router({
       name: 'plateNumber',
       component: plateNumber
     },
-    {
-      path: '/parkRecord',
-      name: 'parkRecord',
-      component: parkRecord
-    },
-    {
-      path: '/orderPay',
-      name: 'orderPay',
-      component: () => import("@/components/orderPay.vue")
-    },
+    // {
+    //   path: '/parkRecord',
+    //   name: 'parkRecord',
+    //   component: parkRecord
+    // },
+    // {
+    //   path: '/orderPay',
+    //   name: 'orderPay',
+    //   component: () => import("@/components/orderPay.vue")
+    // },
     {
       path: '/payResult',
@@ -48,6 +48,12 @@ export default new Router({
       component: () => import("@/components/dynCodePay.vue")
     },
+    {
+      path: '/pay',
+      name: 'pay',
+      component: () => import("@/components/pay.vue")
+    },
+
@@ -12,6 +12,43 @@ export default {
     return pwd;
   },
+  parseParams: function (data) {
+    try {
+      var tempArr = [];
+      for (var i in data) {
+        var key = (i);
+        var value = encodeURIComponent(data[i]);//decodeURIComponent
+        tempArr.push(key + '=' + value);
+      }
+      var urlParamsStr = tempArr.join('&');
+      return urlParamsStr;
+    } catch (err) {
+      return '';
+    }
+  },
+
+
+  IsWeixinOrAlipay: function () {
+    if (/MicroMessenger/.test(window.navigator.userAgent)) {
+      console.log("微信客户端");
+      //this.switchShow("wxPay");
+      return 4
+    } else if (/AlipayClient/.test(window.navigator.userAgent)) {
+      console.log("支付宝客户端");
+      //this.switchShow("aliPay");
+      return 1
+    } else if (/BankabciPhone/.test(window.navigator.userAgent)) {
+      console.log("农行客户端");
+      return 1
+    } else if (/BankabcAndroid/.test(window.navigator.userAgent)) {
+      console.log("农行客户端");
+      return 1
+    } else {
+      console.log("其他浏览器");
+      return 1
+    }
+  },
+
   dateFormat: function (msd) {  // 时间转换