| | |
| | | <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> |
| | |
| | | @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" |
| | |
| | | @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 |
| | |
| | | ></u-icon> |
| | | </u-input> |
| | | <view class="goods-preview" @click="chooseGoods" v-for="goods in selectedGoodsList" :key="goods.id"> |
| | | <image :src="goods.thumbnail" class="goods-image"></image> |
| | | <image :src="endpoint + '/' + goods.thumbnail" class="goods-image"></image> |
| | | <view class="goods-info"> |
| | | <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.selectNum"/> |
| | | <uni-number-box v-model="goods.goodsNum" :min="1"/> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | :key="goods.id" |
| | | @click="selectGoods(goods, index)" |
| | | > |
| | | <image :src="goods.thumbnail" class="goods-image"></image> |
| | | <image :src="endpoint + '/' + goods.thumbnail" class="goods-image"></image> |
| | | <view class="goods-info"> |
| | | <text class="goods-name">{{ goods.goodsName }}</text> |
| | | <text class="goods-price">¥{{ goods.price }}</text> |
| | |
| | | </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 { getVideoGoodsList } from "@/api/goods.js"; |
| | | |
| | | export default { |
| | | components: {MyTag,UIcon,UButton,UForm,UFormItem,UInput,USearch,UPopup}, |
| | | components: {MyTag}, |
| | | data() { |
| | | return { |
| | | fileTypeShow: false, |
| | |
| | | goodsQuery: { |
| | | keyword: '', |
| | | searchFromSelfStore: false, // 是否是查询自家店铺商品 |
| | | pageNumber: 1, |
| | | pageNumber: 0, |
| | | pageSize: 5 |
| | | }, |
| | | formData: { |
| | |
| | | videoFileKey: '', |
| | | videoDuration: 0, |
| | | videoFit: 'cover', |
| | | goodsId: '', |
| | | videoContentType: 'video', |
| | | videoImgs: [], |
| | | tags: [], |
| | |
| | | ] |
| | | }, |
| | | screenWidth: 375, |
| | | gap: 10 // 图片间距 |
| | | gap: 10, // 图片间距 |
| | | windowHeight: 0, |
| | | marginBottom: 0 |
| | | }; |
| | | }, |
| | | computed: { |
| | |
| | | // 获取屏幕宽度 |
| | | const systemInfo = uni.getSystemInfoSync() |
| | | this.screenWidth = systemInfo.windowWidth |
| | | this.goodsQuery.pageNumber = 1 |
| | | this.windowHeight = systemInfo.windowHeight |
| | | this.marginBottom = uni.getSystemInfoSync().safeAreaInsets.bottom |
| | | this.goodsQuery.pageNumber = 0 |
| | | this.goodsQuery.pageSize = 10 |
| | | this.getVideoGoodsByEs() |
| | | }, |
| | |
| | | }, |
| | | // 处理商品搜索值 |
| | | handlerGoodsSearch() { |
| | | this.goodsQuery.pageNumber = 1 |
| | | this.goodsQuery.pageNumber = 0 |
| | | this.goodsQuery.pageSize = 10 |
| | | this.getVideoGoodsByEs() |
| | | }, |
| | |
| | | async getVideoGoodsByEs() { |
| | | getVideoGoodsList(this.goodsQuery).then(res => { |
| | | |
| | | if(this.goodsQuery.pageNumber === 1) { |
| | | if(this.goodsQuery.pageNumber === 0) { |
| | | this.goodsList = res.data.data |
| | | } else { |
| | | this.goodsList = [ |
| | |
| | | }, |
| | | // 重新上传 |
| | | 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 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, index) { |
| | | if(! this.selectedGoodsList.some(item => item.id === goods.id)) { |
| | | goods["selectNum"] = 1 |
| | | goods["goodsNum"] = 1 |
| | | this.selectedGoodsList.push(goods) |
| | | this.goodsList[index].selected = true |
| | | } else { |
| | |
| | | if (valid && this.canPublish) { |
| | | this.loading = true; |
| | | this.formData.fileInfo = this.videoInfo; |
| | | this.formData["goodsList"] = this.selectedGoodsList.map(item => {return {goodsId: item.goodsId, goodsNum: item.selectNum}}); |
| | | 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: '视频已提交审核~', |
| | |
| | | cover: '', |
| | | videoFit: 'cover', |
| | | videoDuration: 0, |
| | | goodsId: '', |
| | | videoContentType: 'video', |
| | | videoImgs: [], |
| | | tags: [], |
| | |
| | | <style scoped> |
| | | .publish-container { |
| | | padding: 10px; |
| | | padding-bottom: 120rpx; |
| | | overflow-y: scroll; |
| | | } |
| | | |
| | | .upload-section { |
| | |
| | | flex-wrap: wrap; |
| | | margin-top: 15rpx; |
| | | line-height: 22px; |
| | | height: 80rpx; |
| | | } |
| | | |
| | | .hot-topics { |
| | |
| | | flex-direction: column; |
| | | margin-top: 15rpx; |
| | | margin-bottom: 15rpx; |
| | | height: 46rpx; |
| | | } |
| | | |
| | | .section-title { |