0c49c87e
 liuqimichale
微信公众号 初始化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<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
|
|
94c1e6a3
liuqimichale
微信公众号 个人页面集合
|
42
|
import { swiperQuery } from '../../api/navigation/navigation'
|
|
0c49c87e
liuqimichale
微信公众号 初始化
|
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
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,
|
|
c14fb301
liuqimichale
赤峰 输入车牌停车记录
|
71
|
jumpType: '7'
|
|
0c49c87e
liuqimichale
微信公众号 初始化
|
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
};
// 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;
|
|
94c1e6a3
liuqimichale
微信公众号 个人页面集合
|
114
|
background: url("../../assets/images/parkPay/tip.png") no-repeat 0 center;
|
|
0c49c87e
liuqimichale
微信公众号 初始化
|
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
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 {
|
|
94c1e6a3
liuqimichale
微信公众号 个人页面集合
|
133
|
background: url("../../assets/images/parkPay/blueBG.png") no-repeat;
|
|
0c49c87e
liuqimichale
微信公众号 初始化
|
134
135
136
137
|
background-size: 100% 100%;
}
.carYellow {
|
|
94c1e6a3
liuqimichale
微信公众号 个人页面集合
|
138
|
background: url("../../assets/images/parkPay/yellowBG.png") no-repeat;
|
|
0c49c87e
liuqimichale
微信公众号 初始化
|
139
140
141
142
|
background-size: 100% 100%;
}
.carGreen {
|
|
94c1e6a3
liuqimichale
微信公众号 个人页面集合
|
143
|
background: url("../../assets/images/parkPay/greenBG.png") no-repeat;
|
|
0c49c87e
liuqimichale
微信公众号 初始化
|
144
145
146
147
|
background-size: 100% 100%;
}
.carWhite {
|
|
94c1e6a3
liuqimichale
微信公众号 个人页面集合
|
148
|
background: url("../../assets/images/parkPay/whiteBG.png") no-repeat;
|
|
0c49c87e
liuqimichale
微信公众号 初始化
|
149
150
151
152
|
background-size: 100% 100%;
}
.carBlack {
|
|
94c1e6a3
liuqimichale
微信公众号 个人页面集合
|
153
|
background: url("../../assets/images/parkPay/blackBG.png") no-repeat;
|
|
0c49c87e
liuqimichale
微信公众号 初始化
|
154
155
156
157
158
159
160
161
162
|
background-size: 100% 100%;
}
.toParkRecord{
margin-top: 40px;
margin-bottom: 20px;
height: 50px;
line-height: 50px;
font-size: 16px;
text-align: center;
|
|
94c1e6a3
liuqimichale
微信公众号 个人页面集合
|
163
|
background: url("../../assets/images/parkPay/toParkRecord.png") no-repeat;
|
|
0c49c87e
liuqimichale
微信公众号 初始化
|
164
165
166
167
168
169
170
171
172
|
background-size: 100% 50px;
cursor: pointer;
}
.toPlateNumber{
text-align: right;
cursor: pointer;
}
</style>
|
