ylrz_his_scrm_adminUI/src/views/components/his/storePayDetails.vue

<template>
<div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      支付详情
    </div>
<div class="contentx" v-if="item!=null">
      <div class="desct">
        支付信息
      </div>

        <div class=""  style="float: right;margin: 5px;">
           <el-button size="mini" @click="openSyncDialog" >同步支付状态</el-button>
        </div>
        <div class="" v-if="item.status>=0" style="float: right; margin: 5px;" v-hasPermi="['his:storePayment:refund']" >
           <el-button size="mini" @click="payRefund()" >退款</el-button>
        </div>
        <el-descriptions title="" :column="3" border>
            <el-descriptions-item label="支付订单号" >
                <span v-if="item!=null">{{item.payCode}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="支付类型" >
                <span v-if="item!=null">{{item.payTypeCode}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="支付金额" >
                <span v-if="item!=null">{{item.payMoney}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="外部订单号" >
                <span v-if="item!=null">{{item.tradeNo}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="用户昵称" >
                <span v-if="item!=null">{{item.nickName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="OPENID" >
                <span v-if="item!=null">{{item.openId}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="用户电话" >
                <span v-if="item!=null">{{item.phone}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="店铺名称" >
                <span v-if="item!=null">{{item.storeName}}</span>
            </el-descriptions-item>

            <el-descriptions-item label="交易单号" >
                <span v-if="item!=null">{{item.bankTransactionId}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="银行流水号" >
                <span v-if="item!=null">{{item.bankSerialNo}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="退款金额" >
                <span v-if="item!=null">{{item.refundMoney}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="退款时间" >
                <span v-if="item!=null">{{item.refundTime}}</span>
            </el-descriptions-item>

            <el-descriptions-item label="业务类型" >
             <span v-if="item!=null">
                   <dict-tag :options="busineOptions" :value="item.businessType"/>
             </span>
            </el-descriptions-item>
            <el-descriptions-item label="状态" >
             <span v-if="item!=null">
                   <dict-tag :options="statusOptions" :value="item.status"/>
             </span>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" >
                <span v-if="item!=null">{{item.createTime}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="支付时间" >
                <span v-if="item!=null">{{item.payTime}}</span>
            </el-descriptions-item>
        </el-descriptions>
    </div>
  <!-- 同步支付状态弹窗 -->
  <el-dialog
    title="同步支付状态"
    :visible.sync="syncDialogVisible"
    width="450px"
    :close-on-click-modal="false"
    append-to-body>

    <el-form :model="syncForm" :rules="syncRules" ref="syncForm" label-width="100px">
      <el-form-item label="退款日期" prop="refundDate">
        <el-date-picker
          v-model="syncForm.refundDate"
          type="date"
          placeholder="请选择退款日期"
          value-format="yyyy-MM-dd"
          style="width: 100%">
        </el-date-picker>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="syncDialogVisible = false" size="small">取 消</el-button>
      <el-button type="primary" :loading="syncLoading"  @click="getPayStatus()" size="small">
        开始同步
      </el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { refund,listStorePayment,getStatus, getStorePayment, delStorePayment, addStorePayment, updateStorePayment, exportStorePayment } from "@/api/his/storePayment";
  export default {
    name: "depdetails",
    props:["data"],
    data() {
      return {
        // 弹窗显示控制
        syncDialogVisible: false,
        // 加载状态
        syncLoading: false,
        syncForm: {
          refundDate: '',
        },
        syncRules: {
          refundDate: [
            { required: true, message: '请选择退款日期', trigger: 'change' }
          ]
        },
        statusOptions: [],
        busineOptions: [],
        item:null,

      }
    },
    created() {
       this.getDicts("sys_store_payment_status").then(response => {
        this.statusOptions = response.data;
      });
      this.getDicts("sys_store_payment_business_type").then(response => {
        this.busineOptions = response.data;
      });


    },
    methods: {
      // 打开同步弹窗
      openSyncDialog() {
        if (this.item.status==0){
          return this.getPayStatus();
        } else {
          this.syncDialogVisible = true;
          // 重置表单
          this.$nextTick(() => {
            this.$refs.syncForm && this.$refs.syncForm.resetFields();
          });
        }

      },
      getDetails(orderId) {
        this.item=null;
        getStorePayment(orderId).then(response => {
              this.item = response.data;
        });
      },
      getPayStatus(){
        this.$confirm('是否确认同步支付状态?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          console.log("this.item.status", this.item.status);
          console.log("this.item.status",  this.syncForm.refundDate);

          if (this.item.status === 1) {
            // 先验证表单
            this.$refs.syncForm.validate(valid => {
              if (valid) {
                this.syncLoading = true;
                getStatus(this.item.paymentId, this.syncForm.refundDate)
                  .then(() => {
                    this.$message.success('同步成功');
                    this.syncDialogVisible = false;
                    getStorePayment(that.item.paymentId).then(response => {
                      that.item = response.data;
                    });
                  })
                  .catch(err => {
                    this.$message.error(err.msg || '同步失败');
                  })
                  .finally(() => {
                    this.syncLoading = false;
                  });
              }
            });
          } else {
            // status 不为 1 时直接调用，不传日期
            getStatus(this.item.paymentId, null)
              .then(() => {
                getStorePayment(that.item.paymentId).then(response => {
                  that.item = response.data;
                });
              });
          }
        }).catch(() => {});
      },


      payRefund(){
          var that=this;
          this.$confirm('是否确认退款?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return refund(that.item.paymentId);
          }).then(() => {
            getStorePayment(that.item.paymentId).then(response => {
                  that.item = response.data;
            });
             this.msgSuccess("操作成功");
          }).catch(function() {});
      },
    }
  }
</script>
<style>

  .contentx{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;


      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }

</style>