视频管理页面-静态

xiangpei

2025-06-04 bd3a7fe563cd5590109ae68d27ae747c1556f51e

视频管理页面-静态

 api/video.js

@@ -130,3 +130,17 @@
    data: data
  });
}


/**
 * 获取视频详情
 * 
 * @param params
 */
 export function getVideoDetail(id) {
  return http.request({
    url: "/lmk/video/wx/detail/" + id,
    method: Method.GET,
    needToken: true
  });
}

 components/dropdown-menu.vue

New file
@@ -0,0 +1,204 @@
<template>
  <view class="dropdown-container" :style="{ '--theme-color': themeColor }">
    <!-- 触发按钮 -->
    <view class="dropdown-trigger" @click="toggleDropdown">
      <uni-icons type="more-filled" size="20" color="#666"></uni-icons>
      <view class="dropdown-icon" :class="{ 'rotate': isOpen }">
        <uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
      </view>
    </view>
    
    <!-- 下拉菜单 -->
    <view 
      class="dropdown-menu" 
      :class="[placementClass]"
      v-if="isOpen" 
      @click.stop
    >
      <scroll-view scroll-y class="dropdown-scroll" :style="{ maxHeight: maxHeight + 'px' }">
        <view 
          v-for="(item, index) in options" 
          :key="index" 
          class="dropdown-item"
          @click="selectItem(item)"
        >
          <text>{{ item[labelKey] }}</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 遮罩层 -->
    <view 
      class="dropdown-mask" 
      v-if="isOpen" 
      @click="closeDropdown"
    ></view>
  </view>
</template>

<script>
export default {
  name: 'DropdownMenu',
  props: {
    // 选项列表
    options: {
      type: Array,
      default: () => []
    },
    // 选项对象中显示文本的key
    labelKey: {
      type: String,
      default: 'label'
    },
    // 选项对象中值的key
    valueKey: {
      type: String,
      default: 'command'
    },
    // 主题颜色
    themeColor: {
      type: String,
      default: '#409EFF'
    },
    // 下拉菜单最大高度
    maxHeight: {
      type: Number,
      default: 300
    },
    // 菜单弹出位置（top/bottom）
    placement: {
      type: String,
      default: 'bottom',
      validator: (value) => ['top', 'bottom'].includes(value)
    }
  },
  data() {
    return {
      isOpen: false,
      selectedItem: null
    }
  },
  computed: {
    placementClass() {
      return `placement-${this.placement}`;
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
      if (this.isOpen) {
        this.$emit('open')
      } else {
        this.$emit('close')
      }
    },
    closeDropdown() {
      this.isOpen = false
      this.$emit('close')
    },
    selectItem(item) {
      this.selectedItem = item
      this.closeDropdown()
      
      // 根据配置返回整个对象或value值
      const emitValue = typeof item === 'object' ? item[this.valueKey] : item
      this.$emit('input', emitValue)
      this.$emit('change', emitValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.dropdown-container {
  position: relative;
  display: inline-block;
  z-index: 10;
}

.dropdown-trigger {
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 8rpx;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
  
  &:active {
    opacity: 0.8;
  }
}

.dropdown-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-icon {
  transition: transform 0.3s;
  margin-left: 10rpx;
  
  &.rotate {
    transform: rotate(180deg);
  }
}

.dropdown-menu {
  position: absolute;
  left: 0;
  display: inline-block;
  white-space: nowrap;
  background-color: #fff;
  border: 1rpx solid #EBEEF5;
  border-radius: 8rpx;
  // box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);
  z-index: 100;
  overflow: hidden;
  
  &.placement-bottom {
    top: 80rpx;
  }
  
  &.placement-top {
    bottom: 80rpx;
  }
}

.dropdown-scroll {
  width: 100%;
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 28rpx;
  color: #606266;
  
  &:active {
    background-color: #f5f7fa;
  }
  
  &.active {
    color: var(--theme-color);
    font-weight: bold;
  }
}

.dropdown-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 99;
}
</style>

 config/api.js

@@ -4,12 +4,9 @@
 */
// 开发环境
const dev = {
  // im: "http://192.168.0.4:8885",
  // common: "http://192.168.0.4:8890",
  // buyer: "http://192.168.0.4:8888",
  im: "http://127.0.0.1:8885",
  common: "http://127.0.0.1:8890",
  buyer: "http://127.0.0.1:8888",
  im: "http://192.168.0.4:8885",
  common: "http://192.168.0.4:8890",
  buyer: "http://192.168.0.4:8888",
  // common: "http://192.168.0.113:8890",
  // buyer: "http://192.168.0.113:8888",
  // im: "http://192.168.0.113:8885",

 pages.json

@@ -820,6 +820,13 @@
                    {
                        "navigationBarTitleText" : "主页信息修改"
                    }
                },
                {
                    "path" : "video-edit",
                    "style" : 
                    {
                        "navigationBarTitleText" : "视频编辑"
                    }
                }
            ]
        },

 pages/tabbar/video/video.vue

@@ -207,6 +207,7 @@
      formData: {
        id: '',
        title: '',
        cover: '',
        videoFileKey: '',
        videoDuration: 0,
        videoFit: 'cover',
@@ -519,6 +520,7 @@
                id: '',
                title: '',
                videoFileKey: '',
                cover: '',
                videoFit: 'cover',
                videoDuration: 0,
                goodsId: '',

 pages/video/home-page.vue

@@ -61,23 +61,28 @@
        
        <!-- 视频列表 -->
        <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'works' && videoList.length > 0">
            <view class="video-container">
                <view
                  class="video-item" 
                  v-for="(item, index) in videoList" 
                  :key="item.id"
                  @click="playAuthorVideo(index)"
                >
                  <image class="video-cover" :src="item.coverUrl" mode="aspectFill"></image>
                  <image class="video-cover" @click="playAuthorVideo(index)" :src="item.coverUrl" mode="aspectFill"></image>
                  <view class="video-info">
                    <view class="video-stats">
                      <view class="stat">
                        <uni-icons type="heart" size="16" color="#fff"></uni-icons>
                        <text>{{item.collectNum}}</text>
                        <view class="more-op">
                            <dropdown-menu
                            :options="item.options"
                            placement="top"
                            theme-color="#07C160"
                            @change="handleChange"
                            ></dropdown-menu>
                        </view>
                      </view>
                    </view>
                  </view>
                </view> 
            </view>
        </scroll-view>
        <scroll-view class="video-list" scroll-y :show-scrollbar="false" @scrolltolower="getPage" v-show="currentTab === 'likes' && collectVideoList.length > 0">
@@ -115,11 +120,19 @@
</template>

<script>
import DropdownMenu from '@/components/dropdown-menu.vue'

import {getAuthorInfo, getAuthorVideoPage, getAuthorCollectVideoPage} from '@/api/user.js'
import {subscribe, unSubscribe} from '@/api/video.js'
export default {
  components: {DropdownMenu},
  data() {
    return {
        options: [
                { command: 1, label: '北京' },
                { command: 2, label: '上海' },
                { command: 3, label: '广州' }
              ],
      currentTab: 'works', // works: 作品, likes: 喜欢
      authorId: '',
      userInfo: {
@@ -159,6 +172,9 @@
    this.getAuthorVideoPage();
  },
  methods: {
      handleChange(value) {
            console.log('选中值:', value)
          },
    getPage() {
        if(this.currentTab === 'works') {
            if(this.nomoreVideo) {
@@ -465,12 +481,15 @@
}

.video-info {
  display: flex;
  height: 60rpx;
  align-items: center;
  font-size: 24rpx;
  width: 100%;
  padding-right: 20rpx;
  box-sizing: border-box;
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  right: 20rpx;
  color: #fff;
  font-size: 24rpx;
}

.video-title {
@@ -484,17 +503,25 @@

.video-stats {
  display: flex;
  width: 100%;
}

.stat {
  display: flex;
  width: 100%;
  align-items: center;
  margin-right: 20rpx;
  text-shadow: 0 0 5rpx rgba(0, 0, 0, 0.5);
  position: relative;
}

.more-op {
    position: absolute;
    right: 0;
}

.stat text {
  margin-left: 5rpx;
  color: #fff;
  font-size: 14px;
}

.empty-state {

 pages/video/video-edit.vue

New file
@@ -0,0 +1,788 @@
<template>
  <view class="publish-container">
    <!-- 视频上传区域 -->
    <view class="upload-section">
      <view class="upload-btn" @click="chooseVideo" v-if="!videoInfo.url">
        <u-icon name="plus" size="40" color="#999"></u-icon>
        <text class="upload-text">点击上传视频</text>
        <text class="upload-tips">支持MP4格式，最长60秒</text>
      </view>
      
      <view class="video-preview" v-else>
        <video 
          :src="videoInfo.url" 
          :object-fit="formData.videoFit"
          class="video-player"
          :poster="videoInfo.cover || ''"
        ></video>
        <view class="progress-box">
            <progress style="width: 100%;" :percent="videoUploadProgress" active-mode="forwards" show-info stroke-width="6" :active="true" active-color="#ff573e" />
        </view>
        <view class="video-actions">
          <u-button type="error" size="mini" @click="reUpload">重新上传</u-button>
          <u-button type="primary" size="mini" @click="chooseCover" v-if="videoInfo.url">{{formData.cover ? '更换封面' : '请选择封面'}}</u-button>
        </view>
      </view>
    </view>
    
    <!-- 视频信息表单 -->
    <view class="form-section">
      <u-form :model="formData" ref="formRef" labelWidth="80">
        <!-- 标题输入 -->
        <u-form-item label="标题" prop="title" borderBottom>
          <u-input 
            v-model="formData.title" 
            placeholder="请输入视频标题,20字以内"
            maxlength="20"
            show-word-limit
            clearable
          />
        </u-form-item>
        
        <!-- 话题输入 -->
        <u-form-item label="话题" prop="tags" borderBottom>
          <view class="tags-input-container">
            <u-input 
              v-model="tagInput" 
              placeholder="输入话题，回车确认"
              clearable
              @confirm="addTag"
              @blur="addTag"
              @input="searchTags"
            ></u-input>
            <!-- 已选话题展示 -->
            <view class="tags-display" v-if="formData.tags.length > 0">
              <my-tag 
                v-for="(tag, index) in formData.tags"
                :key="index"
                :text="tag.tagName"
                :index="index"
                type="success"
                @close="removeTag(index)"
              />
            </view>
            <text class="tags-count" v-if="formData.tags.length > 0">
              已选 {{ formData.tags.length }}/5
            </text>
          </view>
          <!-- 话题推荐 -->
          <view class="hot-topics" v-if="showTopicRecommendations">
            <text class="section-title">{{ tagInput ? '推荐话题' : '热门话题' }}</text>
            <view class="topic-list">
              <my-tag 
                v-for="(tag, index) in recommendedTags"
                :key="index"
                :text="tag.tagName"
                  :index="index"
                type="success"
                :closeable="false"
                @click="selectTopic(index)"
              />
            </view>
          </view>
        </u-form-item>
		
        
        <!-- 商品链接 -->
        <u-form-item label="商品" prop="goodsId" borderBottom>
          <view class="goods-link-container">
            <u-input  
              placeholder="可选择推荐商品"
              clearable
              v-if="!selectedGoods"
              @click="chooseGoods"
              disabled
            >
              <u-icon 
                slot="right" 
                name="search" 
                size="24" 
                @click="chooseGoods"
              ></u-icon>
            </u-input>
            <view class="goods-preview" v-if="selectedGoods">
              <image :src="selectedGoods.image" class="goods-image"></image>
              <view class="goods-info">
                <text class="goods-name">{{ selectedGoods.name }}</text>
                <text class="goods-price">¥{{ selectedGoods.price }}</text>
              </view>
              <u-icon 
                name="close" 
                size="20" 
                @click="clearGoods"
              ></u-icon>
            </view>
          </view>
        </u-form-item>
      </u-form>
    </view>
    
    <!-- 发布按钮 -->
    <view class="publish-btn">
      <u-button 
        type="primary" 
        shape="circle" 
        :loading="loading"
        @click="handlePublish"
        :disabled="!canPublish"
      >
        {{ loading ? '发布中...' : '立即发布' }}
      </u-button>
    </view>
    
    <!-- 商品选择弹窗 -->
    <u-popup v-model="showGoodsPicker" mode="bottom" round="20" height="70%">
      <view class="goods-picker">
        <view class="picker-header">
          <text class="picker-title">选择商品</text>
          <u-icon name="close" size="24" @click="showGoodsPicker = false"></u-icon>
        </view>
        <view class="search-bar">
          <u-search 
            v-model="goodsSearch" 
            placeholder="搜索商品名称" 
            :showAction="false"
          ></u-search>
        </view>
        <scroll-view class="goods-list" scroll-y>
          <view 
            class="goods-item" 
            v-for="goods in filteredGoods" 
            :key="goods.id"
            @click="selectGoods(goods)"
          >
            <image :src="goods.image" class="goods-image"></image>
            <view class="goods-info">
              <text class="goods-name">{{ goods.name }}</text>
              <text class="goods-price">¥{{ goods.price }}</text>
            </view>
            <u-icon 
              name="checkmark" 
              size="24" 
              :color="selectedGoods && selectedGoods.id === goods.id ? '#2979ff' : '#ccc'"
            ></u-icon>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    
    <custom-tabbar bgColor="#ffffff" selected="video"></custom-tabbar>
  </view>
</template>

<script>
import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
import UButton from '@/uview-components/uview-ui/components/u-button/u-button.vue';
import UForm from '@/uview-components/uview-ui/components/u-form/u-form.vue';
import UFormItem from '@/uview-components/uview-ui/components/u-form-item/u-form-item.vue';
import UInput from '@/uview-components/uview-ui/components/u-input/u-input.vue';
import USearch from '@/uview-components/uview-ui/components/u-search/u-search.vue';
import UPopup from '@/uview-components/uview-ui/components/u-popup/u-popup.vue';
import MyTag from '@/components/my-tag.vue'

import { getSTSToken, getFilePreviewUrl } from "@/api/common.js";
import { publish, getVideoDetail } from "@/api/video.js";
import { getRecommendTag3 } from "@/api/video-tag.js";
import { getFileKey } from "@/utils/file.js";
export default {
  components: {MyTag,UIcon,UButton,UForm,UFormItem,UInput,USearch,UPopup},
  data() {
    return {
      cosClient: null,
      bucket: '',
      region: '',
      videoUploadProgress: 0,
      loading: false,
      showGoodsPicker: false,
      goodsSearch: '',
      tagInput: '',
      videoInfo: {
          url: '',
          fileKey: '',
          fileType: '',
          fileSize: 0,
          originalFileName: '',
          cover: ''
      },
      formData: {
        id: '',
        title: '',
        cover: '',
        videoFileKey: '',
        videoDuration: 0,
        videoFit: 'cover',
        goodsId: '',
        tags: [],
        fileInfo: {}
      },
      selectedGoods: null,
      goodsList: [
        {
          id: '1',
          name: '新款无线蓝牙耳机',
          price: '199.00',
          image: 'https://via.placeholder.com/100'
        },
        {
          id: '2',
          name: '智能手环运动手表',
          price: '299.00',
          image: 'https://via.placeholder.com/100'
        }
      ],
      recommendedTags: [],
      rules: {
        title: [
          { required: true, message: '请输入视频标题', trigger: 'blur' },
          { min: 1, max: 20, message: '标题长度在1到20个字符', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    canPublish() {
      return this.formData.videoFileKey && this.formData.title && this.formData.cover;
    },
    filteredGoods() {
      if (!this.goodsSearch) return this.goodsList;
      return this.goodsList.filter(goods => 
        goods.name.toLowerCase().includes(this.goodsSearch.toLowerCase())
      );
    },
    showTopicRecommendations() {
      return (this.tagInput === '' || this.recommendedTags.length > 0) && this.formData.tags.length < 5;
    }
  },
  onLoad(option) {
      this.getVideoDetail(option.id)
  },
  onShow() {
      this.initCOS()
    // 初始化推荐标签
    this.getRecommendTags()
  },
  methods: {
      getVideoDetail(id) {
          getVideoDetail(id).then(res => {
              this.fileInfo.cover = res.data.data.coverUrl
              this.fileInfo.url = res.data.data.videoUrl
              this.formData.cover = res.data.data.coverFileKey
              this.formData.id = res.data.data.id
              this.formData.title = res.data.data.title
              this.formData.videoFileKey = res.data.data.videoFileKey
              this.formData.videoFit = res.data.data.videoFit
              this.formData.videoDuration = res.data.data.videoDuration
              this.formData.goodsId = res.data.data.goodsId
              this.formData.tags = res.data.data.tags
          }).catch(() => {
              uni.navigateBack({
                  delta: 1
              });
          })
      },
      // 获取推荐标签
      async getRecommendTags(type) {
          const params = {
              tagName: this.tagInput.trim(),
              searchType: type
          }
          getRecommendTag3(params).then(res => {
              this.recommendedTags = res.data.data
          })
      },
      // 初始化腾讯云cos客户端
      initCOS() {
          // 调用后端获取sts临时访问凭证
          getSTSToken().then(res => {
              const COS = require('@/lib/cos-wx-sdk-v5.js'); // 开发时使用
              // const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 上线时使用压缩包
			  
              // console.log(COS.version);  sdk 版本需要不低于 1.7.2
              this.cosClient = new COS({
                  SecretId: res.data.data.tmpSecretId, // sts 服务下发的临时 secretId
                  SecretKey: res.data.data.tmpSecretKey, // sts 服务下发的临时 secretKey
                  SecurityToken: res.data.data.sessionToken, // sts 服务下发的临时 SessionToken
                  StartTime: res.data.data.stsStartTime, // 建议传入服务端时间，可避免客户端时间不准导致的签名错误
                  ExpiredTime: res.data.data.stsEndTime, // 临时密钥过期时间
                  SimpleUploadMethod: 'putObject', // 强烈建议，高级上传、批量上传内部对小文件做简单上传时使用 putObject,sdk 版本至少需要v1.3.0
               });
               this.bucket = res.data.data.bucket
               this.region = res.data.data.region
          })
		  
      },
    // 选择视频
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        camera: 'back',
        success: (res) => {
            this.videoUploadProgress = 0
            // 获取文件名
            const tempPath = res.tempFilePath;
            let fileName = tempPath.substring(tempPath.lastIndexOf('/') + 1);
			
            // 处理安卓可能的URI编码
            if(fileName.indexOf('%') > -1) {
                fileName = decodeURIComponent(fileName);
            }
            const fileKey = getFileKey(fileName);
           this.videoInfo = {
             url: res.tempFilePath,
             fileKey: fileKey,
             fileType: fileKey.split('/')[0],
             fileSize: res.size,
             originalFileName: fileName,
             cover: ''
           };
           this.formData.videoFileKey = fileKey;
           this.formData.videoDuration = res.duration;
           // 判断视频的填充模式
           this.formData.videoFit = this.calculateVideoFit(res.width, res.height)
		  
           this.cosClient.uploadFile({
                Bucket: this.bucket,
                Region: this.region,
                Key: fileKey,
                FilePath: res.tempFilePath, 
                SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值,5M */
                onProgress: (progressData) => {
                    console.log(progressData.percent);
                    this.videoUploadProgress = progressData.percent * 100
                }
            }, (err, data) => {
                if (err) {
                  console.log('上传失败', err);
                  this.videoInfo = {
                      url: '',
                      fileKey: '',
                      fileType: '',
                      fileSize: 0,
                      originalFileName: '',
                      cover: ''
                  }
                } else {
                  console.log(this.videoInfo);
                }
            });
        },
        fail: (err) => {
          uni.showToast({
            title: '未选择视频',
            icon: 'none'
          });
          console.error(err);
        }
      });
    },
    // 根据宽高比选择视频填充模式
    calculateVideoFit(width, height) {
        const viewportRatio = uni.getSystemInfoSync().windowWidth / uni.getSystemInfoSync().windowHeight;
        const videoRatio = width / height;
        
        // 规则1：超宽视频（如电影21:9）
        if (videoRatio > 2) return 'contain';
        
        // 规则2：竖屏视频（如9:16）
        if (videoRatio < 0.8) return 'cover';
        
        // 规则3：接近屏幕比例的横屏视频
        return Math.abs(videoRatio - viewportRatio) > 0.3 ? 'contain' : 'cover';
    },
    // 重新上传
    reUpload() {
      this.videoInfo = {
        url: '',
        cover: '',
        duration: 0,
        size: 0
      };
      this.chooseVideo();
    },
    
    // 选择封面
    chooseCover() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          let fileName = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf('/') + 1);
          // 处理安卓可能的URI编码
          if(fileName.indexOf('%') > -1) {
                fileName = decodeURIComponent(fileName);
          }
          const fileKey = getFileKey(fileName);
          this.videoInfo.cover = res.tempFilePaths[0];
          this.cosClient.uploadFile({
               Bucket: this.bucket,
               Region: this.region,
               Key: fileKey,
               FilePath: res.tempFilePaths[0], 
               SliceSize: 1024 * 1024 * 5     /* 触发分块上传的阈值,5M */
           }, (err, data) => {
               if (err) {
                 console.log('上传失败', err);
               } else {
                   // 获取封面的访问地址
                   getFilePreviewUrl(fileKey).then(res => {
                   this.videoInfo.cover = res.data.data
                   this.formData.cover = fileKey
                   })
               }
           });
        }
      });
    },
    
    // 选择商品
    chooseGoods() {
      this.showGoodsPicker = true;
    },
    
    // 选择具体商品
    selectGoods(goods) {
      this.selectedGoods = goods;
      this.formData.goodsId = goods.id;
      this.showGoodsPicker = false;
    },
    
    // 清除商品
    clearGoods() {
      this.selectedGoods = null;
      this.formData.goodsId = '';
    },
    
    // 搜索热门话题
    searchTags() {
      if (this.tagInput.trim() !== '') {
        this.getRecommendTags("SEARCH")
      }
    },
    // 添加标签
    addTag() {
      if(!this.tagInput.trim()) {
          return
      }
      const newTag = {'id': '', 'tagName': this.tagInput.trim()};
      if (newTag && this.formData.tags.length < 5) {
        if (this.formData.tags.filter(item => item.tagName === newTag.tagName).length < 1) {
          this.formData.tags.push(newTag);
          this.tagInput = '';
          this.getRecommendTags() // 重置推荐
        } else {
          uni.showToast({
            title: '该话题已添加过了~',
            icon: 'none'
          });
        }
      } else if (this.formData.tags.length >= 5) {
        uni.showToast({
          title: '最多添加5个话题~',
          icon: 'none'
        });
      }
    },
    
    // 选择推荐话题
    selectTopic(index) {
      const tag = this.recommendedTags[index]
      if (this.formData.tags.length >= 5) {
        uni.showToast({
          title: '最多添加5个话题~',
          icon: 'none'
        });
        return;
      }
      
      if (this.formData.tags.filter(item => item.tagName === tag.tagName).length < 1) {
        this.formData.tags.push(tag);
        this.tagInput = '';
      } else {
        uni.showToast({
          title: '该话题已添加过了~',
          icon: 'none'
        });
      }
    },
    
    // 移除标签
    removeTag(index) {
      this.formData.tags.splice(index, 1);
    },
    
    // 处理发布
    handlePublish() {
      this.$refs.formRef.validate(valid => {
        if (valid && this.canPublish) {
          this.loading = true;
          this.formData.fileInfo = this.videoInfo;
          console.log(this.formData);
          publish(this.formData).then(res => {
              uni.showToast({
                title: '视频已提交审核~',
                icon: 'success'
              });
              this.loading = false
              // 重置表单
              this.videoInfo = {
                    url: '',
                    fileKey: '',
                    fileType: '',
                    fileSize: 0,
                    originalFileName: '',
                    cover: ''
              };
              this.formData = {
                id: '',
                title: '',
                videoFileKey: '',
                cover: '',
                videoFit: 'cover',
                videoDuration: 0,
                goodsId: '',
                tags: [],
                fileInfo: {}
              };
              this.selectedGoods = null;
              this.tagInput = '';
              this.recommendedTags = [];
			  
              // TODO 先跳首页,后面跳我的视频页面
              setTimeout(() => {
                uni.switchTab({
                    url: '/pages/tabbar/index/home'
                });
              }, 1500);
          })
        } else {
          uni.showToast({
            title: '请完善视频信息~',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.publish-container {
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.upload-section {
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400rpx;
}

.upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
}

.upload-text {
  font-size: 32rpx;
  margin: 20rpx 0 10rpx;
}

.upload-tips {
  font-size: 24rpx;
  color: #ccc;
}

.video-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-player {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
  background-color: #000;
}

.video-actions {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  gap: 20rpx;
}

.form-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 20rpx;
}

.goods-link-container {
  width: 100%;
}

.goods-preview {
  display: flex;
  align-items: center;
  padding: 15rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
  margin-top: 15rpx;
}

.goods-preview .goods-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 15rpx;
}

.goods-preview .goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.goods-preview .goods-info .goods-name {
  font-size: 26rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goods-preview .goods-info .goods-price {
  font-size: 28rpx;
  color: #f44;
  font-weight: bold;
}

.topic-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  line-height: 22px;
}

.tags-input-container {
  width: 100%;
}

.tags-display {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15rpx;
  line-height: 22px;
}

.hot-topics {
    display: flex;
    flex-direction: column;
    margin-top: 15rpx;
    margin-bottom: 15rpx;
}

.section-title {
  font-size: 12px;
  color: #999;
  line-height: 12px;
  margin-bottom: 6rpx;
}

.tags-count {
  display: block;
  font-size: 12px;
  line-height: 12px;
  color: #999;
  margin-top: 10rpx;
  text-align: right;
}

.publish-btn {
  position: fixed;
  bottom: 100rpx;
  left: 20rpx;
  right: 20rpx;
}

.goods-picker {
  padding: 30rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.goods-picker .picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.goods-picker .picker-header .picker-title {
  font-size: 36rpx;
  font-weight: bold;
}

.goods-picker .search-bar {
  margin-bottom: 20rpx;
}

.goods-picker .goods-list {
  flex: 1;
  overflow: hidden;
}

.goods-picker .goods-list .goods-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}

.goods-picker .goods-list .goods-item .goods-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.goods-picker .goods-list .goods-item .goods-info {
  flex: 1;
}

.goods-picker .goods-list .goods-item .goods-info .goods-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-picker .goods-list .goods-item .goods-info .goods-price {
  font-size: 28rpx;
  color: #f44;
  font-weight: bold;
}

.progress-box {
    width: 100%;
    display: flex;
    height: 25px;
    margin-top: 10px;
}
</style>