parking_h5/pages/center/index.vue

<template>
	<view>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10" @click="login($store.state.vuex_hasLogin)">
				<u-avatar :src="userInfo.headImgUrl || userInfo.avatar||pic" size="140"></u-avatar>
			</view>
			<view class="u-flex-1" @click="login($store.state.vuex_hasLogin)">
				<view class="u-font-18 u-p-b-20">{{ userInfo.nickname || userInfo.userName || '请登录' }}</view>
				<view class="u-font-14 u-tips-color">手机号:{{ userInfo.mobile || '暂无' }}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="我的车辆" @click="openPage('pages/myCars/myCars')"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="手机号登录" @click="openPage('/pages/center/phoneLogin/phoneLogin')"></u-cell-item>
				<u-cell-item icon="star" title="微信支付" @click="handlewxpay"></u-cell-item>
			</u-cell-group>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import getUrlParams from "../../utils/getUrlParams.js";
	export default {
		data() {
			return {
				pic:'https://uviewui.com/common/logo.png',
				userInfo:[],
				code:null,
				
			}
		},
		onLoad() {
			if(this.$store.state.vuex_hasLogin){
				this.userInfo = this.$store.state.vuex_user;
				if(this.$store.state.vuex_wxinfo){
					this.userInfo = Object.assign(this.userInfo,this.$store.state.vuex_wxinfo);
				}
			}else{
				this.userInfo = [];
			};
			let locationLocaturl = window.location.search;
			this.code = getUrlParams(locationLocaturl,"code");
			if(this.code&&!this.$store.state.vuex_wxinfo.openId){this.handleGetWXInfo(this.code)};
			

		},
		methods: {
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			//登录判断
			login(status){
				if(!status){
					console.log('config',this.config);
					window.location.replace(this.config.loginUrl)
				}
			},
			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'
						});
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
page{background-color: $my-page-bg-color;}
.user-box{background-color: #fff;}
</style>