qzw_xcx/pages/myCenter/index.vue

<template>
	<view class="myBox">
		<view class="myhead">
			<view @click="goinfor" class="myheadImg">
				<uni-icon color="#fff"  size="22" type="chat"></uni-icon>
			</view>
			<view class="myNmae">
				<view class="myNmaeLeft"> 
					<view class="myNmaeImg">
						<image :src="userInfo.avatarUrl"></image>
					</view>
                    <view v-if="successlogion">
						<view  style="font-size: 34upx;margin-bottom: 32upx;">{{userInfo.nickName}}</view>
						<view style="font-size: 24upx"  @click="goAdress(3)" >圈币{{menberinfo.member_points}}></view>
					</view>
					<view v-if="!successlogion && hasLogin">
						
						<view  style="font-size: 34upx;margin-bottom: 32upx;">{{userInfo.nickName}}</view>
						<view style="font-size: 24upx"  @click="goAdress(3)" >请绑定手机号></view>
					</view>
					
					<view v-if="!successlogion && !hasLogin">
						<view  style="font-size: 34upx;margin-bottom: 32upx;"  @click="goAdress(3)">请登录</view>
						<view style="font-size: 24upx"  @click="goAdress(3)" >圈币***></view>
					</view>
				</view>
					<view class="myNmaeRight" @click="writeday" v-if="menberinfo.has_sign == 0">每日签到></view>
					<view class="myNmaeRight" v-if="menberinfo.has_sign == 1">已签到></view>
			</view>
		</view>
		<van-cell @click="gomyorder(0)"  title="我的订单" is-link />
	    <view class="myorder">
			<view class="orderList">
				<view class="orderOne"  @click="gomyorder(1)">
					<image class="imagewidth" src="../../static/order_wat_pay.png" ></image>
					<view>待付款</view>
				</view>
				<view class="orderOne"  @click="gomyorder(2)">
					<image class="imagewidth" src="../../static/order_handle.png"></image>
					<view>处理中</view>
				</view>
				<view class="orderOne"  @click="gomyorder(3)">
					<image class="imagewidth" src="../../static/order_comment.png"></image>
					<view>带评价</view>
				</view>
				<view class="orderOne"  @click="gomyorder(4)">
					<image class="imagewidth"  src="../../static/order_cancel.png"></image>
					<view>已取消</view>
				</view>
				<view class="orderOne"  @click="gomyorder(5)">
					<image class="imagewidth" src="../../static/order_wat_pay.png"></image>
					<view>退款/售后</view>
				</view>
			</view>
		</view>
		<view style="border-bottom: 20upx solid #F5F5F5;"></view>
		<van-cell  title="我的服务"/>
		<van-cell  @click="goAdress(0)" title="圈在网代理" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				  margin-right: 8upx;
				  vertical-align:middle"
				 src="../../static/hotel.jpg"  />
			</template>
		</van-cell>
		
		<van-cell  @click="goAdress(2)" title="圈在网入驻" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				margin-right: 8upx;
				vertical-align:middle"
				src="../../image/hotel.jpg" />
			</template>
		</van-cell>
		
		<van-cell  @click="goAdress(3)" title="圈币明细" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
			
				margin-right: 8upx;
				vertical-align:middle"
				src="../../static/exchange.png" />
			</template>
		</van-cell>
		
		<van-cell  @click="goAdress(1)" title="我的地址" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				margin-right: 8upx;
				vertical-align:middle"
				src="../../static/local.png" />
			</template>
		</van-cell>
		
		<van-cell @click="goAdress(9)"   title="我的收藏" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
			
				margin-right: 8upx;
				vertical-align:middle"
				src="../../static/favorite.png" />
			</template>
		</van-cell>
		
		<van-cell @click="goAdress(8)"  title="意见反馈" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				
				margin-right: 8upx;
				vertical-align:middle"
				src="../../static/service.png" />
			</template>
		</van-cell>
		
		<van-cell  @click="goAdress(7)"  title="商务合作" is-link>
			<template slot="icon">
				<image style="width: 29upx;height: 29upx;
				margin-right: 8upx;
				vertical-align:middle"
				src="../../static/setting.png" />
			</template>
		</van-cell>
		
		<!-- <logionDialog @confirmDiaolog="confirmDiaolog"
		 :ishow="false" @cancelDiaolog="cancelDiaolog"   @keepdialog="keepdialog"
		 @changeDiaolog="changeDiaolog" :showdialog="showdialog"/> -->
		 <!--  @keepdialog="keepdialog"
		 @changeDiaolog="changeDiaolog" -->
	</view>
</template>

<script>
	import uniIcon from '@/component/uni-icon/uni-icon.vue'
	import logionDialog from '@/component/loginDialog.vue'
	import {
		mapMutations,mapState
	} from 'vuex'
	export default {
		components: {
			uniIcon,
			logionDialog
		},
		data() {
			return {
				showdialog: false,
				ishow: false,
				menberinfo: {}
			}
		},
		computed:{
			...mapState([
			  'hasLogin',
			  'userInfo',
			  'successlogion'
			]),
		},
		onLoad() {
			console.log(this.userInfo);
			console.log(this.hasLogin);
			if(this.successlogion && this.hasLogin) {
				this.getuserinfo();
		  	}else {
				uni.navigateTo({
					url: './logion'
				})
				//this.showdialog = true;
			}
			
		},
		watch:{
			'hasLogin':function(val) {
				console.log("监听")
			   if(val) {
				  this.getuserinfo(); 
			   }else {
				  uni.navigateTo({
				  	url: './logion'
				  })
			   }
			},
			'successlogion':function(val) {
				console.log("监听")
			   if(val) {
				  this.getuserinfo(); 
			   }else {
				  uni.navigateTo({
				  	url: './logion'
				  })
			   }
			},
			
		},
		methods: {
			// 跳转到我的订单
			gomyorder(e) {
				if(this.successlogion && this.hasLogin) {
					if(e == 0) {
						 ({
							url: '/pages/myOrder/index'
						})
					}else if(e == 1) {
						let state = 'waiting';
						uni.navigateTo({
							url: `/pages/myOrder/index?state=${state}`
						})
						
					}else if(e == 2) {
						let state = 'payed'; 
						uni.navigateTo({
							url: `/pages/myOrder/index?state=${state}`
						})
					}else if(e == 3) {
						let state = 'complete-';
						
					}else if(e == 4) {
						let state = 'cancel';
						uni.navigateTo({
							url: `/pages/myOrder/index?state=${state}`
						})
					}else if(e == 5) {
						let state = 'refund';
						uni.navigateTo({
							url: `/pages/myOrder/index?state=${state}`
						})
					}
					
				}
				
			},
			getuserinfo() {
				this.request({
					url:'/v2/member/info',
					method:'GET',
					success: (res)=>{
						let { data } = res.data;
						// userinfo
						this.menberinfo = data;
					}
				})
			},
			// // 关闭弹窗
			// cancelDiaolog() {
			// 	this.showdialog = false;
			// },
			// // 确定
			// confirmDiaolog() {
			// 	this.showdialog = false;
			// },
			// changeDiaolog() {
			// 	this.showdialog = false;
			// },
			// keepdialog() {
			// 	this.showdialog = true;
			// },
			// 签到
			writeday() {
				this.request({
					url: '/v1/member/point',
					method: 'POST',
					data: {
						stage: 'sign'
					},
					success: (res) => {
						this.getuserinfo();
					}
				})
			},
			goAdress(e) {
				if(this.successlogion && this.hasLogin) {
					if(e == 1) {
							uni.navigateTo({
								url: '../myOrder/adress'  // 我的地址
							})
					}else if(e == 0) {
							uni.navigateTo({
								url: './applyfor'  // 我的申请
							})
						
					}else if(e == 2) {
							uni.navigateTo({
								url: './Settled'  // 酒店入驻
							})
						
					}else if(e == 3) {
						
							uni.navigateTo({
								url: './definite'  // 圈币明细
							})
							
					}else if(e == 7) {
					
							uni.navigateTo({
								url: './business'  // 商务合作
							})
						
					}else if(e == 8) {
						
							uni.navigateTo({
								url: './commentback'  // 意见反馈
							})
							
					
					}else if(e == 9) {
							uni.navigateTo({
								url: './myCollect'  // 我的收藏
							})
					}
					}else {
						uni.navigateTo({
							url: './logion'
						})
						//this.showdialog = true;
					}
			},
				
			goinfor() {
				if(this.successlogion && this.hasLogin) {
					uni.navigateTo({
						url: './information'  // 我的xiaoxi
					})
				}else {
					uni.navigateTo({
						url: './logion'
					})
					// this.showdialog = true;
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.myBox {
		height: 100vh;
		width: 100%;
		background-color: #fff;
		.myhead {
			height: 290upx;
			background-color: #D9332E;
			.myheadImg {
				padding: 10upx 32upx 0 0;
				height: 85upx;
				text-align: right;
				line-height: 85upx;
			}
			.myNmae {
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				align-items: center;
				padding: 20upx 32upx 0 32upx;
				.myNmaeLeft {
					display: flex;
					flex-direction: row;
					align-items: center;
					color: #fff;
					.myNmaeImg {
						width: 128upx;
						height: 128upx;
						border-radius: 50%;
						padding-right: 32upx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
							background-color: #fff;
						}
					}
				}
				.myNmaeRight {
				   width:144upx;
				   height: 52upx;
				   background:rgba(255,255,255,0.27);
				   border-radius: 44upx;
				   border:2upx solid rgb(255,255,255);
				   color: #fff;
				   line-height: 52upx;
				   text-align: center;
				   font-size: 24upx;;
				}
			}
			
		}
		.myorder {
			padding: 0 32upx;
			.orderList {
				padding: 28upx 0;
				display: flex;
				
			}
			.orderOne {
				flex: 1;
				flex-direction: column;
				text-align: center;
				
				.imagewidth {
					width: 44upx;
					height: 44upx;
					background-color: red;
				}
			}
		}
		
	}
</style>