mh/pages/tabbar/me.vue

<template>
	<view class="contant">
		<!-- S 头部 -->
		<view class="top">
			<view class="vheight"></view>
			<!-- 用户 -->
			<view class="userBox">
				<view class="user-main flexs" @click="navTo('/pages/me/set')">
					<view class="user-avatar"><image :src="info.avatar" mode="aspectFill"></image></view>
					<text>{{ info.nickname }}</text>
				</view>
				<view class="user-ts" @click="navTo('/pagesB/pages/server')">
					<image src="../../static/image/tabbar/ts.png"></image>
					<view class="user-ts-font">投诉</view>
				</view>
			</view>
			<view class="userMoney">
				<view class="userMoney-item" @click="navTo('/pages/me/wallet')">
					<view class="userMoney-item-bg"><image src="../../static/image/tabbar/jinbi.png" mode=""></image></view>
					<view class="userMoney-item-font">金币</view>
					<view class="userMoney-item-font">{{ info.coin || 0 }}</view>
				</view>
				<view class="userMoney-item" @click="navTo('/pages/me/balance')">
					<view class="userMoney-item-bg"><image src="../../static/image/tabbar/yuee.png" mode=""></image></view>
					<view class="userMoney-item-font">余额</view>
					<view class="userMoney-item-font">{{ info.money || 0 }}</view>
				</view>
				<view class="userMoney-item" @click="toMyBox()">
					<view class="userMoney-item-bg"><image src="../../static/image/tabbar/baobei.png" mode=""></image></view>
					<view class="userMoney-item-font">宝贝数</view>
					<view class="userMoney-item-font">{{ bbs }}</view>
				</view>
			</view>
		</view>
		<!-- E 头部-->
		<!-- 中间 -->
		<view class="order">
			<view class="order-main">
				<view class="order-box">
					<view class="order-box-title flex">
						<view class="order-box-title-font">我的订单</view>
						<view class="order-box-title-icon flexs" @click="goOrderDeatil(0)">
							<text>全部订单</text>
							<image src="/static/image/publice/jinruer@2x.png" mode=""></image>
						</view>
					</view>
					<view class="order-info flex">
						<view class="order-info-item center" v-for="(item, index) in orderList" :key="index" @click="goOrderDeatil(index)">
							<image :src="item.image" mode=""></image>
							<text>{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tool">
				<view class="tool-box center" v-for="(item, index) in footerList" :key="index" @click="nav(item)">
					<view class="tool-box-item">
						<image :src="item.image" mode=""></image>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="page-btm" style="padding-top: 20rpx;">©2022 海南恒智文化传媒有限公司 版权所有</view>
		<!-- <view class="page-btm" @click="gocx" style="padding-bottom: 10rpx;">浙ICP备2021013190号-9</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			topList: [
				{
					image: '/static/image/me/hegui@2x.png',
					name: '我的盒柜',
					url: ''
				},
				{
					image: '/static/image/me/jilu.png',
					name: '开箱记录',
					url: ''
				}
			],
			orderList: [
				{
					image: '/static/image/me/daifahuo@2x.png',
					name: '待发货'
				},
				{
					image: '/static/image/me/yifahuo@2x.png',
					name: '已发货'
				},
				{
					image: '/static/image/me/succed.png',
					name: '已完成'
				}
			],
			footerList: [
				{
					image: '/static/image/me/hegui@2x.png',
					name: '我的盒柜',
					url: '/pages/tabbar/box'
				},
				{
					image: '/static/image/me/jilu.png',
					name: '开箱记录',
					url: '/pages/me/record'
				},
				{
					image: '/static/image/me/yue@2x.png',
					name: '我的余额',
					url: '/pages/me/balance'
				},
				// {
				// 	image:'/static/image/me/shoucang@2x.png',
				// 	name:'提现',
				// 	url:'/pages/me/deposit'
				// },
				{
					image: '/static/image/me/shoucang@2x.png',
					name: '我的收藏',
					url: '/pages/me/coll'
				},
				{
					image: '/static/image/me/fenxiang@2x.png',
					name: '分享赚钱',
					url: '/pagesA/pages/invite'
				},
				{
					image: '/static/image/me/dizhi@2x.png',
					name: '收货地址',
					url: '/pages/me/address'
				},
				{
					image: '/static/image/me/kf1.png',
					name: '联系客服',
					url: '/pagesB/pages/server'
				},
				{
					image: '/static/image/me/shezhi@2x.png',
					name: '设置',
					url: '/pages/me/set'
				}
			],
			info: {}, //个人信息
			bbs: 0
		};
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		toMyBox() {
			uni.switchTab({ url: '/pages/tabbar/box' });
		},
		//头部
		changeTop(index) {
			index == 0 ? uni.navigateTo({ url: '/pages/me/myBox' }) : uni.navigateTo({ url: '/pages/me/record' });
		},
		//去我的订单
		goOrderDeatil(index) {
			uni.navigateTo({ url: '/pages/me/order?type=' + index });
		},
		nav(item) {
			uni.navigateTo({
				url: item.url,
				fail() {
					uni.switchTab({
						url: item.url
					});
				}
			});
		},
		//获取个人信息
		getuserInfo() {
			this.$api
				.userinfo()
				.then(res => {
					if (res.code === 1) {
						this.info = res.data;
					}
				})
				.catch(res => {
					console.log(res);
				});
		},
		getbbs() {
			this.$api.myBox({ status: 1, page: 1, msg: '数据加载中' }).then(res => {
				console.log(res, '123456');
				this.bbs = res.data.total;
			});
		}
	},
	onShow() {
		this.getuserInfo();
		this.getbbs();
	}
};
</script>

<style lang="scss">
.vheigh {
	height: var(--status-bar-height);
}
.user-ts {
	padding-right: 27rpx;
	position: relative;
	z-index: 22;
	display: flex;
	flex-direction: column;
	align-items: center;
	image {
		width: 42rpx;
		height: 48rpx;
	}
	.user-ts-font {
		margin-top: 16rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fafafa;
	}
}
.top {
	width: 750rpx;
	height: 456rpx;
	background: url(https://www.chaomangdao.com/image/xxbj.png);
	background-size: 100%;
	.userBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.userMoney {
		padding: 0 27rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.userMoney-item {
			width: 225rpx;
			height: 145rpx;
			position: relative;
			padding: 20rpx 16rpx;
			.userMoney-item-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 225rpx;
				height: 145rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.userMoney-item-font {
				position: relative;
				z-index: 2;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #fafafa;
			}
		}
	}
}
.user-main {
	image {
		width: 100rpx;
		height: 100rpx;
		margin-right: 26rpx;
		border-radius: 50%;
		position: relative;
		left: 40rpx;
		top: 40rpx;
	}
	text {
		color: #000000;
		font-size: 36rpx;
		margin-left: 26rpx;
	}
}
.user-main .user-avatar {
	width: 180rpx;
	height: 180rpx;
}
.order {
	margin-top: 30rpx;
	padding: 0 30rpx;
	padding-bottom: 48rpx;
	.order-main {
		padding: 0 24rpx;
		margin-bottom: 20rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		.order-main_nav {
			border-bottom: 2rpx solid #f7f7f7;
			.order-main_nav_li {
				width: 50%;
				height: 86rpx;
				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
				}
				text {
					color: #000000;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
		.order-box {
			padding: 0 14rpx 30rpx 14rpx;
			.order-box-title {
				padding: 30rpx 0 35rpx 0;
			}
			.order-box-title-font {
				color: #010101;
				font-size: 28rpx;
				font-weight: bold;
			}
			.order-box-title-icon {
				image {
					width: 22rpx;
					height: 22rpx;
					margin-left: 10rpx;
				}
				text {
					color: #999999;
					font-size: 22rpx;
				}
			}
			.order-info {
				.order-info-item {
					flex-direction: column;
					image {
						width: 44rpx;
						height: 44rpx;
						margin-bottom: 10rpx;
					}
					text {
						color: #000000;
						font-size: 22rpx;
					}
				}
			}
		}
	}
	.order_con {
		background: #ffffff;
		padding: 0 30rpx;
		margin-bottom: 2rpx;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		.order_con_head {
			padding: 30rpx 0;
			color: #010101;
			font-size: 28rpx;
			font-weight: bold;
		}
		.order_con_gold {
			padding: 22rpx 0 26rpx 0;
			border-top: 2rpx solid #f7f7f7;
			.order_con_gold_l {
				text {
					color: #010101;
					font-size: 28rpx;
					&:last-child {
						font-weight: bold;
					}
				}
			}
			.order_con_gold_btn {
				width: 100rpx;
				height: 44rpx;
				color: #ffffff;
				background: -webkit-linear-gradient(0deg, #89f7fe 0%, #66a6ff 100%);
				border-radius: 22rpx;
			}
		}
	}
	.tool {
		width: 692rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		margin: 20rpx auto 0;
	}
	.tool-box {
		width: calc(100% / 4);
		float: left;
		text-align: center;
		padding: 30rpx;
		margin-bottom: 2rpx;
		background: #ffffff;
		border-radius: 20rpx;
		.tool-box-item {
			image {
				width: 50rpx;
				height: 50rpx;
				display: block;
				margin: 0 auto;
			}
			text {
				color: #000000;
				font-size: 28rpx;
				margin-top: 20rpx;
				display: block;
			}
		}
		.tool-box_go {
			width: 22rpx;
			height: 22rpx;
		}
	}
}
.txmx {
	float: right;
	font-weight: 400;
}
.page-btm {
	clear: both;
	background-color: #f5f5f5;
	font-size: 26rpx;
	text-align: center;
	color: #d6d6d8;
}
</style>