ox_zhiNengZhuShou/src/subpackage/course/pages/index/index.vue

<template>
	<view class="index-content">
		<view class="ic-head">
			<store-name :theme="'light'"></store-name>
		</view>
		<view class="ic-section">
			<view class="is-box">
				<view class="ib-line">
					<view class="il-view">
						<view>进行中</view>
						<view>20</view>
					</view>
					<view class="il-cut"></view>
					<view class="il-view">
						<view>已结束</view>
						<view>10</view>
					</view>
				</view>
				<view class="ib-line">
					<view class="il-view">
						<view>今日待上课</view>
						<view>6</view>
					</view>
					<view class="il-cut"></view>
					<view class="il-view">
						<view>今日已上课</view>
						<view>3</view>
					</view>
				</view>
			</view>
		</view>

		<view class="ic-tablist" v-for="(e,i) in tabList" :key="i">
			<view class="it-title">{{e.type}}</view>
			<view class="it-tabs">
				<view class="itt-item" v-for="(item,index) in e.itemList" :key="index" @click="tabChange(e.id,item.id)">
					<view>
						<image :src="'/subpackage/course/static/images/tab/tab_'+ e.id +'_'+ item.id + '.png'"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util';
import boxServer from '../../js/course_server';
import BOX_API from '../../js/course_api';
import { mapState } from 'vuex'
import store_name from '../../components/store_name/store_name';
const tabList = [
	{
		type: "更多操作",
		id: 0,
		itemList:[
			{
				id: 0,
				name: "学员课程",
				path: "/subpackage/course/pages/manage_list/manage_list",
			},
			{
				id: 1,
				name: "私教课上课记录",
				path: "",
			},
			{
				id: 2,
				name: "大班上课记录",
				path: "",
			},
			{
				id: 3,
				name: "班级管理",
				path: "",
			},
		],
	},
]
export default {
	components: {
	    'store-name': store_name
	},
	computed:{
		...mapState([ 'brandInfo', 'storeInfo' ]),
	},
	data() {
		return {
			tabList,
		}
	},
	async onLoad(){
		// console.log("得到的：",this.brandInfo)
		// this.getCourseHome();
	    try{
	        util.showLoad();
	        let _brandInfo = await this.$store.dispatch('getBrandInfo');
	        await this.$store.dispatch('getStoreList');
			// this.getCourseHome();
	        util.hideLoad();
	    }catch(err){
	        util.hideLoad();
	    }
	    
	},
	methods: {
		tabChange(id1,id2){
			// if(path=='')return util.showNone('开发中');
			let _type_id = `${id1}-${id2}` 
			util.routeTo(`/subpackage/course/pages/manage_list/manage_list?type_id=${_type_id}`,'nT')
		},
		
		getCourseHome(){
			let { brandInfo } = this
			util.showLoad();
			boxServer.get({
				url: BOX_API.courseHome,
				data: {
					brand_id: brandInfo.brand.id,
				},
				failMsg: '加载失败！'
			})
			.then(res=>{
				util.hideLoad();
				// this.pageInfo = res
				// console.log("阿桑要花费的：",res)
			})
			.catch(util.hideLoad)
		
			
		},
	}
}
</script>

<style lang="scss">
@import '~style/public.scss';
page{
	background: #FFFFFF;
}
.index-content{
	.ic-head{
		width: 750rpx;
		height: 218rpx;
		background-color: #009874;
	}
	.ic-section{
		position: relative;
		width: 750rpx;
		height: 320rpx;
		background-color: #F2F2F7;
		.is-box{
			position: absolute;
			top: -100rpx;
			left: 40rpx;
			width: 670rpx;
			padding-bottom: 50rpx;
			// height: 378rpx;
			border-radius: 10rpx;
			background-color: #FFFFFF;
			.ib-line{
				padding: 60rpx 0 10rpx;
				@include centerFlex(flex-start);
				.il-view{
					margin-left: 60rpx;
					flex-grow: 1;
					>view{
						&:first-child{
							color: #9C9C9F;
							font-size: 28rpx;
							line-height: 40rpx;
						}
						&:nth-child(2){
							color: #1A1A1A;
							font-size: 40rpx;
							line-height: 56rpx;
							font-weight: 700;
						}
					}
				}
				.il-cut{
					flex-shrink: 0;
					width: 2rpx;
					height: 92rpx;
					background-color: #D8D8D8;
				}
			}
		}
	}
	.ic-tablist{
		padding-bottom: 24rpx;
		background: #FFFFFF;
		.it-title{
			padding: 52rpx 40rpx 0rpx;
			color: #1A1A1A;
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.it-tabs{
			display: flex;
			flex-wrap: wrap;
			.itt-item{
				margin: 60rpx 0 20rpx;
				flex-wrap: wrap;
				flex-shrink: 0;
				width: 33.33%;
				>view{
					display: flex;
					flex-direction: column;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					>image{
						width: 52rpx;
						height: 52rpx;
					}
					>view{
						margin-top: 20rpx;
						color: #1A1A1A;
						font-size: 28rpx;
						line-height: 40rpx;
						text-align: center;
					}
				}
			}
		}
	}
}
</style>