yichael_zhongchuang_front_2/components/home/teacher/create.vue

<template>
	<view class="m_right">
		<image src="../../../assets/home/homeBG.png" class="s_logo" mode=""></image>
		<view class="s_content_container">
			<view class="s_content">
				<view class="uni-form-item  df fdr aic">
					<view class="title">项目名称</view>
					<input class="form-input" v-model="model.projectName" name="input" placeholder="请输入项目名称" />
				</view>
				<view class="uni-form-item df fdr aic">
					<view class="title">项目类型</view>
					<!-- <input type="number"  class="form-input" value=""  placeholder="这是一个项目类型"/> -->
					<!-- <input name="input" v-model="model.type" class="form-input" type="number" placeholder="这是一个项目类型" /> -->

					<picker class="form-input" @change="bindPickerChange_proType" :value="index_proType" :range="proType">
						<view class=" df fdr aic jcsb">
							<view>{{proType[index_proType]}}</view>
							<view>
								<img src="../../../assets/user/pic_user_03.png" />
							</view>
						</view>
					</picker>
				</view>
				<view class="uni-form-item ">
					<view class="title">项目介绍</view>
					<textarea name="" class="form-input" v-model="model.describe" style="height: 100rpx;" id="" cols="10" rows="5"
					 placeholder="请输入项目介绍"></textarea>
				</view>
			</view>
		</view>

		<view class="s_footer" style="text-align: center">
			<button size="mini" class="m_btn_download" style="" @click="save">创建完成</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "create",
		data() {
			return {
				model: {
					createUserID: undefined,
					projectName: "",
					describe: "",
					type: "科幻",
				},
				index_proType: 0,

				proType: ['科幻', '现实', '剧情', '历史', '爱情', '惊悚', '公路', '动画'],
			}
		},
		components: {},
		created() {
			this.clear();
		},
		methods: {
			save() {
				this.model.createUserID = this.$UserId;
				console.log(this.model);
				if (this.model.projectName == "") {
					alert("请输入项目名称~");
					return false;
				}
				if (this.model.describe == "") {
					alert("请输入项目介绍~");
					return false;
				}
				if (this.model.type == "") {
					alert("请输入项目类型~");
					return false;
				}
				let data = {
					"CreateUserID":mydata_userInfo.UserID,
					"ProjectName":this.model.projectName,
					"Describe":this.model.describe,
					"Type":this.model.type
				}
				console.log("请求创建项目",data);
				MyRequest.CreateProjectNew(data,function(res){
					console.log("创建项目成功",res);
				},null);
			},
			clear() {
				this.model = {
					createUserID: undefined,
					projectName: "",
					describe: "",
					type: "科幻",
				}
			},
			bindPickerChange_proType: function(e) {
				this.index_proType = e.target.value;
				this.model.type = this.proType[this.index_proType];
				console.log(this.model)
			},
		}
	}
</script>

<style scoped>
	@import '../../../assets/icon/iconfont.css';

	.form-input {
		width: 100%;
		border: 1px solid #ece8e8;
		line-height: 50rpx;
		font-size: 30rpx;
		border-radius: 6rpx;
		padding: 10rpx 40rpx;

	}

	.s_content {
		margin-top: 100rpx;
	}

	.title {
		width: 200rpx;
		line-height: 60rpx;
	}

	.uni-form-item {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
	}

	.m_container {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;

		.m_left {
			width: 500rpx;
			background-color: #fff;
			border-right: 10rpx solid #ECECEC;
			border-top: 5rpx solid #ECECEC;
			box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);

			.m_hander {
				text-align: center;
				background-color: #fff;
				height: 600rpx;
				position: relative;
				// margin: 5rpx 10rpx 10rpx 0;
				border-bottom: 8rpx solid #ECECEC;

				.m_teacher {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.m_teacher_name {
					font-size: 1.1rem;
					font-weight: 600;
					padding: 30rpx 0;
					font-family: MicrosoftYaHei;
				}

				.m_head_portrait {
					width: 250rpx;
					height: 250rpx;
					color: #555555;
				}
			}
		}

		.m_right {
			width: 100%;
			margin-top: 5rpx;
			// padding: 0 150rpx;
			background-color: #fff;
			box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1);

			.m_right_hander {
				text-align: right;
				height: 250rpx;
				position: relative;

				.m_btn_red {
					position: absolute;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 40rpx;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					background: #EA252C;
					color: #fff;
				}
			}

		}

		.m_menu-icon {
			width: 24rpx;
			height: 24rpx;
		}

		.m_menu {
			background-color: #fff;

			.m_menu-item {
				position: relative;
				display: flex;
				padding: 20rpx 0;
				line-height: 90rpx;
				font-weight: 500;
				border-bottom: 1px solid #DDDDDD;

				.m_menu_item_icon {
					width: 100rpx;
					text-align: right;
					margin-right: 15rpx;
				}

				.m_menu_item_name {
					margin-left: 10rpx;
					font-weight: 600;
				}

				.m_act {
					background: #FF0019;
					width: 8rpx;
					border-radius: 0px 200rpx 200rpx 0px;
					position: absolute;
					height: 90rpx;
					top: 20rpx;
					left: 0;
				}

			}
		}

		.m_act_font .m_menu_item_name {
			color: #FF0019;
		}
	}




	.m_edit {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgb(67, 127, 250);
		color: rgb(255, 255, 255);
		min-width: 130rpx;
	}

	.m_delete {
		position: absolute;
		top: 50%;
		left: 50%;
		min-width: 130rpx;
		transform: translate(-50%, -50%);
		background: rgb(234, 37, 44);
		color: rgb(255, 255, 255);
	}

	.m_right_footer {
		margin-top: 80rpx;
	}

	.m_paging {
		text-align: right;

		.m_paging_item {
			padding: 10rpx 18rpx;
			border: 1rpx solid #DDDDDD;
			border-radius: 8rpx;
			margin-right: 10rpx;
		}

		.p_act {
			background: #EA252C;
			color: #fff;
			border: inherit;
		}
	}

	.m_paging_item:hover {
		background: #EA252C;
		color: #fff;
		border: inherit;
	}

	.m_act1 {
		color: #FF0019;
	}

	.s_logo {
		width: 100%;
		height: 800rpx;
	}


	.s_content_container {
		padding: 0 600rpx;

		.s_title {
			font-weight: bold;
			text-align: center;
			line-height: 200rpx;
			font-size: 45rpx;
		}

		.s_content {
			font-weight: 500;
			font-size: 40rpx;
			line-height: 70rpx;
		}
	}

	.m_btn_download {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 70rpx;
		background: #EA252C;
		color: #fff;
		font-family: MicrosoftYaHei;
		margin-bottom: 80rpx;
	}

	.s_footer {
		margin-top: 80rpx;
	}
</style>