Compare commits
15 Commits
| Author | SHA1 | Date |
|---|---|---|
 ihzero
|
03082a9cdb | |
|
ihzero
|
6497852f80 | |
|
ihzero
|
fcc4e21c36 | |
|
unknown
|
b55bb1e863 | |
|
unknown
|
831808415d | |
|
unknown
|
e5fea5c439 | |
|
unknown
|
614c9fbb6a | |
|
unknown
|
72ac138a46 | |
|
unknown
|
34e4f61485 | |
|
ihzero
|
52a1dbdc83 | |
|
ihzero
|
06d9d03dea | |
|
ihzero
|
c88411f9c2 | |
|
ihzero
|
abdb92ee74 | |
|
ihzero
|
156643ea77 | |
|
ihzero
|
176abb9c7d |
|
|
@ -1,3 +1,3 @@
|
||||||
ENV = 'development'
|
ENV = 'development'
|
||||||
|
|
||||||
VUE_APP_BASE_API = 'https://lcny.sk797.cn'
|
VUE_APP_BASE_API = 'https://lcny-api.peidikeji.cn'
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
|
||||||
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel="stylesheet" href="/static/index.97465e7b.css"></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.959091ef.js"></script><script src="/static/js/index.d07e9c1f.js"></script></body></html>
|
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel="stylesheet" href="/static/index.97465e7b.css"></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><script src="/static/js/chunk-vendors.959091ef.js"></script><script src="/static/js/index.10961fd4.js"></script></body></html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 873 B |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 992 B |
Binary file not shown.
|
After Width: | Height: | Size: 919 B |
Binary file not shown.
|
After Width: | Height: | Size: 1005 B |
Binary file not shown.
|
After Width: | Height: | Size: 283 B |
Binary file not shown.
|
After Width: | Height: | Size: 699 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 408 B |
Binary file not shown.
|
After Width: | Height: | Size: 683 B |
Binary file not shown.
|
After Width: | Height: | Size: 675 B |
Binary file not shown.
|
After Width: | Height: | Size: 661 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 754 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 953 B |
Binary file not shown.
|
After Width: | Height: | Size: 607 B |
Binary file not shown.
|
After Width: | Height: | Size: 820 B |
Binary file not shown.
|
After Width: | Height: | Size: 647 B |
Binary file not shown.
|
After Width: | Height: | Size: 833 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
|
|
@ -66,10 +66,10 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
isEdit() {
|
isEdit() {
|
||||||
return !!this.$listeners.onEdit && checkPermission(this.editAuth)
|
return (!!this.$listeners.onEdit && checkPermission(this.editAuth)) || (!!this.$listeners.onEdit && this.editAuth.length==0)
|
||||||
},
|
},
|
||||||
isDel() {
|
isDel() {
|
||||||
return !!this.$listeners.onDel && checkPermission(this.delAuth)
|
return (!!this.$listeners.onDel && checkPermission(this.delAuth)) || (!!this.$listeners.onDel && this.delAuth.length==0)
|
||||||
},
|
},
|
||||||
columsList() {
|
columsList() {
|
||||||
const arr = []
|
const arr = []
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,17 @@
|
||||||
<view class="bg-white p-30rpx">
|
<view class="bg-white p-30rpx">
|
||||||
<view class="flex justify-between items-center">
|
<view class="flex justify-between items-center">
|
||||||
<view class="text-32rpx">全市数据统计</view>
|
<view class="text-32rpx">全市数据统计</view>
|
||||||
<u-button size="mini" v-auth="['endpoint.town_street.base_statistics_edit']" @click="cityEditShow = true">编辑</u-button>
|
<u-button
|
||||||
|
size="mini"
|
||||||
|
v-auth="['endpoint.town_street.base_statistics_edit']"
|
||||||
|
@click="cityEditShow = true"
|
||||||
|
>编辑</u-button
|
||||||
|
>
|
||||||
</view>
|
</view>
|
||||||
<view class="grid grid-cols-2 mt-20rpx" v-auth="['endpoint.town_street.base_statistics']">
|
<view
|
||||||
|
class="grid grid-cols-2 mt-20rpx"
|
||||||
|
v-auth="['endpoint.town_street.base_statistics']"
|
||||||
|
>
|
||||||
<CountItem
|
<CountItem
|
||||||
v-for="(item, i) in showCityList"
|
v-for="(item, i) in showCityList"
|
||||||
:key="i"
|
:key="i"
|
||||||
|
|
@ -88,7 +96,29 @@
|
||||||
@onEdit="handleEdit"
|
@onEdit="handleEdit"
|
||||||
:colums="baseTableColums"
|
:colums="baseTableColums"
|
||||||
:data="currentData"
|
:data="currentData"
|
||||||
|
:editAuth="['endpoint.town_street.edit']"
|
||||||
>
|
>
|
||||||
|
<template v-slot:extends="{ data }">
|
||||||
|
<view class="w-full">
|
||||||
|
<view v-for="(item, i) in formtExtends(data)" :key="i">
|
||||||
|
<view class="flex items-center">
|
||||||
|
<view class="flex-1 flex-center">
|
||||||
|
{{ item.name }}
|
||||||
|
</view>
|
||||||
|
<view class="flex-1">
|
||||||
|
<u-cell-item
|
||||||
|
v-for="(va, ii) in item.value"
|
||||||
|
:key="ii"
|
||||||
|
:title="va.year"
|
||||||
|
:value="va.value"
|
||||||
|
:arrow="false"
|
||||||
|
></u-cell-item>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<u-line></u-line>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
</BaseTablePopup>
|
</BaseTablePopup>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -98,6 +128,8 @@ import cuPopup from '@/components/cu-popup/index.vue'
|
||||||
import CountEdit from './components/town-count-edit.vue'
|
import CountEdit from './components/town-count-edit.vue'
|
||||||
import BaseTablePopup from '@/components/base-table/popup.vue'
|
import BaseTablePopup from '@/components/base-table/popup.vue'
|
||||||
import CityEdit from './components/town-city-edit'
|
import CityEdit from './components/town-city-edit'
|
||||||
|
import checkPermission from '@/utils/permission.js'
|
||||||
|
import { concat } from 'lodash-es'
|
||||||
const filterCityCount = [
|
const filterCityCount = [
|
||||||
'city_data_chart_nongye',
|
'city_data_chart_nongye',
|
||||||
'city_data_chart_yuye',
|
'city_data_chart_yuye',
|
||||||
|
|
@ -105,6 +137,28 @@ const filterCityCount = [
|
||||||
'city_data_chart_lingye',
|
'city_data_chart_lingye',
|
||||||
'city_data_chart_activity',
|
'city_data_chart_activity',
|
||||||
]
|
]
|
||||||
|
const defaultData = {
|
||||||
|
chart_nongye: {
|
||||||
|
label: '统计数据-农业',
|
||||||
|
unit: '万元',
|
||||||
|
},
|
||||||
|
chart_yuye: {
|
||||||
|
label: '统计数据-渔业',
|
||||||
|
unit: '万元',
|
||||||
|
},
|
||||||
|
chart_xumuye: {
|
||||||
|
label: '统计数据-畜牧业',
|
||||||
|
unit: '万元',
|
||||||
|
},
|
||||||
|
chart_lingye: {
|
||||||
|
label: '统计数据-林业',
|
||||||
|
unit: '万元',
|
||||||
|
},
|
||||||
|
chart_activity: {
|
||||||
|
label: '统计数据-其他',
|
||||||
|
unit: '万元',
|
||||||
|
},
|
||||||
|
}
|
||||||
const baseTableColums = [
|
const baseTableColums = [
|
||||||
{
|
{
|
||||||
title: '街镇名称',
|
title: '街镇名称',
|
||||||
|
|
@ -130,6 +184,10 @@ const baseTableColums = [
|
||||||
title: '街镇描述',
|
title: '街镇描述',
|
||||||
dataIndex: 'description',
|
dataIndex: 'description',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '统计数据',
|
||||||
|
dataIndex: 'extends',
|
||||||
|
},
|
||||||
]
|
]
|
||||||
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
|
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -147,20 +205,23 @@ export default {
|
||||||
(item) => !filterCityCount.includes(item.slug)
|
(item) => !filterCityCount.includes(item.slug)
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
options() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
text: '编辑',
|
||||||
|
style: {
|
||||||
|
backgroundColor: '#007aff',
|
||||||
|
},
|
||||||
|
permission: ['endpoint.town_street.edit'],
|
||||||
|
},
|
||||||
|
].filter((e) => checkPermission(e.permission))
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
baseTablePopupShow: false,
|
baseTablePopupShow: false,
|
||||||
baseTableColums,
|
baseTableColums,
|
||||||
cityItemShow: false,
|
cityItemShow: false,
|
||||||
options: [
|
|
||||||
{
|
|
||||||
text: '编辑',
|
|
||||||
style: {
|
|
||||||
backgroundColor: '#007aff',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
cityList: [],
|
cityList: [],
|
||||||
cityEditShow: false,
|
cityEditShow: false,
|
||||||
dataList: [],
|
dataList: [],
|
||||||
|
|
@ -184,6 +245,48 @@ export default {
|
||||||
this.getCityData()
|
this.getCityData()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
isObject(val) {
|
||||||
|
return Object.prototype.toString.call(val) === '[object Object]'
|
||||||
|
},
|
||||||
|
isArray(val) {
|
||||||
|
return Object.prototype.toString.call(val) === '[object Array]'
|
||||||
|
},
|
||||||
|
formtExtends({ value }) {
|
||||||
|
const defaultObj = value
|
||||||
|
const tempData = Object.keys(defaultObj).reduce((pre, cur) => {
|
||||||
|
const currentData = defaultData[cur]
|
||||||
|
const obj = {
|
||||||
|
name: currentData.label,
|
||||||
|
unit: currentData.unit,
|
||||||
|
slug: cur,
|
||||||
|
}
|
||||||
|
const extend = defaultObj[cur]
|
||||||
|
if (this.isObject(extend) || this.isArray(extend)) {
|
||||||
|
const temp = []
|
||||||
|
|
||||||
|
if (Object.keys(extend).length === 0) {
|
||||||
|
temp.push({
|
||||||
|
value: '',
|
||||||
|
year: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const key in extend) {
|
||||||
|
temp.push({
|
||||||
|
value: extend[key],
|
||||||
|
year: key,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return concat(pre, {
|
||||||
|
...obj,
|
||||||
|
isMore: true,
|
||||||
|
value: temp,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
return tempData ?? []
|
||||||
|
},
|
||||||
handleEdit(e) {
|
handleEdit(e) {
|
||||||
this.currentData = e
|
this.currentData = e
|
||||||
this.baseTablePopupShow = false
|
this.baseTablePopupShow = false
|
||||||
|
|
|
||||||
|
|
@ -443,11 +443,38 @@
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
this.getSupplier();
|
||||||
|
this.getProject();
|
||||||
this.queryDataList();
|
this.queryDataList();
|
||||||
this.getDeviceTypes();
|
this.getDeviceTypes();
|
||||||
this.getAgriculturalBasic();
|
this.getAgriculturalBasic();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getSupplier(){
|
||||||
|
this.$http.get('/api/keywords',{params:{
|
||||||
|
type_key:'device-supplier'
|
||||||
|
}}).then(({data})=>{
|
||||||
|
this.supplierlist=data.data.map(e=>{
|
||||||
|
return {
|
||||||
|
label:e.name,
|
||||||
|
value:e.key
|
||||||
|
}
|
||||||
|
})
|
||||||
|
console.log(this.supplierlist);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getProject(){
|
||||||
|
this.$http.get('/api/keywords',{params:{
|
||||||
|
type_key:'device-project'
|
||||||
|
}}).then(({data})=>{
|
||||||
|
this.projectlist=data.data.map(e=>{
|
||||||
|
return {
|
||||||
|
label:e.name,
|
||||||
|
value:e.key
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
queryBtn(){
|
queryBtn(){
|
||||||
this.list = [];
|
this.list = [];
|
||||||
this.queryDataList(true);
|
this.queryDataList(true);
|
||||||
|
|
|
||||||
|
|
@ -219,7 +219,7 @@ export default {
|
||||||
},
|
},
|
||||||
async getData() {
|
async getData() {
|
||||||
if (!this.filterParmas.device_id) {
|
if (!this.filterParmas.device_id) {
|
||||||
this.$u.toast('没有关联基地')
|
// this.$u.toast('没有关联基地')
|
||||||
this.loadingType = 0
|
this.loadingType = 0
|
||||||
return (this.chartData = { series: [] })
|
return (this.chartData = { series: [] })
|
||||||
}
|
}
|
||||||
|
|
@ -239,15 +239,19 @@ export default {
|
||||||
xAxis.push(key)
|
xAxis.push(key)
|
||||||
seriesData.push(resData[key])
|
seriesData.push(resData[key])
|
||||||
})
|
})
|
||||||
const max = Math.max(...seriesData)
|
// const max = Math.max(seriesData)
|
||||||
|
// console.log(seriesData);
|
||||||
if (max > 5) {
|
// if (max > 5) {
|
||||||
let maxN = Math.ceil(max / 5) * 5
|
// let maxN = Math.ceil(max / 5) * 5
|
||||||
maxN = maxN === 0 ? 5 : maxN
|
// maxN = maxN === 0 ? 5 : maxN
|
||||||
this.opts.yAxis.data[0].max = maxN
|
// console.log(maxN);
|
||||||
} else {
|
// this.opts.yAxis.data[0].max = 100
|
||||||
this.opts.yAxis.splitNumber = max
|
// this.opts.yAxis.data[0].min = 0
|
||||||
}
|
// } else {
|
||||||
|
// console.log(max);
|
||||||
|
// this.opts.yAxis.splitNumber = max
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
let res = {
|
let res = {
|
||||||
categories: xAxis,
|
categories: xAxis,
|
||||||
|
|
|
||||||
|
|
@ -150,8 +150,8 @@ export default {
|
||||||
async getData(e) {
|
async getData(e) {
|
||||||
if (!e.device_id) {
|
if (!e.device_id) {
|
||||||
this.mescroll.endByPage(0, 0)
|
this.mescroll.endByPage(0, 0)
|
||||||
|
// this.$u.toast('没有关联基地')
|
||||||
return this.$u.toast('没有关联基地')
|
return
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
const { data } = await http.get(
|
const { data } = await http.get(
|
||||||
|
|
|
||||||
|
|
@ -8,20 +8,26 @@
|
||||||
></image>
|
></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-box">
|
<view class="content-box">
|
||||||
<view
|
<view class="menus-section" v-for="(menu, index) in menus" :key="index">
|
||||||
class="menus-section"
|
<view class="title-t" v-if="menu.parent && menu.children.length > 0"
|
||||||
v-for="(menu, index) in menus"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<view class="title-t" v-if="menu.parent && menu.children.length>0"
|
|
||||||
>{{ menu.parent }}-{{ menu.label }}</view
|
>{{ menu.parent }}-{{ menu.label }}</view
|
||||||
>
|
>
|
||||||
<view class="title-t" v-if="!menu.parent && menu.children.length>0">{{ menu.label }}</view>
|
<view class="title-t" v-if="!menu.parent && menu.children.length > 0">{{
|
||||||
|
menu.label
|
||||||
|
}}</view>
|
||||||
<view class="menu-ul">
|
<view class="menu-ul">
|
||||||
<view class="menu-li" v-for="(cdm, i) in menu.children" :key="i">
|
<view class="menu-li" v-for="(cdm, i) in menu.children" :key="i">
|
||||||
<view class="menu_item" @click="linknavFn(cdm)">
|
<view class="menu_item" @click="linknavFn(cdm)">
|
||||||
<view class="icon"></view>
|
<view class="menu_item_content">
|
||||||
<view class="name">{{ cdm.label }}</view>
|
<view class="icon">
|
||||||
|
<image
|
||||||
|
class="icon_img"
|
||||||
|
v-if="cdm.icon"
|
||||||
|
:src="require(`@/static/img/${cdm.icon}`)"
|
||||||
|
></image>
|
||||||
|
</view>
|
||||||
|
<view class="name">{{ cdm.label }}</view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -44,36 +50,43 @@ export default {
|
||||||
label: '气象监测',
|
label: '气象监测',
|
||||||
url: '/pages/index/meteorological',
|
url: '/pages/index/meteorological',
|
||||||
permission: 'endpoint.weather.index',
|
permission: 'endpoint.weather.index',
|
||||||
|
icon: 'moon-cloudy-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '智能监控',
|
label: '智能监控',
|
||||||
url: '/pages/index/monitor',
|
url: '/pages/index/monitor',
|
||||||
permission: 'endpoint.camera.index',
|
permission: 'endpoint.camera.index',
|
||||||
|
icon: 'live-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '土壤监控',
|
label: '土壤监控',
|
||||||
url: '/pages/index/soil-monitoring',
|
url: '/pages/index/soil-monitoring',
|
||||||
permission: 'endpoint.soil.index',
|
permission: 'endpoint.soil.index',
|
||||||
|
icon: 'map-pin-range-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '水质监控',
|
label: '水质监控',
|
||||||
url: '/pages/index/water-quality',
|
url: '/pages/index/water-quality',
|
||||||
permission: 'endpoint.water.index',
|
permission: 'endpoint.water.index',
|
||||||
|
icon: 'contrast-drop-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '昆虫性诱监测',
|
label: '昆虫性诱监测',
|
||||||
url: '/pages/index/insect-monitors',
|
url: '/pages/index/insect-monitors',
|
||||||
permission: 'endpoint.insect.index',
|
permission: 'endpoint.insect.index',
|
||||||
|
icon: 'bug-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '虫情监测',
|
label: '虫情监测',
|
||||||
url: '/pages/index/pests',
|
url: '/pages/index/pests',
|
||||||
permission: 'endpoint.worm_statics.index',
|
permission: 'endpoint.worm_statics.index',
|
||||||
|
icon: 'bug-2-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '杀虫灯检测',
|
label: '杀虫灯检测',
|
||||||
url: '/pages/index/insecticidal-lamp',
|
url: '/pages/index/insecticidal-lamp',
|
||||||
permission: 'endpoint.insecticidal_lamp.index',
|
permission: 'endpoint.insecticidal_lamp.index',
|
||||||
|
icon: 'alarm-warning-line.png',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -85,16 +98,19 @@ export default {
|
||||||
label: '城镇数据',
|
label: '城镇数据',
|
||||||
url: '/pages/basics/town-base',
|
url: '/pages/basics/town-base',
|
||||||
permission: 'endpoint.town_street.index',
|
permission: 'endpoint.town_street.index',
|
||||||
|
icon: 'building-4-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '基地数据',
|
label: '基地数据',
|
||||||
url: '/pages/basics/basics-base',
|
url: '/pages/basics/basics-base',
|
||||||
permission: 'endpoint.agricultural_basic.index',
|
permission: 'endpoint.agricultural_basic.index',
|
||||||
|
icon: 'home-4-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '基地概况',
|
label: '基地概况',
|
||||||
url: '/pages/basics/profile',
|
url: '/pages/basics/profile',
|
||||||
permission: 'endpoint.agricultural_base_overview.index',
|
permission: 'endpoint.agricultural_base_overview.index',
|
||||||
|
icon: 'home-3-line.png',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -106,11 +122,13 @@ export default {
|
||||||
label: '城镇农作物',
|
label: '城镇农作物',
|
||||||
url: '/pages/crop/town-crop',
|
url: '/pages/crop/town-crop',
|
||||||
permission: 'endpoint.town_crops.index',
|
permission: 'endpoint.town_crops.index',
|
||||||
|
icon: 'plant-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '基地农作物',
|
label: '基地农作物',
|
||||||
url: '/pages/crop/basics-crop',
|
url: '/pages/crop/basics-crop',
|
||||||
permission: 'endpoint.crops.index',
|
permission: 'endpoint.crops.index',
|
||||||
|
icon: 'leaf-line.png',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -122,11 +140,13 @@ export default {
|
||||||
label: '城镇产量',
|
label: '城镇产量',
|
||||||
url: '/pages/yield/town-yield',
|
url: '/pages/yield/town-yield',
|
||||||
permission: 'endpoint.town_crops_output.index',
|
permission: 'endpoint.town_crops_output.index',
|
||||||
|
icon: 'box-1-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '基地产量',
|
label: '基地产量',
|
||||||
url: '/pages/yield/basics-yield',
|
url: '/pages/yield/basics-yield',
|
||||||
permission: 'endpoint.crops_output.index',
|
permission: 'endpoint.crops_output.index',
|
||||||
|
icon: 'instance-line.png',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -138,26 +158,31 @@ export default {
|
||||||
label: '稻虾价格',
|
label: '稻虾价格',
|
||||||
url: '/pages/estate/estate-price',
|
url: '/pages/estate/estate-price',
|
||||||
permission: 'endpoint.rice_shrimp_prices.index',
|
permission: 'endpoint.rice_shrimp_prices.index',
|
||||||
|
icon: 'price-tag-3-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '稻虾每周价格',
|
label: '稻虾每周价格',
|
||||||
url: '/pages/estate/estate-week-price',
|
url: '/pages/estate/estate-week-price',
|
||||||
permission: 'endpoint.rice_shrimp_weekly_prices.index',
|
permission: 'endpoint.rice_shrimp_weekly_prices.index',
|
||||||
|
icon: 'price-tag-2-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '稻虾产业',
|
label: '稻虾产业',
|
||||||
url: '/pages/estate/estate-industry',
|
url: '/pages/estate/estate-industry',
|
||||||
permission: 'endpoint.rice_shrimp_industries.index',
|
permission: 'endpoint.rice_shrimp_industries.index',
|
||||||
|
icon: 'collage-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '稻虾流向',
|
label: '稻虾流向',
|
||||||
url: '/pages/estate/estate-flows',
|
url: '/pages/estate/estate-flows',
|
||||||
permission: 'endpoint.rice_shrimp_flows.index',
|
permission: 'endpoint.rice_shrimp_flows.index',
|
||||||
|
icon: 'flow-chart.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '大宗物资',
|
label: '大宗物资',
|
||||||
url: '/pages/estate/estate-materiels',
|
url: '/pages/estate/estate-materiels',
|
||||||
permission: 'endpoint.materiels.index',
|
permission: 'endpoint.materiels.index',
|
||||||
|
icon: 'shopping-basket-2-line.png',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -168,11 +193,13 @@ export default {
|
||||||
label: '设备管理',
|
label: '设备管理',
|
||||||
url: '/pages/device/index',
|
url: '/pages/device/index',
|
||||||
permission: 'endpoint.device.index',
|
permission: 'endpoint.device.index',
|
||||||
|
icon: 'robot-2-line.png',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '警报明细',
|
label: '警报明细',
|
||||||
url: '/pages/device/warning',
|
url: '/pages/device/warning',
|
||||||
permission: 'endpoint.warnings.index',
|
permission: 'endpoint.warnings.index',
|
||||||
|
icon: 'feedback-line.png',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
@ -181,10 +208,12 @@ export default {
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(['userInfo']),
|
...mapGetters(['userInfo']),
|
||||||
menus(){
|
menus() {
|
||||||
|
return this.filterAsyncRoutes(
|
||||||
return this.filterAsyncRoutes(this.menuList, this.userInfo?.permissions_slug ?? [])
|
this.menuList,
|
||||||
}
|
this.userInfo?.permissions_slug ?? []
|
||||||
|
)
|
||||||
|
},
|
||||||
},
|
},
|
||||||
onLoad() {},
|
onLoad() {},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -222,11 +251,11 @@ export default {
|
||||||
.banner-section {
|
.banner-section {
|
||||||
.banner_img {
|
.banner_img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 280rpx;
|
height: 427rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.index-page {
|
.index-page {
|
||||||
background-color: #f8f8f8;
|
background-color: #EEEBFE;
|
||||||
.content-box {
|
.content-box {
|
||||||
padding-top: 30rpx;
|
padding-top: 30rpx;
|
||||||
padding-bottom: 150rpx;
|
padding-bottom: 150rpx;
|
||||||
|
|
@ -239,7 +268,7 @@ export default {
|
||||||
.title-t {
|
.title-t {
|
||||||
margin-bottom: 24rpx;
|
margin-bottom: 24rpx;
|
||||||
padding: 0 10rpx;
|
padding: 0 10rpx;
|
||||||
font-size: 28rpx;
|
font-size: 34rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -251,16 +280,40 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0 10rpx;
|
padding: 0 10rpx;
|
||||||
margin-bottom: 18rpx;
|
margin-bottom: 18rpx;
|
||||||
|
|
||||||
.menu_item {
|
.menu_item {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
|
border-radius: 8rpx;
|
||||||
min-height: 90rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 10rpx 15rpx;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding-top: 100%;
|
||||||
|
position: relative;
|
||||||
|
.menu_item_content {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 24%;
|
||||||
|
.icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
.icon_img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.name{
|
||||||
|
font-size: 24rpx;
|
||||||
|
margin-top: 14rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -149,7 +149,8 @@ export default {
|
||||||
},
|
},
|
||||||
async getData(e) {
|
async getData(e) {
|
||||||
if (!e.device_id) {
|
if (!e.device_id) {
|
||||||
return this.$u.toast('没有关联基地')
|
// this.$u.toast('没有关联基地')
|
||||||
|
return
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
const { data } = await http.get(
|
const { data } = await http.get(
|
||||||
|
|
|
||||||
|
|
@ -193,7 +193,8 @@ export default {
|
||||||
this.chatList = []
|
this.chatList = []
|
||||||
if (!this.filterParmas.device_id){
|
if (!this.filterParmas.device_id){
|
||||||
this.loadingType = 0
|
this.loadingType = 0
|
||||||
return this.$u.toast('没有关联基地')
|
// this.$u.toast('没有关联基地')
|
||||||
|
return
|
||||||
}
|
}
|
||||||
const { data } = await http.get('/api/monitoring-data', {
|
const { data } = await http.get('/api/monitoring-data', {
|
||||||
params: this.filterParmas,
|
params: this.filterParmas,
|
||||||
|
|
|
||||||
|
|
@ -415,7 +415,8 @@
|
||||||
let _data = data.data;
|
let _data = data.data;
|
||||||
if(_data.length==0){
|
if(_data.length==0){
|
||||||
this.loadingType = 0
|
this.loadingType = 0
|
||||||
return this.$u.toast('没有关联基地');
|
// this.$u.toast('没有关联基地');
|
||||||
|
return
|
||||||
}
|
}
|
||||||
for(let item of _data){
|
for(let item of _data){
|
||||||
item['label'] = item.name;
|
item['label'] = item.name;
|
||||||
|
|
|
||||||
|
|
@ -544,7 +544,8 @@ export default {
|
||||||
let _data = data.data
|
let _data = data.data
|
||||||
if(_data.length==0){
|
if(_data.length==0){
|
||||||
this.loading = 'nomore'
|
this.loading = 'nomore'
|
||||||
return this.$u.toast('没有关联基地')
|
// this.$u.toast('没有关联基地')
|
||||||
|
return
|
||||||
}
|
}
|
||||||
for (let item of _data) {
|
for (let item of _data) {
|
||||||
item['label'] = item.name
|
item['label'] = item.name
|
||||||
|
|
|
||||||
|
|
@ -186,6 +186,25 @@
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- PH -->
|
||||||
|
<view class="chart_section" v-if="chart_ph.isShow">
|
||||||
|
<view class="top_box">
|
||||||
|
<view class="tit">PH<text class="unit"></text></view>
|
||||||
|
<view class="name">{{addressName}}</view>
|
||||||
|
</view>
|
||||||
|
<view class="mb-20rpx">
|
||||||
|
<u-line></u-line>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
v-if="loadingType!=0"
|
||||||
|
:loadingType="loadingType"
|
||||||
|
type="area"
|
||||||
|
:opts="opts"
|
||||||
|
:chartData="chart_ph"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</view>
|
</view>
|
||||||
<!-- 设置预警值 -->
|
<!-- 设置预警值 -->
|
||||||
|
|
@ -270,6 +289,7 @@
|
||||||
chart_k:{},//氮
|
chart_k:{},//氮
|
||||||
chart_n:{},//磷
|
chart_n:{},//磷
|
||||||
chart_p:{},//钾
|
chart_p:{},//钾
|
||||||
|
chart_ph:{},//ph
|
||||||
//筛选
|
//筛选
|
||||||
q_start_time:'',
|
q_start_time:'',
|
||||||
q_end_time:'',
|
q_end_time:'',
|
||||||
|
|
@ -303,6 +323,7 @@
|
||||||
n:'磷',
|
n:'磷',
|
||||||
p:'钾',
|
p:'钾',
|
||||||
k:'氮',
|
k:'氮',
|
||||||
|
ph:'PH'
|
||||||
},
|
},
|
||||||
keyToUnit:{
|
keyToUnit:{
|
||||||
temperature:'℃',
|
temperature:'℃',
|
||||||
|
|
@ -311,6 +332,7 @@
|
||||||
n:'mg/kg',
|
n:'mg/kg',
|
||||||
p:'mg/kg',
|
p:'mg/kg',
|
||||||
k:'mg/kg',
|
k:'mg/kg',
|
||||||
|
ph:''
|
||||||
},
|
},
|
||||||
numberToString:{
|
numberToString:{
|
||||||
1:'Ⅰ',
|
1:'Ⅰ',
|
||||||
|
|
@ -444,7 +466,8 @@
|
||||||
let _data = data.data;
|
let _data = data.data;
|
||||||
if(_data.length==0){
|
if(_data.length==0){
|
||||||
this.loadingType = 0
|
this.loadingType = 0
|
||||||
return this.$u.toast('没有关联基地');
|
// this.$u.toast('没有关联基地');
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
for(let item of _data){
|
for(let item of _data){
|
||||||
|
|
@ -622,6 +645,7 @@
|
||||||
//end 磷 n
|
//end 磷 n
|
||||||
//start 钾 p
|
//start 钾 p
|
||||||
let res6 = {
|
let res6 = {
|
||||||
|
isShow:!!chartInfo.p,
|
||||||
categories: chartInfo.p.categories,
|
categories: chartInfo.p.categories,
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
|
@ -634,6 +658,23 @@
|
||||||
this.chart_p = JSON.parse(JSON.stringify(res6));
|
this.chart_p = JSON.parse(JSON.stringify(res6));
|
||||||
//end 钾 p
|
//end 钾 p
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//start ph
|
||||||
|
let res7 = {
|
||||||
|
isShow:!!chartInfo.ph,
|
||||||
|
categories: chartInfo.ph?.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name:'PH',
|
||||||
|
legendShape:'circle',
|
||||||
|
data: chartInfo.ph?.data,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
this.chart_ph = JSON.parse(JSON.stringify(res7));
|
||||||
|
//end ph
|
||||||
|
|
||||||
}
|
}
|
||||||
}).catch(()=>{
|
}).catch(()=>{
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -164,6 +164,24 @@
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 氨氮 -->
|
||||||
|
<view class="chart_section" v-if="chart_nh3n">
|
||||||
|
<view class="top_box">
|
||||||
|
<view class="tit">氨氮<text class="unit">mg/L</text></view>
|
||||||
|
<view class="name">{{ addressName }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="mb-20rpx">
|
||||||
|
<u-line></u-line>
|
||||||
|
</view>
|
||||||
|
<view class="cart_box">
|
||||||
|
<qiun-data-charts
|
||||||
|
:loadingType="loadingType"
|
||||||
|
type="area"
|
||||||
|
:opts="opts"
|
||||||
|
:chartData="chart_nh3n"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<!-- PH -->
|
<!-- PH -->
|
||||||
<view class="chart_section" v-if="chart_ph">
|
<view class="chart_section" v-if="chart_ph">
|
||||||
<view class="top_box">
|
<view class="top_box">
|
||||||
|
|
@ -237,6 +255,7 @@
|
||||||
</view>
|
</view>
|
||||||
<scroll-view class="scroll-y" scroll-y="true">
|
<scroll-view class="scroll-y" scroll-y="true">
|
||||||
<view class="form_cont">
|
<view class="form_cont">
|
||||||
|
|
||||||
<u-form v-for="(info, k) in formInfo" :key="k">
|
<u-form v-for="(info, k) in formInfo" :key="k">
|
||||||
<view class="title2 u-border-bottom">{{ keyToName[k] }}</view>
|
<view class="title2 u-border-bottom">{{ keyToName[k] }}</view>
|
||||||
<u-form-item
|
<u-form-item
|
||||||
|
|
@ -334,6 +353,7 @@ export default {
|
||||||
chart_conductivity: {}, //电导率
|
chart_conductivity: {}, //电导率
|
||||||
chart_chlorine: {}, //氯
|
chart_chlorine: {}, //氯
|
||||||
chart_oxygen: {}, //氧气
|
chart_oxygen: {}, //氧气
|
||||||
|
chart_nh3n: {}, //氨氮
|
||||||
chart_ph: {}, //PH
|
chart_ph: {}, //PH
|
||||||
chart_temperature: {}, //温度
|
chart_temperature: {}, //温度
|
||||||
chart_turbidity: {}, //浊度
|
chart_turbidity: {}, //浊度
|
||||||
|
|
@ -368,6 +388,7 @@ export default {
|
||||||
conductivity: '电导率',
|
conductivity: '电导率',
|
||||||
chlorine: '氯',
|
chlorine: '氯',
|
||||||
oxygen: '氧气',
|
oxygen: '氧气',
|
||||||
|
nh3n: '氨氮',
|
||||||
ph: 'PH',
|
ph: 'PH',
|
||||||
turbidity: '浊度',
|
turbidity: '浊度',
|
||||||
},
|
},
|
||||||
|
|
@ -376,6 +397,7 @@ export default {
|
||||||
conductivity: 'us/cm',
|
conductivity: 'us/cm',
|
||||||
chlorine: 'mg/L',
|
chlorine: 'mg/L',
|
||||||
oxygen: 'mg/L',
|
oxygen: 'mg/L',
|
||||||
|
nh3n: 'mg/L',
|
||||||
ph: '',
|
ph: '',
|
||||||
turbidity: 'NTU',
|
turbidity: 'NTU',
|
||||||
},
|
},
|
||||||
|
|
@ -514,7 +536,8 @@ export default {
|
||||||
let _data = data.data
|
let _data = data.data
|
||||||
if (_data.length == 0) {
|
if (_data.length == 0) {
|
||||||
this.loadingType = 0
|
this.loadingType = 0
|
||||||
return this.$u.toast('没有关联基地')
|
// this.$u.toast('没有关联基地')
|
||||||
|
return
|
||||||
}
|
}
|
||||||
for (let item of _data) {
|
for (let item of _data) {
|
||||||
item['label'] = item.name
|
item['label'] = item.name
|
||||||
|
|
@ -677,6 +700,23 @@ export default {
|
||||||
}else{
|
}else{
|
||||||
this.chart_oxygen = null
|
this.chart_oxygen = null
|
||||||
}
|
}
|
||||||
|
//start 氨氮 nh3n
|
||||||
|
if (chartInfo.nh3n) {
|
||||||
|
let res7 = {
|
||||||
|
categories: chartInfo.nh3n.categories,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '氨氮',
|
||||||
|
legendShape: 'circle',
|
||||||
|
data: chartInfo.nh3n.data,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
this.chart_nh3n = JSON.parse(JSON.stringify(res7))
|
||||||
|
}else{
|
||||||
|
this.chart_nh3n = null
|
||||||
|
}
|
||||||
//end 氧气
|
//end 氧气
|
||||||
//start PH
|
//start PH
|
||||||
if (chartInfo.ph) {
|
if (chartInfo.ph) {
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 873 B |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 992 B |
Binary file not shown.
|
After Width: | Height: | Size: 919 B |
Binary file not shown.
|
After Width: | Height: | Size: 1005 B |
Binary file not shown.
|
After Width: | Height: | Size: 283 B |
Binary file not shown.
|
After Width: | Height: | Size: 699 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 408 B |
Binary file not shown.
|
After Width: | Height: | Size: 683 B |
Binary file not shown.
|
After Width: | Height: | Size: 675 B |
Binary file not shown.
|
After Width: | Height: | Size: 661 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 754 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 953 B |
Binary file not shown.
|
After Width: | Height: | Size: 607 B |
Binary file not shown.
|
After Width: | Height: | Size: 820 B |
Binary file not shown.
|
After Width: | Height: | Size: 647 B |
Binary file not shown.
|
After Width: | Height: | Size: 833 B |
|
|
@ -1,19 +1,19 @@
|
||||||
.mescroll-body {
|
.mescroll-body {
|
||||||
position: relative; /* 下拉刷新区域相对自身定位 */
|
position: relative; /* 下拉刷新区域相对自身定位 */
|
||||||
height: auto; /* 不可固定高度,否则overflow:hidden导致无法滑动; 同时使设置的最小高生效,实现列表不满屏仍可下拉*/
|
height: auto; /* 不可固定高度,否则overflow:hidden导致无法滑动; 同时使设置的最小高生效,实现列表不满屏仍可下拉*/
|
||||||
overflow: hidden; /* 当有元素写在mescroll-body标签前面时,可遮住下拉刷新区域 */
|
overflow: hidden; /* 当有元素写在mescroll-body标签前面时,可遮住下拉刷新区域 */
|
||||||
box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
|
box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 使sticky生效: 父元素不能overflow:hidden或者overflow:auto属性 */
|
/* 使sticky生效: 父元素不能overflow:hidden或者overflow:auto属性 */
|
||||||
.mescroll-body.mescorll-sticky{
|
.mescroll-body.mescorll-sticky{
|
||||||
overflow: unset !important
|
overflow: unset !important
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 适配 iPhoneX */
|
/* 适配 iPhoneX */
|
||||||
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
|
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
|
||||||
.mescroll-safearea {
|
.mescroll-safearea {
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,400 +1,400 @@
|
||||||
<template>
|
<template>
|
||||||
<view
|
<view
|
||||||
class="mescroll-body mescroll-render-touch"
|
class="mescroll-body mescroll-render-touch"
|
||||||
:class="{'mescorll-sticky': sticky}"
|
:class="{'mescorll-sticky': sticky}"
|
||||||
:style="{'minHeight':minHeight, 'padding-top': padTop, 'padding-bottom': padBottom}"
|
:style="{'minHeight':minHeight, 'padding-top': padTop, 'padding-bottom': padBottom}"
|
||||||
@touchstart="wxsBiz.touchstartEvent"
|
@touchstart="wxsBiz.touchstartEvent"
|
||||||
@touchmove="wxsBiz.touchmoveEvent"
|
@touchmove="wxsBiz.touchmoveEvent"
|
||||||
@touchend="wxsBiz.touchendEvent"
|
@touchend="wxsBiz.touchendEvent"
|
||||||
@touchcancel="wxsBiz.touchendEvent"
|
@touchcancel="wxsBiz.touchendEvent"
|
||||||
:change:prop="wxsBiz.propObserver"
|
:change:prop="wxsBiz.propObserver"
|
||||||
:prop="wxsProp"
|
:prop="wxsProp"
|
||||||
>
|
>
|
||||||
<!-- 状态栏 -->
|
<!-- 状态栏 -->
|
||||||
<view v-if="topbar&&statusBarHeight" class="mescroll-topbar" :style="{height: statusBarHeight+'px', background: topbar}"></view>
|
<view v-if="topbar&&statusBarHeight" class="mescroll-topbar" :style="{height: statusBarHeight+'px', background: topbar}"></view>
|
||||||
|
|
||||||
<view class="mescroll-body-content mescroll-wxs-content" :style="{ transform: translateY, transition: transition }" :change:prop="wxsBiz.callObserver" :prop="callProp">
|
<view class="mescroll-body-content mescroll-wxs-content" :style="{ transform: translateY, transition: transition }" :change:prop="wxsBiz.callObserver" :prop="callProp">
|
||||||
<!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
|
<!-- 下拉加载区域 (支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-down组件实现)-->
|
||||||
<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
|
<!-- <mescroll-down :option="mescroll.optDown" :type="downLoadType" :rate="downRate"></mescroll-down> -->
|
||||||
<view v-if="mescroll.optDown.use" class="mescroll-downwarp" :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}">
|
<view v-if="mescroll.optDown.use" class="mescroll-downwarp" :style="{'background':mescroll.optDown.bgColor,'color':mescroll.optDown.textColor}">
|
||||||
<view class="downwarp-content">
|
<view class="downwarp-content">
|
||||||
<view class="downwarp-progress mescroll-wxs-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mescroll.optDown.textColor, 'transform': downRotate}"></view>
|
<view class="downwarp-progress mescroll-wxs-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mescroll.optDown.textColor, 'transform': downRotate}"></view>
|
||||||
<view class="downwarp-tip">{{downText}}</view>
|
<view class="downwarp-tip">{{downText}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 列表内容 -->
|
<!-- 列表内容 -->
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
|
||||||
<!-- 空布局 -->
|
<!-- 空布局 -->
|
||||||
<mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty>
|
<mescroll-empty v-if="isShowEmpty" :option="mescroll.optUp.empty" @emptyclick="emptyClick"></mescroll-empty>
|
||||||
|
|
||||||
<!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
|
<!-- 上拉加载区域 (下拉刷新时不显示, 支付宝小程序子组件传参给子子组件仍报单项数据流的异常,暂时不通过mescroll-up组件实现)-->
|
||||||
<!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
|
<!-- <mescroll-up v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" :option="mescroll.optUp" :type="upLoadType"></mescroll-up> -->
|
||||||
<view v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" class="mescroll-upwarp" :style="{'background':mescroll.optUp.bgColor,'color':mescroll.optUp.textColor}">
|
<view v-if="mescroll.optUp.use && !isDownLoading && upLoadType!==3" class="mescroll-upwarp" :style="{'background':mescroll.optUp.bgColor,'color':mescroll.optUp.textColor}">
|
||||||
<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
|
<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
|
||||||
<view v-show="upLoadType===1">
|
<view v-show="upLoadType===1">
|
||||||
<view class="upwarp-progress mescroll-rotate" :style="{'border-color':mescroll.optUp.textColor}"></view>
|
<view class="upwarp-progress mescroll-rotate" :style="{'border-color':mescroll.optUp.textColor}"></view>
|
||||||
<view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
|
<view class="upwarp-tip">{{ mescroll.optUp.textLoading }}</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 无数据 -->
|
<!-- 无数据 -->
|
||||||
<view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
|
<view v-if="upLoadType===2" class="upwarp-nodata">{{ mescroll.optUp.textNoMore }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效) -->
|
<!-- 底部是否偏移TabBar的高度(默认仅在H5端的tab页生效) -->
|
||||||
<!-- #ifdef H5 -->
|
<!-- #ifdef H5 -->
|
||||||
<view v-if="bottombar && windowBottom>0" class="mescroll-bottombar" :style="{height: windowBottom+'px'}"></view>
|
<view v-if="bottombar && windowBottom>0" class="mescroll-bottombar" :style="{height: windowBottom+'px'}"></view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
|
|
||||||
<!-- 适配iPhoneX -->
|
<!-- 适配iPhoneX -->
|
||||||
<view v-if="safearea" class="mescroll-safearea"></view>
|
<view v-if="safearea" class="mescroll-safearea"></view>
|
||||||
|
|
||||||
<!-- 回到顶部按钮 (fixed元素需写在transform外面,防止降级为absolute)-->
|
<!-- 回到顶部按钮 (fixed元素需写在transform外面,防止降级为absolute)-->
|
||||||
<mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
|
<mescroll-top v-model="isShowToTop" :option="mescroll.optUp.toTop" @click="toTopClick"></mescroll-top>
|
||||||
|
|
||||||
<!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->
|
<!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->
|
||||||
<!-- renderjs的数据载体,不可写在mescroll-downwarp内部,避免use为false时,载体丢失,无法更新数据 -->
|
<!-- renderjs的数据载体,不可写在mescroll-downwarp内部,避免use为false时,载体丢失,无法更新数据 -->
|
||||||
<view :change:prop="renderBiz.propObserver" :prop="wxsProp"></view>
|
<view :change:prop="renderBiz.propObserver" :prop="wxsProp"></view>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 微信小程序, QQ小程序, app, h5使用wxs -->
|
<!-- 微信小程序, QQ小程序, app, h5使用wxs -->
|
||||||
<!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->
|
<!-- #ifdef MP-WEIXIN || MP-QQ || APP-PLUS || H5 -->
|
||||||
<script src="../mescroll-uni/wxs/wxs.wxs" module="wxsBiz" lang="wxs"></script>
|
<script src="../mescroll-uni/wxs/wxs.wxs" module="wxsBiz" lang="wxs"></script>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
|
|
||||||
<!-- app, h5使用renderjs -->
|
<!-- app, h5使用renderjs -->
|
||||||
<!-- #ifdef APP-PLUS || H5 -->
|
<!-- #ifdef APP-PLUS || H5 -->
|
||||||
<script module="renderBiz" lang="renderjs">
|
<script module="renderBiz" lang="renderjs">
|
||||||
import renderBiz from "../mescroll-uni/wxs/renderjs.js";
|
import renderBiz from "../mescroll-uni/wxs/renderjs.js";
|
||||||
export default {
|
export default {
|
||||||
mixins: [renderBiz]
|
mixins: [renderBiz]
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 引入mescroll-uni.js,处理核心逻辑
|
// 引入mescroll-uni.js,处理核心逻辑
|
||||||
import MeScroll from "../mescroll-uni/mescroll-uni.js";
|
import MeScroll from "../mescroll-uni/mescroll-uni.js";
|
||||||
// 引入全局配置
|
// 引入全局配置
|
||||||
import GlobalOption from "../mescroll-uni/mescroll-uni-option.js";
|
import GlobalOption from "../mescroll-uni/mescroll-uni-option.js";
|
||||||
// 引入国际化工具类
|
// 引入国际化工具类
|
||||||
import mescrollI18n from '../mescroll-uni/mescroll-i18n.js';
|
import mescrollI18n from '../mescroll-uni/mescroll-i18n.js';
|
||||||
// 引入回到顶部组件
|
// 引入回到顶部组件
|
||||||
import MescrollTop from "../mescroll-uni/components/mescroll-top.vue";
|
import MescrollTop from "../mescroll-uni/components/mescroll-top.vue";
|
||||||
// 引入兼容wxs(含renderjs)写法的mixins
|
// 引入兼容wxs(含renderjs)写法的mixins
|
||||||
import WxsMixin from "../mescroll-uni/wxs/mixins.js";
|
import WxsMixin from "../mescroll-uni/wxs/mixins.js";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* mescroll-body 基于page滚动的下拉刷新和上拉加载组件, 支持嵌套原生组件, 性能好
|
* mescroll-body 基于page滚动的下拉刷新和上拉加载组件, 支持嵌套原生组件, 性能好
|
||||||
* @property {Object} down 下拉刷新的参数配置
|
* @property {Object} down 下拉刷新的参数配置
|
||||||
* @property {Object} up 上拉加载的参数配置
|
* @property {Object} up 上拉加载的参数配置
|
||||||
* @property {Object} i18n 国际化的参数配置
|
* @property {Object} i18n 国际化的参数配置
|
||||||
* @property {String, Number} top 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
|
* @property {String, Number} top 下拉布局往下的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
|
||||||
* @property {Boolean, String} topbar 偏移量top是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可留出状态栏的占位, 支持传入字符串背景,如色值,背景图,渐变)
|
* @property {Boolean, String} topbar 偏移量top是否加上状态栏高度, 默认false (使用场景:取消原生导航栏时,配置此项可留出状态栏的占位, 支持传入字符串背景,如色值,背景图,渐变)
|
||||||
* @property {String, Number} bottom 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
|
* @property {String, Number} bottom 上拉布局往上的偏移量 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx, 百分比则相对于windowHeight)
|
||||||
* @property {Boolean} safearea 偏移量bottom是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
|
* @property {Boolean} safearea 偏移量bottom是否加上底部安全区的距离, 默认false (需要适配iPhoneX时使用)
|
||||||
* @property {Boolean} fixed 是否通过fixed固定mescroll的高度, 默认true
|
* @property {Boolean} fixed 是否通过fixed固定mescroll的高度, 默认true
|
||||||
* @property {String, Number} height 指定mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
|
* @property {String, Number} height 指定mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
|
||||||
* @property {Boolean} bottombar 底部是否偏移TabBar的高度 (仅在H5端的tab页生效)
|
* @property {Boolean} bottombar 底部是否偏移TabBar的高度 (仅在H5端的tab页生效)
|
||||||
* @property {Boolean} sticky 是否支持sticky,默认false; 当值配置true时,需避免在mescroll-body标签前面加非定位的元素,否则下拉区域无法隐藏
|
* @property {Boolean} sticky 是否支持sticky,默认false; 当值配置true时,需避免在mescroll-body标签前面加非定位的元素,否则下拉区域无法隐藏
|
||||||
* @event {Function} init 初始化完成的回调
|
* @event {Function} init 初始化完成的回调
|
||||||
* @event {Function} down 下拉刷新的回调
|
* @event {Function} down 下拉刷新的回调
|
||||||
* @event {Function} up 上拉加载的回调
|
* @event {Function} up 上拉加载的回调
|
||||||
* @event {Function} emptyclick 点击empty配置的btnText按钮回调
|
* @event {Function} emptyclick 点击empty配置的btnText按钮回调
|
||||||
* @event {Function} topclick 点击回到顶部的按钮回调
|
* @event {Function} topclick 点击回到顶部的按钮回调
|
||||||
* @event {Function} scroll 滚动监听 (需在 up 配置 onScroll:true 才生效)
|
* @event {Function} scroll 滚动监听 (需在 up 配置 onScroll:true 才生效)
|
||||||
* @example <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback"> ... </mescroll-body>
|
* @example <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback"> ... </mescroll-body>
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'mescroll-body',
|
name: 'mescroll-body',
|
||||||
mixins: [WxsMixin],
|
mixins: [WxsMixin],
|
||||||
components: {
|
components: {
|
||||||
MescrollTop
|
MescrollTop
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
down: Object,
|
down: Object,
|
||||||
up: Object,
|
up: Object,
|
||||||
i18n: Object,
|
i18n: Object,
|
||||||
top: [String, Number],
|
top: [String, Number],
|
||||||
topbar: [Boolean, String],
|
topbar: [Boolean, String],
|
||||||
bottom: [String, Number],
|
bottom: [String, Number],
|
||||||
safearea: Boolean,
|
safearea: Boolean,
|
||||||
height: [String, Number],
|
height: [String, Number],
|
||||||
bottombar:{
|
bottombar:{
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
sticky: Boolean
|
sticky: Boolean
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
mescroll: {optDown:{},optUp:{}}, // mescroll实例
|
mescroll: {optDown:{},optUp:{}}, // mescroll实例
|
||||||
downHight: 0, //下拉刷新: 容器高度
|
downHight: 0, //下拉刷新: 容器高度
|
||||||
downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
|
downRate: 0, // 下拉比率(inOffset: rate<1; outOffset: rate>=1)
|
||||||
downLoadType: 0, // 下拉刷新状态: 0(loading前), 1(inOffset), 2(outOffset), 3(showLoading), 4(endDownScroll)
|
downLoadType: 0, // 下拉刷新状态: 0(loading前), 1(inOffset), 2(outOffset), 3(showLoading), 4(endDownScroll)
|
||||||
upLoadType: 0, // 上拉加载状态：0（loading前），1（loading中），2（没有更多了,显示END文本提示），3（没有更多了,不显示END文本提示）
|
upLoadType: 0, // 上拉加载状态：0（loading前），1（loading中），2（没有更多了,显示END文本提示），3（没有更多了,不显示END文本提示）
|
||||||
isShowEmpty: false, // 是否显示空布局
|
isShowEmpty: false, // 是否显示空布局
|
||||||
isShowToTop: false, // 是否显示回到顶部按钮
|
isShowToTop: false, // 是否显示回到顶部按钮
|
||||||
windowHeight: 0, // 可使用窗口的高度
|
windowHeight: 0, // 可使用窗口的高度
|
||||||
windowBottom: 0, // 可使用窗口的底部位置
|
windowBottom: 0, // 可使用窗口的底部位置
|
||||||
statusBarHeight: 0 // 状态栏高度
|
statusBarHeight: 0 // 状态栏高度
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
|
// mescroll最小高度,默认windowHeight,使列表不满屏仍可下拉
|
||||||
minHeight(){
|
minHeight(){
|
||||||
return this.toPx(this.height || '100%') + 'px'
|
return this.toPx(this.height || '100%') + 'px'
|
||||||
},
|
},
|
||||||
// 下拉布局往下偏移的距离 (px)
|
// 下拉布局往下偏移的距离 (px)
|
||||||
numTop() {
|
numTop() {
|
||||||
return this.toPx(this.top)
|
return this.toPx(this.top)
|
||||||
},
|
},
|
||||||
padTop() {
|
padTop() {
|
||||||
return this.numTop + 'px';
|
return this.numTop + 'px';
|
||||||
},
|
},
|
||||||
// 上拉布局往上偏移 (px)
|
// 上拉布局往上偏移 (px)
|
||||||
numBottom() {
|
numBottom() {
|
||||||
return this.toPx(this.bottom);
|
return this.toPx(this.bottom);
|
||||||
},
|
},
|
||||||
padBottom() {
|
padBottom() {
|
||||||
return this.numBottom + 'px';
|
return this.numBottom + 'px';
|
||||||
},
|
},
|
||||||
// 是否为重置下拉的状态
|
// 是否为重置下拉的状态
|
||||||
isDownReset() {
|
isDownReset() {
|
||||||
return this.downLoadType === 3 || this.downLoadType === 4;
|
return this.downLoadType === 3 || this.downLoadType === 4;
|
||||||
},
|
},
|
||||||
// 过渡
|
// 过渡
|
||||||
transition() {
|
transition() {
|
||||||
return this.isDownReset ? 'transform 300ms' : '';
|
return this.isDownReset ? 'transform 300ms' : '';
|
||||||
},
|
},
|
||||||
translateY() {
|
translateY() {
|
||||||
return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
|
return this.downHight > 0 ? 'translateY(' + this.downHight + 'px)' : ''; // transform会使fixed失效,需注意把fixed元素写在mescroll之外
|
||||||
},
|
},
|
||||||
// 是否在加载中
|
// 是否在加载中
|
||||||
isDownLoading(){
|
isDownLoading(){
|
||||||
return this.downLoadType === 3
|
return this.downLoadType === 3
|
||||||
},
|
},
|
||||||
// 旋转的角度
|
// 旋转的角度
|
||||||
downRotate(){
|
downRotate(){
|
||||||
return 'rotate(' + 360 * this.downRate + 'deg)'
|
return 'rotate(' + 360 * this.downRate + 'deg)'
|
||||||
},
|
},
|
||||||
// 文本提示
|
// 文本提示
|
||||||
downText(){
|
downText(){
|
||||||
if(!this.mescroll) return ""; // 避免头条小程序初始化时报错
|
if(!this.mescroll) return ""; // 避免头条小程序初始化时报错
|
||||||
switch (this.downLoadType){
|
switch (this.downLoadType){
|
||||||
case 1: return this.mescroll.optDown.textInOffset;
|
case 1: return this.mescroll.optDown.textInOffset;
|
||||||
case 2: return this.mescroll.optDown.textOutOffset;
|
case 2: return this.mescroll.optDown.textOutOffset;
|
||||||
case 3: return this.mescroll.optDown.textLoading;
|
case 3: return this.mescroll.optDown.textLoading;
|
||||||
case 4: return this.mescroll.isDownEndSuccess ? this.mescroll.optDown.textSuccess : this.mescroll.isDownEndSuccess==false ? this.mescroll.optDown.textErr : this.mescroll.optDown.textInOffset;
|
case 4: return this.mescroll.isDownEndSuccess ? this.mescroll.optDown.textSuccess : this.mescroll.isDownEndSuccess==false ? this.mescroll.optDown.textErr : this.mescroll.optDown.textInOffset;
|
||||||
default: return this.mescroll.optDown.textInOffset;
|
default: return this.mescroll.optDown.textInOffset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
//number,rpx,upx,px,% --> px的数值
|
//number,rpx,upx,px,% --> px的数值
|
||||||
toPx(num) {
|
toPx(num) {
|
||||||
if (typeof num === 'string') {
|
if (typeof num === 'string') {
|
||||||
if (num.indexOf('px') !== -1) {
|
if (num.indexOf('px') !== -1) {
|
||||||
if (num.indexOf('rpx') !== -1) {
|
if (num.indexOf('rpx') !== -1) {
|
||||||
// "10rpx"
|
// "10rpx"
|
||||||
num = num.replace('rpx', '');
|
num = num.replace('rpx', '');
|
||||||
} else if (num.indexOf('upx') !== -1) {
|
} else if (num.indexOf('upx') !== -1) {
|
||||||
// "10upx"
|
// "10upx"
|
||||||
num = num.replace('upx', '');
|
num = num.replace('upx', '');
|
||||||
} else {
|
} else {
|
||||||
// "10px"
|
// "10px"
|
||||||
return Number(num.replace('px', ''));
|
return Number(num.replace('px', ''));
|
||||||
}
|
}
|
||||||
} else if (num.indexOf('%') !== -1) {
|
} else if (num.indexOf('%') !== -1) {
|
||||||
// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
|
// 传百分比,则相对于windowHeight,传"10%"则等于windowHeight的10%
|
||||||
let rate = Number(num.replace('%', '')) / 100;
|
let rate = Number(num.replace('%', '')) / 100;
|
||||||
return this.windowHeight * rate;
|
return this.windowHeight * rate;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return num ? uni.upx2px(Number(num)) : 0;
|
return num ? uni.upx2px(Number(num)) : 0;
|
||||||
},
|
},
|
||||||
// 点击空布局的按钮回调
|
// 点击空布局的按钮回调
|
||||||
emptyClick() {
|
emptyClick() {
|
||||||
this.$emit('emptyclick', this.mescroll);
|
this.$emit('emptyclick', this.mescroll);
|
||||||
},
|
},
|
||||||
// 点击回到顶部的按钮回调
|
// 点击回到顶部的按钮回调
|
||||||
toTopClick() {
|
toTopClick() {
|
||||||
this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
|
this.mescroll.scrollTo(0, this.mescroll.optUp.toTop.duration); // 执行回到顶部
|
||||||
this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
|
this.$emit('topclick', this.mescroll); // 派发点击回到顶部按钮的回调
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
|
// 使用created初始化mescroll对象; 如果用mounted部分css样式编译到H5会失效
|
||||||
created() {
|
created() {
|
||||||
let vm = this;
|
let vm = this;
|
||||||
|
|
||||||
let diyOption = {
|
let diyOption = {
|
||||||
// 下拉刷新的配置
|
// 下拉刷新的配置
|
||||||
down: {
|
down: {
|
||||||
inOffset() {
|
inOffset() {
|
||||||
vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
|
vm.downLoadType = 1; // 下拉的距离进入offset范围内那一刻的回调 (自定义mescroll组件时,此行不可删)
|
||||||
},
|
},
|
||||||
outOffset() {
|
outOffset() {
|
||||||
vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
|
vm.downLoadType = 2; // 下拉的距离大于offset那一刻的回调 (自定义mescroll组件时,此行不可删)
|
||||||
},
|
},
|
||||||
onMoving(mescroll, rate, downHight) {
|
onMoving(mescroll, rate, downHight) {
|
||||||
// 下拉过程中的回调,滑动过程一直在执行;
|
// 下拉过程中的回调,滑动过程一直在执行;
|
||||||
vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
||||||
vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
|
vm.downRate = rate; //下拉比率 (inOffset: rate<1; outOffset: rate>=1)
|
||||||
},
|
},
|
||||||
showLoading(mescroll, downHight) {
|
showLoading(mescroll, downHight) {
|
||||||
vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
|
vm.downLoadType = 3; // 显示下拉刷新进度的回调 (自定义mescroll组件时,此行不可删)
|
||||||
vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
vm.downHight = downHight; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
||||||
},
|
},
|
||||||
beforeEndDownScroll(mescroll){
|
beforeEndDownScroll(mescroll){
|
||||||
vm.downLoadType = 4;
|
vm.downLoadType = 4;
|
||||||
return mescroll.optDown.beforeEndDelay // 延时结束的时长
|
return mescroll.optDown.beforeEndDelay // 延时结束的时长
|
||||||
},
|
},
|
||||||
endDownScroll() {
|
endDownScroll() {
|
||||||
vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
|
vm.downLoadType = 4; // 结束下拉 (自定义mescroll组件时,此行不可删)
|
||||||
vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
vm.downHight = 0; // 设置下拉区域的高度 (自定义mescroll组件时,此行不可删)
|
||||||
if(vm.downResetTimer) {clearTimeout(vm.downResetTimer); vm.downResetTimer = null} // 移除重置倒计时
|
if(vm.downResetTimer) {clearTimeout(vm.downResetTimer); vm.downResetTimer = null} // 移除重置倒计时
|
||||||
vm.downResetTimer = setTimeout(()=>{ // 过渡动画执行完毕后,需重置为0的状态,避免下次inOffset不及时显示textInOffset
|
vm.downResetTimer = setTimeout(()=>{ // 过渡动画执行完毕后,需重置为0的状态,避免下次inOffset不及时显示textInOffset
|
||||||
if(vm.downLoadType === 4) vm.downLoadType = 0
|
if(vm.downLoadType === 4) vm.downLoadType = 0
|
||||||
},300)
|
},300)
|
||||||
},
|
},
|
||||||
// 派发下拉刷新的回调
|
// 派发下拉刷新的回调
|
||||||
callback: function(mescroll) {
|
callback: function(mescroll) {
|
||||||
vm.$emit('down', mescroll);
|
vm.$emit('down', mescroll);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 上拉加载的配置
|
// 上拉加载的配置
|
||||||
up: {
|
up: {
|
||||||
// 显示加载中的回调
|
// 显示加载中的回调
|
||||||
showLoading() {
|
showLoading() {
|
||||||
vm.upLoadType = 1;
|
vm.upLoadType = 1;
|
||||||
},
|
},
|
||||||
// 显示无更多数据的回调
|
// 显示无更多数据的回调
|
||||||
showNoMore() {
|
showNoMore() {
|
||||||
vm.upLoadType = 2;
|
vm.upLoadType = 2;
|
||||||
},
|
},
|
||||||
// 隐藏上拉加载的回调
|
// 隐藏上拉加载的回调
|
||||||
hideUpScroll(mescroll) {
|
hideUpScroll(mescroll) {
|
||||||
vm.upLoadType = mescroll.optUp.hasNext ? 0 : 3;
|
vm.upLoadType = mescroll.optUp.hasNext ? 0 : 3;
|
||||||
},
|
},
|
||||||
// 空布局
|
// 空布局
|
||||||
empty: {
|
empty: {
|
||||||
onShow(isShow) {
|
onShow(isShow) {
|
||||||
// 显示隐藏的回调
|
// 显示隐藏的回调
|
||||||
vm.isShowEmpty = isShow;
|
vm.isShowEmpty = isShow;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 回到顶部
|
// 回到顶部
|
||||||
toTop: {
|
toTop: {
|
||||||
onShow(isShow) {
|
onShow(isShow) {
|
||||||
// 显示隐藏的回调
|
// 显示隐藏的回调
|
||||||
vm.isShowToTop = isShow;
|
vm.isShowToTop = isShow;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 派发上拉加载的回调
|
// 派发上拉加载的回调
|
||||||
callback: function(mescroll) {
|
callback: function(mescroll) {
|
||||||
vm.$emit('up', mescroll);
|
vm.$emit('up', mescroll);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let i18nType = mescrollI18n.getType() // 当前语言类型
|
let i18nType = mescrollI18n.getType() // 当前语言类型
|
||||||
let i18nOption = {type: i18nType} // 国际化配置
|
let i18nOption = {type: i18nType} // 国际化配置
|
||||||
MeScroll.extend(i18nOption, vm.i18n) // 具体页面的国际化配置
|
MeScroll.extend(i18nOption, vm.i18n) // 具体页面的国际化配置
|
||||||
MeScroll.extend(i18nOption, GlobalOption.i18n) // 全局的国际化配置
|
MeScroll.extend(i18nOption, GlobalOption.i18n) // 全局的国际化配置
|
||||||
MeScroll.extend(diyOption, i18nOption[i18nType]); // 混入国际化配置
|
MeScroll.extend(diyOption, i18nOption[i18nType]); // 混入国际化配置
|
||||||
MeScroll.extend(diyOption, {down:GlobalOption.down, up:GlobalOption.up}); // 混入全局的配置
|
MeScroll.extend(diyOption, {down:GlobalOption.down, up:GlobalOption.up}); // 混入全局的配置
|
||||||
let myOption = JSON.parse(JSON.stringify({down: vm.down,up: vm.up})); // 深拷贝,避免对props的影响
|
let myOption = JSON.parse(JSON.stringify({down: vm.down,up: vm.up})); // 深拷贝,避免对props的影响
|
||||||
MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
|
MeScroll.extend(myOption, diyOption); // 混入具体界面的配置
|
||||||
|
|
||||||
// 初始化MeScroll对象
|
// 初始化MeScroll对象
|
||||||
vm.mescroll = new MeScroll(myOption, true); // 传入true,标记body为滚动区域
|
vm.mescroll = new MeScroll(myOption, true); // 传入true,标记body为滚动区域
|
||||||
// 挂载语言包
|
// 挂载语言包
|
||||||
vm.mescroll.i18n = i18nOption;
|
vm.mescroll.i18n = i18nOption;
|
||||||
// init回调mescroll对象
|
// init回调mescroll对象
|
||||||
vm.$emit('init', vm.mescroll);
|
vm.$emit('init', vm.mescroll);
|
||||||
|
|
||||||
// 设置高度
|
// 设置高度
|
||||||
const sys = uni.getSystemInfoSync();
|
const sys = uni.getSystemInfoSync();
|
||||||
if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
|
if (sys.windowHeight) vm.windowHeight = sys.windowHeight;
|
||||||
if (sys.windowBottom) vm.windowBottom = sys.windowBottom;
|
if (sys.windowBottom) vm.windowBottom = sys.windowBottom;
|
||||||
if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
|
if (sys.statusBarHeight) vm.statusBarHeight = sys.statusBarHeight;
|
||||||
// 使down的bottomOffset生效
|
// 使down的bottomOffset生效
|
||||||
vm.mescroll.setBodyHeight(sys.windowHeight);
|
vm.mescroll.setBodyHeight(sys.windowHeight);
|
||||||
|
|
||||||
// 因为使用的是page的scroll,这里需自定义scrollTo
|
// 因为使用的是page的scroll,这里需自定义scrollTo
|
||||||
vm.mescroll.resetScrollTo((y, t) => {
|
vm.mescroll.resetScrollTo((y, t) => {
|
||||||
if(typeof y === 'string'){
|
if(typeof y === 'string'){
|
||||||
// 滚动到指定view (y为css选择器)
|
// 滚动到指定view (y为css选择器)
|
||||||
setTimeout(()=>{ // 延时确保view已渲染; 不使用$nextTick
|
setTimeout(()=>{ // 延时确保view已渲染; 不使用$nextTick
|
||||||
let selector;
|
let selector;
|
||||||
if(y.indexOf('#')==-1 && y.indexOf('.')==-1){
|
if(y.indexOf('#')==-1 && y.indexOf('.')==-1){
|
||||||
selector = '#'+y // 不带#和. 则默认为id选择器
|
selector = '#'+y // 不带#和. 则默认为id选择器
|
||||||
}else{
|
}else{
|
||||||
selector = y
|
selector = y
|
||||||
// #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-DINGTALK
|
// #ifdef APP-PLUS || H5 || MP-ALIPAY || MP-DINGTALK
|
||||||
if(y.indexOf('>>>')!=-1){ // 不支持跨自定义组件的后代选择器 (转为普通的选择器即可跨组件查询)
|
if(y.indexOf('>>>')!=-1){ // 不支持跨自定义组件的后代选择器 (转为普通的选择器即可跨组件查询)
|
||||||
selector = y.split('>>>')[1].trim()
|
selector = y.split('>>>')[1].trim()
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
uni.createSelectorQuery().select(selector).boundingClientRect(function(rect){
|
uni.createSelectorQuery().select(selector).boundingClientRect(function(rect){
|
||||||
if (rect) {
|
if (rect) {
|
||||||
let top = rect.top
|
let top = rect.top
|
||||||
top += vm.mescroll.getScrollTop()
|
top += vm.mescroll.getScrollTop()
|
||||||
uni.pageScrollTo({
|
uni.pageScrollTo({
|
||||||
scrollTop: top,
|
scrollTop: top,
|
||||||
duration: t
|
duration: t
|
||||||
})
|
})
|
||||||
} else{
|
} else{
|
||||||
console.error(selector + ' does not exist');
|
console.error(selector + ' does not exist');
|
||||||
}
|
}
|
||||||
}).exec()
|
}).exec()
|
||||||
},30)
|
},30)
|
||||||
} else{
|
} else{
|
||||||
// 滚动到指定位置 (y必须为数字)
|
// 滚动到指定位置 (y必须为数字)
|
||||||
uni.pageScrollTo({
|
uni.pageScrollTo({
|
||||||
scrollTop: y,
|
scrollTop: y,
|
||||||
duration: t
|
duration: t
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
|
// 具体的界面如果不配置up.toTop.safearea,则取本vue的safearea值
|
||||||
if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {} else {
|
if (vm.up && vm.up.toTop && vm.up.toTop.safearea != null) {} else {
|
||||||
vm.mescroll.optUp.toTop.safearea = vm.safearea;
|
vm.mescroll.optUp.toTop.safearea = vm.safearea;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 全局配置监听
|
// 全局配置监听
|
||||||
uni.$on("setMescrollGlobalOption", options=>{
|
uni.$on("setMescrollGlobalOption", options=>{
|
||||||
if(!options) return;
|
if(!options) return;
|
||||||
let i18nType = options.i18n ? options.i18n.type : null
|
let i18nType = options.i18n ? options.i18n.type : null
|
||||||
if(i18nType && vm.mescroll.i18n.type != i18nType){
|
if(i18nType && vm.mescroll.i18n.type != i18nType){
|
||||||
vm.mescroll.i18n.type = i18nType
|
vm.mescroll.i18n.type = i18nType
|
||||||
mescrollI18n.setType(i18nType)
|
mescrollI18n.setType(i18nType)
|
||||||
MeScroll.extend(options, vm.mescroll.i18n[i18nType])
|
MeScroll.extend(options, vm.mescroll.i18n[i18nType])
|
||||||
}
|
}
|
||||||
if(options.down){
|
if(options.down){
|
||||||
let down = MeScroll.extend({}, options.down)
|
let down = MeScroll.extend({}, options.down)
|
||||||
vm.mescroll.optDown = MeScroll.extend(down, vm.mescroll.optDown)
|
vm.mescroll.optDown = MeScroll.extend(down, vm.mescroll.optDown)
|
||||||
}
|
}
|
||||||
if(options.up){
|
if(options.up){
|
||||||
let up = MeScroll.extend({}, options.up)
|
let up = MeScroll.extend({}, options.up)
|
||||||
vm.mescroll.optUp = MeScroll.extend(up, vm.mescroll.optUp)
|
vm.mescroll.optUp = MeScroll.extend(up, vm.mescroll.optUp)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
// 注销全局配置监听
|
// 注销全局配置监听
|
||||||
uni.$off("setMescrollGlobalOption")
|
uni.$off("setMescrollGlobalOption")
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import "../mescroll-body/mescroll-body.css";
|
@import "../mescroll-body/mescroll-body.css";
|
||||||
@import "../mescroll-uni/components/mescroll-down.css";
|
@import "../mescroll-uni/components/mescroll-down.css";
|
||||||
@import "../mescroll-uni/components/mescroll-up.css";
|
@import "../mescroll-uni/components/mescroll-up.css";
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,116 +1,116 @@
|
||||||
<!--空布局:
|
<!--空布局:
|
||||||
遵循easycom规范, 可作为独立的组件, 不使用mescroll的页面也能使用:
|
遵循easycom规范, 可作为独立的组件, 不使用mescroll的页面也能使用:
|
||||||
<mescroll-empty v-if="isShowEmpty" :option="optEmpty" @emptyclick="emptyClick"></mescroll-empty>
|
<mescroll-empty v-if="isShowEmpty" :option="optEmpty" @emptyclick="emptyClick"></mescroll-empty>
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<view class="mescroll-empty" :class="{ 'empty-fixed': option.fixed }" :style="{ 'z-index': option.zIndex, top: option.top }">
|
<view class="mescroll-empty" :class="{ 'empty-fixed': option.fixed }" :style="{ 'z-index': option.zIndex, top: option.top }">
|
||||||
<view> <image v-if="icon" class="empty-icon" :src="icon" mode="widthFix" /> </view>
|
<view> <image v-if="icon" class="empty-icon" :src="icon" mode="widthFix" /> </view>
|
||||||
<view v-if="tip" class="empty-tip">{{ tip }}</view>
|
<view v-if="tip" class="empty-tip">{{ tip }}</view>
|
||||||
<view v-if="btnText" class="empty-btn" @click="emptyClick">{{ btnText }}</view>
|
<view v-if="btnText" class="empty-btn" @click="emptyClick">{{ btnText }}</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 引入全局配置
|
// 引入全局配置
|
||||||
import GlobalOption from '../mescroll-uni/mescroll-uni-option.js';
|
import GlobalOption from '../mescroll-uni/mescroll-uni-option.js';
|
||||||
// 引入国际化工具类
|
// 引入国际化工具类
|
||||||
import mescrollI18n from '../mescroll-uni/mescroll-i18n.js';
|
import mescrollI18n from '../mescroll-uni/mescroll-i18n.js';
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
// empty的配置项: 默认为GlobalOption.up.empty
|
// empty的配置项: 默认为GlobalOption.up.empty
|
||||||
option: {
|
option: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default() {
|
default() {
|
||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 使用computed获取配置,用于支持option的动态配置
|
// 使用computed获取配置,用于支持option的动态配置
|
||||||
computed: {
|
computed: {
|
||||||
// 图标
|
// 图标
|
||||||
icon() {
|
icon() {
|
||||||
if (this.option.icon != null) { // 此处不使用短路求值, 用于支持传空串不显示图标
|
if (this.option.icon != null) { // 此处不使用短路求值, 用于支持传空串不显示图标
|
||||||
return this.option.icon
|
return this.option.icon
|
||||||
} else{
|
} else{
|
||||||
let i18nType = mescrollI18n.getType() // 国际化配置
|
let i18nType = mescrollI18n.getType() // 国际化配置
|
||||||
if (this.option.i18n) {
|
if (this.option.i18n) {
|
||||||
return this.option.i18n[i18nType].icon
|
return this.option.i18n[i18nType].icon
|
||||||
} else{
|
} else{
|
||||||
return GlobalOption.i18n[i18nType].up.empty.icon || GlobalOption.up.empty.icon
|
return GlobalOption.i18n[i18nType].up.empty.icon || GlobalOption.up.empty.icon
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 文本提示
|
// 文本提示
|
||||||
tip() {
|
tip() {
|
||||||
if (this.option.tip != null) { // 支持传空串不显示文本提示
|
if (this.option.tip != null) { // 支持传空串不显示文本提示
|
||||||
return this.option.tip
|
return this.option.tip
|
||||||
} else{
|
} else{
|
||||||
let i18nType = mescrollI18n.getType() // 国际化配置
|
let i18nType = mescrollI18n.getType() // 国际化配置
|
||||||
if (this.option.i18n) {
|
if (this.option.i18n) {
|
||||||
return this.option.i18n[i18nType].tip
|
return this.option.i18n[i18nType].tip
|
||||||
} else{
|
} else{
|
||||||
return GlobalOption.i18n[i18nType].up.empty.tip || GlobalOption.up.empty.tip
|
return GlobalOption.i18n[i18nType].up.empty.tip || GlobalOption.up.empty.tip
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 按钮文本
|
// 按钮文本
|
||||||
btnText() {
|
btnText() {
|
||||||
if (this.option.i18n) {
|
if (this.option.i18n) {
|
||||||
let i18nType = mescrollI18n.getType() // 国际化配置
|
let i18nType = mescrollI18n.getType() // 国际化配置
|
||||||
return this.option.i18n[i18nType].btnText
|
return this.option.i18n[i18nType].btnText
|
||||||
} else{
|
} else{
|
||||||
return this.option.btnText
|
return this.option.btnText
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 点击按钮
|
// 点击按钮
|
||||||
emptyClick() {
|
emptyClick() {
|
||||||
this.$emit('emptyclick');
|
this.$emit('emptyclick');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* 无任何数据的空布局 */
|
/* 无任何数据的空布局 */
|
||||||
.mescroll-empty {
|
.mescroll-empty {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 100rpx 50rpx;
|
padding: 100rpx 50rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mescroll-empty.empty-fixed {
|
.mescroll-empty.empty-fixed {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute; /*transform会使fixed失效,最终会降级为absolute */
|
position: absolute; /*transform会使fixed失效,最终会降级为absolute */
|
||||||
top: 100rpx;
|
top: 100rpx;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mescroll-empty .empty-icon {
|
.mescroll-empty .empty-icon {
|
||||||
width: 280rpx;
|
width: 280rpx;
|
||||||
height: 280rpx;
|
height: 280rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mescroll-empty .empty-tip {
|
.mescroll-empty .empty-tip {
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: gray;
|
color: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mescroll-empty .empty-btn {
|
.mescroll-empty .empty-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-top: 40rpx;
|
margin-top: 40rpx;
|
||||||
min-width: 200rpx;
|
min-width: 200rpx;
|
||||||
padding: 18rpx;
|
padding: 18rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
border: 1rpx solid #e04b28;
|
border: 1rpx solid #e04b28;
|
||||||
border-radius: 60rpx;
|
border-radius: 60rpx;
|
||||||
color: #e04b28;
|
color: #e04b28;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mescroll-empty .empty-btn:active {
|
.mescroll-empty .empty-btn:active {
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,55 +1,55 @@
|
||||||
/* 下拉刷新区域 */
|
/* 下拉刷新区域 */
|
||||||
.mescroll-downwarp {
|
.mescroll-downwarp {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -100%;
|
top: -100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 下拉刷新--内容区,定位于区域底部 */
|
/* 下拉刷新--内容区,定位于区域底部 */
|
||||||
.mescroll-downwarp .downwarp-content {
|
.mescroll-downwarp .downwarp-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 60rpx;
|
min-height: 60rpx;
|
||||||
padding: 20rpx 0;
|
padding: 20rpx 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 下拉刷新--提示文本 */
|
/* 下拉刷新--提示文本 */
|
||||||
.mescroll-downwarp .downwarp-tip {
|
.mescroll-downwarp .downwarp-tip {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-left: 16rpx;
|
margin-left: 16rpx;
|
||||||
/* color: gray; 已在style设置color,此处删去*/
|
/* color: gray; 已在style设置color,此处删去*/
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 下拉刷新--旋转进度条 */
|
/* 下拉刷新--旋转进度条 */
|
||||||
.mescroll-downwarp .downwarp-progress {
|
.mescroll-downwarp .downwarp-progress {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 32rpx;
|
width: 32rpx;
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2rpx solid gray;
|
border: 2rpx solid gray;
|
||||||
border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
|
border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 旋转动画 */
|
/* 旋转动画 */
|
||||||
.mescroll-downwarp .mescroll-rotate {
|
.mescroll-downwarp .mescroll-rotate {
|
||||||
animation: mescrollDownRotate 0.6s linear infinite;
|
animation: mescrollDownRotate 0.6s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes mescrollDownRotate {
|
@keyframes mescrollDownRotate {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,47 +1,47 @@
|
||||||
<!-- 下拉刷新区域 -->
|
<!-- 下拉刷新区域 -->
|
||||||
<template>
|
<template>
|
||||||
<view v-if="mOption.use" class="mescroll-downwarp" :style="{'background-color':mOption.bgColor,'color':mOption.textColor}">
|
<view v-if="mOption.use" class="mescroll-downwarp" :style="{'background-color':mOption.bgColor,'color':mOption.textColor}">
|
||||||
<view class="downwarp-content">
|
<view class="downwarp-content">
|
||||||
<view class="downwarp-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mOption.textColor, 'transform':downRotate}"></view>
|
<view class="downwarp-progress" :class="{'mescroll-rotate': isDownLoading}" :style="{'border-color':mOption.textColor, 'transform':downRotate}"></view>
|
||||||
<view class="downwarp-tip">{{downText}}</view>
|
<view class="downwarp-tip">{{downText}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
option: Object , // down的配置项
|
option: Object , // down的配置项
|
||||||
type: Number, // 下拉状态（inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
|
type: Number, // 下拉状态（inOffset：1， outOffset：2， showLoading：3， endDownScroll：4）
|
||||||
rate: Number // 下拉比率 (inOffset: rate<1; outOffset: rate>=1)
|
rate: Number // 下拉比率 (inOffset: rate<1; outOffset: rate>=1)
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// 支付宝小程序需写成计算属性,prop定义default仍报错
|
// 支付宝小程序需写成计算属性,prop定义default仍报错
|
||||||
mOption(){
|
mOption(){
|
||||||
return this.option || {}
|
return this.option || {}
|
||||||
},
|
},
|
||||||
// 是否在加载中
|
// 是否在加载中
|
||||||
isDownLoading(){
|
isDownLoading(){
|
||||||
return this.type === 3
|
return this.type === 3
|
||||||
},
|
},
|
||||||
// 旋转的角度
|
// 旋转的角度
|
||||||
downRotate(){
|
downRotate(){
|
||||||
return 'rotate(' + 360 * this.rate + 'deg)'
|
return 'rotate(' + 360 * this.rate + 'deg)'
|
||||||
},
|
},
|
||||||
// 文本提示
|
// 文本提示
|
||||||
downText(){
|
downText(){
|
||||||
switch (this.type){
|
switch (this.type){
|
||||||
case 1: return this.mOption.textInOffset;
|
case 1: return this.mOption.textInOffset;
|
||||||
case 2: return this.mOption.textOutOffset;
|
case 2: return this.mOption.textOutOffset;
|
||||||
case 3: return this.mOption.textLoading;
|
case 3: return this.mOption.textLoading;
|
||||||
case 4: return this.mOption.textLoading;
|
case 4: return this.mOption.textLoading;
|
||||||
default: return this.mOption.textInOffset;
|
default: return this.mOption.textInOffset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import "./mescroll-down.css";
|
@import "./mescroll-down.css";
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,99 +1,99 @@
|
||||||
<!-- 回到顶部的按钮 -->
|
<!-- 回到顶部的按钮 -->
|
||||||
<template>
|
<template>
|
||||||
<image
|
<image
|
||||||
v-if="option.src"
|
v-if="option.src"
|
||||||
class="mescroll-totop"
|
class="mescroll-totop"
|
||||||
:class="[isShow ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-totop-safearea': option.safearea}]"
|
:class="[isShow ? 'mescroll-totop-in' : 'mescroll-totop-out', {'mescroll-totop-safearea': option.safearea}]"
|
||||||
:style="{'z-index':option.zIndex, 'left': left, 'right': right, 'bottom':addUnit(option.bottom), 'width':addUnit(option.width), 'border-radius':addUnit(option.radius)}"
|
:style="{'z-index':option.zIndex, 'left': left, 'right': right, 'bottom':addUnit(option.bottom), 'width':addUnit(option.width), 'border-radius':addUnit(option.radius)}"
|
||||||
:src="option.src"
|
:src="option.src"
|
||||||
mode="widthFix"
|
mode="widthFix"
|
||||||
@click="toTopClick"
|
@click="toTopClick"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
// up.toTop的配置项
|
// up.toTop的配置项
|
||||||
option: {
|
option: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default(){
|
default(){
|
||||||
return {}
|
return {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 是否显示
|
// 是否显示
|
||||||
value: false, // vue2
|
value: false, // vue2
|
||||||
modelValue: false // vue3
|
modelValue: false // vue3
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// 优先显示左边
|
// 优先显示左边
|
||||||
left(){
|
left(){
|
||||||
return this.option.left ? this.addUnit(this.option.left) : 'auto';
|
return this.option.left ? this.addUnit(this.option.left) : 'auto';
|
||||||
},
|
},
|
||||||
// 右边距离 (优先显示左边)
|
// 右边距离 (优先显示左边)
|
||||||
right() {
|
right() {
|
||||||
return this.option.left ? 'auto' : this.addUnit(this.option.right);
|
return this.option.left ? 'auto' : this.addUnit(this.option.right);
|
||||||
},
|
},
|
||||||
// 是否显示
|
// 是否显示
|
||||||
isShow(){
|
isShow(){
|
||||||
// #ifdef VUE3
|
// #ifdef VUE3
|
||||||
return this.modelValue
|
return this.modelValue
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef VUE2
|
// #ifdef VUE2
|
||||||
return this.value
|
return this.value
|
||||||
// #endif
|
// #endif
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
addUnit(num){
|
addUnit(num){
|
||||||
if(!num) return 0;
|
if(!num) return 0;
|
||||||
if(typeof num === 'number') return num + 'rpx';
|
if(typeof num === 'number') return num + 'rpx';
|
||||||
return num
|
return num
|
||||||
},
|
},
|
||||||
toTopClick() {
|
toTopClick() {
|
||||||
// #ifdef VUE3
|
// #ifdef VUE3
|
||||||
this.$emit("update:modelValue", false); // 使v-model生效 vue3
|
this.$emit("update:modelValue", false); // 使v-model生效 vue3
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef VUE2
|
// #ifdef VUE2
|
||||||
this.$emit('input', false); // 使v-model生效 vue2
|
this.$emit('input', false); // 使v-model生效 vue2
|
||||||
// #endif
|
// #endif
|
||||||
this.$emit('click'); // 派发点击事件
|
this.$emit('click'); // 派发点击事件
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* 回到顶部的按钮 */
|
/* 回到顶部的按钮 */
|
||||||
.mescroll-totop {
|
.mescroll-totop {
|
||||||
z-index: 9990;
|
z-index: 9990;
|
||||||
position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
|
position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
|
||||||
right: 20rpx;
|
right: 20rpx;
|
||||||
bottom: 120rpx;
|
bottom: 120rpx;
|
||||||
width: 72rpx;
|
width: 72rpx;
|
||||||
height: auto;
|
height: auto;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.5s; /* 过渡 */
|
transition: opacity 0.5s; /* 过渡 */
|
||||||
margin-bottom: var(--window-bottom); /* css变量 */
|
margin-bottom: var(--window-bottom); /* css变量 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 适配 iPhoneX */
|
/* 适配 iPhoneX */
|
||||||
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
|
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
|
||||||
.mescroll-totop-safearea {
|
.mescroll-totop-safearea {
|
||||||
margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
|
margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
|
||||||
margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
|
margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 显示 -- 淡入 */
|
/* 显示 -- 淡入 */
|
||||||
.mescroll-totop-in {
|
.mescroll-totop-in {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 隐藏 -- 淡出且不接收事件*/
|
/* 隐藏 -- 淡出且不接收事件*/
|
||||||
.mescroll-totop-out {
|
.mescroll-totop-out {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,47 @@
|
||||||
/* 上拉加载区域 */
|
/* 上拉加载区域 */
|
||||||
.mescroll-upwarp {
|
.mescroll-upwarp {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
min-height: 110rpx;
|
min-height: 110rpx;
|
||||||
padding: 30rpx 0;
|
padding: 30rpx 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*提示文本 */
|
/*提示文本 */
|
||||||
.mescroll-upwarp .upwarp-tip,
|
.mescroll-upwarp .upwarp-tip,
|
||||||
.mescroll-upwarp .upwarp-nodata {
|
.mescroll-upwarp .upwarp-nodata {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
/* color: gray; 已在style设置color,此处删去*/
|
/* color: gray; 已在style设置color,此处删去*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.mescroll-upwarp .upwarp-tip {
|
.mescroll-upwarp .upwarp-tip {
|
||||||
margin-left: 16rpx;
|
margin-left: 16rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*旋转进度条 */
|
/*旋转进度条 */
|
||||||
.mescroll-upwarp .upwarp-progress {
|
.mescroll-upwarp .upwarp-progress {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 32rpx;
|
width: 32rpx;
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
border: 2rpx solid gray;
|
border: 2rpx solid gray;
|
||||||
border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
|
border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 旋转动画 */
|
/* 旋转动画 */
|
||||||
.mescroll-upwarp .mescroll-rotate {
|
.mescroll-upwarp .mescroll-rotate {
|
||||||
animation: mescrollUpRotate 0.6s linear infinite;
|
animation: mescrollUpRotate 0.6s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes mescrollUpRotate {
|
@keyframes mescrollUpRotate {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,39 +1,39 @@
|
||||||
<!-- 上拉加载区域 -->
|
<!-- 上拉加载区域 -->
|
||||||
<template>
|
<template>
|
||||||
<view class="mescroll-upwarp" :style="{'background-color':mOption.bgColor,'color':mOption.textColor}">
|
<view class="mescroll-upwarp" :style="{'background-color':mOption.bgColor,'color':mOption.textColor}">
|
||||||
<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
|
<!-- 加载中 (此处不能用v-if,否则android小程序快速上拉可能会不断触发上拉回调) -->
|
||||||
<view v-show="isUpLoading">
|
<view v-show="isUpLoading">
|
||||||
<view class="upwarp-progress mescroll-rotate" :style="{'border-color':mOption.textColor}"></view>
|
<view class="upwarp-progress mescroll-rotate" :style="{'border-color':mOption.textColor}"></view>
|
||||||
<view class="upwarp-tip">{{ mOption.textLoading }}</view>
|
<view class="upwarp-tip">{{ mOption.textLoading }}</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- 无数据 -->
|
<!-- 无数据 -->
|
||||||
<view v-if="isUpNoMore" class="upwarp-nodata">{{ mOption.textNoMore }}</view>
|
<view v-if="isUpNoMore" class="upwarp-nodata">{{ mOption.textNoMore }}</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
option: Object, // up的配置项
|
option: Object, // up的配置项
|
||||||
type: Number // 上拉加载的状态：0（loading前），1（loading中），2（没有更多了）
|
type: Number // 上拉加载的状态：0（loading前），1（loading中），2（没有更多了）
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// 支付宝小程序需写成计算属性,prop定义default仍报错
|
// 支付宝小程序需写成计算属性,prop定义default仍报错
|
||||||
mOption() {
|
mOption() {
|
||||||
return this.option || {};
|
return this.option || {};
|
||||||
},
|
},
|
||||||
// 加载中
|
// 加载中
|
||||||
isUpLoading() {
|
isUpLoading() {
|
||||||
return this.type === 1;
|
return this.type === 1;
|
||||||
},
|
},
|
||||||
// 没有更多了
|
// 没有更多了
|
||||||
isUpNoMore() {
|
isUpNoMore() {
|
||||||
return this.type === 2;
|
return this.type === 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import './mescroll-up.css';
|
@import './mescroll-up.css';
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
// 国际化工具类
|
// 国际化工具类
|
||||||
const mescrollI18n = {
|
const mescrollI18n = {
|
||||||
// 默认语言
|
// 默认语言
|
||||||
def: "zh",
|
def: "zh",
|
||||||
// 获取当前语言类型
|
// 获取当前语言类型
|
||||||
getType(){
|
getType(){
|
||||||
return uni.getStorageSync("mescroll-i18n") || this.def
|
return uni.getStorageSync("mescroll-i18n") || this.def
|
||||||
},
|
},
|
||||||
// 设置当前语言类型
|
// 设置当前语言类型
|
||||||
setType(type){
|
setType(type){
|
||||||
uni.setStorageSync("mescroll-i18n", type)
|
uni.setStorageSync("mescroll-i18n", type)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default mescrollI18n
|
export default mescrollI18n
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue