OfficeApp/subpkg/buyShare/buyShare.vue
2023-11-15 18:47:53 +08:00

271 lines
7.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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="" v-if="!file">
<lsjUpload ref="lsjUpload" childId="upload1" :size="10" :option="fileOption" height="200rpx"
style="margin-top: 28rpx;" :debug="false" :formats="'pdf'" :multiple="false" :count="1"
:instantly="true" @change="changeFile" @uploadEnd="onuploadEnd">
<view class="change-file">请选择PDF类型的发票</view>
</lsjUpload>
</view>
<view class="file" v-else>
<view class="">
<image src="@/static/img/contract/pdf.png"
style="width: 150rpx;height: 150rpx;margin-right: 12rpx;">
</image>
</view>
<view class="r-cont">
<view class="">
{{fileTit}}
</view>
<view class="" style="color: blue;" @click="navToContract">
查看
</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="isDisabled" text="任务已经提交" :my_btn_disabled="true"></mybtn>
<mybtn v-else :text="task.status==3?'已完成任务':'任务已关闭'" :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
} from '@/api/file.js'
import {
Toast
} from "../../libs/uniApi";
export default {
components: {
lsjUpload
},
data() {
return {
isDisabled: false,
amount: "",
fileOption: {},
task: {},
task_id: -1,
file: "",
fileTit: "",
};
},
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
uni.navigateTo({
url: `/subpkg/pdfView/pdfView?url=${fileSrc}`
})
},
async submitFn() {
if (!this.amount) return Toast("请输入金额")
if (this.amount < this.task.extend.shareholder.money) return Toast("未达到目标入股金额,无法提交")
let res = await commit_service_group_taskAPI({
id: this.task_id,
annex: this.file,
amount: this.amount
})
Toast("操作成功!")
setTimeout(() => {
uni.navigateBack()
}, 1000)
},
/**
* 某文件上传结束回调(成功失败都回调)
* @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 当前正在上传的文件
*/
onprogre(item) {
// 更新当前状态变化的文件
this.files.set(item.name, item);
// 强制更新视图
this.$forceUpdate();
},
/**
* 文件选择回调
* @param {Object} files 已选择的所有文件Map集合
*/
changeFile(files) {
// 更新选择的文件
this.files = files;
// 强制更新视图
console.log('当前选择的文件列表:', JSON.stringify([...files.values()]));
this.$forceUpdate();
},
/**
* 指定上传某个文件
* @param {Object} name 带后缀名的文件名称
*/
resetUpload(name) {
this.$refs.lsjUpload.upload(name);
},
/**
* 移除某个文件
* @param {Object} name 带后缀名的文件名称
*/
clear(name) {
// name=指定文件名不传name默认移除所有文件
this.$refs.lsjUpload.clear();
},
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.amount = this.task.extend.amout || 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;
}
}
</style>