pages/tabbar/index/home.vue

@@ -9,52 +9,77 @@
      @change="onSwiperChange"
    >
      <swiper-item v-for="(item, index) in videoList" :key="item.id">
        <!-- 播放按钮（仅当视频暂停时显示） -->
        <view 
          class="play-icon" 
          @click="togglePlay(index)"
          v-if="!currentVideoIsPlaying"
        >
          <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
        </view>
        <video 
          :id="'video'+index"
          :ref="'video'+index"
          :src="item.videoUrl"
          :autoplay="currentIndex === index"
          :controls="false"
          :loop="true"
          :object-fit="item.objectFit"
          :enable-progress-gesture="false"
          class="video-item"
          @play="onPlay(item.id, index)"
          @pause="onPause(index)"
          @ended="onEnded(index)"
          @click="togglePlay(index)"
          @timeupdate="onTimeUpdate($event)"
          @loadedmetadata="onLoadedMetadata($event)"
		  
        ></video>
        <!-- 自定义控制条 -->
        <view 
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
            class="container">
          <!-- 进度条 - 整个区域可拖动 -->
          <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
              <!-- 显示当前进度 -->
              <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
        <view style="width: 100%;height: 100%;" v-if="item.videoContentType === 'video'">
              <!-- 播放按钮（仅当视频暂停时显示） -->
              <view 
                class="progress-bar" 
                id="progressBar"
                class="play-icon" 
                @click="togglePlay(index)"
                v-if="!currentVideoIsPlaying"
              >
			  			  
                <!-- 已填充部分 -->
                <view class="progress-fill" :style="{ width: progress + '%' }"></view>
                <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
              </view>
          </view>
              <video
                :id="'video'+index"
                :ref="'video'+index"
                :src="item.videoUrl"
                :autoplay="currentIndex === index"
                :controls="false"
                :loop="true"
                :object-fit="item.objectFit"
                :enable-progress-gesture="false"
                class="video-item"
                @play="onPlay(item.id, index)"
                @pause="onPause(index)"
                @ended="onEnded(index)"
                @click="togglePlay(index)"
                @timeupdate="onTimeUpdate($event)"
                @loadedmetadata="onLoadedMetadata($event)"
				
              ></video>
              <!-- 自定义控制条 -->
              <view 
                @touchstart="handleTouchStart"
                @touchmove="handleTouchMove"
                @touchend="handleTouchEnd"
                class="container">
                <!-- 进度条 - 整个区域可拖动 -->
                <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
                  <!-- 显示当前进度 -->
                  <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
                  <view 
                    class="progress-bar" 
                    id="progressBar"
                  >
							  
                    <!-- 已填充部分 -->
                    <view class="progress-fill" :style="{ width: progress + '%' }"></view>
                  </view>
                </view>
              </view>
        </view>
        <view style="width: 100%; height: 100%;" v-else-if="item.videoContentType === 'img'">
          <uni-swiper-dot 
            :info="item.imgs" 
            :current="currentImgIndex" 
            mode="round" 
            style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;"
            :dots-styles="{width: 24, bottom: 24,selectedBackgroundColor: 'green', backgroundColor: 'gray'}"
            >
            <swiper class="swiper-box" @change="imgChange" :autoplay="true" :interval="3000">
              <swiper-item v-for="img in item.imgs" :key="img">
                <view class="swiper-item">
                  <!-- 调整 image 样式，使其居中且按比例缩放 -->
                  <image 
                    :src="img" 
                    mode="aspectFit" 
                    style="width: 100%; height: 100%; display: block; margin: 0 auto;"
                  ></image>
                </view>
              </swiper-item>
            </swiper>
          </uni-swiper-dot>
        </view>
		
        
        <!-- 悬挂商品链接层 -->
        <view class="goods-link-warp">
@@ -211,6 +236,7 @@
  },
  data() {
    return {
        currentImgIndex: 0, // 播放到第几张图--索引
        currentTime: 0,
        formartDuration: '',
        duration: 0,
@@ -294,6 +320,10 @@
    this.initVideoContexts();
  },
  methods: {
      // 轮播图变化
      imgChange(e) {
          this.currentImgIndex = e.detail.current;
      },
      // 获取进度条的位置和尺寸
      getBarRect() {
        const query = uni.createSelectorQuery().in(this);
@@ -1164,4 +1194,15 @@
      font-size: 14px;
      color: #666;
    }
    .swiper-box {
      width: 100%;
      height: 1400rpx;
    }
    .swiper-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
</style>

 pages/tabbar/index/home1.vue

New file
@@ -0,0 +1,144 @@
<template>
  <!-- 自定义控制条 -->
  <view 
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      class="container">
    <!-- 进度条 - 整个区域可拖动 -->
    <view class="process-warp" :style="{ opacity: showProcess ? 1 : 0 }">
        <!-- 显示当前进度 -->
        <view class="progress-text">{{ hasPlayTime }}/{{formartDuration}}</view>
        <view 
          class="progress-bar" 
          id="progressBar"
        >
  	  			  
          <!-- 已填充部分 -->
          <view class="progress-fill" :style="{ width: progress + '%' }"></view>
        </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      startX: 0,
      progress: 0, // 视频进度
      startProgress : 0, // 开始滑动时的进度
      barLeft: 0, // 进度条左边界位置
      barWidth: 0, // 进度条宽度
      isDragging: false, // 是否正在拖动
      processHidenTimer: null, // 进度条隐藏定时器
      showProcess: false, // 是否显示进度条
    };
  },
  mounted() {
    // 获取进度条的尺寸和位置信息
    this.getBarRect();
  },
  methods: {
    // 获取进度条的位置和尺寸
    getBarRect() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#progressBar').boundingClientRect(rect => {
        if (rect) {
          this.barLeft = rect.left;
          this.barWidth = rect.width;
        }
      }).exec();
    },
    
    // 触摸开始
    handleTouchStart(e) {
      this.isDragging = true;
      this.showProcess = true;
      this.startProgress = this.progress; // 记录开始时的进度
      this.startX = e.touches[0].pageX;
      console.log("记录开始时的进度", this.startProgress);
      this.videoContexts[this.currentIndex].pause()
      // this.updateProgress(e);
    },
    
    // 触摸移动
    handleTouchMove(e) {
      if (!this.isDragging || !this.barWidth) return;
      clearTimeout(this.processHidenTimer)
      this.videoContexts[this.currentIndex].pause()
      this.updateProgress(e);
    },
    
    // 触摸结束
    handleTouchEnd() {
      this.isDragging = false;
      console.log("滑动结束", this.duration * this.progress);
      this.videoContexts[this.currentIndex].seek(this.duration * this.progress / 100)
      this.videoContexts[this.currentIndex].play()
      this.processHidenTimer = setTimeout(() => {
          this.showProcess = false;
        }, 1000);
    },
    
    // 更新进度
    updateProgress(e) {
        // 获取当前触摸点X坐标
        const currentX = e.touches[0].pageX;
    	
        // 计算滑动距离(像素)
        const deltaX = currentX - this.startX;
    	
        // 将像素距离转换为进度增量
        const deltaProgress = (deltaX / this.barWidth) * 100;
        console.log("进度增量", deltaProgress);
        // 计算新进度 = 开始时的进度 + 滑动增量
        let newProgress = this.startProgress + deltaProgress;
    	
        // 限制范围在0-100之间
        newProgress = Math.max(0, Math.min(100, newProgress));
    	
        this.progress = newProgress;
    }
  }
};
</script>

<style>
.container {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      bottom: 0;
      width: 100%;
    }
	
    .progress-bar {
      position: relative;
      width: 100%;
      height: 16px;
      background-color: #eee;
      overflow: hidden;
    }
	
    .progress-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background-color: lightgray;
      transition: width 0.1s;
    }
    .process-warp {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .progress-text {
      margin-top: 10px;
      font-size: 14px;
      color: #666;
    }
</style>

 pages/tabbar/video/video.vue

@@ -1,16 +1,22 @@
<template>
  <view class="publish-container">
    <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>
            <u-button style="width: 50%;margin-bottom: 30rpx;margin-top: 20rpx;" type="success" @click="chooseVideo">视频</u-button>
            <u-button style="width: 50%;" type="success" @click="chooseImgs">图片</u-button>
        </view>
    </u-popup>
    <!-- 视频上传区域 -->
    <view class="upload-section">
      <view class="upload-btn" @click="chooseVideo" v-if="!videoInfo.url">
      <view class="upload-btn" @click="this.fileTypeShow = true" v-if="!formData.videoFileKey && formData.videoImgs.length < 1">
        <u-icon name="plus" size="40" color="#999"></u-icon>
        <text class="upload-text">点击上传视频</text>
        <text class="upload-tips">支持MP4格式，最长60秒</text>
        <text class="upload-text">点击上传</text>
      </view>
      
      <view class="video-preview" v-else>
        <video 
          :src="videoInfo.url" 

      <view class="video-preview" v-else-if="formData.videoContentType === 'video'">
        <video
          :src="videoInfo.url"
          :object-fit="formData.videoFit"
          class="video-player"
          :poster="videoInfo.cover || ''"
@@ -20,30 +26,48 @@
        </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>
          <u-button type="primary" size="mini" @click="chooseCover" v-if="formData.videoFileKey">{{formData.cover ? '更换封面' : '请选择封面'}}</u-button>
        </view>
      </view>

      <view class="image-list" v-else-if="formData.videoContentType === 'img'">
        <view
          v-for="item in videoPreviewImgs"
          :key="item"
          class="image-item"
          :style="{width: itemWidth + 'px', height: itemWidth + 'px'}"
        >
          <image
            :src="item"
            mode="aspectFill"
            class="image"
          />
        </view>
        <view class="video-actions">
          <u-button type="error" size="mini" @click="reUpload">重新上传</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" 
          <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" 
            <u-input
              v-model="tagInput"
              placeholder="输入话题，回车确认"
              clearable
              @confirm="addTag"
@@ -52,7 +76,7 @@
            ></u-input>
            <!-- 已选话题展示 -->
            <view class="tags-display" v-if="formData.tags.length > 0">
              <my-tag 
              <my-tag
                v-for="(tag, index) in formData.tags"
                :key="index"
                :text="tag.tagName"
@@ -69,7 +93,7 @@
          <view class="hot-topics" v-if="showTopicRecommendations">
            <text class="section-title">{{ tagInput ? '推荐话题' : '热门话题' }}</text>
            <view class="topic-list">
              <my-tag 
              <my-tag
                v-for="(tag, index) in recommendedTags"
                :key="index"
                :text="tag.tagName"
@@ -81,22 +105,22 @@
            </view>
          </view>
        </u-form-item>
		
        


        <!-- 商品链接 -->
        <u-form-item label="商品" prop="goodsId" borderBottom>
          <view class="goods-link-container">
            <u-input  
            <u-input
              placeholder="可选择推荐商品"
              clearable
              v-if="!selectedGoods"
              @click="chooseGoods"
              disabled
            >
              <u-icon 
                slot="right" 
                name="search" 
                size="24" 
              <u-icon
                slot="right"
                name="search"
                size="24"
                @click="chooseGoods"
              ></u-icon>
            </u-input>
@@ -106,9 +130,9 @@
                <text class="goods-name">{{ selectedGoods.name }}</text>
                <text class="goods-price">¥{{ selectedGoods.price }}</text>
              </view>
              <u-icon 
                name="close" 
                size="20" 
              <u-icon
                name="close"
                size="20"
                @click="clearGoods"
              ></u-icon>
            </view>
@@ -116,12 +140,12 @@
        </u-form-item>
      </u-form>
    </view>
    

    <!-- 发布按钮 -->
    <view class="publish-btn">
      <u-button 
        type="primary" 
        shape="circle" 
      <u-button
        type="success"
        shape="circle"
        :loading="loading"
        @click="handlePublish"
        :disabled="!canPublish"
@@ -129,7 +153,7 @@
        {{ loading ? '发布中...' : '立即发布' }}
      </u-button>
    </view>
    

    <!-- 商品选择弹窗 -->
    <u-popup v-model="showGoodsPicker" mode="bottom" round="20" height="70%">
      <view class="goods-picker">
@@ -138,16 +162,16 @@
          <u-icon name="close" size="24" @click="showGoodsPicker = false"></u-icon>
        </view>
        <view class="search-bar">
          <u-search 
            v-model="goodsSearch" 
            placeholder="搜索商品名称" 
          <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" 
          <view
            class="goods-item"
            v-for="goods in filteredGoods"
            :key="goods.id"
            @click="selectGoods(goods)"
          >
@@ -156,16 +180,16 @@
              <text class="goods-name">{{ goods.name }}</text>
              <text class="goods-price">¥{{ goods.price }}</text>
            </view>
            <u-icon 
              name="checkmark" 
              size="24" 
            <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>
@@ -188,14 +212,17 @@
  components: {MyTag,UIcon,UButton,UForm,UFormItem,UInput,USearch,UPopup},
  data() {
    return {
      fileTypeShow: false,
      cosClient: null,
      bucket: '',
      region: '',
      endpoint: '',
      videoUploadProgress: 0,
      loading: false,
      showGoodsPicker: false,
      goodsSearch: '',
      tagInput: '',
      videoPreviewImgs: [], // 预览图片地址
      videoInfo: {
          url: '',
          fileKey: '',
@@ -212,6 +239,8 @@
        videoDuration: 0,
        videoFit: 'cover',
        goodsId: '',
        videoContentType: 'video',
        videoImgs: [],
        tags: [],
        fileInfo: {}
      },
@@ -236,25 +265,37 @@
          { required: true, message: '请输入视频标题', trigger: 'blur' },
          { min: 1, max: 20, message: '标题长度在1到20个字符', trigger: 'blur' }
        ]
      }
      },
      screenWidth: 375,
      gap: 10 // 图片间距
    };
  },
  computed: {
    canPublish() {
      return this.formData.videoFileKey && this.formData.title && this.formData.cover;
        if(this.formData.videoContentType === 'video') {
            return this.formData.videoFileKey && this.formData.title && this.formData.cover;
        } else if(this.formData.videoContentType === 'img') {
            return this.formData.videoImgs.length > 0 && this.formData.title;
        }
    },
    filteredGoods() {
      if (!this.goodsSearch) return this.goodsList;
      return this.goodsList.filter(goods => 
      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;
    }
    },
    // 计算每个图片项的宽度（考虑间距）
    itemWidth() {
      return (this.screenWidth - (this.gap * 4) - 20) / 3
    }
  },
  created() {
    
  onLoad() {
    // 获取屏幕宽度
    const systemInfo = uni.getSystemInfoSync()
    this.screenWidth = systemInfo.windowWidth
  },
  onShow() {
      this.initCOS()
@@ -278,7 +319,7 @@
          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
@@ -290,11 +331,17 @@
               });
               this.bucket = res.data.data.bucket
               this.region = res.data.data.region
               this.endpoint = res.data.data.endpoint
          })
		  

      },
    // 选择视频
    chooseVideo() {
      this.fileTypeShow = false;
      // 清空选择的图片
      this.videoPreviewImgs = [];
      this.formData.videoImgs = [];
      this.formData.videoContentType = 'video'
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
@@ -304,7 +351,7 @@
            // 获取文件名
            const tempPath = res.tempFilePath;
            let fileName = tempPath.substring(tempPath.lastIndexOf('/') + 1);
			

            // 处理安卓可能的URI编码
            if(fileName.indexOf('%') > -1) {
                fileName = decodeURIComponent(fileName);
@@ -322,12 +369,12 @@
           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, 
                FilePath: res.tempFilePath,
                SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值,5M */
                onProgress: (progressData) => {
                    console.log(progressData.percent);
@@ -362,27 +409,60 @@
    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();
      this.resetData()
      this.fileTypeShow = true
    },
    
    // 选择视频图集
    chooseImgs() {
      this.fileTypeShow = false
      // 清空选择的视频
      this.formData.videoFileKey = '';
      this.formData.cover = '';
      this.formData.videoContentType = 'img'
      uni.chooseImage({
        count: 9,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          res.tempFilePaths.forEach(tmpImg => {
              let fileName = tmpImg.substring(tmpImg.lastIndexOf('/') + 1);
              // 处理安卓可能的URI编码
              if(fileName.indexOf('%') > -1) {
                              fileName = decodeURIComponent(fileName);
              }
              const fileKey = getFileKey(fileName);
              this.cosClient.uploadFile({
                   Bucket: this.bucket,
                   Region: this.region,
                   Key: fileKey,
                   FilePath: tmpImg,
                   SliceSize: 1024 * 1024 * 5     /* 触发分块上传的阈值,5M */
               }, (err, data) => {
                   if (err) {
                     console.log('上传失败', err);
                   } else {
                       // 获取封面的访问地址
                     this.videoPreviewImgs.push(this.endpoint + '/' + fileKey);
                     this.formData.videoImgs.push(fileKey);
                   }
               });
          })

        }
      });
    },
    // 选择封面
    chooseCover() {
      uni.chooseImage({
@@ -401,41 +481,38 @@
               Bucket: this.bucket,
               Region: this.region,
               Key: fileKey,
               FilePath: res.tempFilePaths[0], 
               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
                   })
                   this.videoInfo.cover = this.endpoint + '/' + fileKey
                   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() !== '') {
@@ -466,7 +543,7 @@
        });
      }
    },
    

    // 选择推荐话题
    selectTopic(index) {
      const tag = this.recommendedTags[index]
@@ -477,7 +554,7 @@
        });
        return;
      }
      

      if (this.formData.tags.filter(item => item.tagName === tag.tagName).length < 1) {
        this.formData.tags.push(tag);
        this.tagInput = '';
@@ -488,12 +565,12 @@
        });
      }
    },
    

    // 移除标签
    removeTag(index) {
      this.formData.tags.splice(index, 1);
    },
    

    // 处理发布
    handlePublish() {
      this.$refs.formRef.validate(valid => {
@@ -508,29 +585,11 @@
              });
              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.resetData();
              this.selectedGoods = null;
              this.tagInput = '';
              this.recommendedTags = [];
			  

              // TODO 先跳首页,后面跳我的视频页面
              setTimeout(() => {
                uni.switchTab({
@@ -545,21 +604,45 @@
          });
        }
      });
    }
    },
    resetData() {
        // 重置表单
        this.videoInfo = {
              url: '',
              fileKey: '',
              fileType: '',
              fileSize: 0,
              originalFileName: '',
              cover: ''
        };
        this.formData = {
          id: '',
          title: '',
          videoFileKey: '',
          cover: '',
          videoFit: 'cover',
          videoDuration: 0,
          goodsId: '',
          videoContentType: 'video',
          videoImgs: [],
          tags: [],
          fileInfo: {}
        };
        this.videoPreviewImgs = []
    }
  }
};
</script>

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

.upload-section {
  background-color: #f8f8f8;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: center;
@@ -599,9 +682,11 @@
}

.video-actions {
  width: 100%;
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
}

@@ -767,4 +852,22 @@
    height: 25px;
    margin-top: 10px;
}
</style>

.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.image-item {
  margin: 5px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.image {
  width: 100%;
  height: 100%;
}
</style>

 uni_modules/uni-swiper-dot/changelog.md

New file
@@ -0,0 +1,12 @@
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.6（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.0.5（2021-02-05）
- 调整为uni_modules目录规范
- 新增 clickItem 事件，支持指示点控制轮播
- 新增 支持 pc 可用

 uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue

New file
@@ -0,0 +1,218 @@
<template>
    <view class="uni-swiper__warp">
        <slot />
        <view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
            <view v-for="(item,index) in info" @click="clickItem(index)" :style="{
        'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
             :key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
        </view>
        <view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
            <view v-for="(item,index) in info" @click="clickItem(index)" :style="{
        'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
             :key="index" class="uni-swiper__dots-item" />
        </view>
        <view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
            <view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
            'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
             :key="index" class="uni-swiper__dots-item " />
        </view>
        <view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
            <text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
        </view>
        <view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
            <view v-for="(item,index) in info" @click="clickItem(index)" :style="{
        'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
             :key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
        </view>
    </view>
</template>

<script>

    /**
     * SwiperDod 轮播图指示点
     * @description 自定义轮播图指示点
     * @tutorial https://ext.dcloud.net.cn/plugin?id=284
     * @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
     * @property {String} mode = [default|round|nav|indexes] 指示点的类型
     *     @value defualt 默认指示点
     *     @value round 圆形指示点
     *     @value nav 条形指示点
     *     @value indexes 索引指示点
     * @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
     * @property {String} info 轮播图的数据，通过数组长度决定指示点个数
     * @property {Object} dotsStyles 指示点样式
     * @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
     */

    export default {
        name: 'UniSwiperDot',
        emits:['clickItem'],
        props: {
            info: {
                type: Array,
                default () {
                    return []
                }
            },
            current: {
                type: Number,
                default: 0
            },
            dotsStyles: {
                type: Object,
                default () {
                    return {}
                }
            },
            // 类型 ：default(默认) indexes long nav
            mode: {
                type: String,
                default: 'default'
            },
            // 只在 nav 模式下生效，变量名称
            field: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                dots: {
                    width: 6,
                    height: 6,
                    bottom: 10,
                    color: '#fff',
                    backgroundColor: 'rgba(0, 0, 0, .3)',
                    border: '1px rgba(0, 0, 0, .3) solid',
                    selectedBackgroundColor: '#333',
                    selectedBorder: '1px rgba(0, 0, 0, .9) solid'
                }
            }
        },
        watch: {
            dotsStyles(newVal) {
                this.dots = Object.assign(this.dots, this.dotsStyles)
            },
            mode(newVal) {
                if (newVal === 'indexes') {
                    this.dots.width = 14
                    this.dots.height = 14
                } else {
                    this.dots.width = 6
                    this.dots.height = 6
                }
            }

        },
        created() {
            if (this.mode === 'indexes') {
                this.dots.width = 12
                this.dots.height = 12
            }
            this.dots = Object.assign(this.dots, this.dotsStyles)
        },
        methods: {
            clickItem(index) {
                this.$emit('clickItem', index)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .uni-swiper__warp {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .uni-swiper__dots-box {
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .uni-swiper__dots-item {
        width: 8px;
        border-radius: 100px;
        margin-left: 6px;
        background-color: rgba(0, 0, 0, 0.4);
        /* #ifndef APP-NVUE */
        cursor: pointer;
        /* #endif */
        /* #ifdef H5 */
        // border-width: 5px 0;
        // border-style: solid;
        // border-color: transparent;
        // background-clip: padding-box;
        /* #endif */
        // transition: width 0.2s linear;  不要取消注释，不然会不能变色
    }

    .uni-swiper__dots-item:first-child {
        margin: 0;
    }

    .uni-swiper__dots-default {
        border-radius: 100px;
    }

    .uni-swiper__dots-long {
        border-radius: 50px;
    }

    .uni-swiper__dots-bar {
        border-radius: 50px;
    }

    .uni-swiper__dots-nav {
        bottom: 0px;
        // height: 26px;
        padding: 8px 0;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .uni-swiper__dots-nav-item {
        /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
        font-size: 14px;
        color: #fff;
        margin: 0 15px;
    }

    .uni-swiper__dots-indexes {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        // flex: 1;
        justify-content: center;
        align-items: center;
    }

    .uni-swiper__dots-indexes-text {
        color: #fff;
        font-size: 12px;
        line-height: 14px;
    }
</style>

 uni_modules/uni-swiper-dot/package.json

New file
@@ -0,0 +1,87 @@
{
  "id": "uni-swiper-dot",
  "displayName": "uni-swiper-dot 轮播图指示点",
  "version": "1.2.0",
  "description": "自定义轮播图指示点组件",
  "keywords": [
    "uni-ui",
    "uniui",
    "轮播图指示点",
    "dot",
    "swiper"
],
  "repository": "https://github.com/dcloudio/uni-ui",
  "engines": {
    "HBuilderX": ""
  },
  "directories": {
    "example": "../../temps/example_temps"
  },
  "dcloudext": {
    "category": [
      "前端组件",
      "通用组件"
    ],
    "sale": {
      "regular": {
        "price": "0.00"
      },
      "sourcecode": {
        "price": "0.00"
      }
    },
    "contact": {
      "qq": ""
    },
    "declaration": {
      "ads": "无",
      "data": "无",
      "permissions": "无"
    },
    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
  },
  "uni_modules": {
    "dependencies": ["uni-scss"],
    "encrypt": [],
    "platforms": {
      "cloud": {
        "tcb": "y",
        "aliyun": "y"
      },
      "client": {
        "App": {
          "app-vue": "y",
          "app-nvue": "y"
        },
        "H5-mobile": {
          "Safari": "y",
          "Android Browser": "y",
          "微信浏览器(Android)": "y",
          "QQ浏览器(Android)": "y"
        },
        "H5-pc": {
          "Chrome": "y",
          "IE": "y",
          "Edge": "y",
          "Firefox": "y",
          "Safari": "y"
        },
        "小程序": {
          "微信": "y",
          "阿里": "y",
          "百度": "y",
          "字节跳动": "y",
          "QQ": "y"
        },
        "快应用": {
          "华为": "u",
          "联盟": "u"
        },
        "Vue": {
            "vue2": "y",
            "vue3": "y"
        }
      }
    }
  }
}

 uni_modules/uni-swiper-dot/readme.md

New file
@@ -0,0 +1,11 @@


## SwiperDot 轮播图指示点
> **组件名：uni-swiper-dot**
> 代码块： `uSwiperDot`


自定义轮播图指示点

### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839