commit
4cf428c943
BIN
src/assets/images/Alipay.png
Normal file
BIN
src/assets/images/Alipay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/images/wechat.png
Normal file
BIN
src/assets/images/wechat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
127
src/components/ApiFormModal.vue
Normal file
127
src/components/ApiFormModal.vue
Normal file
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div v-if="visible" class="modal fade show" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalLabel" style="display: block; padding-right: 15px;" _mstvisible="0" aria-modal="true" role="dialog">
|
||||
<div class="modal-dialog modal-dialog-centered" _mstvisible="1">
|
||||
<div class="modal-content" _mstvisible="2">
|
||||
<div class="modal-header" _mstvisible="3">
|
||||
<h5 class="modal-title" id="exampleModalCenterTitle" _msttexthash="13222534" _msthash="147" _mstvisible="4">{{title}}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭" _mstaria-label="59709" _msthash="148" _mstvisible="4" @click="cancel"></button>
|
||||
</div>
|
||||
<div class="formcontent">
|
||||
<form>
|
||||
<div class="row mb-3">
|
||||
<label for="inputName3" class="col-sm-2 col-form-label">接口名称</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" v-model="form.name" class="form-control" id="inputName3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="inputDescription3" class="col-sm-2 col-form-label">接口描述</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" v-model="form.description" class="form-control" id="inputDescription3">
|
||||
</div>
|
||||
</div>
|
||||
<fieldset class="row mb-3">
|
||||
<legend class="col-form-label col-sm-2 pt-0">调用方法</legend>
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" v-model="form.method" value="0" :checked="form.method == 0 ? true : false">
|
||||
<label class="form-check-label" for="gridRadios1">
|
||||
GET
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" v-model="form.method" value="1" :checked="form.method == 1 ? true : false">
|
||||
<label class="form-check-label" for="gridRadios1">
|
||||
POST
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="row mb-3">
|
||||
<label class="visually-hidden" for="PackageSelect">所属套餐</label>
|
||||
<select class="form-select" id="PackageSelect" v-model="form.packageId">
|
||||
<option v-for="(item,index) in packageList" :key="index" :value="item.id" :selected="form.packageId == item.id ? true : false">{{item.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer" _mstvisible="3">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" _msttexthash="5889065" _msthash="150" _mstvisible="4" @click="cancel">关闭</button>
|
||||
<button type="button" class="btn btn-primary" _msttexthash="10744773" _msthash="151" _mstvisible="4" @click="submit">保存更改</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'ApiFormModal',
|
||||
props:{
|
||||
title:{
|
||||
type:String
|
||||
},
|
||||
formType: {
|
||||
type: String,
|
||||
default: 'edit'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
ApiId: -2,
|
||||
packageList: [],
|
||||
form: {
|
||||
name: '',
|
||||
description: '',
|
||||
method: '0',
|
||||
packageId: '0'
|
||||
},
|
||||
resolve: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
open(apiId,apiInfo = null,packageList) {
|
||||
this.resetForm();
|
||||
this.visible = true;
|
||||
this.apiId = apiId;
|
||||
this.form.name = apiInfo.name;
|
||||
this.form.description = apiInfo.description;
|
||||
this.form.method = apiInfo.method.toString();
|
||||
this.form.packageId = apiInfo.packageId.toString();
|
||||
this.packageList = packageList
|
||||
return new Promise((resolve) => {
|
||||
this.resolve = resolve;
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
this.visible = false;
|
||||
this.form.method = Number(this.form.method)
|
||||
this.form.packageId = Number(this.form.packageId)
|
||||
this.resolve && this.resolve(this.form);
|
||||
},
|
||||
cancel() {
|
||||
this.visible = false;
|
||||
this.resolve && this.resolve(null);
|
||||
},
|
||||
resetForm() {
|
||||
this.form = {
|
||||
name: '',
|
||||
description: '',
|
||||
method: '0',
|
||||
packageId: '0'
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.formcontent {
|
||||
padding: 0 30px;
|
||||
}
|
||||
</style>
|
||||
@ -2,49 +2,104 @@
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ title }}</h5>
|
||||
<p>DataTables has most features enabled by default, so all you need to do to use it with your own tables is to
|
||||
call the construction function: <code>$().DataTable();</code>.</p>
|
||||
<h5 class="card-title text-center card-header">{{ title }}</h5>
|
||||
<div id="zero-conf_wrapper" class="dataTables_wrapper dt-bootstrap4">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="dataTables_length" id="zero-conf_length"><label>展示 <select name="zero-conf_length"
|
||||
aria-controls="zero-conf" class="custom-select custom-select-sm form-control form-control-sm"
|
||||
v-model="pageSize">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-sm-12 col-md-6 d-flex align-items-center">
|
||||
<div class="dataTables_length" id="zero-conf_length">
|
||||
<label class="d-flex align-items-center" style="white-space: nowrap">
|
||||
展示
|
||||
<select
|
||||
name="zero-conf_length"
|
||||
aria-controls="zero-conf"
|
||||
class="custom-select custom-select-sm form-control form-control-sm mx-2"
|
||||
v-model="pageSize"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>条数据</label></div>
|
||||
</select>
|
||||
条数据
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div id="zero-conf_filter" class="dataTables_filter"><label>搜索:<input type="search"
|
||||
class="form-control form-control-sm" placeholder="" aria-controls="zero-conf"></label></div>
|
||||
<div class="ms-3">
|
||||
<label class="d-flex align-items-center" style="white-space: nowrap">
|
||||
搜索:
|
||||
<input
|
||||
type="search"
|
||||
class="form-control form-control-sm ms-2"
|
||||
placeholder="请输入关键字"
|
||||
aria-controls="zero-conf"
|
||||
/>
|
||||
<button class="btn btn-sm btn-secondary ms-2" @click="handleSearch">
|
||||
搜索
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 text-center">
|
||||
<button class="btn btn-sm btn-primary ms-2" @click="handleAddUser">
|
||||
添加
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger ms-2" @click="handleBatchDelete">
|
||||
批量删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<table id="zero-conf" class="display dataTable" style="width:100%" role="grid"
|
||||
aria-describedby="zero-conf_info">
|
||||
<table
|
||||
id="zero-conf"
|
||||
class="display dataTable"
|
||||
style="width: 100%"
|
||||
role="grid"
|
||||
aria-describedby="zero-conf_info"
|
||||
>
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th class="sorting_asc" tabindex="0" aria-controls="zero-conf" rowspan="1" colspan="1"
|
||||
aria-sort="ascending" aria-label="Name: activate to sort column descending"
|
||||
style="width: 85.5469px;" v-for="(item, index) in headers" :key="index">{{ item.text }}</th>
|
||||
<th
|
||||
class="sorting_asc"
|
||||
tabindex="0"
|
||||
aria-controls="zero-conf"
|
||||
rowspan="1"
|
||||
colspan="1"
|
||||
aria-sort="ascending"
|
||||
aria-label="Name: activate to sort column descending"
|
||||
style="width: 85.5469px"
|
||||
v-for="(item, index) in headers"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.text }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr role="row" v-for="(item, rowIndex) in rows" :key="rowIndex"
|
||||
:class="rowIndex % 2 ? 'even' : 'odd'">
|
||||
<tr
|
||||
role="row"
|
||||
v-for="(item, rowIndex) in rows"
|
||||
:key="rowIndex"
|
||||
:class="rowIndex % 2 ? 'even' : 'odd'"
|
||||
>
|
||||
<td v-for="(header, colIndex) in headers" :key="colIndex">
|
||||
<div v-if="header.type == null">
|
||||
<span>{{ item[header.value] }}</span>
|
||||
</div>
|
||||
<div v-if="header.type == 'bool'">
|
||||
<span :class="['badge',item[header.value] ? 'bg-danger' : 'bg-success']">{{ item[header.value] ? '禁用' : '正常'}}</span>
|
||||
<span
|
||||
:class="[
|
||||
'badge',
|
||||
item[header.value] ? 'bg-danger' : 'bg-success',
|
||||
]"
|
||||
>{{ item[header.value] ? "禁用" : "正常" }}</span
|
||||
>
|
||||
</div>
|
||||
<div v-if="header.type == 'arrObj'">
|
||||
<span class="badge bg-info" v-for="(objItem,objIndex) in item[header.value]" :key="objIndex">
|
||||
<span
|
||||
class="badge bg-info"
|
||||
v-for="(objItem, objIndex) in item[header.value]"
|
||||
:key="objIndex"
|
||||
>
|
||||
{{ objItem[header.child] }}
|
||||
</span>
|
||||
</div>
|
||||
@ -54,17 +109,47 @@
|
||||
<div v-if="header.type == 'datetime'">
|
||||
<span>{{ formatDateTime(item[header.value]) }}</span>
|
||||
</div>
|
||||
<div v-if="header.type == 'method'">
|
||||
<span
|
||||
:class="[
|
||||
'badge',
|
||||
'bg-warning',
|
||||
]"
|
||||
>{{ callMethod[item[header.value]] }}</span
|
||||
>
|
||||
</div>
|
||||
<div v-if="header.type == 'find'">
|
||||
<span class="badge bg-info">
|
||||
{{ header.findValue.find(x => x.id == item[header.value]).name }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-outline-secondary m-b-xs" @click="modify(item.id)">修改</button>
|
||||
<button class="btn btn-outline-danger m-b-xs" @click="deleteData(item.id)">删除</button>
|
||||
|
||||
<button
|
||||
class="btn btn-outline-secondary m-b-xs"
|
||||
@click="modify(item.id)"
|
||||
>
|
||||
修改
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-danger m-b-xs"
|
||||
@click="deleteData(item.id)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th rowspan="1" colspan="1" v-for="(header, index) in headers" :key="index">{{ header.value }}</th>
|
||||
<th
|
||||
rowspan="1"
|
||||
colspan="1"
|
||||
v-for="(header, index) in headers"
|
||||
:key="index"
|
||||
>
|
||||
{{ header.value }}
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
@ -72,22 +157,79 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-5">
|
||||
<div class="dataTables_info" id="zero-conf_info" role="status" aria-live="polite">正在展示 {{ (currentPageIndex * pageSize) - (pageSize - 1) }} 到 {{ currentPageIndex * pageSize }} 条数据 总计 {{dataCount}} 条</div>
|
||||
<div
|
||||
class="dataTables_info"
|
||||
id="zero-conf_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
正在展示 {{ currentPageIndex * pageSize - (pageSize - 1) }} 到
|
||||
{{ currentPageIndex * pageSize }} 条数据 总计 {{ dataCount }} 条
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<div class="dataTables_paginate paging_simple_numbers" id="zero-conf_paginate">
|
||||
<div
|
||||
class="dataTables_paginate paging_simple_numbers"
|
||||
id="zero-conf_paginate"
|
||||
>
|
||||
<ul class="pagination">
|
||||
<li :class="['paginate_button', 'page-item', 'previous', (currentPageIndex == 1 ? 'disabled' : '')]"
|
||||
id="zero-conf_previous"><a href="#" aria-controls="zero-conf" data-dt-idx="0" tabindex="0"
|
||||
class="page-link" @click.prevent="previousPage">上一页</a></li>
|
||||
<li :class="['paginate_button','page-item',item.index == currentPageIndex ? 'active' : '']"
|
||||
v-for="(item,index) in pageBtn" :key="index"
|
||||
><a href="#" aria-controls="zero-conf" :data-dt-idx="item.index"
|
||||
tabindex="0" class="page-link" @click.prevent="currentPageIndex = item.index">{{item.text}}</a></li>
|
||||
<li
|
||||
:class="['paginate_button', 'page-item', 'next', (currentPageIndex == pageCount ? 'disabled' : '')]"
|
||||
id="zero-conf_next"><a href="#" aria-controls="zero-conf" data-dt-idx="7" tabindex="0"
|
||||
class="page-link" @click.prevent="nextPage">下一页</a></li>
|
||||
:class="[
|
||||
'paginate_button',
|
||||
'page-item',
|
||||
'previous',
|
||||
currentPageIndex == 1 ? 'disabled' : '',
|
||||
]"
|
||||
id="zero-conf_previous"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-controls="zero-conf"
|
||||
data-dt-idx="0"
|
||||
tabindex="0"
|
||||
class="page-link"
|
||||
@click.prevent="previousPage"
|
||||
>上一页</a
|
||||
>
|
||||
</li>
|
||||
<li
|
||||
:class="[
|
||||
'paginate_button',
|
||||
'page-item',
|
||||
item.index == currentPageIndex ? 'active' : '',
|
||||
]"
|
||||
v-for="(item, index) in pageBtn"
|
||||
:key="index"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-controls="zero-conf"
|
||||
:data-dt-idx="item.index"
|
||||
tabindex="0"
|
||||
class="page-link"
|
||||
@click.prevent="currentPageIndex = item.index"
|
||||
>{{ item.text }}</a
|
||||
>
|
||||
</li>
|
||||
<li
|
||||
:class="[
|
||||
'paginate_button',
|
||||
'page-item',
|
||||
'next',
|
||||
currentPageIndex == pageCount ? 'disabled' : '',
|
||||
]"
|
||||
id="zero-conf_next"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-controls="zero-conf"
|
||||
data-dt-idx="7"
|
||||
tabindex="0"
|
||||
class="page-link"
|
||||
@click.prevent="nextPage"
|
||||
>下一页</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -118,8 +260,8 @@ export default {
|
||||
},
|
||||
dataCount: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -130,12 +272,12 @@ export default {
|
||||
//总页数
|
||||
pageCount: 0,
|
||||
//分页按钮数据，[{text:'1',index:1},.....]
|
||||
pageBtn: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
pageBtn: [],
|
||||
//调用方法
|
||||
callMethod:['GET','POST']
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//下一页
|
||||
nextPage() {
|
||||
@ -144,11 +286,11 @@ export default {
|
||||
//上一页
|
||||
previousPage() {
|
||||
if (this.currentPageIndex > 1) {
|
||||
this.currentPageIndex--
|
||||
this.currentPageIndex--;
|
||||
}
|
||||
},
|
||||
changePage(pageIndex) {
|
||||
this.currentPageIndex == pageIndex
|
||||
this.currentPageIndex == pageIndex;
|
||||
},
|
||||
//更新总页数
|
||||
updatePageCount(newPageSize) {
|
||||
@ -156,41 +298,42 @@ export default {
|
||||
this.pageCount += this.dataCount % newPageSize == 0 ? 0 : 1;
|
||||
},
|
||||
//更新分页按钮数据
|
||||
updatePageBtn(newPageIndex){
|
||||
this.pageBtn = []
|
||||
updatePageBtn(newPageIndex) {
|
||||
this.pageBtn = [];
|
||||
//初始化首页
|
||||
this.pageBtn.push({text: '1', index: 1})
|
||||
this.pageBtn.push({ text: "1", index: 1 });
|
||||
//总页数小于8时显示全部页码
|
||||
if(this.pageCount <= 8){
|
||||
for(let i = 2; i < this.pageCount; i++){
|
||||
this.pageBtn.push({text: `${i}`, index: i})
|
||||
if (this.pageCount <= 8) {
|
||||
for (let i = 2; i < this.pageCount; i++) {
|
||||
this.pageBtn.push({ text: `${i}`, index: i });
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
//当前页左侧显示2格页码，当显示最小页码距离首页中间间隔大于1时隐藏间隔页面
|
||||
if(newPageIndex - 2 > 3){
|
||||
this.pageBtn.push({text: '...', index: newPageIndex})
|
||||
if (newPageIndex - 2 > 3) {
|
||||
this.pageBtn.push({ text: "...", index: newPageIndex });
|
||||
}
|
||||
//渲染当前页码左右各两格页码
|
||||
const numleft = (newPageIndex - 2) < 2 ? newPageIndex - 2 : 2;
|
||||
const numright = (newPageIndex + 2) < this.pageCount ? 2 : (this.pageCount - newPageIndex - 1);
|
||||
for(let i = newPageIndex - numleft; i <= newPageIndex + numright; i++){
|
||||
this.pageBtn.push({text: `${i}`, index: i})
|
||||
const numleft = newPageIndex - 2 < 2 ? newPageIndex - 2 : 2;
|
||||
const numright =
|
||||
newPageIndex + 2 < this.pageCount ? 2 : this.pageCount - newPageIndex - 1;
|
||||
for (let i = newPageIndex - numleft; i <= newPageIndex + numright; i++) {
|
||||
this.pageBtn.push({ text: `${i}`, index: i });
|
||||
}
|
||||
//当前页右侧显示2格页码，当显示最大页码距离尾页中间间隔大于1时隐藏间隔页面
|
||||
if(newPageIndex + 2 < this.pageCount - 2){
|
||||
this.pageBtn.push({text: '...', index: newPageIndex})
|
||||
if (newPageIndex + 2 < this.pageCount - 2) {
|
||||
this.pageBtn.push({ text: "...", index: newPageIndex });
|
||||
}
|
||||
}
|
||||
//渲染尾页
|
||||
this.pageBtn.push({text: `${this.pageCount}`, index: this.pageCount})
|
||||
this.pageBtn.push({ text: `${this.pageCount}`, index: this.pageCount });
|
||||
},
|
||||
formatDateTime(str){
|
||||
if (!str) return '-';
|
||||
formatDateTime(str) {
|
||||
if (!str) return "-";
|
||||
|
||||
const date = new Date(str);
|
||||
if (isNaN(date)) return '-'; // 防止 Safari 报 Invalid Date
|
||||
if (isNaN(date)) return "-"; // 防止 Safari 报 Invalid Date
|
||||
|
||||
const pad = n => n.toString().padStart(2, '0');
|
||||
const pad = (n) => n.toString().padStart(2, "0");
|
||||
|
||||
const Y = date.getFullYear();
|
||||
const M = pad(date.getMonth() + 1);
|
||||
@ -201,37 +344,45 @@ export default {
|
||||
|
||||
return `${Y}-${M}-${D} ${h}:${m}:${s}`;
|
||||
},
|
||||
modify(id){
|
||||
this.$emit('dataModify',id)
|
||||
modify(id) {
|
||||
this.$emit("dataModify", id);
|
||||
},
|
||||
deleteData(id){
|
||||
this.$emit('dataDelete',id)
|
||||
}
|
||||
deleteData(id) {
|
||||
this.$emit("dataDelete", id);
|
||||
},
|
||||
handleSearch() {},
|
||||
handleAddUser() {},
|
||||
handleBatchDelete() {},
|
||||
},
|
||||
watch: {
|
||||
//监听分页大小变化
|
||||
'pageSize': {
|
||||
pageSize: {
|
||||
handler(newVal) {
|
||||
this.updatePageCount(newVal)
|
||||
this.updatePageCount(newVal);
|
||||
//单页显示数据量改变时重置当前索引，防止数据以及控件异常
|
||||
this.currentPageIndex = 1
|
||||
this.$emit('pageChanged',{pageIndex:this.currentPageIndex,pageSize:newVal})
|
||||
this.updatePageBtn(this.currentPageIndex)
|
||||
this.currentPageIndex = 1;
|
||||
this.$emit("pageChanged", { pageIndex: this.currentPageIndex, pageSize: newVal });
|
||||
this.updatePageBtn(this.currentPageIndex);
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
//监听页索引，用于切换数据
|
||||
'currentPageIndex': {
|
||||
currentPageIndex: {
|
||||
handler(newVal) {
|
||||
this.$emit('pageChanged',{pageIndex:newVal,pageSize:this.pageSize})
|
||||
this.updatePageBtn(newVal)
|
||||
this.$emit("pageChanged", { pageIndex: newVal, pageSize: this.pageSize });
|
||||
this.updatePageBtn(newVal);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可自定义样式 */
|
||||
.card-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,6 +28,25 @@ const getUserInfoById = async (id) => await request.get(`/api/Admin/UserInfo?use
|
||||
|
||||
//更新用户信息
|
||||
const updateUserInfo = async (id,param) => await request.post(`/api/Admin/UpdateUser?userId=${id}`,param)
|
||||
|
||||
//获取api列表
|
||||
const getApiList = async (pageIndex,pageSize,desc) => await request.get(`/api/apis/ApiList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`)
|
||||
|
||||
//删除API
|
||||
const deleteApi = async (id) => await request.delete(`/api/Apis/DeleteApi?apiId=${id}`)
|
||||
|
||||
//获取指定API信息
|
||||
const getApiInfoById = async (id) => await request.get(`/api/Apis/ApiInfo?apiId=${id}`)
|
||||
|
||||
//更新API信息
|
||||
const updateApiInfo = async (id,param) => await request.post(`/api/Apis/UpdateApi?apiId=${id}`,param)
|
||||
|
||||
//获取套餐列表
|
||||
const getPackageList = async (pageIndex,pageSize,desc) => await request.get(`/api/Package/GetPackageList?pageIndex=${pageIndex}&pageSize=${pageSize}&desc=${desc}`)
|
||||
|
||||
//更新系统配置
|
||||
const updateSystemConfig = async (configName,configBody) => await request.post('/api/SystemConfig/UpdateSystemConfig',{configName:configName,configBody:configBody})
|
||||
|
||||
export default {
|
||||
login,
|
||||
register,
|
||||
@ -38,5 +57,11 @@ export default {
|
||||
getUserCount,
|
||||
deleteUser,
|
||||
getUserInfoById,
|
||||
updateUserInfo
|
||||
updateUserInfo,
|
||||
getApiList,
|
||||
deleteApi,
|
||||
getApiInfoById,
|
||||
updateApiInfo,
|
||||
getPackageList,
|
||||
updateSystemConfig
|
||||
}
|
||||
@ -1,10 +1,14 @@
|
||||
<template>
|
||||
<div class="error-page err-404 page">
|
||||
<div class="error-page err-404 page login-page">
|
||||
<div class="container">
|
||||
<div class="error-container">
|
||||
<div class="error-info">
|
||||
<h1>404</h1>
|
||||
<p>It seems that the page you are looking for no longer exists.<br>Please contact our <a href="#">help center</a> or go to the <RouterLink to="/home">homepage</RouterLink>.</p>
|
||||
<p>
|
||||
It seems that the page you are looking for no longer exists.<br />Please
|
||||
contact our <a href="#">help center</a> or go to the
|
||||
<RouterLink to="/home">homepage</RouterLink>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="error-image"></div>
|
||||
</div>
|
||||
@ -13,8 +17,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'notfound'
|
||||
}
|
||||
name: "notfound",
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -6,7 +6,11 @@
|
||||
<DataTable title="API管理"
|
||||
:headers="tableHeaders"
|
||||
:rows="tableData"
|
||||
:data-count="dataCount" />
|
||||
:data-count="dataCount"
|
||||
@pageChanged="pageChangedHandle"
|
||||
@dataDelete="deleteHandle"
|
||||
@dataModify="modifyHandle" />
|
||||
<api-form-modal title="修改接口" ref="apiModal" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -14,27 +18,104 @@
|
||||
|
||||
<script>
|
||||
import DataTable from '@/components/DataTable.vue';
|
||||
import ApiFormModal from '../../components/ApiFormModal.vue';
|
||||
|
||||
|
||||
export default {
|
||||
name: "APIs",
|
||||
components: {
|
||||
DataTable
|
||||
DataTable,
|
||||
ApiFormModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoaded: false,
|
||||
packageList: [],
|
||||
tableHeaders: [
|
||||
{ text: "", value: "", width: "" }
|
||||
{ text: "编号", value: "id", width: "100px" },
|
||||
{ text: "名称", value: "name", width: "100px" },
|
||||
{ text: "描述", value: "description", width: "100px" },
|
||||
{ text: "路径", value: "endpoint", width: "100px" },
|
||||
{ text: "调用方法", value: "method", width: "100px", type: "method" },
|
||||
{ text: "状态", value: "isactive", width: "100px", type: "bool" },
|
||||
{ text: "所属套餐", value: "packageId", width: "100px", type: "find", findProperty: "id", findValue: [] },
|
||||
],
|
||||
tableData: [],
|
||||
dataCount: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
async loadApiList(pageIndex = 1, pageSize = 10, desc = false) {
|
||||
try {
|
||||
const res = await this.$api.getApiList(pageIndex, pageSize, desc)
|
||||
if (res.code == '1000') {
|
||||
this.tableData = res.data
|
||||
}
|
||||
} catch (e) {
|
||||
this.$alert('API列表数据加载失败!', 'danger')
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
async pageChangedHandle(newval) {
|
||||
await this.loadApiList(newval.pageIndex, newval.pageSize, false)
|
||||
},
|
||||
async modifyHandle(id) {
|
||||
try {
|
||||
//加载API信息到新窗口
|
||||
const apiinfoRes = await this.$api.getApiInfoById(id)
|
||||
if (apiinfoRes.code != 1000) {
|
||||
this.$alert(apiinfoRes.message, 'danger')
|
||||
return
|
||||
}
|
||||
|
||||
//拉起修改弹窗
|
||||
const res = await this.$refs.apiModal.open(id, apiinfoRes.data, this.packageList)
|
||||
//弹窗返回为null表示用户关闭了窗口，不执行操作
|
||||
if (res == null) return
|
||||
const modifyRes = await this.$api.updateApiInfo(id, res)
|
||||
if (modifyRes.code != 1000) {
|
||||
this.$alert(modifyRes.message, 'danger')
|
||||
return
|
||||
}
|
||||
this.$alert('修改成功', 'success')
|
||||
|
||||
} catch (e) {
|
||||
this.$alert(e, 'danger')
|
||||
}
|
||||
},
|
||||
async deleteHandle(id) {
|
||||
const confirmRes = await this.$confirm('删除', '是否删除API？')
|
||||
if (!confirmRes) return;
|
||||
try {
|
||||
const res = await this.$api.deleteApi(id)
|
||||
if (res.code != 1000) {
|
||||
this.$alert(res.message, 'danger')
|
||||
return;
|
||||
}
|
||||
this.$alert('删除成功', 'success')
|
||||
|
||||
} catch (e) {
|
||||
this.$alert(e, 'danger')
|
||||
}
|
||||
},
|
||||
async loadPackageList(pageIndex = 1, pageSize = 10, desc = false) {
|
||||
//获取套餐列表
|
||||
try{
|
||||
const packageRes = await this.$api.getPackageList(1, 1000, false)
|
||||
if (packageRes.code != 1000) {
|
||||
this.$alert(packageRes.message, 'danger')
|
||||
}
|
||||
this.packageList = packageRes.data
|
||||
}catch(e){
|
||||
this.$alert('加载套餐列表失败！', 'danger')
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadApiList()
|
||||
await this.loadPackageList()
|
||||
this.tableHeaders.find(x => x.value == 'packageId').findValue = this.packageList
|
||||
this.isLoaded = true
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div class="main-wrapper">
|
||||
<div class="row justify-content-center">
|
||||
<div class="card custom-card">
|
||||
<div class="card-header text-center">
|
||||
<h3 class="card-title">充值中心</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-4">
|
||||
<div class="col text-start">
|
||||
<div class="balance-box">
|
||||
<h5 class="balance-text">
|
||||
<i class="fas fa-wallet balance-icon"></i>
|
||||
剩余余额：<span class="balance-amount">{{ balance }}</span>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="formGroupExampleInput">充值金额</label>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="number"
|
||||
class="form-control custom-input"
|
||||
id="formGroupExampleInput"
|
||||
placeholder="请输入充值金额"
|
||||
v-model="formattedRechargeAmount"
|
||||
/>
|
||||
<div class="input-group-text custom-input-text">元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<p class="payment-title">充值方式</p>
|
||||
<div class="container">
|
||||
<div class="row d-flex justify-content-between">
|
||||
<!-- 单选按钮 1 -->
|
||||
<div
|
||||
class="col-6 d-flex justify-content-center mb-3 option-box"
|
||||
:class="{ 'selected-box': selectedpay === 'alipay' }"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="option1"
|
||||
name="options"
|
||||
class="hidden-radio"
|
||||
value="alipay"
|
||||
v-model="selectedpay"
|
||||
/>
|
||||
<label for="option1" class="label-style">
|
||||
<img src="../../assets/images/Alipay.png" alt="支付宝" />
|
||||
</label>
|
||||
</div>
|
||||
<!-- 单选按钮 2 -->
|
||||
<div
|
||||
class="col-6 d-flex justify-content-center mb-3 option-box"
|
||||
:class="{ 'selected-box': selectedpay === 'wechat' }"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="option2"
|
||||
name="options"
|
||||
class="hidden-radio"
|
||||
value="wechat"
|
||||
v-model="selectedpay"
|
||||
/>
|
||||
<label for="option2" class="label-style">
|
||||
<img src="../../assets/images/wechat.png" alt="微信支付" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn custom-btn" @click="deposit">立刻充值</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "Balance",
|
||||
data() {
|
||||
return {
|
||||
rechargeAmount: 0,
|
||||
selectedpay: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState("userinfo", {
|
||||
balance: (state) => (state.user ? state.user.balance : 0),
|
||||
}),
|
||||
formattedRechargeAmount: {
|
||||
get() {
|
||||
return this.rechargeAmount === 0 ? "" : this.rechargeAmount;
|
||||
},
|
||||
set(value) {
|
||||
this.rechargeAmount = value === "" ? 0 : Number(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch("userinfo/fetchUserInfo");
|
||||
},
|
||||
methods: {
|
||||
deposit() {
|
||||
if (this.rechargeAmount <= 0) {
|
||||
this.$alert("充值金额必须大于0", "danger");
|
||||
return;
|
||||
}
|
||||
if (!this.selectedpay) {
|
||||
this.$alert("请选择充值方式", "danger");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
console.log(`Depositing ${this.rechargeAmount} using ${this.selectedpay}`);
|
||||
this.$alert("充值成功", "success");
|
||||
} catch (error) {
|
||||
console.error("充值失败:", error);
|
||||
this.$alert("充值失败，请稍后再试", "danger");
|
||||
}
|
||||
this.rechargeAmount = 0;
|
||||
this.selectedpay = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
input[type="radio"].hidden-radio {
|
||||
display: none; /* 隐藏原生单选按钮 */
|
||||
}
|
||||
/* 禁用数字输入框的调节按钮 */
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield; /* 针对 Firefox */
|
||||
}
|
||||
/* 余额盒子样式 */
|
||||
.balance-box {
|
||||
background-color: #f0f8ff; /* 柔和的背景色 */
|
||||
border: 1px solid #d1e7ff; /* 边框颜色 */
|
||||
border-radius: 10px; /* 圆角 */
|
||||
padding: 15px; /* 内边距 */
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 余额文本样式 */
|
||||
.balance-text {
|
||||
font-size: 1.2rem;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 余额数字样式 */
|
||||
.balance-amount {
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* 图标样式 */
|
||||
.balance-icon {
|
||||
color: #007bff;
|
||||
margin-right: 8px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
/* 卡片样式 */
|
||||
.custom-card {
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
max-width: 600px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.card-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 余额样式 */
|
||||
.balance-text {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
}
|
||||
.balance-amount {
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
.custom-input {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-input-text {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
/* 支付方式样式 */
|
||||
.option-box {
|
||||
padding: 10px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.option-box.selected-box {
|
||||
border-color: #007bff;
|
||||
background-color: #e9f5ff;
|
||||
}
|
||||
.label-style {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.custom-btn {
|
||||
background: linear-gradient(45deg, #007bff, #0056b3);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.custom-btn:hover {
|
||||
background: linear-gradient(45deg, #0056b3, #003f7f);
|
||||
}
|
||||
|
||||
/* 全局字体 */
|
||||
body {
|
||||
font-family: "Arial", sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col m-b-sm" v-for="(item,index) in packageList" :key="index">
|
||||
<ul class="list-group io-pricing-table">
|
||||
<li class="list-group-item">
|
||||
<h3>{{ item.name }}</h3>
|
||||
</li>
|
||||
<li class="list-group-item">每分钟调用次数限制：{{ item.oneMinuteLimit }} 次</li>
|
||||
<li class="list-group-item">周期总调用次数：{{ item.callLimit }} 次</li>
|
||||
<li class="list-group-item">
|
||||
<h3>￥{{ item.price }}</h3>
|
||||
<span>每月</span>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<button type="button" class="btn btn-primary">购买</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name:'BuyPackage',
|
||||
data(){
|
||||
return {
|
||||
packageList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//加载套餐列表
|
||||
async loadPackageList(){
|
||||
try{
|
||||
const res = await this.$api.getPackageList(1,100,false)
|
||||
if(res.code != 1000){
|
||||
this.$alert(res.message,'danger')
|
||||
return
|
||||
}
|
||||
this.packageList = res.data
|
||||
return
|
||||
}catch(e){
|
||||
this.$alert('加载套餐列表失败！','danger')
|
||||
console.error('套餐列表加载失败：',e)
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted(){
|
||||
await this.loadPackageList()
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<div class="main-wrapper">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="card shadow-sm border-0 mt-4">
|
||||
<div class="card-header bg-gradient text-white py-4">
|
||||
<h4 class="mb-0">个人中心</h4>
|
||||
<p class="mb-0 small">管理您的账户信息与安全设置</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<!-- 用户头像 -->
|
||||
<div class="text-center mb-4">
|
||||
<img :src="user.avatar" class="rounded-circle border" width="100" height="100" />
|
||||
<div class="mt-2">
|
||||
<button class="btn btn-outline-primary btn-sm" @click="editingSection = 'avatar'">修改头像</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息列表 -->
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<span><strong>昵称：</strong>{{ user.nickname }}</span>
|
||||
<button class="btn btn-link" @click="openEdit('nickname')">修改</button>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<span><strong>邮箱：</strong>{{ user.email }}</span>
|
||||
<button class="btn btn-link" @click="openEdit('email')">修改</button>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<span><strong>手机号：</strong>{{ user.phone }}</span>
|
||||
<button class="btn btn-link" @click="openEdit('phone')">修改</button>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<span><strong>性别：</strong>{{ getGenderLabel(user.gender) }}</span>
|
||||
<button class="btn btn-link" @click="openEdit('gender')">修改</button>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<span><strong>个人简介：</strong>{{ user.bio || '未填写' }}</span>
|
||||
<button class="btn btn-link" @click="openEdit('bio')">修改</button>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<span><strong>登录密码：</strong>********</span>
|
||||
<button class="btn btn-link" @click="openEdit('password')">修改</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹出框 -->
|
||||
<div v-if="editingSection" class="modal fade show d-block" tabindex="-1" style="background-color: rgba(0,0,0,0.5);">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">修改 {{ getSectionTitle(editingSection) }}</h5>
|
||||
<button type="button" class="btn-close" @click="closeEdit"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- 各字段弹出表单内容 -->
|
||||
<div v-if="editingSection === 'nickname'">
|
||||
<input type="text" class="form-control" v-model="form.nickname" placeholder="请输入昵称" />
|
||||
</div>
|
||||
<div v-else-if="editingSection === 'email'">
|
||||
<input type="email" class="form-control" v-model="form.email" placeholder="请输入邮箱" />
|
||||
</div>
|
||||
<div v-else-if="editingSection === 'phone'">
|
||||
<input type="text" class="form-control" v-model="form.phone" placeholder="请输入手机号" />
|
||||
</div>
|
||||
<div v-else-if="editingSection === 'gender'">
|
||||
<select class="form-control" v-model="form.gender">
|
||||
<option value="male">男</option>
|
||||
<option value="female">女</option>
|
||||
<option value="other">其他</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-else-if="editingSection === 'bio'">
|
||||
<textarea class="form-control" rows="3" v-model="form.bio" placeholder="简单介绍一下你自己"></textarea>
|
||||
</div>
|
||||
<div v-else-if="editingSection === 'password'">
|
||||
<input type="password" class="form-control mb-2" v-model="form.oldPassword" placeholder="当前密码" />
|
||||
<input type="password" class="form-control mb-2" v-model="form.newPassword" placeholder="新密码" />
|
||||
<input type="password" class="form-control" v-model="form.confirmPassword" placeholder="确认新密码" />
|
||||
<div class="text-danger mt-1" v-if="form.newPassword !== form.confirmPassword">两次密码不一致</div>
|
||||
</div>
|
||||
<div v-else-if="editingSection === 'avatar'">
|
||||
<input type="file" class="form-control" @change="onAvatarChange" accept="image/*" />
|
||||
<img :src="previewAvatar" class="mt-3 rounded-circle" width="80" v-if="previewAvatar" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" @click="closeEdit">取消</button>
|
||||
<button class="btn btn-primary" @click="saveEdit">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UserProfilePanel",
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
avatar: "https://via.placeholder.com/100",
|
||||
nickname: "张三",
|
||||
email: "zhangsan@example.com",
|
||||
phone: "13800000000",
|
||||
gender: "male",
|
||||
bio: "热爱开源，热爱技术"
|
||||
},
|
||||
editingSection: null,
|
||||
form: {},
|
||||
previewAvatar: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openEdit(section) {
|
||||
this.editingSection = section;
|
||||
this.form = { ...this.user }; // clone
|
||||
},
|
||||
closeEdit() {
|
||||
this.editingSection = null;
|
||||
this.previewAvatar = null;
|
||||
},
|
||||
saveEdit() {
|
||||
if (this.editingSection === 'password') {
|
||||
if (this.form.newPassword !== this.form.confirmPassword) {
|
||||
return;
|
||||
}
|
||||
// 处理密码更新逻辑
|
||||
this.$alert && this.$alert("密码已修改", "success");
|
||||
} else if (this.editingSection === 'avatar') {
|
||||
if (this.previewAvatar) {
|
||||
this.user.avatar = this.previewAvatar;
|
||||
}
|
||||
} else {
|
||||
Object.assign(this.user, this.form);
|
||||
}
|
||||
|
||||
this.closeEdit();
|
||||
},
|
||||
getGenderLabel(value) {
|
||||
return value === 'male' ? '男' : value === 'female' ? '女' : '其他';
|
||||
},
|
||||
getSectionTitle(section) {
|
||||
const map = {
|
||||
nickname: "昵称",
|
||||
email: "邮箱",
|
||||
phone: "手机号",
|
||||
gender: "性别",
|
||||
bio: "个人简介",
|
||||
password: "密码",
|
||||
avatar: "头像"
|
||||
};
|
||||
return map[section] || "信息";
|
||||
},
|
||||
onAvatarChange(e) {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
this.previewAvatar = event.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg-gradient {
|
||||
background: linear-gradient(to right, #4e73df, #1cc88a);
|
||||
}
|
||||
.modal {
|
||||
z-index: 1050;
|
||||
}
|
||||
.btn-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="main-wrapper">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">系统设置</h5>
|
||||
<p class="card-description">在此页面中配置系统的基本参数。</p>
|
||||
|
||||
<form>
|
||||
<!-- 系统名称 -->
|
||||
<div class="mb-3">
|
||||
<label for="systemName" class="form-label">系统名称</label>
|
||||
<input type="text" class="form-control" id="systemName" v-model="systemName"
|
||||
placeholder="请输入系统名称">
|
||||
</div>
|
||||
|
||||
<!-- 管理员邮箱 -->
|
||||
<div class="mb-3">
|
||||
<label for="adminEmail" class="form-label">管理员邮箱</label>
|
||||
<input type="email" v-model="systemEmail" class="form-control" id="adminEmail"
|
||||
aria-describedby="emailHelp" placeholder="admin@example.com">
|
||||
<div id="emailHelp" class="form-text">我们将在网站显示此邮箱。</div>
|
||||
</div>
|
||||
<!-- 管理员手机号 -->
|
||||
<div class="mb-3">
|
||||
<label for="adminPhone" class="form-label">管理员手机号</label>
|
||||
<input type="text" v-model="systemPhone" class="form-control" id="adminPhone"
|
||||
aria-describedby="PhoneHelp" placeholder="13800000000">
|
||||
<div id="PhoneHelp" class="form-text">我们将在网站显示此邮箱。</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统描述 -->
|
||||
<div class="mb-3">
|
||||
<label for="adminDescription" class="form-label">系统描述</label>
|
||||
<textarea class="form-control" v-model="systemDescription"
|
||||
aria-label="With textarea"></textarea>
|
||||
</div>
|
||||
<!--网站LOGO-->
|
||||
<div class="mb-3">
|
||||
<label for="formFile" class="form-label">网站LOGO</label>
|
||||
<input class="form-control" type="file" id="formFile" accept="image/*">
|
||||
</div>
|
||||
<!--网站Favorite-->
|
||||
<div class="mb-3">
|
||||
<label for="formFile" class="form-label">网站Favorite</label>
|
||||
<input class="form-control" type="file" id="formFile" accept="image/*">
|
||||
</div>
|
||||
<!-- 启用用户注册 -->
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" v-model="enableSystemRegister" class="form-check-input" id="enableRegistration">
|
||||
<label class="form-check-label" for="enableRegistration">启用用户注册功能</label>
|
||||
</div>
|
||||
<!-- 启用注册邮箱验证 -->
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" v-model="enableSystemRegisterEmailValidate" class="form-check-input" id="enableRegistrationValidate">
|
||||
<label class="form-check-label" for="enableRegistrationValidate">启用用户注册邮箱验证</label>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<button type="button" class="btn btn-primary" @click="submit">保存设置</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "SystemConfig",
|
||||
data() {
|
||||
return {
|
||||
systemConfig: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async submit() {
|
||||
for (const item of this.systemConfig) {
|
||||
const configName = item.configName
|
||||
const configBody = item.configBody
|
||||
try {
|
||||
const res = await this.$api.updateSystemConfig(configName, configBody)
|
||||
if(res.code != 1000) this.$alert(res.message,'danger')
|
||||
} catch (err) {
|
||||
this.$alert('更新配置失败','danger')
|
||||
console.error(`更新 ${configName} 失败`, err)
|
||||
}
|
||||
}
|
||||
|
||||
// 全部成功后提示
|
||||
this.$alert('系统配置已保存','success')
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
systemName: {
|
||||
get() {
|
||||
const systemName = this.systemConfig.find(x => x.configName == 'SystemName')
|
||||
return systemName ? systemName.configBody : ''
|
||||
},
|
||||
set(newValue) {
|
||||
const systemName = this.systemConfig.find(x => x.configName == 'SystemName')
|
||||
if (systemName) {
|
||||
systemName.configBody = newValue
|
||||
}
|
||||
}
|
||||
},
|
||||
systemEmail: {
|
||||
get() {
|
||||
const item = this.systemConfig.find(x => x.configName == 'Email')
|
||||
return item ? item.configBody : ''
|
||||
},
|
||||
set(newValue) {
|
||||
const item = this.systemConfig.find(x => x.configName == 'Email')
|
||||
if (item) {
|
||||
item.configBody = newValue
|
||||
}
|
||||
}
|
||||
},
|
||||
systemPhone: {
|
||||
get() {
|
||||
const item = this.systemConfig.find(x => x.configName == 'Phone')
|
||||
return item ? item.configBody : ''
|
||||
},
|
||||
set(newValue) {
|
||||
const item = this.systemConfig.find(x => x.configName == 'Phone')
|
||||
if (item) {
|
||||
item.configBody = newValue
|
||||
}
|
||||
}
|
||||
},
|
||||
systemDescription: {
|
||||
get() {
|
||||
const item = this.systemConfig.find(x => x.configName == 'SystemDescription')
|
||||
return item ? item.configBody : ''
|
||||
},
|
||||
set(newValue) {
|
||||
const item = this.systemConfig.find(x => x.configName == 'SystemDescription')
|
||||
if (item) {
|
||||
item.configBody = newValue
|
||||
}
|
||||
}
|
||||
},
|
||||
enableSystemRegister:{
|
||||
get(){
|
||||
const item = this.systemConfig.find(x => x.configName == 'RegisterConfig')
|
||||
return item ? JSON.parse(item.configBody).RegisterOn : false
|
||||
},
|
||||
set(newValue){
|
||||
const item = this.systemConfig.find(x => x.configName == 'RegisterConfig')
|
||||
if (item) {
|
||||
let jsonBody = JSON.parse(item.configBody)
|
||||
jsonBody.RegisterOn = newValue
|
||||
item.configBody = JSON.stringify(jsonBody)
|
||||
}
|
||||
}
|
||||
},
|
||||
enableSystemRegisterEmailValidate:{
|
||||
get(){
|
||||
const item = this.systemConfig.find(x => x.configName == 'RegisterConfig')
|
||||
return item ? JSON.parse(item.configBody).Emailvalidate : false
|
||||
},
|
||||
set(newValue){
|
||||
const item = this.systemConfig.find(x => x.configName == 'RegisterConfig')
|
||||
if (item) {
|
||||
let jsonBody = JSON.parse(item.configBody)
|
||||
jsonBody.Emailvalidate = newValue
|
||||
item.configBody = JSON.stringify(jsonBody)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.systemConfig = this.$store.state.config.systemconfig
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user