【Mod】代码优化

pages/score/clockin.vue

@@ -15,40 +15,45 @@
 				</view>
 				<view class="right_box">
 					<navigator url="/pages/score/lottery" class="lottery_enter">
-						<image class="lottery_img" src="https://mall.findit.ltd/uploads/images/default/lottery_record.png" mode=""></image>
+						<image class="lottery_img"
+							src="https://mall.findit.ltd/uploads/images/default/lottery_record.png" mode=""></image>
 						<view class="lottery_text">点我抽奖</view>
 					</navigator>
 				</view>
 			</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="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[listKey]" :key="index" >
-            <view class="give_coupon" v-if="item['coupon_id']">券</view>
+					<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="give_score">+{{item.reward}}</view>
 					</view>
 				</view>
-				<button class="clockin_btn" :class="isMark.is_clockin?'active':''" @click="toClockin()">{{isMark.is_clockin?'已签到':'签到'}}</button>
+				<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 class="clockin_box" v-else>
-        <view class="box_title">
-          暂无签到活动
-        </view>
-        <navigator url="/pages/score/record" class="score_record">积分记录 &gt;</navigator>
-      </view>
 		</view>
 	</view>
 </template>
@@ -57,27 +62,30 @@
 	export default {
 		data() {
 			return {
-				status_bar_style:{},
-				clockinList:[],
-				isMark:{
-					finish_day:0,
-					is_clockin:0,
+				status_bar_style: {},
+				clockinList: [],
+				isMark: {
+					finish_day: 0,
+					is_clockin: 0,
 				},
-				scoreInfo:{
-					score:0,
-					use_score:0,
-					wait_score:0,
+				scoreInfo: {
+					score: 0,
+					use_score: 0,
+					wait_score: 0,
 				},
-				isReqing:false,
-				listKey:0,
-				listLength:0,
-        active_id:0,
+				isReqing: false,
+				listKey: 0,
+				listLength: 0,
+				active_id: 0,
 			}
 		},
 		onLoad() {
 			// #ifdef MP-WEIXIN
 			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
-			this.status_bar_style = {height:(menuButtonInfo.height)+"px","padding-top":menuButtonInfo.top+"px"};
+			this.status_bar_style = {
+				height: (menuButtonInfo.height) + "px",
+				"padding-top": menuButtonInfo.top + "px"
+			};
 			// #endif
 			// #ifdef MP-WEIXIN
 			//分享按钮
@@ -89,126 +97,136 @@
 		},
 		onShareAppMessage(obj) {
 			return {
-			  title: '双十一 药优惠 得积分 兑豪礼',
-			  path: '/pages/index/index'
+				title: '双十一 药优惠 得积分 兑豪礼',
+				path: '/pages/index/index'
 			}
 		},
 		onShow() {
+			// 登录提示
+			if (!this.$checkAccess.alterLogin()) return;
 			// 请求打卡列表
 			this.getClockinList();
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
 			// 请求中，不允许刷新
-			if( this.isReqing )		return ;
+			if (this.isReqing) return;
 			// 设置请求中
-			this.isReqing			= true;
+			this.isReqing = true;
 			// 请求列表
-			this.$http.request('/api/custom_score/get_info',this.requestParam).then((re)=>{
+			this.$http.request('/api/custom_score/get_info', this.requestParam).then((re) => {
 				// 设置非请求中
-				this.isReqing		= false;
+				this.isReqing = false;
 				// 成功结果
-				if( re.code == 'success' ){
-					this.scoreInfo	= re.data;
+				if (re.code == 'success') {
+					this.scoreInfo = re.data;
 				}
 			});
 		},
 		methods: {
-			toClockin(){
+			toClockin() {
 				// 如果已经打卡
-				if( this.isMark.is_clockin ) return ;
+				if (this.isMark.is_clockin) return;
 				// 登录提示
-				if( !this.$checkAccess.alterLogin() )  return ;
-				if( this.active_id === 0){
-          uni.showToast({
-            title: '暂无活动',
-            icon:"none"
-          }) ;
-        }
+				if (!this.$checkAccess.alterLogin()) return;
+				if (this.active_id === 0) {
+					uni.showToast({
+						title: '暂无活动',
+						icon: "none"
+					});
+				}
 				// 请求中，不允许刷新
-				if( this.isReqing )		return ;
+				if (this.isReqing) return;
 				// 设置请求中
-				this.isReqing			= true;
+				this.isReqing = true;
 				// 请求列表
-				this.$http.request('api/score_clockin/finish',{'active_id':this.active_id},'post').then((re)=>{
+				this.$http.request('api/score_clockin/finish', {
+					'active_id': this.active_id
+				}, 'post').then((re) => {
 					// 设置非请求中
-					this.isReqing		= false;
+					this.isReqing = false;
 					// 成功结果
-					if( re.code == 'success' ){
+					if (re.code == 'success') {
 						// 赋值
-						this.isMark 	= re.data;
+						this.isMark = re.data;
 						// 积分更新
-						this.scoreInfo.score  = re.data.reward + this.scoreInfo.score; 
+						this.scoreInfo.score = re.data.reward + this.scoreInfo.score;
 						// 更新打卡
 						for (let i in this.clockinList) {
 							// 如果小于等于连续打卡天数，设置为打卡
-							if(this.clockinList[this.listKey][i].what_day <= this.isMark.finish_day ) this.clockinList[this.listKey][i].is_finish = 1;
+							if (this.clockinList[this.listKey][i].what_day <= this.isMark.finish_day) this
+								.clockinList[this.listKey][i].is_finish = 1;
 						}
-					}else {
-            uni.showToast({
-              title: '打卡失败',
-              icon:"none"
-            })
-          }
+					} else {
+						uni.showToast({
+							title: '打卡失败',
+							icon: "none"
+						})
+					}
 				});
 			},
-			getClockinList(){
+			getClockinList() {
 				// 请求列表
-				this.$http.request('api/score_clockin/get_list',this.requestParam).then((re)=>{
+				this.$http.request('api/score_clockin/get_list', this.requestParam).then((re) => {
 					// 成功结果
-					if( re.code == 'success' )		  {
+					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.isMark 	= re.data.is_mark;
+						this.isMark = re.data.is_mark;
 					}
 				});
 			},
-      leftClockin(){
-        if (this.listKey > 0){
-          this.listKey = this.listKey - 1
-        }
-      },
-      rightClockin(){
-        this.listKey = this.listKey + 1
-      }
+			leftClockin() {
+				if (this.listKey > 0) {
+					this.listKey = this.listKey - 1
+				}
+			},
+			rightClockin() {
+				this.listKey = this.listKey + 1
+			}
 		}
 	}
 </script>
 
 <style lang="less">
-	page{
+	page {
 		background-color: #FFFFFF;
 	}
-	.main_view{
+
+	.main_view {
 		display: block;
 		height: 1000rpx;
 		background: linear-gradient(to bottom, #FC335F 0%, #FB7224 50%, #FFFFFF 100%);
+
 		.status_bar {
 			width: 100%;
 			height: 64rpx;
 			display: block;
 			padding-top: var(--status-bar-height);
 		}
-		.info_box{
+
+		.info_box {
 			display: block;
 			overflow: hidden;
-			.left_box{
+
+			.left_box {
 				float: left;
 				width: 450rpx;
-				.score_info{
+
+				.score_info {
 					color: #FFFFFF;
 					overflow: hidden;
 					padding: 0rpx 35rpx;
-					.score_title{
+
+					.score_title {
 						width: 240rpx;
 						height: 60rpx;
 						display: block;
 						font-size: 26rpx;
 						line-height: 60rpx;
 					}
-					.score_current{
+
+					.score_current {
 						width: 240rpx;
 						height: 80rpx;
 						display: block;
@@ -216,20 +234,23 @@
 						line-height: 80rpx;
 					}
 				}
-				.wait_info{
+
+				.wait_info {
 					color: #FFFFFF;
 					display: block;
 					overflow: hidden;
 					padding: 0rpx 35rpx;
 					margin-top: 20rpx;
-					.wait_title{
+
+					.wait_title {
 						width: 240rpx;
 						height: 40rpx;
 						display: block;
 						font-size: 24rpx;
 						line-height: 40rpx;
 					}
-					.wait_score{
+
+					.wait_score {
 						width: 240rpx;
 						height: 60rpx;
 						display: block;
@@ -238,22 +259,26 @@
 					}
 				}
 			}
-			.right_box{
+
+			.right_box {
 				float: right;
 				overflow: hidden;
 				margin-top: 60rpx;
 				margin-right: 35rpx;
-				.lottery_enter{
+
+				.lottery_enter {
 					display: block;
 					overflow: hidden;
 					text-align: center;
-					.lottery_img{
+
+					.lottery_img {
 						width: 150rpx;
 						height: 150rpx;
 						display: block;
 						margin: 0 auto;
 					}
-					.lottery_text{
+
+					.lottery_text {
 						color: #FFFFFF;
 						height: 60rpx;
 						font-size: 28rpx;
@@ -262,7 +287,8 @@
 				}
 			}
 		}
-		.clockin_box{
+
+		.clockin_box {
 			z-index: 9;
 			display: block;
 			width: 700rpx;
@@ -271,28 +297,33 @@
 			border-radius: 40rpx;
 			background-color: #FFFFFF;
 			box-shadow: 5rpx 5rpx 2rpx 0rpx #DDDDDD;
-			.box_title{
+
+			.box_title {
 				height: 80rpx;
 				color: #999999;
 				text-align: center;
 				line-height: 80rpx;
-        .left_icon{
-          float: left;
-          padding-left: 20rpx;
-        }
-        .right_icon{
-          float: right;
-          padding-right: 20rpx;
-        }
+
+				.left_icon {
+					float: left;
+					padding-left: 20rpx;
+				}
+
+				.right_icon {
+					float: right;
+					padding-right: 20rpx;
+				}
 			}
-			.clockin_list{
+
+			.clockin_list {
 				display: block;
 				overflow: hidden;
-        width: 100%;
-        padding-top: 25rpx;
-				.clockin_item{
+				width: 100%;
+				padding-top: 25rpx;
+
+				.clockin_item {
 					float: left;
-          position: relative;
+					position: relative;
 					width: 70rpx;
 					height: 165rpx;
 					text-align: center;
@@ -300,43 +331,50 @@
 					border-radius: 20rpx;
 					margin-bottom: 20rpx;
 					background-color: #F8F8F8;
-					.what_day{
+
+					.what_day {
 						display: block;
 						height: 40rpx;
 						font-size: 24rpx;
 						line-height: 60rpx;
 					}
-					.score_one{
+
+					.score_one {
 						display: block;
 						height: 60rpx;
 						margin: 10rpx auto;
 						position: relative;
-						.score_icon{
+
+						.score_icon {
 							display: block;
 							width: 60rpx;
 							height: 60rpx;
 							margin: 0rpx auto;
 						}
 					}
-					.score_tow{
+
+					.score_tow {
 						display: block;
 						height: 80rpx;
 						margin: 10rpx auto;
 						position: relative;
-						.score_icon{
+
+						.score_icon {
 							display: block;
 							width: 80rpx;
 							height: 80rpx;
 							margin: 0rpx auto;
 						}
-						.score_icon:nth-child(1){
+
+						.score_icon:nth-child(1) {
 							top: 0rpx;
 							left: 10rpx;
 							width: 80rpx;
 							height: 80rpx;
 							position: absolute;
 						}
-						.score_icon:nth-child(2){
+
+						.score_icon:nth-child(2) {
 							top: 0rpx;
 							left: 55rpx;
 							width: 80rpx;
@@ -344,33 +382,38 @@
 							position: absolute;
 						}
 					}
-					.score_the{
+
+					.score_the {
 						width: 200rpx;
 						display: block;
 						height: 100rpx;
 						margin: 10rpx auto;
 						position: relative;
-						.score_icon{
+
+						.score_icon {
 							display: block;
 							width: 80rpx;
 							height: 80rpx;
 							margin: 0rpx auto;
 						}
-						.score_icon:nth-child(1){
+
+						.score_icon:nth-child(1) {
 							top: 15rpx;
 							left: 20rpx;
 							width: 80rpx;
 							height: 80rpx;
 							position: absolute;
 						}
-						.score_icon:nth-child(2){
+
+						.score_icon:nth-child(2) {
 							top: 15rpx;
 							left: 95rpx;
 							width: 80rpx;
 							height: 80rpx;
 							position: absolute;
 						}
-						.score_icon:nth-child(3){
+
+						.score_icon:nth-child(3) {
 							top: 0rpx;
 							left: 60rpx;
 							width: 80rpx;
@@ -378,51 +421,58 @@
 							position: absolute;
 						}
 					}
-					.give_score{
+
+					.give_score {
 						display: block;
 						height: 30rpx;
 						font-size: 24rpx;
 						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;
-          }
+
+					.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){
 					width: 315rpx;
 				}*/
-				.clockin_item.acitve{
+				.clockin_item.acitve {
 					color: #FFFFFF;
 					background-color: #E03519;
 				}
 			}
-			.clockin_btn{
+
+			.clockin_btn {
 				width: 660rpx;
 				color: #FFFFFF;
 				font-size: 30rpx;
-        margin-top: 20rpx;
+				margin-top: 20rpx;
 				padding: 0rpx 0rpx;
 				border-radius: 60rpx;
 				background-color: #E03519;
 				border: 0rpx solid transparent;
 			}
-			.clockin_btn.active{
+
+			.clockin_btn.active {
 				color: #FFFFFF;
 				background-color: #AAAAAA;
 			}
-			.clockin_btn::after{
+
+			.clockin_btn::after {
 				border: 0rpx solid transparent;
 			}
-			.score_record{
+
+			.score_record {
 				height: 60rpx;
 				display: block;
 				color: #999999;
@@ -433,4 +483,4 @@
 			}
 		}
 	}
-</style>
+</style>