OfficeApp/subpkg/townTask/townTask.vue

<template>
	<view style="padding-top: 28rpx;padding-bottom: 160rpx;">
		<view class="card">
			<view class="title">任务名称: {{task.title}}</view>
			<u-line style="margin: 14rpx 0;"></u-line>
			<!-- <view class="text">阶段类型: 单次</view> -->
			<view class="text" style="color: #FF7C32;" v-if="task.extend&&task.extend.shareholder">入股金额:
				{{task.extend.shareholder.money}}元
			</view>
		</view>
		<!-- <view class="card">
			<view class="title">任务描述</view>
			<u-line style="margin: 14rpx 0;"></u-line>
			<view class="text">{{task.content||'暂无任务描述'}}</view>
		</view> -->
		<view class="card">
			<view class="title">事件记录</view>
			<u-line style="margin: 14rpx 0;"></u-line>
			<u-steps v-if="task.extend&&task.extend.shareholder" :current="-1" direction="column" activeColor="#0122c7"
				dot inactiveColor="#0122c7">
				<u-steps-item v-for="(item, index) in task.extend.shareholder.user_list" :title="item.time"
					:desc="item.info">
				</u-steps-item>
			</u-steps>
		</view>
		<view class="card">
			<view class="title">附件上传</view>
			<u-line style="margin: 14rpx 0;"></u-line>
			<view class="" style="display: flex;align-items: center;">
				<text style="margin-right: 10rpx;">金额:</text>
				<view class="" style="width: 500rpx;">
					<u--input style="border: 1px solid #CCCCCC;" :readonly='isDisabled' placeholder="请输入金额"
						type='number' border="surround" v-model="amount"></u--input>
				</view>
			</view>
			<view class="" :class="{hide:file}" v-if="!isDisabled">
				<view class="" :class="{hide:progress!=0}">
					<lsjUpload ref="lsjUpload" childId="upload1" :size="10" :option="fileOption" height="200rpx"
						style="margin-top: 28rpx;" :debug="false" :formats="'png,jpg,jpeg,pdf,webp'" :multiple="false"
						:count="1" :instantly="false" @change="changeFile" @uploadEnd="onuploadEnd"
						@progress="onprogress">
						<view class="change-file">上传凭证</view>
					</lsjUpload>
				</view>
				<view style="margin-top: 20rpx;" v-if="progress>0">
					<u-loading-icon :text=" '正在上传中'+ progress+'%'" textSize="18"></u-loading-icon>
				</view>
			</view>
			<view class="file" v-if='file'>
				<view class="">
					<image :src="local_src||file" style="width: 150rpx;height: 150rpx;margin-right: 12rpx;"
						v-if="file_type=='image'">
					</image>
					<image src="@/static/img/contract/pdf.png" style="width: 150rpx;height: 150rpx;margin-right: 12rpx;"
						v-else>
					</image>
				</view>
				<view class="r-cont">
					<view class="">
						{{fileTit}}
					</view>
					<view class="" style="display: flex;">
						<view class="" style="color: blue;margin-right: 10rpx;" @click="navToContract">
							查看
						</view>
						<view class="" style="color: red;" @click="delFn" v-if="!isDisabled">
							删除
						</view>
					</view>

				</view>

			</view>

			<!-- 	<button @click='uplodeFileFn'>点击上传附件</button> -->

			<!-- <image class="contract_img" src="@/static/img/contract/pdf.png"></image> -->
			<!-- <view class="text">
				<view class="name">{{item.contract_type_name||'合同'}}</view>
				<view>
					<text>{{item.update_time}}</text>
				</view>
			</view> -->

			<!-- <view class="text" style="color: #FF7C32;">入股的金额将在次日凌晨更新到"股金管理"内，请于次日打开"股金管理"页面查看详情</view> -->
		</view>
		<!-- <mybtn v-if="task.status!=3 && task.status!=5" text="前往支付页面"
			@click="navTo(`/subpkg/topUp/topUp?task_id=${task_id}`)"></mybtn>
		<mybtn v-else :text="task.status==3?'已完成任务':'任务已关闭'" :my_btn_disabled="true"></mybtn> -->
		<mybtn v-if="!isDisabled" text="提交" @click="submitFn"></mybtn>
		<mybtn v-else-if='task.status==3' text="已完成任务" :my_btn_disabled="true"></mybtn>
		<mybtn v-else-if="isDisabled" text="任务已经提交" :my_btn_disabled="true"></mybtn>
	</view>
</template>
<script>
	import {
		taskShareholder,
		commit_service_group_taskAPI
	} from "@/api/task.js"
	import lsjUpload from '@/uni_modules/lsj-upload/components/lsj-upload/lsj-upload.vue'
	import {
		FILE_URL,
		IMG_URL
	} from '@/api/file.js'
	import {
		Toast
	} from "../../libs/uniApi";

	export default {
		components: {
			lsjUpload
		},
		data() {
			return {
				progress: 0,
				imgTypeList: ["png", "jpg", "jpeg", "webp"],
				isDisabled: false,
				amount: "",
				fileOption: {},
				task: {},
				task_id: -1,
				file: "",
				local_src: "",
				fileTit: "",
				file_type: "pdf",
			};
		},
		onLoad(options) {
			this.task_id = options.task_id;
			this.loadTask();
			uni.$on('upBuyShare', this.loadTask);
			this.fileOption = {
				url: FILE_URL,
				name: 'file',
				header: {
					token: this.$store.state.app.token
				}
			}
		},
		methods: {
			navToContract() {
				let fileSrc = this.file
				if (this.file_type == 'image') {
					uni.previewImage({
						urls: [fileSrc]
					})
				} else {
					uni.navigateTo({
						url: `/subpkg/pdfView/pdfView?url=${fileSrc}`
					})
				}
			},
			async submitFn() {
				if (!this.amount) return Toast("请输入金额")
				if (Number(this.amount) < Number(this.task.extend.shareholder.money)) return Toast("未达到目标入股金额，无法提交")
				let data = {
					id: this.task_id,
					annex: this.file,
					amount: this.amount,
					file_type: this.file_type
				}

				let res = await commit_service_group_taskAPI({
					...data
				})
				Toast("操作成功!")
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			},
			delFn() {
				this.clear()
				this.file = ""
				this.file_type = "pdf"
				this.progress = 0

			},
			clear() {
				this.$refs.lsjUpload.clear();
			},
			/**
			 * 某文件上传结束回调(成功失败都回调)
			 * @param {Object} item 当前上传完成的文件
			 */
			onuploadEnd(item) {
				let res = JSON.parse(item.responseText)
				this.file = res.data.uri
				this.fileTit = res.data.name
				this.$forceUpdate();
			},
			/**
			 * 上传进度回调
			 * 如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
			 * @param {Object} item 当前正在上传的文件
			 */
			onprogress(item) {
				this.progress = item.progress
			},
			/**
			 * 文件选择回调
			 * @param {Object} files 已选择的所有文件Map集合
			 */
			async changeFile(files) {
				let type = [...files.values()][0]?.name || null
				if (!type) return
				let isImage = null
				this.imgTypeList.forEach(item => {
					if (type.includes(item)) {
						isImage = true
						this.file_type = 'image'
					}
				})
				this.local_src = [...files.values()][0].path
				if (isImage) {
					this.$refs.lsjUpload.setData("url", IMG_URL)
				} else {
					this.$refs.lsjUpload.setData("url", FILE_URL)
				}
				this.$refs.lsjUpload.upload()
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();
			},
			async loadTask() {
				let res = await taskShareholder({
					id: this.task_id
				});
				this.task = res.data;
				if (this.task.extend.is_commit == 1) {
					this.file = this.task.extend.annex
					this.file_type = this.task.extend.file_type
					this.amount = this.task.extend.amount || 0
					this.fileTit = "附件"
					this.isDisabled = true
				}
			},
			navTo(url) {
				if (url) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					uni.navigateTo({
						url: url,
						success() {
							uni.hideLoading()
						}
					})
				} else Toast('暂未开放')
			},
		}
	}
</script>

<style lang="scss">
	.card {
		margin: 0 auto;
		margin-bottom: 28rpx;
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 28rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.text {
			line-height: 50rpx;
		}
	}

	.contract_img {
		width: 102rpx;
		height: 102rpx;
		background: #F5F5F5;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		margin-right: 21rpx;
	}

	.change-file {
		margin: 0 auto;
		width: 500rpx;
		height: 200rpx;
		border: 2px dashed #ccc;
		border-radius: 14rpx;
		color: #999;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.file {
		margin-top: 30rpx;
		display: flex;
		// justify-content: space-between;

		.r-cont {
			display: flex;
			justify-content: space-around;
			flex-direction: column;
		}
	}

	.hide {
		height: 0;
		overflow: hidden;
	}
</style>