李劲龙 2 years ago
commit 54905edfae

@ -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://192.168.0.117:9034'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

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

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

@ -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",

@ -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",
});
}

@ -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,
});
}

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

After

Width:  |  Height:  |  Size: 1.5 KiB

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

After

Width:  |  Height:  |  Size: 3.8 KiB

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

After

Width:  |  Height:  |  Size: 1.4 KiB

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

After

Width:  |  Height:  |  Size: 1.4 KiB

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

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 509 KiB

After

Width:  |  Height:  |  Size: 667 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 524 KiB

@ -42,7 +42,7 @@
// align-items: center;
margin-bottom: 20px;
.item-lable {
width: 80px;
min-width: 80px;
font-size: 16px;
font-family: "Alibaba-PuHuiTi-Regular";
font-weight: 400;
@ -63,7 +63,7 @@
justify-content: space-between;
}
//
.book-main {
::v-deep .book-main {
margin: 0;
padding: 0;
display: flex;
@ -80,13 +80,14 @@
border-radius: 10px;
position: relative;
overflow: hidden;
.integral-num {
position: absolute;
top: 6%;
right: 10%;
right: 7%;
font-size: 18px;
font-weight: bold;
color: #2aa984;
color: $--color-primary;
z-index: 10;
font-family: "din-bold-2.ttf";
}
@ -95,7 +96,7 @@
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
padding: 0 10px;
.integral {
flex: 1;
@ -135,3 +136,112 @@
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;
}
}
}

@ -24,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 {
@ -73,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;
@ -82,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;
}
@ -89,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;
}
@ -111,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;
}

@ -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;
}

@ -7,7 +7,9 @@
trigger="click"
>
<div class="avatar-wrapper">
<div class="my-jifen">我的积分余额: 200</div>
<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>
@ -33,7 +35,7 @@ export default {
return {};
},
computed: {
...mapGetters(["avatar", "name"]),
...mapGetters(["avatar", "name", "integral", "roles"]),
},
methods: {
async logout() {
@ -44,7 +46,8 @@ export default {
})
.then(() => {
this.$store.dispatch("LogOut").then(() => {
location.href = "/index";
// location.href = "/index";
this.$router.replace("/login");
});
})
.catch(() => {});

@ -107,7 +107,8 @@ export default {
.left-sidebar {
height: 100%;
background: url("~@/assets/images/sidebar.png");
background-size: cover;
background-size: 100% 100%;
padding: 20px;
}
.right-page {
background: #f5f5f5;

@ -1,19 +1,21 @@
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,
};
export default getters;

@ -4,6 +4,7 @@ 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: {
@ -12,6 +13,7 @@ const permission = {
defaultRoutes: [],
topbarRouters: [],
sidebarRouters: [],
integral: 0,
},
mutations: {
SET_ROUTES: (state, routes) => {
@ -28,13 +30,24 @@ const permission = {
// console.log(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) => {
// 向后端请求路由数据
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);
@ -81,6 +94,19 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
});
}
//获取用户积分
function getFindIntegral() {
return new Promise((resolve, reject) => {
findIntegral()
.then((res) => {
resolve(res.data);
})
.catch((error) => {
reject(error);
});
});
}
function filterChildren(childrenMap, lastRouter = false) {
var children = [];
childrenMap.forEach((el, index) => {

@ -5,6 +5,7 @@ const user = {
state: {
token: getToken(),
name: "",
userId: "",
avatar: "",
roles: [],
permissions: [],
@ -17,6 +18,9 @@ const user = {
SET_NAME: (state, name) => {
state.name = name;
},
SET_USER_ID: (state, userId) => {
state.userId = userId;
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar;
},
@ -66,6 +70,7 @@ const user = {
commit("SET_ROLES", ["ROLE_DEFAULT"]);
}
commit("SET_NAME", user.nickName);
commit("SET_USER_ID", user.userId);
commit("SET_AVATAR", avatar);
resolve(res);
})

@ -1,114 +1,149 @@
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";
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;
// 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 +152,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;

File diff suppressed because it is too large Load Diff

@ -6,7 +6,7 @@
:rules="loginRules"
class="login-form"
>
<h3 class="title">志愿者管理系统</h3>
<h3 class="title">苏州园区志愿服务活动区块链平台</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"

@ -1,9 +1,76 @@
<template>
<div class="app-container">地址管理</div>
<div class="app-container">
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="80px"
class="user-address"
>
<el-form-item label="姓名" prop="nickName">
<el-input v-model="form.nickName" readonly></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phonenumber">
<el-input v-model="form.phonenumber" readonly></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>
export default {};
import { getUserProfile, updateUserProfile } from "@/api/system/user.js";
export default {
data() {
return {
form: {},
rules: {
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></style>
<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>

@ -4,13 +4,13 @@
<MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
</div>
<ul class="book-main" :style="listStyle">
<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">积分50</div>
<div class="integral-num">积分{{ item.integral }}</div>
<el-image
style="width: 100%; height: 87%"
:src="baseUrl + item.cover"
@ -27,6 +27,9 @@
</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"
@ -38,7 +41,7 @@
</template>
<script>
import { listCertificates } from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
import { zskdh, exchange } from "@/api/volunteer/gxhzs/gxhzsgl/index.js";
export default {
data() {
return {
@ -80,7 +83,21 @@ export default {
},
/**兑换 */
conversion(item) {
console.log(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) {
@ -94,7 +111,7 @@ export default {
/** 查询证书管理列表 */
getList() {
this.loading = true;
listCertificates(this.queryParams).then((response) => {
zskdh(this.queryParams).then((response) => {
this.certificatesList = response.rows;
this.total = response.total;
this.loading = false;

@ -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,12 +19,12 @@
prop="id"
width="55"
/>
<el-table-column label="证书" align="center" prop="certificateId" />
<el-table-column label="志愿者" align="center" prop="uid" />
<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 ? "已发放" : "未发放" }}
{{ scope.row.status == 1 ? "已发放" : "未发放" }}
</template>
</el-table-column>
<el-table-column
@ -48,8 +33,15 @@
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleFabu(scope.row)"
>发布</el-button
<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.status != 1"
>发放</el-button
>
</template>
</el-table-column>
@ -70,60 +62,72 @@
</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.certificateId }}</div>
<div class="item-lable">证书名称:</div>
<div class="item-value">{{ form.certificateName }}</div>
</div>
<div class="info-item">
<div class="item-lable">志愿者:</div>
<div class="item-value">{{ form.uid }}</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-value">{{ form.createTime }}</div>
</div>
<div class="info-item">
<div class="item-lable">状态:</div>
<div class="item-value">
{{ form.type == 1 ? "已发放" : "未发放" }}
{{ form.status == 1 ? "已发放" : "未发放" }}
</div>
</div>
<div class="info-form-title">
<span></span>
收货信息
</div>
<div class="info-item">
<div class="item-lable">姓名:</div>
<div class="item-value"></div>
<div class="item-value">{{ form.userName }}</div>
</div>
<div class="info-item">
<div class="item-lable">手机号:</div>
<div class="item-value"></div>
<div class="item-value">{{ form.phonenumber }}</div>
</div>
<div class="info-item">
<div class="item-lable">详细地址:</div>
<div class="item-value"></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 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="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="快递公司" prop="name">
<el-input v-model="form.name" placeholder="请输入快递公司" />
<el-form-item label="快递公司" prop="courierCompanies">
<el-input
v-model="form.courierCompanies"
placeholder="请输入快递公司"
/>
</el-form-item>
<el-form-item label="快递单号" prop="serviceDuration">
<el-form-item label="快递单号" prop="trackingNumber">
<el-input
v-model="form.serviceDuration"
v-model="form.trackingNumber"
placeholder="请输入快递公司"
/>
</el-form-item>
@ -132,31 +136,132 @@
<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>{{ form.status == 1 ? "已发放" : "未发放" }}</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>
</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: {},
rules: {},
rules: {
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,
},
@ -166,34 +271,108 @@ export default {
// //
this.$nextTick(() => {
this.tableHeigth =
this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 75;
this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 80;
this.getList();
});
},
methods: {
/**纸质提交 */
submitForm() {
editData(this.form).then((res) => {
this.submitElectron();
/**下载电子证书 */
downloadContentAsImage() {
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) => {
// CanvasDataURL
const dataURL = canvas.toDataURL("image/png");
// 使FileSaver.jsDataURL
saveAs(dataURL, "download.png");
});
},
/**纸质 */
/**搜索 */
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["form"].validate((valid) => {
let data = {
courierCompanies: this.form.courierCompanies,
id: this.form.id,
trackingNumber: this.form.trackingNumber,
type: 2, // 1: 2:
};
this.subIssue(data);
});
},
//
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;
@ -222,39 +401,31 @@ 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>

@ -5,19 +5,21 @@
<el-button type="primary" size="small" @click="handleAdd"></el-button>
</div>
<ul class="book-main" :style="listStyle">
<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">积分50</div>
<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 }}
@ -48,6 +50,9 @@
</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"
@ -65,8 +70,8 @@
<el-form-item label="证书名称" prop="name">
<el-input v-model="form.name" placeholder="请输入证书名称" />
</el-form-item>
<el-form-item label="积分" prop="serviceDuration">
<el-input v-model="form.serviceDuration" 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" />
@ -91,7 +96,7 @@
</div>
<div class="info-item">
<div class="item-lable">积分:</div>
<div class="item-value">{{ form.serviceDuration }}</div>
<div class="item-value">{{ form.integral }}</div>
</div>
<div class="info-item">
<div class="item-lable">证书封面:</div>
@ -126,6 +131,7 @@ export default {
tableData: [],
total: 0,
queryParams: {
type: 0, //
name: undefined,
pageNum: 1,
pageSize: 10,
@ -182,7 +188,7 @@ export default {
cover: null,
content: null,
datetime: null,
serviceDuration: null,
integral: null,
createId: null,
createBy: null,
createTime: null,
@ -229,6 +235,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("修改成功");

@ -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;
},

@ -1,59 +1,41 @@
<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>
<div ref="search" class="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="certificateId" />
<el-table-column label="志愿者" align="center" prop="type" />
<el-table-column label="状态" align="center" prop="duration" />
<el-table-column label="兑换时间" align="center" prop="time" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
<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' : '' }"
>
<template slot-scope="scope">
<el-button
size="mini"
icon="el-icon-view"
type="text"
@click="handleInfo(scope.row)"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<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: #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"
@ -61,12 +43,11 @@
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 发布对话框 -->
<el-dialog :visible.sync="open" width="900px" append-to-body>
<!-- 查看 -->
<el-dialog :visible.sync="infoShow" width="600px" append-to-body>
<div slot="title" class="dialog-title">
<span class="title-line"></span>
{{ title }}
查看
</div>
<div class="conversionInfo">
<div class="basicInfo">
@ -78,156 +59,186 @@
<div class="lists">
<div class="list-left">
<div>证书名称</div>
<div>xxx证书</div>
<div>{{ form.certificateName }}</div>
</div>
<div class="list-right">
<div>志愿者</div>
<div>xxxx</div>
<div>{{ form.userName }}</div>
</div>
</div>
<div class="lists">
<div class="list-left">
<div>兑换时间</div>
<div>xxxx</div>
</div>
<div class="list-left">
<div>兑换积分</div>
<div>xx</div>
<div>{{ form.createTime }}</div>
</div>
</div>
<div class="lists">
<div class="list-left">
<div>证书状态</div>
<div>已发放</div>
<div>状态</div>
<div>{{ form.status == 1 ? "已发放" : "未发放" }}</div>
</div>
</div>
</div>
</div>
<div class="logisticsInfo">
<div class="logisticsInfo" v-show="form.type == 2">
<div class="title">
<img src="@/assets/images/huodong.png" alt="" />
<span>物流信息</span>
<span>纸制证书</span>
</div>
<div class="info">
<div class="lists">
<div class="list-left">
<div>快递公司</div>
<div>XXXXXXXXX</div>
<div>{{ form.courierCompanies }}</div>
</div>
<div class="list-right">
<div>快递单号</div>
<div>XXXXXXXXXXX</div>
<div>{{ form.trackingNumber }}</div>
</div>
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
<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>
</div>
</template>
<script>
import html2canvas from "html2canvas";
import {
getSellectall,
postElectron,
getInfo,
editData,
dsbrecordsList,
dsbrecordsInfo,
} from "@/api/volunteer/gxhzs/hdzsff/index.js";
export default {
data() {
return {
infoOpen: false,
form: {},
open: false,
title: "",
tableHeigth: 0,
queryParams: {},
listStyle: {
height: 0,
overflowY: "auto",
},
infoShow: false,
baseUrl: process.env.VUE_APP_BASE_API,
certificatesList: [],
loading: false,
tableData: [{}],
total: 1,
tableData: [],
total: 0,
queryParams: {
creType: 2,
status: 1,
UId: undefined,
certificateName: undefined,
pageNum: 1,
pageSize: 20,
pageSize: 10,
},
form: {},
rules: {},
};
},
created() {
this.queryParams.UId = this.$store.getters.userId;
// //
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: {
handleInfo() {
this.title = "查看";
this.open = true;
/**下载电子证书 */
downloadContentAsImage() {
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) => {
// CanvasDataURL
const dataURL = canvas.toDataURL("image/png");
// 使FileSaver.jsDataURL
saveAs(dataURL, "download.png");
});
},
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;
},
cancel() {
this.open = false;
async getInfo(id) {
let res = await dsbrecordsInfo(id);
return res;
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/myTable.scss";
::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;
}
}
</style>

@ -1,25 +1,7 @@
<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.name" @clickSearch="handleSearch" />
</div>
<el-table
@ -34,24 +16,34 @@
prop="id"
width="55"
/>
<el-table-column label="活动名称" align="center" prop="certificateId" />
<el-table-column label="志愿者" align="center" prop="type" />
<el-table-column label="参与时间" align="center" prop="time" />
<el-table-column label="活动地址" align="center" prop="duration" />
<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">
{{ scope.row.issuanceStatus ? "已发放" : "未发放" }}
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
icon="el-icon-view"
type="text"
@click="handleInfo(scope.row)"
<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"
>发放</el-button
> -->
</template>
</el-table-column>
</el-table>
@ -64,11 +56,93 @@
/>
<!-- 发布对话框 -->
<el-dialog :visible.sync="open" width="900px" append-to-body>
<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.userName }}</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
>
</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">
@ -79,47 +153,81 @@
<div class="lists">
<div class="list-left">
<div>活动名称</div>
<div>xxx证书</div>
<div>{{ form.name }}</div>
</div>
<div class="list-right">
<div>志愿者</div>
<div>xxxx</div>
<div>{{ form.userName }}</div>
</div>
</div>
<div class="lists">
<div class="list-left">
<div>参与时间</div>
<div>xxxx</div>
<div>活动参与时间</div>
<div>{{ form.activityTime }}</div>
</div>
<div class="list-left">
<div>活动地址</div>
<div>xxxx</div>
<div>状态</div>
<div>{{ form.issuanceStatus ? "已发放" : "未发放" }}</div>
</div>
</div>
</div>
</div>
<div class="logisticsInfo">
<div class="logisticsInfo" v-show="form.type == 2">
<div class="title">
<img src="@/assets/images/huodong.png" alt="" />
<span>物流信息</span>
<span>纸制证书</span>
</div>
<div class="info">
<div class="lists">
<div class="list-left">
<div>快递公司</div>
<div>XXXXXXXXX</div>
<div>{{ form.courierCompanies }}</div>
</div>
<div class="list-right">
<div>快递单号</div>
<div>XXXXXXXXXXX</div>
<div>{{ form.trackingNumber }}</div>
</div>
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
<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>
</div>
@ -127,25 +235,36 @@
<script>
import {
getSellectall,
postElectron,
getInfo,
editData,
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,
queryParams: {},
loading: false,
tableData: [{}],
tableData: [],
total: 1,
queryParams: {
creType: 2,
name: undefined,
// creType: 1, //1:,2
pageNum: 1,
pageSize: 20,
},
@ -160,69 +279,156 @@ export default {
});
},
methods: {
handleInfo() {
this.title = "查看";
/**下载电子证书 */
downloadContentAsImage() {
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) => {
// CanvasDataURL
const dataURL = canvas.toDataURL("image/png");
// 使FileSaver.jsDataURL
saveAs(dataURL, "download.png");
});
},
/**搜索 */
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.address || !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) => {
let data = {
courierCompanies: this.form.courierCompanies,
id: this.form.id,
trackingNumber: this.form.trackingNumber,
type: 2, // 1: 2:
};
this.subIssue(data);
});
},
//
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";
::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;
.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>

@ -1,25 +1,7 @@
<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.name" @clickSearch="handleSearch" />
</div>
<el-table
@ -34,23 +16,34 @@
prop="id"
width="55"
/>
<el-table-column label="证书名称" align="center" prop="certificateId" />
<el-table-column label="志愿者" align="center" prop="type" />
<el-table-column label="状态" align="center" prop="duration" />
<el-table-column label="兑换时间" align="center" prop="time" />
<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">
{{ scope.row.issuanceStatus ? "已发放" : "未发放" }}
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
icon="el-icon-view"
type="text"
@click="handleInfo(scope.row)"
<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"
>发放</el-button
> -->
</template>
</el-table-column>
</el-table>
@ -63,68 +56,178 @@
/>
<!-- 发布对话框 -->
<el-dialog :visible.sync="open" width="900px" append-to-body>
<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.userName }}</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
>
</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>
<span>活动详情</span>
</div>
<div class="info">
<div class="lists">
<div class="list-left">
<div>证书名称</div>
<div>xxx证书</div>
<div>活动名称</div>
<div>{{ form.name }}</div>
</div>
<div class="list-right">
<div>志愿者</div>
<div>xxxx</div>
<div>{{ form.userName }}</div>
</div>
</div>
<div class="lists">
<div class="list-left">
<div>兑换时间</div>
<div>xxxx</div>
</div>
<div class="list-left">
<div>兑换积分</div>
<div>xx</div>
<div>活动参与时间</div>
<div>{{ form.activityTime }}</div>
</div>
</div>
<div class="lists">
<div class="list-left">
<div>证书状态</div>
<div>已发放</div>
<div>状态</div>
<div>{{ form.issuanceStatus ? "已发放" : "未发放" }}</div>
</div>
</div>
</div>
</div>
<div class="logisticsInfo">
<div class="logisticsInfo" v-show="form.type == 2">
<div class="title">
<img src="@/assets/images/huodong.png" alt="" />
<span>物流信息</span>
<span>纸制证书</span>
</div>
<div class="info">
<div class="lists">
<div class="list-left">
<div>快递公司</div>
<div>XXXXXXXXX</div>
<div>{{ form.courierCompanies }}</div>
</div>
<div class="list-right">
<div>快递单号</div>
<div>XXXXXXXXXXX</div>
<div>{{ form.trackingNumber }}</div>
</div>
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel"> </el-button>
<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>
</div>
@ -132,31 +235,45 @@
<script>
import {
getSellectall,
postElectron,
getInfo,
editData,
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,
queryParams: {},
loading: false,
tableData: [{}],
tableData: [],
total: 1,
queryParams: {
creType: 2,
name: undefined,
UId: undefined,
issuanceStatus: true,
// creType: 1, //1:,2
pageNum: 1,
pageSize: 20,
},
};
},
created() {
this.queryParams.UId = this.$store.getters.userId;
// //
this.$nextTick(() => {
this.tableHeigth =
@ -165,69 +282,158 @@ export default {
});
},
methods: {
handleInfo() {
this.title = "查看";
/**下载电子证书 */
downloadContentAsImage() {
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) => {
// CanvasDataURL
const dataURL = canvas.toDataURL("image/png");
// 使FileSaver.jsDataURL
saveAs(dataURL, "download.png");
});
},
/**搜索 */
handleSearch(keyWord) {
this.queryParams = {
issuanceStatus: true,
name: keyWord,
UId: this.$store.getters.userId,
// 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.address || !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) => {
let data = {
courierCompanies: this.form.courierCompanies,
id: this.form.id,
trackingNumber: this.form.trackingNumber,
type: 2, // 1: 2:
};
this.subIssue(data);
});
},
//
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";
::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;
.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>

@ -1,25 +1,7 @@
<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.name" @clickSearch="handleSearch" />
</div>
<el-table
@ -34,12 +16,16 @@
prop="id"
width="55"
/>
<el-table-column label="证书" align="center" prop="certificateId" />
<el-table-column label="志愿者" align="center" prop="uid" />
<el-table-column label="兑换时间" align="center" prop="uid" />
<el-table-column label="状态" align="center" prop="type">
<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">
{{ scope.row.type == 1 ? "已发放" : "未发放" }}
{{ scope.row.issuanceStatus ? "已发放" : "未发放" }}
</template>
</el-table-column>
<el-table-column
@ -48,8 +34,15 @@
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button size="mini" type="text" @click="handleFabu(scope.row)"
>发布</el-button
<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"
>发放</el-button
>
</template>
</el-table-column>
@ -70,60 +63,72 @@
</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.certificateId }}</div>
<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.uid }}</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.activityTime }}</div>
</div>
<div class="info-item">
<div class="item-lable">状态:</div>
<div class="item-value">
{{ form.type == 1 ? "已发放" : "未发放" }}
{{ 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"></div>
<div class="item-value">{{ form.userName }}</div>
</div>
<div class="info-item">
<div class="item-lable">手机号:</div>
<div class="item-value"></div>
<div class="item-value">{{ form.phonenumber }}</div>
</div>
<div class="info-item">
<div class="item-lable">详细地址:</div>
<div class="item-value"></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 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="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="快递公司" prop="name">
<el-input v-model="form.name" placeholder="请输入快递公司" />
<el-form-item label="快递公司" prop="courierCompanies">
<el-input
v-model="form.courierCompanies"
placeholder="请输入快递公司"
/>
</el-form-item>
<el-form-item label="快递单号" prop="serviceDuration">
<el-form-item label="快递单号" prop="trackingNumber">
<el-input
v-model="form.serviceDuration"
v-model="form.trackingNumber"
placeholder="请输入快递公司"
/>
</el-form-item>
@ -132,31 +137,134 @@
<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>{{ 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>
</div>
</template>
<script>
import {
getSellectall,
postElectron,
getInfo,
editData,
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: {},
rules: {
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,
name: undefined,
creType: 1, //1:,2
pageNum: 1,
pageSize: 20,
},
@ -166,34 +274,108 @@ export default {
// //
this.$nextTick(() => {
this.tableHeigth =
this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 75;
this.$refs.main.offsetHeight - this.$refs.search.offsetHeight - 80;
this.getList();
});
},
methods: {
/**纸质提交 */
submitForm() {
editData(this.form).then((res) => {
this.submitElectron();
/**下载电子证书 */
downloadContentAsImage() {
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) => {
// CanvasDataURL
const dataURL = canvas.toDataURL("image/png");
// 使FileSaver.jsDataURL
saveAs(dataURL, "download.png");
});
},
/**纸质 */
/**搜索 */
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.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["form"].validate((valid) => {
let data = {
courierCompanies: this.form.courierCompanies,
id: this.form.id,
trackingNumber: this.form.trackingNumber,
type: 2, // 1: 2:
};
this.subIssue(data);
});
},
//
subIssue(data) {
ycIssue(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.name}”证书吗?`)
.then(function () {
let data = {
id: _this.form.id,
type: 1, // 1: 2:
};
_this.subIssue(data);
});
},
/**关闭 */
cancel() {
this.open = false;
@ -209,7 +391,7 @@ export default {
content: null,
createId: null,
createBy: null,
createTime: null,
activityTime: null,
updateId: null,
updateBy: null,
updateTime: null,
@ -222,39 +404,31 @@ export default {
/** 查询发放记录列表 */
getList() {
this.loading = true;
getSellectall(this.queryParams).then((response) => {
this.tableData = response.data.list;
this.total = response.data.total;
getYcList(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>

@ -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; // 端口

Loading…
Cancel
Save