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://oss.familydaf.cn/sxsnfile/20251218/ff31a76e0e1148378a318382b998a51f.png" class="top_bg_img" mode="widthFix"></image>
		<view class="box" v-if="activity">
			<view class="box-title">活动信息</view>
			<view class="box-pre adf">
				<view class="box-pre-left">活动名称</view>
				<view class="box-pre-right">{{activity?.activityName||''}}</view>
			</view>
			<view class="box-pre adf">
				<view class="box-pre-left">人员姓名</view>
				<view class="box-pre-right">{{activity?.memberName||''}}</view>
			</view>
			<view class="box-pre adf">
				<view class="box-pre-left">参与时间</view>
				<view class="box-pre-right">{{activity?.signinTime||''}}</view>
			</view>
			<view class="box-pre adf">
				<view class="box-pre-left">公益支持</view>
				<view class="box-pre-right">{{activity?.channelName||''}}</view>
			</view>
		</view>
		<view class="box">
			<view class="box-title">活动心得</view>
			<up-textarea v-model="experience" placeholder="请分享参加公益活动心得，至少输入10个字～" count border="none" style="height: 250rpx;margin-top: 28rpx;padding: 0;font-size: 26rpx;color: #252525;"></up-textarea>
		</view>
		<view class="box">
			<view class="box-title">活动照片<text>(分享活动照片)</text></view>
			<view class="box-img">
				<up-upload
					:fileList="fileList"
					@afterRead="afterRead"
					@delete="deletePic"
					multiple
					:maxCount="3"
					width="160rpx"
					height="160rpx"
				>
					<image src="https://oss.familydaf.cn/sxsnfile/20251218/2131899f0e684fa1a451ea8aa3ebc237.png" 
					mode="widthFix" style="width: 160rpx;height: 160rpx;"></image>
				</up-upload>
			</view>
		</view>
		<view class="btn" @click="handleSubmit">提交</view>
	</view>
</template>

<script setup name="">
	import CusHeader from '@/components/CusHeader/index.vue'
	import { BaseApi2 } from '../common/api/baseApi';
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, getCurrentInstance } from 'vue'
	const { proxy } = getCurrentInstance()
	
	const activity = ref(null)
	const experience = ref('')
	const fileList = ref([])
	
	const deletePic = (event) => {
	  const index = typeof event === 'object' ? event.index : event
	  fileList.value.splice(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: BaseApi2+'/sys/oss/upload',
	      filePath: url,
	      name: 'file',
	      success: (res) => {
	        setTimeout(() => {
				let data = JSON.parse(res.data)
				if(data&&data.code===0){
					resolve(data.data);
				}else proxy.$showToast(data?.msg)
	        }, 1000);
	      },
		  fail: err =>{
			resolve('');
		  }
	    });
	  });
	};
	
	const handleSubmit = () => {
		if(!experience.value) return proxy.$showToast('请输入活动心得')
		if(fileList.value.length===0) return proxy.$showToast('请上传活动照片')
		let activityFile = fileList.value.map(f=>f.url).join(';')
		proxy.$api.post('/core/activity/signup/addArchive',{
			activityFile,
			activityId:activity.value?.activityId,
			experience:experience.value,
			memberId:activity.value?.memberId
		}).then(({data:res})=>{
			if(res.code!==0) return proxy.$showToast(res.msg)
			uni.navigateTo({
				url:'/pagesHome/fillNonprofitResult'
			})
		})
	}
	
	onLoad((options)=>{
		if(options.activity){
			activity.value = JSON.parse(decodeURIComponent(options.activity));
			if(activity.value.signinTime) activity.value.signinTime = new Date(activity.value.signinTime).Format('yyyy.MM.dd hh:mm:ss')
		} 
	})
</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>