volunteer-pc/src/views/volunteer/components/recommend.vue

<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>