忽略http不安全地址

.env.development

@@ -1,13 +1,13 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 苏州园区志愿服务活动区块链平台
 
 # 开发环境配置
 ENV = 'development'
 
-# 若依管理系统/开发环境
+# 苏州园区志愿服务活动区块链平台/开发环境
 # VUE_APP_BASE_API = 'https://vue.ruoyi.vip/prod-api'
-# VUE_APP_BASE_API = 'http://192.168.0.108:9034'
-VUE_APP_BASE_API = 'http://39.101.188.84:9034'
+VUE_APP_BASE_API = 'http://localhost:9034/api/'
+# VUE_APP_BASE_API = 'http:///192.168.0.119:9034'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -1,8 +1,10 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 苏州园区志愿服务活动区块链平台
 
 # 生产环境配置
 ENV = 'production'
 
-# 若依管理系统/生产环境
-VUE_APP_BASE_API = 'http://39.101.188.84:9034'
+# 苏州园区志愿服务活动区块链平台/生产环境
+# VUE_APP_BASE_API = 'http://39.101.188.84:9034/api'
+
+VUE_APP_BASE_API = 'https://zyzqkl.sipac.gov.cn/api'

.env.staging

@@ -1,10 +1,10 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 苏州园区志愿服务活动区块链平台
 
 NODE_ENV = production
 
 # 测试环境配置
 ENV = 'staging'
 
-# 若依管理系统/测试环境
+# 苏州园区志愿服务活动区块链平台/测试环境
 VUE_APP_BASE_API = '/stage-api'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ruoyi",
   "version": "3.8.6",
-  "description": "若依管理系统",
+  "description": "苏州园区志愿服务活动区块链平台",
   "author": "若依",
   "license": "MIT",
   "scripts": {
@@ -45,6 +45,7 @@
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "html2canvas": "^1.4.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
@@ -55,6 +56,7 @@
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "vue": "2.6.12",
+    "vue-3d-model": "^1.4.1",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
     "vue-meta": "2.4.0",

src/App.vue

@@ -11,7 +11,7 @@ import ThemePicker from "@/components/ThemePicker";
 export default {
   name: "App",
   components: { ThemePicker },
-    metaInfo() {
+    metaInfo() { 
         return {
             title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
             titleTemplate: title => {

src/api/login.js

@@ -1,59 +1,60 @@
-import request from '@/utils/request'
-
+import request from "@/utils/request";
+import { encrypt } from "@/utils/jsencrypt";
 // 登录方法
 export function login(username, password, code, uuid) {
+  password = encrypt(password);
   const data = {
     username,
     password,
     code,
-    uuid
-  }
+    uuid,
+  };
   return request({
-    url: '/login',
+    url: "/login",
     headers: {
-      isToken: false
+      isToken: false,
     },
-    method: 'post',
-    data: data
-  })
+    method: "post",
+    data: data,
+  });
 }
 
 // 注册方法
 export function register(data) {
   return request({
-    url: '/register',
+    url: "/register",
     headers: {
-      isToken: false
+      isToken: false,
     },
-    method: 'post',
-    data: data
-  })
+    method: "post",
+    data: data,
+  });
 }
 
 // 获取用户详细信息
 export function getInfo() {
   return request({
-    url: '/getInfo',
-    method: 'get'
-  })
+    url: "/getInfo",
+    method: "get",
+  });
 }
 
 // 退出方法
 export function logout() {
   return request({
-    url: '/logout',
-    method: 'post'
-  })
+    url: "/logout",
+    method: "post",
+  });
 }
 
 // 获取验证码
 export function getCodeImg() {
   return request({
-    url: '/captchaImage',
+    url: "/captchaImage",
     headers: {
-      isToken: false
+      isToken: false,
     },
-    method: 'get',
-    timeout: 20000
-  })
-}
+    method: "get",
+    timeout: 20000,
+  });
+}

src/api/system/dict/type.js

@@ -1,60 +1,67 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询字典类型列表
 export function listType(query) {
   return request({
-    url: '/system/dict/type/list',
-    method: 'get',
-    params: query
-  })
+    url: "/system/dict/type/list",
+    method: "get",
+    params: query,
+  });
+}
+export function listType2(query) {
+  return request({
+    url: "/system/dict/type/personList",
+    method: "get",
+    params: query,
+  });
 }
 
 // 查询字典类型详细
 export function getType(dictId) {
   return request({
-    url: '/system/dict/type/' + dictId,
-    method: 'get'
-  })
+    url: "/system/dict/type/" + dictId,
+    method: "get",
+  });
 }
 
 // 新增字典类型
 export function addType(data) {
   return request({
-    url: '/system/dict/type',
-    method: 'post',
-    data: data
-  })
+    url: "/system/dict/type",
+    method: "post",
+    data: data,
+  });
 }
 
 // 修改字典类型
 export function updateType(data) {
   return request({
-    url: '/system/dict/type',
-    method: 'put',
-    data: data
-  })
+    url: "/system/dict/type",
+    method: "put",
+    data: data,
+  });
 }
 
 // 删除字典类型
 export function delType(dictId) {
   return request({
-    url: '/system/dict/type/' + dictId,
-    method: 'delete'
-  })
+    url: "/system/dict/type/" + dictId,
+    method: "delete",
+  });
 }
 
 // 刷新字典缓存
 export function refreshCache() {
   return request({
-    url: '/system/dict/type/refreshCache',
-    method: 'delete'
-  })
+    url: "/system/dict/type/refreshCache",
+    method: "delete",
+  });
 }
 
 // 获取字典选择框列表
 export function optionselect() {
   return request({
-    url: '/system/dict/type/optionselect',
-    method: 'get'
-  })
-}
+    url: "/system/dict/type/optionselect",
+    method: "get",
+  });
+}

src/api/volunteer/gxhzs/gxhzsgl/index.js

@@ -42,3 +42,26 @@ export function delCertificates(id) {
     method: "delete",
   });
 }
+//可兑换的一次性证书
+export function zskdh(query) {
+  return request({
+    url: "/zhiyuanzhe/pointsRedemption/page",
+    method: "get",
+    params: query,
+  });
+}
+//发放
+export function exchange(data) {
+  return request({
+    url: "/zhiyuanzhe/pointsRedemption/exchange",
+    method: "post",
+    data,
+  });
+}
+//查询用户多少积分
+export function findIntegral() {
+  return request({
+    url: "/zhiyuanzhe/pointsRedemption/findIntegral",
+    method: "get",
+  });
+}

src/api/volunteer/gxhzs/hdzsff/index.js

@@ -30,3 +30,52 @@ export function editData(data) {
     data,
   });
 }
+
+//获取个性化证书发放列表
+export function dsbrecordsList(query) {
+  return request({
+    url: "/zhiyuanzhe/dsbrecords/list",
+    method: "get",
+    params: query,
+  });
+}
+//获取兑换记录详细信息
+export function dsbrecordsInfo(id) {
+  return request({
+    url: "/zhiyuanzhe/dsbrecords/" + id,
+    method: "get",
+  });
+}
+//发放个性化证书
+export function issue(data) {
+  return request({
+    url: "/zhiyuanzhe/dsbrecords/issue",
+    method: "post",
+    data,
+  });
+}
+
+// 查询一次性证书列表
+export function getYcList(query) {
+  return request({
+    url: "/zhiyuanzhe/points/list",
+    method: "get",
+    params: query,
+  });
+}
+//获取一次性活动详情信息
+export function getYcInfo(id) {
+  return request({
+    url: "/zhiyuanzhe/points/" + id,
+    method: "get",
+  });
+}
+
+//发放一次行证书
+export function ycIssue(data) {
+  return request({
+    url: "/zhiyuanzhe/points/issue",
+    method: "post",
+    data,
+  });
+}

src/api/volunteer/hdgl/index.js

@@ -1,71 +1,84 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 获取活动list列表
 export function activityList(data) {
-    return request({
-        url: '/zhiyuanzhe/activity/list',
-        method: 'get',
-        params: data
-    })
+  return request({
+    url: "/zhiyuanzhe/activity/list",
+    method: "get",
+    params: data,
+  });
 }
 // 添加活动
 export function activityAdd(data) {
-    return request({
-        url: '/zhiyuanzhe/activity',
-        method: 'post',
-        data
-    })
+  return request({
+    url: "/zhiyuanzhe/activity",
+    method: "post",
+    data,
+  });
 }
 // 修改活动
 export function activityUpdate(data) {
-    return request({
-        url: '/zhiyuanzhe/activity',
-        method: 'put',
-        data
-    })
+  return request({
+    url: "/zhiyuanzhe/activity",
+    method: "put",
+    data,
+  });
 }
-//删除活动    
+//删除活动
 export function activityDelete(ids) {
-    return request({
-        url: `/zhiyuanzhe/activity/${ids}`,
-        method: 'delete',
-    })
+  return request({
+    url: `/zhiyuanzhe/activity/${ids}`,
+    method: "delete",
+  });
 }
 //查询单个活动详情
 export function activityGet(id) {
-    return request({
-        url: `/zhiyuanzhe/activity/${id}`,
-        method: 'get',
-    })
+  return request({
+    url: `/zhiyuanzhe/activity/${id}`,
+    method: "get",
+  });
 }
 //查看人员标签列表
 export function peopleList(data) {
-    return request({
-        url: '/zhiyuanzhe/tags/list',
-        method: 'get',
-        params: data
-    })
+  return request({
+    url: "/zhiyuanzhe/tags/list",
+    method: "get",
+    params: data,
+  });
 }
 //人员标签详情
 export function peopleGet(id) {
-    return request({
-        url: `/zhiyuanzhe/tags/${id}`,
-        method: 'get',
-    })
+  return request({
+    url: `/zhiyuanzhe/tags/${id}`,
+    method: "get",
+  });
 }
 //查看参与报名列表
 export function canyuList(data) {
-    return request({
-        url: '/zhiyuanzhe/zyzreport/list',
-        method: 'get',
-        params: data
-    })
+  return request({
+    url: "/zhiyuanzhe/zyzreport/list",
+    method: "get",
+    params: data,
+  });
 }
 //新增邀请
 export function yaoqingAdd(data) {
-    return request({
-        url: '/zhiyuanzhe/invite',
-        method: 'post',
-        data
-    })
-}
+  return request({
+    url: `/zhiyuanzhe/activity/inviteTwo/${data}`,
+    method: "post",
+  });
+}
+export function postStatus(data) {
+  return request({
+    url: "/zhiyuanzhe/activity/enrollApproval",
+    method: "post",
+    data,
+  });
+}
+
+export function getTagsInfo(id) {
+  return request({
+    url: "/zhiyuanzhe/activity/findByActivityUserId/" + id,
+    method: "post",
+  });
+}

src/api/volunteer/jifenduihuan/huodongtuijian/index.js

@@ -1,6 +1,6 @@
 /*
- * @Descripttion: 
- * @version: 
+ * @Descripttion:
+ * @version:
  * @Author: JC9527
  * @Date: 2023-09-21 10:36:32
  * @LastEditors: JC9527
@@ -9,26 +9,47 @@
 import request from "@/utils/request";
 
 export default {
-  list(params){
+  list(params) {
     return request({
-      url:'/zhiyuanzhe/activity/list',
-      method:"get",
+      url: "/zhiyuanzhe/activity/list",
+      method: "get",
       params,
-    })
+    });
+  },
+  eventRecommendations(params) {
+    return request({
+      url: "/zhiyuanzhe/activity/eventRecommendations",
+      method: "get",
+      params,
+    });
+  },
+  eventInvitations(params) {
+    return request({
+      url: "/zhiyuanzhe/activity/eventInvitations",
+      method: "get",
+      params,
+    });
   },
   // 查看详情
-  activity(id){
+  activity(id) {
     return request({
-      url:'/zhiyuanzhe/activity/' + id,
-      method:"get",
-    })
+      url: "/zhiyuanzhe/activity/" + id,
+      method: "get",
+    });
   },
   // 参与活动
   zyzreport(data) {
     return request({
-      url:'/zhiyuanzhe/zyzreport',
-      method:"post",
-      data
-    })
-  }
-}
+      url: "/zhiyuanzhe/zyzreport",
+      method: "post",
+      data,
+    });
+  },
+  enroll(data) {
+    return request({
+      url: "/zhiyuanzhe/activity/enroll",
+      method: "post",
+      data,
+    });
+  },
+};

src/assets/icons/svg/aJifen.svg

@@ -0,0 +1,8 @@
+<!-- 积分 -->
+
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="16px" height="16px" class="icon">
+<image  x="0px" y="0px" width="16px" height="16px"  xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfnCRMUGS1N2eVbAAABNElEQVQoz1XQvWuTARTF4SdvoiWfLW5OggjqpC6O4iguYjv4B4iCu4Kzg+AiDk7v7qA41FIRQdzUpVjEQIvUgGIEBT+w1UYkPQ4taXK2c++Pcw9XRNp5mPfp51ZqqeZm+ullITMRIjKXXk7kXN7lTm6nl9kcz2rmImpgw6Y1y7oeaDpr1ZQ/1qGSA6445IyXPtq0YUtb036nPLOmlPsZ17VcnvCPC9PGVahM+EbNVZ/t9Q8VU9767Z6/gqqBstBVqutoaarrqGvo6JjWNm+5hoNmR5Er+s6P3GtPCwwMdwbffTD0cwQMKBjVmnfDC/uUyt2WtTFgScdFjxxWnwSqCnDdJwu44OTutsC6LdByxDdHndbYAb5uA68sjhJbY4967sn2iR8ueeMY9uj6ZdFQxYq7vvAfG66J/B2FrUoAAAAASUVORK5CYII=" />
+</svg>

src/assets/icons/svg/diy1.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+
+</style>
+<path class="st0" d="M7.27,16h2.65H2.58c-1.1,0-1.86-0.9-1.7-2c0,0,0.19-1.11,0.57-3.34C1.62,9.57,2.5,8.67,3.41,8.67h0.47
+	c0.28,0,0.5,0.22,0.5,0.5c0,0.28-0.22,0.5-0.5,0.5H3.83c-0.67,0-1.31,0.65-1.43,1.45c-0.28,1.61-0.42,2.42-0.42,2.43
+	C1.86,14.35,2.41,15,3.21,15h4.06c0.28,0,0.5,0.22,0.5,0.5C7.77,15.78,7.55,16,7.27,16L7.27,16z M7.58,7.65c1.66,0,3-1.47,3-3.27
+	c0-1.82-1.34-3.28-3-3.28c-1.66,0-3,1.47-3,3.28C4.58,6.19,5.92,7.65,7.58,7.65L7.58,7.65z M7.58,8.74c-2.21,0-4-1.96-4-4.36
+	c0-2.42,1.79-4.38,4-4.38c2.21,0,4,1.96,4,4.38C11.57,6.78,9.78,8.74,7.58,8.74L7.58,8.74z M13.88,7.13c0.81,0,1.51,0.58,1.65,1.38
+	l0.19,1.07c0.08,0.48-0.05,0.98-0.37,1.36l-3.18,3.79c-0.59,0.71-1.64,0.8-2.35,0.21l-1.28-1.07c-0.71-0.59-0.8-1.64-0.21-2.35
+	l3.18-3.79c0.32-0.38,0.78-0.59,1.27-0.6L13.88,7.13z M12.8,8.14c-0.2,0-0.38,0.09-0.51,0.24l-3.18,3.79
+	c-0.24,0.28-0.2,0.7,0.08,0.94l1.28,1.07c0.28,0.24,0.7,0.2,0.94-0.08l3.18-3.79c0.13-0.15,0.18-0.35,0.15-0.54l-0.19-1.07
+	c-0.06-0.32-0.33-0.55-0.66-0.55L12.8,8.14z M13.05,10.23c-0.28,0-0.5-0.22-0.5-0.5c0-0.28,0.22-0.5,0.5-0.5
+	c0.28,0,0.5,0.22,0.5,0.5C13.55,10.01,13.33,10.23,13.05,10.23L13.05,10.23z M13.05,10.23"/>
+</svg>

src/assets/icons/svg/diy2.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+
+</style>
+<g>
+	<path class="st0" d="M14.51,6.19c0-2.68-1.73-4.91-3.96-4.91c-0.62,0-1.21,0.17-1.75,0.5l-0.01,0C7.97,0.69,6.8,0,5.48,0
+		C2.93,0,0.94,2.56,0.94,5.64c0,3.02,1.9,5.53,4.37,5.64c0.42,0.3,0.61,0.61,0.63,0.94l0,0.01l-0.01,0l-0.01,0.01l-0.01,0
+		l-0.01,0.01l-0.01,0l-0.01,0.01l-0.01,0.01l-0.01,0.01l-0.01,0.01l-0.01,0l-0.01,0.01l-0.01,0l-0.01,0L5.79,12.3l-0.02,0.01
+		l-0.02,0.01l-0.02,0.01L5.7,12.34l-0.03,0.01l-0.04,0.01l-0.04,0.01l-0.05,0.02l-0.06,0.02l-0.05,0.02l-0.15,0.05L5.21,12.5
+		l-0.04,0.01l-0.04,0.01L5.1,12.54l-0.04,0.01l-0.03,0.01L5,12.57l-0.03,0.01l-0.02,0.01L4.92,12.6c-0.17,0.07-0.31,0.14-0.44,0.23
+		c-0.39,0.27-0.57,0.69-0.45,1.16c0.12,0.47,0.43,0.88,0.9,1.22c0.36,0.26,0.83,0.48,1.4,0.67l0.05,0.02
+		c0.04,0.01,0.08,0.03,0.12,0.04l0.05,0.01c0.03,0.01,0.07,0.02,0.1,0.03c0.32,0.09,0.66-0.08,0.76-0.39
+		c0.1-0.31-0.08-0.63-0.4-0.73l-0.03-0.01c-1.06-0.32-1.62-0.7-1.74-1.09l0,0l0.01-0.01c0.01-0.01,0.03-0.01,0.04-0.02l0.01,0
+		l0.01,0l0.01,0l0.02-0.01l0.01,0l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.03-0.01l0.03-0.01l0.03-0.01l0.04-0.01l0.05-0.02
+		l0.04-0.01l0.05-0.02l0.13-0.04l0.08-0.03l0.05-0.02l0.02-0.01l0.04-0.01l0.05-0.02l0.03-0.01l0.03-0.01l0.02-0.01l0.03-0.01
+		l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01
+		l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01
+		c0.36-0.22,0.58-0.54,0.58-0.96c0-0.44-0.13-0.84-0.39-1.2c0.53-0.19,1.01-0.5,1.44-0.9c0.63,0.57,1.38,0.9,2.19,0.94
+		c0.3,0.22,0.45,0.44,0.47,0.68l0,0l0,0l-0.01,0l-0.01,0.01l-0.01,0l-0.01,0.01l-0.01,0l-0.01,0l-0.02,0.01l-0.01,0l-0.02,0.01
+		l-0.02,0.01l-0.03,0.01l-0.02,0.01l-0.03,0.01l-0.02,0.01l-0.03,0.01l-0.04,0.01l-0.05,0.02l-0.17,0.05l-0.05,0.01L10.25,12
+		l-0.03,0.01l-0.02,0.01l-0.03,0.01l-0.03,0.01l-0.03,0.01l-0.03,0.01l-0.02,0.01c-0.15,0.06-0.28,0.12-0.39,0.2
+		c-0.36,0.25-0.53,0.64-0.41,1.08c0.11,0.43,0.38,0.79,0.81,1.09c0.38,0.27,0.87,0.49,1.49,0.67c0.32,0.09,0.66-0.08,0.76-0.39
+		c0.1-0.31-0.08-0.63-0.4-0.73c-0.01,0-0.03-0.01-0.04-0.01l-0.04-0.01l-0.04-0.01l-0.02-0.01l-0.04-0.01
+		c-0.02-0.01-0.04-0.01-0.06-0.02l-0.04-0.01c-0.02-0.01-0.05-0.02-0.07-0.03l-0.04-0.01c-0.02-0.01-0.05-0.02-0.07-0.03l-0.03-0.01
+		c-0.26-0.1-0.48-0.21-0.64-0.33l-0.01-0.01c-0.16-0.11-0.25-0.22-0.3-0.33l0,0l0.01,0l0.01,0l0.02-0.01l0.01,0l0.02-0.01l0.02-0.01
+		l0.03-0.01l0.03-0.01l0.02-0.01l0.03-0.01l0.03-0.01l0.03-0.01l0.05-0.02l0.15-0.05L10.95,13l0.04-0.01l0.04-0.01l0.04-0.01
+		l0.03-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.03-0.01l0.03-0.01
+		l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.01,0l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01l0.02-0.01
+		c0.33-0.2,0.54-0.5,0.54-0.89c0-0.36-0.1-0.69-0.29-1C13.39,10.22,14.51,8.35,14.51,6.19z M5.48,10.12c-1.79,0-3.32-1.97-3.32-4.48
+		c0-2.5,1.53-4.48,3.32-4.48c1.79,0,3.32,1.97,3.32,4.48C8.8,8.15,7.27,10.12,5.48,10.12z M10.54,9.94c-0.56,0-1.09-0.23-1.56-0.67
+		L8.98,9.27c0,0-0.01-0.01-0.01-0.01c0.65-0.98,1.04-2.25,1.04-3.61c0-1.04-0.22-2.01-0.62-2.86c0.02-0.01,0.03-0.02,0.05-0.03
+		l0.02-0.01c0.34-0.2,0.71-0.31,1.09-0.31c1.47,0,2.75,1.65,2.75,3.75C13.29,8.29,12.02,9.94,10.54,9.94z"/>
+	<path class="st0" d="M6.52,5.84c0,0.52-0.14,1-0.38,1.34C5.94,7.48,5.7,7.62,5.48,7.62l-0.01,0c-0.33,0.01-0.6,0.26-0.6,0.58
+		c0,0.32,0.27,0.58,0.61,0.58c0.66,0,1.26-0.36,1.67-0.95c0.38-0.54,0.59-1.25,0.59-2c0-0.32-0.27-0.58-0.61-0.58
+		C6.79,5.26,6.52,5.52,6.52,5.84z"/>
+</g>
+</svg>

src/assets/icons/svg/diy3.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+</style>
+<path class="st0" d="M10.77,5.49c-0.28,0-0.5,0.22-0.5,0.5c0,0.28,0.22,0.5,0.5,0.5h1.33c0.28,0,0.5-0.22,0.5-0.5
+	c0-0.28-0.22-0.5-0.5-0.5H10.77z M10.77,8.14c-0.28,0-0.5,0.22-0.5,0.5s0.22,0.5,0.5,0.5h1c0.28,0,0.5-0.22,0.5-0.5
+	s-0.22-0.5-0.5-0.5H10.77z M5.55,6.82c0,0.77,0.44,1.47,1.14,1.8l-1.4,3.15l0.78-0.52l0.13,0.93l1.48-3.32l1.47,3.31l0.13-0.93
+	l0.78,0.52L8.61,8.5c0.93-0.59,1.2-1.82,0.61-2.75S7.4,4.54,6.47,5.13C5.9,5.5,5.55,6.13,5.55,6.82z M8.54,6.82c0,0.55-0.45,1-1,1
+	s-1-0.45-1-1s0.45-1,1-1S8.54,6.26,8.54,6.82z"/>
+<path class="st0" d="M2.06,15.29c-0.88,0-1.6-0.71-1.6-1.6V1.64c0-0.88,0.71-1.6,1.6-1.6c0,0,0,0,0,0h8.51c0.88,0,1.6,0.71,1.6,1.6
+	v4.8c0.06-0.01,0.12-0.01,0.18-0.01h1.42c0.69,0,1.24,0.56,1.24,1.24v6.03c0,0.88-0.71,1.6-1.6,1.6c0,0,0,0,0,0H2.06z M1.53,1.64
+	v12.06c0,0.29,0.24,0.53,0.53,0.53h9.04V1.64c0-0.29-0.24-0.53-0.53-0.53H2.06C1.76,1.11,1.53,1.34,1.53,1.64z M12.16,7.67v6.56
+	h1.24c0.29,0,0.53-0.24,0.53-0.53V7.67c0-0.1-0.08-0.18-0.18-0.18l0,0h-1.42C12.24,7.49,12.16,7.57,12.16,7.67L12.16,7.67
+	L12.16,7.67z"/>
+</svg>

src/assets/icons/svg/diy4.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+</style>
+<path class="st0" d="M2.95,0C1.36,0,0.07,1.29,0.07,2.89l0,0v8.08c0,1.59,1.29,2.89,2.89,2.89l0,0h1.15v1.15
+	c0,0.32,0.26,0.58,0.58,0.58c0.07,0,0.15-0.01,0.21-0.04l2.67-1.07l2.67,1.07c0.3,0.12,0.63-0.03,0.75-0.32
+	c0.03-0.07,0.04-0.14,0.04-0.21v-1.15h1.15c1.59,0,2.89-1.29,2.89-2.89l0,0V2.89c0-1.59-1.29-2.89-2.89-2.89l0,0
+	C12.19,0,2.95,0,2.95,0z M4.11,10.74v1.96H2.95c-0.96,0-1.73-0.78-1.73-1.73l0,0V2.89c0-0.96,0.78-1.73,1.73-1.73h9.24
+	c0.96,0,1.73,0.78,1.73,1.73v0v8.08c0,0.96-0.78,1.73-1.73,1.73c0,0,0,0,0,0h-1.15v-1.96c1.15-1.91,0.53-4.4-1.38-5.55
+	s-4.4-0.53-5.55,1.38C3.34,7.86,3.34,9.46,4.11,10.74z M5.26,10.39c-0.96-1.28-0.7-3.09,0.58-4.04s3.09-0.7,4.04,0.58
+	c0.77,1.03,0.77,2.44,0,3.46c-0.54,0.73-1.4,1.16-2.31,1.15C6.66,11.55,5.81,11.12,5.26,10.39z M5.26,11.98
+	c0.68,0.47,1.48,0.73,2.31,0.72c0.83,0,1.63-0.25,2.31-0.72v2.18l-1.99-0.8c-0.21-0.08-0.44-0.08-0.64,0l-1.99,0.8V11.98z
+	 M4.11,2.31c-0.32,0-0.58,0.26-0.58,0.58c0,0.32,0.26,0.58,0.58,0.58h6.93c0.32,0,0.58-0.26,0.58-0.58c0-0.32-0.26-0.58-0.58-0.58
+	c0,0,0,0,0,0C11.04,2.31,4.11,2.31,4.11,2.31z"/>
+</svg>

src/assets/icons/svg/diy5.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<style type="text/css">
+
+</style>
+<polygon class="st1" points="15.35,14.78 13.58,12.34 11.94,12.29 13.75,14.78 2.04,14.78 3.85,12.29 2.25,12.34 0.44,14.78 
+	0.44,16 15.35,16 "/>
+<path class="st1" d="M7.69,3.58c-1.31,0-2.4,1.09-2.4,2.4c0,1.31,1.05,2.4,2.4,2.4s2.4-1.09,2.4-2.4C10.09,4.63,8.99,3.58,7.69,3.58
+	z M7.69,7.2c-0.67,0-1.22-0.55-1.22-1.22c0-0.67,0.55-1.22,1.22-1.22s1.22,0.55,1.22,1.22C8.91,6.65,8.36,7.2,7.69,7.2z"/>
+<path class="st1" d="M3.6,10.48C3.6,10.48,3.6,10.53,3.6,10.48l4.08,4.08l0.08-0.08l4-4c1.22-1.09,1.98-2.69,1.98-4.46
+	C13.75,2.69,11.01,0,7.69,0S1.67,2.69,1.67,6.06C1.67,7.79,2.38,9.39,3.6,10.48z M3.05,6.02c0-2.57,2.11-4.67,4.67-4.67
+	s4.67,2.11,4.67,4.67c0,1.39-0.63,2.65-1.6,3.49l-3.07,3.07L4.65,9.52L4.61,9.47C3.69,8.63,3.05,7.41,3.05,6.02z"/>
+</svg>

src/assets/icons/svg/个性化证书.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<path d="M14.19,0.2H1.81c-0.58,0-1.05,0.48-1.05,1.05v13.5c0,0.58,0.48,1.05,1.05,1.05h12.37c0.58,0,1.05-0.48,1.05-1.05V1.25
+	C15.24,0.65,14.76,0.2,14.19,0.2z M4.85,4.14l1.86-0.28l0.83-1.69c0.2-0.4,0.75-0.4,0.93,0l0.83,1.69l1.86,0.28
+	c0.44,0.06,0.59,0.59,0.3,0.89l-1.35,1.31l0.32,1.84c0.08,0.44-0.38,0.75-0.75,0.56L8.02,7.87L6.35,8.74
+	C5.98,8.94,5.52,8.62,5.6,8.19l0.32-1.84L4.57,5.04C4.25,4.74,4.43,4.2,4.85,4.14z M11.05,11.14c0,0.3-0.24,0.52-0.52,0.52H5.48
+	c-0.3,0-0.52-0.24-0.52-0.52c0-0.3,0.24-0.52,0.52-0.52h5.06C10.84,10.61,11.05,10.85,11.05,11.14z M12.03,13.94H4.01
+	c-0.3,0-0.52-0.24-0.52-0.52c0-0.3,0.24-0.52,0.52-0.52h8.01c0.28,0,0.52,0.24,0.52,0.52C12.54,13.72,12.3,13.94,12.03,13.94z"/>
+</svg>

src/assets/icons/svg/数据.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<g>
+	<path d="M3.78,10.36L2.99,9.75c-0.1-0.08-0.24-0.06-0.32,0.02l-1.48,1.3c-0.06,0.04-0.08,0.12-0.08,0.2v4.47
+		C1.1,15.88,1.23,16,1.37,16h2.29c0.14,0,0.26-0.12,0.26-0.26v-5.16C3.89,10.5,3.85,10.42,3.78,10.36L3.78,10.36z"/>
+	<path d="M9.06,10.03l-0.71,0.71c-0.08,0.08-0.2,0.1-0.3,0.04l-0.95-0.53c-0.08-0.04-0.18-0.04-0.26,0
+		c-0.08,0.04-0.14,0.14-0.14,0.22v5.24c0,0.14,0.12,0.26,0.26,0.26h2.29c0.14,0,0.26-0.12,0.26-0.26v-5.5
+		C9.51,9.99,9.22,9.87,9.06,10.03L9.06,10.03z"/>
+	<path d="M14.34,6.68c-0.04-0.06-0.12-0.1-0.18-0.1c-0.08,0-0.14,0.02-0.2,0.06l-1.58,1.44c-0.06,0.04-0.08,0.12-0.08,0.2v7.45
+		c0,0.14,0.12,0.26,0.26,0.26h2.29c0.14,0,0.26-0.12,0.26-0.26v-8c0-0.06-0.02-0.12-0.06-0.16L14.34,6.68L14.34,6.68z"/>
+	<path d="M15.88,0.13C15.82,0.04,15.7-0.02,15.6,0l-3.76,0.53c-0.12,0.02-0.22,0.1-0.26,0.2c-0.04,0.1-0.02,0.24,0.06,0.32
+		l0.81,0.89L8.17,5.91C8.09,5.99,7.99,6.03,7.88,6.03c-0.08,0-0.14-0.02-0.2-0.06L3.95,3.94c-0.12-0.06-0.28-0.1-0.43-0.1
+		c-0.2,0-0.41,0.08-0.57,0.2L0.39,6.11c-0.06,0.04-0.1,0.1-0.14,0.16C0.11,6.46,0.03,6.68,0.03,6.93C0.03,7.51,0.52,8,1.08,8
+		c0.18,0,0.35-0.04,0.51-0.12C1.63,7.86,1.67,7.82,1.71,7.8l0,0l0,0l0,0c0.02,0,0.02-0.02,0.04-0.04l1.91-1.54
+		c0.12-0.1,0.28-0.1,0.43-0.04L7.66,8.1C8.01,8.29,8.41,8.23,8.7,7.98l5.01-4.63l0.81,0.91c0.06,0.06,0.14,0.1,0.22,0.1
+		c0.14,0,0.26-0.1,0.3-0.24l0.87-3.71C15.96,0.31,15.92,0.21,15.88,0.13L15.88,0.13z"/>
+</g>
+</svg>

src/assets/icons/svg/积分兑换.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M14.17,3.48h-1.13c0.24-0.48,0.32-1.03,0.28-1.55c-0.04-0.66-0.28-1.23-0.7-1.55C12.34,0.14,11.91,0,11.45,0
+			C10.55,0,9.56,0.48,8.8,1.27C8.49,1.59,8.29,1.93,8.09,2.21C7.91,1.89,7.65,1.55,7.37,1.27C6.6,0.48,5.58,0,4.75,0
+			C4.27,0,3.91,0.14,3.57,0.38C3.14,0.7,2.92,1.27,2.86,1.93C2.82,2.45,2.9,2.96,3.14,3.48H2c-0.88,0-1.63,0.74-1.63,1.69
+			c0,0.84,0.66,1.59,1.45,1.69h5.85V3.54h0.88v3.28l5.85-0.04c0.84-0.1,1.45-0.8,1.45-1.69C15.86,4.24,15.13,3.48,14.17,3.48z
+			 M4.45,3.44C4.01,2.86,3.97,2.27,3.97,1.99c0-0.38,0.14-0.62,0.28-0.72c0.1-0.1,0.28-0.14,0.48-0.14c0.48,0,1.17,0.24,1.89,0.93
+			C6.99,2.45,7.53,2.9,7.67,3.44L4.45,3.44z M11.77,3.44L8.58,3.46c0.14-0.52,0.64-0.99,1.03-1.37c0.66-0.72,1.41-0.93,1.89-0.93
+			c0.18,0,0.38,0.04,0.48,0.14c0.1,0.1,0.24,0.32,0.28,0.72C12.24,2.21,12.24,2.86,11.77,3.44z"/>
+		<path d="M1.84,12.85c0,1.55,1.23,2.82,2.78,2.82h3.08v-4.95H6.64c-0.26,0-0.52,0.16-0.52,0.46c0,0.3,0.26,0.46,0.52,0.46h0.2
+			c0.14,0,0.28,0.12,0.28,0.28c0,0.16-0.12,0.28-0.28,0.28h-0.2c-0.6,0-1.03-0.44-1.03-0.97c0-0.58,0.44-0.97,1.03-0.97h1.07V7.32
+			H1.86L1.84,12.85z"/>
+	</g>
+	<path d="M8.56,11.63H9.6c0.26,0,0.52-0.16,0.52-0.46s-0.26-0.46-0.52-0.46H9.4c-0.14,0-0.28-0.12-0.28-0.28
+		c0-0.14,0.12-0.28,0.28-0.28h0.2c0.6,0,1.03,0.44,1.03,0.97c0,0.58-0.46,0.97-1.03,0.97H8.56v3.56h3.08c1.51,0,2.78-1.27,2.78-2.82
+		V7.28H8.58L8.56,11.63z"/>
+</g>
+</svg>

src/assets/styles/font.css

@@ -1,15 +1,15 @@
 @font-face {
   font-family: "Alibaba-PuHuiTi-Bold";
-  src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Bold.otf");
+ // src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Bold.otf");
 }
 @font-face {
   font-family: "Alibaba-PuHuiTi-Regular";
-  src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
+//  src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
 }
 /* 标题类 */
 @font-face {
   font-family: "Alibaba-PuHuiTi-Medium.otf";
-  src: url("http://www.jichuanglanhai.com/demo/font-file/Alibaba-PuHuiTi-Medium.otf");
+ // src: url("http://www.jichuanglanhai.com/demo/font-file/Alibaba-PuHuiTi-Medium.otf");
 }
 @font-face {
   font-family: "youshebiaotihei";
@@ -18,5 +18,9 @@
 
 @font-face {
   font-family: "Alibaba PuHuiTi";
-  src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
-}
+  //src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/Alibaba-PuHuiTi-Regular.otf");
+}
+@font-face {
+  font-family: "din-bold-2.ttf";
+  //src: url("http://www.jichuanglanhai.com/demo/taicang-file/fonts/din-bold-2.ttf");
+}

src/assets/styles/index.scss

@@ -129,7 +129,7 @@ aside {
   width: 100%;
   background: #fff;
   box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
-  border-radius: 8px 8px 0 0px;
+  border-radius: 8px;
   overflow-y: auto;
 }
 

src/assets/styles/myTable.scss

@@ -33,16 +33,16 @@
 }
 //详情
 .info-box {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  // display: flex;
+  // flex-direction: column;
+  // align-items: center;
+  // justify-content: center;
   .info-item {
     display: flex;
     // align-items: center;
     margin-bottom: 20px;
     .item-lable {
-      width: 80px;
+      min-width: 80px;
       font-size: 16px;
       font-family: "Alibaba-PuHuiTi-Regular";
       font-weight: 400;
@@ -56,3 +56,192 @@
     }
   }
 }
+//搜索框
+.search {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+//卡片布局
+::v-deep .book-main {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  li {
+    width: 19%;
+    height: 48.5%;
+    margin-right: calc(1% + (2% / 8));
+    margin-bottom: 1%;
+    list-style: none;
+    background: #fff;
+    box-shadow: 0px 3px 15px 0px rgba(184, 184, 184, 0.22);
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+
+    .integral-num {
+      position: absolute;
+      top: 6%;
+      right: 7%;
+      font-size: 18px;
+      font-weight: bold;
+      color: $--color-primary;
+      z-index: 10;
+      font-family: "din-bold-2.ttf";
+    }
+    .operate {
+      height: 13%;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 10px;
+      .integral {
+        flex: 1;
+        padding: 4px 0;
+        font-weight: 400;
+        font-family: "Alibaba-PuHuiTi-Regular";
+        color: #4d4949;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .exchange-btn {
+        padding: 4px 10px;
+        font-size: 14px;
+        cursor: pointer;
+        font-family: "Alibaba-PuHuiTi-Regular";
+        font-weight: 400;
+        color: $--color-primary;
+        background: rgba(249, 86, 95, 0.1);
+        border-radius: 4px;
+      }
+    }
+  }
+  li:nth-of-type(5n) {
+    margin-right: 0;
+  }
+
+  // li:nth-of-type(n + 2) {
+  //   margin-bottom: 0;
+  // }
+}
+::v-deep .pagination-container {
+  height: 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+  .el-pagination {
+    top: 20px;
+  }
+}
+
+.noData {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+//证书查看
+::v-deep .conversionInfo {
+  .basicInfo,
+  .logisticsInfo {
+    .title {
+      display: flex;
+      align-items: center;
+      img {
+        width: 14px;
+        margin-right: 10px;
+      }
+      span {
+        font-size: 16px;
+        font-family: "Alibaba PuHuiTi";
+        font-weight: bold;
+        color: #4c4949;
+      }
+    }
+    .info {
+      margin-top: 20px;
+      display: grid;
+      grid-column: 1fr;
+      grid-row-gap: 20px;
+      .lists {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .list-left,
+        .list-right {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          div {
+            &:nth-child(1) {
+              font-size: 14px;
+              font-family: "Alibaba PuHuiTi";
+              font-weight: 400;
+              color: #4c4949;
+            }
+            &:nth-child(2) {
+              font-size: 14px;
+              font-family: "Alibaba PuHuiTi";
+              font-weight: 400;
+              color: #807a7a;
+            }
+          }
+        }
+      }
+    }
+  }
+  .logisticsInfo {
+    margin-top: 30px;
+  }
+}
+
+// 电子证书
+.zs-box {
+  height: 450px;
+  width: 300px;
+  position: relative;
+  background: url("~@/assets/images/zs.jpg");
+  background-size: 100% 100%;
+  .zs-z {
+    position: absolute;
+    bottom: 10%;
+    right: 10%;
+    border: 1px solid red;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    overflow: hidden;
+    background: url("~@/assets/images/z.png");
+    background-size: 100% 100%;
+  }
+  .top-text {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    font-size: 14px;
+    transform: translateX(-50%);
+    z-index: 10;
+    span {
+      display: inline-block;
+      width: 60px;
+      text-align: center;
+      border-bottom: 1px solid #333;
+    }
+  }
+  .bottom-text {
+    position: absolute;
+    bottom: 10%;
+    right: 10%;
+    z-index: 10;
+    .lable-value {
+      margin-bottom: 3px;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}

src/assets/styles/sidebar.scss

@@ -14,7 +14,8 @@
     -webkit-transition: width 0.28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
+    // background-color: $base-menu-background;
+    background-color: transparent;
     height: 100%;
     // position: fixed;
     font-size: 0px;
@@ -23,8 +24,8 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    // -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    // box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -72,6 +73,11 @@
 
     .el-menu-item,
     .el-submenu__title {
+      font-size: 14px !important;
+      font-family: "Alibaba-PuHuiTi-Regular";
+
+      height: 50px !important;
+      line-height: 50px;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
@@ -81,6 +87,7 @@
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
+        border-radius: 5px !important;
         color: #f8414d !important;
         background-color: rgba(255, 72, 83, 0.2) !important;
       }
@@ -88,6 +95,8 @@
 
     & .theme-dark .is-active > .el-submenu__title {
       // color: $base-menu-color-active !important;
+      border-radius: 5px !important;
+
       color: #fff !important;
       background-color: #f23f4a !important;
     }
@@ -110,9 +119,12 @@
     & .theme-dark .el-submenu .el-menu-item {
       // background-color: $base-sub-menu-background !important;
       background-color: #faf7f7 !important;
+      height: 50px !important;
+      line-height: 50px !important;
 
       &:hover {
         // background-color: $base-sub-menu-hover !important;
+        border-radius: 5px !important;
         color: #f8414d !important;
         background-color: rgba(255, 72, 83, 0.2) !important;
       }

src/assets/styles/variables.scss

@@ -9,12 +9,12 @@ $yellow: #fec171;
 $panGreen: #30b08f;
 
 // 默认菜单主题风格
-$base-menu-color: #806e6e;
+$base-menu-color: #4C4949;
 $base-menu-color-active: #f4f4f5;
-$base-menu-background: #304156;
+$base-menu-background: #fff;
 $base-logo-title-color: #ffffff;
 
-$base-menu-light-color: rgba(0, 0, 0, 0.7);
+$base-menu-light-color: rgba(51, 30, 30, 0.7);
 $base-menu-light-background: #ffffff;
 $base-logo-light-title-color: #001529;
 

src/components/TopNav/index.vue

@@ -5,7 +5,11 @@
     @select="handleSelect"
   >
     <template v-for="(item, index) in topMenus">
-      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
+      <el-menu-item
+        :style="{ '--theme': theme }"
+        :index="item.path"
+        :key="index"
+        v-if="index < visibleNumber"
         ><svg-icon
           v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
           :icon-class="item.meta.icon"
@@ -15,7 +19,11 @@
     </template>
 
     <!-- 顶部菜单超出数量折叠 -->
-    <el-submenu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+    <el-submenu
+      :style="{ '--theme': theme }"
+      index="more"
+      v-if="topMenus.length > visibleNumber"
+    >
       <template slot="title">更多菜单</template>
       <template v-for="(item, index) in topMenus">
         <el-menu-item
@@ -34,7 +42,7 @@
 import { constantRoutes } from "@/router";
 
 // 隐藏侧边栏路由
-const hideList = ['/index', '/user/profile'];
+const hideList = ["/index", "/user/profile"];
 
 export default {
   data() {
@@ -42,7 +50,7 @@ export default {
       // 顶部栏初始数
       visibleNumber: 5,
       // 当前激活菜单的 index
-      currentIndex: undefined
+      currentIndex: undefined,
     };
   },
   computed: {
@@ -56,9 +64,9 @@ export default {
         if (menu.hidden !== true) {
           // 兼容顶部栏一级菜单内部跳转
           if (menu.path === "/") {
-              topMenus.push(menu.children[0]);
+            topMenus.push(menu.children[0]);
           } else {
-              topMenus.push(menu);
+            topMenus.push(menu);
           }
         }
       });
@@ -74,11 +82,12 @@ export default {
       this.routers.map((router) => {
         for (var item in router.children) {
           if (router.children[item].parentPath === undefined) {
-            if(router.path === "/") {
+            if (router.path === "/") {
               router.children[item].path = "/" + router.children[item].path;
             } else {
-              if(!this.ishttp(router.children[item].path)) {
-                router.children[item].path = router.path + "/" + router.children[item].path;
+              if (!this.ishttp(router.children[item].path)) {
+                router.children[item].path =
+                  router.path + "/" + router.children[item].path;
               }
             }
             router.children[item].parentPath = router.path;
@@ -92,25 +101,29 @@ export default {
     activeMenu() {
       const path = this.$route.path;
       let activePath = path;
-      if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
+      if (
+        path !== undefined &&
+        path.lastIndexOf("/") > 0 &&
+        hideList.indexOf(path) === -1
+      ) {
         const tmpPath = path.substring(1, path.length);
         activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
         if (!this.$route.meta.link) {
-          this.$store.dispatch('app/toggleSideBarHide', false);
+          this.$store.dispatch("app/toggleSideBarHide", false);
         }
-      } else if(!this.$route.children) {
+      } else if (!this.$route.children) {
         activePath = path;
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
       }
       this.activeRoutes(activePath);
       return activePath;
     },
   },
   beforeMount() {
-    window.addEventListener('resize', this.setVisibleNumber)
+    window.addEventListener("resize", this.setVisibleNumber);
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.setVisibleNumber)
+    window.removeEventListener("resize", this.setVisibleNumber);
   },
   mounted() {
     this.setVisibleNumber();
@@ -124,24 +137,24 @@ export default {
     // 菜单选择事件
     handleSelect(key, keyPath) {
       this.currentIndex = key;
-      const route = this.routers.find(item => item.path === key);
+      const route = this.routers.find((item) => item.path === key);
       if (this.ishttp(key)) {
         // http(s):// 路径新窗口打开
         window.open(key, "_blank");
       } else if (!route || !route.children) {
         // 没有子路由路径内部打开
-        const routeMenu = this.childrenMenus.find(item => item.path === key);
+        const routeMenu = this.childrenMenus.find((item) => item.path === key);
         if (routeMenu && routeMenu.query) {
           let query = JSON.parse(routeMenu.query);
           this.$router.push({ path: key, query: query });
         } else {
           this.$router.push({ path: key });
         }
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
       } else {
         // 显示左侧联动菜单
         this.activeRoutes(key);
-        this.$store.dispatch('app/toggleSideBarHide', false);
+        this.$store.dispatch("app/toggleSideBarHide", false);
       }
     },
     // 当前激活的路由
@@ -154,15 +167,15 @@ export default {
           }
         });
       }
-      if(routes.length > 0) {
+      if (routes.length > 0) {
         this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
       } else {
-        this.$store.dispatch('app/toggleSideBarHide', true);
+        this.$store.dispatch("app/toggleSideBarHide", true);
       }
     },
     ishttp(url) {
-      return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
-    }
+      return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
+    },
   },
 };
 </script>
@@ -177,8 +190,9 @@ export default {
   margin: 0 10px !important;
 }
 
-.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
-  border-bottom: 2px solid #{'var(--theme)'} !important;
+.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
+.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+  border-bottom: 2px solid #{"var(--theme)"} !important;
   color: #303133;
 }
 

src/layout/components/MyHead/index.vue

@@ -1,12 +1,19 @@
 <template>
   <div class="header-container">
-    <div class="system-log">苏州园区志愿服务活动区块链平台</div>
+    <div class="system-log">
+      苏州园区志愿服务活动区块链平台（{{
+        roles.includes("zyzyh") ? "志愿者" : "管理员"
+      }}端）
+    </div>
     <div class="right-menu">
       <el-dropdown
         class="avatar-container right-menu-item hover-effect"
         trigger="click"
       >
         <div class="avatar-wrapper">
+          <div class="my-jifen" v-if="roles.includes('zyzyh')">
+            我的积分余额: {{ integral }}分
+          </div>
           <img :src="avatar" class="user-avatar" />
           <!-- <i class="el-icon-caret-bottom" /> -->
           <div class="user-name">{{ name }}</div>
@@ -32,7 +39,23 @@ export default {
     return {};
   },
   computed: {
-    ...mapGetters(["avatar", "name"]),
+    ...mapGetters(["avatar", "name", "integral", "roles"]),
+  },
+  methods: {
+    async logout() {
+      this.$confirm("确定注销并退出系统吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$store.dispatch("LogOut").then(() => {
+            // location.href = "/index";
+            this.$router.replace("/login");
+          });
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -47,6 +70,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 0 20px;
+
   .system-log {
     font-size: 23px;
     font-family: "Alibaba-PuHuiTi-Bold";
@@ -55,6 +79,13 @@ export default {
     line-height: 60px;
     letter-spacing: 2px;
   }
+  .my-jifen {
+    font-size: 18px;
+    font-weight: 400;
+    color: #ffffff;
+    font-family: "Alibaba-PuHuiTi-Regular";
+    margin-right: 30px;
+  }
   .avatar-container {
     .avatar-wrapper {
       display: flex;

src/layout/components/Sidebar/SidebarItem.vue

@@ -11,15 +11,17 @@
         v-if="onlyOneChild.meta"
         :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"
       >
-        <el-menu-item
-          :index="resolvePath(onlyOneChild.path)"
-          :class="{ 'submenu-title-noDropdown': !isNest }"
-        >
-          <item
-            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
-            :title="onlyOneChild.meta.title"
-          />
-        </el-menu-item>
+        <div>
+          <el-menu-item
+            :index="resolvePath(onlyOneChild.path)"
+            class="submenu-title-noDropdown"
+          >
+            <item
+              :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
+              :title="onlyOneChild.meta.title"
+            />
+          </el-menu-item>
+        </div>
       </app-link>
     </template>
 

src/layout/components/Sidebar/index.vue

@@ -1,30 +1,14 @@
 <template>
-  <div
-    :class="{ 'has-logo': showLogo }"
-    :style="{
-      backgroundColor:
-        settings.sideTheme === 'theme-dark'
-          ? 'transparent'
-          : variables.menuLightBackground,
-    }"
-  >
-    <logo v-if="showLogo" :collapse="isCollapse" />
+  <div :class="{ 'has-logo': showLogo }">
+    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
     <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
       <!-- :collapse="isCollapse" -->
       <el-menu
         :default-active="activeMenu"
-        :background-color="
-          settings.sideTheme === 'theme-dark'
-            ? 'transparent'
-            : variables.menuLightBackground
-        "
-        :text-color="
-          settings.sideTheme === 'theme-dark'
-            ? variables.menuColor
-            : variables.menuLightColor
-        "
+        :background-color="variables.menuLightBackground"
+        :text-color="variables.menuColor"
         :unique-opened="true"
-        :active-text-color="'#F23F4A'"
+        active-text-color="#F23F4A"
         :collapse-transition="false"
         mode="vertical"
       >
@@ -71,3 +55,4 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped></style>

src/layout/index.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="my-container">
-    <MyHead />
-    <div class="app-main">
-      <div class="left-sidebar">
-        <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <MyHead v-if="isMenuHeader" />
+    <div
+      class="app-main"
+      :style="{ height: isMenuHeader ? 'calc(100% - 60px)' : '100%' }"
+    >
+      <div class="left-sidebar" v-if="isMenuHeader">
+        <sidebar class="sidebar-container" />
       </div>
       <div class="right-page">
         <app-main />
@@ -50,7 +53,7 @@ import {
 import ResizeMixin from "./mixin/ResizeHandler";
 import { mapState } from "vuex";
 import variables from "@/assets/styles/variables.scss";
-
+import { mapGetters } from "vuex";
 export default {
   name: "Layout",
   components: {
@@ -64,6 +67,7 @@ export default {
   },
   mixins: [ResizeMixin],
   computed: {
+    ...mapGetters(["isMenuHeader"]),
     ...mapState({
       theme: (state) => state.settings.theme,
       sideTheme: (state) => state.settings.sideTheme,
@@ -101,17 +105,18 @@ export default {
   width: 100%;
 
   .app-main {
-    height: calc(100% - 60px);
+    // height: calc(100% - 60px);
     display: flex;
 
     .left-sidebar {
       height: 100%;
       background: url("~@/assets/images/sidebar.png");
-      background-size: cover;
+      background-size: 100% 100%;
+      padding: 20px;
     }
     .right-page {
       background: #f5f5f5;
-      padding: 13px 13px 0 13px;
+      padding: 13px;
       height: 100%;
       flex: 1;
       overflow: hidden;

src/main.js

@@ -1,76 +1,86 @@
-import Vue from 'vue'
+import Vue from "vue";
 
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
 
-import Element from 'element-ui'
-import './assets/styles/element-variables.scss'
+import Element from "element-ui";
+import "./assets/styles/element-variables.scss";
 
 import "@/utils/rem.js"; //计算rem基准
 
 import API from "@/api/index.js";
 
-import '@/assets/styles/index.scss' // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
-import App from './App'
-import store from './store'
-import router from './router'
-import directive from './directive' // directive
-import plugins from './plugins' // plugins
-import { download } from '@/utils/request'
+import "@/assets/styles/index.scss"; // global css
+import "@/assets/styles/ruoyi.scss"; // ruoyi css
+import App from "./App";
+import store from "./store";
+import router from "./router";
+import directive from "./directive"; // directive
+import plugins from "./plugins"; // plugins
+import { download } from "@/utils/request";
 import moment from "moment";
 import "moment/locale/zh-cn";
 moment.locale("zh-cn");
 Vue.prototype.$moment = moment;
 
-import './assets/icons' // icon
-import './permission' // permission control
+import "./assets/icons"; // icon
+import "./permission"; // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";
-import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
+import {
+  parseTime,
+  resetForm,
+  addDateRange,
+  selectDictLabel,
+  selectDictLabels,
+  handleTree,
+} from "@/utils/ruoyi";
 // 分页组件
 import Pagination from "@/components/Pagination";
 // 自定义表格工具组件
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from "@/components/RightToolbar";
 // 富文本组件
-import Editor from "@/components/Editor"
+import Editor from "@/components/Editor";
 // 文件上传组件
-import FileUpload from "@/components/FileUpload"
+import FileUpload from "@/components/FileUpload";
 // 图片上传组件
-import ImageUpload from "@/components/ImageUpload"
+import ImageUpload from "@/components/ImageUpload";
 // 图片预览组件
-import ImagePreview from "@/components/ImagePreview"
+import ImagePreview from "@/components/ImagePreview";
 // 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from "@/components/DictTag";
 // 头部标签组件
-import VueMeta from 'vue-meta'
+import VueMeta from "vue-meta";
 // 字典数据组件
-import DictData from '@/components/DictData'
+import DictData from "@/components/DictData";
+//列表搜索框
+import MyInput from "@/views/components/myInput";
 
 // 全局方法挂载
-Vue.prototype.getDicts = getDicts
-Vue.prototype.getConfigKey = getConfigKey
-Vue.prototype.parseTime = parseTime
-Vue.prototype.resetForm = resetForm
-Vue.prototype.addDateRange = addDateRange
-Vue.prototype.selectDictLabel = selectDictLabel
-Vue.prototype.selectDictLabels = selectDictLabels
-Vue.prototype.download = download
-Vue.prototype.handleTree = handleTree
-Vue.prototype.$api = API
+Vue.prototype.getDicts = getDicts;
+Vue.prototype.getConfigKey = getConfigKey;
+Vue.prototype.parseTime = parseTime;
+Vue.prototype.resetForm = resetForm;
+Vue.prototype.addDateRange = addDateRange;
+Vue.prototype.selectDictLabel = selectDictLabel;
+Vue.prototype.selectDictLabels = selectDictLabels;
+Vue.prototype.download = download;
+Vue.prototype.handleTree = handleTree;
+Vue.prototype.$api = API;
 
 // 全局组件挂载
-Vue.component('DictTag', DictTag)
-Vue.component('Pagination', Pagination)
-Vue.component('RightToolbar', RightToolbar)
-Vue.component('Editor', Editor)
-Vue.component('FileUpload', FileUpload)
-Vue.component('ImageUpload', ImageUpload)
-Vue.component('ImagePreview', ImagePreview)
+Vue.component("DictTag", DictTag);
+Vue.component("Pagination", Pagination);
+Vue.component("RightToolbar", RightToolbar);
+Vue.component("Editor", Editor);
+Vue.component("FileUpload", FileUpload);
+Vue.component("ImageUpload", ImageUpload);
+Vue.component("ImagePreview", ImagePreview);
+Vue.component("MyInput", MyInput);
 
-Vue.use(directive)
-Vue.use(plugins)
-Vue.use(VueMeta)
-DictData.install()
+Vue.use(directive);
+Vue.use(plugins);
+Vue.use(VueMeta);
+DictData.install();
 
 /**
  * If you don't want to use mock-server
@@ -82,14 +92,14 @@ DictData.install()
  */
 
 Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
-})
+  size: Cookies.get("size") || "medium", // set element-ui default size
+});
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   store,
-  render: h => h(App)
-})
+  render: (h) => h(App),
+});

src/permission.js

@@ -1,56 +1,122 @@
-import router from './router'
-import store from './store'
-import { Message } from 'element-ui'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-import { getToken } from '@/utils/auth'
-import { isRelogin } from '@/utils/request'
+import router from "./router";
+import store from "./store";
+import { Message } from "element-ui";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import { getToken } from "@/utils/auth";
+import { isRelogin } from "@/utils/request";
 
-NProgress.configure({ showSpinner: false })
+NProgress.configure({ showSpinner: false });
 
-const whiteList = ['/login', '/register']
+const whiteList = ["/login", "/register", "/3dmodel"];
 
 router.beforeEach((to, from, next) => {
-  NProgress.start()
+  NProgress.start();
+  let { isFromVolunteer, tel } = to.query;
+  if (isFromVolunteer || tel) {
+    let userName;
+    if (tel) {
+      userName = atob(tel); //志愿者
+    } else {
+      userName = "15937192537"; //管理员
+    }
+
+    if (!getToken()) {
+      if (whiteList.indexOf(to.path) !== -1) {
+        // 没有token
+        // 在免登录白名单，直接进入
+        store.commit("SET_IS_MENU_HEADER", false); //不显示左侧菜单，头部标题
+        next();
+      } else {
+        // next(`/login?redirect=${encodeURIComponent(to.fullPath)}`); // 否则全部重定向到登录页
+        store
+          .dispatch("Login", {
+            username: userName,
+            password: "123456",
+          })
+          .then(() => {
+            to.meta.title && store.dispatch("settings/setTitle", to.meta.title);
+            /* has token*/
+            if (to.path === "/login") {
+              next({ path: "/" });
+              NProgress.done();
+            } else {
+              store.commit(
+                "SET_IS_MENU_HEADER",
+                isFromVolunteer ? false : true
+              );
+              if (store.getters.roles.length === 0) {
+                isRelogin.show = true;
+                // 判断当前用户是否已拉取完user_info信息
+                store
+                  .dispatch("GetInfo")
+                  .then(() => {
+                    isRelogin.show = false;
+                    store.dispatch("GenerateRoutes").then((accessRoutes) => {
+                      // 根据roles权限生成可访问的路由表
+                      router.addRoutes(accessRoutes); // 动态添加可访问路由表
+                      next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
+                    });
+                  })
+                  .catch((err) => {
+                    store.dispatch("LogOut").then(() => {
+                      Message.error(err);
+                      next({ path: "/" });
+                    });
+                  });
+              } else {
+                next();
+              }
+            }
+          });
+      }
+    }
+  }
+
   if (getToken()) {
-    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
+    to.meta.title && store.dispatch("settings/setTitle", to.meta.title);
     /* has token*/
-    if (to.path === '/login') {
-      next({ path: '/' })
-      NProgress.done()
+    if (to.path === "/login") {
+      next({ path: "/" });
+      NProgress.done();
     } else {
+      store.commit("SET_IS_MENU_HEADER", isFromVolunteer ? false : true);
       if (store.getters.roles.length === 0) {
-        isRelogin.show = true
+        isRelogin.show = true;
         // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(() => {
-          isRelogin.show = false
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
-            // 根据roles权限生成可访问的路由表
-            router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
-          })
-        }).catch(err => {
-            store.dispatch('LogOut').then(() => {
-              Message.error(err)
-              next({ path: '/' })
-            })
+        store
+          .dispatch("GetInfo")
+          .then(() => {
+            isRelogin.show = false;
+            store.dispatch("GenerateRoutes").then((accessRoutes) => {
+              // 根据roles权限生成可访问的路由表
+              router.addRoutes(accessRoutes); // 动态添加可访问路由表
+              next({ ...to, replace: true }); // hack方法 确保addRoutes已完成
+            });
           })
+          .catch((err) => {
+            store.dispatch("LogOut").then(() => {
+              Message.error(err);
+              next({ path: "/" });
+            });
+          });
       } else {
-        next()
+        next();
       }
     }
   } else {
-    // 没有token
     if (whiteList.indexOf(to.path) !== -1) {
+      // 没有token
       // 在免登录白名单，直接进入
-      next()
+      store.commit("SET_IS_MENU_HEADER", false); //不显示左侧菜单，头部标题
+      next();
     } else {
-      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
-      NProgress.done()
+      // next(`/login?redirect=${encodeURIComponent(to.fullPath)}`); // 否则全部重定向到登录页
+      NProgress.done();
     }
   }
-})
+});
 
 router.afterEach(() => {
-  NProgress.done()
-})
+  NProgress.done();
+});

src/router/index.js

@@ -1,10 +1,10 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue";
+import Router from "vue-router";
 
-Vue.use(Router)
+Vue.use(Router);
 
 /* Layout */
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 /**
  * Note: 路由配置项
@@ -31,153 +31,179 @@ import Layout from '@/layout'
 // 公共路由
 export const constantRoutes = [
   {
-    path: '/redirect',
+    path: "/redirect",
     component: Layout,
     hidden: true,
     children: [
       {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect')
-      }
-    ]
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect"),
+      },
+    ],
   },
   {
-    path: '/login',
-    component: () => import('@/views/login'),
-    hidden: true
+    path: "/3dmodel",
+    component: () => import("@/views/3dmodel"),
+    hidden: true,
   },
   {
-    path: '/register',
-    component: () => import('@/views/register'),
-    hidden: true
+    path: "/login",
+    component: () => import("@/views/login"),
+    hidden: true,
   },
   {
-    path: '/404',
-    component: () => import('@/views/error/404'),
-    hidden: true
+    path: "/register",
+    component: () => import("@/views/register"),
+    hidden: true,
   },
   {
-    path: '/401',
-    component: () => import('@/views/error/401'),
-    hidden: true
+    path: "/404",
+    component: () => import("@/views/error/404"),
+    hidden: true,
   },
   {
-    path: '',
+    path: "/401",
+    component: () => import("@/views/error/401"),
+    hidden: true,
+  },
+  {
+    path: "",
     component: Layout,
-    redirect: 'index',
+    redirect: "index",
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
+        path: "index",
+        component: () => import("@/views/index"),
+        hidden: true,
+        name: "Index",
+        meta: { title: "首页", icon: "dashboard", affix: true },
+      },
+    ],
   },
   {
-    path: '/user',
+    path: "/user",
     component: Layout,
     hidden: true,
-    redirect: 'noredirect',
+    redirect: "noredirect",
     children: [
       {
-        path: 'profile',
-        component: () => import('@/views/system/user/profile/index'),
-        name: 'Profile',
-        meta: { title: '个人中心', icon: 'user' }
-      }
-    ]
-  }
-]
+        path: "profile",
+        component: () => import("@/views/system/user/profile/index"),
+        name: "Profile",
+        meta: { title: "个人中心", icon: "user" },
+      },
+    ],
+  },
+  {
+    path: "",
+    component: Layout,
+    redirect: "dictGl",
+    children: [
+      {
+        path: "/volunteer/zyzsjgl/zdgl/:dictId(\\d+)",
+        component: () => import("@/views/volunteer/userbq/dictGl/data"),
+        hidden: true,
+        name: "dictGl",
+        meta: {
+          title: "字典详情",
+          icon: "dashboard",
+          affix: true,
+          activeMenu: "/volunteer/userbq/dictGl",
+        },
+      },
+    ],
+  },
+];
 
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [
   {
-    path: '/system/user-auth',
+    path: "/system/user-auth",
     component: Layout,
     hidden: true,
-    permissions: ['system:user:edit'],
+    permissions: ["system:user:edit"],
     children: [
       {
-        path: 'role/:userId(\\d+)',
-        component: () => import('@/views/system/user/authRole'),
-        name: 'AuthRole',
-        meta: { title: '分配角色', activeMenu: '/system/user' }
-      }
-    ]
+        path: "role/:userId(\\d+)",
+        component: () => import("@/views/system/user/authRole"),
+        name: "AuthRole",
+        meta: { title: "分配角色", activeMenu: "/system/user" },
+      },
+    ],
   },
   {
-    path: '/system/role-auth',
+    path: "/system/role-auth",
     component: Layout,
     hidden: true,
-    permissions: ['system:role:edit'],
+    permissions: ["system:role:edit"],
     children: [
       {
-        path: 'user/:roleId(\\d+)',
-        component: () => import('@/views/system/role/authUser'),
-        name: 'AuthUser',
-        meta: { title: '分配用户', activeMenu: '/system/role' }
-      }
-    ]
+        path: "user/:roleId(\\d+)",
+        component: () => import("@/views/system/role/authUser"),
+        name: "AuthUser",
+        meta: { title: "分配用户", activeMenu: "/system/role" },
+      },
+    ],
   },
   {
-    path: '/system/dict-data',
+    path: "/system/dict-data",
     component: Layout,
     hidden: true,
-    permissions: ['system:dict:list'],
+    permissions: ["system:dict:list"],
     children: [
       {
-        path: 'index/:dictId(\\d+)',
-        component: () => import('@/views/system/dict/data'),
-        name: 'Data',
-        meta: { title: '字典数据', activeMenu: '/system/dict' }
-      }
-    ]
+        path: "index/:dictId(\\d+)",
+        component: () => import("@/views/system/dict/data"),
+        name: "Data",
+        meta: { title: "字典数据", activeMenu: "/system/dict" },
+      },
+    ],
   },
+
   {
-    path: '/monitor/job-log',
+    path: "/monitor/job-log",
     component: Layout,
     hidden: true,
-    permissions: ['monitor:job:list'],
+    permissions: ["monitor:job:list"],
     children: [
       {
-        path: 'index/:jobId(\\d+)',
-        component: () => import('@/views/monitor/job/log'),
-        name: 'JobLog',
-        meta: { title: '调度日志', activeMenu: '/monitor/job' }
-      }
-    ]
+        path: "index/:jobId(\\d+)",
+        component: () => import("@/views/monitor/job/log"),
+        name: "JobLog",
+        meta: { title: "调度日志", activeMenu: "/monitor/job" },
+      },
+    ],
   },
   {
-    path: '/tool/gen-edit',
+    path: "/tool/gen-edit",
     component: Layout,
     hidden: true,
-    permissions: ['tool:gen:edit'],
+    permissions: ["tool:gen:edit"],
     children: [
       {
-        path: 'index/:tableId(\\d+)',
-        component: () => import('@/views/tool/gen/editTable'),
-        name: 'GenEdit',
-        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
-      }
-    ]
-  }
-]
+        path: "index/:tableId(\\d+)",
+        component: () => import("@/views/tool/gen/editTable"),
+        name: "GenEdit",
+        meta: { title: "修改生成配置", activeMenu: "/tool/gen" },
+      },
+    ],
+  },
+];
 
 // 防止连续点击多次路由报错
 let routerPush = Router.prototype.push;
 let routerReplace = Router.prototype.replace;
 // push
 Router.prototype.push = function push(location) {
-  return routerPush.call(this, location).catch(err => err)
-}
+  return routerPush.call(this, location).catch((err) => err);
+};
 // replace
 Router.prototype.replace = function push(location) {
-  return routerReplace.call(this, location).catch(err => err)
-}
+  return routerReplace.call(this, location).catch((err) => err);
+};
 
 export default new Router({
   // mode: 'history', // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
-})
+  routes: constantRoutes,
+});

src/store/getters.js

@@ -1,19 +1,22 @@
 const getters = {
-  sidebar: state => state.app.sidebar,
-  size: state => state.app.size,
-  device: state => state.app.device,
-  dict: state => state.dict.dict,
-  visitedViews: state => state.tagsView.visitedViews,
-  cachedViews: state => state.tagsView.cachedViews,
-  token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name,
-  introduction: state => state.user.introduction,
-  roles: state => state.user.roles,
-  permissions: state => state.user.permissions,
-  permission_routes: state => state.permission.routes,
-  topbarRouters:state => state.permission.topbarRouters,
-  defaultRoutes:state => state.permission.defaultRoutes,
-  sidebarRouters:state => state.permission.sidebarRouters,
-}
-export default getters
+  sidebar: (state) => state.app.sidebar,
+  size: (state) => state.app.size,
+  device: (state) => state.app.device,
+  dict: (state) => state.dict.dict,
+  visitedViews: (state) => state.tagsView.visitedViews,
+  cachedViews: (state) => state.tagsView.cachedViews,
+  token: (state) => state.user.token,
+  avatar: (state) => state.user.avatar,
+  name: (state) => state.user.name,
+  userId: (state) => state.user.userId,
+  introduction: (state) => state.user.introduction,
+  roles: (state) => state.user.roles,
+  permissions: (state) => state.user.permissions,
+  permission_routes: (state) => state.permission.routes,
+  topbarRouters: (state) => state.permission.topbarRouters,
+  defaultRoutes: (state) => state.permission.defaultRoutes,
+  sidebarRouters: (state) => state.permission.sidebarRouters,
+  integral: (state) => state.permission.integral,
+  isMenuHeader: (state) => state.user.isMenuHeader,
+};
+export default getters;

src/store/modules/permission.js

@@ -1,9 +1,10 @@
-import auth from '@/plugins/auth'
-import router, { constantRoutes, dynamicRoutes } from '@/router'
-import { getRouters } from '@/api/menu'
-import Layout from '@/layout/index'
-import ParentView from '@/components/ParentView'
-import InnerLink from '@/layout/components/InnerLink'
+import auth from "@/plugins/auth";
+import router, { constantRoutes, dynamicRoutes } from "@/router";
+import { getRouters } from "@/api/menu";
+import Layout from "@/layout/index";
+import ParentView from "@/components/ParentView";
+import InnerLink from "@/layout/components/InnerLink";
+import { findIntegral } from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
 
 const permission = {
   state: {
@@ -11,124 +12,149 @@ const permission = {
     addRoutes: [],
     defaultRoutes: [],
     topbarRouters: [],
-    sidebarRouters: []
+    sidebarRouters: [],
+    integral: 0,
   },
   mutations: {
     SET_ROUTES: (state, routes) => {
-      state.addRoutes = routes
-      state.routes = constantRoutes.concat(routes)
+      state.addRoutes = routes;
+      state.routes = constantRoutes.concat(routes);
     },
     SET_DEFAULT_ROUTES: (state, routes) => {
-      state.defaultRoutes = constantRoutes.concat(routes)
+      state.defaultRoutes = constantRoutes.concat(routes);
     },
     SET_TOPBAR_ROUTES: (state, routes) => {
-      state.topbarRouters = routes
+      state.topbarRouters = routes;
     },
     SET_SIDEBAR_ROUTERS: (state, routes) => {
       // console.log(routes)
-      state.sidebarRouters = routes
+      state.sidebarRouters = routes;
+    },
+    SET_INTEGRAL: (state, integral) => {
+      state.integral = integral;
     },
   },
   actions: {
+    FindIntegralData({ commit }) {
+      getFindIntegral().then((integral) => {
+        commit("SET_INTEGRAL", integral);
+      });
+    },
     // 生成路由
     GenerateRoutes({ commit }) {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         // 向后端请求路由数据
-        getRouters().then(res => {
-          const sdata = JSON.parse(JSON.stringify(res.data))
-          const rdata = JSON.parse(JSON.stringify(res.data))
-          const sidebarRoutes = filterAsyncRouter(sdata)
-          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
+        getRouters().then((res) => {
+          getFindIntegral().then((integral) => {
+            commit("SET_INTEGRAL", integral);
+          });
+          const sdata = JSON.parse(JSON.stringify(res.data));
+          const rdata = JSON.parse(JSON.stringify(res.data));
+          const sidebarRoutes = filterAsyncRouter(sdata);
+          const rewriteRoutes = filterAsyncRouter(rdata, false, true);
           const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
-          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
+          rewriteRoutes.push({ path: "*", redirect: "/404", hidden: true });
           router.addRoutes(asyncRoutes);
-          commit('SET_ROUTES', rewriteRoutes)
-          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
-          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
-          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
-          resolve(rewriteRoutes)
-        })
-      })
-    }
-  }
-}
+          commit("SET_ROUTES", rewriteRoutes);
+          commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
+          commit("SET_DEFAULT_ROUTES", sidebarRoutes);
+          commit("SET_TOPBAR_ROUTES", sidebarRoutes);
+          resolve(rewriteRoutes);
+        });
+      });
+    },
+  },
+};
 
 // 遍历后台传来的路由字符串，转换为组件对象
 function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
-  return asyncRouterMap.filter(route => {
+  return asyncRouterMap.filter((route) => {
     if (type && route.children) {
-      route.children = filterChildren(route.children)
+      route.children = filterChildren(route.children);
     }
     if (route.component) {
       // Layout ParentView 组件特殊处理
-      if (route.component === 'Layout') {
-        route.component = Layout
-      } else if (route.component === 'ParentView') {
-        route.component = ParentView
-      } else if (route.component === 'InnerLink') {
-        route.component = InnerLink
+      if (route.component === "Layout") {
+        route.component = Layout;
+      } else if (route.component === "ParentView") {
+        route.component = ParentView;
+      } else if (route.component === "InnerLink") {
+        route.component = InnerLink;
       } else {
-        route.component = loadView(route.component)
+        route.component = loadView(route.component);
       }
     }
     if (route.children != null && route.children && route.children.length) {
-      route.children = filterAsyncRouter(route.children, route, type)
+      route.children = filterAsyncRouter(route.children, route, type);
     } else {
-      delete route['children']
-      delete route['redirect']
+      delete route["children"];
+      delete route["redirect"];
     }
-    return true
-  })
+    return true;
+  });
+}
+
+//获取用户积分
+function getFindIntegral() {
+  return new Promise((resolve, reject) => {
+    findIntegral()
+      .then((res) => {
+        resolve(res.data);
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
 }
 
 function filterChildren(childrenMap, lastRouter = false) {
-  var children = []
+  var children = [];
   childrenMap.forEach((el, index) => {
     if (el.children && el.children.length) {
-      if (el.component === 'ParentView' && !lastRouter) {
-        el.children.forEach(c => {
-          c.path = el.path + '/' + c.path
+      if (el.component === "ParentView" && !lastRouter) {
+        el.children.forEach((c) => {
+          c.path = el.path + "/" + c.path;
           if (c.children && c.children.length) {
-            children = children.concat(filterChildren(c.children, c))
-            return
+            children = children.concat(filterChildren(c.children, c));
+            return;
           }
-          children.push(c)
-        })
-        return
+          children.push(c);
+        });
+        return;
       }
     }
     if (lastRouter) {
-      el.path = lastRouter.path + '/' + el.path
+      el.path = lastRouter.path + "/" + el.path;
     }
-    children = children.concat(el)
-  })
-  return children
+    children = children.concat(el);
+  });
+  return children;
 }
 
 // 动态路由遍历，验证是否具备权限
 export function filterDynamicRoutes(routes) {
-  const res = []
-  routes.forEach(route => {
+  const res = [];
+  routes.forEach((route) => {
     if (route.permissions) {
       if (auth.hasPermiOr(route.permissions)) {
-        res.push(route)
+        res.push(route);
       }
     } else if (route.roles) {
       if (auth.hasRoleOr(route.roles)) {
-        res.push(route)
+        res.push(route);
       }
     }
-  })
-  return res
+  });
+  return res;
 }
 
 export const loadView = (view) => {
-  if (process.env.NODE_ENV === 'development') {
-    return (resolve) => require([`@/views/${view}`], resolve)
+  if (process.env.NODE_ENV === "development") {
+    return (resolve) => require([`@/views/${view}`], resolve);
   } else {
     // 使用 import 实现生产环境的路由懒加载
-    return () => import(`@/views/${view}`)
+    return () => import(`@/views/${view}`);
   }
-}
+};
 
-export default permission
+export default permission;

src/store/modules/user.js

@@ -1,96 +1,115 @@
-import { login, logout, getInfo } from '@/api/login'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { login, logout, getInfo } from "@/api/login";
+import { getToken, setToken, removeToken } from "@/utils/auth";
 
 const user = {
   state: {
     token: getToken(),
-    name: '',
-    avatar: '',
+    name: "",
+    userId: "",
+    avatar: "",
     roles: [],
-    permissions: []
+    permissions: [],
+    isMenuHeader: true, //是否显示左边菜单和头部标题
   },
 
   mutations: {
+    SET_IS_MENU_HEADER: (state, isTrue) => {
+      state.isMenuHeader = isTrue;
+    },
     SET_TOKEN: (state, token) => {
-      state.token = token
+      state.token = token;
     },
     SET_NAME: (state, name) => {
-      state.name = name
+      state.name = name;
+    },
+    SET_USER_ID: (state, userId) => {
+      state.userId = userId;
     },
     SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar
+      state.avatar = avatar;
     },
     SET_ROLES: (state, roles) => {
-      state.roles = roles
+      state.roles = roles;
     },
     SET_PERMISSIONS: (state, permissions) => {
-      state.permissions = permissions
-    }
+      state.permissions = permissions;
+    },
   },
 
   actions: {
     // 登录
     Login({ commit }, userInfo) {
-      const username = userInfo.username.trim()
-      const password = userInfo.password
-      const code = userInfo.code
-      const uuid = userInfo.uuid
+      const username = userInfo.username.trim();
+      const password = userInfo.password;
+      const code = userInfo.code;
+      const uuid = userInfo.uuid;
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
-          setToken(res.token)
-          commit('SET_TOKEN', res.token)
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
+        login(username, password, code, uuid)
+          .then((res) => {
+            setToken(res.token);
+            commit("SET_TOKEN", res.token);
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
 
     // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
-        getInfo().then(res => {
-          const user = res.user
-          const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
-          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
-            commit('SET_ROLES', res.roles)
-            commit('SET_PERMISSIONS', res.permissions)
-          } else {
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
-          }
-          commit('SET_NAME', user.userName)
-          commit('SET_AVATAR', avatar)
-          resolve(res)
-        }).catch(error => {
-          reject(error)
-        })
-      })
+        getInfo()
+          .then((res) => {
+            const user = res.user;
+            const avatar =
+              user.avatar == "" || user.avatar == null
+                ? require("@/assets/images/profile.jpg")
+                : process.env.VUE_APP_BASE_API + user.avatar;
+            if (res.roles && res.roles.length > 0) {
+              // 验证返回的roles是否是一个非空数组
+              commit("SET_ROLES", res.roles);
+              commit("SET_PERMISSIONS", res.permissions);
+            } else {
+              commit("SET_ROLES", ["ROLE_DEFAULT"]);
+            }
+            commit("SET_NAME", user.nickName);
+            commit("SET_USER_ID", user.userId);
+            commit("SET_AVATAR", avatar);
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
 
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
-          commit('SET_TOKEN', '')
-          commit('SET_ROLES', [])
-          commit('SET_PERMISSIONS', [])
-          removeToken()
-          resolve()
-        }).catch(error => {
-          reject(error)
-        })
-      })
+        logout(state.token)
+          .then(() => {
+            commit("SET_TOKEN", "");
+            commit("SET_ROLES", []);
+            commit("SET_PERMISSIONS", []);
+            removeToken();
+            resolve();
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
 
     // 前端 登出
     FedLogOut({ commit }) {
-      return new Promise(resolve => {
-        commit('SET_TOKEN', '')
-        removeToken()
-        resolve()
-      })
-    }
-  }
-}
+      return new Promise((resolve) => {
+        commit("SET_TOKEN", "");
+        removeToken();
+        resolve();
+      });
+    },
+  },
+};
 
-export default user
+export default user;

src/utils/request.js

@@ -1,114 +1,154 @@
-import axios from 'axios'
-import { Notification, MessageBox, Message, Loading } from 'element-ui'
-import store from '@/store'
-import { getToken } from '@/utils/auth'
-import errorCode from '@/utils/errorCode'
+import axios from "axios";
+import { Notification, MessageBox, Message, Loading } from "element-ui";
+import store from "@/store";
+import { getToken } from "@/utils/auth";
+import errorCode from "@/utils/errorCode";
 import { tansParams, blobValidate } from "@/utils/ruoyi";
-import cache from '@/plugins/cache'
-import { saveAs } from 'file-saver'
+import cache from "@/plugins/cache";
+import { saveAs } from "file-saver";
+import router from "@/router";
 
 let downloadLoadingInstance;
 // 是否显示重新登录
 export let isRelogin = { show: false };
 
-axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
 // 创建axios实例
 const service = axios.create({
   // axios中请求配置有baseURL选项，表示请求URL公共部分
   baseURL: process.env.VUE_APP_BASE_API,
   // 超时
-  timeout: 10000
-})
+  timeout: 10000,
+});
 
 // request拦截器
-service.interceptors.request.use(config => {
-  // 是否需要设置 token
-  const isToken = (config.headers || {}).isToken === false
-  // 是否需要防止数据重复提交
-  const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
-  if (getToken() && !isToken) {
-    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-  }
-  // get请求映射params参数
-  if (config.method === 'get' && config.params) {
-    let url = config.url + '?' + tansParams(config.params);
-    url = url.slice(0, -1);
-    config.params = {};
-    config.url = url;
-  }
-  if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
-    const requestObj = {
-      url: config.url,
-      data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
-      time: new Date().getTime()
+service.interceptors.request.use(
+  (config) => {
+    // 是否需要设置 token
+    const isToken = (config.headers || {}).isToken === false;
+    // 是否需要防止数据重复提交
+    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;
+
+    if (getToken() && !isToken) {
+      config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
     }
-    const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
-    const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
-    if (requestSize >= limitSize) {
-      console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
-      return config;
+    // if (config.url == "/getInfo" || config.url == "/getRouters") {
+    //   config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改
+    // }
+    // get请求映射params参数
+    if (config.method === "get" && config.params) {
+      let url = config.url + "?" + tansParams(config.params);
+      url = url.slice(0, -1);
+      config.params = {};
+      config.url = url;
     }
-    const sessionObj = cache.session.getJSON('sessionObj')
-    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-      cache.session.setJSON('sessionObj', requestObj)
-    } else {
-      const s_url = sessionObj.url;                  // 请求地址
-      const s_data = sessionObj.data;                // 请求数据
-      const s_time = sessionObj.time;                // 请求时间
-      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交';
-        console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
+    if (
+      !isRepeatSubmit &&
+      (config.method === "post" || config.method === "put")
+    ) {
+      const requestObj = {
+        url: config.url,
+        data:
+          typeof config.data === "object"
+            ? JSON.stringify(config.data)
+            : config.data,
+        time: new Date().getTime(),
+      };
+      const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
+      const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
+      if (requestSize >= limitSize) {
+        console.warn(
+          `[${config.url}]: ` +
+            "请求数据大小超出允许的5M限制，无法进行防重复提交验证。"
+        );
+        return config;
+      }
+      const sessionObj = cache.session.getJSON("sessionObj");
+      if (
+        sessionObj === undefined ||
+        sessionObj === null ||
+        sessionObj === ""
+      ) {
+        cache.session.setJSON("sessionObj", requestObj);
       } else {
-        cache.session.setJSON('sessionObj', requestObj)
+        const s_url = sessionObj.url; // 请求地址
+        const s_data = sessionObj.data; // 请求数据
+        const s_time = sessionObj.time; // 请求时间
+        const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
+        if (
+          s_data === requestObj.data &&
+          requestObj.time - s_time < interval &&
+          s_url === requestObj.url
+        ) {
+          const message = "数据正在处理，请勿重复提交";
+          console.warn(`[${s_url}]: ` + message);
+          return Promise.reject(new Error(message));
+        } else {
+          cache.session.setJSON("sessionObj", requestObj);
+        }
       }
     }
+    return config;
+  },
+  (error) => {
+    console.log(error);
+    Promise.reject(error);
   }
-  return config
-}, error => {
-    console.log(error)
-    Promise.reject(error)
-})
+);
 
 // 响应拦截器
-service.interceptors.response.use(res => {
+service.interceptors.response.use(
+  (res) => {
     // 未设置状态码则默认成功状态
     const code = res.data.code || 200;
     // 获取错误信息
-    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    const msg = errorCode[code] || res.data.msg || errorCode["default"];
     // 二进制数据则直接返回
-    if (res.request.responseType ===  'blob' || res.request.responseType ===  'arraybuffer') {
-      return res.data
+    if (
+      res.request.responseType === "blob" ||
+      res.request.responseType === "arraybuffer"
+    ) {
+      return res.data;
     }
     if (code === 401) {
       if (!isRelogin.show) {
         isRelogin.show = true;
-        MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-          isRelogin.show = false;
-          store.dispatch('LogOut').then(() => {
-            location.href = '/index';
+        MessageBox.confirm(
+          "登录状态已过期，您可以继续留在该页面，或者重新登录",
+          "系统提示",
+          {
+            confirmButtonText: "重新登录",
+            cancelButtonText: "取消",
+            type: "warning",
+          }
+        )
+          .then(() => {
+            isRelogin.show = false;
+            store.dispatch("LogOut").then(() => {
+              // location.href = '/index';
+              router.replace("/login");
+            });
           })
-      }).catch(() => {
-        isRelogin.show = false;
-      });
-    }
-      return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+          .catch(() => {
+            isRelogin.show = false;
+          });
+      }
+      return Promise.reject("无效的会话，或者会话已过期，请重新登录。");
     } else if (code === 500) {
-      Message({ message: msg, type: 'error' })
-      return Promise.reject(new Error(msg))
+      Message({ message: msg, type: "error" });
+      return Promise.reject(new Error(msg));
     } else if (code === 601) {
-      Message({ message: msg, type: 'warning' })
-      return Promise.reject('error')
+      Message({ message: msg, type: "warning" });
+      return Promise.reject("error");
     } else if (code !== 200) {
-      Notification.error({ title: msg })
-      return Promise.reject('error')
+      Notification.error({ title: msg });
+      return Promise.reject("error");
     } else {
-      return res.data
+      return res.data;
     }
   },
-  error => {
-    console.log('err' + error)
+  (error) => {
+    console.log("err" + error);
     let { message } = error;
     if (message == "Network Error") {
       message = "后端接口连接异常";
@@ -117,36 +157,48 @@ service.interceptors.response.use(res => {
     } else if (message.includes("Request failed with status code")) {
       message = "系统接口" + message.substr(message.length - 3) + "异常";
     }
-    Message({ message: message, type: 'error', duration: 5 * 1000 })
-    return Promise.reject(error)
+    Message({ message: message, type: "error", duration: 5 * 1000 });
+    return Promise.reject(error);
   }
-)
+);
 
 // 通用下载方法
 export function download(url, params, filename, config) {
-  downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
-  return service.post(url, params, {
-    transformRequest: [(params) => { return tansParams(params) }],
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    responseType: 'blob',
-    ...config
-  }).then(async (data) => {
-    const isBlob = blobValidate(data);
-    if (isBlob) {
-      const blob = new Blob([data])
-      saveAs(blob, filename)
-    } else {
-      const resText = await data.text();
-      const rspObj = JSON.parse(resText);
-      const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
-      Message.error(errMsg);
-    }
-    downloadLoadingInstance.close();
-  }).catch((r) => {
-    console.error(r)
-    Message.error('下载文件出现错误，请联系管理员！')
-    downloadLoadingInstance.close();
-  })
+  downloadLoadingInstance = Loading.service({
+    text: "正在下载数据，请稍候",
+    spinner: "el-icon-loading",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  return service
+    .post(url, params, {
+      transformRequest: [
+        (params) => {
+          return tansParams(params);
+        },
+      ],
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      responseType: "blob",
+      ...config,
+    })
+    .then(async (data) => {
+      const isBlob = blobValidate(data);
+      if (isBlob) {
+        const blob = new Blob([data]);
+        saveAs(blob, filename);
+      } else {
+        const resText = await data.text();
+        const rspObj = JSON.parse(resText);
+        const errMsg =
+          errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
+        Message.error(errMsg);
+      }
+      downloadLoadingInstance.close();
+    })
+    .catch((r) => {
+      console.error(r);
+      Message.error("下载文件出现错误，请联系管理员！");
+      downloadLoadingInstance.close();
+    });
 }
 
-export default service
+export default service;

src/views/3dmodel.vue

@@ -0,0 +1,86 @@
+<!--
+ * @Author: 张涛
+ * @Date: 2023-10-31 17:28:25
+ * @LastEditors: 张涛
+ * @LastEditTime: 2023-11-01 10:50:27
+ * @FilePath: \volunteer-pc\src\views\3dmodel.vue
+-->
+<template>
+  <div class="page">
+    <!-- src="http://localhost/3dmodel/star.obj" -->
+    <!-- src="https://www.jichuanglanhai.com/demo/3dmodel/2.obj"  -->
+    <model-obj
+      ref="model"
+      src="https://www.jichuanglanhai.com/demo/3dmodel/star.obj"
+      :rotation="rotation"
+      :position="position"
+      :scale="scale"
+      :lights="lights"
+      @on-load="onLoad"
+      :controls-options="{}"
+    />
+  </div>
+</template>
+<script>
+import { ModelObj } from "vue-3d-model";
+
+export default {
+  components: {
+    ModelObj,
+  },
+  data() {
+    return {
+      rotation: {
+        x: 0,
+        y: 0,
+        z: 0,
+      },
+      position: {
+        x: 0,
+        y: 0,
+        z: 0,
+      },
+      scale: {
+        x: 0.5,
+        y: 0.5,
+        z: 0.5,
+      },
+      lights: [
+        {
+          type: "HemisphereLight",
+          position: { x: 0, y: 1, z: 0 },
+          skyColor: 0xffd700,
+          groundColor: 0xffd700,
+          intensity: 0.2,
+        },
+        {
+          type: "DirectionalLight",
+          position: { x: 1, y: 1, z: 1 },
+          color: 0xffffff,
+          intensity: 0.8,
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onLoad() {
+      this.rotate();
+    },
+    rotate() {
+      this.rotation.y += 0.01;
+
+      requestAnimationFrame(this.rotate);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.page {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/components/myInput/index.vue

@@ -8,7 +8,7 @@
 -->
 <template>
   <div class="my-inputs">
-    <el-input v-model="input" :placeholder="placeholder" clearable @change="changeValue"></el-input>
+    <el-input v-model="input" :placeholder="placeholder" clearable @clear="cleara"></el-input>
     <div class="btn" @click="inputValue"><i class="el-icon-search"></i></div>
   </div>
 </template>
@@ -16,37 +16,39 @@
 export default {
   data() {
     return {
-      input:'',
-    }
+      input: "",
+    };
   },
-  props:{
-    placeholder:{
-      type:String,
-      default:'请输入内容'
-    }
+  props: {
+    placeholder: {
+      type: String,
+      default: "请输入关键字",
+    },
   },
-  methods:{
-    inputValue(){
-      this.$emit('changeInput',this.input)
+  methods: {
+    inputValue() {
+      this.$emit("clickSearch", this.input);
     },
-    changeValue(){
-      this.$emit('changeValue',this.input)
+    cleara(){
+      this.$emit("cleara");
     }
   },
-}
+};
 </script>
 <style lang="scss" scoped>
 .my-inputs {
   display: flex;
+  height: 35px;
+  margin-bottom: 15px;
   ::v-deep .el-input {
     width: 515px;
-    height: 40px;
+    height: 100%;
     .el-input__inner {
       width: 100%;
       height: 100%;
       border-right: none;
       border-radius: 4px 0 0 4px;
-      border: 1px solid #DBD7D7;
+      // border: 1px solid #dbd7d7;
     }
   }
   .btn {
@@ -54,9 +56,9 @@ export default {
     align-items: center;
     justify-content: center;
     width: 52px;
-    height: 40px;
+    height: 100%;
     border-radius: 0 4px 4px 0;
-    background-color: #F8414D;
+    background-color: #f8414d;
     cursor: pointer;
     color: #fff;
   }

src/views/login.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">若依后台管理系统</h3>
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <h3 class="title">苏州园区志愿服务活动区块链平台</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -9,7 +14,11 @@
           auto-complete="off"
           placeholder="账号"
         >
-          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
@@ -20,10 +29,14 @@
           placeholder="密码"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
         </el-input>
       </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
+      <!-- <el-form-item prop="code" v-if="captchaEnabled">
         <el-input
           v-model="loginForm.code"
           auto-complete="off"
@@ -31,32 +44,42 @@
           style="width: 63%"
           @keyup.enter.native="handleLogin"
         >
-          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+          <svg-icon
+            slot="prefix"
+            icon-class="validCode"
+            class="el-input__icon input-icon"
+          />
         </el-input>
         <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+          <img :src="codeUrl" @click="getCode" class="login-code-img" />
         </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
+      </el-form-item> -->
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin: 0px 0px 25px 0px"
+        >记住密码</el-checkbox
+      >
+      <el-form-item style="width: 100%">
         <el-button
           :loading="loading"
           size="medium"
           type="primary"
-          style="width:100%;"
+          style="width: 100%"
           @click.native.prevent="handleLogin"
         >
           <span v-if="!loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        <div style="float: right" v-if="register">
+          <router-link class="link-type" :to="'/register'"
+            >立即注册</router-link
+          >
         </div>
       </el-form-item>
     </el-form>
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
+      <!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span> -->
     </div>
   </div>
 </template>
@@ -64,7 +87,7 @@
 <script>
 import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import { encrypt, decrypt } from '@/utils/jsencrypt'
+import { encrypt, decrypt } from "@/utils/jsencrypt";
 
 export default {
   name: "Login",
@@ -72,36 +95,36 @@ export default {
     return {
       codeUrl: "",
       loginForm: {
-        username: "admin",
-        password: "admin123",
+        username: "",
+        password: "",
         rememberMe: false,
         code: "",
-        uuid: ""
+        uuid: "",
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" }
+          { required: true, trigger: "blur", message: "请输入您的账号" },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+        // code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
-      captchaEnabled: true,
+      captchaEnabled: false,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
     };
   },
   watch: {
     $route: {
-      handler: function(route) {
+      handler: function (route) {
         this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   created() {
     this.getCode();
@@ -109,8 +132,9 @@ export default {
   },
   methods: {
     getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
           this.codeUrl = "data:image/gif;base64," + res.img;
           this.loginForm.uuid = res.uuid;
@@ -120,38 +144,46 @@ export default {
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
       };
     },
     handleLogin() {
-      this.$refs.loginForm.validate(valid => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
           this.loading = true;
           if (this.loginForm.rememberMe) {
             Cookies.set("username", this.loginForm.username, { expires: 30 });
-            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
-            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
             Cookies.remove("username");
             Cookies.remove("password");
-            Cookies.remove('rememberMe');
+            Cookies.remove("rememberMe");
           }
-          this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
-          }).catch(() => {
-            this.loading = false;
-            if (this.captchaEnabled) {
-              this.getCode();
-            }
-          });
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

src/views/volunteer/addressGl/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="app-container">
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      class="user-address"
+    >
+      <el-form-item label="姓名" prop="consigneeName">
+        <el-input v-model="form.consigneeName"></el-input>
+      </el-form-item>
+      <el-form-item label="手机号" prop="consigneePhonenumber">
+        <el-input v-model="form.consigneePhonenumber"></el-input>
+      </el-form-item>
+      <el-form-item label="详细地址" prop="address">
+        <el-input v-model="form.address" type="textarea" :rows="3"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit()">提 交</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getUserProfile, updateUserProfile } from "@/api/system/user.js";
+export default {
+  data() {
+    return {
+      form: {},
+      rules: {
+        consigneeName: [
+          { required: true, message: "请输入姓名", trigger: "blur" },
+        ],
+        consigneePhonenumber: [
+          { required: true, message: "请输入手机号", trigger: "blur" },
+        ],
+        address: [
+          { required: true, message: "请输入详细地址", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.getUserInfo();
+  },
+  methods: {
+    getUserInfo() {
+      getUserProfile().then((res) => {
+        this.form = res.data;
+        console.log(this.form, res);
+      });
+    },
+    handleSubmit() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          updateUserProfile(this.form).then(() => {
+            this.$modal.msgSuccess("提交成功");
+          });
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.user-address {
+  padding: 30px 15px 0 15px;
+  width: 500px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+}
+</style>

src/views/volunteer/components/invite.vue

@@ -1,60 +1,101 @@
 <template>
   <div>
     <div class="tables">
+      <div class="plan-topBox">
+        <my-input
+          placeholder="请输入活动内容"
+          @clickSearch="changeValue"
+          @cleara="cleara"
+        ></my-input>
+      </div>
       <el-table
         :data="tableData"
         :border="false"
         :height="505"
         v-loading="loading"
         tooltip-effect="light"
-        :row-class-name="tableRowClassName"
         :cell-style="cellStyle"
       >
+        <!-- :row-class-name="tableRowClassName" -->
         <el-table-column
           label="序号"
           type="index"
           header-align="center"
-          width="70">
+          width="70"
+        >
         </el-table-column>
         <el-table-column
           prop="content"
-          label="参与活动"
-          width="280"
+          label="活动名称1"
+          show-overflow-tooltip
+          width="180"
         >
           <template slot-scope="scope">
             <div class="activity">
-              <div>{{ scope.row.content.split(' ')[0] }}</div>
-              <div>{{ scope.row.content.split(' ')[1] }}</div>
+              <div>{{ scope.row.name }}</div>
+              <div>{{ scope.row.content }}</div>
             </div>
           </template>
         </el-table-column>
         <el-table-column
-          prop="person"
-          label="参与人员"
+          prop="address"
+          label="活动地址"
           show-overflow-tooltip
-          width="180"
+          width="100"
         >
         </el-table-column>
-        <el-table-column
-          prop="duration"
-          label="状态"
+        <!-- <el-table-column prop="duration" label="服务时长"> </el-table-column> -->
+        <el-table-column prop="degreeOfMatch" label="匹配度">
+          <template slot-scope="scope">
+            <div class="degreeOfMatch">
+              <div>{{ scope.row.degreeOfMatch }}%</div>
+            </div>
+          </template></el-table-column
         >
-        </el-table-column>
         <el-table-column
-          prop="time"
-          label="兑换时间"
+          prop="publisher"
+          label="活动举办方"
+          show-overflow-tooltip
         >
         </el-table-column>
-        <el-table-column
-          label="操作"
-          width="250"
-        >
+
+        <el-table-column prop="activityTime" label="参加时间">
+          <template slot-scope="scope">
+            <div>{{ scope.row.activityTime.split(" ")[0] }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="involveStaus" label="状态">
+          <template slot-scope="scope">
+            <div class="activity">
+              <div
+                :style="{
+                  color:
+                    scope.row.activityStatus == 2 ||
+                    scope.row.activityStatus == 3
+                      ? '#67C23A'
+                      : '#F56C6C',
+                }"
+              >
+                {{ filterStatus(scope.row.activityStatus) }}
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150">
           <template slot-scope="scope">
             <div class="tabs-btns">
               <div class="look" @click="look(scope.row)">
-                <img src="@/assets/images/look.png" alt="">
+                <!-- <img src="@/assets/images/look.png" alt="" /> -->
                 <span>查看</span>
               </div>
+              <div
+                class="look"
+                @click="participation(scope.row)"
+                v-if="scope.row.activityStatus != 2"
+              >
+                <!-- <img src="@/assets/images/look.png" alt=""> -->
+                <span>报名</span>
+              </div>
             </div>
           </template>
         </el-table-column>
@@ -63,93 +104,164 @@
     <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 myPagination from "@/views/components/myPagination/index.vue";
+import myDialog from "@/views/components/dialog/index.vue";
+import { mapState } from "vuex";
+import { Loading } from "element-ui";
+import myInput from "@/views/components/myInput/index.vue";
+
 export default {
-  components:{myPagination},
+  components: { myPagination, myDialog, myInput },
   data() {
     return {
-      tableData: [
-        {
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'11',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },
-      ],
-      pages:{
-        pageSize:10,
-        pageNum:1
+      tableData: [],
+      pages: {
+        pageSize: 10,
+        pageNum: 1,
+        userId: this.$store.getters.userId,
       },
-      total:0,
-      loading:false,
-    }
-  },
-  props:{
-    value:{
-      type:String,
-      default:''
-    }
-  },
-  watch:{
-    value:{
-      handler(newInput,oldInput) {
-        // 搜索值
+      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",
+      ],
+    };
   },
-  methods:{
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
+  },
+  watch: {},
+  methods: {
+    filterStatus(status) {
+      if (status == 0 || status == 1) {
+        return "未报名";
+      } else if (status == 2) {
+        return "已报名";
+      } else if (status == 3) {
+        return "报名成功";
+      } else if (status == 4) {
+        return "报名失败";
+      }
+    },
+    // 清空
+    cleara() {
+      this.getList("1");
+    },
+    // 监听输入框是否清空
+    changeValue(value) {
+      console.log(value);
+      this.input.name = value;
+      this.pages = {
+        pageNum: 1,
+        pageSize: 10,
+        userId: this.$store.getters.userId,
+      };
+      this.getList();
+    },
+
+    // 获取活动推荐列表
+    async getList(params) {
+      this.loading = true;
+      if (params == "1") {
+        this.pages = {
+          pageNum: 1,
+          pageSize: 10,
+          userId: this.$store.getters.userId,
+        };
+        this.input.name = "";
+      }
+      let obj = { ...this.pages, ...this.input };
+      let data = await this.$api.huodongtuijian.eventInvitations(obj);
+      if (data.code == 200) {
+        this.loading = false;
+        this.tableData = data.rows;
+        this.total = data.total;
+      }
+    },
     // 页码，当前页切换事件
-    pagesChange(pages){
+    pagesChange(pages) {
       // console.log(pages)
-      this.getList(pages)
+      this.getList(pages);
     },
     // tabs不同行给不同class
     tableRowClassName({ row, rowIndex }) {
@@ -163,11 +275,92 @@ export default {
       if (columnIndex === 0) {
         return `text-align:center`;
       } else {
-        return '';
+        return "";
+      }
+    },
+
+    labelgenerate(data) {
+      let result = [];
+      this.arr.forEach((item) => {
+        for (let itemB in data) {
+          if (item == itemB) {
+            //多选后值是数组类型 =》string
+            if (data[itemB]) {
+              data[itemB] = data[itemB].split(",");
+            } else {
+              data[itemB] = [];
+            }
+            result = [...result, ...data[itemB]];
+          }
+        }
+      });
+      return result;
+    },
+    // 查看详情
+    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,
+        userId: this.$store.getters.userId,
+      };
+      let data = await this.$api.huodongtuijian.enroll(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 {
@@ -181,14 +374,14 @@ export default {
         line-height: 20px;
         &:nth-child(1) {
           font-size: 14px;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: "Alibaba PuHuiTi";
           font-weight: 400;
-          color: #4D4949;
+          color: #4d4949;
         }
         &:nth-child(2) {
           width: 180px;
           font-size: 14px;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: "Alibaba PuHuiTi";
           font-weight: 400;
           color: #999191;
           white-space: nowrap;
@@ -202,18 +395,18 @@ export default {
       box-sizing: border-box;
       // text-align: center;
       font-size: 14px;
-      font-family: 'Alibaba PuHuiTi';
+      font-family: "Alibaba PuHuiTi";
       font-weight: 400;
       color: #525966;
       padding: 2px 0;
     }
     th {
       height: 45px;
-      background-color: #F7F5F5;
+      background-color: #f7f5f5;
       font-size: 15px;
-      font-family: 'Alibaba PuHuiTi';
+      font-family: "Alibaba PuHuiTi";
       font-weight: bold;
-      color: #4D4949;
+      color: #4d4949;
       .el-checkbox {
         display: none;
       }
@@ -226,7 +419,7 @@ export default {
     display: flex;
     align-items: center;
     // justify-content: center;
-    .look{
+    .look {
       display: flex;
       // align-items: center;
       margin-right: 30px;
@@ -239,7 +432,7 @@ export default {
         font-size: 15px;
         font-family: Alibaba PuHuiTi;
         font-weight: 400;
-        color: #045FFD;
+        color: #045ffd;
       }
     }
   }
@@ -247,4 +440,44 @@ export default {
 .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>

src/views/volunteer/components/recommend.vue

@@ -1,25 +1,34 @@
 <template>
   <div>
     <div class="tables">
+      <div class="plan-topBox">
+        <my-input
+          placeholder="请输入活动内容"
+          @clickSearch="changeValue"
+          @cleara="cleara"
+        ></my-input>
+      </div>
       <el-table
         :data="tableData"
         :border="false"
         :height="505"
         v-loading="loading"
         tooltip-effect="light"
-        :row-class-name="tableRowClassName"
         :cell-style="cellStyle"
       >
+        <!-- :row-class-name="tableRowClassName" -->
         <el-table-column
           label="序号"
           type="index"
           header-align="center"
-          width="70">
+          width="70"
+        >
         </el-table-column>
         <el-table-column
           prop="content"
-          label="参与活动"
-          width="280"
+          label="活动名称"
+          show-overflow-tooltip
+          width="180"
         >
           <template slot-scope="scope">
             <div class="activity">
@@ -29,42 +38,63 @@
           </template>
         </el-table-column>
         <el-table-column
-          prop="publisher"
-          label="发布方"
+          prop="address"
+          label="活动地址"
           show-overflow-tooltip
-          width="180"
+          width="100"
         >
         </el-table-column>
-        <el-table-column
-          prop="duration"
-          label="服务时长"
+        <!-- <el-table-column prop="duration" label="服务时长"> </el-table-column> -->
+        <el-table-column prop="degreeOfMatch" label="匹配度">
+          <template slot-scope="scope">
+            <div class="degreeOfMatch">
+              <div>{{ scope.row.degreeOfMatch }}%</div>
+            </div>
+          </template></el-table-column
         >
-        </el-table-column>
         <el-table-column
-          prop="address"
-          label="参加地址"
+          prop="publisher"
+          label="活动举办方"
+          show-overflow-tooltip
         >
         </el-table-column>
-        <el-table-column
-          prop="activityTime"
-          label="参加时间"
-        >
+
+        <el-table-column prop="activityTime" label="参加时间">
           <template slot-scope="scope">
-            <div>{{ scope.row.activityTime.split(' ')[0] }}</div>
+            <div>{{ scope.row.activityTime.split(" ")[0] }}</div>
           </template>
         </el-table-column>
-        <el-table-column
-          label="操作"
-          width="250"
-        >
+        <el-table-column prop="involveStaus" label="状态">
+          <template slot-scope="scope">
+            <div class="activity">
+              <div
+                :style="{
+                  color:
+                    scope.row.activityStatus == 2 ||
+                    scope.row.activityStatus == 3
+                      ? '#67C23A'
+                      : '#F56C6C',
+                }"
+              >
+                {{ filterStatus(scope.row.activityStatus) }}
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="150">
           <template slot-scope="scope">
             <div class="tabs-btns">
               <div class="look" @click="look(scope.row)">
-                <img src="@/assets/images/look.png" alt="">
+                <!-- <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=""> -->
+              <div
+                class="look"
+                @click="participation(scope.row)"
+                v-if="
+                  scope.row.activityStatus == 0 || scope.row.activityStatus == 1
+                "
+              >
                 <span>报名</span>
               </div>
             </div>
@@ -96,7 +126,7 @@
         </div>
         <div class="itemE">
           <div>活动时间:</div>
-          <div>{{ dialogContent.activityTime.split(' ')[0] }}</div>
+          <div>{{ dialogContent.activityTime.split(" ")[0] }}</div>
         </div>
       </div>
       <div class="mainsEvents">
@@ -117,7 +147,13 @@
         <div class="itemE">
           <div>活动标签:</div>
           <div class="mainTag">
-            <div v-for="item in dialogContent.label">{{ item.name }}</div>
+            <div
+              v-show="item != ''"
+              v-for="(item, index) in dialogContent.label"
+              :key="index"
+            >
+              {{ item }}
+            </div>
           </div>
         </div>
       </div>
@@ -125,78 +161,108 @@
   </div>
 </template>
 <script>
-import myPagination from "@/views/components/myPagination/index.vue"
-import myDialog from "@/views/components/dialog/index.vue"
+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";
+import myInput from "@/views/components/myInput/index.vue";
+
 export default {
-  components:{myPagination,myDialog},
+  components: { myPagination, myDialog, myInput },
   data() {
     return {
       tableData: [],
-      pages:{
-        pageSize:10,
-        pageNum:1
+      pages: {
+        pageSize: 10,
+        pageNum: 1,
+        userId: this.$store.getters.userId,
       },
-      total:0,
-      loading:false,
-      input:{
-        name:""
+      total: 0,
+      loading: false,
+      input: {
+        name: "",
       },
-      loadingTwo:false,
-      dialogContent:{
-        name:'',
-        content:'',
-        publisher:'',
-        activityTime:'',
-        address:'',
-        label:[]
-      }
-    }
-  },
-  props:{
-    value:{
-      type:String,
-      default:''
-    }
-  },
-  watch:{
-    value:{
-      handler(newInput,oldInput) {
-        // 搜索值
-        this.input.name = newInput;
-        this.pages= {
-          pageNum: 1,
-          pageSize: 10,
-        };
-        this.getList()
+      loadingTwo: false,
+      dialogContent: {
+        name: "",
+        content: "",
+        publisher: "",
+        activityTime: "",
+        address: "",
+        label: [],
       },
-      immediate:true,
-    }
+      arr: [
+        "ageRange",
+        "sexRange",
+        "politicalRange",
+        "educationRange",
+        "housingRange",
+        "industryRange",
+        "interestRange",
+        "professionalRange",
+        "schoolRange",
+        "nationalityRange",
+      ],
+    };
+  },
+  props: {
+    value: {
+      type: String,
+      default: "",
+    },
   },
-  methods:{
+  watch: {},
+  methods: {
+    filterStatus(status) {
+      if (status == 0 || status == 1) {
+        return "未报名";
+      } else if (status == 2) {
+        return "已报名";
+      } else if (status == 3) {
+        return "报名成功";
+      } else if (status == 4) {
+        return "报名失败";
+      }
+    },
+    // 清空
+    cleara() {
+      this.getList("1");
+    },
+    // 监听输入框是否清空
+    changeValue(value) {
+      console.log(value);
+      this.input.name = value;
+      this.pages = {
+        pageNum: 1,
+        pageSize: 10,
+        userId: this.$store.getters.userId,
+      };
+      this.getList();
+    },
+
     // 获取活动推荐列表
-    async getList(params){
+    async getList(params) {
       this.loading = true;
-      if(params == '1') {
-        this.pages= {
+      if (params == "1") {
+        this.pages = {
           pageNum: 1,
           pageSize: 10,
+          userId: this.$store.getters.userId,
         };
-        this.input.name = '';
+        this.input.name = "";
       }
-      let obj = { ...this.pages,...this.input }
-      let data = await this.$api.huodongtuijian.list(obj);
-      if(data.code == 200) {
+      let obj = { ...this.pages, ...this.input };
+      let data = await this.$api.huodongtuijian.eventRecommendations(obj);
+      if (data.code == 200) {
         this.loading = false;
         this.tableData = data.rows;
         this.total = data.total;
       }
     },
     // 页码，当前页切换事件
-    pagesChange(pages){
+    pagesChange(pages) {
       // console.log(pages)
-      this.getList(pages)
+      this.getList(pages);
     },
     // tabs不同行给不同class
     tableRowClassName({ row, rowIndex }) {
@@ -210,59 +276,74 @@ export default {
       if (columnIndex === 0) {
         return `text-align:center`;
       } else {
-        return '';
+        return "";
       }
     },
     // 查看详情
-    async look(row){
-      this.$refs.chakan.open();
+    //标签生成
+    labelgenerate(data) {
+      let result = [];
+      this.arr.forEach((item) => {
+        for (let itemB in data) {
+          if (item == itemB) {
+            //多选后值是数组类型 =》string
+            if (data[itemB]) {
+              data[itemB] = data[itemB].split(",");
+            } else {
+              data[itemB] = [];
+            }
+            result = [...result, ...data[itemB]];
+          }
+        }
+      });
+      return result;
+    },
+    async look(row) {
       this.loadingTwo = true;
       let data = await this.$api.huodongtuijian.activity(row.id);
-      if(data.code == 200){
+      if (data.code == 200) {
         this.loadingTwo = false;
-        let {name,content,publisher,activityTime,address,ageRange,sexRange,politicalRange,educationRange,housingRange,industryRange,interestRange,professionalRange,schoolRange} = data.data;
-        let arr = [];
-        arr.push(ageRange,sexRange,politicalRange,educationRange,housingRange,industryRange,interestRange,professionalRange,schoolRange)
-        let arrtwo = []
-        arr.forEach((item)=>{
-          let obj = {}
-          if(item) {
-            obj['name'] = item
-            arrtwo.push(obj)
-          }
-        })
-        console.log(arrtwo)
-        this.dialogContent = {name,content,publisher,activityTime,address,label:arrtwo};
+        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('是否确定报名活动？', '确认信息', {
+    participation(row) {
+      this.$confirm("是否确定报名活动？", "确认信息", {
         distinguishCancelAndClose: true,
-        confirmButtonText: '确定',
-        cancelButtonText: '取消'
-      })
-      .then(() => {
-        this.action(row)
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
       })
-      .catch(action => {
-        console.log(action)
-      });
+        .then(() => {
+          this.action(row);
+        })
+        .catch((action) => {
+          console.log(action);
+        });
     },
     // 确定参与活动按钮
-    async action(row){
+    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)
+        activityId: row.id,
+        userId: this.$store.getters.userId,
+      };
+      let data = await this.$api.huodongtuijian.enroll(obj);
       // alert('submit!');
-      if(data.code == 200) {
+      if (data.code == 200) {
         downloadLoadingInstance.close();
         this.$message({
           message: "申请报名成功",
@@ -272,14 +353,14 @@ export default {
       }
     },
     // 关闭
-    close(){
+    close() {
       this.$refs.participation.Close();
-    }
+    },
   },
-  mounted(){
+  mounted() {
     this.getList();
-  }
-}
+  },
+};
 </script>
 <style lang="scss" scoped>
 .tables {
@@ -293,14 +374,14 @@ export default {
         line-height: 20px;
         &:nth-child(1) {
           font-size: 14px;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: "Alibaba PuHuiTi";
           font-weight: 400;
-          color: #4D4949;
+          color: #4d4949;
         }
         &:nth-child(2) {
           width: 180px;
           font-size: 14px;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: "Alibaba PuHuiTi";
           font-weight: 400;
           color: #999191;
           white-space: nowrap;
@@ -314,18 +395,18 @@ export default {
       box-sizing: border-box;
       // text-align: center;
       font-size: 14px;
-      font-family: 'Alibaba PuHuiTi';
+      font-family: "Alibaba PuHuiTi";
       font-weight: 400;
       color: #525966;
       padding: 2px 0;
     }
     th {
       height: 45px;
-      background-color: #F7F5F5;
+      background-color: #f7f5f5;
       font-size: 15px;
-      font-family: 'Alibaba PuHuiTi';
+      font-family: "Alibaba PuHuiTi";
       font-weight: bold;
-      color: #4D4949;
+      color: #4d4949;
       .el-checkbox {
         display: none;
       }
@@ -338,7 +419,7 @@ export default {
     display: flex;
     align-items: center;
     // justify-content: center;
-    .look{
+    .look {
       display: flex;
       // align-items: center;
       margin-right: 30px;
@@ -351,7 +432,7 @@ export default {
         font-size: 15px;
         font-family: Alibaba PuHuiTi;
         font-weight: 400;
-        color: #045FFD;
+        color: #045ffd;
       }
     }
   }
@@ -365,15 +446,15 @@ export default {
 ::v-deep .mainsEvents {
   // height: 35px;
   display: flex;
-  align-items: center;
+  // align-items: center;
   font-family: "Alibaba-PuHuiTi-Regular";
-  margin-bottom: 12px;
+  margin-bottom: 20px;
   .itemE {
     width: 50%;
     display: flex;
     & > div:nth-of-type(1) {
       display: flex;
-      align-items: center;
+      // align-items: center;
       color: #4c4949;
       width: 26%;
     }

src/views/volunteer/conversionRecord/index.vue

@@ -9,7 +9,11 @@
 <template>
   <div class="plan-management">
     <div class="plan-topBox">
-      <my-input @changeInput="changeInput" placeholder="请输入活动内容" @changeValue="changeValue"></my-input>
+      <my-input
+        @changeInput="changeInput"
+        placeholder="请输入活动内容"
+        @changeValue="changeValue"
+      ></my-input>
     </div>
     <div class="plan-bottomBox">
       <div class="tables">
@@ -26,17 +30,14 @@
             label="序号"
             type="index"
             header-align="center"
-            width="70">
-          </el-table-column>
-          <el-table-column
-            prop="content"
-            label="参与活动"
-            width="280"
+            width="70"
           >
+          </el-table-column>
+          <el-table-column prop="content" label="参与活动" width="280">
             <template slot-scope="scope">
               <div class="activity">
-                <div>{{ scope.row.content.split(' ')[0] }}</div>
-                <div>{{ scope.row.content.split(' ')[1] }}</div>
+                <div>{{ scope.row.content.split(" ")[0] }}</div>
+                <div>{{ scope.row.content.split(" ")[1] }}</div>
               </div>
             </template>
           </el-table-column>
@@ -47,24 +48,13 @@
             width="180"
           >
           </el-table-column>
-          <el-table-column
-            prop="duration"
-            label="状态"
-          >
-          </el-table-column>
-          <el-table-column
-            prop="time"
-            label="兑换时间"
-          >
-          </el-table-column>
-          <el-table-column
-            label="操作"
-            width="250"
-          >
+          <el-table-column prop="duration" label="状态"> </el-table-column>
+          <el-table-column prop="time" label="兑换时间"> </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="">
+                  <!-- <img src="@/assets/images/look.png" alt="" /> -->
                   <span>查看</span>
                 </div>
               </div>
@@ -73,14 +63,17 @@
         </el-table>
       </div>
       <div class="pagination">
-        <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
+        <my-pagination
+          :total="total"
+          @pagesChange="pagesChange"
+        ></my-pagination>
       </div>
     </div>
     <my-dialog ref="conversion">
       <div class="conversionInfo">
         <div class="basicInfo">
           <div class="title">
-            <img src="@/assets/images/huodong.png" alt="">
+            <img src="@/assets/images/huodong.png" alt="" />
             <span>活动详情</span>
           </div>
           <div class="info">
@@ -114,17 +107,17 @@
         </div>
         <div class="logisticsInfo">
           <div class="title">
-            <img src="@/assets/images/huodong.png" alt="">
+            <img src="@/assets/images/huodong.png" alt="" />
             <span>物流信息</span>
           </div>
           <div class="info">
             <div class="lists">
               <div class="list-left">
-                <div>寄件人：</div>
+                <div>快递公司：</div>
                 <div>XXXXXXXXX</div>
               </div>
               <div class="list-right">
-                <div>寄件地址：</div>
+                <div>快递单号：</div>
                 <div>XXXXXXXXXXX</div>
               </div>
             </div>
@@ -138,99 +131,108 @@
   </div>
 </template>
 <script>
-import myPagination from "@/views/components/myPagination/index.vue"
-import myInput from "@/views/components/myInput/index.vue"
-import myDialog from "@/views/components/dialog/index.vue"
+import myPagination from "@/views/components/myPagination/index.vue";
+import myInput from "@/views/components/myInput/index.vue";
+import myDialog from "@/views/components/dialog/index.vue";
 export default {
-  components:{myPagination,myInput,myDialog},
+  components: { myPagination, myInput, myDialog },
   data() {
     return {
       tableData: [
         {
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
-        },{
-          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
-          person:'吴加好',
-          duration:'10',
-          time:'2023-08-14'
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
+        },
+        {
+          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
+          person: "吴加好",
+          duration: "10",
+          time: "2023-08-14",
         },
       ],
       input: {
-        name:''
+        name: "",
       },
-      pages:{
-        pageSize:10,
-        pageNum:1
+      pages: {
+        pageSize: 10,
+        pageNum: 1,
       },
-      total:0,
-      loading:false,
-      isClick:false,
-    }
+      total: 0,
+      loading: false,
+      isClick: false,
+    };
   },
-  methods:{
+  methods: {
     // 页码，当前页切换事件
-    pagesChange(pages){
+    pagesChange(pages) {
       // console.log(pages)
-      this.getList(pages)
+      this.getList(pages);
     },
     // 输入框的值
-    changeInput(value){
+    changeInput(value) {
       this.input.name = value;
       this.isClick = true;
-      this.pages= {
+      this.pages = {
         pageNum: 1,
         pageSize: 10,
       };
       this.getList();
     },
     // 监听输入框是否清空
-    changeValue(value){
-      if(this.isClick && value == ''){
-        this.input.name = '';
-        this.pages= {
+    changeValue(value) {
+      if (this.isClick && value == "") {
+        this.input.name = "";
+        this.pages = {
           pageNum: 1,
           pageSize: 10,
         };
@@ -250,25 +252,21 @@ export default {
       if (columnIndex === 0) {
         return `text-align:center`;
       } else {
-        return '';
+        return "";
       }
     },
-    getList(){
-
-    },
+    getList() {},
     // 查看详情
-    look(item){
-      this.$refs.conversion.open()
+    look(item) {
+      this.$refs.conversion.open();
     },
     // 关闭
-    close(){
-      this.$refs.conversion.Close()
-    }
-  },
-  async created() {
-
+    close() {
+      this.$refs.conversion.Close();
+    },
   },
-}
+  async created() {},
+};
 </script>
 <style lang="scss" scoped>
 .plan-management {
@@ -277,7 +275,7 @@ export default {
   height: 100%;
   width: 100%;
   border-radius: 10px 10px 0 0;
-  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
+  box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
   .plan-topBox {
     padding: 30px 0 0 0;
   }
@@ -294,14 +292,14 @@ export default {
             line-height: 20px;
             &:nth-child(1) {
               font-size: 14px;
-              font-family: 'Alibaba PuHuiTi';
+              font-family: "Alibaba PuHuiTi";
               font-weight: 400;
-              color: #4D4949;
+              color: #4d4949;
             }
             &:nth-child(2) {
               width: 180px;
               font-size: 14px;
-              font-family: 'Alibaba PuHuiTi';
+              font-family: "Alibaba PuHuiTi";
               font-weight: 400;
               color: #999191;
               white-space: nowrap;
@@ -315,18 +313,18 @@ export default {
           box-sizing: border-box;
           // text-align: center;
           font-size: 14px;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: "Alibaba PuHuiTi";
           font-weight: 400;
           color: #525966;
           padding: 2px 0;
         }
         th {
           height: 45px;
-          background-color: #F7F5F5;
+          background-color: #f7f5f5;
           font-size: 15px;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: "Alibaba PuHuiTi";
           font-weight: bold;
-          color: #4D4949;
+          color: #4d4949;
           .el-checkbox {
             display: none;
           }
@@ -339,7 +337,7 @@ export default {
         display: flex;
         align-items: center;
         // justify-content: center;
-        .look{
+        .look {
           display: flex;
           // align-items: center;
           margin-right: 30px;
@@ -352,7 +350,7 @@ export default {
             font-size: 15px;
             font-family: Alibaba PuHuiTi;
             font-weight: 400;
-            color: #045FFD;
+            color: #045ffd;
           }
         }
       }
@@ -363,7 +361,8 @@ export default {
   }
 }
 ::v-deep .conversionInfo {
-  .basicInfo,.logisticsInfo {
+  .basicInfo,
+  .logisticsInfo {
     .title {
       display: flex;
       align-items: center;
@@ -373,9 +372,9 @@ export default {
       }
       span {
         font-size: 16px;
-        font-family: 'Alibaba PuHuiTi';
+        font-family: "Alibaba PuHuiTi";
         font-weight: bold;
-        color: #4C4949;
+        color: #4c4949;
       }
     }
     .info {
@@ -387,22 +386,23 @@ export default {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        .list-left,.list-right {
+        .list-left,
+        .list-right {
           flex: 1;
           display: flex;
           align-items: center;
           div {
             &:nth-child(1) {
               font-size: 14px;
-              font-family: 'Alibaba PuHuiTi';
+              font-family: "Alibaba PuHuiTi";
               font-weight: 400;
-              color: #4C4949;
+              color: #4c4949;
             }
             &:nth-child(2) {
               font-size: 14px;
-              font-family: 'Alibaba PuHuiTi';
+              font-family: "Alibaba PuHuiTi";
               font-weight: 400;
-              color: #807A7A;
+              color: #807a7a;
             }
           }
         }
@@ -419,15 +419,15 @@ export default {
     div {
       width: 80px;
       height: 36px;
-      border: 1px solid #F8414D;
+      border: 1px solid #f8414d;
       border-radius: 4px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
-      font-family: 'Alibaba PuHuiTi';
+      font-family: "Alibaba PuHuiTi";
       font-weight: 400;
-      color: #F8414D;
+      color: #f8414d;
       cursor: pointer;
     }
   }

src/views/volunteer/gxhzs/gxhzsdh/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="app-container" ref="main">
+    <div class="search" ref="search">
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
+    </div>
+
+    <ul class="book-main" :style="listStyle" v-if="certificatesList.length > 0">
+      <li
+        v-for="(item, index) in certificatesList"
+        :key="item.id"
+        :style="{ marginBottom: isLastRow(index) ? '0px' : '' }"
+      >
+        <div class="integral-num">积分：{{ item.integral }}</div>
+        <el-image
+          style="width: 100%; height: 87%"
+          :src="baseUrl + item.cover"
+          fit="fill"
+        >
+        </el-image>
+        <div class="operate">
+          <div class="integral">
+            {{ item.name }}
+          </div>
+          <div class="operate-child">
+            <div class="exchange-btn" @click="conversion(item)">兑 换</div>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <div v-if="certificatesList.length == 0" :style="listStyle" class="noData">
+      <el-empty description="暂无证书"></el-empty>
+    </div>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { zskdh, exchange } from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
+export default {
+  data() {
+    return {
+      listStyle: {
+        height: 0,
+        overflowY: "auto",
+      },
+      baseUrl: process.env.VUE_APP_BASE_API,
+      certificatesList: [],
+      loading: false,
+      tableData: [],
+      total: 0,
+      queryParams: {
+        name: undefined,
+        pageNum: 1,
+        pageSize: 10,
+      },
+      form: {},
+      rules: {},
+    };
+  },
+  created() {
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.listStyle.height =
+        this.$refs.main.offsetHeight -
+        40 -
+        this.$refs.search.offsetHeight -
+        42 +
+        "px";
+      this.getList();
+    });
+  },
+  methods: {
+    isLastRow(index) {
+      const rowCount = Math.ceil(this.certificatesList.length / 5);
+      const row = Math.floor(index / 5);
+      return row === rowCount - 1;
+    },
+    /**兑换 */
+    conversion(item) {
+      let data = {
+        certificateId: item.id,
+        type: 0,
+      };
+      this.$modal
+        .confirm(`您确定要兑换“${item.name}”证书吗？`)
+        .then(function () {
+          return exchange(data);
+        })
+        .then(() => {
+          this.$store.dispatch("FindIntegralData");
+          this.getList();
+          this.$modal.msgSuccess("兑换成功！");
+        })
+        .catch(() => {});
+    },
+    /**搜索 */
+    handleSearch(keyWord) {
+      this.queryParams = {
+        name: keyWord,
+        pageNum: 1,
+        pageSize: 10,
+      };
+      this.getList();
+    },
+    /** 查询证书管理列表 */
+    getList() {
+      this.loading = true;
+      zskdh(this.queryParams).then((response) => {
+        this.certificatesList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        type: null,
+        cover: null,
+        content: null,
+        datetime: null,
+        serviceDuration: null,
+        createId: null,
+        createBy: null,
+        createTime: null,
+        updateId: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        userId: null,
+        deptId: null,
+      };
+      this.resetForm("form");
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/myTable.scss";
+</style>

src/views/volunteer/gxhzs/gxhzsff/index.vue

@@ -1,25 +1,10 @@
 <template>
   <div class="app-container" ref="main">
     <div ref="search">
-      <el-form
-        :model="queryParams"
-        ref="queryForm"
-        size="small"
-        :inline="true"
-        class="search-container"
-      >
-        <el-form-item prop="name">
-          <el-input
-            v-model="queryParams.input"
-            placeholder="请输入关键字"
-            clearable
-          >
-            <div class="search-btn" slot="append">
-              <i class="el-icon-search"></i>
-            </div>
-          </el-input>
-        </el-form-item>
-      </el-form>
+      <MyInput
+        v-model="queryParams.certificateName"
+        @clickSearch="handleSearch"
+      />
     </div>
 
     <el-table
@@ -34,36 +19,40 @@
         prop="id"
         width="55"
       />
-      <el-table-column label="参与活动" align="center" prop="activityId" />
-      <el-table-column label="证书id" align="center" prop="certificateId" />
-      <el-table-column label="用户" align="center" prop="uid" />
-      <el-table-column label="状态" align="center" prop="type">
+      <el-table-column label="证书名称" align="center" prop="certificateName" />
+      <el-table-column label="志愿者" align="center" prop="userName" />
+      <el-table-column label="兑换时间" align="center" prop="createTime" />
+      <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
-          {{ scope.row.type == 1 ? "已发放" : "未发放" }}
+          <span
+            :style="{
+              color:
+                scope.row.status == 1
+                  ? '#67C23A'
+                  : scope.row.status == 2 && scope.row.type == 2
+                  ? '#E6A23C'
+                  : '#F56C6C',
+            }"
+          >
+            {{ filterIissuanceStatus(scope.row) }}
+          </span>
         </template>
       </el-table-column>
-      <!-- <el-table-column
-        label="发证时间"
-        align="center"
-        prop="datetime"
-        width="180"
-      >
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.datetime, "{y}-{m}-{d}") }}</span>
-        </template>
-      </el-table-column> -->
       <el-table-column
         label="操作"
         align="center"
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleInfo(scope.row)"
+            >查看</el-button
+          >
           <el-button
             size="mini"
             type="text"
             @click="handleFabu(scope.row)"
-            v-hasPermi="['system:certificates:edit']"
-            >发布</el-button
+            v-if="scope.row.status != 1"
+            >发放</el-button
           >
         </template>
       </el-table-column>
@@ -84,69 +73,207 @@
       </div>
       <div class="info-box">
         <div>
+          <div class="info-form-title">
+            <span></span>
+            证书信息
+          </div>
           <div class="info-item">
-            <div class="item-lable">参与活动:</div>
-            <div class="item-value">{{ form.activityId }}</div>
+            <div class="item-lable">证书名称:</div>
+            <div class="item-value">{{ form.certificateName }}</div>
           </div>
           <div class="info-item">
-            <div class="item-lable">证书id:</div>
-            <div class="item-value">{{ form.certificateId }}</div>
+            <div class="item-lable">志愿者:</div>
+            <div class="item-value">{{ form.userName }}</div>
           </div>
           <div class="info-item">
-            <div class="item-lable">用户:</div>
-            <div class="item-value">{{ form.uid }}</div>
+            <div class="item-lable">兑换时间:</div>
+            <div class="item-value">{{ form.createTime }}</div>
           </div>
           <div class="info-item">
             <div class="item-lable">状态:</div>
             <div class="item-value">
-              {{ form.type == 1 ? "已发放" : "未发放" }}
+              {{ filterIissuanceStatus(form) }}
             </div>
           </div>
+          <div class="info-form-title">
+            <span></span>
+            收货信息
+          </div>
+          <div class="info-item">
+            <div class="item-lable">姓名:</div>
+            <div class="item-value">{{ form.consigneeName }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">手机号:</div>
+            <div class="item-value">{{ form.phonenumber }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">详细地址:</div>
+            <div class="item-value">{{ form.address }}</div>
+          </div>
         </div>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancel">关 闭</el-button>
-        <el-button type="warning" @click="submitPaper">发放纸质证书</el-button>
-        <el-button type="primary" @click="submitElectron"
-          >发放电子证书</el-button
+        <el-button type="warning" @click="submitPaper()"
+          >发放纸制证书</el-button
         >
+        <!-- <el-button type="primary" @click="submitElectron()"
+          >发放电子证书</el-button
+        > -->
       </div>
     </el-dialog>
-    <!-- 纸质证书 -->
+    <!-- 纸制证书 -->
     <el-dialog :visible.sync="infoOpen" width="500px" append-to-body>
       <div slot="title" class="dialog-title">
         <span class="title-line"></span>
         邮政信息
       </div>
-      <Editor v-model="form.content" :min-height="192" />
+      <el-form ref="zzform" :model="form" :rules="zzrules" label-width="80px">
+        <el-form-item label="快递公司" prop="courierCompanies">
+          <el-input
+            v-model="form.courierCompanies"
+            placeholder="请输入快递公司"
+          />
+        </el-form-item>
+        <el-form-item label="快递单号" prop="trackingNumber">
+          <el-input
+            v-model="form.trackingNumber"
+            placeholder="请输入快递公司"
+          />
+        </el-form-item>
+      </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">提 交</el-button>
       </div>
     </el-dialog>
+    <!-- 查看 -->
+    <el-dialog :visible.sync="infoShow" width="600px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        查看
+      </div>
+      <div class="conversionInfo">
+        <div class="basicInfo">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>证书详情</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>证书名称：</div>
+                <div>{{ form.certificateName }}</div>
+              </div>
+              <div class="list-right">
+                <div>志愿者：</div>
+                <div>{{ form.userName }}</div>
+              </div>
+            </div>
+            <div class="lists">
+              <div class="list-left">
+                <div>兑换时间：</div>
+                <div>{{ form.createTime }}</div>
+              </div>
+              <div class="list-left">
+                <div>状态：</div>
+                <div>{{ filterIissuanceStatus(form) }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="logisticsInfo" v-show="form.type == 2">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>纸制证书</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>快递公司：</div>
+                <div>{{ form.courierCompanies }}</div>
+              </div>
+              <div class="list-right">
+                <div>快递单号：</div>
+                <div>{{ form.trackingNumber }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="logisticsInfo" v-show="form.type == 1">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>电子证书</span>
+          </div>
+          <div class="info zs-box" ref="zs">
+            <div class="top-text">
+              <span style="display: inline-block">{{ form.userName }}</span>
+              先生/女士：
+              <p>
+                您在苏州工业园区累计志愿服务0小时，感谢您的无私奉献，特发此证，以兹鼓励。
+              </p>
+            </div>
+            <div class="bottom-text">
+              <div class="lable-value">
+                <div class="lable">签发单位：</div>
+                <div class="value">苏州工业园区宣传和统战部</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">苏州工业园区新时代文明实践中心</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">
+                  {{ $moment().format("YYYY年MM月DD日") }}
+                </div>
+              </div>
+            </div>
+            <div class="zs-z"></div>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            style="margin-top: 10px"
+            @click="downloadContentAsImage()"
+            >下载电子证书</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import {
-  getSellectall,
-  postElectron,
-  getInfo,
-  editData,
+  dsbrecordsList,
+  dsbrecordsInfo,
+  issue,
 } from "@/api/volunteer/gxhzs/hdzsff/index.js";
+import html2canvas from "html2canvas";
 export default {
   data() {
     return {
+      infoShow: false,
       infoOpen: false,
       form: {},
+      zzrules: {
+        courierCompanies: [
+          { required: true, message: "请输入快递公司", trigger: "blur" },
+        ],
+        trackingNumber: [
+          { required: true, message: "请输入快递公司", trigger: "blur" },
+        ],
+      },
       open: false,
       title: "",
       tableHeigth: 0,
-      queryParams: {},
       loading: false,
       tableData: [],
       total: 1,
       queryParams: {
-        creType: 2,
+        certificateName: undefined,
+        creType: 2, //1:一次性证书发放,2：个性化证书发放
         pageNum: 1,
         pageSize: 20,
       },
@@ -156,34 +283,133 @@ export default {
     // //给表格一个固定值
     this.$nextTick(() => {
       this.tableHeigth =
-        this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 75;
+        this.$refs.main.offsetHeight - 40 - this.$refs.search.offsetHeight - 73;
       this.getList();
     });
   },
   methods: {
-    /**纸质提交 */
-    submitForm() {
-      editData(this.form).then((res) => {
-        this.submitElectron();
+    /**状态过滤 */
+    filterIissuanceStatus(row) {
+      if (row.status == 2 && !row.type) {
+        return "未发放";
+      } else if (
+        (row.status == 1 && row.type == 1) ||
+        (row.status == 1 && row.type == 2)
+      ) {
+        return "已发放";
+      } else if (row.status == 2 && row.type == 2) {
+        return "已申请";
+      }
+    },
+    /**下载电子证书 */
+    downloadContentAsImage() {
+      const loading = this.$loading({
+        lock: true,
+        text: "下载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      const content = this.$refs.zs; // 获取目标<div>的DOM节点
+      // 创建一个Canvas元素，并设置宽高等于目标<div>的尺寸
+      const canvas = document.createElement("canvas");
+      canvas.width = content.offsetWidth;
+      canvas.height = content.offsetHeight;
+      const context = canvas.getContext("2d");
+      // 使用Canvas绘制目标<div>中的内容
+      html2canvas(content).then((canvas) => {
+        // 将Canvas转换为DataURL
+        const dataURL = canvas.toDataURL("image/png");
+        // 使用FileSaver.js保存DataURL为图片文件
+        saveAs(dataURL, "download.png");
+        loading.close();
       });
     },
-    /**纸质 */
+
+    /**搜索 */
+    handleSearch(keyWord) {
+      this.queryParams = {
+        certificateName: keyWord,
+        creType: 2, //1:一次性证书发放,2：个性化证书发放
+        pageNum: 1,
+        pageSize: 10,
+      };
+      this.getList();
+    },
+    /**查详情 */
+    async handleInfo(row) {
+      let res = await this.getInfo(row.id);
+      this.form = res.data;
+      this.infoShow = true;
+      // console.log("详情", res);
+    },
+    async getInfo(id) {
+      let res = await dsbrecordsInfo(id);
+      return res;
+    },
+    //发放按钮
+    async handleFabu(row) {
+      this.reset();
+      let res = await this.getInfo(row.id);
+      this.form = res.data;
+      this.title = "发放查看";
+      this.open = true;
+    },
+    //点击制造或者电子验证收货信息是否完整
+    isComplete() {
+      if (!this.form.userName || !this.form.address || !this.form.phonenumber) {
+        this.$modal.msgError("请前往地址管理中添加详细地址！");
+        return false;
+      } else {
+        return true;
+      }
+    },
+    /**纸制 */
     submitPaper() {
-      this.infoOpen = true;
+      let isTrue = this.isComplete();
+      if (isTrue) {
+        this.infoOpen = true;
+      }
     },
-    /**电子 */
-    submitElectron() {
-      let data = {
-        activityId: this.form.activityId,
-        uid: this.form.uid,
-      };
-      postElectron(data).then((res) => {
+    /**纸制提交 */
+    submitForm() {
+      this.$refs["zzform"].validate((valid) => {
+        if (valid) {
+          let data = {
+            status: 1,
+            courierCompanies: this.form.courierCompanies,
+            id: this.form.id,
+            trackingNumber: this.form.trackingNumber,
+            type: 2, //	1:电子证书 2:纸制证书
+          };
+          this.subIssue(data);
+        } else {
+          return false;
+        }
+      });
+    },
+    //发放
+    subIssue(data) {
+      issue(data).then((res) => {
         this.infoOpen = false;
         this.open = false;
-        this.$modal.msgSuccess("发放成功");
         this.getList();
+        this.$modal.msgSuccess("发放成功");
       });
     },
+
+    /**电子 */
+    submitElectron() {
+      let _this = this;
+      this.$modal
+        .confirm(`您确定要发放“${this.form.certificateName}”证书吗？`)
+        .then(function () {
+          let data = {
+            id: _this.form.id,
+            type: 1, //	1:电子证书 2:纸制证书
+          };
+          _this.subIssue(data);
+        });
+    },
     /**关闭 */
     cancel() {
       this.open = false;
@@ -212,39 +438,32 @@ export default {
     /** 查询发放记录列表 */
     getList() {
       this.loading = true;
-      getSellectall(this.queryParams).then((response) => {
-        this.tableData = response.data.list;
-        this.total = response.data.total;
+      dsbrecordsList(this.queryParams).then((response) => {
+        this.tableData = response.rows;
+        this.total = response.total;
         this.loading = false;
       });
     },
-
-    handleFabu(row) {
-      this.reset();
-      let id = row.id;
-      getInfo(id).then((res) => {
-        this.form = res.data;
-        this.title = "发放查看";
-        this.open = true;
-      });
-    },
   },
 };
 </script>
 <style lang="scss" scoped>
 @import "@/assets/styles/myTable.scss";
-// ::v-deep .search-container {
-//   .el-form-item__content {
-//     width: 550px;
-//   }
-//   .el-input-group__append {
-//     padding-left: 15px !important;
-//     padding-right: 15px !important;
-//     background: #f8414d !important;
-//     border-color: #f8414d !important;
-//     .search-btn {
-//       color: #fff !important;
-//     }
-//   }
-// }
+.info-form-title {
+  display: flex;
+
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 17px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: 500;
+  color: #333;
+  font-weight: bold;
+  span {
+    width: 5px;
+    height: 17px;
+    margin-right: 6px;
+    background: #f8414d;
+  }
+}
 </style>

src/views/volunteer/gxhzs/gxhzsgl/index.vue

@@ -1,81 +1,57 @@
 <template>
   <div class="app-container" ref="main">
     <div ref="search" class="search">
-      <el-form
-        :model="queryParams"
-        ref="queryForm"
-        size="small"
-        :inline="true"
-        class="search-container"
-      >
-        <el-form-item prop="name">
-          <el-input
-            v-model="queryParams.input"
-            placeholder="请输入关键字"
-            clearable
-          >
-            <div class="search-btn" slot="append">
-              <i class="el-icon-search"></i>
-            </div>
-          </el-input>
-        </el-form-item>
-      </el-form>
-      <el-button
-        v-hasPermi="['system:certificates:add']"
-        type="primary"
-        size="small"
-        @click="handleAdd"
-        >新增</el-button
-      >
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
+      <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
     </div>
 
-    <div class="book-main" :style="{ height: tableHeigth + 'px' }">
-      <div class="child-box" v-for="item in certificatesList" :key="item.id">
-        <div>
-          <el-image
-            style="width: 100%; height: 87%"
-            :src="baseUrl + item.cover"
-            fit="cover"
-          ></el-image>
-          <div
-            class="operate"
-            style="font-size: 14px; color: #4d4949; font-weight: bold"
-          >
-            <div>高级</div>
-            <div class="right-operate">
-              <div class="operate-item">
-                <el-button
-                  type="text"
-                  size="mini"
-                  style="color: #909399"
-                  @click="handleInfo(item)"
-                  >查看</el-button
-                >
-              </div>
-              <div class="operate-item">
-                <el-button
-                  type="text"
-                  size="mini"
-                  style="color: #e6a23c; margin: 0 10px"
-                  @click="handleUpdate(item)"
-                  v-hasPermi="['system:certificates:edit']"
-                  >修改</el-button
-                >
-              </div>
-              <div class="operate-item">
-                <el-button
-                  v-hasPermi="['system:certificates:remove']"
-                  type="text"
-                  size="mini"
-                  style="color: #f56c6c"
-                  @click="handleDelete(item)"
-                  >删除</el-button
-                >
-              </div>
-            </div>
+    <ul class="book-main" :style="listStyle" v-if="certificatesList.length > 0">
+      <li
+        v-for="(item, index) in certificatesList"
+        :key="item.id"
+        :style="{ marginBottom: isLastRow(index) ? '0px' : '' }"
+      >
+        <div class="integral-num">积分：{{ item.integral }}</div>
+
+        <el-image
+          style="width: 100%; height: 87%"
+          :src="baseUrl + item.cover"
+          fit="fill"
+        >
+        </el-image>
+
+        <div class="operate">
+          <div class="integral">
+            {{ item.name }}
+          </div>
+          <div class="operate-child">
+            <el-button
+              type="text"
+              size="mini"
+              style="color: #909399"
+              @click="handleInfo(item)"
+              >查看</el-button
+            >
+            <el-button
+              type="text"
+              size="mini"
+              style="color: #e6a23c; margin: 0 10px"
+              @click="handleUpdate(item)"
+              >修改</el-button
+            >
+            <el-button
+              type="text"
+              size="mini"
+              style="color: #f56c6c; margin: 0"
+              @click="handleDelete(item)"
+              >删除</el-button
+            >
           </div>
         </div>
-      </div>
+      </li>
+    </ul>
+    <div v-if="certificatesList.length == 0" :style="listStyle" class="noData">
+      <el-empty description="暂无证书"></el-empty>
     </div>
     <pagination
       v-show="total > 0"
@@ -94,29 +70,8 @@
         <el-form-item label="证书名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入证书名称" />
         </el-form-item>
-        <el-form-item label="证书时间" prop="datetime">
-          <el-date-picker
-            clearable
-            v-model="form.datetime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择证书时间"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="服务时长" prop="serviceDuration">
-          <el-input
-            v-model="form.serviceDuration"
-            placeholder="请输入服务时长"
-          />
-        </el-form-item>
-        <el-form-item label="证书内容">
-          <el-input
-            type="textarea"
-            :rows="3"
-            v-model="form.content"
-            placeholder="请输入证书内容"
-          />
+        <el-form-item label="积分" prop="integral">
+          <el-input v-model="form.integral" placeholder="请输入积分" />
         </el-form-item>
         <el-form-item label="证书封面" prop="cover">
           <ImageUpload :limit="1" v-model="form.cover" />
@@ -140,16 +95,8 @@
             <div class="item-value">{{ form.name }}</div>
           </div>
           <div class="info-item">
-            <div class="item-lable">证书时间:</div>
-            <div class="item-value">{{ form.datetime }}</div>
-          </div>
-          <div class="info-item">
-            <div class="item-lable">服务时长:</div>
-            <div class="item-value">{{ form.serviceDuration }}</div>
-          </div>
-          <div class="info-item">
-            <div class="item-lable">证书内容:</div>
-            <div class="item-value">{{ form.content }}</div>
+            <div class="item-lable">积分:</div>
+            <div class="item-value">{{ form.integral }}</div>
           </div>
           <div class="info-item">
             <div class="item-lable">证书封面:</div>
@@ -174,34 +121,61 @@ import {
 export default {
   data() {
     return {
+      listStyle: {
+        height: 0,
+        overflowY: "auto",
+      },
       baseUrl: process.env.VUE_APP_BASE_API,
       certificatesList: [],
-      tableHeigth: 0,
-      queryParams: {},
       loading: false,
       tableData: [],
       total: 0,
       queryParams: {
+        type: 0, //个性化证书
+        name: undefined,
         pageNum: 1,
-        pageSize: 20,
+        pageSize: 10,
       },
       form: {},
-      rules: {},
+      rules: {
+        name: [{ required: true, message: "请输入证书名称", trigger: "blur" }],
+        integral: [{ required: true, message: "请输入积分", trigger: "blur" }],
+        cover: [
+          { required: true, message: "请上传证书封面", trigger: "change" },
+        ],
+      },
       open: false,
       openInfo: false,
       title: "",
-      fileList: [],
     };
   },
   created() {
     // //给表格一个固定值
     this.$nextTick(() => {
-      this.tableHeigth =
-        this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 80;
+      this.listStyle.height =
+        this.$refs.main.offsetHeight -
+        40 -
+        this.$refs.search.offsetHeight -
+        42 +
+        "px";
       this.getList();
     });
   },
   methods: {
+    isLastRow(index) {
+      const rowCount = Math.ceil(this.certificatesList.length / 5);
+      const row = Math.floor(index / 5);
+      return row === rowCount - 1;
+    },
+    /**搜索 */
+    handleSearch(keyWord) {
+      this.queryParams = {
+        name: keyWord,
+        pageNum: 1,
+        pageSize: 10,
+      };
+      this.getList();
+    },
     /** 查询证书管理列表 */
     getList() {
       this.loading = true;
@@ -220,7 +194,7 @@ export default {
         cover: null,
         content: null,
         datetime: null,
-        serviceDuration: null,
+        integral: null,
         createId: null,
         createBy: null,
         createTime: null,
@@ -267,6 +241,7 @@ export default {
     submitForm() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
+          this.form.type = 0;
           if (this.form.id != null) {
             updateCertificates(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
@@ -302,48 +277,4 @@ export default {
 </script>
 <style lang="scss" scoped>
 @import "@/assets/styles/myTable.scss";
-// @import "@/assets/styles/element-variables.scss";
-.search {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.book-main {
-  display: flex;
-  flex-wrap: wrap;
-  .child-box {
-    height: 50%;
-    width: 20%;
-    box-sizing: border-box;
-    padding: 10px;
-    & > div {
-      height: 100%;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      box-shadow: 0px 3px 15px 0px rgba(184, 184, 184, 0.22);
-      border-radius: 10px;
-      overflow: hidden;
-      .operate {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 10px;
-        .right-operate {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-        .operate-item {
-          text-align: center;
-          font-size: 14px;
-          color: #8a8585;
-          cursor: pointer;
-        }
-      }
-    }
-  }
-}
 </style>

src/views/volunteer/gxhzs/hdzsff/index.vue

@@ -106,13 +106,13 @@
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancel">关 闭</el-button>
-        <el-button type="warning" @click="submitPaper">发放纸质证书</el-button>
+        <el-button type="warning" @click="submitPaper">发放纸制证书</el-button>
         <el-button type="primary" @click="submitElectron"
           >发放电子证书</el-button
         >
       </div>
     </el-dialog>
-    <!-- 纸质证书 -->
+    <!-- 纸制证书 -->
     <el-dialog :visible.sync="infoOpen" width="500px" append-to-body>
       <div slot="title" class="dialog-title">
         <span class="title-line"></span>
@@ -161,13 +161,13 @@ export default {
     });
   },
   methods: {
-    /**纸质提交 */
+    /**纸制提交 */
     submitForm() {
       editData(this.form).then((res) => {
         this.submitElectron();
       });
     },
-    /**纸质 */
+    /**纸制 */
     submitPaper() {
       this.infoOpen = true;
     },

src/views/volunteer/gxhzs/mygxhzs/index.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="app-container" ref="main">
+    <div ref="search" class="search">
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
+    </div>
+
+    <ul class="book-main" :style="listStyle" v-if="certificatesList.length > 0">
+      <li
+        v-for="(item, index) in certificatesList"
+        :key="item.id"
+        :style="{ marginBottom: isLastRow(index) ? '0px' : '' }"
+      >
+        <div class="integral-num">积分：{{ item.integral }}</div>
+        <el-image
+          style="width: 100%; height: 87%"
+          :src="baseUrl + item.cover"
+          fit="fill"
+        >
+        </el-image>
+
+        <div class="operate">
+          <div class="integral">
+            {{ item.certificateName }}
+          </div>
+          <div class="operate-child">
+            <el-button
+              type="text"
+              size="mini"
+              :style="{
+                color:
+                  item.status == 1
+                    ? '#67C23A'
+                    : item.status == 2 && item.type == 2
+                    ? '#E6A23C'
+                    : '#F56C6C',
+              }"
+              >{{ filterIissuanceStatus(item) }}</el-button
+            >
+            <el-button
+              type="text"
+              size="mini"
+              @click="handleApplyfor(item)"
+              v-if="item.status != 1 && !item.type"
+              >申请</el-button
+            >
+            <el-button
+              type="text"
+              size="mini"
+              style="color: #909399"
+              @click="handleInfo(item)"
+              >查看</el-button
+            >
+          </div>
+        </div>
+      </li>
+    </ul>
+    <div v-if="certificatesList.length == 0" :style="listStyle" class="noData">
+      <el-empty description="暂无证书"></el-empty>
+    </div>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <!-- 查看 -->
+    <el-dialog :visible.sync="infoShow" width="600px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        查看
+      </div>
+      <div class="conversionInfo">
+        <div class="basicInfo">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>证书详情</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>证书名称：</div>
+                <div>{{ form.certificateName }}</div>
+              </div>
+              <div class="list-right">
+                <div>志愿者：</div>
+                <div>{{ form.userName }}</div>
+              </div>
+            </div>
+            <div class="lists">
+              <div class="list-left">
+                <div>兑换时间：</div>
+                <div>{{ form.createTime }}</div>
+              </div>
+              <div class="list-left">
+                <div>状态：</div>
+                <div>{{ filterIissuanceStatus(form) }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="logisticsInfo" v-show="form.type == 2">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>纸制证书</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>快递公司：</div>
+                <div>{{ form.courierCompanies }}</div>
+              </div>
+              <div class="list-right">
+                <div>快递单号：</div>
+                <div>{{ form.trackingNumber }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="logisticsInfo" v-show="form.type == 1">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>电子证书</span>
+          </div>
+          <div class="info zs-box" ref="zs">
+            <div class="top-text">
+              <span>{{ form.userName }}</span> 先生/女士：
+              <p>
+                您在苏州工业园区累计志愿服务0小时，感谢您的无私奉献，特发此证，以兹鼓励。
+              </p>
+            </div>
+            <div class="bottom-text">
+              <div class="lable-value">
+                <div class="lable">签发单位：</div>
+                <div class="value">苏州工业园区宣传和统战部</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">苏州工业园区新时代文明实践中心</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">
+                  {{ $moment().format("YYYY年MM月DD日") }}
+                </div>
+              </div>
+            </div>
+            <div class="zs-z"></div>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            style="margin-top: 10px"
+            @click="downloadContentAsImage()"
+            >下载电子证书</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 申请 -->
+    <el-dialog :visible.sync="applyShow" width="350px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        申请操作
+      </div>
+      <el-radio-group v-model="radio">
+        <el-radio-button :label="1">电子证书</el-radio-button>
+        <el-radio-button :label="2">纸质证书</el-radio-button>
+      </el-radio-group>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitElectron">确 认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import html2canvas from "html2canvas";
+import {
+  dsbrecordsList,
+  dsbrecordsInfo,
+  issue,
+} from "@/api/volunteer/gxhzs/hdzsff/index.js";
+export default {
+  data() {
+    return {
+      listStyle: {
+        height: 0,
+        overflowY: "auto",
+      },
+      currentRow: {},
+      radio: 1,
+      applyShow: false,
+      infoShow: false,
+      baseUrl: process.env.VUE_APP_BASE_API,
+      certificatesList: [],
+      loading: false,
+      tableData: [],
+      total: 0,
+      queryParams: {
+        // status: 1,
+        UId: undefined,
+        certificateName: undefined,
+        pageNum: 1,
+        pageSize: 10,
+      },
+      form: {},
+      rules: {},
+    };
+  },
+  created() {
+    this.queryParams.UId = this.$store.getters.userId;
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.listStyle.height =
+        this.$refs.main.offsetHeight -
+        40 -
+        this.$refs.search.offsetHeight -
+        42 +
+        "px";
+      this.getList();
+    });
+  },
+  methods: {
+    /**状态过滤 */
+    filterIissuanceStatus(row) {
+      if (row.status == 2 && !row.type) {
+        return "未发放";
+      } else if (
+        (row.status == 1 && row.type == 1) ||
+        (row.status == 1 && row.type == 2)
+      ) {
+        return "已发放";
+      } else if (row.status == 2 && row.type == 2) {
+        return "已申请";
+      }
+    },
+    /**电子 */
+    submitElectron() {
+      //status  type
+      //1        1    志愿者电子证书发放
+      //2        2    志愿者申请纸质证书
+      //1        2   管理发放纸质证书
+      let _this = this;
+      let title = "";
+      if (this.radio == 1) {
+        title = `您确定要申请“${this.currentRow.certificateName}”电子证书吗？`;
+      } else {
+        title = `您确定要申请“${this.currentRow.certificateName}”纸质证书吗？`;
+      }
+      this.$modal.confirm(title).then(function () {
+        let data = {
+          status: _this.radio, //1.发放 2.未
+          id: _this.currentRow.id,
+          type: _this.radio, //	1:电子证书 2:纸制证书
+        };
+        _this.subIssue(data);
+      });
+      this.applyShow = false;
+    },
+    //电子发放
+    subIssue(data) {
+      issue(data).then((res) => {
+        this.applyShow = false;
+        this.getList();
+        if (data.type == 1) {
+          this.$modal.msgSuccess("发放成功");
+        } else {
+          this.$modal.msgSuccess("申请成功");
+        }
+      });
+    },
+    /**申请操作 */
+    handleApplyfor(row) {
+      this.currentRow = row;
+      this.applyShow = true;
+    },
+    /**下载电子证书 */
+    downloadContentAsImage() {
+      const loading = this.$loading({
+        lock: true,
+        text: "下载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      const content = this.$refs.zs; // 获取目标<div>的DOM节点
+      // 创建一个Canvas元素，并设置宽高等于目标<div>的尺寸
+      const canvas = document.createElement("canvas");
+      canvas.width = content.offsetWidth;
+      canvas.height = content.offsetHeight;
+      const context = canvas.getContext("2d");
+      // 使用Canvas绘制目标<div>中的内容
+      html2canvas(content).then((canvas) => {
+        // 将Canvas转换为DataURL
+        const dataURL = canvas.toDataURL("image/png");
+        // 使用FileSaver.js保存DataURL为图片文件
+        saveAs(dataURL, "download.png");
+        loading.close();
+      });
+    },
+
+    isLastRow(index) {
+      const rowCount = Math.ceil(this.certificatesList.length / 5);
+      const row = Math.floor(index / 5);
+      return row === rowCount - 1;
+    },
+    /**搜索 */
+    handleSearch(keyWord) {
+      this.queryParams = {
+        // status: 1,
+        UId: this.$store.getters.userId,
+        certificateName: keyWord,
+        pageNum: 1,
+        pageSize: 10,
+      };
+      this.getList();
+    },
+    /** 查询证书管理列表 */
+    getList() {
+      this.loading = true;
+      dsbrecordsList(this.queryParams).then((response) => {
+        this.certificatesList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /**查看 */
+    /**查详情 */
+    async handleInfo(row) {
+      let res = await this.getInfo(row.id);
+      this.form = res.data;
+      this.infoShow = true;
+    },
+    async getInfo(id) {
+      let res = await dsbrecordsInfo(id);
+      return res;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/myTable.scss";
+</style>

src/views/volunteer/hdtj/components/detailDialog.vue

@@ -0,0 +1,748 @@
+<template>
+  <div>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="50%"
+      @close="closeDetail"
+      :destroy-on-close="true"
+    >
+      <div slot="title">
+        <div class="titleText">查看详情</div>
+      </div>
+      <div class="center-content">
+        <header>
+          <div class="icons"></div>
+          <span>活动信息</span>
+        </header>
+        <div class="mainsEvents">
+          <div class="itemE">
+            <div>活动名称:</div>
+            <div>{{ detailData.name }}</div>
+          </div>
+          <div class="itemE">
+            <div>活动地址:</div>
+            <div>{{ detailData.address }}</div>
+          </div>
+        </div>
+        <div class="mainsEvents">
+          <div class="itemE">
+            <div>活动举办方:</div>
+            <div>{{ detailData.publisher }}</div>
+          </div>
+          <div class="itemE">
+            <div>活动标签:</div>
+            <div class="mainTag mainTag-label">
+              <div
+                v-for="(item, index) in detailDatalist"
+                :key="index"
+                v-show="item != ''"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="mainsTitle">
+          <div>活动内容:</div>
+          <div>{{ detailData.content }}</div>
+        </div>
+        <div class="mainsTitle">
+          <div>活动时间:</div>
+          <div>{{ detailData.activityTime }}至{{ detailData.endTime }}</div>
+        </div>
+
+        <!-- 人员匹配度 -->
+        <header>
+          <div class="icons icons1"></div>
+          <span>人员匹配度</span>
+        </header>
+        <div v-loading="load1">
+          <div class="mainPeople" v-if="personList.length > 0">
+            <div
+              class="subMan"
+              v-for="(item, index) in personList"
+              :key="index"
+            >
+              <div class="leftSub">
+                <div
+                  class="leftAvatar"
+                  :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
+                ></div>
+                <div class="leftName">
+                  <div>{{ item.nickName }}</div>
+                  <div class="mainTag">
+                    <div
+                      v-show="item != ''"
+                      v-for="(item, index) in item.arrlist"
+                      :key="index"
+                    >
+                      {{ item }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="rightSub">
+                <div class="numPercen">
+                  <span>匹配度:</span>
+                  <span>{{ item.degreeOfMatch }}%</span>
+                </div>
+                <div class="itemBtn" style="justify-content: center">
+                  <div class="look" @click="looks1(item.tagsId)">查看</div>
+                  <div
+                    class="looks"
+                    style="margin: 0 0 0 10px"
+                    @click="invite(item)"
+                    v-if="detailData.status == 1 && item.status == 0"
+                  >
+                    邀请
+                  </div>
+                  <div class="looks" style="margin: 0 0 0 10px" v-else>
+                    已邀请
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="noneStyle">暂无数据</div>
+        </div>
+
+        <div class="titlePagin">
+          <el-pagination
+            small
+            layout="prev, pager, next"
+            :total="personTotal"
+            :current-page.sync="personParams.pageNum"
+            @current-change="changePersonSize"
+          >
+          </el-pagination>
+        </div>
+        <!-- 参与报名 -->
+        <header>
+          <div class="icons icons2"></div>
+          <span>参与报名</span>
+        </header>
+        <div v-loading="load2">
+          <div class="mainPeople" v-if="participationList.length > 0">
+            <div
+              class="subMan"
+              v-for="(item, index) in participationList"
+              :key="index"
+            >
+              <div class="leftSub">
+                <div
+                  class="leftAvatar"
+                  :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
+                ></div>
+                <div class="leftName">
+                  <div>{{ item.nickName }}</div>
+                  <div class="mainTag">
+                    <div
+                      v-show="item != ''"
+                      v-for="(item, indx) in item.arrlist"
+                      :key="indx"
+                    >
+                      {{ item }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="rightSub">
+                <div class="numPercen">
+                  <span>匹配度:</span>
+                  <span>{{ item.degreeOfMatch }}%</span>
+                </div>
+                <div class="btn-list">
+                  <div
+                    class="btn-text"
+                    @click="looks1(item.tagsId)"
+                    style="color: #188ffe"
+                  >
+                    查看
+                  </div>
+                  <div
+                    class="btn-text"
+                    style="color: #49b28f"
+                    @click="handleStatus(item.id, 3, index)"
+                    v-show="item.status != 4"
+                  >
+                    {{
+                      item.status == 2
+                        ? "同意"
+                        : item.status == 3
+                        ? "已同意"
+                        : "未知"
+                    }}
+                  </div>
+                  <div
+                    class="btn-text"
+                    style="color: #e16a70"
+                    @click="handleStatus(item.id, 4, index)"
+                    v-show="item.status != 3"
+                  >
+                    {{
+                      item.status == 2
+                        ? "拒绝"
+                        : item.status == 4
+                        ? "已拒绝"
+                        : "未知"
+                    }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else class="noneStyle">暂无数据</div>
+        </div>
+
+        <div class="titlePagin">
+          <el-pagination
+            small
+            layout="prev, pager, next"
+            :total="participationTotal"
+            :current-page.sync="participationParams.pageNum"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 查看该人员的详情 -->
+    <el-dialog
+      :visible.sync="peopelDetail"
+      width="40%"
+      @close="cancel"
+      :destroy-on-close="true"
+    >
+      <div slot="title">
+        <div class="titleText">查看人员详情</div>
+      </div>
+      <div class="center-content">
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item
+            v-for="(item, index) in beforeData"
+            :key="index"
+          >
+            <template slot="label"> {{ item.name }} </template>
+            {{ item.value }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  activityGet,
+  peopleList,
+  canyuList,
+  peopleGet,
+  yaoqingAdd,
+  postStatus,
+  getTagsInfo,
+} from "@/api/volunteer/hdgl";
+export default {
+  data() {
+    return {
+      beforeData: [
+        {
+          name: "年龄",
+          label: "ageRange",
+          value: "",
+        },
+        {
+          name: "文化程度",
+          label: "educationRange",
+          value: "",
+        },
+        {
+          name: "小区",
+          label: "housingRange",
+          value: "",
+        },
+        {
+          name: "行业类型",
+          label: "industryRange",
+          value: "",
+        },
+        {
+          name: "兴趣爱好",
+          label: "interestRange",
+          value: "",
+        },
+        {
+          name: "国籍",
+          label: "nationalityRange",
+          value: "",
+        },
+
+        {
+          name: "政治面貌",
+          label: "politicalRange",
+          value: "",
+        },
+        {
+          name: "专业类型",
+          label: "professionalRange",
+          value: "",
+        },
+        {
+          name: "院校",
+          label: "schoolRange",
+          value: "",
+        },
+        {
+          name: "性别",
+          label: "sexRange",
+          value: "",
+        },
+      ],
+      dialogVisible: false,
+      detailData: {},
+      detailDatalist: [],
+      load1: true,
+      personList: [],
+      personTotal: 0,
+      personParams: {
+        pageNum: 1,
+        pageSize: 10,
+        ageRange: "",
+        educationRange: "",
+        housingRange: "",
+        industryRange: "",
+        interestRange: "",
+        nationalityRange: "",
+        politicalRange: "",
+        professionalRange: "",
+        schoolRange: "",
+        sexRange: "",
+      },
+      load2: true,
+      participationList: [],
+      participationTotal: 0,
+      participationParams: {
+        pageNum: 1,
+        pageSize: 10,
+        activityId: "",
+      },
+      peopelDetail: false,
+      arr: [
+        "ageRange",
+        "sexRange",
+        "politicalRange",
+        "educationRange",
+        "housingRange",
+        "industryRange",
+        "interestRange",
+        "professionalRange",
+        "schoolRange",
+        "nationalityRange",
+      ],
+      e: {},
+    };
+  },
+  props: {},
+  created() {},
+  methods: {
+    /**报名 同意不同意 */
+    handleStatus(id, status, index, indx) {
+      let _this = this;
+      if (
+        this.participationList[index].status == 3 ||
+        this.participationList[index].status == 4
+      )
+        return;
+      let data = {
+        id,
+        status,
+      };
+      this.$modal
+        .confirm(`你确认要${status == 3 ? "同意" : "拒绝"}改活动吗？`)
+        .then(function () {
+          postStatus(data).then((res) => {
+            _this.participationList[index].status = status;
+          });
+        });
+    },
+    open(e) {
+      console.log(e);
+      this.e = e;
+      activityGet(e).then((res) => {
+        this.detailData = res.data;
+        this.detailDatalist = this.labelgenerate(this.detailData);
+        this.participationParams.activityId = this.detailData.id;
+        this.getPersonData();
+        this.getParticipationData();
+        this.dialogVisible = true;
+      });
+    },
+    //标签生成
+    labelgenerate(data) {
+      let result = [];
+      this.arr.forEach((item) => {
+        for (let itemB in data) {
+          if (item == itemB) {
+            //多选后值是数组类型 =》string
+            if (data[itemB]) {
+              data[itemB] = data[itemB].split(",");
+            } else {
+              data[itemB] = [];
+            }
+            result = [...result, ...data[itemB]];
+          }
+        }
+      });
+      return result;
+    },
+    //关闭详情
+    closeDetail() {
+      this.detailData = {};
+      this.detailDatalist = [];
+      this.dialogVisible = false;
+    },
+    getPersonData() {
+      //查看人员匹配度列表
+      this.load1 = true;
+      this.detailData;
+      this.personList = this.detailData.unregisteredUsers;
+      if (this.personList.length > 0) {
+        this.personList.forEach((item) => {
+          item.arrlist = this.labelgenerate(item);
+        });
+      }
+      this.load1 = false;
+    },
+    getParticipationData() {
+      this.load2 = true;
+      //查看参与报名列表
+      this.detailData;
+      this.participationList = this.detailData.enrolledUsers;
+      if (this.participationList.length > 0) {
+        this.participationList.forEach((item) => {
+          item.arrlist = this.labelgenerate(item);
+        });
+      }
+      this.load2 = false;
+    },
+    //更改人员匹配度页码
+    changePersonSize(e) {
+      this.personParams.pageNum = e;
+      this.getPersonData();
+    },
+    //更改参与报名匹配度页码
+    changeParticipationSize(e) {
+      this.participationParams.pageNum = e;
+      this.getParticipationData();
+    },
+    looks1(e) {
+      getTagsInfo(e).then((res) => {
+        this.beforeData.forEach((value, index) => {
+          for (let key in res.data) {
+            if (value.label == key) {
+              this.beforeData[index].value = res.data[key].toString();
+            }
+          }
+        });
+        this.peopelDetail = true;
+      });
+    },
+    looks2(item) {
+      this.beforeData.forEach((value, index) => {
+        for (let key in item) {
+          if (value.label == key) {
+            this.beforeData[index].value = item[key].toString();
+          }
+        }
+      });
+      this.peopelDetail = true;
+    },
+    invite(e) {
+      console.log(e);
+      this.$modal
+        .confirm("是否确认邀请该人参加活动?")
+        .then(() => {
+          yaoqingAdd(e.id).then(() => {
+            this.$modal.msgSuccess("邀请成功");
+
+            activityGet(this.e).then((res) => {
+              this.detailData = res.data;
+              for (let key1 in this.personParams) {
+                for (let key2 in this.detailData) {
+                  if (key1 == key2) {
+                    this.personParams[key1] = this.detailData[key2];
+                  }
+                }
+              }
+              this.detailDatalist = this.labelgenerate(this.detailData);
+              if (this.personParams.sexRange == "") {
+                this.personParams.sexRange = "男,女";
+              }
+              this.participationParams.activityId = this.detailData.id;
+              this.getPersonData();
+              this.getParticipationData();
+              this.dialogVisible = true;
+            });
+          });
+        })
+        .catch(() => {});
+    },
+    cancel() {
+      this.peopelDetail = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .margin-top td {
+  font-family: "Alibaba-PuHuiTi-Regular";
+}
+::v-deep .margin-top th {
+  font-family: "Alibaba-PuHuiTi-Regular";
+  width: 20%;
+}
+.titlePagin {
+  margin: 12px 0;
+  display: flex;
+  flex-direction: row-reverse;
+}
+::v-deep .titlePagin .el-pagination {
+  padding: 0;
+}
+.mainTag-label {
+  // position: absolute;
+  width: 300px;
+  left: 80px;
+}
+.mainTag {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  flex-direction: row; /* 从左往右排列 */
+  & > div {
+    margin-bottom: 5px;
+    margin-right: 5px;
+    background-color: rgba(248, 65, 77, 0.06);
+    padding: 3px 5px;
+    color: #e16a70;
+    border-radius: 4px;
+  }
+}
+::v-deep .el-dialog {
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+::v-deep .el-dialog__header {
+  padding: 10px;
+  padding-left: 15px;
+  background: #f7f5f5;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+::v-deep .el-dialog__body {
+  padding: 0;
+}
+::v-deep .el-dialog__footer {
+  padding: 0;
+}
+::v-deep .el-dialog__headerbtn {
+  top: 12px;
+}
+.titleText {
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: bold;
+  color: #4c4949;
+  padding-left: 15px;
+  font-size: 16px;
+  position: relative;
+  &::before {
+    position: absolute;
+    top: 3.8px;
+    left: 0;
+    content: "";
+    width: 5px;
+    height: 15px;
+    background: #f8414d;
+  }
+}
+.center-content {
+  padding: 20px 30px;
+  header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 14px;
+    .icons {
+      height: 14px;
+      width: 14px;
+      background-image: url("../../../../assets/images/hdxx.png");
+      background-size: 100% 100%;
+    }
+    .icons1 {
+      background-image: url("../../../../assets/images/rypp.png");
+    }
+    .icons2 {
+      background-image: url("../../../../assets/images/baoming1.png");
+    }
+    span {
+      margin-left: 10px;
+      color: #4c4949;
+      font-weight: bold;
+      font-family: "Alibaba-PuHuiTi-Regular";
+    }
+  }
+  .mainsEvents {
+    // height: 35px;
+    display: flex;
+    // align-items: center;
+    font-family: "Alibaba-PuHuiTi-Regular";
+    margin-bottom: 20px;
+
+    .itemE {
+      position: relative;
+      width: 50%;
+      display: flex;
+      & > div:nth-of-type(1) {
+        display: flex;
+        // align-items: center;
+        color: #4c4949;
+        width: 24%;
+      }
+      & > div:nth-last-of-type(2) {
+        color: #807a7a;
+      }
+    }
+  }
+  .mainsTitle {
+    margin-bottom: 12px;
+    display: flex;
+    font-family: "Alibaba-PuHuiTi-Regular";
+    & > div:nth-of-type(1) {
+      color: #807a7a;
+      width: 12%;
+    }
+    & > div:nth-of-type(2) {
+      width: 50%;
+      color: #606266;
+      white-space: nowrap; /* 不换行 */
+      overflow: hidden; /* 超出部分隐藏 */
+      text-overflow: ellipsis; /* 溢出显示省略号 */
+    }
+  }
+  .noneStyle {
+    height: 200px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "Alibaba-PuHuiTi-Medium.otf";
+    color: #606266;
+    font-size: 14px;
+  }
+  .mainPeople {
+    overflow: auto;
+    // height: 200px;
+    box-sizing: border-box;
+    margin-bottom: 12px;
+    .subMan {
+      width: 100%;
+      min-height: 95px;
+      background: #fafafa;
+      border: 1px solid #f5edeb;
+      border-radius: 10px;
+      display: flex;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 15px;
+      margin-bottom: 10px;
+      .leftSub {
+        width: 84%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        .leftAvatar {
+          width: 20%;
+          min-height: 95px;
+          background-size: 100% 100%;
+          border-radius: 10px;
+        }
+        .leftName {
+          width: 80%;
+
+          margin-left: 15px;
+          & > div:nth-of-type(1) {
+            font-family: "Alibaba-PuHuiTi-Medium.otf";
+            color: #4c4949;
+            font-size: 18px;
+            margin-bottom: 10px;
+          }
+          & > div:nth-of-type(2) {
+            margin-bottom: -15px;
+          }
+        }
+      }
+      .rightSub {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .numPercen {
+          display: flex;
+          //   align-items: flex-end;
+          align-items: center;
+          & > span:nth-of-type(1) {
+            font-family: "Alibaba-PuHuiTi-Regular";
+            font-weight: 400;
+            color: #8a8585;
+            margin-right: 10px;
+          }
+          & > span:nth-of-type(2) {
+            font-family: "youshebiaotihei";
+            color: #49b28f;
+            font-size: 20px;
+          }
+        }
+        .itemBtn {
+          display: flex;
+          justify-content: space-between;
+          .look {
+            background: #fff;
+            border-radius: 4px;
+            color: #188ffe;
+            font-family: "Alibaba-PuHuiTi-Regular";
+            padding: 5px 10px;
+            cursor: pointer;
+            user-select: none;
+          }
+          .looks {
+            background: #fff;
+            border-radius: 4px;
+            color: #49b28f;
+            font-family: "Alibaba-PuHuiTi-Regular";
+            padding: 5px 10px;
+            cursor: pointer;
+            user-select: none;
+          }
+        }
+      }
+    }
+  }
+}
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-thumb {
+  background: #e5d3d4;
+}
+::-webkit-scrollbar-track {
+  background: #f4f1f1;
+}
+.btn-list {
+  display: flex;
+  align-items: center;
+  .btn-text {
+    margin-right: 4px;
+    cursor: pointer;
+    padding: 3px 6px;
+    background: #fff;
+    font-size: 13px;
+    font-family: "Alibaba-PuHuiTi-Regular";
+  }
+}
+</style>

src/views/volunteer/hdtj/hdGl/index.vue

@@ -0,0 +1,977 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2023-09-18 10:08:30
+ * @LastEditors: JC9527
+ * @LastEditTime: 2023-09-18 15:34:55
+-->
+<template>
+  <div class="plan-management" ref="plan">
+    <div class="titleInput" ref="titleInput">
+      <el-input
+        placeholder="请输入活动名称"
+        v-model="form.name"
+        class="input-with-select"
+      >
+        <el-button
+          slot="append"
+          icon="el-icon-search"
+          @click="search"
+        ></el-button>
+      </el-input>
+    </div>
+    <div ref="elbtn">
+      <el-button type="primary" plain @click="addActivity">新增活动</el-button>
+    </div>
+    <div class="plan-bottomBox">
+      <div class="tables">
+        <el-table
+          :data="tableData"
+          :border="false"
+          :height="tableHeight"
+          ref="table"
+          v-loading="loading"
+          tooltip-effect="light"
+          :cell-style="cellStyle"
+        >
+          <!-- <el-table-column
+            :row-class-name="tableRowClassName"
+            label="序号"
+            type="index"
+            header-align="center"
+            width="70"
+          >
+          </el-table-column> -->
+          <el-table-column prop="index" label="序号" align="center" width="60">
+          </el-table-column>
+          <el-table-column prop="name" label="活动名称" align="center">
+          </el-table-column>
+          <el-table-column
+            prop="address"
+            label="地址"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column prop="endTime" label="活动状态" align="center">
+            <template slot-scope="scope">
+              <div
+                :class="
+                  $moment().isAfter(scope.row.endTime) ? 'color1' : 'color2'
+                "
+              >
+                {{ $moment().isAfter(scope.row.endTime) ? "停止" : "进行中" }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <div class="tabs-btns">
+                <div class="look" @click="look(scope.row)">
+                  <span>查看</span>
+                </div>
+                <div class="look" @click="update(scope.row)">
+                  <span>修改</span>
+                </div>
+                <div class="look" @click="deleteA(scope.row)">
+                  <span>删除</span>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination" ref="pagination">
+        <my-pagination
+          :total="total"
+          @pagesChange="pagesChange"
+        ></my-pagination>
+      </div>
+    </div>
+    <detailDialog ref="detailDialog"></detailDialog>
+    <!-- 新增修改 -->
+    <el-dialog
+      :visible.sync="addShow"
+      width="50%"
+      @close="closeAdd"
+      :destroy-on-close="true"
+    >
+      <div slot="title">
+        <div class="titleText">{{ titleText }}</div>
+      </div>
+      <div class="center-content">
+        <!-- 活动信息 -->
+        <header>
+          <div class="icons"></div>
+          <span>活动信息</span>
+        </header>
+        <el-form
+          :model="ruleForm1"
+          :rules="rules1"
+          ref="ruleForm1"
+          label-width="90px"
+          class="demo-ruleForm"
+        >
+          <div class="inputBox">
+            <el-form-item label="活动名称:" prop="name">
+              <el-input
+                v-model="ruleForm1.name"
+                placeholder="请输入活动名称"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="活动地址:" prop="address">
+              <el-input
+                v-model="ruleForm1.address"
+                placeholder="请输入活动地址"
+              ></el-input>
+            </el-form-item>
+          </div>
+          <div class="inputBox">
+            <el-form-item label="开始时间:" prop="activityTime">
+              <el-date-picker
+                v-model="ruleForm1.activityTime"
+                type="date"
+                placeholder="请选择活动开始日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="截止时间:" prop="endTime">
+              <el-date-picker
+                v-model="ruleForm1.endTime"
+                type="date"
+                placeholder="请选择活动截止日期"
+                value-format="yyyy-MM-dd"
+              >
+              </el-date-picker>
+            </el-form-item>
+          </div>
+          <el-form-item label="活动内容:" prop="content">
+            <el-input
+              v-model="ruleForm1.content"
+              placeholder="请输入内容"
+              type="textarea"
+              :autosize="{ minRows: 2 }"
+              resize="none"
+            ></el-input>
+          </el-form-item>
+
+          <el-form-item label="活动举办方:" prop="publisher">
+            <el-input
+              v-model="ruleForm1.publisher"
+              placeholder="请输入活动举办方"
+            ></el-input>
+          </el-form-item>
+          <!-- 人员要求信息 -->
+          <header>
+            <div class="icons icons1"></div>
+            <span>人员要求信息</span>
+          </header>
+          <div class="inputBox">
+            <el-form-item label="小区:" prop="housingRange">
+              <el-select
+                v-model="ruleForm1.housingRange"
+                placeholder="请选择小区"
+                multiple
+              >
+                <el-option
+                  v-for="dict in dict.type.xioaqu_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.label"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="文化程度:" prop="educationRange">
+              <el-select
+                v-model="ruleForm1.educationRange"
+                placeholder="请选择文化程度"
+                multiple
+              >
+                <el-option
+                  v-for="dict in dict.type.education_range"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.label"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="inputBox">
+            <el-form-item label="兴趣爱好:" prop="interestRange">
+              <el-select
+                v-model="ruleForm1.interestRange"
+                placeholder="请选择兴趣爱好"
+                multiple
+              >
+                <el-option
+                  v-for="dict in dict.type.hobby_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.label"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="政治面貌:" prop="politicalRange">
+              <el-select
+                v-model="ruleForm1.politicalRange"
+                placeholder="请选择政治面貌"
+                multiple
+              >
+                <el-option
+                  v-for="dict in dict.type.political_range"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.label"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="inputBox">
+            <el-form-item label="性别:" prop="sexRange">
+              <el-select v-model="ruleForm1.sexRange" placeholder="请选择性别">
+                <el-option
+                  v-for="dict in dict.type.sex_range"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.label"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="年龄:" prop="ageRange">
+              <el-select
+                v-model="ruleForm1.ageRange"
+                multiple
+                placeholder="请选择年龄"
+              >
+                <el-option
+                  v-for="dict in dict.type.age_range"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.label"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+          <div class="inputBox">
+            <el-form-item label="专业类型:" prop="professionalRange">
+              <el-select
+                v-model="ruleForm1.professionalRange"
+                multiple
+                placeholder="请选择专业类型"
+              >
+                <el-option
+                  v-for="dict in dict.type.speciality_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.label"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="行业类型:" prop="industryRange">
+              <el-select
+                v-model="ruleForm1.industryRange"
+                multiple
+                placeholder="请选择行业类型"
+              >
+                <el-option
+                  v-for="dict in dict.type.industry_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.label"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+
+          <div class="inputBox">
+            <el-form-item label="院校:" prop="schoolRange">
+              <el-select
+                v-model="ruleForm1.schoolRange"
+                multiple
+                placeholder="请选择院校"
+              >
+                <el-option
+                  v-for="dict in dict.type.yuanxiao_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.label"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="国籍:" prop="nationalityRange">
+              <el-select
+                v-model="ruleForm1.nationalityRange"
+                multiple
+                placeholder="请选择国籍"
+              >
+                <el-option
+                  v-for="dict in dict.type.nationality_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.label"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </el-form>
+        <div class="footBtn">
+          <el-button @click="submit">提交</el-button>
+          <el-button @click="closeAdd">取消</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import myPagination from "@/views/components/myPagination/index.vue";
+import {
+  activityList,
+  activityAdd,
+  activityUpdate,
+  activityDelete,
+  activityGet,
+} from "@/api/volunteer/hdgl";
+import detailDialog from "../components/detailDialog.vue";
+export default {
+  components: { myPagination, detailDialog },
+  dicts: [
+    "education_range",
+    "political_range",
+    "sex_range",
+    "age_range",
+    "xioaqu_type",
+    "hobby_type",
+    "speciality_type",
+    "industry_type",
+    "yuanxiao_type",
+    "nationality_type",
+  ],
+  data() {
+    return {
+      form: {
+        name: "",
+      },
+      tableData: [],
+      input: "",
+      pages: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      loading: false,
+      //打开新增
+      addShow: false,
+      ruleForm1: {
+        //活动名称
+        name: "",
+        //活动时间
+        activityTime: "",
+        //活动内容
+        content: "",
+        //活动地址
+        address: "",
+        //活动举办方
+        publisher: "",
+        //小区
+        housingRange: "",
+        //文化程度
+        educationRange: "",
+        //兴趣爱好
+        interestRange: "",
+        //政治面貌
+        politicalRange: "",
+        //性别
+        sexRange: "",
+        //国籍
+        nationalityRange: "",
+        //专业类型
+        professionalRange: "",
+        //行业类型
+        industryRange: "",
+        //院校
+        schoolRange: "",
+        //年龄
+        ageRange: "",
+        //截止时间
+        endTime: "",
+      },
+      rules1: {
+        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
+        //活动开始时间
+        activityTime: [
+          { required: true, message: "请选择活动开始时间", trigger: "blur" },
+        ],
+        endTime: [
+          { required: true, message: "请选择活动截至时间", trigger: "blur" },
+        ],
+        //活动内容
+        content: [
+          { required: true, message: "请输入活动内容", trigger: "blur" },
+        ],
+        //活动地址
+        address: [
+          { required: true, message: "请输入活动地址", trigger: "blur" },
+        ],
+        //活动举办方
+        publisher: [
+          { required: true, message: "请输入活动举办方", trigger: "blur" },
+        ],
+      },
+      tableHeight: 0,
+      //新增修改标题
+      titleText: "",
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    search() {
+      this.pages = { ...this.pages, ...this.form };
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      activityList(this.pages).then((res) => {
+        this.total = res.total;
+        this.tableData = res.rows;
+        this.tableData.forEach((element, index) => {
+          element.index = index + 1;
+        });
+        this.loading = false;
+      });
+    },
+    //重置
+    reset() {
+      this.ruleForm1 = {
+        name: "",
+        activityTime: "",
+        content: "",
+        address: "",
+        publisher: "",
+        housingRange: "",
+        educationRange: "",
+        interestRange: "",
+        politicalRange: "",
+        sexRange: "",
+        nationalityRange: "",
+        professionalRange: "",
+        industryRange: "",
+        schoolRange: "",
+        ageRange: "",
+        endTime: "",
+      };
+    },
+    //新增
+    addActivity() {
+      this.titleText = "新增活动";
+      this.reset();
+      this.addShow = true;
+    },
+    //修改
+    update(e) {
+      this.reset();
+      this.titleText = "编辑信息";
+      activityGet(e.id).then((res) => {
+        let arr = [
+          "ageRange",
+          "politicalRange",
+          "educationRange",
+          "housingRange",
+          "industryRange",
+          "interestRange",
+          "professionalRange",
+          "schoolRange",
+          "nationalityRange",
+        ];
+        arr.forEach((item) => {
+          for (let itemB in res.data) {
+            if (item == itemB) {
+              //多选后值是数组类型 =》string
+              if (res.data[itemB]) {
+                res.data[itemB] = res.data[itemB].split(",");
+              } else {
+                res.data[itemB] = [];
+              }
+            }
+          }
+        });
+        this.ruleForm1 = res.data;
+        this.addShow = true;
+      });
+    },
+    closeAdd() {
+      this.reset();
+      this.addShow = false;
+    },
+    look(e) {
+      this.$refs.detailDialog.open(e.id);
+    },
+    //删除
+    deleteA(e) {
+      this.$modal
+        .confirm("是否确认删除该活动?")
+        .then(function () {
+          return activityDelete(e.id);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    //确定新增或者修改
+    submit() {
+      this.$refs.ruleForm1.validate((valid) => {
+        if (valid) {
+          let arr = [
+            "ageRange",
+            "sexRange",
+            "politicalRange",
+            "educationRange",
+            "housingRange",
+            "industryRange",
+            "interestRange",
+            "professionalRange",
+            "schoolRange",
+            "nationalityRange",
+          ];
+          let i = 0;
+          arr.forEach((item) => {
+            for (let itemB in this.ruleForm1) {
+              if (item == itemB) {
+                if (this.ruleForm1[itemB] != "") {
+                  i++;
+                }
+                //多选后值是数组类型 =》string
+                this.ruleForm1[itemB] = this.ruleForm1[itemB].toString();
+              }
+            }
+          });
+          if (i < 3) {
+            this.$message.error("人员信息要求最低选择三条");
+            return;
+          }
+          if (this.ruleForm1.id != undefined) {
+            activityUpdate(this.ruleForm1).then((res) => {
+              this.$modal.msgSuccess("修改成功");
+              this.addShow = false;
+              this.getList();
+            });
+          } else {
+            activityAdd(this.ruleForm1).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.addShow = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    // 页码，当前页切换事件
+    pagesChange(pages) {
+      this.pages.pageNum = pages.pageNum;
+      this.pages.pageSize = pages.pageSize;
+      this.getList();
+    },
+    // 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 "";
+      }
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tableHeight =
+        this.$refs.plan.offsetHeight -
+        80 -
+        this.$refs.titleInput.offsetHeight -
+        this.$refs.elbtn.offsetHeight -
+        this.$refs.pagination.offsetHeight;
+    });
+  },
+};
+</script>
+<style lang="scss" scoped>
+.color1 {
+  color: #f71052;
+}
+.color2 {
+  color: #23b06c;
+}
+.titlePagin {
+  margin: 12px 0;
+  display: flex;
+  flex-direction: row-reverse;
+}
+::v-deep .titlePagin .el-pagination {
+  padding: 0;
+}
+::v-deep .inputBox .el-date-editor {
+  width: 100%;
+}
+::v-deep .titleInput .el-input__inner {
+  border-right: none;
+}
+::v-deep .titleInput .el-input-group__append {
+  background: #f8414d;
+  border: none;
+  color: #fff;
+}
+.titleInput {
+  width: 30%;
+  margin-bottom: 10px;
+}
+.plan-management {
+  padding: 20px;
+  background-color: #fff;
+  height: 100%;
+  width: 100%;
+  border-radius: 10px 10px 0 0;
+  box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
+  .plan-topBox {
+    padding: 20px 0 0 0;
+  }
+  .plan-bottomBox {
+    margin-top: 10px;
+    .tables {
+      ::v-deep .el-table {
+        .success-row {
+          background-color: rgba(250, 247, 247, 0.5);
+        }
+        .activity {
+          div {
+            text-align: left;
+            &:nth-child(1) {
+              font-size: 14px;
+              font-family: "Alibaba-PuHuiTi-Regular";
+
+              font-weight: 400;
+              color: #4d4949;
+            }
+            &:nth-child(2) {
+              width: 180px;
+              font-size: 14px;
+              font-family: "Alibaba-PuHuiTi-Regular";
+
+              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-Regular";
+          font-weight: 400;
+          color: #525966;
+          // padding: 2px 0;
+        }
+        th {
+          // height: 45px;
+          background-color: #f7f5f5;
+          font-size: 15px;
+          font-family: "Alibaba-PuHuiTi-Regular";
+
+          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;
+          padding: 0 10px;
+          // margin-right: 30px;
+          cursor: pointer;
+          // img {
+          //   width: 20px;
+          //   margin-right: 5px;
+          // }
+          span {
+            font-size: 15px;
+            font-family: "Alibaba-PuHuiTi-Regular";
+            font-weight: 400;
+            color: #045ffd;
+          }
+        }
+      }
+    }
+    .pagination {
+      margin-top: 20px;
+    }
+  }
+}
+.mainTag {
+  display: flex;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  & > div {
+    margin-right: 5px;
+    background-color: rgba(248, 65, 77, 0.06);
+    padding: 3px 5px;
+    color: #e16a70;
+    border-radius: 4px;
+  }
+}
+::v-deep .el-dialog {
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+::v-deep .el-dialog__header {
+  padding: 10px;
+  padding-left: 15px;
+  background: #f7f5f5;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+::v-deep .el-dialog__body {
+  padding: 0;
+}
+::v-deep .el-dialog__footer {
+  padding: 0;
+}
+::v-deep .el-dialog__headerbtn {
+  top: 12px;
+}
+.titleText {
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: bold;
+  color: #4c4949;
+  padding-left: 15px;
+  font-size: 16px;
+  position: relative;
+  &::before {
+    position: absolute;
+    top: 3.8px;
+    left: 0;
+    content: "";
+    width: 5px;
+    height: 15px;
+    background: #f8414d;
+  }
+}
+.center-content {
+  padding: 20px 30px;
+  header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 14px;
+    .icons {
+      height: 14px;
+      width: 14px;
+      background-image: url("../../../../assets/images/hdxx.png");
+      background-size: 100% 100%;
+    }
+    .icons1 {
+      background-image: url("../../../../assets/images/rypp.png");
+    }
+    .icons2 {
+      background-image: url("../../../../assets/images/baoming1.png");
+    }
+    span {
+      margin-left: 10px;
+      color: #4c4949;
+      font-weight: bold;
+      font-family: "Alibaba-PuHuiTi-Regular";
+    }
+  }
+  .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: 24%;
+      }
+      & > div:nth-last-of-type(2) {
+        color: #807a7a;
+      }
+    }
+  }
+  .mainsTitle {
+    margin-bottom: 12px;
+    display: flex;
+    font-family: "Alibaba-PuHuiTi-Regular";
+    & > div:nth-of-type(1) {
+      color: #807a7a;
+      width: 12%;
+    }
+    & > div:nth-of-type(2) {
+      width: 88%;
+      color: #606266;
+    }
+  }
+  .noneStyle {
+    height: 200px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "Alibaba-PuHuiTi-Medium.otf";
+    color: #606266;
+    font-size: 14px;
+  }
+  .mainPeople {
+    overflow: auto;
+    height: 200px;
+    box-sizing: border-box;
+    margin-bottom: 12px;
+    .subMan {
+      width: 100%;
+      height: 95px;
+      background: #fafafa;
+      border: 1px solid #f5edeb;
+      border-radius: 10px;
+      display: flex;
+      justify-content: space-between;
+      box-sizing: border-box;
+      padding: 15px;
+      margin-bottom: 10px;
+      .leftSub {
+        width: 84%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        .leftAvatar {
+          height: 65px;
+          width: 65px;
+          background-size: 100% 100%;
+          border-radius: 10px;
+        }
+        .leftName {
+          margin-left: 15px;
+          & > div:nth-of-type(1) {
+            font-family: "Alibaba-PuHuiTi-Medium.otf";
+            color: #4c4949;
+            font-size: 18px;
+            margin-bottom: 18px;
+          }
+        }
+      }
+      .rightSub {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .numPercen {
+          display: flex;
+          //   align-items: flex-end;
+          align-items: center;
+          & > span:nth-of-type(1) {
+            font-family: "Alibaba-PuHuiTi-Regular";
+            font-weight: 400;
+            color: #8a8585;
+            margin-right: 10px;
+          }
+          & > span:nth-of-type(2) {
+            font-family: "youshebiaotihei";
+            color: #49b28f;
+            font-size: 20px;
+          }
+        }
+        .itemBtn {
+          display: flex;
+          justify-content: space-between;
+          .look {
+            background: #fff;
+            border-radius: 4px;
+            color: #188ffe;
+            font-family: "Alibaba-PuHuiTi-Regular";
+            padding: 5px 10px;
+            cursor: pointer;
+            user-select: none;
+          }
+          .looks {
+            background: #fff;
+            border-radius: 4px;
+            color: #49b28f;
+            font-family: "Alibaba-PuHuiTi-Regular";
+            padding: 5px 10px;
+            cursor: pointer;
+            user-select: none;
+          }
+        }
+      }
+    }
+  }
+}
+::-webkit-scrollbar {
+  width: 5px;
+}
+::-webkit-scrollbar-thumb {
+  background: #e5d3d4;
+}
+::-webkit-scrollbar-track {
+  background: #f4f1f1;
+}
+.inputBox {
+  display: flex;
+  justify-content: space-between;
+  & > div {
+    width: 47%;
+  }
+}
+::v-deep .el-select {
+  width: 100%;
+}
+::v-deep .el-form-item__label {
+  font-size: 14px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: 400;
+  color: #4c4949;
+  text-align: left;
+  padding-right: 0;
+}
+.footBtn {
+  display: flex;
+  flex-direction: row-reverse;
+}
+::v-deep .footBtn .el-button {
+  margin-left: 10px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+}
+</style>

src/views/volunteer/hdtj/hdtjChild/index.vue

@@ -0,0 +1,72 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2023-09-18 10:08:30
+ * @LastEditors: JC9527
+ * @LastEditTime: 2023-09-22 14:36:35
+-->
+<template>
+  <div class="plan-management">
+    <div class="plan-bottomBox">
+      <component :is="defaultRouter" :value="input" ref="myComponents"></component>
+    </div>
+  </div>
+</template>
+<script>
+import inviteView from '../../components/invite.vue'
+import recommendView from '../../components/recommend.vue'
+export default {
+  components:{inviteView,recommendView},
+  data() {
+    return {
+      input: '',
+      activeName: 'recommendView',
+      defaultRouter:'recommendView',
+      isClick:false,
+    }
+  },
+  methods:{
+    // 输入框的值
+    changeInput(value){
+      this.input = value;
+      this.isClick = true;
+    },
+    // 监听输入框是否清空
+    changeValue(value){
+      if(this.isClick && value == ''){
+        this.$refs.myComponents.getList('1')
+        this.isClick = false;
+      }
+    },
+    handleClick() {
+      this.defaultRouter = this.activeName
+    }
+  },
+  async created() {
+    console.log(this.$store.getters.userId);
+  },
+}
+</script>
+<style lang="scss" scoped>
+.plan-management {
+  padding: 0 20px 10px 20px;
+  background-color: #fff;
+  height: 100%;
+  width: 100%;
+  border-radius: 10px 10px 0 0;
+  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
+  .plan-topBox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0 0 0;
+    ::v-deep .el-tabs--top {
+      height: 40px;
+    }
+  }
+  .plan-bottomBox {
+    margin-top: 30px;
+  }
+}
+</style>

src/views/volunteer/hdtj/hdyq/index.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: JC9527
+ * @Date: 2023-09-18 10:08:30
+ * @LastEditors: JC9527
+ * @LastEditTime: 2023-09-22 14:36:35
+-->
+<template>
+  <div class="plan-management">
+    <div class="plan-bottomBox">
+      <component :is="defaultRouter" :value="input" ref="myComponents"></component>
+    </div>
+  </div> 
+</template> 
+<script>
+import inviteView from '../../components/invite.vue'
+import recommendView from '../../components/recommend.vue'
+import myInput from "@/views/components/myInput/index.vue"
+export default {
+  components:{inviteView,recommendView,myInput},
+  data() {
+    return {
+      input: '',
+      activeName: 'inviteView',
+      defaultRouter:'inviteView',
+      isClick:false,
+    }
+  },
+  methods:{
+    // 输入框的值
+    changeInput(value){
+      this.input = value;
+      this.isClick = true;
+    },
+    // 监听输入框是否清空
+    changeValue(value){
+      if(this.isClick && value == ''){
+        this.$refs.myComponents.getList('1')
+        this.isClick = false;
+      }
+    },
+    handleClick() {
+      this.defaultRouter = this.activeName
+    }
+  },
+  async created() {
+
+  },
+}
+</script>
+<style lang="scss" scoped>
+.plan-management {
+  padding: 0 20px 10px 20px;
+  background-color: #fff;
+  height: 100%;
+  width: 100%;
+  border-radius: 10px 10px 0 0;
+  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
+  .plan-topBox {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0 0 0;
+    ::v-deep .el-tabs--top {
+      height: 40px;
+    }
+  }
+  .plan-bottomBox {
+    margin-top: 30px;
+  }
+}
+</style>

src/views/volunteer/integralConversion/index.vue

@@ -1,172 +1,144 @@
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: JC9527
- * @Date: 2023-09-18 10:08:30
- * @LastEditors: JC9527
- * @LastEditTime: 2023-09-24 10:33:30
--->
 <template>
-  <div class="mainBox">
-    <div class="convert-topBox">
-      <my-input @changeInput="changeInput" placeholder="请输入证书名称" @changeValue="changeValue"></my-input>
+  <div class="app-container" ref="main">
+    <div class="search" ref="search">
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
     </div>
-    <div class="convert-content" v-loading="loading">
+    <!-- <div class="convert-content" v-loading="loading">
       <div class="integral-lists">
-        <div class="list" v-for="item in certificateList">
+        <div class="list" v-for="(item,index) in certificateList" :key="index">
           <div class="list-top" :style="{'background-image': 'url(' + basicUrl + item.cover + ')'}"></div>
           <div class="list-bottom">
             <span class="bottom-left">{{ item.name }}</span>
-            <span class="bottom-right" @click="conversion(item)">兑换</span>
+            <span class="bottom-right" @click="
+            (item)">兑换</span> -->
+
+    <ul class="book-main" :style="listStyle">
+      <li
+        v-for="(item, index) in certificatesList"
+        :key="item.id"
+        :style="{ marginBottom: isLastRow(index) ? '0px' : '' }"
+      >
+        <div class="integral-num">积分：50</div>
+        <el-image
+          style="width: 100%; height: 87%"
+          :src="baseUrl + item.cover"
+          fit="fill"
+        >
+        </el-image>
+        <div class="operate">
+          <div class="integral">
+            {{ item.name }}
+          </div>
+          <div class="operate-child">
+            <div class="exchange-btn" @click="conversion(item)">兑 换</div>
           </div>
         </div>
-      </div>
-      <div class="pagination">
-        <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
-      </div>
-    </div>
+      </li>
+    </ul>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
+
 <script>
-import myInput from "@/views/components/myInput/index.vue"
-import myPagination from "@/views/components/myPagination/index.vue"
 import { listCertificates } from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
 export default {
   data() {
     return {
-      total:0,
-      certificateList:[],
-      basicUrl:process.env.VUE_APP_BASE_API,
+      listStyle: {
+        height: 0,
+        overflowY: "auto",
+      },
+      baseUrl: process.env.VUE_APP_BASE_API,
+      certificatesList: [],
+      loading: false,
+      tableData: [],
+      total: 0,
       queryParams: {
+        name: undefined,
         pageNum: 1,
         pageSize: 10,
       },
-      loading:false,
-      value:{
-        name:''
-      },
-      isClick:false,
+      form: {},
+      rules: {},
     };
   },
-  components: {
-    myInput,myPagination
-  },
-  mounted() {
-    this.getList()
+  created() {
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.listStyle.height =
+        this.$refs.main.offsetHeight -
+        40 -
+        this.$refs.search.offsetHeight -
+        42 +
+        "px";
+      this.getList();
+    });
   },
   methods: {
-    // 页码切换
-    pagesChange(pages){
-      this.queryParams = pages;
-      this.getList()
+    isLastRow(index) {
+      const rowCount = Math.ceil(this.certificatesList.length / 5);
+      const row = Math.floor(index / 5);
+      return row === rowCount - 1;
+    },
+    /**兑换 */
+    conversion(item) {
+      console.log(item);
     },
-    // 点击搜索输入框的值
-    changeInput(e){
-      this.isClick = true;
-      this.queryParams= {
+    /**搜索 */
+    handleSearch(keyWord) {
+      this.queryParams = {
+        name: keyWord,
         pageNum: 1,
         pageSize: 10,
       };
-      this.value.name = e;
-      this.getList()
+      this.getList();
     },
-    // 监听输入框是否清空
-    changeValue(value){
-      if(this.isClick && value == ''){
-        this.value.name = '';
-        this.pages= {
-          pageNum: 1,
-          pageSize: 10,
-        };
-        this.getList();
-        this.isClick = false;
-      }
-    },
-    // 点击兑换
-    conversion(item){
-      console.log(item)
-    },
-    getList(){
+    /** 查询证书管理列表 */
+    getList() {
       this.loading = true;
-      let obj = { ...this.queryParams,...this.value }
-      listCertificates(obj).then((response) => {
-        this.certificateList = response.rows;
+      listCertificates(this.queryParams).then((response) => {
+        this.certificatesList = response.rows;
         this.total = response.total;
+        
         this.loading = false;
       });
-    }
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        type: null,
+        cover: null,
+        content: null,
+        datetime: null,
+        serviceDuration: null,
+        createId: null,
+        createBy: null,
+        createTime: null,
+        updateId: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        userId: null,
+        deptId: null,
+      };
+      this.resetForm("form");
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
-.mainBox {
-  height: 100%;
-  width: 100%;
-  border-radius: 10px 10px 0 0;
-  background-color: #fff;
-  padding: 0 20px 10px 20px;
-  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
-  .convert-topBox {
-    padding: 20px 0 0 0;
-  }
-  .convert-content {
-    height: 100%;
-    .integral-lists {
-      // display: flex;
-      // flex-wrap: wrap;
-      margin-top: 30px;
-      display: grid;
-      grid-template-columns: repeat(5, 19%);
-      grid-column-gap: 25px;
-      grid-row-gap: 25px;
-      height: 80%;
-      .list {
-        width: 100%;
-        height: 100%;
-        // background: linear-gradient(0deg, #EFE6D9, #DDC9AC);
-        box-shadow: 0px 3px 15px 0px rgba(184,184,184,0.22);
-        border-radius: 10px;
-        .list-top {
-          // background: url('../../../assets/images/icon1.png') no-repeat center center;
-          background-size: 100% 100%;
-          height: 80%;
-          width: 100%;
-        }
-        // .top-two {
-        //   background: url('../../../assets/images/icon2.png') no-repeat center center;
-        //   background-size: 100% 100%;
-        // }
-        // .top-three {
-        //   background: url('../../../assets/images/icon3.png') no-repeat center center;
-        //   background-size: 100% 100%;
-        // }
-        .list-bottom {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 10px 20px;
-          .bottom-left {
-            font-size: 16px;
-            font-family: FZDaBiaoSong-B06S;
-            font-weight: 400;
-            color: #4D4949;
-          }
-          .bottom-right {
-            padding: 3px 15px;
-            border-radius: 4px;
-            background-color: rgba(249,86,95,0.1);
-            font-size: 14px;
-            font-family: 'Alibaba PuHuiTi';
-            font-weight: 400;
-            color: #F8414D;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-    .pagination {
-      margin-top: 10px;
-    }
-  }
-}
-</style>
+@import "@/assets/styles/myTable.scss";
+</style>

src/views/volunteer/integralGain/index.vue

@@ -9,7 +9,11 @@
 <template>
   <div class="plan-management">
     <div class="plan-topBox">
-      <my-input @changeInput="changeInput" placeholder="请输入活动内容" @changeValue="changeValue"></my-input>
+      <my-input
+        @changeInput="changeInput"
+        placeholder="请输入活动内容"
+        @changeValue="changeValue"
+      ></my-input>
     </div>
     <div class="plan-bottomBox">
       <div class="tables">
@@ -26,13 +30,10 @@
             label="序号"
             type="index"
             header-align="center"
-            width="70">
-          </el-table-column>
-          <el-table-column
-            prop="name"
-            label="参与活动"
-            width="280"
+            width="70"
           >
+          </el-table-column>
+          <el-table-column prop="name" label="参与活动" width="280">
             <!-- <template slot-scope="scope">
               <div class="activity">
                 <div>{{ scope.row.content.split(' ')[0] }}</div>
@@ -47,97 +48,105 @@
             width="180"
           >
           </el-table-column>
-          <el-table-column
-            prop="activityTime"
-            label="服务活动时长"
-          >
+          <el-table-column prop="activityTime" label="服务活动时长">
             <template slot-scope="scope">
-              <div>{{ scope.row.activityTime.split(' ')[0] }}</div>
+              <div>{{ scope.row.activityTime.split(" ")[0] }}</div>
             </template>
           </el-table-column>
-          <el-table-column
-            prop="activityTime"
-            label="参与时间"
-          >
+          <el-table-column prop="activityTime" label="参与时间">
           </el-table-column>
-          <el-table-column
-            label="操作"
-            width="250"
-          >
+          <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="">
+                  <!-- <img src="@/assets/images/look.png" alt=""> -->
                   <span>查看</span>
                 </div>
-                <div class="score">评估评分：<span class="span" :class="Number(scope.row.points) < 60 ? 'pass':''">{{ scope.row.points }}</span></div>
+                <div class="score">
+                  评估评分：<span
+                    class="span"
+                    :class="Number(scope.row.points) < 60 ? 'pass' : ''"
+                    >{{ scope.row.points }}</span
+                  >
+                </div>
               </div>
             </template>
           </el-table-column>
         </el-table>
       </div>
       <div class="pagination">
-        <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
+        <my-pagination
+          :total="total"
+          @pagesChange="pagesChange"
+        ></my-pagination>
       </div>
     </div>
     <my-dialog ref="conversion" width="45%">
       <el-descriptions class="margin-top" :column="2" border>
-        <el-descriptions-item label="活动名称">{{ descriptions.name }}</el-descriptions-item>
-        <el-descriptions-item label="活动时间">{{ descriptions.activityTime }}</el-descriptions-item>
-        <el-descriptions-item label="活动举办方">{{ descriptions.publisher }}</el-descriptions-item>
-        <el-descriptions-item label="积分">{{ descriptions.points }}</el-descriptions-item>
+        <el-descriptions-item label="活动名称">{{
+          descriptions.name
+        }}</el-descriptions-item>
+        <el-descriptions-item label="活动时间">{{
+          descriptions.activityTime
+        }}</el-descriptions-item>
+        <el-descriptions-item label="活动举办方">{{
+          descriptions.publisher
+        }}</el-descriptions-item>
+        <el-descriptions-item label="积分">{{
+          descriptions.points
+        }}</el-descriptions-item>
       </el-descriptions>
     </my-dialog>
   </div>
 </template>
 <script>
-import myPagination from "@/views/components/myPagination/index.vue"
-import myInput from "@/views/components/myInput/index.vue"
-import myDialog from "@/views/components/dialog/index.vue"
+import myPagination from "@/views/components/myPagination/index.vue";
+import myInput from "@/views/components/myInput/index.vue";
+import myDialog from "@/views/components/dialog/index.vue";
 export default {
-  components:{myPagination,myInput,myDialog},
+  components: { myPagination, myInput, myDialog },
   data() {
     return {
       tableData: [],
       input: {
-        name:''
+        name: "",
       },
-      pages:{
-        pageSize:10,
-        pageNum:1
+      pages: {
+        pageSize: 10,
+        pageNum: 1,
       },
-      total:0,
-      loading:false,
-      isClick:false,
-      descriptions:{
-        name:'',
-        activityTime:'',
-        publisher:'',
-        points:''
+      total: 0,
+      loading: false,
+      isClick: false,
+      descriptions: {
+        name: "",
+        activityTime: "",
+        publisher: "",
+        points: "",
       },
-    }
+    };
   },
-  methods:{
+  methods: {
     // 页码，当前页切换事件
-    pagesChange(pages){
+    pagesChange(pages) {
       // console.log(pages)
-      this.getList(pages)
+      this.getList(pages);
     },
     // 输入框的值
-    changeInput(value){
+    changeInput(value) {
       this.input.name = value;
       this.isClick = true;
-      this.pages= {
+      this.pages = {
         pageNum: 1,
         pageSize: 10,
       };
       this.getList();
     },
     // 监听输入框是否清空
-    changeValue(value){
-      if(this.isClick && value == ''){
-        this.input.name = '';
-        this.pages= {
+    changeValue(value) {
+      if (this.isClick && value == "") {
+        this.input.name = "";
+        this.pages = {
           pageNum: 1,
           pageSize: 10,
         };
@@ -157,38 +166,38 @@ export default {
       if (columnIndex === 0) {
         return `text-align:center`;
       } else {
-        return '';
+        return "";
       }
     },
     // 查看详情页
-    async look(row){
+    async look(row) {
       this.$refs.conversion.open();
-      let data = await this.$api.jifenhuoqu.selectall({id:row.id});
-      let { name,activityTime,publisher,points } = data.data.list[0];
+      let data = await this.$api.jifenhuoqu.selectall({ id: row.id });
+      let { name, activityTime, publisher, points } = data.data.list[0];
       this.descriptions = {
         name,
         activityTime,
         publisher,
-        points
+        points,
       };
-      console.log(data)
+      console.log(data);
     },
     // 积分获取列表
-    async getList(){
+    async getList() {
       this.loading = true;
-      let obj = { ...this.pages,...this.input }
+      let obj = { ...this.pages, ...this.input };
       let data = await this.$api.jifenhuoqu.selectall(obj);
-      if(data.code == 200) {
+      if (data.code == 200) {
         this.loading = false;
         this.tableData = data.data.list;
         this.total = data.data.total;
       }
     },
   },
-  mounted(){
+  mounted() {
     this.getList();
   },
-}
+};
 </script>
 <style lang="scss" scoped>
 .plan-management {
@@ -197,7 +206,7 @@ export default {
   height: 100%;
   width: 100%;
   border-radius: 10px 10px 0 0;
-  box-shadow: 0px 0px 15px 0px rgba(229,212,212,0.58);
+  box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
   .plan-topBox {
     padding: 30px 0 0 0;
   }
@@ -214,14 +223,14 @@ export default {
             line-height: 20px;
             &:nth-child(1) {
               font-size: 14px;
-              font-family: 'Alibaba PuHuiTi';
+              font-family: "Alibaba PuHuiTi";
               font-weight: 400;
-              color: #4D4949;
+              color: #4d4949;
             }
             &:nth-child(2) {
               width: 180px;
               font-size: 14px;
-              font-family: 'Alibaba PuHuiTi';
+              font-family: "Alibaba PuHuiTi";
               font-weight: 400;
               color: #999191;
               white-space: nowrap;
@@ -235,18 +244,18 @@ export default {
           box-sizing: border-box;
           // text-align: center;
           font-size: 14px;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: "Alibaba PuHuiTi";
           font-weight: 400;
           color: #525966;
           padding: 2px 0;
         }
         th {
           height: 45px;
-          background-color: #F7F5F5;
+          background-color: #f7f5f5;
           font-size: 15px;
-          font-family: 'Alibaba PuHuiTi';
+          font-family: "Alibaba PuHuiTi";
           font-weight: bold;
-          color: #4D4949;
+          color: #4d4949;
           .el-checkbox {
             display: none;
           }
@@ -259,7 +268,7 @@ export default {
         display: flex;
         align-items: center;
         // justify-content: center;
-        .look{
+        .look {
           display: flex;
           // align-items: center;
           margin-right: 30px;
@@ -272,15 +281,15 @@ export default {
             font-size: 15px;
             font-family: Alibaba PuHuiTi;
             font-weight: 400;
-            color: #045FFD;
+            color: #045ffd;
           }
         }
         .score {
           .span {
-            color: #2AA984;
+            color: #2aa984;
           }
           .pass {
-            color: #F38447;
+            color: #f38447;
           }
         }
       }

src/views/volunteer/userbq/bqhsj/index.vue

@@ -0,0 +1,379 @@
+<template>
+  <div class="app-container" ref="apps">
+    <div class="titleInput" ref="titleInput">
+      <el-input
+        placeholder="请输入姓名"
+        v-model="afterParams.nickName"
+        class="input-with-select"
+      >
+        <el-button
+          slot="append"
+          icon="el-icon-search"
+          @click="search"
+        ></el-button>
+      </el-input>
+    </div>
+    <div v-loading="loads">
+      <div class="peopleContent" v-if="arrList.length > 0">
+        <div class="subMan" v-for="(item, index) in arrList" :key="index">
+          <div class="leftSub">
+            <div
+              class="leftAvatar"
+              :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
+            ></div>
+            <div class="leftName">
+              <div>{{item.nickName}}</div>
+              <div class="mainTag">
+                <!-- <div>{{ item.ageRange }}</div>
+                <div>
+                  {{ item.sexRange }}
+                </div>
+                <div>{{ item.educationRange }}</div> -->
+                <div
+                  v-show="itema != ''"
+                  v-for="(itema, index) in item.arrlist"
+                  :key="index"
+                >
+                  {{ itema }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="rightSub">
+            <div class="lookDetail" @click="looks(item.id)">查看</div>
+          </div>
+        </div>
+      </div>
+      <div v-else class="noneStyle">暂无数据</div>
+    </div>
+
+    <div class="pagination" ref="pagination">
+      <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
+    </div>
+    <!-- 查看该人员的详情 -->
+    <el-dialog
+      :visible.sync="peopelDetail"
+      width="40%"
+      @close="cancel"
+      :destroy-on-close="true"
+    >
+      <div slot="title">
+        <div class="titleText">查看人员详情</div>
+      </div>
+      <div class="center-content">
+        <el-descriptions class="margin-top" :column="2" border>
+          <el-descriptions-item
+            v-for="(item, index) in beforeData"
+            :key="index"
+          >
+            <template slot="label"> {{ item.name }} </template>
+            {{ item.value }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { peopleList, peopleGet } from "@/api/volunteer/hdgl";
+import myPagination from "@/views/components/myPagination/index.vue";
+export default {
+  data() {
+    return {
+      arrList: [],
+      form: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      afterParams: {
+        nickName: "",
+      },
+      total: 0,
+      loads: false,
+      //=========
+      peopelDetail: false,
+      beforeData: [
+        {
+          name: "年龄",
+          label: "ageRange",
+          value: "",
+        },
+        {
+          name: "文化程度",
+          label: "educationRange",
+          value: "",
+        },
+        {
+          name: "小区",
+          label: "housingRange",
+          value: "",
+        },
+        {
+          name: "行业类型",
+          label: "industryRange",
+          value: "",
+        },
+        {
+          name: "兴趣爱好",
+          label: "interestRange",
+          value: "",
+        },
+        {
+          name: "国籍",
+          label: "nationalityRange",
+          value: "",
+        },
+
+        {
+          name: "政治面貌",
+          label: "politicalRange",
+          value: "",
+        },
+        {
+          name: "专业类型",
+          label: "professionalRange",
+          value: "",
+        },
+        {
+          name: "院校",
+          label: "schoolRange",
+          value: "",
+        },
+        {
+          name: "性别",
+          label: "sexRange",
+          value: "",
+        },
+      ],
+      arr: [
+        "ageRange",
+        "sexRange",
+        "politicalRange",
+        "educationRange",
+        "housingRange",
+        "industryRange",
+        "interestRange",
+        "professionalRange",
+        "schoolRange",
+        "nationalityRange",
+      ],
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    cancel() {
+      this.peopelDetail = false;
+    },
+    looks(e) {
+      peopleGet(e).then((res) => {
+        this.beforeData.forEach((value, index) => {
+          for (let key in res.data) {
+            if (value.label == key) {
+              this.beforeData[index].value = res.data[key];
+            }
+          }
+        });
+        this.peopelDetail = true;
+      });
+    },
+    search() {
+      this.form = { ...this.form, ...this.afterParams };
+      this.getList();
+      this.afterParams.nickName = ""
+
+    },
+    //标签生成
+    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;
+    },
+    getList() {
+      this.loads = true;
+      peopleList(this.form).then((res) => {
+        this.arrList = res.rows;
+        console.log(this.arrList);
+        if (this.arrList.length > 0) {
+          this.arrList.forEach((item) => {
+            item.arrlist = this.labelgenerate(item);
+          });
+        }
+        this.total = res.total;
+        this.loads = false;
+      });
+    },
+    pagesChange(e) {
+      this.form.pageNum = e.pageNum;
+      this.form.pageSize = e.pageSize;
+      this.getList();
+    },
+  },
+  components: {
+    myPagination,
+  },
+
+  mounted() {},
+};
+</script>
+
+<style lang="scss" scoped>
+.noneStyle {
+  height: 490px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Alibaba-PuHuiTi-Medium.otf";
+  color: #606266;
+  font-size: 14px;
+}
+.center-content {
+  padding: 20px 30px;
+}
+::v-deep .margin-top td {
+  font-family: "Alibaba-PuHuiTi-Regular";
+}
+::v-deep .margin-top th {
+  font-family: "Alibaba-PuHuiTi-Regular";
+  width: 20%;
+}
+::v-deep .el-dialog {
+  border-radius: 10px;
+  margin-bottom: 20px;
+}
+::v-deep .el-dialog__header {
+  padding: 10px;
+  padding-left: 15px;
+  background: #f7f5f5;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+::v-deep .el-dialog__body {
+  padding: 0;
+}
+::v-deep .el-dialog__footer {
+  padding: 0;
+}
+::v-deep .el-dialog__headerbtn {
+  top: 12px;
+}
+.titleText {
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: bold;
+  color: #4c4949;
+  padding-left: 15px;
+  font-size: 16px;
+  position: relative;
+  &::before {
+    position: absolute;
+    top: 3.8px;
+    left: 0;
+    content: "";
+    width: 5px;
+    height: 15px;
+    background: #f8414d;
+  }
+}
+::v-deep .titleInput .el-input__inner {
+  border-right: none;
+}
+::v-deep .titleInput .el-input-group__append {
+  background: #f8414d;
+  border: none;
+  color: #fff;
+}
+.titleInput {
+  width: 30%;
+  margin-bottom: 20px;
+}
+.mainTag {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  & > div {
+    margin-bottom: 5px;
+    margin-right: 5px;
+    background-color: rgba(248, 65, 77, 0.06);
+    padding: 3px 5px;
+    color: #e16a70;
+    border-radius: 4px;
+  }
+}
+.peopleContent {
+  // height: 490px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+  overflow-y: auto;
+
+  .subMan {
+    width: 49.2%;
+    height: 20.4%;
+    background: #fafafa;
+    border: 1px solid #f5edeb;
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    margin-bottom: 17px;
+    padding: 15px;
+    .leftSub {
+      width: 80%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .leftAvatar {
+        min-height: 100px;
+        min-width: 100px;
+        background-size: 100% 100%;
+        border-radius: 10px;
+      }
+      .leftName {
+        margin-left: 15px;
+        & > div:nth-of-type(1) {
+          font-family: "Alibaba-PuHuiTi-Medium.otf";
+          color: #4c4949;
+          font-size: 18px;
+          margin-bottom: 5px;
+        }
+         & > div:nth-of-type(2) {
+            margin-bottom: -10px;
+          }
+      }
+    }
+    .rightSub {
+      flex: 1.5;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .lookDetail {
+        width: 80px;
+        height: 80px;
+        background: #ffffff;
+        box-shadow: 0px 0px 15px 0px rgba(77, 161, 254, 0.17);
+        border-radius: 50%;
+        font-family: "Alibaba-PuHuiTi-Medium.otf";
+        font-weight: 400;
+        color: #188ffe;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+  }
+}
+</style>

src/views/volunteer/userbq/dictGl/data.vue

@@ -0,0 +1,486 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <!-- <el-form-item label="字典名称" prop="dictType">
+        <el-select v-model="queryParams.dictType">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.dictId"
+            :label="item.dictName"
+            :value="item.dictType"
+          />
+        </el-select>
+      </el-form-item> -->
+      <el-form-item label="字典标签" prop="dictLabel">
+        <el-input
+          v-model="queryParams.dictLabel"
+          placeholder="请输入字典标签"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <!-- <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="数据状态" clearable>
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item> -->
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          >修改</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          >删除</el-button
+        >
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:dict:export']"
+        >导出</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-close"
+          size="mini"
+          @click="handleClose"
+          >关闭</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="dataList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="字典编码" align="center" prop="dictCode" />
+      <el-table-column label="字典标签" align="center" prop="dictLabel">
+        <template slot-scope="scope">
+          <span
+            v-if="
+              (scope.row.listClass == '' || scope.row.listClass == 'default') &&
+              (scope.row.cssClass == '' || scope.row.cssClass == null)
+            "
+            >{{ scope.row.dictLabel }}</span
+          >
+          <el-tag
+            v-else
+            :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass"
+            :class="scope.row.cssClass"
+            >{{ scope.row.dictLabel }}</el-tag
+          >
+        </template>
+      </el-table-column>
+      <el-table-column label="字典键值" align="center" prop="dictValue" />
+      <el-table-column label="字典排序" align="center" prop="dictSort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.sys_normal_disable"
+            :value="scope.row.status"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="备注"
+        align="center"
+        prop="remark"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']"
+            >修改</el-button
+          >
+          <!-- <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dict:remove']"
+          >删除</el-button> -->
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="字典类型">
+          <el-input v-model="form.dictType" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="数据标签" prop="dictLabel">
+          <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
+        </el-form-item>
+        <el-form-item label="数据键值" prop="dictValue">
+          <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
+        </el-form-item>
+        <el-form-item label="样式属性" prop="cssClass">
+          <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
+        </el-form-item>
+        <el-form-item label="显示排序" prop="dictSort">
+          <el-input-number
+            v-model="form.dictSort"
+            controls-position="right"
+            :min="0"
+          />
+        </el-form-item>
+        <el-form-item label="回显样式" prop="listClass">
+          <el-select v-model="form.listClass">
+            <el-option
+              v-for="item in listClassOptions"
+              :key="item.value"
+              :label="item.label + '(' + item.value + ')'"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.value"
+              >{{ dict.label }}</el-radio
+            >
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listData,
+  getData,
+  delData,
+  addData,
+  updateData,
+} from "@/api/system/dict/data";
+import {
+  optionselect as getDictOptionselect,
+  getType,
+} from "@/api/system/dict/type";
+
+export default {
+  name: "Data",
+  dicts: ["sys_normal_disable"],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: false,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      dataList: [],
+      // 默认字典类型
+      defaultDictType: "",
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 数据标签回显样式
+      listClassOptions: [
+        {
+          value: "default",
+          label: "默认",
+        },
+        {
+          value: "primary",
+          label: "主要",
+        },
+        {
+          value: "success",
+          label: "成功",
+        },
+        {
+          value: "info",
+          label: "信息",
+        },
+        {
+          value: "warning",
+          label: "警告",
+        },
+        {
+          value: "danger",
+          label: "危险",
+        },
+      ],
+      // 类型数据字典
+      typeOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        dictLabel: [
+          { required: true, message: "数据标签不能为空", trigger: "blur" },
+        ],
+        dictValue: [
+          { required: true, message: "数据键值不能为空", trigger: "blur" },
+        ],
+        dictSort: [
+          { required: true, message: "数据顺序不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    const dictId = this.$route.params && this.$route.params.dictId;
+    this.getType(dictId);
+    this.getTypeList();
+  },
+  methods: {
+    /** 查询字典类型详细 */
+    getType(dictId) {
+      getType(dictId).then((response) => {
+        this.queryParams.dictType = response.data.dictType;
+        this.defaultDictType = response.data.dictType;
+        this.getList();
+      });
+    },
+    /** 查询字典类型列表 */
+    getTypeList() {
+      getDictOptionselect().then((response) => {
+        this.typeOptions = response.data;
+      });
+    },
+    /** 查询字典数据列表 */
+    getList() {
+      this.loading = true;
+      listData(this.queryParams).then((response) => {
+        this.dataList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        dictCode: undefined,
+        dictLabel: undefined,
+        dictValue: undefined,
+        cssClass: undefined,
+        listClass: "default",
+        dictSort: 0,
+        status: "0",
+        remark: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 返回按钮操作 */
+    handleClose() {
+      const obj = { path: "/volunteer/userbq/dictGl" };
+      this.$tab.closeOpenPage(obj);
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.dictType = this.defaultDictType;
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加字典数据";
+      this.form.dictType = this.queryParams.dictType;
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.dictCode);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const dictCode = row.dictCode || this.ids;
+      getData(dictCode).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改字典数据";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.dictCode != undefined) {
+            updateData(this.form).then((response) => {
+              this.$store.dispatch(
+                "dict/removeDict",
+                this.queryParams.dictType
+              );
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addData(this.form).then((response) => {
+              this.$store.dispatch(
+                "dict/removeDict",
+                this.queryParams.dictType
+              );
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const dictCodes = row.dictCode || this.ids;
+      this.$modal
+        .confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？')
+        .then(function () {
+          return delData(dictCodes);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+          this.$store.dispatch("dict/removeDict", this.queryParams.dictType);
+        })
+        .catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/dict/data/export",
+        {
+          ...this.queryParams,
+        },
+        `data_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
+};
+</script>

src/views/volunteer/userbq/dictGl/index.vue

@@ -0,0 +1,439 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="字典名称" prop="dictName">
+        <el-input
+          v-model="queryParams.dictName"
+          placeholder="请输入字典名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <!-- <el-form-item label="字典类型" prop="dictType">
+        <el-input
+          v-model="queryParams.dictType"
+          placeholder="请输入字典类型"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="字典状态"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item> -->
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:dict:add']"
+        >新增</el-button>
+      </el-col> -->
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:dict:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:dict:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:dict:export']"
+        >导出</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-refresh"
+          size="mini"
+          @click="handleRefreshCache"
+          v-hasPermi="['system:dict:remove']"
+          >刷新缓存</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="typeList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="字典编号" align="center" prop="dictId" />
+      <el-table-column
+        label="字典名称"
+        align="center"
+        prop="dictName"
+        :show-overflow-tooltip="true"
+      >
+        <template slot-scope="scope">
+          <router-link
+            :to="'/volunteer/zyzsjgl/zdgl/' + scope.row.dictId"
+            class="link-type"
+          >
+            <span>{{ scope.row.dictName }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="字典类型"
+        align="center"
+        :show-overflow-tooltip="true"
+      >
+        <template slot-scope="scope">
+          <router-link
+            :to="'/volunteer/zyzsjgl/zdgl/' + scope.row.dictId"
+            class="link-type"
+          >
+            <span>{{ scope.row.dictType }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.sys_normal_disable"
+            :value="scope.row.status"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="备注"
+        align="center"
+        prop="remark"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <router-link
+            :to="'/volunteer/zyzsjgl/zdgl/' + scope.row.dictId"
+            class="link-type"
+          >
+            <el-button size="mini" type="text" icon="el-icon-edit"
+              >修改</el-button
+            >
+          </router-link>
+          <!-- <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dict:remove']"
+          >删除</el-button> -->
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="字典名称" prop="dictName">
+          <el-input v-model="form.dictName" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典类型" prop="dictType">
+          <el-input v-model="form.dictType" placeholder="请输入字典类型" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.value"
+              >{{ dict.label }}</el-radio
+            >
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listType2,
+  getType,
+  delType,
+  addType,
+  updateType,
+  refreshCache,
+} from "@/api/system/dict/type";
+import delgdata from "./data.vue";
+export default {
+  name: "Dict",
+  dicts: ["sys_normal_disable"],
+  components: { delgdata },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: false,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      typeList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        dictName: [
+          { required: true, message: "字典名称不能为空", trigger: "blur" },
+        ],
+        dictType: [
+          { required: true, message: "字典类型不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询字典类型列表 */
+    getList() {
+      this.loading = true;
+      listType2(this.addDateRange(this.queryParams, this.dateRange)).then(
+        (response) => {
+          this.typeList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        dictId: undefined,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined,
+        remark: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加字典类型";
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.dictId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const dictId = row.dictId || this.ids;
+      getType(dictId).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改字典类型";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.dictId != undefined) {
+            updateType(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addType(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const dictIds = row.dictId || this.ids;
+      this.$modal
+        .confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？')
+        .then(function () {
+          return delType(dictIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/dict/type/export",
+        {
+          ...this.queryParams,
+        },
+        `type_${new Date().getTime()}.xlsx`
+      );
+    },
+    /** 刷新缓存按钮操作 */
+    handleRefreshCache() {
+      refreshCache().then(() => {
+        this.$modal.msgSuccess("刷新成功");
+        this.$store.dispatch("dict/cleanDict");
+      });
+    },
+  },
+};
+</script>

src/views/volunteer/yzczs/myycxhd/index.vue

@@ -0,0 +1,393 @@
+<template>
+  <div class="app-container" ref="main">
+    <div ref="search">
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      :height="tableHeigth + 'px'"
+    >
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+        prop="id"
+        width="55"
+      />
+      <el-table-column label="活动名称" align="center" prop="name" />
+      <el-table-column label="志愿者" align="center" prop="userName" />
+      <el-table-column
+        label="活动参与时间"
+        align="center"
+        prop="activityTime"
+      />
+      <el-table-column label="活动时长" align="center" prop="points">
+        <template slot-scope="scope"> {{ scope.row.points }}小时 </template>
+      </el-table-column>
+      <el-table-column label="活动积分" align="center" prop="points" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <span
+            :style="{
+              color: scope.row.issuanceStatus
+                ? '#67C23A'
+                : scope.row.issuanceStatus == false && scope.row.type == 2
+                ? '#E6A23C'
+                : '#F56C6C',
+            }"
+          >
+            {{ filterIissuanceStatus(scope.row) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleInfo(scope.row)"
+            >查看</el-button
+          >
+          <el-button
+            v-if="!scope.row.recordsId"
+            size="mini"
+            type="text"
+            @click="handleApplyfor(scope.row)"
+            >申请</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <!-- 查看 -->
+    <el-dialog :visible.sync="infoShow" width="600px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        查看
+      </div>
+      <div class="conversionInfo">
+        <div class="basicInfo">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>活动详情</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>活动名称：</div>
+                <div>{{ form.name }}</div>
+              </div>
+              <div class="list-right">
+                <div>志愿者：</div>
+                <div>{{ form.userName }}</div>
+              </div>
+            </div>
+            <div class="lists">
+              <div class="list-left">
+                <div>活动参与时间：</div>
+                <div>{{ form.activityTime }}</div>
+              </div>
+              <div class="list-left">
+                <div>状态：</div>
+                <div>{{ filterIissuanceStatus(form) }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="logisticsInfo"
+          v-show="form.type == 2 && form.issuanceStatus == true"
+        >
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>纸制证书</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>快递公司：</div>
+                <div>{{ form.courierCompanies }}</div>
+              </div>
+              <div class="list-right">
+                <div>快递单号：</div>
+                <div>{{ form.trackingNumber }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="logisticsInfo"
+          v-show="form.type == 1 && form.issuanceStatus == true"
+        >
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>电子证书</span>
+          </div>
+          <div class="info zs-box" ref="zs">
+            <div class="top-text">
+              <span>{{ form.userName }}</span> 先生/女士：
+              <p>
+                您在苏州工业园区累计志愿服务0小时，感谢您的无私奉献，特发此证，以兹鼓励。
+              </p>
+            </div>
+            <div class="bottom-text">
+              <div class="lable-value">
+                <div class="lable">签发单位：</div>
+                <div class="value">苏州工业园区宣传和统战部</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">苏州工业园区新时代文明实践中心</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">
+                  {{ $moment().format("YYYY年MM月DD日") }}
+                </div>
+              </div>
+            </div>
+            <div class="zs-z"></div>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            style="margin-top: 10px"
+            @click="downloadContentAsImage()"
+            >下载电子证书</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 申请 -->
+
+    <el-dialog :visible.sync="applyShow" width="350px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        申请操作
+      </div>
+      <el-radio-group v-model="radio">
+        <el-radio-button :label="1">电子证书</el-radio-button>
+        <el-radio-button :label="2">纸质证书</el-radio-button>
+      </el-radio-group>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitElectron">确 认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// 初始  false  null  （未申请）
+// 志愿者申请电子   true   1 （已发放电子）
+// 志愿者申请纸质  false   2 （待发放纸质）
+// 管理端发放纸质  true   2 （已发放纸质）
+import {
+  dsbrecordsList,
+  dsbrecordsInfo,
+  getYcInfo,
+  ycIssue,
+  getYcList,
+} from "@/api/volunteer/gxhzs/hdzsff/index.js";
+import html2canvas from "html2canvas";
+export default {
+  data() {
+    return {
+      currentRow: {},
+      radio: 1,
+      applyShow: false,
+      infoShow: false,
+      infoOpen: false,
+      form: {},
+      rules: {
+        courierCompanies: [
+          { required: true, message: "请输入快递公司", trigger: "blur" },
+        ],
+        trackingNumber: [
+          { required: true, message: "请输入快递公司", trigger: "blur" },
+        ],
+      },
+      open: false,
+      title: "",
+      tableHeigth: 0,
+      loading: false,
+      tableData: [],
+      total: 1,
+      queryParams: {
+        UId: null,
+        name: undefined,
+        // creType: 1, //1:一次性证书发放,2：个性化证书发放
+        pageNum: 1,
+        pageSize: 20,
+      },
+    };
+  },
+  created() {
+    this.queryParams.UId = this.$store.getters.userId;
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.tableHeigth =
+        this.$refs.main.offsetHeight - 40 - this.$refs.search.offsetHeight - 73;
+      this.getList();
+    });
+  },
+  methods: {
+    /**状态过滤 */
+    filterIissuanceStatus(row) {
+      if (row.issuanceStatus == false && row.type == null) {
+        return "未发放";
+      } else if (
+        (row.issuanceStatus == true && row.type == 1) ||
+        (row.issuanceStatus == true && row.type == 2)
+      ) {
+        return "已发放";
+      } else if (row.issuanceStatus == false && row.type == 2) {
+        return "已申请";
+      }
+    },
+    /**电子 */
+    submitElectron() {
+      let _this = this;
+      let title = "";
+      if (this.radio == 1) {
+        title = `您确定要申请“${this.currentRow.name}”电子证书吗？`;
+      } else {
+        title = `您确定要申请“${this.currentRow.name}”纸质证书吗？`;
+      }
+      this.$modal.confirm(title).then(function () {
+        let data = {
+          status: _this.radio,
+          id: _this.currentRow.id,
+          type: _this.radio, //	1:电子证书 2:纸制证书
+        };
+        _this.subIssue(data);
+      });
+      this.applyShow = false;
+    },
+    //电子发放
+    subIssue(data) {
+      ycIssue(data).then((res) => {
+        this.applyShow = false;
+        this.getList();
+        if (data.type == 1) {
+          this.$modal.msgSuccess("发放成功");
+        } else {
+          this.$modal.msgSuccess("申请成功");
+        }
+      });
+    },
+
+    /**申请操作 */
+    handleApplyfor(row) {
+      this.currentRow = row;
+      this.applyShow = true;
+    },
+    /**下载电子证书 */
+    downloadContentAsImage() {
+      const loading = this.$loading({
+        lock: true,
+        text: "下载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      const content = this.$refs.zs; // 获取目标<div>的DOM节点
+      // 创建一个Canvas元素，并设置宽高等于目标<div>的尺寸
+      const canvas = document.createElement("canvas");
+      canvas.width = content.offsetWidth;
+      canvas.height = content.offsetHeight;
+      const context = canvas.getContext("2d");
+      // 使用Canvas绘制目标<div>中的内容
+      html2canvas(content).then((canvas) => {
+        // 将Canvas转换为DataURL
+        const dataURL = canvas.toDataURL("image/png");
+        // 使用FileSaver.js保存DataURL为图片文件
+        saveAs(dataURL, "download.png");
+        loading.close();
+      });
+    },
+
+    /**搜索 */
+    handleSearch(keyWord) {
+      this.queryParams = {
+        name: keyWord,
+        // creType: 1, //1:一次性证书发放,2：个性化证书发放
+        pageNum: 1,
+        pageSize: 10,
+      };
+      this.getList();
+    },
+    /**查详情 */
+    async handleInfo(row) {
+      let res = await this.getInfo(row.id);
+      this.form = res.data;
+      this.infoShow = true;
+      // console.log("详情", res);
+    },
+    async getInfo(id) {
+      let res = await getYcInfo(id);
+      return res;
+    },
+    /**关闭 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /**重置 */
+    reset() {
+      this.form = {
+        id: null,
+        activityId: null,
+        certificateId: null,
+        uId: null,
+        content: null,
+        createId: null,
+        createBy: null,
+        activityTime: null,
+        updateId: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        userId: null,
+        deptId: null,
+        type: null,
+      };
+    },
+    /** 查询发放记录列表 */
+    getList() {
+      this.loading = true;
+      getYcList(this.queryParams).then((response) => {
+        this.tableData = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/myTable.scss";
+.info-form-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 17px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: 500;
+  color: #333;
+  font-weight: bold;
+  span {
+    width: 5px;
+    height: 17px;
+    margin-right: 6px;
+    background: #f8414d;
+  }
+}
+</style>

src/views/volunteer/yzczs/myycxzs/index copy.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="app-container" ref="main">
+    <div ref="search">
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      :height="tableHeigth + 'px'"
+    >
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+        prop="id"
+        width="55"
+      />
+      <el-table-column label="活动名称" align="center" prop="name" />
+      <el-table-column label="志愿者" align="center" prop="userName" />
+      <el-table-column
+        label="活动参与时间"
+        align="center"
+        prop="activityTime"
+      />
+      <el-table-column label="活动时长" align="center" prop="points">
+        <template slot-scope="scope"> {{ scope.row.points }}小时 </template>
+      </el-table-column>
+      <el-table-column label="活动积分" align="center" prop="points" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <span
+            :style="{
+              color: scope.row.issuanceStatus ? '#67C23A' : '#F56C6C',
+            }"
+          >
+            {{ scope.row.issuanceStatus ? "已发放" : "未发放" }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleInfo(scope.row)"
+            >查看</el-button
+          >
+          <el-button
+            v-if="scope.row.issuanceStatus == false"
+            size="mini"
+            type="text"
+            @click="handleApplyfor(scope.row)"
+            >申请</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <!-- 查看 -->
+    <el-dialog :visible.sync="infoShow" width="600px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        查看
+      </div>
+      <div class="conversionInfo">
+        <div class="basicInfo">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>活动详情</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>活动名称：</div>
+                <div>{{ form.name }}</div>
+              </div>
+              <div class="list-right">
+                <div>志愿者：</div>
+                <div>{{ form.userName }}</div>
+              </div>
+            </div>
+            <div class="lists">
+              <div class="list-left">
+                <div>活动参与时间：</div>
+                <div>{{ form.activityTime }}</div>
+              </div>
+              <div class="list-left">
+                <div>状态：</div>
+                <div>{{ form.issuanceStatus ? "已发放" : "未发放" }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="logisticsInfo" v-show="form.type == 2">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>纸制证书</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>快递公司：</div>
+                <div>{{ form.courierCompanies }}</div>
+              </div>
+              <div class="list-right">
+                <div>快递单号：</div>
+                <div>{{ form.trackingNumber }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="logisticsInfo" v-show="form.type == 1">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>电子证书</span>
+          </div>
+          <div class="info zs-box" ref="zs">
+            <div class="top-text">
+              <span>{{ form.userName }}</span> 先生/女士：
+              <p>
+                您在苏州工业园区累计志愿服务0小时，感谢您的无私奉献，特发此证，以兹鼓励。
+              </p>
+            </div>
+            <div class="bottom-text">
+              <div class="lable-value">
+                <div class="lable">签发单位：</div>
+                <div class="value">苏州工业园区宣传和统战部</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">苏州工业园区新时代文明实践中心</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">
+                  {{ $moment().format("YYYY年MM月DD日") }}
+                </div>
+              </div>
+            </div>
+            <div class="zs-z"></div>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            style="margin-top: 10px"
+            @click="downloadContentAsImage()"
+            >下载电子证书</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 申请 -->
+
+    <el-dialog :visible.sync="applyShow" width="350px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        申请操作
+      </div>
+      <el-radio-group v-model="radio">
+        <el-radio-button :label="1">电子证书</el-radio-button>
+        <el-radio-button :label="2">纸质证书</el-radio-button>
+      </el-radio-group>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitElectron">确 认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  dsbrecordsList,
+  dsbrecordsInfo,
+  getYcInfo,
+  ycIssue,
+  getYcList,
+} from "@/api/volunteer/gxhzs/hdzsff/index.js";
+import html2canvas from "html2canvas";
+export default {
+  data() {
+    return {
+      currentRow: {},
+      radio: 1,
+      applyShow: false,
+      infoShow: false,
+      infoOpen: false,
+      form: {},
+      rules: {
+        courierCompanies: [
+          { required: true, message: "请输入快递公司", trigger: "blur" },
+        ],
+        trackingNumber: [
+          { required: true, message: "请输入快递公司", trigger: "blur" },
+        ],
+      },
+      open: false,
+      title: "",
+      tableHeigth: 0,
+      loading: false,
+      tableData: [],
+      total: 1,
+      queryParams: {
+        UId: null,
+        name: undefined,
+        issuanceStatus: true,
+        pageNum: 1,
+        pageSize: 20,
+      },
+    };
+  },
+  created() {
+    this.queryParams.UId = this.$store.getters.userId;
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.tableHeigth =
+        this.$refs.main.offsetHeight - 40 - this.$refs.search.offsetHeight - 73;
+      this.getList();
+    });
+  },
+  methods: {
+    /**电子 */
+    submitElectron() {
+      let _this = this;
+      if (this.radio == 1) {
+        this.$modal
+          .confirm(`您确定要申请“${this.currentRow.name}”电子证书吗？`)
+          .then(function () {
+            let data = {
+              id: _this.currentRow.id,
+              type: _this.radio, //	1:电子证书 2:纸制证书
+            };
+            _this.subIssue(data);
+          });
+      } else {
+        this.applyShow = false;
+      }
+    },
+    //电子发放
+    subIssue(data) {
+      ycIssue(data).then((res) => {
+        this.applyShow = false;
+        this.getList();
+        this.$modal.msgSuccess("发放成功");
+      });
+    },
+
+    /**申请操作 */
+    handleApplyfor(row) {
+      this.currentRow = row;
+      this.applyShow = true;
+    },
+    /**下载电子证书 */
+    downloadContentAsImage() {
+      const loading = this.$loading({
+        lock: true,
+        text: "下载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      const content = this.$refs.zs; // 获取目标<div>的DOM节点
+      // 创建一个Canvas元素，并设置宽高等于目标<div>的尺寸
+      const canvas = document.createElement("canvas");
+      canvas.width = content.offsetWidth;
+      canvas.height = content.offsetHeight;
+      const context = canvas.getContext("2d");
+      // 使用Canvas绘制目标<div>中的内容
+      html2canvas(content).then((canvas) => {
+        // 将Canvas转换为DataURL
+        const dataURL = canvas.toDataURL("image/png");
+        // 使用FileSaver.js保存DataURL为图片文件
+        saveAs(dataURL, "download.png");
+        loading.close();
+      });
+    },
+
+    /**搜索 */
+    handleSearch(keyWord) {
+      this.queryParams = {
+        name: keyWord,
+        // creType: 1, //1:一次性证书发放,2：个性化证书发放
+        pageNum: 1,
+        pageSize: 10,
+      };
+      this.getList();
+    },
+    /**查详情 */
+    async handleInfo(row) {
+      let res = await this.getInfo(row.id);
+      this.form = res.data;
+      this.infoShow = true;
+      // console.log("详情", res);
+    },
+    async getInfo(id) {
+      let res = await getYcInfo(id);
+      return res;
+    },
+    /**关闭 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /**重置 */
+    reset() {
+      this.form = {
+        id: null,
+        activityId: null,
+        certificateId: null,
+        uId: null,
+        content: null,
+        createId: null,
+        createBy: null,
+        activityTime: null,
+        updateId: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        userId: null,
+        deptId: null,
+        type: null,
+      };
+    },
+    /** 查询发放记录列表 */
+    getList() {
+      this.loading = true;
+      getYcList(this.queryParams).then((response) => {
+        this.tableData = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/myTable.scss";
+.info-form-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 17px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: 500;
+  color: #333;
+  font-weight: bold;
+  span {
+    width: 5px;
+    height: 17px;
+    margin-right: 6px;
+    background: #f8414d;
+  }
+}
+</style>

src/views/volunteer/yzczs/myycxzs/index.vue

@@ -0,0 +1,394 @@
+<template>
+  <div class="app-container" ref="main">
+    <div ref="search">
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      :height="tableHeigth + 'px'"
+    >
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+        prop="id"
+        width="55"
+      />
+      <el-table-column label="活动名称" align="center" prop="name" />
+      <el-table-column label="志愿者" align="center" prop="userName" />
+      <el-table-column
+        label="活动参与时间"
+        align="center"
+        prop="activityTime"
+      />
+      <el-table-column label="活动时长" align="center" prop="points">
+        <template slot-scope="scope"> {{ scope.row.points }}小时 </template>
+      </el-table-column>
+      <el-table-column label="活动积分" align="center" prop="points" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <span
+            :style="{
+              color: scope.row.issuanceStatus
+                ? '#67C23A'
+                : scope.row.issuanceStatus == false && scope.row.type == 2
+                ? '#E6A23C'
+                : '#F56C6C',
+            }"
+          >
+            {{ filterIissuanceStatus(scope.row) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleInfo(scope.row)"
+            >查看</el-button
+          >
+          <el-button
+            v-if="!scope.row.recordsId"
+            size="mini"
+            type="text"
+            @click="handleApplyfor(scope.row)"
+            >申请</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <!-- 查看 -->
+    <el-dialog :visible.sync="infoShow" width="600px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        查看
+      </div>
+      <div class="conversionInfo">
+        <div class="basicInfo">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>活动详情</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>活动名称：</div>
+                <div>{{ form.name }}</div>
+              </div>
+              <div class="list-right">
+                <div>志愿者：</div>
+                <div>{{ form.userName }}</div>
+              </div>
+            </div>
+            <div class="lists">
+              <div class="list-left">
+                <div>活动参与时间：</div>
+                <div>{{ form.activityTime }}</div>
+              </div>
+              <div class="list-left">
+                <div>状态：</div>
+                <div>{{ filterIissuanceStatus(form) }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="logisticsInfo"
+          v-show="form.type == 2 && form.issuanceStatus == true"
+        >
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>纸制证书</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>快递公司：</div>
+                <div>{{ form.courierCompanies }}</div>
+              </div>
+              <div class="list-right">
+                <div>快递单号：</div>
+                <div>{{ form.trackingNumber }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="logisticsInfo"
+          v-show="form.type == 1 && form.issuanceStatus == true"
+        >
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>电子证书</span>
+          </div>
+          <div class="info zs-box" ref="zs">
+            <div class="top-text">
+              <span>{{ form.userName }}</span> 先生/女士：
+              <p>
+                您在苏州工业园区累计志愿服务0小时，感谢您的无私奉献，特发此证，以兹鼓励。
+              </p>
+            </div>
+            <div class="bottom-text">
+              <div class="lable-value">
+                <div class="lable">签发单位：</div>
+                <div class="value">苏州工业园区宣传和统战部</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">苏州工业园区新时代文明实践中心</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">
+                  {{ $moment().format("YYYY年MM月DD日") }}
+                </div>
+              </div>
+            </div>
+            <div class="zs-z"></div>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            style="margin-top: 10px"
+            @click="downloadContentAsImage()"
+            >下载电子证书</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 申请 -->
+
+    <el-dialog :visible.sync="applyShow" width="350px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        申请操作
+      </div>
+      <el-radio-group v-model="radio">
+        <el-radio-button :label="1">电子证书</el-radio-button>
+        <el-radio-button :label="2">纸质证书</el-radio-button>
+      </el-radio-group>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitElectron">确 认</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// 初始  false  null  （未申请）
+// 志愿者申请电子   true   1 （已发放电子）
+// 志愿者申请纸质  false   2 （待发放纸质）
+// 管理端发放纸质  true   2 （已发放纸质）
+import {
+  dsbrecordsList,
+  dsbrecordsInfo,
+  getYcInfo,
+  ycIssue,
+  getYcList,
+} from "@/api/volunteer/gxhzs/hdzsff/index.js";
+import html2canvas from "html2canvas";
+export default {
+  data() {
+    return {
+      currentRow: {},
+      radio: 1,
+      applyShow: false,
+      infoShow: false,
+      infoOpen: false,
+      form: {},
+      rules: {
+        courierCompanies: [
+          { required: true, message: "请输入快递公司", trigger: "blur" },
+        ],
+        trackingNumber: [
+          { required: true, message: "请输入快递公司", trigger: "blur" },
+        ],
+      },
+      open: false,
+      title: "",
+      tableHeigth: 0,
+      loading: false,
+      tableData: [],
+      total: 1,
+      queryParams: {
+        UId: null,
+        name: undefined,
+        issuanceStatus: true,
+        // creType: 1, //1:一次性证书发放,2：个性化证书发放
+        pageNum: 1,
+        pageSize: 20,
+      },
+    };
+  },
+  created() {
+    this.queryParams.UId = this.$store.getters.userId;
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.tableHeigth =
+        this.$refs.main.offsetHeight - 40 - this.$refs.search.offsetHeight - 73;
+      this.getList();
+    });
+  },
+  methods: {
+    /**状态过滤 */
+    filterIissuanceStatus(row) {
+      if (row.issuanceStatus == false && row.type == null) {
+        return "未发放";
+      } else if (
+        (row.issuanceStatus == true && row.type == 1) ||
+        (row.issuanceStatus == true && row.type == 2)
+      ) {
+        return "已发放";
+      } else if (row.issuanceStatus == false && row.type == 2) {
+        return "已申请";
+      }
+    },
+    /**电子 */
+    submitElectron() {
+      let _this = this;
+      let title = "";
+      if (this.radio == 1) {
+        title = `您确定要申请“${this.currentRow.name}”电子证书吗？`;
+      } else {
+        title = `您确定要申请“${this.currentRow.name}”纸质证书吗？`;
+      }
+      this.$modal.confirm(title).then(function () {
+        let data = {
+          status: _this.radio,
+          id: _this.currentRow.id,
+          type: _this.radio, //	1:电子证书 2:纸制证书
+        };
+        _this.subIssue(data);
+      });
+      this.applyShow = false;
+    },
+    //电子发放
+    subIssue(data) {
+      ycIssue(data).then((res) => {
+        this.applyShow = false;
+        this.getList();
+        if (data.type == 1) {
+          this.$modal.msgSuccess("发放成功");
+        } else {
+          this.$modal.msgSuccess("申请成功");
+        }
+      });
+    },
+
+    /**申请操作 */
+    handleApplyfor(row) {
+      this.currentRow = row;
+      this.applyShow = true;
+    },
+    /**下载电子证书 */
+    downloadContentAsImage() {
+      const loading = this.$loading({
+        lock: true,
+        text: "下载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      const content = this.$refs.zs; // 获取目标<div>的DOM节点
+      // 创建一个Canvas元素，并设置宽高等于目标<div>的尺寸
+      const canvas = document.createElement("canvas");
+      canvas.width = content.offsetWidth;
+      canvas.height = content.offsetHeight;
+      const context = canvas.getContext("2d");
+      // 使用Canvas绘制目标<div>中的内容
+      html2canvas(content).then((canvas) => {
+        // 将Canvas转换为DataURL
+        const dataURL = canvas.toDataURL("image/png");
+        // 使用FileSaver.js保存DataURL为图片文件
+        saveAs(dataURL, "download.png");
+        loading.close();
+      });
+    },
+
+    /**搜索 */
+    handleSearch(keyWord) {
+      this.queryParams = {
+        name: keyWord,
+        // creType: 1, //1:一次性证书发放,2：个性化证书发放
+        pageNum: 1,
+        pageSize: 10,
+      };
+      this.getList();
+    },
+    /**查详情 */
+    async handleInfo(row) {
+      let res = await this.getInfo(row.id);
+      this.form = res.data;
+      this.infoShow = true;
+      // console.log("详情", res);
+    },
+    async getInfo(id) {
+      let res = await getYcInfo(id);
+      return res;
+    },
+    /**关闭 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /**重置 */
+    reset() {
+      this.form = {
+        id: null,
+        activityId: null,
+        certificateId: null,
+        uId: null,
+        content: null,
+        createId: null,
+        createBy: null,
+        activityTime: null,
+        updateId: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        userId: null,
+        deptId: null,
+        type: null,
+      };
+    },
+    /** 查询发放记录列表 */
+    getList() {
+      this.loading = true;
+      getYcList(this.queryParams).then((response) => {
+        this.tableData = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/myTable.scss";
+.info-form-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 17px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: 500;
+  color: #333;
+  font-weight: bold;
+  span {
+    width: 5px;
+    height: 17px;
+    margin-right: 6px;
+    background: #f8414d;
+  }
+}
+</style>

src/views/volunteer/yzczs/ycxzsff/index.vue

@@ -0,0 +1,481 @@
+<template>
+  <div class="app-container" ref="main">
+    <div ref="search">
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="tableData"
+      :height="tableHeigth + 'px'"
+    >
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+        prop="id"
+        width="55"
+      />
+      <el-table-column label="活动名称" align="center" prop="name" />
+      <el-table-column label="志愿者" align="center" prop="userName" />
+      <el-table-column
+        label="活动参与时间"
+        align="center"
+        prop="activityTime"
+      />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <span
+            :style="{
+              color: scope.row.issuanceStatus
+                ? '#67C23A'
+                : scope.row.issuanceStatus == false && scope.row.type == 2
+                ? '#E6A23C'
+                : '#F56C6C',
+            }"
+          >
+            {{ filterIissuanceStatus(scope.row) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" @click="handleInfo(scope.row)"
+            >查看</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            @click="handleFabu(scope.row)"
+            v-if="scope.row.issuanceStatus == false && scope.row.type == 2"
+            >发放</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 发布对话框 -->
+    <el-dialog :visible.sync="open" width="500px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        {{ title }}
+      </div>
+      <div class="info-box">
+        <div>
+          <div class="info-form-title">
+            <span></span>
+            证书信息
+          </div>
+          <div class="info-item">
+            <div class="item-lable">活动名称:</div>
+            <div class="item-value">{{ form.name }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">志愿者:</div>
+            <div class="item-value">{{ form.userName }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">活动参与时间:</div>
+            <div class="item-value">{{ form.activityTime }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">状态:</div>
+            <div class="item-value">
+              {{ form.issuanceStatus ? "已发放" : "未发放" }}
+            </div>
+          </div>
+          <div class="info-form-title">
+            <span></span>
+            收货信息
+          </div>
+          <div class="info-item">
+            <div class="item-lable">姓名:</div>
+            <div class="item-value">{{ form.consigneeName }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">手机号:</div>
+            <div class="item-value">{{ form.phonenumber }}</div>
+          </div>
+          <div class="info-item">
+            <div class="item-lable">详细地址:</div>
+            <div class="item-value">{{ form.mailAddress }}</div>
+          </div>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">关 闭</el-button>
+        <el-button type="warning" @click="submitPaper()"
+          >发放纸制证书</el-button
+        >
+        <!-- <el-button type="primary" @click="submitElectron()"
+          >发放电子证书</el-button
+        > -->
+      </div>
+    </el-dialog>
+    <!-- 纸制证书 -->
+    <el-dialog :visible.sync="infoOpen" width="500px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        邮政信息
+      </div>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="快递公司" prop="courierCompanies">
+          <el-input
+            v-model="form.courierCompanies"
+            placeholder="请输入快递公司"
+          />
+        </el-form-item>
+        <el-form-item label="快递单号" prop="trackingNumber">
+          <el-input
+            v-model="form.trackingNumber"
+            placeholder="请输入快递公司"
+          />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">提 交</el-button>
+      </div>
+    </el-dialog>
+    <!-- 查看 -->
+    <el-dialog :visible.sync="infoShow" width="600px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        查看
+      </div>
+      <div class="conversionInfo">
+        <div class="basicInfo">
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>活动详情</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>活动名称：</div>
+                <div>{{ form.name }}</div>
+              </div>
+              <div class="list-right">
+                <div>志愿者：</div>
+                <div>{{ form.userName }}</div>
+              </div>
+            </div>
+            <div class="lists">
+              <div class="list-left">
+                <div>活动参与时间：</div>
+                <div>{{ form.activityTime }}</div>
+              </div>
+              <div class="list-left">
+                <div>状态：</div>
+                <div>{{ filterIissuanceStatus(form) }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="logisticsInfo"
+          v-show="form.type == 2 && form.issuanceStatus == true"
+        >
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>纸制证书</span>
+          </div>
+          <div class="info">
+            <div class="lists">
+              <div class="list-left">
+                <div>快递公司：</div>
+                <div>{{ form.courierCompanies }}</div>
+              </div>
+              <div class="list-right">
+                <div>快递单号：</div>
+                <div>{{ form.trackingNumber }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="logisticsInfo"
+          v-show="form.type == 1 && form.issuanceStatus == true"
+        >
+          <div class="title">
+            <img src="@/assets/images/huodong.png" alt="" />
+            <span>电子证书</span>
+          </div>
+          <div class="info zs-box" ref="zs">
+            <div class="top-text">
+              <span>{{ form.userName }}</span> 先生/女士：
+              <p>
+                您在苏州工业园区累计志愿服务0小时，感谢您的无私奉献，特发此证，以兹鼓励。
+              </p>
+            </div>
+            <div class="bottom-text">
+              <div class="lable-value">
+                <div class="lable">签发单位：</div>
+                <div class="value">苏州工业园区宣传和统战部</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">苏州工业园区新时代文明实践中心</div>
+              </div>
+              <div class="lable-value">
+                <div class="lable"></div>
+                <div class="value">
+                  {{ $moment().format("YYYY年MM月DD日") }}
+                </div>
+              </div>
+            </div>
+            <div class="zs-z"></div>
+          </div>
+          <el-button
+            type="primary"
+            size="small"
+            style="margin-top: 10px"
+            @click="downloadContentAsImage()"
+            >下载电子证书</el-button
+          >
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  dsbrecordsList,
+  dsbrecordsInfo,
+  getYcInfo,
+  ycIssue,
+  getYcList,
+} from "@/api/volunteer/gxhzs/hdzsff/index.js";
+import html2canvas from "html2canvas";
+export default {
+  data() {
+    return {
+      infoShow: false,
+      infoOpen: false,
+      form: {},
+      rules: {
+        courierCompanies: [
+          { required: true, message: "请输入快递公司", trigger: "blur" },
+        ],
+        trackingNumber: [
+          { required: true, message: "请输入快递公司", trigger: "blur" },
+        ],
+      },
+      open: false,
+      title: "",
+      tableHeigth: 0,
+      loading: false,
+      tableData: [],
+      total: 1,
+      queryParams: {
+        name: undefined,
+        creType: 1, //1:一次性证书发放,2：个性化证书发放
+        pageNum: 1,
+        pageSize: 20,
+      },
+    };
+  },
+
+  created() {
+    // //给表格一个固定值
+    this.$nextTick(() => {
+      this.tableHeigth =
+        this.$refs.main.offsetHeight - 40 - this.$refs.search.offsetHeight - 73;
+      this.getList();
+    });
+  },
+  methods: {
+    /**状态过滤 */
+    filterIissuanceStatus(row) {
+      if (row.issuanceStatus == false && row.type == null) {
+        return "未申请";
+      } else if (
+        (row.issuanceStatus == true && row.type == 1) ||
+        (row.issuanceStatus == true && row.type == 2)
+      ) {
+        return "已发放";
+      } else if (row.issuanceStatus == false && row.type == 2) {
+        return "已申请";
+      }
+    },
+    /**下载电子证书 */
+    downloadContentAsImage() {
+      const loading = this.$loading({
+        lock: true,
+        text: "下载中",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      const content = this.$refs.zs; // 获取目标<div>的DOM节点
+      // 创建一个Canvas元素，并设置宽高等于目标<div>的尺寸
+      const canvas = document.createElement("canvas");
+      canvas.width = content.offsetWidth;
+      canvas.height = content.offsetHeight;
+      const context = canvas.getContext("2d");
+      // 使用Canvas绘制目标<div>中的内容
+      html2canvas(content).then((canvas) => {
+        // 将Canvas转换为DataURL
+        const dataURL = canvas.toDataURL("image/png");
+        // 使用FileSaver.js保存DataURL为图片文件
+        saveAs(dataURL, "download.png");
+        loading.close();
+      });
+    },
+
+    /**搜索 */
+    handleSearch(keyWord) {
+      this.queryParams = {
+        name: keyWord,
+        creType: 1, //1:一次性证书发放,2：个性化证书发放
+        pageNum: 1,
+        pageSize: 10,
+      };
+      this.getList();
+    },
+    /**查详情 */
+    async handleInfo(row) {
+      let res = await this.getInfo(row.id);
+      this.form = res.data;
+      this.infoShow = true;
+      // console.log("详情", res);
+    },
+    async getInfo(id) {
+      let res = await getYcInfo(id);
+      return res;
+    },
+    //发放按钮
+    async handleFabu(row) {
+      this.reset();
+      let res = await this.getInfo(row.id);
+      this.form = res.data;
+      this.title = "发放查看";
+      this.open = true;
+    },
+    //点击制造或者电子验证收货信息是否完整
+    isComplete() {
+      if (
+        !this.form.userName ||
+        !this.form.mailAddress ||
+        !this.form.phonenumber
+      ) {
+        this.$modal.msgError("请前往地址管理中添加详细地址！");
+        return false;
+      } else {
+        return true;
+      }
+    },
+    /**纸制 */
+    submitPaper() {
+      let isTrue = this.isComplete();
+      if (isTrue) {
+        this.infoOpen = true;
+      }
+    },
+    /**纸制提交 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          let data = {
+            courierCompanies: this.form.courierCompanies,
+            id: this.form.id,
+            trackingNumber: this.form.trackingNumber,
+            type: 2, //	1:电子证书 2:纸制证书
+            status: 1,
+            recordsId: this.form.recordsId,
+          };
+          this.subIssue(data);
+        } else {
+          return false;
+        }
+      });
+    },
+    //发放
+    subIssue(data) {
+      ycIssue(data).then((res) => {
+        this.infoOpen = false;
+        this.open = false;
+        this.getList();
+        this.$modal.msgSuccess("发放成功");
+      });
+    },
+
+    /**电子 */
+    submitElectron() {
+      let _this = this;
+      this.$modal
+        .confirm(`您确定要发放“${this.form.name}”证书吗？`)
+        .then(function () {
+          let data = {
+            id: _this.form.id,
+            type: 1, //	1:电子证书 2:纸制证书
+          };
+          _this.subIssue(data);
+        });
+    },
+    /**关闭 */
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /**重置 */
+    reset() {
+      this.form = {
+        id: null,
+        activityId: null,
+        certificateId: null,
+        uId: null,
+        content: null,
+        createId: null,
+        createBy: null,
+        activityTime: null,
+        updateId: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null,
+        userId: null,
+        deptId: null,
+        type: null,
+      };
+    },
+    /** 查询发放记录列表 */
+    getList() {
+      this.loading = true;
+      getYcList(this.queryParams).then((response) => {
+        this.tableData = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/myTable.scss";
+.info-form-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  font-size: 17px;
+  font-family: "Alibaba-PuHuiTi-Regular";
+  font-weight: 500;
+  color: #333;
+  font-weight: bold;
+  span {
+    width: 5px;
+    height: 17px;
+    margin-right: 6px;
+    background: #f8414d;
+  }
+}
+</style>

src/views/volunteer/zyzsjgl/bqhgl/index.vue

@@ -24,11 +24,18 @@
             <div class="leftName">
               <div>周爱</div>
               <div class="mainTag">
-                <div>{{ item.ageRange }}</div>
+                <!-- <div>{{ item.ageRange }}</div>
                 <div>
                   {{ item.sexRange }}
                 </div>
-                <div>{{ item.educationRange }}</div>
+                <div>{{ item.educationRange }}</div> -->
+                <div
+                  v-show="itema != ''"
+                  v-for="(itema, index) in item.arrlist"
+                  :key="index"
+                >
+                  {{ itema }}
+                </div>
               </div>
             </div>
           </div>
@@ -37,7 +44,7 @@
           </div>
         </div>
       </div>
-      <div v-else class="noneStyle" >暂无数据</div>
+      <div v-else class="noneStyle">暂无数据</div>
     </div>
 
     <div class="pagination" ref="pagination">
@@ -139,6 +146,18 @@ export default {
           value: "",
         },
       ],
+      arr: [
+        "ageRange",
+        "sexRange",
+        "politicalRange",
+        "educationRange",
+        "housingRange",
+        "industryRange",
+        "interestRange",
+        "professionalRange",
+        "schoolRange",
+        "nationalityRange",
+      ],
     };
   },
   created() {
@@ -164,10 +183,28 @@ export default {
       this.form = { ...this.form, ...this.afterParams };
       this.getList();
     },
+    //标签生成
+    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;
+    },
     getList() {
       this.loads = true;
       peopleList(this.form).then((res) => {
         this.arrList = res.rows;
+        if (this.arrList.length > 0) {
+          this.arrList.forEach((item) => {
+            item.arrlist = this.labelgenerate(item);
+          });
+        }
         this.total = res.total;
         this.loads = false;
       });
@@ -187,16 +224,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .noneStyle {
-    height: 490px;
-    margin-bottom: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-family: "Alibaba-PuHuiTi-Medium.otf";
-    color: #606266;
-    font-size: 14px;
-  }
+.noneStyle {
+  height: 490px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Alibaba-PuHuiTi-Medium.otf";
+  color: #606266;
+  font-size: 14px;
+}
 .center-content {
   padding: 20px 30px;
 }
@@ -258,8 +295,10 @@ export default {
 }
 .mainTag {
   display: flex;
+  flex-wrap: wrap;
   font-family: "Alibaba-PuHuiTi-Regular";
   & > div {
+    margin-bottom: 5px;
     margin-right: 5px;
     background-color: rgba(248, 65, 77, 0.06);
     padding: 3px 5px;
@@ -278,7 +317,7 @@ export default {
 
   .subMan {
     width: 49.2%;
-    height: 16.4%;
+    height: 20.4%;
     background: #fafafa;
     border: 1px solid #f5edeb;
     border-radius: 10px;
@@ -293,8 +332,8 @@ export default {
       display: flex;
       align-items: center;
       .leftAvatar {
-        height: 55px;
-        width: 55px;
+        min-height: 100%;
+        width: 77px;
         background-size: 100% 100%;
         border-radius: 10px;
       }
@@ -304,8 +343,11 @@ export default {
           font-family: "Alibaba-PuHuiTi-Medium.otf";
           color: #4c4949;
           font-size: 18px;
-          margin-bottom: 12px;
+          margin-bottom: 5px;
         }
+         & > div:nth-of-type(2) {
+            margin-bottom: -10px;
+          }
       }
     }
     .rightSub {

src/views/volunteer/zyzsjgl/components/detailDialog.vue

@@ -31,17 +31,13 @@
           </div>
           <div class="itemE">
             <div>活动标签:</div>
-            <div class="mainTag">
-              <div v-if="detailData.ageRange != ''">
-                {{ detailData.ageRange }}
-              </div>
-              <div>
-                {{
-                  detailData.sexRange == "" ? "男女不限" : detailData.sexRange
-                }}
-              </div>
-              <div v-if="detailData.educationRange != ''">
-                {{ detailData.educationRange }}
+            <div class="mainTag mainTag-label">
+              <div
+                v-for="(item, index) in detailDatalist"
+                :key="index"
+                v-show="item != ''"
+              >
+                {{ item }}
               </div>
             </div>
           </div>
@@ -75,12 +71,12 @@
                 <div class="leftName">
                   <div>{{ item.id }}</div>
                   <div class="mainTag">
-                    <div v-if="item.ageRange != ''">{{ item.ageRange }}</div>
-                    <div v-if="item.sexRange != ''">
-                      {{ item.sexRange }}
-                    </div>
-                    <div v-if="item.educationRange != ''">
-                      {{ item.educationRange }}
+                    <div
+                      v-show="item != ''"
+                      v-for="(item, index) in item.arrlist"
+                      :key="index"
+                    >
+                      {{ item }}
                     </div>
                   </div>
                 </div>
@@ -91,7 +87,7 @@
                   <span>1%</span>
                 </div>
                 <div class="itemBtn">
-                  <div class="look" @click="looks1(item.id)">查看</div>
+                  <div class="look" @click="looks1(item.tagsId)">查看</div>
                   <div class="looks" @click="invite(item)">邀请</div>
                 </div>
               </div>
@@ -130,10 +126,12 @@
                 <div class="leftName">
                   <div>周爱</div>
                   <div class="mainTag">
-                    <div v-if="item.ageRange != ''">{{ item.ageRange }}</div>
-                    <div v-if="item.sexRange != ''">{{ item.sexRange }}</div>
-                    <div v-if="item.educationRange != ''">
-                      {{ item.educationRange }}
+                    <div
+                      v-show="item != ''"
+                      v-for="(item, index) in item.arrlist"
+                      :key="index"
+                    >
+                      {{ item }}
                     </div>
                   </div>
                 </div>
@@ -253,6 +251,7 @@ export default {
       ],
       dialogVisible: false,
       detailData: {},
+      detailDatalist: [],
       load1: true,
       personList: [],
       personTotal: 0,
@@ -279,6 +278,18 @@ export default {
         activityId: "",
       },
       peopelDetail: false,
+      arr: [
+        "ageRange",
+        "sexRange",
+        "politicalRange",
+        "educationRange",
+        "housingRange",
+        "industryRange",
+        "interestRange",
+        "professionalRange",
+        "schoolRange",
+        "nationalityRange",
+      ],
     };
   },
   props: {},
@@ -294,6 +305,7 @@ export default {
             }
           }
         }
+        this.detailDatalist = this.labelgenerate(this.detailData);
         if (this.personParams.sexRange == "") {
           this.personParams.sexRange = "男,女";
         }
@@ -303,9 +315,23 @@ export default {
         this.dialogVisible = true;
       });
     },
+    //标签生成
+    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;
+    },
     //关闭详情
     closeDetail() {
       this.detailData = {};
+      this.detailDatalist = [];
       this.dialogVisible = false;
     },
     getPersonData() {
@@ -313,6 +339,12 @@ export default {
       this.load1 = true;
       peopleList(this.personParams).then((res) => {
         this.personList = res.rows;
+        if (this.personList.length > 0) {
+          this.personList.forEach((item) => {
+            item.arrlist = this.labelgenerate(item);
+          });
+        }
+
         this.personTotal = res.total;
         this.load1 = false;
       });
@@ -322,6 +354,11 @@ export default {
       //查看参与报名列表
       canyuList(this.participationParams).then((res) => {
         this.participationList = res.rows;
+        if (this.participationList.length > 0) {
+          this.participationList.forEach((item) => {
+            item.arrlist = this.labelgenerate(item);
+          });
+        }
         this.participationTotal = res.total;
         this.load2 = false;
       });
@@ -393,10 +430,17 @@ export default {
 ::v-deep .titlePagin .el-pagination {
   padding: 0;
 }
+.mainTag-label {
+  position: absolute;
+  width: 300px;
+  right: -30px;
+}
 .mainTag {
   display: flex;
+  flex-wrap: wrap;
   font-family: "Alibaba-PuHuiTi-Regular";
   & > div {
+    margin-bottom: 5px;
     margin-right: 5px;
     background-color: rgba(248, 65, 77, 0.06);
     padding: 3px 5px;
@@ -474,6 +518,7 @@ export default {
     margin-bottom: 12px;
 
     .itemE {
+      position: relative;
       width: 50%;
       display: flex;
       & > div:nth-of-type(1) {
@@ -496,8 +541,11 @@ export default {
       width: 12%;
     }
     & > div:nth-of-type(2) {
-      width: 88%;
+      width: 50%;
       color: #606266;
+      white-space: nowrap; /* 不换行 */
+      overflow: hidden; /* 超出部分隐藏 */
+      text-overflow: ellipsis; /* 溢出显示省略号 */
     }
   }
   .noneStyle {
@@ -512,12 +560,12 @@ export default {
   }
   .mainPeople {
     overflow: auto;
-    height: 200px;
+    // height: 200px;
     box-sizing: border-box;
     margin-bottom: 12px;
     .subMan {
       width: 100%;
-      height: 95px;
+      min-height: 95px;
       background: #fafafa;
       border: 1px solid #f5edeb;
       border-radius: 10px;
@@ -532,18 +580,23 @@ export default {
         display: flex;
         align-items: center;
         .leftAvatar {
-          height: 65px;
-          width: 65px;
+          width: 20%;
+          min-height: 95px;
           background-size: 100% 100%;
           border-radius: 10px;
         }
         .leftName {
+          width: 80%;
+
           margin-left: 15px;
           & > div:nth-of-type(1) {
             font-family: "Alibaba-PuHuiTi-Medium.otf";
             color: #4c4949;
             font-size: 18px;
-            margin-bottom: 18px;
+            margin-bottom: 10px;
+          }
+          & > div:nth-of-type(2) {
+            margin-bottom: -15px;
           }
         }
       }
@@ -603,4 +656,4 @@ export default {
 ::-webkit-scrollbar-track {
   background: #f4f1f1;
 }
-</style>
+</style>

src/views/volunteer/zyzsjgl/zdgl/data.vue

@@ -0,0 +1,490 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="字典名称" prop="dictType">
+        <el-select v-model="queryParams.dictType">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.dictId"
+            :label="item.dictName"
+            :value="item.dictType"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字典标签" prop="dictLabel">
+        <el-input
+          v-model="queryParams.dictLabel"
+          placeholder="请输入字典标签"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="数据状态"
+          clearable
+        >
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:dict:add']"
+        >新增</el-button>
+      </el-col> -->
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:dict:edit']"
+        >修改</el-button>
+      </el-col> -->
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:dict:remove']"
+        >删除</el-button>
+      </el-col> -->
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:dict:export']"
+        >导出</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-close"
+          size="mini"
+          @click="handleClose"
+          >关闭</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="dataList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="字典编码" align="center" prop="dictCode" />
+      <el-table-column label="字典标签" align="center" prop="dictLabel">
+        <template slot-scope="scope">
+          <span
+            v-if="
+              (scope.row.listClass == '' || scope.row.listClass == 'default') &&
+              (scope.row.cssClass == '' || scope.row.cssClass == null)
+            "
+            >{{ scope.row.dictLabel }}</span
+          >
+          <el-tag
+            v-else
+            :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass"
+            :class="scope.row.cssClass"
+            >{{ scope.row.dictLabel }}</el-tag
+          >
+        </template>
+      </el-table-column>
+      <el-table-column label="字典键值" align="center" prop="dictValue" />
+      <el-table-column label="字典排序" align="center" prop="dictSort" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag
+            :options="dict.type.sys_normal_disable"
+            :value="scope.row.status"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="备注"
+        align="center"
+        prop="remark"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']"
+            >修改</el-button
+          >
+          <!-- <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dict:remove']"
+          >删除</el-button> -->
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="字典类型">
+          <el-input v-model="form.dictType" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="数据标签" prop="dictLabel">
+          <el-input v-model="form.dictLabel" placeholder="请输入数据标签" />
+        </el-form-item>
+        <el-form-item label="数据键值" prop="dictValue">
+          <el-input v-model="form.dictValue" placeholder="请输入数据键值" />
+        </el-form-item>
+        <el-form-item label="样式属性" prop="cssClass">
+          <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
+        </el-form-item>
+        <el-form-item label="显示排序" prop="dictSort">
+          <el-input-number
+            v-model="form.dictSort"
+            controls-position="right"
+            :min="0"
+          />
+        </el-form-item>
+        <el-form-item label="回显样式" prop="listClass">
+          <el-select v-model="form.listClass">
+            <el-option
+              v-for="item in listClassOptions"
+              :key="item.value"
+              :label="item.label + '(' + item.value + ')'"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.value"
+              >{{ dict.label }}</el-radio
+            >
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  listData,
+  getData,
+  delData,
+  addData,
+  updateData,
+} from "@/api/system/dict/data";
+import {
+  optionselect as getDictOptionselect,
+  getType,
+} from "@/api/system/dict/type";
+
+export default {
+  name: "Data",
+  dicts: ["sys_normal_disable"],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      dataList: [],
+      // 默认字典类型
+      defaultDictType: "",
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 数据标签回显样式
+      listClassOptions: [
+        {
+          value: "default",
+          label: "默认",
+        },
+        {
+          value: "primary",
+          label: "主要",
+        },
+        {
+          value: "success",
+          label: "成功",
+        },
+        {
+          value: "info",
+          label: "信息",
+        },
+        {
+          value: "warning",
+          label: "警告",
+        },
+        {
+          value: "danger",
+          label: "危险",
+        },
+      ],
+      // 类型数据字典
+      typeOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        dictLabel: [
+          { required: true, message: "数据标签不能为空", trigger: "blur" },
+        ],
+        dictValue: [
+          { required: true, message: "数据键值不能为空", trigger: "blur" },
+        ],
+        dictSort: [
+          { required: true, message: "数据顺序不能为空", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  created() {
+    const dictId = this.$route.params && this.$route.params.dictId;
+    this.getType(dictId);
+    this.getTypeList();
+  },
+  methods: {
+    /** 查询字典类型详细 */
+    getType(dictId) {
+      getType(dictId).then((response) => {
+        this.queryParams.dictType = response.data.dictType;
+        this.defaultDictType = response.data.dictType;
+        this.getList();
+      });
+    },
+    /** 查询字典类型列表 */
+    getTypeList() {
+      getDictOptionselect().then((response) => {
+        this.typeOptions = response.data;
+      });
+    },
+    /** 查询字典数据列表 */
+    getList() {
+      this.loading = true;
+      listData(this.queryParams).then((response) => {
+        this.dataList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        dictCode: undefined,
+        dictLabel: undefined,
+        dictValue: undefined,
+        cssClass: undefined,
+        listClass: "default",
+        dictSort: 0,
+        status: "0",
+        remark: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 返回按钮操作 */
+    handleClose() {
+      const obj = { path: "/volunteer/zyzsjgl/zdgl" };
+      this.$tab.closeOpenPage(obj);
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.dictType = this.defaultDictType;
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加字典数据";
+      this.form.dictType = this.queryParams.dictType;
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.dictCode);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const dictCode = row.dictCode || this.ids;
+      getData(dictCode).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改字典数据";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.dictCode != undefined) {
+            updateData(this.form).then((response) => {
+              this.$store.dispatch(
+                "dict/removeDict",
+                this.queryParams.dictType
+              );
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addData(this.form).then((response) => {
+              this.$store.dispatch(
+                "dict/removeDict",
+                this.queryParams.dictType
+              );
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const dictCodes = row.dictCode || this.ids;
+      this.$modal
+        .confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？')
+        .then(function () {
+          return delData(dictCodes);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+          this.$store.dispatch("dict/removeDict", this.queryParams.dictType);
+        })
+        .catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/dict/data/export",
+        {
+          ...this.queryParams,
+        },
+        `data_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
+};
+</script>

src/views/volunteer/zyzsjgl/zdgl/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="字典名称" prop="dictName">
         <el-input
           v-model="queryParams.dictName"
@@ -46,13 +53,21 @@
         ></el-date-picker>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button
           type="primary"
           plain
@@ -61,8 +76,8 @@
           @click="handleAdd"
           v-hasPermi="['system:dict:add']"
         >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
+      </el-col> -->
+      <!-- <el-col :span="1.5">
         <el-button
           type="success"
           plain
@@ -93,7 +108,7 @@
           @click="handleExport"
           v-hasPermi="['system:dict:export']"
         >导出</el-button>
-      </el-col>
+      </el-col> -->
       <el-col :span="1.5">
         <el-button
           type="danger"
@@ -102,34 +117,71 @@
           size="mini"
           @click="handleRefreshCache"
           v-hasPermi="['system:dict:remove']"
-        >刷新缓存</el-button>
+          >刷新缓存</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="typeList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="字典编号" align="center" prop="dictId" />
-      <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
-      <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+      <el-table-column
+        label="字典名称"
+        align="center"
+        prop="dictName"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="字典类型"
+        align="center"
+        :show-overflow-tooltip="true"
+      >
         <template slot-scope="scope">
-          <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+          <router-link
+            :to="'/volunteer/zyzsjgl/zdgl/' + scope.row.dictId"
+            class="link-type"
+          >
             <span>{{ scope.row.dictType }}</span>
           </router-link>
         </template>
       </el-table-column>
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+          <dict-tag
+            :options="dict.type.sys_normal_disable"
+            :value="scope.row.status"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+      <el-table-column
+        label="备注"
+        align="center"
+        prop="remark"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <el-button
             size="mini"
@@ -137,20 +189,21 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:dict:edit']"
-          >修改</el-button>
-          <el-button
+            >修改</el-button
+          >
+          <!-- <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:dict:remove']"
-          >删除</el-button>
+          >删除</el-button> -->
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -172,11 +225,16 @@
               v-for="dict in dict.type.sys_normal_disable"
               :key="dict.value"
               :label="dict.value"
-            >{{dict.label}}</el-radio>
+              >{{ dict.label }}</el-radio
+            >
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          ></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -188,11 +246,19 @@
 </template>
 
 <script>
-import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
-
+import {
+  listType,
+  getType,
+  delType,
+  addType,
+  updateType,
+  refreshCache,
+} from "@/api/system/dict/type";
+import delgdata from "./data.vue";
 export default {
   name: "Dict",
-  dicts: ['sys_normal_disable'],
+  dicts: ["sys_normal_disable"],
+  components: { delgdata },
   data() {
     return {
       // 遮罩层
@@ -221,19 +287,19 @@ export default {
         pageSize: 10,
         dictName: undefined,
         dictType: undefined,
-        status: undefined
+        status: undefined,
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         dictName: [
-          { required: true, message: "字典名称不能为空", trigger: "blur" }
+          { required: true, message: "字典名称不能为空", trigger: "blur" },
         ],
         dictType: [
-          { required: true, message: "字典类型不能为空", trigger: "blur" }
-        ]
-      }
+          { required: true, message: "字典类型不能为空", trigger: "blur" },
+        ],
+      },
     };
   },
   created() {
@@ -243,7 +309,8 @@ export default {
     /** 查询字典类型列表 */
     getList() {
       this.loading = true;
-      listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+      listType(this.addDateRange(this.queryParams, this.dateRange)).then(
+        (response) => {
           this.typeList = response.rows;
           this.total = response.total;
           this.loading = false;
@@ -262,7 +329,7 @@ export default {
         dictName: undefined,
         dictType: undefined,
         status: "0",
-        remark: undefined
+        remark: undefined,
       };
       this.resetForm("form");
     },
@@ -285,32 +352,32 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.dictId)
-      this.single = selection.length!=1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.dictId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const dictId = row.dictId || this.ids
-      getType(dictId).then(response => {
+      const dictId = row.dictId || this.ids;
+      getType(dictId).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改字典类型";
       });
     },
     /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.dictId != undefined) {
-            updateType(this.form).then(response => {
+            updateType(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addType(this.form).then(response => {
+            addType(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -322,26 +389,34 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const dictIds = row.dictId || this.ids;
-      this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
-        return delType(dictIds);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？')
+        .then(function () {
+          return delType(dictIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('system/dict/type/export', {
-        ...this.queryParams
-      }, `type_${new Date().getTime()}.xlsx`)
+      this.download(
+        "system/dict/type/export",
+        {
+          ...this.queryParams,
+        },
+        `type_${new Date().getTime()}.xlsx`
+      );
     },
     /** 刷新缓存按钮操作 */
     handleRefreshCache() {
       refreshCache().then(() => {
         this.$modal.msgSuccess("刷新成功");
-        this.$store.dispatch('dict/cleanDict');
+        this.$store.dispatch("dict/cleanDict");
       });
-    }
-  }
+    },
+  },
 };
-</script>
+</script>

vue.config.js

@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require("compression-webpack-plugin");
 
-const name = process.env.VUE_APP_TITLE || "若依管理系统"; // 网页标题
+const name = process.env.VUE_APP_TITLE || "苏州园区志愿服务活动区块链平台"; // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80; // 端口
 
@@ -25,7 +25,8 @@ module.exports = {
   // 部署生产环境和开发环境下的URL。
   // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
   // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-  publicPath: process.env.NODE_ENV === "production" ? "/demo/volunteer" : "/",
+  // publicPath: process.env.NODE_ENV === "production" ? "/demo/volunteer" : "/",
+  publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
   // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
   outputDir: "dist",
   // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）