hlm_pl_mall_h5/pages/member/bank/BankForm.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<member-base :show="false"><view class="div container member-bank-form">
		<view class="div common-header-wrap">
			<view :style="'height:'+navHeight+'px'"></view>
			<view class="common-header-holder"></view>
			<view class="common-header-fixed">
			<title-header />
			<uni-nav-bar :title="getTitle" class="common-header" left-icon="back" @clickLeft="goBack">
			</uni-nav-bar>
		</view>
		</view>
    <view class="div main-content">
		<flex-line :show-border="true">
			<text class="span">账户类型</text>
			<view class="div" slot="right">
				<radio-group @change="radioChange">
				  <label v-for="(item, index) in memberbank_type_options" :key="index">
				    <radio :value="item.value" :checked="bank_info.memberbank_type==item.value" />
				    <text>{{item.label}}</text>
				  </label>
				</radio-group>
			</view>
		</flex-line>
		<flex-line class="field-line" :show-border="true"><text class="span field-name">开户名</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="bank_info.memberbank_truename" /></view></flex-line>
		<flex-line v-if="bank_info.memberbank_type=='bank'" class="field-line" :show-border="true"><text class="span field-name">开户行</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="bank_info.memberbank_name" /></view></flex-line>
		<flex-line class="field-line" :show-border="true"><text class="span field-name">账号</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="bank_info.memberbank_no" /></view></flex-line>
	<view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submit">{{getSumitTitle}}</view></view>
	</view>

	</view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import { getBankInfo, addBank, editBank } from '../../../api/memberBank'
import flexLine from '../../flexLine'
export default {
  components:{
  TitleHeader,
  MemberBase,
  flexLine,
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    isAddMode () {
      let mode = this.action
      // add: 添加地址，edit: 编辑地址
      if (mode === 'add') {
        return true
      } else {
        return false
      }
    },
    getTitle () {
      if (this.isAddMode) {
        return '新增提现账户'
      } else {
        return '修改提现账户'
      }
    },
    getSumitTitle () {
      return '保存'
    }
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  data(){
    return {
    navHeight: 0,
    action:'',
      memberbank_type_options: [
        {
          label: '银行',
          value: 'bank'
        },
        {
          label: '支付宝',
          value: 'alipay'
        }
      ],
      memberbank_id: 0,
      bank_info: {
        memberbank_type: 'bank',
        memberbank_truename: '',
        memberbank_name: '',
        memberbank_no: ''
      }
    }
  },
  onLoad: function (option) {
  this.action=option.action
    if (!this.isAddMode) {
      this.memberbank_id = option.memberbank_id
      getBankInfo(this.memberbank_id).then(res => {
        this.bank_info.memberbank_type = res.result.bank_info.memberbank_type
        this.bank_info.memberbank_truename = res.result.bank_info.memberbank_truename
        this.bank_info.memberbank_name = res.result.bank_info.memberbank_name
        this.bank_info.memberbank_no = res.result.bank_info.memberbank_no
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  methods: {
    radioChange(e){
      this.bank_info.memberbank_type=e.detail.value
    },
    goBack () {
      uni.navigateBack({delta:1})
    },
    submit () {
      if (this.isAddMode) {
        uni.showLoading({ title: '加载中' })
        addBank(this.bank_info).then(
          (response) => {
            uni.hideLoading()
            uni.navigateTo({url:'/pages/member/bank/BankList'})
          }, (error) => {
            uni.hideLoading()
            uni.showToast({icon:'none',title: error.message})
          })
      } else {
        uni.showLoading({ title: '加载中' })
        editBank(this.bank_info, this.memberbank_id).then(
          (response) => {
            uni.hideLoading()
            uni.navigateTo({url:'/pages/member/bank/BankList'})
          }, (error) => {
            uni.hideLoading()
            uni.showToast({icon:'none',title: error.message})
          })
      }
    }
  }
}
</script>
<style lang="scss">
	.member-bank-form{
		.mint-radiolist {
			display: flex;
			.mint-cell {
				flex: 1;
				.mint-radio-input:checked + .mint-radio-core {
					background-color: $primaryColor !important;
					border-color: $primaryColor !important;
				}
				&:after{display: none}
			}
		}
	}

</style>
<style lang="scss" scoped>
	.main-content{background: #fff;padding:0 $pageSpace}
	.right-arrow{transform: rotate(-90deg);color:#ddd;font-size:$fontSize;display: inline-block;}
	.input-wrap{position: relative;
		.i{position: absolute;right:0;top:0;line-height: 2.4rem;display: block;width:2rem;text-align: center;font-size:$h1}
	}

</style>