tcwm-uniapp-shop/my/store/huodong.vue

<template>
	<view>
		<!-- swiper -->
		<view class="myswiper flex justify-center align-center" v-if="myhd.length!=0">
			<swiper :indicator-dots="false" style="width: 100%;height: 100%;" :autoplay="true" :interval="3000" :duration="300">
				<swiper-item v-for="(item,index) in myhd" :key="index">
					<view class="swiper-item">
						<image :src="item" style="width: 100%;height: 340rpx;" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 活动列表 -->
		<view :style="myhd.length==0?'margin-top: 20rpx;':'margin-top: -40rpx;'" class="list flex justify-center flex-wrap">
			<view class="list-box flex justify-center" v-if="item.no != '是'" v-for="(item,index) in huodongList" :key="index" @click="item.se!='是'?gotoinfo(item.activityId):''">
				<view class="list-box-c flex justify-between align-center">
					<view class="list-box-c-l flex align-center">
						<image :src="item.activityImage.split(',')[0]" style="width: 100rpx;height: 100rpx;" mode="aspectFill"></image>
						<view class="list-box-c-l-txt">
							{{item.activityTitle}}
						</view>
					</view>
					<view class="list-box-c-r" v-if="item.se!='是'" @click.stop="joinHd(item.activityId)">
						加入
					</view>
					<view class="list-box-c-r" v-else>
						已加入
					</view>
				</view>
			</view>
			<u-loadmore :status="status" v-if="huodongList.length>0" :icon-type="iconType" :load-text="loadText" />
		</view>
		<view class="flex justify-center flex-wrap" v-if="huodongList.length==0">
			<image src="../../static/images/img/empty.png" style="width: 387rpx;height: 341rpx;margin-top: 100rpx;" mode=""></image>
			<view class="" style="width: 100%;text-align: center;margin-top: 20rpx;">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myhd:[],
				page: 1,
				limit: 10,
				huodongList: [],
				total: 1,
				status: 'loadmore',
				iconType: 'flower',
				activityId:'',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			};
		},
		onLoad() {
			//我参与的活动
			this.getMyHuoDong()
			//活动列表
			this.getHuoDongList();
		},
		onShow() {
			//我参与的活动
			this.getMyHuoDong()
			//活动列表
			this.getHuoDongList();
		},
		//加载更多
		onReachBottom() {
			if(this.page < this.total){
				this.page += 1
				this.status = 'loading'
				this.getHuoDongList()
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.getHuoDongList()
			this.getMyHuoDong()
		},
		methods: {
			//加入活动
			joinHd(activityId) {
				let that = this
				let data = {
					activityId: activityId,
					shopId: uni.getStorageSync('shopId')
				}
				this.$Request.get("/app/activityManage/shopJoinActivity", data).then(res => {
					if (res.code == 0) {
						uni.showModal({
							title: '提示',
							content: '加入该活动将自动退出当前活动,确定加入该活动？',
							complete(ret) {
								if (ret.confirm) {
									uni.showToast({
										title: '加入成功'
									})
									//我参与的活动
									that.getMyHuoDong()
									//活动列表
									that.getHuoDongList();
								}
			
							}
						})
			
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			gotoinfo(activityId){
				uni.navigateTo({
					url:'./hdInfo?activityId='+activityId
				})
			},
			// 我参与的活动
			getMyHuoDong() {
				let data = {
					shopId:uni.getStorageSync('shopId')
				}
				this.$Request.get("/app/goods/getShopActivity", data).then(res => {
					if (res.code == 0) {
						this.activityId = res.data.activityId
						this.myhd = res.data.activityImage.split(',')
					}
				});
			},
			getHuoDongList() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.$Request.getT("/app/activityManage/getActivityList", data).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						res.data.records.map(item=>{
							if(item.activityId==14){
								item.no = '是'
							}
							if(item.activityId==this.activityId){
								item.se = '是'
							}else{
								item.se = '否'
							}
						})
						this.total = res.data.pages
						if (this.page == 1) {
							this.huodongList = res.data.records
						} else {
							this.huodongList = [...this.huodongList, ...res.data.records]
						}
						if(this.page == this.total){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.myswiper {
		width: 100%;
		height: 340rpx;
		z-index: 0;
	}

	.list {
		width: 100%;
		height: 160rpx;
		

		.list-box {
			width: 686rpx;
			height: 100%;
			border-radius: 24rpx;
			background-color: #ffffff;
			margin-bottom: 20rpx;
			z-index: 999;
			.list-box-c {
				width: 646rpx;
				height: 100%;
			}

			.list-box-c-l {
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 16rpx;
				}

				.list-box-c-l-txt {
					width: 50vw;
					height: 100rpx;
					margin-left: 20rpx;
					font-size: 26rpx;
					overflow: hidden;
					line-height: 100rpx;
				}
			}

			.list-box-c-r {
				// border: 1rpx solid #FCD202;
				background: #FCD202;
				padding: 10rpx 30rpx 10rpx 30rpx;
				// color: #ffffff;
				font-size: 26rpx;
				border-radius: 24rpx;

			}
		}
	}
</style>