评论点赞功能

xiangpei

2025-05-30 e15dbdbc396f61a645c8d8a504b45476f1fcea08

 pages/tabbar/video/video.vue

@@ -11,10 +11,13 @@
      <view class="video-preview" v-else>
        <video 
          :src="videoInfo.url" 
          controls
          :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">选择封面</u-button>
@@ -29,8 +32,9 @@
        <u-form-item label="标题" prop="title" borderBottom>
          <u-input 
            v-model="formData.title" 
            placeholder="请输入视频标题"
            maxlength="30"
            placeholder="请输入视频标题,20字以内"
            maxlength="20"
         show-word-limit
            clearable
          />
        </u-form-item>
@@ -44,46 +48,43 @@
              clearable
              @confirm="addTag"
              @blur="addTag"
              @input="searchHotTopics"
              @input="searchTags"
            ></u-input>
            <!-- 已选话题展示 -->
            <view class="tags-display" v-if="formData.tags.length > 0">
              <u-tag 
              <my-tag 
                v-for="(tag, index) in formData.tags"
                :key="index"
                :text="tag"
                closable
                :text="tag.tagName"
            :index="index"
            type="error"
                @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>
        <!-- 话题推荐 -->
        <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="primary"
             :closeable="false"
              @click="selectTopic(index)"
            />
          </view>
        </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>
        <u-form-item label="商品" prop="goodsId" borderBottom>
          <view class="goods-link-container">
            <u-input  
              placeholder="可选择推荐商品"
@@ -170,23 +171,47 @@
</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 } from "@/api/common.js";
import { publish } 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: '',
        cover: '',
        duration: 0,
        size: 0
      },
        url: '',
        fileKey: '',
        fileType: '',
        fileSize: 0,
        originalFileName: '',
        cover: ''
     },
      formData: {
      id: '',
        title: '',
        goodsLink: '',
        tags: []
      videoFileKey: '',
      videoDuration: 0,
      videoFit: 'cover',
        goodsId: '',
        tags: [],
      fileInfo: {}
      },
      selectedGoods: null,
      goodsList: [
@@ -201,57 +226,20 @@
          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: [],
      recommendedTags: [],
      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' }
          { min: 1, max: 20, message: '标题长度在1到20个字符', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    canPublish() {
      return this.videoInfo.url && this.formData.title && this.formData.goodsLink && this.formData.tags.length > 0;
      return this.formData.videoFileKey && this.formData.title;
    },
    filteredGoods() {
      if (!this.goodsSearch) return this.goodsList;
@@ -260,14 +248,50 @@
      );
    },
    showTopicRecommendations() {
      return (this.tagInput === '' || this.recommendedTopics.length > 0) && this.formData.tags.length < 5;
      return (this.tagInput === '' || this.recommendedTags.length > 0) && this.formData.tags.length < 5;
    }
  },
  created() {
    // 初始化推荐话题
    this.recommendedTopics = this.hotTopics.slice(0, 3);
    
  },
  onShow() {
     this.initCOS()
   // 初始化推荐标签
   this.getRecommendTags()
  },
  methods: {
     // 获取推荐标签
     async getRecommendTags(type) {
        const params = {
           tagName: this.tagInput.trim(),
           searchType: type
        }
        getRecommendTag3(params).then(res => {
           this.recommendedTags = res.data.data
        })
     },
     // 初始化腾讯云cos客户端
     initCOS() {
        console.log("执行了");
        // 调用后端获取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({
@@ -275,23 +299,78 @@
        maxDuration: 60,
        camera: 'back',
        success: (res) => {
          this.videoInfo = {
            url: res.tempFilePath,
            duration: res.duration,
            size: res.size,
            cover: res.thumbTempFilePath
          };
         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: '选择视频失败',
            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 = {
@@ -323,68 +402,64 @@
    // 选择具体商品
    selectGoods(goods) {
      this.selectedGoods = goods;
      this.formData.goodsLink = `https://example.com/goods/${goods.id}`;
      this.formData.goodsId = goods.id;
      this.showGoodsPicker = false;
    },
    
    // 清除商品
    clearGoods() {
      this.selectedGoods = null;
      this.formData.goodsLink = '';
      this.formData.goodsId = '';
    },
    
    // 搜索热门话题
    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);
    searchTags() {
      if (this.tagInput.trim() !== '') {
        this.getRecommendTags("SEARCH")
      }
    },
    
    // 添加标签
    addTag() {
      const newTag = this.tagInput.trim();
     if(!this.tagInput.trim()) {
        return
     }
      const newTag = {'id': '', 'tagName': this.tagInput.trim()};
      if (newTag && this.formData.tags.length < 5) {
        if (!this.formData.tags.includes(newTag)) {
        if (this.formData.tags.filter(item => item.tagName === newTag.tagName).length < 1) {
          this.formData.tags.push(newTag);
          this.tagInput = '';
          this.recommendedTopics = this.hotTopics.slice(0, 3); // 重置推荐
          this.getRecommendTags() // 重置推荐
        } else {
          uni.showToast({
            title: '话题已添加',
            title: '该话题已添加过了~',
            icon: 'none'
          });
        }
      } else if (this.formData.tags.length >= 5) {
        uni.showToast({
          title: '最多添加5个话题',
          title: '最多添加5个话题~',
          icon: 'none'
        });
      }
    },
    
    // 选择推荐话题
    selectTopic(topic) {
    selectTopic(index) {
     const tag = this.recommendedTags[index]
      if (this.formData.tags.length >= 5) {
        uni.showToast({
          title: '最多添加5个话题',
          title: '最多添加5个话题~',
          icon: 'none'
        });
        return;
      }
      
      if (!this.formData.tags.includes(topic)) {
        this.formData.tags.push(topic);
      if (this.formData.tags.filter(item => item.tagName === tag.tagName).length < 1) {
        this.formData.tags.push(tag);
        this.tagInput = '';
      } else {
        uni.showToast({
          title: '话题已添加',
          title: '该话题已添加过了~',
          icon: 'none'
        });
      }
@@ -400,40 +475,47 @@
      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);
          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: '',
            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: '请完善视频信息',
            title: '请完善视频信息~',
            icon: 'none'
          });
        }
@@ -443,7 +525,7 @@
};
</script>

<style lang="scss" scoped>
<style scoped>
.publish-container {
  padding: 20rpx;
  padding-bottom: 120rpx;
@@ -515,67 +597,74 @@
  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;
    }
  }
}

.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;
  }
  
  .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;
  }
}

.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 {
@@ -590,60 +679,67 @@
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .picker-header {
}

.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;
    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;
        }
      }
    }
  }
    height: 25px;
    margin-top: 10px;
}
</style>