75 lines
3.7 KiB
Vue
75 lines
3.7 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-table v-loading="loading" :data="list" border>
|
|
<el-table-column prop="id" label="ID" min-width="100" />
|
|
<el-table-column prop="name" label="名称" min-width="400" show-overflow-tooltip align="center" />
|
|
<el-table-column prop="grade" label="品阶" min-width="100" align="center">
|
|
<template slot-scope="scope">
|
|
<el-tag v-if="scope.row.grade === 1" type="warning" size="small">金</el-tag>
|
|
<el-tag v-else-if="scope.row.grade === 2" type="danger" size="small">紫</el-tag>
|
|
<el-tag v-else-if="scope.row.grade === 3" size="small">红</el-tag>
|
|
<el-tag v-else-if="scope.row.grade === 4" type="success" size="small">绿</el-tag>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="饰品图片" min-width="250" align="center">
|
|
<template slot-scope="scope">
|
|
<el-image v-if="scope.row.image_url" :src="getImageUrl(scope.row.image_url)" style="width:48px;height:48px" fit="cover" />
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="exterior_name" label="品质" min-width="120" align="center" />
|
|
<el-table-column label="等阶图片" min-width="250" align="center">
|
|
<template slot-scope="scope">
|
|
<el-image v-if="scope.row.level_image_url" :src="getImageUrl(scope.row.level_image_url)" style="width:48px;height:48px" fit="cover" />
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="create_time" label="创建时间" min-width="250" />
|
|
<el-table-column label="操作" min-width="100">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-dialog title="编辑奖品" :visible.sync="dialogVisible" min-width="480px">
|
|
<el-form ref="form" :model="form" label-min-width="80px">
|
|
<el-form-item label="名称"><el-input v-model="form.name" /></el-form-item>
|
|
<el-form-item label="品阶">
|
|
<el-select v-model="form.grade" style="width:100%">
|
|
<el-option label="无品阶" :value="null" />
|
|
<el-option label="1 - 金品" :value="1" />
|
|
<el-option label="2 - 紫品" :value="2" />
|
|
<el-option label="3 - 红品" :value="3" />
|
|
<el-option label="4 - 绿品" :value="4" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="品质"><el-input v-model="form.exterior_name" placeholder="崭新出厂/战痕累累等" /></el-form-item>
|
|
<el-form-item label="图片URL"><el-input v-model="form.image_url" /></el-form-item>
|
|
</el-form>
|
|
<div slot="footer">
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { prizeList, prizeSave } from "@/api/game/bullet/prize/api";
|
|
export default {
|
|
name: "BulletPrize",
|
|
data() {
|
|
return { loading: false, list: [], dialogVisible: false, form: {} };
|
|
},
|
|
created() { this.getList(); },
|
|
methods: {
|
|
getList() { this.loading = true; prizeList().then(r => { this.list = r.data || []; this.loading = false; }); },
|
|
getImageUrl(url) { if (!url) return ''; return url.startsWith('http') ? url : (process.env.VUE_APP_BASE_API || '') + url; },
|
|
handleEdit(row) { this.form = { ...row }; this.dialogVisible = true; },
|
|
submitForm() { prizeSave(this.form).then(() => { this.$message.success("保存成功"); this.dialogVisible = false; this.getList(); }); }
|
|
}
|
|
};
|
|
</script>
|