包月续费\轮播详情\包月微信支付\首次登录同时微信

pages.json

@@ -137,9 +137,8 @@
             "path" : "pages/center/monthly/monthly",
             "style" :                                                                                    
             {
-				 "navigationStyle":"custom",// 隐藏系统导航栏
+				"navigationStyle":"custom",
                 "navigationBarTitleText": "我的包月",
-                "enablePullDownRefresh": false,
                 "navigationBarBackgroundColor": "#008CFF",
                 "navigationBarTextStyle": "white"
             }
@@ -204,6 +203,17 @@
             }
             
         }
+        ,{
+            "path" : "pages/bannerDetails/bannerDetails",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "详情页",
+				"enablePullDownRefresh": false,
+				"navigationBarBackgroundColor": "#008CFF",
+				"navigationBarTextStyle": "white"
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/bannerDetails/bannerDetails.vue

@@ -0,0 +1,53 @@
+<template>
+	<!-- 轮播详情 -->
+	<view>
+		<view v-html="dom"></view>
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				dom: ''
+			}
+		},
+		onLoad(page) {
+			if (page.id) {
+				this.getDetails(page.id)
+			}
+		},
+		methods: {
+			// 获取详情
+			getDetails(id) {
+				this.$u.api.getIndexData()
+				.then(res=>{
+					if (res.code === 200) {
+						const list = res.data?.advs
+						list.forEach(item => {
+							if (item.id == id) {
+								this.dom = item.content
+							}
+						})
+					} else {
+						this.$refs.uToast.show({
+							title: res.msg,
+							type: 'error'
+						})
+					}
+				})
+				.catch(err => {
+					this.$refs.uToast.show({
+						title: '操作失败!',
+						type: 'error'
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/center/monthly/monthly.vue

@@ -8,7 +8,7 @@
 		 back-icon-color="#CCE8FF" 
 		 :background="{background: '#008CFF' }" title="我的包月"></u-navbar>
 		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" >
-			<!-- <scroll-view scroll-y style="height: 100%; width: 100%;" v-for="(monthlyItem, index) in  monthlyList" :key="monthlyItem.id"> -->
+			<scroll-view scroll-y style="height: 100%; width: 100%;">
 				<view class="monthly-list">
 					<view class="monthly-list-item"  v-for="(monthlyItem, index) in  monthlyList" :key="monthlyItem.id">
 						<view class="monthly-list-item-top">
@@ -38,12 +38,16 @@
 							:class="{'tool-btn-cancel':monthlyItem.feeStatus=='0'}" 
 							v-if="monthlyItem.feeStatus=='0'" 
 							@click="cancelMonth(monthlyItem.monthId)">取消订单</view>
-							<!-- <u-button class="btn" v-if="monthlyItem.feeStatus=='0'" type="error" size="mini" @click="cancelMonth(monthlyItem.monthId)">取消缴费</u-button> -->
+						</view>
+						<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays > 2" class="button-wrap u-flex u-row-right">
+							<view class="tool-btn">已缴费</view>
+						</view>
+						<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays < 3" class="button-wrap u-flex u-row-right">
+							<view class="tool-btn" @click="goRenewal(monthlyItem)">去续费</view>
 						</view>
 					</view>
-					
 				</view>
-			<!-- </scroll-view> -->
+			</scroll-view>
 		</mescroll-body>
 		<u-modal v-model="canclShow" content="确认取消该订单？" @confirm="confirm" :show-cancel-button="true"></u-modal>
 		<u-toast ref="uToast" />
@@ -65,6 +69,12 @@
 				time:[],
 			}
 		},
+		onShow() {
+			// onShow 刷新数据
+			if(this.mescroll){
+				this.mescroll.triggerDownScroll();
+			}
+		},
 		methods: {
 			customBack(){
 				this.$u.route({
@@ -114,7 +124,7 @@
 							endTime: item.endTime,
 						}
 						this.monthList.push(obj)
-						console.log(obj)
+						// console.log(obj)
 					});
 					this.time = this.monthList[0]
 					let Date1 = this.time.beginTime;
@@ -166,9 +176,21 @@
 						type: 'error',
 					});
 				})
+			},
+			/**
+			 * 去续费
+			 * */
+			goRenewal(item) {
+				this.$u.route({
+					url: 'pages/handleMonthly/handleMonthly',
+					params: {
+						roadNo: item.roadNo,
+						vehicleNo: item.vehicleNo
+					}
+				})
+			 }
 		}
 	}
-	}
 </script>
 
 <style lang="scss" scoped>

pages/center/phoneLogin/phoneLogin.vue

@@ -44,8 +44,13 @@ export default {
 			// messageError:false
 		}
 	},
-	onLoad() {
-		
+	onLoad(page) {
+		//  如果存在code 则认为是微信登录完成后跳转过来的,直接获取信息跳转首页或者指定页面
+		let locationLocaturl = window.location.search;
+		this.code = getUrlParams(locationLocaturl, "code"); // 截取code
+		if (this.code) {
+			this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
+		}
 	},
 	computed: {
 		inputStyle() {
@@ -136,33 +141,29 @@ export default {
 					this.toastMsg = res.msg;
 					this.showToast();
 				}
-				
 			}).catch(err=>{
-				console.log('finish err',err);
 				this.toastMsg = err.msg;
 				this.showToast();
 			});
 		},
 		// 微信登录
 		wechatLogin() {
-			this.jumpIndex()
-			// const openId = this.$store.state.vuex_wxinfo.openId
-			// if (openId) {
-			// 	this.jumpIndex()
-			// } else {
-			// 	this.getCode()
-			// }
+			// this.jumpIndex()
+			const openId = this.$store.state.vuex_wxinfo?.openId
+			if (openId) {
+				this.jumpIndex()
+			} else {
+				this.getCode()
+			}
 		},
 		// 微信已登录则跳转到首页
 		jumpIndex() {
 			let ret = localStorage.getItem('backUrl')
-			console.log(ret)
 			if (ret && ret.indexOf('phoneLogin') < 0) {
 				// 截取url
 				const pagesIndex = ret.indexOf('pages')
 				if (pagesIndex > (-1)) {
 					const pageUrl = ret.slice(pagesIndex)
-					console.log(pageUrl)
 					setTimeout(() => {
 						uni.navigateTo({
 							url: '/' + pageUrl
@@ -181,25 +182,34 @@ export default {
 		},
 		// 获取code
 		getCode () {
-			var local = window.location.href // 获取页面url
+			const local = window.location.href // 获取页面url
 			let locationLocaturl = window.location.search;
-			this.code = getUrlParams(locationLocaturl,"code"); // 截取code
-			if (this.code == null || this.code === '') { // 如果没有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 {
+			this.code = getUrlParams(locationLocaturl, "code"); // 截取code
+			if (this.code) { // 如果没有code，则去请求
 				this.handleGetWXInfo(this.code) //把code传给后台获取用户信息
+			} else {
+				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`
 			}
 		},
 		// 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
 		handleGetWXInfo (code) {
+			uni.showLoading({
+			    title: '加载中'
+			})
 			this.$u.api.getWXInfo(code).then((res) => {
 				if (res.code === 200 ) {
 					this.$u.vuex('vuex_wxinfo', res.data);
 					this.jumpIndex()
+				} else {
+					this.$refs.uToast.show({
+						title: '获取用户信息失败!',
+						type: 'error',
+					});
 				}
+				uni.hideLoading()
 			}).catch((err) => {
 				this.$refs.uToast.show({
-					title: err.msg,
+					title: '获取用户信息失败!',
 					type: 'error',
 				});
 			})

pages/handleMonthly/handleMonthly.vue

@@ -32,11 +32,31 @@
 			<view>包月说明</view>
 			<view>1、停车不足30分钟，免费；</view>
 			<view>2、停车 超过20分钟，按2元/小时收费；</view>
-			<view>3、月卡会员在有效期内停车免费</view>
+			<!-- <view>3、月卡会员在有效期内停车免费</view> -->
 		</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>
+					<button class="pay-way-close-btn" @click="payWayPop = false">关闭</button>
+				</view>
+			</u-modal>
 		<u-toast ref="uToast" />
 	</view>
 </template>
@@ -64,7 +84,9 @@
 					month: 1,
 					dateRange:""
 				},
-				label:""
+				label:"",
+				payWayPop: false,
+				jumpUrl: undefined
 			}
 		},
 		onLoad (page) {
@@ -72,7 +94,12 @@
 				this.roadNo = page.roadNo;
 				this.getMonthInfo(this.roadNo);
 			}
-			
+			if (page.vehicleNo) {
+				this.vehicleNo = page.vehicleNo
+			}
+			const baseUrl = window.location.href.split('#')[0]
+			let jumpUrl = baseUrl + '#' + '/pages/center/monthly/monthly'
+			this.jumpUrl = jumpUrl
 		},
 		mounted(){
 			// console.log(this.lastActiveDate)
@@ -155,23 +182,29 @@
 						this.lastActiveDate = res.data.lastActiveDate;
 						this.form.monthAmount=res.data.monthAmount;
 						this.carLicenseList = [];
+						let vehicleNoItem = null
 						res.data.vehicleList.forEach(item => {
 							const obj = {
 								value: item.energyType,
 								label: item.vehicleNo,
 								energyType:item.energyType
 							}
+							if (this.vehicleNo == item.vehicleNo) {
+								vehicleNoItem = obj
+							}
 							this.carLicenseList.push(obj)
 						});
-						console.log('this.carLicenseList',this.carLicenseList)
-						this.form.carLicense = this.carLicenseList[0]
+						// 判断是否url存在车牌号,存在则选中项默认选中
+						if (vehicleNoItem) {
+							this.form.carLicense = vehicleNoItem
+						} else {
+							this.form.carLicense = this.carLicenseList[0]
+						}
 					}
 					
 				})
 			},
 			submit(roadNo){
-				// console.log(this.monthStartTime)
-				// console.log('this.form.carLicense',this.form.carLicense);
 				this.$u.api.createMonth({
 					roadNo:this.roadNo,
 					vehicleNo:this.form.carLicense.label,
@@ -184,26 +217,7 @@
 						if(res.code === 200){
 							this.monthId = res.data.monthId
 							console.log(this.monthId)
-							this.$u.api.monthPay({
-								monthId:this.monthId
-							}).then(res => {
-								console.log("monthPay",res)
-								if(res.code === 200){
-									// this.payUrl=encodeURIComponent(res.data.url);
-									// this.$u.route({
-									// 	url: 'pages/handleMonthly/monthPay',
-									// 	params: {
-									// 		payUrl:this.payUrl
-									// 	}
-									// });
-									window.location.href = res.data.url
-								} else {
-									this.$refs.uToast.show({
-										title: res.msg,
-										type: 'error',
-									});
-								}
-							})
+							this.payWayPop = true
 						}else{
 							this.$refs.uToast.show({
 								title: res.msg,
@@ -213,7 +227,109 @@
 					}).catch(err=>{
 						
 					});
-				// this.getMonthInfo(roadNo)
+			},
+			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',
+						});
+					}
+				})
+			},
+			/**
+			 * 微信支付
+			 * 判断vuex中是否存在openId
+			 * 存在直接调起微信支付
+			 * 不存在则通过微信登录去获取用户的code
+			 * 完成后通过code去获取用户的openId等信息
+			 * 最后再调起微信支付
+			 * */
+			wechatPay() {
+				const openId = this.$store.state.vuex_wxinfo.openId
+				if (openId) {
+					this.getWXPay()
+				} else {
+					this.getCode()
+				}
+			},
+			/**
+			 * 调起微信支付接口
+			 * @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, '/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;
+					}
+				});
+			},
+			/**
+			 * 获取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',
+					});
+				})
 			}
 		},
 		computed:{
@@ -239,4 +355,5 @@
 
 <style lang="scss" scoped>
 @import './handleMonthly.scss';
+@import '../paymentMethod/paymentMethod.scss'
 </style>

pages/index/index.vue

@@ -10,7 +10,7 @@
 			<!-- <u-icon class="scan" name="scan" color="#fff" size="48" @click="$refs.uToast.show({title: '建设中'})"></u-icon> -->
 		</view>
 		
-		<u-swiper :list="bannerList" border-radius="0" mode="none"></u-swiper>
+		<u-swiper :list="bannerList" border-radius="0" mode="none" @click="swiperClick"></u-swiper>
 		
 		<u-city-select v-model="cityOpen" @city-change="cityChange" :areaCode='["52", "5201"]' ></u-city-select>
 		
@@ -230,42 +230,28 @@
 						that.longitude = pos.coords.longitude;
 						that.getCityNameByLonLat(that.latLongItude)
 					},function(err){
-                    // 错误处理
-                    switch(err.code) {
-                        case 1: 
-                            alert("位置服务被拒绝。");
-                        break;
+						// 错误处理
+						switch(err.code) {
+							case 1: 
+								alert("位置服务被拒绝。");
+							break;
 
-                        case 2: 
-                            alert("暂时获取不到位置信息。");
-                        break;
+							case 2: 
+								alert("暂时获取不到位置信息。");
+							break;
 
-                        case 3:
-                            alert("获取信息超时。");
-                        break;
+							case 3:
+								alert("获取信息超时。");
+							break;
 
-                        default:
-                            alert("未知错误。");
-                        break;
-                    }
-                })
+							default:
+								alert("未知错误。");
+							break;
+						}
+					})
 				}else{
 					console.log("当前系统不支持GPS API")
 				};
-				// uni.getLocation({
-				// 	type: 'gcj02',
-				// 	geocode: true,
-				// 	altitude: true,
-				// 	success: (res) => {
-				// 		that.latLongItude = {latitude: res.latitude,longitude:res.longitude};
-				// 		that.latitude = res.latitude;
-				// 		that.longitude = res.longitude;
-				// 		that.getCityNameByLonLat(that.latLongItude)
-				// 	},
-				// 	fail: () => {
-				// 		console.log("获取经纬度失败");
-				// 	}
-				// })
 			},
 			// 通过经纬度获取地区详细信息
 			getCityNameByLonLat({longitude,latitude} = {}){
@@ -287,6 +273,16 @@
 				  }
 				})
 			},
+			// 轮播图点击
+			swiperClick(item) {
+				console.log(item)
+				this.$u.route({
+					url: 'pages/bannerDetails/bannerDetails',
+					params: {
+						id: this.bannerList[item].id
+					}
+				})
+			},
 			orderNavclick(){
 				this.feePay()
 			},
@@ -327,14 +323,36 @@
 			handleGetIndexData(){
 				this.$u.api.getIndexData()
 				.then(res=>{
+					// 轮播
+					const bannerList = []
+					const banner = res.data?.advs
+					banner.forEach(item => {
+						const obj = {
+							image: item.bannerUrl,
+							id: item.id,
+							name: item.name,
+							content: item.content
+						}
+						bannerList.push(obj)
+					})
+					this.bannerList = bannerList
+					
 					if(res.data.vehicleList.length<1){
 						this.bindCarShow = true;
 					}
 					const enableFeepay=[]
 					res.data.orderList.forEach(item => {
-						enableFeepay.push(item.enableFeepay);
+						if (item.enableFeepay) {
+							enableFeepay.push(item.enableFeepay);
+						} else {
+							enableFeepay.push(0);
+						}
 						enableFeepay.push(item.vehicleId);
-						enableFeepay.push(item.contractStatus);
+						if (item.contractStatus) {
+							enableFeepay.push(item.contractStatus);
+						} else {
+							enableFeepay.push(0);
+						}
 					})
 					this.recordList=enableFeepay;
 					// this.vehicleId=enableFeepay.vehicleId;

pay.js

@@ -17,7 +17,6 @@ export default {
 		});
 		return new Promise(r => {
 			$http.post("/wechat/pay",obj)
-			// this.$u.post("/wechat/h5/pay",obj)
 				.then(res=>{
 					//#ifdef H5
 					$wxApi.JSAPI(res.data).then(r);
@@ -29,17 +28,27 @@ export default {
 				})
 		});
 	},
-	//微信支付
-	wechatPay(obj = {}) {
+	/**
+	 * 微信支付
+	 * obj 传入对象
+	 * url 提交地址
+	 * jumpUrl 支付成功跳转 
+	 */
+	wechatPay(obj = {}, url = '/pay/wechat', jumpUrl) {
 		uni.showLoading({
 			title: '支付中'
 		});
 		return new Promise(r => {
-			$http.post("/pay/wechat",obj)
+			$http.post(url, obj)
 				.then(res=>{
-					if (res.data.needPay) {
+					// 区分包月支付和普通支付
+					if (res.data.needPay && !res.data.monthId) {
+						//#ifdef H5
+						$wxApi.JSAPI(res.data.wx, jumpUrl).then(r);
+						//#endif
+					} else if (res.data.monthId) {
 						//#ifdef H5
-						$wxApi.JSAPI(res.data.wx).then(r);
+						$wxApi.JSAPI(res.data.wx, jumpUrl).then(r);
 						//#endif
 					} else {
 						uni.showToast({
@@ -49,7 +58,11 @@ export default {
 						});
 						setTimeout(() =>{
 							//#ifdef H5
-							window.location.reload();
+							if (jumpUrl) {
+								window.location.href = jumpUrl;
+							} else {
+								window.location.reload();
+							}
 							//#endif
 						}, 1500)
 					}

wxapi.js

@@ -137,7 +137,7 @@ export default {
 		wx.updateTimelineShareData(shareInfo);
 	},
 	//拉起微信浏览器端支付
-	JSAPI(res) {
+	JSAPI(res, jumpUrl) {
 		return new Promise(r => {
 			wx.chooseWXPay({
 				"timestamp": res.timeStamp, //时间戳，自1970年以来的秒数     
@@ -158,7 +158,6 @@ export default {
 					});
 				},
 				fail(err) {
-					console.log('支付失败',err.errMsg.split(':')[1]);
 					r({
 						code: 2,
 						msg: err.errMsg.split(':')[1]
@@ -168,7 +167,11 @@ export default {
 				complete(e) {
 					// e.errMsg三种状态 1.chooseWXPay:ok 支付成功 2: chooseWXPay:cancel 支付取消 3:chooseWXPay:fail 支付失败
 					if (e.errMsg === 'chooseWXPay:ok') {
-						window.location.reload()
+						if (jumpUrl) {
+							window.location.href = jumpUrl
+						} else {
+							window.location.reload()
+						}
 					}
 				}
 			});