包月微信支付

common/apiurl.js

@@ -115,8 +115,10 @@ const apiurl = {
   wechatPayUrl: '/client/pay/wechat',
   // 停车场微信支付
   parkingWechatPayUrl: '/client/payment/parking/wechat',
-	// 获取参数
-	getParamsUrl: '/admin/config/configKey/'
+  // 获取参数
+  getParamsUrl: '/admin/config/configKey/',
+  // 微信包月支付
+  wechatMonthlyPayUrl: '/client/'
 };
 
 export { apiurl };

common/http.api.js

@@ -109,6 +109,7 @@ const install = (Vue, vm) => {
   let wechatPayApi = (params = {}) => vm.$u.post(apiurl.wechatPayUrl, params);
   let parkingWechatPayApi = (params = {}) => vm.$u.post(apiurl.parkingWechatPayUrl, params);
   let getParamsApi = (params = {}) => vm.$u.get(apiurl.getParamsUrl + params.key);
+  let wechatMonthlyPayapi = (params = {}) => vm.$u.post(apiurl.wechatMonthlyPayUrl, params);
 
   // 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
   vm.$u.api = {
@@ -166,7 +167,8 @@ const install = (Vue, vm) => {
     getDictApi,
     wechatPayApi,
     parkingWechatPayApi,
-		getParamsApi
+    getParamsApi,
+    wechatMonthlyPayapi
   };
 };
 

pages/handleMonthly/handleMonthly.scss

@@ -59,14 +59,14 @@
 		width: calc(100% - 60rpx);
 		margin: 52rpx auto;
 		button {
-			width: 100%;
-			height: 100rpx;
-			line-height: 100rpx;
-			background-color: #008CFF;
-			color: #fff;
-			font-size: 28rpx;
-			font-weight: 500;
-			border-radius: 10rpx;
+			// width: 100%;
+			// height: 100rpx;
+			// line-height: 100rpx;
+			// background-color: #008CFF;
+			// color: #fff;
+			// font-size: 28rpx;
+			// font-weight: 500;
+			// border-radius: 10rpx;
 		}
 	}
 }

pages/handleMonthly/handleMonthly.vue

@@ -1,486 +1,423 @@
 <template>
-	<view class="handle-monthly">
-		<view class="handle-monthly-item">
-			<view>车牌选择</view>
-			<view class="choose-license" @click="isShowCarLicense = true">
-				<view>{{form.carLicense.label}}</view>
-				<u-icon name="arrow-down" color="#7B7B7B" size="30"></u-icon>
-			</view>
-		</view>
-		<u-select v-model="isShowCarLicense" :list="carLicenseList" :default-value="carLicenseDefaultValue" @confirm="carLicenseListConfirm"></u-select>
-		<view class="handle-monthly-item">
-			<view>车辆信息</view>
-			<view>{{form.carLicense.value | verifyStatusFilter}}</view>
-		</view>
-		<view class="handle-monthly-item">
-			<view>包月金额</view>
-			<view class="handle-monthly-money">{{form.monthAmount}}元</view>
-		</view>
-		<view class="handle-monthly-item">
-			<view>包月时长</view>
-			<view class="handle-monthly-time-long">
-				<button @click="reduceMonthNum()">-</button>
-				<view>{{form.month}}个月</view>
-				<button @click="addMonthNum()">+</button>
-			</view>
-		</view>
-		<view class="handle-monthly-item">
-			<view>有效期限</view>
-			<view>{{dateRange}}</view>
-		</view>
-		<view class="handle-monthly-explain">
-			<!-- <view>包月说明</view>
-			<view>1、停车不足15分钟，免费；</view>
-			<view>2、停车 超过20分钟，按2元/小时收费；</view>
-			<view>3、月卡会员在有效期内停车免费</view> -->
-			<u-parse :html="monthlyContent"></u-parse>
-		</view>
-		<view class="handle-monthly-confirm-button">
-			<button type="default"@click="submit(roadNo)">确认包月</button>
-		</view>
-		<u-modal
-			v-model="payWayPop"
-			:title-style="{color: '#404040'}"
-			title="缴费方式"
-			:show-confirm-button="false"
-			:show-cancel-button="false">
-				<view class="slot-content">
-					<!-- <view class="pay-way">
-						<view class="pay-way-item" @click="gyBankPay">
-							<image src="../../static/img/gy-bank-pay-icon.png" mode=""></image>
-							<view>贵州银行</view>
-						</view>
-						<view class="pay-way-item" @click="wechatPay">
-							<image src="../../static/img/wechat-pay-icon.png" mode=""></image>
-							<view>微信支付</view>
-						</view>
-					</view> -->
-				<view class="pay-way-new">
-					<view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
-						<image src="../../static/img/guiyang-bank-icon.png" mode=""></image>
-						<view class="title">贵州银行</view>
-					</view>
-					<view class="pay-way-item pay-way-item-jh" @click="juhePay">
-						<image src="../../static/img/juhe-icon.png" mode=""></image>
-						<view class="title">聚合支付</view>
-					</view>
-				</view>
-				<view class="pay-way-subtitle">
-					<view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
-					<view class="pay-way-subtitle-item">&nbsp;</view>
-				</view>
-				<button class="pay-way-close-btn" @click="payWayPop = false">关闭</button>
-			</view>
-		</u-modal>
-		<u-toast ref="uToast" />
-	</view>
+  <view class="handle-monthly">
+    <view class="handle-monthly-item">
+      <view>车牌选择</view>
+      <view class="choose-license" @click="isShowCarLicense = true">
+        <view>{{ form.carLicense.label || '未选车牌' }}</view>
+        <u-icon name="arrow-down" color="#7B7B7B" size="30"></u-icon>
+      </view>
+    </view>
+    <u-select v-model="isShowCarLicense" :list="carLicenseList" :default-value="carLicenseDefaultValue" @confirm="carLicenseListConfirm"></u-select>
+    <view class="handle-monthly-item">
+      <view>车辆信息</view>
+      <view>{{ form.carLicense.value | verifyStatusFilter }}</view>
+    </view>
+    <view class="handle-monthly-item">
+      <view>包月金额</view>
+      <view class="handle-monthly-money">{{ form.monthAmount || 0 }}元</view>
+    </view>
+    <view class="handle-monthly-item">
+      <view>包月时长</view>
+      <view class="handle-monthly-time-long">
+        <button @click="reduceMonthNum()">-</button>
+        <view>{{ form.month || 0 }}个月</view>
+        <button @click="addMonthNum()">+</button>
+      </view>
+    </view>
+    <view class="handle-monthly-item">
+      <view>有效期限</view>
+      <view>{{ dateRange || '-' }}</view>
+    </view>
+    <view class="handle-monthly-explain">
+      <u-parse :html="monthlyContent"></u-parse>
+    </view>
+    <view class="handle-monthly-confirm-button">
+      <template v-if="carLicenseList.length && form.carLicense && form.carLicense.label">
+        <u-button type="primary" :loading="loading" @click="submit(roadNo)">确认包月</u-button>
+      </template>
+      <template v-else>
+        <u-button>未选车牌</u-button>
+      </template>
+    </view>
+    <u-modal v-model="payWayPop" :title-style="{ color: '#404040' }" title="缴费方式" :show-confirm-button="false" :show-cancel-button="false">
+      <view class="slot-content">
+        <view class="pay-way-new">
+          <!-- <view class="pay-way-item pay-way-item-hy" @click="gyBankPay">
+            <image src="../../static/img/guiyang-bank-icon.png" mode=""></image>
+            <view class="title">贵州银行</view>
+          </view>
+          <view class="pay-way-item pay-way-item-jh" @click="juhePay">
+            <image src="../../static/img/juhe-icon.png" mode=""></image>
+            <view class="title">聚合支付</view>
+          </view> -->
+          <view class="pay-way-item pay-way-item-hy" @click="$u.debounce(gyBankPay, 1000, (immediate = true))">
+            <image src="/static/img/gyyh-icon.svg" mode=""></image>
+            <view class="title">贵州银行</view>
+          </view>
+          <!-- #ifdef H5 || MP-WEIXIN -->
+          <!-- <view class="pay-way-item pay-way-item-wx" @click="$u.debounce(wechatPay, 1000, (immediate = true))" v-if="wxEnv">
+            <image src="/static/img/weixin-icon.svg" mode=""></image>
+            <view class="title">微信支付</view>
+          </view> -->
+          <!-- #endif -->
+          <view class="pay-way-item pay-way-item-jh" @click="$u.debounce(juhePay, 1000, (immediate = true))">
+            <image src="/static/img/juhe-icon.svg" mode=""></image>
+            <view class="title">聚合支付</view>
+          </view>
+        </view>
+        <view class="pay-way-subtitle">
+          <view class="pay-way-subtitle-item">前三个月每天首次一分钱，长期八折优惠</view>
+          <!-- #ifdef H5 || MP-WEIXIN -->
+          <!-- <view class="pay-way-subtitle-item" v-if="wxEnv">&nbsp;</view> -->
+          <!-- #endif -->
+          <view class="pay-way-subtitle-item">&nbsp;</view>
+        </view>
+        <button class="pay-way-close-btn" @click="payWayPop = false">关闭</button>
+      </view>
+    </u-modal>
+    <u-toast ref="uToast" />
+  </view>
 </template>
 
 <script>
-	import getUrlParams from "../../utils/getUrlParams.js";
-	import {
-		getEnvIsWx
-	} from '@/utils/judgEnvironment.js';
-	import $wxPay from '@/utils/wxPay.js'
-	import {
-		monthlyWxPay
-	} from '@/common/http.api.js'
-	export default {
-		data() {
-			return {
-				startTime:'',
-				endTime:'',
-				payUrl:'',
-				monthId: '',
-				vehicleNo:'',
-				monthEndTime:'',
-				monthStartTime:'',
-				lastActiveDate:null,
-				roadNo:null,
-				carLicenseList: [],
-				isShowCarLicense: false,
-				form: {
-					energyType:[],
-					monthAmount: [],
-					carLicense: {},
-					month: 1,
-					dateRange:""
-				},
-				label:"",
-				payWayPop: false,
-				jumpUrl: undefined,
-				monthlyContent: '',
-				carLicenseDefaultValue: [0],
-				wxEnv: false
-			}
-		},
-		onLoad(page) {
-			this.wxEnv = getEnvIsWx();
-			this.getSysterms(0)
-			if (page.vehicleNo && page.vehicleNo) {
-				this.roadNo = page.roadNo;
-				this.vehicleNo = page.vehicleNo
-				this.getMonthInfo(this.roadNo, this.vehicleNo);
-			} else if (page.roadNo) {
-				this.roadNo = page.roadNo;
-				this.getMonthInfo(this.roadNo);
-			}
-			const baseUrl = window.location.href.split('#')[0]
-			let jumpUrl = baseUrl + '#/pages/center/monthly/monthly'
-			this.jumpUrl = jumpUrl
-		},
-		mounted(){
-			// console.log(this.lastActiveDate)
-			// this.form.dateRange=this.getMonthRange(new Date(this.lastActiveDate),1)
-		},
-		methods: {
-			/**
-			  * 获取几个月的日期范围
-			  * {date} Date 起始日期,往后推一天
-			  * {monthNum} Number  往后月数 
-			  * */
-			getMonthRange (date, monthNum) {
-				let Date1 = this.lastActiveDate;
-				// Date1 = Date1.valueOf() + 24 * 60 * 60 * 1000
-				Date1 = new Date(Date1)
-				const year = Date1.getFullYear()
-				const month = Date1.getMonth()+1
-				const day = Date1.getDate()
-				const hours = Date1.getHours();
-				const minutes = Date1.getMinutes();
-				const seconds = Date1.getSeconds();
-				let days = new Date(year, month, 0)
-				days = days.getDate() //获取当前日期中的月的天数
-				let year2 = year;
-				let month2 = parseInt(month) + parseInt(monthNum)
-				if (month2 > 12) {
-					year2 = parseInt(year2) + parseInt((parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12))
-					month2 = parseInt(month2) % 12;
-				}
-				let day2 = day;
-				let days2 = new Date(year2, month2, 0)
-				days2 = days2.getDate()
-				if (day2 > days2) {
-					day2 = days2
-				}
-				if (month2 < 10) {
-					month2 = '0' + month2;
-				}
-				const t1 = year + '.' + (month > 9 ? month : '0' + month) + '.' + (day > 9 ? day : '0' + day)
-				const t2 = year2 + '.' + month2 + '.' + (day2 > 9 ? day2 : '0' + day2)
-				this.startTime=t1
-				this.endTime=t2
-				this.monthStartTime=year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + ' ' + hours + ':' + minutes + ':' +seconds
-				this.monthEndTime=year2 + '-' + month2 + '-' + day2 + ' ' + hours + ':' + minutes + ':' +seconds
-				return t1 + '-' + t2
-			},
-			/**
-			 * 月操作 减1
-			  * */
-			reduceMonthNum () {
-				if (this.form.month > 1) {
-					this.form.month -= 1
-					this.form.dateRange = this.getMonthRange(new Date, this.form.month)
-				}
-			},
-			/**
-			 * 月操作 加1
-			  * */
-			addMonthNum () {
-				if(this.form.month >=24){
-					this.$refs.uToast.show({
-						title: '最多24月',
-						type: 'warning',
-					})
-					return 
-				}
-				this.form.month += 1
-				
-				this.form.dateRange = this.getMonthRange(new Date, this.form.month)
-			},
-			carLicenseListConfirm (item) {
-				this.form.carLicense = item[0]
-				this.vehicleNo = item[0].label
-				this.getMonthInfo(this.roadNo, this.vehicleNo)
-			},
-			getMonthInfo(roadNo, vehicleNo){
-				this.$u.api.monthInfo({roadNo: roadNo, vehicleNo: vehicleNo})
-				.then(res => {
-					if (res.code === 200){
-						this.lastActiveDate = res.data.lastActiveDate;
-						this.form.monthAmount=res.data.monthAmount;
-						this.carLicenseList = [];
-						let vehicleNoItem = null
-						res.data.vehicleList.forEach((item, index) => {
-							const obj = {
-								value: item.energyType,
-								label: item.vehicleNo,
-								energyType:item.energyType
-							}
-							if (this.vehicleNo == item.vehicleNo) {
-								vehicleNoItem = obj
-								this.carLicenseDefaultValue = [index]
-							}
-							this.carLicenseList.push(obj)
-						});
-						// 判断是否url存在车牌号,存在则选中项默认选中
-						if (vehicleNoItem) {
-							this.form.carLicense = vehicleNoItem
-						} else {
-							this.form.carLicense = this.carLicenseList[0]
-						}
-					}
-					
-				})
-			},
-			submit(roadNo){
-				this.$u.api.createMonth({
-					roadNo:this.roadNo,
-					vehicleNo:this.form.carLicense.label,
-					energyType:this.form.carLicense.energyType,
-					monthStartTime:this.monthStartTime,
-					monthEndTime:this.monthEndTime,
-					monthCount:this.form.month})
-					.then(res => {
-						console.log("createMonth",res)
-						if(res.code === 200){
-							this.monthId = res.data.monthId
-							console.log(this.monthId)
-							this.payWayPop = true
-						}else{
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'error',
-							});
-						}
-					}).catch(err=>{
-						this.$refs.uToast.show({
-							title: '程序错误!',
-							type: 'error',
-						});
-					});
-			},
-			gyBankPay() {
-				console.log(this.jumpUrl)
-				this.$u.api.monthPay({
-					monthId: this.monthId,
-					jumpUrl: this.jumpUrl
-				}).then(res => {
-					if(res.code === 200){
-						window.location.href = res.data.url
-					} else {
-						this.$refs.uToast.show({
-							title: res.msg,
-							type: 'error',
-						});
-					}
-				})
-			},
-			/**
-			 * 微信支付
-			 * 判断vuex中是否存在openId
-			 * 存在直接调起微信支付
-			 * 不存在则通过微信登录去获取用户的code
-			 * 完成后通过code去获取用户的openId等信息
-			 * 最后再调起微信支付
-			 * */
-			juhePay() {
-				// const openId = this.$store.state.vuex_wxinfo.openId
-				// if (openId) {
-				// 	this.getWXPay()
-				// } else {
-				// 	this.getCode()
-				// }
-				this.getWXPayByJava()
-			},
-			/**
-			 * 微信支付
-			 */
-			wechatPay() {
-				this.$u.api.wechatPayApi({
-					orderList: this.curOrderList,
-					openid: this.vuex_wxinfo.openId
-				}).then(res => {
-					if (res.code === 200) {
-						$wxPay.wexinPay(res.data.wx).then(res1 => {
-							switch (Number(res1.code)) {
-								case 0: // 成功
-									//#ifdef H5
-									window.location.reload();
-									//#endif
-									break;
-								case 1: // 取消
-									this.$refs.uToast.show({
-										title: '已取消支付',
-										type: 'info'
-									});
-									break;
-								case 2: // 支付失败
-									this.$refs.uToast.show({
-										title: '支付失败，请检查!',
-										type: 'error'
-									});
-									break;
-							}
-						})
-					}
-				})
-			},
-			/**
-			 * 调起微信支付接口
-			 * @param {Array} list 需要支付的订单组合数组
-			 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
-			 * */
-			async getWXPay(){
-				// 支付成功跳转到包月页面
-				let params = {
-					monthId: this.monthId,
-					openid: this.$store.state.vuex_wxinfo.openId
-				};
-				await this.$wxApi.config();
-				this.$pay.wechatPay(params, '/client/monthpay/wechat', this.jumpUrl).then(res =>{
-					switch (Number(res.code)) {
-						case 0: // 成功
-							//#ifdef H5
-							window.location.reload();
-							//#endif
-							break;
-						case 1: // 取消
-							this.$refs.uToast.show({
-								title: '已取消支付',
-								type: 'info',
-							});
-							break;
-						case 2: // 支付失败
-							this.$refs.uToast.show({
-								title: '支付失败，请检查!',
-								type: 'error',
-							});
-							break;
-					}
-				});
-			},
-			/**
-			 * 直接通过后台获取贵阳银行微信支付地址
-			 * @param {Array} list 需要支付的订单组合数组
-			 * @param {Number} deviceNo 设备编号(在停车锁部分需要)
-			 * */
-			getWXPayByJava(orderList, deviceNo) {
-				// 支付成功跳转到包月页面
-				let params = {
-					monthId: this.monthId,
-					openid: '',
-					jumpUrl: this.jumpUrl
-				};
-				this.$u.api.monthlyWxPay(params)
-					.then(res => {
-						if (res.code === 200) {
-							// if (getEnvIsWx()) {
-							// 	location.href = res.data.qrCodeUrl + '&jump_url=' + encodeURIComponent(this.jumpUrl)
-							// } else {
-							// 	location.href = res.data.qrCodeUrl
-							// }
-							localStorage.setItem('jumpUrl', this.jumpUrl)
-							location.href = res.data.qrCodeUrl
-						} else {
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'error',
-							});
-						}
-					})
-					.catch(err => {
-						this.$refs.uToast.show({
-							title: '无法调起微信支付!',
-							type: 'error',
-						});
-					})
-			},
-			/**
-			 * 获取code
-			 * 1 微信登录获取code
-			 * 2 url中截取
-			 * */
-			getCode () {
-				// 获取页面完整url
-				const local = window.location.href
-				// 获取url后面的参数
-				const locationLocaturl = window.location.search;
-				// 截取url中的code
-				this.code = getUrlParams(locationLocaturl, "code");
-				// 如果没有code，则去请求
-				if (this.code == null || this.code === '') {
-					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`
-				} else {
-					// 把code传给后台获取用户信息
-					this.handleGetWXInfo(this.code)
-				}
-			},
-			/**
-			 * 通过code获取openId等用户信息
-			 * 拿到用户信息后再调起微信支付
-			 * */
-			handleGetWXInfo (code) {
-				let _this = this
-				this.$u.api.getWXInfo(code).then((res) => {
-					if (res.code === 200 ) {
-						this.$u.vuex('vuex_wxinfo', res.data);
-						this.getWXPay(this.currentItem)
-					}
-				}).catch((err) => {
-					this.$refs.uToast.show({
-						title: err.msg,
-						type: 'error',
-					});
-				})
-			},
-			/**
-			 * 获取包月说明
-			 * */
-			getSysterms(termsType) {
-				this.$u.api.getSysterms({
-						termsType: termsType
-					})
-					.then(res => {
-						if (res.code === 200) {
-							this.monthlyContent = res.data?.content
-						} else {
-							this.$refs.uToast.show({
-								title: res.msg,
-								type: 'error',
-							})
-						}
-					})
-					.catch(err => {
-						this.$refs.uToast.show({
-							title: '系统错误!',
-							type: 'error',
-						})
-					})
-			}
-		},
-		computed:{
-			dateRange:function(){
-				return this.getMonthRange(this.lastActiveDate,this.form.month)
-			},
-		},
-		filters:{
-			verifyStatusFilter(value) {
-				if (value === 0) {
-				  return '';
-				} else if(value === 1){
-					return '汽油车';				
-				} else if(value === 2){
-					return '新能源';				
-				} else {
-				  return '';
-				}
-			},
-		}
-	}
+import { getEnvIsWx } from '@/utils/judgEnvironment.js';
+import $wxPay from '@/utils/wxPay.js';
+export default {
+  data() {
+    return {
+      startTime: '',
+      endTime: '',
+      payUrl: '',
+      monthId: '',
+      vehicleNo: '',
+      monthEndTime: '',
+      monthStartTime: '',
+      lastActiveDate: null,
+      roadNo: null,
+      carLicenseList: [],
+      isShowCarLicense: false,
+      form: {
+        energyType: [],
+        monthAmount: 0,
+        carLicense: {},
+        month: 1,
+        dateRange: ''
+      },
+      label: '',
+      payWayPop: false,
+      jumpUrl: undefined,
+      monthlyContent: '',
+      carLicenseDefaultValue: [0],
+      wxEnv: false,
+      loading: false
+    };
+  },
+  onLoad(page) {
+    this.wxEnv = getEnvIsWx();
+    this.getSysterms(0);
+    if (page.vehicleNo && page.vehicleNo) {
+      this.roadNo = page.roadNo;
+      this.vehicleNo = page.vehicleNo;
+      this.getMonthInfo(this.roadNo, this.vehicleNo);
+    } else if (page.roadNo) {
+      this.roadNo = page.roadNo;
+      this.getMonthInfo(this.roadNo);
+    }
+    const baseUrl = window.location.href.split('#')[0];
+    let jumpUrl = baseUrl + '#/pages/center/monthly/monthly';
+    this.jumpUrl = jumpUrl;
+  },
+  methods: {
+    /**
+     * 获取几个月的日期范围
+     * {date} Date 起始日期,往后推一天
+     * {monthNum} Number  往后月数
+     * */
+    getMonthRange(date, monthNum) {
+      let Date1 = this.lastActiveDate;
+      Date1 = new Date(Date1);
+      const year = Date1.getFullYear();
+      const month = Date1.getMonth() + 1;
+      const day = Date1.getDate();
+      const hours = Date1.getHours();
+      const minutes = Date1.getMinutes();
+      const seconds = Date1.getSeconds();
+      let days = new Date(year, month, 0);
+      days = days.getDate(); //获取当前日期中的月的天数
+      let year2 = year;
+      let month2 = parseInt(month) + parseInt(monthNum);
+      if (month2 > 12) {
+        year2 = parseInt(year2) + parseInt(parseInt(month2) / 12 == 0 ? 1 : parseInt(month2) / 12);
+        month2 = parseInt(month2) % 12;
+      }
+      let day2 = day;
+      let days2 = new Date(year2, month2, 0);
+      days2 = days2.getDate();
+      if (day2 > days2) {
+        day2 = days2;
+      }
+      if (month2 < 10) {
+        month2 = '0' + month2;
+      }
+      const t1 = year + '.' + (month > 9 ? month : '0' + month) + '.' + (day > 9 ? day : '0' + day);
+      const t2 = year2 + '.' + month2 + '.' + (day2 > 9 ? day2 : '0' + day2);
+      this.startTime = t1;
+      this.endTime = t2;
+      this.monthStartTime =
+        year + '-' + (month > 9 ? month : '0' + month) + '-' + (day > 9 ? day : '0' + day) + ' ' + hours + ':' + minutes + ':' + seconds;
+      this.monthEndTime = year2 + '-' + month2 + '-' + day2 + ' ' + hours + ':' + minutes + ':' + seconds;
+      return t1 + '-' + t2;
+    },
+    /**
+     * 月操作 减1
+     * */
+    reduceMonthNum() {
+      if (this.form.month > 1) {
+        this.form.month -= 1;
+        this.form.dateRange = this.getMonthRange(new Date(), this.form.month);
+      }
+    },
+    /**
+     * 月操作 加1
+     * */
+    addMonthNum() {
+      if (this.form.month >= 24) {
+        this.$refs.uToast.show({
+          title: '最多24月',
+          type: 'warning'
+        });
+        return;
+      }
+      this.form.month += 1;
+      this.form.dateRange = this.getMonthRange(new Date(), this.form.month);
+    },
+    carLicenseListConfirm(item) {
+      this.form.carLicense = item[0];
+      this.vehicleNo = item[0].label;
+      this.getMonthInfo(this.roadNo, this.vehicleNo);
+    },
+    /**
+     * 获取包月信息
+     * @date 2022-10-09
+     * @param {any} roadNo
+     * @param {any} vehicleNo
+     * @returns {any}
+     */
+    getMonthInfo(roadNo, vehicleNo) {
+      this.$u.api
+        .monthInfo({
+          roadNo: roadNo,
+          vehicleNo: vehicleNo
+        })
+        .then((res) => {
+          if (res.code === 200 && res.data.vehicleList && res.data.vehicleList.length) {
+            this.lastActiveDate = res.data.lastActiveDate;
+            this.form.monthAmount = res.data.monthAmount;
+            this.carLicenseList = [];
+            let vehicleNoItem = null;
+            res.data.vehicleList.forEach((item, index) => {
+              const obj = {
+                value: item.energyType,
+                label: item.vehicleNo,
+                energyType: item.energyType
+              };
+              if (this.vehicleNo == item.vehicleNo) {
+                vehicleNoItem = obj;
+                this.carLicenseDefaultValue = [index];
+              }
+              this.carLicenseList.push(obj);
+            });
+            // 判断是否url存在车牌号,存在则选中项默认选中
+            if (vehicleNoItem) {
+              this.form.carLicense = vehicleNoItem;
+            } else {
+              this.form.carLicense = this.carLicenseList[0];
+            }
+          }
+        });
+    },
+    /**
+     * 提交包月信息
+     * @date 2022-10-09
+     * @param {any} roadNo
+     * @returns {any}
+     */
+    submit(roadNo) {
+      this.loading = true;
+      this.$u.api
+        .createMonth({
+          roadNo,
+          vehicleNo: this.form.carLicense.label,
+          energyType: this.form.carLicense.energyType,
+          monthStartTime: this.monthStartTime,
+          monthEndTime: this.monthEndTime,
+          monthCount: this.form.month
+        })
+        .then((res) => {
+          console.log('createMonth', res);
+          if (res.code === 200) {
+            this.monthId = res.data.monthId;
+            console.log(this.monthId);
+            this.payWayPop = true;
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+          }
+          this.loading = false;
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: '程序错误!',
+            type: 'error'
+          });
+          this.loading = false;
+        });
+    },
+    /**
+     * 贵州银行包月支付
+     * @date 2022-10-09
+     * @returns {any}
+     */
+    gyBankPay() {
+      this.$u.api
+        .monthPay({
+          monthId: this.monthId,
+          jumpUrl: this.jumpUrl
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            window.location.href = res.data.url;
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+          }
+        });
+    },
+    /**
+     * 聚合支付直接通过后台获取贵阳银行微信支付地址
+     * @date 2022-10-09
+     * @returns {any}
+     */
+    juhePay() {
+      // 支付成功跳转到包月页面
+      let params = {
+        monthId: this.monthId,
+        openid: '',
+        jumpUrl: this.jumpUrl
+      };
+      this.$u.api
+        .monthlyWxPay(params)
+        .then((res) => {
+          if (res.code === 200) {
+            localStorage.setItem('jumpUrl', this.jumpUrl);
+            location.href = res.data.qrCodeUrl;
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: '无法调起微信支付!',
+            type: 'error'
+          });
+        });
+    },
+    /**
+     * 微信支付
+     * @date 2022-10-09
+     * @returns {any}
+     */
+    wechatPay() {
+      this.$u.api
+        .wechatMonthlyPayapi({
+          orderList: this.curOrderList,
+          openid: this.vuex_wxinfo.openId
+        })
+        .then((r) => {
+          if (r.code === 200) {
+            $wxPay.wexinPay(r.data.wx).then((res) => {
+              switch (Number(res.code)) {
+                case 0: // 成功
+                  //#ifdef H5
+                  // window.location.reload();
+                  location.href = this.jumpUrl;
+                  //#endif
+                  break;
+                case 1: // 取消
+                  this.$refs.uToast.show({
+                    title: '已取消支付',
+                    type: 'info'
+                  });
+                  break;
+                case 2: // 支付失败
+                  this.$refs.uToast.show({
+                    title: '支付失败，请检查!',
+                    type: 'error'
+                  });
+                  break;
+              }
+            });
+          }
+        });
+    },
+    /**
+     * 获取包月说明
+     * @date 2022-10-09
+     * @param {any} termsType
+     * @returns {any}
+     */
+    getSysterms(termsType) {
+      this.$u.api
+        .getSysterms({
+          termsType: termsType
+        })
+        .then((res) => {
+          if (res.code === 200) {
+            this.monthlyContent = res.data?.content;
+          } else {
+            this.$refs.uToast.show({
+              title: res.msg,
+              type: 'error'
+            });
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: '系统错误!',
+            type: 'error'
+          });
+        });
+    }
+  },
+  computed: {
+    dateRange: function () {
+      return this.getMonthRange(this.lastActiveDate, this.form.month);
+    }
+  },
+  filters: {
+    verifyStatusFilter(value) {
+      if (value === 0) {
+        return '-';
+      } else if (value === 1) {
+        return '汽油车';
+      } else if (value === 2) {
+        return '新能源';
+      } else {
+        return '-';
+      }
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
 @import './handleMonthly.scss';
-@import '../paymentMethod/paymentMethod.scss'
+@import '../paymentMethod/paymentMethod.scss';
 </style>

pages/searchparking/searchparking.vue

@@ -1,167 +1,224 @@
 <template>
-	<view>
-		<u-navbar title="我的停车" title-color="#fff" :custom-back="customBack" :border-bottom="false"
-			back-icon-color="#CCE8FF" :background="{background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }">
-		</u-navbar>
-		<view class="tab-fixed">
-			<u-tabs-swiper activeColor="#008CFF" ref="tabs" :list="tabList" :current="tabCurrent" @change="tabChange"
-				:is-scroll="false" swiperWidth="100%"></u-tabs-swiper>
-		</view>
-		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
-			height="calc(100vh - 84px)" top="50rpx">
-			<view class="parkinglist">
-				<view class="parkinglist-item" v-for="(item,index) in parkinglist" :key="item.id"
-					@click="navigation(item.latitude, item.longitude)">
-					<view class="up u-flex u-row-between">
-						<view class="vehicle-no">{{item.vehicleNo}}</view>
-						<view class="space-name">{{item.spaceName}}</view>
-					</view>
-					<view class="down u-flex u-row-left">
-						<u-icon name="map-fill" color="#008CFF" size="28"></u-icon>
-						<view class="road-name" v-if="tabCurrentItem.value === 'park'">{{item.parkingName}}</view>
-						<view class="road-name" v-else>{{item.roadName}}</view>
-					</view>
-				</view>
-			</view>
-		</mescroll-body>
-		<u-toast ref="uToast" />
-	</view>
+  <view>
+    <u-navbar
+      title="我的停车"
+      title-color="#fff"
+      :custom-back="customBack"
+      :border-bottom="false"
+      back-icon-color="#CCE8FF"
+      :background="{ background: 'linear-gradient(145deg, #41AFF9 0%, #2D8CFB 100%)' }"
+    >
+    </u-navbar>
+    <!-- <view class="tab-fixed">
+      <u-tabs-swiper
+        activeColor="#008CFF"
+        ref="tabs"
+        :list="tabList"
+        :current="tabCurrent"
+        @change="tabChange"
+        :is-scroll="false"
+        swiperWidth="100%"
+      ></u-tabs-swiper>
+    </view> -->
+    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" height="calc(100vh - 84px)" top="50rpx">
+      <view class="parkinglist">
+        <view class="parkinglist-item" v-for="(item, index) in parkinglist" :key="index" @click="navigation(item.latitude, item.longitude)">
+          <view class="up u-flex u-row-between">
+            <view class="vehicle-no">{{ item.vehicleNo || '-' }}</view>
+            <view class="space-name">{{ item.spaceName || '-' }}</view>
+          </view>
+          <view class="down u-flex u-row-left">
+            <u-icon name="map-fill" color="#008CFF" size="28"></u-icon>
+            <view class="road-name" v-if="tabCurrentItem.value === 'park'">{{ item.parkingName || '-' }}</view>
+            <view class="road-name" v-else>{{ item.roadName || '-' }}</view>
+          </view>
+        </view>
+      </view>
+    </mescroll-body>
+    <u-toast ref="uToast" />
+  </view>
 </template>
 
 <script>
-	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
-	export default {
-		mixins: [MescrollMixin], // 使用mixin
-		data() {
-			return {
-				parkinglist: [],
-				tabCurrent: 0,
-				tabCurrentItem: {},
-				tabList: [{
-						name: '路段',
-						value: 'road'
-					},
-					{
-						name: '停车场',
-						value: 'park'
-					}
-				]
-			}
-		},
-		onLoad() {
-			this.tabCurrentItem = this.tabList[this.tabCurrent]
-		},
-		onShow() {
+import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
+export default {
+  mixins: [MescrollMixin], // 使用mixin
+  data() {
+    return {
+      parkinglist: [],
+      tabCurrent: 0,
+      tabCurrentItem: {},
+      tabList: [
+        { name: '路段', value: 'road' },
+        { name: '停车场', value: 'park' }
+      ],
+      // 当前位置信息
+      currentPosition: {
+        latitude: '',
+        longitude: ''
+      }
+    };
+  },
+  onLoad() {
+    this.tabCurrentItem = this.tabList[this.tabCurrent];
+    // this.getLocation();
+  },
+  onShow() {},
+  methods: {
+    /**
+     * 获取当前位置信息
+     * @date 2022-10-09
+     * @returns {any}
+     */
+    getLocation() {
+      const that = this;
+      if (navigator.geolocation) {
+        // 判断是否有这个对象
+        navigator.geolocation.getCurrentPosition(function (pos) {
+          console.log('经度：' + pos.coords.longitude + '纬度：' + pos.coords.latitude);
+          that.currentPosition.latitude = pos.coords.latitude;
+          that.currentPosition.longitude = pos.coords.longitude;
+        });
+      } else {
+        uni.getLocation({
+          type: 'gcj02',
+          success: function (res) {
+            console.log('当前位置的经度：' + res.longitude);
+            console.log('当前位置的纬度：' + res.latitude);
+            that.currentPosition.latitude = res.latitude;
+            that.currentPosition.longitude = res.longitude;
+          }
+        });
+      }
+    },
+    customBack() {
+      this.$u.route({
+        type: 'switchTab',
+        url: 'pages/index/index'
+      });
+    },
+    tabChange(cur) {
+      this.tabCurrent = cur;
+      this.tabCurrentItem = this.tabList[cur];
+      this.mescroll.resetUpScroll();
+    },
+    /**
+     * 导航
+     * */
+    navigation(lat, lon) {
+      uni.openLocation({
+        latitude: parseFloat(lat),
+        longitude: parseFloat(lon),
+        scale: 18
+      });
+    },
+    // 多地图选择
+    /**
+     * 描述
+     * @date 2022-10-09
+     * @param {any} item
+     * @returns {any}
+     */
+    mapSelectConfirm(item) {
+      const name = item[0].label;
+      switch (name) {
+        case '腾讯地图':
+          location.href = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=${this.currentPosition.latitude},${this.currentPosition.longitude}&to=${this.currentPositionHover.areaName}&tocoord=${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&policy=1&referer=BOGBZ-2BZ33-O4L32-Y3QJR-PGN66-RFFEL`;
+          break;
+        case '百度地图':
+          location.href = `http://api.map.baidu.com/marker?location=
+			${this.currentPositionHover.latitude},${this.currentPositionHover.longitude}&title=目的地&content=${this.currentPositionHover.areaName}
+			&output=html&src=webapp.baidu.openAPIdemo`;
+          break;
+        case '高德地图':
+          location.href = `https://uri.amap.com/navigation?from=${this.currentPosition.longitude},${this.currentPosition.latitude},我的位置&to=${this.currentPositionHover.longitude},${this.currentPositionHover.latitude},${this.currentPositionHover.areaName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
+          break;
+      }
+    },
+    downCallback() {
+      this.mescroll.resetUpScroll();
+    },
+    upCallback(page) {
+      if (this.tabCurrentItem.value === 'park') {
+        this.getParkingLotParkingList(page);
+      } else {
+        this.getRoadParkingList(page);
+      }
+    },
+    /**
+     * 获取路段我的停车
+     */
+    getRoadParkingList({ num, size }) {
+      this.$u.api
+        .getOrderList({
+          orderStatus: 1,
+          pageNum: num,
+          pageSize: size
+        })
+        .then((res) => {
+          //设置列表数据
+          let curPageData = res.data.pageInfo.rows;
+          // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
+          let curPageLen = curPageData.length;
+          let totalPage = res.data.pageInfo.pages;
 
-		},
-		methods: {
-			customBack() {
-				this.$u.route({
-					type: 'switchTab',
-					url: 'pages/index/index'
-				});
-			},
-			tabChange(cur) {
-				this.tabCurrent = cur
-				this.tabCurrentItem = this.tabList[cur]
-				this.mescroll.resetUpScroll();
-			},
-			/**
-			 * 导航 
-			 * */
-			navigation(lat, lon) {
-				uni.openLocation({
-					latitude: parseFloat(lat),
-					longitude: parseFloat(lon),
-					scale: 18
-				})
-			},
-			downCallback() {
-				this.mescroll.resetUpScroll();
-			},
-			upCallback(page) {
-				if (this.tabCurrentItem.value === 'park') {
-					this.getParkingLotParkingList(page)
-				} else {
-					this.getRoadParkingList(page)
-				}
-			},
-			/**
-			 * 获取路段我的停车
-			 */
-			getRoadParkingList({
-				num,
-				size
-			}) {
-				this.$u.api.getOrderList({
-						orderStatus: 1,
-						pageNum: num,
-						pageSize: size
-					})
-					.then(res => {
-						//设置列表数据
-						let curPageData = res.data.pageInfo.rows;
-						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
-						let curPageLen = curPageData.length;
-						let totalPage = res.data.pageInfo.pages;
+          if (num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
+          this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据
 
-						if (num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
-						this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据
+          // 请求成功,隐藏加载状态
+          //后台接口有返回列表的总页数 totalPage
+          this.mescroll.endByPage(curPageLen, totalPage);
 
-						// 请求成功,隐藏加载状态
-						//后台接口有返回列表的总页数 totalPage
-						this.mescroll.endByPage(curPageLen, totalPage);
+          if (this.parkinglist.length <= 0) {
+            this.listEmpty = true;
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: err.msg,
+            type: 'error'
+          });
+          console.log('vehicleList ', err);
+        });
+    },
+    /**
+     * 获取停车场我的停车
+     */
+    getParkingLotParkingList({ num, size }) {
+      this.$u.api
+        .getRoomParkingApi({
+          orderStatus: 1,
+          pageNum: num,
+          pageSize: size
+        })
+        .then((res) => {
+          //设置列表数据
+          let curPageData = res.data.pageInfo.rows;
+          // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
+          let curPageLen = curPageData.length;
+          let totalPage = res.data.pageInfo.pages;
 
-						if (this.parkinglist.length <= 0) {
-							this.listEmpty = true
-						};
-					}).catch(err => {
-						this.$refs.uToast.show({
-							title: err.msg,
-							type: 'error',
-						});
-						console.log('vehicleList ', err)
-					});
-			},
-			/**
-			 * 获取停车场我的停车
-			 */
-			getParkingLotParkingList({
-				num,
-				size
-			}) {
-				this.$u.api.getRoomParkingApi({
-						orderStatus: 1,
-						pageNum: num,
-						pageSize: size
-					})
-					.then(res => {
-						//设置列表数据
-						let curPageData = res.data.pageInfo.rows;
-						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
-						let curPageLen = curPageData.length;
-						let totalPage = res.data.pageInfo.pages;
+          if (num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
+          this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据
+          // 请求成功,隐藏加载状态
+          //后台接口有返回列表的总页数 totalPage
+          this.mescroll.endByPage(curPageLen, totalPage);
 
-						if (num == 1) this.parkinglist = []; //如果是第一页需手动置空列表
-						this.parkinglist = this.parkinglist.concat(curPageData); //追加新数据
-						// 请求成功,隐藏加载状态
-						//后台接口有返回列表的总页数 totalPage
-						this.mescroll.endByPage(curPageLen, totalPage);
-
-						if (this.parkinglist.length <= 0) {
-							this.listEmpty = true
-						};
-					}).catch(err => {
-						this.$refs.uToast.show({
-							title: err.msg,
-							type: 'error',
-						});
-					});
-			}
-		}
-	}
+          if (this.parkinglist.length <= 0) {
+            this.listEmpty = true;
+          }
+        })
+        .catch((err) => {
+          this.$refs.uToast.show({
+            title: err.msg,
+            type: 'error'
+          });
+        });
+    }
+  }
+};
 </script>
 
 <style lang="scss">
-	@import './searchparking.scss'
+@import './searchparking.scss';
 </style>