hlm_pl_mall_store/pages/seller/spec/Index.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <seller-base :show="false">
    <view class="div container seller-spec">
        <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>
        <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" v-if="spec_list">
            <view class="div" v-for="(val,k) in spec_list" :key="k">
                <flex-line class="mt-5" :show-border="true"><text class="span line-name">{{val.sp_name}}</text><view class="div" slot="right"><view class="div common-btn ds-button-small default" @click="addSpec(k)">添加规格值</view></view></flex-line>
                <view class="div row-line" v-for="(item,index) in val.value" :key="index">
                    <input class="input" placeholder="规格值" v-model="item.spvalue_name" />
                    <text class="span del iconfont" @click="delSpec(k,index)">&#xe669;</text>
                </view>
            </view>
        </view>
        <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="submit">保存</view></view>
        </view>
        <view class="div">
            <uni-popup background-color="#fff" ref="classVisible" type="bottom">
                <view>
                    <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>
                </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>
            </uni-popup>
        </view>
    </view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</seller-base>
</template>

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

import { mapState, mapActions } from 'vuex'
import { getCommonData, getGoodsClass, goodsSpecSave } from '../../../api/sellerGoods'
import flexLine from '../../flexLine'
export default {
  data(){
    return {
    navHeight: 0,
    gcPicker:[0,0,0],
      dialog:{},
      goods_class: {},
      store_bind_class: false,
      spec_list: false
    }
  },
    components:{TitleHeader,SellerBase,flexLine,},
  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
    }
  },
  created () {
    getGoodsClass('Sellergoods').then(res => {
      this.store_bind_class = res.result
    }).catch(error => {
      uni.showToast({icon:'none',title: error.message})
    })
    this.fetchGoodsclassList()
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
    this.spec_list[this.dialog.data.key]['value'].splice(this.dialog.data.index, 1)
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchGoodsclassList: 'fetchGoodsclassList'
    }),
    submit () {
      uni.showLoading({ title: '加载中' })
      goodsSpecSave({ spec_list: this.spec_list, gc_id: this.goods_class.gc_id }).then(res => {
        uni.hideLoading()
        uni.showToast({icon:'none',title: res.message})
        this.getSpec()
      }).catch(error => {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    },
    delSpec (key, index) {
      if (this.spec_list[key]['value'][index]['spvalue_name']) {
        this.dialog={content:'确定要删除该规格值吗？',data:{key:key,index:index}}
        this.$refs.confirm.open()
      } else {
        this.spec_list[key]['value'].splice(index, 1)
      }
    },
    addSpec (index) {
      this.spec_list[index]['value'].push({})
    },
    getSpec () {
      getCommonData('Sellergoods', this.goods_class.gc_id).then(res => {
        var spec_list = res.result.spec_list
        this.spec_list = spec_list
      }).catch(error => {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    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
      this.goods_class.gc_id = temp.id

      this.cancelClass()
      this.getSpec()
    },
    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()
    }
  }
}
</script>
<style lang="scss">
   .seller-spec .mint-checklist-title{margin:0}
</style>
<style scoped lang="scss">
.main-content{background: #fff;padding:0 $pageSpace}
    .row-line{
        display: flex;
        .content{flex:1}
    }
    .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;
        }
    }
    .row-line{background: #fff;padding:.3rem .5rem;align-items: center;
        .input{flex:1;padding:.3rem 0;border:0;}
    }
    
	.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>