family/education_uni/subpkg/stu_require_detail/stu_require_detail.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-col :span="12">
				<view><text class="contain-text">学员性别：</text>{{item.sex}}</view>
			</uni-col>
		</uni-row>
		<uni-row>
			<uni-col :push="1">
				<view class="contain-item"><text class="contain-text">需求科目：</text>{{item.subjectBig}}/{{item.subjectSmall}}</view>
			</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.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-item"><text class="contain-text">期望目标：</text>{{item.goal}}</view>
			</uni-col>
		</uni-row>
		<uni-row>
			<uni-col :push="1">
				<view class="contain-item"><text class="contain-text">额外要求：</text>{{item.teacherDemanded}}</view>
			</uni-col>
		</uni-row>
		<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>
		
		<button class="publish-button" @click="publishButton">以此为模板新发布</button>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	export default {
		data() {
			return {
				item: {},
				courseWeekday: [],
				location: [],
				marker: [{
					id: 1,
					joinCluster:true,
					latitude: 0,
					longitude: 0,
					width: 40,
					height: 40,
					iconPath: '/static/location.png',
				}],
				// 上课时间
				// 上午
				timeAM: [{
						value: 'A1',
						name: '1',
						checked: false
					},
					{
						name: '2',
						value: 'A2',
						checked: false
					},
					{
						name: '3',
						value: 'A3',
						checked: false
					},
					{
						name: '4',
						value: 'A4',
						checked: false
					},
					{
						name: '5',
						value: 'A5',
						checked: false
					},
					{
						name: '6',
						value: 'A6',
						checked: false
					},
					{
						name: '7',
						value: 'A7',
						checked: false
					}
				],
				// 下午
				timePM: [{
						value: 'P1',
						name: '1',
						checked: false
					},
					{
						name: '2',
						value: 'P2',
						checked: false
					},
					{
						name: '3',
						value: 'P3',
						checked: false
					},
					{
						name: '4',
						value: 'P4',
						checked: false
					},
					{
						name: '5',
						value: 'P5',
						checked: false
					},
					{
						name: '6',
						value: 'P6',
						checked: false
					},
					{
						name: '7',
						value: 'P7',
						checked: false
					}
				],
				// 晚上
				timeEvening: [{
						name: '1',
						value: 'E1',
						checked: false
					},
					{
						name: '2',
						value: 'E2',
						checked: false
					},
					{
						name: '3',
						value: 'E3',
						checked: false
					},
					{
						name: '4',
						value: 'E4',
						checked: false
					},
					{
						name: '5',
						value: 'E5',
						checked: false
					},
					{
						name: '6',
						value: 'E6',
						checked: false
					},
					{
						name: '7',
						value: 'E7',
						checked: false
					}
				],
			};
		},
		computed: {
			...mapState('m_user', ['requireDetail'])
		},
		created() {
			this.item = JSON.parse(this.requireDetail)
			this.location = this.item.locationAl.split(",")
			this.marker[0].latitude = Number(this.location[0])
			this.marker[0].longitude = Number(this.location[1])
			this.courseWeekday = this.item.courseWeekday.split(",")
			// console.log("选中的日期：" + this.courseWeekday)
			for (let i = 0; i < this.courseWeekday.length; i++) {
				for (let x = 0; x < this.timeAM.length; x++) {
					if (this.courseWeekday[i] == this.timeAM[x].value) {
						this.timeAM[x].checked = true
					}
				}
				
				for (let y = 0; y < this.timePM.length; y++) {
					if (this.courseWeekday[i] == this.timePM[y].value) {
						// console.log(this.timePM[y].value)
						this.timePM[y].checked = true
					}
				}
				
				for (let z = 0; z < this.timeEvening.length; z++) {
					if (this.courseWeekday[i] == this.timeEvening[z].value) {
						this.timeEvening[z].checked = true
					}
				}
			}
		},
		methods: {
			publishButton() {
				uni.navigateTo({
					url:'/subpkg/add_stu_require/add_stu_require?item='+encodeURIComponent(this.requireDetail)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.contain {
	background-color: #FFF2CC;
	border-radius: 10%;
	
	.contain-item {
		margin-bottom: 20rpx;
	}
	
	.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 {
	background-color: #E2F0D9;
	width: 60%;
	border-radius: 50%;
}
</style>