hlm_pl_mall_h5/pages/member/sellerjoinin/Step4.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="2"></step>
        <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.store_name" /></view></flex-line>
          <view class="div" @click="showPopup('showStoreGrade')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">店铺等级</text><text class="span" slot="right">{{storeJoinin.storegrade_name}}</text></flex-line></view>
          <view class="div" @click="showPopup('showStoreTime')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">开店时长</text><text class="span" slot="right">{{storeJoinin.joinin_year?(storeJoinin.joinin_year+'年'):''}}</text></flex-line></view>
          <view class="div" @click="showPopup('showStoreClass')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">店铺分类</text><text class="span" slot="right">{{storeJoinin.storeclass_name}}</text></flex-line></view>
          <view class="div" @click="showPopup('showGoodsClass')"><flex-line :is-link="true" :show-border="true"><text class="span line-name">经营类目</text></flex-line></view>
        </view>
      <view class="div common-btn ds-button-large mt-10"  @click="nextStep">提交</view>
      <view class="div">
        <uni-popup background-color="#fff" ref="showGoodsClass" type="right" >
          <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
          <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="hidePopup('showGoodsClass')">
            </uni-nav-bar>
          </view>
          </view>
          <view class="div common-popup-content" v-if="storeJoinin.store_class_names">
			  <scroll-view class="pb-30" style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
              <view class="div main-content" v-for="(goods_class,index) in storeJoinin.store_class_names" :key="index" @click="classIndex=index;showPopup('classVisible')">
              <flex-line :show-border="true"><text class="span line-name">{{goods_class?goods_class:'请选择分类'}}</text><text class="span" slot="right">{{(storeJoinin.store_class_commis_rates && storeJoinin.store_class_commis_rates[index])?(storeJoinin.store_class_commis_rates[index]+'%'):''}}</text></flex-line>
              </view>
			  </scroll-view>
			  <view class='common-add-btn-wrapper'><view class="div common-btn common-add-btn"  @click="addGoodsClass">新增</view></view>
          </view>
        </view>
        </uni-popup>
      </view>
      <view class="div">
        <uni-popup background-color="#fff" ref="classVisible" type="bottom">
          <view class="container">
            <view class="div toolbar">
              <text class="button toolbar-item cancel-item" @click="cancelClass">取消</text>
              <view class="div picker-header">选择经营分类</view>
              <text class="button toolbar-item confirm-item" @click="confirmClass">确定</text>
            </view>
      <picker-view class="popup-content" indicator-style="height:80rpx" @change="onClassChange" :value="gcPicker">
        <picker-view-column v-for="(item,index) in buildItems" :key="index">
          <view class="popup-item-wrapper" v-for="(v,i) in item.values" :key="i"><text class="popup-item">{{v.value}}</text></view>
        </picker-view-column>
      </picker-view>
          </view>
        </uni-popup>
        <uni-popup background-color="#fff" ref="showStoreClass" type="bottom">
          <view class="container">
            <view class="div toolbar">
              <text class="button toolbar-item cancel-item" @click="cancelStoreClass">取消</text>
              <view class="div picker-header">选择店铺分类</view>
              <text class="button toolbar-item confirm-item" @click="confirmStoreClass">确定</text>
            </view>
      <picker-view class="popup-content" indicator-style="height:80rpx" @change="onStoreClassChange" :value="scPicker">
        <picker-view-column v-for="(item,index) in store_class_options" :key="index">
          <view class="popup-item-wrapper" v-for="(v,i) in item.values" :key="i"><text class="popup-item">{{v.storeclass_name}}</text></view>
        </picker-view-column>
      </picker-view>
          </view>
        </uni-popup>
        <uni-popup background-color="#fff" ref="showStoreGrade" type="bottom">
          <view class="container">
            <view class="div toolbar">
              <text class="button toolbar-item cancel-item" @click="cancelStoreGrade">取消</text>
              <view class="div picker-header">选择店铺等级</view>
              <text class="button toolbar-item confirm-item" @click="confirmStoreGrade">确定</text>
            </view>
      <picker-view class="popup-content" indicator-style="height:80rpx" @change="onStoreGradeChange" :value="sgPicker">
        <picker-view-column v-for="(item,index) in store_grade_options" :key="index">
          <view class="popup-item-wrapper" v-for="(v,i) in item.values" :key="i"><text class="popup-item">{{v.storegrade_name}}</text></view>
        </picker-view-column>
      </picker-view>
          </view>
        </uni-popup>
        <uni-popup background-color="#fff" ref="showStoreTime" type="bottom">
          <view class="container">
            <view class="div toolbar">
              <text class="button toolbar-item cancel-item" @click="cancelStoreTime">取消</text>
              <view class="div picker-header">选择开店时长</view>
              <text class="button toolbar-item confirm-item" @click="confirmStoreTime">确定</text>
            </view>
      <picker-view class="popup-content" indicator-style="height:80rpx" @change="onStoreTimeChange" :value="stPicker">
        <picker-view-column v-for="(item,index) in store_time_options" :key="index">
          <view class="popup-item-wrapper" v-for="(v,i) in item.values" :key="i"><text class="popup-item">{{v.time_text}}</text></view>
        </picker-view-column>
      </picker-view>
          </view>
        </uni-popup>
      </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 Step from '../../Step'
import { getStoreClass, getStoreGrade, getStoreJoinin, saveStoreJoinin4 } from '../../../api/seller'
import flexLine from '../../flexLine'
export default {
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    Step
  },
  data(){
    return {
      navHeight: 0,
      stPicker:[0],
      sgPicker:[0],
      scPicker:[0],
      gcPicker:[0,0,0],
      screenWidth:0,
      options: [{ title: '公司资质' }, { title: '财务资质' }, { title: '店铺信息' }, { title: '合同签订' }],
      store_class_options: [],
      store_grade_options: [],
      goods_class: {},
      store_time_options: [{
        flex: 1,
        values: [{ time_number: 1, time_text: '1年' }, { time_number: 2, time_text: '2年' }],
        textAlign: 'center'
      }],
      classIndex: 0
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      storeJoinin1: state => state.member.storeJoinin1,
      storeJoinin0: state => state.member.storeJoinin0,
      storeJoininType: state => state.member.storeJoininType,
      items: state => state.goodsclass.items,
      config: state => state.config.config
    }),
    storeJoinin:function(){
      if(this.storeJoininType==1){
        return this.storeJoinin1
      }else{
        return this.storeJoinin0
      }
    },
    buildItems: function () {
      if (!this.items || !this.items[0]) {
        return []
      }
      let items = new Array()
      this.getDefaultItems(this.items, items)
      return items
    }
  },
  created: function () {

    if (!this.storeJoinin.store_class_names || !this.storeJoinin.store_class_names.length) {
      this.storeJoinin.store_class_names = ['']
    }
    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.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})
            }
          )
        // } else {
          this.isSame = !!this.storeJoinin.is_settlement_account
          if (!this.storeJoinin.store_class_names || !this.storeJoinin.store_class_names.length) {
            this.storeJoinin.store_class_names = ['']
          }
        // }
      }
    }).catch(error => {
      uni.showToast({icon:'none',title: error.message})
    })
    this.fetchGoodsclassList()
    getStoreClass().then(res => {
      var store_class = res.result.store_class
      this.store_class_options = [{
        flex: 1,
        values: store_class,
        textAlign: 'center'

      }]
    }).catch(error => {
      uni.showToast({icon:'none',title: error.message})
    })
    getStoreGrade().then(res => {
      var store_grade = res.result.storegrade_list
      this.store_grade_options = [{
        flex: 1,
        values: store_grade,
        textAlign: 'center'

      }]
    }).catch(error => {
      uni.showToast({icon:'none',title: error.message})
    })
  },

  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchConfig: 'fetchConfig',
      fetchGoodsclassList: 'fetchGoodsclassList'
    }),
    ...mapMutations({
      sellerJoininSave: 'sellerJoininSave'
    }),
    nextStep () {
      if(!this.config){
        uni.showToast({icon:'none',title: '请稍等'})
        return
      }

      saveStoreJoinin4(this.storeJoinin).then(res => {
        this.sellerJoininSave({ storeJoinin: this.storeJoinin })
        uni.redirectTo({url:'/pages/member/sellerjoinin/Step5'})
      }).catch(error => {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    addGoodsClass () {
      if (!this.storeJoinin.store_class_names) {
        this.storeJoinin.store_class_names = []
      }
      this.storeJoinin.store_class_names.push('')
      this.$forceUpdate()
    },
    getDefaultItems (_item, defaultItems) {
      defaultItems.push({
        flex: 1,
        values: _item,
        textAlign: 'center'

      })
      defaultItems.push({
        flex: 1,
        values: _item[0].children,
        textAlign: 'center'

      })
      defaultItems.push({
        flex: 1,
        values: (_item[0].children && _item[0].children.length) ? _item[0].children[0].children : [],
        textAlign: 'center'

      })
    },

    cancelClass () {
      this.hidePopup('classVisible')
    },
    confirmClass () {
      let values = []
        for(var i in this.gcPicker){
          values[i]=this.buildItems[i]['values'][this.gcPicker[i]]
          if(!values[i]){
            values[i]={
              id:0,
              value:''
            }
          }
        }
      if (!this.storeJoinin.store_class_ids) {
        this.storeJoinin.store_class_ids = []
      }
      if (!this.storeJoinin.store_class_commis_rates) {
        this.storeJoinin.store_class_commis_rates = []
      }
      var store_class_names = ''
      var store_class_ids = ''
      var index=0
      for (var i in values) {
        if(values[i].id){
          index=i
          if (!store_class_names) {
            store_class_names = values[i].value
            store_class_ids = values[i].id
          } else {
            store_class_names += ',' + values[i].value
            store_class_ids += ',' + values[i].id
          }
        }
      }
      this.storeJoinin.store_class_names[this.classIndex] = store_class_names
      this.storeJoinin.store_class_ids[this.classIndex] = store_class_ids
      this.storeJoinin.store_class_commis_rates[this.classIndex] = values[index].commis_rate
      this.hidePopup('classVisible')
      this.$forceUpdate()
    },
    onStoreClassChange(e){
      this.scPicker=e.detail.value
    },
    onStoreGradeChange(e){
      this.sgPicker=e.detail.value
    },
    onStoreTimeChange(e){
      this.stPicker=e.detail.value
    },
    onClassChange (e) {
        let value=e.detail.value
        let gcPicker=this.gcPicker
        for(var i in value){
          gcPicker[i]=value[i]
          i=parseInt(i)
          if(i<(value.length-1)){
            if(!this.buildItems[i]['values'].length || !this.buildItems[i]['values'][value[i]]['children'] || !this.buildItems[i]['values'][value[i]]['children'].length){
              this.buildItems[i+1]['values']=[]
              gcPicker[i+1]=0
            }else if(!this.buildItems[i+1]['values'].length || this.buildItems[i]['values'][value[i]]['children'][0]['id']!=this.buildItems[i+1]['values'][0]['id']){
              this.buildItems[i+1]['values']=this.buildItems[i]['values'][value[i]]['children']
              gcPicker[i+1]=0
            }
          }
        }
        this.gcPicker=gcPicker
        this.$forceUpdate()
    },

    cancelStoreClass () {
      this.hidePopup('showStoreClass')
    },
    confirmStoreClass () {
      let values = this.store_class_options[0]['values'][this.scPicker[0]]
      this.storeJoinin.storeclass_name = values.storeclass_name
      this.storeJoinin.storeclass_id = values.storeclass_id

      this.hidePopup('showStoreClass')
      this.$forceUpdate()
    },
    cancelStoreGrade () {
      this.hidePopup('showStoreGrade')
    },
    confirmStoreGrade () {
      let values = this.store_grade_options[0]['values'][this.sgPicker[0]]
      this.storeJoinin.storegrade_name = values.storegrade_name
      this.storeJoinin.storegrade_id = values.storegrade_id

      this.hidePopup('showStoreGrade')
      this.$forceUpdate()
    },
    cancelStoreTime () {
      this.hidePopup('showStoreTime')
    },
    confirmStoreTime () {
      let values = this.store_time_options[0]['values'][this.stPicker[0]]
      this.storeJoinin.joinin_year = values.time_number

      this.hidePopup('showStoreTime')
      this.$forceUpdate()
    },
  }
}
</script>
<style  lang="scss" scoped>
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
  .main-content{background: #fff;padding:0 $pageSpace}
  .common-popup-content{padding:0 $pageSpace;box-sizing:border-box}
  .container {
    background: #fff;
  }
  .label {
    padding: .5rem;
    font-size:$h2;
    background: #eee;
  }
  .toolbar {
        height: 2rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #f0f2f5;
        .toolbar-item {
            font-size:$fontSize;
            border: none;
            border-radius: 0;
            background-color: #f0f2f5;
        }
        .cancel-item {
            margin-left: 0.5rem;
            color: #4e545d;
        }
        .confirm-item {
            margin-right: 0.5rem;
            color: red;
        }
        .picker-header {
            color: #4e545d;
            line-height: 2rem;
            font-size:$h2;
        }
    }
	.popup-content {
		padding: 0 40rpx;
		height: 300rpx;
	}
  .popup-item-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
  }
	.popup-item {
		font-size: 30rpx;
    line-height:80rpx;
		text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}
</style>