一次性证书

.env.development

@@ -6,8 +6,8 @@ ENV = 'development'
 
 # 苏州园区志愿服务活动区块链平台/开发环境
 # VUE_APP_BASE_API = 'https://vue.ruoyi.vip/prod-api'
-# VUE_APP_BASE_API = 'http://39.101.188.84:9034'
+VUE_APP_BASE_API = 'http://39.101.188.84:9034'
-VUE_APP_BASE_API = 'http://192.168.0.117:9034'
+# VUE_APP_BASE_API = 'http://192.168.0.117:9034'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

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

@@ -54,3 +54,28 @@ export function issue(data) {
     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/assets/styles/myTable.scss

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

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

@@ -1,25 +1,7 @@
 <template>
   <div class="app-container" ref="main">
     <div ref="search">
-      <el-form
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
-        :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>
 
     <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="name" />
-      <el-table-column label="志愿者" align="center" prop="type" />
+      <el-table-column label="志愿者" align="center" prop="userName" />
-
+      <el-table-column
-      <el-table-column label="参与时间" align="center" prop="time" />
+        label="活动参与时间"
-      <el-table-column label="活动地址" align="center" prop="duration" />
+        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
+          <el-button size="mini" type="text" @click="handleInfo(scope.row)"
-            size="mini"
-            icon="el-icon-view"
-            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>活动参与时间：</div>
-                <div>xxxx</div>
+                <div>{{ form.activityTime }}</div>
               </div>
               <div class="list-left">
-                <div>活动地址：</div>
+                <div>状态：</div>
-                <div>xxxx</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 class="logisticsInfo" v-show="form.type == 1">
-
+          <div class="title">
-      <div slot="footer" class="dialog-footer">
+            <img src="@/assets/images/huodong.png" alt="" />
-        <el-button @click="cancel">关 闭</el-button>
+            <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,
+  dsbrecordsList,
-  postElectron,
+  dsbrecordsInfo,
-  getInfo,
+  getYcInfo,
-  editData,
+  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) => {
+        // 将Canvas转换为DataURL
+        const dataURL = canvas.toDataURL("image/png");
+        // 使用FileSaver.js保存DataURL为图片文件
+        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 {
+.info-form-title {
-  .basicInfo,
+  display: flex;
-  .logisticsInfo {
+  align-items: center;
-    .title {
+  margin-bottom: 20px;
-      display: flex;
+  font-size: 17px;
-      align-items: center;
+  font-family: "Alibaba-PuHuiTi-Regular";
-      img {
+  font-weight: 500;
-        width: 14px;
+  color: #333;
-        margin-right: 10px;
+  font-weight: bold;
-      }
+  span {
-      span {
+    width: 5px;
-        font-size: 16px;
+    height: 17px;
-        font-family: "Alibaba PuHuiTi";
+    margin-right: 6px;
-        font-weight: bold;
+    background: #f8414d;
-        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>

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

@@ -1,25 +1,7 @@
 <template>
   <div class="app-container" ref="main">
     <div ref="search">
-      <el-form
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
-        :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>
 
     <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="name" />
-      <el-table-column label="志愿者" align="center" prop="type" />
+      <el-table-column label="志愿者" align="center" prop="userName" />
-      <el-table-column label="状态" align="center" prop="duration" />
+      <el-table-column
-      <el-table-column label="兑换时间" align="center" prop="time" />
+        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
+          <el-button size="mini" type="text" @click="handleInfo(scope.row)"
-            size="mini"
-            icon="el-icon-view"
-            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>活动名称：</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>活动参与时间：</div>
-                <div>xxxx</div>
+                <div>{{ form.activityTime }}</div>
-              </div>
-              <div class="list-left">
-                <div>兑换积分：</div>
-                <div>xx</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 class="logisticsInfo" v-show="form.type == 1">
-
+          <div class="title">
-      <div slot="footer" class="dialog-footer">
+            <img src="@/assets/images/huodong.png" alt="" />
-        <el-button @click="cancel">关 闭</el-button>
+            <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,
+  dsbrecordsList,
-  postElectron,
+  dsbrecordsInfo,
-  getInfo,
+  getYcInfo,
-  editData,
+  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) => {
+        // 将Canvas转换为DataURL
+        const dataURL = canvas.toDataURL("image/png");
+        // 使用FileSaver.js保存DataURL为图片文件
+        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 {
+.info-form-title {
-  .basicInfo,
+  display: flex;
-  .logisticsInfo {
+  align-items: center;
-    .title {
+  margin-bottom: 20px;
-      display: flex;
+  font-size: 17px;
-      align-items: center;
+  font-family: "Alibaba-PuHuiTi-Regular";
-      img {
+  font-weight: 500;
-        width: 14px;
+  color: #333;
-        margin-right: 10px;
+  font-weight: bold;
-      }
+  span {
-      span {
+    width: 5px;
-        font-size: 16px;
+    height: 17px;
-        font-family: "Alibaba PuHuiTi";
+    margin-right: 6px;
-        font-weight: bold;
+    background: #f8414d;
-        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>

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

@@ -1,25 +1,7 @@
 <template>
   <div class="app-container" ref="main">
     <div ref="search">
-      <el-form
+      <MyInput v-model="queryParams.name" @clickSearch="handleSearch" />
-        :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>
 
     <el-table
@@ -36,10 +18,14 @@
       />
       <el-table-column label="活动名称" align="center" prop="name" />
       <el-table-column label="志愿者" align="center" prop="userName" />
-      <el-table-column label="活动参与时间" align="center" prop="uid" />
+      <el-table-column
-      <el-table-column label="状态" align="center" prop="issuanceStatus">
+        label="活动参与时间"
+        align="center"
+        prop="activityTime"
+      />
+      <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
-          {{ scope.row.issuanceStatus == 1 ? "已发放" : "未发放" }}
+          {{ scope.row.issuanceStatus ? "已发放" : "未发放" }}
         </template>
       </el-table-column>
       <el-table-column
@@ -48,14 +34,14 @@
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="handleFabu(scope.row)"
+          <el-button size="mini" type="text" @click="handleInfo(scope.row)"
             >查看</el-button
           >
           <el-button
-            v-if="scope.row.issuanceStatus != 1"
             size="mini"
             type="text"
             @click="handleFabu(scope.row)"
+            v-if="scope.row.issuanceStatus == false"
             >发放</el-button
           >
         </template>
@@ -79,24 +65,24 @@
         <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-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-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">
@@ -105,22 +91,24 @@
           </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="warning" @click="submitPaper()"
-        <el-button type="primary" @click="submitElectron"
+          >发放纸制证书</el-button
+        >
+        <el-button type="primary" @click="submitElectron()"
           >发放电子证书</el-button
         >
       </div>
@@ -131,14 +119,16 @@
         <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-form-item label="快递公司" prop="courierCompanies">
-          <el-input v-model="form.name" placeholder="请输入快递公司" />
+          <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>
@@ -147,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,
+  dsbrecordsList,
-  postElectron,
+  dsbrecordsInfo,
-  getInfo,
+  getYcInfo,
-  editData,
+  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,
       },
@@ -181,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() {
+    downloadContentAsImage() {
-      editData(this.form).then((res) => {
+      const content = this.$refs.zs; // 获取目标<div>的DOM节点
-        this.submitElectron();
+      // 创建一个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");
       });
     },
+
+    /**搜索 */
+    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() {
+    submitForm() {
-      let data = {
+      this.$refs["form"].validate((valid) => {
-        activityId: this.form.activityId,
+        let data = {
-        uid: this.form.uid,
+          courierCompanies: this.form.courierCompanies,
-      };
+          id: this.form.id,
-      postElectron(data).then((res) => {
+          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;
@@ -224,7 +391,7 @@ export default {
         content: null,
         createId: null,
         createBy: null,
-        createTime: null,
+        activityTime: null,
         updateId: null,
         updateBy: null,
         updateTime: null,
@@ -237,24 +404,12 @@ export default {
     /** 查询发放记录列表 */
     getList() {
       this.loading = true;
-      getSellectall(this.queryParams).then((response) => {
+      getYcList(this.queryParams).then((response) => {
-        this.tableData = response.data.list;
+        this.tableData = response.rows;
-        this.total = response.data.total;
+        this.total = response.total;
         this.loading = false;
       });
     },
-
-    handleFabu(row) {
-      this.reset();
-      this.title = "发放查看";
-      this.open = true;
-      // let id = row.id;
-      // getInfo(id).then((res) => {
-      //   this.form = res.data;
-      //   this.title = "发放查看";
-      //   this.open = true;
-      // });
-    },
   },
 };
 </script>