CommunityApp/pages/wode/wode2.vue

<template>
<view class="">
	<view class="pageBg">
		<view  class="header">
			<DtCustomBar title="我的"></DtCustomBar>
			<view @tap="tapToWhich('/pagesM/pages/mine_info')" 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:1888/img/image/avatar.png"></image>
						</button>
					</block>
					<image v-else src="http://139.9.103.171:1888/img/image/avatar.png"></image>
				</view>
				<view v-if="isLogin" class="member_info">
					<view class="member_name_box">
						<view class="member_name">{{ userDetail.username }}</view>
					</view>
					<view class="member_name_box">
						<view class="member_mobile">{{shopPhone}}</view>
					</view>
				</view>
				<view v-else class="no_login"><button class="no_login_btn">游客(未登录)</button></view>
				<view style="flex:1"></view>
				<image src="/static/wode/item_setting_icon.png" mode="aspectFit" @tap.stop="tapOther(1)" style="width: 56upx;height: 56upx;"></image>
			</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>
		<view class="mine_order_statue">
			<view class="order_wrap">
				<view class="mine_order_text">我的订单</view>
				<view @tap="tapToOrder(0)" class="jump_all_order">
					<text style="color:#C1C1C1;font-size: 24upx;">查看全部</text>
					<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
				</view>
			</view>
			<view class="order_statue_list">
				<view class="order_statue_item" v-for="(item, index) in orderStateList" :key="index" @tap="tapToOrder(item.state)">
					<image :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.statueName }}</text>
					<!-- 待付款数量 -->
					<view v-if="index == 0 && orderStatusNum.pendingPayment > 0" class="tip_count">{{ orderStatusNum.pendingPayment }}</view>
					<!-- 待发货数量 -->
					<view v-if="index == 1 && orderStatusNum.pendingShipment > 0" class="tip_count">{{ orderStatusNum.pendingShipment }}</view>
					<!-- 待收货数量 -->
					<view v-if="index == 2 && orderStatusNum.shipped > 0" class="tip_count">{{ orderStatusNum.shipped }}</view>
					<!-- 待评论数量 -->
					<view v-if="index == 3 && orderStatusNum.pendingReview > 0" class="tip_count">{{ orderStatusNum.pendingReview }}</view>
					<!-- 售后数量 -->
					<view v-if="index == 4 && orderStatusNum.afterSale > 0" class="tip_count">{{ orderStatusNum.afterSale }}</view>
				</view>
			</view>
		</view>
		<view class="item_list">
			<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="item.index==0" style="padding-right: 16rpx;color: #D43A39;font-size: 26rpx;">{{authStatus}}</text>
					<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
				</view>
			</view>
		</view>
		<!-- 微信客服 -->
		<DtService />
	
		<DtLogin ref="dialogLogin" @signIn="onSignIn" />
	</view>
</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 {
			isFirst:false,
			//社区 begin
			state: null,
			anyHousePass: false,
			//社区end
			orderStateList: [
				{
					statueName: '待付款',
					icon: 'http://139.9.103.171:1888/img/image/wait_pay.png',
					count: 1,
					state: 1
				},
				{
					statueName: '待发货',
					icon: 'http://139.9.103.171:1888/img/image/wait_ship.png',
					count: 2,
					state: 2
				},
				{
					statueName: '待收货',
					icon: 'http://139.9.103.171:1888/img/image/wait_receipt.png',
					count: 2,
					state: 3
				},
				{
					statueName: '待评价',
					icon: 'http://139.9.103.171:1888/img/image/wait_comment.png',
					count: 2,
					state: 5
				},
				{
					statueName: '退款/售后',
					icon: 'http://139.9.103.171:1888/img/image/wait_refund.png',
					count: 2,
					state: 7
				}
			],
			mineItemList: [
				{
					itemName: '住户认证',
					itemIcon: '/static/icon/renzheng.png',
					index:0
				},
				{
					itemName: '我的消息',
					itemIcon: '/static/icon/msg.png',
					index:1
				},
				{
					itemName: '收货地址',
					itemIcon: '/static/icon/address.png',
					index:2
				},
				{
					itemName: '问题反馈',
					itemIcon: '/static/icon/fankui.png',
					index:3
				},
				{
					itemName: '客服中心',
					itemIcon: '/static/icon/kefu.png',
					index:4
				},
				{
					itemName: '使用说明',
					itemIcon: '/static/icon/shuoming.png',
					index:5
				},
				

			],
			//商城绑定的手机号
			shopPhone:'',
			memberId: '',
			dataDetail: {},
			orderStatusNum: {},
			userDetail: {},
			isLogin: false,
		};
	},
	computed: {
		orderState() {
			return this.$global.orderState;
		},
		//社区begin
		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 "未注册"
				  }
			  }
		},
		//社区 end
	},
	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(state) {
			if (!this.$auth.isAuth) {
				this.showLogin();
				return;
			}
			uni.navigateTo({
				url: '/pagesM/pages/mine_order_list?state=' + state
			});
		},
		tapOther(key){
			if(key==1){
				uni.navigateTo({
					url: '/pagesM/pages/mine_setting'
				});
			}
		},
		onShareAppMessage: function(e) {
			return {
				path: 'pages/index/index'
			}
		},
		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(idx) {
			if (idx==0) {
				//住户认证
				this.buttonMethod(1)
				return
			}else if (idx==1) {
				//我的消息
				this.buttonMethod(2)
				return
			}else if (idx==5) {
				//使用教程
				this.buttonMethod(3)
				return
			}
			if (!this.$auth.isAuth) {
				this.showLogin();
				return;
			}
			switch (idx) { 
				case 2: // 收货地址
					uni.navigateTo({
						url: '/pagesM/pages/address_list'
					});
					break;
				case 3: // 问题反馈
					uni.navigateTo({
						url:"./feedback/feedback"
					})
					break;
				case 4: // 客服中心
					let phone=this.dataDetail.serviceTel
					console.log(phone);
					this.makePhoneCall(phone);
					break;
				default:
					break;
			}
		},
		async getMyBaseDatas() {
			let resp = await this.$api.getMyBaseDatas({
				_isReject: true,
				_isPull: this.isPull,
				memberId: this.memberId
			});
			this.shopPhone=resp.user.mobile
			console.log(this.shopPhone);
			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();
		},
		// 社区 begin
		communityInitData(){
			var that = this; //从全局变量中获取用户信息
			if (app.globalData.member) {
			  that.setData({
			    state: app.globalData.member.state,
			    anyHousePass: app.globalData.anyHousePass
			  });
			}
		},
		//用户认证信息
		buttonMethod: function (type) {
		  if (type == 3) {
		    uni.navigateTo({
		      url: 'direction/direction'
		    });
		    return;
		  }
		  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;
		  } else if (member.state == 0 && !anyHousePass) {
		    //2未认证
		    uni.navigateTo({
		    	url:"../empty/empty?type=2"
		    })
		    return;
		  } else if (member.state == 1 && !anyHousePass) {
		    //待审核
		    that.pending();
		    return;
		  } else if (member.state == 2 || anyHousePass) {
		    //已认证
		    if (type == 1) {
		      uni.navigateTo({
		        url: 'myInfo/myInfo'
		      });
		    } else if (type == 2) {
		      uni.navigateTo({
		        url: '/pages/wode/news/news'
		      });
		    }
		  }
		},
		//提示用户身份注册
		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
	},
	onLoad() {
		this.isFirst=true
	},
	onReady() {
		if (!this.$auth.isAuth) {
			this.showLogin();
			return;
		} else {
			this.$refs.dialogLogin.hide();
		}
	},
	onShow() {
		if (this.isFirst) {
			this.isFirst=false
		}else{
			this.onShowPage();
			this.onLoadPage()
		}
	},
	onPullDownRefresh() {
		this.onPullDownRefreshPage();
	}
};
</script>
<style lang="scss" scoped>
	.pageBg {
		background-color: #F6F4F5;
	}
	button::after {
		  border: none;
		}
.header {
	background-image: url(http://139.9.103.171:1888/img/image/mine_head_bg.png);
	height: 500upx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.member_head_img {
		margin-right: 30upx;
		image {
			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;
			font-size: 26upx;
			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 {
				padding-bottom: 20rpx;
				font-size: 32upx;
				color: #fff;
				font-weight: bold;
			}
			.member_mobile {
				padding-bottom: 10rpx;
				font-size: 26upx;
				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 { 
				margin-top: -20rpx;
				font-size: 24upx;
				color: #999999;
			}

			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 {
	margin: -100upx 20upx 0;
	background: #fff;
	padding: 30upx 40upx;
	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 #e5e5e5;

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

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

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

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

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