pet_server/pages/Delivery/Delivery.vue

<template>
	<view class="content">
		<view class="search">
			<u-search placeholder="请输入信息搜索配送员" v-model="keyword" @custom="getData" @search="getData"></u-search>
		</view>
		<view class="card" v-for="(item,index) in dataList" :key="index">
			<view class="row">
				<view class="row half">
					<view class="name">
						公司名称
					</view>
					<view class="text">
						{{item.company}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						姓名
					</view>
					<view class="text">
						{{item.name}}
					</view>
				</view>
				<view class="row half">
					<view class="name">
						联系方式
					</view>
					<view class="text">
						{{item.mobile}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						账号
					</view>
					<view class="text">
						{{item.username}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row locationName">
					<view class="name">
						所属区域
					</view>
					<view class="text">
						<view v-for="(obj,key) in item.area">
							{{obj.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						是否禁用
					</view>
					<u-switch class="text" style="margin-left: 20rpx;" v-model="item.status"
						:active-value="item.id + ',1'" :inactive-value="item.id + ',2'" @change="open"
						active-color="#F6B301" inactive-color="#eee" size="25"></u-switch>
				</view>
				<view class="row half">
					<view class="btn" @click="del(item.id)">
						删除
					</view>
					<view class="btn" @click="eidt(item)">
						编辑
					</view>
				</view>
			</view>
		</view>


		<view class="bottom-btn">
			<view class="buttom-dom" @click="create">
				创建配送员
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 搜索条件
				keyword: "",
				// 数量
				limit: 10,
				// 页码
				page: 1,
				// 数据
				dataList: []
			}
		},
		onShow() {
			this.getData()
		},
		onLoad() {
			this.getData()
		},
		methods: {
			// 禁用
			open(e) {
				let _this = this
				let data = e.split(',')
				// 开启
				if (data[1] === '1') {
					uni.showModal({
						title: '确定要开启此配送员吗？',
						success: function(res) {
							if (res.confirm) {
								_this.request("/admin_user/enable", {
									user_id: data[0],
									status: 'normal'
								}, "GET").then(res => {
									if (res.code === 1) {
										_this.getData()
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
								_this.getData()
							}
						}
					})
					
				}
				// 关闭
				if (data[1] === '2') {
					uni.showModal({
						title: '确定要禁用此配送员吗？',
						success: function(res) {
							if (res.confirm) {
								_this.request("/admin_user/enable", {
									user_id: data[0],
									status: 'hidden'
								}, "GET").then(res => {
									if (res.code === 1) {
										_this.getData()
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
								_this.getData()
							}
						}
					})
				}
			},
			// 获取数据列表
			getData() {
				this.request("/admin_user/senders", {
					keyword: this.keyword,
					limit: this.limit,
					page: this.page
				}, "GET").then(res => {
					console.log(res)
					if (res.code === 1) {
						this.dataList = res.data.data
					}
				})
			},
			// 点击新建
			create() {
				uni.navigateTo({
					url: './create?type=1'
				})
			},
			// 点击删除
			del(id) {
				let _this = this;
				console.log('del')
				uni.showModal({
					title: "提示",
					content: "确定要删除此配送员吗？",
					showCancel: true,
					success(e) {
						if (e.confirm) {
							console.log('确定')
							_this.request("/admin_user/delete", {
								user_id: id
							}, "GET").then(res => {
								console.log(res)
								if (res.code === 1) {
									_this.$u.toast('操作成功')
									_this.getData()
								}
							})
						}
					}
				})
			},
			// 点击编辑
			eidt(info) {
				console.log('edit')
				uni.navigateTo({
					url: "./create?info=" + JSON.stringify(info) + "&type=2"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 120rpx;
		overflow-y: scroll;
		padding-bottom: 15vh;

		.search {
			padding: 30rpx;
			background-color: #FFFFFF;
			position: fixed;
			top: 0;
			width: 100vw;
		}

		.card {
			background-color: #FFFFFF;
			width: 93%;
			margin: 0 auto;
			margin-top: 40rpx;
			padding: 30rpx;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			.row {
				margin-bottom: 10rpx;
			}

			.locationName {
				width: 100%;
				justify-content: flex-start;

				.text {
					text-indent: 1em;
					width: 80%;
					text-overflow: ellipsis;
					overflow: hidden;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					white-space: nowrap;
				}
			}

			.row:nth-child(5) {
				margin-bottom: 0;
			}

			.half {
				width: 50%;
				justify-content: flex-start;

				.name {
					color: #999;
				}

				.text {
					text-indent: 1em;
				}

				.btn {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}


		.bottom-btn {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 10vh;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.buttom-dom {
				height: 80rpx;
				width: 93%;
				background-color: #F6B301;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				color: #FFFFFF;
				border-radius: 80rpx;
			}
		}

	}
</style>