add style course

src/pages.json

@@ -385,6 +385,20 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "subpackage/course",
+			"pages": [
+			  {
+					"path": "pages/index/index",
+					"style" : {
+						"navigationBarTitleText": "课程管理" ,
+						"navigationBarBackgroundColor": "#009874",
+						"navigationBarTextStyle": "white"
+					}
+				}
+				
+			]
 		}
 	],
 	"globalStyle": {

src/pages/index/index.vue

@@ -125,6 +125,12 @@
 			name: '商品零售',
 			path: '/subpackage/retail/pages/index/index',
 			serverKey: 1011  // 后端对应权限编号
+		},
+		{
+			id: 8,
+			name: '课程管理',
+			path: '/subpackage/course/pages/index/index',
+			serverKey: 1011  // 后端对应权限编号
 		}
 	];
 	

src/subpackage/course/components/store_name/store_name.vue

@@ -0,0 +1,81 @@
+<template>
+    <picker class="store-name-picker" :range="storeList" range-key="name" @change="storeChange">
+        <view class="store-name" :style="{background:getThemeBg()}">
+            <image class="sn-logo" mode="aspectFit" :src="curStoreInfo.logo || ''"></image>
+            <view class="sn-txt" :style="{color:getThemeColor()}">{{curStoreInfo.name || '-'}}</view>
+            <image class="sn-arrow" mode="aspectFit"  :src="getThemeIcon()"></image>
+        </view>
+    </picker>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+    computed: {
+        ...mapState({
+            storeList: state => state.device.storeList,
+            curStoreInfo: state => state.device.curStoreInfo,
+        }),
+		getThemeIcon(){
+			return ()=> {return (this.theme=='light')?'/subpackage/course/static/images/icon/arrow_white.png':'/subpackage/course/static/images/icon/arrow_b2.png';}
+		},
+		getThemeColor(){
+			return ()=> {return (this.theme=='light')?'#FFFFFF':'#333333';}
+		},
+		getThemeBg(){
+			return ()=> {return (this.theme=='light')?'none':'none';} //
+		},
+    },
+	props: ["theme"],//定义主题字段,定制组件展示效果 "light":亮色  
+	created() {
+		console.log("store_name theme: ", this.theme);
+	},
+    methods: {
+        storeChange(e){
+            let { storeList, curStoreInfo } = this;
+            let _curSelect = storeList[e.detail.value];
+            if(_curSelect.id!==curStoreInfo.id)this.$store.commit('setStoreInfo', _curSelect);
+            console.log(e)
+        }
+    }
+}
+</script>
+
+<style>
+    .store-name-picker{
+        width: 100%;
+		z-index: 5;
+    }
+    .store-name{
+        display: flex;
+		flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 0 40upx;
+        height: 100upx;
+        /* background-color: #fff; */
+    }
+    .sn-logo{
+        flex-grow: 0;
+        flex-shrink: 0;
+        margin-right: 20upx;
+        width: 52upx;
+        height: 52upx;
+    }
+    .sn-txt{
+        /* flex-grow: 1; */
+        line-height: 40upx;
+        font-size: 28upx;
+        color: #1a1a1a;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .sn-arrow{
+        flex-shrink: 0;
+        flex-grow: 0;
+        margin-left: 20upx;
+        width: 28upx;
+        height: 28upx;
+    }
+</style>

src/subpackage/course/js/course_api.js

@@ -0,0 +1,8 @@
+import { ORIGIN } from '../../../js/api';
+
+export const COURSE_API = { 
+    stadiumList:`${ORIGIN}/admin/stadium/list`,  //  店铺列表
+	
+}
+
+export default COURSE_API;

src/subpackage/course/js/course_server.js

@@ -0,0 +1,10 @@
+import { Server } from '../../../js/server';
+
+class DeviceServer extends Server {
+    constructor(props){
+        super(props)
+    }
+}
+
+
+export default new DeviceServer();

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

@@ -0,0 +1,204 @@
+<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(item.path)">
+					<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: "",
+			},
+			{
+				id: 1,
+				name: "私教课上课记录",
+				path: "",
+			},
+			{
+				id: 2,
+				name: "大班上课记录",
+				path: "",
+			},
+			{
+				id: 3,
+				name: "班级管理",
+				path: "",
+			},
+		],
+	},
+]
+export default {
+	components: {
+	    'store-name': store_name
+	},
+	data() {
+		return {
+			tabList,
+		}
+	},
+	async onLoad(){
+	    try{
+	        util.showLoad();
+	        let _brandInfo = await this.$store.dispatch('getBrandInfo');
+	        await this.$store.dispatch('getStoreList');
+			// this.updateAC();
+	        util.hideLoad();
+	    }catch(err){
+	        util.hideLoad();
+	    }
+	    
+	},
+	methods: {
+		tabChange(path){
+			if(path=='')return util.showNone('开发中');
+			util.routeTo(path,'nT')
+		},
+	}
+}
+</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>