assess-app/page_task/task_details/task_details.vue

<template>
	<view class="total-page page-env-20 page-box">
		<Nav :title="'任务详情'" :genre="2" :fixedHeight="fixedHeight">
			<view class="task-tabs m-b20" :style=" {top:`${$tools.topHeight()}px`}">
				<view class="detail-bg m-lr20 m-b10 m-t10">
					<image class="detail-img" src="/page_task/static/img/task-details/top-bg.png" mode="aspectFill">
					</image>
					<view class="detail-content">
						<view class="row-c m-l10 m-t16 m-b20 text-color-fff">
							<image class="wh-45 r-circle" src="/page_task/static/img/task-details/head.png" mode="aspectFill">
							</image>
							<text class="size-28 m-lr16">{{business.name}}</text>
							<view class="size-24 row-c sys-bg-007038 r-100 p-lr16 p-tb6">
								<text>{{business.sex===1?'男':'女'}}</text>
								<view class="detail-line m-lr10"></view>
								<text>{{business.age}}岁</text>
							</view>
							<view class="row-c size-24 sys-bg-007038 r-100 p-lr16 p-tb6 m-l20">
								<image class="wh-20" src="/page_task/static/img/task-details/phone-two.png"
									mode="aspectFill">
								</image>
								<text>{{business.phone}}</text>
							</view>
							<image class="wh-60 animate__animated animate__fadeInDownBig" v-if="business.status>0"
								style="position: absolute;right: 20rpx;"
								:src="'/page_task/static/img/task-details/icon-'+business.status+'.png'"
								mode="aspectFill">
							</image>
						</view>
						<view class="row-justify-sb center buttom-titke sys-bg-BFD2CC text-color-12 size-24">
							<text class="size-28 text-color-E21 sys-weight-600">{{applyFor.quota}}万</text>
							<text>{{business.status_name}}</text>
							<text>{{applyFor.use_date}}用款</text>
							<view class="row-c">
								<image class="wh-25 m-r10" src="/page_task/static/img/task-details/usrr.png" mode="">
								</image>
								<text>{{business.creation_name}}</text>
							</view>
						</view>
					</view>
				</view>
				<TaskTab :current="current" @onChange="onChange"></TaskTab>
			</view>
		</Nav>
		<view class="sys-list-background-color task-tabs-width page-env-160"
			:style="{top:`${$tools.topHeight()+fixedHeight}px`}">
			<view class="m-t20">
				<z-swiper ref="zSwiper" v-model="list" :options="options" v-if="current === 1">
					<z-swiper-item>
						<Identity :business="business" :linkman="linkman" :client-key="clientKey" @onShowImg="onShowImg"
							:linkman-key="linkmanKey"></Identity>
					</z-swiper-item>
					<z-swiper-item v-show="product.product_types.indexOf('3')>=0">
						<Apply :apply-for="applyFor" :applies-key="appliesKey" @onShowImg="onShowImg"></Apply>
					</z-swiper-item>
					<z-swiper-item v-show="product.product_types.indexOf('4')>=0">
						<ThirdParty :tripartite="tripartite" :tripartite-key="tripartiteKey" @onShowImg="onShowImg"></ThirdParty>
					</z-swiper-item>
				</z-swiper>
				<view class="" v-if="current === 2">
					<z-swiper v-model="lists" :options="options">
						<z-swiper-item>
							<Property :property-list="propertyList" :property-key="propertyKey" @onShowImg="onShowImg"></Property>
						</z-swiper-item>
						<z-swiper-item>
							<credit-list :credit-data="credit" :credit-key="creditKey" @onShowImg="onShowImg"></credit-list>
						</z-swiper-item>
					</z-swiper>
				</view>
			</view>
			<Record v-show="current === 3" ref="recordObj" :business-id="businessId" @onShowImg="onShowImg"></Record>
			<Steps ref="stepsObj" v-show="current === 4" :business-id="businessId"></Steps>
		</view>
		<view v-if="isExecute>0 && business.status<4">
			<EnButton v-if="isExecute===3" :text="'领取'" @onSubmit="takeTask"></EnButton>
			<EnButton v-else-if="isExecute===2" :is_both="1" :leftText="'作废'" :rightText="'反馈'"
				@onLeftSubmit="cancellation" @onSubmit="setTaskOperate(3)"></EnButton>
			<EnButton v-else-if="isExecute===4" :is_both="2" :leftText="'作废'" :rightText="'反馈'" centre-text="交接"
				@onLeftSubmit="cancellation" @onCentreSubmit="openExecute" @onSubmit="setTaskOperate(3)"></EnButton>
			<EnButton v-else-if="isExecute===5" :text="'完成'" @onSubmit="endTask"></EnButton>
			<EnButton v-else-if="isExecute===6" :is_both="1" :leftText="'拒绝'" :rightText="'同意'"
				@onLeftSubmit="auditTask(2)" @onSubmit="auditTask(1)"></EnButton>
			<EnButton v-else-if="isExecute===7" text="编辑" @onSubmit="editTask()"></EnButton>
			<EnButton v-else-if="isExecute===8" text="完善贷后" @onSubmit="setPostLoan()"></EnButton>
			<EnButton :is_both="1" :leftText="'交接'" :rightText="'操作'" v-else @onLeftSubmit="openExecute"
				@onSubmit="setTaskOperate(1)"></EnButton>

		</view>
		<!--		<EnButton :text="'冲销'" v-if="current === 1"></EnButton>-->
		<!--		<EnButton is_both :leftText="'交接'" :rightText="'操作'"  @onSubmit="setTaskOperate(1)" @onLeftSubmit="openExecute"></EnButton>-->

		<uni-popup ref="executePopup" type="bottom">
			<EnSelect title="请选择任务接收人" :local-data="executeData" ref="system" v-model="executeId"
				@setAffirm="setNewExecute"></EnSelect>
		</uni-popup>

	</view>
</template>

<script>
	import TaskTab from "@/common/task/task_tab.vue"
	// 身份信息
	import Identity from "./module/identity.vue"
	// 申请信息
	import Apply from "./module/apply.vue"
	// 第三方信息
	import ThirdParty from "./module/third_party.vue"
	// 资产信息
	import Property from "./module/property.vue"
	// 审核进度
	import Steps from "./module/steps.vue"
	// 跟进记录
	import Record from "./module/record.vue"
	import tools from "@/service/tools";
	import {
		cancellation,
		endTask,
		getExecuteList,
		getStageList,
		getTaskDetail,
		setExecute,
		takeTask
	} from "@/api/task";
	import EnSelect from "@/components/en-utils/en-select/en-select.vue";
  import CreditList from "@/page_task/credit/credit.vue";

	export default {
		components: {
      CreditList,
			EnSelect,
			TaskTab,
			Identity,
			ThirdParty,
			Apply,
			Property,
			Record,
			Steps
		},
		data() {
			return {
				current: 1,
				fixedHeight: 195,
				options: {
					autoHeight: true,
					slidesPerView: 1.1,
					centeredSlides: true,
					spaceBetween: 10,
          effect: 'cards'
				},
				list: [1, 2, 3],
				lists: [1, 2],
				businessId: '',
				product: {
					product_name: '',
					product_types: [],
					type_data: []
				},
				business: {
          id:0,
					status: 0,
					phone: '',
					identity_one: '',
					identity_two: '',
					marriage_img: [],
					credit_img: [],
				}, //基本信息
				propertyList: [], //资产信息
				applyFor: {}, //申请信息
				credit: {}, //征信信息
				postLoan: {}, //贷后信息
				tripartite: [], //第三方信息
				linkman: [], //联系人信息
				stageData: {
					stageName: '',
					userName: ""
				},
				isAjax: false,
				isExecute: 0,
				msgList: [],
				executeData: [],
				showExecute: false,
				auditType: 0,
				previewList: [],
				imgKey: 0,
				imgList: [],
				replyId: "",
				stageList: [],
				businessStageList: [],
				businessFile: {
					fileList: [],
					imgList: [],
					videoList: [],
				},
				videoUrl: '',
				executeId: '',
				clientKey: [],
				propertyKey: [],
				appliesKey: [],
				tripartiteKey: [],
				linkmanKey: [],
				creditKey: [],
			}
		},
		onLoad(data) {
			console.log(data)
			if (data.taskId !== undefined) {
				this.businessId = data.taskId
				this.getTaskDetail()
				uni.$on('newTaskList', () => {
					this.getTaskDetail()
					this.$refs.stepsObj.getStageList()
				})
			} else {
				tools.leftClick()
			}
		},
		methods: {
      onShowImg(item) {
        if (this.businessFile.imgList.length < 0) {
          this.businessFile.imgList.push(item)
        }
        // 预览图片
        uni.previewImage({
          current: item,
          urls: this.businessFile.imgList,
        });
      },
			auditTask(auditType) {
				uni.navigateTo({
					url: '/page_task/task_operate/task_operate?businessId=' + this.business.id +
						'&type=2&auditType=' + auditType
				});
			},
			setPostLoan() {
				uni.navigateTo({
					url: '/pages-task/task-info/task-loan?id=' + this.business.id
				});
			},
			editTask() {
				uni.reLaunch({
					url: '/pages-task/add-client/new-add?businessId=' + this.business.id
				})
			},
			cancellation() {
				uni.showModal({
					title: '提示',
					content: '是否作废当前任务？',
					success: (res) => {
						console.log(res)
						if (res.confirm) {

							cancellation({
								'id': this.business.id
							}).then((res) => {
								if (res.code === 1) {
									this.business.status = 5;
									this.isExecute = 0;
									tools.success(res.msg)
									uni.$emit('newReceiving')
								} else {
									tools.error(res.msg)
								}
							})
						}
					}
				});
			},
			endTask() {
				uni.showModal({
					title: '提示',
					content: '是否完成当前任务？',
					success: (res) => {
						console.log(res)
						if (res.confirm) {

							endTask({
								'id': this.business.id
							}).then((res) => {
								if (res.code === 1) {
									this.business.status = 4;
									this.isExecute = 0;
									tools.success(res.msg)
									uni.$emit('newReceiving')
								} else {
									tools.error(res.msg)
								}
							})
						}
					}
				});
			},
			takeTask() {
				if (this.isAjax) {
					// return;
				}
				this.isAjax = true;
				takeTask({
					'id': this.business.id
				}).then((res) => {
					if (res.code === 1) {
						tools.success('领取成功')
						uni.$emit('newReceiving')
						this.getTaskDetail()
					} else {
						this.isAjax = false;
						tools.error(res.msg)
					}
				})
			},
			setNewExecute(type) {
				if (type) {
					//设置新执行人
					if (this.executeId <= 0) {
						tools.error('请选择执行人')
						return
					}
					setExecute({
						'business_id': this.businessId,
						'user_id': this.executeId
					}).then((res) => {
						if (res.code === 1) {
							tools.success(res.msg)
							uni.$emit('newReceiving')
							this.getTaskDetail()

						} else {
							tools.error(res.msg)
						}
					})
				}
				this.$refs.executePopup.close('bottom')

			},
			openExecute() {
				this.executeData = [];
				getExecuteList({
					'business_id': this.businessId
				}).then((res) => {
					if (res.code === 1) {
						this.executeData = res.data
						this.$refs.executePopup.open('bottom')
					}
				})
			},
			setTaskOperate(type) {
				uni.navigateTo({
					'url': '/page_task/task_operate/task_operate?businessId=' + this.businessId + '&type=' + type
				})
			},
			async getTaskDetail() {
				const res = await getTaskDetail({
					id: this.businessId
				})
				if (res.code === 1) {
					this.product = res.data.product
					this.business = res.data.business
					this.propertyList = res.data.propertyList
					this.applyFor = res.data.applyFor
					this.tripartite = res.data.tripartite
					this.linkman = res.data.linkman
					this.credit = res.data.credit
					this.postLoan = res.data.postLoan
					this.stageData = res.data.stageData
					this.isExecute = res.data.isExecute
					this.businessFile = res.data.businessFile
					this.$refs.recordObj.startData()
					this.$refs.zSwiper.swiper
					this.setShowKey()
				} else {
					tools.leftClick()
				}
			},
			setShowKey() {
				this.product.type_data.forEach(item => {
					switch (item.type) {
						case '1':
							this.clientKey = item.type_keys
							break;
						case '2':
							this.propertyKey = item.type_keys
							break;
						case '3':
							this.appliesKey = item.type_keys
							break;
						case '4':
							this.tripartiteKey = item.type_keys
							break;
						case '5':
							this.linkmanKey = item.type_keys
							break;
						case '6':
							this.creditKey = item.type_keys
							break;
					}
				})
			},

			onChange(current) {
				this.current = current
			},
			onSubmit() {
				uni.navigateTo({
					url: "/page_task/task_operate/task_operate"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details_body {
		width: 100%;
		position: absolute;
	}

	.detail-bg {
		position: relative;
	}

	.detail-img {
		width: calc(100%);
		height: 220rpx;
	}

	.detail-content {
		position: absolute;
		top: 10rpx;
		left: 20rpx;

		.top-titke {
			height: 75rpx;
			line-height: 75rpx;
			// background: red;
		}

		.detail-line {
			width: 2rpx;
			height: 24rpx;
			background-color: #FFFFFF;
		}

		.buttom-titke {
			flex: 1;
			margin-top: 40rpx;
			height: 90rpx;
			width: 635rpx;
			line-height: 90rpx;
			border-radius: 20rpx;
			padding: 0 20rpx;
		}
	}

	.swiper-wrapper {
		z-index: 0 !important;
	}
</style>