CjyTravel/subPageA/shop/shopList/shopList.vue

<template>
	<view class="v-pages v-pages-bg tab">
		<!-- 搜索 -->
		<view class="v-pages-search bg">
			<view class="search_box row flex-align-center">
				<view class="col">
					<input type="text" class="input" @input="write" confirm-type="search" @confirm="confirm"
						color="#A0A7B2" placeholder-style="color:#999" placeholder="请输入产品名称搜索" />
				</view>
				<view class="btn_img" @click="search()">
					<image src="@/static/animg/icon-search.png" class="img"></image>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
			<view class="v-shop-list row">
				<view class="list_item col-12" v-for="(item, index) in data_list" :key="index"
					@click="gotoDetail(item)">
					<view class="item_box">
						<view class="item_image">
							<image class="img" :src="item.picUrls" mode="aspectFill"></image>
						</view>
						<view class="item_content">
							<view class="title">{{ item.goodsName }}</view>
							<view class="tip"><text class="item">文创产品</text></view>
							<view class="bottom row flex-align-center">
								<text class="num-pre">&yen;</text>
								<text class="num-price">{{ item.price }}</text>
								<text class="num-del col">&yen;{{item.marketPrice}}</text>
								<text class="num-sold">已售 {{item.soldQuantity}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	// 自定义的mescroll-xinlang.vue
	import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue';
	export default {
		components: {
			MescrollUni
		},
		data() {
			return {
				//轮播
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 500,
				//数据
				data_list: undefined,
				//mescroll
				downOption: {
					auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				upOption: {
					auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
				mescroll: '',
				parames: {
					pagesize: 10,
					pageno: 1,
					noData: false,
					loading: false,
					finished: false,
					goodsName: ""
				},
			};
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
        this.mescroll.resetUpScroll();
			},
			upCallback(mescroll) {
				this.mescroll = mescroll
				this.parames.pageno = this.mescroll.num
				this.get_data();
			},
			// 获取列表数据
			get_data() {
				this.$Request.get(this.$config.selectAppGoodsPage, this.parames, '', '', false, false).then(res => {
					const curPageData = res.data.list || [] // 当前页数据
					if (this.mescroll.num == 1) this.data_list = []; // 第一页需手动制空列表
					this.data_list = [...this.data_list, ...curPageData]
					setTimeout(() => {
						this.mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
					}, 1000);
				}).catch(() => {
					this.mescroll.endErr(); // 请求失败, 结束加载
				});
			},
			// 跳转详情页
			gotoDetail(val) {
				uni.navigateTo({
					url: `/subPageA/shop/shopDetail/shopDetail?id=` + val.id,
				});
			},
			write: function(e) {
				this.parames.goodsName = e.detail.value;
			},
			search: function() {
				this.parames.pageno = 1;
				this.get_data();
			},
			confirm(e) {
				this.parames.goodsName = e.detail.value;
				this.parames.pageno = 1;
				this.get_data();
			},
		}
	};
</script>

<style lang="scss">
	.v-shop-list {
		padding: 24rpx;
		flex-wrap: wrap;
		margin-left: -24rpx;

		.list_item {
			margin-bottom: 24rpx;

			.item_box {
				margin-left: 24rpx;
				padding-bottom: 24rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 20rpx;
			}

			.item_image {
				position: relative;
				width: 100%;
				height: 320rpx;
				border-radius: 16rpx;
				overflow: hidden;

				.img {
					width: 110%;
				}
			}

			.item_content {
				padding: 0 24rpx;

				.title {
					margin-top: 8rpx;

					color: #1B1B1B;
					font-size: 28rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.tip {
					margin-top: 4rpx;

					.item {
						padding: 2rpx 10rpx;
						border-radius: 8rpx;
						border: 1rpx solid #0983ff;
						color: #0983ff;
						font-size: 24rpx;
					}
				}

				.bottom {
					margin-top: 10rpx;

					.num-pre {
						color: #e02222;
						font-size: 24rpx;
					}

					.num-price {
						color: #e02222;
						margin-right: 12rpx;
					}

					.num-del {
						text-decoration: line-through;
						font-size: 24rpx;
						color: #cccccc;
					}

					.num-sold {
						font-size: 24rpx;
						color: #cccccc;
					}
				}
			}
		}
	}
</style>