point-app/pagesRest/activity/info.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<view class="one_1" v-if="barActive=='0'">
					<scroll-view scroll-y="true" class="scroll-view">
						<view class="content">
							<u-parse :content="info.content.value"></u-parse>
						</view>
					</scroll-view>
				</view>
				<view class="one_2" v-else-if="barActive=='1'">
					<view class="one_2_1">
						<input type="text" v-model="searchInfo.goods_name" @blur="toInput" placeholder="搜索商品">
					</view>
					<view class="one_2_2">
						<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
							<view class="list-scroll-view">
								<view class="pubu">
									<view class="list" v-for="(item,index) in list" :key="index" @tap="toBuy(item.goods)">
										<view class="img">
											<image class="image" :src="item.goods.file&&item.goods.file.length?item.goods.file[0].url:''" mode=""></image>
										</view>
										<view class="name">
											<text>{{item.goods.name}}</text>
										</view>
										<view class="money">
											<text>¥</text>
											<text>{{item.sell_money}}</text>
										</view>
									</view>
								</view>
								<view class="is_bottom" v-if="is_bottom">
									<text>我们也是有底线的！</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="two">
				<view class="list" v-for="(item,index) in barList" :key="index" @tap="barChange(index,item)">
					<view class="icon">
						<text :class="['iconfont',barActive==index?item.acticon:item.icon]"></text>
					</view>
					<view :class="['name',barActive==index?'activename':'']">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	import uParse from "@/components/u-parse/u-parse.vue";
	export default {
		components: {
			uParse,
		},
		data() {
			return {
				id: '',
				barActive: '0',
				barList: [ //底部菜单
					{
						icon: 'icon-shangdian',
						acticon: "icon-shangdian-copy",
						name: '活动详情'
					},
					{
						icon: 'icon-shangpinfenlei',
						acticon: "icon-shangpinfenlei-copy",
						name: '商品列表'
					}
				],
				// 详情
				info: {},
				// 商品列表
				list: [],
				total: 0,
				page: 0,
				skip: 0,
				limit: 6,
				// 查询
				searchInfo: {},
				// 数据是否触底
				is_bottom: false,
				scrollTop: 0,
			};
		},
		onLoad: function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '634fa595e4ed552882f05a6f');
		},
		onShow: function() {
			const that = this;
			that.searchAct();
		},
		methods: {
			async searchAct() {
				const that = this;
				if (that.id) {
					// 查询详情
					let res = await that.$api(`/platformAct/${that.id}`, 'GET');
					if (res.errcode == '0') {
						uni.setNavigationBarTitle({
							title: res.data.title
						});
						that.$set(that, `info`, res.data)
					}
					that.search()
				}
			},
			// 查询列表
			async search() {
				const that = this;
				// 查询商品列表
				let info = {
					skip: that.skip,
					limit: that.limit,
					platformAct: that.id
				}
				let res = await that.$api(`/goodsJoinAct`, 'GET', {
					...info,
					...that.searchInfo
				})
				if (res.errcode == '0') {
					let list = [...that.list, ...res.data];
					that.$set(that, `list`, list)
					that.$set(that, `total`, res.total)
				}
			},
			toPage() {
				const that = this;
				let list = that.list;
				let limit = that.limit;
				if (that.total > list.length) {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					let page = that.page + 1;
					that.$set(that, `page`, page)
					let skip = page * limit;
					that.$set(that, `skip`, skip)
					that.search();
					uni.hideLoading();

				} else that.$set(that, `is_bottom`, true)
			},
			toScroll(e) {
				const that = this;
				let up = that.scrollTop;
				that.$set(that, `scrollTop`, e.detail.scrollTop);
				let num = Math.sign(up - e.detail.scrollTop);
				if (num == 1) that.$set(that, `is_bottom`, false);
			},
			// 输入框
			toInput(e) {
				const that = this;
				if (e.detail.value) that.$set(that.searchInfo, `goods_name`, e.detail.value);
				else that.$set(that, `searchInfo`, {});
				that.clearPage();
				that.search();
			},
			// 购买
			toBuy(e) {
				const that = this;
				that.clearPage();
				uni.navigateTo({
					url: `/pagesHome/order/detail?id=${e.id||e._id}`
				})
			},
			// 选择底部菜单
			barChange(index, item) {
				const that = this;
				that.$set(that, `barActive`, index);
			},
			// 清空列表
			clearPage() {
				const that = this;
				that.$set(that, `list`, [])
				that.$set(that, `skip`, 0)
				that.$set(that, `limit`, 6)
				that.$set(that, `page`, 0)
			}
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			position: relative;
			flex-grow: 1;

			.one_1 {
				height: 92vh;

				.content {
					padding: 2vw;
				}

				image {
					width: 100% !important;
				}
			}

			.one_2 {
				height: 92vh;

				.one_2_1 {
					border-bottom: 1px solid var(--f85Color);
					padding: 2vw;
					margin: 0 0 2vw 0;

					input {
						padding: 2vw;
						background-color: var(--f1Color);
						font-size: var(--font14Size);
						border-radius: 5px;
					}
				}

				.one_2_2 {
					position: relative;
					width: 96vw;
					height: 81vh;
					margin: 0 2vw;

					.pubu {
						column-count: 2;
						column-gap: 2vw;

						.list {
							break-inside: avoid;
							padding: 2vw;
							background-color: var(--f1Color);
							margin: 0 0 2vw 0;
							border-radius: 5px;

							.img {
								.image {
									width: 100%;
									height: 30vh;
									border-radius: 5px;
								}
							}

							.name {
								margin: 0 0 1vw 0;

								text {
									font-size: var(--font14Size);
								}
							}

							.money {
								font-size: var(--font12Size);
								color: var(--ff0Color);

								text:nth-child(2) {
									font-size: var(--font16Size);
									padding: 0 0 0 1vw;
								}
							}
						}
					}
				}
			}
		}

		.two {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			border-top: 1px solid #f1f1f1;

			.list {
				padding: 1vw 0;
				text-align: center;

				.icon {}

				.name {
					font-size: 12px;
				}

				.activename {
					color: var(--fFB1Color);
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}

	.is_bottom {
		text-align: center;
		width: 100vw;

		text {
			padding: 1vw 0;
			display: inline-block;
		}
	}
</style>