renshou/card/groupManage/groupManage.vue

<template>
	<view>
		<view class="tits ddflex">
			<view class="flex">全部分组
			<!-- <text>（长按支持编辑）</text> -->
			</view>
			<navigator url="/card/addGroup/addGroup?isAdd=true" hover-class="none" class="create">+ 新建分组</navigator>
		</view>

		<view class="list" v-if="manageLabelList&&manageLabelList.length>0">
			<view
				:class="'li ddflex' + (pickerUserIndex == index ? ' long' : '')"
				@longpress="onLongPress"
				class="li ddflex"
				:data-index="index"
				v-for="(item, index) in manageLabelList"
				:key="index"
				@tap="listTap(item)"
			>
				<view class="flex tover">{{ item.groupName }}</view>
				<!-- <text class="nums">{{ item.person }}</text> -->
				<image src="../../static/images/rico1.png" class="rico"></image>
			</view>
		</view>
		<view class="nodata" v-else>
			<!-- <image src="../../static/images/empty_dd.png"></image> -->
			<view>暂无分组~</view>
		</view>
		<view class="shade" v-show="showShade" @tap="hidePop">
			<view class="pop" :style="popStyle" :class="{ show: showPop }">
				<view v-for="(item, index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">{{ item }}</view>
			</view>
		</view>
		<!-- <view class="mask" @click="closePop()" v-if="isShow"></view> -->
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
export default {
	data() {
		return {
			/* 窗口尺寸 */
			winSize: {},
			/* 显示遮罩 */
			showShade: false,
			/* 显示操作弹窗 */
			showPop: false,
			/* 弹窗定位样式 */
			popStyle: '',
			/* 选择的用户下标 */
			pickerUserIndex: -1,
			/* 弹窗按钮列表 */
			popButton: ['编辑分组', '删除分组'],
			manageLabelList: '',
			longItemId: '',
			isFrist: true,
			
			cardId:null
		};
	},
	onLoad(options) {
		this.getWindowSize();

		// #ifdef H5
		document.onLong = function(e) {
			var e = e || window.event;
			e.preventDefault();
		};
		// #endif
		
		if(options.cardId){
			this.cardId = options.cardId
			uni.setNavigationBarTitle({
				title:'选择名片夹'
			})
		}
	},
	onShow() {
		this.getManageLabelList();
	},
	methods: {
		jumpUrl(url) {
			uni.navigateTo({
				url: url
			});
		},

		edit() {
			this.jumpUrl('/customer/addGroup/addGroup?groupId=' + this.manageLabelList[this.longItemId].id + '&title=' + this.manageLabelList[this.longItemId].groupName);
		},
		del() {
			this.deleteLabel();
		},

		deleteLabel() {
			console.log('deleteLabel数据>>>>>>>>>');
			req.msgConfirm('确定要删除该分组吗？', success => {
				this.deleteLabelRequest();
			});
		},

		deleteLabelRequest() {
			req.postRequest(
				'/api/v3/visiting/card/group/delete',
				{ id: this.manageLabelList[this.longItemId].id },
				json => {
					this.getManageLabelList();
				},
				true
			);
		},

		getManageLabelList() {
			req.getRequest(
				'/api/v3/visiting/card/group/list',
				{},
				json => {
					this.manageLabelList = json;
					this.isFrist = false;
				},
				this.isFrist
			);
		},

		/* 获取窗口尺寸 */
		getWindowSize() {
			uni.getSystemInfo({
				success: res => {
					this.winSize = {
						witdh: res.windowWidth,
						height: res.windowHeight
					};
				}
			});
		},
		/* 列表触摸事件 */
		listTap(item) {
			if(this.cardId){
				this.$showModal({
				    title: '提示',
				    content: '确定要移动到该分组吗？'
				})
				.then(res => {
				    let pages = getCurrentPages();
				    var prevPage = pages[pages.length - 2];
				    if (prevPage) {
				    	prevPage.$vm.changeGroup(this.cardId,item.id);
						uni.navigateBack()
				    }
				})
				.catch(err => {
				});
			}else{
				/* 因弹出遮罩问题，所以需要在遮罩弹出的情况下阻止列表事件的触发 */
				if (this.showShade) {
					return;
				}
				this.jumpUrl('/card/addGroup/addGroup?groupId=' + item.id + '&title=' + item.groupName);
				
				// this.jumpUrl('/customer/labelCustomer/labelCustomer?groupId=' + item.id + '&title=' + item.title);
			}
		},
		/* 长按监听 */
		onLongPress(e) {
			// let [touches, style, index] = [e.touches[0], '', e.currentTarget.dataset.index];
			// /* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
			// if (touches.clientY > this.winSize.height / 2) {
			// 	style = `bottom:${this.winSize.height - touches.clientY}px;`;
			// } else {
			// 	style = `top:${touches.clientY}px;`;
			// }
			// if (touches.clientX > this.winSize.witdh / 2) {
			// 	style += `right:${this.winSize.witdh - touches.clientX}px`;
			// } else {
			// 	style += `left:${touches.clientX}px`;
			// }

			// this.popStyle = style;
			// this.pickerUserIndex = Number(index);
			// this.longItemId = Number(index);
			// this.showShade = true;
			// this.$nextTick(() => {
			// 	setTimeout(() => {
			// 		this.showPop = true;
			// 	}, 10);
			// });
		},
		/* 隐藏弹窗 */
		hidePop() {
			this.showPop = false;
			this.pickerUserIndex = -1;
			setTimeout(() => {
				this.showShade = false;
			}, 250);
		},
		/* 选择菜单 */
		pickerMenu(e) {
			let index = Number(e.currentTarget.dataset.index);
			if (index == 0) {
				//编辑
				this.edit();
			} else if (index == 1) {
				//删除
				this.del();
			}
			/*
			 因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
			 如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
			 */
			this.hidePop();
		}
	}
};
</script>

<style>
@import './groupManage.css';
</style>