family-education/education_uni/components/my-requiredetail/my-requiredetail.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.requireId}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :push="1">
					<view class="contain-item"><text class="contain-text">学员ID：</text>{{item.uid}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="12" :push="1">
					<view class="contain-item"><text class="contain-text">学员：</text>{{item.name}}</view>
				</uni-col>				
			</uni-row>
			<uni-row>
				<uni-col :span="12" :push="1">
					<view class="contain-item"><text class="contain-text">学员性别：</text>{{item.sex}}</view>
				</uni-col>
			</uni-row>
			<view class="stuImgWrapper">
				<image class="stuImg" src="../../static/boy.png"></image>
			</view>
			<uni-row>
				<uni-col :push="1" :span="18">
					<view class="contain-item"><text class="contain-text">需求科目：</text>{{item.subjectBig}}/{{item.subjectSmall}}</view>
				</uni-col>
				<uni-col :span="6" 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-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-addr-item"><text class="contain-text">学员地址：</text>{{item.locationStr}}</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.teacherEdu}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="12" :push="1">
					<view class="contain-item"><text class="contain-text">教员性别：</text>{{item.teacherGender}}</view>
				</uni-col>
				<uni-col :span="12">
					<view><text class="contain-text">上课方式：</text>{{item.mode}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="12" :push="1">
					<view class="contain-item"><text class="contain-text">教员头像：</text>{{item.teacherProfilePhoto}}</view>
				</uni-col>
				<uni-col :span="12">
					<view><text class="contain-text">需求金额：</text>{{item.salary}}元</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :push="1">
					<view class="contain-expect-item"><text class="contain-text">期望目标：</text>{{item.goal}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :push="1">
					<view class="contain-extra-item"><text class="contain-text">额外要求：</text>{{item.teacherDemanded}}</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>
				<uni-row>
					<uni-col :push="1">
						<view class="contain-item"><text class="contain-text">手机号：</text>{{item.phone}}</view>
					</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :push="1">
						<view class="contain-item"><text class="contain-text">微信号：</text>{{item.wxid}}</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: 20rpx;
	height: 100%;
	
	.contain-item {
		margin-bottom: 20rpx;
	}
	
	.contain-addr-item,
	.contain-expect-item,
	.contain-extra-item{
		margin-bottom: 20rpx;
		width:94%
	}
	
	.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: #3ED598;
		background-color: #35b882;
		width: 200rpx;
		border-radius: 50rpx;
		color: white;
	}
	// 学员头像
	.stuImgWrapper{
		position: absolute;
		width:220rpx;
		height: 220rpx;
		top: 50rpx;
		right: 30rpx;
	}
	.stuImg{
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
</style>