zhongshen_project/addon/cashier---/source/os/pages/store/deliver.vue

<template>
	<base-page>
		<view class="deliverlist">
			<view class="deliverlist-box">
				<view class="deliverlist-left">
					<view class="deliver-title">
						配送员
						<text class="iconfont icongengduo1"></text>
					</view>
					<view class="deliver-list-wrap">
						<block v-if="list.length > 0">
							<scroll-view scroll-y="true" class="deliver-list-scroll all-scroll" @scrolltolower="getDeliverList">
								<view
									class="item"
									@click="deliverSelect(item, index)"
									v-for="(item, index) in list"
									:key="index"
									:class="index == selectdeliverKeys ? 'itemhover' : ''"
								>
									<view class="item-right">
										<view class="deliver-name">{{ item.deliver_name }}</view>
										<view class="deliver-money">{{ item.deliver_mobile }}</view>
									</view>
								</view>
							</scroll-view>
						</block>
						<view class="notYet" v-else-if="!one_judge && list.length == 0">暂无配送员</view>
					</view>
					<view class="add-deliver"><button type="default" class="primary-btn" @click="addDeliver">添加配送员</button></view>
				</view>
				<view class="deliverlist-right" v-show="!one_judge">
					<view class="deliver-title">配送员详情</view>
					<view class="deliver-information">
						<block v-if="detail && Object.keys(detail).length">
							<view class="title">基本信息</view>
							<view class="information-box">
								<view class="box-left">
									<view class="information">
										<view>姓名：</view>
										<view>{{ detail.deliver_name }}</view>
									</view>
									<view class="information">
										<view>电话：</view>
										<view>{{ detail.deliver_mobile }}</view>
									</view>
									<view class="information">
										<view>添加时间：</view>
										<view>{{ detail.create_time ? $util.timeFormat(detail.create_time) : '--' }}</view>
									</view>
									<view class="information">
										<view>最后修改时间：</view>
										<view>{{ detail.modify_time ? $util.timeFormat(detail.modify_time) : '--' }}</view>
									</view>
								</view>
							</view>

							<view class="button-box">
								<view class="button" @click="deletedeliver(detail.deliver_id)">删除</view>
								<view class="button" @click="editdeliver(detail.deliver_id)">修改</view>
							</view>
						</block>
						<block v-else><image class="cart-empty" :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image></block>
					</view>
				</view>

				<unipopup ref="deliverpop" type="center">
					<view class="common-wrap common-form">
						<view class="common-title">{{ deliverData.deliver_id > 0 ? '修改' : '添加' }}配送员</view>
						<view class="common-form-item">
							<label class="form-label">
								<text class="required">*</text>
								姓名
							</label>
							<view class="form-input-inline"><input type="text" v-model="deliverData.deliver_name" class="form-input" /></view>
							<text class="form-word-aux"></text>
						</view>
						<view class="common-form-item">
							<label class="form-label">
								<text class="required">*</text>
								手机号
							</label>
							<view class="form-input-inline"><input type="number" v-model="deliverData.deliver_mobile" class="form-input" /></view>
							<text class="form-word-aux"></text>
						</view>
						<view class="common-btn-wrap">
							<button type="default" class="screen-btn" @click="addDeliverSave">{{ deliverData.deliver_id > 0 ? '修改' : '添加' }}</button>
							<button type="primary" class="default-btn btn save" @click="addDeliverClose()">取消</button>
						</view>
					</view>
				</unipopup>
				<nc-loading :layer-background="{ background: 'rgba(255,255,255,.8)' }" ref="loading"></nc-loading>
			</view>
		</view>
	</base-page>
</template>

<script>
import unipopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: { unipopup },
	data() {
		return {
			search_text: '',
			page: 1,
			// 每次返回数据数
			page_size: 8,
			// 第一次请求列表做详情渲染判断
			one_judge: true,
			//详情数据
			detail: {},
			list: [],
			selectdeliverKeys: 0,
			flag: false,
			deliverData: {
				deliver_id: 0,
				deliver_name: '',
				deliver_mobile: ''
			}
		};
	},
	onLoad() {
		this.getDeliverList();
	},
	methods: {
		deliverSelect(item, keys) {
			this.selectdeliverKeys = keys;
			this.getDeliverDetail(item.deliver_id);
		},
		// 搜索员工
		search() {
			this.page = 1;
			this.list = [];
			this.one_judge = true;
			this.getDeliverList();
		},
		addDeliver() {
			this.$refs.deliverpop.open();
		},
		addDeliverClose() {
			this.$refs.deliverpop.close();
		},
		addDeliverSave() {
			if (this.deliverData.deliver_name == '') {
				this.$util.showToast({
					title: '请输入配送员名称'
				});
				return false;
			}
			if (this.deliverData.deliver_mobile == '') {
				this.$util.showToast({
					title: '请输入配送员电话'
				});
				return false;
			}
			if (this.flag) return false;
			this.flag = true;

			let url = '/cashier/storeapi/store/adddeliver';
			if (this.deliverData.deliver_id > 0) url = '/cashier/storeapi/store/editdeliver';
			this.$api.sendRequest({
				url: url,
				data: this.deliverData,
				success: res => {
					this.$util.showToast({
						title: res.message
					});
					if (res.code == 0) {
						this.page = 1;
						this.list = [];
						this.one_judge = true;
						this.getDeliverList();
						this.addDeliverClose();
						this.deliverData = {
							deliver_id: 0,
							deliver_name: '',
							deliver_mobile: ''
						};
					}
					this.flag = false;
				}
			});
		},
		editdeliver(deliver_id) {
			this.$api.sendRequest({
				url: '/cashier/storeapi/store/deliverinfo',
				data: { deliver_id },
				success: res => {
					if (res.code == 0) {
						this.deliverData = res.data;
						this.$refs.deliverpop.open();
					}
				}
			});
		},
		/**
		 * 请求的列表数据
		 */
		getDeliverList() {
			this.$api.sendRequest({
				url: '/cashier/storeapi/store/deliverlists',
				data: {
					page: this.page,
					page_size: this.page_size
				},
				success: res => {
					if (res.data.list.length == 0 && this.one_judge) {
						this.detail = {};
						this.one_judge = false;
					}
					this.$refs.loading.hide();
					if (res.code >= 0 && res.data.list.length != 0) {
						this.page += 1;
						if (this.list.length == 0) {
							this.list = res.data.list;
						} else {
							this.list = this.list.concat(res.data.list);
						}

						//初始时加载一遍详情数据
						if (this.one_judge) {
							this.getDeliverDetail(this.list[0].deliver_id);
						}
					}
				}
			});
		},

		getDeliverDetail(deliver_id) {
			this.$api.sendRequest({
				url: '/cashier/storeapi/store/deliverinfo',
				data: { deliver_id },
				success: res => {
					if (res.code == 0) {
						this.detail = res.data;

						this.one_judge = false;
					}
				}
			});
		},
		deletedeliver(deliver_id) {
			let that = this;
			uni.showModal({
				title: '',
				content: '确定要删除该配送员吗',
				success: function(res) {
					if (res.confirm) {
						that.$api.sendRequest({
							url: '/cashier/storeapi/store/deletedeliver',
							data: {
								deliver_id
							},
							success: res => {
								if (res.code >= 0) {
									that.page = 1;
									that.list = [];
									that.one_judge = true;
									that.getDeliverList();
								} else {
									that.$util.showToast({ title: res.message });
								}
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
@import './public/css/deliver.scss';
</style>
<style>
/deep/ .uni-modal__hd {
	padding: 0.2em 0.3em 0.3em !important;
}
</style>