bawangcan-shop/pages/activity/index.vue

<template>
	<view class="container">
		<view class="header">
			<view class="shopName">
				<!-- <view class=""  @tap="shopBtn()">小曲奇的店铺 <image class="icons" src="../../static/img/home/down.png" mode="widthFix"></image></view>	 -->
				<u-dropdown :active-color="colors" title-size='34' style="position: absolute;width: 70%;left: 35rpx;top:15px">
					<u-dropdown-item v-model="value1" height='600rpx' :title="title" :options="options1"
						@change="changes">
					</u-dropdown-item>
				</u-dropdown>
			</view>
			<view style="height: 110rpx;">
				<view class="header_Left">
					<view class="left_top">
						<image class="logo" :src="merchantLogo"></image>
					</view>
					<!-- <view class="left_down">
						<image class="icons1" src="../../static/img/home/datas.png"></image>
						<view class="times">2021 07-06至2021 07-08</view>
					</view> -->
				</view>
				<view class="header_Right" @tap="release(0)">
					<image class="showaddImg" src="../../static/img/home/feiji.png"></image>
					<view class="showAdd">发布活动</view>
				</view>
			</view>
		</view>
		<view class="conters">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view style="margin-top: 20rpx;">
				<view class="card-box" v-if="goodsHomeList.length > 0">
					<task-home-list class="task-home" splitLine @click="clickItem" :list="goodsHomeList">
					</task-home-list>
				</view>
			</view>
		</view>
		<empty v-if="goodsHomeList.length == 0" des="暂无活动信息" show="true"></empty>
		<!-- 加载更多提示 -->
		<view v-if="goodsHomeList.length > 0">
			<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
		</view>
	</view>
</template>

<script>
	import taskHomeList from "@/components/mask/task-home-list2.vue"
	export default {
		components: {
			taskHomeList
		},
		data() {
			return {
				merchantLogo: '../../static/img/logo.jpg',
				colors: '#FF4701',
				title: '暂无店铺',
				merchantId: 0,
				options1: [],
				value1: 1,
				list: [{
					name: '今日活动'
				}, {
					name: '待发布活动'
				},  {
					name: '发布记录'
				}],
				current: 0,
				goodsHomeList: [],
				page: 1,
				limit: 15,
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},

			}
		},
		onLoad(e) {

		},
		onShow() {
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getShopList(userId);
				this.page = 1;
				this.getHuoDongList();
			}

			uni.$on('update', this.callback)
		},
		onUnload() {
			//移除所有的事件监听器
			uni.$off();
		},
		methods: {
			callback(e) {
				this.page = 1;
				this.getHuoDongList();
			},
			getHuoDongList() {
				this.loadingType = 1;
				this.$queue.showLoading('加载中...');
				let type = this.current + 1;
				this.$Request.getT('/goodsMerchant/selectGoodsActivityList?page=' + this.page + '&limit=' + this
					.limit +
					'&merchantId=' + this.merchantId + '&type=' + type).then(res => {
					if (res.code == 0 && res.data) {
						if (this.page == 1) {
							this.goodsHomeList = [];
						}

						if (res.data.records && res.data.records.length > 0) {
							res.data.records.forEach(d => {
								this.goodsHomeList.push(d);
							});
						}

						if (res.data.records.length === this.limit) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
				});
			},
			getShopList(userId) {
				this.$Request.getT('/goodsMerchant/selectGoodsMerchantPage?page=' + this.page + '&limit=' + this.limit +
					'&userId=' + userId + '&status=2').then(res => {
					if (res.code == 0) {
						if (res.data.records.length > 0) {
							if (this.options1.length == 0) {
								this.merchantLogo = res.data.records[0].merchantLogo;
								this.title = res.data.records[0].merchantName;
								this.merchantId = res.data.records[0].merchantId;
								this.serviceMoney = res.data.records[0].serviceMoney ? res.data.records[0].serviceMoney : 0;
							}
							this.getHuoDongList();
							this.options1 = [];
							this.options1 = res.data.records;
						}
					}
				});
			},
			shopBtn() {
				console.log('1111')
			},
			release(index) {
				if (this.merchantId != 0) {
					uni.navigateTo({
						url: '/pages/index/addTask?merchantId=' + this.merchantId
					});
				} else {
					this.$queue.showToast('请添加店铺后再来试试吧！')
				}
			},
			change(index) {
				this.current = index;
				this.page = 1;
				this.getHuoDongList();
			},
			quxiao() {
				console.log('取消')
			},
			clickItem: function(options) {
				uni.navigateTo({
					url: '/pages/index/taskDetail1?goodsId=' + options.item.goodsId
				})
			},
			changes(item) {
				console.log(item)
				this.title = item.merchantName;
				this.merchantLogo = item.merchantLogo;
				this.merchantId = item.merchantId;
				this.serviceMoney = item.serviceMoney ? item.serviceMoney : 0;
				this.getHuoDongList();
				this.$queue.setData('merchantId', item.merchantId);
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getList();
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background: #F7F7F7;
		// background: #000000;
	}

	.container {
		.header {
			width: 100%;
			background: #FFFFFF;
			padding: 30rpx 30rpx 0;

			.header_Left {
				height: 120rpx;
				width: 70%;
				float: left;

				.left_top {

					.logo {
						width: 60rpx;
						height: 60rpx;
						border-radius: 10rpx;
						// float: left;
						margin-right: 20rpx;
					}

					.shopName {
						position: relative;
						line-height: 60rpx;
						font-size: 36rpx;
						font-weight: 600;
						

						.icons {
							width: 30rpx;
							margin-left: 10rpx;
							padding-left: 10rpx;
						}
					}
				}

				.left_down {
					clear: both;
					display: flex;
					align-items: center;
					height: 40rpx;
					color: #999;
					font-size: 32rpx;

					.icons1 {
						width: 28rpx;
						height: 28rpx;
						margin-right: 10rpx;
					}

					.times {}
				}
			}

			.header_Right {
				// float: right;
				width: 20%;
				text-align: center;
				font-size: 26rpx;
				height: 120rpx;
				padding: 20rpx 0;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 999999;

				.showaddImg {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.conters {
			width: 100%;
			background: #FFFFFF;
			padding: 0rpx 30rpx 20rpx;

		}
	}

	.u-dropdown__menu__item.data-v-4e830e53 {
		position: absolute !important;
		left: 70rpx !important;
	}

	.u-dropdown__menu__item {
		position: absolute !important;
		left: 70rpx !important;
		bottom: 30rpx !important;
	}
</style>