hlm_pl_mall_store/pages/seller/account/AccountList.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>
		<view class='div pb-30'>
			<view class="div main-content" v-for="item in sellerList" v-bind:key="item.seller_id" >
			    <view class="div container mt-5">
					<view class="div account-info">
						<view class="lastlogin" v-if="item.last_logintime">
							<view>上次登录</view>
							<text>{{item.last_logintime}}</text>
						</view>
						<view class='seller_name'>
							<label class="subtitle">
								{{ item.seller_name }}
							</label>
						</view>
						<view class="div button-wrapper">
							<view class="div edit-wrapper" @click="onEdit(item.seller_id)">
								<view class="div common-btn btn-2 mr-5">编辑</view>
							</view>
							<view class="div edit-wrapper delete-wrapper" @click="onDelete(item.seller_id)">
								<view class="div common-btn btn-1">删除</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<empty-record v-if="sellerList && !sellerList.length"></empty-record>
		</view>
        
		<view class='common-add-btn-wrapper'><view class="div common-btn common-add-btn"  @click="goAdd">新增</view></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 { urlencode } from '@/util/common'

import SellerBase from '../SellerBase'

import EmptyRecord from '../../EmptyRecord'
import { getSellerAccountList,delSellerAccount } from '../../../api/sellerAccount'
import flexLine from '../../flexLine'
export default {
  name: 'AccountList',
  components:{
    TitleHeader,
    SellerBase,
    flexLine,
    EmptyRecord
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
	  dialog:{},
      navHeight: 0,
      sellerList: false // 用户列表
    }
  },
  onShow: function () {
    this.getAccountList()
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    getAccountList () {
      uni.showLoading({ title: '加载中' })
      getSellerAccountList().then(res => {
        uni.hideLoading()
        this.sellerList = res.result.seller_list
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    },
	confirmDialog(value){
		delSellerAccount(this.dialog.data).then(
		  (response) => {
			uni.navigateTo({url:'/pages/seller/account/AccountList'})
		  }, (error) => {
			uni.showToast({icon:'none',title: error.message})
		  })
	},
    onEdit (sellerId) {
      uni.navigateTo({url:'/pages/seller/account/AccountForm'+'?'+urlencode({ seller_id: sellerId })})
    },
    goAdd () {
      uni.navigateTo({url:'/pages/seller/account/AccountForm'+'?'+urlencode({ action: 'add' })})
    },
	onDelete (id) {
	  this.dialog={content:'确定要取消该账号吗？',data:id}
	  this.$refs.confirm.open()
	},
  }

}
</script>

<style scoped lang="scss">
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
.main-content{background: #fff;padding:0 $pageSpace}
.container{border-bottom: 1px dashed  #eee;}
.account-info {padding: .5rem 1rem 1.5rem;box-sizing: border-box;}
.account-info .lastlogin view{font-size: .7rem;color: #333;}
.account-info .lastlogin text{font-size: .7rem;color: #999;}
.account-info .seller_name {text-align: center;padding: 2rem 0 1rem;}
.account-info .seller_name .subtitle {font-size:1rem;color: #333;font-weight: bold;}
.account-info .button-wrapper {flex: 1;display: flex;flex-direction: row;justify-content: center;align-items: center;}
.account-info .button-wrapper .edit-wrapper{color: #fff;border-radius: 1.5rem;padding: .1rem .3rem;margin: 0 .2rem;background: $primaryColor;}
.account-info .button-wrapper .edit-wrapper .common-btn{color: #fff;padding:.5rem 3rem ;}
.account-info .button-wrapper .delete-wrapper{background: #FB2630;}
</style>