From 440aaabacad16b2f86e5ea0a5423b476c1f6a072 Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期五, 27 六月 2025 10:11:43 +0800
Subject: [PATCH] 活动样式调整
---
pages/tabbar/video/video.vue | 177 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 119 insertions(+), 58 deletions(-)
diff --git a/pages/tabbar/video/video.vue b/pages/tabbar/video/video.vue
index b996395..619c135 100644
--- a/pages/tabbar/video/video.vue
+++ b/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="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="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: 1,
+ 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: [
@@ -278,12 +276,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 +288,9 @@
// 鑾峰彇灞忓箷瀹藉害
const systemInfo = uni.getSystemInfoSync()
this.screenWidth = systemInfo.windowWidth
+ this.goodsQuery.pageNumber = 1
+ this.goodsQuery.pageSize = 10
+ this.getVideoGoodsByEs()
},
onShow() {
this.initCOS()
@@ -303,6 +298,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 +450,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 +541,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 +636,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 +681,13 @@
cover: '',
videoFit: 'cover',
videoDuration: 0,
- goodsId: '',
videoContentType: 'video',
videoImgs: [],
tags: [],
fileInfo: {}
};
this.videoPreviewImgs = []
+ this.selectedGoodsList = []
}
}
};
@@ -707,6 +766,7 @@
background-color: #f9f9f9;
border-radius: 8rpx;
margin-top: 15rpx;
+ position: relative;
}
.goods-preview .goods-image {
@@ -778,10 +838,11 @@
}
.publish-btn {
- position: fixed;
+ /* position: fixed;
bottom: 100rpx;
left: 20rpx;
- right: 20rpx;
+ right: 20rpx; */
+ margin-top: 40rpx;
}
.goods-picker {
--
Gitblit v1.8.0