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: 960px">
            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
            <el-table-column align="center" min-width="200" 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 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" prop="title" min-width="100" label="证书名称"></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-column min-width="80" align="center" label="备注">
              <template slot-scope="props">
                <el-popover width="200" trigger="hover" :content="props.row.content">
                  <div slot="reference" class="text-overflow">{{ props.row.content }}</div>
                </el-popover>
              </template>
            </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="third">
          <el-button size="small" type="primary" @click="handleClickCreate('上传表彰')">上传表彰</el-button>
          <el-table size="small" :data="dataListCite" border style="margin-top: 20px;width: 960px">
            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
            <el-table-column align="center" min-width="200" 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="typeName" min-width="80" label="表彰类型"></el-table-column>
            <el-table-column align="center" min-width="100" label="表彰人员">
              <template slot-scope="props">
                <el-popover trigger="hover">
                  <el-table :data="props.row.groupUsers" border size="mini">
                    <el-table-column min-width="200" align="center" prop="deptName" label="部门"></el-table-column>
                    <el-table-column min-width="100" align="center" prop="userName" label="姓名"></el-table-column>
                    <el-table-column min-width="100" align="center" prop="employeNo" label="员工号"></el-table-column>
                  </el-table>
                  <span style="color: #1e80ff;cursor: pointer;" slot="reference">
                    {{ props.row.userName }}
                  </span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="100" label="客户名称">
              <template slot-scope="props">
                <el-popover width="200" trigger="hover" :content="props.row.customerName">
                  <div slot="reference" class="text-overflow">{{ props.row.customerName }}</div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="100" label="表彰名称">
              <template slot-scope="props">
                <el-popover width="200" trigger="hover" :content="props.row.title">
                  <div slot="reference" class="text-overflow">{{ props.row.title }}</div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column min-width="100" align="center" label="表彰描述">
              <template slot-scope="props">
                <el-popover width="400" trigger="hover" :content="props.row.content">
                  <div slot="reference" class="text-overflow">{{ props.row.content }}</div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column min-width="100" align="center" label="状态">
              <template slot-scope="props">
                <el-popover trigger="hover">
                  <el-table :data="props.row.logs" border size="mini">
                    <el-table-column min-width="120" align="center" prop="auditor" label="处理人"></el-table-column>
                    <el-table-column min-width="160" align="center" prop="comment" label="处理结果"></el-table-column>
                    <el-table-column min-width="180" align="center" prop="createTime" label="处理时间"></el-table-column>
                  </el-table>
                  <span style="color: #1e80ff;cursor: pointer;" slot="reference">{{ props.row.statusName }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column min-width="120" align="center" prop="createTime" label="上传时间"></el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="160px"
              class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleClickViewCite(scope.row, 'view')">查看</el-button>
                <el-button v-if="scope.row.status == '12' || scope.row.status == '22'" type="success" size="small"
                  @click="handleClickViewCite(scope.row, 'edit')">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="myPage">
            <el-pagination @size-change="handleSizeChangeCite" @current-change="handleCurrentChangeCite"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
              layout="total, sizes, prev, pager, next, jumper" :total="totalCite">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="培训列表" name="fourth">
          <el-button size="small" type="primary" @click="handleClickCreate('上传培训')">上传培训</el-button>
          <el-table size="small" :data="dataListTrain" border style="margin-top: 20px;width: 960px">
            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
            <el-table-column align="center" prop="title" min-width="100" label="培训主题">
            </el-table-column>
            <el-table-column align="center" prop="startTime" min-width="150" label="开始时间">
            </el-table-column>
            <el-table-column align="center" prop="endTime" min-width="150" label="结束时间">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="状态">
              <template slot-scope="props">
                <el-popover trigger="hover">
                  <el-table :data="props.row.trainLogs" border size="mini">
                    <el-table-column min-width="120" align="center" prop="auditor" label="处理人"></el-table-column>
                    <el-table-column min-width="160" align="center" prop="comment" label="处理结果"></el-table-column>
                    <!-- <el-table-column min-width="120" align="center" prop="statusName" label="状态"></el-table-column> -->
                    <el-table-column min-width="180" align="center" prop="createTime" label="处理时间"></el-table-column>
                  </el-table>
                  <span style="color: #1e80ff;cursor: pointer;" slot="reference">{{ props.row.statusName }}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="lecturerName" min-width="150" label="培训讲师">
            </el-table-column>
            <el-table-column align="center" min-width="100" label="参加人员">
              <template slot-scope="props">
                <el-popover trigger="hover">
                  <el-table :data="props.row.trainees" border size="mini">
                    <el-table-column min-width="200" align="center" prop="deptName" label="部门"></el-table-column>
                    <el-table-column min-width="100" align="center" prop="userName" label="姓名"></el-table-column>
                    <el-table-column min-width="100" align="center" prop="employeNo" label="员工号"></el-table-column>
                  </el-table>
                  <span style="color: #1e80ff;cursor: pointer;" slot="reference">
                    {{ props.row.trainees[0].userName }}
                  </span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column min-width="100" align="center" label="培训描述">
              <template slot-scope="props">
                <el-popover width="400" trigger="hover" :content="props.row.content">
                  <div slot="reference" class="text-overflow">{{ props.row.content }}</div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="200" label="培训材料">
              <template slot-scope="props">
                <div v-for="(item, index) in props.row.materialFiles" :key="index">
                  <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="200" label="签到表照片">
              <template slot-scope="props">
                <div v-for="(item, index) in props.row.signPhotoFiles" :key="index">
                  <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" min-width="200" label="现场照片">
              <template slot-scope="props">
                <div v-for="(item, index) in props.row.sitePhotoFiles" :key="index">
                  <a style="color: #1e80ff;" target="_blank" :href="item.url">{{ item.oldName }}</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column min-width="150" align="center" prop="createTime" label="上传时间"></el-table-column>


            <el-table-column fixed="right" align="center" label="操作" width="160px"
              class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="handleClickView(scope.row, 'view')">查看</el-button>
                <el-button v-if="scope.row.status == '21' || scope.row.status == '31'" type="success" size="small"
                  @click="handleClickView(scope.row, 'edit')">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="myPage">
            <el-pagination @size-change="handleSizeChangeTrain" @current-change="handleCurrentChangeTrain"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
              layout="total, sizes, prev, pager, next, jumper" :total="totalTrain">
            </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-tab-pane label="积分充值" name="fifth">
          <Ipay v-if="activeName == 'fifth'"></Ipay>
        </el-tab-pane>
        <el-tab-pane label="抖音叶盏点赞活动" name="sixth">
          <el-table size="small" :data="dataListZan" border style="margin-top: 20px;width: 960px">
            <el-table-column type="index" width="50" align="center" label="序号"></el-table-column>
            <el-table-column min-width="100" align="center" label="平台" prop="platformName">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="账号" prop="accountName">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="视频系列" prop="videoSeries">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="第几集" prop="episodeNumber">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="视频名称" prop="videoName">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="抖音账号" prop="tiktokAccount">
            </el-table-column>
            <el-table-column min-width="100" align="center" label="状态" prop="uploadStatus">
            </el-table-column>
            <el-table-column min-width="200" 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 fixed="right" align="center" label="操作" width="80px"
              class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button :disabled="scope.row.uploadStatus == '未上传' ? false : true" type="primary" size="small"
                  @click="handleClickViewZan(scope.row.id)">上传</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="myPage">
            <el-pagination @size-change="handleSizeChangeZan" @current-change="handleCurrentChangeZan"
              :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10"
              layout="total, sizes, prev, pager, next, jumper" :total="totalZan">
            </el-pagination>
          </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="100px">
        <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="title">
          <el-input clearable style="width: 95%;" size="small" v-model="dataForm.title"></el-input>
        </el-form-item>

        <el-form-item label="证书附件:" prop="fileIds">
          <el-upload :action="fileUrl" :file-list="dataForm.files" :on-success="handleAvatarSuccess"
            :before-upload="beforeUploadFile" :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>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisibleCite" width="40%">
      <el-form :rules="rulesCite" ref="dataFormCite" :model="dataFormCite" label-width="100px">
        <el-form-item label="表彰类型:" prop="type">
          <el-select :disabled="dialogStatus == 'view' ? true : false" clearable size="small" style="width: 95%;"
            v-model="dataFormCite.type" placeholder="请选择表彰类型">
            <el-option v-for="item in typeListCite" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="dataFormCite.type == '1'" label="集体人员:" prop="groupIds">
          <el-select :disabled="dialogStatus == 'view' ? true : false" size="small" v-model="dataFormCite.groupIds" multiple
            filterable placeholder="请选择(支持输入姓名检索)" style="width: 95%;">
            <el-option :key="item.loginId" v-for="item in recipientsList"
              :label="item.deptName + '_' + item.userName + '_' + item.employeNo" :value="item.loginId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户名称:" prop="customerName">
          <el-input :disabled="dialogStatus == 'view' ? true : false" clearable style="width: 95%;" size="small"
            v-model="dataFormCite.customerName"></el-input>
        </el-form-item>
        <el-form-item label="表彰名称:" prop="title">
          <el-input :disabled="dialogStatus == 'view' ? true : false" clearable style="width: 95%;" size="small"
            v-model="dataFormCite.title"></el-input>
        </el-form-item>
        <el-form-item label="表彰描述:" prop="content">
          <el-input :disabled="dialogStatus == 'view' ? true : false" type="textarea" :rows="5" maxlength="500"
            show-word-limit style="width: 95%;" size="small" v-model="dataFormCite.content"></el-input>
        </el-form-item>
        <el-form-item label="表彰附件:" prop="fileIds">
          <el-upload :disabled="dialogStatus == 'view' ? true : false" :action="fileUrl" :file-list="dataFormCite.files"
            :on-success="handleAvatarSuccessCite" :before-upload="beforeUploadFileCite" :on-remove="handleRemoveCite">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-table v-if="dialogStatus == 'create' ? false : true" :data="citeLogsList" border size="mini">
          <el-table-column min-width="120" align="center" prop="auditor" label="处理人"></el-table-column>
          <el-table-column min-width="160" align="center" prop="comment" label="处理结果"></el-table-column>
          <el-table-column min-width="180" align="center" prop="createTime" label="处理时间"></el-table-column>
        </el-table>
      </el-form>
      <span v-if="dialogStatus != 'view'" slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitFormCite">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisibleTrain" width="40%">
      <el-form :rules="rulesTrain" ref="dataFormTrain" :model="dataFormTrain" label-width="100px">
        <el-form-item label="培训主题:" prop="title">
          <el-input :disabled="dialogStatus == 'view' ? true : false" clearable style="width: 95%;" size="small"
            v-model="dataFormTrain.title"></el-input>
        </el-form-item>
        <el-form-item label="开始时间:" prop="startTime">
          <el-date-picker :disabled="dialogStatus == 'view' ? true : false" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="dataFormTrain.startTime" placeholder="请选择开始时间"
            style="width: 95%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:" prop="endTime">
          <el-date-picker :disabled="dialogStatus == 'view' ? true : false" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="dataFormTrain.endTime" placeholder="请选择结束时间"
            style="width: 95%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="培训讲师:" prop="lecturer">
          <el-select :disabled="dialogStatus == 'view' ? true : false" size="small" v-model="dataFormTrain.lecturer"
            filterable placeholder="请选择(支持输入姓名检索)" style="width: 95%;">
            <el-option :key="item.loginId" v-for="item in recipientsList"
              :label="item.deptName + '_' + item.userName + '_' + item.employeNo" :value="item.loginId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参加人员:" prop="traineeIds">
          <el-select :disabled="dialogStatus == 'view' ? true : false" size="small" v-model="dataFormTrain.traineeIds"
            multiple filterable placeholder="请选择(支持输入姓名检索)" style="width: 95%;">
            <el-option :key="item.loginId" v-for="item in recipientsList"
              :label="item.deptName + '_' + item.userName + '_' + item.employeNo" :value="item.loginId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="培训内容:" prop="content">
          <el-input :disabled="dialogStatus == 'view' ? true : false" type="textarea" :rows="5" maxlength="500"
            show-word-limit style="width: 95%;" size="small" v-model="dataFormTrain.content"></el-input>
        </el-form-item>
        <el-form-item label="培训材料:" prop="materials">
          <el-upload :disabled="dialogStatus == 'view' ? true : false" :action="fileUrl"
            :file-list="dataFormTrain.materialFiles" :on-success="handleAvatarSuccessTrain"
            :before-upload="beforeUploadFileTrain" :on-remove="handleRemoveTrain">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="签到表:" prop="signPhotos">
          <el-upload :disabled="dialogStatus == 'view' ? true : false" :action="fileUrl"
            :file-list="dataFormTrain.signPhotoFiles" :on-success="handleAvatarSuccessTrain1"
            :before-upload="beforeUploadFileTrain" :on-remove="handleRemoveTrain1">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="现场照片:" prop="sitePhotos">
          <el-upload :disabled="dialogStatus == 'view' ? true : false" :action="fileUrl"
            :file-list="dataFormTrain.sitePhotoFiles" :on-success="handleAvatarSuccessTrain2"
            :before-upload="beforeUploadFileTrain" :on-remove="handleRemoveTrain2">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="dialogStatus != 'view'" label="上传说明:">
          <el-card shadow="never" style="width: 95%;padding: 0;min-height: 100px;line-height: normal;">
            <div v-html="remarkHtml"></div>
          </el-card>
        </el-form-item>
        <el-table v-if="dialogStatus == 'create' ? false : true" :data="trainLogsList" border size="mini">
          <el-table-column min-width="120" align="center" prop="auditor" label="处理人"></el-table-column>
          <el-table-column min-width="160" align="center" prop="comment" label="处理结果"></el-table-column>
          <el-table-column min-width="180" align="center" prop="createTime" label="处理时间"></el-table-column>
        </el-table>
      </el-form>
      <span v-if="dialogStatus != 'view'" slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitFormTrain">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="上传点赞" :visible.sync="dialogVisibleZan" width="40%">
      <el-form :rules="rulesZan" ref="dataFormZan" :model="dataFormZan" label-width="100px">
        <el-form-item label="抖音账号:" prop="tiktokAccount">
          <el-input clearable style="width: 95%;" size="small" v-model="dataFormZan.tiktokAccount"></el-input>
        </el-form-item>
        <el-form-item label="事项" prop="matters">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
            @change="handleCheckAllChange">全选</el-checkbox>
          <el-checkbox-group v-model="dataFormZan.matters" @change="changeChecked">
            <el-checkbox v-for="item in typeListZan" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel
              }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="证明附件:" prop="fileIds">
          <el-upload :action="fileUrl" :file-list="dataFormZan.files" :on-success="handleAvatarSuccessZan"
            :before-upload="beforeUploadFileZan" :on-remove="handleRemoveZan">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="上传说明:">
          <el-card shadow="never" style="width: 95%;padding: 0;min-height: 100px;line-height: normal;">
            <div v-html="remarkHtml"></div>
          </el-card>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="submitFormZan">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script scoped>
import Ipay from '@/views/Ipay.vue'
import { certificatePage, certificateUpload, notice, certificatType, dictList, allUserList, citeList, uploadCite, editCite, trainList, uploadTrain, editTrain, remarkHtml } from "@/api/allApi";
import { zanList, uploadZan } from "@/api/zanApi";
import { handleTree } from '@/utils/index'
export default {
  components: {
    Ipay
  },
  data() {
    return {
      currentPage: 1,
      remarkHtml: '',
      citeLogsList: [],
      trainLogsList: [],
      integralRules: '',
      typeList: [],
      activeName: 'first',
      fileUrl: this.baseUrl,
      dataList: [],
      dialogVisible: false,
      rules: {
        type: [{ required: true, message: "请选择证书类别", trigger: "blur" }],
        title: [{ required: true, message: "请填写证书名称", trigger: "blur" }],
        fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
      },
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
      },
      dataForm: {
        type: [],
        title: '',
        fileIds: '',
        files: [],
      },
      typeListCite: [],
      recipientsList: [],
      dataListCite: [],

      dialogVisibleCite: false,
      rulesCite: {
        type: [{ required: true, message: "请选择表彰类型", trigger: "blur" }],
        groupIds: [{ required: true, message: "请选择集体人员", trigger: "blur" }],
        customerName: [{ required: true, message: "请填写客户名称", trigger: "blur" }],
        title: [{ required: true, message: "请填写表彰名称", trigger: "blur" }],
        fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
        content: [{ required: true, message: '请填写表彰描述', trigger: 'blur' }],
      },
      totalCite: 0,
      listQueryCite: {
        page: 1,
        limit: 10,
      },
      dataFormCite: {
        type: '',
        groupIds: [],
        customerName: '',
        title: '',
        fileIds: '',
        files: [],
        content: ''
      },

      dataListTrain: [],
      dialogVisibleTrain: false,
      rulesTrain: {
        title: [{ required: true, message: "请填写培训主题", trigger: "blur" }],
        startTime: [
          { required: true, message: "请选开始时间", trigger: "change" },
          { validator: this.checkStartTime, trigger: 'change' }
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
          { validator: this.checkEndTime, trigger: 'change' }
        ],
        lecturer: [{ required: true, message: "请选择培训讲师", trigger: "blur" }],
        traineeIds: [{ required: true, message: "请选择参加人员", trigger: "blur" }],
        materials: [{ required: true, message: "请上传培训材料", trigger: "blur" }],
        signPhotos: [{ required: true, message: "请上传签到表照片", trigger: "blur" }],
        sitePhotos: [{ required: true, message: "请上传现场照片", trigger: "blur" }],
        content: [
          { required: true, message: '请填写培训内容', trigger: 'blur' },
          { min: 50, max: 500, message: '培训内容的描述不得低于50字！', trigger: 'blur' }
        ],
      },
      totalTrain: 0,
      listQueryTrain: {
        page: 1,
        limit: 10,
      },
      dataFormTrain: {
        title: '',
        startTime: '',
        endTime: '',
        lecturer: '',
        traineeIds: [],
        materialFiles: [],
        materials: [],
        signPhotoFiles: [],
        signPhotos: [],
        sitePhotoFiles: [],
        sitePhotos: [],
        content: '',
      },

      // checkbox全选
      isIndeterminate: false,
      checkAll: false,
      mattersArr: [],
      typeListZan: [],
      dataListZan: [],
      dialogVisibleZan: false,
      rulesZan: {
        tiktokAccount: [{ required: true, message: "请填写抖音账号", trigger: "blur" }],
        matters: [{ required: true, message: "请选择事项", trigger: "blur" }],
        fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
      },
      totalZan: 0,
      listQueryZan: {
        page: 1,
        limit: 10,
      },
      dataFormZan: {
        tiktokAccount: '',
        matters: [],
        fileIds: '',
        files: [],
      },

      dialogStatus: '',
      textMap: {
        create: "上传",
        edit: "修改",
        view: "详情",
      },
    };
  },
  created() {
    this.getTypeListCite();
    this.getAllUserList();
    this.getDataListCite();
    this.getTypeList();
    this.getDataList();
    this.getIntegralNotice();
  },
  methods: {
    changeChecked(val) {
      console.log(val, '勾选val')
      let checkedCount = val.length
      this.checkAll = checkedCount === this.mattersArr.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.mattersArr.length
    },
    handleCheckAllChange(val) {
      console.log(val, '全选val')
      this.dataFormZan.matters = val ? this.mattersArr : []
      this.isIndeterminate = false
    },
    getRemarkHtml(val) {
      remarkHtml({ noticeType: val }).then(response => {
        console.log(response.data.data);
        this.remarkHtml = response.data.data.content
      })
    },
    handleClickViewZan(id) {
      this.isIndeterminate = false;
      this.checkAll = false;
      this.dialogVisibleZan = true;
      this.dataFormZan = {
        videoId: id,
        tiktokAccount: '',
        matters: [],
        fileIds: '',
        files: [],
      }
    },
    handleClickCreate(val) {
      this.dialogStatus = 'create';
      if (val == '上传表彰') {
        this.dialogVisibleCite = true;
        this.dataFormCite = {
          type: '',
          groupIds: [],
          customerName: '',
          title: '',
          fileIds: '',
          files: [],
          content: ''
        };
      } else {
        this.dialogVisibleTrain = true;

        this.dataFormTrain = {
          title: '',
          startTime: '',
          endTime: '',
          lecturer: '',
          traineeIds: [],
          materialFiles: [],
          materials: [],
          signPhotoFiles: [],
          signPhotos: [],
          sitePhotoFiles: [],
          sitePhotos: [],
          content: '',
        };
      }

    },
    handleClickViewCite(row, val) {
      this.citeLogsList = row.logs;
      if (row.groupUsers && row.groupUsers.length > 0) {
        let groupIds = [];
        for (let i in row.groupUsers) {
          groupIds.push(row.groupUsers[i].loginId);
        }
        row.groupIds = groupIds;
      }
      this.dataFormCite = Object.assign({}, row);
      if (row.files) {
        let files = row.files;
        this.dataFormCite.files = [];
        for (let i in files) {
          let url = files[i].url;
          let name = files[i].oldName;
          let id = files[i].id;

          this.dataFormCite.files.push({
            name: name,
            url: url,
            response: { error: "0", data: { url: url, id: id } },
          });
        }
      }
      this.dialogVisibleCite = true;
      this.dialogStatus = val;
    },
    handleClickView(row, val) {
      this.trainLogsList = row.trainLogs;
      if (row.trainees && row.trainees.length > 0) {
        let traineeIds = [];
        for (let i in row.trainees) {
          traineeIds.push(row.trainees[i].loginId);
        }
        row.traineeIds = traineeIds;
      }
      this.dataFormTrain = Object.assign({}, row);
      if (row.materialFiles) {
        let files = row.materialFiles;
        this.dataFormTrain.materialFiles = [];
        for (let i in files) {
          let url = files[i].url;
          let name = files[i].oldName;
          let id = files[i].id;

          this.dataFormTrain.materialFiles.push({
            name: name,
            url: url,
            response: { error: "0", data: { url: url, id: id } },
          });
        }
      }
      if (row.signPhotoFiles) {
        let files = row.signPhotoFiles;
        this.dataFormTrain.signPhotoFiles = [];
        for (let i in files) {
          let url = files[i].url;
          let name = files[i].oldName;
          let id = files[i].id;

          this.dataFormTrain.signPhotoFiles.push({
            name: name,
            url: url,
            response: { error: "0", data: { url: url, id: id } },
          });
        }
      }
      if (row.sitePhotoFiles) {
        let files = row.sitePhotoFiles;
        this.dataFormTrain.sitePhotoFiles = [];
        for (let i in files) {
          let url = files[i].url;
          let name = files[i].oldName;
          let id = files[i].id;

          this.dataFormTrain.sitePhotoFiles.push({
            name: name,
            url: url,
            response: { error: "0", data: { url: url, id: id } },
          });
        }
      }
      this.dialogVisibleTrain = true;
      this.dialogStatus = val;
    },

    //校验开始时间
    checkStartTime(rule, value, callback) {
      if (!value) {
        callback(new Error("请选择开始时间！"));
      } else {
        if (this.dataFormTrain.endTime && Date.parse(value) > Date.parse(this.dataFormTrain.endTime)) {
          callback(new Error("开始时间必须小于等于结束时间！"))
          this.dataFormTrain.startTime = '';
        } else {
          callback();
        }
      }
    },
    //校验结束时间
    checkEndTime(rule, value, callback) {
      if (!value) {
        callback(new Error("请选择结束时间！"));
      } else {
        if (!this.dataFormTrain.startTime) {
          callback(new Error("请选择开始时间！"))
          this.dataFormTrain.endTime = '';
        } else if (Date.parse(this.dataFormTrain.startTime) > Date.parse(value)) {
          callback(new Error("结束时间必须大于等于开始时间！"))
          this.dataFormTrain.endTime = '';
        } else {
          callback();
        }
      }
    },
    getTypeList() {
      certificatType().then(response => {
        this.typeList = handleTree(response.data.data);
        console.log(this.typeList);
      })
    },
    handleClick(tab, event) {
      console.log(tab.name, event);
      if (tab.name == 'fourth') {
        this.getRemarkHtml('trainrule');
        this.getDataListTrain();
      }
      if (tab.name == 'sixth') {
        this.getRemarkHtml('interactiveRule');
        this.getTypeListZan();
        this.getDataListZan()
      }
    },
    getIntegralNotice() {
      notice({ noticeType: 'certificatNotice' }).then(response => {
        this.integralRules = response.data.data.content;
      })
    },
    handleChange(value) {
      console.log(value);
    },
    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.dataForm.type = [];
              this.dataForm.fileIds = '';
              this.dataForm.files = [];
              this.listQuery.page = 1;
              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()
    },

    getTypeListCite() {
      dictList({ dictType: 'customer_treward_type' }).then(response => {
        this.typeListCite = response.data.data;
      })
    },
    getTypeListZan() {
      dictList({ dictType: 'matter' }).then(response => {
        let dataList = response.data.data;
        this.typeListZan = dataList;
        // 勾选的数组绑定的是数组中的item.dictValue
        let dictValueArr = []
        dataList.forEach(item => {
          dictValueArr.push(item.dictValue)
        })
        this.mattersArr = dictValueArr
      })
    },
    getAllUserList() {
      allUserList().then(response => {
        this.recipientsList = response.data.data;
      }).catch(() => { });
    },
    handleRemoveCite(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.dataFormCite.fileIds = fileIds.join(",");
    },
    beforeUploadFileCite(file) {
      console.log(file);
      const size = file.size / 1024 / 1024;
      console.log(size);
      if (size > 10) {
        this.$message.error("文件大小不能超过10MB！");
        return false;
      }
    },
    handleAvatarSuccessCite(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.dataFormCite.fileIds = fileIds.join(",");
    },
    submitFormCite() {
      this.$refs['dataFormCite'].validate((valid) => {
        if (valid) {
          if (this.dialogStatus == 'create') {
            uploadCite(this.dataFormCite)
              .then((response) => {
                this.dialogVisibleCite = false;
                this.$notify({
                  title: "成功",
                  message: "表彰上传成功",
                  type: "success",
                  duration: 2000,
                });
                this.dataFormCite.type = [];
                this.dataFormCite.fileIds = '';
                this.dataFormCite.files = [];
                this.listQueryCite.page = 1;
                this.getDataListCite();
              })
              .catch(() => { });
          }
          if (this.dialogStatus == 'edit') {
            editCite(this.dataFormCite)
              .then((response) => {
                this.dialogVisibleCite = false;
                this.$notify({
                  title: "成功",
                  message: "表彰修改成功",
                  type: "success",
                  duration: 2000,
                });
                this.dataFormCite.type = [];
                this.dataFormCite.fileIds = '';
                this.dataFormCite.files = [];
                this.listQueryCite.page = 1;
                this.getDataListCite();
              })
              .catch(() => { });
          }
        } else {
          return false;
        }
      });
    },
    getDataListCite() {
      citeList(this.listQueryCite).then(response => {
        this.dataListCite = response.data.data.items;
        this.totalCite = response.data.data.total;
      })
    },
    handleSizeChangeCite(val) {
      this.listQueryCite.limit = val
      this.getDataListCite()
    },
    handleCurrentChangeCite(val) {
      this.listQueryCite.page = val
      this.getDataListCite()
    },



    handleRemoveTrain(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.dataFormTrain.materials = fileIds.join(",");
    },
    handleRemoveTrain1(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.dataFormTrain.signPhotos = fileIds.join(",");
    },
    handleRemoveTrain2(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.dataFormTrain.sitePhotos = fileIds.join(",");
    },
    beforeUploadFileTrain(file) {
      console.log(file);
      const size = file.size / 1024 / 1024;
      console.log(size);
      if (size > 10) {
        this.$message.error("文件大小不能超过10MB！");
        return false;
      }
    },
    handleAvatarSuccessTrain(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.dataFormTrain.materials = fileIds.join(",");
    },
    handleAvatarSuccessTrain1(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.dataFormTrain.signPhotos = fileIds.join(",");
    },
    handleAvatarSuccessTrain2(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.dataFormTrain.sitePhotos = fileIds.join(",");
    },
    submitFormTrain() {
      this.$refs['dataFormTrain'].validate((valid) => {
        if (valid) {
          if (this.dialogStatus == 'create') {
            uploadTrain(this.dataFormTrain)
              .then((response) => {
                this.dialogVisibleTrain = false;
                this.$notify({
                  title: "成功",
                  message: "培训上传成功",
                  type: "success",
                  duration: 2000,
                });
                this.listQueryTrain.page = 1;
                this.getDataListTrain();
              })
              .catch(() => { });
          }
          if (this.dialogStatus == 'edit') {
            editTrain(this.dataFormTrain)
              .then((response) => {
                this.dialogVisibleTrain = false;
                this.$notify({
                  title: "成功",
                  message: "培训修改成功",
                  type: "success",
                  duration: 2000,
                });
                this.listQueryTrain.page = 1;
                this.getDataListTrain();
              })
              .catch(() => { });
          }
        } else {
          return false;
        }
      });
    },
    getDataListTrain() {
      trainList(this.listQueryCite).then(response => {
        this.dataListTrain = response.data.data.items;
        this.totalTrain = response.data.data.total;
      })
    },
    handleSizeChangeTrain(val) {
      this.listQueryTrain.limit = val
      this.getDataListTrain()
    },
    handleCurrentChangeTrain(val) {
      this.listQueryTrain.page = val
      this.getDataListTrain()
    },

    handleRemoveZan(file, fileList) {
      console.log(file, fileList);
      let fileIds = [];
      for (let i in fileList) {
        let id = fileList[i].response.data.id;
        fileIds.push(id);
      }
      this.dataFormZan.fileIds = fileIds.join(",");
    },
    beforeUploadFileZan(file) {
      console.log(file);
      const size = file.size / 1024 / 1024;
      console.log(size);
      if (size > 10) {
        this.$message.error("文件大小不能超过10MB！");
        return false;
      }
    },
    handleAvatarSuccessZan(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.dataFormZan.fileIds = fileIds.join(",");
    },
    submitFormZan() {
      this.$refs['dataFormZan'].validate((valid) => {
        if (valid) {
          this.dataFormZan.matters = this.dataFormZan.matters.join(",");
          uploadZan(this.dataFormZan)
            .then((response) => {
              this.dialogVisibleZan = false;
              this.$notify({
                title: "成功",
                message: "上传成功",
                type: "success",
                duration: 2000,
              });
              this.dataFormZan.tiktokAccount = '';
              this.dataFormZan.matters = [];
              this.dataFormZan.fileIds = '';
              this.dataFormZan.files = [];
              this.listQueryZan.page = 1;
              this.getDataListZan();
            })
            .catch(() => { });
        } else {
          return false;
        }
      });
    },
    getDataListZan() {
      zanList(this.listQueryZan).then(response => {
        this.dataListZan = response.data.data.items;
        this.totalZan = response.data.data.total;
      })
    },
    handleSizeChangeZan(val) {
      this.listQueryZan.limit = val
      this.getDataListZan()
    },
    handleCurrentChangeZan(val) {
      this.listQueryZan.page = val
      this.getDataListZan()
    },

  },
};
</script>
<style scoped>
.text-overflow {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

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