assess-app/page_task/task_details/task_details.vue

<template>
	<view class="total-page page-env-20 page-box">
		<Nav :title="'任务详情'" :genre="1" :fixedHeight="fixedHeight">
			<view class="task-tabs m-b20" style="z-index: 9999;" :style=" {top:`${$tools.topHeight()}px`}">
				<view class="detail-bg m-lr20 m-b10 m-t10">
					<image class="detail-img" src="/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="../../static/img/logo.png" mode="aspectFill"></image>
							<text class="size-28 m-lr16">刘方伟</text>
							<view class="size-24 row-c sys-bg-007038 r-100 p-lr16 p-tb6">
								<text>男</text>
								<view class="detail-line m-lr10"></view>
								<text>45岁</text>
							</view>
							<view class="row-c size-24 sys-bg-007038 r-100 p-lr16 p-tb6 m-l20">
								<image class="wh-20" src="/static/img/task-details/phone-two.png" mode="aspectFill">
								</image>
								<text>12154131313</text>
							</view>
							<image class="wh-60 animate__animated animate__zoomIn"
								style="position: absolute;right: 20rpx;" src="/static/img/task-details/icon-one.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">120万</text>
							<text>确认归档</text>
							<text>2024/12/24用款</text>
							<view class="row-c">
								<image class="wh-25 m-r10" src="/static/img/task-details/usrr.png" mode=""></image>
								<text>张单丹</text>
							</view>
						</view>
					</view>
				</view>
				<TaskTab :current="current" @onChange="onChange"></TaskTab>
			</view>
		</Nav>
		<view class="details_body sys-list-background-color task-tabs-width page-env-160"
			:style="{top:`${$tools.topHeight()+fixedHeight}px`}">
			<view class="m-lr20 m-t20">
				<z-swiper v-model="list" :options="options" v-if="current === 1">
					<z-swiper-item>
						<Identity></Identity>
					</z-swiper-item>
					<z-swiper-item>
						<Apply></Apply>
					</z-swiper-item>
					<z-swiper-item>
						<ThirdParty></ThirdParty>
					</z-swiper-item>
				</z-swiper>
				<view class="" v-if="current === 2">
					<z-swiper v-model="lists" :options="options">
						<z-swiper-item>
							<Property></Property>
						</z-swiper-item>
					</z-swiper>
				</view>
			</view>
			<Record v-if="current === 3"></Record>
			<Steps v-if="current === 4"></Steps>
		</view>
		<EnButton :text="'冲销'" v-if="current === 1"></EnButton>
		<EnButton is_both :leftText="'交接'" :rightText="'操作'" v-if="current === 2" @onSubmit="onSubmit"></EnButton>
	</view>
</template>

<script>
	import TaskTab from "@/page_task/module/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"

	export default {
		components: {
			TaskTab,
			Identity,
			ThirdParty,
			Apply,
			Property,
			Record,
			Steps
		},
		data() {
			return {
				current: 1,
				fixedHeight: 200,
				options: {
					autoHeight: true,
				},
				list: [1, 2, 3],
				lists: [1, 2],
			}
		},
		methods: {
			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;
		}
	}
</style>