mobile-frame-h5-example/pages/template/wxCenter/index.vue

<template>
	<view>
		<u-navbar :is-back="false" title="　" :border-bottom="false">
			<view class="u-flex u-row-right" style="width: 100%;">
				<view class="camera u-flex u-row-center">
					<u-icon name="camera-fill" color="#000000" size="48"></u-icon>
				</view>
			</view>
		</u-navbar>
		<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.imgUrl||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 || '请登录' }}</view>
				<view class="u-font-14 u-tips-color">手机号:{{ userInfo.tel || '暂无' }}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="scan" color="#969799" size="28"></u-icon>
			</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="rmb-circle" title="支付" @click="submitOrder()"></u-cell-item>
				<u-cell-item icon="rmb-circle" title="退款" @click="refund('20210311150306120323584')"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="收藏"></u-cell-item>
				<u-cell-item icon="photo" title="相册"></u-cell-item>
				<u-cell-item icon="coupon" title="卡券"></u-cell-item>
				<u-cell-item icon="heart" title="关注"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<!-- <u-cell-item icon="setting" title="设置"></u-cell-item> -->
				<u-cell-item icon="setting" :title="vuex_user.tel?'更换手机号':'绑定手机号'" @click="openPage('/pages/template/bindPhoneNumber/bindPhoneNumber')"></u-cell-item>
				<u-cell-item icon="lock-opened-fill" title="退出" v-if="vuex_hasLogin" @click="logout"></u-cell-item>
			</u-cell-group>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pic:'https://uviewui.com/common/logo.png',
				show:true,
				userInfo:[],
				requested:true,
			}
		},
		onLoad() {
			if(this.$store.state.vuex_hasLogin){
				this.userInfo = this.$store.state.vuex_user;
			}else{
				this.userInfo = [];
			}
		},
		methods: {
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			showToast() {
				this.$refs.uToast.show({
					title: this.message || "请设置提示语",
					type: this.messageType||"success",
					icon:false,
					// url: '/pages/user/index'
				})
			},
			//登录判断
			login(status){
				if(!status){
					console.log('config',this.config);
					window.location.replace(this.config.loginUrl)
				}
			},
			//提交校验
			submitOrder:function(){
				if(!this.vuex_hasLogin){
					this.message = "请先登录"
					this.showToast();
					return;
				}
				if(this.requested){
					this.requested = false;
					uni.showLoading({
						title: '订单生成中。'
					});
					// if(this.cartList.length == 0){
					// 	this.$api.msg("请先选择产品!")
					// 	return;
					// }else{ 
					// 	let userInfo = uni.getStorageSync("userInfo");
					// 	console.log( uni.getStorageSync("linkType") );
						let params = {
							// customerId:userInfo.guid,
							// list:this.cartList,
							// linkType: uni.getStorageSync("linkType") || '',
							// activityId:uni.getStorageSync("togetherId") || ''
						}
						this.syncData(params);
					// }
				}else{
					// this.showToast();
					setTimeout(()=>{
						uni.showLoading({
							title: '订单生成中。'
						});
					},2000);
					return
				};
			},
			//订单提交，拿到订单id
			syncData(data){
				this.$u.api.createOrder(data)
					.then(res=>{
						this.requested = true;
						console.log('res',res);
						if(res.retHead.errCode == 0){
							// this.pullWeichatPay(res.retBody)
							this.pullWeichatPay(res.retBody.orderId)
						}else{
							this.message = res.retHead.errMsg;
							this.showToast();
						}
						uni.hideLoading()
				}).catch(err=>{console.log('createOrder err',err)})
			},
			//拉起微信支付
			async pullWeichatPay(id){
				let params = {
					orderId:id,
					openid:this.$store.state.vuex_user.openId,
					tradeType:"test"
				}
				this.$pay.wxPay(params).then(res =>{
					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.message = "支付失败，请检查!"
						this.showToast();
						setTimeout(()=>{
							uni.redirectTo({
								url: '/pages/userCenter/myOrder/myOrder'
							});
						},1000)
					}
				})
			},
			//退出
			logout(){
				this.$u.vuex('vuex_hasLogin', false);
				this.$router.go(0);
			},
			//退款
			refund(orderId){
				this.$u.api.refund({orderId:orderId,refundDesc:'测试'})
				.then(res =>{
					console.log('refund res',res)
				}).catch(err=>{
					this.message = err.retHead.errMsg;
					this.showToast();
					console.log('refund err',err)
				})
			}
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}

.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background-color: #fff;
}
</style>