ss_dc_wechat_mini_program/components/LoginConfirmModal/index.vue

<template>
  <SsConfirm
    v-model:visible="isVisible"
    :title="loginType.title || '扫码登录'"
    :width="600"
    
    height="430rpx"
    :bottom-buttons="buttons"
    @button-click="handleButtonClick"
  >
    <view class="login-confirm-body">
      <!-- 图标区域 -->
      <!-- <view class="icon-wrapper" v-if="loginType.icon">
        <image :src="loginType.icon" mode="aspectFit" class="system-icon"></image>
      </view> -->

      <!-- 系统名称 -->
      <view class="system-name">{{ loginType.systemName }}</view>

      <!-- 提示信息 -->
      <view class="login-tip">{{ loginType.tip || '确认登录该系统吗?' }}</view>

      <!-- 额外信息 -->
      <view class="extra-info" v-if="loginType.address">
        <view class="info-row">
          <text class="label">登录地址:</text>
          <text class="value">{{ loginType.address }}</text>
        </view>
      </view>
    </view>
  </SsConfirm>
</template>

<script setup>
import { ref, watch } from 'vue'
import SsConfirm from '@/components/SsConfirm/index.vue'

const props = defineProps({
  // 显示状态
  visible: {
    type: Boolean,
    default: false
  },
  // 登录类型配置
  loginType: {
    type: Object,
    default: () => ({
      systemName: '系统',
      title: '扫码登录',
      tip: '确认登录该系统吗?',
      icon: '',
      address: ''
    })
  }
})

const emit = defineEmits(['update:visible', 'confirm', 'cancel'])

const isVisible = ref(false)

// 底部按钮配置
const buttons = [
  { text: '取消', action: 'cancel' },
  { text: '确认登录', action: 'confirm' }
]

// 监听外部 visible 变化
watch(() => props.visible, (val) => {
  isVisible.value = val
})

// 监听内部 isVisible 变化
watch(isVisible, (val) => {
  emit('update:visible', val)
})

// 处理按钮点击
const handleButtonClick = (button, index) => {
  if (button.action === 'confirm') {
    emit('confirm')
    isVisible.value = false
  } else if (button.action === 'cancel') {
    emit('cancel')
    isVisible.value = false
  }
}

// 暴露方法供父组件调用
const show = () => {
  isVisible.value = true
}

const hide = () => {
  isVisible.value = false
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
.login-confirm-body {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;

  .system-icon {
    width: 100%;
    height: 100%;
  }
}

.system-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  text-align: center;
}

.login-tip {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-bottom: 30rpx;
  line-height: 1.6;
}

.extra-info {
  width: 100%;
  padding: 20rpx;
  background: #fafafb;
  border-radius: 8rpx;
  border: 1rpx solid #e6e6e6;

  .info-row {
    display: flex;
    align-items: center;
    font-size: 26rpx;

    .label {
      color: #666;
      margin-right: 10rpx;
      white-space: nowrap;
    }

    .value {
      color: #999;
      word-break: break-all;
      flex: 1;
    }
  }
}
</style>