tyapi-frontend/src/components/common/BusinessConsultationDialog.vue

<template>
  <el-dialog
    v-model="dialogVisible"
    title="商务洽谈"
    width="500px"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    class="business-consultation-dialog"
    :z-index="9999"
  >
    <div class="consultation-content">
      <div class="consultation-info">
        <h4>专属商务顾问</h4>
        <p>扫描下方二维码，添加专属商务顾问微信</p>
        <p class="consultation-benefits">享受以下专属服务：</p>
        <ul class="grid grid-cols-2 gap-x-6 gap-y-2 benefits-list">
          <li>一对一专属服务</li>
          <li>定制化解决方案</li>
          <li>优先技术支持</li>
          <li>专属价格优惠</li>
        </ul>
      </div>

      <div class="qr-code-container">
        <div class="qr-code-wrapper">
          <img
            src="/qrcode.jpg"
            alt="商务洽谈二维码"
            class="qr-code-image"
            @error="handleQrCodeError"
          />
          <div v-if="qrCodeError" class="qr-code-placeholder">
            <i class="el-icon-chat-dot-round"></i>
            <span>二维码加载失败</span>
          </div>
        </div>
        <p class="qr-code-tip">请使用微信扫描二维码</p>
      <!-- INSERT_YOUR_CODE -->
      <el-button
        class="mt-6"
        type="primary"
        @click="closeDialog"
      >
        关闭
      </el-button>
      </div>
    </div>

  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

// Props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['update:visible'])

// 响应式数据
const dialogVisible = ref(false)
const qrCodeError = ref(false)

// 监听visible属性变化
watch(() => props.visible, (newVal) => {
  if (newVal !== dialogVisible.value) {
    dialogVisible.value = newVal
  }
})

// 监听对话框状态变化
watch(dialogVisible, (newVal) => {
  if (newVal !== props.visible) {
    emit('update:visible', newVal)
  }
})

// 处理二维码加载错误
const handleQrCodeError = () => {
  qrCodeError.value = true
}

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false
}
</script>

<style scoped>
.business-consultation-dialog {
  border-radius: 12px;
}


.consultation-content {
  text-align: center;
  padding: 20px 0;
}

.consultation-info h4 {
  color: #303133;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
}

.consultation-info p {
  color: #606266;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.consultation-benefits {
  color: #409eff !important;
  font-weight: 500;
  margin-top: 16px !important;
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 20px 0;
  text-align: left;
}

.benefits-list li {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 6px;
  padding-left: 20px;
  position: relative;
}

.benefits-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #67c23a;
  font-weight: bold;
}

.qr-code-container {
  margin-top: 24px;
}

.qr-code-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
}

.qr-code-image {
  width: 200px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qr-code-placeholder {
  width: 160px;
  height: 160px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.qr-code-placeholder i {
  font-size: 32px;
  margin-bottom: 8px;
}

.qr-code-placeholder span {
  font-size: 12px;
}

.qr-code-tip {
  color: #909399;
  font-size: 12px;
  margin: 0;
}

.dialog-footer {
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .business-consultation-dialog {
    width: 90% !important;
    margin: 0 auto;
  }

  .qr-code-image,
  .qr-code-placeholder {
    width: 120px;
    height: 120px;
  }

  .consultation-content {
    padding: 16px 0;
  }
}
</style>