BlockChainH5/pages/employees/list.vue

<template>
	<view class="ios-bottom" v-if="!loding">
		<!-- 员工列表 -->
		<uni-collapse v-if="lists.length > 0">
			<block v-for="(listItem, listIndex) in lists" :key="listIndex">
				<uni-collapse-item :show-animation="true" :open="listIndex === 0">
					<template v-slot:title>
						<view class="collapse-title">{{listItem.name}}</view>
					</template>
					<block v-if="listItem.data.length > 0">
						<view class="employees-border" v-for="(item, index) in listItem.data" :key="index">
							<uni-swipe-action>
								<uni-swipe-action-item :rightOptions="options" @click="onEmployees($event, listIndex, index)">
									<view class="employees-item">
										<view class="cover">
											<block v-if="item.user.avatar === ''">{{item.name.slice(0,1)}}</block>
											<block v-else>
												<image class="cover-img" :src="item.user.avatar" mode="aspectFill"></image>
											</block>
										</view>
										<view class="content">
											<view class="nickname nowrap">{{item.name}}<text>{{item.job}}</text></view>
											<view class="job nowrap">
												<text v-for="(permissionItem, permissionIndex) in item.permission" :key="permissionIndex">{{permissionItem}}</text>
											</view>
										</view>
									</view>
								</uni-swipe-action-item>
							</uni-swipe-action>
						</view>
					</block>
					<block v-else>
						<view class="employees-null">店铺暂无员工</view>
					</block>
				</uni-collapse-item>
			</block>
		</uni-collapse>
		<view v-else class="list-null">
			<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix" />
			<view class="sub-title">暂无员工</view>
			<view class="sub-btn" @click="addEmployees">添加员工</view>
		</view>
	</view>
</template>

<script>
	import { employees, employeesDelete } from '@/apis/interfaces/employees'
	export default {
		data() {
			return {
				loding  : true,
				lists	: [],
				total	: 0,
				options	: [{
					text	: '编辑',
					type	: 'PUT',
					style	: {
						backgroundColor: '#8b64fd'
					}
				},{
					text	: '删除',
					type	: 'DELETE',
					style	: {
						backgroundColor: '#e93340'
					}
				}]
			};
		},
		onShow(){
			employees().then(res => {
				this.lists = res.data
				this.total = res.total
				this.loding = false
			})
		},
		onNavigationBarButtonTap() {
			this.$Router.push({name: 'employeesAdd'})
		},
		methods:{
			// 编辑，删除
			onEmployees(e, upIndex, index){
				let type = e.content.type,
					val  = this.lists[upIndex].data[index]
				if(type == 'PUT'){
					this.$Router.push({name: 'employeesAdd', params: {type: 'PUT', id: val.employee_id}})
					return
				}
				uni.showModal({
					title		: '提示',
					content		: '删除后无法恢复，确定删除员工[' + val.name + ']吗？', 
					cancelText	: '取消',
					cancelColor	: '#555',
					confirmText	: '确认',
					confirmColor: '#8b64fd',
					success		: res => {
						if(res.confirm) {
							employeesDelete(val.employee_id).then(res => {
								uni.showToast({
									title: res,
									icon : 'none'
								})
								this.lists[upIndex].data.splice(index, 1)
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon : 'none'
								})
							})
						}
					}
				})
			},
			// 添加员工
			addEmployees(){
				if(this.lists.length <= 0){
					uni.showModal({
						title		: '提示',
						content		: '暂未创建门店，无法添加员工',
						cancelText	: '稍后创建',
						cancelColor	: '#555',
						confirmText	: '立即创建',
						confirmColor: '#8b64fd',
						success		: res => {
							if(res.confirm) {
								this.$Router.push({name: 'shopCreate'})
							}
						}
					})
					return
				}
				this.$Router.push({name: 'employeesAdd'})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.collapse-title{
		padding: 0 $padding;
		line-height: 90rpx;
		font-weight: bold;
		font-size: $title-size-lg;
	}
	.employees-item {
		background: white;
		padding: ($padding - 10) $padding;
		position: relative;
		&::before {
			position: absolute;
			bottom: 0;
			left: $padding + 98;
			right: 0;
			content: ' ';
			height: 1rpx;
			background: $border-color;
		}
		.cover {
			position: absolute;
			top: $padding - 10;
			left: $padding;
			background: $text-price;
			color: white;
			height: 88rpx;
			width: 88rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 50%;
			overflow: hidden;
			font-size: $title-size-lg;
			.cover-img {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.content {
			height: 88rpx;
			padding-left: 108rpx;
			.nickname{
				line-height: 40rpx;
				font-size: $title-size;
				padding-bottom: 10rpx;
				text{
					font-size: $title-size-sm;
					color: $text-gray-m;
					padding-left: 10rpx;
				}
			}
			.job{
				line-height: 38rpx;
				text{
					background-color: $border-color-lg;
					color: $text-gray;
					padding: 0 10rpx;
					line-height: 38rpx;
					margin-left: $margin/2;
					display: inline-block;
					&:first-child{
						margin-left: 0;
					}
				}
			}
		}
	}
	// 空提示
	.list-null{
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		text-align: center;
		background: white;
		padding-bottom: 20vh;
		@extend .vertical;
		.sub-title{
			color: $text-gray;
			font-size: $title-size-m;
		}
		.icon{
			width: 288rpx;
		}
		.sub-btn{
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: $mian-color;
			color: white;
			display: inline-block;
			margin-top: $margin*2;
		}
	}
	.employees-null{
		text-align: center;
		line-height: 10vh;
		padding-bottom: $padding;
		font-size: $title-size-m;
		color: $text-gray;
	}
	
	// 添加员工header
	.header-flex{
		background: white;
		padding: ($padding/2) $padding;
		display: flex;
		justify-content: space-between;
		margin-bottom: $margin - 10;
		line-height: 60rpx;
		color: $text-gray;
		.add-btn{
			background: $mian-color;
			color: white;
			width: 150rpx;
			text-align: center;
			font-size: $title-size-m;
		}
	}
</style>