assess-app/page_task/task_details/task_details.vue

<template>
	<view class="total-page page-env-20 page-box">
		<Nav :back="isReturn!==1" :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="https://img10.360buyimg.com/imgw/s288x1000_jfs/t1/307262/4/9992/255939/684f9a78Fbddd6f3f/e07bf46597371d37.jpg"
								mode="aspectFill">
							</image>
							<text class="size-28 m-lr16  m-t6">大连市甘井子区宜居园81号2单元1层1号房屋</text>

							<view class="row-c size-24 sys-bg-007038 r-100 p-lr16 p-tb6 m-l20" >
								<text>住宅</text>
							</view>
							<image class="wh-60 animate__animated animate__fadeInDownBig"
								style="position: absolute;right: 20rpx;"
								:src="'/page_task/static/img/task-details/icon-1.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  sys-weight-600">72.47万</text>
							<text><text class="text-color-E21 sys-weight-600 size-28">65.27万</text>起拍</text>
              <text>7.01% 溢价</text>
							<view class="row-c">
								<image class="wh-25 m-r10" src="/page_task/static/img/task-details/usrr.png" mode="">
								</image>
								<text>京东</text>
							</view>
						</view>
					</view>
				</view>
				<TaskTab :current="current" @onChange="onChange"></TaskTab>
			</view>
		</Nav>
		<view class="sys-list-background-color task-tabs-width "
			:style="{top:`${$tools.topHeight()+fixedHeight}px`}">
		  <view v-if="current === 1"></view>
		  <view >
        <graph></graph>
      </view>
		</view>


		<uni-popup ref="executePopup" type="bottom">
			<EnSelect title="请选择任务接收人" :local-data="executeData" ref="system" v-model="executeId"
				@setAffirm="setNewExecute" @close="closeExecutePopup"></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 EnSelect from "@/components/en-utils/en-select/en-select.vue";
	import CreditList from "@/page_task/credit/credit.vue";
  import Graph from "@/page_task/graph/index.vue";

	export default {
		components: {
      Graph,
			CreditList,
			EnSelect,
			TaskTab,
			Identity,
			ThirdParty,
			Apply,
			Property,
			Record,
			Steps
		},
		data() {
			return {
				current: 1,
				fixedHeight: 200,
				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: [],
				identityHeight: 0,
				thirdPartHeight: 0,
				applyHeight: 0,
				propertyHeight: 0,
				creditListHeight: 0,
				maxHeight: '100%',
				creditHeight: '100%',
        basicType:['1'],
        restType:['2'],
        isReturn:0
			}
		},
		onLoad(data) {
      console.log('-----------aaaaa-----------')

		},
    mounted() {

    },
		methods: {
      makingCall(phone){
        tools.makingCall(phone)
      },
			onShowImg(item) {
        console.log(this.businessFile.imgList)
        let imgIndex=this.businessFile.imgList.indexOf(item)
				if (imgIndex < 0) {
					this.businessFile.imgList.push(item)
          imgIndex=this.businessFile.imgList.length-1
				}
        console.log(this.businessFile.imgList)

				// 预览图片
				uni.previewImage({
					current: imgIndex,
					urls: this.businessFile.imgList,
				});
			},
			auditTask(auditType) {

			},
			setPostLoan() {

			},
			editTask() {

			},
			cancellation() {

			},
			endTask() {

			},
			takeTask() {

			},
      closeExecutePopup(){

      },
			setNewExecute(type) {

				this.$refs.executePopup.close('bottom')

			},
			openExecute() {

			},
			setTaskOperate(type) {

			},
			async getTaskDetail() {

			},

			// 获取详情高度Swiper
			getDetailsHeight() {
				this.maxHeight = '100%'
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					setTimeout(() => {
						query.select('.identity').boundingClientRect(data => {
							if (data) {
								this.maxHeight = data.height
								console.log(this.maxHeight);
								uni.pageScrollTo({
									scrollTop: 0,
									duration: 300
								});
							}
						}).exec();
					}, 200)
				})
			},
			// 获取详情高度Swiper
			onSwiper(swiper, index) {
				this.maxHeight = '100%'
				const query = uni.createSelectorQuery().in(this);
				this.$nextTick(() => {
					setTimeout(() => {
						if (index == 0) {
							query.select('.identity').boundingClientRect(data => {
								if (data) {
									this.maxHeight = data.height
								}
							}).exec();
						}
						if (index == 1) {
							query.select('.apply').boundingClientRect(data => {
								if (data) {
									this.maxHeight = data.height
								}
							}).exec();
						}
						if (index == 2) {
							query.select('.third_party').boundingClientRect(data => {
								if (data) {
									this.maxHeight = data.height
								}
							}).exec();
						}
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 300
						});
					}, 200)
				})
			},
			// 征信高度Swiper
			onCreditHeight() {

			},
			// 征信高度Swiper
			onCreditSwiper(swiper, index) {

			},
			onChange(current) {
				if (current == 1) {
					this.getDetailsHeight()
				}
				if (current == 2) {
					this.onCreditHeight()
				}
				this.current = current
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			onSubmit() {

			}
		}
	}
</script>

<style lang="scss" scoped>

.swiper-box{
  overflow: hidden;
  .swiper-item{
    transition: .5s ease;
  }
  .swiper-item-box{
    min-height: calc(100vh - 630rpx - 160rpx - env(safe-area-inset-bottom));
  }
}
	.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;
	}
.video-box {
  height: 70vh;
  width: 100vw;

  .myVideo {
    height: 70vh;
    width: 100vw;
  }
}
</style>