zz--front/components/my.vue

<template>
	<view>
		<u-navbar title="我的" :is-back="false"></u-navbar>
		<scroll-view
			scroll-y="true"
			@scroll="scroll"
			:style="'height: 75vh'"
			@scrolltolower="scrollTolower"
			refresher-enabled
			@refresherpulling="pulling"
			@refresherrefresh="refresher"
			@refresherrestore="restore"
			:refresher-triggered="triggered"
		>
			<view class="head">
				<u-row>
					<u-col span="3" offset="1">
						<navigator url="/pages2/wd/avatar" hover-class="none">
							<image :src="userInfo != null ? $method.splitImgHost(userInfo.avatar, true) : ''" class="avatar"></image>
						</navigator>
					</u-col>
					<u-col span="6">
						<view style="display: flex;">
							<navigator class="name" url="/pages2/wd/avatar" hover-class="none">{{ userInfo.nickname }}</navigator>
							<navigator class="tag" url="/pages2/wd/level" hover-class="none">
								{{ userInfo.userLevel === null ? '初出茅庐' : levelList[userInfo.userLevel - 1] }}
							</navigator>
						</view>
						<navigator url="/pages2/wd/level" hover-class="none" style="position: relative;margin-top: 20rpx;">
							<view class="progress_text">
								{{ userInfo.integral === null ? 0 : userInfo.integral }}/{{
									userInfo.userLevel === null || userInfo.userLevel === undefined
										? '0'
										: userLevelList[userInfo.userLevel - 1] === undefined
										? '0'
										: userLevelList[userInfo.userLevel - 1]
								}}
							</view>
							<u-line-progress
								height="8"
								active-color="#2F4379"
								:percent="userInfo.integral === null ? 0 : userInfo.integral"
								:show-percent="false"
							></u-line-progress>
						</navigator>
					</u-col>
					<view class="qiandao" @click="qd" v-if="issue === 0">签到</view>
					<view class="qiandao" v-if="issue === 1">已签到</view>
				</u-row>
				<view style="margin-top: 20rpx;">
					<u-row>
						<u-col span="4" text-align="center">
							<navigator url="/pages2/wd/collect" hover-class="none">
								<view class="head_t1">收藏</view>
								<view class="head_t2">{{ collectTotal }}</view>
							</navigator>
						</u-col>
						<u-col span="4" text-align="center">
							<navigator url="/pages2/coin/index" hover-class="none">
								<view class="head_t1">金币</view>
								<view class="head_t2">{{ userInfo.money }}</view>
							</navigator>
						</u-col>
						<u-col span="4" text-align="center">
							<navigator url="/pages2/wd/ranking" hover-class="none">
								<view class="head_t1">学习排名</view>
								<view class="head_t2" v-if="rank > 0">NO.{{ rank }}</view>
								<view class="head_t2" v-else>暂未上榜</view>
							</navigator>
						</u-col>
					</u-row>
				</view>
			</view>
			<view style="padding: 30rpx;">
				<!-- 学习记录-->
				<view class="record" v-if="list.length">
					<view class="r_t1">
						最近学习记录
						<u-icon name="arrow-right" size="28"></u-icon>
					</view>
					<scroll-view class="r_sliper" scroll-x="true">
						<view v-for="(item, index) in list" :key="index" style="margin-right: 20rpx;display:inline-block" @click="jumpDetail(item)">
							<image :src="$method.splitImgHost(item.coverUrl, true)" class="r_image"></image>
							<view class="r_t2">{{ item.courseName }}</view>
						</view>
					</scroll-view>
				</view>
				<!-- 模块-->
				<view class="module">
					<u-row>
						<u-col span="3" text-align="center">
							<navigator url="/pages2/study/index" hover-class="none">
								<image src="/static/tool_1.png" class="tool_img"></image>
								<view class="tool_t">我的学习</view>
							</navigator>
						</u-col>
						<u-col span="3" text-align="center">
							<navigator url="/pages2/wd/menu" hover-class="none">
								<image src="/static/tool_2.png" class="tool_img"></image>
								<view class="tool_t">基本资料</view>
							</navigator>
						</u-col>
						<u-col span="3" text-align="center">
							<navigator url="/pages2/wd/help" hover-class="none">
								<image src="/static/tool_3.png" class="tool_img"></image>
								<view class="tool_t">助学活动</view>
							</navigator>
						</u-col>
						<u-col span="3" text-align="center">
							<navigator url="/pages2/wd/coupon" hover-class="none">
								<image src="/static/tool_7.png" class="tool_img"></image>
								<view class="tool_t">优惠券</view>
							</navigator>
						</u-col>
					</u-row>
					<view style="margin-top: 30rpx;">
						<u-row>
							<u-col span="3" text-align="center">
								<navigator url="/pages2/wd/enroll" hover-class="none">
									<image src="/static/tool_5.png" class="tool_img"></image>
									<view class="tool_t">考试报名</view>
								</navigator>
							</u-col>
							<u-col span="3" text-align="center">
								<view @click="jumpPopup">
									<image src="/static/tool_4.png" class="tool_img"></image>
									<view class="tool_t">成长地图</view>
								</view>
							</u-col>
							<u-col span="3" text-align="center">
								<navigator url="/pages2/resume/myResume" hover-class="none">
									<image src="/static/jianli@3x.png" class="tool_img"></image>
									<view class="tool_t">我的简历</view>
								</navigator>
							</u-col>
							<u-col span="3" text-align="center">
								<navigator url="/pages2/resume/delivery" hover-class="none" style="position: relative;">
									<image src="/static/toudi@3x.png" class="tool_img"></image>
									<view class="tool_t">我的投递</view>
									<view class="iconLittles" v-if="showLittleIcon > 0">
										<u-badge size="mini" type="success" :count="showLittleIcon" :absolute="false" bgColor="#fa3534"></u-badge>
									</view>
								</navigator>
							</u-col>
						</u-row>
					</view>
				</view>
				<view class="module2">
					<u-row>
						<u-col span="3" text-align="center">
							<view @click="jumpPopup">
								<image src="/static/tool_6.png" class="tool_img"></image>
								<view class="tool_t">异常反馈</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: 'my',
	data() {
		return {
			triggered: false,
			showLittleIcon: 0,
			list: [23, 24, 25, 26, 27, 28, 29],
			show: false,
			collectTotal: 0,
			rank: 0,
			issue: 0,
			levelList: ['初出茅庐', '崭露头角', '自成一派', '小有名气', '惊艳四座', '初露锋芒'],
			userLevelList: []
		};
	},
	methods: {
		scroll(e) {},
		scrollTolower() {},
		pulling() {
			this.triggered = true;
		},
		refresher() {
			let that = this;
			this.init();
			this.$api.refreshUserInfo();
			setTimeout(function() {
				that.triggered = false;
			}, 500);
		},
		restore() {
			this.triggered = false;
		},
		getLevel() {
			var self = this;
			return new Promise((resolve, reject) => {
				self.$api.gradelist().then(res => {
					res.data.rows.forEach((item, index) => {
						self.userLevelList.push(item.needIntegralEnd);
					});
					resolve();
				});
			});
		},
		qd() {
			var self = this;
			var data = {
				taskType: 0
			};
			self.$api.taskSignIn(data).then(res => {
				if (res.data.code === 200) {
					self.getInfoAttached();
					//刷新用户信息
					self.$api.refreshUserInfo();
				}
			});
		},
		jumpDetail(item) {
			this.$navTo.togo('/pages2/course/detail', {
				id: item.courseId
			});
			return;
		},
		async init() {
			this.$store.state.allowLoading = false;
			const firstFunc = await this.getInfoAttached();
			const seciedFunc = await this.getLevel();
			this.$store.state.allowLoading = true;
		},
		jumpPopup() {
			uni.showModal({
				title: '提示',
				content: '此功能暂未开放',
				showCancel: false
			});
		},
		getInfoAttached() {
			var self = this;
			return new Promise((resolve, reject) => {
				self.$api.appInfoAttached().then(res => {
					self.showLittleIcon = res.data.data.lookNum;
					self.collectTotal = res.data.data.collectTotal;
					self.rank = res.data.data.rank;
					self.issue = res.data.data.issue;
					self.studyRecordList();
					resolve();
				});
			});
		},
		studyRecordList() {
			let self = this;
			this.$api.studyRecordList().then(res => {
				self.list = res.data.rows;
			});
		}
	},
	computed: { ...mapGetters(['userInfo']) }
};
</script>

<style>
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
</style>
<style scoped>
.module2 {
	width: 100%;
	height: 130rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx;
	margin-top: 30rpx;
	padding: 30rpx 0;
}
.tool_t {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #2f4379;
}
.tool_img {
	width: 42rpx;
	height: 42rpx;
}
.module {
	width: 100%;
	height: 260rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx;
	margin-top: 30rpx;
	padding: 30rpx 0;
}

.r_sliper {
	padding: 0 20rpx;
}
.r_t2 {
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #2f4379;
}
.r_image {
	width: 278rpx;
	height: 134rpx;
}
.r_t1 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #2f4379;
	padding: 20rpx;
}
.record {
	width: 100%;
	height: 260rpx;
	background: #ffffff;
	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
	border-radius: 32rpx;
	white-space: nowrap;
	overflow: hidden;
}
page {
	background: #fdfdfd;
}
.head_t2 {
	font-size: 32rpx;
	font-family: MF YiHei (Noncommercial);
	font-weight: bold;
	color: #2f4379;
}
.head_t1 {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #2f4379;
	opacity: 0.6;
}
.qiandao {
	float: right;
	width: 100rpx;
	height: 40rpx;
	background: #2f4379;
	border-radius: 20rpx 0rpx 0rpx 20rpx;
	color: #ffffff;
	text-align: center;
}
.progress_text {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #2f4379;
	position: relative;
	top: 15rpx;
}
.tag {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #2f4379;
	margin-left: 30rpx;
	border: 1px solid #2f4379;
	border-radius: 20px;
	padding: 6rpx;
}
.name {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 800;
	color: #2f4379;
}
.wrap {
	padding: 24rpx;
}
.head {
	padding-top: 30rpx;
	background-color: #ffffff;
	padding-bottom: 20rpx;
}
.avatar {
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
}
.iconLittles {
	position: absolute;
	top: -18rpx;
	right: 33rpx;
}
</style>