From 92146b2ca987538074c380f07f567ca85347dd13 Mon Sep 17 00:00:00 2001
From: kongdeqiang <123456>
Date: 星期一, 06 一月 2025 14:17:39 +0800
Subject: [PATCH] feat: 新增月租车页面
---
src/components/page/IndexTest.vue | 411 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 345 insertions(+), 66 deletions(-)
diff --git a/src/components/page/IndexTest.vue b/src/components/page/IndexTest.vue
index e481b17..b522a4e 100644
--- a/src/components/page/IndexTest.vue
+++ b/src/components/page/IndexTest.vue
@@ -8,12 +8,12 @@
<div class="weizhang-main-box">
<div class="weizhang-main-top">
<img class="logoPhone" src="../../assets/images/logoImg.png" alt="">
- <span class="money">锟{this.statisticData.price}}</span>
<span class="weizhang">娴嬭瘯鏀惰垂</span>
+ <span class="money">锟{this.statisticData.price}}</span>
</div>
<div class="weizhang-main-bootom">
<div class="weizhang-main-form">
- <el-form label-width="100px" :model="statisticData" label-position="left">
+ <el-form label-width="80px" :model="statisticData" label-position="left">
<el-form-item label="杞︾墝鍙�" style="margin-left: 25px;">
{{this.statisticData.carNo}}
</el-form-item>
@@ -33,7 +33,7 @@
{{this.statisticData.code}}
<!--<el-input v-model="statisticData.code" readonly></el-input>-->
</el-form-item>
- <el-form-item style="display: flex;justify-content: center;margin-top: 4.498vh" label-width="0" v-show="showFlag">
+ <el-form-item class="weizhang-footer-box" style="display: flex;justify-content: center;margin-top: 4.498vh" label-width="0" v-show="showFlag">
<el-button class="jiaofei-btn" type="primary" @click="pay()" :loading="payFlag">鍘荤即璐�</el-button>
</el-form-item>
</el-form>
@@ -50,17 +50,54 @@
</div>
</div>
+ <div class="dialog-box">
+ <el-dialog
+ title="鏀粯"
+ :close-on-click-modal="false"
+ :visible.sync="dialogVisible"
+ width="100%">
+ <div class="dialog-main-box">
+ <div class="dialog-main-line">
+ <h1>鍚堣璐圭敤</h1>
+ <h1>{{this.statisticData.price}}鍏�</h1>
+ </div>
+ <div class="dialog-main-line">
+ <h1>鍋滆溅鏃堕暱</h1>
+ <h1>{{this.statisticData.timeStr}}</h1>
+ </div>
+ <div class="dialog-main-line-middle">
+ <h1>{{this.statisticData.price}}<font>鍏�</font></h1>
+ </div>
+ <div class="wx-img-box">
+ <div class="wx-img-l">
+ <img src="../../assets/images/wxIcon.png" alt="">
+ <h1>寰俊鏀粯</h1>
+ </div>
+ <div class="wx-img-r">
+ <img src="../../assets/images/duigouIcon.png" alt="">
+ </div>
+ </div>
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <el-button type="primary" @click="pay()" :loading="payNowFlag">绔� 鍗� 鏀� 浠�</el-button>
+ </span>
+ </el-dialog>
+ </div>
</div>
</template>
<script>
- export default {
+import wx from 'weixin-js-sdk'
+export default {
name: 'dashboard',
data() {
return {
+ dialogVisible:false,
payFlag:false,
+ payNowFlag:false,
outParkId:"",
+ type:null,
statisticData:{
},
@@ -68,11 +105,34 @@
showFlag2:true,
status3:0,
carNo:"",
- code2:""
+ code2:"",
+ code:""
}
},
created(){
+ let ua = window.navigator.userAgent.toLowerCase();
+ //鍒ゆ柇鏄笉鏄井淇�
+ if (ua.match(/MicroMessenger/i) == "micromessenger") {
+ // 寰俊
+ this.type = 0
+ }
+ //鍒ゆ柇鏄笉鏄敮浠樺疂
+ if (ua.match(/AlipayClient/i) == "alipayclient") {
+ //鏀粯瀹�
+ this.type = 1
+ }
+ if(this.type == null){
+ this.$message.error("璇风敤寰俊鎴栨敮浠樺疂鎵弿浜岀淮鐮�")
+ return;
+ }
+
var url = window.location.href;
+ var count = url.split('?').length-1;
+ if(count >1){
+ this.code = this.getCodeFromUrl(url)
+ this.code2 = this.getCode2FromUrl(url)
+ window.location.href = "http://hesuancj.cn/#/indexTest?code="+this.code+"&state=STATE&code2="+this.code2
+ }
var cs = url.split('?')[1];
var cs_arr = cs.split('&');
var cs={};
@@ -80,24 +140,35 @@
cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
}
//this.outParkId = cs.code;
- this.code2 = cs.code;
- this.$byutil.postData(this, this.$systemconfig.basePath + '/outPark/findByBarrierCode', {code:cs.code}, res => {
- this.statisticData = res.data;
- this.outParkId = this.statisticData.id;
- this.status3 = this.statisticData.status3;
- this.payFlag = false
- if(this.status3==1){
- this.$message({
- message: '鎮ㄦ湁杩濈珷鏈鐞嗭紝璇峰厛澶勭悊鎴栬仈绯诲仠杞﹀満绠＄悊浜哄憳',
- type: 'error',
- duration:5000,
- });
- }
- })
+ this.code2 = cs.code2;
+ this.code = cs.code;
+ if(this.code2 == null || this.code2 == ''){
+ window.location.href = "http://hesuancj.cn/#/indexTest?code2="+this.code
+ }
+ if(this.code != null && this.code != '') {
+ this.dialogVisible = true
+ }else {
+ this.dialogVisible = false
+ }
+ this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/findByBarrierCode2', {code2:cs.code2}, res => {
+ this.statisticData = res.data;
+ this.outParkId = this.statisticData.id;
+ this.status3 = this.statisticData.status3;
+ this.oldCarNo = this.statisticData.carNo;
+ this.payFlag = false
+ if(this.status3==1){
+ this.$message({
+ message: '鎮ㄦ湁杩濈珷鏈鐞嗭紝璇峰厛澶勭悊鎴栬仈绯诲仠杞﹀満绠＄悊浜哄憳',
+ type: 'error',
+ duration:5000,
+ });
+ }
+ })
},
methods: {
pay(){
this.payFlag = true;
+ this.payNowFlag = true;
if(this.status3==1){
this.$message({
message: '鎮ㄦ湁杩濈珷鏈鐞嗭紝璇峰厛澶勭悊鎴栬仈绯诲仠杞﹀満绠＄悊浜哄憳',
@@ -106,14 +177,11 @@
});
return;
}
- this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/park', {id:this.outParkId}, res => {
- this.$message({
- message: '2绉掑悗鑷姩璺宠浆鍒版敮浠橀〉闈紝闃叉鍐呭缃戞暟鎹悓姝ュ欢杩燂紝璇风◢绛�',
- type: 'success',
- duration:2000,
- });
- setTimeout(function(){window.location.href = res.msg;},2000);
- this.showFlag = false;
+ this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/parkXT', {id:this.outParkId}, res => {
+ if(res.code === 0){
+ this.getCode()
+ this.showFlag = false
+ }
})
},
noCarOut(){
@@ -139,7 +207,116 @@
}
},
- }
+ GetQueryString(name) {
+ var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+ var r = window.location.search.substr(1).match(reg);
+ if (r != null) return unescape(r[2]); return null;
+ },
+ /**
+ * 瑙ｆ瀽寰俊redirect_uri鍦板潃涓殑code
+ */
+ getCodeFromUrl (cur_url) {
+ let index = cur_url.split('?')[1]
+ let paramStr =index.split('&')[0];
+ let code =paramStr.split('=')[1];
+ return code
+ },
+ /**
+ * 瑙ｆ瀽寰俊redirect_uri鍦板潃涓殑code2
+ */
+ getCode2FromUrl (cur_url) {
+ let index = cur_url.split('?')[2]
+ let code2 =index.split('=')[1];
+ return code2
+ },
+
+ getCode(){
+ if(this.type == 0 ){
+ //寰俊锛岃幏鍙朿ode
+ if(this.code==null||this.code==""){
+ var url = encodeURIComponent("http://hesuancj.cn/#/indexTest?code2="+this.code2);
+ window.location.href ="https://open.weixin.qq.com/connect/oauth2/authorize?" +
+ "appid=wx46e756aed958f895&redirect_uri="+url+"&response_type=code" +
+ "&scope=snsapi_userinfo&state=STATE#wechat_redirect";
+ //"&scope=SCOPE&state=STATE#wechat_redirect";
+ }else{
+ this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/getOpenId', {id:this.outParkId,code:this.code}, res => {
+ if(res.code === 0){
+ var param = res.data;
+ // 鐐瑰嚮鏀粯鏃跺�欒皟鐢�
+ if (typeof WeixinJSBridge === 'undefined') {
+ if (document.addEventListener) {
+ document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(param), false)
+ } else if (document.attachEvent) {
+ document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(param))
+ document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(param))
+ }
+ } else {
+ this.onBridgeReady(param)
+ }
+
+ this.showFlag = false
+ }else {
+ alert('寰俊鏀粯璋冭捣澶辫触锛�')
+ }
+ })
+ }
+ }else if(this.type == 1){
+ //鏀粯瀹濓紝涓嶈幏鍙朿ode
+ this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/api/payByAli', {id:this.outParkId}, res => {
+ if(res.code != 0){
+ alert(res.data)
+ this.showFlag = false
+ }else {
+ this.$message({
+ message: '2绉掑悗鑷姩璺宠浆鍒版敮浠橀〉闈紝闃叉鍐呭缃戞暟鎹悓姝ュ欢杩燂紝璇风◢绛�',
+ type: 'success',
+ duration:2000,
+ });
+ setTimeout(function(){window.location.href = res.msg;},2000);
+ this.showFlag = false;
+ }
+ })
+
+ }
+ },
+ onBridgeReady (params) {
+ const that = this
+ WeixinJSBridge.invoke(
+ 'getBrandWCPayRequest',
+ {
+ appId: params.appId, // 鍏紬鍙峰悕绉帮紝鐢卞晢鎴蜂紶鍏�
+ timeStamp: params.timeStamp, // 鏀粯绛惧悕鏃堕棿鎴筹紝娉ㄦ剰寰俊jssdk涓殑鎵�鏈変娇鐢╰imestamp瀛楁鍧囦负灏忓啓銆備絾鏈�鏂扮増鐨勬敮浠樺悗鍙扮敓鎴愮鍚嶄娇鐢ㄧ殑timeStamp瀛楁鍚嶉渶澶у啓鍏朵腑鐨凷瀛楃
+ nonceStr: params.nonceStr, // 鏀粯绛惧悕闅忔満涓诧紝涓嶉暱浜� 32 浣�
+ package: params.package, // 缁熶竴鏀粯鎺ュ彛杩斿洖鐨刾repay_id鍙傛暟鍊硷紝鎻愪氦鏍煎紡濡傦細prepay_id=\*\*\*锛�
+ signType: params.signType, // 绛惧悕鏂瑰紡锛岄粯璁や负'SHA1'锛屼娇鐢ㄦ柊鐗堟敮浠橀渶浼犲叆'MD5'
+ paySign: params.paySign // 鏀粯绛惧悕
+ },
+ (res) => {
+ if (res.err_msg === 'get_brand_wcpay_request:ok') {
+ that.queryOrder() // 杩欓噷鏄煡璇㈣鍗曟槸鍚︽敮浠樺畬鎴愶紝鐒跺悗鎵ц鎴愬姛鍜屽け璐ョ殑涓氬姟閫昏緫
+ } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
+ alert('鏀粯澶辫触锛�')
+ } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
+ alert('鏀粯鍙栨秷锛�')
+ }
+ }
+ )
+ },
+ queryOrder() {
+ this.$byutil.postData(this, this.$systemconfig.basePath + '/ffzf/outpark/getById', {id: this.outParkId}, res => {
+ if (res.code == 0) {
+ let outpark = res.data
+ if(outpark.status == 1){
+ window.location.href = "http://hesuancj.cn/#/indexOk?code2="+this.code2
+ }else {
+ window.location.href = "http://hesuancj.cn/#/indexFail?code2="+this.code2
+ }
+ }
+ })
+ }
+ }
+
}
</script>
@@ -147,12 +324,57 @@
<style lang="scss">
.weizhang-main-bootom{
- .el-input__inner{
- border:none;
+ .el-input__inner{
+ border:none;
+ }
+ .el-form-item__label{
+ color: #000;
+ font-weight: 600;
+ }
}
- .el-form-item__label{
- color: #999999;
+ .weizhang-footer-box{
+ .el-form-item__content{
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ }
+ .el-button--small{
+ padding: 11px 15px;
+ font-size: 0.347rem /* 26/75 */;
+ }
}
+ .dialog-box{
+ .el-dialog{
+ bottom: 0;
+ position: fixed;
+ left: 0;
+ margin: 0;
+ }
+ .el-dialog__body{
+ padding: 2.67vw /* 20/7.5 */ 5.33vw /* 40/7.5 */;
+ }
+ .el-dialog__header{
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 1.87vw /* 14/7.5 */;
+ background: rgba(103,201,122,0.1);
+ }
+ .el-dialog__title{
+ font-size: 4vw /* 30/7.5 */;
+ }
+ .el-dialog__headerbtn{
+ top: 2.67vw /* 20/7.5 */;
+ }
+ .dialog-footer{
+ display: flex;
+ width: 100% !important;
+ .el-button{
+ width: 100%;
+ background: rgba(74,76,89,1);
+ }
+ }
}
</style>
@@ -166,23 +388,23 @@
height: 12.8vw /* 96/7.5 */;
align-items: center;
border-bottom:1px solid rgba(154,154,154,0.2);
- .text{
- flex: 1;
- text-align: center;
- h1{
- font-size: 2.699vh /* 36/13.34 */;
- }
- }
- .right{
- width: 6.747vh /* 90/13.34 */;
- }
- .leftjiantou{
- font-size: 5.33vw;
- width: 6.747vh /* 90/13.34 */;
- display: flex;
- justify-content: center;
- align-items: center;
- }
+ .text{
+ flex: 1;
+ text-align: center;
+ h1{
+ font-size: 2.699vh /* 36/13.34 */;
+ }
+ }
+ .right{
+ width: 6.747vh /* 90/13.34 */;
+ }
+ .leftjiantou{
+ font-size: 5.33vw;
+ width: 6.747vh /* 90/13.34 */;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
}
.weizhang-main-box{
width: 100%;
@@ -196,38 +418,95 @@
flex-direction: column;
justify-content: center;
align-items: center;
- .money{
- font-size: 6.93vw /* 52/7.5 */;
- font-weight: 550;
- }
- .weizhang{
- font-size: 4.8vw /* 36/7.5 */;
- margin-top:1.33vw /* 10/7.5 */;
- }
+ border-bottom: 1px solid #f0f0f0;
+ .money{
+ font-size: 6.93vw /* 52/7.5 */;
+ font-weight: 550;
+ color: #000;
+ }
+ .weizhang{
+ font-size: 0.4rem /* 30/75 */;
+ line-height: 2;
+ font-weight: normal;
+ margin-top:1.33vw /* 10/7.5 */;
+ color: #000;
+ }
}
.weizhang-main-form{
}
.weizhang-tiaokuan{
margin-top: 2.67vw /* 20/7.5 */;
- h1{
- font-size:3.2vw /* 24/7.5 */;
- color: #999999;
- text-indent: 2.5em;
- line-height: 2;
- }
+ h1{
+ font-size:3.2vw /* 24/7.5 */;
+ color: #999999;
+ text-indent: 2.5em;
+ line-height: 2;
+ }
}
.jiaofei-btn{
- width: 64.53vw /* 484/7.5 */;
+ width: 80%;
border-radius: 5.33vw /* 40/7.5 */;
background-image: linear-gradient(to right,#33b1fe,#0679dc);
}
.logoPhone{
margin-top: 0.67vw;
- width: 20vw /* 180/7.5 */;
- height: 20vw /* 180/7.5 */;
+ width: 1.333rem /* 100/75 */;
+ height: 1.333rem /* 100/75 */;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
margin-bottom: 10px;
}
+ .weizhang-main-bootom{
+ margin-top: 0.333rem /* 25/75 */;
+ }
+ .dialog-main-box{
+ .dialog-main-line{
+ display: flex;
+ justify-content: space-between;
+ h1{
+ font-size: 3.2vw /* 24/7.5 */;
+ color: rgba(0,0,0,0.9);
+ line-height: 2;
+ }
+ }
+ .dialog-main-line-middle{
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ padding: 2.67vw /* 20/7.5 */ 0;
+ h1{
+ font-size: 8vw /* 60/7.5 */;
+ line-height: 2;
+ color: rgba(0,0,0,1);
+ font{
+ font-size: 3.73vw /* 28/7.5 */;
+ margin-left: 0.67vw /* 5/7.5 */;
+ }
+ }
+ }
+ .wx-img-box{
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ .wx-img-l{
+ display: flex;
+ img{
+ width: 5.33vw /* 40/7.5 */;
+ object-fit: contain;
+ }
+ h1{
+ font-size: 3.47vw /* 26/7.5 */;
+ margin-left: 1.33vw /* 10/7.5 */;
+ }
+ }
+ .wx-img-r{
+ width: 4vw /* 30/7.5 */;
+ height: 4vw /* 30/7.5 */;
+ img{
+ width: 100%;
+ }
+ }
+ }
+ }
</style>
--
Gitblit v1.9.1