缴费页面迁移

src/views/caseManagement/caseList.vue

             v-hasPermi="['monitor:online:forceLogout']"
             >立案审查</el-button
           >
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-tickets"
-            @click="viewpaymentRow(scope.row)"
-            v-if="scope.row.caseStatus == 2"
-            v-hasPermi="['monitor:online:forceLogout']"
-            >查看缴费</el-button
-          >
+          <el-popconfirm title="是否进行缴费" @confirm="payStatus(scope.row)">
+            <el-button
+              size="mini"
+              type="text"
+              slot="reference"
+              icon="el-icon-tickets"
+              v-if="scope.row.caseStatus == 2"
+              v-hasPermi="['monitor:online:forceLogout']"
+              >缴费</el-button
+            >
+          </el-popconfirm>
+
           <!-- <el-button
             size="mini"
             type="text"
     ></adjudicaterecordDialog>
     <!-- 开庭审理 -->
     <trialincourtDialog
-    :showtrialincourt="showtrialincourt"
-    :adjudicatename="adjudicatename"
-    :form="form"
-    @canceltrialincourt="canceltrialincourt"
+      :showtrialincourt="showtrialincourt"
+      :adjudicatename="adjudicatename"
+      :form="form"
+      @canceltrialincourt="canceltrialincourt"
     ></trialincourtDialog>
+    <!-- 缴费 -->
+    <payDialog
+      :openPay="openPay"
+      :payTitle="payTitle"
+      :form="form"
+      :payForm="payForm"
+      @paycancelRow="paycancelRow"
+    ></payDialog>
   </div>
 </template>
 
 import courtReviewDialog from "./components/courtReviewDialog.vue";
 import choosetrialmethodDaiog from "./components/choosetrialmethodDaiog.vue";
 import adjudicaterecordDialog from "./components/adjudicaterecordDialog.vue";
-import trialincourtDialog from './components/trialincourtDialog.vue';
+import trialincourtDialog from "./components/trialincourtDialog.vue";
+import payDialog from "./components/payDialog.vue";
 
+import { caseApplicationDetail } from "@/api/pay/pay";
 import {
   caseApply,
   removeCaseApply,
   submitCaseApply,
   selectCaseApply,
 } from "@/api/caseAccess/caseEntry";
+
 export default {
   name: "caseList",
   dicts: ["case_status"],
     courtReviewDialog,
     choosetrialmethodDaiog,
     adjudicaterecordDialog,
-    trialincourtDialog
+    trialincourtDialog,
+    payDialog,
   },
   data() {
     return {
       showformateCourt: false, //组庭界面显示
       showcourtReview: false, //组庭审核页面
       showchoosetrialmethod: false, //选择仲裁方式页面
-      choosetrialmethodata:{},
+      choosetrialmethodata: {},
       showadjudicaterecord: false, //书面审理弹框
-      adjudicatename: {},//书面仲裁（被）申请人姓名
+      adjudicatename: {}, //书面仲裁（被）申请人姓名
       showtrialincourt: false, //开庭审理
+      openPay: false, //缴费弹框
+      payTitle: "",
+      payForm: {},
     };
   },
   created() {
         })
         .catch(() => {});
     },
-    // 查看缴费
-    viewpaymentRow(row) {
-      console.log(row, "查看缴费");
+    // 取消缴费
+    paycancelRow(row) {
+      this.openPay = false;
+    },
+    payStatus(val) {
+      this.getDetail({ id: val.id });
+      this.openPay = true;
+      this.payTitle = "缴费";
+    },
+    getDetail(parms) {
+      caseApplicationDetail(parms).then((res) => {
+        if (res.data.caseStatus == 1) {
+          res.data.caseStatusName = "待缴费";
+        }
+        this.form = res.data;
+        this.payForm.feePayable = res.data.feePayable;
+        this.payForm.caseId = res.data.id;
+      });
     },
+
     // 组庭
     // formationcourtRow(row) {
     //   console.log(row, "组庭");
       // console.log(row, "书面审理");
       this.showadjudicaterecord = true;
       this.form = row;
-      this.getInfo(row)
+      this.getInfo(row);
     },
     canceladjudicaterecord() {
       this.showadjudicaterecord = false;
       console.log(row, "开庭审理");
       this.showtrialincourt = true;
       this.form = row;
-      this.getInfo(row)
+      this.getInfo(row);
     },
     canceltrialincourt() {
-        this.showtrialincourt = false;
+      this.showtrialincourt = false;
     },
     //  生成裁决书
     generateawardRow(row) {
     getInfo(row) {
       const id = row.id;
       selectCaseApply({ id }).then((res) => {
-        console.log(res,'nnnnnnnnnnnn');
         // this.visible = true;
         // this.formData = res.data;
         this.adjudicatename = {
           applicantName: res.data.applicantName,
           respondentName: res.data.respondentName,
           feePayable: res.data.feePayable,
-          hearDate: res.data.hearDate
-        }
+          hearDate: res.data.hearDate,
+        };
         this.initpaymentArr = [];
         this.initpaymentArr1 = [];
         res.data.caseAffiliates.forEach((item) => {

src/views/caseManagement/components/payDialog.vue

+<template>
+  <div>
+    <el-dialog
+      :title="payTitle"
+      :visible.sync="openPay"
+      v-if="openPay"
+      width="800px"
+      append-to-body
+      :destroy-on-close="true"
+    >
+      <el-descriptions title="订单信息">
+        <el-descriptions-item label="案件编号：">{{
+          form.caseNum
+        }}</el-descriptions-item>
+        <el-descriptions-item label="申请人：">{{
+          form.applicant
+        }}</el-descriptions-item>
+        <el-descriptions-item label="案件标的：">{{
+          form.caseSubjectAmount
+        }}</el-descriptions-item>
+        <el-descriptions-item label="案件应缴费用：">{{
+          form.feePayable
+        }}</el-descriptions-item>
+        <el-descriptions-item label="被申请人：">{{
+          form.respondent
+        }}</el-descriptions-item>
+        <el-descriptions-item label="申请人仲裁诉求：">{{
+          form.arbitratClaims
+        }}</el-descriptions-item>
+        <el-descriptions-item label="案件状态：">{{
+          form.caseStatusName
+        }}</el-descriptions-item>
+      </el-descriptions>
+      <div class="payType">
+        <span>请选择支付方式：</span>
+        <i class="iconfont icon-weixinzhifu" @click="pay(0)"></i>
+        <i class="iconfont icon-zhifubao" @click="pay(1)"></i>
+      </div>
+      <div class="payImg">
+        <div id="qrcodeImg"></div>
+      </div>
+      <div class="payTitle">{{ payMain }}</div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="payCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { casePay } from "@/api/pay/pay";
+import QRCode from "qrcodejs2";
+export default {
+  props: ["openPay", "payTitle", "form", "payForm"],
+  data() {
+    return {
+      // key: value
+      // 支付文字
+      payMain: "",
+    };
+  },
+  methods: {
+    // 生成二维码
+    qrcode(url) {
+      // 前端根据 URL 生成微信支付二维码
+      document.getElementById("qrcodeImg").innerHTML = "";
+      return new QRCode("qrcodeImg", {
+        width: 200,
+        height: 200,
+        text: url,
+        colorDark: "#000",
+        colorLight: "#fff",
+      });
+    },
+    // 支付
+    pay(val) {
+      if (this.payForm.feePayable == 0 || !this.payForm.feePayable) {
+        this.$message({
+          message: "此案件无需缴费",
+          type: "error",
+        });
+        return;
+      }
+      let payType = "";
+      if (val == 0) {
+        payType = "wxpay";
+        this.payMain = "请使用微信扫二维码支付";
+      } else if (val == 1) {
+        payType = "alipay";
+        this.payMain = "请使用支付宝扫二维码支付";
+      }
+      casePay({
+        totalFee: this.payForm.feePayable * 100,
+        caseId: this.payForm.caseId,
+        tradeType: "native",
+        platform: payType,
+      }).then((res) => {
+        this.paySrc = res.data.code_url;
+        this.qrcode(this.paySrc);
+      });
+    },
+    payCancel() {
+      this.$emit("paycancelRow");
+      this.payMain = "";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.payType {
+  height: 80px;
+  line-height: 80px;
+
+  .icon-weixinzhifu {
+    font-size: 24px;
+    color: #27a56f;
+    margin-right: 15px;
+  }
+
+  .icon-zhifubao {
+    font-size: 24px;
+    color: #1d76cc;
+  }
+}
+
+.payImg {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.payTitle {
+  margin-top: 20px;
+  width: 100%;
+  text-align: center;
+}
+</style>

src/views/caseManagement/components/trialincourtDialog.vue

           </el-form-item>
         </el-col>
       </el-form>
-      <el-button>发起会议</el-button>
+      <el-button @click="openmeeting"
+        >发起会议
+        <!-- <iframe src="http://47.97.117.253:9005/#/">发起会议</iframe> -->
+      </el-button>
       <el-button>提交仲裁结果</el-button>
       <div slot="footer" class="dialog-footer">
         <el-button @click="submitForm" class="endbutton"
 </template>
 
 <script>
+import { getUserProfile } from "@/api/system/user";
 export default {
-  props: ["showtrialincourt", "adjudicatename"],
+  props: ["showtrialincourt", "adjudicatename", "form"],
   data() {
     return {
-      // key: value
       formData: {},
+      user: ''
     };
   },
+  watch: {
+    showtrialincourt: {
+      handler(val) {
+        if (val) {
+          this.formData = this.form
+        }
+      }
+    }
+  },
+  created () {
+    this.getUser();
+  },
   methods: {
+    getUser() {
+      getUserProfile().then(response => {
+        console.log(response,'response');
+        this.user = response.data.userName;
+      });
+    },
+    // 打开会议
+    openmeeting() {
+      window.open(`http://47.97.117.253:9005/#/home?name=${this.user}`)
+    },
     submitForm() {},
     cancel() {
       this.$emit("canceltrialincourt");

src/views/payAll/payList.vue

                 <el-descriptions-item label="申请人：">{{ form.applicant }}</el-descriptions-item>
                 <el-descriptions-item label="案件标的：">{{ form.caseSubjectAmount }}</el-descriptions-item>
                 <el-descriptions-item label="案件应缴费用：">{{ form.feePayable }}</el-descriptions-item>
-                <el-descriptions-item label="案件实缴费用：">{{ form.paidExpenses }}</el-descriptions-item>
                 <el-descriptions-item label="被申请人：">{{ form.respondent }}</el-descriptions-item>
                 <el-descriptions-item label="申请人仲裁诉求：">{{ form.arbitratClaims }}</el-descriptions-item>
                 <el-descriptions-item label="案件状态：">{{ form.caseStatusName }}</el-descriptions-item>
             openPay: false,
             // 查询参数
             queryParams: {
-                caseStatus: 1,
+                caseStatus: 2,
                 pageNum: 1,
                 pageSize: 10
             },
                     res.data.caseStatusName = '待缴费'
                 }
                 this.form = res.data;
-                this.payForm.totalFee = res.data.paidExpenses;
+                this.payForm.feePayable = res.data.feePayable;
                 this.payForm.caseId = res.data.id
             })
         },
         // 支付
         pay(val) {
-            if (this.payForm.totalFee == 0 || !this.payForm.totalFee) {
+            if (this.payForm.feePayable == 0 || !this.payForm.feePayable) {
                 this.$message({
                     message: '此案件无需缴费',
                     type: 'error'
                 this.payMain = "请使用支付宝扫二维码支付"
             }
             casePay({
-                totalFee: this.payForm.totalFee * 100,
+                totalFee: this.payForm.feePayable * 100,
                 caseId: this.payForm.caseId,
                 tradeType: "native",
                 platform: payType

vue.config.js

 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口
 
-// const API = 'http://121.40.189.20:9001'  //测试
-const API = 'http://192.168.3.77:8080' //Q
+const API = 'http://121.40.189.20:9001'  //测试
+// const API = 'http://192.168.3.77:8080' //Q
 
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions