Merge branch 'develop_daisy' into 'develop'
Develop daisy See merge request StarlockTeam/starwork-uniapp!13
This commit is contained in:
刘燕峰
commit
3f3d2b884c
@ -261,7 +261,8 @@
|
|||||||
{
|
{
|
||||||
id: 6093,
|
id: 6093,
|
||||||
icon: 'https://file.hikmall.com/prod/image/8ed90fc35e3840e782d73676efcc9a30.png',
|
icon: 'https://file.hikmall.com/prod/image/8ed90fc35e3840e782d73676efcc9a30.png',
|
||||||
name: '信息发布'
|
name: '信息发布',
|
||||||
|
url: '/pages/info-publish/info-publish'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
281
src/pages/info-publish/add-release-plan.vue
Normal file
281
src/pages/info-publish/add-release-plan.vue
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
<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="plan-form">
|
||||||
|
<!-- 计划名称 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">
|
||||||
|
<text class="required">*</text>
|
||||||
|
<text>计划名称</text>
|
||||||
|
</view>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="formData.name"
|
||||||
|
placeholder="智慧屏202501171038843"
|
||||||
|
class="form-input"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 计划描述 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">计划描述</view>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="formData.description"
|
||||||
|
placeholder="请输入"
|
||||||
|
class="form-input"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 播放规则 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">
|
||||||
|
<text class="required">*</text>
|
||||||
|
<text>播放规则</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-value" @click="handleSelectRule">
|
||||||
|
<text>每天循环播放</text>
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 播放时间与内容 -->
|
||||||
|
<view class="form-section">
|
||||||
|
<view class="section-header">
|
||||||
|
<text class="required">*</text>
|
||||||
|
<text>播放时间与内容</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="time-content-card">
|
||||||
|
<view class="time-row">
|
||||||
|
<text class="label">时段</text>
|
||||||
|
<text class="value">00:00– 23:59</text>
|
||||||
|
<text class="action-icon">▶</text>
|
||||||
|
<text class="delete-icon">🗑</text>
|
||||||
|
</view>
|
||||||
|
<view class="content-row">
|
||||||
|
<text class="label">内容</text>
|
||||||
|
<text class="value ellipsis">智慧屏节目2024...</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="add-time-btn" @click="handleAddTime">
|
||||||
|
<text class="plus-icon">+</text>
|
||||||
|
<text>添加时段</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 关联设备 -->
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="form-label">
|
||||||
|
<text class="required">*</text>
|
||||||
|
<text>关联设备</text>
|
||||||
|
</view>
|
||||||
|
<view class="form-value" @click="handleSelectDevice">
|
||||||
|
<text class="placeholder">请选择</text>
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="footer">
|
||||||
|
<button class="submit-btn" @click="handleSubmit">保存并发布</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = ref({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
rule: '每天循环播放',
|
||||||
|
timeSlots: [],
|
||||||
|
devices: []
|
||||||
|
})
|
||||||
|
|
||||||
|
// 选择播放规则
|
||||||
|
const handleSelectRule = () => {
|
||||||
|
// 实现规则选择逻辑
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加时段
|
||||||
|
const handleAddTime = () => {
|
||||||
|
// 实现添加时段逻辑
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择设备
|
||||||
|
const handleSelectDevice = () => {
|
||||||
|
// 实现设备选择逻辑
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交表单
|
||||||
|
const handleSubmit = () => {
|
||||||
|
// 实现表单提交逻辑
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan-form {
|
||||||
|
margin: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
.required {
|
||||||
|
margin-right: 4px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
.placeholder {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
margin-left: 8px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-section {
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
.required {
|
||||||
|
margin-right: 4px;
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-content-card {
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: #f5f7fa;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.time-row,
|
||||||
|
.content-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
flex: 1;
|
||||||
|
margin: 0 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-icon,
|
||||||
|
.delete-icon {
|
||||||
|
padding: 4px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-time-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #4080ff;
|
||||||
|
|
||||||
|
.plus-icon {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 16px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 40px;
|
||||||
|
color: #fff;
|
||||||
|
background: #4080ff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ellipsis {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -8,100 +8,85 @@
|
|||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<TopNavigation title="新增公告"></TopNavigation>
|
<view class="h-[calc(100vh-0px)] flex flex-col">
|
||||||
<div class="announce-notice">
|
<TopNavigation title="新增公告"></TopNavigation>
|
||||||
<!-- 表单内容 -->
|
<scroll-view class="flex-1 box-border" scroll-y>
|
||||||
<div class="form-content">
|
<view class="announce-notice">
|
||||||
<div class="form-item">
|
<!-- 表单内容 -->
|
||||||
<div class="label">
|
<div class="form-content">
|
||||||
<span class="required">*</span>
|
<div class="form-item">
|
||||||
公告标题
|
<div class="label">
|
||||||
</div>
|
<span class="required">*</span>
|
||||||
<input
|
公告标题
|
||||||
type="text"
|
</div>
|
||||||
v-model="formData.title"
|
<input
|
||||||
placeholder="请输入公告标题"
|
type="text"
|
||||||
class="input-field"
|
v-model="formData.title"
|
||||||
/>
|
placeholder="请输入公告标题"
|
||||||
</div>
|
class="input-field"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="form-item">
|
<div class="form-item">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<span class="required">*</span>
|
<span class="required">*</span>
|
||||||
公告正文
|
公告正文
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
v-model="formData.content"
|
||||||
|
placeholder="请输入要发布的内容"
|
||||||
|
class="textarea-field"
|
||||||
|
@input="handleContentInput"
|
||||||
|
></textarea>
|
||||||
|
<div class="word-count">{{ contentLength }}/2000</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<textarea
|
|
||||||
v-model="formData.content"
|
|
||||||
placeholder="请输入要发布的内容"
|
|
||||||
class="textarea-field"
|
|
||||||
@input="handleContentInput"
|
|
||||||
></textarea>
|
|
||||||
<div class="word-count">{{ contentLength }}/2000</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 底部按钮 -->
|
<!-- 底部按钮 -->
|
||||||
<view class="bottom-btns">
|
<view class="bottom-btns">
|
||||||
<button class="nextstep-btn" @click="handleNextStep">下一步</button>
|
<button class="nextstep-btn" @click="handleNextStep">下一步</button>
|
||||||
</view>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup lang="ts">
|
||||||
export default {
|
import { ref, computed } from 'vue'
|
||||||
data() {
|
|
||||||
return {
|
// 表单数据
|
||||||
formData: {
|
const formData = ref({
|
||||||
title: '',
|
title: '',
|
||||||
content: ''
|
content: ''
|
||||||
}
|
})
|
||||||
}
|
|
||||||
},
|
// 计算字数
|
||||||
computed: {
|
const contentLength = computed(() => formData.value.content.length)
|
||||||
contentLength() {
|
|
||||||
return this.formData.content.length
|
// 处理内容输入
|
||||||
}
|
const handleContentInput = () => {
|
||||||
},
|
if (formData.value.content.length > 2000) {
|
||||||
methods: {
|
formData.value.content = formData.value.content.slice(0, 2000)
|
||||||
goBack() {
|
|
||||||
this.$router.back()
|
|
||||||
},
|
|
||||||
handleContentInput() {
|
|
||||||
if (this.formData.content.length > 2000) {
|
|
||||||
this.formData.content = this.formData.content.slice(0, 2000)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleNextStep() {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/info-publish/basic-info'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 下一步按钮点击处理
|
||||||
|
const handleNextStep = () => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/info-publish/basic-info'
|
||||||
|
})
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
.announce-notice {
|
.announce-notice {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100vh;
|
min-height: 100%;
|
||||||
background: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 44px;
|
|
||||||
padding: 0 15px;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-content {
|
.form-content {
|
||||||
@ -117,6 +102,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
@ -156,19 +143,17 @@
|
|||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
.nextstep-btn {
|
.nextstep-btn {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: center;
|
color: #fff;
|
||||||
border-radius: 4px;
|
text-align: center;
|
||||||
}
|
background-color: #007aff;
|
||||||
|
border: none;
|
||||||
.nextstep-btn {
|
border-radius: 4px;
|
||||||
color: #fff;
|
|
||||||
background-color: #007aff;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -8,98 +8,100 @@
|
|||||||
</route>
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<TopNavigation title="公告管理"></TopNavigation>
|
<view class="h-[calc(100vh-0px)] flex flex-col">
|
||||||
<div class="basic-info">
|
<TopNavigation title="公告管理"></TopNavigation>
|
||||||
<!-- 基本信息区域 -->
|
<scroll-view class="flex-1 box-border" scroll-y>
|
||||||
<div class="content">
|
<view class="basic-info">
|
||||||
<div class="section-title">基本信息</div>
|
<!-- 基本信息区域 -->
|
||||||
|
<view class="content">
|
||||||
|
<view class="section-title">基本信息</view>
|
||||||
|
|
||||||
<!-- 发布对象 -->
|
<!-- 发布对象 -->
|
||||||
<div class="form-item" @click="selectTarget">
|
<view class="form-item" @click="selectTarget">
|
||||||
<div class="label">
|
<view class="label">
|
||||||
<span class="required">*</span>
|
<text class="required">*</text>
|
||||||
<span>发布对象</span>
|
<text>发布对象</text>
|
||||||
</div>
|
</view>
|
||||||
<div class="value">
|
<view class="value">
|
||||||
<span class="placeholder">请选择</span>
|
<text class="placeholder">请选择</text>
|
||||||
<i class="arrow">></i>
|
<text class="arrow">></text>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<!-- 发布类型 -->
|
<!-- 发布类型 -->
|
||||||
<div class="form-item" @click="showTimePicker = true">
|
<view class="form-item" @click="handleShowTimePicker">
|
||||||
<div class="label">
|
<view class="label">
|
||||||
<span class="required">*</span>
|
<text class="required">*</text>
|
||||||
<span>发布时间</span>
|
<text>发布时间</text>
|
||||||
</div>
|
</view>
|
||||||
<div class="value">
|
<view class="value">
|
||||||
<span>{{ publishType }}</span>
|
<text>{{ publishType }}</text>
|
||||||
<i class="arrow">></i>
|
<text class="arrow">></text>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<!-- 发布日期 - 仅在定时发布时显示 -->
|
<!-- 发布日期 - 仅在定时发布时显示 -->
|
||||||
<div class="form-item" v-if="isScheduled" @click="showDatePicker = true">
|
<view class="form-item" v-if="isScheduled" @click="showDatePicker = true">
|
||||||
<div class="label">
|
<view class="label">
|
||||||
<span class="required">*</span>
|
<text class="required">*</text>
|
||||||
<span>发布日期</span>
|
<text>发布日期</text>
|
||||||
</div>
|
</view>
|
||||||
<div class="value">
|
<view class="value">
|
||||||
<span>{{ publishDate }}</span>
|
<text>{{ publishDate }}</text>
|
||||||
<i class="arrow">></i>
|
<text class="arrow">></text>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<!-- 发布时间 - 仅在定时发布时显示 -->
|
<!-- 发布时间 - 仅在定时发布时显示 -->
|
||||||
<div class="form-item" v-if="isScheduled" @click="showTimePickerDetail = true">
|
<view class="form-item" v-if="isScheduled" @click="showTimePickerDetail = true">
|
||||||
<div class="label">
|
<view class="label">
|
||||||
<span class="required">*</span>
|
<text class="required">*</text>
|
||||||
<span>发布时间</span>
|
<text>发布时间</text>
|
||||||
</div>
|
</view>
|
||||||
<div class="value">
|
<view class="value">
|
||||||
<span>{{ publishTimeDetail }}</span>
|
<text>{{ publishTimeDetail }}</text>
|
||||||
<i class="arrow">></i>
|
<text class="arrow">></text>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
|
||||||
<!-- 底部按钮 -->
|
<!-- 底部按钮 -->
|
||||||
<div class="footer">
|
<view class="footer">
|
||||||
<button class="draft-btn" @click="saveDraft">保存为草稿</button>
|
<button class="draft-btn" @click="saveDraft">保存为草稿</button>
|
||||||
<button class="publish-btn" @click="publish">发布公告</button>
|
<button class="publish-btn" @click="publish">发布公告</button>
|
||||||
</div>
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
<!-- 发布类型选择弹窗 -->
|
<!-- 发布类型选择弹窗 -->
|
||||||
<transition name="slide-up">
|
<view class="popup" v-if="showTimePicker">
|
||||||
<div class="popup" v-if="showTimePicker">
|
<view class="mask" @click="handleCloseTimePicker"></view>
|
||||||
<div class="mask" @click="hideTimePicker"></div>
|
<view class="popup-content">
|
||||||
<div class="popup-content">
|
<view class="popup-header">
|
||||||
<div class="popup-header">
|
<view class="popup-title">请选择发布时间</view>
|
||||||
<div class="popup-title">请选择发布时间</div>
|
<view class="popup-close" @click="handleCloseTimePicker">×</view>
|
||||||
<div class="popup-close" @click="showTimePicker = false">×</div>
|
</view>
|
||||||
</div>
|
<view class="popup-body">
|
||||||
<div class="popup-body">
|
<view
|
||||||
<div
|
class="time-option"
|
||||||
class="time-option"
|
:class="{ active: !isScheduled }"
|
||||||
:class="{ active: !isScheduled }"
|
@click="selectPublishType('now')"
|
||||||
@click="selectPublishType('now')"
|
>
|
||||||
>
|
<text>立即发布</text>
|
||||||
立即发布
|
<text class="check-icon" v-if="!isScheduled">✓</text>
|
||||||
<i class="check-icon" v-if="!isScheduled">✓</i>
|
</view>
|
||||||
</div>
|
<view
|
||||||
<div
|
class="time-option"
|
||||||
class="time-option"
|
:class="{ active: isScheduled }"
|
||||||
:class="{ active: isScheduled }"
|
@click="selectPublishType('schedule')"
|
||||||
@click="selectPublishType('schedule')"
|
>
|
||||||
>
|
<text>定时发布</text>
|
||||||
定时发布
|
<text class="check-icon" v-if="isScheduled">✓</text>
|
||||||
<i class="check-icon" v-if="isScheduled">✓</i>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@ -155,6 +157,14 @@
|
|||||||
const publish = () => {
|
const publish = () => {
|
||||||
// 发布公告逻辑
|
// 发布公告逻辑
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleShowTimePicker = () => {
|
||||||
|
showTimePicker.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCloseTimePicker = () => {
|
||||||
|
showTimePicker.value = false
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.basic-info {
|
.basic-info {
|
||||||
|
|||||||
161
src/pages/info-publish/edit-pic-video.vue
Normal file
161
src/pages/info-publish/edit-pic-video.vue
Normal file
@ -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>
|
||||||
@ -1,7 +1,206 @@
|
|||||||
|
<route lang="json5" type="page">
|
||||||
|
{
|
||||||
|
layout: 'default',
|
||||||
|
style: {
|
||||||
|
navigationStyle: 'custom'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<view></view>
|
<view class="h-[calc(100vh-50px)] flex flex-col">
|
||||||
|
<TopNavigation title="信息发布"></TopNavigation>
|
||||||
|
<scroll-view class="flex-1 box-border" scroll-y>
|
||||||
|
<!-- 使用说明卡片 -->
|
||||||
|
<view class="instruction-card">
|
||||||
|
<view class="card-content">
|
||||||
|
<view class="title">信息发布使用说明</view>
|
||||||
|
<view class="subtitle">快速上手信息发布</view>
|
||||||
|
<view class="detail-btn">
|
||||||
|
看详情
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<image class="card-icon" src="@/static/images/publish_icon.png" mode="aspectFit" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 功能列表 -->
|
||||||
|
<view class="function-list">
|
||||||
|
<view
|
||||||
|
class="function-item"
|
||||||
|
v-for="(item, index) in functionList"
|
||||||
|
:key="index"
|
||||||
|
@click="navigateTo(item.path)"
|
||||||
|
>
|
||||||
|
<view class="item-left">
|
||||||
|
<image class="item-icon" :src="item.icon" mode="aspectFit" />
|
||||||
|
<view class="item-info">
|
||||||
|
<view class="item-title">{{ item.title }}</view>
|
||||||
|
<view class="item-desc">{{ item.description }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
<CustomTabBar :list="tabList" :default-index="0" @change="handleTabChange"></CustomTabBar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts"></script>
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { TabBarItem } from '@/typings'
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
// 功能列表数据
|
||||||
|
const functionList = ref([
|
||||||
|
{
|
||||||
|
title: '素材库',
|
||||||
|
description: '管理图片、音频、视频等素材',
|
||||||
|
icon: '/static/images/material_icon.png',
|
||||||
|
path: '/pages/info-publish/material-library'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '播放内容库',
|
||||||
|
description: '将文字、图片、视频素材组合成节目',
|
||||||
|
icon: '/static/images/content_icon.png',
|
||||||
|
path: '/pages/info-publish/play-content-library'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '发布计划',
|
||||||
|
description: '设置播放内容与时间规则同步到设备',
|
||||||
|
icon: '/static/images/plan_icon.png',
|
||||||
|
path: '/pages/info-publish/release-plan'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '公告管理',
|
||||||
|
description: '发布手机公告给团队成员',
|
||||||
|
icon: '/static/images/notice_icon.png',
|
||||||
|
path: '/pages/info-publish/notice-manage'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// 底部标签栏配置
|
||||||
|
const tabList = ref<Array<TabBarItem>>([
|
||||||
|
{
|
||||||
|
title: '首页',
|
||||||
|
icon: 'home'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '屏幕控制',
|
||||||
|
icon: 'home'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// 页面跳转
|
||||||
|
const navigateTo = (path: string) => {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: path
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标签切换处理
|
||||||
|
const handleTabChange = (data: { value: number }) => {
|
||||||
|
// 处理标签切换逻辑
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #f6f8fc;
|
||||||
|
}
|
||||||
|
/* 通用箭头样式 - 放在最前面 */
|
||||||
|
.arrow {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
/* 说明卡片样式 */
|
||||||
|
.instruction-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 16px;
|
||||||
|
color: #fff;
|
||||||
|
background: #4080ff;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 12px;
|
||||||
|
margin-top: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 16px;
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
color: #fff; /* 覆盖通用箭头样式 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 功能列表样式 */
|
||||||
|
.function-list {
|
||||||
|
margin: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.function-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 16px;
|
||||||
|
border-bottom: 1px solid #f5f5f5;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-icon {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-info {
|
||||||
|
.item-title {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-desc {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
309
src/pages/info-publish/material-library.vue
Normal file
309
src/pages/info-publish/material-library.vue
Normal file
@ -0,0 +1,309 @@
|
|||||||
|
<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="storage-card">
|
||||||
|
<view class="storage-title">素材存储容量</view>
|
||||||
|
<view class="storage-info">
|
||||||
|
<text class="used-text">已用 0.00%</text>
|
||||||
|
<text class="remain-text">剩余19.99 G/ 20.00 G</text>
|
||||||
|
</view>
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view class="progress" :style="{ width: usedPercentage + '%' }"></view>
|
||||||
|
</view>
|
||||||
|
<view class="storage-details">
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="size image">833.67 K</text>
|
||||||
|
<text class="type">图片</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="size audio">0 B</text>
|
||||||
|
<text class="type">音频</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail-item">
|
||||||
|
<text class="size video">0 B</text>
|
||||||
|
<text class="type">视频</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 素材类型标签 -->
|
||||||
|
<view class="material-tabs">
|
||||||
|
<view
|
||||||
|
v-for="(tab, index) in tabs"
|
||||||
|
:key="index"
|
||||||
|
class="tab-item"
|
||||||
|
:class="{ active: currentTab === index }"
|
||||||
|
@click="handleTabChange(index)"
|
||||||
|
>
|
||||||
|
<text>{{ tab.name }}({{ tab.count }})</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 素材列表 -->
|
||||||
|
<view class="material-list">
|
||||||
|
<view v-for="(item, index) in materialList" :key="index" class="material-item">
|
||||||
|
<image class="material-icon" :src="item.icon" mode="aspectFill" />
|
||||||
|
<view class="material-info">
|
||||||
|
<text class="material-name">{{ item.name }}</text>
|
||||||
|
<text class="material-id">{{ item.id }}</text>
|
||||||
|
<text class="material-time">{{ item.time }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="right-wrapper">
|
||||||
|
<text class="status-tag">已通过</text>
|
||||||
|
<text class="arrow">></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="footer">
|
||||||
|
<button class="upload-btn">上传列表</button>
|
||||||
|
<button class="add-btn">添加图片素材</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
// 使用率
|
||||||
|
const usedPercentage = ref(0.0)
|
||||||
|
|
||||||
|
// 标签页配置
|
||||||
|
const tabs = ref([
|
||||||
|
{ name: '图片', count: 4 },
|
||||||
|
{ name: '音频', count: 0 },
|
||||||
|
{ name: '视频', count: 0 }
|
||||||
|
])
|
||||||
|
|
||||||
|
// 当前选中的标签
|
||||||
|
const currentTab = ref(0)
|
||||||
|
|
||||||
|
// 素材列表数据
|
||||||
|
const materialList = ref([
|
||||||
|
{
|
||||||
|
icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
|
||||||
|
name: 'house_resource.png',
|
||||||
|
id: 'HikMall_30013234',
|
||||||
|
time: '2024-12-26 15:11:18'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
|
||||||
|
name: 'app_icon.png',
|
||||||
|
id: 'HikMall_30013234',
|
||||||
|
time: '2024-12-26 15:10:37'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
|
||||||
|
name: 'home.png',
|
||||||
|
id: 'HikMall_30013234',
|
||||||
|
time: '2024-12-26 15:05:10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: 'https://file.hikmall.com/prod/image/885eb6ac104e4a76941e67eb738142ec.png',
|
||||||
|
name: '锁通通 2.jpg',
|
||||||
|
id: 'HikMall_30013234',
|
||||||
|
time: '2024-12-26 15:05:10'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// 切换标签
|
||||||
|
const handleTabChange = (index: number) => {
|
||||||
|
currentTab.value = index
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-card {
|
||||||
|
padding: 20px;
|
||||||
|
margin: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
.storage-title {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 4px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
background: #f0f0f0;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 100%;
|
||||||
|
background: #4080ff;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.storage-details {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.size {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&.image {
|
||||||
|
color: #4080ff;
|
||||||
|
}
|
||||||
|
&.audio {
|
||||||
|
color: #00c1d4;
|
||||||
|
}
|
||||||
|
&.video {
|
||||||
|
color: #ffb100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.type {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-tabs {
|
||||||
|
display: flex;
|
||||||
|
padding: 0 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
position: relative;
|
||||||
|
padding: 8px 0;
|
||||||
|
margin-right: 24px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
content: '';
|
||||||
|
background: #4080ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-list {
|
||||||
|
padding: 0 16px;
|
||||||
|
|
||||||
|
.material-item {
|
||||||
|
position: relative; // 添加相对定位
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
margin-right: 12px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-info {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.material-name {
|
||||||
|
margin-bottom: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.material-id,
|
||||||
|
.material-time {
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag {
|
||||||
|
position: absolute; // 添加绝对定位
|
||||||
|
top: 0; // 距离顶部 8px
|
||||||
|
right: 0; // 距离右侧 16px
|
||||||
|
padding: 2px 6px; // 添加内边距
|
||||||
|
font-size: 12px;
|
||||||
|
color: #52c41a;
|
||||||
|
background-color: rgba(82, 196, 26, 0.1); // 添加浅绿色背景
|
||||||
|
border-radius: 2px; // 添加圆角
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
margin-top: 24px; // 向下偏移以对齐底部
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
padding: 10px 16px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
button {
|
||||||
|
flex: 1;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&.upload-btn {
|
||||||
|
margin-right: 12px;
|
||||||
|
color: #333;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.add-btn {
|
||||||
|
color: #fff;
|
||||||
|
background: #4080ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
235
src/pages/info-publish/play-content-library.vue
Normal file
235
src/pages/info-publish/play-content-library.vue
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
<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="action-btn">
|
||||||
|
<text>图片/视频轮播</text>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
<!-- 内容卡片 -->
|
||||||
|
<view class="content-card">
|
||||||
|
<view class="card-header">
|
||||||
|
<view class="content-title">智慧屏节目202412260150523</view>
|
||||||
|
<view class="content-type">图片/视频轮播</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="content-info">
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="label">分辨率</text>
|
||||||
|
<text class="value">1920*1080</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="label">更新人员</text>
|
||||||
|
<text class="value">HikMall_30013234</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item">
|
||||||
|
<text class="label">更新时间</text>
|
||||||
|
<text class="value">2024-12-26 15:05:31</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 操作按钮组 -->
|
||||||
|
<view class="action-group">
|
||||||
|
<button class="action-button" @click="handlePreview">预览</button>
|
||||||
|
<button class="action-button" @click="handleEdit">编辑</button>
|
||||||
|
<button class="action-button" @click="handleDelete">删除</button>
|
||||||
|
<button class="action-button" @click="handlePublish">发布</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="footer">
|
||||||
|
<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 handleDeviceTabChange = (index: number) => {
|
||||||
|
currentDeviceTab.value = index
|
||||||
|
}
|
||||||
|
|
||||||
|
// 操作按钮事件处理
|
||||||
|
const handlePreview = () => {
|
||||||
|
// 实现预览逻辑
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = () => {
|
||||||
|
// 实现编辑逻辑
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/info-publish/edit-pic-video'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
// 实现删除逻辑
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlePublish = () => {
|
||||||
|
// 实现发布逻辑
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/info-publish/add-release-plan'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-tabs {
|
||||||
|
display: flex;
|
||||||
|
padding: 8px 16px;
|
||||||
|
margin: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.tab-item {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
background: #4080ff;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-card {
|
||||||
|
padding: 16px;
|
||||||
|
margin: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-title {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 12px; // 为右侧标识留出空间
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-type {
|
||||||
|
padding: 2px 8px;
|
||||||
|
margin-top: 0px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4080ff;
|
||||||
|
white-space: nowrap;
|
||||||
|
background: rgba(64, 128, 255, 0.1);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.info-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
flex: 1;
|
||||||
|
height: 32px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 32px;
|
||||||
|
color: #4080ff;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #4080ff;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 16px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 40px;
|
||||||
|
color: #fff;
|
||||||
|
background: #4080ff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
138
src/pages/info-publish/release-plan.vue
Normal file
138
src/pages/info-publish/release-plan.vue
Normal file
@ -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>
|
||||||
BIN
src/static/images/content_icon.png
Normal file
BIN
src/static/images/content_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src/static/images/icon_publish_control_grey.png
Normal file
BIN
src/static/images/icon_publish_control_grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/static/images/icon_publish_home_blue.png
Normal file
BIN
src/static/images/icon_publish_home_blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/static/images/material_icon.png
Normal file
BIN
src/static/images/material_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
src/static/images/notice_icon.png
Normal file
BIN
src/static/images/notice_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
BIN
src/static/images/plan_icon.png
Normal file
BIN
src/static/images/plan_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
src/static/images/publish_icon.png
Normal file
BIN
src/static/images/publish_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Loading…
x
Reference in New Issue
Block a user