nsgk_mobile/src/views/onlineHome/bankAgriculture/collectionAccount/collectionDetail.vue

<template>
  <div class="app-container">
    <van-nav-bar
      left-arrow
      fixed
      placeholder
      @click-left="$router.back(-1)"
    >
      <template #title>
        <p style="font-weight: bold;">查看支付收款账户</p>
      </template>
    </van-nav-bar>
    <p class="main_title">基础信息</p>
    <div class="main_box">
      <van-field readonly label="收款方" v-model="form.payee" input-align="right" label-width="auto"/>
      <van-field readonly label="收款账户" v-model="form.payeeAccount" input-align="right" label-width="auto"/>
      <van-field readonly label="所属银行" v-model="bankType" input-align="right" label-width="auto" />
      <van-field readonly label="开户银行" v-model="form.bankDeposit" input-align="right" label-width="auto"/>
    </div>

    <div class="main_box" style="margin-top: 10px;">
      <van-field readonly label="备注" v-model="form.remark" type="textarea" input-align="right" rows="3" label-width="auto"/>
    </div>

    <div class="main_box" style="margin-top: 10px;">
      <van-cell title="账户类型">
        <template #right-icon>
          {{form.accountType == '1' ? '公户' : '私户' }}
        </template>
      </van-cell>
      <van-field readonly label="收款人类型" v-model="payeeType" input-align="right" label-width="auto" />
      <van-cell title="数据状态">
        <template #right-icon>
          {{form.accountType == '0' ? '正常' : '停用' }}
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
  import { getPayee , updatePayee } from "@/api/onlineHome/bankAgriculture/collectionAccount";
  export default {
    name: "collectionModify",
    data() {
      return {
        showBankType:false,
        showPayeeType:false,
        form:{},

        bankType:'',
        payeeType:'',

        bankTypeOptions:[],
        payeeTypeOptions:[],

      };
    },
    created() {
      this.getDictionaries();
    },
    methods: {
      getDictionaries(){
        getPayee(this.$route.query.id).then((response) => {
          this.houseGetDicts("bank_type").then((res) => {
            for(var i = 0 ; i < res.data.length ; i++){
              this.bankTypeOptions.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
            }
            this.bankType = this.selectDictLabel(res.data, response.data.bankType);
          });
          this.houseGetDicts("payee_type").then((res) => {
            for(var i = 0 ; i < res.data.length ; i++){
              this.payeeTypeOptions.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
            }
            this.payeeType = this.selectDictLabel(res.data, response.data.payeeType);
          });
          this.form = response.data;
        });

      },
      onConfirmBankType(data){
        this.bankType = data.text;
        this.form.bankType = data.value;
        this.showBankType = false;
      },
      onConfirmPayeeType(data){
        this.payeeType = data.text;
        this.form.payeeType = data.value;
        this.showPayeeType = false;
      },
      goAdd(){
        console.log(this.form)
        updatePayee(this.form).then(response => {
          this.$toast.success('修改成功');
          setTimeout(function(){
            history.go(-1)
          },2000)
        });
      },
      goBack(){
        window.history.go(-1)
      }
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    margin-top: 0;
    position: relative;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
  }
  .submitButton{
    width: 80%;
    margin: 0 auto;
    background-color: #1D6FE9;
  }

  .addFamily{
    position: absolute;
    top: -2px;
    right: 0;
    border-radius: 50%;
  }
</style>