feat: 蒙层提示

src/components/mask-tip/index.vue

+<template>
+  <u-mask :show="visible" @click="handleClick" :zoom="false">
+    <view class="tip-view" :style="'margin-top:' + statusBarHeight + 'px'">
+      <image
+        class="tip-image"
+        :src="imageUrl"
+        :style="imageStyle"
+        mode="widthFix"
+      ></image>
+    </view>
+  </u-mask>
+</template>
+
+<script>
+/**
+ * @description 创建一个遮罩层，提示图片
+ * @property {Boolean} show 是否显示遮罩（默认false）
+ * @property {Object} imageName 图片地址名
+ * @property {Object} imageStyle 自定义样式对象
+ * @example <mask-tip :show.sync="show"></mask-tip>
+ */
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    imageName: {
+      type: String,
+      default: ''
+    },
+    imageStyle: {
+      type: String,
+      default: ''
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    timeout: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      statusBarHeight: 20,
+      visible: false
+    }
+  },
+  watch: {
+    show(val) {
+      if (!val) return
+      let value = this.vuex_not_first
+      if (!value[this.name]) {
+        uni.getSystemInfo({
+          success: (res) => {
+            this.statusBarHeight = res.statusBarHeight
+              setTimeout(() => {
+                this.visible = true
+              }, this.time)
+          },
+        })
+        value[this.name] = true
+        this.$u.vuex('vuex_not_first', value)
+      }
+    }
+  },
+  computed: {
+    imageUrl() {
+      return process.uniEnv.qn_base_url + this.imageName
+    },
+    time() {
+      return this.timeout ? 1500 : 0
+    }
+  },
+  methods: {
+    handleClick() {
+      this.visible = false
+      this.$emit('click')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.tip-view {
+}
+</style>

src/pages/index/index.vue

@@ -110,12 +110,19 @@
       <!-- <EusingList /> -->
     </view>
     <upload-progress />
+    <MaskTip
+      :show="showMask"
+      imageName="mengceng2.png"
+      :imageStyle="imageStyle"
+      name="upload_tip"
+    />
   </TabBarPage>
 </template>
 
 <script>
 import TabBarPage from '@/components/tabBarList/index.vue'
 import NoOrder from '@/components/order/noOrder.vue'
+import MaskTip from '@/components/mask-tip/index.vue'
 const app = getApp()
 import OrderCell from '@/components/order/index.vue'
 // import EusingList from '@/components/order/eusingList.vue'
@@ -125,6 +132,7 @@ export default {
     OrderCell,
     TabBarPage,
     NoOrder,
+    MaskTip,
     // EusingList,
   },
   data() {
@@ -151,6 +159,7 @@ export default {
       old: {
         scrollTop: 0,
       },
+      showMask: false,
     }
   },
   watch: {
@@ -193,6 +202,9 @@ export default {
     weiruzhuImage() {
       return process.uniEnv.qn_base_url + 'weiruzhu.png'
     },
+    imageStyle() {
+      return  'width:628rpx; margin-top:816rpx; margin-left:122rpx'
+    }
   },
   onLoad(e) {
     app.trackPage('自营平台首页')
@@ -202,6 +214,7 @@ export default {
     } else {
       this.waitInit = true
     }
+    this.showMaskTip()
   },
   onShow() {
     // 每次进入页面都刷新入驻状态
@@ -444,6 +457,10 @@ export default {
         url: '/pages/mine/customer/index' + '?type=exclusive',
       })
     },
+    // 显示提示蒙版
+    showMaskTip() {
+      this.showMask = true
+    },
   },
 }
 </script>

src/pages/index/mine.vue

@@ -57,13 +57,32 @@
 		<view>
       <u-toast ref="uToast" />
     </view>
+		<MaskTip
+      :show="showMask"
+      imageName="mengceng4.png"
+      :imageStyle="imageStyle"
+      name="order_tip"
+			@click="showMask1 = true"
+    />
+		<MaskTip
+      :show="showMask1"
+      imageName="mengceng3.png"
+      :imageStyle="imageStyle1"
+      name="history_tip"
+			:timeout="false"
+    />
 	</view>
 </template>
 
 <script>
 	import login from "@/utils/login.js";
+	import MaskTip from '@/components/mask-tip/index.vue'
+
 	const app = getApp();
 	export default {
+		components: {
+			MaskTip
+		},
 		data() {
 			return {
 				serviceTel: '18124099271',
@@ -73,6 +92,8 @@
 				wodebeijingImage: '',
 				placeholderImage: '',
 				needSettled: true, // 需要入驻
+				showMask: false,
+				showMask1: false,
 			}
 		},
 		computed: {
@@ -190,6 +211,12 @@
 			},
 			isSuperuser() {
 				return this.vuex_superuser
+			},
+			imageStyle() {
+      	return  'width:602rpx; margin-top:560rpx; margin-left:28rpx'
+			},
+			imageStyle1() {
+				return  'width:596rpx; margin-top:736rpx; margin-left:28rpx'
 			}
 		},
 		watch: {
@@ -212,6 +239,7 @@
 			}
 			this.wodebeijingImage = this.qnFile('wodebeijing-jb.png')
 			this.placeholderImage = this.qnFile('touxiang.png')
+			this.showMaskTip()
 		},
 		onShow() {
 			// 更新是否需要入住
@@ -279,7 +307,11 @@
 				} else {
 					this.$u.route({url: "pages/login/index"})
 				}
-			}
+			},
+			// 显示提示蒙版
+			showMaskTip() {
+				this.showMask = true
+			},
 		}
 	}
 </script>

src/pages/index/order.vue

@@ -93,6 +93,12 @@
     </view>
     <!-- 悬浮按钮 -->
     <!-- <EusingList type="collapse" /> -->
+    <MaskTip
+      :show="showMask"
+      imageName="mengceng1.png"
+      :imageStyle="imageStyle"
+      name="today_tip"
+    />
   </TabBarPage>
 </template>
 
@@ -101,6 +107,8 @@ import TabBarPage from '@/components/tabBarList/index.vue'
 import OrderCell from '@/components/order/index.vue'
 import NoOrder from '@/components/order/noOrder.vue'
 import upload from '@/components/upload/task.js'
+import MaskTip from '@/components/mask-tip/index.vue'
+
 // import EusingList from '@/components/order/eusingList.vue'
 
 export default {
@@ -108,6 +116,7 @@ export default {
     TabBarPage,
     OrderCell,
     NoOrder,
+    MaskTip,
     // EusingList,
   },
   data() {
@@ -171,6 +180,7 @@ export default {
       old: {
         scrollTop: 0,
       },
+      showMask: false,
     }
   },
   computed: {
@@ -281,6 +291,9 @@ export default {
     noOrderCustomStyle() {
       return 'margin-top: 100rpx;background-color: #F4F5F7'
     },
+    imageStyle() {
+      return  'width:546rpx; margin-top:80rpx; margin-left:100rpx'
+    }
   },
   onLoad(e) {
     getApp().trackPage('订单首页')
@@ -292,6 +305,7 @@ export default {
         this.indexStatus[this.curNow].indexOf(e.type)
       )
     }
+    this.showMaskTip()
   },
   onShow() {
     if (this.uploadTask.length > 0) {
@@ -488,6 +502,10 @@ export default {
         this.scrollTop = 0
       })
     },
+    // 显示提示蒙版
+    showMaskTip() {
+      this.showMask = true
+    },
   },
 }
 </script>

src/pages/mine/wallet/index.vue

@@ -2,9 +2,9 @@
 	<view class="wallet-view">
 		<u-navbar back-icon-color="#333333" background="#F4F5F7" title="我的钱包" titleColor="#333333"
 			:border-bottom="false" title-bold></u-navbar>
-		<view class="wallet-content-view">
+		<view class="wallet-content-view">
 			<view class="header-view">
-				<image class="header-image" :src="qnFile('qianbaobeijing.png')"></image>
+				<image class="header-image" :src="qnFile('qianbaobeijing.png')"></image>
 			</view>
 			<view class="survey-view">
 				<view class="survey-top-view">
@@ -51,6 +51,12 @@
 				</view>
 			</view>
 		</view>
+		<MaskTip
+      :show="showMask"
+      imageName="mengceng5.png"
+      :imageStyle="imageStyle"
+      name="settlement_tip"
+    />
 	</view>
 </template>
 
@@ -58,9 +64,12 @@
 	let now = new Date(new Date().toLocaleDateString()).getTime();
 	import util from '@/utils/util.js'
 	import Statement from "@/components/mine/statement.vue"
+	import MaskTip from '@/components/mask-tip/index.vue'
+
 	export default {
 		components: {
-			Statement
+			Statement,
+			MaskTip
 		},
 		data() {
 			return {
@@ -74,6 +83,7 @@
 				loading: true,
 				statementList: [],
 				settledAmount: 0,
+				showMask: false,
 			}
 		},
 		computed: {
@@ -119,21 +129,25 @@
 					'color': '#2272FF',
 					'margin-bottom': '20rpx'
 				};
-			},
-			pages() {
-				return ['settlement','statement']
+			},
+			pages() {
+				return ['settlement','statement']
+			},
+			imageStyle() {
+      	return  'width:690rpx; margin-top:542rpx; margin-left:30rpx'
 			}
 		},
 		onLoad() {
 			getApp().trackPage('我的钱包页')
+			this.showMaskTip()
 		},
-		onShow() {
-			// 未登录，先跳转登录
-			if(!this.vuex_token) {
-				this.$u.route({url: 'pages/login/index'})
-			}
-			this.loadAssets()
-			this.loadStatement()
+		onShow() {
+			// 未登录，先跳转登录
+			if(!this.vuex_token) {
+				this.$u.route({url: 'pages/login/index'})
+			}
+			this.loadAssets()
+			this.loadStatement()
 		},
 		methods: {
 			qnFile(src) {
@@ -142,21 +156,21 @@
 			// 提现
 			handleClickWithdraw() {
 				this.$u.route({
-					url: 'pages/mine/wallet/withdraw'
+					url: 'pages/mine/wallet/withdraw'
 				})
 			},
 			handleClick(index) {
-				this.$u.route({
-					url: 'pages/mine/wallet/' + this.pages[index]
+				this.$u.route({
+					url: 'pages/mine/wallet/' + this.pages[index]
 				})
-			},
-			handleClickCell(orderId) {
-				this.$u.route({
+			},
+			handleClickCell(orderId) {
+				this.$u.route({
 					url: 'pages/order/detail?&type=other',
 					params: {
 						id: orderId
-					}
-				})
+					}
+				})
 			},
 			async loadAssets() {
 				let self = this
@@ -168,9 +182,9 @@
 			async loadStatement() {
 				let self = this
 				self.loading = true
-				let res = await self.$u.api.listStatement({
-					starDate: this.moment(new Date()).startOf('month').format('YYYY-MM-DD'),
-					endDate:this.moment(new Date()).endOf('month').format('YYYY-MM-DD')
+				let res = await self.$u.api.listStatement({
+					starDate: this.moment(new Date()).startOf('month').format('YYYY-MM-DD'),
+					endDate:this.moment(new Date()).endOf('month').format('YYYY-MM-DD')
 				})
 				self.loading = false
 				if(res && res.code == 200) {
@@ -183,28 +197,32 @@
 					}
 				}
 			},
+			// 显示提示蒙版
+			showMaskTip() {
+				this.showMask = true
+			},
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.wallet-view {
-		display: flex;
-		flex-direction: column;
+	.wallet-view {
+		display: flex;
+		flex-direction: column;
 		height: 100vh;
 		.wallet-content-view {
 			position: relative;
 			overflow: auto;
-			background-color: #F4F5F7;
-			.header-view {
-				position: absolute;
-				width: 100%;
-				padding-top: 10rpx;
-				padding-left: 14rpx;
-				.header-image {
+			background-color: #F4F5F7;
+			.header-view {
+				position: absolute;
+				width: 100%;
+				padding-top: 10rpx;
+				padding-left: 14rpx;
+				.header-image {
 					width: 730rpx;
-					height: 420rpx;
-				}
+					height: 420rpx;
+				}
 			}
 			
 
@@ -310,5 +328,5 @@
 				border-radius: 0 0 12rpx 12rpx;
 			}
 		}
-	}
-</style>
+	}
+</style>

src/store/index.js

@@ -12,7 +12,7 @@ try {
 }
 
 // 需要永久存储，且下次APP启动需要取出的，在state中的变量名
-let saveStateKeys = ['vuex_user', 'vuex_wx_uid', 'vuex_token', 'vuex_cache', 'uploadTask', 'uploadTotal', 'uploadSuccess', 'vuex_superuser'];
+let saveStateKeys = ['vuex_user', 'vuex_wx_uid', 'vuex_token', 'vuex_cache', 'uploadTask', 'uploadTotal', 'uploadSuccess', 'vuex_superuser', 'vuex_not_first'];
 
 // 保存变量到本地存储中
 const saveLifeData = function(key, value) {
@@ -50,6 +50,8 @@ const store = new Vuex.Store({
 		uploadTotal: lifeData.uploadTotal ? lifeData.uploadTotal : 0,
 		// 已上传数量
 		uploadSuccess: lifeData.uploadSuccess ? lifeData.uploadSuccess : 0,
+		// 初次登录
+		vuex_not_first: lifeData.vuex_not_first ? lifeData.vuex_not_first : {},
 	},
 	mutations: {
 		$uStore(state, payload) {