jcloud/dashboard/src/components/JsiteDomainTransferDialog.vue

<template>
  <div class="p-6">
    <div class="mb-6">
      <h2 class="text-xl font-semibold text-gray-900 mb-2">域名转入</h2>
      <p class="text-sm text-gray-600">
        将域名转入到我们的平台进行管理
      </p>
    </div>

    <div class="space-y-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">域名</label>
        <input 
          v-model="transferDomain" 
          type="text" 
          placeholder="请输入要转入的域名，如：example.com"
          class="w-full border rounded px-3 py-2"
        />
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 mb-2">转移授权码</label>
        <input 
          v-model="authCode" 
          type="text" 
          placeholder="请输入从原注册商获取的转移授权码"
          class="w-full border rounded px-3 py-2"
        />
        <p class="text-xs text-gray-500 mt-1">
          转移授权码需要从原域名注册商处获取
        </p>
      </div>

      <div v-if="transferPrice" class="border-t border-gray-200 pt-4">
        <div class="flex justify-between items-center">
          <div class="text-sm text-gray-600">转入费用</div>
          <div class="font-medium">
            ¥ {{ transferPrice }} 
            <span class="text-gray-500 text-sm">(年付)</span>
          </div>
        </div>
        <div class="flex justify-between items-center mt-2">
          <div class="text-sm text-gray-600">转入时长</div>
          <div class="font-medium">1 年</div>
        </div>
        <div class="flex justify-between items-center mt-2 text-lg font-bold">
          <div>总计</div>
          <div>¥ {{ transferPrice }}</div>
        </div>
      </div>

      <div class="border-t border-gray-200 pt-4">
        <label class="block text-sm font-medium text-gray-700 mb-3">
          选择支付方式
        </label>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <button 
            class="p-4 border rounded-lg flex flex-col items-center justify-center hover:bg-gray-50 transition-all"
            :class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'balance', 'border-gray-200': selectedPaymentMethod !== 'balance'}"
            @click="selectedPaymentMethod = 'balance'"
          >
            <span class="text-gray-800 font-medium">余额支付</span>
          </button>
          
          <button 
            class="p-4 border rounded-lg hover:bg-gray-50 transition-all"
            :class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'alipay', 'border-gray-200': selectedPaymentMethod !== 'alipay'}"
            @click="selectedPaymentMethod = 'alipay'"
          >
            <div class="flex flex-col items-center">
              <div class="mb-2">
                <AlipayLogo class="h-8" />
              </div>
            </div>
          </button>
          
          <button 
            class="p-4 border rounded-lg hover:bg-gray-50 transition-all"
            :class="{'border-blue-500 border-2 shadow-sm': selectedPaymentMethod === 'wechatpay', 'border-gray-200': selectedPaymentMethod !== 'wechatpay'}"
            @click="selectedPaymentMethod = 'wechatpay'"
          >
            <div class="flex flex-col items-center">
              <div class="mb-2">
                <WeChatPayLogo class="h-8" />
              </div>
            </div>
          </button>
        </div>
      </div>

      <div v-if="error" class="p-3 bg-red-50 text-red-700 rounded-md text-sm">
        {{ error }}
      </div>
    </div>

    <div class="flex justify-end gap-3 mt-6">
      <button 
        @click="$emit('close')"
        class="px-4 py-2 text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
      >
        取消
      </button>
      <button 
        @click="processTransfer"
        :disabled="!transferDomain || !authCode || !selectedPaymentMethod || isLoading"
        class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-300 transition-colors"
      >
        {{ isLoading ? '处理中...' : '确认转入' }}
      </button>
    </div>
  </div>
</template>

<script>
import { toast } from 'vue-sonner';
import AlipayLogo from '../logo/AlipayLogo.vue';
import WeChatPayLogo from '../logo/WeChatPayLogo.vue';

export default {
  name: 'JsiteDomainTransferDialog',
  components: {
    AlipayLogo,
    WeChatPayLogo
  },
  props: {
    domain: {
      type: String,
      required: true
    },
    domainDoc: {
      type: Object,
      required: true
    },
    onSuccess: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      transferDomain: '',
      authCode: '',
      selectedPaymentMethod: null,
      transferPrice: 50, // 默认转入价格
      isLoading: false,
      error: null
    };
  },
  methods: {
    async processTransfer() {
      if (!this.transferDomain) {
        this.error = '请输入要转入的域名';
        return;
      }
      
      if (!this.authCode) {
        this.error = '请输入转移授权码';
        return;
      }
      
      if (!this.selectedPaymentMethod) {
        this.error = '请选择支付方式';
        return;
      }
      
      this.error = null;
      this.isLoading = true;
      
      try {
        const response = await this.$resources.transferDomain.submit({
          domain: this.transferDomain,
          auth_code: this.authCode,
          payment_method: this.selectedPaymentMethod
        });
        
        if (response.success) {
          toast.success('域名转入请求已提交');
          this.$emit('close');
          this.onSuccess(response);
        } else {
          this.error = response.message || '转入失败';
        }
      } catch (error) {
        this.error = error.message || '转入失败';
      } finally {
        this.isLoading = false;
      }
    }
  },
  resources: {
    transferDomain() {
      return {
        url: 'jcloud.api.domain_west.west_domain_transfer',
        onSuccess(response) {
          return response;
        },
        onError(error) {
          throw error;
        }
      };
    }
  }
};
</script>