intelligentGroup/pages/index/searchList.vue

<template>
	<view class="content">
		<!-- 搜索 -->
		<view class="serachBox">
			<view class="serach-box">
				<view class="searchInput">
					<input placeholder="请输入关键字进行搜索   " class="city-serach-input" v-model="name" />
					<uni-icons v-if="name" @click="handlecolse()" type="close" size="26px"></uni-icons>
				</view>
				<view class="searchBtn" @click="handleSerach">
					<icon class="iconfont icon-icon-test2 size20"></icon>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="box" v-if="name">
			为您展示包含“<text class="bold orangecolor">{{name}}</text>”的内容
		</view>
		<view class="list" v-for="(ite,ind) in list" @click="handledetail(ite)" v-if="list.length">
			<!-- 资讯 -->
			<view class="newslist" v-if="ite.ptype==1||ite.ptype==4||ite.ptype==7">
				<view class="right">
					<image :src="ite.data.headimg" mode="aspectFit"></image>
				</view>
				<view class="left">
					<view class="title">
						{{ite.data.title}}
					</view>
				</view>
				<view class="time" v-if="ite.ptype!=4">
					<view class="mr-10 size12 c999">
						<icon class="iconfont icon-icon-test1"></icon>
						{{ite.data.createdtime}}
					</view>
					<view class="size12 c999">
						<icon class="iconfont icon-icon-test"></icon>
						{{ite.data.browsecnt}}次浏览
					</view>
				</view>
				<view class="time" v-if="ite.ptype==4">
					<view class="mr-10">
						<uni-icons type="location-filled" size="20"></uni-icons>
						{{ite.data.province}}{{ite.data.city}}{{ite.data.area}}{{ite.data.address}}
					</view>
					<view>
						<icon class="iconfont icon-icon-test1"></icon>
						{{ite.data.starttime}}至{{ite.data.endtime}}
					</view>
				</view>
			</view>
			<!-- 商品、供需 -->
			<view class="productList" v-if="ite.ptype==3||ite.ptype==8||ite.ptype==9">
				<view class="name">
					<view class="post">
						<image :src="ite.data.userinfo.avatar" class="mr-10"></image>
						<view class="bold size16 mr-10">{{ite.data.userinfo.name}}</view>
						<text>{{ite.data.userinfo.posname}}</text>
					</view>
				</view>
				<view class="info">
					<view class="bold size16 title">
						{{ite.data.title}}
					</view>
					<view class="mt-5 c999 size12">{{ite.data.desc}}</view>
					<view class="image" v-if="ite.ptype!=9">
						<image v-for="(it,id) in ite.data.pics" :src="it.url" mode="aspectFit"></image>
					</view>
					<view class="address" v-if="ite.ptype!=9">
						<text class="mr-10">行业：{{ite.data.industryname}}</text>
						<text>地址：{{ite.data.province}}{{ite.data.city}}{{ite.data.area}}{{ite.data.address}}</text>
					</view>
					<view class="money mt-10" v-if="ite.ptype!=9">
						<text class="redcolor size16 mr-5 bold">会员价:￥{{ite.data.vipprice}}</text>
						<text class="size12 c999">市场价:￥{{ite.data.price}}</text>
						<text class="call" @click="$tools.getCall(user.authlist,ite.data.userinfo.phone)">
							<icon class="iconfont icon-dianhua1 mr-10"></icon>
							拨打电话
						</text>
					</view>
				</view>
			</view>
			<!-- 企业名录 -->
			<view class="phonelist" v-if="ite.ptype==2">
				<view class="left">
					<image src="../../static/logo.png" mode="aspectFit"></image>
				</view>
				<view class="right">
					<view class="name">
						<text>{{ite.data.username}}</text>{{ite.data.pos}}
					</view>
					<view class="corporate c999">{{ite.data.name}}</view>
				</view>
				<view class="tell" @click="$tools.getCall(user.authlist,ite.data.mobile)" @click.stop>
					<image src="../../static/tall.png"></image>
				</view>
			</view>
			<!-- 领导风采 -->
			<view class="fenglist" v-if="ite.ptype==10">
				<view class="left">
					<image :src="ite.data.avatar" mode="aspectFit"></image>
				</view>
				<view class="right">
					<view>
						<text class="name">{{ite.data.name}}</text>
						<text class="post">{{ite.data.posname}}</text>
					</view>
					<view class="c999 place">{{ite.data.composname}}<text v-if="ite.place"
							class="ml-5 mr-5">|</text>{{ite.place}}</view>
					<view class="c999">{{ite.data.mobile}}</view>
					<view class="c999">{{ite.data.province}}{{ite.data.city}}{{ite.data.area}}{{ite.data.address}}
					</view>
				</view>
			</view>
		</view>
		<view class="nolist" v-if="!list.length">
			<image src="../../static/none.png"></image>
			<text>暂无数据</text>
		</view>
		<!-- 秘书处弹框 -->
		<secratary></secratary>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				list: [],
				page: 1,
				lastPage: 1,
				name: "",
				image: [],
			}
		},
		computed: {
			...mapState(["user"]),
		},
		onLoad(options) {
			console.log(options.ite)
			this.name = options.ite
			this.handleList()
		},
		onReachBottom() {
			let that = this
			if (!this.lastPage || this.page >= this.lastPage) {
				uni.showToast({
					title: '没有更多数据！',
					icon: 'none'
				})
				return
			}
			this.page++
			this.handleList()
		},
		methods: {
			// 搜索
			handleSerach() {
				let that = this
				that.page = 1
				that.list = []
				that.handleList()
			},
			//取消搜索
			handlecolse() {
				let that = this
				that.name = ""
				that.page = 1
				that.list = []
				that.handleList()
			},
			// 列表
			handleList() {
				let that = this
				return that.$model.getSearchList({
					keyword: that.name,
					pageNo: that.page,
					pageSize: 10,
				}).then((res) => {
					console.log("搜索列表", res)
					if (res.code != 0) return
					that.list = this.list.concat(res.data.rows)
					that.lastPage = res.data.totalpage

				})
			},
			// 详情
			handledetail(ite) {
				let that = this
				// 资讯，活动，党建
				if (ite.ptype == 1 || ite.ptype == 4 || ite.ptype == 7) {
					that.handleActive(ite.ptype, ite.sid)
					return
				}
				// 商品，供货，需求
				if (ite.ptype == 3 || ite.ptype == 8 || ite.ptype == 9) {
					that.handleDetail(ite.ptype, ite.sid)
					return
				}
				//企业名录，领导风采
				if (ite.ptype == 2 || ite.ptype == 10) {
					uni.navigateTo({
						url: "/pages/phoneList/detail?id=" + ite.sid
					})
					return
				}
			},
			// 资讯详情
			handleActive(type, id) {
				let that = this
				return that.$model.getInfoDetail({
					id: id,
					type: type
				}).then((res) => {
					console.log("资讯列表", res)
					if (res.code != 0) return
					res.data.type = type
					that.$tools.NewsPtype(res.data)

				})
			},
			// 商品详情
			handleDetail(type, id) {
				let that = this
				that.$model.getProductDetail({
					id: id,
					type: type
				}).then(res => {
					if (res.code == 0) {
						res.data.type = type
						uni.navigateTo({
							url: "/pageTwo/product/detail?type=" + type + '&id=' + id
						})
					} else {
						that.$tools.msg(res.message);
					}

				});
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #fff;
	}

	.box {
		margin-top: 45px;
	}

	.fenglist {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 15px 0;
		border-bottom: 1px solid #dfdfdf;

		.left {
			width: 85px;
			height: 110px;
			border: 1px solid #dfdfdf;

		}

		.right {
			margin-left: 10px;
			width: calc(100% - 100px);
			height: 112px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			view {
				width: 100%;
				display: flex;
				align-items: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.name {
				color: #000;
				font-size: 16px;
				margin-right: 10px;
				font-weight: bold;
				max-width: 50%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.post {
				width: auto;
				display: inline-block;
				background-color: #F7B133;
				text-align: center;
				font-size: 12px;
				padding: 2px 10px;
				border-radius: 5px;
				color: #fff;
				margin-left: 15px;
			}

			.place {
				text {
					position: inherit;
					padding-left: 0;
				}
			}
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.productList {
		margin-bottom: 15px !important;
	}
</style>