FE_DQ-Client-Mini-Code/pages/customer/customer.vue

<template>
	<view>		
		 <mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">	
			<!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<view class="sticky-tabs">
				<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
			</view>
			
			<!-- 搜索  -->
			<view class="cu-bar bg-white search">
				<view class="search-form round">
					<input v-model="keyword" @confirm="keywordSearch" type="text" placeholder="输入搜索的关键词" confirm-type="search"></input>
					<text class="cuIcon-search"></text>
				</view>
			</view>
			
			<view class="add-customer mat15 flex-between">
				<text>共{{totals}}人</text>
				<view>
					<button class="mini-btn" type="primary" size="mini" @click="goto('/pages/addcustomer/addcustomer?cusType=' + cusType)"><text class="cuIcon-add mar-icon"></text>添加</button>
				</view>
			</view>
			
			<!-- 数据列表 -->
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur1':''" v-for="(item,index) in cusData" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="good-list">
						<view class="charge" :id="'index-' + item.name" :data-index="index">
							<navigator hover-class='none' :url="'/pages/addcustomer/addcustomer?id=' + item.id + '&companyId=' + item.companyId + '&cusType=' + cusType"
							 class="nav-li" navigateTo :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
								<view class="charge-title flex-between">
									<text>{{item.name}}</text>
								</view>
								<view class="charge-text">
									<view>
										<text class="label-text">客户编号：</text>
										<text class="mgl30">{{item.code}}</text>
									</view>
									<view>
										<text class="label-text">联系电话：</text>
										<text class="mgl30">{{item.phone}}</text>
									</view>
									<view>
										<text class="label-text">客户经理：</text>
										<text class="mgl30">{{item.manager}}</text>
									</view>
									<view>
										<text class="label-text">客户类型：</text>
										<text class="mgl30">{{item.type}}</text>
									</view>
									<view>
										<text class="label-text">所属部门：</text>
										<text class="mgl30">{{item.departments}}</text>
									</view>
								</view>
							</navigator>
						</view>
					</view>
					<view class="move1 foot-btn">
						<button class="mini-btn round def-btn mar-lr" type="primary" size="mini" @click="delCustomer(index,item)">删除</button>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	// import {querycustomerList} from '@/js_sdk/zhouWei-request/requestConfig';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {apiSearch} from "@/api/mock.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabs:[
					{name:'全部', value: ''},
					{name:'个人', value: 0},
					{name:'企业', value: 1}
					],
				tabIndex: 0, // 当前菜单下标
				cusData: [],
				totals: 0,
				
				page: {
					num: 1,
					size: 10,
				},
				keyword: '',//搜索关键词
				cusType: '',//客户类型
				
				listTouchStart: 0,
				listTouchDirection: null,
				modalName: null
			};
		},
		methods: {
			//搜索框搜索
			keywordSearch(e){
				this.keyword = e.detail.value
				this.upCallback(this.page)
			},
			//删除客户
			delCustomer(index,item){
				let _this = this
				uni.showModal({
				    title: '提示',
				    content: '是否删除该客户',
				    success: function (res) {
				        if (res.confirm) {
							let arr = []
							arr.push(item.id)
							_this.$http.post('/api-crms/crms/workbench/delete',arr).then(res => {
								_this.getData()
								uni.showToast({title: '删除成功'})
							}).catch(function (error) {});				       
				        } else if (res.cancel) {}
				    }
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.$http.get('/api-crms/crms/customer/queryList',{
					page: page.num,
					size: page.size,
					codeOrName: this.keyword,
					customerType: this.cusType,
					createTime: '',
					startTime: '',
					endTime: ''
				}).then(res => {
					if(page.num == 1) this.cusData = []; //如果是第一页需手动制空列表					
					res.data.list.map((e) => {
						e.type = e.type == 0 ? '个人' : '企业';
						if (e.departments) {
							e.departments = e.departments.join(',');
						}
					});
					this.cusData = this.cusData.concat(res.data.list); //追加新数据
					this.mescroll.endSuccess(res.data.list); // 隐藏加载状态栏
					this.totals = res.data.totalCount;
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})

			},
			// 切换菜单
			tabChange (index) {
				this.cusType = this.tabs[index].value;//当前下标的值
				this.keyword = '';
				this.cusData = []; // 置空列表,显示加载进度条
				this.mescroll.resetUpScroll()
			},
			
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		},
	}
</script>

<style lang="scss" scoped>
.cu-bar .search-form{
	border: 2rpx solid #00B9FF;
	border-radius: 20rpx;
	background-color: #fff;
	margin: 0 50rpx;
	height: 72rpx;
	line-height: 72rpx;
	margin-top: 20rpx;
	input{
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 40rpx;
	}
	.cuIcon-search{
		margin: 0 20rpx;
	}
}
.add-customer{
	padding: 0 50rpx;
	button{
		background-color: #00B9FF;
		border-radius: 30rpx;
		.mar-icon{
			margin-right: 10rpx;
		}
	}
}
</style>