Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 ec3749d6 作者: 王定
操作

feat: 优化一下

上级 a1ed374c
正在显示 包含 186 行增加 和 12 行删除
.env.development
# API 接口地址
VITE_GLOB_API_URL=http://111.22.182.169:49600
# VITE_GLOB_API_URL=http://36.133.16.81:42111
# VITE_GLOB_API_URL=http://123.207.47.17
# API 接口地址前缀
VITE_GLOB_API_URL_PREFIX=/jeecgboot
# VITE_GLOB_API_URL_PREFIX=/jeecg-boot
# VITE_GLOB_API_URL_PREFIX=/jeecg-boot
src/pages/linghuoyonggong/linghuoyonggong.vue
......@@ -46,6 +46,14 @@
dataTotal: 0,
longitude:null,
latitude:null,
swipeActionButtons: [{
text: '编辑',
background: '#465CFF'
}, {
text: '删除',
background: '#FF2B2B'
}]
})
// 缓存已处理的区域数据，避免重复计算
......@@ -56,7 +64,16 @@
maxRetries: 2,
retryDelay: 1000,
}
// 左滑点击
function swipeActionOnClick(e){
console.log("点击了");
console.log(e)
}
// 左滑值的改变
function swipeActionChange(e){
console.log("change*********");
console.log(e)
}
// 带重试机制的API调用
async function fetchWithRetry(apiCall, maxRetries = requestConfig.maxRetries) {
const startTime = Date.now()
......@@ -383,7 +400,9 @@
</view>
</template>
<template v-else>
<view class="work_list_view" v-for="item in pageData.employmentList" :key="item.id">
<fui-swipe-action class="yr-list-swipe" v-for="item in pageData.employmentList" :key="item.id" :buttons="pageData.swipeActionButtons" @click="swipeActionOnClick" @change="swipeActionChange">
<fui-list-cell class="yr-list-cell" :padding="['0rpx','0rpx']" :highlight="false">
<view class="work_list_view">
<view class="d-flex j-sb">
<view class="left-width village_number_view">
<view class="village_view text_overflow_ellipsis">{{ item.villageName }}</view>
......@@ -408,7 +427,36 @@
<view class="right-width see_details_btn" @click="onDetailsClick(item)">查看详情</view>
</view>
</view>
</fui-list-cell>
</fui-swipe-action>
</template>
<!-- <template v-else>
<view class="work_list_view" v-for="item in pageData.employmentList" :key="item.id">
<view class="d-flex j-sb">
<view class="left-width village_number_view">
<view class="village_view text_overflow_ellipsis">{{ item.villageName }}</view>
<view class="d-flex align-center"><image class="avatar_icon" src="/static/images/linghuoyonggong/avatar.png" /><text class="text-color">待工人数{{item.workers}}名</text></view>
</view>
<view class="d-flex align-center justify-center right-width village_distance">
<image class="distance_icon" src="/static/images/linghuoyonggong/distance.png" />
<text class="distance_val text-color">{{getDistanceText(item)}}</text>
</view>
</view>
<view class="d-flex j-sb skill_details_view" style="padding-bottom: 0px;">
<view class="left-width d-flex j-sb align-center">
<image class="skill_icon" src="/static/images/linghuoyonggong/skill.png" />
<view class="skill_view text_overflow_ellipsis">技能：{{item.skills.length ? item.skills.join("、") : '未填写'}}</view>
</view>
</view>
<view class="d-flex j-sb skill_details_view">
<view class="left-width d-flex j-sb align-center">
<image class="skill_icon" src="/static/images/linghuoyonggong/address.png" />
<view class="skill_view text_overflow_ellipsis">地址：{{item.villageFullName}}</view>
</view>
<view class="right-width see_details_btn" @click="onDetailsClick(item)">查看详情</view>
</view>
</view>
</template> -->
</template>
</view>
</view>
......@@ -680,8 +728,15 @@
box-shadow: 0px 1px 8px #5db66f;
}
/* .yr-list-swipe{
width: 680rpx;
.yr-list-cell{
width: 680rpx;
}
} */
.work_list_view{
border-bottom: 2rpx solid #EEEEEE;
// border-bottom: 2rpx solid #EEEEEE;
width: 100%;
padding-top: 24rpx;
.text-color{color: #5DB66F;font-size: 24rpx;}
.d-flex{display: flex;}
......
src/pages/shouye/shouye.vue
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { reactive, ref,getCurrentInstance } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
import { closeSplashscreenAndChechUpgrade } from '@/utils/upgrade'
......@@ -26,7 +26,9 @@ const LOCATION_CACHE_TIME = 5 * 60 * 1000 // 5分钟缓存时间
onLoad(() => {
// 关闭启动页并检查更新
closeSplashscreenAndChechUpgrade()
closeSplashscreenAndChechUpgrade();
// 农技课堂
getAgricultureClassList()
})
onShow(() => {
......@@ -140,8 +142,6 @@ onShow(() => {
getNews()
// 服务展示窗
getServiceStatsList()
// 农技课堂
getAgricultureClassList()
// 预警信息
getWarning()
})
......@@ -288,6 +288,9 @@ const pageData = reactive({
agricultureClass: {
videoList: [],
},
videoListIsShow:false,
videwHtmlList:""
})
function getServiceItems() {
......@@ -325,8 +328,13 @@ function getServiceStatsList() {
}
function getAgricultureClassList() {
getVideoList({ pageNo: 1, pageSize: 10, status: 1 }).then((res) => {
const { records } = res
pageData.agricultureClass.videoList = records
const { records } = res;
let videwHtmlList = '';
for(let i = 0; i < records.length;i++){
videwHtmlList += '<video class="htmlvideo" data-index="'+i+'" src="'+records[i].url+'"></video>'
}
pageData.videwHtmlList = videwHtmlList;
pageData.agricultureClass.videoList = records;
})
}
......@@ -464,6 +472,82 @@ onHide(() => {
}
})
})
// 引入实例
const instance = getCurrentInstance();
const getDomDataSetFunc = (domName='',datasetName='index') =>{
return new Promise((resolve,reject)=>{
const queryDataget = uni.createSelectorQuery().in(instance.proxy);
// 获取内容
queryDataget.select(domName).fields({dataset:true},(data)=>{
if(data && data.dataset){
resolve(data.dataset[datasetName])
}else{
reject()
}
}).exec();
})
}
function domClick(){
getDomDataSetFunc('.domClick','index').then((res)=>{
// console.log(res)
let whArr = JSON.parse(res);
let videoList = pageData.agricultureClass.videoList;
let videoLen = videoList.length,scale = 0;
for(let i = 0; i < videoLen;i++){
/* videoList[i].videoWidth = whArr[i].w; */
scale = (340 / whArr[i].w).toFixed(1);
videoList[i].videoWidth = 340;
videoList[i].videoHeight = Math.floor(whArr[i].h * scale);
if(videoLen >= i){
pageData.videoListIsShow = true;
}
}
})
}
</script>
<script module="renderscript" lang="renderjs">
export default {
data() {
return {};
},
methods: {
methodInRenderjs(newValue, oldValue, ownerVm, vm) {
if(newValue && newValue.length){
let valLen = newValue.length;
let videoWH = [],videoIndex = 0;
for(let i = 0; i < newValue.length; i++){
videoWH.push(0)
}
setTimeout(()=>{
let domClick = document.querySelector(".domClick");
const videos = document.querySelectorAll('.htmlvideo');
videos.forEach(video => {
video.addEventListener('loadedmetadata', function() {
var dataIndex = video.getAttribute('data-index');
videoWH[dataIndex] = {w:video.videoWidth,h:video.videoHeight};
videoIndex++;
if(videoIndex >= valLen){
domClick.dataset.index = JSON.stringify(videoWH);
domClick.click();
}
// console.log('Video width:',dataIndex, videoWidth, 'Video height:', videoHeight);
});
});
},600)
}
},
// renderjs 向普通 Vue 传值的方法
sendDataToVue(event, ownerInstance) {
ownerInstance.callMethod('someMethodInVue', { // 调用 Vue 组件中的方法
someData: '这是从 renderjs 传来的数据'
});
}
}
};
</script>
<template>
......@@ -666,15 +750,15 @@ onHide(() => {
<text class="font_6 text_32">农技课堂</text>
<text class="font_7 text_33" @click="onViewMoreClass">查看全部</text>
</view>
<view class="codefun-flex-col section_13 !relative rounded-lg" style="margin-left: -28rpx;">
<view v-if="pageData.videoListIsShow" class="codefun-flex-col section_13 !relative rounded-lg" style="margin-left: -28rpx;">
<fui-waterfall topGap="20" leftGap="20" rightGap="20" bottomGap="20">
<fui-waterfall-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"
<fui-waterfall-item :imgWidth="video.videoWidth" :imgHeight="video.videoHeight" v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"
:src="video.thumbnailPath" @click="playVideo(index)">
<view class="flex flex-col justify-between pl-2 pr-2 pb-2">
<view class="fontsize_28 mt-1 mb-2 font-13">{{ video.title }}</view>
<view class="flex justify-between text-25 color-#686868">
<view class="mr-1 flex-center">
<!-- <image class="mt-0.2 mr-1 w-30 h-26" src="/static/images/news/views.png" /> -->
<view class="flex-center text-24 lh-24rpx">{{ video.viewCount || 0 }}次播放</view>
</view>
<text>{{ dayjs(video.publishDate).format('MM-DD') }}</text>
......@@ -690,6 +774,39 @@ onHide(() => {
</fui-waterfall-item>
</fui-waterfall>
</view>
<view v-show="false" style="width:0px;height:0px;" class="domClick" @click="domClick" :vsrc="pageData.agricultureClass.videoList":change:vsrc="renderscript.methodInRenderjs">
<!-- <video class="htmlvideo" :src="video.url" v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"></video> -->
<view v-html="pageData.videwHtmlList"></view>
</view>
<!-- <view class="codefun-flex-col section_13 !relative rounded-lg" style="margin-left: -28rpx;">
<fui-waterfall topGap="20" leftGap="20" rightGap="20" bottomGap="20">
<fui-waterfall-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"
:src="video.thumbnailPath" @click="playVideo(index)">
<view class="flex flex-col justify-between pl-2 pr-2 pb-2">
<view class="fontsize_28 mt-1 mb-2 font-13">{{ video.title }}</view>
<view class="flex justify-between text-25 color-#686868">
<view class="mr-1 flex-center">
<view class="flex-center text-24 lh-24rpx">{{ video.viewCount || 0 }}次播放</view>
</view>
<text>{{ dayjs(video.publishDate).format('MM-DD') }}</text>
</view>
</view>
<video :id="`video${index}`" :src="video.url" :poster="video.thumbnailPath"
:title="video.title" :controls="true" :autoplay="false" :muted="false" :loop="true"
:show-play-btn="true" :show-center-play-btn="true" :enable-progress-gesture="true"
:show-progress="true" :direction="0" object-fit="contain"
@loadedmetadata="handleMetadataLoaded" @play="handleVideoPlay(index)"
@pause="handleVideoPause(index)"
@fullscreenchange="handleFullscreenChange($event, index)" class="!hidden"></video>
</fui-waterfall-item>
</fui-waterfall>
</view> -->
</view>
</view>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论