feat: 柱状图弹窗修改

components/HorizontalBar/HorizontalBar.vue

@@ -91,11 +91,20 @@ export default {
             current: event.dataIndex,
             urls: urls
           })
-        } else if (popup) {
-          uni.$emit('showBarDetail', {
+        } else if (popup) {
+          let routes = getCurrentPages()
+          let curRoute = routes[routes.length - 1].route
+          let eventName = ''
+          if (curRoute === 'pages/index/index') {
+            eventName = 'indexShowBar'
+          } else {
+            eventName = 'detailShowBar'
+          }
+          uni.$emit(eventName, {
+            page: curRoute,
             popupShow: true,
-            popupData: data,
-			currentIndex: event.dataIndex,
+            popupData: data,
+            currentIndex: event.dataIndex,
             customRender
           })
         } else {

components/ModelData/ModelData.vue

 <template>
-	<u-modal class="model-data" v-model="popupShow" :closeOnClickOverlay="true" title="明细" @close="close"
+	<u-modal class="model-data" v-model="show" title="明细" @close="close"
 		@confirm="close">
 		<view class="slot-content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"
 			:animation="animationData">
-			<view v-for="(val, key) in popupObject" class="data-view">
+			<view v-for="(val, key) in popupObject" :key="key" class="data-view">
 				<view class="data-key ellipsis">{{ key }}</view>
 				<template v-if="customRender[key] === 'picture'">
 					<u-image :height="100" mode="aspectFit" :src="val" crossOrigin="anonymous" style="width: 100%"
@@ -19,7 +19,7 @@
 	export default {
 		name: 'ModelData',
 		data() {
-			return {
+			return {
 				// popupObject: {},
 				startX: 0, //滑动开始x轴位置
 				startY: 0, //滑动开始y轴位置
@@ -27,7 +27,7 @@
 				moveY: 0, //滑动的y轴距离
 				like_state: 0, //-1：左滑，0：没滑动，1：右滑
 				animationData: {},
-				index: 0,
+				index: 0,
 			}
 		},
 		props: {
@@ -47,30 +47,35 @@
 				type: Object,
 				default: () => {}
 			}
-		},
-		created() {
+		},
+		created() {
 			this.animation = uni.createAnimation({
 				timingFunction: 'ease',
 				duration: 120
-			})
-		},
-		computed: {
-			popupObject: {
-				get() {
-					this.index = this.currentIndex
-					return this.popupData[this.currentIndex]
-				},
-				set(val) {
-					return val
-				}
-			}
+			})
+		},
+		computed: {
+			popupObject: {
+				get() {
+					this.index = this.currentIndex
+					return this.popupData[this.currentIndex]
+				},
+				set(val) {
+					return val
+				}
+			},
+			show: {
+				get() {
+					return this.popupShow
+				},
+				set(val) {
+					return val
+				}
+			}
 		},
 		methods: {
 			close() {
-				uni.$emit('showBarDetail', {
-					popupShow: false,
-					popupData: []
-				})
+				this.$emit('close')
 			},
 			seeImage(key) {
 				var images = []
@@ -124,7 +129,7 @@
 						setTimeout(() => {
 							this.animationData = {}
 						}, 250)
-						this.index += 1
+						this.index += 1
 					}
 					if (state === -1 && this.index > 0) {
 						this.animation.translateX('100%').step()
@@ -142,8 +147,8 @@
 							this.animationData = {}
 						}, 250)
 						this.index -= 1
-					}
-					this.$set(this.popupObject, '', this.popupData[this.index])
+					}
+					this.$set(this.popupObject, '', this.popupData[this.index])
 				}
 			}
 		}
@@ -175,4 +180,4 @@
 		margin-right: 10px;
 		border-right: 1px solid #eee;
 	}
-</style>
+</style>

pages/details/details.vue

@@ -63,6 +63,7 @@
 			:popupData="popupData"
 			:currentIndex="currentIndex"
 			:customRender="customRender"
+			@close="popupShow=false"
 		></ModelData>
 	</view>
 </template>
@@ -161,7 +162,7 @@
 			uni.$on('handleUpdateHeight', (height) => {
 				that.horizontalBarHeight = height
 			}),
-			uni.$on('showBarDetail', data => {
+			uni.$on('detailShowBar', data => {
 				const { popupShow, popupData, customRender, currentIndex } = data
 				that.popupShow = popupShow
 				that.popupData = popupData
@@ -171,15 +172,13 @@
 		},
 		onUnload() {
 			// 如何监听页面卸载时候隐藏弹窗
-			uni.$on('showBarDetail', data => {
-				that.popupShow = false
-			})
+			this.popupShow = false
 			// 移除监听事件
 			uni.$off('handleLinkParams')
 			uni.$off('handleLinkComp')
 			uni.$off('handleDataZoomParams')
 			uni.$off('handleUpdateHeight')
-			uni.$off('showBarDetail')
+			uni.$off('detailShowBar')
 			clearInterval(this.timename)
 		},
 		methods: {

pages/index/index.vue

@@ -66,6 +66,7 @@
 			:popupData="popupData"
 			:currentIndex="currentIndex"
 			:customRender="customRender"
+			@close="popupShow=false"
 		></ModelData>
 	</view>
 </template>
@@ -157,7 +158,7 @@
 			uni.$on('handleUpdateHeight', (height) => {
 				that.horizontalBarHeight = height
 			})
-			uni.$on('showBarDetail', data => {
+			uni.$on('indexShowBar', data => {
 				const { popupShow, popupData, customRender, currentIndex } = data
 				that.popupShow = popupShow
 				that.popupData = popupData
@@ -166,11 +167,13 @@
 			})
 		},
 		onHide() {
+			this.popupShow = false
 			// 移除监听事件
 			uni.$off('handleLinkParams')
 			uni.$off('handleLinkComp')
 			uni.$off('handleDataZoomParams')
 			uni.$off('handleUpdateHeight')
+			uni.$off('indexShowBar')
 			clearInterval(this.timename)
 		},
 		methods: {