AIGC/demo/frontend/src/views/PaymentCreate.vue

<template>
  <div class="payment-create">
    <el-page-header @back="$router.go(-1)" content="创建支付">
      <template #extra>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          <el-icon><CreditCard /></el-icon>
          创建支付
        </el-button>
      </template>
    </el-page-header>

    <el-card class="form-card">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="100px"
        @submit.prevent="handleSubmit"
      >
        <el-form-item label="订单号" prop="orderId">
          <el-input
            v-model="form.orderId"
            placeholder="请输入订单号"
            clearable
          />
        </el-form-item>

        <el-form-item label="支付金额" prop="amount">
          <el-input-number
            v-model="form.amount"
            :precision="2"
            :min="0.01"
            placeholder="请输入支付金额"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="货币" prop="currency">
          <el-select v-model="form.currency" placeholder="请选择货币">
            <el-option label="人民币 (CNY)" value="CNY" />
            <el-option label="美元 (USD)" value="USD" />
            <el-option label="欧元 (EUR)" value="EUR" />
          </el-select>
        </el-form-item>

        <el-form-item label="支付方式" prop="paymentMethod">
          <el-radio-group v-model="form.paymentMethod">
            <el-radio value="ALIPAY">
              <el-icon><CreditCard /></el-icon>
              支付宝
            </el-radio>
            <el-radio value="PAYPAL">
              <el-icon><CreditCard /></el-icon>
              PayPal
            </el-radio>
            <el-radio value="WECHAT">
              <el-icon><CreditCard /></el-icon>
              微信支付
            </el-radio>
            <el-radio value="UNIONPAY">
              <el-icon><CreditCard /></el-icon>
              银联支付
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="支付描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            :rows="3"
            placeholder="请输入支付描述"
          />
        </el-form-item>

        <el-form-item label="回调URL" prop="callbackUrl">
          <el-input
            v-model="form.callbackUrl"
            placeholder="请输入回调URL（可选）"
          />
        </el-form-item>

        <el-form-item label="返回URL" prop="returnUrl">
          <el-input
            v-model="form.returnUrl"
            placeholder="请输入返回URL（可选）"
          />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 支付方式说明 -->
    <el-card class="info-card">
      <template #header>
        <h4>支付方式说明</h4>
      </template>
      
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <div class="payment-method-info">
            <el-icon size="32" color="#1677FF"><CreditCard /></el-icon>
            <h5>支付宝</h5>
            <p>支持支付宝扫码支付和网页支付</p>
          </div>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <div class="payment-method-info">
            <el-icon size="32" color="#0070BA"><CreditCard /></el-icon>
            <h5>PayPal</h5>
            <p>支持PayPal账户支付和信用卡支付</p>
          </div>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <div class="payment-method-info">
            <el-icon size="32" color="#07C160"><CreditCard /></el-icon>
            <h5>微信支付</h5>
            <p>支持微信扫码支付和H5支付</p>
          </div>
        </el-col>
        
        <el-col :xs="24" :sm="12" :md="6">
          <div class="payment-method-info">
            <el-icon size="32" color="#E6A23C"><CreditCard /></el-icon>
            <h5>银联支付</h5>
            <p>支持银联卡支付和网银支付</p>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const formRef = ref()
const loading = ref(false)

const form = reactive({
  orderId: '',
  amount: 0,
  currency: 'CNY',
  paymentMethod: 'ALIPAY',
  description: '',
  callbackUrl: '',
  returnUrl: ''
})

const rules = {
  orderId: [
    { required: true, message: '请输入订单号', trigger: 'blur' }
  ],
  amount: [
    { required: true, message: '请输入支付金额', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '支付金额必须大于0', trigger: 'blur' }
  ],
  currency: [
    { required: true, message: '请选择货币', trigger: 'change' }
  ],
  paymentMethod: [
    { required: true, message: '请选择支付方式', trigger: 'change' }
  ]
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    const valid = await formRef.value.validate()
    if (!valid) return

    loading.value = true

    // 模拟创建支付
    await new Promise(resolve => setTimeout(resolve, 1000))

    ElMessage.success('支付创建成功')
    router.push('/payments')
  } catch (error) {
    console.error('Create payment error:', error)
    ElMessage.error('创建支付失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.payment-create {
  max-width: 1200px;
  margin: 0 auto;
}

.form-card {
  margin-top: 20px;
}

.info-card {
  margin-top: 20px;
}

.info-card h4 {
  margin: 0;
  color: #303133;
}

.payment-method-info {
  text-align: center;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background-color: #fafafa;
  transition: all 0.3s;
}

.payment-method-info:hover {
  background-color: #f5f7fa;
  border-color: #409EFF;
}

.payment-method-info h5 {
  margin: 12px 0 8px 0;
  color: #303133;
}

.payment-method-info p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .payment-method-info {
    margin-bottom: 16px;
  }
}
</style>