修改

src/api/allApi.js

@@ -32,6 +32,14 @@ export function commendPage(query) {
   })
 }
 
+//证书类型
+export function certificatType(query) {
+  return request({
+    url: '/mall-certificat/list',
+    method: 'get',
+    params:query
+  })
+}
 
 //证书列表
 export function certificatePage(query) {

src/utils/index.js

@@ -1,6 +1,56 @@
 /**
  * Created by jiachenpan on 16/11/18.
  */
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+export function handleTree(data, id, parentId, children) {
+  let config = {
+    id: id || 'id',
+    parentId: parentId || 'parentId',
+    childrenList: children || 'children'
+  };
+
+  var childrenListMap = {};
+  var nodeIds = {};
+  var tree = [];
+
+  for (let d of data) {
+    let parentId = d[config.parentId];
+    if (childrenListMap[parentId] == null) {
+      childrenListMap[parentId] = [];
+    }
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  }
+
+  for (let d of data) {
+    let parentId = d[config.parentId];
+    if (nodeIds[parentId] == null) {
+      tree.push(d);
+    }
+  }
+
+  for (let t of tree) {
+    adaptToChildrenList(t);
+  }
+
+  function adaptToChildrenList(o) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]];
+    }
+    if (o[config.childrenList]) {
+      for (let c of o[config.childrenList]) {
+        adaptToChildrenList(c);
+      }
+    }
+  }
+  return tree;
+}
 
 export function parseTime(time, cFormat) {
   if (arguments.length === 0) {

src/views/HomeView/EarnPoints.vue

@@ -1,216 +1,459 @@
 <template>
-    <div class="timeline-container">
-        <div class="timeline-content">
-            <div class="timeline-entry-list">
-                <div class="entry-list-container">
-                    <div class="tab-header">
-                        <span class="tab-title">证书列表</span>
-                    </div>
-                    <div class="content-body">
-                        <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 align="center" prop="title" 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 width="100" align="center" prop="typeName" label="类型"></el-table-column>
-                            <el-table-column width="60" align="center" prop="statusName" label="状态"></el-table-column>
-                            <el-table-column 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>
-                    </div>
+  <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="childrenTypeName" 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>
-            </div>
-            <SiderInfo></SiderInfo>
-        </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="title">
-                    <el-input placeholder="请填写证名称" size="small" style="width: 95%;" 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"
-                    :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>
+
+              </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>
-import { certificatePage,certificateUpload } from "@/api/allApi";
-import SiderInfo from '@/components/SiderInfo.vue'
-export default{
-  components: {
-    SiderInfo
-  },
+<script scoped>
+import { certificatePage, certificateUpload, notice, certificatType } from "@/api/allApi";
+import { handleTree } from '@/utils/index'
+export default {
   data() {
     return {
-        fileUrl: this.baseUrl,
-        dataList:[],
-        dialogVisible: false,
-        rules: {
-                title: [{ required: true, message: "请填写证书名称", trigger: "blur" }],
-                fileIds: [{ required: true, message: "请上传附件", trigger: "blur" }],
-            },
-            total: 0,
-            listQuery: {
-                page: 1,
-                limit: 10,
-            },
-        dataForm: {
-            title:'',
-            fileIds:'',
-        }
+      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(){
+  created() {
+    this.getTypeList();
     this.getDataList();
+    this.getIntegralNotice();
   },
-  methods:{
+  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(",");
+      for (let i in fileList) {
+        let id = fileList[i].response.data.id;
+        fileIds.push(id);
+      }
+      this.dataForm.fileIds = fileIds.join(",");
     },
-    beforeUploadFile(file){
+    beforeUploadFile(file) {
       console.log(file);
       const size = file.size / 1024 / 1024;
       console.log(size);
-    //   if(size > 10 ){
-    //     this.$message.error("文件大小不能超过10MB！");
-    //       return false;
-    //   }
+      //   if(size > 10 ){
+      //     this.$message.error("文件大小不能超过10MB！");
+      //       return false;
+      //   }
     },
     handleAvatarSuccess(res, file, fileList) {
       console.log(file, fileList);
       console.log("------", "==========");
-      console.log("res = " , res);
+      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);
-          }
+      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(",");
+      }
+      this.dataForm.fileIds = fileIds.join(",");
     },
     resetForm() {
-        this.$refs['dataForm'].resetFields();
+      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;
-        })
+      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()
     },
-        handleSizeChange(val) {
-            this.listQuery.limit = val
-            this.getDataList()
-        },
-        handleCurrentChange(val) {
-            this.listQuery.page = val
-            this.getDataList()
-        },
-    
+    handleCurrentChange(val) {
+      this.listQuery.page = val
+      this.getDataList()
+    },
+
   },
-}
+};
 </script>
 <style scoped>
-.timeline-container{
-    margin: 0 auto;
+.right-wrap {
+  width: 100%;
 }
-.timeline-entry-list{
-    margin-right: 17.5rem;
-    border-radius: 2px;
-    width: 720px;
-    position: relative;
+
+.myPage {
+  margin-top: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.entry-list-container{
-    background-color: #fff;
-    border-radius: 4px;
-    min-height: 500px;
+
+.gainList_container {
+  min-height: 560px;
 }
-.content-body {
-  padding: 10px 20px 16px;
+
+.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;
+  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;
+  white-space: nowrap;
+  font-size: 18px;
+  font-weight: 600;
 }
-.myPage {
-    margin-top: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+
+.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>