xwc/pages/shop_street/shop_street.vue

<template>
	<view class="shop-street">
		<mescroll-body v-if="appConfig.shop_street_hide" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :isshow="false">
			<view class="shop-street-content">
				<view class="search"><u-search v-model="keyword" @search="onReflesh" bg-color="#F4F4F4"
						placeholder="搜索关键词"></u-search></view>
				<view class="main">
					<scroll-view class="bg-white content" :scroll-y="true" :scroll-with-animation="true"
						style="width: 30%;">
						<view class="store-category p-t-20">
							<!-- <view class="category-item flex-col col-center" @tap="changeActive(-1)">
								<view class="icon-wrap"
									:style="{ borderColor: active == -1 ? colorConfig.primary : '' }">
									<u-image width="68rpx" height="68rpx" border-radius="60rpx"
										src="/static/images/icon_shop_cate.png" />
								</view>
								<view class="xs m-t-10" :class="{ primary: active == -1 }">全部</view>
							</view> -->
							<view class="category-item flex-col col-center" v-for="(item, index) in shopCategory"
								:key="index" @tap="changeActive(index)">
								<view class="icon-wrap"
									:style="{ borderColor: active == index ? colorConfig.primary : '' }">
									<u-image width="68rpx" height="68rpx" border-radius="60rpx" :src="item.image" />
								</view>
								<view class="xs m-t-10 clamp" :class="{ primary: active == index }">{{ item.name }}
								</view>
							</view>
						</view>
					</scroll-view>
					<scroll-view class="bg-white content" :scroll-y="true" :scroll-with-animation="true"
						style="width: 70%;">
						<view class="store-container">
							<view class="m-t-20" v-for="(item, index) in shopList" :key="index"><shop-item lx='1'
									:item="item"></shop-item></view>
						</view>
						<mescroll-empty v-if="shopList.length == 0 && isjz == 2"
							:option="upOption.empty"></mescroll-empty>
					</scroll-view>
				</view>
			</view>
		</mescroll-body>
		<view v-else>
			<view class="p-b-20" v-if="hotGoods.length"><goods-list type="one" :list="hotGoods"></goods-list></view>
		</view>
	</view>
</template>

<script>
	import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue';
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins';
	import {
		getShopList,
		getShopCategory
	} from '@/api/shop';
	import {
		getHome
	} from '@/api/store';
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollEmpty
		},
		data() {
			return {
				isjz: 1,
				shopList: [],
				shopCategory: [],
				keyword: '',
				active: 0,
				upOption: {
					auto: false,
					empty: {
						icon: '/static/images/goods_null.png',
						tip: '暂无数据～'
					}
				},
				hotGoods: []
			};
		},
		onShow() {
			if (!this.appConfig.shop_street_hide) {
				uni.setNavigationBarTitle({
					title: '商品'
				});
				this.getHomeFun();
			}
			this.getCartNum();
		},
		onShareAppMessage() {
			const shareInfo = this.appConfig.share;
			return {
				title: shareInfo.mnp_share_title,
				path: 'pages/shop_street/shop_street?invite_code=' + this.inviteCode
			};
		},
		methods: {
			...mapActions(['getCartNum']),
			async downCallback() {
				await this.getShopCategoryFun();
				this.mescroll.resetUpScroll();
			},
			// 获取首页数据
			async getHomeFun() {
				const {
					code,
					data
				} = await getHome();
				if (code == 1) {
					this.hotGoods = data.hots;
				}
			},
			onReflesh() {
				this.shopList = [];
				this.mescroll.resetUpScroll();
			},
			changeActive(index) {
				this.active = index;
				this.onReflesh();
			},
			upCallback(page) {
				let pageNum = page.num;
				let pageSize = page.size;
				const {
					keyword,
					active,
					shopCategory
				} = this;
				const cateId = active == -1 ? '' : shopCategory[active].id;
				getShopList({
						page_no: pageNum,
						page_size: pageSize,
						name: keyword,
						shop_cate_id: cateId
					})
					.then(res => {
						this.isjz = 2;
						if (res.code == 1) {
							let curPageData = res.data.list
							let curPageLen = curPageData.length;
							let hasNext = !!res.data.more;
							if (page.num == 1) {
								this.shopList = [];
							}
							this.shopList = this.shopList.concat(curPageData);
							this.mescroll.endSuccess(curPageLen, hasNext);
						}
					})
					.catch(err => {
						this.mescroll.endErr();
					});
			},
			async getShopCategoryFun() {
				const {
					code,
					data
				} = await getShopCategory();
				if (code == 1) {
					this.shopCategory = data.filter(e => {
						return e.id != 35
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	$header-height: 94rpx;

	.shop-street {
		.search {}

		.store-category {
			white-space: nowrap;
			padding-bottom: 10rpx;

			.category-item {
				padding: 20rpx 10rpx;

				.icon-wrap {
					border: 1px solid transparent;
					border-radius: 50%;
				}
			}
		}

		.store-container {
			padding: 0 30rpx;
		}
	}

	.main {
		display: flex;
	}

	/* 二行显示 */
	.clamp {
		text-align: center;
		width: 156rpx;
		text-overflow: ellipsis;

		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;

		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;

		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
	}

	.content {
		height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom));
	}
</style>