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="size-28 text-color-E21 sys-weight-600">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 ">
        <view v-if="current === 1"></view>
        <view v-else-if="current ===2">
          <graph @setNode="setNode"></graph>
        </view>
        <view v-else-if="current ===3">
          <entities></entities>
        </view>
        <view v-else>
          <word></word>
        </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 Word from "./module/word.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/task_details/module/graph.vue";
import Entities from "@/page_task/task_details/module/entities.vue";

export default {
  components: {
    Entities,
    Graph,
    CreditList,
    EnSelect,
    TaskTab,
    Identity,
    ThirdParty,
    Apply,
    Property,
    Record,
    Word
  },
  data() {
    return {
      current: 1,
      fixedHeight: 220,
      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) {
    // #ifdef H5
      this.fixedHeight=150
    //#endif

  },
  mounted() {

  },
  methods: {
    setNode(node){
      console.log("----------事件回调----------")
      console.log(node)
    },
    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>