增加品牌方案管理

gym-manage-coach-uniapp/pages/course-detail/course-detail.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="detail-page">
-		<view class="header-wrap" :style="{ paddingTop: statusBarHeight + 'px' }">
+		<view class="header-wrap" :style="headerStyle">
 			<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
 				<text class="back-btn" @click="goBack">&#8592;</text>
 				<text class="nav-title">课程详情</text>
@@ -11,7 +11,7 @@
 		<view class="cover-area">
 			<image v-if="course.coverImage && !loading" class="cover-img" :src="course.coverImage" mode="aspectFill"
 				@error="course.coverError = true" />
-			<view v-if="!course.coverImage || course.coverError || loading" class="cover-bg">
+			<view v-if="!course.coverImage || course.coverError || loading" class="cover-bg" :style="{ background: coverGradient }">
 				<text class="cover-text">{{ (course.typeName ? course.typeName.slice(0, 2) : '团课') }}</text>
 			</view>
 			<view class="cover-status" :class="courseStatusClass" v-if="!loading">
@@ -47,7 +47,7 @@
 					</view>
 					<view class="info-item" v-if="course.storedValueAmount">
 						<text class="info-label">消耗</text>
-						<text class="info-value price-text">¥{{ course.storedValueAmount }}</text>
+						<text class="info-value price-text" :style="{ color: brandConfig.primaryColor }">¥{{ course.storedValueAmount }}</text>
 					</view>
 				</view>
 
@@ -63,6 +63,7 @@
 						v-if="course.status == 0"
 						class="action-btn start-btn"
 						:class="{ disabled: !canStartCourse }"
+						:style="startBtnStyle"
 						:loading="actionLoading"
 						:disabled="actionLoading || !canStartCourse"
 						@click="handleStartCourse"
@@ -100,6 +101,7 @@
 <script>
 	const coachApi = require('../../api/coach')
 	const store = require('../../store/index')
+	const brandStore = require('../../store/brand')
 	const { resolveCoverUrl } = require('../../utils/request')
 
 	export default {
@@ -113,11 +115,18 @@
 					actionLoading: false,
 					course: {},
 					now: Date.now(),
-					realMemberCount: 0
+					realMemberCount: 0,
+					brandConfig: brandStore.config
 				}
 			},
 			computed: {
-				duration() {
+		headerStyle() { return 'padding-top:' + this.statusBarHeight + 'px;background-color:' + this.brandConfig.secondaryColor },
+		startBtnStyle() {
+			if (!this.canStartCourse) return ''
+			return 'background-color:' + this.brandConfig.primaryColor + ';color:' + this.brandConfig.secondaryColor
+		},
+		coverGradient() { return 'linear-gradient(135deg, ' + this.brandConfig.primaryColor + ', #00BFA5)' },
+			duration() {
 					if (!this.course.startTime || !this.course.endTime) return '--'
 					const start = new Date(this.course.startTime).getTime()
 					const end = new Date(this.course.endTime).getTime()
@@ -158,6 +167,11 @@
 				this.courseId = options.id
 				this.loadDetail()
 			}
+
+			uni.$on('brand:updated', (config) => { this.brandConfig = config })
+		},
+		onUnload() {
+			uni.$off('brand:updated')
 		},
 		onShow() {
 			if (!store.isLoggedIn) {