10 changed files with 552 additions and 179 deletions
-
2README.md
-
6index.html
-
70package-lock.json
-
1package.json
-
1src/assets/logo.svg
-
3src/assets/main.css
-
4src/main.js
-
11src/router/index.js
-
231src/views/FrontView.vue
-
392src/views/backindex.vue
@ -1 +0,0 @@ |
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg> |
|||
@ -1,3 +1,6 @@ |
|||
*{ |
|||
margin: 0; |
|||
} |
|||
body{ |
|||
margin: 0; |
|||
} |
|||
@ -1,15 +1,20 @@ |
|||
import { createRouter, createWebHistory } from 'vue-router' |
|||
import FrontView from '../views/FrontView.vue' |
|||
import Backindex from '@/views/backindex.vue' |
|||
import FrontView from '@/views/FrontView.vue' |
|||
|
|||
const router = createRouter({ |
|||
history: createWebHistory(import.meta.env.BASE_URL), |
|||
routes: [ |
|||
{ |
|||
path: '/', |
|||
name:'front', |
|||
component:FrontView |
|||
}, |
|||
{ |
|||
path: '/back', |
|||
name: 'home', |
|||
component: FrontView, |
|||
component: Backindex, |
|||
}, |
|||
|
|||
], |
|||
}) |
|||
|
|||
|
|||
@ -0,0 +1,392 @@ |
|||
<script setup> |
|||
import { ref } from "vue"; |
|||
import { ElMessage } from "element-plus"; |
|||
import { ElMessageBox } from "element-plus"; |
|||
import axios from "axios"; |
|||
import moment from "moment"; |
|||
|
|||
const titleEdit = ref(false); |
|||
const raiseEdit = ref(false); |
|||
const addInfo = ref(false); |
|||
const deleteInfo = ref(false); |
|||
|
|||
//这是查询的接口 |
|||
const info = ref({}); |
|||
const getInfo = async function () { |
|||
try { |
|||
const result = await axios.get("http://192.168.9.117:8092/page"); |
|||
info.value.title = result.data.data.title; |
|||
info.value.targetNumber = result.data.data.targetNumber; |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
getInfo(); |
|||
|
|||
//这是修改标题的接口 |
|||
const titleNew = ref({}); |
|||
const putTitle = async function () { |
|||
try { |
|||
// 创建一个FormData对象 |
|||
const formData = new FormData(); |
|||
// 将titleNew中的数据添加到FormData对象中 |
|||
for (const key in titleNew.value) { |
|||
formData.append(key, titleNew.value[key]); |
|||
} |
|||
const result = await axios.put( |
|||
"http://192.168.9.117:8092/title", |
|||
formData, |
|||
{ |
|||
headers: { |
|||
"Content-Type": "multipart/form-data", |
|||
}, |
|||
} |
|||
); |
|||
if (result.data.code == 10000) { |
|||
ElMessage.success("修改成功"); |
|||
titleEdit.value = false; |
|||
titleNew.value = {}; |
|||
getInfo(); //刷新页面 |
|||
} |
|||
if (result.data.code == 10001) { |
|||
ElMessage.error(result.data.msg); |
|||
titleNew.value = {}; |
|||
titleEdit.value = false; |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
|
|||
//这是修改众筹人数的接口 |
|||
const targetNumberNew = ref({}); |
|||
const putTargetNumber = async function () { |
|||
try { |
|||
// 创建一个FormData对象 |
|||
const formData = new FormData(); |
|||
// 将titleNew中的数据添加到FormData对象中 |
|||
for (const key in targetNumberNew.value) { |
|||
formData.append(key, targetNumberNew.value[key]); |
|||
} |
|||
const result = await axios.put( |
|||
"http://192.168.9.117:8092/target", |
|||
formData, |
|||
{ |
|||
headers: { |
|||
"Content-Type": "multipart/form-data", |
|||
}, |
|||
} |
|||
); |
|||
if (result.data.code == 10000) { |
|||
ElMessage.success("修改成功"); |
|||
raiseEdit.value = false; |
|||
targetNumberNew.value = {}; |
|||
getInfo(); //刷新页面 |
|||
} |
|||
if (result.data.code == 10001) { |
|||
ElMessage.error(result.data.msg); |
|||
targetNumberNew.value = {}; |
|||
raiseEdit.value = false; |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
|
|||
//这是查询全部数据的接口 |
|||
const search = ref({ |
|||
jwcode: "", |
|||
identity: "", |
|||
}); |
|||
const tableData = ref([]); |
|||
const get = async function () { |
|||
try { |
|||
const result = await axios.post( |
|||
"http://192.168.9.117:8092/users", |
|||
search.value |
|||
); |
|||
tableData.value = result.data.data; |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
get(); |
|||
|
|||
//这是添加的接口 |
|||
const add = ref({}); |
|||
const addUser = async function () { |
|||
try { |
|||
const result = await axios.post( |
|||
"http://192.168.9.117:8092/addUser", |
|||
add.value |
|||
); |
|||
if (result.data.code == 10000) { |
|||
ElMessage.success("修改成功"); |
|||
addInfo.value = false; |
|||
add.value = {}; |
|||
get(); //刷新页面 |
|||
} |
|||
if (result.data.code == 10001) { |
|||
ElMessage.error(result.data.msg); |
|||
addInfo.value = false; |
|||
add.value = {}; |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
|
|||
// 这是删除的接口 |
|||
const idname = ref(""); |
|||
function deleteRow(value) { |
|||
deleteInfo.value = true; |
|||
console.log(value); |
|||
idname.value = value; |
|||
} |
|||
const tureDelete = async function () { |
|||
try { |
|||
const result = await axios.delete( |
|||
"http://192.168.9.117:8092/delUser/" + idname.value |
|||
); |
|||
if (result.data.code == 10000) { |
|||
ElMessage.success("修改成功"); |
|||
deleteInfo.value = false; |
|||
idname.value = {}; |
|||
get(); //刷新页面 |
|||
} |
|||
if (result.data.code == 10001) { |
|||
ElMessage.error(result.data.msg); |
|||
deleteInfo.value = false; |
|||
idname.value = {}; |
|||
} |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
|
|||
// 这是条件查询的接口 |
|||
const searchBy = ref({ |
|||
jwcode: "", |
|||
identity: "", |
|||
}); |
|||
const searchByJwcodeAndIdentity = async function () { |
|||
try { |
|||
const result = await axios.post( |
|||
"http://192.168.9.117:8092/users", |
|||
searchBy.value |
|||
); |
|||
if (result.data.code == 10000) { |
|||
ElMessage.success("查询成功"); |
|||
} |
|||
if (result.data.code == 10001) { |
|||
ElMessage.error(result.data.msg); |
|||
} |
|||
tableData.value = result.data.data; |
|||
} catch (error) { |
|||
console.log("请求失败", error); |
|||
} |
|||
}; |
|||
function Nono() { |
|||
searchBy.value = {}; |
|||
get(); |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<el-container> |
|||
<el-main style="width: 100%"> |
|||
<el-card style="min-width: 70%; margin: 0 auto"> |
|||
<h2 style="margin-top: 0%">众筹活动界面后台</h2> |
|||
<h3>修改前台展示</h3> |
|||
<el-divider style="margin-top: 0%" /> |
|||
<div style="display: flex; align-items: center"> |
|||
<h4 style="margin: 0%">当前标题:</h4> |
|||
<span style="color: rgb(145, 145, 145); margin-left: 20px">{{ |
|||
info.title |
|||
}}</span> |
|||
<el-button |
|||
class="xiugai" |
|||
type="danger" |
|||
style=" |
|||
display: inline-block; |
|||
margin-left: 20px; |
|||
color: rgb(245, 62, 62); |
|||
margin-right: 50px; |
|||
" |
|||
@click="() => {titleEdit = true;titleNew.title = info.title}" |
|||
>修改</el-button |
|||
> |
|||
<span style="color: rgb(145, 145, 145);;">（标题最高可输入12个字符）</span> |
|||
</div> |
|||
<div style="display: flex; align-items: center"> |
|||
<h4 style="margin-bottom: 0px; margin-top: 30px">众筹目标:</h4> |
|||
<span |
|||
style=" |
|||
margin-bottom: 0px; |
|||
margin-top: 30px; |
|||
margin-left: 20px; |
|||
color: rgb(145, 145, 145); |
|||
" |
|||
>{{ info.targetNumber }}人</span |
|||
> |
|||
<el-button |
|||
class="xiugai" |
|||
type="danger" |
|||
style=" |
|||
display: inline-block; |
|||
margin-left: 20px; |
|||
margin-top: 30px; |
|||
color: rgb(245, 62, 62); |
|||
" |
|||
@click="() => {raiseEdit = true;targetNumberNew.targetNumber = info.targetNumber }" |
|||
>修改</el-button |
|||
> |
|||
</div> |
|||
</el-card> |
|||
<el-card style="min-width: 70%; margin: 0 auto; margin-top: 20px"> |
|||
<h3>众筹用户列表</h3> |
|||
<el-button type="danger" @click="addInfo = true">添加</el-button> |
|||
<el-input |
|||
v-model="searchBy.jwcode" |
|||
style="width: 150px; margin-left: 200px" |
|||
placeholder="精网号" |
|||
></el-input> |
|||
<el-select |
|||
v-model="searchBy.identity" |
|||
style="width: 100px; margin-left: 60px" |
|||
placeholder="身份" |
|||
> |
|||
<el-option label="真实" value="1"></el-option> |
|||
<el-option label="虚拟" value="0"></el-option> |
|||
</el-select> |
|||
|
|||
<el-button type="" @click="Nono()" style="margin-left: 40px" |
|||
>重置</el-button |
|||
> |
|||
<el-button type="danger" @click="searchByJwcodeAndIdentity()" |
|||
>查询</el-button |
|||
> |
|||
<el-table :data="tableData"> |
|||
<el-table-column |
|||
label="序号" |
|||
width="300px" |
|||
type="index" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="jwcode" |
|||
label="编号" |
|||
width="300px" |
|||
></el-table-column> |
|||
<el-table-column prop="identity" label="身份" width="300px"> |
|||
<!-- 模板内容 --> |
|||
<template #default="scope"> |
|||
<span v-if="scope.row.identity == 1"> |
|||
<span>真实</span> |
|||
</span> |
|||
<span v-if="scope.row.identity == 0"> |
|||
<span>虚拟</span> |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="creatTime" label="参与时间" width="700px"> |
|||
<template #default="scope"> |
|||
{{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" width="px"> |
|||
<template #default="scope"> |
|||
<el-button |
|||
@click="deleteRow(scope.row.jwcode)" |
|||
type="text" |
|||
style="color: rgb(245, 62, 62)" |
|||
>删除</el-button |
|||
> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-card> |
|||
</el-main> |
|||
</el-container> |
|||
|
|||
<!-- 这是添加的弹窗 --> |
|||
<el-dialog v-model="addInfo" width="500"> |
|||
<div> |
|||
<h3 style="display: inline-block; margin-right: 20px">精网号</h3> |
|||
<el-input |
|||
v-model="add.jwcode" |
|||
placeholder="请输入精网号" |
|||
style="width: 300px; display: inline-block" |
|||
/> |
|||
</div> |
|||
<div> |
|||
<h3 style="display: inline-block; margin-right: 20px">身份</h3> |
|||
<el-radio-group v-model="add.identity"> |
|||
<el-radio value="1" size="large">真实</el-radio> |
|||
<el-radio value="0" size="large">虚拟</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<el-button type="danger" @click="addUser()" style="margin-left: 400px" |
|||
>添加</el-button |
|||
> |
|||
</el-dialog> |
|||
|
|||
<!-- 这是修改表题的弹窗 --> |
|||
<el-dialog v-model="titleEdit" width="500"> |
|||
<div> |
|||
<h3 style="display: inline-block; margin-right: 20px">输入新标题</h3> |
|||
<el-input |
|||
v-model="titleNew.title" |
|||
placeholder="请输入新标题" |
|||
style="width: 300px; display: inline-block" |
|||
/> |
|||
</div> |
|||
<span style="color: rgb(145, 145, 145);;">（标题最高可输入12个字符）</span> |
|||
<el-button type="danger" @click="putTitle()" style="margin-left: 400px" |
|||
>确定</el-button |
|||
> |
|||
</el-dialog> |
|||
|
|||
<!-- 这是修改众筹目标的弹窗 --> |
|||
<el-dialog v-model="raiseEdit" width="500"> |
|||
<div> |
|||
<h3 style="display: inline-block; margin-right: 20px"> |
|||
输入新众筹目标为 |
|||
</h3> |
|||
<el-input |
|||
v-model="targetNumberNew.targetNumber" |
|||
placeholder="请输入阿拉伯数字" |
|||
style="width: 300px; display: inline-block" |
|||
/> |
|||
</div> |
|||
<el-button |
|||
type="danger" |
|||
@click="putTargetNumber()" |
|||
style="margin-left: 400px" |
|||
>确定</el-button |
|||
> |
|||
</el-dialog> |
|||
|
|||
<!-- 这是删除的弹窗 --> |
|||
<el-dialog v-model="deleteInfo" width="500"> |
|||
<div> |
|||
<h3 style="display: inline-block; margin-right: 20px"> |
|||
确认删除该条信息 |
|||
</h3> |
|||
</div> |
|||
<el-button type="danger" @click="tureDelete()" style="margin-left: 400px" |
|||
>确定</el-button |
|||
> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
/* 移除 el-button 的默认样式 */ |
|||
.xiugai { |
|||
border: none; |
|||
background-color: transparent; |
|||
color: #409eff; /* Element Plus 默认的主题色 */ |
|||
padding: 0; |
|||
font-size: inherit; /* 继承父元素的字体大小 */ |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue