427 lines
10 KiB
Vue
427 lines
10 KiB
Vue
<template>
|
|
<div class="voucher-container">
|
|
<div class="form-card">
|
|
<div class="form-header">
|
|
<h2 class="form-title">算力券信息</h2>
|
|
<div class="form-subtitle">请填写算力券的详细信息</div>
|
|
</div>
|
|
|
|
<el-form :model="voucherData" class="voucher-form">
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">发行方名称</label>
|
|
<el-input
|
|
v-model="voucherData.issuer_name"
|
|
placeholder="请输入发行方名称"
|
|
size="small"
|
|
class="form-input"
|
|
></el-input>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">发行方 orgid</label>
|
|
<el-input
|
|
v-model="voucherData.issuer_orgid"
|
|
placeholder="请输入发行方 orgid"
|
|
size="small"
|
|
class="form-input"
|
|
></el-input>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">接收方名称</label>
|
|
<el-input
|
|
v-model="voucherData.receiver_name"
|
|
placeholder="请输入接收方名称"
|
|
size="small"
|
|
class="form-input"
|
|
></el-input>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">接收方 orgid</label>
|
|
<el-input
|
|
v-model="voucherData.receiver_orgid"
|
|
placeholder="请输入接收方 orgid"
|
|
size="small"
|
|
class="form-input"
|
|
></el-input>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">承接方拿到算力券的时间</label>
|
|
<el-date-picker
|
|
v-model="voucherData.obtain_time"
|
|
type="datetime"
|
|
placeholder="选择日期时间"
|
|
size="small"
|
|
class="form-input"
|
|
></el-date-picker>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">面额</label>
|
|
<el-input
|
|
v-model="voucherData.denomination"
|
|
placeholder="请输入面额"
|
|
size="small"
|
|
class="form-input"
|
|
>
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">余额</label>
|
|
<el-input
|
|
v-model="voucherData.balance"
|
|
placeholder="请输入余额"
|
|
size="small"
|
|
class="form-input"
|
|
>
|
|
<template slot="append">元</template>
|
|
</el-input>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">地域</label>
|
|
<el-input
|
|
v-model="voucherData.region"
|
|
placeholder="请输入地域"
|
|
size="small"
|
|
class="form-input"
|
|
></el-input>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">可用区</label>
|
|
<el-input
|
|
v-model="voucherData.zone"
|
|
placeholder="请输入可用区"
|
|
size="small"
|
|
class="form-input"
|
|
></el-input>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">使用范围</label>
|
|
<el-select
|
|
v-model="voucherData.use_scope"
|
|
placeholder="请选择使用范围"
|
|
size="small"
|
|
class="form-input"
|
|
>
|
|
<el-option label="全部服务" value="all"></el-option>
|
|
<el-option label="计算服务" value="compute"></el-option>
|
|
<el-option label="存储服务" value="storage"></el-option>
|
|
<el-option label="网络服务" value="network"></el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">状态</label>
|
|
<el-select
|
|
v-model="voucherData.status"
|
|
placeholder="请选择状态"
|
|
size="small"
|
|
class="form-input"
|
|
>
|
|
<el-option label="未使用" value="unused"></el-option>
|
|
<el-option label="已使用" value="used"></el-option>
|
|
<el-option label="已过期" value="expired"></el-option>
|
|
<el-option label="已冻结" value="frozen"></el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">发放给客户的时间</label>
|
|
<el-date-picker
|
|
v-model="voucherData.distribute"
|
|
type="datetime"
|
|
placeholder="选择日期时间"
|
|
size="small"
|
|
class="form-input"
|
|
></el-date-picker>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">生效时间</label>
|
|
<el-date-picker
|
|
v-model="voucherData.start_time"
|
|
type="datetime"
|
|
placeholder="选择日期时间"
|
|
size="small"
|
|
class="form-input"
|
|
></el-date-picker>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">失效时间</label>
|
|
<el-date-picker
|
|
v-model="voucherData.end_time"
|
|
type="datetime"
|
|
placeholder="选择日期时间"
|
|
size="small"
|
|
class="form-input"
|
|
></el-date-picker>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<el-button
|
|
type="primary"
|
|
@click="onSubmit"
|
|
class="submit-btn"
|
|
>
|
|
<i class="el-icon-check"></i>
|
|
添加算力券
|
|
</el-button>
|
|
<el-button
|
|
@click="onReset"
|
|
class="reset-btn"
|
|
>
|
|
<i class="el-icon-refresh"></i>
|
|
重置
|
|
</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "voucher",
|
|
data() {
|
|
return {
|
|
voucherData: {
|
|
issuer_name: "",
|
|
issuer_orgid: "",
|
|
receiver_name: "",
|
|
receiver_orgid: "",
|
|
obtain_time: "",
|
|
denomination: "",
|
|
balance: "",
|
|
region: "",
|
|
zone: "",
|
|
use_scope: "",
|
|
status: "",
|
|
distribute: "",
|
|
record: "",
|
|
start_time: "",
|
|
end_time: ""
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onSubmit() {
|
|
console.log('submit!', this.voucherData);
|
|
// 这里可以添加表单验证和提交逻辑
|
|
},
|
|
onReset() {
|
|
this.voucherData = {
|
|
issuer_name: "",
|
|
issuer_orgid: "",
|
|
receiver_name: "",
|
|
receiver_orgid: "",
|
|
obtain_time: "",
|
|
denomination: "",
|
|
balance: "",
|
|
region: "",
|
|
zone: "",
|
|
use_scope: "",
|
|
status: "",
|
|
distribute: "",
|
|
record: "",
|
|
start_time: "",
|
|
end_time: ""
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.voucher-container {
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.form-card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.form-header {
|
|
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
|
color: white;
|
|
padding: 20px 24px;
|
|
|
|
.form-title {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-subtitle {
|
|
margin-top: 4px;
|
|
opacity: 0.9;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.voucher-form {
|
|
padding: 24px;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #606266;
|
|
margin-bottom: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
|
|
::v-deep .el-input__inner {
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
|
|
&:focus {
|
|
border-color: #409eff;
|
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
::v-deep .el-select {
|
|
width: 100%;
|
|
}
|
|
|
|
::v-deep .el-date-editor {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid #e4e7ed;
|
|
|
|
.submit-btn {
|
|
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 10px 24px;
|
|
font-weight: 500;
|
|
transition: all 0.3s;
|
|
|
|
&:hover {
|
|
background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.reset-btn {
|
|
border-radius: 4px;
|
|
padding: 10px 24px;
|
|
font-weight: 500;
|
|
transition: all 0.3s;
|
|
|
|
&:hover {
|
|
color: #409eff;
|
|
border-color: #409eff;
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 响应式设计
|
|
@media (max-width: 768px) {
|
|
.voucher-container {
|
|
padding: 12px;
|
|
}
|
|
|
|
.form-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.voucher-form {
|
|
padding: 16px;
|
|
}
|
|
|
|
.form-header {
|
|
padding: 16px 20px;
|
|
|
|
.form-title {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.form-actions {
|
|
flex-direction: column;
|
|
|
|
.el-button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 加载状态和动画
|
|
.loading-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
z-index: 10;
|
|
}
|
|
|
|
// 成功提示样式
|
|
.success-message {
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
|
|
border: 1px solid #91d5ff;
|
|
color: #409eff;
|
|
padding: 12px 16px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
i {
|
|
margin-right: 8px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
</style>
|