签到功能

pages/score/clockin.vue

@@ -20,29 +20,35 @@
 					</navigator>
 				</view>
 			</view>
-			<view class="clockin_box">
-				<view class="box_title">{{isMark.finish_day?'已连续签到 '+isMark.finish_day+' 天':'连续签到奖励更丰厚'}}</view>
+			<view class="clockin_box" v-if="clockinList.length > 0">
+				<view class="box_title">
+          <view class="left_icon" v-if="(this.listKey>0)" @click="leftClockin()"><uni-icons type="left" size="20"></uni-icons></view>
+          {{isMark.finish_day?'已连续签到 '+isMark.finish_day+' 天':'连续签到奖励更丰厚'}}
+          <view class="right_icon" v-if="(this.listKey<(this.listLength-1))" @click="rightClockin()"><uni-icons type="right" size="20"></uni-icons></view>
+        </view>
 				<view class="clockin_list">
-					<view class="clockin_item" :class="item.is_finish?'acitve':''" v-for="(item,index) in clockinList" :key="index" >
-						<view class="what_day">第{{item.what_day}}天</view>
-						<view class="score_one" v-if="index == 0 || index == 1 || index == 3 || index == 5">
+					<view class="clockin_item" :class="item.is_finish?'acitve':''" v-for="(item,index) in clockinList[listKey]" :key="index" >
+            <view class="give_coupon" v-if="item['coupon_id']">券</view>
+						<view class="what_day">{{item.what_day}}</view>
+						<view class="score_one">
 							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
 						</view>
-						<view class="score_tow" v-if="index == 2 ||  index == 4">
+<!--						<view class="score_tow" v-if="index == 2 ||  index == 4">
 							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
 							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
-						</view>
-						<view class="score_the" v-if="index == 6">
-							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
-							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
-							<image class="score_icon" src="../../static/icon/score.png" mode=""></image>
-						</view>
+						</view>-->
 						<view class="give_score">+{{item.reward}}</view>
 					</view>
 				</view>
 				<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>
 			</view>
+      <view class="clockin_box" v-else>
+        <view class="box_title">
+          暂无签到活动
+        </view>
+        <navigator url="/pages/score/record" class="score_record">积分记录 &gt;</navigator>
+      </view>
 		</view>
 	</view>
 </template>
@@ -63,6 +69,8 @@
 					wait_score:0,
 				},
 				isReqing:false,
+				listKey:0,
+				listLength:0,
 			}
 		},
 		onLoad() {
@@ -138,11 +146,20 @@
 					if( re.code == 'success' )		  {
 						// 赋值
 						this.clockinList= re.data.list;
+            this.listLength = this.clockinList.length;
 						// 赋值
 						this.isMark 	= re.data.is_mark;
 					}
 				});
-			}
+			},
+      leftClockin(){
+        if (this.listKey > 0){
+          this.listKey = this.listKey - 1
+        }
+      },
+      rightClockin(){
+        this.listKey = this.listKey + 1
+      }
 		}
 	}
 </script>
@@ -236,7 +253,6 @@
 			z-index: 9;
 			display: block;
 			width: 700rpx;
-			height: 800rpx;
 			margin: 0rpx auto;
 			position: relative;
 			border-radius: 40rpx;
@@ -247,14 +263,25 @@
 				color: #999999;
 				text-align: center;
 				line-height: 80rpx;
+        .left_icon{
+          float: left;
+          padding-left: 20rpx;
+        }
+        .right_icon{
+          float: right;
+          padding-right: 20rpx;
+        }
 			}
 			.clockin_list{
 				display: block;
 				overflow: hidden;
+        width: 100%;
+        padding-top: 25rpx;
 				.clockin_item{
 					float: left;
-					width: 145rpx;
-					height: 240rpx;
+          position: relative;
+					width: 70rpx;
+					height: 165rpx;
 					text-align: center;
 					margin-left: 25rpx;
 					border-radius: 20rpx;
@@ -262,19 +289,19 @@
 					background-color: #F8F8F8;
 					.what_day{
 						display: block;
-						height: 60rpx;
+						height: 40rpx;
 						font-size: 24rpx;
 						line-height: 60rpx;
 					}
 					.score_one{
 						display: block;
-						height: 80rpx;
+						height: 60rpx;
 						margin: 10rpx auto;
 						position: relative;
 						.score_icon{
 							display: block;
-							width: 80rpx;
-							height: 80rpx;
+							width: 60rpx;
+							height: 60rpx;
 							margin: 0rpx auto;
 						}
 					}
@@ -340,14 +367,26 @@
 					}
 					.give_score{
 						display: block;
-						height: 60rpx;
+						height: 30rpx;
 						font-size: 24rpx;
-						line-height: 60rpx;
+						line-height: 40rpx;
 					}
+          .give_coupon{
+            position: absolute;
+            font-size: 20rpx;
+            padding: 2px 5px;
+            background-color: #f00;
+            color: #fff;
+            border-radius: 6px;
+            display: inline-block;
+            text-align: center;
+            right:  -15rpx;
+            top: -15rpx;
+          }
 				}
-				.clockin_item:nth-child(7){
+				/*.clockin_item:nth-child(7){
 					width: 315rpx;
-				}
+				}*/
 				.clockin_item.acitve{
 					color: #FFFFFF;
 					background-color: #E03519;
@@ -357,7 +396,7 @@
 				width: 660rpx;
 				color: #FFFFFF;
 				font-size: 30rpx;
-				margin: 0rpx auto;
+        margin-top: 20rpx;
 				padding: 0rpx 0rpx;
 				border-radius: 60rpx;
 				background-color: #E03519;
@@ -371,11 +410,11 @@
 				border: 0rpx solid transparent;
 			}
 			.score_record{
-				height: 80rpx;
+				height: 60rpx;
 				display: block;
 				color: #999999;
 				font-size: 24rpx;
-				margin-top: 30rpx;
+				margin-top: 20rpx;
 				text-align: center;
 				line-height: 80rpx;
 			}

utils/request.js

@@ -1,8 +1,10 @@
 // 请求域名
-var domain = 'https://kailin.dfwy.tech/'
+//var domain = 'https://kailin.dfwy.tech/'
+//var domain = 'https://kailin.dfwy.tech/'
+var domain = 'http://kailin.test/'
 // #ifdef MP-WEIXIN
 // 'http://127.0.0.1:8000/';
-domain = uni.getAccountInfoSync().miniProgram.envVersion == 'release' ? 'https://mall.findit.ltd/' : 'https://kailin.dfwy.tech/';
+domain = uni.getAccountInfoSync().miniProgram.envVersion == 'release' ? 'https://mall.findit.ltd/' : 'http://kailin.test/';
 // #endif
 
 // 发送网络请求的函数