add_praise.vue 3.1 KB
<template>
	<view class="add_praise">
		<view class="tel_index_bg"></view>
		<view class="add_praise-main">
			<view class="add_praise-main-1">
				<view class="add_praise-main-1-l">请在此处提交你对我校及某位老师的表扬</view>
				<view class="add_praise-main-1-b">
					<view class="add_praise-main-1-b-u">
						<u-upload
							:fileList="fileList"
							@afterRead="afterRead"
							@delete="deletePic"
							name="4"
							multiple
							:maxCount="6"
						></u-upload>
					</view>
					<view class="add_praise-main-1-b-t">
						<u--textarea height="150" v-model="content" placeholder="请输入文字内容" ></u--textarea>
					</view>
				</view>
				
			</view>
			<view class="operation" @click="submit">
				提交表扬
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
				content: ''
			};
		},
		methods: {
			submit() {
				var datas = {
					content: this.content,
					imgs: this.fileList.map(item => item.url)
				}
				var jkurl = '/praise/add'
				this.$service.P_post(jkurl, datas).then(res => {
					uni.showToast({
						icon:'none',
						title: '上传成功'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
			},
			async afterRead(event) {
				let lists = [].concat(event.file)
				for (let i = 0; i < lists.length; i++) {
					let res = await this.uploadFilePromise(lists[i].url)
					this.fileList.push({
						name: res.data,
						url: res.name
					})
				}
				this.$emit('change', this.fileList)
			},
			uploadFilePromise(url) {
				let baseurl = this.$service.baseurl
				
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '上传中'
					})
					uni.uploadFile({
						url: baseurl + 'api/login/upload', // 仅为示例,非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'Authorization': uni.getStorageSync('token')
						},
						formData: {},
						success: (res) => {
							console.log('res=====>', JSON.parse(res.data))
							resolve(JSON.parse(res.data))
							uni.hideLoading()
						}
					});
					
				})
			},
			deletePic(e) {
				console.log(e.index)
				this.fileList.splice(0, 1)
			}
		}
	}
</script>

<style lang="scss">
.add_praise{
	.tel_index_bg{
		position: absolute;
		top: 0;
		z-index: 1;
		width: 100%;
		min-height: 220rpx;
		background: linear-gradient(0deg, #f8f8f8 0%, #ffffff 25%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
	}
	.add_praise-main{
		position: relative;
		z-index: 1;
		padding: 15rpx 25rpx;
		.add_praise-main-1{
			border-radius: 15rpx;
			background: #fff;
			overflow: hidden;
			.add_praise-main-1-l{
				line-height: 60rpx;
				padding: 0 30rpx;
				background: #fff9eb;
				color: #F5AC1A;
				font-size: 24rpx;
			}
			.add_praise-main-1-b{
				padding: 0rpx 30rpx;
				.add_praise-main-1-b-u{
					padding: 40rpx 0rpx;
					border-bottom: #EEEEEE solid 1rpx;
				}
			}
		}
		.operation{
			border-radius: 15rpx;
			background-color: #2C82FD;
			line-height: 90rpx;
			text-align: center;
			width: 700rpx;
			color: #fff;
			z-index: 1;
			margin-top: 40rpx;
		}
	}
}
</style>