web/plugins/leave-source/src/lib/mobile/components/content.vue

<template>
  <div class="mobile-content-card">
    <div class="hd-container">
      <div class="header-tip">
        以下三种方式任选：
      </div>
      <div class="step-list">
        <div class="step-item step-item-1">
          <span class="step-number-index">1. </span>
          <span class="step-item-content">
            <span class="step-left-text">
              <span>联系客服：拨打 </span>
              <span class="highlight-text" @click="doCallPhone">{{ phone }}</span>
            </span>
            <span class="step-right-icon" @click="doCallPhone">
              <span class="j-icon j-icon-base icon-mobile-phone wh24" />
            </span>
          </span>
        </div>
        <div class="step-item step-item-2">
          <span class="step-number-index">2. </span>
          <span class="step-item-content">
            <div class="step-left-text">添加企业微信：</div>
            <QrCode :qr="qr" :platform="platform" />
          </span>
        </div>
        <div class="step-item step-item-3">
          <span class="step-number-index">3. </span>
          <span v-if="useCustomer3" class="step-item-content">
            <span class="step-left-text">
              <span class="highlight-text underline" @click="askOnlineCustom">咨询在线客服 ></span>
            </span>
          </span>
          <span v-else class="step-item-content">
            <span class="step-left-text">客服主动联系您：</span>
            <div class="step-right-content">
              <InputPhone :init-phone="phone" @contact="contactMe" />
            </div>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mobileCustomPage } from '../../../utils/utils'
import QrCode from './QrCode.vue'
import InputPhone from './InputPhone.vue'

export default {
  name: 'ContentInfo',
  components: {
    QrCode,
    InputPhone
  },
  props: {
    phone: {
      type: String,
      default: ''
    },
    qr: {
      type: String,
      default: ''
    },
    isCurrentPhone: {
      type: Boolean,
      default: false,
    },
    useCustomer3: {
      type: Boolean,
      default: false,
    },
    platform: String
  },
  methods: {
    contactMe() {
      this.$emit('contact')
    },
    askOnlineCustom(platform = 'app') {
      const url = mobileCustomPage(platform)
      location.href = url
    },
    doCallPhone() {
      const phone = this.phone
      if (phone) {
        this.callPhone(phone)
      }
    },
    callPhone(phone) {
      if (!phone)
        return console.error('手机号为空')
      if (this.platform === 'app') {
        try {
          JyObj.callPhone(phone)
        }
        catch (error) {
          console.log(error)
        }
      }
      else {
        location.href = `tel:${phone}`
      }
    }
  }
}
</script>

<style scoped lang="scss">
.hd-container {
  padding: 12px 16px;
  .header-tip {
    font-size: 14px;
    line-height: 20px;
    color: #5F5E64;
  }
  .step-list {
    margin-top: 8px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 24px;
    color: #171826;
  }
  .step-item {
    display: flex;
    &:not(:last-of-type) {
      margin-bottom: 14px;
    }
    .underline {
      text-decoration: underline;
    }
  }
  .step-item-content {
    margin-left: 4px;
    flex: 1;
  }

  .step-item-1 {
    align-items: center;
    .step-item-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .step-item-2 {
    .step-left-text {
      margin-bottom: 4px;
    }
  }
}
</style>