eduepos_ui_store/pages/store/deliveryman.vue

<template>
	<view class="clerk-page">
		<view class="clerk-list">
			<!-- <uni-swipe-action>
				<uni-swipe-action-item :right-options="options" :index="index" v-for="(item, index) in riderList"
					@click="swipeClick(index,item)" :key="item.riderId"> -->
					<view class="item" v-for="(item, index) in riderList" :key="item.riderId" style="width: 100%;">
						<view class="row">
							<view class="name">{{ item.riderName }}</view>
							<!-- <u-icon name="trash" size="26" color="#6c6c6c" @click="handItemRemove(item)"></u-icon> -->
							<view class="value flex-start">
								状态:
							    <switch :checked="item.status" @change="changeStatus(item)"  size="22" class="switch" style="transform:scale(0.7)"></switch>
							</view>
						</view>
						<view class="row">
							<view class="phone">手机号: {{ item.telNo }}</view>
							<u-icon name="edit-pen" size="26" color="#6c6c6c" @click="handItemEdit(item)"></u-icon>
						</view>
					</view>
<!-- 				</uni-swipe-action-item>
			</uni-swipe-action> -->
		</view>
		<view class="add-clerk" @click="addCleak">
			添加专属配送员
		</view>
		<u-modal :show="deleteVisible" :title="modalTitle" closeOnClickOverlay showCancelButton confirmColor="#d64d3b"
			@confirm="handDelete" @cancel="deleteVisible = false" @close="deleteVisible = false">
		</u-modal>
		<u-modal :show="formVisible" :title="modalTitle" closeOnClickOverlay showCancelButton @confirm="handAdd"
			@cancel="formVisible = false" @close="formVisible = false">
			<view class="container">
				<view class="name">
					<u-input v-model="formItem.riderName" placeholder="请输入配送员姓名"></u-input>
				</view>
				<view class="phone">
					<u-input v-model="formItem.telNo" placeholder="请输入配送员手机号"></u-input>
				</view>
				<view class="password">
					初始密码: 123456
				</view>
			</view>
		</u-modal>
	</view>
</template>
<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			riderUrl: '/storeDeliveryManageApi/getStoreRiderList',
			updateUrl: '/storeDeliveryManageApi/updateRider',
			getOneUrl: '/storeDeliveryManageApi/getStoreRiderById',
			changeStatusUrl: '/storeDeliveryManageApi/changeStatus',
			modalTitle: '',
			deleteVisible: false,
			delItem: null,
			riderList: [],
			formItem: {
				riderId: '',
				riderName: '',
				telNo: ''
			},
			formVisible: '',
			options: [
			    {
			        text: '删除',
					style: {
			            fontSize: '28rpx',
						backgroundColor: '#FF0000'
			        }
			    }
			],
			
		}
	},
	computed: {
		...mapState(['storeInfo'])
	},
	methods: {
		loadData () {
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.riderUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.riderList = res.data.list;
					}
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
				}
			})
		},
		changeStatus (item) {
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeId + dateStr);
			let status = item.status == 1 ? 0 : 1
			this.requst({
				url: this.changeStatusUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					riderId: item.riderId,
					status: status
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.loadData()
					}
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
				}
			})
		},
		close() {
			this.deleteVisible = false
		},
		handItemRemove(item) {
			this.modalTitle = `确定要删除配送员 [${item.riderName}] 吗?`
			this.delItem = item
			this.deleteVisible = true
		},
		handDelete() {
			console.log('这里写删除接口: ', this.delItem);
			this.delItem = null
			this.modalTitle = ''
			this.deleteVisible = false
		},
		handItemEdit(item) {
			this.getRider(item.riderId)
			
		},
		addCleak() {
			this.modalTitle = '添加配送员'
			this.formVisible = true
		},
		handAdd() {
			let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/ 
			if (!this.formItem.riderName) {
				uni.showToast({
					title: '请输入配送员姓名',
					icon: 'none'
				})
				return
			}
			if (!this.formItem.telNo) {
				uni.showToast({
					title: '请输入配送员手机号码',
					icon: 'none'
				})
				return
			}
			if (!reg.test(this.formItem.telNo)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}
			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,
					storeUserId: this.storeInfo.storeUserId,
					riderId: this.formItem.riderId,
					riderName: this.formItem.riderName,
					telNo: this.formItem.telNo
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.formVisible = false
						this.formItem = {
							riderId: '',
							riderName: '',
							telNo: ''
						}
						this.loadData()
						
						this.modalVisible = false
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
				}
			})
		},
		getRider(id) {
			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,
					riderId: id
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.formItem = res.data.obj;
						this.modalTitle = '编辑配送员'
						this.formVisible = true
					}
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
				}
			})
		},
	},
	onLoad() {
		this.loadData();
	}
}
</script>
<style lang="scss" scoped>
.clerk-page {
	width: 100vw;
	height: 100vh;
	background-color: #fff;
}

.clerk-list {
	height: calc(100vh - env(safe-area-inset-bottom) - 120rpx);
	height: calc(100vh - constant(safe-area-inset-bottom) - 120rpx);
	background-color: #f5f5f5;
	padding: 20rpx;
	box-sizing: border-box;

	.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;
		}

		.password {}
	}
}

.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 {
		margin: 40rpx 0;
	}

	.phone {
		margin-bottom: 20rpx;
	}

	.password {
		text-align: center;
		font-size: $font-sm;
		color: $uni-color-button;
	}
}
</style>