You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
436 lines
11 KiB
436 lines
11 KiB
<!--
|
|
* @Descripttion:
|
|
* @version:
|
|
* @Author: JC9527
|
|
* @Date: 2023-09-18 10:08:30
|
|
* @LastEditors: JC9527
|
|
* @LastEditTime: 2023-09-22 14:18:25
|
|
-->
|
|
<template>
|
|
<div class="plan-management">
|
|
<div class="plan-topBox">
|
|
<my-input
|
|
@changeInput="changeInput"
|
|
placeholder="请输入活动内容"
|
|
@changeValue="changeValue"
|
|
></my-input>
|
|
</div>
|
|
<div class="plan-bottomBox">
|
|
<div class="tables">
|
|
<el-table
|
|
:data="tableData"
|
|
:border="false"
|
|
:height="505"
|
|
v-loading="loading"
|
|
tooltip-effect="light"
|
|
:row-class-name="tableRowClassName"
|
|
:cell-style="cellStyle"
|
|
>
|
|
<el-table-column
|
|
label="序号"
|
|
type="index"
|
|
header-align="center"
|
|
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>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="person"
|
|
label="参与人员"
|
|
show-overflow-tooltip
|
|
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">
|
|
<template slot-scope="scope">
|
|
<div class="tabs-btns">
|
|
<div class="look" @click="look(scope.row)">
|
|
<img src="@/assets/images/look.png" alt="" />
|
|
<span>查看</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="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="" />
|
|
<span>活动详情</span>
|
|
</div>
|
|
<div class="info">
|
|
<div class="lists">
|
|
<div class="list-left">
|
|
<div>活动名称：</div>
|
|
<div>交通指挥</div>
|
|
</div>
|
|
<div class="list-right">
|
|
<div>活动参与日期：</div>
|
|
<div>2023年7月9日</div>
|
|
</div>
|
|
</div>
|
|
<div class="lists">
|
|
<div class="list-left">
|
|
<div>活动地址：</div>
|
|
<div>苏州</div>
|
|
</div>
|
|
<div class="list-right">
|
|
<div>服务时长：</div>
|
|
<div>10h</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 class="btns">
|
|
<div class="btn" @click="close">关闭</div>
|
|
</div>
|
|
</div>
|
|
</my-dialog>
|
|
</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";
|
|
export default {
|
|
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",
|
|
},
|
|
],
|
|
input: {
|
|
name: "",
|
|
},
|
|
pages: {
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
},
|
|
total: 0,
|
|
loading: false,
|
|
isClick: false,
|
|
};
|
|
},
|
|
methods: {
|
|
// 页码，当前页切换事件
|
|
pagesChange(pages) {
|
|
// console.log(pages)
|
|
this.getList(pages);
|
|
},
|
|
// 输入框的值
|
|
changeInput(value) {
|
|
this.input.name = value;
|
|
this.isClick = true;
|
|
this.pages = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
};
|
|
this.getList();
|
|
},
|
|
// 监听输入框是否清空
|
|
changeValue(value) {
|
|
if (this.isClick && value == "") {
|
|
this.input.name = "";
|
|
this.pages = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
};
|
|
this.getList();
|
|
this.isClick = false;
|
|
}
|
|
},
|
|
// tabs不同行给不同class
|
|
tableRowClassName({ row, rowIndex }) {
|
|
if (rowIndex % 2 !== 0) {
|
|
return "success-row";
|
|
}
|
|
return "";
|
|
},
|
|
// 单元格的 style 的回调方法
|
|
cellStyle({ row, column, rowIndex, columnIndex }) {
|
|
if (columnIndex === 0) {
|
|
return `text-align:center`;
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
getList() {},
|
|
// 查看详情
|
|
look(item) {
|
|
this.$refs.conversion.open();
|
|
},
|
|
// 关闭
|
|
close() {
|
|
this.$refs.conversion.Close();
|
|
},
|
|
},
|
|
async created() {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.plan-management {
|
|
padding: 0 20px 10px 20px;
|
|
background-color: #fff;
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 10px 10px 0 0;
|
|
box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
|
|
.plan-topBox {
|
|
padding: 30px 0 0 0;
|
|
}
|
|
.plan-bottomBox {
|
|
margin-top: 20px;
|
|
.tables {
|
|
::v-deep .el-table {
|
|
.success-row {
|
|
background-color: rgba(250, 247, 247, 0.5);
|
|
}
|
|
.activity {
|
|
div {
|
|
text-align: left;
|
|
line-height: 20px;
|
|
&:nth-child(1) {
|
|
font-size: 14px;
|
|
font-family: "Alibaba PuHuiTi";
|
|
font-weight: 400;
|
|
color: #4d4949;
|
|
}
|
|
&:nth-child(2) {
|
|
width: 180px;
|
|
font-size: 14px;
|
|
font-family: "Alibaba PuHuiTi";
|
|
font-weight: 400;
|
|
color: #999191;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
td {
|
|
height: 42px;
|
|
box-sizing: border-box;
|
|
// text-align: center;
|
|
font-size: 14px;
|
|
font-family: "Alibaba PuHuiTi";
|
|
font-weight: 400;
|
|
color: #525966;
|
|
padding: 2px 0;
|
|
}
|
|
th {
|
|
height: 45px;
|
|
background-color: #f7f5f5;
|
|
font-size: 15px;
|
|
font-family: "Alibaba PuHuiTi";
|
|
font-weight: bold;
|
|
color: #4d4949;
|
|
.el-checkbox {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-table::before {
|
|
height: 0;
|
|
}
|
|
.tabs-btns {
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
.look {
|
|
display: flex;
|
|
// align-items: center;
|
|
margin-right: 30px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
span {
|
|
font-size: 15px;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #045ffd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pagination {
|
|
// margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
::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;
|
|
}
|
|
.btns {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
div {
|
|
width: 80px;
|
|
height: 36px;
|
|
border: 1px solid #f8414d;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-family: "Alibaba PuHuiTi";
|
|
font-weight: 400;
|
|
color: #f8414d;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
</style>
|