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.
418 lines
10 KiB
418 lines
10 KiB
<template>
|
|
<div>
|
|
<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.name }}</div>
|
|
<div>{{ scope.row.content }}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="publisher"
|
|
label="发布方"
|
|
show-overflow-tooltip
|
|
width="180"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column prop="duration" label="服务时长"> </el-table-column>
|
|
<el-table-column prop="address" label="参加地址"> </el-table-column>
|
|
<el-table-column prop="activityTime" label="参加时间">
|
|
<template slot-scope="scope">
|
|
<div>{{ scope.row.activityTime.split(" ")[0] }}</div>
|
|
</template>
|
|
</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
|
|
class="look"
|
|
@click="participation(scope.row)"
|
|
v-if="scope.row.involveStaus == 2"
|
|
>
|
|
<!-- <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>
|
|
<!-- <my-dialog ref="participation" title="参与">
|
|
<el-form ref="ruleForm" :model="form" label-width="100px" :rules="rules">
|
|
<el-form-item label="参与信息：" prop="info">
|
|
<el-input type="textarea" v-model="form.info" resize="none"></el-input>
|
|
</el-form-item>
|
|
<div class="form-btns">
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">参与</el-button>
|
|
<el-button @click="close">取消</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
</my-dialog> -->
|
|
<my-dialog ref="chakan" title="查看活动详情" width="45%">
|
|
<div class="mainsEvents" v-loading="loadingTwo">
|
|
<div class="itemE">
|
|
<div>活动名称:</div>
|
|
<div>{{ dialogContent.name }}</div>
|
|
</div>
|
|
<div class="itemE">
|
|
<div>活动时间:</div>
|
|
<div>{{ dialogContent.activityTime.split(" ")[0] }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mainsEvents">
|
|
<div class="itemE">
|
|
<div>活动内容:</div>
|
|
<div>{{ dialogContent.content }}</div>
|
|
</div>
|
|
<div class="itemE">
|
|
<div>活动地址:</div>
|
|
<div>{{ dialogContent.address }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="mainsEvents">
|
|
<div class="itemE">
|
|
<div>活动举办方:</div>
|
|
<div>{{ dialogContent.publisher }}</div>
|
|
</div>
|
|
<div class="itemE">
|
|
<div>活动标签:</div>
|
|
<div class="mainTag">
|
|
<div
|
|
v-show="item != ''"
|
|
v-for="(item, index) in dialogContent.label"
|
|
:key="index"
|
|
>
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</my-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import myPagination from "@/views/components/myPagination/index.vue";
|
|
import myDialog from "@/views/components/dialog/index.vue";
|
|
import { mapState } from "vuex";
|
|
import { Loading } from "element-ui";
|
|
export default {
|
|
components: { myPagination, myDialog },
|
|
data() {
|
|
return {
|
|
tableData: [],
|
|
pages: {
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
},
|
|
total: 0,
|
|
loading: false,
|
|
input: {
|
|
name: "",
|
|
},
|
|
loadingTwo: false,
|
|
dialogContent: {
|
|
name: "",
|
|
content: "",
|
|
publisher: "",
|
|
activityTime: "",
|
|
address: "",
|
|
label: [],
|
|
},
|
|
arr: [
|
|
"ageRange",
|
|
"sexRange",
|
|
"politicalRange",
|
|
"educationRange",
|
|
"housingRange",
|
|
"industryRange",
|
|
"interestRange",
|
|
"professionalRange",
|
|
"schoolRange",
|
|
"nationalityRange",
|
|
],
|
|
};
|
|
},
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
watch: {
|
|
value: {
|
|
handler(newInput, oldInput) {
|
|
// 搜索值
|
|
this.input.name = newInput;
|
|
this.pages = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
};
|
|
this.getList();
|
|
},
|
|
immediate: true,
|
|
},
|
|
},
|
|
methods: {
|
|
// 获取活动推荐列表
|
|
async getList(params) {
|
|
this.loading = true;
|
|
if (params == "1") {
|
|
this.pages = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
};
|
|
this.input.name = "";
|
|
}
|
|
let obj = { ...this.pages, ...this.input };
|
|
let data = await this.$api.huodongtuijian.list(obj);
|
|
if (data.code == 200) {
|
|
this.loading = false;
|
|
this.tableData = data.rows;
|
|
this.total = data.total;
|
|
}
|
|
},
|
|
// 页码，当前页切换事件
|
|
pagesChange(pages) {
|
|
// console.log(pages)
|
|
this.getList(pages);
|
|
},
|
|
// 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 "";
|
|
}
|
|
},
|
|
// 查看详情
|
|
//标签生成
|
|
labelgenerate(data = {}) {
|
|
let arrlist = [];
|
|
for (let key3 of this.arr) {
|
|
for (let key4 in data) {
|
|
if (key3 == key4) {
|
|
let a = data[key3];
|
|
arrlist.push(a);
|
|
}
|
|
}
|
|
}
|
|
return arrlist;
|
|
},
|
|
async look(row) {
|
|
this.loadingTwo = true;
|
|
let data = await this.$api.huodongtuijian.activity(row.id);
|
|
if (data.code == 200) {
|
|
this.loadingTwo = false;
|
|
let arr = this.labelgenerate(data.data);
|
|
this.dialogContent = {
|
|
name: data.data.name,
|
|
content: data.data.content,
|
|
publisher: data.data.publisher,
|
|
activityTime: data.data.activityTime,
|
|
address: data.data.address,
|
|
label: arr,
|
|
};
|
|
console.log(this.dialogContent);
|
|
this.$refs.chakan.open();
|
|
}
|
|
},
|
|
// 参与按钮
|
|
participation(row) {
|
|
// this.$refs.participation.open();
|
|
this.$confirm("是否确定报名活动？", "确认信息", {
|
|
distinguishCancelAndClose: true,
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
})
|
|
.then(() => {
|
|
this.action(row);
|
|
})
|
|
.catch((action) => {
|
|
console.log(action);
|
|
});
|
|
},
|
|
// 确定参与活动按钮
|
|
async action(row) {
|
|
let downloadLoadingInstance = Loading.service({
|
|
text: "正在申请报名活动，请稍后",
|
|
spinner: "el-icon-loading",
|
|
background: "rgba(0, 0, 0, 0.7)",
|
|
});
|
|
let obj = {
|
|
activityId: row.id,
|
|
};
|
|
let data = await this.$api.huodongtuijian.zyzreport(obj);
|
|
// alert('submit!');
|
|
if (data.code == 200) {
|
|
downloadLoadingInstance.close();
|
|
this.$message({
|
|
message: "申请报名成功",
|
|
type: "success",
|
|
});
|
|
this.getList();
|
|
}
|
|
},
|
|
// 关闭
|
|
close() {
|
|
this.$refs.participation.Close();
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getList();
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.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 .el-textarea__inner {
|
|
height: 80px !important;
|
|
}
|
|
::v-deep .mainsEvents {
|
|
// height: 35px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
margin-bottom: 12px;
|
|
.itemE {
|
|
width: 50%;
|
|
display: flex;
|
|
& > div:nth-of-type(1) {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #4c4949;
|
|
width: 26%;
|
|
}
|
|
& > div:nth-last-of-type(2) {
|
|
color: #807a7a;
|
|
}
|
|
.mainTag {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex: 1;
|
|
font-family: "Alibaba-PuHuiTi-Regular";
|
|
& > div {
|
|
margin-right: 5px;
|
|
margin-top: 5px;
|
|
background-color: rgba(248, 65, 77, 0.06);
|
|
padding: 3px 5px;
|
|
color: #e16a70;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.form-btns {
|
|
text-align: right;
|
|
}
|
|
</style>
|