我的一次性证书

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

@@ -24,10 +24,9 @@
         prop="activityTime"
       />
       <el-table-column label="活动时长" align="center" prop="points">
-        <template slot-scope="scope"> {{ scope.row.points }} 小时 </template>
+        <template slot-scope="scope"> {{ scope.row.points }}小时 </template>
       </el-table-column>
       <el-table-column label="活动积分" align="center" prop="points" />
-
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
           <span
@@ -48,13 +47,13 @@
           <el-button size="mini" type="text" @click="handleInfo(scope.row)"
             >查看</el-button
           >
-          <!-- <el-button
+          <el-button
+            v-if="scope.row.issuanceStatus == false"
             size="mini"
             type="text"
-            @click="handleFabu(scope.row)"
+            @click="handleApplyfor(scope.row)"
-            v-if="scope.row.issuanceStatus == false"
+            >申请</el-button
-            >发放</el-button
+          >
-          > -->
         </template>
       </el-table-column>
     </el-table>
@@ -65,89 +64,6 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
-
-    <!-- 发布对话框 -->
-    <el-dialog :visible.sync="open" width="500px" append-to-body>
-      <div slot="title" class="dialog-title">
-        <span class="title-line"></span>
-        {{ title }}
-      </div>
-      <div class="info-box">
-        <div>
-          <div class="info-form-title">
-            <span></span>
-            证书信息
-          </div>
-          <div class="info-item">
-            <div class="item-lable">活动名称:</div>
-            <div class="item-value">{{ form.name }}</div>
-          </div>
-          <div class="info-item">
-            <div class="item-lable">志愿者:</div>
-            <div class="item-value">{{ form.userName }}</div>
-          </div>
-          <div class="info-item">
-            <div class="item-lable">活动参与时间:</div>
-            <div class="item-value">{{ form.activityTime }}</div>
-          </div>
-          <div class="info-item">
-            <div class="item-lable">状态:</div>
-            <div class="item-value">
-              {{ form.issuanceStatus ? "已发放" : "未发放" }}
-            </div>
-          </div>
-          <div class="info-form-title">
-            <span></span>
-            收货信息
-          </div>
-          <div class="info-item">
-            <div class="item-lable">姓名:</div>
-            <div class="item-value">{{ form.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.mailAddress }}</div>
-          </div>
-        </div>
-      </div>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="cancel">关 闭</el-button>
-        <el-button type="warning" @click="submitPaper()"
-          >发放纸制证书</el-button
-        >
-        <el-button type="primary" @click="submitElectron()"
-          >发放电子证书</el-button
-        >
-      </div>
-    </el-dialog>
-    <!-- 纸制证书 -->
-    <el-dialog :visible.sync="infoOpen" width="500px" append-to-body>
-      <div slot="title" class="dialog-title">
-        <span class="title-line"></span>
-        邮政信息
-      </div>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="快递公司" prop="courierCompanies">
-          <el-input
-            v-model="form.courierCompanies"
-            placeholder="请输入快递公司"
-          />
-        </el-form-item>
-        <el-form-item label="快递单号" prop="trackingNumber">
-          <el-input
-            v-model="form.trackingNumber"
-            placeholder="请输入快递公司"
-          />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">提 交</el-button>
-      </div>
-    </el-dialog>
     <!-- 查看 -->
     <el-dialog :visible.sync="infoShow" width="600px" append-to-body>
       <div slot="title" class="dialog-title">
@@ -241,6 +157,21 @@
         </div>
       </div>
     </el-dialog>
+    <!-- 申请 -->
+
+    <el-dialog :visible.sync="applyShow" width="350px" append-to-body>
+      <div slot="title" class="dialog-title">
+        <span class="title-line"></span>
+        申请操作
+      </div>
+      <el-radio-group v-model="radio">
+        <el-radio-button :label="1">电子证书</el-radio-button>
+        <el-radio-button :label="2">纸质证书</el-radio-button>
+      </el-radio-group>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitElectron">确 认</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -256,6 +187,9 @@ import html2canvas from "html2canvas";
 export default {
   data() {
     return {
+      currentRow: {},
+      radio: 1,
+      applyShow: false,
       infoShow: false,
       infoOpen: false,
       form: {},
@@ -274,8 +208,8 @@ export default {
       tableData: [],
       total: 1,
       queryParams: {
+        UId: null,
         name: undefined,
-        UId: undefined,
         issuanceStatus: true,
         pageNum: 1,
         pageSize: 20,
@@ -292,6 +226,37 @@ export default {
     });
   },
   methods: {
+    /**电子 */
+    submitElectron() {
+      let _this = this;
+      if (this.radio == 1) {
+        this.$modal
+          .confirm(`您确定要申请“${this.currentRow.name}”电子证书吗？`)
+          .then(function () {
+            let data = {
+              id: _this.currentRow.id,
+              type: _this.radio, //	1:电子证书 2:纸制证书
+            };
+            _this.subIssue(data);
+          });
+      } else {
+        this.applyShow = false;
+      }
+    },
+    //电子发放
+    subIssue(data) {
+      ycIssue(data).then((res) => {
+        this.applyShow = false;
+        this.getList();
+        this.$modal.msgSuccess("发放成功");
+      });
+    },
+
+    /**申请操作 */
+    handleApplyfor(row) {
+      this.currentRow = row;
+      this.applyShow = true;
+    },
     /**下载电子证书 */
     downloadContentAsImage() {
       const content = this.$refs.zs; // 获取目标<div>的DOM节点
@@ -312,9 +277,7 @@ export default {
     /**搜索 */
     handleSearch(keyWord) {
       this.queryParams = {
-        issuanceStatus: true,
         name: keyWord,
-        UId: this.$store.getters.userId,
         // creType: 1, //1:一次性证书发放,2：个性化证书发放
         pageNum: 1,
         pageSize: 10,
@@ -332,69 +295,6 @@ export default {
       let res = await getYcInfo(id);
       return res;
     },
-    //发放按钮
-    async handleFabu(row) {
-      this.reset();
-      let res = await this.getInfo(row.id);
-      this.form = res.data;
-      this.title = "发放查看";
-      this.open = true;
-    },
-    //点击制造或者电子验证收货信息是否完整
-    isComplete() {
-      if (
-        !this.form.userName ||
-        !this.form.mailAddress ||
-        !this.form.phonenumber
-      ) {
-        this.$modal.msgError("请前往地址管理中添加详细地址！");
-        return false;
-      } else {
-        return true;
-      }
-    },
-    /**纸制 */
-    submitPaper() {
-      let isTrue = this.isComplete();
-      if (isTrue) {
-        this.infoOpen = true;
-      }
-    },
-    /**纸制提交 */
-    submitForm() {
-      this.$refs["form"].validate((valid) => {
-        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;

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

@@ -31,10 +31,14 @@
         <template slot-scope="scope">
           <span
             :style="{
-              color: scope.row.issuanceStatus ? '#67C23A' : '#F56C6C',
+              color: scope.row.issuanceStatus
+                ? '#67C23A'
+                : scope.row.issuanceStatus == false && scope.row.type == 2
+                ? '#E6A23C'
+                : '#F56C6C',
             }"
           >
-            {{ scope.row.issuanceStatus ? "已发放" : "未发放" }}
+            {{ filterIissuanceStatus(scope.row) }}
           </span>
         </template>
       </el-table-column>
@@ -48,7 +52,7 @@
             >查看</el-button
           >
           <el-button
-            v-if="scope.row.issuanceStatus == false"
+            v-if="!scope.row.recordsId"
             size="mini"
             type="text"
             @click="handleApplyfor(scope.row)"
@@ -94,12 +98,15 @@
               </div>
               <div class="list-left">
                 <div>状态：</div>
-                <div>{{ form.issuanceStatus ? "已发放" : "未发放" }}</div>
+                <div>{{ filterIissuanceStatus(form) }}</div>
               </div>
             </div>
           </div>
         </div>
-        <div class="logisticsInfo" v-show="form.type == 2">
+        <div
+          class="logisticsInfo"
+          v-show="form.type == 2 && form.issuanceStatus == true"
+        >
           <div class="title">
             <img src="@/assets/images/huodong.png" alt="" />
             <span>纸制证书</span>
@@ -117,7 +124,10 @@
             </div>
           </div>
         </div>
-        <div class="logisticsInfo" v-show="form.type == 1">
+        <div
+          class="logisticsInfo"
+          v-show="form.type == 1 && form.issuanceStatus == true"
+        >
           <div class="title">
             <img src="@/assets/images/huodong.png" alt="" />
             <span>电子证书</span>
@@ -176,6 +186,10 @@
 </template>
 
 <script>
+// 初始  false  null  （未申请）
+// 志愿者申请电子   true   1 （已发放电子）
+// 志愿者申请纸质  false   2 （待发放纸质）
+// 管理端发放纸质  true   2 （已发放纸质）
 import {
   dsbrecordsList,
   dsbrecordsInfo,
@@ -211,6 +225,7 @@ export default {
         UId: null,
         name: undefined,
         issuanceStatus: true,
+        // creType: 1, //1:一次性证书发放,2：个性化证书发放
         pageNum: 1,
         pageSize: 20,
       },
@@ -226,29 +241,48 @@ export default {
     });
   },
   methods: {
+    /**状态过滤 */
+    filterIissuanceStatus(row) {
+      if (row.issuanceStatus == false && row.type == null) {
+        return "未发放";
+      } else if (
+        (row.issuanceStatus == true && row.type == 1) ||
+        (row.issuanceStatus == true && row.type == 2)
+      ) {
+        return "已发放";
+      } else if (row.issuanceStatus == false && row.type == 2) {
+        return "已申请";
+      }
+    },
     /**电子 */
     submitElectron() {
       let _this = this;
+      let title = "";
       if (this.radio == 1) {
-        this.$modal
+        title = `您确定要申请“${this.currentRow.name}”电子证书吗？`;
-          .confirm(`您确定要申请“${this.currentRow.name}”电子证书吗？`)
-          .then(function () {
-            let data = {
-              id: _this.currentRow.id,
-              type: _this.radio, //	1:电子证书 2:纸制证书
-            };
-            _this.subIssue(data);
-          });
       } else {
-        this.applyShow = false;
+        title = `您确定要申请“${this.currentRow.name}”纸质证书吗？`;
       }
+      this.$modal.confirm(title).then(function () {
+        let data = {
+          status: _this.radio,
+          id: _this.currentRow.id,
+          type: _this.radio, //	1:电子证书 2:纸制证书
+        };
+        _this.subIssue(data);
+      });
+      this.applyShow = false;
     },
     //电子发放
     subIssue(data) {
       ycIssue(data).then((res) => {
         this.applyShow = false;
         this.getList();
-        this.$modal.msgSuccess("发放成功");
+        if (data.type == 1) {
+          this.$modal.msgSuccess("发放成功");
+        } else {
+          this.$modal.msgSuccess("申请成功");
+        }
       });
     },