elink-star
/
epmet-apartment-work-mp
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

巡检图片视频，下拉加载

wyx
wangyx 4 months ago
parent
dcb2153dd8
commit
b4fb1dca77
1 changed files with 92 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 155
      pages/tabBar/xjPage/xjRecord.vue

155
pages/tabBar/xjPage/xjRecord.vue
View File

@ -1,11 +1,13 @@
<!-- 巡检记录 -->
<template>
<scroll-view class="content"
scroll-y
refresher-enabled
<scroll-view
class="content"
scroll-y
refresher-enabled
:refresher-triggered="isRefreshing"
@refresherrefresh="refreshData"
@scrolltolower="loadMore">
@refresherrefresh="refreshData"
@scrolltolower="loadMore"
>
<view class="conItem" v-for="item in listData" :key="item.id">
<view class="conItemTitle">
<image src="/static/img/巡检记录列表里.png" class="titleImg"></image>
@ -26,14 +28,30 @@
</view>
<view class="recordItem">
<view class="recordItemName">图片/视频</view>
<view class="recordItemCon" style="display: flex;flex-wrap: wrap;">
<view v-for="(v,index) in item.imageList" :key="v.id" @click="handlePreviewImage(item.imageList,index)">
<image v-if="v.format == 'image'" :src="v.url" class="recordItemConImg"></image>
<view class="recordItemCon" style="display: flex; flex-wrap: wrap">
<view
v-for="(v, index) in item.imageList"
:key="v.id"
@click="handlePreviewImage(item.imageList, index)"
>
<image
v-if="v.format == 'image/png'"
:src="v.url"
class="recordItemConImg"
></image>
</view>
<view v-for="v in item.imageList" :key="v.id">
<view v-if="v.format == 'video'" style="width: 420rpx;height: 240rpx;padding:20rpx;">
<video id="myVideo" style="width: 100%;height: 100%;" :src="v.url"
@error="videoErrorCallback" controls></video>
<view v-for="v in item.imageList" :key="v.id">
<view
v-if="v.format == 'video/mp4'"
style="width: 420rpx; height: 240rpx; padding: 20rpx"
>
<video
id="myVideo"
style="width: 100%; height: 100%"
:src="v.url"
@error="videoErrorCallback"
controls
></video>
</view>
</view>
</view>
@ -44,36 +62,32 @@
</view>
</view>
</view>
<view style="text-align: center;" v-if="isLoading">加载中...</view>
<view v-else class="no-data">
暂无数据~
</view>
<view style="text-align: center" v-if="isLoading">加载中...</view>
<view v-else-if="listData.length <= 0" class="no-data"> 暂无数据~ </view>
</scroll-view>
</template>
<script>
import {
queryDeptDropdownList,
} from "@/common/rec";
import { getdeptList, myInspection } from '@/common/api.js';
import { queryDeptDropdownList } from "@/common/rec";
import { getdeptList, myInspection } from "@/common/api.js";
export default {
data () {
data() {
return {
isLoading: false,
isRefreshing: false,
form:{
pageNum:1,
form: {
pageNum: 1,
pageSize: 10,
},
listData: []
}
listData: [],
noMore: false,
};
},
onLoad () {
this.refreshData()
onLoad() {
this.refreshData();
},
methods: {
getTree(){
getTree() {
getdeptList().then(async (res) => {
this.deptOptions = this.handleTree(
res.data,
@ -82,7 +96,10 @@ export default {
"children",
2
);
this.deptOptions = await this.getListByParentId("1", this.deptOptions[0].children[0].deptId);
this.deptOptions = await this.getListByParentId(
"1",
this.deptOptions[0].children[0].deptId
);
// console.log(this.deptOptions);
});
},
@ -96,63 +113,75 @@ export default {
},
// 刷新数据
refreshData() {
console.log('下拉刷新');
this.isRefreshing = true
this.list = []
console.log("下拉刷新");
this.isRefreshing = true;
this.noMore = false; // 新增
this.listData = [];
this.form.pageNum = 1; // 重置页码到第一页
this.fetchData()
this.fetchData();
},
// 加载更多数据（分页）
loadMore() {
console.log('上拉加载');
if (this.isLoading) return
console.log("上拉加载");
if (this.isLoading || this.noMore) return; // 新增 noMore 判断
this.isLoading = true;
this.form.pageNum++
this.fetchData()
this.form.pageNum++;
this.fetchData();
},
// 获取数据的方法，模拟异步请求
async fetchData() {
myInspection(this.form).then((res)=>{
const tempList = res.rows
let page = this.form.pageNum
myInspection(this.form).then((res) => {
const tempList = res.rows;
let page = this.form.pageNum;
if (page == 1) {
this.listData = tempList
this.listData = tempList;
} else {
if (tempList.length > 0) {
const list = [...this.listData, ...tempList]
this.listData = list
} else {
const page = this.form.pageNum - 1
this.form.pageNum = page
const list = [...this.listData, ...tempList];
this.listData = list;
}
}
// 判断是否还有更多
if (tempList.length < this.form.pageSize) {
this.noMore = true;
if (page !== 1) {
uni.showToast({
content: '已经加载全部'
})
content: "已经加载全部",
});
}
}
this.isLoading = false;
this.isRefreshing = false
this.isRefreshing = false;
uni.stopPullDownRefresh();
})
});
},
handlePreviewImage(list,index){
const filePaths = list.filter(item=> item.format == 'image').map(item=> item.url)
handlePreviewImage(list, index) {
const filePaths = list
.filter((item) => item.format == "image")
.map((item) => item.url);
uni.previewImage({
urls: filePaths,
current:index,
current: index,
longPressActions: {
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function (data) {
console.log(
"选中了第" +
(data.tapIndex + 1) +
"个按钮,第" +
(data.index + 1) +
"张图片"
);
},
fail: function(err) {
fail: function (err) {
console.log(err.errMsg);
}
}
},
},
});
}
}
}
},
},
};
</script>
<style lang="scss" scoped>

Write Preview
Loading…
Cancel
Save