zz--front/components/my.vue

<template>
	<view>
		<u-navbar title="我的" :is-back="false"></u-navbar>
		<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) : ''" 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">初出茅庐</navigator>
					</view>
					<navigator url="/pages2/wd/level" hover-class="none" style="position: relative;margin-top: 20rpx;">
						<view class="progress_text">0/1000</view>
						<u-line-progress height="8" active-color="#2F4379" :percent="0" :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" offset="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">
				<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)" 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-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>
		<u-modal v-model="show" :content="content"></u-modal>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: 'my',
	data() {
		return {
			list: [23, 24, 25, 26, 27, 28, 29],
			content: '此功能暂未开放',
			show: false,
			collectTotal: 0,
			rank: 0,
			issue: 0
		};
	},
	mounted() {
	},
	methods: {
		qd() {
			var self = this
			var data = {
				taskType: 0
			}
			self.$api.taskSignIn(data).then(res => {
				if(res.data.code === 200){
					self.getInfoAttached()
				}
			})
		},
		jumpDetail(item) {
			this.$navTo.togo('/pages2/course/detail', {
				id: item.courseId
			});
			return;
		},
		init() {
			this.getInfoAttached();
		},
		jumpPopup() {
			this.show = true;
		},
		getInfoAttached() {
			let self = this;
			this.$api.appInfoAttached().then(res => {
				self.collectTotal = res.data.data.collectTotal;
				self.rank = res.data.data.rank;
				self.issue = res.data.data.issue
			});
			this.studyRecordList();
		},
		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%;
}
</style>