material-shop-user/pages/tabbar/user/index.vue

<template>
	<view class="content u-skeleton">
		<!-- 骨架屏 -->
		<Skeleton el-color="#efefef" bg-color="#fff" :loading="loading && isFirstComeIn" :animation="true"></Skeleton>
		<!-- 我的 -->
		<image class="top-bg" src="../../../static/images/origin/topBg.png"></image>
		<view class="page-content">
			<!-- 用户未登录 -->
			<view
				v-if="userItem.name === undefined" class="user-info-box"
				@click="$jump('../../../pages_category_page2/userModule/login')"
			>
				<image class="user-image u-skeleton-circle" src="../../../static/images/origin/morentouxiang.png" mode="widthFix">
				</image>
				<view class="user-info">
					<view class="user-logoin-title u-skeleton-fillet">点击登录</view>
					<view class="user-logoin-lable u-skeleton-fillet">登录后享受更多权益~</view>
				</view>
				<image class="user-info-right" src="../../../static/images/origin/back.png"></image>
				<view class="notice">
					<view v-if="userItem.notRead > 0" class="messNum">
						{{ userItem.notRead }}
					</view>
				</view>
			</view>
			<!-- 用户已登陆 -->
			<view v-else class="user-info-box ">
				<image
					v-if="userItem.headImage" class="user-image u-skeleton-fillet" :src="userItem.headImage" mode="widthFix"
					style="border-radius: 50%;" @click="handleJump('../../../pages_category_page2/userModule/personalDetails')"
				>
				</image>
				<image v-else class="user-image" src="../../../static/images/origin/morentouxiang.png" mode="widthFix">
				</image>
				<view class="user-info">
					<view v-if="userItem.name" class="user-logoin-title">
						{{ userItem.name }}
					</view>
					<view class="experience flex-items" @click="handleJump('../../../pages_category_page1/memberCenter/index')">
						<label>成长值</label>
						<view class="experienceValue">{{ userItem.growth || 0 }} / {{ userItem.nextLevelGrowth || 0 }}</view>
					</view>
				</view>
				<view class="notice" @click="handleJump('../../../pages_category_page2/userModule/messageCenter')">
					<view v-if="userItem.notRead > 0" class="messNum">
						{{ userItem.notRead > 99 ? '99+' : userItem.notRead }}
					</view>
				</view>
			</view>
			<!-- 订单卡片 -->
			<view class="order-box">
				<view
					v-for="orderCardItem in orderCardList" :key="orderCardItem.id" class="order-item"
					@click="handleJump(orderCardItem.jumpUrl)"
				>
					<image class="order-item-image  u-skeleton-circle" :src="orderCardItem.icon" mode="widthFix">
					</image>
					<view class="order-item-text u-skeleton-fillet">{{ orderCardItem.label }}</view>
					<view v-if="userItem[orderCardItem.key] > 0" class="quan">
						{{ userItem[orderCardItem.key] }}
					</view>
				</view>
			</view>
			<!-- 第一个卡片 -->
			<view class="itemBox">
				<view v-for="item in fastCardOneList" :key="item.id" class="item-btn" @click="handleJump(item.jumpUrl)">
					<image class="item-btn-icon u-skeleton-circle" :src="item.icon" mode="widthFix">
					</image>
					<view class="item-btn-text u-skeleton-fillet">{{ item.label }}</view>
				</view>
			</view>
			<!-- 第二个卡片 -->
			<view class="itemBox">
				<view v-for="item in fastCardTwoList" :key="item.id" class="item-btn" @click="handleJump(item.jumpUrl)">
					<image class="item-btn-icon u-skeleton-circle" :src="item.icon" mode="widthFix"></image>
					<view class="item-btn-text u-skeleton-fillet">{{ item.label }}</view>
				</view>
				<!--        <button open-type="contact"
					class="item-btn btnNone">
					<image class="item-btn-icon"
					src="../../../static/images/origin/service.png"
					mode="widthFix"></image>
					<view class="item-btn-text">平台客服</view>
					</button> -->
			</view>
		</view>
		<view class="copyright">
			<text>中科鑫智 版权所有</text>
			<text>粤ICP备19086489号-3</text>
		</view>
	</view>
</template>

<script>
import Skeleton from '../../../components/Skeleton'
import { fastCardOneList, fastCardTwoList, orderCardList } from './index.data'
import { Services } from '../../../utils/services'
import { Encrypt } from '../../../utils/secret'

const NET = require('../../../utils/request')
const API = require('../../../config/api')
export default {
	components: { Skeleton },
	data() {
		return {
			isFirstComeIn: true,
			loading: true,
			orderCardList,
			fastCardOneList,
			fastCardTwoList,
			cacheUserItem: {},
			userItem: {
				headImage: '',
				name: undefined
			}
		}
	},
	onShow() {
		this.isFirstComeIn = true
		if (uni.getStorageSync('storage_key')) {
			this.cacheUserItem = uni.getStorageSync('storage_key')
		}
		this.handleGetUser()
	},
	methods: {
		/**
		 * 处理跳转
		 * @param url
		 */

		handleJump(url) {
			if (JSON.stringify(this.cacheUserItem) === '{}') {
				return this.$jump('../../../pages_category_page2/userModule/login')
			}
			if (url.startsWith('function')) {
				const [key, funcName] = url.split(':')
				this[funcName]()
			} else {
				this.$jump(url)
			}
		},

		/**
		 * 获取用户信息
		 */

		handleGetUser() {
			this.loading = true
			NET.request(API.GetUser, {}, 'GET').then((res) => {
				this.userItem = res.data
				uni.setStorageSync('storage_userInfo', this.userItem)
				this.isFirstComeIn = false
				this.loading = true
			})
		},

		/**
		 * 客服
		 * @return {Promise<void>}
		 */

		async flyToService() {
			(await Services()).flyToService()
		},

		/**
		 * 商家入驻
		 */

		handleApplySettle() {
			const res = uni.getStorageSync('storage_key')
			const token = Encrypt(res.token)
			const username = this.userItem.name
			let url = null
			// #ifdef H5
			window.location.href = API.SettledMerchantPrefix + `/#/?username=${username}&user=${token}`
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.openURL(API.SettledMerchantPrefix + `/#/?username=${username}&user=${token}`, function (e) {
			})
			// #endif
			// #ifdef MP-WEIXIN
			url = API.SettledMerchantPrefix
			uni.navigateTo({
				url: `../../../pages_category_page1/linkOthers/index?url=${url}&username=${username}&user=${token}`
				// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
				// url: '../../../pages_category_page1/linkOthers/index?url=' + encodeURIComponent(url)
				// url:'../../../pages_category_page2/userModule/coupon'
			})
			// #endif
			// #ifdef MP-ALIPAY
			url = API.SettledMerchantPrefix
			uni.navigateTo({
				url: `../../../pages_category_page1/linkOthers/index?url=${url}&username=${username}&user=${token}`
				// 此处的链接为小程序上面新建的webview页面路径，参数url为要跳转外链的地址
				// url: '../../../pages_category_page1/linkOthers/index?url=' + encodeURIComponent(url)
				// url:'../../../pages_category_page2/userModule/coupon'
			})
			// #endif
		}
	}
}
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}

.content {
	height: 100%;
	position: relative;
	padding-bottom: 150rpx;

	.itemBox {
		display: flex;
		flex-flow: wrap;
		padding-top: 30rpx;
		background: #FFFFFF;
		width: 690rpx;
		margin: 30rpx auto 0 auto;
	}

	/* background-color: #f8f8f8; */
	.top-bg {
		width: 100%;
		height: 400rpx;
		margin-top: -50rpx;
	}

	.page-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		z-index: 10;
		margin-top: -320upx;

		.user-info-box {
			width: 100%;
			box-sizing: border-box;
			padding: 30upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;

			.notice {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 0;
				right: 50rpx;
				background: url("../../../static/images/origin/notice.png") no-repeat center center;
				background-size: contain;

				.messNum {
					background: #C83732;
					border-radius: 50%;
					color: #FFFFFF;
					text-align: center;
					margin: 0rpx 0 0 30rpx;
					width: 30rpx;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 20rpx;
				}
			}

			.user-image {
				width: 126upx;
				height: 126upx;
			}

			.user-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding-left: 20upx;
				box-sizing: border-box;
				z-index: 10;

				.user-logoin-title {
					font-size: 36upx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}

				.user-logoin-lable {
					font-size: 24upx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					margin-top: 20upx;
				}

				.experience {
					label {
						font-size: 26rpx;
						color: #FFFFFF;
						opacity: 0.7;
					}

					.experienceValue {
						width: auto;
						padding: 0 28rpx;
						height: 40rpx;
						font-weight: 400;
						color: #FFFFFF;
						border-radius: 25rpx;
						line-height: 40rpx;
						border: 2rpx solid rgba(0, 0, 0, 0);
						background: linear-gradient(88deg, #C5AA7B 0%, #F5DEB2 100%);
						font-size: 20rpx;
						margin-left: 20rpx;
					}
				}
			}

			.user-info-right {
				width: 30upx;
				height: 30upx;
			}
		}

		.order-box {
			width: 690upx;
			height: 196upx !important;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-left: 30upx;
			z-index: 10;

			.order-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;

				.quan {
					position: absolute;
					right: 40upx;
					top: 10upx;
					border: 1px solid red;
					color: #FFFFFF;
					background-color: red;
					border-radius: 50%;
					font-size: 16rpx;
					width: 30upx;
					height: 30upx;
					line-height: 30upx;
					text-align: center;
				}

				.order-item-image {
					width: 90upx;
					height: 90upx;
				}

				.order-item-text {
					font-size: 28upx;
					margin-top: 10upx;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
				}
			}
		}

		.item-btn {
			width: 25%;
			box-sizing: border-box;
			background-color: #fff;
			text-align: center;
			margin-bottom: 40rpx;

			.item-btn-icon {
				width: 90upx;
				height: 90upx !important;
			}

			.item-btn-text {
				font-size: 28upx;
				font-weight: 500;
				flex: 1;
				color: rgba(102, 102, 102, 1);
			}

			.messNum {
				margin-left: 10rpx;
				font-size: 16rpx;
				background-color: red;
				color: #FFFFFF;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				margin-top: -5rpx;
				line-height: 30rpx;
				text-align: center;
			}

			.item-btn-right {
				width: 24upx;
				height: 24upx;
			}

		}

		.btnNone {
			margin: 0;
			padding: 0;
			line-height: normal;

			&::after {
				display: none;
			}
		}

		.mt20 {
			margin-top: 20upx;
		}

		.mt1 {
			margin-top: 1upx;
		}
	}

	.copyright {
		text-align: center;
		padding: 30rpx 0 20rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;

		text {
			display: block;
			font-size: 20rpx;
			line-height: 30rpx;
			color: #C5CACF;
		}
	}
}
</style>