hlm_pl_mall_h5/pages/member/sellerjoinin/Step3.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view class="div">
      <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="店铺入驻" class="common-header" left-icon="back" @clickLeft="goBack()">
        </uni-nav-bar>
      </view>
      </view>
        <step :options="options" :active="1"></step>

        <view class="div" v-if="storeJoinin.store_type==0">
            <view class="div">
                <view class="div label">开户银行信息</view>
                <view class="div main-content">
                    <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="storeJoinin.bank_account_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="storeJoinin.bank_account_number" /></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="storeJoinin.bank_name" /></view></flex-line>
                    <view class="div" @click="onRegion('bank_address')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">银行所在地</text><text class="span" slot="right">{{storeJoinin.bank_address}}</text></flex-line></view>
                    <flex-line :show-border="true"><text class="span line-name">此账号为结算账号</text><view class="div" slot="right"><switch @change="switchChange" :checked="!!isSame"></switch></view></flex-line>
                </view>
            </view>
            <view class="div" v-if="!isSame">
                <view class="div label">结算账号信息</view>
                <view class="div main-content">
                    <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="storeJoinin.settlement_bank_account_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="storeJoinin.settlement_bank_account_number" /></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="storeJoinin.settlement_bank_name" /></view></flex-line>
                    <view class="div" @click="onRegion('settlement_bank_address')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">银行所在地</text><text class="span" slot="right">{{storeJoinin.settlement_bank_address}}</text></flex-line></view>
                </view>
            </view>
        </view>
        <view v-else class="div main-content">
            <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="storeJoinin.settlement_bank_account_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="storeJoinin.settlement_bank_account_number" /></view></flex-line>
        </view>
        <view class="div common-btn ds-button-large mt-10"  @click="nextStep">下一步</view>
        <view class="div">
            <region-picker ref="picker" @onConfirm="onPickerConfirm"></region-picker>
        </view>
    </view></member-base>
</template>
<script>
import {getFontSize} from '@/util/common'

import TitleHeader from '../../TitleHeader'

import MemberBase from '../MemberBase'
import { mapState, mapMutations, mapActions } from 'vuex'
import RegionPicker from '../../RegionPicker'
import Step from '../../Step'
import { getStoreJoinin, saveStoreJoinin3 } from '../../../api/seller'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    Step,
    RegionPicker
  },
  data(){
    return {
      navHeight: 0,
      isSame: false,
      regionName: '',
      options: [{ title: '公司资质' }, { title: '财务资质' }, { title: '店铺信息' }, { title: '合同签订' }]
    }
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      storeJoinin1: state => state.member.storeJoinin1,
      storeJoinin0: state => state.member.storeJoinin0,
      storeJoininType: state => state.member.storeJoininType,
      config: state => state.config.config
    }),
    storeJoinin:function(){
      if(this.storeJoininType==1){
        return this.storeJoinin1
      }else{
        return this.storeJoinin0
      }
    },
  },
  created: function () {
    this.isSame = !!this.storeJoinin.is_settlement_account
    getStoreJoinin().then(res => {
      var store_joinin = res.result.store_joinin
      if (store_joinin) {
        if (store_joinin.joinin_state == 11 || store_joinin.joinin_state == 20 || store_joinin.joinin_state == 31) {
          uni.redirectTo({url:'/pages/member/sellerjoinin/Step5'})
          return
        }
        if (store_joinin.joinin_state == 40) {
            uni.showToast({icon:'none',title: '您的店铺已开通'})
          return
        }
        // if (!this.storeJoinin) {
          this.isSame = !!this.storeJoinin.is_settlement_account
          this.sellerJoininSave({ storeJoinin: store_joinin })
          this.fetchConfig({}).then(
            response => {
              if(this.config.store_joinin_open==2 || this.config.store_joinin_open==3){
                if(this.config.store_joinin_open==3){
                  this.storeJoinin['store_type']=1
                }
                if(this.config.store_joinin_open==2){
                  this.storeJoinin['store_type']=0
                }
                this.$forceUpdate()
              }
            },
            error => {
              uni.showToast({icon:'none',title: error.message})
            }
          )
        // }
      }
    }).catch(error => {
      uni.showToast({icon:'none',title: error.message})
    })
  },

  methods:{
    switchChange(e){
      this.isSame=e.detail.value
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchConfig: 'fetchConfig',
    }),
    ...mapMutations({
      memberPoint: 'memberPoint',
      sellerJoininSave: 'sellerJoininSave'
    }),
    nextStep () {
      this.storeJoinin.is_settlement_account = this.isSame
      saveStoreJoinin3(this.storeJoinin).then(res => {
        this.sellerJoininSave({ storeJoinin: this.storeJoinin })
        uni.redirectTo({url:'/pages/member/sellerjoinin/Step4'})
      }).catch(error => {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    onPickerConfirm (values) {
      if (this.regionName == 'bank_address') {
        this.storeJoinin.bank_address = this.getRegionStr(values)
      }
      if (this.regionName == 'settlement_bank_address') {
        this.storeJoinin.settlement_bank_address = this.getRegionStr(values)
      }
      this.$forceUpdate()
    },
    onRegion (name) {
      this.regionName = name
      this.$refs.picker.show()
    },
    getRegionStr (values) {
      let title = ''
      for (let i = 0; i < values.length; i++) {
        const element = values[i]
        if (i !== 0) {
          title = title + ' ' + element.area_name
        } else {
          title = title + element.area_name
        }
      }
      return title
    }
  }
}
</script>
<style  lang="scss" scoped>
    .main-content{background: #fff;padding:0 $pageSpace}
    .container {
        background: #fff;
    }
    .label {
        padding: .5rem;
        font-size:$h2;
        background: #eee;
    }
</style>