赤峰微信公众号 -- 临停支付

liuqimichale
1 parent 0e89efab
Showing 30 changed files with 991 additions and 238 deletions
dist 2.zip
dist.zip
index.html
package.json
src/api/orderPay/orderPay.js
src/api/parkRecord/parkRecord.js
src/api/plateNumber/plateNumber.js
src/assets/images/blackBG.png
src/assets/images/blueBG.png
src/assets/images/carBlack.png
src/assets/images/carBlue.png
src/assets/images/carGreen.png
src/assets/images/carWhite.png
src/assets/images/carYellow.png
src/assets/images/cards/carBg.png
src/assets/images/cards/cardPointBg.png
src/assets/images/greenBG.png
src/assets/images/sweet.png
src/assets/images/tip.png
src/assets/images/whiteBG.png
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="google" content="notranslate">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>黄石微信公众号</title>
+    <title>微信公众号</title>
   </head>
   <body>
     <div id="app"></div>
@@ -15,9 +15,11 @@
     "js-base64": "^3.6.0",
     "less-loader": "^4.1.0",
     "mint-ui": "^2.2.13",
+    "moment": "^2.29.1",
     "node-sass": "^5.0.0",
     "sass-loader": "^7.3.1",
     "vue": "^2.5.2",
+    "mint-ui": "^2.2.13",
     "vue-h5-popup": "^1.0.2",
     "vue-router": "^3.0.1"
   },
@@ -62,9 +64,9 @@
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
+    "webpack": "^3.4.1",
     "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.9.1",
+    "webpack-dev-server": "^2.9.7",
     "webpack-merge": "^4.1.0"
   },
   "engines": {
@@ -17,7 +17,6 @@ export function getOpenId(params) {  // 获取OpenId
   })
 }
-
 export function vxPayQuery(params) {  // 微信
   return request({
     url: 'weixinpay/publicUnifiedOrder',
@@ -26,22 +25,18 @@ export function vxPayQuery(params) {  // 微信
   })
 }
-// 新接口银联
-export function doPay(params) {  // 微信
+export function bankH5Pay(params) {  // 农行
   return request({
-    url: 'unionpay/doPay',
+    url: 'abcBankPay/bankPayForH5',
     method: 'post',
     data: params
   })
 }
-
-// 创建订单
-
-export function doOrderCreate(params) {  // 创建订单
+export function queryParkingRecordPageByCarNumbers(params) {  // 支付完成后查询记录
   return request({
-    url: 'unionpay/doOrderCreate',
+    url: 'queryParkOrder/queryParkingRecordPageByCarNumbers',
     method: 'post',
     data: params
   })
@@ -50,3 +45,8 @@ export function doOrderCreate(params) {  // 创建订单
+
+
+
+
+
@@ -24,4 +24,13 @@ export function parkingQuery(params) {
   })
 }
+export function appApplyParkOut(params) {  // 0元出场
+  return request({
+    url: 'appAccountPay/appApplyParkOut',
+    method: 'post',
+    data: params
+  })
+}
+
+
+import request from '@/utils/request'
+
+export function swiperQuery(params) {  //  轮播图
+  return request({
+    url: 'activity/queryActivityListByJumpType',
+    method: 'post',
+    data: params
+  })
+}
+
+
+
+
+
@@ -10,18 +10,33 @@ import h5Popup from &#39;vue-h5-popup&#39; // 引入弹窗
 Vue.use(h5Popup)
-import MintUI from 'mint-ui'
-import 'mint-ui/lib/style.css'
-Vue.use(MintUI)  // 引入MintUI
+// import MintUI from 'mint-ui'
+// import 'mint-ui/lib/style.css'
+// Vue.use(MintUI)  // 引入MintUI
+
+import 'mint-ui/lib/style.css'
+import { MessageBox } from 'mint-ui'
+// Vue.use(MessageBox)
+Vue.prototype.$msgbox = MessageBox
 //全局设置的基本样式
 import './assets/css/base.scss'
+import moment from 'moment'
+// 设置本地时区
+moment.locale('zh-cn')
+Vue.prototype.$moment = moment
+
+
 import utils from './utils/utils' // 工具类
 Vue.prototype.$utils = utils
+import Mint from 'mint-ui';
+import 'mint-ui/lib/style.css'
+Vue.use(Mint);
+
 import 'swiper/dist/css/swiper.min.css' // 轮播
 import 'swiper/dist/js/swiper.min'
@@ -2,7 +2,7 @@ import Vue from &#39;vue&#39;
 import Router from 'vue-router'
 import plateNumber from '@/views/parkPay/plateNumber'
 import parkRecord from '@/views/parkPay/parkRecord'
-import selfNav from '@/views/mySelf/selfNav'
+// import selfNav from '@/views/mySelf/selfNav'
 Vue.use(Router)
@@ -11,7 +11,7 @@ export default new Router({
     {
       path: '/',
       redirect: {
-        name: 'selfNav'
+        name: 'plateNumber'
       }
     },
     // {
@@ -37,36 +37,50 @@ export default new Router({
       component: () => import("@/views/parkPay/orderPay.vue")
     },
-     //---------------- 个人页面导航
-    {
-      path: '/selfNav',
-      name: 'selfNav',
-      component: () => import("@/views/mySelf/selfNav.vue")
-    },
-
-    // ------------------------建议反馈
-    {
-      path: '/suggestionBack',
-      name: 'suggestionBack',
-      component: () => import("@/views/mySelf/feedback/suggestionBack.vue")
-    },
-
-    // ------------------------停车记录
-    {
-      path: '/parkNotes',
-      name: 'parkNotes',
-      component: () => import("@/views/mySelf/parkNotes/parkNotes.vue")
-    },
-
-
-    // ------------------------停车记录
-    {
-      path: '/binDing',
-      name: 'binDing',
-      component: () => import("@/views/binding/binDing.vue")
-    },
-
-
+    //  //---------------- 个人页面导航
+    // {
+    //   path: '/selfNav',
+    //   name: 'selfNav',
+    //   component: () => import("@/views/mySelf/selfNav.vue")
+    // },
+    //
+    // // ------------------------建议反馈
+    // {
+    //   path: '/suggestionBack',
+    //   name: 'suggestionBack',
+    //   component: () => import("@/views/mySelf/feedback/suggestionBack.vue")
+    // },
+    //
+    // // ------------------------停车记录
+    // {
+    //   path: '/parkNotes',
+    //   name: 'parkNotes',
+    //   component: () => import("@/views/mySelf/parkNotes/parkNotes.vue")
+    // },
+    //
+    //
+    // // ------------------------停车记录
+    // {
+    //   path: '/binDing',
+    //   name: 'binDing',
+    //   component: () => import("@/views/binding/binDing.vue")
+    // },
+    //
+    //
+    // // ------------------------购买会员卡提示
+    // {
+    //   path: '/cardPoint',
+    //   name: 'cardPoint',
+    //   component: () => import("@/views/cards/cardPoint.vue")
+    // },
+    //
+    //
+    // // ------------------------购买会员卡
+    // {
+    //   path: '/buyCard',
+    //   name: 'buyCard',
+    //   component: () => import("@/views/cards/buyCard.vue")
+    // },
@@ -7,7 +7,7 @@ const service = axios.create({
   // http://pay.service.renniting.cn/  赤峰
   // http://pay.service.huangshiparking.com/  黄石正式环境
   //  http://39.98.54.240:8090/   黄石测试环境
-  baseURL: 'http://pay.service.huangshiparking.com/', // url = base url + request url
+  baseURL: 'http://pay.service.renniting.cn/v1', // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 6000 // request timeout
 })
@@ -12,6 +12,34 @@ export default {
     return pwd;
   },
+  formatDate: function(secs, type=0){         //type是可选参数，因为json中时间的格式是year-month-date,不能识别XX年XX月XX日
+    var t = new Date(secs)
+    var year = t.getFullYear()
+    var month = t.getMonth() + 1
+    if(month < 10){ month = '0' + month }
+    var date = t.getDate()
+    if(date < 10){ date = '0' + date }
+    var hour = t.getHours()
+    if(hour < 10){ hour = '0' + hour }
+    var minute = t.getMinutes()
+    if(minute < 10){ minute = '0' + minute }
+    var second = t.getSeconds()
+    if(second < 10){ second = '0' + second }
+    if(type==0){
+      return year + '年' + month + '月' + date + '日'
+    }else{
+      return year + '-'+month+'-'+date
+    }},
+
+  timestampToTime: function (timestamp) {
+    var d = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
+    var youWant=d.getFullYear() + '-' + this.completedString(d.getMonth() + 1) + '-' + this.completedString(d.getDate()) ;
+    return  youWant
+  },
+  completedString:function(s) {
+    return s < 10 ? '0' + s : s
+  },
+
   dateFormat: function (msd) {  // 时间转换
@@ -80,27 +108,53 @@ export default {
     } else if (/AlipayClient/.test(window.navigator.userAgent)) {
       console.log("支付宝客户端");
       return '支付宝'
-    } else {
+    } else if (/BankabciPhone/.test(window.navigator.userAgent)) {
+      console.log("农行客户端");
+      return '立即'
+    }else if (/BankabcAndroid/.test(window.navigator.userAgent)) {
+      console.log("农行客户端");
+      return '立即'
+    }else {
       console.log("其他浏览器");
       return '支付宝'
     }
   },
+
+  // 1:支付宝 2：微信 3：银联 10:H5   4微信公众号   34 农行
+  clientBrowsePayType: function () { // 判断客户端
+    if (/MicroMessenger/.test(window.navigator.userAgent)) {
+      console.log("微信客户端");
+      return '4'
+    } else if (/AlipayClient/.test(window.navigator.userAgent)) {
+      console.log("支付宝客户端");
+      return '1'
+    } else if (/BankabciPhone/.test(window.navigator.userAgent)) {
+      console.log("农行客户端");
+      return '34'
+    }else if (/BankabcAndroid/.test(window.navigator.userAgent)) {
+      console.log("农行客户端");
+      return '34'
+    }else {
+      console.log("其他浏览器");
+      return '1'
+    }
+  },
   // 0eca8f5373ca4866aec2f8e9d9367104  老的id
   // 14318527b13840c2a4af63fef52c2d6e 老的签名
   // ud8yq5tv0inxupc05xfeau39jywlqoj2  新的id
   // ny1u72b6k374sg379z0kqjgfxe2ycnpw 新的签名
-  myVarAppid:'0eca8f5373ca4866aec2f8e9d9367104',// 公共请求Appid
+  myVarAppid:'ud8yq5tv0inxupc05xfeau39jywlqoj2',// 公共请求Appid
   myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E', // 公共请求设备信息
-  myVxAppId: 'wxa1a66cc7d263afe6',
+  myVxAppId: 'wx2af2bab90d433c86',
   // 测试环境 微信赤峰 appid   wxff4cebaedbf4f886
   // 微信赤峰 appid   wx2af2bab90d433c86
   // 黄石 appid    wxa1a66cc7d263afe6
-  myOrgId: '10079', // 归属地 赤峰id  10003    黄石 10079
+  myOrgId: '10003', // 归属地 赤峰id  10003    黄石 10079
   myGetSign: function (objb) { // 获取签名
     var compare = function (obj1, obj2) {
@@ -115,13 +169,13 @@ export default {
       }
     }
     objb.sort(compare);
-    var strmd5 = '14318527b13840c2a4af63fef52c2d6e';
+    var strmd5 = 'ny1u72b6k374sg379z0kqjgfxe2ycnpw';
     for(var i=0;i<objb.length;i++){
       if(objb[i].value != null&&objb[i].value != ''){
         strmd5 += objb[i].keyname+objb[i].value;
       }
     }
-    strmd5 += '14318527b13840c2a4af63fef52c2d6e';
+    strmd5 += 'ny1u72b6k374sg379z0kqjgfxe2ycnpw';
     // console.log('strmd5-------->'+strmd5);
     strmd5 = md5(strmd5);
     strmd5=strmd5.toUpperCase();
+<template>
+  <div>
+    <ul class="choose-area">
+      <li>
+        <div style="color: #666">卡名称</div>
+        <div>微纳园卡</div>
+      </li>
+
+      <li>
+        <div style="color: #666">选择卡类型</div>
+        <div @click="popupVisible = true">{{carType}}</div>
+        <div class="arrow">></div>
+      </li>
+
+
+      <li>
+        <div style="color: #666">绑定车牌</div>
+        <div @click="carNumberVisible = true">{{carNumber}}</div>
+        <div class="arrow">></div>
+      </li>
+
+      <li>
+        <div style="color: #A31414">生效时间</div>
+        <div style="color: #A31414" @click="selectData">{{ $utils.timestampToTime(time) }}</div>
+        <div class="arrow">></div>
+      </li>
+
+      <li>
+        <div style="color: #666">有效期至</div>
+        <div>{{ $utils.timestampToTime(endDate)}}</div>
+      </li>
+
+
+      <li>
+        <div style="color: #666">购买数量</div>
+        <div class="choose-num">
+          <span @click="addCardNum">+</span>
+          <span>{{cardNum}}</span>
+          <span @click="reduceCarNum">-</span>
+        </div>
+      </li>
+
+      <li>
+        <div style="color: #666">单价</div>
+        <div>￥10.00</div>
+      </li>
+
+
+      <li>
+        <div style="color: #666">优惠金额</div>
+        <div>￥0.00</div>
+      </li>
+
+      <li>
+        <div style="color: #666">应付金额</div>
+        <div style="color: #A31414">￥30.00</div>
+      </li>
+
+    </ul>
+
+    <div class="parkArea leftRightPadding">
+      <p class="parkAreaTitle">
+        <span>本卡同时适用于以下停车场：</span>
+        <span class="parkMore" @click="parkMoreVisible = true">查看更多</span>
+      </p>
+
+      <p>停车场停车场停车停车场</p>
+    </div>
+
+    <div  style="margin-top: 34px" class="leftRightPadding">
+      <mt-button type="danger" size="large">确定购买</mt-button>
+    </div>
+
+    <!-- @touchmove.prevent 阻止默认事件，在选择时间时阻止页面也跟着滚动-->
+    <div @touchmove.prevent>
+      <mt-datetime-picker
+        lockScroll="true"
+        ref="datePicker"
+        v-model="dateVal"
+        type="date"
+        year-format="{value} 年"
+        month-format="{value} 月"
+        date-format="{value} 日"
+        :startDate="startDate"
+        @confirm="handleConfirm()"
+      ></mt-datetime-picker>
+    </div>
+
+
+    <mt-actionsheet
+      :actions="actions"
+      v-model="popupVisible">
+    </mt-actionsheet>
+
+    <mt-actionsheet
+      :actions="carNumList"
+      v-model="carNumberVisible">
+    </mt-actionsheet>
+
+    <mt-popup
+      v-model="parkMoreVisible" class="park-list-wrap"
+      >
+      <ul class="park-list">
+        <li v-for="(i, index) in 10">{{index+1}}、停车场{{i}}</li>
+      </ul>
+    </mt-popup>
+
+  </div>
+</template>
+
+<script>
+import { timestampToTime } from '../../utils/utils.js'
+
+export default {
+  name: 'buyCard',
+  data() {
+    return {
+      startDate: new Date(),
+      dateVal: '',
+      selectedValue: '',
+      time: new Date(),
+      endDate:new Date(),
+      popupVisible: false,
+      actions: [
+        {name:'月卡',num:1, method: this.clickAction },
+        {name:'季卡',num:3, method: this.clickAction },
+        {name:'年卡',num:12, method: this.clickAction },
+
+      ],
+      carType:'月卡',
+      carNumList:[
+        {name:'停车场1',method: this.clickActionCarNum },
+        {name:'停车场2',method: this.clickActionCarNum },
+        {name:'停车场3',method: this.clickActionCarNum },
+        {name:'停车场4',method: this.clickActionCarNum },
+        {name:'停车场5',method: this.clickActionCarNum },
+      ],
+      carNumber:'',
+      carNumberVisible:false,
+      parkMoreVisible:false,
+      cardNum:1
+    }
+  },
+  methods: {
+    //打开时间选择器
+    selectData() {
+
+      this.$refs['datePicker'].open()
+    },
+    handleConfirm() {
+      console.log(this.dateVal)
+      this.time = this.$utils.timestampToTime(this.dateVal);
+    },
+    clickAction(e){
+      console.log(e.name)
+      this.carType = e.name
+      this.endDate = this.time
+    },
+    clickActionCarNum(e){
+      this.carNumber = e.name
+    },
+    addCardNum(){ // 增加购买数量
+      this.cardNum ++
+    },
+    reduceCarNum(){ // 增加购买数量
+      if(this.cardNum==1){
+        return
+      }
+      this.cardNum --
+    },
+
+
+
+  },
+  filters: {
+    formatDate(time) {
+      var date = new Date(time);
+      return formatDate(date)
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .choose-area {
+    background: #fff;
+    padding: 0 10px;
+  }
+
+  .choose-area > li {
+    padding-right: 20px;
+    position: relative;
+    height: 38px;
+    line-height: 38px;
+    border-bottom: 1px solid #EFEFEF;
+    display: flex;
+    justify-content: space-between;
+    .arrow {
+      position: absolute;
+      right: 0;
+      top: 0;
+      font-size: 16px;
+    }
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+  .choose-num{
+    height: 28px;
+    margin-top: 5px;
+    line-height: 28px;
+    display: flex;
+    border: 1px solid #D8D8D8;
+    span{
+      display: inline-block;
+      &:nth-of-type(1){
+        width: 28px;
+        height: 28px;
+        text-align: center;
+        cursor: pointer;
+      }
+      &:nth-of-type(2){
+        width: 50px;
+        text-align: center;
+        border-left: 1px solid #D8D8D8;
+        border-right: 1px solid #D8D8D8;
+      }
+      &:nth-of-type(3){
+        width: 28px;
+        height: 28px;
+        text-align: center;
+        cursor: pointer;
+      }
+    }
+  }
+  .parkArea{
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-top: 10px;
+    background: #fff;
+    color: #999;
+  }
+  .parkAreaTitle{
+    display: flex;
+    justify-content: space-between;
+    color: #666;
+  }
+  .parkMore{
+    cursor: pointer;
+  }
+  .park-list-wrap{
+    width: 80%;
+    max-height: 70%;
+    overflow-y: scroll;
+    border-radius: 5px;
+  }
+  .park-list{
+
+    /*width: 80%;*/
+    li{
+      padding-left: 20px;
+      line-height: 25px;
+    }
+  }
+
+</style>
+<template>
+  <div class="leftRightPadding">
+    <div class="card-point-bg">
+      <div class="carbg"></div>
+      <p class="buy-card-btn" @click="$router.push({name:'buyCard'})">+<span>购买会员卡</span></p>
+      <div class="slogan">
+        <p>
+          年卡、季卡、月卡，任你选，停车场让您挑，
+        </p>
+        <p>优惠停车，惊喜不断！</p>
+      </div>
+    </div>
+
+    <p class="sweet">温馨提示：</p>
+    <div class="sweet-con">
+      <p>
+        1、年卡有效期为一年，从开卡之日算起往后一年时间内在所选停车场均可免费停车，到期后自动失效。
+      </p>
+      <p>
+        2、季卡有效期为三个月，从开卡之日算起往后三个月内所选停车场免费停车，到期后自动失效。
+      </p>
+      <p>
+        3、月卡有效期为一个月，从开卡之日算起，往后一个月为止在所选停车场长内均可免费停车，到期后自动失效。
+      </p>
+      <p>
+        4、所有卡均  <span>不支持预留车位</span> ，只适用于所选停车场进出场结算。
+      </p>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'cardPoint'
+}
+</script>
+
+<style scoped lang="scss">
+  .card-point-bg {
+    height: 212px;
+    margin: 10px 0;
+    position: relative;
+    background: url("../../assets/images/cards/cardPointBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .carbg{
+    width: 134px;
+    height: 141px;
+    position: absolute;
+    left: 21px;
+    top:30px;
+    background: url("../../assets/images/cards/carBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .buy-card-btn{
+    position: absolute;
+    left: 90px;
+    top:71px;
+    font-size: 24px;
+    color: #fff;
+    font-weight: bold;
+    cursor: pointer;
+    span{
+      margin-left: 30px;
+    }
+  }
+  .slogan{
+    position: absolute;
+    left: 45px;
+    top: 150px;
+    text-align: center;
+    color: #fff;
+  }
+  .sweet{
+    padding-left: 20px;
+    background: url("../../assets/images/sweet.png") no-repeat 0 center;
+  }
+  .sweet-con{
+    color: #666;
+    p{
+      margin-bottom: 10px;
+      line-height: 25px;
+    }
+    span{
+      color: #D29E0D;
+    }
+  }
+</style>
@@ -22,10 +22,10 @@
       </li>
     </ul>
     <div style="padding: 20px 18px">
-      <div class="toPay" @click="toPay">微信支付</div>
+      <div class="toPay" @click="toPay">{{clientBrowser}}支付</div>
     </div>
-    <div v-if="appOrderTimeout">
+    <div v-if="appOrderTimeout.length>0">
       <p class="tip">
         温馨提示：
       </p>
@@ -40,22 +40,27 @@
 </template>
 <script>
-import {aliPay, getOpenId, vxPayQuery, doPay, doOrderCreate} from '@/api/orderPay/orderPay'
+// import CryptoJS from '../utils/AES.js'
+// let Base64 = require('js-base64').Base64
+import {  MessageBox } from 'mint-ui';
+import { aliPay, getOpenId, vxPayQuery, bankH5Pay, queryParkingRecordPageByCarNumbers } from '@/api/orderPay/orderPay'
 export default {
   name: 'orderPay',
   data() {
     return {
       carWrapBG: 0,
-      carNumber: '京A12312',
+      carNumber: '',
       arrearageActFee: 0,
       arrearageDiscFee: 0,
       arrearageActFee: 0,
+      parkingData: [], //  在停数据
+      historyList: [], // 历史欠费数据
+      clientBrowser: '', // 客户端
       paySrcType: '', //支付的类型   101 是本次   103是历史欠费
       orderId: '',  //支付的订单
       webAppCode: '', // 微信code
       appOrderTimeout: '', // 超时描述
-      isAndroid: '', // 终端类型
     }
   },
   created() {
@@ -64,14 +69,19 @@ export default {
     this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收
     this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠
     this.arrearageActFee = this.$route.query.arrearageActFee // 实收
+    this.clientBrowser = this.$utils.clientBrowser() //支付方式
     this.paySrcType = this.$route.query.paySrcType // 实收
-    this.orderId = this.$route.query.ordeID // 订单号
+    this.orderId = this.$route.query.ordeID
     console.log(this.orderId)
-    this.appOrderTimeout = this.$route.query.appOrderTimeout  //提示
+    this.appOrderTimeout = this.$route.query.appOrderTimeout
+    if (this.clientBrowser == "微信") {
+      this.webAppCode = this.getCode();
+    }
+
-    let userAgent = navigator.userAgent;
-    this.isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端
-    this.webAppCode = this.getCode();
+
+  },
+  mounted(){
   },
   methods: {
@@ -85,131 +95,181 @@ export default {
         return code;
       }
     },
-    doOrderCreate(orderID) { // 欠费创建订单号
-      var jsondata = {
-        orderBigType: 100,
-        payOrderType: this.paySrcType,
-        parkOrderIds: orderID,
-        terminalSource: 7,
-        operName: '',
-        operCode: '',
-      };
-      // jsondata = JSON.stringify(jsondata);
-      doOrderCreate(jsondata).then(res => {
-        console.log(res)
-        this.orderId = res.data.rltOrderId
-        console.log(this.orderId)
-        this.dopay(this.orderId)
-      })
-
-    },
     getUrlParam(name) {
       var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
       var r = window.location.search.substr(1).match(reg)
       if (r != null) return unescape(r[2])
       return null
     },
-    dopay(orderID) {
+    toPay() {
       let me = this
+      let _order = []
+
+      console.log(this.orderId)
+      if (this.paySrcType == 103) {
+        this.orderId = JSON.parse(this.orderId)
+        this.orderId.forEach(item => {
+          _order.push({
+            orderId: item
+          })
+        })
+        this.orderId = []
+        this.orderId = _order
+      }
+
+      if (this.clientBrowser == '支付宝') { // 支付宝支付
+        var aliParams = {};
+        aliParams.orderId = this.orderId;
+        aliParams.carNumber = this.carNumber;
+        aliParams.payType = 1;// 1:支付宝 2：微信 3：银联 10:H5   4微信公众号
+        aliParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
+        aliParams.paySrcType = this.paySrcType;//101停车支付
+        aliParams.orgId = this.$utils.myOrgId,
+          aliParams.backType = 2,
+          aliParams.recordArreaInfos = JSON.stringify(this.orderId);
+        console.log(aliParams)
+        aliPay(aliParams).then(response => {
+          console.log(response)
+          if (response.code == 0) {//进场
+            document.write(response.data);//打开支付表单
+          } else {//其他情况如【该卡号场内已存在】
+            console.log(response.message);
+          }
+
+        })
+      }
+
+      console.log(this.clientBrowser)
+      if (this.clientBrowser == '立即') { // 农行支付
+        var bankabcParams = {};
+        bankabcParams.orderId = this.orderId;
+        bankabcParams.carNumber = this.carNumber;
+        bankabcParams.payType = 34;// 1:支付宝 2：微信 3：银联 10:H5   4微信公众号   34 农行
+        bankabcParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
+        bankabcParams.paySrcType = this.paySrcType;//101停车支付
+        bankabcParams.orgId = this.$utils.myOrgId,
+          bankabcParams.backType = 2,
+          bankabcParams.PaymentLinkType = 1
+        bankabcParams.recordArreaInfos = JSON.stringify(this.orderId);
+        console.log(bankabcParams)
+        bankH5Pay(bankabcParams).then(response => {
+          console.log(response)
+          if(response.code=='0'){
+            let res = response.data.PaymentURL
+            let _token = res.split('TOKEN=')[1]
+            let OrderNo = response.data.OrderNo
+            localStorage.setItem('OrderNum',OrderNo)
+
+
+            if(window.navigator.userAgent.indexOf('Bankabc/Portal') > -1) {
+              // alert('当前页面在新容器');
+              AlipayJSBridge.call('startApp',{
+                appId:'30603024', // 固定值
+                param:{
+                  type:"3", // 3： 掌银内H5页面，
+                  tokenId:_token, //商户传过来的tokenId
+                  paySystem:"", //商户传过来的paySystem, 没有则传空字符串
+                  payType:"1111", //商户传过来的payType，没有则传'1111'
+                  webviewURL:"https://wxgzh.renniting.cn/wechatwuxi/Chifeng/TEST/sweeping_payment/codepay/index.html#/payResult", //商户传过来的回跳地址
+                  remark:"其他参数", //扩展备用
+                  showProgress:'NO',
+                  backBehavior:'back'
+                },
+              },function(result){
+
+              });
+            } else {
+              // alert('当前页面在旧容器');
+              // 旧支付方式
+              window.location.href = 'https://www.abchina.com/luascript/mobilePayLua/'+  encodeURI('{"return":{"tokenID":"'+_token+'","backURL":"https://wxgzh.renniting.cn/wechatwuxi/Chifeng/TEST/sweeping_payment/codepay/index.html#/payResult","payType":""}}');
+
+            }
+          }else{
+            alert('支付失败')
+          }
+
+
+          // console.log(_token)
+          // let _data = 'method=invokePayFromBrowser&tokenID='+_token
+          // let cryData = CryptoJS.encrypt(_data, 'G9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvM3', 'EkpTEA3FbZFGGq8Y')
+          //
+          // let baseCRY = Base64.encode(cryData)
+          // console.log(baseCRY)
+          // window.location.href='bankabc:' + encodeURIComponent('{"method":"invokePayFromBrowser","param":'+baseCRY+'}')
+          // // 即为加密后的数据。其中paramsEncode是需要加密的数据、
+          // // keyStr是加密时使用的key，与服务端一致、hash是偏移量，是一个随机生成的16位字符串。
+        })
+      }
+
+
-        var vm = this
+
+
+      if (this.clientBrowser == '微信') { // 微信支付
         //第一步获取openid
         var codeParams = {
           code: this.webAppCode,
           appId: this.$utils.myVxAppId
         };
-        getOpenId(codeParams).then(resu => {
-          if (resu.code == 0) {
-            // me.vxPay(res.data, this.orderId)
-
-            var jsondata = {
-              orderBigType: 100,
-              payOrderType: this.paySrcType,
-              rltOrderId: orderID,
-              payType: 2, // 1 是支付宝    2是微信
-              terminalSource: 7,
-              orderActFee: this.arrearageActFee,
-              orderTotalFee: this.arrearageTotalFee,
-              orderDicountFee: this.arrearageDiscFee,
-              payUserId: resu.data,
-              terminalOS: this.isAndroid ? 'AND' : 'IOS',
-              couponType: 1, //优惠类型
-              couponCode: this.arrearageDiscFee,
-            };
-
-            doPay(jsondata).then(res => {
-              console.log(res)
-              if (res.code == 0) { //
-                //alertMsg("出场成功");
-                if (res.data) {
-                  var data = JSON.parse(res.data.jsPayRequest);
-                  console.log(JSON.stringify(data));
-                  if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
-                    if (document.addEventListener) {
-                      document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false)
-                    } else if (document.attachEvent) {
-                      document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
-                      document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
-                    }
-                  } else {
-                    console.log('准备调用微信支付')
-                    vm.onBridgeReady(data)
-                  }
-                } else {
-                  alert("没有找到返回值");
-                }
-              } else {
-                alert('支付错误')
-                console.log(res.message);
-                alert(res.message);
-              }
-
-            })
-
+        getOpenId(codeParams).then(res => {
+          if (res.code == 0) {
+            me.vxPay(res.data, this.orderId)
           } else if (res.code == 40163) { //code been used, hints[重复code问题]
-            alert('获取opendid错误--------')
-            alert(res.message)
+            alert('请重新扫码')
             console.log(res.message);
           } else {
-            alert('获取opendid错误')
-            alert(res.message)
+            alert('请重新扫码')
           }
         })
-
-    },
-    toPay() {
-      let me = this
-      let _order = []
-      // this.orderId = JSON.parse(this.orderId)
-      console.log(this.orderId)
-      if (this.paySrcType == 103) {
-        this.orderId = JSON.parse(this.orderId)
-        this.doOrderCreate(this.orderId)
-      } else {
-        console.log(this.orderId)
-        console.log(typeof this.orderId)
-
-        this.dopay(this.orderId)
       }
     },
-
+    vxPay(openIdData, orderIdData) {
+      let vm = this
+      var wxParams = {};
+      wxParams.orderId = orderIdData;
+      wxParams.backType = 2,
+        wxParams.orgId = this.$utils.myOrgId,
+        wxParams.payType = 4;// 1:支付宝 2：微信 3：银联 10:H5   4微信公众号
+      wxParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
+      wxParams.carNumber = this.carNumber;
+      wxParams.paySrcType = this.paySrcType;//101停车支付
+      wxParams.recordArreaInfos = JSON.stringify(orderIdData);
+      wxParams.openId = openIdData;
+      wxParams.appId = this.$utils.myVxAppId;
+      vxPayQuery(wxParams).then(res => {
+        if (res.code == 0) { //
+          if (res.data) {
+            var data = res.data;
+            console.log(JSON.stringify(data));
+            if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
+              if (document.addEventListener) {
+                document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false)
+              } else if (document.attachEvent) {
+                document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
+                document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
+              }
+            } else {
+              console.log('准备调用微信支付')
+              vm.onBridgeReady(data)
+            }
+          } else {
+            alert("没有找到返回值");
+          }
+        } else {
+          console.log(res.message);
+          alert(res.message);
+        }
+      })
+    },
     onBridgeReady(params) {
+      let me = this
       console.log('调用微信支付WeixinJSBridge')
       WeixinJSBridge.invoke(
-        'getBrandWCPayRequest', {
-          "appId": params.appId,     //公众号名称，由商户传入
-          "timeStamp": params.timeStamp,         //时间戳，自1970年以来的秒数
-          "nonceStr": params.nonceStr, //随机串
-          "package": params.package,
-          "signType": params.signType,         //微信签名方式：
-          "paySign": params.paySign //微信签名
-        },
-
-        // 'getBrandWCPayRequest', params,
+        'getBrandWCPayRequest', params,
         //
         // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
         //   'appId': data.appId, // 公众号名称，由商户传入
@@ -223,15 +283,110 @@ export default {
           // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
           if (res.err_msg === 'get_brand_wcpay_request:ok') {
             console.log('成功')
+            var salt = me.$utils.myCommonSalt(32);
+            let wxparams = {
+              pageNum: 1,
+              pageSize: 10000,
+              parkState: 10,
+              terminalSource: 7,
+              carNumber: me.carNumber,
+              app_id: me.$utils.myVarAppid,
+              deviceInfo: me.$utils.myDeviceInfo,
+              salt: salt,
+              sign_type: "md5",
+              token:'',
+            }
+            wxparams.sign = me.$utils.signObject(wxparams)
+            queryParkingRecordPageByCarNumbers(wxparams).then(response => {
+              console.log(response)
+              me.parkList = response.data.dataList
+
+              if(me.parkList.length == 0){
+                me.$router.push({
+                  path:'parkRecord',
+                  query:{
+                    carNumber: me.carNumber,
+                    carNumberColor: me.carWrapBG,
+                    parkFlag: 0 //  0表示在停    1表示历史
+                  }
+                })
+              }
+
+              me.parkingData = me.parkList.filter(item => {
+                return item.parkState == '10'
+              })
+              console.log(me.parkingData)
+              me.historyList = me.parkList.filter(item => {
+                return item.parkState == '20'
+              })
+              console.log(me.historyList)
+              if(me.parkingData.length>0){
+                MessageBox.confirm('', {
+                  message: '您当前有在停订单 是否立即支付?',
+                  title: '温馨提示',
+                  confirmButtonText: '去支付',
+                  cancelButtonText: '取消'
+                }).then(action => {
+                  if (action == 'confirm') {     //确认的回调
+                    console.log('确定');
+                    me.$router.push({
+                      path:'parkRecord',
+                      query:{
+                        carNumber: me.carNumber,
+                        carNumberColor: me.carWrapBG,
+                        parkFlag: 0 //  0表示在停    1表示历史
+                      }
+                    })
+                  }
+                }).catch(err => {
+                  if (err == 'cancel') {     //取消的回调
+                    console.log('取消');
+                  }
+                });
+              }
+
+              if(me.parkingData.length==0&&me.historyList.length>0){
+                MessageBox.confirm('', {
+                  message: '您当前有历史欠费 是否立即补缴?',
+                  title: '温馨提示',
+                  confirmButtonText: '去补缴',
+                  cancelButtonText: '取消'
+                }).then(action => {
+                  if (action == 'confirm') {     //确认的回调
+                    console.log('确定');
+                    me.$router.push({
+                      path:'parkRecord',
+                      query:{
+                        carNumber: me.carNumber,
+                        carNumberColor: me.carWrapBG,
+                        parkFlag: 1 //  0表示在停    1表示历史
+                      }
+                    })
+                  }
+                }).catch(err => {
+                  if (err == 'cancel') {     //取消的回调
+                    console.log('取消');
+                  }
+                });
+              }
+
+            })
+
+
+
+
+
           } else {
             console.log('失败')
             alert('支付失败')
+            me.$router.go(-2);
           }
         }
       )
     },
   },
-
+  filters: {
+  }
 }
 </script>
@@ -247,27 +402,27 @@ export default {
   }
   .carBlue {
-    background: url("../../assets/images/parkPay/blueBG.png") no-repeat;
+    background: url("../../assets/images/blueBG.png") no-repeat;
     background-size: 100% 100%;
   }
   .carYellow {
-    background: url("../../assets/images/parkPay/yellowBG.png") no-repeat;
+    background: url("../../assets/images/yellowBG.png") no-repeat;
     background-size: 100% 100%;
   }
   .carGreen {
-    background: url("../../assets/images/parkPay/greenBG.png") no-repeat;
+    background: url("../../assets/images/greenBG.png") no-repeat;
     background-size: 100% 100%;
   }
   .carWhite {
-    background: url("../../assets/images/parkPay/whiteBG.png") no-repeat;
+    background: url("../../assets/images/whiteBG.png") no-repeat;
     background-size: 100% 100%;
   }
   .carBlack {
-    background: url("../../assets/images/parkPay/blackBG.png") no-repeat;
+    background: url("../../assets/images/blackBG.png") no-repeat;
     background-size: 100% 100%;
   }
@@ -316,7 +471,7 @@ export default {
   .tip {
     padding-left: 40px;
-    background: url("../../assets/images/parkPay/tip.png") no-repeat 18px center;
+    background: url("../../assets/images/tip.png") no-repeat 18px center;
     background-size: 16px 16px;
     color: #666;
   }
@@ -10,12 +10,11 @@
         </li>
       </ul>
-
       <!--本次缴费-->
       <div v-show="currentTabActive==0">
         <div v-if="parkingData.length>0">
-          <p class="free-tip" v-if="parkingData[0].parkDuration<=2100">停车30分钟内无需缴费，请直接离场。</p>
+          <p class="free-tip" v-if="parkingData[0].parkDuration<=2100">停车15分钟内无需缴费，请申请离场。</p>
           <div class="cost-main" v-for="i in parkingData">
             <ul class="cost-header">
@@ -34,7 +33,8 @@
               <p>停车时长：{{ $utils.dateFormat(i.parkDuration)}}</p>
               <div class="out-wrap">
                 <p class="mon-wrap">￥{{(i.unPayFee/100).toFixed(2)}}</p>
-                <p class="out-btn" @click="toPayCurrent(i)" v-if="parkingData[0].parkDuration>2100">出场缴费</p>
+                <p class="out-btn" @click="toPayCurrent(i,parkingData[0].parkDuration)" v-if="parkingData[0].parkDuration<=60">申请离场</p>
+                <p class="out-btn" @click="toPayCurrent(i,parkingData[0].parkDuration)" v-else>出场缴费</p>
               </div>
             </div>
           </div>
@@ -66,7 +66,7 @@
               </ul>
               <div class="cost-body">
-                <p>车辆类型：临停车</p>
+                <!--<p>车辆颜色：临停车</p>-->
                 <p>车场名称：{{i.parkName}}
                 </p>
@@ -112,19 +112,13 @@
       暂无记录
     </div>
-    <modal-alert ref="alert">
-      <div class="trave-tip-content txt-l" slot="content">
-        <div class="confirm-text">
-          <p>请至少选择一笔记录</p>
-        </div>
-      </div>
-      <span slot="button">知道了</span>
-    </modal-alert>
+
   </div>
 </template>
 <script>
-import { parkRecordList, historyQuery, parkingQuery } from '@/api/parkRecord/parkRecord.js'
+
+import { parkRecordList, historyQuery, parkingQuery, appApplyParkOut } from '@/api/parkRecord/parkRecord.js'
 export default {
@@ -136,7 +130,7 @@ export default {
         { text: '欠费待缴', id: 2 },
       ],
       carColor: 1,// 车牌颜色
-      currentTabActive: 1, // 显示当前哪个
+      currentTabActive: 0, // 显示当前哪个
       carNumber: '', //  车牌号码
       parkingData:[], //  在停数据
       parkList: [], // 停车记录数据
@@ -155,8 +149,10 @@ export default {
   created() {
     this.carNumber = this.$route.query.carNumber  // 获取车牌号
     this.carColor = this.$route.query.carNumberColor  // 获取颜色   0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
+    this.currentTabActive = this.$route.query.parkFlag ? this.$route.query.parkFlag : 0   // 0在停   1历史
     console.log(this.carNumber)
     this.parkRecordList(this.carNumber)
+
   },
   methods: {
     parkRecordList(){  // 获取停车记录数据
@@ -186,13 +182,16 @@ export default {
         this.parkingData = this.parkList.filter(item => {
           return item.parkState == '10'
         })
-        if(this.parkingData.length>0){
-          this.currentTabActive = 0
-        }
+        // if(this.parkingData.length>0){
+        //   this.currentTabActive = 0
+        // }
         console.log(this.parkingData)
         this.historyList = this.parkList.filter(item => {
           return item.parkState == '20'
         })
+        if(this.parkingData.length==0&&this.historyList.length>0){
+          this.currentTabActive = 1
+        }
         this.historyList.forEach( i => {
           this.allMoney += Number(i.unPayFee)
         })
@@ -246,47 +245,71 @@ export default {
         this.orderIds = []
       }
     },
-    toPayCurrent(i){ // 缴纳本次在停费用
+    toPayCurrent(i, num) { // 缴纳本次在停费用
       var salt = this.$utils.myCommonSalt(32);
-      var jsondata = {
+      var params = {
         app_id: this.$utils.myVarAppid,
         deviceInfo: this.$utils.myDeviceInfo,
         salt: salt,
         sign_type: "md5",
-        payType: 4,
-        appId: this.$utils.myVxAppId,
         orderId: i.orderId,
-        terminalSource: '7',
-        parkCode: i.parkCode,
-        carNumber: this.carNumber,
+        payOrderType: '101',
+        terminalSource: '3',
       }
-      jsondata.sign = this.$utils.signObject(jsondata)
-      parkingQuery(jsondata).then(result => {
-        console.log(result)
-        let res = result.data
-        let _dis = res.discountFee
-        let discountFee = _dis.slice(1,_dis.length-1)
+      params.sign = this.$utils.signObject(params)
+      appApplyParkOut(params).then(response => {
+        console.log(response)
-        this.$router.push(
-          {
-            path:'orderPay',
-            query:{
-              carColor: this.carColor,// 车牌颜色
-              arrearageTotalFee: res.orderTotalFee,// 应收
-              arrearageDiscFee: discountFee*100,// 优惠
-              arrearageActFee: res.orderFee,// 实收
-              carNumber: this.carNumber, // 车牌
-              paySrcType: 101, //支付的类型   101 是本次   103是历史欠费
-              ordeID: i.orderId, //支付的订单号
-              appOrderTimeout: res.appOrderTimeout, // 超时描述
-            }
+        if (response.code == '5005') {
+          var salt = this.$utils.myCommonSalt(32);
+          var jsondata = {
+            app_id: this.$utils.myVarAppid,
+            deviceInfo: this.$utils.myDeviceInfo,
+            salt: salt,
+            sign_type: "md5",
+            payType: this.$utils.clientBrowsePayType(),
+            appId: this.$utils.myVxAppId,
+            orderId: i.orderId,
+            terminalSource: '7',
+            parkCode: i.parkCode,
+            carNumber: this.carNumber,
           }
-        )
+          jsondata.sign = this.$utils.signObject(jsondata)
+          parkingQuery(jsondata).then(result => {
+            console.log(result)
+            let res = result.data
+            let _dis = res.discountFee
+            let discountFee = _dis.slice(1, _dis.length - 1)
+
+            this.$router.push(
+              {
+                path: 'orderPay',
+                query: {
+                  carColor: this.carColor,// 车牌颜色
+                  arrearageTotalFee: res.orderTotalFee,// 应收
+                  arrearageDiscFee: discountFee * 100,// 优惠
+                  arrearageActFee: res.orderFee,// 实收
+                  carNumber: this.carNumber, // 车牌
+                  paySrcType: 101, //支付的类型   101 是本次   103是历史欠费
+                  ordeID: i.orderId, //支付的订单号
+                  appOrderTimeout: res.appOrderTimeout, // 超时描述
+                }
+              }
+            )
+          })
+
+        } else {
+          //$('.dialog-out').show()
+          this.$msgbox('提示', '停车15分钟内无需缴费，申请成功。')
+        }
+
       })
+
     },
     toPayHisroryPage() { // 缴纳历史费用
       if(this.historyCheckedLen==0){
-        this.$refs.alert.open()
+        this.$msgbox('提示', '请至少选择一条记录')
+
         return
       }
       var salt = this.$utils.myCommonSalt(32);
@@ -323,6 +346,7 @@ export default {
               carNumber: this.carNumber, // 车牌
               paySrcType: 103, //支付的类型   101 是本次   103是历史欠费
               ordeID: this.orderIds, //支付的订单号
+              appOrderTimeout: ''
             }
           }
         )
 <template>
   <div id="page">
+
+    <div class="swiper-container" style="height: 260px">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="item in swiperData" :key="item.id"
+             :style="{backgroundImage:'url(' + item.url + ')'}"
+             @click="openImgUrl(item)"
+        ></div>
+      </div>
+      <!-- 如果需要分页器 -->
+      <div class="swiper-pagination"></div>
+
+      <!-- 如果需要滚动条 -->
+      <!--    <div class="swiper-scrollbar"></div>-->
+    </div>
+
     <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:'' }"-->
+        <!--&gt;-->
+          <!--{{i.name}}-->
+        <!--</li>-->
+
+      <!--</ul>-->
+
+
-      <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>
       <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>
       <div class="num-box">
@@ -59,19 +78,14 @@
       </div>
       <div>
-        <p style="margin-bottom: 18px;margin-top: 18px;">已绑定车牌</p>
-        <ul class="bound-list">
-          <li>
-            <span>鄂B4567R</span>
-            <span>查看订单</span>
-          </li>
-          <li>
-            <span>鄂B4567R</span>
-            <span>查看订单</span>
+        <p style="margin-bottom: 18px;margin-top: 18px;">查询记录</p>
+        <ul class="bound-list" v-if="boundList.length>0">
+          <li v-for="i in boundList" :key="i">
+            <span>{{ i }}</span>
           </li>
         </ul>
-        <div style="text-align: center;padding: 10px 0;">暂无绑定车牌</div>
-        <div class="addCarNum"><span></span>添加车辆</div>
+        <div v-else style="text-align: center;padding: 10px 0;">暂无查询记录</div>
+        <!--<div class="addCarNum"><span></span>添加车辆</div>-->
       </div>
@@ -83,7 +97,7 @@
       <div class="first-word"
            @click="selectFirstWord($event)">
         <div class="word">
-          <span>京</span>
+          <span>蒙</span>
         </div>
         <div class="word">
           <span>湘</span>
@@ -164,7 +178,7 @@
       <div class="first-word"
            @click="selectFirstWord($event)">
         <div class="word">
-          <span>蒙</span>
+          <span>京</span>
         </div>
         <div class="word">
           <span>赣</span>
@@ -184,8 +198,38 @@
         <div class="word">
           <span>新</span>
         </div>
+        <div class="word">
+          <span>学</span>
+        </div>
+        <!--<div class="word bordernone">-->
+        <!--&lt;!&ndash; <img src="../assets/images/icon-switch.png" alt=""> &ndash;&gt;-->
+        <!--</div>-->
+      </div>
+
+      <div class="first-word"
+           @click="selectFirstWord($event)">
+        <div class="word">
+          <span>港</span>
+        </div>
+        <div class="word">
+          <span>澳</span>
+        </div>
+        <div class="word">
+          <span>领</span>
+        </div>
+
+        <div class="word">
+          <span>警</span>
+        </div>
+
+
+        <div class="word bordernone">
+        </div>
+        <div class="word bordernone">
+        </div>
+        <div class="word bordernone">
+        </div>
         <div class="word bordernone">
-          <!-- <img src="../assets/images/icon-switch.png" alt=""> -->
         </div>
       </div>
     </div>
@@ -257,6 +301,10 @@
   </div>
 </template>
 <script>
+
+import Swiper from 'swiper' //  应入swiper
+import {swiperQuery} from '../../api/plateNumber/plateNumber'
+
 export default {
   data () {
     return {
@@ -310,12 +358,53 @@ export default {
       confirmTitle: '',
       submitConfirm: false,
       submitConfirmFalse: false,
-      submitConfirmText: ''
+      submitConfirmText: '',
+      swiperData: [], // 轮播数据
+      boundList:[] // 历史记录
     }
   },
+  created(){
+    this.initSWiper()
+  },
   mounted () {
+    this.boundList = localStorage.getItem('parkRecordList') ? localStorage.getItem('parkRecordList') : []
+    console.log(this.boundList)
   },
   methods: {
+    initSWiper() {
+      var salt = this.$utils.myCommonSalt(32)
+      var jsondata = {
+        app_id: this.$utils.myVarAppid,
+        deviceInfo: this.$utils.myDeviceInfo,
+        salt: salt,
+        sign_type: 'md5',
+        sign: '1',
+        orgId: this.$utils.myOrgId,
+        jumpType: '8'
+      };
+      // jsondata = JSON.stringify(jsondata);
+      swiperQuery(jsondata).then(res => {
+        this.swiperData = res.data
+        console.log(this.swiperData)
+        new Swiper('.swiper-container', {
+          pagination: '.swiper-pagination',
+          paginationClickable: true,
+          centeredSlides: true,
+          notNextTick: true,
+          autoplay: 5000,
+          autoplayDisableOnInteraction: true,
+
+          observer: true,       //修改swiper自己或子元素时，自动初始化swiper
+          observeParents: true, //修改swiper的父元素时，自动初始化swiper
+          onSlideChangeStart: function (swiper) {
+            //console.log(swiper.activeIndex)
+          }
+        })
+      })
+    },
+    openImgUrl(i) { // 点击图片跳转
+      window.open(i.jumpUrl)
+    },
     chooseColor (index){ // 颜色选择
       this.currentColor = index
       switch (this.currentColor) {
@@ -406,10 +495,20 @@ export default {
       }
       this.$emit('getPlateLicense',plateLicense)
       console.log(plateLicense);
+
+      // boundList
+      if(this.boundList.indexOf(plateLicense) == -1 ){
+        if(this.boundList.length == 3){
+          this.boundList.pop()
+        }
+        this.boundList.unshift(plateLicense)
+      }
+
       this.$router.push({
         path:'parkRecord',
         query:{
-          carNumber:plateLicense
+          carNumber:plateLicense,
+          carNumberColor: this.currentColor
         }
       })
     },
@@ -506,6 +605,18 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+
+  .swiper-container {
+    height: 206px;
+  }
+
+  .swiper-slide {
+    /*width: 100%;*/
+    height: 206px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
   .flex-items-center {
     display: flex;
     align-items: center;