ylrz_scrm_uniapp/pages/course/components/studyCenter.vue

<template>
	<view class="content">
		<view class="navbox" id="guide4">
			<view class="navbox-item">
				<view class="navbox-iteminfo" @click="loginNavTo('/pages_course/learning')">
					<image src="@/static/images/course/course_icon.png" mode="aspectFill"></image>
					<text>在学课程</text>
				</view>
			</view>
			<view class="navbox-item" @click="loginNavTo('/pages_course/noteList')">
				<view class="navbox-iteminfo">
					<image src="@/static/images/course/note_icon.png" mode="aspectFill"></image>
					<text>学习笔记</text>
				</view>
			</view>
			<view class="navbox-item">
				<view class="navbox-iteminfo" @click="handleCollect()">
					<image src="@/static/images/course/collect_icon.png" mode="aspectFill"></image>
					<text>我的收藏</text>
				</view>
			</view>
			<!-- <view class="navbox-item" >
				<view class="navbox-iteminfo">
					<image src="@/static/images/course/evaluate_icon.png" mode="aspectFill"></image>
					<text>我的评价</text>
				</view>
			</view> -->
		</view>
		<view class="navbox navbox-other">
			<view class="navbox-item" @click="handleOrder(0)">
				<image src="@/static/images/course/order_icon.png" mode="aspectFill"></image>
				<text>全部订单</text>
			</view>
			<view class="navbox-item" @click="handleOrder(1)">
				<image src="@/static/images/course/obligation_icon.png" mode="aspectFill"></image>
				<text>待付款</text>
			</view>
			<view class="navbox-item" @click="handleOrder(2)">
				<image src="@/static/images/course/paid_icon.png" mode="aspectFill"></image>
				<text>已支付</text>
			</view>
			<view class="navbox-item" @click="handleOrder(4)">
				<image src="@/static/images/course/evaluate_icon24.png" mode="aspectFill"></image>
				<text>已退款</text>
			</view>
		</view>
		
		<!-- 开通会员入口 -->
		<!-- <view class="vipbox" v-if="!user.isVip" @tap="loginNavTo('/pages_course/vipBuy')">
			<view class="vipbox-l">
				<image class="vip-icon" src="@/static/images/course/v_icon.png" mode="aspectFill"></image>
				<text>新用户开通会员，仅需9.9/月看全场</text>
			</view>
			<image class="vip-arrow" src="@/static/images/course/vip_arrow_right_icon.png" mode="aspectFill"></image>
		</view> -->
		
		
		<!-- 签到 -->
		<view class="sign">
			<view class="sign-info">
				<view class="sign-day">已连续签到<text>{{signNum}}</text>天</view>
				<view class="sign-num">我的积分：{{integral}}</view>
			</view>
			
			<view class="sign-box">
				<view class="sign-boxbar">
					<view class="sign-line">
						<view class="sign-line-item" v-for="i in 6" :key="i"></view>
					</view>
					<view class="sign-item" v-for="(item,index) in sign"  :key="index">
						<image src="@/static/images/course/sign_in_on_icon.png" v-if="index + 1 <= signNum"></image>
						<view class="sign-item-circle" v-else></view>
						<view :class="index + 1 <= signNum ? 'active-text sign-item-txt':'sign-item-txt'">第{{index + 1}}天</view>
					</view>
				</view>
				<button class="sign-btn"  @click="loginNavTo('/pages_user/user/integral')">立即签到</button>
			</view>
		</view>
		
		<!-- 讲堂 -->
		<view class="hallbox">
			<hallItem class="gapitem"  v-for="(item, index) in recommendList " :key="index" :item="item"  @click.native="navTo('/pages_course/info?courseId='+item.courseId)"  />
		</view>
	</view>
</template>

<script>
	import hallItem from "./hallItem.vue";
	import { getCourseList } from '@/api/course'
	import {getUserInfo} from '@/api/user'
	import {getUserSign} from '@/api/integral';
	export default{
		components: {
			hallItem
		},
		data() {
			return {
				recommendList:[],
				user:{isVip:false},
				isDaySign:false,
				signNum:0,
				integral:0,
				defaultSign: [
					{signNum:10,sort:1,day:"第1天"},
					{signNum:20,sort:2,day:"第2天"},
					{signNum:30,sort:3,day:"第3天"},
					{signNum:40,sort:4,day:"第4天"},
					{signNum:50,sort:5,day:"第5天"},
					{signNum:50,sort:6,day:"第6天"},
					{signNum:50,sort:7,day:"第7天"},
				],
				sign:[],
				data:null,
			}
		},
		mounted() {
			this.getRecommendList();
			this.utils.isLogin().then(res => {
				if(res){
					this.getUserInfo();
					this.getUserSign();
				} else {
					this.sign = this.defaultSign
				}
			})
			let that=this;
			uni.$on('refreshUserSign', function() {
				that.utils.isLogin().then(res => {
					if(res){
						that.getUserSign();
					}
				})
			});
		},
		methods: {
			onShowFun() {
				this.getRecommendList();
				this.utils.isLogin().then(res => {
					if(res){
						this.getUserInfo();
						this.getUserSign();
					} else {
						this.signNum=0;
						this.isDaySign=false;
						this.integral=0;
						this.sign = this.defaultSign
					}
				})
			},
			getRecommendList(){
				let that=this;
				const params={"isTui":1};
				getCourseList(params,1,10).then(res => {
						if(res.code==200){
							this.recommendList=res.data.list;  
						}
					},
					rej => {}
				);
			},
			getUserSign(){
				getUserSign().then(res => {
						if(res.code==200){
							this.data=res.member;
							this.signNum=res.signNum;
							this.isDaySign=res.isDaySign;
							this.integral=res.integral;
							this.sign=JSON.parse(res.sign);
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			handleOrder(status) {
				this.loginNavTo('/pages_course/studyCenter/orderList?status='+status);
			},
			handleCollect() {
				this.loginNavTo('/pages_course/studyCenter/courseCollect');
			},
			getUserInfo(){
				let that=this;
				getUserInfo().then(res => {
						if(res.code==200){
							if(res.user!=null){
								uni.setStorageSync('userInfo',JSON.stringify(res.user));
								this.user=res.user;
							}
							else{
								uni.showToast({
									icon:'none',
									title: res.msg,
								});
							}
						}
					},
					rej => {}
				);
			},		
			loginNavTo(url){
				this.utils.isLogin().then(res=>{
					if(res) {
						this.$navTo(url);
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.content {
		padding: 0 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
	}
	.navbox {
		@include u-flex(row,center,space-between);
		margin-top: 12rpx;
		&:last-child {
			margin-right: 0;
		}
		&-item {
			flex:1;
			margin-right: 18rpx;
			@include u-flex(column,center,center);
		}
		&-iteminfo {
			width: 162rpx;
			height: 162rpx;
			background: rgba(255,255,255,0.7);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			@include u-flex(column,center,center);
			font-size: 26rpx;
			color: #222222;
		}
		image {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 14rpx;
		}
	}
	.navbox-other {
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 24rpx;
		image {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 10rpx;
		}
	}
	.vipbox {
		height: 120rpx;
		margin-top: 20rpx;
		padding: 0 20rpx 0 32rpx;
		border-radius: 16rpx;
		overflow: hidden;
		@include u-flex(row,center,space-between);
		font-weight: 500;
		font-size: 28rpx;
		color: #7F5532;
		background: url("@/static/images/course/vip_bg.png") no-repeat right / 152rpx 120rpx,linear-gradient( 90deg, #FFE6C5 0%, #FBD095 100%);
		&-l {
			@include u-flex(row,center,flex-start);
		}
		.vip-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 24rpx;
		}
		.vip-arrow {
			width: 48rpx;
			height: 48rpx;
		}
	}
	.sign {
		margin-top: 20rpx;
		padding: 26rpx 20rpx;
		background: url("@/static/images/course/sign_in_bg.png") no-repeat right top / cover,linear-gradient( 180deg, #EB473A 0%, #FBE8DE 100%);
		border-radius: 20rpx;
		overflow: hidden;
		&-info {
			@include u-flex(row,center,space-between);
		}
		&-day {
			margin-top: -10rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			@include u-flex(row,baseline,flex-start);
			text {
				font-family: Roboto, Roboto;
				font-weight: bold;
				font-size: 56rpx;
				color: #FEEBC9;
			}
		}
		&-num {
			height: 42rpx;
			padding: 0 16rpx;
			background: #FFE3DE;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid rgba(255,255,255,0.3);
			font-size: 24rpx;
			color: #F6443C;
			line-height: 42rpx;
		}
		&-box {
			background: #FEFAF7;
			border-radius: 12rpx;
			padding: 34rpx 32rpx 32rpx 32rpx;
			margin-top: 20rpx;
		}
		&-btn {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			height: 72rpx;
			line-height: 72rpx;
			margin-top: 40rpx;
			background: linear-gradient( 90deg, #EB4A42 0%, #EE7E50 100%);
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(238,124,80,0.2);
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			&::after {
				border: none;
			}
		}
		&-boxbar {
			@include u-flex(row,center,space-between);
			overflow: hidden;
			position: relative;
		}
		&-line {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			@include u-flex(row,center,space-between);
			position: absolute;
			top: 24rpx;
			left: 0;
			&-item {
				flex: 1;
				height: 4rpx;
				background: #F8D7D3;
			}
		}
		&-item {
			@include u-flex(column,center,center);
			font-size: 22rpx;
			color: #757575;
			position: relative;
			z-index: 1;
			&-circle {
				width: 48rpx;
				height: 48rpx;
				background: #FEFAF7;
				border-radius: 50%;
				border: 5rpx solid #F8D7D3;
				box-sizing: border-box;
			}
			&-txt {
				margin-top: 16rpx;
			}
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
		.active-text {
			color: #EC5D46;
		}
	}
	.hallbox {
		@include u-flex(row, center, flex-start);
		flex-wrap: wrap;
		margin: 0 -18rpx -18rpx 0;
		padding: 20rpx 0;
		.gapitem {
			margin: 0 18rpx 18rpx 0;
		}
	}
	
	
	
</style>