| | |
| | | @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> |
| | |
| | | </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> |
| | |
| | | </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, |
| | |
| | | videoUploadProgress: 0, |
| | | loading: false, |
| | | showGoodsPicker: false, |
| | | goodsSearch: '', |
| | | tagInput: '', |
| | | videoPreviewImgs: [], // 预览图片地址 |
| | | videoInfo: { |
| | |
| | | fileSize: 0, |
| | | originalFileName: '', |
| | | cover: '' |
| | | }, |
| | | goodsQuery: { |
| | | keyword: '', |
| | | searchFromSelfStore: false, // 是否是查询自家店铺商品 |
| | | pageNumber: 1, |
| | | pageSize: 5 |
| | | }, |
| | | formData: { |
| | | id: '', |
| | |
| | | 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: [ |
| | |
| | | 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; |
| | | }, |
| | |
| | | // 获取屏幕宽度 |
| | | const systemInfo = uni.getSystemInfoSync() |
| | | this.screenWidth = systemInfo.windowWidth |
| | | this.goodsQuery.pageNumber = 1 |
| | | this.goodsQuery.pageSize = 10 |
| | | this.getVideoGoodsByEs() |
| | | }, |
| | | onShow() { |
| | | this.initCOS() |
| | |
| | | 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 = { |
| | |
| | | }, |
| | | // 重新上传 |
| | | 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 |
| | | }, |
| | | // 选择视频图集 |
| | |
| | | |
| | | // 选择商品 |
| | | 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 |
| | | } |
| | | }) |
| | | }, |
| | | |
| | | // 搜索热门话题 |
| | |
| | | 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: '视频已提交审核~', |
| | |
| | | fileInfo: {} |
| | | }; |
| | | this.videoPreviewImgs = [] |
| | | this.selectedGoodsList = [] |
| | | } |
| | | } |
| | | }; |
| | |
| | | background-color: #f9f9f9; |
| | | border-radius: 8rpx; |
| | | margin-top: 15rpx; |
| | | position: relative; |
| | | } |
| | | |
| | | .goods-preview .goods-image { |
| | |
| | | } |
| | | |
| | | .publish-btn { |
| | | position: fixed; |
| | | /* position: fixed; |
| | | bottom: 100rpx; |
| | | left: 20rpx; |
| | | right: 20rpx; |
| | | right: 20rpx; */ |
| | | margin-top: 40rpx; |
| | | } |
| | | |
| | | .goods-picker { |