1.活动

pages.json

@@ -4,7 +4,7 @@
 		    "path" : "pages/addjk/activity",
 		    "style" :                                                                                    
 		    {
-		        "navigationBarTitleText": "活动",
+		        "navigationStyle": "custom",
 		        "enablePullDownRefresh": true
 		    }
 		    

pages/addjk/activity.vue

@@ -1,25 +1,58 @@
 <template>
 	<view class="box">
 
-		<view class="itemHistory" v-for="(item,index) in itemData" :key="index" @click="goDetail(item.id)">
-			<image :src="item.Img" mode="" class="itemImg"></image>
-			<view class="timeBox">
-				<!-- <image v-if="item.state==2" src="../../static/img/bg_huangse.png" mode="" class="state"></image> -->
-				<!-- <image v-if="item.state==1" src="../../static/img/bg_hongse.png" mode="" class="state"></image> -->
-				<view class="time" v-if="item.StartTime">{{item.StartTime.slice(0,10)}}-{{item.EndTime.slice(0,10)}}</view>
+		<!-- 自定义导航 -->
+		<view class="zdyNavBox">
+			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+			<view class="zdyNav">
+				<view class="zdyNavLeft">
+					<image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback">
+					</image>
+
+				</view>
+				<view class="zdyNavTitle">活动</view>
+				<image src="../../static/img/icon_nav_add.png" mode="aspectFit" class="addImg" @click="goAdd"></image>
 			</view>
-			<view class="name">{{item.ActivityName}}</view>
-			
-			<view class="name" @click="goEdit(item.id)">编辑</view>
 		</view>
+		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
+		<view style="height: 44px;"></view>
+
+		<view class="tab">
+			<view class="tabLine" :class="{tabActive:tabIndex==''}" @click="tabClick('')">全部</view>
+			<view class="tabLine" :class="{tabActive:tabIndex=='未启用'}" @click="tabClick('未启用')">未启用</view>
+			<view class="tabLine" :class="{tabActive:tabIndex=='未开始'}" @click="tabClick('未开始')">未开始</view>
+			<view class="tabLine" :class="{tabActive:tabIndex=='进行中'}" @click="tabClick('进行中')">进行中</view>
+			<view class="tabLine" :class="{tabActive:tabIndex=='已结束'}" @click="tabClick('已结束')">已结束</view>
+		</view>
+
+		<view class="conBox">
+			<view class="itemHistory" v-for="(item,index) in itemData" :key="index" @click="goDetail(item.id)">
+				<image :src="item.Img" mode="" class="itemImg"></image>
+				<view class="timeBox">
+					<image v-if="item.state=='进行中'" src="../../static/img/bg_huangse.png" mode="" class="state"></image>
+					<image v-if="item.state=='未开始'" src="../../static/img/bg_hongse.png" mode="" class="state"></image>
+					<view class="time" v-if="item.StartTime">{{item.StartTime.slice(0,10)}}-{{item.EndTime.slice(0,10)}}
+					</view>
+				</view>
+				<view class="name">{{item.ActivityName}}</view>
+
+				<view class="btnBox">
+					<view class="btn" style="width: 120rpx;" @click="goEdit(item.id)">编辑</view>
+					<view class="btn" @click="">报名详情</view>
+					<view class="btn" @click="">数据统计</view>
+					<view class="btn" style="width: 120rpx;" @click="">分享</view>
+				</view>
+
+			</view>
+
+			<!-- 上拉 加载更多 -->
+			<view class="noMore" v-if="noMoreShow && (itemData.length!=0)">没有更多数据</view>
+			<!-- 无数据空白页 -->
+			<nodata v-if="itemData.length==0"></nodata>
 
-		<!-- 上拉 加载更多 -->
-		<view class="noMore" v-if="noMoreShow && (itemData.length!=0)">没有更多数据</view>
-		<!-- 无数据空白页 -->
-		<nodata v-if="itemData.length==0"></nodata>
+		</view>
 
 
-		
 	</view>
 </template>
 
@@ -32,29 +65,36 @@
 
 		data() {
 			return {
-				
+				iStatusBarHeight: '',
 				page: 1,
 				itemData: [],
-				noMoreShow: false,
-				
+				noMoreShow: false,
+				tabIndex: '',
 			}
 		},
 		onLoad() {
-			
+			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
 			this.page = 1
 			this.myOrderCoupon()
 		},
 
 		methods: {
+			tabClick(state) {
+				this.tabIndex = state;
+
+
+				this.page = 1;
+				this.myOrderCoupon()
+			},
 			goDetail(id) {
 				// uni.navigateTo({
 				// 	url: 'jkDetail?id=' + id
 				// })
-			},
-			goEdit(id) {
-				// uni.navigateTo({
-				// 	url: 'jkDetail?id=' + id
-				// })
+			},
+			goEdit(id) {
+				// uni.navigateTo({
+				// 	url: 'jkDetail?id=' + id
+				// })
 			},
 			myOrderCoupon() {
 				uni.showLoading({
@@ -63,8 +103,8 @@
 				this.$http('openH5SetTheGuest/getAtivity', {
 
 					page: this.page,
-					limit: 10,
-					 state:""
+					limit: 10,
+					state: this.tabIndex
 				}, 'GET').then(res => {
 					uni.hideLoading();
 					// var list = res.data.Items
@@ -118,10 +158,94 @@
 	.box {
 		background: #F4F5F7;
 		min-height: 100vh;
-		padding-top: 20rpx;
+
+	}
+
+	.zdyNavBox {
+		width: 100vw;
+		background: #FFFFFF;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 9999999;
+
+
 	}
 
-	
+	.zdyNav {
+		height: 44px;
+		display: flex;
+		justify-content: space-between;
+
+		align-items: center;
+
+	}
+
+	.backImg {
+		width: 44rpx;
+		height: 44rpx;
+		margin-left: 10rpx;
+		margin-right: 20rpx;
+	}
+
+	.homeImg {
+		width: 44rpx;
+		height: 44rpx;
+
+	}
+
+	.zdyNavLeft {
+		display: flex;
+		align-items: center;
+	}
+
+	.zdyNavTitle {
+
+		height: 44px;
+		background: #FFFFFF;
+		text-align: center;
+		font-size: 34rpx;
+		line-height: 44px;
+	}
+
+	.addImg {
+		width: 36rpx;
+		height: 36rpx;
+		margin-right: 20rpx;
+	}
+
+	.tab {
+		background: #FFFFFF;
+		display: flex;
+		justify-content: space-between;
+		line-height: 87rpx;
+		position: fixed;
+		width: calc(100vw - 100rpx);
+		padding-left: 50rpx;
+		padding-right: 50rpx;
+		height: 87rpx;
+		z-index: 11;
+		border-top: 1rpx solid #EEEEEE;
+	}
+
+	.tabLine {
+
+		font-size: 32rpx;
+		color: #666666;
+
+		text-align: center;
+	}
+
+	.tabActive {
+		color: #3F90F7;
+		font-weight: bold;
+		border-bottom: 4rpx solid #3F90F7;
+
+	}
+
+	.conBox {
+		padding-top: 107rpx;
+	}
 
 	.itemHistory {
 		margin: 0rpx 24rpx 20rpx;
@@ -132,18 +256,20 @@
 
 	.itemImg {
 		height: 280rpx;
-		width: 702rpx;
-border-radius: 10rpx 10rpx 0px 0px;
+		width: 702rpx;
+		border-radius: 10rpx 10rpx 0px 0px;
 	}
 
 	.timeBox {
 		display: flex;
-		margin-top: -61rpx;
+		margin-top: -61rpx;
 		align-items: flex-end;
-	}
-	.state{
-		width: 102rpx;
-		height: 53rpx;
+		position: relative;
+	}
+
+	.state {
+		width: 102rpx;
+		height: 53rpx;
 	}
 
 	.time {
@@ -159,10 +285,29 @@ border-radius: 10rpx 10rpx 0px 0px;
 		padding: 24rpx 20rpx;
 		color: #333333;
 		font-size: 28rpx;
-		background: #FFFFFF;
+		background: #FFFFFF;
 		border-radius: 0 0 10rpx 10rpx;
+		border-bottom: 1rpx solid #eeeeee;
 	}
 
+	.btnBox {
+		padding: 26rpx 20rpx;
+		border-radius: 0 0 10rpx 10rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.btn {
+		font-size: 28rpx;
+		color: #333333;
+		width: 160rpx;
+		height: 60rpx;
+		border-radius: 30rpx;
+		border: 1rpx solid #DDDDDD;
+		text-align: center;
+		line-height: 60rpx;
+	}
 
 	.noMore {
 		text-align: center;