xuhongjie
许宏杰 1 year ago
parent 9c77ad1ee0
commit fecc4ba507

@ -1,9 +1,9 @@
import auth from '@/plugins/auth'
import router, { constantRoutes, dynamicRoutes } from '@/router'
import { getRouters } from '@/api/menu'
import Layout from '@/layout/index'
import ParentView from '@/components/ParentView'
import InnerLink from '@/layout/components/InnerLink'
import auth from "@/plugins/auth";
import router, { constantRoutes, dynamicRoutes } from "@/router";
import { getRouters } from "@/api/menu";
import Layout from "@/layout/index";
import ParentView from "@/components/ParentView";
import InnerLink from "@/layout/components/InnerLink";
const permission = {
state: {
@ -11,124 +11,124 @@ const permission = {
addRoutes: [],
defaultRoutes: [],
topbarRouters: [],
sidebarRouters: []
sidebarRouters: [],
},
mutations: {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
state.addRoutes = routes;
state.routes = constantRoutes.concat(routes);
},
SET_DEFAULT_ROUTES: (state, routes) => {
state.defaultRoutes = constantRoutes.concat(routes)
state.defaultRoutes = constantRoutes.concat(routes);
},
SET_TOPBAR_ROUTES: (state, routes) => {
state.topbarRouters = routes
state.topbarRouters = routes;
},
SET_SIDEBAR_ROUTERS: (state, routes) => {
// console.log(routes)
state.sidebarRouters = routes
state.sidebarRouters = routes;
},
},
actions: {
// 生成路由
GenerateRoutes({ commit }) {
return new Promise(resolve => {
return new Promise((resolve) => {
// 向后端请求路由数据
getRouters().then(res => {
const sdata = JSON.parse(JSON.stringify(res.data))
const rdata = JSON.parse(JSON.stringify(res.data))
const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, false, true)
getRouters().then((res) => {
const sdata = JSON.parse(JSON.stringify(res.data));
const rdata = JSON.parse(JSON.stringify(res.data));
const sidebarRoutes = filterAsyncRouter(sdata);
const rewriteRoutes = filterAsyncRouter(rdata, false, true);
const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
rewriteRoutes.push({ path: "*", redirect: "/404", hidden: true });
router.addRoutes(asyncRoutes);
commit('SET_ROUTES', rewriteRoutes)
commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
commit('SET_DEFAULT_ROUTES', sidebarRoutes)
commit('SET_TOPBAR_ROUTES', sidebarRoutes)
resolve(rewriteRoutes)
})
})
}
}
}
commit("SET_ROUTES", rewriteRoutes);
commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
commit("SET_DEFAULT_ROUTES", sidebarRoutes);
commit("SET_TOPBAR_ROUTES", sidebarRoutes);
resolve(rewriteRoutes);
});
});
},
},
};
// 遍历后台传来的路由字符串,转换为组件对象
function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
return asyncRouterMap.filter(route => {
return asyncRouterMap.filter((route) => {
if (type && route.children) {
route.children = filterChildren(route.children)
route.children = filterChildren(route.children);
}
if (route.component) {
// Layout ParentView 组件特殊处理
if (route.component === 'Layout') {
route.component = Layout
} else if (route.component === 'ParentView') {
route.component = ParentView
} else if (route.component === 'InnerLink') {
route.component = InnerLink
if (route.component === "Layout") {
route.component = Layout;
} else if (route.component === "ParentView") {
route.component = ParentView;
} else if (route.component === "InnerLink") {
route.component = InnerLink;
} else {
route.component = loadView(route.component)
route.component = loadView(route.component);
}
}
if (route.children != null && route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, route, type)
route.children = filterAsyncRouter(route.children, route, type);
} else {
delete route['children']
delete route['redirect']
delete route["children"];
delete route["redirect"];
}
return true
})
return true;
});
}
function filterChildren(childrenMap, lastRouter = false) {
var children = []
var children = [];
childrenMap.forEach((el, index) => {
if (el.children && el.children.length) {
if (el.component === 'ParentView' && !lastRouter) {
el.children.forEach(c => {
c.path = el.path + '/' + c.path
if (el.component === "ParentView" && !lastRouter) {
el.children.forEach((c) => {
c.path = el.path + "/" + c.path;
if (c.children && c.children.length) {
children = children.concat(filterChildren(c.children, c))
return
children = children.concat(filterChildren(c.children, c));
return;
}
children.push(c)
})
return
children.push(c);
});
return;
}
}
if (lastRouter) {
el.path = lastRouter.path + '/' + el.path
el.path = lastRouter.path + "/" + el.path;
}
children = children.concat(el)
})
return children
children = children.concat(el);
});
return children;
}
// 动态路由遍历,验证是否具备权限
export function filterDynamicRoutes(routes) {
const res = []
routes.forEach(route => {
const res = [];
routes.forEach((route) => {
if (route.permissions) {
if (auth.hasPermiOr(route.permissions)) {
res.push(route)
res.push(route);
}
} else if (route.roles) {
if (auth.hasRoleOr(route.roles)) {
res.push(route)
res.push(route);
}
}
})
return res
});
return res;
}
export const loadView = (view) => {
if (process.env.NODE_ENV === 'development') {
return (resolve) => require([`@/views/${view}`], resolve)
if (process.env.NODE_ENV === "development") {
return (resolve) => require([`@/views/${view}`], resolve);
} else {
// 使用 import 实现生产环境的路由懒加载
return () => import(`@/views/${view}`)
return () => import(`@/views/${view}`);
}
}
};
export default permission
export default permission;

@ -9,7 +9,11 @@
<template>
<div class="plan-management">
<div class="plan-topBox">
<my-input @changeInput="changeInput" placeholder="请输入活动内容" @changeValue="changeValue"></my-input>
<my-input
@changeInput="changeInput"
placeholder="请输入活动内容"
@changeValue="changeValue"
></my-input>
</div>
<div class="plan-bottomBox">
<div class="tables">
@ -26,17 +30,14 @@
label="序号"
type="index"
header-align="center"
width="70">
</el-table-column>
<el-table-column
prop="content"
label="参与活动"
width="280"
width="70"
>
</el-table-column>
<el-table-column prop="content" label="参与活动" width="280">
<template slot-scope="scope">
<div class="activity">
<div>{{ scope.row.content.split(' ')[0] }}</div>
<div>{{ scope.row.content.split(' ')[1] }}</div>
<div>{{ scope.row.content.split(" ")[0] }}</div>
<div>{{ scope.row.content.split(" ")[1] }}</div>
</div>
</template>
</el-table-column>
@ -47,24 +48,13 @@
width="180"
>
</el-table-column>
<el-table-column
prop="duration"
label="状态"
>
</el-table-column>
<el-table-column
prop="time"
label="兑换时间"
>
</el-table-column>
<el-table-column
label="操作"
width="250"
>
<el-table-column prop="duration" label="状态"> </el-table-column>
<el-table-column prop="time" label="兑换时间"> </el-table-column>
<el-table-column label="操作" width="250">
<template slot-scope="scope">
<div class="tabs-btns">
<div class="look" @click="look(scope.row)">
<img src="@/assets/images/look.png" alt="">
<img src="@/assets/images/look.png" alt="" />
<span>查看</span>
</div>
</div>
@ -73,14 +63,17 @@
</el-table>
</div>
<div class="pagination">
<my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
<my-pagination
:total="total"
@pagesChange="pagesChange"
></my-pagination>
</div>
</div>
<my-dialog ref="conversion">
<div class="conversionInfo">
<div class="basicInfo">
<div class="title">
<img src="@/assets/images/huodong.png" alt="">
<img src="@/assets/images/huodong.png" alt="" />
<span>活动详情</span>
</div>
<div class="info">
@ -114,7 +107,7 @@
</div>
<div class="logisticsInfo">
<div class="title">
<img src="@/assets/images/huodong.png" alt="">
<img src="@/assets/images/huodong.png" alt="" />
<span>物流信息</span>
</div>
<div class="info">
@ -138,99 +131,108 @@
</div>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue"
import myInput from "@/views/components/myInput/index.vue"
import myDialog from "@/views/components/dialog/index.vue"
import myPagination from "@/views/components/myPagination/index.vue";
import myInput from "@/views/components/myInput/index.vue";
import myDialog from "@/views/components/dialog/index.vue";
export default {
components:{myPagination,myInput,myDialog},
components: { myPagination, myInput, myDialog },
data() {
return {
tableData: [
{
content:'志愿活动协助指挥交通 我参加的志愿者活动,指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
},{
content:'志愿活动协助指挥交通 我参加的志愿者活动,指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
},{
content:'志愿活动协助指挥交通 我参加的志愿者活动,指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
},{
content:'志愿活动协助指挥交通 我参加的志愿者活动,指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
},{
content:'志愿活动协助指挥交通 我参加的志愿者活动,指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
},{
content:'志愿活动协助指挥交通 我参加的志愿者活动,指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
},{
content:'志愿活动协助指挥交通 我参加的志愿者活动,指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
},{
content:'志愿活动协助指挥交通 我参加的志愿者活动,指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
},{
content:'志愿活动协助指挥交通 我参加的志愿者活动,指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
},{
content:'志愿活动协助指挥交通 我参加的志愿者活动,指挥交通',
person:'吴加好',
duration:'10',
time:'2023-08-14'
content: "志愿活动协助指挥交通 我参加的志愿者活动,指挥交通",
person: "吴加好",
duration: "10",
time: "2023-08-14",
},
{
content: "志愿活动协助指挥交通 我参加的志愿者活动,指挥交通",
person: "吴加好",
duration: "10",
time: "2023-08-14",
},
{
content: "志愿活动协助指挥交通 我参加的志愿者活动,指挥交通",
person: "吴加好",
duration: "10",
time: "2023-08-14",
},
{
content: "志愿活动协助指挥交通 我参加的志愿者活动,指挥交通",
person: "吴加好",
duration: "10",
time: "2023-08-14",
},
{
content: "志愿活动协助指挥交通 我参加的志愿者活动,指挥交通",
person: "吴加好",
duration: "10",
time: "2023-08-14",
},
{
content: "志愿活动协助指挥交通 我参加的志愿者活动,指挥交通",
person: "吴加好",
duration: "10",
time: "2023-08-14",
},
{
content: "志愿活动协助指挥交通 我参加的志愿者活动,指挥交通",
person: "吴加好",
duration: "10",
time: "2023-08-14",
},
{
content: "志愿活动协助指挥交通 我参加的志愿者活动,指挥交通",
person: "吴加好",
duration: "10",
time: "2023-08-14",
},
{
content: "志愿活动协助指挥交通 我参加的志愿者活动,指挥交通",
person: "吴加好",
duration: "10",
time: "2023-08-14",
},
{
content: "志愿活动协助指挥交通 我参加的志愿者活动,指挥交通",
person: "吴加好",
duration: "10",
time: "2023-08-14",
},
],
input: {
name:''
name: "",
},
pages:{
pageSize:10,
pageNum:1
pages: {
pageSize: 10,
pageNum: 1,
},
total:0,
loading:false,
isClick:false,
}
total: 0,
loading: false,
isClick: false,
};
},
methods:{
methods: {
//
pagesChange(pages){
pagesChange(pages) {
// console.log(pages)
this.getList(pages)
this.getList(pages);
},
//
changeInput(value){
changeInput(value) {
this.input.name = value;
this.isClick = true;
this.pages= {
this.pages = {
pageNum: 1,
pageSize: 10,
};
this.getList();
},
//
changeValue(value){
if(this.isClick && value == ''){
this.input.name = '';
this.pages= {
changeValue(value) {
if (this.isClick && value == "") {
this.input.name = "";
this.pages = {
pageNum: 1,
pageSize: 10,
};
@ -250,25 +252,21 @@ export default {
if (columnIndex === 0) {
return `text-align:center`;
} else {
return '';
return "";
}
},
getList(){
},
getList() {},
//
look(item){
this.$refs.conversion.open()
look(item) {
this.$refs.conversion.open();
},
//
close(){
this.$refs.conversion.Close()
}
},
async created() {
close() {
this.$refs.conversion.Close();
},
},
}
async created() {},
};
</script>
<style lang="scss" scoped>
.plan-management {
@ -277,7 +275,7 @@ export default {
height: 100%;
width: 100%;
border-radius: 10px 10px 0 0;
box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
.plan-topBox {
padding: 30px 0 0 0;
}
@ -294,14 +292,14 @@ export default {
line-height: 20px;
&:nth-child(1) {
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #4D4949;
color: #4d4949;
}
&:nth-child(2) {
width: 180px;
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #999191;
white-space: nowrap;
@ -315,18 +313,18 @@ export default {
box-sizing: border-box;
// text-align: center;
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #525966;
padding: 2px 0;
}
th {
height: 45px;
background-color: #F7F5F5;
background-color: #f7f5f5;
font-size: 15px;
font-family: 'Alibaba PuHuiTi';
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #4D4949;
color: #4d4949;
.el-checkbox {
display: none;
}
@ -339,7 +337,7 @@ export default {
display: flex;
align-items: center;
// justify-content: center;
.look{
.look {
display: flex;
// align-items: center;
margin-right: 30px;
@ -352,7 +350,7 @@ export default {
font-size: 15px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #045FFD;
color: #045ffd;
}
}
}
@ -363,7 +361,8 @@ export default {
}
}
::v-deep .conversionInfo {
.basicInfo,.logisticsInfo {
.basicInfo,
.logisticsInfo {
.title {
display: flex;
align-items: center;
@ -373,9 +372,9 @@ export default {
}
span {
font-size: 16px;
font-family: 'Alibaba PuHuiTi';
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #4C4949;
color: #4c4949;
}
}
.info {
@ -387,22 +386,23 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
.list-left,.list-right {
.list-left,
.list-right {
flex: 1;
display: flex;
align-items: center;
div {
&:nth-child(1) {
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #4C4949;
color: #4c4949;
}
&:nth-child(2) {
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #807A7A;
color: #807a7a;
}
}
}
@ -419,15 +419,15 @@ export default {
div {
width: 80px;
height: 36px;
border: 1px solid #F8414D;
border: 1px solid #f8414d;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: 'Alibaba PuHuiTi';
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #F8414D;
color: #f8414d;
cursor: pointer;
}
}

@ -34,35 +34,20 @@
prop="id"
width="55"
/>
<el-table-column label="参与活动" align="center" prop="activityId" />
<el-table-column label="证书id" align="center" prop="certificateId" />
<el-table-column label="证书" align="center" prop="certificateId" />
<el-table-column label="用户" align="center" prop="uid" />
<el-table-column label="状态" align="center" prop="type">
<template slot-scope="scope">
{{ scope.row.type == 1 ? "已发放" : "未发放" }}
</template>
</el-table-column>
<!-- <el-table-column
label="发证时间"
align="center"
prop="datetime"
width="180"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.datetime, "{y}-{m}-{d}") }}</span>
</template>
</el-table-column> -->
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleFabu(scope.row)"
v-hasPermi="['system:certificates:edit']"
<el-button size="mini" type="text" @click="handleFabu(scope.row)"
>发布</el-button
>
</template>
@ -85,11 +70,7 @@
<div class="info-box">
<div>
<div class="info-item">
<div class="item-lable">参与活动:</div>
<div class="item-value">{{ form.activityId }}</div>
</div>
<div class="info-item">
<div class="item-lable">证书id:</div>
<div class="item-lable">证书:</div>
<div class="item-value">{{ form.certificateId }}</div>
</div>
<div class="info-item">

@ -0,0 +1,233 @@
<template>
<div class="app-container" ref="main">
<div ref="search">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
class="search-container"
>
<el-form-item prop="name">
<el-input
v-model="queryParams.input"
placeholder="请输入关键字"
clearable
>
<div class="search-btn" slot="append">
<i class="el-icon-search"></i>
</div>
</el-input>
</el-form-item>
</el-form>
</div>
<el-table
v-loading="loading"
:data="tableData"
:height="tableHeigth + 'px'"
>
<el-table-column
label="序号"
align="center"
type="index"
prop="id"
width="55"
/>
<el-table-column label="证书名称" align="center" prop="certificateId" />
<el-table-column label="兑换人员" align="center" prop="type" />
<el-table-column label="状态" align="center" prop="duration" />
<el-table-column label="兑换时间" align="center" prop="time" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
icon="el-icon-view"
type="text"
@click="handleInfo(scope.row)"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 发布对话框 -->
<el-dialog :visible.sync="open" width="900px" append-to-body>
<div slot="title" class="dialog-title">
<span class="title-line"></span>
{{ title }}
</div>
<div class="conversionInfo">
<div class="basicInfo">
<div class="title">
<img src="@/assets/images/huodong.png" alt="" />
<span>证书详情</span>
</div>
<div class="info">
<div class="lists">
<div class="list-left">
<div>证书名称</div>
<div>xxx证书</div>
</div>
<div class="list-right">
<div>兑换人员</div>
<div>xxxx</div>
</div>
</div>
<div class="lists">
<div class="list-left">
<div>兑换时间</div>
<div>xxxx</div>
</div>
<div class="list-left">
<div>兑换积分</div>
<div>xx</div>
</div>
</div>
<div class="lists">
<div class="list-left">
<div>证书状态</div>
<div>已发放</div>
</div>
</div>
</div>
</div>
<div class="logisticsInfo">
<div class="title">
<img src="@/assets/images/huodong.png" alt="" />
<span>物流信息</span>
</div>
<div class="info">
<div class="lists">
<div class="list-left">
<div>寄件人</div>
<div>XXXXXXXXX</div>
</div>
<div class="list-right">
<div>寄件地址</div>
<div>XXXXXXXXXXX</div>
</div>
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getSellectall,
postElectron,
getInfo,
editData,
} from "@/api/volunteer/gxhzs/hdzsff/index.js";
export default {
data() {
return {
infoOpen: false,
form: {},
open: false,
title: "",
tableHeigth: 0,
queryParams: {},
loading: false,
tableData: [{}],
total: 1,
queryParams: {
creType: 2,
pageNum: 1,
pageSize: 20,
},
};
},
created() {
// //
this.$nextTick(() => {
this.tableHeigth =
this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 80;
this.getList();
});
},
methods: {
handleInfo() {
this.title = "查看";
this.open = true;
},
cancel() {
this.open = false;
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/myTable.scss";
::v-deep .conversionInfo {
.basicInfo,
.logisticsInfo {
.title {
display: flex;
align-items: center;
img {
width: 14px;
margin-right: 10px;
}
span {
font-size: 16px;
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #4c4949;
}
}
.info {
margin-top: 20px;
display: grid;
grid-column: 1fr;
grid-row-gap: 20px;
.lists {
display: flex;
align-items: center;
justify-content: space-between;
.list-left,
.list-right {
flex: 1;
display: flex;
align-items: center;
div {
&:nth-child(1) {
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #4c4949;
}
&:nth-child(2) {
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #807a7a;
}
}
}
}
}
}
.logisticsInfo {
margin-top: 30px;
}
}
</style>

@ -0,0 +1,233 @@
<template>
<div class="app-container" ref="main">
<div ref="search">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
class="search-container"
>
<el-form-item prop="name">
<el-input
v-model="queryParams.input"
placeholder="请输入关键字"
clearable
>
<div class="search-btn" slot="append">
<i class="el-icon-search"></i>
</div>
</el-input>
</el-form-item>
</el-form>
</div>
<el-table
v-loading="loading"
:data="tableData"
:height="tableHeigth + 'px'"
>
<el-table-column
label="序号"
align="center"
type="index"
prop="id"
width="55"
/>
<el-table-column label="证书名称" align="center" prop="certificateId" />
<el-table-column label="兑换人员" align="center" prop="type" />
<el-table-column label="状态" align="center" prop="duration" />
<el-table-column label="兑换时间" align="center" prop="time" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
icon="el-icon-view"
type="text"
@click="handleInfo(scope.row)"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 发布对话框 -->
<el-dialog :visible.sync="open" width="900px" append-to-body>
<div slot="title" class="dialog-title">
<span class="title-line"></span>
{{ title }}
</div>
<div class="conversionInfo">
<div class="basicInfo">
<div class="title">
<img src="@/assets/images/huodong.png" alt="" />
<span>证书详情</span>
</div>
<div class="info">
<div class="lists">
<div class="list-left">
<div>证书名称</div>
<div>xxx证书</div>
</div>
<div class="list-right">
<div>兑换人员</div>
<div>xxxx</div>
</div>
</div>
<div class="lists">
<div class="list-left">
<div>兑换时间</div>
<div>xxxx</div>
</div>
<div class="list-left">
<div>兑换积分</div>
<div>xx</div>
</div>
</div>
<div class="lists">
<div class="list-left">
<div>证书状态</div>
<div>已发放</div>
</div>
</div>
</div>
</div>
<div class="logisticsInfo">
<div class="title">
<img src="@/assets/images/huodong.png" alt="" />
<span>物流信息</span>
</div>
<div class="info">
<div class="lists">
<div class="list-left">
<div>寄件人</div>
<div>XXXXXXXXX</div>
</div>
<div class="list-right">
<div>寄件地址</div>
<div>XXXXXXXXXXX</div>
</div>
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getSellectall,
postElectron,
getInfo,
editData,
} from "@/api/volunteer/gxhzs/hdzsff/index.js";
export default {
data() {
return {
infoOpen: false,
form: {},
open: false,
title: "",
tableHeigth: 0,
queryParams: {},
loading: false,
tableData: [{}],
total: 1,
queryParams: {
creType: 2,
pageNum: 1,
pageSize: 20,
},
};
},
created() {
// //
this.$nextTick(() => {
this.tableHeigth =
this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 80;
this.getList();
});
},
methods: {
handleInfo() {
this.title = "查看";
this.open = true;
},
cancel() {
this.open = false;
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/myTable.scss";
::v-deep .conversionInfo {
.basicInfo,
.logisticsInfo {
.title {
display: flex;
align-items: center;
img {
width: 14px;
margin-right: 10px;
}
span {
font-size: 16px;
font-family: "Alibaba PuHuiTi";
font-weight: bold;
color: #4c4949;
}
}
.info {
margin-top: 20px;
display: grid;
grid-column: 1fr;
grid-row-gap: 20px;
.lists {
display: flex;
align-items: center;
justify-content: space-between;
.list-left,
.list-right {
flex: 1;
display: flex;
align-items: center;
div {
&:nth-child(1) {
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #4c4949;
}
&:nth-child(2) {
font-size: 14px;
font-family: "Alibaba PuHuiTi";
font-weight: 400;
color: #807a7a;
}
}
}
}
}
}
.logisticsInfo {
margin-top: 30px;
}
}
</style>

@ -0,0 +1,136 @@
<template>
<div class="app-container" ref="main">
<div class="search" ref="search">
<MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
</div>
<ul class="book-main" :style="listStyle">
<li
v-for="(item, index) in certificatesList"
:key="item.id"
:style="{ marginBottom: isLastRow(index) ? '0px' : '' }"
>
<div class="integral-num">积分50</div>
<el-image
style="width: 100%; height: 87%"
:src="baseUrl + item.cover"
fit="fill"
:preview-src-list="[`${baseUrl + item.cover}`]"
>
</el-image>
<div class="operate">
<div class="integral">
{{ item.name }}
</div>
<div class="operate-child">
<div class="exchange-btn" @click="conversion(item)"> </div>
</div>
</div>
</li>
</ul>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listCertificates } from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
export default {
data() {
return {
listStyle: {
height: 0,
overflowY: "auto",
},
baseUrl: process.env.VUE_APP_BASE_API,
certificatesList: [],
loading: false,
tableData: [],
total: 0,
queryParams: {
name: undefined,
pageNum: 1,
pageSize: 10,
},
form: {},
rules: {},
};
},
created() {
// //
this.$nextTick(() => {
this.listStyle.height =
this.$refs.main.offsetHeight -
40 -
this.$refs.search.offsetHeight -
42 +
"px";
this.getList();
});
},
methods: {
isLastRow(index) {
const rowCount = Math.ceil(this.certificatesList.length / 5);
const row = Math.floor(index / 5);
return row === rowCount - 1;
},
/**兑换 */
conversion(item) {
console.log(item);
},
/**搜索 */
handleSearch(keyWord) {
this.queryParams = {
name: keyWord,
pageNum: 1,
pageSize: 10,
};
this.getList();
},
/** 查询证书管理列表 */
getList() {
this.loading = true;
listCertificates(this.queryParams).then((response) => {
this.certificatesList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//
reset() {
this.form = {
id: null,
name: null,
type: null,
cover: null,
content: null,
datetime: null,
serviceDuration: null,
createId: null,
createBy: null,
createTime: null,
updateId: null,
updateBy: null,
updateTime: null,
remark: null,
userId: null,
deptId: null,
};
this.resetForm("form");
},
//
cancel() {
this.open = false;
this.reset();
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/myTable.scss";
</style>
Loading…
Cancel
Save