CommunityApp/pagesM/pages/mine.vue

<template>
	<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 class="member_level">钻石卡</view> -->
					</view>
					<!-- <view v-if="userDetail.mobile" class="member_phone_box">
						<view class="member_phone">{{ userDetail.mobile }}</view>
						<image src="http://139.9.103.171:1888/img/image/edit_icon.png"></image>
					</view> -->
				</view>
				<view v-else class="no_login"><button class="no_login_btn">游客(未登录)</button></view>
				<view style="flex:1"></view>
				<!-- <view v-if="isLogin" @tap.stop="tapToWhich('/pages/mine_interest')" class="member_benefits">
		  <image src="http://139.9.103.171:1888/img/image/diamond_icon.png"></image>
		  <view class="member_benefits_text">会员权益</view>
		</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>
<!-- 		<view class="coupon_point" v-if="false">
			<view @tap="tapToWhich('/pages/coupon_list')" class="item">
				<view class="item_box">
					<view class="item_content">1</view>
					<view class="item_unit">张</view>
				</view>
				<text class="item_text">优惠券</text>
			</view>
			<view class="line"></view>
			<view @tap="tapToWhich('/pages/integral')" class="item">
				<view class="item_box">
					<view class="item_content">100</view>
					<view class="item_unit"></view>
				</view>
				<text class="item_text">我的积分</text>
			</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(index,item.itemName)">
				<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;color: #D43A39;font-size: 26rpx;">已认证</text>
					<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
				</view>
			</view>
		</view>
		<!-- 微信客服 -->
		<DtService />

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

<script>
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 {
			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: 'http://139.9.103.171:1888/img/image/item_problem_feedback.png'
				},
				{
					itemName: '我的消息',
					itemIcon: 'http://139.9.103.171:1888/img/image/item_problem_feedback.png'
				},
				{
					itemName: '收货地址',
					itemIcon: 'http://139.9.103.171:1888/img/image/item_address_icon.png'
				},
				{
					itemName: '问题反馈',
					itemIcon: 'http://139.9.103.171:1888/img/image/item_problem_feedback.png'
				},
				{
					itemName: '客服中心',
					itemIcon: 'http://139.9.103.171:1888/img/image/item_concat_icon.png'
				},
				{
					itemName: '使用说明',
					itemIcon: 'http://139.9.103.171:1888/img/image/item_problem_feedback.png'
				},
				

			],
			memberId: '',
			dataDetail: {},
			orderStatusNum: {},
			userDetail: {},
			isLogin: false,
		};
	},
	computed: {
		orderState() {
			return this.$global.orderState;
		}
	},
	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) {
			console.log(143, resp);
			this.$util.refreshPage(['pages/home', 'pages/shop_car']);
			this.onPullDownRefreshPage();
		},
		tapToWhich(aimUrl) {
			if (!this.$auth.isAuth) {
				this.showLogin();
				return;
			}
			uni.navigateTo({
				url: aimUrl
			});
		},
		tapToOrder(state) {
			if (!this.$auth.isAuth) {
				this.showLogin();
				return;
			}
			// console.log(180, state)
			// if(state==7){
			//   uni.navigateTo({
			//     url: '/pages/mine_sale_list'
			//   })
			// }else{
			uni.navigateTo({
				url: '/pagesM/pages/mine_order_list?state=' + state
			});
			// }
		},
		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(idx,name) {
			if (!this.$auth.isAuth) {
				this.showLogin();
				return;
			}
			if(name=='分销商品'&&!this.$auth.isPromoter())return;
			switch (idx) { 
				case 0: // 分销商品
					uni.navigateTo({
						url: '/pagesM/pages/discounts_goods'
					});
					break; 
				case 1: // 团长收益
					uni.navigateTo({
						url: '/pagesM/pages/mine_income'
					}); 
					break;
				case 2: // 在线客服
					this.makePhoneCall(this.dataDetail.serviceTel);
					break;
				case 3: // 收货地址
					uni.navigateTo({
						url: '/pagesM/pages/address_list'
					});
					break;
				case 4: // 快速取货
					uni.navigateTo({
					  url: "/pagesM/pages/claim_goods"
					})
					break;
				case 5: // 问题反馈
					uni.navigateTo({
						url: '/pagesM/pages/user_feedback'
					});
					break;
				case 6: // 关于新邻
					uni.navigateTo({
						url: '/pagesM/pages/about_us'
					});
					break;
				case 7: // 分享商城
					
					this.onShareAppMessage();
					break;				
				
				default:
					break;
			}
		},
		// 获取会员信息
		async getData() {
			let resp = await this.$api.BCmy({
				_isShowLoading: true
			});
			resp.name = resp.username;
			this.dataDetail = resp;
		},

		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.isLogin = this.$auth.isAuth;
			this.memberId = this.$auth.getMemberId();
			this.getMyBaseDatas();
			// this.getData()
		}
	},
	onLoad() {
		wx.showShareMenu({
		  withShareTicket: true
		})
	},
	onReady() {
		if (!this.$auth.isAuth) {
			this.showLogin();
			return;
		} else {
			this.$refs.dialogLogin.hide();
		}
	},
	onShow() {
		this.onShowPage();
	},
	onPullDownRefresh() {
		this.onPullDownRefreshPage();
	}
};
</script>

<!-- 旧的主题色#8467dd -->
<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: 480upx;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.member_head_img {
		margin-right: 30upx;
		image {
			width: 88upx;
			height: 88upx;
			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 { 
				font-size: 32upx;
				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-top: 20upx;
    margin-left: 20rpx;
	margin-right: 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>