SxsnWechat/pagesHome/fillNonprofitArchives.vue

<template>
	<view class="common_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title="填写公益档案" bgColor="transparent"></cus-header>
		<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/54b75bc8-d926-449b-95a5-1126f700b481.png" class="top_bg_img" mode="widthFix"></image>
		<div class="box">
			<div class="box-title">活动信息</div>
			<div class="box-pre adf">
				<div class="box-pre-left">活动名称</div>
				<div class="box-pre-right">{{'让孩子成为小小自然守护者'}}</div>
			</div>
			<div class="box-pre adf">
				<div class="box-pre-left">学生姓名</div>
				<div class="box-pre-right">{{'周飒然'}}</div>
			</div>
			<div class="box-pre adf">
				<div class="box-pre-left">参与时间</div>
				<div class="box-pre-right">{{'2025年7月30日'}}</div>
			</div>
			<div class="box-pre adf">
				<div class="box-pre-left">公益支持</div>
				<div class="box-pre-right">{{'种植沙漠沙沙树2棵'}}</div>
			</div>
		</div>
		<div class="box">
			<div class="box-title">活动心得</div>
			<up-textarea v-model="xxx" placeholder="请分享参加公益活动心得，至少输入10个字～" count border="none" style="height: 250rpx;margin-top: 28rpx;padding: 0;font-size: 26rpx;color: #252525;"></up-textarea>
		</div>
		<div class="box">
			<div class="box-title">活动照片<text>(分享活动照片)</text></div>
			<div class="box-img">
				<up-upload
					:fileList="fileList"
					@afterRead="afterRead"
					@delete="deletePic"
					multiple
					:maxCount="3"
					width="160rpx"
					height="160rpx"
				>
					<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/29/b04d6b0e-0d30-4043-a2b1-d639e15e2aac.png" 
					mode="widthFix" style="width: 160rpx;height: 160rpx;"></image>
				</up-upload>
			</div>
		</div>
		<div class="btn" @click="handleSubmit">提交</div>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { ref } from 'vue'
	
	const xxx = ref('')
	const fileList = ref([])
	
	const deletePic = (event) => {
	  fileList.value.splice(event.index, 1);
	};
	
	// 新增图片
	const afterRead = async (event) => {
	  let lists = [].concat(event.file);
	  let fileListLen = fileList.value.length;
	  lists.map((item) => {
	    fileList.value.push({
	      ...item,
	      status: 'uploading',
	      message: '上传中',
	    });
	  });
	  for (let i = 0; i < lists.length; i++) {
	    const result = await uploadFilePromise(lists[i].url);
	    let item = fileList.value[fileListLen];
	    fileList.value.splice(fileListLen, 1, {
	      ...item,
	      status: 'success',
	      message: '',
	      url: result,
	    });
	    fileListLen++;
	  }
	};
	
	const uploadFilePromise = (url) => {
	  return new Promise((resolve, reject) => {
	    let a = uni.uploadFile({
	      url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
	      filePath: url,
	      name: 'file',
	      formData: {
	        user: 'test',
	      },
	      success: (res) => {
	        setTimeout(() => {
	          resolve(res.data.data);
	        }, 1000);
	      },
	    });
	  });
	};
	
	const handleSubmit = () => {
		uni.navigateTo({
			url:'/pagesHome/fillNonprofitResult'
		})
	}
</script>

<style scoped lang="scss">
	.common_page{
		padding-bottom: 64rpx;
		
		.box{
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 20rpx;
			padding: 36rpx 24rpx;
			position: relative;
			
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #151B29;
				line-height: 48rpx;
				text{
					font-weight: 400;
					font-size: 26rpx;
					color: #B2B2B2;
					line-height: 37rpx;
					margin-left: 16rpx;
				}
			}
			
			&-pre{
				margin-top: 35rpx;
				&-left{
					width: 160rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #676775;
					line-height: 30rpx;
					text-align: left;
				}
				&-right{
					width: calc(100% - 160rpx);
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #252525;
					line-height: 30rpx;
				}
			}
			
			&-img{
				margin-top: 47rpx;
			}
		}
		
		.btn{
			width: calc(100% - 32rpx);
			height: 90rpx;
			background: #B7F358;
			border-radius: 45rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #151B29;
			line-height: 90rpx;
			text-align: center;
			letter-spacing: 2rpx;
			margin: 40rpx auto 0;
		}
	}
</style>