FaceSignView.vue

<template>
  <div>
    <title-bar :title="title" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="20" />
    </title-bar>
    <div class="marketing-processing-content">
      <div class="customer-information">
        <div class="customer-information-top">
          <div class="avatar"></div>
          <div class="customer-name">
            <div>{{ custInfo.CUSTOMERNAME }}</div>
            <div>精准营销</div>
          </div>
        </div>
        <div class="customer-information-central">
          <table>
            <tr>
              <td>客户名称:</td>
              <td>{{ custInfo.CUSTOMERNAME }}</td>
            </tr>
            <tr>
              <td>证件号:</td>
              <td>{{ custInfo.CERTID }}</td>
            </tr>
            <tr>
              <td>客户地址:</td>
              <td>{{ custInfo.COMPANYADD }}</td>
            </tr>
            <tr>
              <td colspan="2" @click="time_axis"><img src="@/assets/svg/time-axis-logo.svg" alt="" />&nbsp;&nbsp;时光轴</td>
              <td></td>
            </tr>
          </table>
        </div>
        <div class="sign-in">
          <!-- 百度地图-->
          <baidu-map class="bm-view" ak="FP7zWR4e8lhxZ6v0IicoG1R5" :center="{ lng: this.upoint.lng, lat: this.upoint.lat }" :zoom="15" @ready="mapReady"> </baidu-map>
        </div>
        <div class="operate">
          <button><img src="@/assets/svg/blue-navigation-logo.svg" alt="" />导航</button>
          <div class="button-style">
            <button @click="addCalendar">新增日程</button>
            <button>信息查询</button>
          </div>

        </div>
      </div>
      <div class="faceSign-tab">
        <van-steps  :active="active" active-icon="success" active-color="#38f" style="padding: 30px 20px 0  20px">
          <van-step v-for="(item, index) of stepsList" :key="index">
            <template v-slot:active-icon>
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.activeIcon"></use>
              </svg>
            </template>
            <template v-slot:inactive-icon>
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="item.inactiveIcon"></use>
              </svg>
            </template>
            <template v-slot:finish-icon>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wancheng"></use>
              </svg>
            </template>
            <p>{{ item.stepName }}</p>
          </van-step>
        </van-steps>
        <div>
          <identity-check v-if="active == 0" :flag="formView" :custInfo="custInfo" :tabActive="active" @activeChange="activeChange"></identity-check>
          <confirm-info v-if="active == 1" :custInfo="custInfo" :tabActive="active" @activeChange="activeChange"></confirm-info>
          <risk-evaluation v-if="active == 2" :custInfo="custInfo" :tabActive="active" @activeChange="activeChange"></risk-evaluation>
          <image-material v-if="active == 3" :custInfo="custInfo" :tabActive="active" @activeChange="activeChange"></image-material>
          <credit-card-protocol v-if="active == 4" :custInfo="custInfo" :tabActive="active" @activeChange="activeChange"></credit-card-protocol>
          <submit-audit v-if="active == 5" :flag="formView" :custInfo="custInfo" :tabActive="active" @activeChange="activeChange"></submit-audit>
        </div>
      </div>
    </div>
  </div>

</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { BaiduMap, BmScale, BmNavigation, BmInfoWindow } from "vue-baidu-map";
import IdentityCheck from "@/views/workbench/contract/IdentityCheck.vue";
import ConfirmInfo from "@/views/workbench/contract/ConfirmInfo.vue";
import RiskEvaluation from "@/views/workbench/contract/RiskEvaluation.vue";
import CreditCardProtocol from "@/views/workbench/contract/CreditCardProtocol.vue";
import ImageMaterial from "@/views/workbench/contract/ImageMaterial.vue";
import SubmitAudit from "@/views/workbench/contract/SubmitAudit.vue";

/**
 * @Description 营销处理
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:53
 */
@Component({
  name: "FaceSignView",
  components: {
    SubmitAudit,
    ImageMaterial,
    CreditCardProtocol,
    RiskEvaluation, ConfirmInfo, TitleBar, BaiduMap, BmScale, BmNavigation, BmInfoWindow, IdentityCheck},
})
export default class FaceSignView extends Vue {
  title = '面签';
  BMapGL: any = {};
  map: any = {};
  //自己当前定位
  pointA: any = {};
  //客户定位
  pointB: any = {};
  active = 0;
  stepsList = [
    {stepName:'身份核查', activeIcon: '#icon-a-1xuanzhong', inactiveIcon: '#icon-jiedian1'},
    {stepName:'信息确认', activeIcon: '#icon-a-2xuanzhong', inactiveIcon: '#icon-jiedian2'},
    {stepName:'随意分风险测评', activeIcon: '#icon-a-3xuanzhong', inactiveIcon: '#icon-jiedian3'},
    {stepName:'影像资料', activeIcon: '#icon-a-5xuanzhong', inactiveIcon: '#icon-jiedian51'},
    {stepName:'信用卡协议及约定', activeIcon: '#icon-a-4xuanzhong', inactiveIcon: '#icon-jiedian4'},
    {stepName:'业务审批', activeIcon: '#icon-a-6xuanzhong', inactiveIcon: '#icon-jiedian5'}
  ];
  custInfo = {};
  formView: any = '0'

  onClick() {
    console.log(111111);
  }

  mounted() {
    const custInfo = this.$store.getters.getFaceSignInfo;
    this.formView = this.$route.query.formView;
    if(custInfo.SEX == 1){
      custInfo.SEX = '男';
    }else if(custInfo.SEX == 2){
      custInfo.SEX = '女'
    }
    this.custInfo = custInfo;
  }

  //客户位置坐标
  upoint: any = { lng: 104.080998, lat: 30.595452 };
  plugins = ["Scale"];
  mapReady(bmap: any) {
    this.BMapGL = bmap.BMap;
    this.map = bmap.map;
  }
  time_axis() {
    this.$router.push({
      path: "/workbench/upcoming-tasks/marketing-task/time-axis/time-axis",
    });
  }

  activeChange(tabAcive: any){
    this.active = tabAcive;
  }

  /**
  *@Desc 功能描述：新增日程
  *@Author XWH
  *Date 2022/2/19 18:31
  */
  addCalendar() {
    console.log('新增日程');
    const params = {
      'title': '面签',
      'description': '随意分面签',
      'location': '天府四街',
      'startDate': 2022219,
      'endDate': 2022219,
      'advanceTime': 100,
      'rRule': 'FREQ=WEEKLY;INTERVAL=1;WKST=MO;BYDAY=TU;UNTIL='
    };
    this.$native.addCalendar(params).then((res: any) => {
      console.log(res)
    })
  }
}
</script>

<style scoped>
.marketing-processing-content {
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: row;
}
.customer-information {
  width: 27%;
  height: 100%;
  padding: 2%;
  border-right: 2px solid rgba(242, 242, 242, 1);
}
.customer-information-top {
  width: 100%;
  display: flex;
  align-items: center;
}
.avatar {
  width: 56px;
  height: 56px;
  padding: 4.13% 0;
  border: 3px solid #fd5065;
  border-radius: 50%;
  color: #fd5065;
  font-weight: bold;
  text-align: center;
  margin-right: 6%;
}
.customer-name{
  height: 56px;
}
.customer-name > div:nth-child(1) {
  font-weight: bold;
  font-size: 18px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}
.customer-name > div:nth-child(2) {
  width: 70%;
  padding-top: 1%;
  margin-top: 5%;
  text-align: center;
  border: 1px solid rgba(215, 215, 215, 1);
  border-radius: 5px;
  font-size: 13px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}
.customer-information-central {
  width: 100%;
  margin-top: 7%;
}
.customer-information-central table {
  width: 100%;
}
.customer-information-central table tr > td:nth-child(1) {
  width: 40%;
  font-size: 14px;
  color: #999999;
  line-height: 30px;
}
.customer-information-central table tr > td:nth-child(2) {
  width: 60%;
  font-size: 14px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}
.customer-information-central table tr:nth-child(4) > td {
  padding-top: 4%;
  color: #02a7f0;
}
.sign-in {
  width: 100%;
  height: 35%;
  margin-top: 10%;
}
.operate {
  width: 100%;
  margin-top: 15%;
}
.operate > button:nth-child(1) {
  width: 100%;
  height: 36px;
  margin: 7% auto 7% auto;
  display: block;
  background-color: white;
  border: 1px solid #02a7f0;
  color: #02a7f0;
  border-radius: 20px;
  font-size: 14px;
  font-family: "Arial Normal", "Arial";
}
.button-style > button {
  width: 47%;
  height: 36px;
  /*margin: 0 auto;*/
  display: block;
  background-color: white;
  border: 1px solid rgba(215, 215, 215, 1);
  color: #999999;
  border-radius: 20px;
  font-size: 14px;
  font-family: "Arial Normal", "Arial";
  outline: none;
}
.bm-view {
  width: 100%;
  height: 100%;
}
.faceSign-tab{
  display: flex;
  flex-direction: column;
  width: 73%;
  height: 100%;
}
.icon{
  width: 25px;
  height: 25px;
}
.button-style{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
::v-deep .van-step--horizontal .van-step__title {
  display: inline-block;
  /* margin-left: 19px; */
  /* font-size: 24px; */
  -webkit-transform: translateX(-30%);
  /* transform: translateX(-50%); */
  /* text-align: center; */
}

::v-deep .van-steps__items > div:nth-child(6) > .van-step__title{
  -webkit-transform: translateX(30%);
}
</style>