CommunityApp/pages/wode/wode.vue

<template>
	<view >
		<view  class="header">
			<DtCustomBar title="我的"></DtCustomBar>
			<view  style="display: flex;align-items: center;margin: 0 30upx;">
				<view class="member_head_img">
					<block v-if="isLogin">
						<image v-if="userDetail.avatar" :src="userDetail.avatar"></image>
						<button v-else class="avatar-wrap" open-type="getUserInfo" @getuserinfo="tapGetUserInfo" @tap.stop="() => false">
							<image src="http://139.9.103.171:8888/group1/M00/00/01/iwlnq1_AYZqAb30pAAAQNvkj3Wk302.png"></image>
						</button>
					</block>
					<image v-else src="http://139.9.103.171:8888/group1/M00/00/01/iwlnq1_AYZqAb30pAAAQNvkj3Wk302.png"></image>
				</view>
				<view v-if="isLogin" class="member_info">
					<view class="member_name_box" style="margin-bottom: 20rpx;">
						<view class="member_name">{{ username }}</view>
					</view>
					<view class="member_phone_box">
						<!-- <view class="member_phone">{{shopPhone}}</view> -->
					</view>
				</view>
				<view v-else class="no_login"><button class="no_login_btn">游客(未登录)</button></view>
				<view style="flex:1"></view>
			</view>
			<view style="display: flex;margin: 22upx 64upx 0;justify-content: space-between;">
				<view  @tap="tapHeadMenu(0)" style="text-align: center;">
					<view style="font-size: 28upx;color: #fff;">{{dataDetail.couponNum?dataDetail.couponNum:0}}</view>
					<view style="font-size: 24upx;color: #fff;margin-top: 10upx;">我的优惠券</view>
				</view>
				<view  @tap="tapHeadMenu(1)" style="text-align: center;">
					<view style="font-size: 28upx;color: #fff;">{{dataDetail.favoriteNum?dataDetail.favoriteNum:0}}</view>
					<view style="font-size: 24upx;color: #fff;margin-top: 10upx;">收藏商品</view>
				</view>
				<view  @tap="tapHeadMenu(2)" style="text-align: center;">
					<view style="font-size: 28upx;color: #fff;">{{dataDetail.browseNum?dataDetail.browseNum:0}}</view>
					<view style="font-size: 24upx;color: #fff;margin-top: 10upx;">浏览记录</view>
				</view>
			</view>
			<view class="mine_order_statue">
				<view class="cu-list grid col-5 no-border margin-top-sm" >
					<view class="cu-item" @click="tapToMenu(item.index)" v-for="(item,index) in gridList" :key="index">
						<view class="grid-icon ">
							<image style="width: 56rpx;height: 56rpx;"  :src="item.icon"/>
						</view>
						<view class="cu-tag bg-orange badge" v-if="item.badge>0">{{item.badge}}</view>
						<text style="font-size: 22rpx;font-family:Sans-serif">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="item_list" >
				<view class="item">
					<text style="font-size: 32rpx;">个人设置</text>
				</view>
				<view class="item" v-for="(item, index) in mineItemList" :key="index" @tap="tapToMenu(item.index)">
					<view class="item_content">
						<image :src="item.itemIcon"></image>
						<text>{{ item.itemName }}</text>
					</view>
					<view class="">
						<text v-if="index==0" style="padding-right: 16rpx;font-size: 26rpx;" class="text-red">{{authStatus}}</text>
						<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
					</view>
				</view>
			</view>
			<view class="item_list" >
				<view class="item">
					<text style="font-size: 32rpx;">系统设置</text>
				</view>
				<view class="item" v-for="(item, index) in systemItemList" :key="index" @tap="tapToMenu(item.index)">
					<view class="item_content">
						<image :src="item.itemIcon"></image>
						<text>{{ item.itemName }}</text>
					</view>
					<view class="">
						<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
					</view>
				</view>
			</view>
			<view class="bg-white" style="80rpx">
				
			</view>
		</view>
		<!-- 微信客服 -->
		<DtService />

		<DtLogin ref="dialogLogin" @signIn="onSignIn" />
	</view>
</template>

<script>
var app=getApp()
import DtLogin from '../../comps/dt_login.vue';
import DtService from '../../comps/dt_service.vue';
import DtCustomBar from '../../comps/dt_custom_bar.vue'
export default {
	components: {
		DtLogin,
		DtService,
		DtCustomBar
	},
	data() {
		return {
			height:'',
			//todo
			gridList:[
				{
					icon:'../../static/wode/order.png',
					title:"商城订单",
					badge:0,
					index:1
				},
				{
					icon:'../../static/wode/cart.png',
					title:"购物车",
					badge:0,
					index:2
				},
				{
					icon:'../../static/wode/wuye.png',
					title:"我的报修",
					badge:0,
					index:3
				},
				{
					icon:'../../static/wode/jiaofei1.png',
					title:"物业缴费",
					badge:0,
					index:5
				},
				{
					icon:'../../static/wode/contact.png',
					title:"联系物业",
					badge:0,
					index:4
				}
				
			],
			isFirst:false,
			//社区 begin
			userInfo: null,
			//微信用户信息
			state: null,
			anyHousePass: false,
			//社区end
			mineItemList: [
				{
					itemName: '住户认证',
					itemIcon: '/static/wode/renzheng.png',
					index:6
				},
				{
					itemName: '通行人脸',
					itemIcon: '/static/wode/face.png',
					index:7
				},
				// {
				// 	itemName: '身份信息',
				// 	itemIcon: '/static/wode/shenfen.png',
				// 	index:8
				// },
				{
					itemName: '收货地址',
					itemIcon: '/static/wode/address.png',
					index:9
				},
			],
			systemItemList:[
				{
					itemName: '问题反馈',
					itemIcon: '/static/wode/fankui.png',
					index:10
				},
				{
					itemName: '帮助中心',
					itemIcon: '/static/wode/shuoming.png',
					index:11
				},
				{
					itemName: '设置',
					itemIcon: '/static/wode/setting.png',
					index:12
				}
			],
			//商城绑定的手机号
			shopPhone:'',
			memberId: '',
			dataDetail: {},
			orderStatusNum: {},
			userDetail: {},
			isLogin: false,
		};
	},
	computed: {
		authStatus:{
			  get(){
				  if(this.state==0 && this.anyHousePass==false){
					  return "未认证"
				  }else if(this.state==1&&this.anyHousePass==false){
					  return "待审核"
				  }else if(this.state==2 ||this.anyHousePass==true){
					  return "已认证"
				  }else{
					  return "未注册"
				  }
			  }
		},
		username:{
			get(){
				if (this.$isEmpty(getApp().globalData.member)) {
					if (this.$isEmpty(this.userDetail.username)) {
						return this.shopPhone
					}else{
						return this.userDetail.username
					}
				}else{
					return getApp().globalData.member.name
				}
			}
		}
	},
	methods: {
		async tapGetUserInfo(e) {
			console.log(158, e);
			if (e.detail.errMsg == 'getUserInfo:ok') {
				let userInfo = e.detail.userInfo;
				let resp = await this.$api.updateIcon({
					_isShowLoading: true,
					userId: this.memberId,
					avatar: userInfo.avatarUrl
				});
				this.userDetail.avatar = userInfo.avatarUrl;
			}
		},
		showLogin() {
			this.$refs.dialogLogin.show();
		},
		onSignIn(resp) {
			this.shopPhone=this.$auth.getMineBase().user.mobile || ''
			console.log(143, resp);
			this.onPullDownRefreshPage();
		},
		tapToWhich(aimUrl) {
			if (!this.$auth.isAuth) {
				this.showLogin();
				return;
			}
			uni.navigateTo({
				url: aimUrl
			});
		},
		tapToOrder() {
			if (!this.$auth.isAuth) {
				this.showLogin();
				return;
			}
			uni.navigateTo({
				url: '/pagesM/pages/mine_order_list'
			});
		},
		tapToCar(){
			if (!this.$auth.isAuth) {
				this.showLogin();
				return;
			}
			uni.navigateTo({
				url:'/pagesM/pages/shop_car'
			})
		},
		onShareAppMessage: function(e) {
			return {
				path: '/pagesM/pages/home'
			}
		},
		tapHeadMenu(index){
			let url;
			if(index==0){
				url = '/pagesM/pages/coupon_list'
			}else if(index==1){
				url = '/pagesM/pages/mine_collection'
			}else if(index==2){
				url = '/pagesM/pages/browse_records'
			}
			uni.navigateTo({
				url: url
			}); 
		},
		tapToMenu(index) {
			let url=''
			switch (index) { 
				case 1: 
					//商城订单
					this.tapToOrder()
					break; 
				case 2:
					//购物车
					this.tapToCar()
					break;
				case 3: 
					// 我的报修
					if (this.buttonMethod()) {
						uni.navigateTo({
						  url: '../services/property/list/list'
						})
					}
					break;
				case 4: 
					// 联系物业
					let phone= uni.getStorageSync("personTel")
					if (this.$isEmpty(phone)) {
						this.$u.toast('暂无电话')
					}else{
						this.makePhoneCall(phone);
					}
					break;
				case 5:
					//物业缴费
					this.$u.toast('即将开放')
					break;
				case 6: 
					//住户认证
					if (this.buttonMethod()) {
						uni.navigateTo({
							url:"myInfo/myInfo"
						})
					}
					break;
				case 7:
					// 通行人脸
					if (this.buttonMethod()) {
						uni.navigateTo({
							url:"/pages/uploadFace/uploadFace"
						})
					}
					break;
				case 8:
					// 身份信息
					uni.showToast({
						title:"暂未开发",
						icon:"none"
					})
					break;
				case 9:
					// 收货地址
					url= '/pagesM/pages/address_list'
					break;
				case 10:
					// 问题反馈
					url="./feedback/feedback"
					break;
				case 11:
					// 帮助中心
					url="direction/direction"
					break;
				case 12:
					// 设置
					url="/pagesM/pages/mine_setting"
					break;
				default:
					break;
			}
			if (url != '') {
			  uni.navigateTo({
			    url: url,
			  });
			}
		},
		async getMyBaseDatas() {
			let resp = await this.$api.getMyBaseDatas({
				_isReject: true,
				_isPull: this.isPull,
				memberId: this.memberId
			});
			console.log(resp)
			this.$auth.getMineBase(resp);
			this.dataDetail = resp;
			this.orderStatusNum = resp.orderStatusNum || {};
			this.userDetail = resp.user || {};
		},
		onLoadPage() {
			wx.hideShareMenu();
			this.communityInitData()
			this.isLogin = this.$auth.isAuth;
			this.memberId = this.$auth.getMemberId();
			this.getMyBaseDatas();
			// this.memberId = this.$auth.getMemberId();
			// this.getMyBaseDatas();
		},
		// 社区 begin
		communityInitData(){
			var that = this; //从全局变量中获取用户信息
			if (app.globalData.member) {
			  that.setData({
			    state: app.globalData.member.state,
			    anyHousePass: app.globalData.anyHousePass
			  });
			}
		},
		login(){
			var that = this; //从全局变量中获取用户信息
			if (app.globalData.userInfo == null) {
			  uni.login({
			    success: function () {
			      uni.getUserInfo({
			        success: function (res) {
						console.log(res);
					  that.isLogin=true
			          app.globalData.userInfo = res.userInfo;
			          that.setData({
			            userInfo: res.userInfo
			          });
			        }
			      });
			    }
			  });
			} else {
				that.isLogin=true
			  that.setData({
				userInfo: app.globalData.userInfo
			  });
			}
			if (app.globalData.member) {
			  that.setData({
			    state: app.globalData.member.state,
			    anyHousePass: app.globalData.anyHousePass
			  });
			}
		},
		//用户认证信息
		buttonMethod: function () {
		  var that = this; //会员认证状态：{ 0：未认证，1：待审审核，2：已认证 }
		  var member = app.globalData.member;
		  var anyHousePass = app.globalData.anyHousePass;
		  if (member == null) {
		    //未注册
			uni.navigateTo({
				url:"../empty/empty"
			})
		    return false;
		  } else if (member.state == 0 && !anyHousePass) {
		    //2未认证
		    uni.navigateTo({
		    	url:"../empty/empty?type=2"
		    })
		    return false;
		  } else if (member.state == 1 && !anyHousePass) {
		    //待审核
		    that.pending();
		    return false;
		  } else if (member.state == 2 || anyHousePass) {
		    return true
		  }else{
			  return false
		  }
		},
		//提示用户身份注册
		footaddmore: function () {
		  uni.showModal({
		    title: '提示',
		    content: ' 请先完成注册',
		    //cancelText:'去绑定',
		    cancelText: '取消',
		    confirmText: '去注册',
		    success: function (res) {
		      if (res.confirm) {
		        console.log('用户点击了确认-去认证'); //跳转到认证页面
		
		        uni.navigateTo({
		          url: '../register/register'
		        });
		      } else {//res.cancel
		        //绑定界面--暂时不用
		        // wx.navigateTo({
		        //   url: '/pages/binding/binding',
		        // })
		      }
		    }
		  });
		},
		//用户信息待审核中
		pending: function () {
		  let that = this;
		  var openid = uni.getStorageSync("openid");
		  let params = {};
		  params['openid'] = openid;
		  let operation = 'miniprogram/getMemberByOpenid';
		  app.globalData.postRequest(params, operation, function (res) {
		    //获取成功
		    if (res.data.result_code == 1) {
		      let member = res.data.member; //待审核
		
		      if (member.state == 1 && !res.data.anyHousePass) {
		        app.globalData.oneFailHint('亲，你的信息正在审核，请耐心等待');
		      } else if (member.state == 2) {
		        app.globalData.oneFailHint('亲，你的信息已审核通过', function () {
		          that.setData({
		            state: member.state
		          });
		        });
		      }
		
		      app.globalData.member = member;
		      app.globalData.anyHousePass = res.data.anyHousePass;
		    } else {
		      app.globalData.oneFailHint(res.data.result_msg);
		    }
		  });
		},
		// 社区 end
	},
	onReady() {
		if (!this.$auth.isAuth) {
			this.showLogin();
			return;
		} else {
			this.$refs.dialogLogin.hide();
		}
	},
	onShow() {
		//小程序审核期间隐藏掉
		let appletType= uni.getStorageSync('appletType')
		let tmp=this.mineItemList
		if (appletType=='0') {
			this.mineItemList.splice(1,1)
			this.mineItemList.splice(1,1)
		}else{
			this.mineItemList=tmp
		}
		
		
		if (this.isFirst) {
			this.isFirst=false
		}else{
			
		}
		this.onShowPage();
		wx.hideShareMenu();
		this.communityInitData()
		this.isLogin = this.$auth.isAuth;
		this.memberId = this.$auth.getMemberId();
		this.getMyBaseDatas();
	},
	onPullDownRefresh() {
		this.onPullDownRefreshPage();
	}
};
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.pageBg {
		// background-color: #FFFFFF;
	}
   button::after {
	  border: none;
	}
 .header {
	// border-bottom-left-radius: 20rpx;
	border-bottom-right-radius: 60rpx;
	//todo
	background-image: url(http://139.9.103.171:1888/miniofile/app/bg.png);
	height: 480upx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.member_head_img {
		margin-right: 30upx;
		image {
			//todo
			width: 110upx;
			height:110upx;
			border-radius: 59rpx;
		}

		.avatar-wrap {
			display: inline-flex;
			border: 0;
			background-color: transparent;
		}
	}

	.no_login {
		display: flex;
		flex-direction: column;
		.no_login_btn {
			border-radius: 25px;
			//todo
			font-size: 32upx;
			color: #fff;
			width: fit-content;
			padding: 0 15upx;
			height: 60upx;
			line-height: 60upx;
			background: transparent;
		}
	}

	.member_info {
		display: flex;
		flex-direction: column;
		.member_name_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			.member_name { 
				font-size: 40upx;
				color: #fff;
				font-weight: bold;
			}
			.member_level {
				background: #ffc600;
				color: #fff;
				font-size: 22upx;
				border-radius: 4upx;
				padding: 5upx 10upx;
				margin-left: 10upx;
			}
		}

		.member_phone_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			.member_phone { 
				font-size: 24upx;
				color: #FFFFFF;
			}

			image {
				width: 19upx;
				height: 19upx;
				padding: 20upx;
			}
		}
	}

	.member_benefits {
		background: #fff;
		width: 180upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: center;
		border-radius: 27upx 0px 0px 27upx;
		height: 54upx;
		text-align: center;
		position: absolute;
		right: 0;

		image {
			width: 26upx;
			height: 23upx;
			padding: 0 10upx 0 30upx;
		}

		.member_benefits_text {
			font-size: 24upx;
			color: $dt-color-primary;
			letter-spacing: 2upx;
		}
	}

	button::after {
		border: none;
	}
}

.coupon_point {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 110upx;
	background: #fff;
	justify-content: space-around;

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;

		.item_box {
			display: flex;
			flex-direction: row;
			align-items: center;
			letter-spacing: 2upx;

			.item_content {
				color: $dt-color-primary;
				font-size: 34upx;
			}

			.item_unit {
				color: $dt-color-primary;
				font-size: 22upx;
				margin-top: 6upx;
			}
		}

		.item_text {
			color: #333333;
			font-size: 22upx;
		}
	}

	.line {
		width: 1upx;
		height: 50upx;
		background: #e5e5e5;
	}
}

.mine_order_statue {
	//todo
	box-shadow: 0 10rpx #e7f1fd ;
	margin: 40upx 20upx 0;
	background: #fff;
	padding: 10upx 20upx;
	border-radius: 20rpx;
	.order_wrap {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		.mine_order_text {
			font-size: 28upx;
			font-weight: bold;
			color: #333333;
		}

		.jump_all_order {
			display: flex;
			flex-direction: row;
			align-items: center;

			text {
				color: #999999;
				font-size: 22upx;
				margin-right: 10upx;
			}

			image {
				width: 10upx;
				height: 18upx;
			}
		}
	}

	.order_statue_list {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		.order_statue_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			margin-top: 32upx;
			image {
				width: 40upx;
				height: 40upx;
			}

			text {
				font-size: 24rpx;
				color: #333333;
				letter-spacing: 1upx;
				margin-top: 10upx;
			}

			.tip_count {
				position: absolute;
				right: 0upx;
				top: -6rpx;
				width: 24upx;
				height: 24upx;
				border-radius: 50%;
				background-color: #ff3b30;
				color: #fff;
				font-size: 18upx;
				text-align: center;
				line-height: 24upx;
			}
		}
	}
}

.item_list {
	display: flex;
	flex-direction: column;
	background: #fff;
	margin: 20rpx;
	border-radius: 20rpx;
	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		height: 90upx;
		border-bottom: 1upx solid #f1f1f1;

		.item_content {
			display: flex;
			flex-direction: row;
			align-items: center;

			image {
				width: 42upx;
				height: 42upx;
			}

			text {
				font-size: 28upx;
				color: #333333;
				margin-left: 20upx;
			}
		}

		image {
			width: 10upx;
			height: 18upx;
		}
	}
	
	.item:first-child{
		border: none;
	}

	.item:last-child {
		border: none;
	}
}
</style>