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="content" style="display: flex;" v-if="vuex_isAuth">
					<view class="userinfo-avatar">
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<view class="center text-white margin-left-10" style="font-size: 34			rpx	;">
						<text >{{username || '微信用户'}}</text>
					</view>
				</view>

				<view class="content" style="display: flex;" v-else @click="goLogin()">
					<image class="userinfo-avatar" style="border: none;"
						src="https://wuye.nxzhsq.cn/oss/group1/M00/00/01/iwlnq1_AYZqAb30pAAAQNvkj3Wk302.png" mode="">
					</image>
					<view class="center text-white margin-left-10" style="font-size: 30rpx;">
						<text>用户未登录</text>
					</view>
				</view>
			</view>
			<view class="mine_order_statue">
				<view class="cu-list grid col-4 no-border margin-top-sm">
					<view class="cu-item" @click="tapToMenu(item)" 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"  v-if="item.path=='logout'?vuex_isAuth:true" v-for="(item, index) in systemItemList"
					:key="index" @tap="tapToMenu(item)">
					<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="https://szsq.nxzhsq.cn/community/miniofile/image/arrow.png"></image>
					</view>
				</view>
			</view>
			<view class="bg-white" style="80rpx">

			</view>
		</view>
		<DtService />
	</view>
</template>

<script>
	var app = getApp()
	import DtService from '../../comps/dt_service.vue';
	import DtCustomBar from '../../comps/dt_custom_bar.vue'
	export default {
		components: {
			DtService,
			DtCustomBar
		},
		data() {
			return {
				height: '',
				//todo
				gridList: [{
						icon: '../../static/wode/renliang.png',
						title: "通行人脸",
						badge: 0,
						auth: true,
						path: '/pages/uploadFace/uploadFace',
					},
					{
						icon: '../../static/wode/churu.png',
						title: "出入记录",
						badge: 0,
						auth: true,
						path: '/pages/wode/travelRecord/travelRecord',
					},
					{
						icon: '../../static/wode/wuye.png',
						title: "我的报修",
						badge: 0,
						auth: true,
						path: '../services/property/list/list'
					},
					{
						icon: '../../static/wode/contact.png',
						title: "联系物业",
						badge: 0,
						auth: false,
						path: "联系物业"
					}

				],
				isFirst: false,
				//社区 begin
				userInfo: null,
				//微信用户信息
				state: null,
				anyHousePass: false,
				//社区end
				systemItemList: [{
						itemName: '住户认证',
						itemIcon: '/static/wode/renzheng.png',
						auth: true,
						path: "myInfo/myInfo"
					},
					{
						itemName: '问题反馈',
						auth: true,
						itemIcon: '/static/wode/fankui.png',
						path: "./feedback/feedback",
						index: 10
					},
					// {
					// 	itemName: '帮助中心',
					// 	auth: false,
					// 	path: "direction/direction",
					// 	itemIcon: '/static/wode/shuoming.png',
					// 	index: 11
					// },
					{
						itemName: '系统设置',
						auth: false,
						path: "/pagesM/pages/mine_setting",
						itemIcon: '/static/wode/setting.png',
						index: 12
					},
					{
						itemName: '退出登录',
						auth: false,
						path: "logout",
						itemIcon: '/static/wode/logout.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: {
			goLogin() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			},
			async tapGetUserInfo(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() {
				this.$u.toast('暂未开放')
				return
				if (!this.$auth.isAuth) {
					this.showLogin();
					return;
				}
				uni.navigateTo({
					url: '/pagesM/pages/mine_order_list'
				});
			},
			tapToCar() {
				this.$u.toast('暂未开放')
				return
				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
				});
			},
			logout() {
				uni.showModal({
					title: "提示",
					content: "是否退出登录？",
					success: (res) => {
						if (res.confirm) {
							uni.clearStorage()
							this.$u.vuex('vuex_isAuth', false)
							this.$u.vuex('vuex_member', null)
							this.$u.vuex('vuex_own_room_list', null)
							this.$u.vuex('vuex_auth_audit_count', 0)
							this.$u.vuex('vuex_relationshipType', -1)
							app.globalData.member = null
							app.globalData.userInfo = null
							this.state = null,
								this.anyHousePass = false
							this.onLoadPage()
							this.showPage()
						}
					}
				})
			},
			tapToMenu(item) {
				if (item.path == 'logout') {
					this.logout()
					return
				}
				if (item.path == '联系物业') {
					let phone = uni.getStorageSync("personTel")
					if (this.$isEmpty(phone)) {
						this.$u.toast('暂无电话')
					} else {
						this.makePhoneCall(phone);
					}
					return
				}
				if (!item.auth) {
					uni.navigateTo({
						url: item.path
					})
					return
				}
				if (this.vuex_isAuth) {
					if (this.buttonMethod()) {
						uni.navigateTo({
							url: item.path
						})
					}
				} else {
					this.goLogin()
				}
			},
			tapToMenuOld(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;
					case 13:
						//出入记录
						if (this.buttonMethod()) {
							uni.navigateTo({
								url: "travelRecord/travelRecord"
							})
						}
						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 || {};
			},
			getPageCtx(idx = 0) {
				let pages = getCurrentPages()
				if (pages.length > 0) {
					return pages[pages.length - 1 - idx] || {}
				}
				return {}
			},
			onLoadPage() {
				wx.hideShareMenu();
				this.communityInitData()
				this.memberId = this.$auth.getMemberId();
				// this.memberId = this.$auth.getMemberId();
			},
			// 社区 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
			showPage() {
				//小程序审核期间隐藏掉
				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();
			}
		},
		onShow() {
			this.showPage()
		},
		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(https://szsq.nxzhsq.cn/community/miniofile/app/bg.png);
		height: 400upx;
		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: 0upx 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;
		}
	}



	.content {
		display: flex;

		.userinfo-avatar {
			overflow: hidden;
			display: block;
			width: 100rpx;
			height: 100rpx;
			margin: 20rpx 20rpx 40rpx;
			border-radius: 50%;
			border: 1rpx solid #fff;
		}
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>