视频发布静态页面

xiangpei

2025-05-15 d25f94845ef10169389c980c7ffaa7d6bc461760

视频发布静态页面

 pages/tabbar/video/video.vue

@@ -1,22 +1,649 @@
<template>
    <view>
        <custom-tabbar bgColor="#ffffff" selected="video"></custom-tabbar>
    </view>
  <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" 
          controls
          class="video-player"
          :poster="videoInfo.cover || ''"
        ></video>
        <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">选择封面</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="请输入视频标题"
            maxlength="30"
            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="searchHotTopics"
            ></u-input>
            <!-- 已选话题展示 -->
            <view class="tags-display" v-if="formData.tags.length > 0">
              <u-tag 
                v-for="(tag, index) in formData.tags"
                :key="index"
                :text="tag"
                closable
                @close="removeTag(index)"
                size="medium"
                type="primary"
                style="margin-right: 10rpx; margin-bottom: 10rpx;"
              />
            </view>
            <text class="tags-count" v-if="formData.tags.length > 0">
              已选 {{ formData.tags.length }}/5
            </text>
          </view>
        </u-form-item>
		
		
        <!-- 话题推荐 -->
        <view class="hot-topics" v-if="showTopicRecommendations">
          <text class="section-title">{{ tagInput ? '推荐话题' : '热门话题' }}</text>
          <view class="topic-list">
            <u-tag 
              v-for="(topic, index) in recommendedTopics"
              :key="index"
              :text="topic"
              size="medium"
              type="info"
              @click="selectTopic(topic)"
              style="margin-right: 10rpx; margin-bottom: 10rpx;"
            />
          </view>
        </view>
        
        <!-- 商品链接 -->
        <u-form-item label="商品" prop="goodsLink" 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>
    export default {
        data() {
            return {
				
            }
        },
        methods: {
			
        }
    }
export default {
  data() {
    return {
      loading: false,
      showGoodsPicker: false,
      goodsSearch: '',
      tagInput: '',
      videoInfo: {
        url: '',
        cover: '',
        duration: 0,
        size: 0
      },
      formData: {
        title: '',
        goodsLink: '',
        tags: []
      },
      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'
        },
        {
          id: '3',
          name: '便携式充电宝10000mAh',
          price: '99.00',
          image: 'https://via.placeholder.com/100'
        },
        {
          id: '4',
          name: '高清广角手机镜头',
          price: '59.00',
          image: 'https://via.placeholder.com/100'
        },
        {
          id: '5',
          name: '多功能折叠键盘',
          price: '159.00',
          image: 'https://via.placeholder.com/100'
        }
      ],
      hotTopics: [
        '#五一旅行打卡',
        '#美食探店',
        '#科技新品',
        '#健身日常',
        '#宠物萌宠'
      ],
      recommendedTopics: [],
      rules: {
        title: [
          { required: true, message: '请输入视频标题', trigger: 'blur' },
          { min: 2, max: 30, message: '标题长度在2到30个字符', trigger: 'blur' }
        ],
        goodsLink: [
          { required: true, message: '请选择商品链接', trigger: 'change' }
        ],
        tags: [
          { validator: (rule, value, callback) => {
            if (value.length === 0) {
              callback(new Error('请至少添加一个话题'));
            } else {
              callback();
            }
          }, trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    canPublish() {
      return this.videoInfo.url && this.formData.title && this.formData.goodsLink && this.formData.tags.length > 0;
    },
    filteredGoods() {
      if (!this.goodsSearch) return this.goodsList;
      return this.goodsList.filter(goods => 
        goods.name.toLowerCase().includes(this.goodsSearch.toLowerCase())
      );
    },
    showTopicRecommendations() {
      return (this.tagInput === '' || this.recommendedTopics.length > 0) && this.formData.tags.length < 5;
    }
  },
  created() {
    // 初始化推荐话题
    this.recommendedTopics = this.hotTopics.slice(0, 3);
  },
  methods: {
    // 选择视频
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        camera: 'back',
        success: (res) => {
          this.videoInfo = {
            url: res.tempFilePath,
            duration: res.duration,
            size: res.size,
            cover: res.thumbTempFilePath
          };
        },
        fail: (err) => {
          uni.showToast({
            title: '选择视频失败',
            icon: 'none'
          });
          console.error(err);
        }
      });
    },
    
    // 重新上传
    reUpload() {
      this.videoInfo = {
        url: '',
        cover: '',
        duration: 0,
        size: 0
      };
      this.chooseVideo();
    },
    
    // 选择封面
    chooseCover() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.videoInfo.cover = res.tempFilePaths[0];
        }
      });
    },
    
    // 选择商品
    chooseGoods() {
      this.showGoodsPicker = true;
    },
    
    // 选择具体商品
    selectGoods(goods) {
      this.selectedGoods = goods;
      this.formData.goodsLink = `https://example.com/goods/${goods.id}`;
      this.showGoodsPicker = false;
    },
    
    // 清除商品
    clearGoods() {
      this.selectedGoods = null;
      this.formData.goodsLink = '';
    },
    
    // 搜索热门话题
    searchHotTopics() {
      if (this.tagInput.trim() === '') {
        // 显示热门话题
        this.recommendedTopics = this.hotTopics.slice(0, 3);
      } else {
        // 模拟搜索推荐话题
        const input = this.tagInput.trim().toLowerCase();
        this.recommendedTopics = this.hotTopics
          .filter(topic => topic.toLowerCase().includes(input))
          .slice(0, 3);
      }
    },
    
    // 添加标签
    addTag() {
      const newTag = this.tagInput.trim();
      if (newTag && this.formData.tags.length < 5) {
        if (!this.formData.tags.includes(newTag)) {
          this.formData.tags.push(newTag);
          this.tagInput = '';
          this.recommendedTopics = this.hotTopics.slice(0, 3); // 重置推荐
        } else {
          uni.showToast({
            title: '话题已添加',
            icon: 'none'
          });
        }
      } else if (this.formData.tags.length >= 5) {
        uni.showToast({
          title: '最多添加5个话题',
          icon: 'none'
        });
      }
    },
    
    // 选择推荐话题
    selectTopic(topic) {
      if (this.formData.tags.length >= 5) {
        uni.showToast({
          title: '最多添加5个话题',
          icon: 'none'
        });
        return;
      }
      
      if (!this.formData.tags.includes(topic)) {
        this.formData.tags.push(topic);
        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;
          
          // 这里应该是上传视频到服务器的逻辑
          // 模拟上传过程
          setTimeout(() => {
            this.loading = false;
            uni.showToast({
              title: '发布成功',
              icon: 'success'
            });
            
            // 重置表单
            this.videoInfo = {
              url: '',
              cover: '',
              duration: 0,
              size: 0
            };
            this.formData = {
              title: '',
              goodsLink: '',
              tags: []
            };
            this.selectedGoods = null;
            this.tagInput = '';
            this.recommendedTopics = this.hotTopics.slice(0, 3);
            
            // 返回上一页
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }, 2000);
        } else {
          uni.showToast({
            title: '请完善视频信息',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

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

</style>
.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-image {
    width: 80rpx;
    height: 80rpx;
    border-radius: 8rpx;
    margin-right: 15rpx;
  }
  
  .goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .goods-name {
      font-size: 26rpx;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .goods-price {
      font-size: 28rpx;
      color: #f44;
      font-weight: bold;
    }
  }
}

.tags-input-container {
  width: 100%;
  
  .tags-display {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15rpx;
  }
  
  .hot-topics {
    margin-top: 15rpx;
    
    .section-title {
      font-size: 24rpx;
      color: #999;
      display: block;
      margin-bottom: 10rpx;
    }
    
    .topic-list {
      display: flex;
      flex-wrap: wrap;
    }
  }
  
  .tags-count {
    display: block;
    font-size: 24rpx;
    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;
  
  .picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .picker-title {
      font-size: 36rpx;
      font-weight: bold;
    }
  }
  
  .search-bar {
    margin-bottom: 20rpx;
  }
  
  .goods-list {
    flex: 1;
    overflow: hidden;
    
    .goods-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      .goods-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      
      .goods-info {
        flex: 1;
        
        .goods-name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .goods-price {
          font-size: 28rpx;
          color: #f44;
          font-weight: bold;
        }
      }
    }
  }
}
</style>