assess-app/page_task/task_details/task_detailsa.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 text-color-E21 sys-weight-600">{{applyFor.quota}}万</text>
              <text>{{business.stageName}}</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 "
          :style="{top:`${$tools.topHeight()+fixedHeight}px`}">
      <view class="m-t20 swiper-box">
        <z-swiper ref="zSwiper" v-model="basicType" :options="options" v-if="current === 1" @slideChange="onSwiper">
          <z-swiper-item v-for="itemType in basicType">
            <view class="swiper-item-box page-env-160" v-if="itemType==='1'">
              <Identity  ref="identity" class="identity swiper-item" :height="`${maxHeight-60}px`" :business="business"
                         :linkman="linkman" :client-key="clientKey" @onShowImg="onShowImg" :linkman-key="linkmanKey">
              </Identity>
            </view>
            <view class="swiper-item-box page-env-160" v-else-if="itemType==='3'">
              <Apply class="apply swiper-item" :height="`${maxHeight-60}px`" :apply-for="applyFor"
                     :applies-key="appliesKey" @onShowImg="onShowImg">
              </Apply>
            </view>
            <view class="swiper-item-box page-env-160" v-else-if="itemType==='4'">
              <ThirdParty class="third_party swiper-item" :height="`${maxHeight-60}px`" :tripartite="tripartite"
                          :tripartite-key="tripartiteKey" @onShowImg="onShowImg">
              </ThirdParty>
            </view>
          </z-swiper-item>

        </z-swiper>
        <view class="" v-if="current === 2">
          <z-swiper v-model="restType" :options="options" @slideChange="onCreditSwiper">
            <z-swiper-item v-for="itemType in restType">
              <view class="swiper-item-box page-env-160" v-if="itemType==='2'">
                <Property class="property swiper-item" :height="`${creditHeight-60}px`" :property-list="propertyList"
                          :property-key="propertyKey" @onShowImg="onShowImg">
                </Property>
              </view>
              <view class="swiper-item-box page-env-160" v-else-if="itemType==='6'">
                <credit-list class="credit_list swiper-item" :height="`${creditHeight-60}px`" :credit-data="credit"
                             :credit-key="creditKey" @onShowImg="onShowImg"></credit-list>
              </view>
            </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" @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 {
  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";
import {type} from "@/uni_modules/uni-forms/components/uni-forms/utils";

export default {
  components: {
    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) {
      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() {

    },
    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>