oil-station/fuintAdmin/src/views/power/payment/index.vue

<template>
  <div class="box-centenr">
    <div style="width: 100%;display: flex">
      <el-alert
        title="说明"
        type="error"
        description="为了保证加油站商户日常在线支付业务的稳定性，油客里里目前支持多通道支付
                      可以有效的避免单支付通道带来不稳定性，从而造成油站不能正常支付问题
                      加油站一旦出现不能正常支付的情况，可以随时手工切换支付通道，来保证加油站支付收款业务"
        :closable="false"
      >
      </el-alert>

      <div style="width: 150%;display: flex;justify-content: right">
        <div class="mingc">功能状态</div>
        <el-switch
          v-model="value1"
          @change="changeStatus1"
        >
        </el-switch>
      </div>
    </div>
    <div class="content-box">
<!--      <el-card class="box-card" shadow="hover" v-for="(item,index) in 10" :key="index">-->
<!--        <div slot="header" class="clearfix">-->
<!--          <span>卡片名称</span>-->
<!--          <el-button style="float: right; padding: 3px 0" type="text">切换为当前通道</el-button>-->
<!--        </div>-->
<!--        <div>商户编号:1861975</div>-->
<!--      </el-card>-->
      <el-card class="box-card" shadow="hover" v-for="item in merchantList" :key="item.id">
        <div slot="header" class="clearfix">
          <span>{{ item.merchantName }}</span>
          <el-button v-if="item.isUse=='0'"
                     @click="editStatus(item,1)"
                     style="float: right; padding: 3px 0" type="text">切换为当前通道</el-button>
          <el-tag v-else effect="dark" type="success" style="float: right">当前使用中</el-tag>
        </div>
        <div>商户编号:{{ item.mchntCd }}</div>
      </el-card>
    </div>
    <el-divider></el-divider>
    <div class="cont-box">
      <div style="width: 40%">
        <el-alert
          title="使用说明"
          type="error"
          description="添加/编辑对应的规则->规则配置正常->发布规则->规则生效
注意:功能状态启用且通道规则发布生效后当前功能才有效,否则使用系统单商户号模式"
          :closable="false"
        >
        </el-alert>
      </div>

      <div style="display: flex;align-items: center">
        <div class="mingc">规则周期</div>
        <el-radio-group v-model="labelPosition" size="small">
          <el-radio-button label="left">永久</el-radio-button>
          <el-radio-button label="right">单日</el-radio-button>
        </el-radio-group>
        <div class="mingc">功能状态</div>
        <el-switch
          v-model="value"
          @change="changeStatus"
        >
        </el-switch>
      </div>
    </div>

    <div class="cont-box" >
      <div><el-button type="primary" icon="el-icon-plus" @click="addOil">添加规则</el-button></div>
      <div><el-button type="success" icon="el-icon-s-promotion" @click="open">发布规则</el-button></div>
    </div>
    <div class="hangbox" v-for="(item,index) in oilConfigList" :key="item.id">
      <div>{{index + 1}}.通道</div>
      <div class="jiaong">{{ item.merchantName }}</div>
      <div> 商户号 </div>
      <div class="jiaong">{{ item.mchntCd }}</div>
<!--      <div> 交易满 </div>-->
      <div> 交易占比 </div>
      <div class="jiaong"> {{ item.proportion }} </div>
      <div> %更换支付通道 参与次数  </div>
      <div class="jiaong"> 不固定次数 </div>

      <el-button type="primary" icon="el-icon-edit" @click="editOilConfig(item.id)">编辑</el-button>
      <el-button type="danger" icon="el-icon-close" @click="deleteOilConfig(item.id)">删除</el-button>
    </div>
<!--    <div class="hangbox" v-for="(item,index) in 3" :key="index">-->
<!--      <div>{{index + 1}}.通道</div>-->
<!--      <div class="jiaong"> 名称 </div>-->
<!--      <div> 商户号 </div>-->
<!--      <div class="jiaong"> 1231213213212</div>-->
<!--&lt;!&ndash;      <div> 交易满 </div>&ndash;&gt;-->
<!--      <div> 交易占比 </div>-->
<!--      <div class="jiaong"> 2 </div>-->
<!--      <div> %更换支付通道 参与次数  </div>-->
<!--      <div class="jiaong"> 不固定次数 </div>-->

<!--      <el-button type="primary" icon="el-icon-edit">编辑</el-button>-->
<!--      <el-button type="danger" icon="el-icon-close">删除</el-button>-->
<!--    </div>-->
    <div class="hsize">注:规则按照顺序进行处理并自动更换支付通道，新增或变更规则后需要发布当前规则才生效,发布生效后的规则将从序号1的配置生效</div>

    <el-dialog title="编辑通道规则" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form">

        <el-form-item label="支付通道" :label-width="formLabelWidth" width="300px">
          <el-select v-model="form.merchConfigId"
                     @change="changeMerch"
                     :disabled="isDis" placeholder="请选择商户信息">
            <el-option v-for="item in merchantList" :key="item.id"
                       :label="item.merchantName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商户号" :label-width="formLabelWidth">
          <el-input v-model="form.mchntCd" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消费满笔数" :label-width="formLabelWidth">
          <el-input v-model="form.proportion" autocomplete="off">
            <template slot="append">%</template>
          </el-input>
          <div>消费笔数满足后切换到下一个支付通道</div>
        </el-form-item>
        <el-form-item label="参与次数" :label-width="formLabelWidth">
          <el-radio-group v-model="form.resource" >
            <el-radio label="不固定次数"></el-radio>
            <el-radio label="固定次数"></el-radio>
          </el-radio-group>
          <div>是否限制当前配置在生效期间内的参与次数</div>
        </el-form-item>

        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input-number v-model="form.num" controls-position="right"  :min="1" :max="100"></el-input-number>
          <div>数值越大顺序越在前</div>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearOil">取 消</el-button>
        <el-button type="primary" @click="submitOilConfig">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {editMerchant, listMerchant} from "@/api/payConfig/merchantconfig";
import {
  addOilConfig,
  delOilConfig,
  editOilConfig,
  isOpenOilConfig,
  listOilConfig,
  oilConfigInfo
} from "@/api/payConfig/oilconfig";
import {addUser, getUserMobile, updateUser} from "@/api/staff/user/user";

export default {
  name: 'peizhi',
  data(){
    return{
      // 是否禁用
      isDis:false,
      // 商户配置信息
      merchantList:[],
      // 商品规则配置信息
      oilConfigList:[],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        num: 1,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      dialogFormVisible:false,
      value:false,
      value1:true,
      labelPosition: 'right',
    }
  },
  created() {
    this.getList();
  },
  methods:{
    // 删除支付配置信息
    deleteOilConfig(id){
      this.$confirm('确认删除此通道规则吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delOilConfig(id).then( response => {})
        this.$message({
          type: 'success',
          message: '规则数据删除成功'
        });
        this.getList();
      }).catch(() => {});
    },
    // 添加商户信息
    addOil(){
      this.dialogFormVisible = true;
      this.form = {
        name: '',
        region: '',
        date1: '',
        date2: '',
        num: 1,
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    },
    // 选择下拉商户信息
    changeMerch(val){
      this.merchantList.forEach(item => {
        if (item.id == val){
          this.form.mchntCd = item.mchntCd
        }
      })
    },
    // 提交按钮
    submitOilConfig(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id) {
            editOilConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改会员成功");
              this.getList();
              this.dialogFormVisible = false;
              this.isDis = false;
            });
          } else {
            addOilConfig(this.form).then( response => {
              if (response.data==0){
                this.$modal.msgError("已存在当前通道商户号的规则");
              }else {
                this.$modal.msgSuccess("新增会员成功");
                this.getList();
                this.dialogFormVisible = false;
                this.isDis = false;
              }
            })
          }
        }
      });
    },
    // 取消按钮
    clearOil(){
      this.dialogFormVisible = false;
      this.isDis = false;
    },
    // 修改支付配置信息
    editOilConfig(id){
      this.isDis = true;
      this.dialogFormVisible = true;
      oilConfigInfo(id).then( response => {
        this.form = response.data
      })
    },
    // 修改启用状态
    changeStatus(){
      if (this.value){
        this.value1 = false;
        isOpenOilConfig(1).then( response => {})
      }else {
        this.value1 = true;
        isOpenOilConfig(0).then( response => {})
      }
    },
    changeStatus1(){
      if (this.value1){
        this.value = false;
        isOpenOilConfig(0).then( response => {})
      }else {
        this.value = true;
        isOpenOilConfig(1).then( response => {})
      }
    },
    // 修改商户使用状态
    editStatus(data,isUse){
      this.$confirm('确定将当前支付配置切换为商户号('+data.mchntCd+')吗?切换后实时生效!', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        data.isUse = isUse
        editMerchant(data).then( response => {})
        this.$message({
          type: 'success',
          message: '支付通道切换成功,已实时切换为商户号('+data.mchntCd+')'
        });
        this.getList();
      }).catch(() => {});
    },
    // 获取商户列表信息
    getList(){
      listMerchant().then( response => {
        this.merchantList = response.data;
        this.merchantList.forEach(item => {
          if (item.isOpenRule == "1"){
            this.value1 = false;
            this.value = true;
          }
        })
      })
      listOilConfig().then( response => {
        this.oilConfigList = response.data;
      })
    },
    open() {
      this.$confirm('此操作会发布件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '发布成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发布'
        });
      });
    }
  }


}
</script>

<style scoped>
.box-centenr{
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.content-box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.box-card{
  width: 24%;
  margin-right: 15px;
  margin-bottom: 15px;
}
.cont-box{
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 20px 0px;
}
.hangbox{
  width: 100%;
  border-bottom: 1px solid #f4f5f6;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 15px 0px;
}
.jiaong{
  text-align: center;
  box-sizing: border-box;
  padding: 5px 20px;
  background: #F2F6FC;
  color: #409EFF;
  font-weight: bold;
  margin: 0px 5px;
  border-radius: 4px;

}
.mingc{
  margin: 0px 10px;
  color: #999;
}
.hsize{
  color: #999;
}


</style>