opt:首页新增流程引导

components/guide/guide.vue

@@ -0,0 +1,244 @@
+<template>
+	<view v-show="show" class="main" @touchmove.stop>
+		<view class="rect-shadow"
+			:style="{'width':width+'px','height':height+'px','left':left+'px',top:top+'px','border-radius': noticeArray[currentIndex].radius?noticeArray[currentIndex].radius+'rpx':'' }">
+		</view>
+		<template v-if="noticeArray[currentIndex].type == 'left' ">
+			<view class="show-message_left" :style="{'top': top +'px', 'right': winWidth-right+width+20+'px' }">
+				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
+			</view>
+		</template>
+		<template v-if="noticeArray[currentIndex].type == 'top' ">
+			<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':''  }">
+				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
+			</view>
+		</template>
+		<template v-if="noticeArray[currentIndex].type == 'right' ">
+			<view class="show-message_right" :style="{'top': top +'px', 'left': (left+width+20) +'px' }">
+				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
+			</view>
+		</template>
+		<template v-if="noticeArray[currentIndex].type == 'bottom' ">
+			<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':'' }">
+				<view style="padding: 12rpx 18rpx;">{{showMessage}}</view>
+			</view>
+		</template>
+		<view class="cover-wrap">
+			<view class="guide-next" @tap="click"
+				:style="{color: '#000000'}">{{nextText}}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "guide",
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			left: {
+				type: [Number, String],
+				default: ''
+			},
+			right: {
+				type: [Number, String],
+				default: ''
+			},
+			top: {
+				type: [Number, String],
+				default: ''
+			},
+			width: {
+				type: [Number, String],
+				default: ''
+			},
+			height: {
+				type: [Number, String],
+				default: ''
+			},
+			showMessage: {
+				type: String,
+				default: ''
+			},
+			currentIndex: {
+				type: Number,
+				default: 0
+			},
+			noticeArray: {
+				type: Array,
+				default: []
+			}
+		},
+		data() {
+			return {
+				topMsgHeght: 0,
+				winWidth: 0,
+				nextText: '下一步' // 知道了，关闭说明
+			}
+		},
+		watch: {
+			show(n) {},
+			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
+					}).exec();
+				}
+				if (value == this.noticeArray.length - 1) {
+					this.nextText = '我知道啦'
+				}
+			}
+		},
+		methods: {
+			click() {
+				this.$emit('click');
+			},
+			// 清除页面所有定时器
+			clearTimeAll() {
+				clearTimeout(this.stt01);
+			}
+		},
+		created() {
+			this.stt01 = setTimeout(() => {
+				uni.getSystemInfo({
+					success: (res) => {
+						this.winWidth = res.windowWidth;
+					}
+				});
+			}, 60)
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 99999;
+	}
+
+	.rect-shadow {
+		position: absolute;
+		border-radius: 12px;
+		box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
+		pointer-events: none;
+	}
+
+	.show-message_left,
+	.show-message_top_left,
+	.show-message_top_right,
+	.show-message_right,
+	.show-message_bottom_left,
+	.show-message_bottom_right {
+		position: absolute;
+		border-radius: 12rpx;
+		background-color: rgba(0, 0, 0, .5);
+		text-align: center;
+		pointer-events: none;
+		color: #fff;
+		font-size: 24rpx;
+		max-width: 50%;
+		text-align: left;
+	}
+
+	.show-message_left::after {
+		content: '';
+		border-left: 12rpx solid rgba(0, 0, 0, .5);
+		border-top: 12rpx solid transparent;
+		border-right: 12rpx solid transparent;
+		border-bottom: 12rpx solid transparent;
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 25%;
+		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 {
+		left: 20%;
+	}
+
+	.show-message_top_right::after {
+		right: 20%;
+	}
+
+	.show-message_right::after {
+		content: '';
+		border-left: 12rpx solid transparent;
+		border-top: 12rpx solid transparent;
+		border-right: 12rpx solid rgba(0, 0, 0, .5);
+		border-bottom: 12rpx solid transparent;
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 25%;
+		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 {
+		left: 20%;
+	}
+
+	.show-message_bottom_right::after {
+		right: 20%;
+	}
+
+	.cover-wrap {
+		width: 100vw;
+		height: 100vh;
+		top: 0;
+		left: 0;
+		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);
+		}
+	}
+</style>

package-lock.json

@@ -299,6 +299,306 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher/-/watcher-2.4.1.tgz",
+      "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.4.1",
+        "@parcel/watcher-darwin-arm64": "2.4.1",
+        "@parcel/watcher-darwin-x64": "2.4.1",
+        "@parcel/watcher-freebsd-x64": "2.4.1",
+        "@parcel/watcher-linux-arm-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.4.1",
+        "@parcel/watcher-linux-arm64-musl": "2.4.1",
+        "@parcel/watcher-linux-x64-glibc": "2.4.1",
+        "@parcel/watcher-linux-x64-musl": "2.4.1",
+        "@parcel/watcher-win32-arm64": "2.4.1",
+        "@parcel/watcher-win32-ia32": "2.4.1",
+        "@parcel/watcher-win32-x64": "2.4.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz",
+      "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz",
+      "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz",
+      "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz",
+      "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz",
+      "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz",
+      "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz",
+      "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz",
+      "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz",
+      "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz",
+      "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz",
+      "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmmirror.com/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz",
+      "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "peer": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -711,6 +1011,21 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.22.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
@@ -883,6 +1198,24 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -1053,6 +1386,21 @@
       "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
       "dev": true
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.601",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.601.tgz",
@@ -1210,6 +1558,21 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -1498,6 +1861,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.7.tgz",
+      "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -1562,6 +1934,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -1571,12 +1955,39 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-lambda": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz",
       "integrity": "sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==",
       "dev": true
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-plain-obj": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
@@ -1778,6 +2189,22 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmmirror.com/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1973,6 +2400,15 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/node-gyp": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-8.4.1.tgz",
@@ -2372,6 +2808,21 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -2517,6 +2968,22 @@
         "node": ">= 6"
       }
     },
+    "node_modules/readdirp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -2607,6 +3074,27 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/sass": {
+      "version": "1.80.3",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.80.3.tgz",
+      "integrity": "sha512-ptDWyVmDMVielpz/oWy3YP3nfs7LpJTHIJZboMVs8GEC9eUmtZTZhMHlTW98wY4aEorDfjN38+Wr/XjskFWcfA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@parcel/watcher": "^2.4.1",
+        "chokidar": "^4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/sass-graph": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-4.0.1.tgz",
@@ -2808,6 +3296,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -3078,6 +3578,21 @@
         }
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/trim-newlines": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
@@ -3185,7 +3700,7 @@
     },
     "node_modules/uview-ui": {
       "version": "2.0.36",
-      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.36.tgz",
+      "resolved": "https://registry.npmmirror.com/uview-ui/-/uview-ui-2.0.36.tgz",
       "integrity": "sha512-ASSZT6M8w3GTO1eFPbsgEFV0U5UujK+8pTNr+MSUbRNcRMC1u63DDTLJVeArV91kWM0bfAexK3SK9pnTqF9TtA==",
       "engines": {
         "HBuilderX": "^3.1.0"

pages/home/home.vue

@@ -13,28 +13,66 @@
 			<view class="hotel-name--content" :style="[hotelNameFontSize]">
 				<view>{{ currentHotel.name }}</view>
 			</view>
-			<view class="hotel-name--fix" @click="gotoSelectHotel">
+			<view class="hotel-name--fix" @click="gotoSelectHotel" id="changeHotel">
 				<img src="/static/switch.svg" style="width: 30rpx; height: 30rpx;">
 				切换
 			</view>
 		</view>
 
 		<view class="bottom">
-			<view class="botton--row" v-for="(row, rowIndex) in bottomList" :key="rowIndex">
-				<view class="botton--row-item" v-for="(item, itemIndex) in row" :key="itemIndex">
-					<view class="botton--row-item__content" @click="navigateTo(item.url)">
-						<view class="botton--row-item__img">
-							<u-image :src="item.src" :width="item.width" :height="item.height"></u-image>
-						</view>
-						<view class="botton--row-item__word">{{ item.text }}</view>
+			<view class="bottom--row">
+				<view class="bottom--row-item" id="checkin"
+					@click="navigateTo('/subpkg_checkin/selectCheckinType/selectCheckinType')">
+					<view class="bottom--row-item__img">
+						<u-image src="/static/checkin.png" width="118rpx" height="108rpx"></u-image>
 					</view>
+					<view class="bottom--row-item__word">入住</view>
+				</view>
+				<view class="bottom--row-item" id="extend" @click="navigateTo('/subpkg/extend/extend?fromExtend=true')">
+					<view class="bottom--row-item__img">
+						<u-image src="/static/extend.png" width="105rpx" height="103rpx"></u-image>
+					</view>
+					<view class="bottom--row-item__word">续住</view>
+				</view>
+				<view class="bottom--row-item" id="checkout"
+					@click="navigateTo('/subpkg/extend/extend?fromExtend=false')">
+					<view class="bottom--row-item__img">
+						<u-image src="/static/checkout.png" width="113rpx" height="105rpx"></u-image>
+					</view>
+					<view class="bottom--row-item__word">退房</view>
+				</view>
+			</view>
+			<view class="bottom--row">
+				<view class="bottom--row-item" id="lift_qrcode"
+					@click="navigateTo('/subpkg/elevatorControl/elevatorControl')">
+					<view class="bottom--row-item__img">
+						<u-image src="/static/lift_qrcode.png" width="105rpx" height="93rpx"></u-image>
+					</view>
+					<view class="bottom--row-item__word">梯控二维码</view>
+				</view>
+				<view class="bottom--row-item" id="emergency_key"
+					@click="navigator('/subpkg/emergencyKey/emergencyKey')">
+					<view class="bottom--row-item__img">
+						<u-image src="/static/emergency_key.png" width="78rpx" height="95rpx"></u-image>
+					</view>
+					<view class="bottom--row-item__word">手机开门</view>
+				</view>
+				<view class="bottom--row-item" id="shop">
+					<view class="bottom--row-item__img">
+						<u-image src="/static/shop.png" width="118rpx" height="108rpx"></u-image>
+					</view>
+					<view class="bottom--row-item__word">客房超市</view>
 				</view>
 			</view>
 		</view>
+		<guide :show="showGuide" :width="cWidth" :height="cHeight" :left="cLeft" :right="cRight" :top="cTop"
+			:showMessage='cShowMsg' :currentIndex="currentIndex" :noticeArray="noticeArray" @click="clicktoNext">
+		</guide>
 	</view>
 </template>
 
 <script>
+	import guide from '@/components/guide/guide.vue'
 	import {
 		mapState,
 		mapMutations
@@ -45,50 +83,12 @@
 	import NavigateBar from '../../components/navigateBar/navigate-bar.vue';
 	export default {
 		components: {
-			NavigateBar
+			NavigateBar,
+			guide
 		},
 		data() {
 			return {
 				topSrc: IMG_BASE_URL + "/home_top.png",
-				bottomList: [
-					[{
-							src: "/static/checkin.png",
-							text: "入住",
-							url: "/subpkg_checkin/selectCheckinType/selectCheckinType",
-							width: "118rpx",
-							height: "108rpx"
-						},
-						{
-							src: "/static/extand.png",
-							text: "续住",
-							url: "/subpkg/extend/extend?fromExtend=true",
-							width: "105rpx",
-							height: "103rpx"
-						},
-						{
-							src: "/static/checkout.png",
-							text: "退房",
-							url: "/subpkg/extend/extend?fromExtend=false",
-							width: "113rpx",
-							height: "105rpx"
-						},
-					],
-					[{
-							src: "/static/lift_qrcode.png",
-							text: "梯控二维码",
-							url: "/subpkg/elevatorControl/elevatorControl",
-							width: "105rpx",
-							height: "93rpx"
-						},
-						{
-							src: "/static/emergency_key.png",
-							text: "手机开门",
-							url: "/subpkg/emergencyKey/emergencyKey",
-							width: "78rpx",
-							height: "95rpx"
-						}
-					]
-				],
 				advPicList: [{
 						image: IMG_BASE_URL + "/home_adv1.png",
 						title: ""
@@ -97,6 +97,51 @@
 						image: IMG_BASE_URL + "/home_adv2.png",
 						title: ""
 					}
+				],
+				showGuide: true, //引导是否显示 
+				cShowMsg: '', // 展示的解释语
+				cWidth: '',
+				cHeight: '',
+				cLeft: '',
+				cRight: '',
+				cTop: '',
+				currentIndex: 0,
+				//配置需要显示引导的view以及引导显示的msg
+				noticeArray: [{
+						"showID": "changeHotel", // 对应的id
+						"showMessage": "点击“切换” 选择您要入住的酒店", // 对应的解释文本
+						"type": "bottom" // 解释框的气泡类型
+					},
+					{
+						"showID": "checkin", // 对应的id
+						"showMessage": "点击“入住”办理当前酒店入住流程", // 对应的解释文本
+						"type": "bottom" // 解释框的气泡类型
+					},
+					{
+						"showID": "extend",
+						"showMessage": "点击“续住”办理当前房间续住流程",
+						"type": "bottom"
+					},
+					{
+						"showID": "checkout",
+						"showMessage": "点击“退房”办理当前房间退房流程",
+						"type": "bottom"
+					},
+					{
+						"showID": "lift_qrcode",
+						"showMessage": "如面部无法识别， 点击进入梯控二维码界面",
+						"type": "top"
+					},
+					{
+						"showID": "emergency_key",
+						"showMessage": "如面部无法识别， 点击进入手机开门界面",
+						"type": "top"
+					},
+					{
+						"showID": "shop",
+						"showMessage": "点击进入酒店小超市， 挑选心仪商品",
+						"type": "top"
+					}
 				]
 			};
 		},
@@ -144,7 +189,34 @@
 				uni.redirectTo({
 					url: '/subpkg/chooseHotel/chooseHotel?source=home'
 				})
-			}
+			},
+			clicktoNext() {
+				console.log('点击了下一个')
+				if (this.currentIndex >= this.noticeArray.length) {
+					this.showGuide = false;
+					return;
+				}
+				this.noticeArray[this.currentIndex].zindex = 0;
+				this.cShowMsg = '';
+				this.currentIndex++;
+				if (this.currentIndex >= this.noticeArray.length) {
+					this.showGuide = false;
+					return;
+				}
+				this.cShowMsg = this.noticeArray[this.currentIndex].showMessage;
+				var idS = '#' + this.noticeArray[this.currentIndex].showID;
+				console.log(idS)
+				const query = uni.createSelectorQuery().in(this);
+				query.select(idS).boundingClientRect(data => {
+					console.log("得到布局位置信息" + JSON.stringify(data));
+					this.cWidth = data.width;
+					this.cHeight = data.height;
+					this.cLeft = data.left;
+					this.cRight = data.right;
+					this.cTop = data.top;
+				}).exec();
+
+			},
 		},
 		onShow() {
 			//进入页面时 currentHotel 为空时 跳转选择酒店
@@ -198,6 +270,28 @@
 				});
 				// #endif
 			}
+
+			let _this = this;
+			this.$nextTick(function() {
+				if (_this.currentIndex >= _this.noticeArray.length) {
+					_this.showGuide = false;
+					return;
+				}
+				_this.showGuide = true;
+				_this.cShowMsg = _this.noticeArray[_this.currentIndex].showMessage;
+				var idS = '#' + _this.noticeArray[_this.currentIndex].showID;
+				console.log(idS)
+				//根据布局信息显示引导框位置
+				const query = uni.createSelectorQuery().in(_this);
+				query.select(idS).boundingClientRect(data => {
+					console.log("得到布局位置信息" + JSON.stringify(data));
+					_this.cWidth = data.width;
+					_this.cHeight = data.height;
+					_this.cLeft = data.left;
+					this.cRight = data.right;
+					_this.cTop = data.top;
+				}).exec();
+			});
 		},
 		// #ifdef MP-WEIXIN
 		onShareAppMessage(info) {
@@ -269,38 +363,14 @@
 			box-shadow: 1px 1px #eaeaf5, -1px 2px #eaeaf5;
 
 
-			.botton--row:first-child {
+			.bottom--row {
 				display: flex;
 				flex-direction: row;
 				justify-content: space-between;
 				margin: 0 60rpx 30rpx;
 				padding-top: 60rpx;
 
-				.botton--row-item__content {
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: space-between;
-					height: 170rpx;
-					width: 170rpx;
-
-					.botton--row-item__img {
-						height: 120rpx;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-					}
-				}
-			}
-
-			.botton--row:last-child {
-				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				margin: 0 180rpx;
-				padding-bottom: 80rpx;
-
-				.botton--row-item__content {
+				.bottom--row-item__content {
 					display: flex;
 					flex-direction: column;
 					align-items: center;
@@ -308,7 +378,7 @@
 					height: 170rpx;
 					width: 170rpx;
 
-					.botton--row-item__img {
+					.bottom--row-item__img {
 						height: 120rpx;
 						display: flex;
 						align-items: center;