ys-app/src/pages/business/CRM/marketInformation/infomationView.vue

<template>
	<view class="con-body">
		<view class="con-bg">
			<!-- 头部 -->
			<customHeader ref="customHeaderRef" :title="'市场信息查看'" :leftFlag="true" :rightFlag="true">
				<template #right>
				</template>
			</customHeader>

			<!-- 高度来避免头部遮挡 -->
			<view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>

			<!-- 正文内容 -->
			<view class="all-body">
				<!-- 搜索  @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear"-->
				<!-- <view class="search">
          <uni-search-bar class="custom-search" radius="28" placeholder="请输入客户名称" clearButton="auto"
                          cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" v-model="searchValue" />
          <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
        </view> -->
				<view class="search_center">
					<view class="category">
						<view class="flex_row_center_center" @click="showCate">
							<text>{{selCategory.val||'全部'}}</text>
							<image src="@/static/images/icon-notice@2x.png" mode=""></image>
						</view>
						<view class="pop_arrow" v-if="maskShow"></view>
						<view class="pop" v-if="maskShow">
							<text v-for="(item,index) in categories" :key="index"
								@click="toList(item.categoryId,item.categoryName)">{{item.categoryName}}</text>
						</view>
					</view>
					<image class="search_icon" src="@/static/images/icon-notice@2x.png"></image>
					<input class='sea_input' :focus="inputFocus" type='text' :value="inputval" placeholder="请输入搜索条件"
						@input="inputChange" @confirm='search' maxlength="50" placeholder-class="placeClass"></input>
					<image class='clear_content' v-show="inputval" @click="clearInputVal"
						src="@/static/images/icon-notice@2x.png" />
				</view>
				<text class='sea_btn' @click="btnSearch(1)">{{'搜索'}}</text>
				<!-- 分页部分  -->
				<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
					:up="upOption" :down="downOption" :fixed="false" textColor="#ffffff" bgColor="#ffffff"
					class="scroll-h" :class="{ 'loading-scroll': cssFlag }">
					<view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index"  @click="showDetail(item)">
						<view>
							<view class="report-list">
								<view class="title">信息类型:{{ item.informationType }}</view>
								
								
								<view class="r-list">
									<view class="r-name"v-if="item.cusName!=null">公司名称:{{ item.cusName }}</view>
									<view class="r-right btn-gray flex-auto" :class="item.myselfBrowsing==0?'btn-blue':'btn-green'"
										size="mini">{{item.myselfBrowsing==0?'未读':'已读'}}</view>

								</view>
								<view class="border-bottom"></view>
								
								<view class="border-bottom"></view>
								<view class="r-list">
									<view class="r-left">报告人</view>
									<view class="r-right">{{ item.createName }}</view>
								</view>
								<view class="border-bottom"></view>
								<view class="r-list">
									<view class="r-left">报告日期</view>
									<view class="r-right">{{ item.createTime }}</view>
								</view>

							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import customHeader from '@/components/customHeader.vue'
	import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
	import {
		getNavBarPaddingTop
	} from '@/utils/system.js'
	import {
		visitorReportList
	} from '@/api/business.js'
	import {
	viewingMarketInfForAllMembers
	} from '@/api/crm/api_ys.js';
	import {
		onLoad,
		onShow,
		onUnload
	} from '@dcloudio/uni-app'
	// 获取导航栏高度用于内容区域padding
	const navBarPaddingTop = ref(0);
	onMounted(() => {
		navBarPaddingTop.value = getNavBarPaddingTop() * 2;
		uni.$on('updateStatus', markVisited)
	})

	// 查询列表
	let list = ref([]);

	let searchValue = ref(null)
	//监视查询的内容的变化
	watch(searchValue, (newValue, oldValue) => {
		//变化了之后，重新查询内容
		var data = {
			pageNum: 1,
			pageSize: 10,
			searchContent: searchValue.value
		};
		viewingMarketInfForAllMembers(data).then(res => {
			if (res.code == 200) {
				//设置列表数据
				list.value = res.rows;
			}
		})
	})
	const index = ref(0)
	const categories = ref([{
		categoryId: 1,
		categoryName: '市场机会'
	}, {
		categoryId: 2,
		categoryName: '重大事项信息'
	}, {
		categoryId: 3,
		categoryName: '竞争对手信息'
	}, {
		categoryId: 4,
		categoryName: '人员变化信息'
	}, {
		categoryId: 5,
		categoryName: '重点型号任务信息'
	}, {
		categoryId: 6,
		categoryName: '通用信息'
	}])
	const selCategory = ref ({
	id: 1,
	val: ''
	})
	// 查询搜索跳转
	let handleSearch = () => {
		var data = {
			pageNum: 1,
			pageSize: 10,
			searchContent: searchValue.value
		};
		viewingMarketInfForAllMembers(data).then(res => {
			if (res.code == 200) {
				//设置列表数据
				list.value = res.rows;
			} else {
				uni.showToast({
					icon: 'none',
					title: "请求失败",
				});
				list.value = null;
			}

		})
		console.log(searchValue.value)
	}

	const mescrollRef = ref(null);
	const upOption = ref({
		page: {
			num: 0,
			size: 10
		},
		noMoreSize: 5,
		empty: {
			tip: '~ 空空如也 ~'
		},
		textLoading: '加载中...',
		textNoMore: '已经到底了'
	});

	const downOption = ref({
		auto: true,
		textInOffset: '下拉刷新',
		textOutOffset: '释放更新',
		textLoading: '刷新中...'
	});

	let cssFlag = ref(false); //控制样式
	const mescrollInit = (mescroll) => {
		cssFlag.value = true;
		mescrollRef.value = mescroll;
	};

	// 下拉刷新
	const downCallback = async (mescroll) => {
		try {
			setTimeout(async () => {
				const res = await getViewingMarketInfForAllMembers(1, upOption.value.page.size);
				cssFlag.value = false;
				list.value = res.list;
				mescroll.resetUpScroll();
			}, 500);
		} catch (error) {
			mescroll.endErr();
		} finally {
			setTimeout(async () => {
				mescroll.endSuccess();
			}, 500);
		}
	}
	// 上拉加载更多
	const upCallback = async (mescroll) => {
		try {
			setTimeout(async () => {
				const res = await getViewingMarketInfForAllMembers(mescroll.num, mescroll.size);
				if (mescroll.num === 1) {
					list.value = res.list;
				} else {
					list.value.push(...res.list);
				}
				mescroll.endBySize(res.list.length, res.total);
			}, 500);
		} catch (error) {
			mescroll.endErr();
		}
	}

	// 获取数据列表
	const getViewingMarketInfForAllMembers = (pageNum, pageSize) => {
		return new Promise(async (resolve) => {
			let param = {
				pageNum,
				pageSize
			}
			let res = await viewingMarketInfForAllMembers(param);
			resolve({
				list: res.rows,
				total: res.total
			});
		});
	}

	let Loop = ref(0)
	let now
	const visistId = ref();
	const cusName = ref();
	const cusId = ref();
	const status = ref()

	function showDetail(item) {
		uni.navigateTo({
		  url: "/pages/business/CRM/marketInformation/informationDetail?informationId=" + item.informationId + '&selValue=' + item.selValue+ '&inputval=' + item.inputval
		})
		}
		
		onUnload(() => {
		    uni.$off('updateStatus')
		})
		
	const markVisited = (informationId) => {
	    const newList = [...list.value].map(item => {
	        if (item.informationId == informationId) { 
	            return { ...item, myselfBrowsing: 1 };
	        }
	        return item;
	    });
	    list.value = newList;
	    
	};
		
</script>

<style scoped>
	.all-body {
		/* #ifdef APP-PLUS */
		top: 150rpx;
		height: calc(100vh - 75px);
		/* #endif */
		/* #ifndef APP-PLUS */
		top: 120rpx;
		height: calc(100vh);
		/* #endif */
	}

	.search {
		display: flex;
	}

	.search .btn-search {
		border: none;
		background: none;
		line-height: normal;
		color: #fff;
		line-height: 56rpx !important;
		padding: 10rpx 0 0;
		text-align: left;
		cursor: pointer;
	}

	.search .btn-search::after {
		display: none;
	}

	.search .custom-search {
		width: 80%;

	}

	.search .custom-search.uni-searchbar {
		padding-right: 0 !important;
	}

	.scroll-h {
		/* #ifdef APP-PLUS */
		height: calc(100vh - 120px);
		/* #endif */
		/* #ifndef APP-PLUS */
		height: calc(100vh - 110px);
		/* #endif */
	}

	.white-bg {
		padding-bottom: 10rpx;
	}

	.search_center {
		display: flex;
		align-items: center;
		border: none;
		flex: 1;
		height: 70rpx;
		margin-left: 20rpx;
		padding-left: 20rpx;
		border-radius: 32.5rpx;
		background-color: #f5f5f5;

		.search_icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 22rpx;
		}

		.category {
			display: flex;
			align-items: center;
			margin-right: 16rpx;
			padding-right: 16rpx;
			border-right: 2rpx solid #D4D4D4;
			position: relative;

			text {
				font-size: 13px;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}

			image {
				margin-top: 4rpx;
				width: 20rpx;
				height: 11rpx;

			}

			.pop {
				position: absolute;
				top: 50rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 40rpx 0px rgba(59, 59, 59, 0.2);
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx;
				z-index: 100;
				max-height: 566rpx;
				overflow-y: auto;

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					white-space: nowrap;
					margin: 10rpx 0;
					line-height: 56rpx;
				}
			}

			.pop_arrow {
				position: absolute;
				top: 48rpx;
				z-index: 999;

				&::after {
					position: absolute;
					content: "";
					left: 68rpx;
					top: -26rpx;
					border: 14rpx solid #fff;
					border-color: transparent transparent #fff transparent;
				}
			}
		}
	}
</style>