想

components/tradeActivity/index.vue

@@ -32,11 +32,6 @@
 		font-size: 30rpx;
 		width:400rpx;
 		color: #1F1F1F;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 1;
 		padding-right: 10rpx;
 	}
 	.Activity_Time {
@@ -52,33 +47,63 @@
 		align-items: center;
 		justify-content: center;
 	}
+	.tradeActive{
+		background-color: #F6F6F6;
+		width:100%;
+		position: fixed;
+		top: 65px;
+		left: 0;
+	}
+	.tradeTop{
+		display: flex;
+		font-size:30rpx;
+		margin-bottom:20px;
+	}
+	.Top_LEFT{
+		display: inline-block;
+		width:10rpx;
+		height:30rpx;
+		background-color: #9cf;
+		margin:3px 7px 0 0;
+	}
 </style>
 <template>
-	<view class="trade-activity" :style="{height:'calc(100vh  - '+pagePaddingBottom+')'}">
-		<view class="trade_List" v-for="(item, index) in tradeData">
-			<view class="tradeImgDiv">
-				<image :src="item.CoverImg" style="width:100%;height:100%" mode="aspectFill"></image>
+	<view class="trade-activity" :style="{height:!isShowSign?'0':'calc(100vh  - '+pagePaddingBottom+')'}" :class="{'tradeActive':isShowSign}">
+		<template v-if="isShowSign">
+			<view class="tradeTop">
+				<text class="Top_LEFT"></text>
+				请选择你要报名的活动
 			</view>
-			<view>
-				<view class="tradeName">
-					<view class="Activity_Name">{{item.ActivityName}}</view>
-					<view>
-						<u-checkbox-group>
-							<u-checkbox v-model="item.IsCheck" :disabled="item.IsDefault"></u-checkbox>
-						</u-checkbox-group>
-					</view>
-				</view>
-				<view class="Activity_Time" style="margin-top:20rpx;">
-					报名时间：{{item.StartTime}}
+			<view class="trade_List" v-for="(item, index) in tradeData">
+				<view class="tradeImgDiv">
+					<image :src="item.CoverImg" style="width:100%;height:100%" mode="aspectFill"></image>
 				</view>
-				<view class="Activity_Time" style="margin-top:10rpx;">
-					活动时间：{{item.EndTime}}
+				<view>
+					<view class="tradeName">
+						<view class="Activity_Name">{{item.ActivityName}}</view>
+						<view>
+							<u-checkbox-group>
+								<u-checkbox v-model="item.IsCheck" :disabled="item.IsDefault"></u-checkbox>
+							</u-checkbox-group>
+						</view>
+					</view>
+					<view class="Activity_Time" style="margin-top:20rpx;">
+						活动时间：{{item.StartTime}}
+					</view>
 				</view>
 			</view>
-		</view>
-		<view style="width:100%;height:100rpx;"></view>
+			<view style="width:100%;height:100rpx;"></view>
+		</template>
 		<view class="trade_Btn">
-			<u-button size="80"  :ripple="true" :custom-style="{
+			<u-button size="80"  :ripple="true" v-if="!isShowSign" :custom-style="{
+				  backgroundColor: mc,
+				  height: '80rpx',
+				  color: '#FFF',
+				  fontSize: '14px',
+				  margin: '0 3vw',
+				  width: '60vw',
+				}" @click="isShowSign=true">立即报名</u-button>
+			<u-button size="80"  :ripple="true" v-if="isShowSign" :custom-style="{
 				  backgroundColor: mc,
 				  height: '80rpx',
 				  color: '#FFF',
@@ -97,27 +122,44 @@
 			return {
 				mc: '',
 				tradeData: this.dataObj,
-				Ids: ''
+				Ids: '',
+				isShowSign:false
 			}
 		},
 		mounted() {
+			console.log(this.dataObj,'data');
 			this.mc = this.$uiConfig.mainColor;
 		},
 		created() {
+			
+		},
+		onShow() {
 		},
 		methods: {
+			getShow(){
+				this.isShowSign=false;
+			},
 			//跳转报名
 			goSignUp() {
-				let MyArray=[];
-				this.tradeData.forEach(x=>{
-					if(x.IsCheck){
-						MyArray.push(x.Id);	
+				if(this.isShowSign){
+					let MyArray=[];
+					this.tradeData.forEach(x=>{
+						if(x.IsCheck){
+							MyArray.push(x.Id);	
+						}
+					})
+					if(MyArray.length==0){
+						uni.showToast({
+						  title: '请选择活动',
+						  icon: 'none'
+						})
+						return
 					}
-				})
-				this.Ids = MyArray.toString();				
-				uni.navigateTo({
-					url: "/pages/kotra/activeSignUp?Id=" + this.Ids
-				});
+					this.Ids = MyArray.toString();				
+					uni.navigateTo({
+						url: "/pages/kotra/activeSignUp?Id=" + this.Ids
+					});
+				}
 			}
 		},
 	};

pages/index/index.vue

@@ -212,6 +212,7 @@
 			    :dataObj="d.data"
 				:pagePaddingBottom = 'pagePaddingBottom'
 			    @refresh="refreshPage"
+				ref="tradeActive"
 			  ></tradeActivity>
             </template>
           </view>
@@ -717,6 +718,12 @@ export default {
     }, 500);
     this.mainColor = this.$uiConfig.mainColor;
     this.getIsOpenReserve();
+	//调用
+	if (Object.keys(this.$refs).length > 0 && this.$refs.tradeActive) {
+	  //判断
+	  this.$refs.tradeActive[0].getShow(); //调取最近学习组件的方法
+	  console.log(this.$refs.tradeActive[0]);
+	}
   },
 
   methods: {