tuanfeng-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>
		<!-- 我的 -->
		<view class="page-content">
			<!-- 用户未登录 -->
			<view class=" font-weight-bold">会员中心</view>
			<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">
					<tui-icon name="notice" :size="26"></tui-icon>
					<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 font-weight-bold">
						<!-- <image class="userTypeIcon" :src="returnUserRole(userItem.type).iconUrl"></image> -->
						<span>{{ returnUserRole(userItem.type).name }}</span>{{ 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')">
					<tui-icon name="notice" :size="26"></tui-icon>
					<view v-if="userItem.notRead > 0" class="messNum">
						{{ userItem.notRead > 99 ? '99+' : userItem.notRead }}
					</view>
				</view>
			</view>
			<MyPurse></MyPurse>
			<!-- 订单卡片 -->
			<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="backColorFFF mar-top-30 bor-rad-30">
				<view class="pad-left-20 pad-top-20 font-weight-bold fs30">我的工具</view>
				<view class="itemBox">
					<view v-for="item in fastCardOneList" :key="item.label" 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 style="display: flex;flex-flow: wrap;justify-content: space-evenly;padding-bottom: 14upx;">
					<view
						v-for="item in fastCardOneSpecialList" :key="item.label"
						style="display: flex;justify-content: space-between;align-items: center;width: 46%;margin-bottom: 20upx;padding: 20upx;background-color: #f8f5ed;border-radius: 10upx;"
						@click="handleJump(item.jumpUrl)"
					>
						<view>
							<view style="margin-bottom: 6upx;;font-size: 32upx;color: #8E6251;">{{ item.label }}</view>
							<view style="font-size: 22upx;color: #A29898;">{{ item.desc }}</view>
						</view>
						<image style="width: 92upx;height: 92upx;" :src="item.icon" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<!-- 第二个卡片 -->
			<view class="backColorFFF mar-top-30 bor-rad-30">
				<view class="pad-left-20 pad-top-20 font-weight-bold fs30">我的服务</view>
				<view class="itemBox">
					<view v-for="item in fastCardTwoList" :key="item.label" 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>
			<!-- 特殊卡片 -->
			<view>
				<view>
					<view v-for="item in fastCardSpecialList" :key="item.label" @click="handleJump(item.jumpUrl)">
						<template v-if="item.label === '平台客服'">
							<DragButton text="客服在线" :icon-src="item.icon" is-dock exist-tab-bar @btnClick="handleJump(item.jumpUrl)" />
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import MyPurse from './components/myPurse.vue'
import Skeleton from '../../../components/Skeleton'
import { fastCardOneList, fastCardOneSpecialList, fastCardTwoList, fastCardSpecialList, orderCardList } from './index.data'
import { Services } from '../../../utils/services'
import { Encrypt } from '../../../utils/secret'
import { J_STORAGE_KEY } from '../../../config/constant'

const NET = require('../../../utils/request')
const API = require('../../../config/api')
export default {
	name: 'User',
	components: { Skeleton, MyPurse },
	data() {
		return {
			isFirstComeIn: true,
			loading: true,
			orderCardList,
			fastCardOneList,
			fastCardOneSpecialList,
			fastCardTwoList,
			fastCardSpecialList,
			cacheUserItem: {},
			userItem: {
				headImage: '',
				name: undefined
			}
		}
	},
	onShow() {
		this.isFirstComeIn = true
		if (uni.getStorageSync(J_STORAGE_KEY)) {
			this.cacheUserItem = uni.getStorageSync(J_STORAGE_KEY)
		}
		this.handleGetUser()
	},
	methods: {
		/**
		* 用户类型
		* @param { String, Number } type
		* @return { Object }
		*/
		returnUserRole(type) { // 0-商家 1-策划师 2-分公司
			const userRoleType = [
				{ name: '商家', iconUrl: require('@/static/images/user/userType/shangjia.png') },
				{ name: '策划师', iconUrl: require('@/static/images/user/userType/cehuashi.png') },
				{ name: '分公司', iconUrl: require('@/static/images/user/userType/fengongsi.png') },
				{ name: '普通会员', iconUrl: require('@/static/images/user/userType/fengongsi.png') }
			]
			return userRoleType[type]
		},

		/**
		 * 处理跳转
		 * @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(J_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.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" scoped>
.content {
	min-height: 100vh;
	position: relative;
	padding: 50upx 32upx 150rpx;
	box-sizing: border-box;
	background: linear-gradient(180deg, #FEF7F1 14%, #F5F4F6 30%);

	.page-content {
		width: 100%;
		height: 100%;

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

			.notice {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 0;
				right: 50rpx;

				.messNum {
					position: absolute;
					top: -8upx;
					right: -8upx;
					background: #C83732;
					border-radius: 50%;
					color: #FFFFFF;
					text-align: center;
					width: 30rpx;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 20rpx;
				}
			}

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

			.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;
					display: inline-flex;
					align-items: center;
					> span {
						margin: 0 8rpx;
						padding: 4rpx 15rpx;
						border-radius: 15rpx;
						box-sizing: border-box;
						background-color: #c6c6c666;
						color: #234184b5;
					}
					.userTypeIcon {
						margin: 0 8rpx;
						width: 46rpx;
						height: 46rpx;
					}
				}

				.user-logoin-lable {
					font-size: 24upx;
					font-weight: 400;
					margin-top: 20upx;
				}

				.experience {
					margin-top: 10rpx;
					margin-left: 8rpx;
					label {
						font-size: 26rpx;
						opacity: 0.7;
					}

					.experienceValue {
						width: auto;
						padding: 0 28rpx;
						height: 40rpx;
						font-weight: 400;
						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 {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 20upx 0;
			background: rgba(255, 255, 255, 1);
			border-radius: 24upx;
			box-shadow: 0px 0px 10upx 0px rgba(51, 51, 51, 0.1);
			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: bold;
				}
			}
		}

		.itemBox {
			display: flex;
			flex-flow: wrap;
			padding-top: 30rpx;

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

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

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

			}
		}
	}
}
</style>