paper-shopkeeper-app/pages/client-detail/index.vue

<template>
  <view class="wrapper">
    <qnHeader class="header">
      <view class="header-title">客户详情</view>
      <view class="right-title" @click="onCustomerCredit">客户授信</view>
    </qnHeader>
    <view>
      <uni-segmented-control
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        styleType="text"
        activeColor="#007AFF"
        class="segmented"
      ></uni-segmented-control>

      <view class="content">
        <view v-show="current === 0"><basicInformation ref="basicInformationRef" :customerId="customerId"></basicInformation></view>
        <view v-show="current === 1"><equipmentInformation></equipmentInformation></view>
        <view v-show="current === 2"><basePaperDeals :id="customerId"></basePaperDeals></view>
        <view v-show="current === 3"><wastePaperTrading></wastePaperTrading></view>
      </view>
    </view>
    <uni-popup ref="popup" type="center" :mask-click="false">
      <view class="popup-box">
        <view class="header-title">{{ dialogTitle }}</view>
        <view class="tip-title">{{ dialogContent }}</view>
        <view class="operation-row">
          <view class="cancel-text" @tap="cancelTap">取消</view>
          <view class="line"></view>
          <view class="confirm-text" @tap="confirmTap">{{ confirmText }}</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import qnHeader from '@/components/qn-header/qn-header.vue'
import basicInformation from './basic-information.vue'
import equipmentInformation from './equipment-information.vue'
import basePaperDeals from './base-paper-deals.vue'
import wastePaperTrading from './waste-paper-trading.vue'
import { go2 } from '@/utils/hook.js'
import { getVerifyUrl } from '@/apis/commonApi.js'
export default {
  components: {
    qnHeader,
    basicInformation,
    equipmentInformation,
    basePaperDeals,
    wastePaperTrading
  },
  data() {
    return {
      current: 0,
      items: ['基础信息', '设备信息', '原纸交易', '废纸交易'],
      customerId: null,
      dialogTitle: null,
      dialogContent: null,
      confirmText: null,
      dialogType: 1 // 1:未完善企业信息 2：未电子签约 3：是否开通VIP
    }
  },
  onLoad(option) {
    if (option.id) {
      this.customerId = option.id
      this.$nextTick(() => {
        this.$refs.basicInformationRef.getBaseInfo()
      })
    }
  },
  // onShow() {
  //   this.$refs.popup.close()
  // },
  methods: {
    go2,
    onClickItem(e) {
      console.log('e', e)
      this.current = e.currentIndex
    },
    // 客户授信
    onCustomerCredit() {
      if (this.$store.state.supplierInfo.id == null) {
        // 未完善企业store 里面 supplierInfo == null
        this.dialogTitle = '您还未完善企业信息'
        this.dialogContent = '请先完善企业基本信息才能对客户进行'
        this.confirmText = '去完善'
        this.dialogType = 1
        this.$refs.popup.open()
      } else if (!this.$store.state.supplierInfo.fddEnterpriseStatus || this.$store.state.supplierInfo.fddEnterpriseStatus == 1) {
        // 未电子签 supplierInfo.fddEnterpriseStatus == 1
        this.dialogTitle = '未认证电子签约'
        this.dialogContent = '客户授信过程需要进行电子合同签订，请先进行认证'
        this.confirmText = '去认证'
        this.dialogType = 2
        this.$refs.popup.open()
      } else if (!this.$store.state.supplierInfo.isVip) {
        // 开通vip supplierInfo 新增了一个isVip字段
        this.dialogTitle = '未开通VIP'
        this.dialogContent = '客户授信需要VIP权限，是否立即开通？'
        this.confirmText = '去开通'
        this.dialogType = 3
        this.$refs.popup.open()
      } else {
        let info = this.$refs.basicInformationRef.getCompanyInfo()
        if (info.id) {
          go2('client-credit', { enterpriseId: info.id, name: info.name })
        } else {
          uni.showToast({
            title: '该企业基础信息不完善',
            icon: 'error'
          })
        }
      }
    },
    cancelTap() {
      this.$refs.popup.close()
    },
    confirmTap() {
      switch (this.dialogType) {
        case 1:
          go2('enterprise-info')
          break
        case 2:
          getVerifyUrl({ enterpriseId: this.$store.state.supplierInfo.id }).then((res) => {
            if (res) {
              // #ifdef APP-PLUS
              go2('page-view', { title: '实名认证', url: encodeURIComponent(res) })
              // #endif
              // #ifdef H5
              if (window) {
                window.location.href = res
              }
              // #endif
            }
          })
          break
        case 3:
          go2('mine')
          break
        default:
          break
      }
      this.$refs.popup.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  .header {
    justify-content: space-between;
  }
  .header-title {
    font-size: 36rpx;
    color: #000000;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
  }

  .right-title {
    font-size: 28rpx;
    color: #007aff;
    text-align: center;
    line-height: 40rpx;
    font-weight: 500;
  }
  .segmented {
    height: 88rpx;
    border-bottom: 2rpx solid #ececec;
    font-size: 28rpx;
    color: #333333;
    text-align: center;
    font-weight: 400;
  }
  .account-dialog-text {
    font-size: 28rpx;
    color: #969799;
    text-align: center;
    line-height: 40rpx;
    font-weight: 400;
  }
  .popup-box {
    width: 540rpx;
    height: 226rpx;
    background: #ffffff;
    border-radius: 14rpx;

    .header-title {
      font-size: 32rpx;
      color: #323233;
      text-align: center;
      font-weight: 500;
      padding-top: 48rpx;
    }
    .tip-title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      // height: 126rpx;
      padding: 16rpx 48rpx 48rpx 48rpx;
      font-size: 28rpx;
      color: #969799;
      letter-spacing: 0;
      text-align: center;
      font-weight: 400;
    }
    .operation-row {
      border-radius: 14rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      height: 96rpx;
      background: #ffffff;
      border-top: 2rpx solid rgba(221, 221, 221, 0.5);
      .cancel-text {
        flex-grow: 1;
        flex-shrink: 1;
        font-size: 32rpx;
        color: #000000;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
      }
      .line {
        flex-grow: 0;
        flex-shrink: 0;
        width: 2rpx;
        height: 96rpx;
        border-left: 2rpx solid #dcdee3;
      }
      .confirm-text {
        flex-grow: 1;
        flex-shrink: 1;
        font-size: 32rpx;
        color: #007aff;
        text-align: center;
        font-weight: 400;
      }
    }
  }
}
</style>