pointsMall/src/views/HomeView/EarnPoints.vue

<template>
  <div class="right-wrap">
    <div class="myTabs" style="background: #fff;min-height: 500px;">
      <el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="证书列表" name="first">
          <el-button size="small" type="primary" @click="dialogVisible = true">上传证书</el-button>
          <el-table size="small" :data="dataList" border style="margin-top: 20px;width: 100%">
            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
            <el-table-column min-width="100" align="center" prop="typeName" label="类型"></el-table-column>
            <el-table-column align="center" prop="categoryName" min-width="100" label="名称"></el-table-column>
            <el-table-column align="center" label="证书">
              <template slot-scope="props">
                <div v-for="(item, index) in props.row.files" :key="index">
                  <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
                </div>

              </template>
            </el-table-column>
            <el-table-column align="center" prop="integral" min-width="100" label="积分"></el-table-column>
            <el-table-column min-width="60" align="center" prop="statusName" label="状态"></el-table-column>
            <el-table-column min-width="150" align="center" prop="createTime" label="上传时间"></el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="myPage">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="积分获取规则" name="second">
          <el-empty v-if="!integralRules" :image-size="200"></el-empty>
          <div v-else v-html="integralRules"></div>
        </el-tab-pane>

      </el-tabs>
    </div>
    <el-dialog title="上传证书" :visible.sync="dialogVisible" width="40%">
      <el-form :rules="rules" ref="dataForm" :model="dataForm" label-width="80px">
        <el-form-item label="类别:" prop="type">
          <el-cascader clearable size="small" style="width: 95%;" v-model="dataForm.type" :options="typeList"
          :props="{ value: 'id',label: 'typeName',children: 'children'}"
            @change="handleChange"></el-cascader>
        </el-form-item>

        <el-form-item label="证书:" prop="fileIds">
          <el-upload :action="fileUrl" :file-list="dataForm.files" :on-success="handleAvatarSuccess"
            :before-upload="beforeUploadFile" :before-remove="beforeRemove" :on-remove="handleRemove">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script scoped>
import { certificatePage, certificateUpload, notice, certificatType } from "@/api/allApi";
import { handleTree } from '@/utils/index'
export default {
  data() {
    return {
      integralRules: '',
      typeList: [],
      activeName: 'first',
      fileUrl: this.baseUrl,
      dataList: [],
      dialogVisible: false,
      rules: {
        type: [{ required: true, message: "请选择证书类别", trigger: "blur" }],
        fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
      },
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
      },
      dataForm: {
        type: [],
        fileIds: '',
      }
    };
  },
  created() {
    this.getTypeList();
    this.getDataList();
    this.getIntegralNotice();
  },
  methods: {
    getTypeList(){
      certificatType().then(response => {
          this.typeList = handleTree(response.data.data);
          console.log(this.typeList);
        })
      },
    handleClick(tab, event) {
      console.log(tab.name, event);
    },
    getIntegralNotice() {
      notice({ noticeType: 'certificatNotice' }).then(response => {
        this.integralRules = response.data.data.content;
      })
    },
    handleChange(value) {
      console.log(value);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.dataForm.fileIds = fileIds.join(",");
    },
    beforeUploadFile(file) {
      console.log(file);
      const size = file.size / 1024 / 1024;
      console.log(size);
      //   if(size > 10 ){
      //     this.$message.error("文件大小不能超过10MB！");
      //       return false;
      //   }
    },
    handleAvatarSuccess(res, file, fileList) {
      console.log(file, fileList);
      console.log("------", "==========");
      console.log("res = ", res);

      let fileIds = [];
      for (let i in fileList) {
        let response = fileList[i].response;
        if (response.errno && response.errno != "0") {
          this.$message.error("该文件上传失败,已被移除,请重新上传!");
          // 上传失败移除该 file 对象
          fileList.splice(i, 1);
        } else {
          let id = fileList[i].response.data.id;
          fileIds.push(id);
        }
      }
      this.dataForm.fileIds = fileIds.join(",");
    },
    resetForm() {
      this.$refs['dataForm'].resetFields();
    },
    submitForm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          certificateUpload(this.dataForm)
            .then((response) => {
              this.dialogVisible = false;
              this.$notify({
                title: "成功",
                message: "证书上传成功",
                type: "success",
                duration: 2000,
              });
              this.getDataList();
            })
            .catch(() => { });
        } else {
          return false;
        }
      });
    },
    getDataList() {
      certificatePage(this.listQuery).then(response => {
        this.dataList = response.data.data.items;
        this.total = response.data.data.total;
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getDataList()
    },

  },
};
</script>
<style scoped>
.right-wrap {
  width: 100%;
}

.myPage {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gainList_container {
  min-height: 560px;
}

.gainList_container .gains_wrapper {
  position: relative;
  box-sizing: border-box;
  padding-top: 20px;
  padding-left: 20px;
}

.gainList_container .gains_wrapper .list {
  display: flex;
  flex-wrap: wrap;
  margin: -20px 0 0 -20px;
}

.item.isVirtual {
  background: #f7f8fa;
  border: 1px solid #e5e6eb;
}

.item {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  width: calc(50% - 30px);
  min-width: 410px;
  height: 116px;
  padding-right: 6px;
  background: #fff;
  border: 1px solid #e5e6eb;
  box-sizing: border-box;
  border-radius: 4px;
  margin-right: 20px;
  margin-top: 20px;
}

.item .img-wapper {
  width: 114px;
  height: 114px;
  margin-right: 16px;
  background: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item .img-wapper .item-icon {
  max-width: 72px;
  max-height: 72px;
}

.item .main {
  flex: auto;
}

.item .date,
.item .goods_name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.item .goods_name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 16px;
  line-height: 24px;
  color: #252933;
  padding-bottom: 4px;
}

.item p {
  margin: 0;
}

.item .date {
  white-space: nowrap;
  font-size: 14px;
  line-height: 22px;
  color: #8a919f;
}

.item .buttons {
  margin-top: 8px;
  margin-left: -8px;
  display: flex;
  align-items: center;
}

.item .button-item.actived {
  background: #f2f3f5;
  color: #8a919f;
}

.item .button-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 13px;
  padding: 0 8px;
  height: 26px;
  margin-left: 8px;
  font-weight: 500;
  background: #f2f3f5;
  border-radius: 50px;
  color: #8a919f;
  white-space: nowrap;
  border: none;
}

.item .arrow {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  transform: rotate(-90deg);
}

svg:not(:root) {
  overflow: hidden;
}

.item .button-item svg path {
  fill: currentColor;
}

.status {
  margin-right: 30px;
  font-size: 13px;
}

.status.bottom {
  margin-top: 55px;
}

.status .use-btn {
  color: #1e80ff;
}

.timeline-container {
  margin: 0 auto;
}

.timeline-entry-list {
  margin-right: 17.5rem;
  border-radius: 2px;
  width: 720px;
  position: relative;
}

.entry-list-container {
  background-color: #fff;
  border-radius: 4px;
  min-height: 500px;
}

.entry-list-container .tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid #e5e6eb;
  overflow: hidden;
}

.tab-header .tab-title {
  white-space: nowrap;
  font-size: 18px;
  font-weight: 600;
}

.content-body {
  padding: 10px 20px 16px;
}

.serie {
  margin: 0 0 40px;
}

.serie .serie-title {
  height: 32px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.serie .serie-title .title {
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  color: #1d2129;
  margin: 0 16px;
}

.serie .serie-title .series-left,
.serie .serie-title .series-right {
  width: 16px;
  height: 2px;
}

img {
  border-style: none;
}

.serie .badge-icon-list {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-gap: 10px 20px;
  flex-wrap: wrap;
}

.serie .badge-icon-list .badge-icon-item {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  width: 150px;
  font-style: normal;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.serie .badge-icon-list .badge-icon-item .badge-item-icon {
  width: 65px;
  height: 65px;
}

.serie .badge-icon-list .badge-icon-item .badge-item-icon .not-obtain {
  filter: grayscale(100%);
}

.serie .badge-icon-list .badge-icon-item .badge-item-icon img {
  width: 100%;
  height: 100%;
}

.serie .badge-icon-list .badge-icon-item .badge-desc {
  /* margin-top: -10px; */
  text-align: center;
  color: #1d2129;
  font-size: 16px;
  line-height: 28px;
}

.serie .badge-icon-list .badge-icon-item .obtain-date {
  font-size: 14px;
  text-align: center;
  color: #86909c;
  height: 24px;
  line-height: 24px;
}
</style>