上传文件至 'pages/mine/customer'

pages/mine/customer/list copy.vue

@@ -0,0 +1,112 @@
+<template>
+	<view class="app-container">
+		<view class="list-container">
+			<block v-for="(item, index) in customerList" :key='index'>
+				<view class="item">
+					<view>客户姓名：{{item.nickName}}</view>
+					<view>客户电话：{{item.mobile}}</view>
+					<view>加入时间：{{item.serviceTime | dateToYYmmdd}}</view>
+				</view>
+			</block>
+		</view>
+		<no-data v-if="!customerList.length" :showText="'暂无客户'"></no-data>
+		<loading-text v-if="customerList.length"  :loading="loading" :noMore="noMore" ></loading-text>
+	</view>
+</template>
+
+<script>
+	import {mapState} from 'vuex';
+	
+	export default {
+		data() {
+			return {
+				customerList: [],
+				pageNum: 1,
+				pageSize: 10,
+				noMore: false,
+				loading: false,
+			}
+		},
+		
+		computed:{
+			...mapState(['userInfo', 'isLogin', 'userId'])
+		},
+		
+		onLoad() {
+			this.getCustomerList();
+		},
+		
+		// 下拉刷新
+		onPullDownRefresh() {
+			this.pageNum = 1;
+			this.getCustomerList();
+		},
+		
+		// 上拉加载
+		onReachBottom() {
+			this.getCustomerList(1);
+		},
+		
+		methods: {
+			// 获取商品列表
+			getCustomerList(loadMore) {
+				if(this.noMore && loadMore)return;
+				this.noMore = false
+				if(!loadMore){
+					this.pageNum = 1;
+				}else{
+					this.loading = true;
+				}
+				this.$axios({
+					url: '/user/customer',
+					method: 'get',
+					params: {
+						pageNum: this.pageNum,
+						pageSize: this.pageSize,
+						userId: this.userId,
+					},
+					isLoading: !loadMore
+				}).then(res => {
+					let _list = res.data.records;
+					let pageTotal = res.data.pages;
+					if(this.pageNum >= pageTotal){
+						this.noMore = true;
+					}
+					if (_list.length) {
+						this.pageNum += 1
+					}
+					if (loadMore) {
+						this.customerList = this.customerList.concat(_list);
+						this.loading = false;
+					} else {
+						this.customerList = _list;
+					}
+					
+					uni.stopPullDownRefresh();
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+		box-sizing: border-box;
+	}
+	.list-container {
+		padding: 20rpx;
+		.item {
+			background: #FFFFFF;
+			margin-bottom: 20rpx;
+			border-radius: 20rpx;
+			padding: 20rpx;
+			font-size: 28rpx;
+			height: 180rpx;
+			display: flex;
+			flex-direction: column;
+			box-sizing: border-box;
+			justify-content: space-between;
+		}
+	}
+</style>

pages/mine/customer/list.vue

@@ -0,0 +1,160 @@
+<template>
+	<view class="app-container">
+		<view class="list-container">
+			<block v-for="(item, index) in customerList" :key='index'>
+				<view class="item">
+					<view class="row">客户姓名：{{item.nickName}}</view>
+					<view class="row">客户电话：{{item.mobile}}</view>
+					<view class="row">加入时间：{{item.serviceTime ? (item.serviceTime | dateToYYmmdd) : ''}}</view>
+					<view class="row">最近访问时间：{{item.lastAccessTime || ''}}</view>
+					<view class="title">客户标签</view>
+					<view class="tags" @tap="toChooseTag(item.unionId)">
+						<view class="left" v-if="item.allTags && item.allTags.length > 0">
+							<block v-for="(it, idx) in item.allTags" :key='idx'>
+								<text>{{it.tagName}}</text>
+							</block>
+						</view>
+						<view class="no" v-else>添加标签</view>
+						<image src="@/static/icon/right.png"></image>
+					</view>
+				</view>
+			</block>
+		</view>
+		<no-data v-if="!customerList.length" :showText="'暂无客户'"></no-data>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+
+	export default {
+		data() {
+			return {
+				customerList: [],
+			}
+		},
+
+		computed: {
+			...mapState(['userInfo', 'isLogin', 'userId'])
+		},
+
+		onLoad() {
+			this.getCustomerList();
+
+			uni.$on('refreshCustomerData', () => {
+				this.getCustomerList();
+			})
+		},
+
+		// 下拉刷新
+		onPullDownRefresh() {
+			this.getCustomerList();
+		},
+
+		methods: {
+			// 获取客户列表
+			getCustomerList() {
+				this.$axios({
+					url: '/user/customer',
+					method: 'get',
+					params: {
+						userId: this.userId,
+						pageNum: 1,
+						pageSize: -1
+					},
+				}).then(res => {
+					if (res.data && res.data.length > 0) {
+						res.data.forEach(item => {
+							item.allTags = item.tags.concat(item.customtags);
+						})
+					}
+					this.customerList = res.data || [];
+
+					uni.stopPullDownRefresh();
+				})
+			},
+
+			// 去选择标签
+			toChooseTag(unionId) {
+				uni.navigateTo({
+					url: '/pages/mine/customer/tag?unionId=' + unionId
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+		box-sizing: border-box;
+	}
+
+	.list-container {
+		padding: 20rpx;
+
+		.item {
+			background: #FFFFFF;
+			margin-bottom: 20rpx;
+			border-radius: 20rpx;
+			padding: 20rpx;
+			font-size: 28rpx;
+			display: flex;
+			flex-direction: column;
+			box-sizing: border-box;
+
+			.row {
+				margin-bottom: 10rpx;
+			}
+
+			.title {
+				margin-top: 10rpx;
+			}
+
+			.tags {
+				margin-top: 8rpx;
+				padding: 16rpx 20rpx 6rpx;
+				border-radius: 10rpx;
+				background: #F1F1F1;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.left {
+					text {
+						display: inline-block;
+						font-size: 24rpx;
+						padding: 0 16rpx;
+						height: 48rpx;
+						line-height: 48rpx;
+						border-radius: 10rpx;
+						background: #FFD6BB;
+						color: #FE781F;
+						border: 1px solid rgba($color: #FE781F, $alpha: 0.4);
+						margin-right: 10rpx;
+						margin-bottom: 10rpx;
+
+						&:last-child {
+							margin-right: 0;
+						}
+					}
+				}
+
+				.no {
+					color: #666666;
+					margin-bottom: 10rpx;
+				}
+
+				image {
+					flex-shrink: 0;
+					width: 14rpx;
+					height: 28rpx;
+					margin-left: 10rpx;
+					margin-bottom: 10rpx;
+				}
+			}
+		}
+	}
+</style>

pages/mine/customer/tag.vue

@@ -0,0 +1,255 @@
+<template>
+	<view class="app-container">
+		<view class="list-container">
+			<block v-for="(item, index) in tagList" :key='index'>
+				<view class="item">
+					<view class="top">
+						<view class="title">{{item.tagGroupName}}</view>
+					</view>
+					<view class="tags">
+						<block v-for="(it, idx) in item.tags" :key='idx'>
+							<view class="tag" :class="it.tagged ? 'current':''" @tap="changeTag(index, idx)">{{it.tagName}}</view>
+						</block>
+					</view>
+				</view>
+			</block>
+			
+			<view class="item">
+				<view class="top">
+					<view class="title">自定义标签</view>
+				</view>
+				<view class="tags">
+					<block v-for="(item, index) in customTagList" :key='index'>
+						<view class="tag current">{{item}}<image src="@/static/icon/close2.png" class="close" @tap="deleteTag(index)"></image></view>
+					</block>
+					<view class="tag add" @tap="isShowDialog = true"><image src="@/static/icon/add.png"></image>新建标签</view>
+				</view>
+			</view>
+		</view>
+		
+		<view class="bottom-container">
+			<view class="button" @tap="submitForm">保存</view>
+		</view>
+		
+		<view class="global-mask" v-show="isShowDialog"></view>
+		<view class="global-dialog" v-show="isShowDialog" style="top: 40%;">
+			<view class="title">新建标签</view>
+			<view class="input">
+				<input type="text" placeholder="标签名称" v-model="newTagName">
+			</view>
+			<view class="btn">
+				<view class="left" @tap="isShowDialog = false">取消</view>
+				<view class="right" @tap="addTag()">确定</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				unionId: null,
+				tagList: [],
+				customTagList: [],
+				isShowDialog: false,
+				newTagName: '',
+				
+				oldTagIds: [],
+			}
+		},
+		
+		onLoad({unionId}) {
+			this.unionId = unionId;
+			
+			this.getTagList();
+		},
+		
+		methods: {
+			// 获取标签列表
+			getTagList() {
+				this.$axios({
+					url: '/tag/wx/tag/list',
+					method: 'get',
+					params: {
+						unionId: this.unionId
+					},
+				}).then(res => {
+					this.tagList = res.data.tagGroupBeanList;
+					this.customTagList = res.data.tagNameList;
+					
+					for (let i = 0; i < this.tagList.length; i++) {
+						for (let j = 0; j < this.tagList[i].tags.length; j++) {
+							if(this.tagList[i].tags[j].tagged) {
+								this.oldTagIds.push(this.tagList[i].tags[j].tagId);
+							}
+						}
+					}
+					console.log(this.oldTagIds);
+				})
+			},
+			
+			// 新建标签
+			addTag() {
+				if(!this.newTagName) {
+					return this.$toast('请填写标签名称');
+				}
+				this.customTagList.push(this.newTagName);
+				this.newTagName = '';
+				this.isShowDialog = false;
+			},
+			
+			// 删除标签
+			deleteTag(index) {
+				this.customTagList.splice(index, 1);
+			},
+			
+			// 切换标签
+			changeTag(index, idx) {
+				this.tagList[index].tags[idx].tagged = !this.tagList[index].tags[idx].tagged;
+			},
+			
+			// 保存
+			submitForm() {
+				let tagList = [];
+				let oldTagIds = this.oldTagIds;
+				let newTagIds = [];
+				let delTagIds = [];
+				// 查出选中的标签
+				for (let i = 0; i < this.tagList.length; i++) {
+					for (let j = 0; j < this.tagList[i].tags.length; j++) {
+						if(this.tagList[i].tags[j].tagged) {
+							tagList.push(this.tagList[i].tags[j]);
+							newTagIds.push(this.tagList[i].tags[j].tagId);
+						}
+					}
+				}
+				// 查出被删除的标签
+				for (let k = 0; k < oldTagIds.length; k++) {
+					if(newTagIds.indexOf(oldTagIds[k]) < 0) {
+						delTagIds.push(oldTagIds[k]);
+					}
+				}
+				
+				let params = {
+					unionId: this.unionId,
+					saveTags: this.customTagList,
+					delTags: delTagIds,
+					addTags: tagList
+				}
+				this.$axios({
+					url: '/tag/custom/edit',
+					type: 'application/json',
+					params,
+					isLoading: 1,
+				}).then(res => {
+					this.$successToast('操作成功');
+					setTimeout(() => {
+						uni.$emit('refreshCustomerData');
+						uni.navigateBack({
+							delta: 1
+						})
+					}, 1000)
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+		padding: 20rpx 20rpx 120rpx;
+		box-sizing: border-box;
+	}
+	.list-container {
+		.item {
+			border-bottom: 1px solid #E5E5E5;
+			.top {
+				.title {
+					font-size: 28rpx;
+					color: #666666;
+					line-height: 70rpx;
+				}
+			}
+			.tags {
+				display: flex;
+				flex-wrap: wrap;
+				.tag {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 24rpx;
+					padding: 0 16rpx;
+					height: 48rpx;
+					line-height: 48rpx;
+					border-radius: 10rpx;
+					margin-right: 20rpx;
+					margin-bottom: 20rpx;
+					background: #ffffff;
+					color: #666666;
+					border: 1px solid #eaeaea;
+					.close {
+						width: 20rpx;
+						height: 20rpx;
+						display: block;
+						margin-left: 20rpx;
+					}
+					&:last-child {
+						margin-right: 0;
+					}
+					&.current {
+						background: #FFD6BB;
+						color: #FE781F;
+						border: 1px solid rgba($color: #FE781F, $alpha: 0.4);
+					}
+					&.add {
+						image {
+							width: 20rpx;
+							height: 20rpx;
+							display: block;
+							margin-right: 10rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+	.global-dialog {
+		.input {
+			display: flex;
+			justify-content: center;
+			margin-bottom: 50rpx;
+			input {
+				width: 500rpx;
+				height: 84rpx;
+				background: #F3F3F3;
+				border-radius: 10rpx;
+				padding: 0 20rpx;
+			}
+		}
+	}
+	.bottom-container {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 100rpx;
+		background: #FFFFFF;
+		padding: 0 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		box-sizing: border-box;
+		.button {
+			width: 100%;
+			height: 72rpx;
+			text-align: center;
+			line-height: 72rpx;
+			border-radius: 72rpx;
+			background: linear-gradient(-90deg,#ff3f42 0%, #fe781f 100%);
+			font-size: 28rpx;
+			color: #FFFFFF;
+		}
+	}
+</style>