parking_h5/pages/index/index.vue

<template>
	<view>
		<u-navbar :is-back='false' :border-bottom="false" :background="{ background: '#008CFF' }" title=""></u-navbar>
		<view class="header-bar">
			<view class="city" @click="handleCitySelect">
				{{city}}<u-icon name="arrow-down" color="#fff" size="32"></u-icon>
			</view>
			<u-search placeholder="搜索发票、停车场" :show-action="false" @search="handleSearch" v-model="keyword"></u-search>
			<u-icon class="scan" name="scan" color="#fff" size="48"></u-icon>
		</view>
		
		<u-swiper :list="bannerList" border-radius="0"></u-swiper>
		
		<u-city-select v-model="cityOpen" @city-change="cityChange" :areaCode='["52", "5201"]' ></u-city-select>
		
		<u-card :show-head="false" :show-foot="false" border-radius="16" margin="20rpx 40rpx" padding="30">
			<view class="content-nav" slot="body">
				<view class="content-nav-item">
					<view class="content-nav-item-icon-wrap">
						<u-image src="../../static/img/index-content-nav-01.png" width="77rpx" height="75rpx" mode="heightFix"></u-image>
					</view>
					<view class="content-nav-item-icon-text">停车缴费</view>
				</view>
				<view class="content-nav-item">
					<view class="content-nav-item-icon-wrap">
						<u-image src="../../static/img/index-content-nav-02.png" width="77rpx" height="75rpx" mode="heightFix"></u-image>
					</view>
					<view class="content-nav-item-icon-text">优惠活动</view>
				</view>
				<view class="content-nav-item">
					<view class="content-nav-item-icon-wrap">
						<u-image src="../../static/img/index-content-nav-03.png" width="77rpx" height="75rpx" mode="heightFix"></u-image>
					</view>
					<view class="content-nav-item-icon-text">车辆管理</view>
				</view>
				<view class="content-nav-item">
					<view class="content-nav-item-icon-wrap">
						<u-image src="../../static/img/index-content-nav-04.png" width="77rpx" height="75rpx" mode="heightFix"></u-image>
					</view>
					<view class="content-nav-item-icon-text">我的停车</view>
				</view>
			</view>
		</u-card>
		
		<u-card :show-foot="false" border-radius="16" margin="20rpx 40rpx" padding="30">
			<view class="pending-order-head" slot="head">
				<view class="pending-order-head-left"><b>P</b>甜蜜小镇D18组团停车场</view>
				<view class="pending-order-head-right" @click="orderDetails"><u-icon class="arrow-down" name="arrow-down" size="32"></u-icon></view>
			</view>
			<view class="pending-order-body" slot="body">
				<view class="pending-order-body-nav">
					<view class="nav-item nav-manual" @click="orderNav=0" :class="{active:orderNav==0}">手动缴费</view>
					<view class="nav-item nav-auto" @click="orderNav=1" :class="{active:orderNav==1}">无感支付</view>
				</view>
				<view class="pending-order-body-wrap" v-show="orderNav==0">
					<view class="pending-order-body-left">
						<view class="car-number">贵A37W45</view>
						<view class="duration">
							<span class="pending-order-body-left-label">停车时长</span>
							<span>01:30:25</span>
						</view>
					</view>
					<view class="pending-order-body-right">
						<view class="order">订单号：5222021022300045</view>
						<view class="cost">
							<span class="pending-order-body-left-label">停车费用</span>
							<span>
								<span class="number">10.25</span>
								元
							</span>
						</view>
					</view>	
					<view class="go-pay-wrap">
						<view class="go-pay" @click="handlewxpay">去支付</view>
					</view>
					
				</view>
				<view class="pending-order-body-wrap" v-show="orderNav==1">
					
				</view>
			</view>
		</u-card>
		
		<u-modal 
			v-model="bindCarShow" 
			title="绑定车牌号" 
			:show-cancel-button="true" 
			confirm-text="去绑定" 
			content="首次使用请先绑定您的车牌"
			@confirm="$u.route({url:'pages/myCars/myCars'})"></u-modal>
			
		<!-- 订单细节 -->
		<u-modal v-model="showOrderDetails" title="停车场信息" confirm-text="知道了" :title-style="{color: '#008CFF'}">
			<view class="slot-content">
				<rich-text class="orderDetails" :nodes="content"></rich-text>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../utils/getUrlParams.js";
	export default {
		// components: {
		// 	citySelect
		// },
		data() {
			return {
				city: '贵阳市',
				keyword:'',
				bannerList:[
					{image: '/static/img/index-banner01.png',title: ''}
				],
				cityOpen:false,
				pendingOrder:[],
				code:null,//微信code
				orderNav:0,//手动,无感
				bindCarShow:false,//绑定车询问弹窗
				showOrderDetails:false,//是否线上订单细节
				content:`
				<dl>
					<dt>车场名称：</dt>
					<dd>贵阳云岩区甜蜜小镇D18组团停车场</dd>
				</dl>
				<dl>
					<dt>免费时长：</dt>
					<dd>15分钟</dd>
				</dl>
				`,
				
			}
		},
		onLoad() {
			this.handleGetIndexData();
			let locationLocaturl = window.location.search;
			this.code = getUrlParams(locationLocaturl,"code");
			if(this.code&&!this.$store.state.vuex_wxinfo.openId){this.handleGetWXInfo(this.code)};
		},
		methods: {
			handleSearch(){
				console.log('this.keyword',this.keyword);
				this.$u.route({
					url:'pages/parkingLists/parkingLists',
					params: {
						keyword: this.keyword
					}
				})
			},
			handleCitySelect(){
				this.cityOpen = true;				
			},
			cityChange(e){
				console.log('cityChange',e);
				this.city = e.city.label;
			},
			handleGetIndexData(){
				this.$u.api.getIndexData()
				.then(res=>{
					console.log('getIndexData',res);
					if(res.data.vehicleList.length<1){
						this.bindCarShow = true;
					}
				}).catch(err=>{
					alert(err.msg);
					console.log('getIndexData err',err)
				});
			},
			getCode () {
				var 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.handleGetWXInfo(this.code) //把code传给后台获取用户信息
				}
			},
			handleGetWXInfo (code) { // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
				let _this = this
				this.$u.api.getWXInfo(code).then((res) => {
					if (res.code === 200 ) {
						this.$u.vuex('vuex_wxinfo',res.data);
						// 继续支付
					}
				}).catch((err) => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
				})
			},			
			handlewxpay(){;
				if(!this.$store.state.vuex_wxinfo.openId){ // 如果微信openId，则需用code去后台获取
					this.$refs.uToast.show({
						title: '请登录后重试!',
						type: 'info',
						// url: '/pages/user/index'
					});
					this.getCode();
				} else {
					// 别的业务逻辑
					this.getWXPay();
				}
			},
			async getWXPay(id){
				let params = {
					orderId:id||new Date().getTime(),
					openid:this.$store.state.vuex_wxinfo.openId,
					tradeType:"test"
				};
				await this.$wxApi.config();
				this.$pay.wxPay(params).then(res =>{
					console.log('wxPay',res.code);
					if(res.code == 0){
						// 成功
						// uni.reLaunch({
						// 	url: '/pages/buySuccess/buySuccess?orderId=' + params.orderId
						// })
					}else if(res.code == 1){
						// 取消
						// uni.redirectTo({
						// 	url: '/pages/userCenter/myOrder/myOrder'
						// })
					}else if(res.code == 2){
						this.$refs.uToast.show({
							title: '支付失败，请检查!',
							type: 'error',
							// url: '/pages/user/index'
						});
					}
				});
			},
			//
			orderDetails(){
				this.showOrderDetails = true;
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>