no message

src/views/partsManagement/masterAccountingManagement/components/pay-popup-window.vue

@@ -0,0 +1,245 @@
+<template>
+  <el-dialog
+    title="配件记账应收费用支付"
+    :visible.sync="dialogVisible"
+    :before-close="handleClose"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    width="1050px"
+  >
+    <div>
+      <el-descriptions>
+        <el-descriptions-item label="支付单号">{{ data.id }}</el-descriptions-item>
+        <el-descriptions-item label="应收金额">￥{{ data.payAmount }}</el-descriptions-item>
+        <el-descriptions-item label="收款方">{{ item.websitName }}</el-descriptions-item>
+        <el-descriptions-item label="支付方式">
+          <el-radio v-model="radio" label="wx">微信支付</el-radio>
+          <el-radio v-model="radio" label="xj">现金支付</el-radio>
+        </el-descriptions-item>
+        <el-descriptions-item v-if="radio === 'wx'" label="支付商户">
+          <el-select style="width: 220px" v-model="payConfigId" size="small" clearable placeholder="请选择支付商户">
+            <el-option
+              v-for="item in payConfigs"
+              :key="item.id"
+              :label="item.name + ' | ' + item.mchNo"
+              :value="item.id"
+            />
+          </el-select>
+        </el-descriptions-item>
+      </el-descriptions>
+      <br />
+      <div class="pay-img-info" v-if="radio === 'wx'">
+        <div class="qr-code-view">
+          <p>微信支付</p>
+          <div v-if="showPayQRCode" ref="payQRCode" style="display: flex; justify-content: center" />
+          <p>￥{{ data.payAmount }}</p>
+        </div>
+        <p style="text-align: center" v-if="radio === 'wx'">
+          {{ data.codeUrl }}
+        </p>
+        <p style="text-align: center" v-if="radio === 'wx'">支付失效时间：{{ data.timeExpire }}</p>
+      </div>
+      <div style="text-align: center" v-if="radio === 'xj'">
+        <el-button size="small" type="info" @click="handleClose">未收款</el-button>
+        <el-button size="small" type="primary" @click="yjsqxj">已收取现金</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { queryPayStatus } from '@/api/material-system/website/website-parts-shop-sales'
+import { adminWebsitPayConfigList } from '@/api/common.js'
+import QRCode from 'qrcodejs2'
+import { partsCreditCode, partsCreditChangeCash } from '@/api/masterAccountingManagement'
+export default {
+  props: {
+    item: {
+      type: Object
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      radio: 'wx',
+      dialogVisible: this.visible,
+      data: {},
+      bool: true,
+      payConfigs: [],
+      payConfigId: '',
+      showPayQRCode: true
+    }
+  },
+  watch: {
+    visible: {
+      handler(newVal) {
+        this.dialogVisible = newVal
+        if (newVal) {
+          this.$nextTick(() => {
+            if (this.item.websitId) {
+              adminWebsitPayConfigList({
+                status: true,
+                websitId: this.item.websitId,
+                category: 'P'
+              }).then(res => {
+                this.payConfigs = res.data
+                if (this.payConfigs.length > 0) {
+                  this.payConfigId = this.payConfigs[0].id
+                }
+              })
+            }
+          })
+        }
+      },
+      immediate: true
+    },
+    payConfigId() {
+      this.showPayQRCode = false
+      if (this.payConfigId && this.visible && this.item) {
+        partsCreditCode({
+          id: this.item.id,
+          payConfigId: this.payConfigId
+        })
+          .then(res => {
+            this.data = res.data
+            this.setqr()
+          })
+          .catch(err => {})
+      } else if (this.timeId) {
+        clearTimeout(this.timeId)
+      }
+    },
+    radio() {
+      this.showPayQRCode = false
+      this.setqr()
+    },
+    dialogVisible() {
+      if (!this.dialogVisible) {
+        if (this.timeId) {
+          clearTimeout(this.timeId)
+        }
+        this.data = {}
+        this.payConfigId = ''
+      }
+    }
+  },
+  methods: {
+    handleClose(done) {
+      this.$emit('setVisible', false)
+    },
+    setqr() {
+      if (this.radio === 'wx') {
+        this.showPayQRCode = true
+        this.$nextTick(() => {
+          this.queryOrder()
+          new QRCode(this.$refs.payQRCode, {
+            text: this.data.codeUrl,
+            width: 160,
+            height: 160,
+            colorDark: '#333333',
+            colorLight: '#ffffff',
+            correctLevel: QRCode.CorrectLevel.L
+          })
+        })
+      } else if (this.timeId) {
+        clearTimeout(this.timeId)
+      }
+    },
+    queryOrder() {
+      if (this.item.websitId && this.data.id && this.item.id) {
+        const params = {
+          websitId: this.item.websitId,
+          id: this.item.id,
+          outTradeNo: this.data.id
+        }
+        queryPayStatus(params).then(res => {
+          if (res && res.data.payFlag === 'YES') {
+            this.$emit('setVisible', false)
+            this.$emit('success')
+            if (this.bool) {
+              this.bool = false
+              this.$message({
+                type: 'success',
+                message: `支付成功!`
+              })
+            }
+          } else {
+            this.timeId = setTimeout(() => {
+              this.queryOrder()
+            }, 1000)
+          }
+        })
+      }
+    },
+    yjsqxj() {
+      partsCreditChangeCash({
+        id: this.item.id
+      }).then(res => {
+        this.$emit('setVisible', false)
+        this.$emit('success')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#new-repair-parts-listing {
+  width: 100%;
+  height: 500px;
+  border: 1px solid #000;
+  box-sizing: border-box;
+  padding: 20px;
+}
+#new-repair-parts-listing table {
+  border: 1px solid #aaa;
+}
+#new-repair-parts-listing th,
+#new-repair-parts-listing td {
+  height: 30px;
+  border: 1px solid #aaa;
+}
+.new-repair-parts-title {
+  text-align: center;
+  font-weight: bold;
+}
+.new-repair-parts-info {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: bold;
+}
+.pay-img-info {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  .qr-code-view {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    background: limegreen;
+    width: 240px;
+    height: 240px;
+    p {
+      margin: 0;
+      color: #fff;
+    }
+  }
+  p {
+    width: 100%;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+  }
+}
+</style>

src/views/partsManagement/masterAccountingManagement/index.vue

@@ -37,6 +37,22 @@
         </zj-page-container>
       </el-dialog>
     </div>
+    <pay-popup-window
+      v-if="visible"
+      :item="rowData"
+      :visible="visible"
+      @success="
+        () => {
+          $refs.pageRef.refreshList()
+        }
+      "
+      @setVisible="
+        bool => {
+          visible = bool
+          rowData = null
+        }
+      "
+    />
   </template-page>
 </template>
 
@@ -49,12 +65,11 @@ import {
   partsCreditGatherListExport,
   partsCreditList,
   partsCreditListExport,
-  ppartsCreditDetail,
-  partsCreditCode,
-  partsCreditChangeCash
+  ppartsCreditDetail
 } from '@/api/masterAccountingManagement'
+import PayPopupWindow from './components/pay-popup-window.vue'
 export default {
-  components: { TemplatePage },
+  components: { TemplatePage, PayPopupWindow },
   mixins: [import_mixin, operation_mixin],
   data() {
     return {
@@ -77,7 +92,9 @@ export default {
       },
       formBool: false,
       formEdit: false,
-      tagStatus: ''
+      tagStatus: '',
+      visible: false,
+      rowData: null
     }
   },
   computed: {
@@ -103,20 +120,7 @@ export default {
       return []
     },
     formItems() {
-      return [
-        {
-          name: 'el-input',
-          md: 12,
-          attributes: {
-            disabled: this.formEdit
-          },
-          formItemAttributes: {
-            label: '网点名称',
-            prop: 'importWebsitName',
-            rules: []
-          }
-        }
-      ]
+      return []
     }
   },
   watch: {
@@ -180,7 +184,12 @@ export default {
           conditions: ({ row, index, column }) => {
             return !row.creditStatus
           },
-          click: ({ row, index, column }) => {}
+          click: ({ row, index, column }) => {
+            ppartsCreditDetail({ id: row.id }).then(res => {
+              this.rowData = res.data
+              this.visible = true
+            })
+          }
         }
       })
     },