school_ecology_h5/components/school-form-launch/school-form-launch.vue

<template>
	<view class="content">
		<!-- 上榜方式区域 -->
		<view class="box">
			<view class="box_title">
				<text class="text">*</text>
				上榜方式
			</view>
			<picker :range="listRange" @change="changeMode">
				<view class="box_input">
					<view class="picker" :class="{ pick: form.mode }">{{ form.mode ? form.mode : '请选择上榜方式' }}</view>
					<uni-icons type="down" size="24" color="#A6A6A6"></uni-icons>
				</view>
			</picker>
		</view>

		<!-- 上传照片区域 -->
		<view class="upload">
			<image v-if="form.image" class="img" :src="form.image" mode="aspectFill" @click="clickImg(form.image)"></image>

			<view v-else class="upload_box" @click="handleUpload">
				<uni-icons type="plusempty" size="30" color="#A6A6A6"></uni-icons>
				上传照片
			</view>

			<!-- 删除图标区域 -->
			<view class="delete" v-if="form.image" @click="clickClose">
				<uni-icons type="close" size="15" color="#fff"></uni-icons>
			</view>
		</view>

		<!-- 人物简介区域 -->
		<view class="desc">
			<view class="desc_title">人物简介</view>

			<textarea v-model="form.descript" class="textarea" maxlength="-1" placeholder="请输入人物简介"></textarea>
		</view>

		<!-- 提交按钮区域 -->
		<view class="btn" @click="handleSubmit">提交</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { uploadImage } from '@/api/uploadImage.js'
import { getApplication } from '@/api/index.js'

const $emit = defineEmits(['change'])

// 上榜方式筛选框数组
const listRange = ['自荐', '学院推荐']

// 提交数据
const form = ref({
	// 上榜方式（展示）
	mode: '',
	// 自荐：1  学院推荐：2 （接口参数）
	preferredMethod: '',
	// 照片
	image: '',
	// 人物简介
	descript: ''
})

// 选择上榜方式时的回调
const changeMode = (e) => {
	// console.log(e)
	let index = e.detail.value
	form.value.mode = listRange[index]
	form.value.preferredMethod = index - 0 + 1
	// console.log(form.value)
}

// 上传照片回调
const handleUpload = () => {
	uni.chooseImage({
		count: 1,
		success: async (res) => {
			// console.log(res)

			uni.showLoading({
				title: '上传中...',
				mask: true
			})

			let temp = await uploadImage(res.tempFilePaths[0])
			let result = JSON.parse(temp.data)
			// console.log(result)

			if (result.code == 200) {
				form.value.image = result.data.fileUrl
			}

			// console.log(form.value)
			uni.hideLoading()
		}
	})
}

// 点击图片回调
const clickImg = (e) => {
	uni.previewImage({
		urls: [e]
	})
}

// 点击删除图标回调
const clickClose = () => {
	uni.showModal({
		title: '提示',
		content: '确定删除照片吗？',
		success: (res) => {
			if (res.confirm) {
				form.value.image = ''
			}
		}
	})
}

// 提交按钮回调
const handleSubmit = () => {
	// console.log(form.value)
	uni.showModal({
		title: '提示',
		content: '确定提交吗？',
		success: (res) => {
			if (res.confirm) {
				// 提交请求
				handleSubmitReq()
			}
		}
	})
}

// 提交请求
const handleSubmitReq = async () => {
	const res = await getApplication(form.value)
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: '提交成功',
			icon: 'success'
		})

		setTimeout(() => {
			$emit('change', 1)
		}, 1500)
	}
}
</script>

<style lang="scss" scoped>
.content {
	margin-top: 20rpx;

	.box {
		margin-bottom: 15rpx;
		font-size: 28rpx;

		.box_title {
			display: flex;
			margin-bottom: 15rpx;

			.text {
				color: #d43030;
			}
		}

		.box_input {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 22rpx;
			width: 710rpx;
			height: 80rpx;
			border-radius: 6rpx;
			background-color: #f5f5f5;

			.input {
				height: 100%;
				font-size: 28rpx;
			}

			.picker {
				color: #a6a6a6;
			}

			.pick {
				color: #000;
			}
		}
	}

	.upload {
		position: relative;
		margin-top: 56rpx;

		.img {
			width: 140rpx;
			height: 140rpx;
			border-radius: 8rpx;
		}

		.upload_box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			width: 140rpx;
			height: 140rpx;
			color: #a6a6a6;
			font-size: 24rpx;
			border-radius: 8rpx;
			background-color: #f0f6fc;
		}

		.delete {
			z-index: 1;
			position: absolute;
			top: 5rpx;
			left: 102rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30rpx;
			height: 30rpx;
		}
	}

	.desc {
		margin-top: 30rpx;

		.desc_title {
			font-size: 28rpx;
			font-weight: bold;
		}

		.textarea {
			box-sizing: border-box;
			padding: 10rpx;
			margin-top: 15rpx;
			width: 710rpx;
			height: 308rpx;
			font-size: 28rpx;
			border-radius: 6rpx;
			background-color: #f5f5f5;
		}
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 100rpx auto;
		width: 661rpx;
		height: 90rpx;
		font-size: 28rpx;
		color: #fff;
		border-radius: 8rpx;
		background-color: #007aff;
	}
}
</style>