绿满眶商城微信小程序-uniapp
zxl
4 天以前 c9928dd4f6d25e2339ea1400f59ec58674a927a7
pages/tabbar/video/video.vue
@@ -124,16 +124,23 @@
                @click="chooseGoods"
              ></u-icon>
            </u-input>
            <view class="goods-preview" v-if="selectedGoods">
              <image :src="selectedGoods.image" class="goods-image"></image>
            <view class="goods-preview" @click="chooseGoods" v-for="goods in selectedGoodsList" :key="goods.id">
              <image :src="goods.thumbnail" class="goods-image"></image>
              <view class="goods-info">
                <text class="goods-name">{{ selectedGoods.name }}</text>
                <text class="goods-price">¥{{ selectedGoods.price }}</text>
                <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.goodsNum" :min="0"/>
               </view>
            </view>
              </view>
              <u-icon
            style="position: absolute;right: 8rpx;top: 8rpx"
                name="close"
                size="20"
                @click="clearGoods"
                size="24"
                @click.stop="clearGoods(goods)"
              ></u-icon>
            </view>
          </view>
@@ -163,27 +170,30 @@
        </view>
        <view class="search-bar">
          <u-search
            v-model="goodsSearch"
            placeholder="搜索商品名称"
            v-model="goodsQuery.keyword"
            placeholder="搜索商品"
            :showAction="false"
         @change="handlerGoodsSearch"
          ></u-search>
        </view>
        <scroll-view class="goods-list" scroll-y>
        <scroll-view class="goods-list" @scrolltolower="loadMoreGoods" scroll-y :show-scrollbar="false">
          <view
            class="goods-item"
            v-for="goods in filteredGoods"
            v-for="(goods, index) in goodsList"
            :key="goods.id"
            @click="selectGoods(goods)"
            @click="selectGoods(goods, index)"
          >
            <image :src="goods.image" class="goods-image"></image>
            <image :src="goods.thumbnail" class="goods-image"></image>
            <view class="goods-info">
              <text class="goods-name">{{ goods.name }}</text>
              <text class="goods-name">{{ goods.goodsName }}</text>
              <text class="goods-price">¥{{ goods.price }}</text>
<!--              <view>{{ goods.sellingPoint }}</view> -->
            </view>
            <u-icon
           v-if="goods.selected"
              name="checkmark"
              size="24"
              :color="selectedGoods && selectedGoods.id === goods.id ? '#2979ff' : '#ccc'"
              size="36"
              :color="'#2979ff'"
            ></u-icon>
          </view>
        </scroll-view>
@@ -195,21 +205,17 @@
</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";
import { publish } from "@/api/video.js";
import { getRecommendTag3 } from "@/api/video-tag.js";
import { getFileKey } from "@/utils/file.js";
import { getVideoGoodsList } from "@/api/goods.js";
export default {
  components: {MyTag,UIcon,UButton,UForm,UFormItem,UInput,USearch,UPopup},
  components: {MyTag},
  data() {
    return {
     fileTypeShow: false,
@@ -220,7 +226,6 @@
     videoUploadProgress: 0,
      loading: false,
      showGoodsPicker: false,
      goodsSearch: '',
      tagInput: '',
     videoPreviewImgs: [], // 预览图片地址
      videoInfo: {
@@ -230,6 +235,12 @@
        fileSize: 0,
        originalFileName: '',
        cover: ''
     },
     goodsQuery: {
      keyword: '',
      searchFromSelfStore: false, // 是否是查询自家店铺商品
      pageNumber: 1,
      pageSize: 5
     },
      formData: {
      id: '',
@@ -244,21 +255,9 @@
        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'
        }
      ],
      selectedGoodsList: [],
      goodsList: [],
     noMoreGoods: false, // 没有更多商品了
      recommendedTags: [],
      rules: {
        title: [
@@ -278,12 +277,6 @@
         return this.formData.videoImgs.length > 0 && this.formData.title;
      }
    },
    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;
    },
@@ -296,6 +289,9 @@
    // 获取屏幕宽度
   const systemInfo = uni.getSystemInfoSync()
   this.screenWidth = systemInfo.windowWidth
   this.goodsQuery.pageNumber = 1
   this.goodsQuery.pageSize = 10
   this.getVideoGoodsByEs()
  },
  onShow() {
     this.initCOS()
@@ -303,6 +299,40 @@
   this.getRecommendTags()
  },
  methods: {
     // 加载更多商品
     loadMoreGoods() {
      if(this.noMoreGoods) {
         return
      }
      this.goodsQuery.pageNumber += 1;
      this.goodsQuery.pageSize = 5;
      this.getVideoGoodsByEs()
     },
     // 处理商品搜索值
     handlerGoodsSearch() {
        this.goodsQuery.pageNumber = 1
        this.goodsQuery.pageSize = 10
        this.getVideoGoodsByEs()
     },
     // 获取商品分页
     async getVideoGoodsByEs() {
      getVideoGoodsList(this.goodsQuery).then(res => {
         if(this.goodsQuery.pageNumber === 1) {
            this.goodsList = res.data.data
         } else {
            this.goodsList = [
              ...this.goodsList,
              ...res.data.data.filter(
                (newItem) => !this.goodsList.some((oldItem) => oldItem.id === newItem.id)
              ),
            ];
         }
         if(res.data.data.length < this.goodsQuery.pageSize) {
            this.noMoreGoods = true;
         }
      })
     },
     // 获取推荐标签
     async getRecommendTags(type) {
        const params = {
@@ -421,7 +451,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
    },
    // 选择视频图集
@@ -497,20 +542,36 @@
    // 选择商品
    chooseGoods() {
     if(this.selectedGoodsList.length > 0) {
             const selectedGoodsIds = new Set(this.selectedGoodsList.map(i => i.goodsId));
                console.log(selectedGoodsIds, "mimade");
             this.goodsList?.forEach(goods => {
                 this.$set(goods, 'selected', selectedGoodsIds.has(goods.goodsId));
               });
     }
      this.showGoodsPicker = true;
    },
    // 选择具体商品
    selectGoods(goods) {
      this.selectedGoods = goods;
      this.formData.goodsId = goods.id;
      this.showGoodsPicker = false;
    selectGoods(goods, index) {
     if(! this.selectedGoodsList.some(item => item.id === goods.id)) {
      goods["goodsNum"] = 1
      this.selectedGoodsList.push(goods)
      this.goodsList[index].selected = true
     } else {
      this.goodsList[index].selected = false
      this.selectedGoodsList = this.selectedGoodsList.filter(item => item.id !== goods.id);
     }
    },
    // 清除商品
    clearGoods() {
      this.selectedGoods = null;
      this.formData.goodsId = '';
    clearGoods(goods) {
      this.selectedGoodsList = this.selectedGoodsList.filter(item => item.id !== goods.id);
     this.goodsList.forEach(item => {
        if(item.id === goods.id) {
           item.selected = false
        }
     })
    },
    // 搜索热门话题
@@ -577,7 +638,7 @@
        if (valid && this.canPublish) {
          this.loading = true;
          this.formData.fileInfo = this.videoInfo;
        console.log(this.formData);
        this.formData["goodsList"] = this.selectedGoodsList.map(item => {return {goodsId: item.goodsId, goodsNum: item.goodsNum}});
          publish(this.formData).then(res => {
           uni.showToast({
             title: '视频已提交审核~',
@@ -629,6 +690,7 @@
        fileInfo: {}
      };
      this.videoPreviewImgs = []
      this.selectedGoodsList = []
   }
  }
};
@@ -707,6 +769,7 @@
  background-color: #f9f9f9;
  border-radius: 8rpx;
  margin-top: 15rpx;
  position: relative;
}
.goods-preview .goods-image {
@@ -778,10 +841,11 @@
}
.publish-btn {
  position: fixed;
  /* position: fixed;
  bottom: 100rpx;
  left: 20rpx;
  right: 20rpx;
  right: 20rpx; */
  margin-top: 40rpx;
}
.goods-picker {