cbz/pages/tabbar/mine/mine.vue

<template>
	<view class="content">
		<view class="hflex acenter jbetween user">
			<view class="hflex acenter" v-if="!login">
				<image src="/static/images/mine/avatar1.jpg" mode="widthFix" class="avatar"></image>
				<view class="hflex acenter" @click="toLogin">
					<view class="text_style1">立即登录</view>
					<u-icon name="arrow-right" color="#000" size="10"></u-icon>
				</view>
			</view>
			<view class="hflex acenter" v-else>
				<image :src="user.img" mode="widthFix" class="avatar"></image>
				<view class="vflex">
					<view class="hflex acenter">
						<view class="text_style1">{{user.name}}</view>
						<view class="setting" @click="toSetting">设置</view>
					</view>
					<view class="member_icon">
						<image src="/static/images/mine/member_icon.png" style="width: 136rpx;height: 48rpx;"></image>
					</view>
				</view>
			</view>
			<view class="user_right" @click="toMessage">
				<image src="/static/images/mine/message.png" mode="widthFix" class="message_icon"></image>
				<view class="message" v-if="user.message_num > 0">{{user.message_num}}</view>
			</view>
		</view>
		<view class="member hflex acenter jbetween"  @click="toMember">
			<view class="vflex">
				<view class="hflex acenter">
					<image src="/static//images/mine/huiyuan.png" mode="widthFix" style="width: 40rpx;"></image>
					<view class="member_name">船百知会员</view>
				</view>
				<view class="member_detail" v-if="user.is_member">{{user.member_date}}到期</view>
				<view class="member_detail" v-else>开通会员立享优惠</view>
			</view>
			<view class="hflex acenter jbetween member_btn">
				<view v-if="user.is_member">立即续费</view>
				<view v-else>去开通</view>
				<image src="/static/images/mine/btn_right.png" mode="widthFix" style="width: 32rpx;margin-left: 14rpx;"></image>
			</view>
		</view>
		<view class="box hflex acenter jbetween">
			<view class="box_left vflex" @click="toWallet">
				<view class="left_title">我的余额</view>
				<view class="left_num" v-if="login">{{user.balance_num ? user.balance_num : 0}}</view>
				<view class="left_num" v-else>**</view>
				<view class="left_bottom">看看你的账户余额吧~</view>
			</view>
			<view class="box_right vflex" @click="toCollect">
				<view class="left_title">我的收藏</view>
				<view class="left_num" v-if="login">{{user.collect_num ? user.collect_num : 0}}</view>
				<view class="left_num" v-else>**</view>
				<view class="right_bottom">你收藏的宝藏都在这里</view>
			</view>
		</view>
		<view class="list">
			<view class="list_title">我的订单</view>
			<view class=" hflex acenter jbetween">
				<block v-for="(item,index) in order" :key="index">
					<view class="list_item vflex acenter" @click="toOrder(item.url)">
						<image :src="item.img" mode="widthFix" style="width: 56rpx;margin-bottom: 20rpx;"></image>
						<view>{{item.text}}</view>
					</view>
				</block>
			</view>
		</view>
		<view class="list">
			<view class="list_title">我的服务</view>
			<view class="hflex acenter  fwrap">
				<block v-for="(item,index) in serviceList" :key="index">
					<view class="list_item1 vflex acenter" @click="toService(item.url)">
						<image :src="item.img" mode="widthFix" style="width: 60rpx;margin-bottom: 14rpx;"></image>
						<view>{{item.text}}</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				login: false,
				user: {
					img: '/static/images/mine/avatar2.jpg',
					name: '放风筝的人',
					message_num: 0,
					is_member: 1,
					member_date: '2022-11-10',
					balance_num: 348.95,
					collect_num: 12,
				},
				order: [
					{
						id: 1,
						img: '/static/images/mine/order1.png',
						text: '生产订单',
						url: '/page_mine/pages/order/production'
					},
					{
						id: 2,
						img: '/static/images/mine/order2.png',
						text: '外协订单',
						url: '/page_mine/pages/order/outsourcing'
					},
					{
						id: 3,
						img: '/static/images/mine/order3.png',
						text: '采购订单',
						url: '/page_mine/pages/order/purchase'
					},
					{
						id: 4,
						img: '/static/images/mine/order4.png',
						text: '海运订单',
						url: '/page_mine/pages/order/oceanShipping'
					},
					{
						id: 5,
						img: '/static/images/mine/order5.png',
						text: '维修订单',
						url: '/page_mine/pages/order/repair'
					},
				],
				serviceList: [
					{
						url: '',
						img: '/static/images/mine/service1.png',
						text: '加入人才库',
						url: '/page_mine/pages/service/joinPerson'
					},
					{
						url: '',
						img: '/static/images/mine/service2.png',
						text: '成为维修工',
						url: '/page_mine/pages/service/applyMaintenance'
					},
					{
						url: '',
						img: '/static/images/mine/service3.png',
						text: '入驻船厂',
					},
					{
						url: '',
						img: '/static/images/mine/service4.png',
						text: '入驻商家',
					},
					{
						url: '',
						img: '/static/images/mine/service5.png',
						text: '实名认证',
					},
					{
						url: '',
						img: '/static/images/mine/service6.png',
						text: '我的发布',
					},
					{
						url: '',
						img: '/static/images/mine/service7.png',
						text: '我的需求',
					},
					{
						url: '',
						img: '/static/images/mine/service8.png',
						text: '意见反馈',
					},
				]
			}
		},
		onLoad() {
			that = this
			
		},
		onShow() {
			that.isLogin()
		},
		methods: {
			// 判断登录
			isLogin() {
				var token = uni.getStorageSync("token")
				if (token) {
					that.login = true
				}
			},
			// 去登陆
			toLogin() {
				$api.jump('/pages/login/password_login')
			},
			// 去设置
			toSetting() {
				$api.jump('/page_mine/pages/setting/setting')
			},
			// 去通知中心
			toMessage() {
				if(that.login) {
					$api.jump('/page_mine/pages/message/message')
				} else {
					$api.info('请先登录')
				}
			},
			// 去会员中心
			toMember() {
				if(that.login) {
					$api.jump('/page_mine/pages/member/index')
				} else {
					$api.info('请先登录')
				}
				
			},
			// 我的余额
			toWallet() {
				if(that.login) {
					$api.jump('/page_mine/pages/wallet/wallet')
				} else {
					$api.info('请先登录')
				}
				
			},
			// 我的收藏
			toCollect() {
				if(that.login) {
					$api.jump('/page_mine/pages/collect/collect')
				} else {
					$api.info('请先登录')
				}
			},
			// 我的订单
			toOrder(url) {
				if(that.login) {
					$api.jump(url)
				} else {
					$api.info('请先登录')
				}
			},
			// 我的服务
			toService(url) {
				if(that.login) {
					$api.jump(url)
				} else {
					$api.info('请先登录')
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background:url('/static/images/mine/bg.png') no-repeat;
		background-size: 100%;
		padding: 0 30rpx;
		.user {
			width: 100%;
			margin: 24rpx 0;
			.avatar {
				box-shadow: 0 8rpx 20rpx 0 #c4d8df;
				border: 4rpx solid #fff;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.text_style1 {
				color: #131415;
				font-size: 40rpx;
				margin: 0 6rpx 0 16rpx;
			}
			.member_icon {
				margin: 10rpx 0 0 16rpx;
			}
			.setting {
				margin-left: 12rpx;
				width: 64rpx;
				height: 32rpx;
				border-radius: 20rpx;
				border: 1rpx solid #526fff;
				text-align: center;
				line-height: 32rpx;
				font-size: 20rpx;
				color: #526fff;
			}
			.user_right {
				position: relative;
				.message_icon {
					width: 48rpx;
					height: 48rpx;
					
				}
				.message {
					position: absolute;
					right: -10rpx;
					top: 0;
					width: 36rpx;
					height: 24rpx;
					background-color: #fb3e32;
					border-radius: 12rpx 12rpx 12rpx 4rpx;
					font-size: 20rpx;
					color: #fff;
					text-align: center;
				}
			}
		}
		.member {
			width: 100%;
			height: 132rpx;
			background-color: #2b2b2b;
			border-radius: 16rpx;
			border: 1rpx solid ;
			box-sizing: border-box;
			padding: 20rpx;
			margin: 20rpx 0;
			.member_name {
				color: #fff;
				font-size: 32rpx;
				margin-left: 6rpx;
			}
			.member_detail {
				color: #fff;
				font-size: 22rpx;
				margin-top: 16rpx;
			}
			.member_btn {
				width: auto;
				height: 64rpx;
				background: linear-gradient(270deg,#feebc8 0%, #ffe3a4 100%);
				border-radius: 32rpx;
				box-sizing: border-box;
				padding:  28rpx;
				font-size: 24rpx;
				color: #572915;
			}
		}
		.box {
			width: 100%;
			margin-bottom: 20rpx;
			.box_left {
				background: url('/static/images/mine/balance.png') no-repeat;
				background-size: 100%;
				box-sizing: border-box;
				padding: 16rpx 24rpx;
				width: 336rpx;
				height: 180rpx;
				.left_bottom {
					width: 264rpx;
					height: 32rpx;
					background: linear-gradient(270deg, rgba(234,245,255,0) 0%, #e3eeff 100%);
					padding: 0 12rpx;
					line-height: 32rpx;
					font-size: 20rpx;
					color: #4f64af;
				}
			}
			.box_right {
				background: url('/static/images/mine//collect.png') no-repeat;
				background-size: 100%;
				box-sizing: border-box;
				padding: 16rpx 24rpx;
				width: 336rpx;
				height: 180rpx;
				.right_bottom {
					width: 264rpx;
					height: 32rpx;
					background: linear-gradient(270deg, rgba(227,255,255,0) 0%, #d4f1ff 100%);
					padding: 0 12rpx;
					line-height: 32rpx;
					font-size: 20rpx;
					color: #26b0ff;
				}
			}
			.left_title {
				font-size: 24rpx;
				color: #444;
			}
			.left_num {
				font-size: 48rpx;
				color: #444;	
				margin: 6rpx 0 6rpx;
			}
		}
		.list {
			width: 100%;
			height: auto;
			background: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.list_title {
				font-size: 26rpx;
				color: #222;
				margin-bottom: 24rpx;
				font-weight: 600;
			}
			.list_item {
				width: 20%;
				font-size: 22rpx;
				color: #333;
			}
			.list_item1 {
				width: 25%;
				margin-bottom: 40rpx;
				font-size: 24rpx;
				color: #444;
			}
		}
	}
</style>