应退金额改为查看model

src/views/financialManagement/userRefund/index.vue

@@ -132,8 +132,12 @@
         align="center"
         prop="payMoney"
         key="payMoney"
-        :show-overflow-tooltip="true"
-      />
+        width="100"
+      >
+        <template slot-scope="{ row }">
+          <el-button type="primary" @click="handleLook(row)">查看</el-button>
+        </template>
+      </el-table-column>
       <el-table-column
         label="退款理由"
         align="center"
@@ -239,6 +243,22 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <template v-if="openArticleInfo">
+      <el-dialog
+        title="应退金额"
+        :visible.sync="openArticleInfo"
+        width="600px"
+        append-to-body
+      >
+        <div class="contl">
+          <div class="contl-item">
+            <p class="contl-item-label">应退金额：</p>
+            <p class="contl-item-rig">{{ VisitorData.payMoney }}</p>
+          </div>
+        </div>
+      </el-dialog>
+    </template>
   </div>
 </template>
 
@@ -256,6 +276,8 @@ export default {
   name: "UserRefund",
   data() {
     return {
+      openArticleInfo: false,
+      VisitorData: {},
       // 按钮loading
       buttonLoading: false,
       // 遮罩层
@@ -299,6 +321,10 @@ export default {
     this.getList();
   },
   methods: {
+    handleLook(row) {
+      this.VisitorData = row;
+      this.openArticleInfo = true;
+    },
     async clickBH(row, status) {
       const data_back = await refundPUT({
         id: row.id,
@@ -439,3 +465,22 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.contl {
+  padding: 20px;
+  width: calc(100 - 40px);
+  color: #333333;
+  font-size: 16px;
+  &-item {
+    display: flex;
+    &-label {
+      width: 20%;
+    }
+    &-rig {
+      width: 80%;
+    }
+  }
+}
+</style>
+