files/components/student_write.vue

<template>
	<view class="page_div">
		<view>
			<p>中宣部授予肖文儒“时代楷模”称号</p>
			<p>2022-04-15 08:00</p>
			<p>为了贯彻落实习近平总书记在中央人才工作会议上的重要讲话精神，大力倡导尊重知识尊重人才理念，中央宣传部以云计算工程的算工程的算工程的算工程的</p>
		</view>

		<view v-show="write_none">
			<view>
				<p>学习笔记</p>
				<p @click="if_none">删除</p>
			</view>
			<view>
				<textarea v-model="useInput" />
			</view>
		</view>
		<view @click="insertShow()">
			<image :src="path[0]"></image>
			<p :style="{color:path[1]}">添加笔记</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				useInput: "",
				block_none: true,
				write_none: false,
				imagepath: [
					["/static/experience_2.png", "orange"],
					["/static/experience_1.png", "red"]
				],
				postif: true
			}
		},
		methods: {
			insertShow() {
				this.write_none = true;
				this.postif = !this.postif

				if (this.postif) {
					uni.showModal({
						content: '是否保存',
						success: res => {
							if (res.confirm) {
								console.log(this.useInput)
							}
						}
					});
				}
			},
			if_none() {
				uni.showModal({
					content: '是否删除',
					success: res => {
						if (res.confirm) {
							this.write_none = false;
							this.useInput = ""
						} else if (res.cancel) {
							this.write_none = true;
						}
					}
				})
			},
			async requests(updown, path) {
				let response
				if (updown == "up") {
					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model${path}`, {
						method: "POST",
						headers: {
							"Content-Type": "application/json",
						},
						body: JSON.stringify({
							"password": "0CYdq6Hn",
							"username": "6dOMIgIU"
						})
					})
				} else if (updown == "down") {
					response = await fetch(`http://124.93.196.45:10091/Neusoft/times-model${path}`, {
						method: "GET",
						headers: {
							"Content-Type": "application/json",
							"Authorization": (await this.requests("up", "/app/login")).token
						},
					})

				}
				const data = await response.json()
				console.log(data)
				return data
			}
		},
		async onLoad(){
			await this.requests("down","")
		},
		computed: {
			path() {
				if (this.write_none) {
					return this.imagepath[0]
				} else {
					return this.imagepath[1]
				}
			}
		},

	}
</script>

<style>
	.page_div {
		background-color: #fff;
		border-radius: 15px;
		padding: 3%;
		margin: 2%;
	}

	.page_div>view:first-child {
		border-bottom: 1px solid darkgray;
		padding-bottom: 10px;
	}

	.page_div>view:first-child p:first-child {
		font-size: 1.1rem;
	}

	.page_div>view:first-child p:nth-child(2) {
		font-size: 0.8rem;
	}

	.page_div>view:first-child p:nth-child(3) {
		font-size: 0.9rem;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.page_div>view:nth-child(2) {
		display: flex;
		flex-direction: column;
		padding-bottom: 5px;
		border-bottom: 1px solid darkgray;
	}

	.page_div>view:nth-child(2)>view:first-child {
		display: flex;
		justify-content: space-between;
	}

	.page_div>view:nth-child(2)>view:first-child p:nth-child(2) {
		color: #C2050F;
	}

	.page_div>view:nth-child(2)>view:nth-child(2) {
		background-color: darkgray;
		border-radius: 10px;
		padding: 5px;

	}

	.page_div>view:last-child {
		margin-top: 10px;
		height: 5vh;
		color: rgb(255, 56, 59);
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.page_div>view:last-child image {
		width: 4vw;
		height: 2vh
	}
</style>