feat: 1,星勤:信息发布模块—新增编辑图片/视频轮播页面UI布局2,星勤:信息发布模块—新增素材库UI布局3,星勤:信息发布模块—新增发布计划页面UI布局

src/pages/info-publish/edit-pic-video.vue

@@ -0,0 +1,161 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <view class="h-[calc(100vh-0px)] flex flex-col">
+    <TopNavigation title="编辑图片/视频轮播"></TopNavigation>
+    <scroll-view class="flex-1 box-border" scroll-y>
+      <view class="content-form">
+        <!-- 名称 -->
+        <view class="form-item">
+          <view class="form-label">名称</view>
+          <view class="form-value">
+            <input
+              type="text"
+              v-model="formData.name"
+              placeholder="请输入名称"
+              class="form-input"
+            />
+            <text v-if="formData.name" class="clear-icon" @click="clearName">×</text>
+          </view>
+        </view>
+
+        <!-- 屏幕方向 -->
+        <view class="form-item">
+          <view class="form-label">屏幕方向</view>
+          <view class="form-value">
+            <text>横屏</text>
+          </view>
+        </view>
+
+        <!-- 屏幕分辨率 -->
+        <view class="form-item">
+          <view class="form-label">屏幕分辨率</view>
+          <view class="form-value">
+            <text>1920*1080</text>
+          </view>
+        </view>
+
+        <!-- 内容类型 -->
+        <view class="form-item">
+          <view class="form-label">内容类型</view>
+          <view class="form-value">
+            <text>图片/视频轮播</text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部按钮 -->
+    <view class="footer">
+      <button class="next-btn" @click="handleNext">下一步</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  // 表单数据
+  const formData = ref({
+    name: '智慧屏节目202412260150523'
+  })
+
+  // 清除名称
+  const clearName = () => {
+    formData.value.name = ''
+  }
+
+  // 下一步按钮点击事件
+  const handleNext = () => {
+    // 实现下一步逻辑
+  }
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #f5f5f5;
+  }
+
+  .content-form {
+    margin: 16px;
+    background: #fff;
+    border-radius: 8px;
+  }
+
+  .form-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    border-bottom: 1px solid #f5f5f5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .form-label {
+    font-size: 15px;
+    color: #333;
+  }
+
+  .form-value {
+    display: flex;
+    flex: 1; // 添加这行，让表单值区域占据剩余空间
+    align-items: center;
+    justify-content: flex-end; // 添加这行，让内容靠右对齐
+
+    .form-input {
+      flex: 1; // 让输入框占据剩余空间
+      height: 20px; // 设置合适的高度
+      padding: 0; // 移除默认内边距
+      margin-left: 16px; // 与左侧标签保持间距
+      font-size: 14px;
+      line-height: 20px;
+      color: #333;
+      text-align: right; // 文本右对齐
+      background: transparent; // 透明背景
+      border: none; // 移除边框
+    }
+
+    .clear-icon {
+      flex-shrink: 0; // 防止图标被压缩
+      width: 16px;
+      height: 16px;
+      margin-left: 8px;
+      line-height: 16px;
+      color: #999;
+      text-align: center;
+      background: #eee;
+      border-radius: 50%;
+    }
+  }
+
+  .footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 16px;
+    background: #fff;
+    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+
+    .next-btn {
+      width: 100%;
+      height: 40px;
+      font-size: 14px;
+      line-height: 40px;
+      color: #fff;
+      background: #4080ff;
+      border: none;
+      border-radius: 4px;
+    }
+  }
+</style>

src/pages/info-publish/info-publish.vue

@@ -69,7 +69,7 @@
       title: '发布计划',
       description: '设置播放内容与时间规则同步到设备',
       icon: '/static/images/plan_icon.png',
-      path: '/pages/info-publish/plan'
+      path: '/pages/info-publish/release-plan'
     },
     {
       title: '公告管理',
@@ -87,7 +87,7 @@
     },
     {
       title: '屏幕控制',
-      icon: 'screen'
+      icon: 'home'
     }
   ])
 

src/pages/info-publish/material-library.vue

@@ -94,25 +94,25 @@
   // 素材列表数据
   const materialList = ref([
     {
-      icon: '/static/images/house_resource.png',
+      icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
       name: 'house_resource.png',
       id: 'HikMall_30013234',
       time: '2024-12-26 15:11:18'
     },
     {
-      icon: '/static/images/app_icon.png',
+      icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
       name: 'app_icon.png',
       id: 'HikMall_30013234',
       time: '2024-12-26 15:10:37'
     },
     {
-      icon: '/static/images/home.png',
+      icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
       name: 'home.png',
       id: 'HikMall_30013234',
       time: '2024-12-26 15:05:10'
     },
     {
-      icon: '/static/images/lock.jpg',
+      icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
       name: '锁通通 2.jpg',
       id: 'HikMall_30013234',
       time: '2024-12-26 15:05:10'

src/pages/info-publish/play-content-library.vue

@@ -89,6 +89,9 @@
 
   const handleEdit = () => {
     // 实现编辑逻辑
+    uni.navigateTo({
+      url: '/pages/info-publish/edit-pic-video'
+    })
   }
 
   const handleDelete = () => {

src/pages/info-publish/release-plan.vue

@@ -0,0 +1,138 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <view class="h-[calc(100vh-0px)] flex flex-col">
+    <TopNavigation title="发布计划"></TopNavigation>
+    <scroll-view class="flex-1 box-border" scroll-y>
+      <!-- 设备类型切换 -->
+      <view class="device-tabs">
+        <view
+          v-for="(tab, index) in deviceTabs"
+          :key="index"
+          class="tab-item"
+          :class="{ active: currentDeviceTab === index }"
+          @click="handleDeviceTabChange(index)"
+        >
+          <text>{{ tab.name }}</text>
+        </view>
+      </view>
+
+      <!-- 空状态展示 -->
+      <view class="empty-state" v-if="!hasData">
+        <image class="empty-icon" src="/static/images/empty-box.png" mode="aspectFit" />
+        <text class="empty-text">暂无数据</text>
+      </view>
+    </scroll-view>
+
+    <!-- 底部按钮组 -->
+    <view class="footer">
+      <button class="history-btn">下发记录</button>
+      <button class="add-btn">添加计划</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  // 设备类型标签
+  const deviceTabs = ref([{ name: '智慧屏' }, { name: '门禁' }])
+
+  // 当前选中的设备类型
+  const currentDeviceTab = ref(0)
+
+  // 是否有数据
+  const hasData = ref(false)
+
+  // 切换设备类型
+  const handleDeviceTabChange = (index: number) => {
+    currentDeviceTab.value = index
+  }
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #f5f5f5;
+  }
+
+  .device-tabs {
+    display: flex;
+    padding: 4px;
+    margin: 16px;
+    background: #fff;
+    border-radius: 8px;
+
+    .tab-item {
+      flex: 1;
+      padding: 8px 0;
+      font-size: 14px;
+      color: #666;
+      text-align: center;
+      border-radius: 4px;
+
+      &.active {
+        font-weight: 500;
+        color: #333;
+        background: #f5f5f5;
+      }
+    }
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 200px;
+
+    .empty-icon {
+      width: 120px;
+      height: 120px;
+      margin-bottom: 16px;
+    }
+
+    .empty-text {
+      font-size: 14px;
+      color: #999;
+    }
+  }
+
+  .footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    gap: 12px; // 按钮之间的间距
+    padding: 16px;
+    background: #fff;
+    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+
+    button {
+      height: 40px;
+      font-size: 14px;
+      line-height: 40px;
+      border: none;
+      border-radius: 4px;
+    }
+
+    .history-btn {
+      flex: 1;
+      color: #333;
+      background: #f5f5f5;
+    }
+
+    .add-btn {
+      flex: 1;
+      color: #fff;
+      background: #4080ff;
+    }
+  }
+</style>