yunyubang-web/src/views/finance/component/rechargeFine.vue

<!--充值、扣款-->
<template>
  <div>
    <xy-dialog :form="form" :rules="rules" ref="dialog" type="form" :is-show.sync="isShow" :title="type === 'recharge' ? '充值' : '扣款'" @submit="submit">
      <template v-slot:merchantId>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>商家：
          </div>
          <div class="xy-table-item-content">
            <el-select placeholder="请选择商家" clearable filterable v-model="form.merchantId" style="width: 300px;">
              <el-option v-for="item in merchants" :value="item.id" :label="item.username" :key="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:money>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>金额：
          </div>
          <div class="xy-table-item-content">
            <el-input placeholder="请输入金额" clearable v-model="form.money" style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:payment>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>支付方式：
          </div>
          <div class="xy-table-item-content">
            <el-select placeholder="请选择支付方式" clearable filterable v-model="form.payment" style="width: 300px;">
              <el-option v-for="item in payments" :value="item.id" :label="item.name" :key="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:paidAt>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>支付时间：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker placeholder="请选择支付时间" type="datetime" v-model="form.paidAt" value-format="yyyy-MM-dd hh:mm:ss" style="width: 300px;"></el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:transitionId>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            交易订单号：
          </div>
          <div class="xy-table-item-content">
            <el-input placeholder="请输入交易订单号" clearable v-model="form.transitionId" style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:comment>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            备注：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" :autosize="{minRows:2}" placeholder="请输入备注" clearable v-model="form.comment" style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {getPayments,recharge,fine} from "@/api/finance"
import { Message } from 'element-ui'
export default {
  props:{
    merchants:Array
  },
  data() {
    return {
      isShow:false,
      type:'',

      payments:[],//支付方式

      form:{
        merchantId:'',
        money:'',
        payment:'',
        paidAt:'',
        comment:'',
        transitionId:''
      },
      rules:{
        merchantId:[
          {required:true,message:"请选择商户"}
        ],
        money:[
          {required:true,message:"请填写金额"},
          {pattern:/^[0-9]+/,message:"手机号格式错误"}
        ],
        payment:[
          {required:true,message:"请选择支付方式"}
        ],
        paidAt:[
          {required:true,message:"请选择支付时间"}
        ]
      }
    }
  },
  methods: {
    async getPayment(){
      const res = await getPayments()
      this.payments = res
    },

    submit(){
      if(this.type === 'recharge'){
        recharge({
          merchant_id:this.form?.merchantId,
          money:this.form?.money,
          comment:this.form?.comment,
          payment:this.form?.payment,
          paid_at:this.form?.paidAt,
          transition_id:this.form?.transitionId
        }).then(res => {
          Message({
            type:'success',
            message:'充值成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
        return
      }
      if(this.type === 'fine'){
        fine({
          merchant_id:this.form?.merchantId,
          money:this.form?.money,
          comment:this.form?.comment
        }).then(res => {
          Message({
            type:'success',
            message:'扣款成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      }
    }
  },
  watch:{
    isShow(val){
      if(val){
        if(this.type === 'recharge'){
          this.getPayment()
          this.form = {
            merchantId:'',
            money:'',
            payment:'',
            paidAt:'',
            transitionId:'',
            comment:'',
          }
          return
        }
        if(this.type === 'fine'){
          this.form = {
            merchantId:'',
            money:'',
            comment: ''
          }
        }
      }else{
        this.$refs['dialog'].reset()
        this.type = ''
      }
    }
  }

}
</script>

<style scoped lang="scss">
</style>