eduepos_ui_store/pages/store/clerk.vue

<template>
	<view class="clerk-page">
		<view scroll-y class="class-list">
			<view class="item" v-for="item in clerks" :key="item.storeUserId">
				<view class="row">
					<view class="name">{{ item.userName }}</view>
					<u-icon name="trash" size="26" color="#6c6c6c" @click="handItemRemove(item)"></u-icon>
				</view>
				<view class="row">
					<view class="phone">登录手机号: {{ item.tel }}</view>
					<u-icon name="edit-pen" size="26" color="#6c6c6c" @click="handItemEdit(item)"></u-icon>
				</view>
			</view>
		</view>
		<view class="add-clerk" @click="addCleak">
			添加店员
		</view>
		<u-modal :show="deleteVisible" :title="modalTitle" closeOnClickOverlay showCancelButton confirmColor="#d64d3b"
			@confirm="handDelete" @cancel="cancelDelete" @close="deleteVisible = false">
		</u-modal>
		<u-modal :show="formVisible" :title="modalTitle" closeOnClickOverlay showCancelButton @confirm="handAdd"
			@cancel="cancelAdd" @close="closeAdd">
			<view class="container">
				<view class="name">
					<u-input border v-model="formItem.userName" placeholder="请输入店员姓名"></u-input>
				</view>
				<view class="phone">
					<u-input border v-model="formItem.tel" placeholder="请输入店员手机号"></u-input>
				</view>
			</view>
		</u-modal>
	</view>
</template>
<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			clerkUrl: '/storeClerkManageApi/getStoreClerkList',
			updateUrl: '/storeClerkManageApi/update',
			deleteUrl: '/storeClerkManageApi/delete',
			getOneUrl: '/storeClerkManageApi/getStoreClerkById',
			modalTitle: '',
			deleteVisible: false,
			delItem: null,
			formItem: {
				storeUserId: '',
				userName: '',
				tel: ''
			},
			formVisible: '',
			clerks: [],
			triggered: false
		}
	},
	computed: {
		...mapState(['storeInfo'])
	},
	methods: {
		loadData() {
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.clerkUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.clerks = res.data.list;
					}
					uni.stopPullDownRefresh()
					uni.hideLoading()
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.stopPullDownRefresh()
					uni.hideLoading()
				}
			})
		},
		closeAdd () {
			this.formVisible = false
			this.formItem = {
				storeUserId: '',
				userName: '',
				tel: ''
			}
		},
		onPullDownRefresh() {
			this.loadData();
		},
		cancelAdd () {
			this.formVisible = false
			this.formItem = {
				storeUserId: '',
				userName: '',
				tel: ''
			}
		},
		onRestore () {
			this.triggered = 'restore'; // 需要重置
			console.log("onRestore");
		},
		getClerk(id) {
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.getOneUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId,
					id: id
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.formItem = res.data.obj;
						this.modalTitle = '添加/编辑店员'
						this.formVisible = true;
					}
					uni.hideLoading()
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading()
				}
			})
		},
		close() {
			this.deleteVisible = false
		},
		handItemRemove(item) {
			this.modalTitle = `确定要删除店员 [${item.userName}] 吗?`
			this.delItem = item
			this.deleteVisible = true
		},
		handDelete() {
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.deleteUrl,
				data: {
					storeUserId: this.storeInfo.storeUserId,
					storeId: this.storeInfo.storeId,
					timestamp: dateStr,
					sign: sign,
					id: this.delItem.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.delItem = null
						this.modalTitle = ''
						this.deleteVisible = false
						this.loadData();
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					uni.hideLoading()
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading()
				},
			});
		},

		cancelDelete() {
			this.delItem = null
			this.modalTitle = ''
			this.deleteVisible = false
		},
		handItemEdit(item) {
			console.log('item :>> ', item);
			// this.formItem = item
			this.getClerk(item.storeUserId)
			
		},
		refresherrefresh() {
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.clerkUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					this.triggered = false;
					if (res.data.rtnBean.rtnCode == 0) {
						this.clerks = res.data.list;
					}
					
					uni.hideLoading()
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					this.triggered = false;
					uni.hideLoading()
					
				}
			})
			
		},
		addCleak() {
			this.modalTitle = '添加/编辑店员'
			this.formVisible = true
		},
		handAdd() {
			let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/ 
			if (!this.formItem.userName) {
				uni.showToast({
					title: '请输入店员姓名',
					icon: 'none'
				})
				return
			}
			if (!this.formItem.tel) {
				uni.showToast({
					title: '请输入店员手机号码',
					icon: 'none'
				})
				return
			}
			if (!reg.test(this.formItem.tel)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			uni.showLoading({
				title: '保存中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.updateUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					id: this.storeInfo.storeUserId,
					storeUserId: this.formItem.storeUserId,
					userName: this.formItem.userName,
					tel: this.formItem.tel
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading()
						this.formVisible = false
						this.formItem = {
							storeUserId: '',
							userName: '',
							tel: ''
						}
						this.loadData()
						
						this.modalVisible = false
					} else {
						uni.hideLoading()
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading()
				}
			})
			
		}
	},
	onLoad() {
		this.loadData();
	}
}
</script>
<style lang="scss" scoped>
.clerk-page {
	width: 100vw;
	height: 100vh;
	background-color: #fff;
}

.class-list {
	height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
	height: calc(100vh - 120rpx - constant(safe-area-inset-bottom));

	.item {
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
	
		.row {
			@include between;
			margin-bottom: 20rpx;
			color: $text-color;
		}
	
		.name {
			font-size: 36rpx;
		}
	
		.phone {
			font-size: $font-lg;
		}
	}
}

.add-clerk {
	position: fixed;
	left: 10vw;
	width: 80vw;
	height: 80rpx;
	border-radius: 40rpx;
	@include flexCenter;
	color: #fff;
	background-color: $light-color;
	bottom: calc(20rpx + env(safe-area-inset-bottom));
	bottom: calc(20rpx + constant(safe-area-inset-bottom));
}

.container {
	.name, .phone {
		margin: 40rpx 0;
		border: 2rpx solid #ececec;
		border-radius: 6rpx;
	}
}
</style>