BJ_web_developers / wxgzh

Commit bb95169345a5f4633910e4ae4c6b1054fdaca667

Authored by liuqimichale
1 parent 0e89efab

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

Inline Side-by-side
Showing 30 changed files with 991 additions and 238 deletions
dist 2.zip
View file @bb95169
No preview for this file type
No preview for this file type
index.html
  View file @bb95169
... ... @@ -4,7 +4,7 @@
4 4 <meta charset="utf-8">
5 5 <meta name="google" content="notranslate">
6 6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7   - <title>黄石微信公众号</title>
  7 + <title>微信公众号</title>
8 8 </head>
9 9 <body>
10 10 <div id="app"></div>
... ...
package.json
  View file @bb95169
... ... @@ -15,9 +15,11 @@
15 15 "js-base64": "^3.6.0",
16 16 "less-loader": "^4.1.0",
17 17 "mint-ui": "^2.2.13",
  18 + "moment": "^2.29.1",
18 19 "node-sass": "^5.0.0",
19 20 "sass-loader": "^7.3.1",
20 21 "vue": "^2.5.2",
  22 + "mint-ui": "^2.2.13",
21 23 "vue-h5-popup": "^1.0.2",
22 24 "vue-router": "^3.0.1"
23 25 },
... ... @@ -62,9 +64,9 @@
62 64 "vue-loader": "^13.3.0",
63 65 "vue-style-loader": "^3.0.1",
64 66 "vue-template-compiler": "^2.5.2",
65   - "webpack": "^3.6.0",
  67 + "webpack": "^3.4.1",
66 68 "webpack-bundle-analyzer": "^2.9.0",
67   - "webpack-dev-server": "^2.9.1",
  69 + "webpack-dev-server": "^2.9.7",
68 70 "webpack-merge": "^4.1.0"
69 71 },
70 72 "engines": {
... ...
src/api/orderPay/orderPay.js
  View file @bb95169
... ... @@ -17,7 +17,6 @@ export function getOpenId(params) { // 获取OpenId
17 17 })
18 18 }
19 19  
20   -
21 20 export function vxPayQuery(params) { // 微信
22 21 return request({
23 22 url: 'weixinpay/publicUnifiedOrder',
... ... @@ -26,22 +25,18 @@ export function vxPayQuery(params) { // 微信
26 25 })
27 26 }
28 27  
29   -// 新接口银联
30 28  
31   -export function doPay(params) { // 微信
  29 +export function bankH5Pay(params) { // 农行
32 30 return request({
33   - url: 'unionpay/doPay',
  31 + url: 'abcBankPay/bankPayForH5',
34 32 method: 'post',
35 33 data: params
36 34 })
37 35 }
38 36  
39   -
40   -// 创建订单
41   -
42   -export function doOrderCreate(params) { // 创建订单
  37 +export function queryParkingRecordPageByCarNumbers(params) { // 支付完成后查询记录
43 38 return request({
44   - url: 'unionpay/doOrderCreate',
  39 + url: 'queryParkOrder/queryParkingRecordPageByCarNumbers',
45 40 method: 'post',
46 41 data: params
47 42 })
... ... @@ -50,3 +45,8 @@ export function doOrderCreate(params) { // 创建订单
50 45  
51 46  
52 47  
  48 +
  49 +
  50 +
  51 +
  52 +
... ...
src/api/parkRecord/parkRecord.js
  View file @bb95169
... ... @@ -24,4 +24,13 @@ export function parkingQuery(params) {
24 24 })
25 25 }
26 26  
  27 +export function appApplyParkOut(params) { // 0元出场
  28 + return request({
  29 + url: 'appAccountPay/appApplyParkOut',
  30 + method: 'post',
  31 + data: params
  32 + })
  33 +}
  34 +
  35 +
27 36  
... ...
src/api/plateNumber/plateNumber.js 0 → 100644
  View file @bb95169
  1 +import request from '@/utils/request'
  2 +
  3 +export function swiperQuery(params) { // 轮播图
  4 + return request({
  5 + url: 'activity/queryActivityListByJumpType',
  6 + method: 'post',
  7 + data: params
  8 + })
  9 +}
  10 +
  11 +
  12 +
  13 +
  14 +
... ...
src/assets/images/blackBG.png 0 → 100644
View file @bb95169

5.57 KB
src/assets/images/blueBG.png 0 → 100644
View file @bb95169

5.6 KB
src/assets/images/carBlack.png 0 → 100644
View file @bb95169

1.69 KB
src/assets/images/carBlue.png 0 → 100644
View file @bb95169

1.88 KB
src/assets/images/carGreen.png 0 → 100644
View file @bb95169

3.33 KB
src/assets/images/carWhite.png 0 → 100644
View file @bb95169

1.45 KB
src/assets/images/carYellow.png 0 → 100644
View file @bb95169

1.86 KB
src/assets/images/cards/carBg.png 0 → 100644
View file @bb95169

3.15 KB
src/assets/images/cards/cardPointBg.png 0 → 100644
View file @bb95169

23.4 KB
src/assets/images/greenBG.png 0 → 100644
View file @bb95169

5.92 KB
src/assets/images/sweet.png 0 → 100644
View file @bb95169

412 Bytes
src/assets/images/tip.png 0 → 100644
View file @bb95169

1.16 KB
src/assets/images/whiteBG.png 0 → 100644
View file @bb95169

5.68 KB
src/assets/images/yellowBG.png 0 → 100644
View file @bb95169

5.76 KB
src/main.js
  View file @bb95169
... ... @@ -10,18 +10,33 @@ import h5Popup from &#39;vue-h5-popup&#39; // 引入弹窗
10 10 Vue.use(h5Popup)
11 11  
12 12  
13   -import MintUI from 'mint-ui'
14   -import 'mint-ui/lib/style.css'
15   -Vue.use(MintUI) // 引入MintUI
  13 +// import MintUI from 'mint-ui'
  14 +// import 'mint-ui/lib/style.css'
  15 +// Vue.use(MintUI) // 引入MintUI
  16 +
16 17  
  18 +import 'mint-ui/lib/style.css'
  19 +import { MessageBox } from 'mint-ui'
  20 +// Vue.use(MessageBox)
  21 +Vue.prototype.$msgbox = MessageBox
17 22  
18 23 //全局设置的基本样式
19 24 import './assets/css/base.scss'
20 25  
21 26  
  27 +import moment from 'moment'
  28 +// 设置本地时区
  29 +moment.locale('zh-cn')
  30 +Vue.prototype.$moment = moment
  31 +
  32 +
22 33 import utils from './utils/utils' // 工具类
23 34 Vue.prototype.$utils = utils
24 35  
  36 +import Mint from 'mint-ui';
  37 +import 'mint-ui/lib/style.css'
  38 +Vue.use(Mint);
  39 +
25 40  
26 41 import 'swiper/dist/css/swiper.min.css' // 轮播
27 42 import 'swiper/dist/js/swiper.min'
... ...
src/router/index.js
  View file @bb95169
... ... @@ -2,7 +2,7 @@ import Vue from &#39;vue&#39;
2 2 import Router from 'vue-router'
3 3 import plateNumber from '@/views/parkPay/plateNumber'
4 4 import parkRecord from '@/views/parkPay/parkRecord'
5   -import selfNav from '@/views/mySelf/selfNav'
  5 +// import selfNav from '@/views/mySelf/selfNav'
6 6  
7 7 Vue.use(Router)
8 8  
... ... @@ -11,7 +11,7 @@ export default new Router({
11 11 {
12 12 path: '/',
13 13 redirect: {
14   - name: 'selfNav'
  14 + name: 'plateNumber'
15 15 }
16 16 },
17 17 // {
... ... @@ -37,36 +37,50 @@ export default new Router({
37 37 component: () => import("@/views/parkPay/orderPay.vue")
38 38 },
39 39  
40   - //---------------- 个人页面导航
41   - {
42   - path: '/selfNav',
43   - name: 'selfNav',
44   - component: () => import("@/views/mySelf/selfNav.vue")
45   - },
46   -
47   - // ------------------------建议反馈
48   - {
49   - path: '/suggestionBack',
50   - name: 'suggestionBack',
51   - component: () => import("@/views/mySelf/feedback/suggestionBack.vue")
52   - },
53   -
54   - // ------------------------停车记录
55   - {
56   - path: '/parkNotes',
57   - name: 'parkNotes',
58   - component: () => import("@/views/mySelf/parkNotes/parkNotes.vue")
59   - },
60   -
61   -
62   - // ------------------------停车记录
63   - {
64   - path: '/binDing',
65   - name: 'binDing',
66   - component: () => import("@/views/binding/binDing.vue")
67   - },
68   -
69   -
  40 + // //---------------- 个人页面导航
  41 + // {
  42 + // path: '/selfNav',
  43 + // name: 'selfNav',
  44 + // component: () => import("@/views/mySelf/selfNav.vue")
  45 + // },
  46 + //
  47 + // // ------------------------建议反馈
  48 + // {
  49 + // path: '/suggestionBack',
  50 + // name: 'suggestionBack',
  51 + // component: () => import("@/views/mySelf/feedback/suggestionBack.vue")
  52 + // },
  53 + //
  54 + // // ------------------------停车记录
  55 + // {
  56 + // path: '/parkNotes',
  57 + // name: 'parkNotes',
  58 + // component: () => import("@/views/mySelf/parkNotes/parkNotes.vue")
  59 + // },
  60 + //
  61 + //
  62 + // // ------------------------停车记录
  63 + // {
  64 + // path: '/binDing',
  65 + // name: 'binDing',
  66 + // component: () => import("@/views/binding/binDing.vue")
  67 + // },
  68 + //
  69 + //
  70 + // // ------------------------购买会员卡提示
  71 + // {
  72 + // path: '/cardPoint',
  73 + // name: 'cardPoint',
  74 + // component: () => import("@/views/cards/cardPoint.vue")
  75 + // },
  76 + //
  77 + //
  78 + // // ------------------------购买会员卡
  79 + // {
  80 + // path: '/buyCard',
  81 + // name: 'buyCard',
  82 + // component: () => import("@/views/cards/buyCard.vue")
  83 + // },
70 84  
71 85  
72 86  
... ...
src/utils/request.js
  View file @bb95169
... ... @@ -7,7 +7,7 @@ const service = axios.create({
7 7 // http://pay.service.renniting.cn/ 赤峰
8 8 // http://pay.service.huangshiparking.com/ 黄石正式环境
9 9 // http://39.98.54.240:8090/ 黄石测试环境
10   - baseURL: 'http://pay.service.huangshiparking.com/', // url = base url + request url
  10 + baseURL: 'http://pay.service.renniting.cn/v1', // url = base url + request url
11 11 // withCredentials: true, // send cookies when cross-domain requests
12 12 timeout: 6000 // request timeout
13 13 })
... ...
src/utils/utils.js
  View file @bb95169
... ... @@ -12,6 +12,34 @@ export default {
12 12 return pwd;
13 13 },
14 14  
  15 + formatDate: function(secs, type=0){ //type是可选参数，因为json中时间的格式是year-month-date,不能识别XX年XX月XX日
  16 + var t = new Date(secs)
  17 + var year = t.getFullYear()
  18 + var month = t.getMonth() + 1
  19 + if(month < 10){ month = '0' + month }
  20 + var date = t.getDate()
  21 + if(date < 10){ date = '0' + date }
  22 + var hour = t.getHours()
  23 + if(hour < 10){ hour = '0' + hour }
  24 + var minute = t.getMinutes()
  25 + if(minute < 10){ minute = '0' + minute }
  26 + var second = t.getSeconds()
  27 + if(second < 10){ second = '0' + second }
  28 + if(type==0){
  29 + return year + '年' + month + '月' + date + '日'
  30 + }else{
  31 + return year + '-'+month+'-'+date
  32 + }},
  33 +
  34 + timestampToTime: function (timestamp) {
  35 + var d = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
  36 + var youWant=d.getFullYear() + '-' + this.completedString(d.getMonth() + 1) + '-' + this.completedString(d.getDate()) ;
  37 + return youWant
  38 + },
  39 + completedString:function(s) {
  40 + return s < 10 ? '0' + s : s
  41 + },
  42 +
15 43  
16 44  
17 45 dateFormat: function (msd) { // 时间转换
... ... @@ -80,27 +108,53 @@ export default {
80 108 } else if (/AlipayClient/.test(window.navigator.userAgent)) {
81 109 console.log("支付宝客户端");
82 110 return '支付宝'
83   - } else {
  111 + } else if (/BankabciPhone/.test(window.navigator.userAgent)) {
  112 + console.log("农行客户端");
  113 + return '立即'
  114 + }else if (/BankabcAndroid/.test(window.navigator.userAgent)) {
  115 + console.log("农行客户端");
  116 + return '立即'
  117 + }else {
84 118 console.log("其他浏览器");
85 119 return '支付宝'
86 120 }
87 121 },
  122 +
  123 + // 1:支付宝 2：微信 3：银联 10:H5 4微信公众号 34 农行
  124 + clientBrowsePayType: function () { // 判断客户端
  125 + if (/MicroMessenger/.test(window.navigator.userAgent)) {
  126 + console.log("微信客户端");
  127 + return '4'
  128 + } else if (/AlipayClient/.test(window.navigator.userAgent)) {
  129 + console.log("支付宝客户端");
  130 + return '1'
  131 + } else if (/BankabciPhone/.test(window.navigator.userAgent)) {
  132 + console.log("农行客户端");
  133 + return '34'
  134 + }else if (/BankabcAndroid/.test(window.navigator.userAgent)) {
  135 + console.log("农行客户端");
  136 + return '34'
  137 + }else {
  138 + console.log("其他浏览器");
  139 + return '1'
  140 + }
  141 + },
88 142 // 0eca8f5373ca4866aec2f8e9d9367104 老的id
89 143 // 14318527b13840c2a4af63fef52c2d6e 老的签名
90 144  
91 145 // ud8yq5tv0inxupc05xfeau39jywlqoj2 新的id
92 146 // ny1u72b6k374sg379z0kqjgfxe2ycnpw 新的签名
93 147  
94   - myVarAppid:'0eca8f5373ca4866aec2f8e9d9367104',// 公共请求Appid
  148 + myVarAppid:'ud8yq5tv0inxupc05xfeau39jywlqoj2',// 公共请求Appid
95 149  
96 150 myDeviceInfo: 'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E', // 公共请求设备信息
97 151  
98   - myVxAppId: 'wxa1a66cc7d263afe6',
  152 + myVxAppId: 'wx2af2bab90d433c86',
99 153 // 测试环境 微信赤峰 appid wxff4cebaedbf4f886
100 154 // 微信赤峰 appid wx2af2bab90d433c86
101 155 // 黄石 appid wxa1a66cc7d263afe6
102 156  
103   - myOrgId: '10079', // 归属地 赤峰id 10003 黄石 10079
  157 + myOrgId: '10003', // 归属地 赤峰id 10003 黄石 10079
104 158  
105 159 myGetSign: function (objb) { // 获取签名
106 160 var compare = function (obj1, obj2) {
... ... @@ -115,13 +169,13 @@ export default {
115 169 }
116 170 }
117 171 objb.sort(compare);
118   - var strmd5 = '14318527b13840c2a4af63fef52c2d6e';
  172 + var strmd5 = 'ny1u72b6k374sg379z0kqjgfxe2ycnpw';
119 173 for(var i=0;i<objb.length;i++){
120 174 if(objb[i].value != null&&objb[i].value != ''){
121 175 strmd5 += objb[i].keyname+objb[i].value;
122 176 }
123 177 }
124   - strmd5 += '14318527b13840c2a4af63fef52c2d6e';
  178 + strmd5 += 'ny1u72b6k374sg379z0kqjgfxe2ycnpw';
125 179 // console.log('strmd5-------->'+strmd5);
126 180 strmd5 = md5(strmd5);
127 181 strmd5=strmd5.toUpperCase();
... ...
src/views/cards/buyCard.vue 0 → 100644
  View file @bb95169
  1 +<template>
  2 + <div>
  3 + <ul class="choose-area">
  4 + <li>
  5 + <div style="color: #666">卡名称</div>
  6 + <div>微纳园卡</div>
  7 + </li>
  8 +
  9 + <li>
  10 + <div style="color: #666">选择卡类型</div>
  11 + <div @click="popupVisible = true">{{carType}}</div>
  12 + <div class="arrow">></div>
  13 + </li>
  14 +
  15 +
  16 + <li>
  17 + <div style="color: #666">绑定车牌</div>
  18 + <div @click="carNumberVisible = true">{{carNumber}}</div>
  19 + <div class="arrow">></div>
  20 + </li>
  21 +
  22 + <li>
  23 + <div style="color: #A31414">生效时间</div>
  24 + <div style="color: #A31414" @click="selectData">{{ $utils.timestampToTime(time) }}</div>
  25 + <div class="arrow">></div>
  26 + </li>
  27 +
  28 + <li>
  29 + <div style="color: #666">有效期至</div>
  30 + <div>{{ $utils.timestampToTime(endDate)}}</div>
  31 + </li>
  32 +
  33 +
  34 + <li>
  35 + <div style="color: #666">购买数量</div>
  36 + <div class="choose-num">
  37 + <span @click="addCardNum">+</span>
  38 + <span>{{cardNum}}</span>
  39 + <span @click="reduceCarNum">-</span>
  40 + </div>
  41 + </li>
  42 +
  43 + <li>
  44 + <div style="color: #666">单价</div>
  45 + <div>￥10.00</div>
  46 + </li>
  47 +
  48 +
  49 + <li>
  50 + <div style="color: #666">优惠金额</div>
  51 + <div>￥0.00</div>
  52 + </li>
  53 +
  54 + <li>
  55 + <div style="color: #666">应付金额</div>
  56 + <div style="color: #A31414">￥30.00</div>
  57 + </li>
  58 +
  59 + </ul>
  60 +
  61 + <div class="parkArea leftRightPadding">
  62 + <p class="parkAreaTitle">
  63 + <span>本卡同时适用于以下停车场：</span>
  64 + <span class="parkMore" @click="parkMoreVisible = true">查看更多</span>
  65 + </p>
  66 +
  67 + <p>停车场停车场停车停车场</p>
  68 + </div>
  69 +
  70 + <div style="margin-top: 34px" class="leftRightPadding">
  71 + <mt-button type="danger" size="large">确定购买</mt-button>
  72 + </div>
  73 +
  74 + <!-- @touchmove.prevent 阻止默认事件，在选择时间时阻止页面也跟着滚动-->
  75 + <div @touchmove.prevent>
  76 + <mt-datetime-picker
  77 + lockScroll="true"
  78 + ref="datePicker"
  79 + v-model="dateVal"
  80 + type="date"
  81 + year-format="{value} 年"
  82 + month-format="{value} 月"
  83 + date-format="{value} 日"
  84 + :startDate="startDate"
  85 + @confirm="handleConfirm()"
  86 + ></mt-datetime-picker>
  87 + </div>
  88 +
  89 +
  90 + <mt-actionsheet
  91 + :actions="actions"
  92 + v-model="popupVisible">
  93 + </mt-actionsheet>
  94 +
  95 + <mt-actionsheet
  96 + :actions="carNumList"
  97 + v-model="carNumberVisible">
  98 + </mt-actionsheet>
  99 +
  100 + <mt-popup
  101 + v-model="parkMoreVisible" class="park-list-wrap"
  102 + >
  103 + <ul class="park-list">
  104 + <li v-for="(i, index) in 10">{{index+1}}、停车场{{i}}</li>
  105 + </ul>
  106 + </mt-popup>
  107 +
  108 + </div>
  109 +</template>
  110 +
  111 +<script>
  112 +import { timestampToTime } from '../../utils/utils.js'
  113 +
  114 +export default {
  115 + name: 'buyCard',
  116 + data() {
  117 + return {
  118 + startDate: new Date(),
  119 + dateVal: '',
  120 + selectedValue: '',
  121 + time: new Date(),
  122 + endDate:new Date(),
  123 + popupVisible: false,
  124 + actions: [
  125 + {name:'月卡',num:1, method: this.clickAction },
  126 + {name:'季卡',num:3, method: this.clickAction },
  127 + {name:'年卡',num:12, method: this.clickAction },
  128 +
  129 + ],
  130 + carType:'月卡',
  131 + carNumList:[
  132 + {name:'停车场1',method: this.clickActionCarNum },
  133 + {name:'停车场2',method: this.clickActionCarNum },
  134 + {name:'停车场3',method: this.clickActionCarNum },
  135 + {name:'停车场4',method: this.clickActionCarNum },
  136 + {name:'停车场5',method: this.clickActionCarNum },
  137 + ],
  138 + carNumber:'',
  139 + carNumberVisible:false,
  140 + parkMoreVisible:false,
  141 + cardNum:1
  142 + }
  143 + },
  144 + methods: {
  145 + //打开时间选择器
  146 + selectData() {
  147 +
  148 + this.$refs['datePicker'].open()
  149 + },
  150 + handleConfirm() {
  151 + console.log(this.dateVal)
  152 + this.time = this.$utils.timestampToTime(this.dateVal);
  153 + },
  154 + clickAction(e){
  155 + console.log(e.name)
  156 + this.carType = e.name
  157 + this.endDate = this.time
  158 + },
  159 + clickActionCarNum(e){
  160 + this.carNumber = e.name
  161 + },
  162 + addCardNum(){ // 增加购买数量
  163 + this.cardNum ++
  164 + },
  165 + reduceCarNum(){ // 增加购买数量
  166 + if(this.cardNum==1){
  167 + return
  168 + }
  169 + this.cardNum --
  170 + },
  171 +
  172 +
  173 +
  174 + },
  175 + filters: {
  176 + formatDate(time) {
  177 + var date = new Date(time);
  178 + return formatDate(date)
  179 + }
  180 + },
  181 +}
  182 +</script>
  183 +
  184 +<style scoped lang="scss">
  185 + .choose-area {
  186 + background: #fff;
  187 + padding: 0 10px;
  188 + }
  189 +
  190 + .choose-area > li {
  191 + padding-right: 20px;
  192 + position: relative;
  193 + height: 38px;
  194 + line-height: 38px;
  195 + border-bottom: 1px solid #EFEFEF;
  196 + display: flex;
  197 + justify-content: space-between;
  198 + .arrow {
  199 + position: absolute;
  200 + right: 0;
  201 + top: 0;
  202 + font-size: 16px;
  203 + }
  204 + &:last-child {
  205 + border-bottom: 0;
  206 + }
  207 + }
  208 + .choose-num{
  209 + height: 28px;
  210 + margin-top: 5px;
  211 + line-height: 28px;
  212 + display: flex;
  213 + border: 1px solid #D8D8D8;
  214 + span{
  215 + display: inline-block;
  216 + &:nth-of-type(1){
  217 + width: 28px;
  218 + height: 28px;
  219 + text-align: center;
  220 + cursor: pointer;
  221 + }
  222 + &:nth-of-type(2){
  223 + width: 50px;
  224 + text-align: center;
  225 + border-left: 1px solid #D8D8D8;
  226 + border-right: 1px solid #D8D8D8;
  227 + }
  228 + &:nth-of-type(3){
  229 + width: 28px;
  230 + height: 28px;
  231 + text-align: center;
  232 + cursor: pointer;
  233 + }
  234 + }
  235 + }
  236 + .parkArea{
  237 + padding-top: 10px;
  238 + padding-bottom: 10px;
  239 + margin-top: 10px;
  240 + background: #fff;
  241 + color: #999;
  242 + }
  243 + .parkAreaTitle{
  244 + display: flex;
  245 + justify-content: space-between;
  246 + color: #666;
  247 + }
  248 + .parkMore{
  249 + cursor: pointer;
  250 + }
  251 + .park-list-wrap{
  252 + width: 80%;
  253 + max-height: 70%;
  254 + overflow-y: scroll;
  255 + border-radius: 5px;
  256 + }
  257 + .park-list{
  258 +
  259 + /*width: 80%;*/
  260 + li{
  261 + padding-left: 20px;
  262 + line-height: 25px;
  263 + }
  264 + }
  265 +
  266 +</style>
... ...
src/views/cards/cardPoint.vue 0 → 100644
  View file @bb95169
  1 +<template>
  2 + <div class="leftRightPadding">
  3 + <div class="card-point-bg">
  4 + <div class="carbg"></div>
  5 + <p class="buy-card-btn" @click="$router.push({name:'buyCard'})">+<span>购买会员卡</span></p>
  6 + <div class="slogan">
  7 + <p>
  8 + 年卡、季卡、月卡，任你选，停车场让您挑，
  9 + </p>
  10 + <p>优惠停车，惊喜不断！</p>
  11 + </div>
  12 + </div>
  13 +
  14 + <p class="sweet">温馨提示：</p>
  15 + <div class="sweet-con">
  16 + <p>
  17 + 1、年卡有效期为一年，从开卡之日算起往后一年时间内在所选停车场均可免费停车，到期后自动失效。
  18 + </p>
  19 + <p>
  20 + 2、季卡有效期为三个月，从开卡之日算起往后三个月内所选停车场免费停车，到期后自动失效。
  21 + </p>
  22 + <p>
  23 + 3、月卡有效期为一个月，从开卡之日算起，往后一个月为止在所选停车场长内均可免费停车，到期后自动失效。
  24 + </p>
  25 + <p>
  26 + 4、所有卡均 <span>不支持预留车位</span> ，只适用于所选停车场进出场结算。
  27 + </p>
  28 + </div>
  29 +
  30 + </div>
  31 +</template>
  32 +
  33 +<script>
  34 +export default {
  35 + name: 'cardPoint'
  36 +}
  37 +</script>
  38 +
  39 +<style scoped lang="scss">
  40 + .card-point-bg {
  41 + height: 212px;
  42 + margin: 10px 0;
  43 + position: relative;
  44 + background: url("../../assets/images/cards/cardPointBg.png") no-repeat;
  45 + background-size: 100% 100%;
  46 + }
  47 + .carbg{
  48 + width: 134px;
  49 + height: 141px;
  50 + position: absolute;
  51 + left: 21px;
  52 + top:30px;
  53 + background: url("../../assets/images/cards/carBg.png") no-repeat;
  54 + background-size: 100% 100%;
  55 + }
  56 + .buy-card-btn{
  57 + position: absolute;
  58 + left: 90px;
  59 + top:71px;
  60 + font-size: 24px;
  61 + color: #fff;
  62 + font-weight: bold;
  63 + cursor: pointer;
  64 + span{
  65 + margin-left: 30px;
  66 + }
  67 + }
  68 + .slogan{
  69 + position: absolute;
  70 + left: 45px;
  71 + top: 150px;
  72 + text-align: center;
  73 + color: #fff;
  74 + }
  75 + .sweet{
  76 + padding-left: 20px;
  77 + background: url("../../assets/images/sweet.png") no-repeat 0 center;
  78 + }
  79 + .sweet-con{
  80 + color: #666;
  81 + p{
  82 + margin-bottom: 10px;
  83 + line-height: 25px;
  84 + }
  85 + span{
  86 + color: #D29E0D;
  87 + }
  88 + }
  89 +</style>
... ...
src/views/parkPay/orderPay.vue
  View file @bb95169
... ... @@ -22,10 +22,10 @@
22 22 </li>
23 23 </ul>
24 24 <div style="padding: 20px 18px">
25   - <div class="toPay" @click="toPay">微信支付</div>
  25 + <div class="toPay" @click="toPay">{{clientBrowser}}支付</div>
26 26 </div>
27 27  
28   - <div v-if="appOrderTimeout">
  28 + <div v-if="appOrderTimeout.length>0">
29 29 <p class="tip">
30 30 温馨提示：
31 31 </p>
... ... @@ -40,22 +40,27 @@
40 40 </template>
41 41  
42 42 <script>
43   -import {aliPay, getOpenId, vxPayQuery, doPay, doOrderCreate} from '@/api/orderPay/orderPay'
  43 +// import CryptoJS from '../utils/AES.js'
  44 +// let Base64 = require('js-base64').Base64
  45 +import { MessageBox } from 'mint-ui';
  46 +import { aliPay, getOpenId, vxPayQuery, bankH5Pay, queryParkingRecordPageByCarNumbers } from '@/api/orderPay/orderPay'
44 47  
45 48 export default {
46 49 name: 'orderPay',
47 50 data() {
48 51 return {
49 52 carWrapBG: 0,
50   - carNumber: '京A12312',
  53 + carNumber: '',
51 54 arrearageActFee: 0,
52 55 arrearageDiscFee: 0,
53 56 arrearageActFee: 0,
  57 + parkingData: [], // 在停数据
  58 + historyList: [], // 历史欠费数据
  59 + clientBrowser: '', // 客户端
54 60 paySrcType: '', //支付的类型 101 是本次 103是历史欠费
55 61 orderId: '', //支付的订单
56 62 webAppCode: '', // 微信code
57 63 appOrderTimeout: '', // 超时描述
58   - isAndroid: '', // 终端类型
59 64 }
60 65 },
61 66 created() {
... ... @@ -64,14 +69,19 @@ export default {
64 69 this.arrearageTotalFee = this.$route.query.arrearageTotalFee // 应收
65 70 this.arrearageDiscFee = this.$route.query.arrearageDiscFee // 优惠
66 71 this.arrearageActFee = this.$route.query.arrearageActFee // 实收
  72 + this.clientBrowser = this.$utils.clientBrowser() //支付方式
67 73 this.paySrcType = this.$route.query.paySrcType // 实收
68   - this.orderId = this.$route.query.ordeID // 订单号
  74 + this.orderId = this.$route.query.ordeID
69 75 console.log(this.orderId)
70   - this.appOrderTimeout = this.$route.query.appOrderTimeout //提示
  76 + this.appOrderTimeout = this.$route.query.appOrderTimeout
  77 + if (this.clientBrowser == "微信") {
  78 + this.webAppCode = this.getCode();
  79 + }
  80 +
71 81  
72   - let userAgent = navigator.userAgent;
73   - this.isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端
74   - this.webAppCode = this.getCode();
  82 +
  83 + },
  84 + mounted(){
75 85  
76 86 },
77 87 methods: {
... ... @@ -85,131 +95,181 @@ export default {
85 95 return code;
86 96 }
87 97 },
88   - doOrderCreate(orderID) { // 欠费创建订单号
89   - var jsondata = {
90   - orderBigType: 100,
91   - payOrderType: this.paySrcType,
92   - parkOrderIds: orderID,
93   - terminalSource: 7,
94   - operName: '',
95   - operCode: '',
96   - };
97   - // jsondata = JSON.stringify(jsondata);
98   - doOrderCreate(jsondata).then(res => {
99   - console.log(res)
100   - this.orderId = res.data.rltOrderId
101   - console.log(this.orderId)
102   - this.dopay(this.orderId)
103   - })
104   -
105   - },
106 98 getUrlParam(name) {
107 99 var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
108 100 var r = window.location.search.substr(1).match(reg)
109 101 if (r != null) return unescape(r[2])
110 102 return null
111 103 },
112   - dopay(orderID) {
  104 + toPay() {
113 105 let me = this
  106 + let _order = []
  107 +
  108 + console.log(this.orderId)
  109 + if (this.paySrcType == 103) {
  110 + this.orderId = JSON.parse(this.orderId)
  111 + this.orderId.forEach(item => {
  112 + _order.push({
  113 + orderId: item
  114 + })
  115 + })
  116 + this.orderId = []
  117 + this.orderId = _order
  118 + }
  119 +
  120 + if (this.clientBrowser == '支付宝') { // 支付宝支付
  121 + var aliParams = {};
  122 + aliParams.orderId = this.orderId;
  123 + aliParams.carNumber = this.carNumber;
  124 + aliParams.payType = 1;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号
  125 + aliParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
  126 + aliParams.paySrcType = this.paySrcType;//101停车支付
  127 + aliParams.orgId = this.$utils.myOrgId,
  128 + aliParams.backType = 2,
  129 + aliParams.recordArreaInfos = JSON.stringify(this.orderId);
  130 + console.log(aliParams)
  131 + aliPay(aliParams).then(response => {
  132 + console.log(response)
  133 + if (response.code == 0) {//进场
  134 + document.write(response.data);//打开支付表单
  135 + } else {//其他情况如【该卡号场内已存在】
  136 + console.log(response.message);
  137 + }
  138 +
  139 + })
  140 + }
  141 +
  142 + console.log(this.clientBrowser)
  143 + if (this.clientBrowser == '立即') { // 农行支付
  144 + var bankabcParams = {};
  145 + bankabcParams.orderId = this.orderId;
  146 + bankabcParams.carNumber = this.carNumber;
  147 + bankabcParams.payType = 34;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号 34 农行
  148 + bankabcParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
  149 + bankabcParams.paySrcType = this.paySrcType;//101停车支付
  150 + bankabcParams.orgId = this.$utils.myOrgId,
  151 + bankabcParams.backType = 2,
  152 + bankabcParams.PaymentLinkType = 1
  153 + bankabcParams.recordArreaInfos = JSON.stringify(this.orderId);
  154 + console.log(bankabcParams)
  155 + bankH5Pay(bankabcParams).then(response => {
  156 + console.log(response)
  157 + if(response.code=='0'){
  158 + let res = response.data.PaymentURL
  159 + let _token = res.split('TOKEN=')[1]
  160 + let OrderNo = response.data.OrderNo
  161 + localStorage.setItem('OrderNum',OrderNo)
  162 +
  163 +
  164 + if(window.navigator.userAgent.indexOf('Bankabc/Portal') > -1) {
  165 + // alert('当前页面在新容器');
  166 + AlipayJSBridge.call('startApp',{
  167 + appId:'30603024', // 固定值
  168 + param:{
  169 + type:"3", // 3： 掌银内H5页面，
  170 + tokenId:_token, //商户传过来的tokenId
  171 + paySystem:"", //商户传过来的paySystem, 没有则传空字符串
  172 + payType:"1111", //商户传过来的payType，没有则传'1111'
  173 + webviewURL:"https://wxgzh.renniting.cn/wechatwuxi/Chifeng/TEST/sweeping_payment/codepay/index.html#/payResult", //商户传过来的回跳地址
  174 + remark:"其他参数", //扩展备用
  175 + showProgress:'NO',
  176 + backBehavior:'back'
  177 + },
  178 + },function(result){
  179 +
  180 + });
  181 + } else {
  182 + // alert('当前页面在旧容器');
  183 + // 旧支付方式
  184 + 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":""}}');
  185 +
  186 + }
  187 + }else{
  188 + alert('支付失败')
  189 + }
  190 +
  191 +
  192 + // console.log(_token)
  193 + // let _data = 'method=invokePayFromBrowser&tokenID='+_token
  194 + // let cryData = CryptoJS.encrypt(_data, 'G9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvM3', 'EkpTEA3FbZFGGq8Y')
  195 + //
  196 + // let baseCRY = Base64.encode(cryData)
  197 + // console.log(baseCRY)
  198 + // window.location.href='bankabc:' + encodeURIComponent('{"method":"invokePayFromBrowser","param":'+baseCRY+'}')
  199 + // // 即为加密后的数据。其中paramsEncode是需要加密的数据、
  200 + // // keyStr是加密时使用的key，与服务端一致、hash是偏移量，是一个随机生成的16位字符串。
  201 + })
  202 + }
  203 +
  204 +
114 205  
115 206  
116 207  
117   - var vm = this
  208 +
  209 +
  210 + if (this.clientBrowser == '微信') { // 微信支付
118 211 //第一步获取openid
119 212 var codeParams = {
120 213 code: this.webAppCode,
121 214 appId: this.$utils.myVxAppId
122 215 };
123   - getOpenId(codeParams).then(resu => {
124   - if (resu.code == 0) {
125   - // me.vxPay(res.data, this.orderId)
126   -
127   - var jsondata = {
128   - orderBigType: 100,
129   - payOrderType: this.paySrcType,
130   - rltOrderId: orderID,
131   - payType: 2, // 1 是支付宝 2是微信
132   - terminalSource: 7,
133   - orderActFee: this.arrearageActFee,
134   - orderTotalFee: this.arrearageTotalFee,
135   - orderDicountFee: this.arrearageDiscFee,
136   - payUserId: resu.data,
137   - terminalOS: this.isAndroid ? 'AND' : 'IOS',
138   - couponType: 1, //优惠类型
139   - couponCode: this.arrearageDiscFee,
140   - };
141   -
142   - doPay(jsondata).then(res => {
143   - console.log(res)
144   - if (res.code == 0) { //
145   - //alertMsg("出场成功");
146   - if (res.data) {
147   - var data = JSON.parse(res.data.jsPayRequest);
148   - console.log(JSON.stringify(data));
149   - if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
150   - if (document.addEventListener) {
151   - document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false)
152   - } else if (document.attachEvent) {
153   - document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
154   - document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
155   - }
156   - } else {
157   - console.log('准备调用微信支付')
158   - vm.onBridgeReady(data)
159   - }
160   - } else {
161   - alert("没有找到返回值");
162   - }
163   - } else {
164   - alert('支付错误')
165   - console.log(res.message);
166   - alert(res.message);
167   - }
168   -
169   - })
170   -
  216 + getOpenId(codeParams).then(res => {
  217 + if (res.code == 0) {
  218 + me.vxPay(res.data, this.orderId)
171 219 } else if (res.code == 40163) { //code been used, hints[重复code问题]
172   - alert('获取opendid错误--------')
173   - alert(res.message)
  220 + alert('请重新扫码')
174 221 console.log(res.message);
175 222 } else {
176   - alert('获取opendid错误')
177   - alert(res.message)
  223 + alert('请重新扫码')
178 224 }
179 225 })
180 226  
181   -
182   - },
183   - toPay() {
184   - let me = this
185   - let _order = []
186   - // this.orderId = JSON.parse(this.orderId)
187   - console.log(this.orderId)
188   - if (this.paySrcType == 103) {
189   - this.orderId = JSON.parse(this.orderId)
190   - this.doOrderCreate(this.orderId)
191   - } else {
192   - console.log(this.orderId)
193   - console.log(typeof this.orderId)
194   -
195   - this.dopay(this.orderId)
196 227 }
197 228  
198 229 },
199   -
  230 + vxPay(openIdData, orderIdData) {
  231 + let vm = this
  232 + var wxParams = {};
  233 + wxParams.orderId = orderIdData;
  234 + wxParams.backType = 2,
  235 + wxParams.orgId = this.$utils.myOrgId,
  236 + wxParams.payType = 4;// 1:支付宝 2：微信 3：银联 10:H5 4微信公众号
  237 + wxParams.terminalSource = 7;//请求端来源 1： 任你停 2：pda 3：微信公共号 7:H5扫码 10页面支付
  238 + wxParams.carNumber = this.carNumber;
  239 + wxParams.paySrcType = this.paySrcType;//101停车支付
  240 + wxParams.recordArreaInfos = JSON.stringify(orderIdData);
  241 + wxParams.openId = openIdData;
  242 + wxParams.appId = this.$utils.myVxAppId;
  243 + vxPayQuery(wxParams).then(res => {
  244 + if (res.code == 0) { //
  245 + if (res.data) {
  246 + var data = res.data;
  247 + console.log(JSON.stringify(data));
  248 + if (typeof WeixinJSBridge === 'undefined') { // 微信浏览器内置对象。参考微信官方文档
  249 + if (document.addEventListener) {
  250 + document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false)
  251 + } else if (document.attachEvent) {
  252 + document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data))
  253 + document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data))
  254 + }
  255 + } else {
  256 + console.log('准备调用微信支付')
  257 + vm.onBridgeReady(data)
  258 + }
  259 + } else {
  260 + alert("没有找到返回值");
  261 + }
  262 + } else {
  263 + console.log(res.message);
  264 + alert(res.message);
  265 + }
  266 + })
  267 + },
200 268 onBridgeReady(params) {
  269 + let me = this
201 270 console.log('调用微信支付WeixinJSBridge')
202 271 WeixinJSBridge.invoke(
203   - 'getBrandWCPayRequest', {
204   - "appId": params.appId, //公众号名称，由商户传入
205   - "timeStamp": params.timeStamp, //时间戳，自1970年以来的秒数
206   - "nonceStr": params.nonceStr, //随机串
207   - "package": params.package,
208   - "signType": params.signType, //微信签名方式：
209   - "paySign": params.paySign //微信签名
210   - },
211   -
212   - // 'getBrandWCPayRequest', params,
  272 + 'getBrandWCPayRequest', params,
213 273 //
214 274 // 'getBrandWCPayRequest', { // 下面参数内容都是后台返回的
215 275 // 'appId': data.appId, // 公众号名称，由商户传入
... ... @@ -223,15 +283,110 @@ export default {
223 283 // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
224 284 if (res.err_msg === 'get_brand_wcpay_request:ok') {
225 285 console.log('成功')
  286 + var salt = me.$utils.myCommonSalt(32);
  287 + let wxparams = {
  288 + pageNum: 1,
  289 + pageSize: 10000,
  290 + parkState: 10,
  291 + terminalSource: 7,
  292 + carNumber: me.carNumber,
  293 + app_id: me.$utils.myVarAppid,
  294 + deviceInfo: me.$utils.myDeviceInfo,
  295 + salt: salt,
  296 + sign_type: "md5",
  297 + token:'',
  298 + }
  299 + wxparams.sign = me.$utils.signObject(wxparams)
  300 + queryParkingRecordPageByCarNumbers(wxparams).then(response => {
  301 + console.log(response)
  302 + me.parkList = response.data.dataList
  303 +
  304 + if(me.parkList.length == 0){
  305 + me.$router.push({
  306 + path:'parkRecord',
  307 + query:{
  308 + carNumber: me.carNumber,
  309 + carNumberColor: me.carWrapBG,
  310 + parkFlag: 0 // 0表示在停 1表示历史
  311 + }
  312 + })
  313 + }
  314 +
  315 + me.parkingData = me.parkList.filter(item => {
  316 + return item.parkState == '10'
  317 + })
  318 + console.log(me.parkingData)
  319 + me.historyList = me.parkList.filter(item => {
  320 + return item.parkState == '20'
  321 + })
  322 + console.log(me.historyList)
  323 + if(me.parkingData.length>0){
  324 + MessageBox.confirm('', {
  325 + message: '您当前有在停订单 是否立即支付?',
  326 + title: '温馨提示',
  327 + confirmButtonText: '去支付',
  328 + cancelButtonText: '取消'
  329 + }).then(action => {
  330 + if (action == 'confirm') { //确认的回调
  331 + console.log('确定');
  332 + me.$router.push({
  333 + path:'parkRecord',
  334 + query:{
  335 + carNumber: me.carNumber,
  336 + carNumberColor: me.carWrapBG,
  337 + parkFlag: 0 // 0表示在停 1表示历史
  338 + }
  339 + })
  340 + }
  341 + }).catch(err => {
  342 + if (err == 'cancel') { //取消的回调
  343 + console.log('取消');
  344 + }
  345 + });
  346 + }
  347 +
  348 + if(me.parkingData.length==0&&me.historyList.length>0){
  349 + MessageBox.confirm('', {
  350 + message: '您当前有历史欠费 是否立即补缴?',
  351 + title: '温馨提示',
  352 + confirmButtonText: '去补缴',
  353 + cancelButtonText: '取消'
  354 + }).then(action => {
  355 + if (action == 'confirm') { //确认的回调
  356 + console.log('确定');
  357 + me.$router.push({
  358 + path:'parkRecord',
  359 + query:{
  360 + carNumber: me.carNumber,
  361 + carNumberColor: me.carWrapBG,
  362 + parkFlag: 1 // 0表示在停 1表示历史
  363 + }
  364 + })
  365 + }
  366 + }).catch(err => {
  367 + if (err == 'cancel') { //取消的回调
  368 + console.log('取消');
  369 + }
  370 + });
  371 + }
  372 +
  373 + })
  374 +
  375 +
  376 +
  377 +
  378 +
226 379 } else {
227 380 console.log('失败')
228 381 alert('支付失败')
  382 + me.$router.go(-2);
229 383 }
230 384 }
231 385 )
232 386 },
233 387 },
234   -
  388 + filters: {
  389 + }
235 390 }
236 391 </script>
237 392  
... ... @@ -247,27 +402,27 @@ export default {
247 402 }
248 403  
249 404 .carBlue {
250   - background: url("../../assets/images/parkPay/blueBG.png") no-repeat;
  405 + background: url("../../assets/images/blueBG.png") no-repeat;
251 406 background-size: 100% 100%;
252 407 }
253 408  
254 409 .carYellow {
255   - background: url("../../assets/images/parkPay/yellowBG.png") no-repeat;
  410 + background: url("../../assets/images/yellowBG.png") no-repeat;
256 411 background-size: 100% 100%;
257 412 }
258 413  
259 414 .carGreen {
260   - background: url("../../assets/images/parkPay/greenBG.png") no-repeat;
  415 + background: url("../../assets/images/greenBG.png") no-repeat;
261 416 background-size: 100% 100%;
262 417 }
263 418  
264 419 .carWhite {
265   - background: url("../../assets/images/parkPay/whiteBG.png") no-repeat;
  420 + background: url("../../assets/images/whiteBG.png") no-repeat;
266 421 background-size: 100% 100%;
267 422 }
268 423  
269 424 .carBlack {
270   - background: url("../../assets/images/parkPay/blackBG.png") no-repeat;
  425 + background: url("../../assets/images/blackBG.png") no-repeat;
271 426 background-size: 100% 100%;
272 427 }
273 428  
... ... @@ -316,7 +471,7 @@ export default {
316 471  
317 472 .tip {
318 473 padding-left: 40px;
319   - background: url("../../assets/images/parkPay/tip.png") no-repeat 18px center;
  474 + background: url("../../assets/images/tip.png") no-repeat 18px center;
320 475 background-size: 16px 16px;
321 476 color: #666;
322 477 }
... ...
src/views/parkPay/parkRecord.vue
  View file @bb95169
... ... @@ -10,12 +10,11 @@
10 10 </li>
11 11 </ul>
12 12  
13   -
14 13 <!--本次缴费-->
15 14 <div v-show="currentTabActive==0">
16 15  
17 16 <div v-if="parkingData.length>0">
18   - <p class="free-tip" v-if="parkingData[0].parkDuration<=2100">停车30分钟内无需缴费，请直接离场。</p>
  17 + <p class="free-tip" v-if="parkingData[0].parkDuration<=2100">停车15分钟内无需缴费，请申请离场。</p>
19 18  
20 19 <div class="cost-main" v-for="i in parkingData">
21 20 <ul class="cost-header">
... ... @@ -34,7 +33,8 @@
34 33 <p>停车时长：{{ $utils.dateFormat(i.parkDuration)}}</p>
35 34 <div class="out-wrap">
36 35 <p class="mon-wrap">￥{{(i.unPayFee/100).toFixed(2)}}</p>
37   - <p class="out-btn" @click="toPayCurrent(i)" v-if="parkingData[0].parkDuration>2100">出场缴费</p>
  36 + <p class="out-btn" @click="toPayCurrent(i,parkingData[0].parkDuration)" v-if="parkingData[0].parkDuration<=60">申请离场</p>
  37 + <p class="out-btn" @click="toPayCurrent(i,parkingData[0].parkDuration)" v-else>出场缴费</p>
38 38 </div>
39 39 </div>
40 40 </div>
... ... @@ -66,7 +66,7 @@
66 66 </ul>
67 67  
68 68 <div class="cost-body">
69   - <p>车辆类型：临停车</p>
  69 + <!--<p>车辆颜色：临停车</p>-->
70 70  
71 71 <p>车场名称：{{i.parkName}}
72 72 </p>
... ... @@ -112,19 +112,13 @@
112 112 暂无记录
113 113 </div>
114 114  
115   - <modal-alert ref="alert">
116   - <div class="trave-tip-content txt-l" slot="content">
117   - <div class="confirm-text">
118   - <p>请至少选择一笔记录</p>
119   - </div>
120   - </div>
121   - <span slot="button">知道了</span>
122   - </modal-alert>
  115 +
123 116 </div>
124 117 </template>
125 118  
126 119 <script>
127   -import { parkRecordList, historyQuery, parkingQuery } from '@/api/parkRecord/parkRecord.js'
  120 +
  121 +import { parkRecordList, historyQuery, parkingQuery, appApplyParkOut } from '@/api/parkRecord/parkRecord.js'
128 122  
129 123  
130 124 export default {
... ... @@ -136,7 +130,7 @@ export default {
136 130 { text: '欠费待缴', id: 2 },
137 131 ],
138 132 carColor: 1,// 车牌颜色
139   - currentTabActive: 1, // 显示当前哪个
  133 + currentTabActive: 0, // 显示当前哪个
140 134 carNumber: '', // 车牌号码
141 135 parkingData:[], // 在停数据
142 136 parkList: [], // 停车记录数据
... ... @@ -155,8 +149,10 @@ export default {
155 149 created() {
156 150 this.carNumber = this.$route.query.carNumber // 获取车牌号
157 151 this.carColor = this.$route.query.carNumberColor // 获取颜色 0:蓝牌;1:黄牌;2:白牌;3:黑牌;4:绿色
  152 + this.currentTabActive = this.$route.query.parkFlag ? this.$route.query.parkFlag : 0 // 0在停 1历史
158 153 console.log(this.carNumber)
159 154 this.parkRecordList(this.carNumber)
  155 +
160 156 },
161 157 methods: {
162 158 parkRecordList(){ // 获取停车记录数据
... ... @@ -186,13 +182,16 @@ export default {
186 182 this.parkingData = this.parkList.filter(item => {
187 183 return item.parkState == '10'
188 184 })
189   - if(this.parkingData.length>0){
190   - this.currentTabActive = 0
191   - }
  185 + // if(this.parkingData.length>0){
  186 + // this.currentTabActive = 0
  187 + // }
192 188 console.log(this.parkingData)
193 189 this.historyList = this.parkList.filter(item => {
194 190 return item.parkState == '20'
195 191 })
  192 + if(this.parkingData.length==0&&this.historyList.length>0){
  193 + this.currentTabActive = 1
  194 + }
196 195 this.historyList.forEach( i => {
197 196 this.allMoney += Number(i.unPayFee)
198 197 })
... ... @@ -246,47 +245,71 @@ export default {
246 245 this.orderIds = []
247 246 }
248 247 },
249   - toPayCurrent(i){ // 缴纳本次在停费用
  248 + toPayCurrent(i, num) { // 缴纳本次在停费用
250 249 var salt = this.$utils.myCommonSalt(32);
251   - var jsondata = {
  250 + var params = {
252 251 app_id: this.$utils.myVarAppid,
253 252 deviceInfo: this.$utils.myDeviceInfo,
254 253 salt: salt,
255 254 sign_type: "md5",
256   - payType: 4,
257   - appId: this.$utils.myVxAppId,
258 255 orderId: i.orderId,
259   - terminalSource: '7',
260   - parkCode: i.parkCode,
261   - carNumber: this.carNumber,
  256 + payOrderType: '101',
  257 + terminalSource: '3',
262 258 }
263   - jsondata.sign = this.$utils.signObject(jsondata)
264   - parkingQuery(jsondata).then(result => {
265   - console.log(result)
266   - let res = result.data
267   - let _dis = res.discountFee
268   - let discountFee = _dis.slice(1,_dis.length-1)
  259 + params.sign = this.$utils.signObject(params)
  260 + appApplyParkOut(params).then(response => {
  261 + console.log(response)
269 262  
270   - this.$router.push(
271   - {
272   - path:'orderPay',
273   - query:{
274   - carColor: this.carColor,// 车牌颜色
275   - arrearageTotalFee: res.orderTotalFee,// 应收
276   - arrearageDiscFee: discountFee*100,// 优惠
277   - arrearageActFee: res.orderFee,// 实收
278   - carNumber: this.carNumber, // 车牌
279   - paySrcType: 101, //支付的类型 101 是本次 103是历史欠费
280   - ordeID: i.orderId, //支付的订单号
281   - appOrderTimeout: res.appOrderTimeout, // 超时描述
282   - }
  263 + if (response.code == '5005') {
  264 + var salt = this.$utils.myCommonSalt(32);
  265 + var jsondata = {
  266 + app_id: this.$utils.myVarAppid,
  267 + deviceInfo: this.$utils.myDeviceInfo,
  268 + salt: salt,
  269 + sign_type: "md5",
  270 + payType: this.$utils.clientBrowsePayType(),
  271 + appId: this.$utils.myVxAppId,
  272 + orderId: i.orderId,
  273 + terminalSource: '7',
  274 + parkCode: i.parkCode,
  275 + carNumber: this.carNumber,
283 276 }
284   - )
  277 + jsondata.sign = this.$utils.signObject(jsondata)
  278 + parkingQuery(jsondata).then(result => {
  279 + console.log(result)
  280 + let res = result.data
  281 + let _dis = res.discountFee
  282 + let discountFee = _dis.slice(1, _dis.length - 1)
  283 +
  284 + this.$router.push(
  285 + {
  286 + path: 'orderPay',
  287 + query: {
  288 + carColor: this.carColor,// 车牌颜色
  289 + arrearageTotalFee: res.orderTotalFee,// 应收
  290 + arrearageDiscFee: discountFee * 100,// 优惠
  291 + arrearageActFee: res.orderFee,// 实收
  292 + carNumber: this.carNumber, // 车牌
  293 + paySrcType: 101, //支付的类型 101 是本次 103是历史欠费
  294 + ordeID: i.orderId, //支付的订单号
  295 + appOrderTimeout: res.appOrderTimeout, // 超时描述
  296 + }
  297 + }
  298 + )
  299 + })
  300 +
  301 + } else {
  302 + //$('.dialog-out').show()
  303 + this.$msgbox('提示', '停车15分钟内无需缴费，申请成功。')
  304 + }
  305 +
285 306 })
  307 +
286 308 },
287 309 toPayHisroryPage() { // 缴纳历史费用
288 310 if(this.historyCheckedLen==0){
289   - this.$refs.alert.open()
  311 + this.$msgbox('提示', '请至少选择一条记录')
  312 +
290 313 return
291 314 }
292 315 var salt = this.$utils.myCommonSalt(32);
... ... @@ -323,6 +346,7 @@ export default {
323 346 carNumber: this.carNumber, // 车牌
324 347 paySrcType: 103, //支付的类型 101 是本次 103是历史欠费
325 348 ordeID: this.orderIds, //支付的订单号
  349 + appOrderTimeout: ''
326 350 }
327 351 }
328 352 )
... ...
src/views/parkPay/plateNumber.vue
  View file @bb95169
1 1 <template>
2 2 <div id="page">
  3 +
  4 + <div class="swiper-container" style="height: 260px">
  5 + <div class="swiper-wrapper">
  6 + <div class="swiper-slide" v-for="item in swiperData" :key="item.id"
  7 + :style="{backgroundImage:'url(' + item.url + ')'}"
  8 + @click="openImgUrl(item)"
  9 + ></div>
  10 + </div>
  11 + <!-- 如果需要分页器 -->
  12 + <div class="swiper-pagination"></div>
  13 +
  14 + <!-- 如果需要滚动条 -->
  15 + <!-- <div class="swiper-scrollbar"></div>-->
  16 + </div>
  17 +
3 18 <div class="wrap">
4   - <p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>
  19 + <!--<p style="margin-bottom: 18px;margin-top: 18px;">请选择车牌颜色</p>-->
  20 +
  21 + <!--<ul class="color-choose">-->
  22 + <!--<li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"-->
  23 + <!--:style="{color:currentColor==index?'#FFF':'',background: currentColor==index?activeBG:'' }"-->
  24 + <!--&gt;-->
  25 + <!--{{i.name}}-->
  26 + <!--</li>-->
  27 +
  28 + <!--</ul>-->
  29 +
  30 +
5 31  
6   - <ul class="color-choose">
7   - <li v-for="(i,index) in colorList" :key="i.name" @click="chooseColor(index)"
8   - :style="{color:currentColor==index?'#FFF':'',background: currentColor==index?activeBG:'' }"
9   - >
10   - {{i.name}}
11   - </li>
12 32  
13   - </ul>
14 33  
15 34 <p style="margin-bottom: 18px;margin-top: 18px;">请输入车牌号码</p>
16 35 <div class="num-box">
... ... @@ -59,19 +78,14 @@
59 78 </div>
60 79  
61 80 <div>
62   - <p style="margin-bottom: 18px;margin-top: 18px;">已绑定车牌</p>
63   - <ul class="bound-list">
64   - <li>
65   - <span>鄂B4567R</span>
66   - <span>查看订单</span>
67   - </li>
68   - <li>
69   - <span>鄂B4567R</span>
70   - <span>查看订单</span>
  81 + <p style="margin-bottom: 18px;margin-top: 18px;">查询记录</p>
  82 + <ul class="bound-list" v-if="boundList.length>0">
  83 + <li v-for="i in boundList" :key="i">
  84 + <span>{{ i }}</span>
71 85 </li>
72 86 </ul>
73   - <div style="text-align: center;padding: 10px 0;">暂无绑定车牌</div>
74   - <div class="addCarNum"><span></span>添加车辆</div>
  87 + <div v-else style="text-align: center;padding: 10px 0;">暂无查询记录</div>
  88 + <!--<div class="addCarNum"><span></span>添加车辆</div>-->
75 89 </div>
76 90  
77 91  
... ... @@ -83,7 +97,7 @@
83 97 <div class="first-word"
84 98 @click="selectFirstWord($event)">
85 99 <div class="word">
86   - <span>京</span>
  100 + <span>蒙</span>
87 101 </div>
88 102 <div class="word">
89 103 <span>湘</span>
... ... @@ -164,7 +178,7 @@
164 178 <div class="first-word"
165 179 @click="selectFirstWord($event)">
166 180 <div class="word">
167   - <span>蒙</span>
  181 + <span>京</span>
168 182 </div>
169 183 <div class="word">
170 184 <span>赣</span>
... ... @@ -184,8 +198,38 @@
184 198 <div class="word">
185 199 <span>新</span>
186 200 </div>
  201 + <div class="word">
  202 + <span>学</span>
  203 + </div>
  204 + <!--<div class="word bordernone">-->
  205 + <!--&lt;!&ndash; <img src="../assets/images/icon-switch.png" alt=""> &ndash;&gt;-->
  206 + <!--</div>-->
  207 + </div>
  208 +
  209 + <div class="first-word"
  210 + @click="selectFirstWord($event)">
  211 + <div class="word">
  212 + <span>港</span>
  213 + </div>
  214 + <div class="word">
  215 + <span>澳</span>
  216 + </div>
  217 + <div class="word">
  218 + <span>领</span>
  219 + </div>
  220 +
  221 + <div class="word">
  222 + <span>警</span>
  223 + </div>
  224 +
  225 +
  226 + <div class="word bordernone">
  227 + </div>
  228 + <div class="word bordernone">
  229 + </div>
  230 + <div class="word bordernone">
  231 + </div>
187 232 <div class="word bordernone">
188   - <!-- <img src="../assets/images/icon-switch.png" alt=""> -->
189 233 </div>
190 234 </div>
191 235 </div>
... ... @@ -257,6 +301,10 @@
257 301 </div>
258 302 </template>
259 303 <script>
  304 +
  305 +import Swiper from 'swiper' // 应入swiper
  306 +import {swiperQuery} from '../../api/plateNumber/plateNumber'
  307 +
260 308 export default {
261 309 data () {
262 310 return {
... ... @@ -310,12 +358,53 @@ export default {
310 358 confirmTitle: '',
311 359 submitConfirm: false,
312 360 submitConfirmFalse: false,
313   - submitConfirmText: ''
  361 + submitConfirmText: '',
  362 + swiperData: [], // 轮播数据
  363 + boundList:[] // 历史记录
314 364 }
315 365 },
  366 + created(){
  367 + this.initSWiper()
  368 + },
316 369 mounted () {
  370 + this.boundList = localStorage.getItem('parkRecordList') ? localStorage.getItem('parkRecordList') : []
  371 + console.log(this.boundList)
317 372 },
318 373 methods: {
  374 + initSWiper() {
  375 + var salt = this.$utils.myCommonSalt(32)
  376 + var jsondata = {
  377 + app_id: this.$utils.myVarAppid,
  378 + deviceInfo: this.$utils.myDeviceInfo,
  379 + salt: salt,
  380 + sign_type: 'md5',
  381 + sign: '1',
  382 + orgId: this.$utils.myOrgId,
  383 + jumpType: '8'
  384 + };
  385 + // jsondata = JSON.stringify(jsondata);
  386 + swiperQuery(jsondata).then(res => {
  387 + this.swiperData = res.data
  388 + console.log(this.swiperData)
  389 + new Swiper('.swiper-container', {
  390 + pagination: '.swiper-pagination',
  391 + paginationClickable: true,
  392 + centeredSlides: true,
  393 + notNextTick: true,
  394 + autoplay: 5000,
  395 + autoplayDisableOnInteraction: true,
  396 +
  397 + observer: true, //修改swiper自己或子元素时，自动初始化swiper
  398 + observeParents: true, //修改swiper的父元素时，自动初始化swiper
  399 + onSlideChangeStart: function (swiper) {
  400 + //console.log(swiper.activeIndex)
  401 + }
  402 + })
  403 + })
  404 + },
  405 + openImgUrl(i) { // 点击图片跳转
  406 + window.open(i.jumpUrl)
  407 + },
319 408 chooseColor (index){ // 颜色选择
320 409 this.currentColor = index
321 410 switch (this.currentColor) {
... ... @@ -406,10 +495,20 @@ export default {
406 495 }
407 496 this.$emit('getPlateLicense',plateLicense)
408 497 console.log(plateLicense);
  498 +
  499 + // boundList
  500 + if(this.boundList.indexOf(plateLicense) == -1 ){
  501 + if(this.boundList.length == 3){
  502 + this.boundList.pop()
  503 + }
  504 + this.boundList.unshift(plateLicense)
  505 + }
  506 +
409 507 this.$router.push({
410 508 path:'parkRecord',
411 509 query:{
412   - carNumber:plateLicense
  510 + carNumber:plateLicense,
  511 + carNumberColor: this.currentColor
413 512 }
414 513 })
415 514 },
... ... @@ -506,6 +605,18 @@ export default {
506 605 }
507 606 </script>
508 607 <style lang="scss" scoped>
  608 +
  609 + .swiper-container {
  610 + height: 206px;
  611 + }
  612 +
  613 + .swiper-slide {
  614 + /*width: 100%;*/
  615 + height: 206px;
  616 + background-repeat: no-repeat;
  617 + background-size: 100% 100%;
  618 + }
  619 +
509 620 .flex-items-center {
510 621 display: flex;
511 622 align-items: center;
... ...