绿满眶商城微信小程序-uniapp
peng
2025-07-02 d3d0b4dbb4f1f8c4784c834e0a39feba8aa5afa5
pages/tabbar/video/video.vue
@@ -1,5 +1,5 @@
<template>
  <view class="publish-container">
  <view class="publish-container" :style="{height: windowHeight - marginBottom - 50 + 'px'}">
   <u-popup v-model="fileTypeShow" mode="bottom"  round="20" height="35%">
      <view style="width: 100%;height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
         <view>请选择要发布的类型</view>
@@ -75,7 +75,7 @@
              @input="searchTags"
            ></u-input>
            <!-- 已选话题展示 -->
            <view class="tags-display" v-if="formData.tags.length > 0">
            <view class="tags-display" v-show="formData.tags.length > 0">
              <my-tag
                v-for="(tag, index) in formData.tags"
                :key="index"
@@ -85,12 +85,12 @@
                @close="removeTag(index)"
              />
            </view>
            <text class="tags-count" v-if="formData.tags.length > 0">
            <text class="tags-count" v-show="formData.tags.length > 0">
              已选 {{ formData.tags.length }}/5
            </text>
          </view>
        <!-- 话题推荐 -->
        <view class="hot-topics" v-if="showTopicRecommendations">
        <view class="hot-topics" v-show="showTopicRecommendations">
          <text class="section-title">{{ tagInput ? '推荐话题' : '热门话题' }}</text>
          <view class="topic-list">
            <my-tag
@@ -125,14 +125,14 @@
              ></u-icon>
            </u-input>
            <view class="goods-preview" @click="chooseGoods" v-for="goods in selectedGoodsList" :key="goods.id">
              <image :src="goods.thumbnail" class="goods-image"></image>
              <image :src="endpoint + '/' + goods.thumbnail" class="goods-image"></image>
              <view class="goods-info">
                <text class="goods-name">{{ goods.goodsName }}</text>
            <view style="display: flex;">
               <view class="goods-price" style="flex: 1;">¥{{ goods.price }}</view>
               <view @click.stop="() => {}" style="flex: 1;display: flex;justify-content: center;align-items: center;">
                  <view style="width: 90rpx">数量:</view>
                  <uni-number-box v-model="goods.selectNum"/>
                  <uni-number-box v-model="goods.goodsNum" :min="1"/>
               </view>
            </view>
              </view>
@@ -183,7 +183,7 @@
            :key="goods.id"
            @click="selectGoods(goods, index)"
          >
            <image :src="goods.thumbnail" class="goods-image"></image>
            <image :src="endpoint + '/' + goods.thumbnail" class="goods-image"></image>
            <view class="goods-info">
              <text class="goods-name">{{ goods.goodsName }}</text>
              <text class="goods-price">¥{{ goods.price }}</text>
@@ -205,13 +205,7 @@
</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 '@/components/uview-components/uview-ui';
import MyTag from '@/components/my-tag.vue'
import { getSTSToken, getFilePreviewUrl } from "@/api/common.js";
@@ -221,7 +215,7 @@
import { getVideoGoodsList } from "@/api/goods.js";
export default {
  components: {MyTag,UIcon,UButton,UForm,UFormItem,UInput,USearch,UPopup},
  components: {MyTag},
  data() {
    return {
     fileTypeShow: false,
@@ -245,7 +239,7 @@
     goodsQuery: {
      keyword: '',
      searchFromSelfStore: false, // 是否是查询自家店铺商品
      pageNumber: 1,
      pageNumber: 0,
      pageSize: 5
     },
      formData: {
@@ -255,7 +249,6 @@
      videoFileKey: '',
      videoDuration: 0,
      videoFit: 'cover',
        goodsId: '',
        videoContentType: 'video',
        videoImgs: [],
        tags: [],
@@ -272,7 +265,9 @@
        ]
      },
     screenWidth: 375,
     gap: 10 // 图片间距
     gap: 10, // 图片间距
     windowHeight: 0,
     marginBottom: 0
    };
  },
  computed: {
@@ -295,7 +290,9 @@
    // 获取屏幕宽度
   const systemInfo = uni.getSystemInfoSync()
   this.screenWidth = systemInfo.windowWidth
   this.goodsQuery.pageNumber = 1
   this.windowHeight = systemInfo.windowHeight
   this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
   this.goodsQuery.pageNumber = 0
   this.goodsQuery.pageSize = 10
   this.getVideoGoodsByEs()
  },
@@ -316,7 +313,7 @@
     },
     // 处理商品搜索值
     handlerGoodsSearch() {
        this.goodsQuery.pageNumber = 1
        this.goodsQuery.pageNumber = 0
        this.goodsQuery.pageSize = 10
        this.getVideoGoodsByEs()
     },
@@ -324,7 +321,7 @@
     async getVideoGoodsByEs() {
      getVideoGoodsList(this.goodsQuery).then(res => {
         
         if(this.goodsQuery.pageNumber === 1) {
         if(this.goodsQuery.pageNumber === 0) {
            this.goodsList = res.data.data
         } else {
            this.goodsList = [
@@ -457,7 +454,22 @@
    },
    // 重新上传
    reUpload() {
      this.resetData()
      this.videoInfo = {
           url: '',
           fileKey: '',
           fileType: '',
           fileSize: 0,
           originalFileName: '',
           cover: ''
      };
      this.formData.videoFileKey = ''
      this.formData.cover = ''
      this.formData.videoFit = 'cover'
      this.formData.videoDuration = 0
      this.formData.videoImgs = []
      this.formData.fileInfo = {}
      this.formData.videoContentType = 'video'
      this.videoPreviewImgs = []
     this.fileTypeShow = true
    },
    // 选择视频图集
@@ -533,13 +545,19 @@
    // 选择商品
    chooseGoods() {
     if(this.selectedGoodsList.length > 0) {
             const selectedGoodsSkuIds = new Set(this.selectedGoodsList.map(i => i.id));
             this.goodsList?.forEach(goods => {
                 this.$set(goods, 'selected', selectedGoodsSkuIds.has(goods.id));
               });
     }
      this.showGoodsPicker = true;
    },
    // 选择具体商品
    selectGoods(goods, index) {
     if(! this.selectedGoodsList.some(item => item.id === goods.id)) {
      goods["selectNum"] = 1
      goods["goodsNum"] = 1
      this.selectedGoodsList.push(goods)
      this.goodsList[index].selected = true
     } else {
@@ -622,7 +640,7 @@
        if (valid && this.canPublish) {
          this.loading = true;
          this.formData.fileInfo = this.videoInfo;
        this.formData["goodsList"] = this.selectedGoodsList.map(item => {return {goodsId: item.goodsId, goodsNum: item.selectNum}});
        this.formData["goodsList"] = this.selectedGoodsList.map(item => {return {goodsId: item.goodsId, goodsSkuId: item.id, goodsNum: item.goodsNum}});
          publish(this.formData).then(res => {
           uni.showToast({
             title: '视频已提交审核~',
@@ -667,7 +685,6 @@
        cover: '',
        videoFit: 'cover',
        videoDuration: 0,
        goodsId: '',
        videoContentType: 'video',
        videoImgs: [],
        tags: [],
@@ -683,7 +700,7 @@
<style scoped>
.publish-container {
  padding: 10px;
  padding-bottom: 120rpx;
  overflow-y: scroll;
}
.upload-section {
@@ -799,6 +816,7 @@
  flex-wrap: wrap;
  margin-top: 15rpx;
  line-height: 22px;
  height: 80rpx;
}
.hot-topics {
@@ -806,6 +824,7 @@
   flex-direction: column;
   margin-top: 15rpx;
   margin-bottom: 15rpx;
   height: 46rpx;
}
.section-title {