hlm_pl_mall_store/pages/seller/goodsclass/GoodsClassForm.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="getTitle" class="common-header" left-icon="back" @clickLeft="goBack">
			</uni-nav-bar>
		</view>
		</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="class_info.storegc_name" /></view></flex-line>
		<view class="div" @click="showPopup('parentVisible')">
			<flex-line :is-link="true" :show-border="true"><text class="span line-name">上级分类</text><text class="span" slot="right">{{parent_name}}</text></flex-line>
		</view>
		<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="class_info.storegc_sort" /></view></flex-line>
    <flex-line :show-border="true"><text class="span line-name">显示</text><view class="div" slot="right"><switch @change="switchChange" :checked="!!state"></switch></view></flex-line>
		<view class="div pt-10 pb-10"><view class="div common-btn ds-button-large"  @click="submit">保存</view></view>
    </view>

		<uni-popup background-color="#fff" ref="parentVisible" 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('parentVisible')">
				</uni-nav-bar>
			</view>
			</view>
			<view class="div common-popup-content">
				<scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
				<radio-group @change="radioChange" class='radio-wrapper'>
				  <view class='radio-item' v-for="(item, index) in class_options" :key="index">
					<radio :value="item.value" :checked="parent_id==item.value" />
					<text>{{item.label}}</text>
				  </view>
				</radio-group>
				</scroll-view>
			</view>
		</view>
    </uni-popup>
	</view>
</seller-base>
</template>

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

import { getCommonData, getGoodsClassInfo, editGoodsClass } from '../../../api/sellerGoodsClass'
import flexLine from '../../flexLine'
export default {
  components:{
  TitleHeader,
  SellerBase,
  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 '修改分类'
      }
    }

  },
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      parent_name: '无',
	  action:'',
      state: true,
      class_info: {
        storegc_id: 0,
        storegc_sort: 255
      },
      parent_id: '0',
      class_options: [{
        label: '无',
        value: '0'
      }],
      parent_list: {
        '0': '无'
      }
    }
  },
  onLoad: function (option) {
	this.action = option.action
    getCommonData().then(res => {
      let temp = res.result.goods_class
      for (var i in temp) {
        this.parent_list[temp[i].storegc_id + ''] = temp[i].storegc_name
        this.class_options.push({
          label: temp[i].storegc_name,
          value: temp[i].storegc_id + ''
        })
      }
    }).catch(function (error) {
      uni.showToast({icon:'none',title: error.message})
    })
    if (!this.isAddMode) {
      getGoodsClassInfo(option.storegc_id).then(res => {
        this.class_info = res.result.class_info
        this.parent_id = res.result.class_info.storegc_parent_id + ''
        if (this.class_info.storegc_state) {
          this.state = true
        } else {
          this.state = false
        }
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  watch: {

    parent_id: function (parent_id) {
      this.parent_name = this.parent_list[parent_id]
	  this.hidePopup('parentVisible')
    }

  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },
  methods:{
	switchChange(e){
	  this.state=e.detail.value
	},
	radioChange(e){
	  this.parent_id=e.detail.value
	},
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack () {
      uni.navigateBack({delta:1})
    },
    submit () {
      if (!this.class_info.storegc_name) {
		uni.showToast({icon:'none',title: '请填写分类名称'})
        return
      }
      if (this.state) {
        this.class_info.storegc_state = 1
      } else {
        this.class_info.storegc_state = 0
      }
      this.class_info.storegc_parent_id = this.parent_id
      editGoodsClass(this.class_info).then(
        (response) => {
          uni.navigateBack({delta:1})
        }, (error) => {
          uni.showToast({icon:'none',title: error.message})
        })
    }

  }
}
</script>

<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}
	}
.radio-wrapper{
	display: block;
	padding: 0 $pageSpace;
	.radio-item{
		padding: .5rem 0;
		border-bottom: 1px dashed #f5f5f5;
	}
}
</style>