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 {
eventName = 'indexShowBar'
} else {
eventName = 'detailShowBar'
}
}
uni.$emit(eventName, {
page: curRoute,
popupShow: true,
......
components/ModelData/ModelData.vue
View file @ 41aa6707
......@@ -27,7 +27,7 @@
moveY: 0, //滑动的y轴距离
like_state: 0, //-1：左滑，0：没滑动，1：右滑
animationData: {},
index: 0,
index: -1,
}
},
props: {
......@@ -53,11 +53,10 @@
timingFunction: 'ease',
duration: 120
})
},
},
computed: {
popupObject: {
get() {
this.index = this.currentIndex
get() {
return this.popupData[this.currentIndex]
},
set(val) {
......@@ -72,22 +71,33 @@
return val
}
}
},
},
methods: {
close() {
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])
})
})
uni.previewImage({
current: this.index,
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.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) {
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()
......@@ -129,15 +140,18 @@
setTimeout(() => {
this.animationData = {}
}, 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) {
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.$set(this.popupObject, '', this.popupData[this.index])
// 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>
<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>
<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>
</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>
</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)"
>
{{ tab.name }}
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import echartElementData from '@/mixins/echartElementData.js'
export default {
name: 'NormalTabs',
mixins: [echartElementData],
data() {
return {
currentTabs: 0,
show: false,
tabsValue: '',
defaultValue: [0]
}
},
mounted() {
uni.$on('handlePullDownRefresh', () => {
this.initChart()
})
},
destroy() {
uni.$off('handlePullDownRefresh')
},
computed: {
tabsGroup() {
const { type, count } = this.elementInfo.option.tabs
if (type === 'group') {
return this.$u.common.chunk(
this.elementData.dataList.series,
Number(count) * 2
)
}
return []
},
tabsStyle() {
const {
fontSize,
color,
activeColor,
backgroundColor,
count,
frameWidth,
frameColor,
frameStyle,
itemBackgroundColor
} = this.elementInfo.option.tabs
return {
height: `${this.elementInfo.height}px`,
'--width': `${100 / Number(count) - 2}%`,
'--font-size': `${fontSize}px`,
'--color': color,
'--active-color': activeColor,
'--background-color': backgroundColor,
'--border-style': `${frameWidth}px ${frameStyle} ${frameColor}`,
'--item-background-color': itemBackgroundColor
}
}
},
methods: {
initChart() {
this.tabsValue = this.elementInfo.option.tabs.defaultValue
},
setTabsValue(index = 0) {
this.currentTabs = index
this.defaultValue = [0]
this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
},
handleTabsChange(index) {
this.setTabsValue(index)
this.tabsValueChange()
},
handleSelectChange(e) {
this.tabsValue = e[0].value
this.defaultValue[0] = [
this.elementData.dataList.series.findIndex(
item => item.value === e[0].value
)
]
this.tabsValueChange()
},
handleChangeTabValue(value) {
this.tabsValue = value
this.tabsValueChange()
},
/** 清除值 */
handleClearValue() {
this.tabsValue = ''
this.tabsValueChange()
},
/**
* 改变选项卡的值
*/
tabsValueChange() {
const { index, paramName, data } = this.elementInfo.child
if (this.elementInfo.child.type === 'param') {
uni.$emit('handleLinkParams', {
index,
paramName,
value: this.tabsValue
})
} else if (this.elementInfo.child.type === 'comp') {
const showData = [],
hideData = []
data.forEach(element => {
if (element.name == this.tabsValue) showData.push(element.comp)
if (element.name != this.tabsValue) hideData.push(element.comp)
})
uni.$emit('handleLinkComp', { showData, hideData })
}
}
},
watch: {
'elementInfo.child.index': {
handler(newVal) {
if (newVal.length) this.tabsValueChange()
},
immediate: true
}
}
}
</script>
<style scoped lang="scss">
.tab-group {
display: flex !important;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
}
.tab-item {
width: var(--width);
margin: 1%;
font-size: var(--font-size);
color: var(--color);
border: var(--border-style);
background: var(--item-background-color);
border-radius: 5px;
padding: 5px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
cursor: pointer;
&.active {
color: var(--active-color);
background: var(--background-color);
border-color: var(--background-color);
}
}
.input-group {
position: relative;
}
.close-icon {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
<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>
<template v-if="elementInfo.option.tabs.type === 'select'">
<view class="input-group">
<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" :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)">
{{ tab.name }}
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import echartElementData from '@/mixins/echartElementData.js'
export default {
name: 'NormalTabs',
mixins: [echartElementData],
data() {
return {
currentTabs: 0,
show: false,
tabsValue: '',
selectValue: '',
zIndex: 0,
defaultValue: [0]
}
},
mounted() {
uni.$on('handlePullDownRefresh', () => {
this.initChart()
})
},
destroy() {
uni.$off('handlePullDownRefresh')
},
computed: {
tabsGroup() {
const {
type,
count
} = this.elementInfo.option.tabs
if (type === 'group') {
return this.$u.common.chunk(
this.elementData.dataList.series,
Number(count) * 2
)
}
return []
},
tabsStyle() {
const {
fontSize,
color,
activeColor,
backgroundColor,
count,
frameWidth,
frameColor,
frameStyle,
itemBackgroundColor
} = this.elementInfo.option.tabs
return {
height: `${this.elementInfo.height}px`,
'--width': `${100 / Number(count) - 2}%`,
'--font-size': `${fontSize}px`,
'--color': color,
'--active-color': activeColor,
'--background-color': backgroundColor,
'--border-style': `${frameWidth}px ${frameStyle} ${frameColor}`,
'--item-background-color': itemBackgroundColor
}
}
},
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
this.defaultValue = [0]
this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
},
handleTabsChange(index) {
this.setTabsValue(index)
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(
item => item.value === e[0].value
)
]
this.tabsValueChange()
},
handleChangeTabValue(value) {
this.tabsValue = value
this.tabsValueChange()
},
/** 清除值 */
handleClearValue() {
this.tabsValue = ''
this.tabsValueChange()
},
/**
* 改变选项卡的值
*/
tabsValueChange() {
const {
index,
paramName,
data
} = this.elementInfo.child
if (this.elementInfo.child.type === 'param') {
uni.$emit('handleLinkParams', {
index,
paramName,
value: this.tabsValue
})
} else if (this.elementInfo.child.type === 'comp') {
const showData = [],
hideData = []
data.forEach(element => {
if (element.name == this.tabsValue) showData.push(element.comp)
if (element.name != this.tabsValue) hideData.push(element.comp)
})
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: {
'elementInfo.child.index': {
handler(newVal) {
if (newVal.length) this.tabsValueChange()
},
immediate: true
}
}
}
</script>
<style scoped lang="scss">
.tab-group {
display: flex !important;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
}
.tab-item {
width: var(--width);
margin: 1%;
font-size: var(--font-size);
color: var(--color);
border: var(--border-style);
background: var(--item-background-color);
border-radius: 5px;
padding: 5px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
cursor: pointer;
&.active {
color: var(--active-color);
background: var(--background-color);
border-color: var(--background-color);
}
}
.input-group {
position: relative;
}
.close-icon {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
</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