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

<template>
  <div class="content-card" :class="setClass">
    <span v-if="showCloseIcon" class="j-icon icon-pc-close" @click="closeIconClick" />
    <ContractCard v-if="type === '1'" :phone="phone" :user-phone="userPhone" :wxer="wxer" @contactMeEvent="contactMeEvent" />
    <ContractCardQrcode v-else :wxer="wxer" :show-text="showText" class="qrcode-module" />
    <LeaveCommon :class="{ 'samll-footer': type === '2' }" />
  </div>
</template>

<script>
import { useContactMeLogic } from '../../../utils/hooks'
import ContractCard from './contract-card.vue'
import ContractCardQrcode from './contract-card-qrcode.vue'
import LeaveCommon from './footer'

export default {
  name: 'ContentCard',
  components: {
    ContractCard,
    ContractCardQrcode,
    LeaveCommon,
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: '2'
    },
    showText: {
      type: Boolean,
      default: true
    },
    showCloseIcon: {
      type: Boolean,
      default: true
    },
    wxer: {
      type: String,
      default: ''
    },
    setClass: {
      type: String,
      default: ''
    },
    phone: {
      type: String,
      default: ''
    },
    userPhone: {
      type: String,
      default: ''
    }
    // source: {
    //   type: String,
    //   default: ''
    // },
    // sourceDesc: {
    //   type: String,
    //   default: ''
    // },
    // popupTitle: {
    //   type: String,
    //   default: '联系专属客服，申请免费体验'
    // }
  },
  watch: {
    showText: {
      handler(val) {
        console.info(val, 'showText')
      },
      immediate: true
    }
  },
  mounted() {
    useContactMeLogic({ props: this.$props })
  },
  methods: {
    contactMeEvent(phone) {
      this.$emit('contactMeEvent', phone)
    },
    closeIconClick() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang="scss">
.content-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  .icon-pc-close {
    position: absolute;
    top: 16px;
    right: 16px;
    cursor: pointer;
  }
  .qrcode-module {
    ::v-deep {
      .qr-code-container {
        &::after {
          display: none;
        }
        &::before {
          display: none;
        }
      }
    }
  }
  .samll-footer {
    height: 216px;
  }
  &.leave-aside-card {
    ::v-deep {
      .contract-card-qrcode {
        height: 172px;
        padding: 12px 0 0;
        .contract-card-content {
          margin-top: 8px;
        }
      }
      .qr-code-container {
        padding: 0;
        .qr-code {
          padding-left: 0;
          img {
            width: 104px;
            height: 104px;
          }
        }
      }
      .leave-common-footer {
        height: 134px;
        .leave-common-title {
          margin-top: 10px;
        }
        .leave-common-footer-list {
          padding: 0 20px;
          width: 100%;
          margin-top: 8px;
        }
        .j-icon {
          width: 20px;
          height: 20px;
        }
        .icon-customer {
          width: 20px;
          height: 20px;
        }
        .leave-common-footer-item {
          margin-bottom: 10px;
        }
        .leave-common-footer-item-title {
          font-size: 12px;
          line-height: 18px;
        }
      }
    }
  }
}
</style>