hlm_pl_mall_store/pages/seller/accountgroup/AccountGroupForm.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="seller_group_name" /></view></flex-line>
		<view class="div" @click="showPopup('menuVisible')">
			<flex-line :is-link="true" :show-border="true"><text class="span line-name">操作权限</text></flex-line>
		</view>
		<view class="div" @click="showPopup('smtVisible')">
			<flex-line :is-link="true" :show-border="true"><text class="span line-name">消息接收权限</text></flex-line>
		</view>
		<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="menuVisible" 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('menuVisible')">
				</uni-nav-bar>
			</view>
			</view>
			<view class="scroll-view div common-popup-content">
        <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
        <checkbox-group @change="checkboxChange2">
				<view class="div" v-for="(item,index) in menu_options" :key="index">
          <view>{{item.text}}</view>
          <view>
             <label v-for="(item,i) in item.options" :key="i">
					<checkbox :value="item.value" :checked="menu.indexOf(item.value)>-1">
					</checkbox>
          {{item.label}}
          </label>
          </view>
          </view>
				</checkbox-group>
        </scroll-view>
			</view>
    </view>  
		</uni-popup>
		<uni-popup background-color="#fff" ref="smtVisible" 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('smtVisible')">
				</uni-nav-bar>
			</view>
			</view>
			<view class="scroll-view div common-popup-content">
			  <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
            <checkbox-group @change="checkboxChange1">
               <label v-for="(item,index) in smt_options" :key="index">
				<checkbox :value="item.value" :checked="smt.indexOf(item.value)>-1"></checkbox>
        {{item.label}}
        </label>
        </checkbox-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, getAccountGroupInfo, editAccountGroup } from '../../../api/sellerAccountGroup'
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,
      screenHeight:0,
      seller_group_name: '',
      menuVisible: false,
      smtVisible: false,
      group_id: 0,
      smt_options: [],
      menu_options: [],
      smt: [],
      menu: [],
	  action:''
    }
  },
  onLoad: function (option) {
    getCommonData().then(res => {
      let temp = res.result.smt_list
      for (var i in temp) {
        let item = temp[i]
        this.smt_options.push({
          label: item.storemt_name,
          value: item.storemt_code
        })
      }
      let menu_list = res.result.seller_menu
      for (var i in menu_list) {
        let item = menu_list[i]
        // this.menu[i] = []
        let temp = []
        for (var j in item.submenu) {
          let menu = item.submenu[j]
          temp.push({
            label: menu.text,
            value: menu.controller
          })
        }
        this.menu_options.push({
          key: i,
          text: item.text,
          options: temp
        })
      }
    }).catch(function (error) {
      uni.showToast({icon:'none',title: error.message})
    })
	  this.action = option.action
    if (this.action!='add') {
      this.group_id = option.group_id
      getAccountGroupInfo(this.group_id).then(res => {
        this.seller_group_name = res.result.group_name
        this.menu = res.result.group_limits
        this.smt = res.result.smt_limits
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
    this.screenHeight=uni.getSystemInfoSync().screenHeight
  },
  methods:{
    checkboxChange1(event){
      this.smt=event.detail.value
    },
    checkboxChange2(event){
      this.menu=event.detail.value
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack () {
      uni.navigateBack({delta:1})
    },
    submit () {
      if (!this.seller_group_name) {
		uni.showToast({icon:'none',title: '请填写组名称'})
        return
      }
      uni.showLoading({ title: '加载中' })
      editAccountGroup(this.group_id, this.seller_group_name, this.menu, this.smt).then(
        (response) => {
          uni.navigateBack({delta:1})
        }, (error) => {
          uni.hideLoading()
          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}
	}
  .scroll-view-wrapper{display: flex;flex-direction: column;}
  .scroll-view{flex:1}
</style>