【Add】增加打卡规则显示功能

pages/score/clockin.vue

@@ -47,6 +47,7 @@
 				<button class="clockin_btn" :class="isMark.is_clockin?'active':''"
 					@click="toClockin()">{{isMark.is_clockin?'已签到':'签到'}}</button>
 				<navigator url="/pages/score/record" class="score_record">积分记录 &gt;</navigator>
+				<button class="clockin_rule_btn" @click="showRule">活动规则 &gt;</button>
 			</view>
 			<view class="clockin_box" v-else>
 				<view class="box_title">
@@ -54,6 +55,17 @@
 				</view>
 				<navigator url="/pages/score/record" class="score_record">积分记录 &gt;</navigator>
 			</view>
+			<uni-popup ref="clockinRule" type="center">
+				<view class="clockin_rule_box">
+					<view class="clockin_rule_title">
+						<text>签到规则</text>
+						<view class="close_btn" @click="closeRule"> X </view>
+					</view>
+					<scroll-view class="clockin_rule_info" scroll-y="true" >
+						<rich-text :nodes="active_rule" class="rich_text"></rich-text>
+					</scroll-view>
+				</view>
+			</uni-popup>
 		</view>
 	</view>
 </template>
@@ -77,6 +89,7 @@
 				listKey: 0,
 				listLength: 0,
 				active_id: 0,
+				active_rule: "",
 			}
 		},
 		onLoad() {
@@ -135,6 +148,12 @@
 			});
 		},
 		methods: {
+			showRule(){
+				this.$refs.clockinRule.open('center')
+			},
+			closeRule(){
+				this.$refs.clockinRule.close();
+			},
 			toClockin() {
 				// 如果已经打卡
 				if (this.isMark.is_clockin) return;
@@ -182,9 +201,10 @@
 					// 成功结果
 					if (re.code == 'success') {
 						// 赋值
-						this.clockinList = re.data.list;
-						this.listLength = this.clockinList.length;
-						this.active_id = re.data.active_id;
+						this.clockinList 	= re.data.list;
+						this.listLength 	= this.clockinList.length;
+						this.active_id 		= re.data.active_id;
+						this.active_rule	= re.data.active_rule;
 						// 赋值
 						this.isMark = re.data.is_mark;
 					}
@@ -206,7 +226,6 @@
 	page {
 		background-color: #FFFFFF;
 	}
-
 	.main_view {
 		display: block;
 		height: 1000rpx;
@@ -495,6 +514,66 @@
 				text-align: center;
 				line-height: 80rpx;
 			}
+			
+			.clockin_rule_btn{
+				color: #999999;
+				overflow: hidden;
+				font-size: 24rpx;
+				text-align: center;
+				line-height: 80rpx;
+				padding: 0rpx 0rpx;
+				background: transparent;
+			}
+			.clockin_rule_btn::after{
+				border: 0rpx solid transparent;
+			}
+		}
+	}
+	.popup{
+		overflow: hidden;
+	}
+	.clockin_rule_box{
+		width: 500rpx;
+		display: block;
+		overflow: hidden;
+		background: #FFFFFF;
+		font-size: 26rpx;
+		margin: 0rpx auto;
+		line-height: 50rpx;
+		border-radius: 10rpx;
+		padding: 0rpx 25rpx;
+		padding-bottom: 20rpx;
+		background: linear-gradient(to bottom, #FC335F 0%, #FB7224 100%);
+		.clockin_rule_title{
+			color: #FFFFFF;
+			height: 60rpx;
+			font-size: 32rpx;
+			line-height: 60rpx;
+			text-align: center;
+			margin-bottom: 10rpx;
+			.close_btn{
+				float: right;
+				width: 40rpx;
+				height: 40rpx;
+				font-size: 24rpx;
+				margin-top: 9rpx;
+				line-height: 40rpx;
+				border-radius: 50%;
+				border: 1rpx solid #FFFFFF;
+			}
+		}
+		.clockin_rule_info{
+			display: block;
+			height: 500rpx;
+			font-size: 24rpx;
+			line-height: 40rpx;
+			border-radius: 10rpx;
+			padding: 20rpx 20rpx;
+			box-sizing: border-box;
+			background-color: #FFFFFF;
+			.rich_text{
+				white-space: break-spaces;
+			}
 		}
 	}
 </style>