feat: popup data view style

components/ModelData/ModelData.vue

@@ -27,7 +27,7 @@
 				moveY: 0, //滑动的y轴距离
 				like_state: 0, //-1：左滑，0：没滑动，1：右滑
 				animationData: {},
-				index: 0,
+				index: -1,
 			}
 		},
 		props: {
@@ -57,7 +57,6 @@
 		computed: {
 			popupObject: {
 				get() {
-					this.index = this.currentIndex
 					return this.popupData[this.currentIndex]
 				},
 				set(val) {
@@ -73,11 +72,16 @@
 				}
 			}
 		},
+		
 		methods: {
 			close() {
+				this.index = -1
 				this.$emit('close')
 			},
 			seeImage(key) {
+				if(this.index === -1) {
+					this.index = this.currentIndex
+				}
 				var images = []
 				this.popupData.forEach(item => {
 					images.push(item[key])
@@ -86,8 +90,14 @@
 					current: this.index,
 					urls: images
 				})
+				// 图片查看弹窗会使页面close，所以需要把index置为-1
+				this.index = -1
 			},
 			touchStart(event) {
+				if(this.index === -1) {
+					this.index = this.currentIndex
+				}
+				
 				this.startX = event.touches[0].pageX;
 				this.startY = event.touches[0].pageY;
 			},
@@ -99,9 +109,9 @@
 				var state = 0; //-1：左滑，0：没滑动，1：右滑
 				// //左右方向滑动
 				if (Math.abs(moveX) > Math.abs(moveY)) {
-					if (moveX < -10) {
+					if (moveX < -40) {
 						state = 1;
-					} else if (moveX > 10) {
+					} else if (moveX > 40) {
 						state = -1;
 					}
 				}
@@ -110,17 +120,18 @@
 				this.moveY = moveY;
 			},
 			touchEnd(event) {
-				if (Math.abs(this.moveX) > 60 && this.like_state != -100) {
+				if (Math.abs(this.moveX) > 40 && this.like_state != -100) {
+					console.log("this index = " , this.index)
 					var state = this.like_state
 					this.like_state = -100 //设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动
 					//这里放需要进行的业务逻辑
 					if (state === 1 && this.index < this.popupData.length - 1) {
 						this.animation.translateX('-100%').step()
 							.opacity(0).step({
-								duration: 10
+								duration: 50
 							})
 							.translateX('100%').step({
-								duration: 10
+								duration: 50
 							})
 							.translateX(0).opacity(1).step()
 
@@ -130,14 +141,17 @@
 							this.animationData = {}
 						}, 250)
 						this.index += 1
+						// this.popupObject = this.popupData[this.index]
+						this.$set(this.popupObject, '', this.popupData[this.index])
+						console.log("end this index = " , this.index)
 					}
 					if (state === -1 && this.index > 0) {
 						this.animation.translateX('100%').step()
 							.opacity(0).step({
-								duration: 10
+								duration: 50
 							})
 							.translateX('-100%').step({
-								duration: 10
+								duration: 50
 							})
 							.translateX(0).opacity(1).step()
 
@@ -147,8 +161,11 @@
 							this.animationData = {}
 						}, 250)
 						this.index -= 1
-					}
+						// this.popupObject = this.popupData[this.index]
 						this.$set(this.popupObject, '', this.popupData[this.index])
+						console.log("end this index = " , this.index)
+					}
+					console.log("popupObject = ", this.popupObject)
 				}
 			}
 		}

components/NormalTabs/NormalTabs.vue

 <template>
 	<view class="normal-tabs">
-    <u-tabs
-      v-if="elementInfo.option.tabs.type === 'radio'"
-      :list="elementData.dataList.series"
-      :is-scroll="false"
-      :current="currentTabs"
-      :active-color="elementInfo.option.tabs.activeColor"
-      :inactive-color="elementInfo.option.tabs.color"
-      :bg-color="elementInfo.option.tabs.backgroundColor"
-      @change="handleTabsChange"
-    ></u-tabs>
+		<u-tabs v-if="elementInfo.option.tabs.type === 'radio'" :list="elementData.dataList.series" :is-scroll="false"
+			:current="currentTabs" :active-color="elementInfo.option.tabs.activeColor"
+			:inactive-color="elementInfo.option.tabs.color" :bg-color="elementInfo.option.tabs.backgroundColor"
+			@change="handleTabsChange"></u-tabs>
 		<template v-if="elementInfo.option.tabs.type === 'select'">
 			<view class="input-group">
-        <u-input
-          v-model="tabsValue"
-          type="select"
-          border="true"
-          :placeholder="elementInfo.option.tabs.placeholder"
-          @click="show = true"
-        />
-        <u-icon
-          class="close-icon"
-          v-if="tabsValue && elementInfo.option.tabs.allowClear"
-          name="close-circle"
-          @click.prevent.stop="handleClearValue"
-        ></u-icon>
+				<u-input v-model="selectValue" type="select" border="true"
+					:placeholder="elementInfo.option.tabs.placeholder" @click="show = true" />
+				<u-icon class="close-icon" v-if="tabsValue && elementInfo.option.tabs.allowClear" name="close-circle"
+					@click.prevent.stop="handleClearValue"></u-icon>
 			</view>
 
-      <u-select
-        v-model="show"
-        :default-value="defaultValue"
-        :list="elementData.dataList.series"
-        :safe-area-inset-bottom="true"
-        label-name="name"
-        @confirm="handleSelectChange"
-      ></u-select>
+			<u-select v-model="show" :default-value="defaultValue" :list="elementData.dataList.series"
+				:safe-area-inset-bottom="true" label-name="name" :z-index="zIndex" @confirm="handleSelectChange">
+			</u-select>
 		</template>
 
-    <swiper
-      v-if="elementInfo.option.tabs.type === 'group'"
-      class="tab-swiper"
-      :indicator-dots="tabsGroup.length > 1"
-      :style="[tabsStyle]"
-      :indicator-color="'#ccc'"
-      :indicator-active-color="elementInfo.option.tabs.backgroundColor"
-    >
-      <swiper-item
-        class="tab-group"
-        v-for="(item, index) in tabsGroup"
-        :key="index"
-      >
-        <view
-          class="tab-item"
-          :class="[tabsValue == tab.value ? 'active' : '']"
-          v-for="tab in item"
-          :key="tab.value"
-          @click="handleChangeTabValue(tab.value)"
-        >
+		<swiper v-if="elementInfo.option.tabs.type === 'group'" class="tab-swiper"
+			:indicator-dots="tabsGroup.length > 1" :style="[tabsStyle]" :indicator-color="'#ccc'"
+			:indicator-active-color="elementInfo.option.tabs.backgroundColor">
+			<swiper-item class="tab-group" v-for="(item, index) in tabsGroup" :key="index">
+				<view class="tab-item" :class="[tabsValue == tab.value ? 'active' : '']" v-for="tab in item"
+					:key="tab.value" @click="handleChangeTabValue(tab.value)">
 					{{ tab.name }}
 				</view>
 			</swiper-item>
@@ -65,8 +31,8 @@
 </template>
 
 <script>
-import echartElementData from '@/mixins/echartElementData.js'
-export default {
+	import echartElementData from '@/mixins/echartElementData.js'
+	export default {
 		name: 'NormalTabs',
 		mixins: [echartElementData],
 		data() {
@@ -74,6 +40,8 @@ export default {
 				currentTabs: 0,
 				show: false,
 				tabsValue: '',
+				selectValue: '',
+				zIndex: 0,
 				defaultValue: [0]
 			}
 		},
@@ -87,7 +55,10 @@ export default {
 		},
 		computed: {
 			tabsGroup() {
-      const { type, count } = this.elementInfo.option.tabs
+				const {
+					type,
+					count
+				} = this.elementInfo.option.tabs
 				if (type === 'group') {
 					return this.$u.common.chunk(
 						this.elementData.dataList.series,
@@ -123,6 +94,15 @@ export default {
 		methods: {
 			initChart() {
 				this.tabsValue = this.elementInfo.option.tabs.defaultValue
+				if (this.elementInfo.option.tabs.type === 'select') {
+					for (var i = 0; i < this.elementData.dataList.series.length; i++) {
+						const item = this.elementData.dataList.series[i]
+						if (item.value === this.tabsValue || item.value === parseInt(this.tabsValue)) {
+							this.selectValue = item.name
+							this.zIndex = i
+						}
+					}
+				}
 			},
 			setTabsValue(index = 0) {
 				this.currentTabs = index
@@ -134,6 +114,8 @@ export default {
 				this.tabsValueChange()
 			},
 			handleSelectChange(e) {
+				console.log(e)
+				this.selectValue = e[0].label
 				this.tabsValue = e[0].value
 				this.defaultValue[0] = [
 					this.elementData.dataList.series.findIndex(
@@ -155,7 +137,11 @@ export default {
 			 * 改变选项卡的值
 			 */
 			tabsValueChange() {
-      const { index, paramName, data } = this.elementInfo.child
+				const {
+					index,
+					paramName,
+					data
+				} = this.elementInfo.child
 				if (this.elementInfo.child.type === 'param') {
 					uni.$emit('handleLinkParams', {
 						index,
@@ -169,8 +155,21 @@ export default {
 						if (element.name == this.tabsValue) showData.push(element.comp)
 						if (element.name != this.tabsValue) hideData.push(element.comp)
 					})
-        uni.$emit('handleLinkComp', { showData, hideData })
+					uni.$emit('handleLinkComp', {
+						showData,
+						hideData
+					})
 				}
+			},
+			getSelectLabel(value) {
+				var label = value
+				this.elementData.dataList.series.forEach(item => {
+					if (item.value === value) {
+						console.log(item)
+						label = item.name
+					}
+				})
+				return label
 			}
 		},
 		watch: {
@@ -181,17 +180,18 @@ export default {
 				immediate: true
 			}
 		}
-}
+	}
 </script>
 
 <style scoped lang="scss">
-.tab-group {
+	.tab-group {
 		display: flex !important;
 		align-items: flex-start;
 		flex-wrap: wrap;
 		width: 100%;
-}
-.tab-item {
+	}
+
+	.tab-item {
 		width: var(--width);
 		margin: 1%;
 		font-size: var(--font-size);
@@ -205,20 +205,23 @@ export default {
 		white-space: nowrap;
 		text-align: center;
 		cursor: pointer;
+
 		&.active {
 			color: var(--active-color);
 			background: var(--background-color);
 			border-color: var(--background-color);
 		}
-}
-.input-group {
+	}
+
+	.input-group {
 		position: relative;
-}
-.close-icon {
+	}
+
+	.close-icon {
 		position: absolute;
 		right: 5px;
 		top: 50%;
 		transform: translateY(-50%);
 		z-index: 2;
-}
+	}
 </style>