提款更改

dcc

2024-05-16 1aa2152fa57f80a7053376de76ab770e66380ff7

 src/page/bankCard/index.vue

@@ -1,62 +1,75 @@
<template>
   <div class="bank_card_page">
      <div class="content">
         <div class="top_back">
            <div class="left_back_icon" @click="$router.go(-1)">
               <img src="../../assets/img/zuojiantou.png" alt />
            </div>
         </div>
         <div class="titles">
            <span>{{ addBank ? $t('hj211') : $t('hj212') }}</span>
         </div>
      <div class="bank_name" v-if="addBank==false&&actualName">
        <div class="lefts">
          <span>{{$t('hj195')}}</span>
        </div>
        <div class="rights">
          <input type="text" :placeholder="$t('hj207')" v-model="actualName" :disabled="!addBank" />
  <div class="bank_card_page">
    <div class="content">
      <div class="top_back">
        <div class="left_back_icon" @click="$router.go(-1)">
          <img src="../../assets/img/zuojiantou.png" alt/>
        </div>
      </div>
         <div class="bank_name" v-if="addBank==false&&bankName">
            <div class="lefts">
               <span>{{ $t('hj213') }}</span>
            </div>
            <div class="rights">
               <input type="text" :placeholder="$t('hj306')" v-model="bankName" :disabled="!addBank" />
            </div>
         </div>
         <div class="bank_name" v-if="addBank==false&&bankNo">
            <div class="lefts">
               <span>{{ $t('hj215') }}</span>
            </div>
            <div class="rights">
               <input type="text" :placeholder="$t('hj307')" v-model="bankNo" :disabled="!addBank" />
            </div>
         </div>
         <div class="bank_name" v-if="addBank==false&&banif">
            <div class="lefts">
               <span>{{ $t('hj303') }}</span>
            </div>
            <div class="rights">
               <input type="text" :placeholder="$t('hj308')" v-model="banif" :disabled="!addBank" />
            </div>
         </div>
      <!--    <div class="bank_name" v-if="addBank==false&&bankun">
            <div class="lefts">
               <span>{{ $t('hj304') }}</span>
            </div>
            <div class="rights">
               <input type="text" :placeholder="$t('hj309')" v-model="bankun" :disabled="!addBank" />
            </div>
         </div> -->
      <div class="bank_name" v-if="addBank==true">
      <div class="titles">
        <span>{{ addBank ? $t('hj211') : $t('hj212') }}</span>
      </div>
      <!--      <div class="bank_name" v-if="addBank==false&&actualName">-->
      <!--        <div class="lefts">-->
      <!--          <span>{{$t('hj195')}}</span>-->
      <!--        </div>-->
      <!--        <div class="rights">-->
      <!--          <input type="text" :placeholder="$t('hj207')" v-model="actualName" :disabled="!addBank" />-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="bank_name" v-if="addBank==false&&bankName">
        <div class="lefts">
          <span>{{ $t('hj195') }}</span>
          <span>{{ $t('hj213') }}</span>
        </div>
        <div class="rights">
          <input type="text" :placeholder="$t('hj306')" v-model="bankName" :disabled="!addBank"/>
        </div>
      </div>
      <div class="bank_name" v-if="addBank==false&&bankNo">
        <div class="lefts">
          <span>{{ $t('hj215') }}</span>
        </div>
        <div class="rights">
          <input type="text" :placeholder="$t('hj307')" v-model="bankNo" :disabled="!addBank"/>
        </div>
      </div>
      <div class="bank_name" v-if="addBank==false&&banif">
        <div class="lefts">
          <span>{{ $t('hj303') }}</span>
        </div>
        <div class="rights">
          <input type="text" :placeholder="$t('hj308')" v-model="banif" :disabled="!addBank"/>
        </div>
      </div>
      <!--    <div class="bank_name" v-if="addBank==false&&bankun">
          <div class="lefts">
            <span>{{ $t('hj304') }}</span>
          </div>
          <div class="rights">
            <input type="text" :placeholder="$t('hj309')" v-model="bankun" :disabled="!addBank" />
          </div>
        </div> -->

<!--      <div class="bank_name" v-if="addBank==true">-->
<!--        <div class="lefts">-->
<!--          <span>{{ $t('hj195') }}</span>-->
<!--        </div>-->

<!--        <div class="rights">-->
<!--          <input type="text" :placeholder="$t('hj207')" v-model="actualName" :disabled="!addBank"/>-->
<!--        </div>-->
<!--        &lt;!&ndash; <input type="text" :placeholder="$t('hj306')" v-model="bankName" :disabled="!addBank" /> &ndash;&gt;-->
<!--        &lt;!&ndash; <picker @change="bindPickerChange" :value="index" :range="array">-->
<!--           <view >{{array[index].name}}</view>-->
<!--         </picker> &ndash;&gt;-->

<!--      </div>-->
      <div class="bank_name" @click.stop="gotodaka" v-if="addBank==true">
        <div class="lefts">
          <span>{{ $t('hj213') }}</span>
        </div>

        <div class="rights">
          <input type="text" :placeholder="$t('hj207')" v-model="actualName" :disabled="!addBank" />
        </div>
        <div class="rights" style="justify-content: none;">{{ name }}
          <!-- <input type="text" :placeholder="$t('hj306')" v-model="bankName" :disabled="!addBank" /> -->
          <!-- <picker @change="bindPickerChange" :value="index" :range="array">
             <view >{{array[index].name}}</view>
@@ -64,257 +77,247 @@

        </div>
      </div>

         <div class="bank_name" @click.stop="gotodaka" v-if="addBank==true">
            <div class="lefts">
               <span>{{ $t('hj213') }}</span>
            </div>

            <div class="rights" style="justify-content: none;">{{name}}
          <!-- <input type="text" :placeholder="$t('hj306')" v-model="bankName" :disabled="!addBank" /> -->
       <!-- <picker @change="bindPickerChange" :value="index" :range="array">
           <view >{{array[index].name}}</view>
        </picker> -->

      <div class="bank_name" v-if="addBank==true">
        <div class="lefts">
          <span>{{ $t('hj215') }}</span>
        </div>
         </div>
         <div class="bank_name" v-if="addBank==true">
            <div class="lefts">
               <span>{{ $t('hj215') }}</span>
            </div>
            <div class="rights">
               <input type="text" :placeholder="$t('hj307')" v-model="bankNo" :disabled="!addBank" />
            </div>
         </div>
         <div class="bank_name" v-if="addBank==true">
            <div class="lefts">
               <span>{{ $t('hj303') }}</span>
            </div>
            <div class="rights">
               <input type="text" :placeholder="$t('hj308')" v-model="banif" :disabled="!addBank" />
            </div>
         </div>
         <!-- <div class="bank_name" v-if="addBank==false">
            <div class="lefts">
               <span>{{ $t('hj304') }}123</span>
            </div>
            <div class="rights">
               <input type="text" :placeholder="$t('hj309')" v-model="bankun" :disabled="!addBank" />
            </div>
         </div> -->
         <div class="bank_name bind" @click="toSure" v-if="addBank">
            <span>{{ $t('hj216') }}</span>
         </div>
         <div class="bank_hck"></div>
         <div class="bank_code"></div>
         <van-popup v-model="showPicker" round position="bottom">
             <van-picker :confirm-button-text="$t('hj161')" :cancel-button-text="$t('hj106')" value-key="name" :columns="array" @cancel="quxiao" @confirm="onConfirm" show-toolbar />
         </van-popup>
      </div>
   </div>
        <div class="rights">
          <input type="text" :placeholder="$t('hj307')" v-model="bankNo" :disabled="!addBank"/>
        </div>
      </div>
      <div class="bank_name" v-if="addBank==true">
        <div class="lefts">
          <span>{{ $t('hj303') }}</span>
        </div>
        <div class="rights">
          <input type="text" :placeholder="$t('hj308')" v-model="banif" :disabled="!addBank"/>
        </div>
      </div>
      <!-- <div class="bank_name" v-if="addBank==false">
        <div class="lefts">
          <span>{{ $t('hj304') }}123</span>
        </div>
        <div class="rights">
          <input type="text" :placeholder="$t('hj309')" v-model="bankun" :disabled="!addBank" />
        </div>
      </div> -->
      <div class="bank_name bind" @click="toSure" v-if="addBank">
        <span>{{ $t('hj216') }}</span>
      </div>
      <div class="bank_hck"></div>
      <div class="bank_code"></div>
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker :confirm-button-text="$t('hj161')" :cancel-button-text="$t('hj106')" value-key="name"
                    :columns="array"
                    @cancel="quxiao" @confirm="onConfirm" show-toolbar/>
      </van-popup>
    </div>
  </div>
</template>

<script>
   import * as api from "@/axios/api";
   import {
      Toast
   } from "mint-ui";
   import {
      isNull,
      bankNoReg,
      isName
   } from '@/utils/utils'
import * as api from "@/axios/api";
import {
  Toast
} from "mint-ui";
import {
  isNull,
  bankNoReg,
  isName
} from '@/utils/utils'

   export default {
      name: "bankCard",
      data() {
         return {
            showPicker: false,
        actualName: '', //真实姓名
            bankName: "", //银行名称,
            bankAddress: "", //需要精确到分行或者支行,
            bankNo: "", // 印象卡号
            banif: "",
            bankun: "",
            array: [],
            index:0,
            addBank: false,
            id:'',
            code:'',
            name:'',
         };
      },
      created() {
         this.getCardDetail();
         this.getbanklist()
      },
      methods: {
         quxiao(){
            this.showPicker = false
         },
         gotodaka(){
            this.showPicker = true
         },
         onConfirm(item) {
             console.log(item)
            this.id =  item.id
            this.code =  item.code
            this.name =  item.name
             this.showPicker = !this.showPicker
             // this.lever = item.value
         },
         async getbanklist() {
            // 获取银行名称
            let data = await api.getbank()
            if (data.status === 0) {
               console.log(data);
               this.array = data.data
               console.log(this.array);
            } else {}
         },
         async toSure() {
            // 添加银行卡
            if (isNull(this.bankNo)) {
               Toast(this.$t("hj217"));
            } else if (isNull(this.name)) {
               Toast(this.$t("hj218"));
            }else if (isNull(this.banif)) {
               Toast(this.$t("hj218a"));
            }else if(isNull(this.actualName)){
          Toast(this.$t("hj207"));
export default {
  name: "bankCard",
  data() {
    return {
      showPicker: false,
      actualName: '', //真实姓名
      bankName: "", //银行名称,
      bankAddress: "", //需要精确到分行或者支行,
      bankNo: "", // 印象卡号
      banif: "",
      bankun: "",
      array: [],
      index: 0,
      addBank: false,
      id: '',
      code: '',
      name: '',
    };
  },
  created() {
    this.getCardDetail();
    this.getbanklist()
  },
  methods: {
    quxiao() {
      this.showPicker = false
    },
    gotodaka() {
      this.showPicker = true
    },
    onConfirm(item) {
      console.log(item)
      this.id = item.id
      this.code = item.code
      this.name = item.name
      this.showPicker = !this.showPicker
      // this.lever = item.value
    },
    async getbanklist() {
      // 获取银行名称
      let data = await api.getbank()
      if (data.status === 0) {
        console.log(data);
        this.array = data.data
        console.log(this.array);
      } else {
      }
    },
    async toSure() {
      // 添加银行卡
      if (isNull(this.bankNo)) {
        Toast(this.$t("hj217"));
      } else if (isNull(this.name)) {
        Toast(this.$t("hj218"));
      } else if (isNull(this.banif)) {
        Toast(this.$t("hj218a"));
      }
      // else if (isNull(this.actualName)) {
      //   Toast(this.$t("hj207"));
      // }
        // else if (isNull(this.bankAddress) ) {
        //   Toast(this.$t("hj219"));
      // }
      else {
        let opts = {
          bankName: this.name,
          // actualName: this.actualName,
          bankNo: this.bankNo,
          bankAddress: this.banif,
          bankImg: this.code,

        };
        let data = await api.addBankCard(opts);
        if (data.status === 0) {
          Toast(this.$t("hj220"));
          this.$router.push("/newUser");
        } else {
          Toast(data.msg);
        }
            // else if (isNull(this.bankAddress) ) {
            //   Toast(this.$t("hj219"));
            // }
            else {
               let opts = {
                  bankName: this.name,
            actualName: this.actualName,
                  bankNo: this.bankNo,
                  bankAddress: this.banif,
                  bankImg: this.code,

               };
               let data = await api.addBankCard(opts);
               if (data.status === 0) {
                  Toast(this.$t("hj220"));
                  this.$router.push("/newUser");
               } else {
                  Toast(data.msg);
               }
            }
         },
         async getCardDetail() {
            // 获取银行卡信息
            let data = await api.getBankCard()
            if (data.status === 0) {
               const {
                  bankAddress,
                  bankName,
            actualName,
                  bankNo,
                  bankImg
               } = data.data;
               this.banif = bankAddress;
               this.bankName = bankName;
               this.actualName = actualName;
               this.bankun = bankImg;
               this.bankNo = bankNo;
               this.addBank = false;
            } else {
               this.addBank = true;
            }
         },
      }
   };
      }
    },
    async getCardDetail() {
      // 获取银行卡信息
      let data = await api.getBankCard()
      if (data.status === 0) {
        const {
          bankAddress,
          bankName,
          // actualName,
          bankNo,
          bankImg
        } = data.data;
        this.banif = bankAddress;
        this.bankName = bankName;
        // this.actualName = actualName;
        this.bankun = bankImg;
        this.bankNo = bankNo;
        this.addBank = false;
      } else {
        this.addBank = true;
      }
    },
  }
};
</script>

<style scoped lang="less">
   .bank_card_page {
      width: 100%;
      height: 100%;
      background: #fff;
.bank_card_page {
  width: 100%;
  height: 100%;
  background: #fff;

      .content {
         width: 100%;
         height: 100%;
         padding: 0 0.6rem;
  .content {
    width: 100%;
    height: 100%;
    padding: 0 0.6rem;

         .top_back {
            width: 100%;
            height: 2rem;
    .top_back {
      width: 100%;
      height: 2rem;

            >div {
               width: 10%;
               height: 100%;
               display: flex;
               align-items: center;
            }
      > div {
        width: 10%;
        height: 100%;
        display: flex;
        align-items: center;
      }

            img {
               width: 0.6rem;
               height: 0.6rem;
            }
         }
      img {
        width: 0.6rem;
        height: 0.6rem;
      }
    }

         .titles {
            width: 100%;
            height: 1.5rem;
            font-size: 0.641rem;
            margin-top: 1rem;
    .titles {
      width: 100%;
      height: 1.5rem;
      font-size: 0.641rem;
      margin-top: 1rem;

            span {
               font-weight: 600;
            }
         }
      }
      span {
        font-weight: 600;
      }
    }
  }

      .bank_name {
         width: 100%;
         height: 1.5rem;
         display: flex;
         padding: 0 0.2rem;
         background: rgb(247, 247, 247);
         border-radius: 0.2rem;
         margin-top: 0.3rem;
  .bank_name {
    width: 100%;
    height: 1.5rem;
    display: flex;
    padding: 0 0.2rem;
    background: rgb(247, 247, 247);
    border-radius: 0.2rem;
    margin-top: 0.3rem;

         .lefts {
            width: 38%;
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 0.3846rem;
    .lefts {
      width: 38%;
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 0.3846rem;

            span {
               font-weight: 600;
            }
         }
      span {
        font-weight: 600;
      }
    }

         .rights {
            width: 75%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
    .rights {
      width: 75%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

            input {
               width: 100%;
               height: 100%;
            }
         }
      }
   }
      input {
        width: 100%;
        height: 100%;
      }
    }
  }
}

   .bank_name.bind {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1B79F5;
      font-size: 0.4103rem;
      color: #fff;
.bank_name.bind {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1B79F5;
  font-size: 0.4103rem;
  color: #fff;

      span {
         font-weight: 600;
      }
   }
  span {
    font-weight: 600;
  }
}
</style>