Skip to content

E
ec-report-refactor
Commit 41aa6707 authored by leon's avatar leon
Browse files
Options

feat: popup data view style

parent 02580396
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 244 deletions
components/HorizontalBar/HorizontalBar.vue
View file @ 41aa6707
...@@ -99,7 +99,7 @@ export default { ...@@ -99,7 +99,7 @@ export default {
eventName = 'indexShowBar' eventName = 'indexShowBar'
} else { } else {
eventName = 'detailShowBar' eventName = 'detailShowBar'
} }
uni.$emit(eventName, { uni.$emit(eventName, {
page: curRoute, page: curRoute,
popupShow: true, popupShow: true,
......
components/ModelData/ModelData.vue
View file @ 41aa6707
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
moveY: 0, //滑动的y轴距离 moveY: 0, //滑动的y轴距离
like_state: 0, //-1：左滑，0：没滑动，1：右滑 like_state: 0, //-1：左滑，0：没滑动，1：右滑
animationData: {}, animationData: {},
index: 0, index: -1,
} }
}, },
props: { props: {
...@@ -53,11 +53,10 @@ ...@@ -53,11 +53,10 @@
timingFunction: 'ease', timingFunction: 'ease',
duration: 120 duration: 120
}) })
}, },
computed: { computed: {
popupObject: { popupObject: {
get() { get() {
this.index = this.currentIndex
return this.popupData[this.currentIndex] return this.popupData[this.currentIndex]
}, },
set(val) { set(val) {
...@@ -72,22 +71,33 @@ ...@@ -72,22 +71,33 @@
return val return val
} }
} }
}, },
methods: { methods: {
close() { close() {
this.index = -1
this.$emit('close') this.$emit('close')
}, },
seeImage(key) { seeImage(key) {
if(this.index === -1) {
this.index = this.currentIndex
}
var images = [] var images = []
this.popupData.forEach(item => { this.popupData.forEach(item => {
images.push(item[key]) images.push(item[key])
}) })
uni.previewImage({ uni.previewImage({
current: this.index, current: this.index,
urls: images urls: images
}) })
// 图片查看弹窗会使页面close，所以需要把index置为-1
this.index = -1
}, },
touchStart(event) { touchStart(event) {
if(this.index === -1) {
this.index = this.currentIndex
}
this.startX = event.touches[0].pageX; this.startX = event.touches[0].pageX;
this.startY = event.touches[0].pageY; this.startY = event.touches[0].pageY;
}, },
...@@ -99,9 +109,9 @@ ...@@ -99,9 +109,9 @@
var state = 0; //-1：左滑，0：没滑动，1：右滑 var state = 0; //-1：左滑，0：没滑动，1：右滑
// //左右方向滑动 // //左右方向滑动
if (Math.abs(moveX) > Math.abs(moveY)) { if (Math.abs(moveX) > Math.abs(moveY)) {
if (moveX < -10) { if (moveX < -40) {
state = 1; state = 1;
} else if (moveX > 10) { } else if (moveX > 40) {
state = -1; state = -1;
} }
} }
...@@ -110,17 +120,18 @@ ...@@ -110,17 +120,18 @@
this.moveY = moveY; this.moveY = moveY;
}, },
touchEnd(event) { 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 var state = this.like_state
this.like_state = -100 //设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动 this.like_state = -100 //设置这个数是为了避免滑动之后点击不走touchMove而产生的不正常滑动
//这里放需要进行的业务逻辑 //这里放需要进行的业务逻辑
if (state === 1 && this.index < this.popupData.length - 1) { if (state === 1 && this.index < this.popupData.length - 1) {
this.animation.translateX('-100%').step() this.animation.translateX('-100%').step()
.opacity(0).step({ .opacity(0).step({
duration: 10 duration: 50
}) })
.translateX('100%').step({ .translateX('100%').step({
duration: 10 duration: 50
}) })
.translateX(0).opacity(1).step() .translateX(0).opacity(1).step()
...@@ -129,15 +140,18 @@ ...@@ -129,15 +140,18 @@
setTimeout(() => { setTimeout(() => {
this.animationData = {} this.animationData = {}
}, 250) }, 250)
this.index += 1 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) { if (state === -1 && this.index > 0) {
this.animation.translateX('100%').step() this.animation.translateX('100%').step()
.opacity(0).step({ .opacity(0).step({
duration: 10 duration: 50
}) })
.translateX('-100%').step({ .translateX('-100%').step({
duration: 10 duration: 50
}) })
.translateX(0).opacity(1).step() .translateX(0).opacity(1).step()
...@@ -147,8 +161,11 @@ ...@@ -147,8 +161,11 @@
this.animationData = {} this.animationData = {}
}, 250) }, 250)
this.index -= 1 this.index -= 1
} // this.popupObject = this.popupData[this.index]
this.$set(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
View file @ 41aa6707
<template> <template>
<view class="normal-tabs"> <view class="normal-tabs">
<u-tabs <u-tabs v-if="elementInfo.option.tabs.type === 'radio'" :list="elementData.dataList.series" :is-scroll="false"
v-if="elementInfo.option.tabs.type === 'radio'" :current="currentTabs" :active-color="elementInfo.option.tabs.activeColor"
:list="elementData.dataList.series" :inactive-color="elementInfo.option.tabs.color" :bg-color="elementInfo.option.tabs.backgroundColor"
:is-scroll="false" @change="handleTabsChange"></u-tabs>
:current="currentTabs" <template v-if="elementInfo.option.tabs.type === 'select'">
:active-color="elementInfo.option.tabs.activeColor" <view class="input-group">
:inactive-color="elementInfo.option.tabs.color" <u-input v-model="selectValue" type="select" border="true"
:bg-color="elementInfo.option.tabs.backgroundColor" :placeholder="elementInfo.option.tabs.placeholder" @click="show = true" />
@change="handleTabsChange" <u-icon class="close-icon" v-if="tabsValue && elementInfo.option.tabs.allowClear" name="close-circle"
></u-tabs> @click.prevent.stop="handleClearValue"></u-icon>
<template v-if="elementInfo.option.tabs.type === 'select'"> </view>
<view class="input-group">
<u-input <u-select v-model="show" :default-value="defaultValue" :list="elementData.dataList.series"
v-model="tabsValue" :safe-area-inset-bottom="true" label-name="name" :z-index="zIndex" @confirm="handleSelectChange">
type="select" </u-select>
border="true" </template>
:placeholder="elementInfo.option.tabs.placeholder"
@click="show = true" <swiper v-if="elementInfo.option.tabs.type === 'group'" class="tab-swiper"
/> :indicator-dots="tabsGroup.length > 1" :style="[tabsStyle]" :indicator-color="'#ccc'"
<u-icon :indicator-active-color="elementInfo.option.tabs.backgroundColor">
class="close-icon" <swiper-item class="tab-group" v-for="(item, index) in tabsGroup" :key="index">
v-if="tabsValue && elementInfo.option.tabs.allowClear" <view class="tab-item" :class="[tabsValue == tab.value ? 'active' : '']" v-for="tab in item"
name="close-circle" :key="tab.value" @click="handleChangeTabValue(tab.value)">
@click.prevent.stop="handleClearValue" {{ tab.name }}
></u-icon> </view>
</view> </swiper-item>
</swiper>
<u-select </view>
v-model="show" </template>
:default-value="defaultValue"
:list="elementData.dataList.series" <script>
:safe-area-inset-bottom="true" import echartElementData from '@/mixins/echartElementData.js'
label-name="name" export default {
@confirm="handleSelectChange" name: 'NormalTabs',
></u-select> mixins: [echartElementData],
</template> data() {
return {
<swiper currentTabs: 0,
v-if="elementInfo.option.tabs.type === 'group'" show: false,
class="tab-swiper" tabsValue: '',
:indicator-dots="tabsGroup.length > 1" selectValue: '',
:style="[tabsStyle]" zIndex: 0,
:indicator-color="'#ccc'" defaultValue: [0]
:indicator-active-color="elementInfo.option.tabs.backgroundColor" }
> },
<swiper-item mounted() {
class="tab-group" uni.$on('handlePullDownRefresh', () => {
v-for="(item, index) in tabsGroup" this.initChart()
:key="index" })
> },
<view destroy() {
class="tab-item" uni.$off('handlePullDownRefresh')
:class="[tabsValue == tab.value ? 'active' : '']" },
v-for="tab in item" computed: {
:key="tab.value" tabsGroup() {
@click="handleChangeTabValue(tab.value)" const {
> type,
{{ tab.name }} count
</view> } = this.elementInfo.option.tabs
</swiper-item> if (type === 'group') {
</swiper> return this.$u.common.chunk(
</view> this.elementData.dataList.series,
</template> Number(count) * 2
)
<script> }
import echartElementData from '@/mixins/echartElementData.js' return []
export default { },
name: 'NormalTabs', tabsStyle() {
mixins: [echartElementData], const {
data() { fontSize,
return { color,
currentTabs: 0, activeColor,
show: false, backgroundColor,
tabsValue: '', count,
defaultValue: [0] frameWidth,
} frameColor,
}, frameStyle,
mounted() { itemBackgroundColor
uni.$on('handlePullDownRefresh', () => { } = this.elementInfo.option.tabs
this.initChart() return {
}) height: `${this.elementInfo.height}px`,
}, '--width': `${100 / Number(count) - 2}%`,
destroy() { '--font-size': `${fontSize}px`,
uni.$off('handlePullDownRefresh') '--color': color,
}, '--active-color': activeColor,
computed: { '--background-color': backgroundColor,
tabsGroup() { '--border-style': `${frameWidth}px ${frameStyle} ${frameColor}`,
const { type, count } = this.elementInfo.option.tabs '--item-background-color': itemBackgroundColor
if (type === 'group') { }
return this.$u.common.chunk( }
this.elementData.dataList.series, },
Number(count) * 2 methods: {
) initChart() {
} this.tabsValue = this.elementInfo.option.tabs.defaultValue
return [] if (this.elementInfo.option.tabs.type === 'select') {
}, for (var i = 0; i < this.elementData.dataList.series.length; i++) {
tabsStyle() { const item = this.elementData.dataList.series[i]
const { if (item.value === this.tabsValue || item.value === parseInt(this.tabsValue)) {
fontSize, this.selectValue = item.name
color, this.zIndex = i
activeColor, }
backgroundColor, }
count, }
frameWidth, },
frameColor, setTabsValue(index = 0) {
frameStyle, this.currentTabs = index
itemBackgroundColor this.defaultValue = [0]
} = this.elementInfo.option.tabs this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
return { },
height: `${this.elementInfo.height}px`, handleTabsChange(index) {
'--width': `${100 / Number(count) - 2}%`, this.setTabsValue(index)
'--font-size': `${fontSize}px`, this.tabsValueChange()
'--color': color, },
'--active-color': activeColor, handleSelectChange(e) {
'--background-color': backgroundColor, console.log(e)
'--border-style': `${frameWidth}px ${frameStyle} ${frameColor}`, this.selectValue = e[0].label
'--item-background-color': itemBackgroundColor this.tabsValue = e[0].value
} this.defaultValue[0] = [
} this.elementData.dataList.series.findIndex(
}, item => item.value === e[0].value
methods: { )
initChart() { ]
this.tabsValue = this.elementInfo.option.tabs.defaultValue this.tabsValueChange()
}, },
setTabsValue(index = 0) { handleChangeTabValue(value) {
this.currentTabs = index this.tabsValue = value
this.defaultValue = [0] this.tabsValueChange()
this.tabsValue = this.elementData.dataList.series[this.currentTabs].value },
}, /** 清除值 */
handleTabsChange(index) { handleClearValue() {
this.setTabsValue(index) this.tabsValue = ''
this.tabsValueChange() this.tabsValueChange()
}, },
handleSelectChange(e) { /**
this.tabsValue = e[0].value * 改变选项卡的值
this.defaultValue[0] = [ */
this.elementData.dataList.series.findIndex( tabsValueChange() {
item => item.value === e[0].value const {
) index,
] paramName,
this.tabsValueChange() data
}, } = this.elementInfo.child
handleChangeTabValue(value) { if (this.elementInfo.child.type === 'param') {
this.tabsValue = value uni.$emit('handleLinkParams', {
this.tabsValueChange() index,
}, paramName,
/** 清除值 */ value: this.tabsValue
handleClearValue() { })
this.tabsValue = '' } else if (this.elementInfo.child.type === 'comp') {
this.tabsValueChange() const showData = [],
}, hideData = []
/** data.forEach(element => {
* 改变选项卡的值 if (element.name == this.tabsValue) showData.push(element.comp)
*/ if (element.name != this.tabsValue) hideData.push(element.comp)
tabsValueChange() { })
const { index, paramName, data } = this.elementInfo.child uni.$emit('handleLinkComp', {
if (this.elementInfo.child.type === 'param') { showData,
uni.$emit('handleLinkParams', { hideData
index, })
paramName, }
value: this.tabsValue },
}) getSelectLabel(value) {
} else if (this.elementInfo.child.type === 'comp') { var label = value
const showData = [], this.elementData.dataList.series.forEach(item => {
hideData = [] if (item.value === value) {
data.forEach(element => { console.log(item)
if (element.name == this.tabsValue) showData.push(element.comp) label = item.name
if (element.name != this.tabsValue) hideData.push(element.comp) }
}) })
uni.$emit('handleLinkComp', { showData, hideData }) return label
} }
} },
}, watch: {
watch: { 'elementInfo.child.index': {
'elementInfo.child.index': { handler(newVal) {
handler(newVal) { if (newVal.length) this.tabsValueChange()
if (newVal.length) this.tabsValueChange() },
}, immediate: true
immediate: true }
} }
} }
} </script>
</script>
<style scoped lang="scss">
<style scoped lang="scss"> .tab-group {
.tab-group { display: flex !important;
display: flex !important; align-items: flex-start;
align-items: flex-start; flex-wrap: wrap;
flex-wrap: wrap; width: 100%;
width: 100%; }
}
.tab-item { .tab-item {
width: var(--width); width: var(--width);
margin: 1%; margin: 1%;
font-size: var(--font-size); font-size: var(--font-size);
color: var(--color); color: var(--color);
border: var(--border-style); border: var(--border-style);
background: var(--item-background-color); background: var(--item-background-color);
border-radius: 5px; border-radius: 5px;
padding: 5px 8px; padding: 5px 8px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
&.active {
color: var(--active-color); &.active {
background: var(--background-color); color: var(--active-color);
border-color: var(--background-color); background: var(--background-color);
} border-color: var(--background-color);
} }
.input-group { }
position: relative;
} .input-group {
.close-icon { position: relative;
position: absolute; }
right: 5px;
top: 50%; .close-icon {
transform: translateY(-50%); position: absolute;
z-index: 2; right: 5px;
} top: 50%;
transform: translateY(-50%);
z-index: 2;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment