提交 7042f9c3 作者: 王定

feat: 优化农技课堂给视频加上时长和农场

上级 e6e77db5
...@@ -536,3 +536,16 @@ text { ...@@ -536,3 +536,16 @@ text {
.codefun-mt-100 { .codefun-mt-100 {
margin-top: 200rpx; margin-top: 200rpx;
} }
.yr-toolbox-style{
.button-group{
width: 68rpx !important;
.button{
font-size: 20rpx !important;
padding:12rpx 0rpx !important;
}
.fui-divider__wrap{
height:0rpx !important;
}
}
}
\ No newline at end of file
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<image class="fui-waterfall__img" :src="src" :mode="imgHeight!=0?'scaleToFill':'widthFix'" :webp="webp" <image class="fui-waterfall__img" :src="src" :mode="imgHeight!=0?'scaleToFill':'widthFix'" :webp="webp"
:draggable="draggable" @load="handleLoad" @error="handleError" :style="getStyles" v-if="isLoaded"> :draggable="draggable" @load="handleLoad" @error="handleError" :style="getStyles" v-if="isLoaded">
</image> </image>
<view :class="{'yr-video-duration':videoDuration}">{{videoDuration}}</view>
</view> </view>
<slot></slot> <slot></slot>
</view> </view>
...@@ -60,6 +61,10 @@ ...@@ -60,6 +61,10 @@
param: { param: {
type: [Number, String], type: [Number, String],
default: 0 default: 0
},
videoDuration:{
type: [Number, String],
default: null
} }
}, },
created() { created() {
...@@ -87,7 +92,7 @@ ...@@ -87,7 +92,7 @@
return style; return style;
}, },
getStyl() { getStyl() {
let style = this.getStyles; let style = this.getStyles+'position: relative;';
if (this.imgHeight == 0 && !this.isLoaded) { if (this.imgHeight == 0 && !this.isLoaded) {
style += `height:${this.width}px;` style += `height:${this.width}px;`
} }
...@@ -232,4 +237,15 @@ ...@@ -232,4 +237,15 @@
display: block; display: block;
/* #endif */ /* #endif */
} }
.yr-video-duration{
position: absolute;
right:20rpx;
bottom: 10rpx;
height: 30rpx;
font-size: 22rpx;
font-weight: 500;
line-height: 30rpx;
color: #FFFFFF;
}
</style> </style>
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
</view> </view>
</DefineTemplate> </DefineTemplate>
<view class="top"> <view class="top yr-toolbox-style">
<template v-for="tool in data.tools.filter((item) => item.align === 'top')" :key="`group_${tool.key}`"> <template v-for="tool in data.tools.filter((item) => item.align === 'top')" :key="`group_${tool.key}`">
<ReuseTemplate :items="tool.buttons" /> <ReuseTemplate :items="tool.buttons" />
</template> </template>
......
...@@ -136,8 +136,16 @@ function handleDeviceClick(device) { ...@@ -136,8 +136,16 @@ function handleDeviceClick(device) {
<view class="device-title-group"> <view class="device-title-group">
<view class="device-title">{{ pageData.selectedDevice.deviceName }}</view> <view class="device-title">{{ pageData.selectedDevice.deviceName }}</view>
<view class="device-badges"> <view class="device-badges">
<text class="badge badge-green" v-if="pageData.selectedDevice.isOnline == 1">在线</text> <!-- <text class="badge badge-green" v-if="pageData.selectedDevice.isOnline == 1">在线</text>
<text class="badge badge-gray" v-else>离线</text> <text class="badge badge-gray" v-else>离线</text> -->
<view class="online-status online-green">
<view class="status-point"></view>
<text>在线</text>
</view>
<view class="online-status">
<view class="status-point"></view>
<text>离线</text>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -910,7 +918,7 @@ body { ...@@ -910,7 +918,7 @@ body {
.device-header { .device-header {
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 20rpx; gap: 20rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
} }
...@@ -932,7 +940,6 @@ body { ...@@ -932,7 +940,6 @@ body {
} }
.device-title-group { .device-title-group {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
} }
...@@ -946,7 +953,38 @@ body { ...@@ -946,7 +953,38 @@ body {
.device-badges { .device-badges {
display: flex; display: flex;
gap: 12rpx; align-items: center;
margin-left: 16rpx;
.online-status{
width: 84rpx;
height: 36rpx;
opacity: 1;
border-radius: 4rpx;
background: rgba(159, 174, 181, 0.1);
font-size: 24rpx;
font-weight: 400;
letter-spacing: 0px;
color: #9FAEB5;
text-align: center;
margin-right: 30rpx;
display: flex;
align-items: center;
justify-content: center;
.status-point{
width: 12rpx;
height: 12rpx;
background: #9FAEB5;
border-radius: 12rpx;
margin-right: 8rpx;
}
}
.online-green{
color: #43CF7C;
.status-point{
background: #43CF7C;
}
}
} }
.badge { .badge {
......
...@@ -189,7 +189,7 @@ function submit() { ...@@ -189,7 +189,7 @@ function submit() {
</view> </view>
<view class="submit-btn-box"> <view class="submit-btn-box">
<fui-button text="添加农场" bold radius="96rpx" @click="submit" /> <fui-button text="添加基地" bold radius="96rpx" @click="submit" />
</view> </view>
</fui-form> </fui-form>
</view> </view>
......
...@@ -38,7 +38,6 @@ ...@@ -38,7 +38,6 @@
} else { } else {
videoList.value = [...videoList.value, ...records] videoList.value = [...videoList.value, ...records]
} }
model.hasMore = records.length === model.params.pageSize model.hasMore = records.length === model.params.pageSize
model.params.pageNo++ model.params.pageNo++
} else { } else {
...@@ -121,6 +120,7 @@ ...@@ -121,6 +120,7 @@
:src="item.thumbnailPath" :src="item.thumbnailPath"
:imgWidth="item.videoWidth" :imgWidth="item.videoWidth"
:imgHeight="item.videoHeight" :imgHeight="item.videoHeight"
:videoDuration="item.totalTime"
@click="toPlay(item.id)" @click="toPlay(item.id)"
> >
<view class="flex flex-col justify-between pl-2 pr-2 pb-2"> <view class="flex flex-col justify-between pl-2 pr-2 pb-2">
......
...@@ -276,7 +276,7 @@ const [registerToolBoxWidget] = useToolBoxWidget({ ...@@ -276,7 +276,7 @@ const [registerToolBoxWidget] = useToolBoxWidget({
show: true, show: true,
expand: true, expand: true,
showExpandButton: false, showExpandButton: false,
top: 50, top: 10,
tools: [ tools: [
{ {
key: 'action', key: 'action',
...@@ -367,7 +367,17 @@ function onAddBaseClick() { ...@@ -367,7 +367,17 @@ function onAddBaseClick() {
// 点击添加基地按钮的回调函数 // 点击添加基地按钮的回调函数
Navigate.to(`/pages/jidiguanli/add?farmId=${model.id}`) Navigate.to(`/pages/jidiguanli/add?farmId=${model.id}`)
} }
function makePhoneCall(contactPhone){
uni.makePhoneCall({
phoneNumber: contactPhone,
success: function () {
console.log('拨打电话成功!');
},
fail: function () {
console.log('拨打电话失败!');
}
});
}
// 保留原有的导航栏按钮点击回调(如果有需要的话) // 保留原有的导航栏按钮点击回调(如果有需要的话)
onNavigationBarButtonTap((e) => { onNavigationBarButtonTap((e) => {
console.log(e) console.log(e)
...@@ -524,9 +534,7 @@ const toDevice = (device)=>{ ...@@ -524,9 +534,7 @@ const toDevice = (device)=>{
<view class="box-3-info-item justify-between"> <view class="box-3-info-item justify-between">
<view class="box-3-info-item-text-box"> <view class="box-3-info-item-text-box">
<text class="box-3-info-item-text1">种植: </text> <text class="box-3-info-item-text1">种植: </text>
<text class="box-3-info-item-text2">{{ <text class="box-3-info-item-text2">{{model.farmbaseInfo.growCrops_dictText}}</text>
model.farmbaseInfo.growCrops_dictText
}}</text>
</view> </view>
<view class="box-3-info-item-text-box"> <view class="box-3-info-item-text-box">
<text class="box-3-info-item-text1">预计产量: </text> <text class="box-3-info-item-text1">预计产量: </text>
...@@ -540,7 +548,7 @@ const toDevice = (device)=>{ ...@@ -540,7 +548,7 @@ const toDevice = (device)=>{
</view> </view>
<view class="box-3-info-item-text-box"> <view class="box-3-info-item-text-box">
<text class="box-3-info-item-text1">联系电话: </text> <text class="box-3-info-item-text1">联系电话: </text>
<text class="box-3-info-item-text2">{{ model.farmbaseInfo.contactPhone }}</text> <text class="box-3-info-item-text2 box-contact-phone" @click="makePhoneCall(model.farmbaseInfo.contactPhone)">{{ model.farmbaseInfo.contactPhone }}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -919,17 +927,20 @@ page { ...@@ -919,17 +927,20 @@ page {
.box-3-info-item-text-box { .box-3-info-item-text-box {
width: 50%; width: 50%;
.box-3-info-item-text1 { .box-3-info-item-text1 {
font-size: 26rpx; font-size: 28rpx;
color: #999999; color: #999999;
margin-right: 10rpx; margin-right: 10rpx;
} }
.box-3-info-item-text2 { .box-3-info-item-text2 {
font-size: 30rpx; font-size: 28rpx;
color: #333333; color: #333333;
} }
.box-contact-phone{
color: #2A82E4;
text-decoration: underline;
}
} }
} }
} }
......
...@@ -695,6 +695,7 @@ onHide(() => { ...@@ -695,6 +695,7 @@ onHide(() => {
:imgWidth="video.videoWidth" :imgWidth="video.videoWidth"
:imgHeight="video.videoHeight" :imgHeight="video.videoHeight"
:src="video.thumbnailPath" :src="video.thumbnailPath"
:videoDuration="video.totalTime"
@click="playVideo(index)" @click="playVideo(index)"
> >
<view class="flex flex-col justify-between pl-2 pr-2 pb-2"> <view class="flex flex-col justify-between pl-2 pr-2 pb-2">
......
...@@ -784,7 +784,7 @@ export default { ...@@ -784,7 +784,7 @@ export default {
<view v-if="pageData.videoListIsShow" 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 topGap="20" leftGap="20" rightGap="20" bottomGap="20">
<fui-waterfall-item :imgWidth="video.videoWidth" :imgHeight="video.videoHeight" v-for="(video, index) in pageData.agricultureClass.videoList" :key="index" <fui-waterfall-item :imgWidth="video.videoWidth" :imgHeight="video.videoHeight" :videoDuration="video.totalTime" v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"
:src="video.thumbnailPath" @click="playVideo(index)"> :src="video.thumbnailPath" @click="playVideo(index)">
<view class="flex flex-col justify-between pl-2 pr-2 pb-2"> <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="fontsize_28 mt-1 mb-2 font-13">{{ video.title }}</view>
...@@ -816,7 +816,7 @@ export default { ...@@ -816,7 +816,7 @@ export default {
<!-- <view class="codefun-flex-col section_13 !relative rounded-lg" style="margin-left: -28rpx;"> <!-- <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 topGap="20" leftGap="20" rightGap="20" bottomGap="20">
<fui-waterfall-item :imgWidth="video.videoWidth" :imgHeight="video.videoHeight" v-for="(video, index) in pageData.agricultureClass.videoList" :key="index" <fui-waterfall-item :imgWidth="video.videoWidth" :imgHeight="video.videoHeight" :videoDuration="video.totalTime" v-for="(video, index) in pageData.agricultureClass.videoList" :key="index"
:src="video.thumbnailPath" @click="playVideo(index)"> :src="video.thumbnailPath" @click="playVideo(index)">
<view class="flex flex-col justify-between pl-2 pr-2 pb-2"> <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="fontsize_28 mt-1 mb-2 font-13">{{ video.title }}</view>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论