family-education/education_uni/components/my-coursedetail/my-coursedetail.vue

<template>
		<view class="contain">
			<uni-row>
				<view style="height: 20rpx;"></view>
			</uni-row>
			<uni-row>
				<uni-col :push="1">
					<view class="contain-item"><text class="contain-text">课程号：</text>{{item.courseId}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="15" :push="1">
					<uni-row>
						<uni-col>
							<view class="contain-item"><text class="contain-text">教员ID：</text>{{item.uid}}</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<view class="contain-item"><text class="contain-text">教员：</text>{{item.name}}</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<view class="contain-item"><text class="contain-text">教员性别：</text>{{item.sex}}</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<view class="contain-item"><text class="contain-text">教龄：</text>{{item.teachAge}}年</view>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col>
							<view class="contain-item"><text class="contain-text">浏览量：</text>{{item.viewedCount}}次</view>
						</uni-col>
					</uni-row>
				</uni-col>
				<uni-col :span="8">
					<uni-row>
						<image class="teachImg" :mode="aspectFit" :src="item.profilePhoto"></image>
					</uni-row>
					<uni-row v-if="isShowCollect">
						<uni-fav :checked="collect" class="favBtn" :circle="true" bg-color="#dd524d"
											bg-color-checked="#007aff" fg-color="#ffffff" fg-color-checked="#ffffff" @click="collecting" />
					</uni-row>
				</uni-col>
			</uni-row>
			<uni-row>
				<view class="contain-item">
					<map :longitude="location[1]" :latitude="location[0]" :markers="marker" class="map"></map>
				</view>
			</uni-row>
			<uni-row>
				<uni-col :push="1">
					<view class="contain-item"><text class="contain-text">辅导科目：</text>{{item.subject}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :push="1">
					<view class="contain-addr-item"><text class="contain-text">教员地址：</text>{{item.location}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :push="1">
					<text class="contain-text">课程时间：</text>
				</uni-col>
			</uni-row>
			<view class="tr-container">
				<view class="tr_1">
					<text class="th_0" decode="true">&ensp;&ensp;&ensp;&ensp;</text>
					<text class="th_1">周一</text>
					<text class="th_1">周二</text>
					<text class="th_1">周三</text>
					<text class="th_1">周四</text>
					<text class="th_1">周五</text>
					<text class="th_1">周六</text>
					<text class="th_1">周日</text>
				</view>
				<view class="tr_2">
					<checkbox-group>
						<view class="th2_0">上午</view>
						<label v-for="item in timeAM" :key="item.value">
							<checkbox class="th2_1" :value="item.value" :checked="item.checked" disabled></checkbox>
						</label>
					</checkbox-group>
				</view>
				<view class="tr_2">
					<checkbox-group>
						<view class="th2_0">下午</view>
						<label v-for="item in timePM" :key="item.value">
							<checkbox class="th2_1" :value="item.value" :checked="item.checked" disabled></checkbox>
						</label>
					</checkbox-group>
				</view>
				<view class="tr_2">
					<checkbox-group>
						<view class="th2_0">晚上</view>
						<label v-for="item in timeEvening" :key="item.value">
						<checkbox class="th2_1" :value="item.value" :checked="item.checked" disabled></checkbox>
						</label>
					</checkbox-group>
				</view>
			</view>
			<uni-row>
				<uni-col :span="12" :push="1">
					<view class="contain-item"><text class="contain-text">教员类型：</text>{{item.teacherType}}</view>
				</uni-col>
				<uni-col :span="12">
					<view><text class="contain-text">教员学历：</text>{{item.education}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :push="1">
					<view class="contain-item"><text class="contain-text">上课方式：</text>{{item.mode}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :push="1">
					<view class="contain-item"><text class="contain-text">成功经验：</text>{{item.experience}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :push="1">
					<view class="contain-item"><text class="contain-text">自我描述：</text>{{item.introduce}}</view>
				</uni-col>
			</uni-row>
			<view v-if="isShowPrivate">
				<uni-row>
					<uni-col :push="1">
						<view class="contain-item"><text class="contain-text">审核不通过原因：</text>{{item.verifyRefuseReason || '暂无'}}</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :push="1">
						<view class="contain-item"><text class="contain-text">本课程发布日期：</text>{{item.datetime}}</view>
					</uni-col>
				</uni-row>
			</view>
			
			<view class="publish-button-wrapper">
				<button class="publish-button" @click="publishButton">{{buttonMessage}}</button>
			</view>
			
		</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	export default {
		name: 'my-requiredetail',
		data() {
			return {
			};
		},
		props: {
			item: {
				type: Object
			},
			location: {
				type: Array
			},
			marker: {
				type: Array
			},
			timeAM: {
				type: Array
			},
			timePM: {
				type: Array
			},
			timeEvening: {
				type: Array
			},
			collect: {
				type: Boolean,
				default: false
			},
			isShowCollect: {
				type: Boolean,
				default: false
			},
			isShowPrivate: {
				type: Boolean,
				default: false
			},
			buttonMessage: {
				type: String
			}
		},
		methods: {
			// 点击收藏
			collecting() {
				// 触发外界通过 @click 绑定的 click 事件处理函数
				this.$emit('collecting')
			},
			publishButton() {
				this.$emit('publishButton')
			}
		},
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		height: 100%;
		// background-color: #FFF;
	}
</style>

<style lang="scss" scoped>

.contain {
	//background-color: #FFF2CC;
	background-color: #f0f0f0;
	// border-radius: 10%;
	border-radius: 20rpx;
	height: 100%;
	
	.contain-item {
		margin-bottom: 20rpx;
	}
	
	.contain-addr-item{
		margin-bottom: 20rpx;
		width: 96%;
	}
	
	.contain-text {
		font-weight: 700;
		color: #bbb;
	}
	
	.map {
		width: 100%;
	}
}
.tr-container{
	    display: flex;
	    position: relative;
	    width: 96%;
	    flex-direction: column;
	    font-size: 26rpx;
	    /* border: 1rpx solid gray; */
	    margin: -10px 20rpx;
		margin-bottom: 20px;
	}
	
	.tr_1 {
	    display: flex;
	    position: relative;
	    height: 80rpx;
	    line-height: 80rpx;
	}
	.tr_2{
	    display: block;
	    height: 80rpx;
	    line-height: 80rpx;
	}
	
	.th_0,
	.th_1,
	.th_2,
	.th2_0,
	.th2_1,
	.th2_2{
	    width: 12%;
	    height: 80rpx;
	    line-height: 80rpx;
	    border-right: 1rpx solid gray;
	    border-bottom: 1rpx solid gray;
	    text-align: center;
	}
	
	.th_0,
	.th_1,
	.th_2{
	    border-top: 1rpx solid gray;
	}
	
	.th_0,
	.th2_0{
	    border-left: 1rpx solid gray;
	}
	
	.th2_0{
	    float: left;
	    width: 12%;
	    height: 80rpx;
	    line-height: 80rpx;
	    text-align: center;
	    /* background-color: greenyellow; */
	}
	
	// 底部按钮
	.publish-button-wrapper{
		margin-top: 10rpx;
		height: 130rpx;
	}	
	.publish-button {
		//background-color: #E2F0D9;
		// background-color: #8FAADC;
		background-color: #35b882;
		color: white;
		width: 200rpx;
		border-radius: 50rpx;
		margin-bottom: 60rpx;
	}
	
	/* 教员头像 */
	.teachImg{
	    width: 250rpx;
		height: 250rpx;
	    border-radius: 20rpx;
	}
	

	
</style>