intelligentGroup/pageTwo/product/list.vue

<template>
	<view class="content">
		<!-- 搜索 -->
		<piker-search @handleSearch="handleSearch" :placeholder='type==3?"找产品":"找供应"' :width="'100'"
			:isAddress="true"></piker-search>

		<!-- 供求信息 -->
		<view class="tabbar" v-if="type!=3">
			<view :class="[active==1?'active':'']" @click="handleActive(1)">供货大厅</view>
			<view :class="[active==2?'active':'']" @click="handleActive(2)">采购大厅</view>
		</view>

		<!-- 列表 -->
		<view class="box" :class="[type==3?'marginTop':'']">
			<list :isName="true" :list="list" :isMoney="isMoney" @handleDetail="handleDetail" v-if="list.length"></list>
			<view class="nolist" v-else>
				<image src="../../static/none.png"></image>
				<text>暂无数据</text>
			</view>
		</view>

		<!-- 发布 -->
		<view class="fabu" @click="handlefabu">
			<image src="../../static/f.png"></image>
			<!-- <uni-icons type="paperplane" color="#fff" size="30"></uni-icons>
			<text>发布</text> -->
		</view>
		<!-- 联系人弹框 -->
		<secratary></secratary>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import pikerSearch from "../../components/search.vue"
	import list from "@/components/productList.vue"
	export default {
		data() {
			return {
				type: 1, //1商品展示，2供求信息
				page: 1,
				list: [],
				lastPage: 1,
				active: 1,
				isMoney: true,
				name: "",
				province: "",
				city: "",
				industryid: "",
				token: ""
			}
		},
		computed: {
			...mapState(["user"]),
		},
		components: {
			list,
			pikerSearch
		},
		onLoad(options) {
			let that = this
			this.type = options.type
			this.handleList()
			that.token = uni.getStorageSync('token')
			uni.setNavigationBarTitle({
				title: this.type == 3 ? "产品展示" : '供求信息'
			});
		},
		onShow() {
			this.$store.commit("changeSecratary", false);
		},
		onReachBottom() {
			let that = this
			console.log("this.lastPage", this.lastPage)
			if (!this.lastPage || this.page >= this.lastPage) {
				uni.showToast({
					title: '没有更多数据！',
					icon: 'none'
				})
				return
			}
			this.page++
			this.handleList()
		},
		methods: {
			handleActive(ind) {
				this.active = ind
				this.list = []
				this.isMoney = ind == 1 ? true : false
				this.handleList()
			},
			// 列表
			handleList() {
				let that = this
				that.$model.getProductList({
					name: that.name,
					province: that.province,
					city: that.city,
					industryid: that.industryid,
					pageNo: that.page,
					pageSize: 10,
					type: this.type == 3 ? 3 : this.active == 1 ? 8 : 9
				}).then(res => {
					if (res.code == 0) {
						that.list = this.list.concat(res.data.rows)
						that.lastPage = res.data.totalpage
					} else {
						that.$tools.msg(res.message);
					}
				});
			},
			// 发布
			handlefabu() {
				let that = this
				if (!uni.getStorageSync('token')) {
					that.$tools.msg("注册/登录后查看更多")
					return
				}
				let type = this.type == 3 ? 3 : this.active == 1 ? 8 : 9
				if (that.user.authlist.length) {
					let found = that.user.authlist.find(ite => ite.code.indexOf('product:submit') != -1 || ite.code
						.indexOf('supply:submit') != -1);
					if (found !== undefined) {
						uni.navigateTo({
							url: "/pageTwo/me/addNeeds?status=add&type=" + type
						})
					} else {
						that.$tools.msg("加入我们获得更多权限！")
					}
				} else {
					that.$tools.msg("加入我们获得更多权限！")
				}
				console.log("发布", that.user.authlist)
			},
			// 详情
			handleDetail(item) {
				let that = this
				let type = this.type == 3 ? 3 : this.active == 1 ? 8 : 9
				console.log("详情", this.active)
				// if (!uni.getStorageSync('token')) {
				// 	that.$tools.msg("注册/登录后查看更多查看更多")
				// 	return
				// }
				that.$model.getProductDetail({
					id: item.id,
					type: type
				}).then(res => {
					if (res.code == 0) {
						res.data.type = type
						uni.navigateTo({
							url: "/pageTwo/product/detail?type=" + type + '&id=' + item.id
						})
					} else {
						that.$tools.msg(res.message);
					}

				});
			},
			// 搜索
			handleSearch(name, province, city, industryid) {
				let that = this
				// if (!uni.getStorageSync('token')) {
				// 	that.$tools.msg("注册/登录后查看更多查看更多")
				// 	return
				// }
				this.name = name
				this.province = province
				this.city = city
				this.industryid = industryid
				this.list = []
				this.page = 1
				console.log("搜索返回", this.name, this.province, this.city, this.industryid)
				this.handleList()
			},
		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: 100%;
		margin-top: 15px;
	}

	.marginTop {
		margin-top: 85px;
	}

	.tabbar {
		width: 100%;
		margin-top: 75px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
		background-color: #fff;

		view {
			font-size: 16px;
			height: 40px;
			line-height: 40px;
			padding: 0 25px;
			text-align: center;

		}

		.active {
			color: $blue;
			font-weight: bold;
			border-bottom: 2px solid $blue;
		}
	}

	.fabu {
		position: fixed;
		right: 15px;
		width: 60px;
		height: 60px;
		// color: #E8CDA9;
		// background: #2C2C34;
		bottom: 20%;
		border-radius: 50%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 1px 5px 2px #dfe2e1fc;

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

		text {
			width: 100%;
			text-align: center;
			margin-top: -15px;
			display: inline-block;
		}
	}

	.tabbar::before {
		content: "";
		position: absolute;
		left: 50%;
		height: 40px;
		width: 1px;
		background-color: #dfdfdf;
	}

	/deep/.serachBox {
		height: 80px !important;
	}
</style>