hlm_pl_mall_store/pages/seller/accountgroup/AccountGroupList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
	<seller-base :show="false">
	<view class="div distributor-account_group-list">
		<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 pb-30" v-if="account_group_list.length>0">
			<view class="div" v-for="item in account_group_list" :key="item.sellergroup_id">
				<view class="div container mt-5">
					<view class="div accountgroup-info">
						<view class='sellergroup_name'>
							<label class="subtitle">
								{{ item.sellergroup_name }}
							</label>
						</view>
						<view class="div button-wrapper">
							<view class="div edit-wrapper" @click="onEdit(item.sellergroup_id)">
								<view class="div common-btn btn-2 mr-5">编辑</view>
							</view>
							<view class="div edit-wrapper delete-wrapper" @click="onDelete(item.sellergroup_id)">
								<view class="div common-btn btn-1">删除</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="div"  v-else>
			<empty-record></empty-record>
		</view>
		<view class='common-add-btn-wrapper'><view class="div common-btn common-add-btn"  @click="goAdd">新增</view></view>
	</view>
</seller-base>
</template>

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


import SellerBase from '../SellerBase'


import EmptyRecord from '../../EmptyRecord'
import { getAccountGroupList, delAccountGroup } from '../../../api/sellerAccountGroup'
export default {
  components:{
    TitleHeader,
    SellerBase,
    EmptyRecord
  },
  name: 'SellerAccountGroup',
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      account_group_list: []
    }
  },

  onShow: function () {
this.getAccountGroupList()
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  methods: {
    goBack () {
      uni.navigateBack({delta:1})
    },
    goAdd () {
      uni.navigateTo({url:'/pages/seller/accountgroup/AccountGroupForm'+'?'+urlencode({ action: 'add' })})
    },

    onEdit (sellergroup_id) {
      uni.navigateTo({url:'/pages/seller/accountgroup/AccountGroupForm'+'?'+urlencode({ group_id: sellergroup_id })})
    },
    onDelete (sellergroup_id) {
      uni.showLoading({ title: '加载中' })
      delAccountGroup(sellergroup_id).then(
        (response) => {
          this.getAccountGroupList()
          uni.hideLoading()
        }, (error) => {
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
        })
    },
    getAccountGroupList () {
		getAccountGroupList().then(res => {
        this.account_group_list = res.result.seller_group_list
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>
<style  lang="scss" scoped>
	.distributor-account_group-list {
		.common-header{
			.btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
		}
		.container {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: stretch;
			background-color: #fff;
			border-radius: .5rem;
		}
		.btn-1{background-color: #FB2630;}
		.btn-2{background-color: $primaryColor;}
		.accountgroup-info {
			padding: .5rem 1rem 1.5rem;
			box-sizing: border-box;
		}
		.sellergroup_name {
			text-align: center;
			padding:2rem 0 1rem;
		}
		.button-wrapper {
			display: flex;
			justify-content: center;
			.common-btn{
				color: #fff;
				padding:.5rem 3rem ;
			}
		}
		
		.edit-wrapper {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}
		.delete-wrapper {
			margin-right: 0.5rem;
		}
		.subtitle {
			font-size:1rem;
			color: #333;
			font-weight: bold;
		}
	}
</style>