扫码后车牌是否咨询页面

liuqimichale
1 parent e38fe48c
Showing 12 changed files with 231 additions and 13 deletions
package-lock.json
package.json
src/api/navigation/navigation.js
src/assets/images/free-tip.png → src/assets/images/tip.png
src/assets/images/toParkRecord.png
src/components/navigation.vue
src/components/orderPay.vue
src/components/parkRecord.vue
src/main.js
src/router/index.js
src/utils/request.js
src/utils/utils.js
@@ -286,6 +286,14 @@
         "postcss-value-parser": "^3.2.3"
       }
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz?cache=0&sync_timestamp=1608609199258&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.21.1.tgz",
+      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
@@ -3811,8 +3819,7 @@
     "follow-redirects": {
       "version": "1.13.1",
       "resolved": "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.1.tgz?cache=0&sync_timestamp=1607916846877&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.1.tgz",
-      "integrity": "sha1-X2m4Ezds7k/QR0o6uoNd8Eq3Y7c=",
-      "dev": true
+      "integrity": "sha1-X2m4Ezds7k/QR0o6uoNd8Eq3Y7c="
     },
     "for-in": {
       "version": "1.0.2",
@@ -8139,6 +8146,12 @@
         "has-flag": "^3.0.0"
       }
     },
+    "swiper": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npm.taobao.org/swiper/download/swiper-3.4.2.tgz?cache=0&sync_timestamp=1608315084925&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fswiper%2Fdownload%2Fswiper-3.4.2.tgz",
+      "integrity": "sha1-Oda0ELGjmDPh9y07cpmd9fXjg5I=",
+      "dev": true
+    },
     "tapable": {
       "version": "0.2.9",
       "resolved": "https://registry.npm.taobao.org/tapable/download/tapable-0.2.9.tgz?cache=0&sync_timestamp=1607088824436&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftapable%2Fdownload%2Ftapable-0.2.9.tgz",
@@ -8653,6 +8666,14 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1609359858533&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-h5-popup": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/vue-h5-popup/download/vue-h5-popup-1.0.2.tgz",
+      "integrity": "sha1-Y6nlTOOXJzuJ3umxAyOotmRlOuk=",
+      "requires": {
+        "vue": "^2.5.11"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
@@ -46,6 +46,7 @@
     "rimraf": "^2.6.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "swiper": "^3.4.2",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
+import request from '@/utils/request'
+
+export function swiperQuery(params) {  //  轮播图
+  return request({
+    url: 'activity/queryActivityListByJumpType',
+    method: 'post',
+    data: params
+  })
+}
+
+
+
+
+
+<template>
+  <div>
+    <div style="height: 206px;">
+      <div class="swiper-container">
+        <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>
+    <p class="carNumberTip">
+      请确认您当前缴费车牌号
+    </p>
+
+    <div class="car-wrap">
+      <div class="carBG" :class="carWrapBG | formateColor">
+        <p class="carNumber">{{carNumber}}</p>
+      </div>
+
+      <p class="toParkRecord">
+        是我的车，去支付
+      </p>
+
+      <p class="toPlateNumber">
+        不是我的车，手动输入
+      </p>
+
+    </div>
+
+
+  </div>
+</template>
+
+<script>
+import Swiper from 'swiper' //  应入swiper
+import { swiperQuery } from '../api/navigation/navigation'
+export default {
+  name: 'navigation',
+  data() {
+    return {
+      carNumber: '',  // 车牌号码
+      carWrapBG: 0,// 车牌颜色
+      swiperData: [], // 轮播数据
+    }
+  },
+  mounted() {
+    this.carNumber = this.$route.query.carNumber  // 车牌号码
+    this.carWrapBG = this.$route.query.carNumberColor // 车牌颜色
+    console.log(this.carNumber)
+
+  },
+  created() {
+    this.initSWiper()
+  },
+  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)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .swiper-container{
+    height: 206px;
+  }
+  .swiper-slide{
+    /*width: 100%;*/
+    height: 206px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .carNumberTip {
+    width: 200px;
+    margin: 20px auto 10px;
+    padding-left: 20px;
+    background: url("../assets/images/tip.png") no-repeat 0 center;
+    background-size: 14px 14px;
+    text-align: center;
+  }
+
+  .car-wrap {
+    padding: 0px 40px;
+    background: #FFF;
+  }
+
+  .carBG {
+    width: 100%;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+    font-size: 24px;
+    color: #fff;
+  }
+  .carBlue {
+    background: url("../assets/images/blueBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carYellow {
+    background: url("../assets/images/yellowBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carGreen {
+    background: url("../assets/images/greenBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carWhite {
+    background: url("../assets/images/whiteBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .carBlack {
+    background: url("../assets/images/blackBG.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .toParkRecord{
+    margin-top: 40px;
+    margin-bottom: 20px;
+    height: 50px;
+    line-height: 50px;
+    font-size: 16px;
+    text-align: center;
+    background: url("../assets/images/toParkRecord.png") no-repeat;
+    background-size: 100% 50px;
+    cursor: pointer;
+  }
+  .toPlateNumber{
+    text-align: right;
+    cursor: pointer;
+  }
+
+</style>
@@ -311,7 +311,7 @@ export default {
  
   .tip {
     padding-left: 40px;
-    background: url("../assets/images/free-tip.png") no-repeat 18px center;
+    background: url("../assets/images/tip.png") no-repeat 18px center;
     background-size: 16px 16px;
     color: #666;
   }
@@ -357,7 +357,7 @@ export default {
     height: 25px;
     line-height: 25px;
     padding-left: 45px;
-    background: #FEF8DB url("../assets/images/free-tip.png") no-repeat 18px center;
+    background: #FEF8DB url("../assets/images/tip.png") no-repeat 18px center;
     background-size: 18px 18px;
   }
  
@@ -9,9 +9,13 @@ import &#39;./assets/css/reset.css&#39;  // 引入公共样式
 import h5Popup from 'vue-h5-popup'; // 引入弹窗
 Vue.use(h5Popup)
  
-import utils from './utils/utils'
+import utils from './utils/utils' // 工具类
 Vue.prototype.$utils = utils
  
+
+import 'swiper/dist/css/swiper.min.css' // 轮播
+import 'swiper/dist/js/swiper.min'
+
 import vueFilter from './utils/filters'  // 公共filter
 for (let key in vueFilter){
   Vue.filter(key,vueFilter[key])
@@ -2,6 +2,7 @@ import Vue from &#39;vue&#39;
 import Router from 'vue-router'
 import plateNumber from '@/components/plateNumber'
 import parkRecord from '@/components/parkRecord'
+import navigation from '@/components/navigation'
  
 Vue.use(Router)
  
@@ -10,10 +11,15 @@ export default new Router({
     {
       path: '/',
       redirect: {
-        name: 'parkRecord'
+        name: 'navigation'
       }
     },
     {
+      path: '/navigation',
+      name: 'navigation',
+      component: navigation
+    },
+    {
       path: '/plateNumber',
       name: 'plateNumber',
       component: plateNumber
@@ -4,10 +4,10 @@ import axios from &#39;axios&#39;
 // let _url = process.env.API_ROOT
 // axios.defaults.baseURL = process.env.API_ROOT
 const service = axios.create({
-  // baseURL: 'http://39.98.54.240:8090', // url = base url + request url
-  //baseURL: _url, // url = base url + request url
  
-  baseURL: 'http://pay.service.huangshiparking.com/', // url = base url + request url
+  // http://pay.service.renniting.cn/  赤峰
+  // http://pay.service.huangshiparking.com/  黄石
+  baseURL: 'http://pay.service.renniting.cn/', // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 6000 // request timeout
 })
@@ -25,13 +25,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();
@@ -117,11 +117,11 @@ export default {
   // ny1u72b6k374sg379z0kqjgfxe2ycnpw 新的签名
  
  
-  myVarAppid:'0eca8f5373ca4866aec2f8e9d9367104',// 公共请求Appid
+  myVarAppid:'ud8yq5tv0inxupc05xfeau39jywlqoj2',// 公共请求Appid
  
   myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E', // 公共请求设备信息
  
-  myVxAppId: 'wxa1a66cc7d263afe6' , // 微信赤峰 appid    //黄石 appid    wxa1a66cc7d263afe6
+  myVxAppId: 'wx2af2bab90d433c86' , // 微信赤峰 appid   wx2af2bab90d433c86      //黄石 appid    wxa1a66cc7d263afe6
  
   myOrgId: '10003' // 归属地 赤峰id