h5mall_uniapp/pages/index/components/fill-form.vue

<template>
	<view class="fill-form">
		<uni-forms>
			<view class="a-form-item uni-form-item">
				<view class="title">
					CashBack
				</view>
				<view class="cash-back">
					<image src="../../../static/7.png"></image>
					<text>{{props.days}} Days</text>
				</view>
			</view>
			<view class="a-form-item uni-form-item">
				<view class="title">
					{{$t('index.finance.platform')}}
				</view>
				<view>
					{{props.platform}}
				</view>
			</view>
			<view class="a-form-item uni-form-item">
				<view class="title">
					{{$t('index.finance.order_sn')}}
				</view>
				<view>
					<picker :value="data.selectedOrderIndex" :range="data.orderList" @change="changeOrder">
						<view>
							{{selectedOrder()}}
						</view>
					</picker>
				</view>
			</view>
			<!-- <view class="a-form-item uni-form-item">
				<view class="title">
					金额
				</view>
				<uni-easyinput :input-border="false"></uni-easyinput>
			</view> -->
			<view class="a-form-item steps">
				<view class="tab-header">
					<view :class="{'active':data.selectedTabIndex===0}" @tap="go(0)"><text>{{$t('index.finance.step')}}</text></view>
					<view :class="{'active':data.selectedTabIndex===1}" @tap="go(1)"><text>{{$t('index.finance.example')}}</text></view>
				</view>
				<view v-if="data.selectedTabIndex===0" class="step-texts">
					<textarea type="text" :value="props.task_step" disabled />
					<!-- <rich-text :nodes="props.task_step"></rich-text> -->
				</view>
				<view v-if="data.selectedTabIndex===1" class="step-pics">
					<view v-for="(item,index) in data.stepPics" class="step-pic">
						<image mode="aspectFit" :src="item"></image>
						<view @tap="removeImage(index)" class="step-pic-close">
							<image src="../../../static/10.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="a-form-item upload-image" v-if="data.stepPics.length<3">
				<input type="file" name="file" accept="image/*" />
				<view @tap="uploadFile()" class="upload-btn">
					<view class="upload-icon">
						<text>＋</text>
					</view>
					<text>
						{{$t('index.finance.uploadfile')}}
					</text>
				</view>
			</view>
		</uni-forms>
		<view class="submit-btn-wrapper">
			<button class="submit-btn" @tap="handleSubmit()">{{$t('index.finance.submit')}}</button>
		</view>
		<view class="dialog-wrapper" v-if="data.showDialog" @tap="data.showDialog=false">
			<view class="dialog">
				<view class="close" @tap="$emit('submit')">
					<image src="../../../static/10.png"></image>
				</view>
				<text>{{$t('index.finance.submitSuccess')}}</text>
				<image class="success-image" src="../../../static/6.png" />
				<view class="progress">
					<view class="progress-item">
						<view class="done">
							<image src="../../../static/7.png"></image>
						</view>
					</view>
					<view class="progress-line"></view>
					<view class="progress-item">
						<view class="ongoing">
							<text>2</text>
						</view>
					</view>
					<view class="progress-line"></view>
					<view class="progress-item">
						<view>
							<text>3</text>
						</view>
					</view>
				</view>
				<view class="progress-texts">
					<view><text>{{$t('index.finance.apply')}}</text></view>
					<view><text>{{$t('index.finance.audit')}}</text></view>
					<view><text>{{$t('index.finance.return_money')}}</text></view>
				</view>

				<!-- <view class="tips">
					<view class="tips-content">
						<image src="/static/8.png"></image>
						<text>特别声明: 文档内容文档内容文档内容</text>
					</view>
				</view> -->

			</view>
		</view>
	</view>
</template>

<script setup>
	
	import sheep from '@/sheep';
	import { onLoad } from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
	} from 'vue'
	const props = defineProps(['id','days','platform','task_step'])
	const selectedOrder = () => {
		return data.orderList[data.selectedOrderIndex];
	}
	const popup = ref();
	async function handleSubmit() {
		for(var i = 0;i < data.dataList.length;i++){
			if(data.dataList[i].order_sn == data.orderList[data.selectedOrderIndex]){
				data.order_id = data.dataList[i].id;
			}
		}
		const res = await sheep.$api.task.submitTask({
			id: data.order_id,
			images: data.images,
			task_id: props.id
		});
		console.log(res)
		if(res.code == 1){
			data.showDialog = true;
		}else{
			sheep.$helper.toast(res.msg);
		}
		
	}

	const changeOrder = e => {
		data.selectedOrderIndex = e.detail.value;
	}
	const data = reactive({
		selectedTabIndex: 0,
		stepText: '',
		stepPics: [],
		showDialog: false,
		images: '',
		orderList: [],
		dataList: [],
		order_id: 0,
		selectedOrderIndex: 0,
	})
	
	onLoad(async () => {
	  await getTaskListByDay();
	});
	async function getTaskListByDay(){
		const res = await sheep.$api.task.listByDay({
			day: props.days
		});
		console.log(res)
		if(res.code == 1){
			data.dataList = res.data;
			for(var i = 0;i < res.data.length;i++){
				data.orderList.push(res.data[i].order_sn);
			}
		}
		
	}

	const go = (idx) => {
		data.selectedTabIndex = idx;
	}
	const handleFileChange = (e) => {
		data.selectedTabIndex = 1;
		for (const f of e.target.files) {
			const name = URL.createObjectURL(f);
			data.stepPics.push(name);
			const a = new FileReader();
			a.readAsDataURL(f);
			a.onload = (e) => {
			  data.images = e.target.result
			  console.log(data.images)
			}
			if (data.stepPics.length >= 1) {
				break;
			}
		}
	}
	const uploadFile = () => {
		const f = document.querySelector("input[type='file']");
		f.removeEventListener('change', handleFileChange);
		f.addEventListener('change', handleFileChange);
		f.click();
	}
	const removeImage = (idx) => {
		data.stepPics.splice(idx, 1);
	}
</script>

<style scoped lang="scss">
	.dialog-wrapper {
		z-index: 999;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgba(0, 0, 0, 0.7);
	}

	.dialog {
		position: relative;
		background-color: white;
		border-radius: 20upx;
		width: 80%;
		min-height: 100upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20upx;

		.close {
			position: absolute;
			right: 10upx;
			top: 10upx;

			&>image {
				width: 60upx;
				height: 60upx;
			}
		}

		.success-image {
			margin: 20upx 0upx;
			width: 100upx;
			height: 100upx;
		}

		.progress-texts {
			margin-top: 10upx;
			width: 100%;
			display: flex;
			color: #777;

			&>view {
				flex: 1;
				display: flex;
				justify-content: center;
			}
		}

		.progress {
			display: flex;
			width: 70%;
			justify-content: space-between;

			.progress-line {
				border-top: 1px dashed #FAA435;
				margin-top: 20upx;
				min-width: 35%;
			}

			&>.progress-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 40upx;
					height: 40upx;
				}

				view:nth-child(1) {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border: 1px solid #FAA435;
					border-radius: 50%;
					min-width: 40upx;
					min-height: 40upx;
					color: #faa435;
					font-size: 14upx;

					&.done {
						border: none;
					}

					&.ongoing {
						background: #faa435;
						color: white;
					}
				}
			}
		}

		.tips {
			background: #FDEAC9;
			border-radius: 40px;
			padding: 7px 15px;
			margin-top: 50px;
			margin-bottom: 10px;
		}

		.tips .tips-content {
			width: 100%;
		}

		.tips image {
			width: 14px;
			height: 14px;
			vertical-align: middle;
			padding-right: 6px;
		}

		.tips text {
			color: #8C7E75;
			font-size: 12px;
		}
	}

	.fill-form {
		display: flex;
		flex-direction: column;
	}

	.a-form-item {
		display: flex;
		align-items: center;
		padding: 20upx;
		border-radius: 10upx;
		box-shadow: 0px 0px 5px #ddd;
		margin: 15upx;
	}

	.cash-back {
		display: flex;
		align-items: center;

		image {
			margin-right: 10upx;
			width: 40upx;
			height: 40upx;
		}
	}

	.uni-form-item {
		justify-content: space-between;

		.uni-easyinput {
			max-width: 500upx;
			text-align: right;
		}
	}

	.steps {
		align-items: flex-start;
		flex-direction: column;
	}

	.step-texts {
		display: flex;
		flex-direction: column;

		textarea {
			color: #555;
			font-size: 0.825rem;
			margin-top: 40upx;
			height: 300upx;
		}
	}

	.step-pics {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 300upx;

		.step-pic {
			position: relative;
			width: 100%;
			margin: 12px 0;

			&>image {
				width: 100%;
				height: 100%;
			}

			.step-pic-close {
				z-index: 1;

				&>image {
					width: 50upx;
					height: 50upx;
				}

				position: absolute;
				top: 0;
				right: 0;
			}
		}

	}

	.tab-header {
		display: flex;
		align-self: center;

		&>view {
			border-bottom: 6upx solid #FDEAC9;

			&>text {
				padding: 0upx 20upx;
				color: #50555555;
			}

			&.active {
				border-bottom-color: #FAA435;

				&>text {
					color: #FAA435;
				}
			}
		}
	}

	.upload-image {
		&>input {
			display: none;
		}
	}

	.upload-btn {
		display: flex;
		align-items: center;

		.upload-icon {
			border: 1px dashed #50555555;
			color: #50555555;
			border-radius: 8upx;
			width: 90upx;
			height: 90upx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 10upx;
		}
	}

	.submit-btn-wrapper {
		position: fixed;
		width: 100%;
		display: flex;
		justify-content: center;
		bottom: 100upx;
		;
	}

	.submit-btn {
		padding: 0;
		margin: 0;
		font-size: inherit;
		background-color: transparent;
		color: inherit;

		border: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
		vertical-align: baseline;
		transform: translate(0, 0);
		width: 18.9375rem;
		height: 2.75rem;
		line-height: normal;
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 1rem;
		font-size: 0.8125rem;
		font-weight: 500;
		color: #fff;
		align-self: center;
		margin-top: 50upx;
		margin-bottom: 50upx;
	}
</style>