From d3d0b4dbb4f1f8c4784c834e0a39feba8aa5afa5 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期三, 02 七月 2025 10:41:08 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
pages/tabbar/video/video.vue | 195 ++++++++++++++++++++++++++++++++----------------
1 files changed, 131 insertions(+), 64 deletions(-)
diff --git a/pages/tabbar/video/video.vue b/pages/tabbar/video/video.vue
index b996395..c70a040 100644
--- a/pages/tabbar/video/video.vue
+++ b/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
@@ -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="endpoint + '/' + 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="1"/>
+ </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="endpoint + '/' + 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: {
@@ -231,6 +236,12 @@
originalFileName: '',
cover: ''
},
+ goodsQuery: {
+ keyword: '',
+ searchFromSelfStore: false, // 鏄惁鏄煡璇㈣嚜瀹跺簵閾哄晢鍝�
+ pageNumber: 0,
+ pageSize: 5
+ },
formData: {
id: '',
title: '',
@@ -238,27 +249,14 @@
videoFileKey: '',
videoDuration: 0,
videoFit: 'cover',
- goodsId: '',
videoContentType: 'video',
videoImgs: [],
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: [
@@ -267,7 +265,9 @@
]
},
screenWidth: 375,
- gap: 10 // 鍥剧墖闂磋窛
+ gap: 10, // 鍥剧墖闂磋窛
+ windowHeight: 0,
+ marginBottom: 0
};
},
computed: {
@@ -277,12 +277,6 @@
} 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 =>
- goods.name.toLowerCase().includes(this.goodsSearch.toLowerCase())
- );
},
showTopicRecommendations() {
return (this.tagInput === '' || this.recommendedTags.length > 0) && this.formData.tags.length < 5;
@@ -296,6 +290,11 @@
// 鑾峰彇灞忓箷瀹藉害
const systemInfo = uni.getSystemInfoSync()
this.screenWidth = systemInfo.windowWidth
+ this.windowHeight = systemInfo.windowHeight
+ this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom
+ this.goodsQuery.pageNumber = 0
+ this.goodsQuery.pageSize = 10
+ this.getVideoGoodsByEs()
},
onShow() {
this.initCOS()
@@ -303,6 +302,40 @@
this.getRecommendTags()
},
methods: {
+ // 鍔犺浇鏇村鍟嗗搧
+ loadMoreGoods() {
+ if(this.noMoreGoods) {
+ return
+ }
+ this.goodsQuery.pageNumber += 1;
+ this.goodsQuery.pageSize = 5;
+ this.getVideoGoodsByEs()
+ },
+ // 澶勭悊鍟嗗搧鎼滅储鍊�
+ handlerGoodsSearch() {
+ this.goodsQuery.pageNumber = 0
+ this.goodsQuery.pageSize = 10
+ this.getVideoGoodsByEs()
+ },
+ // 鑾峰彇鍟嗗搧鍒嗛〉
+ async getVideoGoodsByEs() {
+ getVideoGoodsList(this.goodsQuery).then(res => {
+
+ if(this.goodsQuery.pageNumber === 0) {
+ 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 +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
},
// 閫夋嫨瑙嗛鍥鹃泦
@@ -497,20 +545,35 @@
// 閫夋嫨鍟嗗搧
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) {
- 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 +640,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, goodsSkuId: item.id, goodsNum: item.goodsNum}});
publish(this.formData).then(res => {
uni.showToast({
title: '瑙嗛宸叉彁浜ゅ鏍竳',
@@ -622,13 +685,13 @@
cover: '',
videoFit: 'cover',
videoDuration: 0,
- goodsId: '',
videoContentType: 'video',
videoImgs: [],
tags: [],
fileInfo: {}
};
this.videoPreviewImgs = []
+ this.selectedGoodsList = []
}
}
};
@@ -637,7 +700,7 @@
<style scoped>
.publish-container {
padding: 10px;
- padding-bottom: 120rpx;
+ overflow-y: scroll;
}
.upload-section {
@@ -707,6 +770,7 @@
background-color: #f9f9f9;
border-radius: 8rpx;
margin-top: 15rpx;
+ position: relative;
}
.goods-preview .goods-image {
@@ -752,6 +816,7 @@
flex-wrap: wrap;
margin-top: 15rpx;
line-height: 22px;
+ height: 80rpx;
}
.hot-topics {
@@ -759,6 +824,7 @@
flex-direction: column;
margin-top: 15rpx;
margin-bottom: 15rpx;
+ height: 46rpx;
}
.section-title {
@@ -778,10 +844,11 @@
}
.publish-btn {
- position: fixed;
+ /* position: fixed;
bottom: 100rpx;
left: 20rpx;
- right: 20rpx;
+ right: 20rpx; */
+ margin-top: 40rpx;
}
.goods-picker {
--
Gitblit v1.8.0