opt:优化引导样式

components/guide/guide.vue

@@ -9,10 +9,18 @@
 			</view>
 		</template>
 		<template v-if="noticeArray[currentIndex].type == 'top' ">
+			<view class="arrow"
+				:style="{'height':'96rpx','width':'96rpx','top': (top-height-topMsgHeight+50) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
+				<image mode="aspectFill" src="../../static/arrow-down.png" style="width: 96rpx;height: 96rpx;"></image>
+			</view>
 			<view :class="left<(winWidth/2)?'show-message_top_left':'show-message_top_right'"
-				:style="{'top': (top-height-topMsgHeght+30) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right)+'px':''  }">
+				:style="{'top': (top-height-topMsgHeight-10) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right)+'px':''  }">
 				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
 			</view>
+			<view @click="click" class="guide-next"
+				:style="{'top': (top-height-topMsgHeight+170) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
+				<image mode="aspectFit" src="../../static/i_know.png" style="width: 200rpx; height: 100rpx;"></image>
+			</view>
 		</template>
 		<template v-if="noticeArray[currentIndex].type == 'right' ">
 			<view class="show-message_right" :style="{'top': top +'px', 'left': (left+width+20) +'px' }">
@@ -20,15 +28,22 @@
 			</view>
 		</template>
 		<template v-if="noticeArray[currentIndex].type == 'bottom' ">
+			<view class="arrow"
+				:style="{'height':'96rpx','width':'96rpx','top': (top+height) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
+				<image mode="aspectFill" src="../../static/arrow-top.png" style="width: 96rpx;height: 96rpx;"></image>
+			</view>
 			<view :class="left<(winWidth/2)?'show-message_bottom_left':'show-message_bottom_right'"
-				:style="{'top': (top+height+15) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
+				:style="{'top': (top+height+50) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
 				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
 			</view>
+			<view @click="click" class="guide-next"
+				:style="{'top': (top+height+110) +'px', 'left': left<(winWidth/2)?left+'px':'' , 'right': left>(winWidth/2)?(winWidth-right) +'px':'' }">
+				<image mode="aspectFit" src="../../static/i_know.png" style="width: 200rpx; height: 100rpx;"></image>
+			</view>
 		</template>
-		<view class="cover-wrap">
-			<view class="guide-next" @tap="click"
-				:style="{color: '#000000'}">{{nextText}}</view>
-		</view>
+		<!-- <view class="cover-wrap">
+			<view class="guide-next" @tap="click" :style="{color: '#000000'}">{{nextText}}</view>
+		</view> -->
 	</view>
 </template>
 
@@ -75,7 +90,7 @@
 		},
 		data() {
 			return {
-				topMsgHeght: 0,
+				topMsgHeight: 0,
 				winWidth: 0,
 				nextText: '下一步' // 知道了，关闭说明
 			}
@@ -83,18 +98,16 @@
 		watch: {
 			show(n) {},
 			currentIndex(value) {
+				console.log('currentIndex', value)
 				if (value != this.noticeArray.length && this.noticeArray[value].type == 'top') {
 					const className = this.left < (this.winWidth / 2) ? '.show-message_top_left' :
 						'.show-message_top_right'
 					const query = uni.createSelectorQuery().in(this);
 					query.select(className).boundingClientRect(data => {
 						// 29px 为一行语句的高度
-						this.topMsgHeght = data.height - 29
+						this.topMsgHeight = data.height - 29
 					}).exec();
 				}
-				if (value == this.noticeArray.length - 1) {
-					this.nextText = '我知道啦'
-				}
 			}
 		},
 		methods: {
@@ -135,6 +148,10 @@
 		pointer-events: none;
 	}
 
+	.arrow {
+		position: absolute;
+	}
+
 	.show-message_left,
 	.show-message_top_left,
 	.show-message_top_right,
@@ -148,7 +165,7 @@
 		pointer-events: none;
 		color: #fff;
 		font-size: 24rpx;
-		max-width: 50%;
+		max-width: 30%;
 		text-align: left;
 	}
 
@@ -165,18 +182,18 @@
 		right: -22rpx;
 	}
 
-	.show-message_top_left::after,
-	.show-message_top_right::after {
-		content: '';
-		border-left: 12rpx solid transparent;
-		border-top: 12rpx solid rgba(0, 0, 0, .5);
-		border-right: 12rpx solid transparent;
-		border-bottom: 12rpx solid transparent;
-		width: 0;
-		height: 0;
-		position: absolute;
-		top: 100%;
-	}
+	// .show-message_top_left::after,
+	// .show-message_top_right::after {
+	// 	content: '';
+	// 	border-left: 12rpx solid transparent;
+	// 	border-top: 12rpx solid rgba(0, 0, 0, .5);
+	// 	border-right: 12rpx solid transparent;
+	// 	border-bottom: 12rpx solid transparent;
+	// 	width: 0;
+	// 	height: 0;
+	// 	position: absolute;
+	// 	top: 100%;
+	// }
 
 	.show-message_top_left::after {
 		left: 20%;
@@ -199,18 +216,18 @@
 		left: -24rpx;
 	}
 
-	.show-message_bottom_left::after,
-	.show-message_bottom_right::after {
-		content: '';
-		border-left: 12rpx solid transparent;
-		border-top: 12rpx solid transparent;
-		border-right: 12rpx solid transparent;
-		border-bottom: 12rpx solid rgba(0, 0, 0, .5);
-		width: 0;
-		height: 0;
-		position: absolute;
-		top: -22rpx;
-	}
+	// .show-message_bottom_left::after,
+	// .show-message_bottom_right::after {
+	// 	content: '';
+	// 	border-left: 12rpx solid transparent;
+	// 	border-top: 12rpx solid transparent;
+	// 	border-right: 12rpx solid transparent;
+	// 	border-bottom: 12rpx solid rgba(0, 0, 0, .5);
+	// 	width: 0;
+	// 	height: 0;
+	// 	position: absolute;
+	// 	top: -22rpx;
+	// }
 
 	.show-message_bottom_left::after {
 		left: 20%;
@@ -220,25 +237,30 @@
 		right: 20%;
 	}
 
-	.cover-wrap {
-		width: 100vw;
-		height: 100vh;
-		top: 0;
-		left: 0;
+	.guide-next {
 		position: absolute;
-
-		.guide-next {
-			// padding: 0 40rpx;
-			padding: 16rpx 32rpx;
-			height: 40rpx;
-			background-color: #FFFFFF;
-			text-align: center;
-			font-size: 28rpx;
-			border-radius: 38rpx;
-			position: absolute;
-			bottom: 60rpx;
-			left: 50%;
-			transform: translate(-50%, 0);
-		}
 	}
+
+	// .cover-wrap {
+	// 	width: 100vw;
+	// 	height: 100vh;
+	// 	top: 0;
+	// 	left: 0;
+	// 	position: absolute;
+
+	// 	.guide-next {
+	// 		position: absolute;
+	// 		padding: 0 40rpx;
+	// 		padding: 16rpx 32rpx;
+	// 		height: 40rpx;
+	// 		background-color: #FFFFFF;
+	// 		text-align: center;
+	// 		font-size: 28rpx;
+	// 		border-radius: 38rpx;
+	// 		position: absolute;
+	// 		bottom: 60rpx;
+	// 		left: 50%;
+	// 		transform: translate(-50%, 0);
+	// 	}
+	// }
 </style>

pages/home/home.vue

@@ -66,7 +66,7 @@
 			</view>
 		</view>
 		<guide :show="showGuide" :width="cWidth" :height="cHeight" :left="cLeft" :right="cRight" :top="cTop"
-			:showMessage='cShowMsg' :currentIndex="currentIndex" :noticeArray="noticeArray" @click="clicktoNext">
+			:showMessage='cShowMsg' :currentIndex="currentIndex" :noticeArray="noticeArray" @click="clickNext">
 		</guide>
 	</view>
 </template>
@@ -137,11 +137,11 @@
 						"showMessage": "如面部无法识别， 点击进入手机开门界面",
 						"type": "top"
 					},
-					{
-						"showID": "shop",
-						"showMessage": "点击进入酒店小超市， 挑选心仪商品",
-						"type": "top"
-					}
+					// {
+					// 	"showID": "shop",
+					// 	"showMessage": "点击进入酒店小超市， 挑选心仪商品",
+					// 	"type": "top"
+					// }
 				],
 				appId: ''
 			};
@@ -191,7 +191,7 @@
 					url: '/subpkg/chooseHotel/chooseHotel?source=home'
 				})
 			},
-			clicktoNext() {
+			clickNext() {
 				console.log('点击了下一个')
 				if (this.currentIndex >= this.noticeArray.length) {
 					this.showGuide = false;
@@ -229,7 +229,11 @@
 			}
 		},
 		async onLoad() {
-			const {miniProgram: {appId}} = uni.getAccountInfoSync();
+			const {
+				miniProgram: {
+					appId
+				}
+			} = uni.getAccountInfoSync();
 			this.appId = appId
 			// console.log(__wxConfig)
 			//获取openid
@@ -279,10 +283,8 @@
 			//显示引导
 			// uni.setStorageSync('showGuide', true)
 			let showGuide = uni.getStorageSync('showGuide')
-			console.log(typeof showGuide)
-			console.log(showGuide)
-			console.log(showGuide === '')
 			if (showGuide === '') {
+				// if (true) {
 				this.showGuide = true
 				uni.setStorageSync('showGuide', 'false')
 				let _this = this;