frontend-app/pages/mine/mine.vue

<template>
	<view class="mine_warp">
		<view class="mine_header">
			<view class="mine_data" v-if="userData && Object.keys(userData).length!==0">
				<up-image src="/static/mine/avatar.png" shape="circle" width="80" height="80" bgColor="#f1f6ff00"></up-image>
				<view class="mine_info">
					<view class="mine_info_name">
						<text style="margin-right: 20rpx;">{{userData.name || '暂无昵称'}}</text>
						<up-image src="/static/mine/lv01.png" width="10" height="18" bgColor="#f1f6ff00"></up-image>
					</view>
					<view class="mine_info_id">
						<text style="margin-right: 20rpx;">ID:{{userData.inviteCode}} </text>
						<up-image src="/static/common/copy.png" width="14" height="14" bgColor="#f1f6ff00" @click="copyData(userData.inviteCode)"></up-image>
					</view>
				</view>
			</view>
			<view class="mine_no_login_data" v-else>
				<view class="mine_data">
					<up-image src="/static/mine/avater_not.png" shape="circle" width="80" height="80" bgColor="#f1f6ff00"></up-image>
					<view class="mine_info_not_login">
						未登录
					</view>
				</view>
				<view @click="jumpLogin" class="login_warp">
					<text style="margin-right: 10rpx;">立即登录</text>
					<up-image src="/static/common/right_y_st.png" width="18" height="18" bgColor="#f1f6ff00"></up-image>
				</view>
			</view>
		</view>
		<view class="mine_content_warp">
			<!-- 我的订单 -->
			<view class="mine_content_comm_warp">
				<view class="mine_order_title">
					<view>我的订单</view>
					<view class="mine_order_title_all" @click="jumpOrder({})">
						<view style="margin-right: 10rpx;">全部</view>
						<up-image src="/static/common/right.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
					</view>
				</view>
				<view class="mine_order_list">
					<view class="mine_fontsize_comm_warp order_list_item" v-for="item in orderTemplList" :key="item.id" @click="jumpOrder(item)">
						<up-image :src="item.url" width="30" height="30" bgColor="#f1f6ff00"></up-image>
						<view>{{item.title}}</view>
					</view>
				</view>
			</view>
			<!-- 应用 -->
			<view class="mine_content_comm_warp mine_top_comm_warp apply_list">
				<view class="apply_item mine_fontsize_comm_warp" v-for="item in applyList" :key="item.id" @click="jumpTool(item)">
					<up-image :src="item.url" width="36" height="36" bgColor="#f1f6ff00"></up-image>
					<view>{{item.title}}</view>
				</view>
			</view>
			<!-- 入驻 -->
			<view class="mine_top_comm_warp enter_list">
				<view class="enter_item">
					<view>
						<view class="enter_title">商家入驻</view>
						<view class="enter_apply">
							<text class="enter_apply_title">申请</text>
							<up-image src="/static/common/right_y.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
						</view>
					</view>
					<up-image src="/static/mine/enter_sj.png" width="50" height="50" bgColor="#f1f6ff00"></up-image>
				</view>
				<view class="enter_item">
					<view>
						<view class="enter_title">企业/品牌入驻</view>
						<view class="enter_apply">
							<text class="enter_apply_title">申请</text>
							<up-image src="/static/common/right_y.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
						</view>
					</view>
					<up-image src="/static/mine/enter_pp.png" width="50" height="50" bgColor="#f1f6ff00"></up-image>
				</view>
			</view>
			<!-- 服务工具 -->
			<view class="mine_content_comm_warp mine_top_comm_warp mine_tool_warp">
				<view class="mine_tool_title">服务工具</view>
				<view class="tool_list">
					<view class="tool_item" v-for="item in toolList" :key="item.id" @click="jumpTool(item)">
						<up-image :src="item.url" width="30" height="30" bgColor="#f1f6ff00"></up-image>
						<text class="mine_fontsize_comm_warp">{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getStorageFun,USER_DATA,clear } from '@/utils/auth.js'
	import { ORDER_TYPE } from '@/utils/enumUtils.js';
	import { copyData } from '@/utils/index.js';
	
	export default {
		data() {
			return {
				userData:{},// 当前登录对象
				orderTemplList:[
					{
						id:ORDER_TYPE.UNPAID,
						title:"待支付",
						url:'/static/mine/order_unpaid.png',
						path:"/pages/mine_order/mine_order"
					},{
						id:ORDER_TYPE.UNSHIPPED,
						title:"待发货",
						url:'/static/mine/order_unshipped.png',
						path:"/pages/mine_order/mine_order"
					},{
						id:ORDER_TYPE.NOT_RECEIVE,
						title:"待收货",
						url:'/static/mine/order_notReceive.png',
						path:"/pages/mine_order/mine_order"
					},{
						id:ORDER_TYPE.SUCCEED,
						title:"待评价",
						url:'/static/mine/order_afterSale.png',
						path:"/pages/mine_order/mine_order"
					},
				],
				applyList:[
					{
						id:1,
						title:"钱包",
						url:'/static/mine/apply_purse.png',
						path:"/pages/mine_purse/mine_purse"
					},{
						id:2,
						title:"抽奖",
						url:'/static/mine/apply_prize.png',
						path:"/pages/turntable/turntable"
					},{
						id:3,
						title:"HM",
						url:'/static/mine/apply_hm.png'
					},{
						id:4,
						title:"贡献值",
						url:'/static/mine/apply_gx.png'
					},{
						id:5,
						title:"数据",
						url:'/static/mine/apply_sj.png'
					},
				],// 应用模版
				toolList:[
					{
						id:1,
						title:"IM聊天",
						url:'/static/mine/tool_im.png'
					},{
						id:2,
						title:"我的团队",
						url:'/static/mine/tool_team.png'
					},{
						id:3,
						title:"邀请好友",
						url:'/static/mine/tool_invite.png',
						path:'/pages/invite_friends/invite_friends'
					},{
						id:4,
						title:"加速次数",
						url:'/static/mine/tool_js.png'
					},{
						id:5,
						title:"地址管理",
						url:'/static/mine/tool_dz.png',
						path:'/pages/mine_address/mine_address'
					},{
						id:6,
						title:"卡券",
						url:'/static/mine/tool_kj.png'
					},{
						id:7,
						title:"联系客服",
						url:'/static/mine/tool_kf.png'
					},{
						id:8,
						title:"商学院资讯",
						url:'/static/mine/tool_sxy.png'
					},{
						id:9,
						title:"实名认证",
						url:'/static/mine/tool_sm.png',
						path:"/pages/mine_authentication/mine_authentication"
					},{
						id:10,
						title:"银行卡管理",
						url:'/static/mine/tool_card.png',
						path:'/pages/mine_bank_card/mine_bank_card'
					},
				],// 工具
			}
		},
		onShow: function() {
			this.userData = getStorageFun(USER_DATA);
		},
		methods: {
			copyData,
			/**
			 * 跳转到工具
			 * @param {Object} item
			 */
			jumpTool(item){
				if(item.path){
					uni.navigateTo({
						url:item.path,
					})
				}
			},
			jumpOrder(item){
				let path = '/pages/mine_order/mine_order'
				if(item && Object.keys(item).length!==0){
					path = '/pages/mine_order/mine_order?type='+item.id
				}
				uni.navigateTo({
					url:path,
				})
			},
			jumpLogin(){
				uni.navigateTo({
					url:'/pages/login/login',
				})
			}
		}
	}
</script>

<style lang="scss">
	.mine_warp{
		height: 100vh;
		position: relative;
		background-color: $app-bj;
	}
	.mine_header{
		height: 300rpx;
		background-image: url("data:image/png;base64,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
		background-size: 100% 100%;
		background-position: center; /* 将图片居中显示 */
		padding: 90rpx 40rpx 0;
	}
	.mine_content_warp{
		position: absolute;
		top: 278rpx;
		width: 92%;
		height: auto;
		left: 4%;
	}
	
	.mine_data{
		display: flex;
		align-items: center;
	}
	.mine_no_login_data{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.login_warp{
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 26rpx;
			color: #111111;
		}
	}
	.mine_info_not_login{
		font-weight: bold;
		font-size: 40rpx;
		color: #111111;
	}
	.mine_info{
		margin-left: 20rpx;
	}
	.mine_info_name{
		font-weight: bold;
		font-size: 40rpx;
		color: #111111;
		display: flex;
	}
	.mine_info_id{
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		display: flex;
		margin-top: 10rpx;
	}
	/* 内容公共 start */
	.mine_content_comm_warp{
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx #EEEEEE;
		border-radius: 30rpx;
		padding: 30rpx;
	}
	.mine_fontsize_comm_warp{
		font-weight: 500;
		font-size: 24rpx;
		color: #222222;
	}
	.mine_top_comm_warp{
		margin-top: 30rpx;
	}
	/* 内容公共 end */
	
	.mine_order_title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}
	.mine_order_title_all{
		display: flex;
		font-size: 20rpx;
		color: #BBBBBB;
	}
	.mine_order_list{
		display: flex;
		justify-content: space-between;
		margin: 40rpx 0 30rpx 0;
	}
	.order_list_item{
		width: 25%;
		text-align: center;
	}
	.apply_list{
		display: flex;
		justify-content: space-between;
		
	}
	.apply_item{
		width: 20%;
		text-align: center;
	}
	.enter_list{
		display: flex;
		justify-content: space-between;
	}
	.enter_item{
		width: 40%;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 12rpx 30rpx;
		align-items: center;
	}
	.enter_title{
		font-weight: bold;
		font-size: 26rpx;
		color: #333333;
	}
	.enter_apply{
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}
	.enter_apply_title{
		margin-right: 10rpx;
	}
	.mine_tool_title{
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}
	.tool_list{
		display: flex;
		flex-wrap:wrap;
		margin-top: 10rpx;
	}
	.tool_item{
		width: 25%;
		text-align: center;
		margin-top: 20rpx;
	}
</style>