hlm_pl_mall_store/pages/seller/goods/GoodsForm1.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
<seller-base :show="false">
<view class="div container">
    <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="0"></step>
    <view class="div main-content">
    <view class="div" @click="showPopup('classVisible')">
        <flex-line class="menu-item" :is-link="true" :show-border="true"><text class="span line-name">商品分类</text><text class="span" slot="right">{{goods_class.gc_name}}</text></flex-line>
    </view>
    <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="nextStep">下一步</view></view>
    </view>
    <!--服务分类-->
    <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>
</view>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'

import SellerBase from '../SellerBase'

import { mapState, mapActions } from 'vuex'
import Step from '../../Step'
import { getGoodsClass } from '../../../api/sellerGoods'
import flexLine from '../../flexLine'
export default {
  data(){
    return {
    navHeight: 0,
    gcPicker:[0,0,0],
        controller:'Sellergoodsonline',
      options: [{ title: '选择商品分类' }, { title: '填写商品详情' }, { title: '上传商品图片' }],
      classVisible: false,
      goods_class: {},
	  commonid:0,
      store_bind_class: false
    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      items: state => state.goodsclass.items
    }),
    buildItems: function () {
      if (!this.items || !this.store_bind_class || !this.items[0]) {
        return []
      }
      let items = new Array()

      if (this.store_bind_class.bind_all) {
        this.getDefaultItems(this.items, items)
      } else {
        this.getDefaultItems(this.store_bind_class.goods_class, items)
      }
      return items
    }
  },
  onLoad: function (option) {
      var action=option.action
	  this.commonid = option.commonid?option.commonid:''
      if(action=='add'){
          this.controller='Sellergoodsadd'
      }
    getGoodsClass(this.controller).then(res => {
      this.store_bind_class = res.result
    }).catch(error => {
      uni.showToast({icon:'none',title: error.message})
    })
    this.fetchGoodsclassList()
  },
  components:{
    TitleHeader,
    SellerBase,
    flexLine,
    Step
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchGoodsclassList: 'fetchGoodsclassList'
    }),
    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:''
            }
          }
        }
      var temp = values[2]
      if (!temp.id) {
        temp = values[1]
      }
      if (!temp.id) {
        temp = values[0]
      }
      this.goods_class={
        gc_name : temp.value,
        gc_id : temp.id
      }

      this.hidePopup('classVisible')
    },
    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()
    },
    nextStep () {
      if (!this.goods_class.gc_id) {
		uni.showToast({icon:'none',title: '请选择商品分类'})
        return
      }
      uni.redirectTo({url:'/pages/seller/goods/GoodsForm2'+'?'+urlencode({ class_id: this.goods_class.gc_id, commonid: this.commonid })})
    }
  }
}
</script>

<style scoped lang="scss">
.main-content{background: #fff;padding:0 $pageSpace}
.container{
    background: #fff;
}
.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>