deming/pages/mine/index.vue

<template>
    <view class="mine">
        <view class="mine-top">
            <view class="top">
				<u-avatar  @click="toOtherPage('/mine/MineInfo')" :src="userInfo.member_avatar + '?' + new Date().getTime()" :size="110"></u-avatar>
				<view class="user-info">
					<view class="info-left">
						<view class="user-nickname u-line-1">{{ userInfo.member_nickname }}</view>
						<view class="user-medal" @click="toOtherPage('/mine/MedalIntroduction')">
							<image src="/static/image/mine/13.png"></image>
							<view class="rank-title">{{ userInfo.member_grade_name }}</view>
						</view>
					</view>
					<view class="info-right">
						<view class="info-phone">{{ userInfo.member_mobile | phoneFormat }}</view>
						<view class="user-rank">等级:{{ userInfo.member_level }}级</view>
					</view>
				</view>
				<view class="member-service" @click="toOtherPage('/mine/MemberServe')">会员服务</view>
			</view>
			<view class="bottom">
				<view @click="toOtherPage('/mine/GoodsCollection')">
					<view>{{ userInfo.member_fav_goods_num || 0 }}</view>
					<view>商品收藏</view>
				</view>
				<!-- <view @click="toOtherPage('/mine/StoreCollection')">
					<view>{{ userInfo.member_fav_store_num || 0 }}</view>
					<view>店铺收藏</view>
				</view> -->
				<view @click="toOtherPage('/mine/ImageTextCollection')">
					<view>{{ userInfo.member_fav_article_num || 0 }}</view>
					<view>图文收藏</view>
				</view>
				<view @click="toOtherPage('/mine/Integral')">
					<view>{{ userInfo.member_points || 0 }}</view>
					<view>积分数</view>
				</view>
				<view @click="toOtherPage('/mine/MineConcerns')">
					<view>{{ userInfo.member_snsfrend_num || 0 }}</view>
					<view>关注</view>
				</view>
			</view>
        </view>
		<view class="mine-container">
			<view class="order">
				<view class="title">
					<view class="title-text">我的订单</view>
					<view class="more" @click="toOtherPage('/order/Index')">
						<view class="title-text-more">查看全部订单</view>
						<u-icon name="arrow-right" color="#999" size="22"></u-icon>
					</view>
				</view>
				<view class="content">
					<view @click="toOtherPage('/order/Index?current=1')">
						<image src="/static/image/mine/6.png"></image>
						<view>待支付</view>
					</view>
					<view @click="toOtherPage('/order/Index?current=2')">
						<image src="/static/image/mine/35.png"></image>
						<view>待发货</view>
					</view>
					<view @click="toOtherPage('/order/Index?current=3')">
						<image src="/static/image/mine/2.png"></image>
						<view>待收货</view>
					</view>
					<view @click="toOtherPage('/order/Index?current=4')">
						<image src="/static/image/mine/1.png"></image>
						<view>试穿试送</view>
					</view>
					<view @click="toOtherPage('/order/Index?current=5')">
						<image src="/static/image/mine/37.png"></image>
						<view>拼团中</view>
					</view>
					<view @click="toOtherPage('/order/Index?current=6')">
						<image src="/static/image/mine/3.png"></image>
						<view>待评价</view>
					</view>
                    <view @click="toOtherPage('/order/Index?current=7')">
                    	<image src="/static/image/mine/9.png"></image>
                    	<view>售后</view>
                    </view>
				</view>
			</view>
			<view class="tool">
				<view class="title">我的工具</view>
				<view class="content">
					<view @click="toOtherPage('/tool/SendWash')">
						<image src="/static/image/mine/20.png"></image>
						<view>送洗</view>
					</view>
					<view @click="toOtherPage('/tool/Manicure')">
						<image src="/static/image/mine/19.png"></image>
						<view>美甲</view>
					</view>
					<view @click="toOtherPage('/tool/MineHistory')">
						<image src="/static/image/mine/18.png"></image>
						<view>足迹</view>
					</view>
					<view @click="toOtherPage('/tool/MineCoupon')">
						<image src="/static/image/mine/25.png"></image>
						<view>优惠券</view>
					</view>
				</view>
			</view>
			<view class="more-tool">
				<view class="title">更多工具</view>
				<view class="content">
					<view @click="toOtherPage('/more/Address')">
						<image src="/static/image/mine/17.png"></image>
						<view>收货地址</view>
					</view>
					<view @click="toOtherPage('/more/AfterSalesHelp')">
						<image src="/static/image/mine/38.png"></image>
						<view>售后政策</view>
					</view>
					<view @click="toOtherPage('/more/MineHelp')">
						<image src="/static/image/mine/16.png"></image>
						<view>使用帮助</view>
					</view>
					<view @click="toOtherPage('/more/Complaints')">
						<image src="/static/image/mine/15.png"></image>
						<view>投诉意见</view>
					</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState(['hasLogin', 'token'])
	},
    data() {
        return {
            userInfo: {},
        };
	},
	filters: {
		phoneFormat(value) {
			return value ? value.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2') : '';
		}
	},
	onShow() {
		// 尝试登录
		if (!this.hasLogin) {
			uni.navigateTo({
				url: "../../pageA/login/login"
			})
		}
		this.getUserInfo();
	},
	onNavigationBarButtonTap() {
		this.toOtherPage("/setting/Index");
	},
    methods: {
		getUserInfo() {
			this.$u.api.getMemberInfo().then(res => {
				// uni.stopPullDownRefresh();
				if (res.errCode == 0) {
					// this.userInfo = res.data.MemberArray;
					this.$set(this, 'userInfo', res.data.MemberArray);
				}
			})
		},
		toOtherPage(url) {
			uni.navigateTo({
				url: '/pageE' + url
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.mine {
	min-height: calc(calc(100vh - var(--window-top)));
	background: #ECECEC;
    .mine-top {
		// width: 100%;
		height: 272rpx;
		background-color: #FF7807;
		.top {
			padding: 40rpx 0 0 30rpx;
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			.user-info {
				margin-left: 30rpx;
				display: flex;
				.info-left {
					margin-right: 15rpx;
					.user-nickname {
						width: 100rpx;
						font-size: 30rpx;
						color: rgba(51,51,51,1);
						margin-bottom: 19rpx;
					}
					.user-medal {
						display: flex;
						// width: 110rpx;
						// height: 25rpx;
						background: linear-gradient(269deg,rgba(175,175,175,1) 0%,rgba(224,224,224,1) 100%);
						border-radius: 13rpx;
						align-items: center;
						padding: 0 17rpx 0 10rpx;
						> image {
							margin-right: 9rpx;
							width: 20rpx;
							height: 22rpx;
							flex-shrink: 0;
						}
						.rank-title {
							font-size: 16rpx;
							color: rgba(51,51,51,1);
						}
					}
				}
				.info-right {
					.info-phone {
						font-size: 24rpx;
						color: rgba(51,51,51,1);
						margin-bottom: 26rpx;
					}
					.user-rank {
						font-size: 24rpx;
						color: rgba(51,51,51,1);
					}
				}
			}
			.member-service {
				height: 52rpx;
				line-height: 52rpx;
				box-sizing: content-box;
				margin-left: auto;
				padding: 0 51rpx 0 22rpx;
				background: rgba(255,255,255,0.32);
				border-radius: 26rpx 0 0 26rpx;
				font-size: 26rpx;
				color:rgba(51,51,51,1);
			}
		}
		.bottom {
			display: flex;
			justify-content: space-around;
            padding: 0 10rpx;
			box-sizing: border-box;
			> view {
				text-align: center;
				font-size: 26rpx;
                font-weight: 500;
				color: #333;
				> view:first-child {
					margin-bottom: 10rpx;
				}
			}
		}
	}
	.mine-container {
		@mixin image-size($image-width, $image-height) {
			> image {
				width: $image-width !important;
				height: $image-height !important;
			}
		}
		@mixin common-mine($content-padding-top, $content-padding-bottom, $image-width, $image-height) {
			box-sizing: border-box;
			width: 750rpx;
			background: rgba(255,255,255,1);
			// border-radius: 10rpx;
			margin: 20rpx auto 0;
			.title {
				display: flex;
				align-items: center;
				height: 76rpx;
                padding: 0 20rpx;
				font-size: 28rpx;
				color: #666;
                border-bottom: 1px solid #ececec;
				// &::after {
				// 	content: "";
				// 	position: absolute;
				// 	width: 650rpx;
				// 	height: 1rpx;
				// 	background: rgba(234,234,234,1);
				// 	bottom: 0;
				// 	left: 50%;
    // 				transform: translate(-50%,0);
				// }
			}
            .title-text-more {	
                font-size: 24rpx;
                color: #999;
            }
			.content {
				padding: $content-padding-top 20rpx $content-padding-bottom;
				display: flex;
				> view {
					text-align: center;
					> image {
						width: $image-width;
						height: $image-height;
						margin-bottom: 15rpx;
						flex-shrink: 0;
					}
					> view {
						font-size: 22rpx;
						color: rgba(102,102,102,1);
					}
				}
			}
		}
		.order {
			@include common-mine(
				$content-padding-top: 22rpx, 
				$content-padding-bottom: 30rpx, 
				$image-height: 36rpx,
				$image-width: 36rpx
			);
			.title {
				justify-content: space-between;
				.more {
					display: flex;
					align-items: center;
					> image {
						width: 19rpx;
						height: 19rpx;
						margin-left: 10rpx;
						flex-shrink: 0;
					}
				}
			}
			.content {
                align-items: center;
				justify-content: space-between;
				> view {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
				}
				> view:nth-child(1){
					@include image-size($image-width: 36rpx, $image-height: 34rpx);
				}
				> view:nth-child(2){
					@include image-size($image-width: 38rpx, $image-height: 36rpx);
				}
				> view:nth-child(3){
					@include image-size($image-width: 40rpx, $image-height: 36rpx);
				}
				> view:nth-child(4){
					@include image-size($image-width: 38rpx, $image-height: 38rpx);
				}
				> view:nth-child(5){
					@include image-size($image-width: 36rpx, $image-height: 40rpx);
				}
				> view:nth-child(6){
					@include image-size($image-width: 36rpx, $image-height: 40rpx);
				}
			}
		} 
		.tool {
			@include common-mine(
				$content-padding-top: 24rpx,
				$content-padding-bottom: 25rpx, 
				$image-height: 71rpx,
				$image-width: 71rpx
			);
			.content {
				> view:not(:last-child) {
					margin-right: 58rpx;
				}
			}
		}
		 .more-tool {
			@include common-mine(
				$content-padding-top: 24rpx, 
				$content-padding-bottom: 48rpx, 
				$image-height: 71rpx,
				$image-width: 71rpx
			);
			.content {
				> view:not(:last-child) {
					margin-right: 46rpx;
				}
			}
		}
	}
}
</style>