QianNiaoShop/pages/customer/CustomerList.vue

<template>
	<view>
		<view class="top-view">
			<u-navbar :border-bottom="false" :is-back="false" title-color="#fff" title=" " :background="nav_background">
				<view class="headline">
					<u-search
						height="72"
						placeholder-color="#879BBA"
						bg-color="#ECF0F7"
						:show-action="false"
						:clearabled="true"
						color="#879BBA"
						@search="searchConfirm"
						placeholder="客户名称/手机号…"
						@clear="searchConfirm"
						v-model="search_form.keyword"
					></u-search>
				</view>
			</u-navbar>
			<view class="tabs-view">
				<u-tabs-swiper
					ref="tabs"
					font-size="26"
					:current="tabs_current"
					:list="tabs_list"
					@change="tabsChange"
					:is-scroll="false"
					inactive-color="#62738E"
					:bar-style="{ borderRadius: '6rpx', height: '6rpx', width: '32rpx', backgroundColor: '#4076D6' }"
					:active-item-style="{ color: '#2D405E', fontSize: '32rpx' }"
				></u-tabs-swiper>
				<view class="search-view clearfix">
					<view class="title ellipsis" @click="openSel('account_status_show')">
						<u-icon
							size="12"
							label-pos="left"
							label-color="#62738e"
							color="#b8c0c8"
							label-size="26"
							:label="account_status_name"
							name="arrow-down-fill"
							class="ico"
						></u-icon>
					</view>
					<view class="title ellipsis" @click="goPage('/pagesT/shop/selShop')">
						<u-icon size="12" label-pos="left" label-color="#62738e" color="#b8c0c8" label-size="26" :label="shop_name" name="arrow-down-fill" class="ico"></u-icon>
					</view>
					<view class="title ellipsis" @click="goPage('/pagesT/staff/selStaff')">
						<u-icon size="12" label-pos="left" label-color="#62738e" color="#b8c0c8" label-size="26" :label="salesName" name="arrow-down-fill" class="ico"></u-icon>
					</view>
					<!-- <view class="title ellipsis" @click="openSel('from_show')">
						<u-icon size="12" label-pos="left" label-color="#62738e" color="#b8c0c8" label-size="26" :label="sourceName" name="arrow-down-fill" class="ico"></u-icon>
					</view> -->
					<view class="title" @click="clearValue()">
						<u-icon label="重置" name="reload" label-color="#62738E" color="#62738E" margin-left="8" size="24" label-size="26"></u-icon>
					</view>
				</view>
			</view>
			<view class="explain">
				<view class="float_left">
					<text>全部</text>
					<text v-if="tabs_current === 1">待审核</text>
					<text v-else-if="tabs_current === 2">待完善资料</text>
					<text v-else>已审核</text>
				</view>
				<view class="float_right">共{{ total }}条</view>
			</view>
		</view>

		<scroll-view
			class="list-ul"
			scroll-y="true"
			@refresherrefresh="refresherrefresh"
			:refresher-enabled="true"
			:refresher-triggered="refresher_triggered"
			@scrolltolower="scrolltolower"
		>
			<view class="list-li" v-for="(item, index) in customer_list" :key="index" @click="goPage(`/pagesT/customer/CustomerDetail?id=${item.id}`)">
				<view class="title clearfix">
					<view class="float_left ellipsis" style="margin-left: 40rpx; width: 350rpx;">业务员：{{ item.salesManName || '未设置' }}</view>
					<view class="float_right" style="margin-right: 40rpx;">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
				</view>
				<view class="list-cont">
					<view class="list-cont-li clearfix">
						<view class="type-view" v-if="item.customerType">{{ item.customerType }}</view>
						<view class="custom-name">{{ item.name }}</view>
						<view v-if="item.enableStatus === 5" class="float_right" style="margin-right: 40rpx;margin-top: 4rpx;">
							<image src="../../static/img/start-using@2x.png" class="audit"></image>
						</view>
						<view v-else class="float_right" style="margin-right: 40rpx;margin-top: 4rpx;"><image src="../../static/img/forbidden.png" class="audit"></image></view>
					</view>
					<view class="list-cont-li">
						<text class="label">联系人</text>
						{{ item.contact[0].name || '无' }}
					</view>
					<view class="list-cont-li" style="line-height: 48rpx;height: 48rpx;">
						<text class="label">联系电话</text>
						<text @click.stop="callPhone(item.mobile)">{{ item.mobile }}</text>
						<view @click.stop="orderAdd(item)" class="float_right btn" v-if="item.status === 2 && item.enableStatus === 5">代客下单</view>
						<view @click.stop="goPage('/pagesT/customer/AddCustomer?id=' + item.id)" class="float_right btn" v-else-if="item.status === 0">完善资料</view>
						<block v-else-if="item.status === 1">
							<view @click.stop="openModel('确定要审核通过该客户吗？', '审核', item)" class="float_right btn" style="padding: 8rpx 21rpx;">审核通过</view>
						</block>
					</view>
				</view>
			</view>
			<view v-if="!customer_list.length" class="empty-view"><u-empty text="暂无客户" mode="list"></u-empty></view>
			<u-loadmore v-if="customer_list.length" :status="load_status" />
		</scroll-view>
		<addBtn v-if="$accessCheck($Access.CustomerListAddCustomer)" url="/pagesT/customer/AddCustomer"></addBtn>
		<u-popup v-model="search_show" mode="right">
			<view class="search-pop">
				<uniStatusBar></uniStatusBar>
				<view class="form-view" style="padding-top: 45px;">
					<u-form label-width="160rpx" label-position="left">
						<!-- <u-form-item label="注册来源">
							<view class="clearfix form-val" @click="openSel('from_show')">
								<text class="float_left ellipsis">{{ search_form.source ? sourceName : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue('source')">
									<u-icon :name="!search_form.source ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item> -->
						<u-form-item label="下单时间">
							<view class="clearfix form-val" @click="openSel('month_show')">
								<text class="float_left ellipsis">{{ search_form.time_value ? search_form.time_name : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue('time_value')">
									<u-icon :name="!search_form.time_value ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>
				<view class="search-btn">
					<view class="btn-li" @click="clearValue()">重置</view>
					<view class="btn-li" @click="searchConfirm">确定</view>
				</view>
			</view>
		</u-popup>
		<u-select @confirm="fromChange" v-model="from_show" :list="order_from"></u-select>
		<u-select @confirm="accountStatusChange" v-model="account_status_show" :list="account_status"></u-select>
		<SelDeparment v-model="show_department" @confirm="departmentConfirm" @cancel="departmentCancel" />
		<RegionSel v-model="region_show" @confirm="regionConfirm" @cancel="regionCancel" />
		<u-modal v-model="model_show" :show-cancel-button="true" :content="model_content" @confirm="modelConfirm" @cancel="modelCancel"></u-modal>
		<u-select v-model="month_show" :list="tabs_list1" @confirm="confirm"></u-select>
		<!-- 底部tabbar -->
		<Tabbar v-model="tabbar_current"></Tabbar>
	</view>
</template>

<script>
import RegionSel from '@/components/region/RegionSel.vue';
import SelDeparment from '@/components/SelDepartment.vue';
import uniStatusBar from '../../components/uni-status-bar.vue';
export default {
	components: {
		RegionSel,
		SelDeparment,
		uniStatusBar
	},
	data() {
		return {
			refresher_triggered: false, //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
			tabbar_current: 3,
			nav_background: {
				backgroundColor: '#fff'
			},
			model_tag: '',
			model_show: false,
			model_content: '',
			from_show: false,
			show_department: false,
			region_show: false,
			search_show: false,
			customer_list: [],
			load_status: 'nomore',
			page: 1,
			pageSize: 10,
			total: 0,
			tabs_current: 0,
			status: 2,
			salesName: '业务员',
			staffData: '',
			region_name: '',
			shopData: '',
			shop_name: '所属店铺',
			department_name: '',
			sourceName: '注册来源',
			search_form: {
				keyword: '',
				type: '',
				// provinceCode: '',
				// cityCode: '',
				// districtCode: '',
				enableStatus: 5,
				// departmentId: '',
				shopId: '', // 商铺Id
				content: '',
				salesManId: '',
				source: '',
				tag: '',
				time_name: '',
				time_value: ''
			},
			handel_data: {}, // 需要操作的客户
			order_from: [
				{
					label: 'ios',
					value: 1
				},

				{
					label: '安卓',
					value: 2
				},
				{
					label: '微信小程序',
					value: 3
				},
				{
					label: '后台创建',
					value: 4
				},
				{
					label: 'H5页面',
					value: 5
				},
				{
					label: 'pc页面',
					value: 6
				},
				{
					label: '字节跳动小程序',
					value: 8
				}
			],
			account_status: [
				{
					value: 5,
					label: '已启用'
				},
				{
					value: 4,
					label: '已禁用'
				}
			],
			tabs_list: [
				{
					value: 2,
					name: '已审核'
				},
				{
					value: 1,
					name: '待审核'
				},
				{
					value: 0,
					name: '待完善'
				}
			],
			account_status_show: false,
			account_status_name: '状态',
			tabs_list1: [
				{
					label: '当月',
					value: 0
				},
				{
					label: '当日',
					value: 1
				}
			],
			month_show: false
		};
	},
	watch: {
		staffData(val) {
			if (val) {
				this.search_form.salesManId = val.id;
				this.salesName = val.staffName;
				this.page = 1;
				this.getAllCustomer();
			}
		},
		shopData(val) {
			if (val) {
				this.search_form.shopId = val.id;
				this.shop_name = val.name;
				this.page = 1;
				this.getAllCustomer();
			}
		}
	},
	onLoad() {
		this.getAllCustomer();
	},
	methods: {
		//滚动到底部,上拉加载
		scrolltolower() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getAllCustomer();
			}
		},
		//客户审核
		updateCustomerCheckStatus() {
			this.$u.api
				.updateCustomerCheckStatus({
					id: this.handel_data.id,
					status: 2
				})
				.then(res => {
					this.getAllCustomer();
					this.$u.toast('审核成功');
				});
		},
		//代客下单
		orderAdd(item) {
			const obj = {
				shopId: item.shopId,
				userCenterId: item.userCenterId,
				customerId: item.id,
				customerName: item.name
			};
			this.goPage('/pages/order/OrderAdd?customer=' + JSON.stringify(obj));
		},
		// 状态切换
		tabsChange(index) {
			this.tabs_current = index;
			this.status = this.tabs_list[index].value;
			this.page = 1;
			this.getAllCustomer();
		},
		// 获取所有客户数据
		getAllCustomer() {
			if (!this.$accessCheck(this.$Access.CustomerListGetCustomerInfo)) {
				this.$u.toast('抱歉，您没有权限');
				return;
			}
			this.load_status = 'loading';
			this.$u.api
				.getAllCustomer({
					page: this.page,
					pageSize: this.pageSize,
					status: this.status,
					...this.search_form
				})
				.then(res => {
					// 设置当前下拉刷新状态为false
					this.refresher_triggered = false;
					if (this.page === 1) {
						this.customer_list = res.data;
					} else {
						this.customer_list = this.customer_list.concat(res.data);
					}
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				})
				.catch(err => {
					// 设置当前下拉刷新状态为false
					this.refresher_triggered = false;
				});
		},
		statusChange(row) {
			this.search_form.enableStatus = row.value;
		},
		regionConfirm(val) {
			this.search_form.provinceCode = val[0].value;
			this.search_form.cityCode = val[1].value;
			this.search_form.districtCode = val[2].value;
			let name = '';
			val.forEach(item => {
				name += item.label;
			});
			this.region_name = name;
		},
		regionCancel(val) {
			this.region_show = false;
		},
		departmentConfirm(val) {
			this.search_form.departmentId = val[val.length - 1].value;
			this.department_name = val[val.length - 1].label;
			this.search_form.salesManId = '';
			this.salesName = '';
		},
		departmentCancel(val) {
			this.show_department = false;
		},
		// 来源筛选
		fromChange(e) {
			this.search_form.source = e[0].value;
			this.sourceName = e[0].label;
			this.page = 1;
			this.getAllCustomer();
		},
		openSel(key) {
			this[key] = true;
		},
		searchConfirm() {
			this.search_show = false;
			this.page = 1;
			this.getAllCustomer();
		},
		clearValue(params) {
			if (!params) {
				this.sourceName = '注册来源';
				this.shop_name = '所属店铺';
				this.salesName = '业务员';
				this.account_status_name = '状态';
				this.search_form = {
					keyword: '',
					type: '',
					// provinceCode: '',
					// cityCode: '',
					// districtCode: '',
					enableStatus: 5,
					// departmentId: '',
					shopId: '', // 商铺Id
					content: '',
					salesManId: '',
					source: '',
					tag: '',
					time_name: '',
					time_value: ''
				};
				this.searchConfirm();
			} else {
				if (Array.isArray(params)) {
					params.forEach(item => {
						this.search_form[item] = '';
					});
					this.region_name = '';
				} else {
					this.search_form[params] = '';
				}
			}
		},
		// 打开提示框
		openModel(content, tag, row) {
			this.model_content = content;
			this.model_show = true;
			this.model_tag = tag;
			this.handel_data = row;
		},
		// 审核
		modelConfirm() {
			switch (this.model_tag) {
				case '审核':
					this.updateCustomerCheckStatus();
					break;
				case '拒绝':
					this.revokeAudit();
					break;
			}
		},
		modelCancel() {},
		accountStatusChange(e) {
			this.search_form.enableStatus = e[0].value;
			this.account_status_name = e[0].label;
			this.page = 1;
			this.getAllCustomer();
		},
		confirm(val) {
			this.search_form.time_value = val[0].value;
			this.search_form.time_name = val[0].label;
		},
		callPhone(mobile) {
			uni.makePhoneCall({
				phoneNumber: mobile
			});
		},
		// 下拉刷新
		refresherrefresh() {
			this.refresher_triggered = true;
			this.page = 1;
			this.getAllCustomer();
		}
	}
};
</script>

<style lang="scss" scoped>
.headline {
	margin-left: 20rpx;
	margin-top: 10rpx;
	margin-bottom: 18rpx;
	/*#ifdef APP-PLUS*/
	width: 710rpx;
	/*#endif*/
	/*#ifdef MP-WEIXIN*/
	width: 480rpx;
	/*#endif*/
	height: 72rpx;
}
.top-view {
	// padding-top: var(--status-bar-height);
	.tabs-view {
		width: 100%;
		background-color: #ffffff;

		.search-view {
			width: 100%;
			border-top: 1px solid #ecf0f7;
			display: flex;
			.title {
				flex: 5;
				height: 84rpx;
				text-align: center;
				font-weight: 400;
				line-height: 84rpx;
			}
		}
	}
	.explain {
		width: 100%;
		height: 76rpx;
		line-height: 76rpx;
		color: #879bba;
		font-size: 24rpx;
		padding: 0 28rpx 0 32rpx;
		transform: translateY(-6rpx);
	}
}

.list-ul {
	height: calc(100vh - 460rpx);
	z-index: 1;
	.list-li {
		width: 710rpx;
		margin: 0 auto 24rpx;
		background-color: #ffffff;
		border-radius: 8rpx;

		.title {
			line-height: 76rpx;
			border-bottom: 1px solid #ecf0f7;
			font-size: 24rpx;
			color: #cad0d7;
			font-weight: 400;

			.float_rigth {
				.custom-icon-jinru {
					margin-left: 10rpx;
					font-size: 28rpx;
				}
			}
		}

		.list-cont {
			padding-bottom: 40rpx;
			.list-cont-li {
				margin-top: 24rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				font-family: DINPro-Regular;
				font-weight: 400;
				color: #2d405e;
				border-radius: 8rpx;
				padding-left: 40rpx;
				.type-view {
					margin-right: 16rpx;
					display: inline-block;
					width: 126rpx;
					height: 40rpx;
					background: url(../../static/img/type_bg.png) no-repeat center center;
					background-size: 100% 100%;
					vertical-align: middle;
					color: #ffffff;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 40rpx;
					text-align: center;
				}
				.custom-name {
					font-family: DIN-Medium;
					display: inline-block;
					vertical-align: middle;
					width: 400rpx;
					line-height: 36rpx;
					font-weight: 600;
				}

				.audit {
					width: 78rpx;
					height: 30rpx;
				}

				.label {
					display: inline-block;
					width: 114rpx;
					font-weight: 300;
					font-size: 28rpx;
					color: #b8c0c8;
					margin-right: 30rpx;
				}

				.btn {
					width: 178rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					border: 1px solid #b8c0c8;
					font-size: 24rpx;
					font-weight: 400;
					color: #2d405e;
					border-radius: 8rpx;
					margin-right: 40rpx;
				}
			}
		}
	}
}
</style>