businessCard/xiaochengxu/pages/cardHolder/cardHolder.vue

<template>
	<view class="content">
		
		<u-navbar title="电子名片" placeholder>
			<view class="u-nav-slot relative" slot="left">
				<u-icon name="bell" size="26" @click="toNotice"></u-icon>
				<u-badge :isDot="true" type="error" class="point"></u-badge>
			</view>
		</u-navbar>
		<view class="content1 flex-row-center">
			<view class="col flex">
				<uni-icons type="scan" size="30" @click="scan"></uni-icons>
			</view>
			<view class="search flex flex-between" @click="search">
				<view class="left flex">
					<uni-icons type="search" size="24"></uni-icons>
					<text class="search-val"> {{searchVal?searchVal:'搜索名片'}}</text>
					<uni-icons type="closeempty" size="24" @click.native.stop="delSearchVal"
						v-if="searchVal"></uni-icons>
				</view>
				<view class="right">
					<uni-icons type="mic" size="24" @click.stop="micOpen"></uni-icons>
				</view>
			</view>
		</view>

		<view class="content2">
			<view class="all-type flex" @click="selectType">
				<text>{{typeName?typeName:'全部分类'}}</text>
				<uni-icons type="bottom" size="20"></uni-icons>
			</view>
		</view>
		<!-- <u-skeleton
		:animate="true"
			    rows="3"
			    title
				:loading='loading'
			></u-skeleton> -->
			<view v-if='islongPress'>
				<view @click="del">删除</view>
				<view @click='islongPress=false'>取消</view>
				<u-checkbox-group placement="column"
				@change="checkboxChange($event,'')">
					<u-checkbox :checked='checked' name='全部' :customStyle="{marginBottom: '8px'}">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			
		<mescroll-body v-if='cardHolderList'  :up="upOption" ref="mescrollRef" @init="mescrollInit" @up="upCallback" @down="downCallback">
		<view v-for='(item,index) in cardHolderList' @longpress="longpress" class="content3 flex">
			<view class="left">
				<view class="top flex-row-center">
					<image :src="item.headSculpture" mode="widthFix" class="img"></image>
				</view>
				<view class="bottom flex flex-evenly">
					<uni-icons @click="toHome(item)" type="home" size="20"></uni-icons>
					<text @click='switchType(item)'>{{item.classify?item.classifyName:'默'}}</text>
					<uni-icons @click='share(item)'  type="redo" size="20" color=''></uni-icons>
				</view>
			</view>
			<view class="right">
				<view class="row1 flex">
					<text>{{item.name}}</text>
					<text class="line"></text>
					<text>{{item.post}}</text>
					<u-checkbox-group v-if='islongPress' placement="column"
						@change="checkboxChange($event,index)">
						<u-checkbox :name='index+1' :checked='item.checked' :customStyle="{marginBottom: '8px'}">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="row2">
					{{item.companyName}}
				</view>
				<view class="row3" @click="toMap">
					<uni-icons type="redo" size="20"></uni-icons>
					<text>{{item.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</text>
				</view>
				<view class="row3">
					<uni-icons type="redo" size="20"></uni-icons>
					<text>{{item.phone}}</text>
				</view>
				<view @click='remarkEdit(item)' class="row3">
					<uni-icons type="redo" size="20"></uni-icons>
					<text >{{item.remark?item.remark:'单击添加备注'}}</text>
				</view>
			</view>
		</view>
		</mescroll-body>
		<u-picker :show="isShowType" :columns="typeColumns" keyName="circleName" title="选择分类" @close="isShowType=false"
			@cancel="isShowType=false" closeOnClickOverlay @confirm="typeConfirm"></u-picker>
		<lyuan-tx-asr ref="asr" :uploadMethod="uploadFile" @change="asrChange" @fileChange="fileChange" appId=""
			secretId="" secretKey=""></lyuan-tx-asr>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="delShow" title="提示" showCancelButton='true' @cancel="delShow=false" @confirm="delConfirm" :content='"已选中"+this.checkedList.length+"张名片，确定删除？"'></u-modal>
		<u-modal :show="modalShow" @confirm='remarkConfirm' :confirmColor="remark?'#2979ff':'#ccc'" showCancelButton='true' title="备注" >
			<view class="slot-content">
				<u--textarea v-model="remark" placeholder="输入备注，不超过150个字" ></u--textarea>
			</view>
		</u-modal>
		<view v-if='qrcodeShow' class="shade">
			<view class='qrCode'>
				<view style='text-align:right;'>
					<uni-icons @click='qrcodeShow=false' type="close" size="20"></uni-icons>
				</view>
				<image :src="currectData.qrCode" mode=""></image>
			</view>
			
		</view>
		<u-popup :show="popupshow" mode="bottom">
			<view>
				<view class="share-to">
					<text>分享到</text>
				</view>
				<view class="content">
					
					<view class="block" @click="toUrl()">
						<button class="moment">
							<text class="iconfont icon-weixin"></text>
							<!-- <image src="/static/img/moment.png" mode="aspectFill"></image>					 -->
							<text>扫码分享</text>
						</button>
					</view>
					<view class="block">
						<button class="wechat" open-type="share">
							<text class="iconfont icon-pengyouquan"></text>
							<!-- <image src="/static/img/wechat.png" mode="aspectFill"></image> -->
							<button class="shareBtn" type="default" data-name="shareBtn">
								分享给微信好友</button>
						</button>
					</view>
				</view>
				<view class="cancel" @click.stop="handleHiddenShare">
					<text>取消</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				searchVal: '',
				isShowType: false,
				loading:true,
				typeName: '',
				typeColumns: [],
				cardHolderList:[],
				currectData:[],
				type:1,
				popupshow:false,
				modalShow:false,
				remark:'',
				islongPress: false,
				checked:false,
				checkedList:[],
				delShow:false,
				qrcodeShow:false,
			};
		},
		onShow() {
			if (uni.getStorageSync("userInfo")) {
				this.userInfo = uni.getStorageSync("userInfo")
				this.init()
			} else {
				this.login()
			}
			this.searchVal = uni.getStorageSync("search_val") ? uni.getStorageSync("search_val") : ''
		},
		onShareAppMessage(res) {
			debugger
			let that = this;
			let imageUrl = that.shareUrl || '';
			if (res.from === 'button') {
			//这块需要传参，不然链接地址进去获取不到数据
				let path = `/` + that.$scope.route + `?item=` + that.$scope.options.item;
				return {
					title: '名片夹',
					path: path,
					imageUrl: imageUrl
				};
			}
			// if (res.from === 'menu') {
			// 	return {
			// 		title: '商通线上商城',
			// 		path: '/pages/tabBarPro/index/index',
			// 		imageUrl: imageUrl
			// 	};
			// }
		},
		methods: {
			toHome(item){
				uni.navigateTo({
					url: "/pages/mySet/myHome?id="+item.personalHomeId
				})
			},
			delSearchVal() {
				this.searchVal = ""
				this.mescroll.resetUpScroll()
			},
			toUrl(){
				console.log(this.currectData)
				this.popupshow=false
				this.qrcodeShow=true
			},
			share(item){
				this.currectData=item
				this.popupshow=true
			},
			async delConfirm(){
				uni.showLoading({
					title: '数据加载中',
					mask:true
				})
				
				for(var i=0;i<this.checkedList.length;i++){
					await this.$request.baseRequest('admin.unimall.cardHolderInfo', 'delete',{
						id:this.checkedList[i].data.id,
					}, failres => {
						console.log('res+++++', failres.errmsg)
						this.$refs.uToast.show({
							type: 'error',
							message: failres.errmsg,
						})
					}).then(res => {
						console.log(i,this.checkedList.length-1)
						if(i==this.checkedList.length-1){
							uni.hideLoading()
							this.$refs.uToast.show({
								type: 'success',
								message: '删除成功',
							})
							this.delShow=false
							this.islongPress=false
							this.mescroll.resetUpScroll()
						}
					})
				}
			},
			del(){
				this.delShow=true
			},
			
			longpress(){
			    console.log("长按事件",1111111111);
			    this.islongPress = true;
				
			},
			checkboxChange(e, i) {
				console.log(e,i,111111111)
				if(i===''){
					console.log(this.checked)
					this.checked = !this.checked;
					this.cardHolderList.map(item => item.checked = this.checked);
					this.$forceUpdate()
					var checkList = this.cardHolderList.filter((item) => {
							return item.checked == true
						})
					var data=checkList.map((item,index) => {return {index:index,data:item}})
					this.checkedList = JSON.parse(JSON.stringify(data))
				}else{
					if (e[0]) {
						this.checkedList.push({index:i,data:this.cardHolderList[i]})
					} else {
						var index = this.checkedList.findIndex((item) => {
							return item.index == i
						})
						this.checkedList.splice(index, 1)
					}
					if(this.checkedList.length!=this.cardHolderList.length){
						this.checked=false
					}
				}
				
				// for(var i=0;i<this.cardList.length;i++){
				// 	console.log(this.cardList[i].checked)
				// 	// if(this.cardList[i].checkedList.length>0){
				// 	// 	this.checkedList.push(i)
				// 	// }
				// }
				console.log(this.checkedList)
			},
			remarkConfirm(){
				if(this.remark){
					this.currectData.remark=this.remark
					this.$request.baseRequest('admin.unimall.cardHolderInfo', 'update',{
						cardHolderInfo:JSON.stringify(this.currectData),
					}, failres => {
						console.log('res+++++', failres.errmsg)
						this.$refs.uToast.show({
							type: 'error',
							message: failres.errmsg,
						})
					}).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: '修改备注成功',
						})
						this.modalShow=false
						this.mescroll.resetUpScroll()
					})
				}
			},
			remarkEdit(item){
				this.currectData=item
				this.modalShow=true
			},
			switchType(item){
				this.type=2
				this.currectData=item
				this.isShowType=true
			},
			typeConfirm(e){
				if(this.type==2){
					this.currectData.classify=e.value[0].circleName
					this.$request.baseRequest('admin.unimall.cardHolderInfo', 'update',{
						cardHolderInfo:JSON.stringify(this.currectData),
					}, failres => {
						console.log('res+++++', failres.errmsg)
						this.$refs.uToast.show({
							type: 'error',
							message: failres.errmsg,
						})
					}).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: '修改分类成功',
						})
						this.mescroll.resetUpScroll()
					})
				}else{
					this.typeName = e.value[0].circleName
				}
				this.isShowType = false
			},
			init(){
				this.$request.baseRequest('admin.unimall.cardClassifyInfo', 'list',{
					page:1,
					limit:9999,
					commonId:uni.getStorageSync("userInfo").id
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
				}).then(res => {
					this.typeColumns=[res.data.items]
					this.mescroll.resetUpScroll()
					console.log(this.typeColumns)
				})
			},
			upCallback(page){
				var that = this
				uni.showLoading({
						title: '数据加载中'
					})
				this.$request.baseRequest('admin.unimall.cardHolderInfo', 'list',{
					page:page.num,
					limit:page.size,
					commonId:uni.getStorageSync("userInfo").id,
					searchContent:this.searchVal
				}, failres => {
					console.log('res+++++', failres.errmsg)
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					console.log(res)
					if(page.num == 1) this.cardHolderList = [];
					let curPageLen = res.data.items.length;
					let totalPage = res.data.total;
					for (var i = 0; i < res.data.items.length; i++) {
						res.data.items[i].checked=false
						if(res.data.items[i].classify){
							res.data.items[i].classifyName=res.data.items[i].classify[0]
						}
					}
					this.cardHolderList=res.data.items
					this.loading=false
					// if(res.data.items.length>0){
					// 	for(var i=0;i<res.data.items.length;i++){
					// 	res.data.items[i].name=res.data.items[i].circleName[0]
					// 	}
					// 	var itemIndex=res.data.items.findIndex((item)=>{return item.topMarking==1})

					// 	if(itemIndex!=-1){
					// 		var data=res.data.items.splice(itemIndex,1)
					// 		if(page.num==1){
					// 			data.push({circleName:'默认分类',name:'默'})	
					// 		}
					// 		res.data.items=data.concat(res.data.items)
					// 	}else{
					// 		if(page.num==1){
					// 			res.data.items=[{circleName:'默认分类',name:'默'}].concat(res.data.items)	
					// 		}
					// 	}
					// 	this.cardTypeList=this.cardTypeList.concat(res.data.items)
					// }else{
					// 	if(page.num==1){
					// 		this.cardTypeList=[{circleName:'默认分类',name:'默'}]
					// 	 }
					// }
					
					
					this.$nextTick(() => {
						console.log(that)
					// mescroll.endSuccess(data.result);
					that.mescroll.endBySize(curPageLen, totalPage)
					});
					
					// if (res.errno == 200) {
					uni.hideLoading()
					
					// }
				})
			},
			login() {
				let that = this
				uni.login({
					"provider": "weixin",
					success: function(wxres) {
						that.$request.baseRequest('commonUserApp', 'commonUserLogin', {
							loginType: 1,
							raw: JSON.stringify(wxres)
						}, failres => {
							this.$refs.uToast.show({
								type: 'error',
								message: failres.errmsg,
							})
							uni.hideLoading()
						}).then(res => {
							uni.getUserInfo({
								provider: 'weixin',
								success: function(info) {
									console.log(info)
									res.data.nickname = info.userInfo.nickName
									res.data.head = info.userInfo.avatarUrl
									that.$request.baseRequest('commonUserApp', 'edit', {
										commonUserInfo: JSON.stringify(res.data)
									}, failres => {
										this.$refs.uToast.show({
											type: 'error',
											message: failres.errmsg,
										})
										uni.hideLoading()
									}).then(res1 => {
										uni.setStorageSync("userInfo",res1.data)
									})
								}
							})
						})
					},
					fail: function(err) {
						// 登录授权失败  
						// err.code是错误码
					}
				})
			},
			toNotice() {
				uni.navigateTo({
					url: "/pages/cardHolder/notice"
				})
			},
			micOpen: function() {
				this.$refs.asr.show();
			},
			asrChange: function(res) {
				console.log('语音识别确认结果：' + res);
			},
			fileChange: function({
				file,
				content
			}) {
				console.log('录音文件', file);
			},
			uploadFile: function(tempFilePath) {
				return new Promise((resolve, reject) => {
					//调用你的接口把音频文件转为文字
					this.$minApi.upload('txasr/SentenceRecognition', null, tempFilePath)
						.then(res => {
							if (res.code == 1) {
								resolve(res.data.Result);
							} else {
								reject(e);
							}
						})
						.catch(e => {
							reject(e);
						});
				});
			},
			search() {
				uni.navigateTo({
					url: "/pages/cardHolder/search"
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			},
			selectType() {
				this.isShowType = true
				this.type=1
			},
			scan() {
				// console.log(1)
				uni.navigateTo({
					url: "/pages/cardHolder/scancode"
				})
				// uni.scanCode({
				// 	success: function(res) {
				// 		console.log('条码类型：' + res.scanType);
				// 		console.log('条码内容：' + res.result);
						
				// 	}
				// });
			},
			toMap() {
				uni.navigateTo({
					url: "/pages/cardHolder/map"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;
	}

	.u-nav-slot {
		/deep/.u-badge {
			position: absolute;
			top: 0;
			right: 6rpx;
		}
	}

	.content1 {
		margin-top: 20rpx;
		.search {
			margin-left: 20rpx;
			border: 1px solid #ccc;
			border-radius: 50rpx;
			width: 100%;
			padding: 10rpx 30rpx;
			box-sizing: border-box;

			.left {
				.search-val {
					margin-left: 30rpx;
				}
			}
		}
	}

	.content2 {
		.all-type {
		}
	}

	.content3 {
		border: 1px solid #ccc;
		border-radius: 30rpx;
		padding: 40rpx;
		box-sizing: border-box;

		.left {
			width: 30%;

			.top {
				
				margin-bottom: 20rpx;
			}
			.img {
				width: 80%;
			}

			.bottom {
			}
		}

		.right {
			.row1 {
				.line {
					width: 1px;
					height: 20px;
					margin: 0 20rpx;
					background: black;
				}
			}
		}
	}
	.slot-content{
		width:100%;
	}
	.shade{
		background:rgba(0,0,0,0.2);
		width:100%;height:100vh;
		position:fixed;
		top:0;
		left:0;
	}
	.qrCode{
		position:absolute;
		top:50%;
		left:0;
		right:0;
		transform: translateY(-50%);
		text-align:center;
	}
	
</style>