H5_module/promote/teamList/teamList.vue

<template>
	<view>
		<view class="search-box">
			<view class="search ddflex">
				<image src="../static/promote/images/ssico.png"></image>
				<input @input="intName" placeholder="搜索客户昵称/手机" placeholder-class="placeholder" class="ipt" />
			</view>
		</view>
		<view style="height: 85rpx;"></view>
		<!-- <view class="tab dflex bgfff">
			<block v-if="IS_secondary_members!=1">
				<view :class="'li ' + (currentTab == 0 ? 'active' : '')" data-current="0" @tap="tab">
					所有客户<text>({{count.total ? count.total : '0'}})</text></view>
				<view :class="'li ' + (currentTab == 2 ? 'active' : '')" data-current="2" @tap="tab">
					本月新增<text>({{count.monthTotal ? count.monthTotal : '0'}})</text></view>
			</block>
			<block v-if="IS_secondary_members==1">
				<view :class="'li ' + (currentTab == 0 ? 'active' : '')" data-current="0" @tap="tab">一级成员</view>
				<view :class="'li ' + (currentTab == 1 ? 'active' : '')" data-current="1" @tap="tab">二级成员</view>
			</block>
		</view> -->
		<view class="tabcon">
			<!-- <view class="search dflex" v-if="!isDirect&&IS_secondary_members==1">
				<image src="/promote/static/promote/images/ssico.png"></image>
				<input placeholder="搜索推荐人" placeholder-class="placeholder" class="flex" @input="intName"
					@confirm="intConfirm"></input>
			</view> -->
			<block v-if="pageList.length > 0">
				<view v-for="(item, index) in pageList" :key="index" class="li">
					<!-- <view class="li-new">新客户</view> -->
					<view class="infos ddflex">
						<image :src="item.avatar" mode="aspectFit" class="userimg"></image>
						<view class="info flex">
							<view class="name ddflex">
								{{ item.nickName }}
								<text v-if="item.mobile">{{ item.mobile }}</text>
								<image :src="item.isTurn == 1 ? '../static/promote/images/zhuanxs_y.png' : '../static/promote/images/zhuanxs_n.png'" mode="aspectFit"></image>
							</view>
							<view class="info-sta ddflex">
								<view class="time ddflex">
									<image src="../static/promote/images/hhr_kh_ico1.png"></image>
									{{ item.createDate }}
								</view>
								<view class="time ddflex">
									<image src="../static/promote/images/hhr_kh_ico2.png"></image>
									{{ item.source ? item.source : '微信' }}
								</view>
							</view>
							<view class="jilu" v-if="item.lastTime && item.lastBrowse">{{ item.lastTime }} {{ item.lastBrowse }}</view>
							<!-- <view class="sta">营业额：￥{{item.money}}<text>直推：{{item.person}}人</text></view> -->
							<view class="ddflex">
								<view class="edit-customer ddflex" v-if="!item.isShowMaker" @click="showMakr(item, index)">
									{{ item.tagList && item.tagList.length > 0 ? (item.tagList[0] ? item.tagList[0] : '备注') : '备注' }}
									<image src="../static/promote/images/edit_customer.png" class="edit-img"></image>
								</view>
								<view v-else class="edit-customer ddflex">
									<input
										placeholder="输入备注内容"
										placeholder-class="placeholder"
										class="beitext"
										v-text="item.tagList && item.tagList.length > 0 ? item.tagList[0] : ''"
										@blur="setMakr"
									/>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="opt ddflex">
						<view class="lis ddflex">
							<image src="../static/promote/images/hhr_kh_ico3.png"></image>
							备注
						</view>
						<view class="lis ddflex">
							<image src="../static/promote/images/hhr_kh_ico4.png"></image>
							转线索
						</view>
						<view class="lis ddflex" @tap="call" :data-index="index" v-if="item.mobile && isDirect">
							<image src="../static/promote/images/hhr_kh_ico5.png"></image>
							联系
						</view>
					</view> -->
					<!-- <view class="tuijian" v-if="!isDirect">
						推荐人<text>{{item.pname}}</text>
					</view>
					<view class="call nophone" @tap="call" :data-index="index" v-if="item.phone && isDirect">
						<image src="/static/pages/images/call.png"></image>拨打
					</view> -->
				</view>
			</block>
			<view class="nodata" v-if="ishow">
				<image :src="picUrlss + 'empty_dd.png'"></image>
				<text>暂无成员</text>
			</view>
		</view>
	</view>
</template>

<script>
// promote/teamList/teamList.js
const app = getApp();
const req = require('../../utils/request.js');

export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			currentTab: 0,
			form: {
				page: 1,
				limit: 10
			},
			pageList: [],
			isDirect: true,
			//是否显示搜索框
			searchName: '',
			isLoad: true,
			IS_secondary_members: '',
			count: '',
			ishow: false,
			isShowMaker: false,
			showMakrItem: ''
		};
	},

	components: {},
	props: {},
	onLoad: function(options) {
		if (options.tab) {
			this.setData({
				currentTab: options.tab
			});
		}

		if (options.IS_secondary_members) {
			this.setData({
				IS_secondary_members: options.IS_secondary_members
			});
		}

		if (options.isDirect) {
			this.setData({
				isDirect: JSON.parse(options.isDirect)
			});
		}

		// console.log(options);
		this.query = options;
		this.getList(this.currentTab);
		// this.getCount();
	},

	onReachBottom() {
		// console.log("=============--------------");
		this.form.page++;

		if (this.currentTab == 0) {
			this.getList(this.currentTab);
		} else {
			this.getList(this.currentTab);
			// console.log("================================== 今日和本月");
		}
	},

	methods: {
		showMakr(item, index) {
			this.showMakrIndex = index;
			this.showMakrItem = item;
			this.pageList[index].isShowMaker = true;
			this.$forceUpdate();
		},

		setMakr(e) {
			var makr = e.detail.value;
			if (!makr) {
				this.pageList[this.showMakrIndex].isShowMaker = false;
				this.$forceUpdate();
				return;
			}
			var list = [];
			list.push(makr);
			//提交备注
			req.postRequest(
				'/api/v3/user/addTag',
				{
					tag: list,
					uid: this.showMakrItem.id
				},
				data => {
					this.pageList[this.showMakrIndex].isShowMaker = false;
					this.pageList[this.showMakrIndex].tagList = list;
					console.log('log>>>>', this.pageList);
					this.$forceUpdate();
				},
				true
			);
		},

		tab(event) {
			const tabIndex = event.currentTarget.dataset.current;
			if (this.currentTab === tabIndex) return false;
			this.isLoad = true;
			this.form.page = 1;
			this.setData({
				currentTab: tabIndex,
				searchName: ''
			});
			if (tabIndex == 1)
				this.setData({
					isDirect: false
				});
			else
				this.setData({
					isDirect: true
				});
			this.getList(tabIndex);
			// console.log(tabIndex);
		},

		// getCount() {
		// 	req.getRequest('/api/distribution/partner/count', {}, data => {
		// 		this.setData({
		// 			count: data
		// 		});
		// 	});
		// },

		intName(e) {
			this.searchName = e.detail.value;
			this.isLoad = true;
			this.form.page = 1;
			this.getList(this.currentTab);
		},

		intConfirm() {},

		getList(type) {
			let isShowLoading = false;

			if (this.form.page == 1 && !isShowLoading) {
				req.loadIng('加载中');
				isShowLoading = true;
			}

			let that = this;
			// console.log("===============", that.isLoad);
			if (!that.isLoad) return false;
			// console.log("11111111111111111");
			that.isLoad = false; // if (dayType == 0) that.data.form.dayType = '';
			if (this.query.IS_secondary_members != 1) {
				// that.form.isDistri = 1;//1是供应商 0是会员
				if (type == 2) {
					that.form.dayType = 2; // that.data.form.nickName = this.data.searchName;
				} else {
					delete that.form.dayType;
				}
			} else {
				if (this.currentTab == 1) {
					that.form.type = type;
					that.form.nickName = this.searchName;
				} else {
					that.form.type = '';
					that.form.nickName = '';
				}
			}
			that.form.search = this.searchName;

			req.getRequest('/api/v3/assistant/customer', that.form, data => {
				data = data.list;
				if (data && data.length >= 10) {
					that.isLoad = true;
				}
				if (that.form.page > 1) {
					data = that.pageList.concat(data);
				}
				that.pageList = data;
				if (this.pageList && this.pageList.length <= 0) {
					that.ishow = true;
				} else {
					that.ishow = false;
				}
				if (isShowLoading) {
					uni.hideLoading();
					isShowLoading = false;
				}
			});
		},

		call(event) {
			const index = event.currentTarget.dataset.index;
			let phone = this.pageList[index].mobile;
			uni.makePhoneCall({
				phoneNumber: phone
			});
		}
	}
};
</script>
<style>
@import './teamList.css';
</style>