erp_sb/electron-vue-template/src/renderer/components/common/TrialExpiredDialog.vue

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  modelValue: boolean
  expiredType: 'device' | 'account' | 'both' // 设备过期、账号过期、都过期
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const titleText = computed(() => {
  if (props.expiredType === 'both') return '试用已到期'
  if (props.expiredType === 'account') return '账号试用已到期'
  return '设备试用已到期'
})

const subtitleText = computed(() => {
  if (props.expiredType === 'both') return '试用已到期，请联系客服订阅以获取完整服务'
  if (props.expiredType === 'account') return '账号试用已到期，请联系客服订阅'
  return '当前设备试用已到期，请更换新设备体验或联系客服订阅'
})

function handleConfirm() {
  visible.value = false
}

function copyWechat() {
  navigator.clipboard.writeText('_linhong')
  // ElMessage.success('微信号已复制')
}
</script>

<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    :show-close="true"
    width="380px"
    center
    class="trial-expired-dialog">
    <div class="expired-content">
      <!-- Logo -->
      <div style="text-align: center; margin-bottom: 16px;">
        <img src="/icon/image.png" alt="logo" class="expired-logo" />
      </div>

      <!-- 标题 -->
      <h2 class="expired-title">{{ titleText }}</h2>
      
      <!-- 副标题 -->
      <p class="expired-subtitle">{{ subtitleText }}</p>

      <!-- 客服微信 -->
      <div class="wechat-card" @click="copyWechat">
        <div class="wechat-icon">
          <svg viewBox="0 0 1024 1024">
            <path d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.94508C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.298144-38.557154 38.298144-23.107277 0-46.260603-15.45181-46.260603-38.298144C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.23394c-23.107277 0-46.402843-15.45181-46.402843-38.298144 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.78213 306.098002 362.23394 283.016307 362.23394zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z" fill="#09BB07"/>
          </svg>
        </div>
        <div class="wechat-info">
          <div class="wechat-label">客服微信</div>
          <div class="wechat-id">_linhong</div>
        </div>
      </div>

      <!-- 按钮 -->
      <el-button 
        type="primary" 
        class="confirm-btn"
        @click="handleConfirm"
        style="width: 100%;">
        我知道了
      </el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.trial-expired-dialog :deep(.el-dialog) {
  border-radius: 16px;
}

.trial-expired-dialog :deep(.el-dialog__header) {
  padding: 0;
  margin: 0;
}

.trial-expired-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.expired-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.expired-logo {
  width: 160px;
  height: auto;
}

.expired-title {
  font-size: 18px;
  font-weight: 700;
  color: #1f1f1f;
  margin: 0 0 8px 0;
  text-align: center;
}

.expired-subtitle {
  font-size: 12px;
  color: #8c8c8c;
  margin: 0 0 20px 0;
  text-align: center;
  line-height: 1.5;
}

.wechat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #f5f5f5;
  border-radius: 6px;
  margin-bottom: 20px;
  width: 90%;
  cursor: pointer;
  transition: background 0.3s;
}

.wechat-card:hover {
  background: #ebebeb;
}

.wechat-icon {
  flex-shrink: 0;
}

.wechat-icon svg {
  width: 36px;
  height: 36px;
}

.wechat-info {
  flex: 1;
  text-align: left;
}

.wechat-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 2px;
}

.wechat-id {
  font-size: 15px;
  font-weight: 500;
  color: #1f1f1f;
}

.confirm-btn {
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  background: #1677FF;
  border-color: #1677FF;
  border-radius: 6px;
}

.confirm-btn:hover {
  background: #4096ff;
  border-color: #4096ff;
}
</style>