<template>
|
<view class="publish-container">
|
<!-- 视频上传区域 -->
|
<view class="upload-section">
|
<view class="upload-btn" @click="chooseVideo" v-if="!videoInfo.url">
|
<u-icon name="plus" size="40" color="#999"></u-icon>
|
<text class="upload-text">点击上传视频</text>
|
<text class="upload-tips">支持MP4格式，最长60秒</text>
|
</view>
|
|
<view class="video-preview" v-else>
|
<video
|
:src="videoInfo.url"
|
controls
|
class="video-player"
|
:poster="videoInfo.cover || ''"
|
></video>
|
<view class="video-actions">
|
<u-button type="error" size="mini" @click="reUpload">重新上传</u-button>
|
<u-button type="primary" size="mini" @click="chooseCover" v-if="videoInfo.url">选择封面</u-button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 视频信息表单 -->
|
<view class="form-section">
|
<u-form :model="formData" ref="formRef" labelWidth="80">
|
<!-- 标题输入 -->
|
<u-form-item label="标题" prop="title" borderBottom>
|
<u-input
|
v-model="formData.title"
|
placeholder="请输入视频标题"
|
maxlength="30"
|
clearable
|
/>
|
</u-form-item>
|
|
<!-- 话题输入 -->
|
<u-form-item label="话题" prop="tags" borderBottom>
|
<view class="tags-input-container">
|
<u-input
|
v-model="tagInput"
|
placeholder="输入话题，回车确认"
|
clearable
|
@confirm="addTag"
|
@blur="addTag"
|
@input="searchHotTopics"
|
></u-input>
|
<!-- 已选话题展示 -->
|
<view class="tags-display" v-if="formData.tags.length > 0">
|
<u-tag
|
v-for="(tag, index) in formData.tags"
|
:key="index"
|
:text="tag"
|
closable
|
@close="removeTag(index)"
|
size="medium"
|
type="primary"
|
style="margin-right: 10rpx; margin-bottom: 10rpx;"
|
/>
|
</view>
|
<text class="tags-count" v-if="formData.tags.length > 0">
|
已选 {{ formData.tags.length }}/5
|
</text>
|
</view>
|
</u-form-item>
|
|
|
<!-- 话题推荐 -->
|
<view class="hot-topics" v-if="showTopicRecommendations">
|
<text class="section-title">{{ tagInput ? '推荐话题' : '热门话题' }}</text>
|
<view class="topic-list">
|
<u-tag
|
v-for="(topic, index) in recommendedTopics"
|
:key="index"
|
:text="topic"
|
size="medium"
|
type="info"
|
@click="selectTopic(topic)"
|
style="margin-right: 10rpx; margin-bottom: 10rpx;"
|
/>
|
</view>
|
</view>
|
|
<!-- 商品链接 -->
|
<u-form-item label="商品" prop="goodsLink" borderBottom>
|
<view class="goods-link-container">
|
<u-input
|
placeholder="可选择推荐商品"
|
clearable
|
v-if="!selectedGoods"
|
@click="chooseGoods"
|
disabled
|
>
|
<u-icon
|
slot="right"
|
name="search"
|
size="24"
|
@click="chooseGoods"
|
></u-icon>
|
</u-input>
|
<view class="goods-preview" v-if="selectedGoods">
|
<image :src="selectedGoods.image" class="goods-image"></image>
|
<view class="goods-info">
|
<text class="goods-name">{{ selectedGoods.name }}</text>
|
<text class="goods-price">¥{{ selectedGoods.price }}</text>
|
</view>
|
<u-icon
|
name="close"
|
size="20"
|
@click="clearGoods"
|
></u-icon>
|
</view>
|
</view>
|
</u-form-item>
|
</u-form>
|
</view>
|
|
<!-- 发布按钮 -->
|
<view class="publish-btn">
|
<u-button
|
type="primary"
|
shape="circle"
|
:loading="loading"
|
@click="handlePublish"
|
:disabled="!canPublish"
|
>
|
{{ loading ? '发布中...' : '立即发布' }}
|
</u-button>
|
</view>
|
|
<!-- 商品选择弹窗 -->
|
<u-popup v-model="showGoodsPicker" mode="bottom" round="20" height="70%">
|
<view class="goods-picker">
|
<view class="picker-header">
|
<text class="picker-title">选择商品</text>
|
<u-icon name="close" size="24" @click="showGoodsPicker = false"></u-icon>
|
</view>
|
<view class="search-bar">
|
<u-search
|
v-model="goodsSearch"
|
placeholder="搜索商品名称"
|
:showAction="false"
|
></u-search>
|
</view>
|
<scroll-view class="goods-list" scroll-y>
|
<view
|
class="goods-item"
|
v-for="goods in filteredGoods"
|
:key="goods.id"
|
@click="selectGoods(goods)"
|
>
|
<image :src="goods.image" class="goods-image"></image>
|
<view class="goods-info">
|
<text class="goods-name">{{ goods.name }}</text>
|
<text class="goods-price">¥{{ goods.price }}</text>
|
</view>
|
<u-icon
|
name="checkmark"
|
size="24"
|
:color="selectedGoods && selectedGoods.id === goods.id ? '#2979ff' : '#ccc'"
|
></u-icon>
|
</view>
|
</scroll-view>
|
</view>
|
</u-popup>
|
|
<custom-tabbar bgColor="#ffffff" selected="video"></custom-tabbar>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
loading: false,
|
showGoodsPicker: false,
|
goodsSearch: '',
|
tagInput: '',
|
videoInfo: {
|
url: '',
|
cover: '',
|
duration: 0,
|
size: 0
|
},
|
formData: {
|
title: '',
|
goodsLink: '',
|
tags: []
|
},
|
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'
|
},
|
{
|
id: '3',
|
name: '便携式充电宝10000mAh',
|
price: '99.00',
|
image: 'https://via.placeholder.com/100'
|
},
|
{
|
id: '4',
|
name: '高清广角手机镜头',
|
price: '59.00',
|
image: 'https://via.placeholder.com/100'
|
},
|
{
|
id: '5',
|
name: '多功能折叠键盘',
|
price: '159.00',
|
image: 'https://via.placeholder.com/100'
|
}
|
],
|
hotTopics: [
|
'#五一旅行打卡',
|
'#美食探店',
|
'#科技新品',
|
'#健身日常',
|
'#宠物萌宠'
|
],
|
recommendedTopics: [],
|
rules: {
|
title: [
|
{ required: true, message: '请输入视频标题', trigger: 'blur' },
|
{ min: 2, max: 30, message: '标题长度在2到30个字符', trigger: 'blur' }
|
],
|
goodsLink: [
|
{ required: true, message: '请选择商品链接', trigger: 'change' }
|
],
|
tags: [
|
{ validator: (rule, value, callback) => {
|
if (value.length === 0) {
|
callback(new Error('请至少添加一个话题'));
|
} else {
|
callback();
|
}
|
}, trigger: 'change' }
|
]
|
}
|
};
|
},
|
computed: {
|
canPublish() {
|
return this.videoInfo.url && this.formData.title && this.formData.goodsLink && this.formData.tags.length > 0;
|
},
|
filteredGoods() {
|
if (!this.goodsSearch) return this.goodsList;
|
return this.goodsList.filter(goods =>
|
goods.name.toLowerCase().includes(this.goodsSearch.toLowerCase())
|
);
|
},
|
showTopicRecommendations() {
|
return (this.tagInput === '' || this.recommendedTopics.length > 0) && this.formData.tags.length < 5;
|
}
|
},
|
created() {
|
// 初始化推荐话题
|
this.recommendedTopics = this.hotTopics.slice(0, 3);
|
},
|
methods: {
|
// 选择视频
|
chooseVideo() {
|
uni.chooseVideo({
|
sourceType: ['album', 'camera'],
|
maxDuration: 60,
|
camera: 'back',
|
success: (res) => {
|
this.videoInfo = {
|
url: res.tempFilePath,
|
duration: res.duration,
|
size: res.size,
|
cover: res.thumbTempFilePath
|
};
|
},
|
fail: (err) => {
|
uni.showToast({
|
title: '选择视频失败',
|
icon: 'none'
|
});
|
console.error(err);
|
}
|
});
|
},
|
|
// 重新上传
|
reUpload() {
|
this.videoInfo = {
|
url: '',
|
cover: '',
|
duration: 0,
|
size: 0
|
};
|
this.chooseVideo();
|
},
|
|
// 选择封面
|
chooseCover() {
|
uni.chooseImage({
|
count: 1,
|
sizeType: ['compressed'],
|
sourceType: ['album'],
|
success: (res) => {
|
this.videoInfo.cover = res.tempFilePaths[0];
|
}
|
});
|
},
|
|
// 选择商品
|
chooseGoods() {
|
this.showGoodsPicker = true;
|
},
|
|
// 选择具体商品
|
selectGoods(goods) {
|
this.selectedGoods = goods;
|
this.formData.goodsLink = `https://example.com/goods/${goods.id}`;
|
this.showGoodsPicker = false;
|
},
|
|
// 清除商品
|
clearGoods() {
|
this.selectedGoods = null;
|
this.formData.goodsLink = '';
|
},
|
|
// 搜索热门话题
|
searchHotTopics() {
|
if (this.tagInput.trim() === '') {
|
// 显示热门话题
|
this.recommendedTopics = this.hotTopics.slice(0, 3);
|
} else {
|
// 模拟搜索推荐话题
|
const input = this.tagInput.trim().toLowerCase();
|
this.recommendedTopics = this.hotTopics
|
.filter(topic => topic.toLowerCase().includes(input))
|
.slice(0, 3);
|
}
|
},
|
|
// 添加标签
|
addTag() {
|
const newTag = this.tagInput.trim();
|
if (newTag && this.formData.tags.length < 5) {
|
if (!this.formData.tags.includes(newTag)) {
|
this.formData.tags.push(newTag);
|
this.tagInput = '';
|
this.recommendedTopics = this.hotTopics.slice(0, 3); // 重置推荐
|
} else {
|
uni.showToast({
|
title: '话题已添加',
|
icon: 'none'
|
});
|
}
|
} else if (this.formData.tags.length >= 5) {
|
uni.showToast({
|
title: '最多添加5个话题',
|
icon: 'none'
|
});
|
}
|
},
|
|
// 选择推荐话题
|
selectTopic(topic) {
|
if (this.formData.tags.length >= 5) {
|
uni.showToast({
|
title: '最多添加5个话题',
|
icon: 'none'
|
});
|
return;
|
}
|
|
if (!this.formData.tags.includes(topic)) {
|
this.formData.tags.push(topic);
|
this.tagInput = '';
|
} else {
|
uni.showToast({
|
title: '话题已添加',
|
icon: 'none'
|
});
|
}
|
},
|
|
// 移除标签
|
removeTag(index) {
|
this.formData.tags.splice(index, 1);
|
},
|
|
// 处理发布
|
handlePublish() {
|
this.$refs.formRef.validate(valid => {
|
if (valid && this.canPublish) {
|
this.loading = true;
|
|
// 这里应该是上传视频到服务器的逻辑
|
// 模拟上传过程
|
setTimeout(() => {
|
this.loading = false;
|
uni.showToast({
|
title: '发布成功',
|
icon: 'success'
|
});
|
|
// 重置表单
|
this.videoInfo = {
|
url: '',
|
cover: '',
|
duration: 0,
|
size: 0
|
};
|
this.formData = {
|
title: '',
|
goodsLink: '',
|
tags: []
|
};
|
this.selectedGoods = null;
|
this.tagInput = '';
|
this.recommendedTopics = this.hotTopics.slice(0, 3);
|
|
// 返回上一页
|
setTimeout(() => {
|
uni.navigateBack();
|
}, 1500);
|
}, 2000);
|
} else {
|
uni.showToast({
|
title: '请完善视频信息',
|
icon: 'none'
|
});
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.publish-container {
|
padding: 20rpx;
|
padding-bottom: 120rpx;
|
}
|
|
.upload-section {
|
background-color: #f8f8f8;
|
border-radius: 16rpx;
|
padding: 40rpx;
|
margin-bottom: 30rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
min-height: 400rpx;
|
}
|
|
.upload-btn {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
color: #999;
|
}
|
|
.upload-text {
|
font-size: 32rpx;
|
margin: 20rpx 0 10rpx;
|
}
|
|
.upload-tips {
|
font-size: 24rpx;
|
color: #ccc;
|
}
|
|
.video-preview {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.video-player {
|
width: 100%;
|
height: 400rpx;
|
border-radius: 12rpx;
|
background-color: #000;
|
}
|
|
.video-actions {
|
margin-top: 20rpx;
|
display: flex;
|
justify-content: center;
|
gap: 20rpx;
|
}
|
|
.form-section {
|
background-color: #fff;
|
border-radius: 16rpx;
|
padding: 0 20rpx;
|
}
|
|
.goods-link-container {
|
width: 100%;
|
}
|
|
.goods-preview {
|
display: flex;
|
align-items: center;
|
padding: 15rpx;
|
background-color: #f9f9f9;
|
border-radius: 8rpx;
|
margin-top: 15rpx;
|
|
.goods-image {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 8rpx;
|
margin-right: 15rpx;
|
}
|
|
.goods-info {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
.goods-name {
|
font-size: 26rpx;
|
color: #333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.goods-price {
|
font-size: 28rpx;
|
color: #f44;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.tags-input-container {
|
width: 100%;
|
|
.tags-display {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 15rpx;
|
}
|
|
.hot-topics {
|
margin-top: 15rpx;
|
|
.section-title {
|
font-size: 24rpx;
|
color: #999;
|
display: block;
|
margin-bottom: 10rpx;
|
}
|
|
.topic-list {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
}
|
|
.tags-count {
|
display: block;
|
font-size: 24rpx;
|
color: #999;
|
margin-top: 10rpx;
|
text-align: right;
|
}
|
}
|
|
.publish-btn {
|
position: fixed;
|
bottom: 100rpx;
|
left: 20rpx;
|
right: 20rpx;
|
}
|
|
.goods-picker {
|
padding: 30rpx;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.picker-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 30rpx;
|
|
.picker-title {
|
font-size: 36rpx;
|
font-weight: bold;
|
}
|
}
|
|
.search-bar {
|
margin-bottom: 20rpx;
|
}
|
|
.goods-list {
|
flex: 1;
|
overflow: hidden;
|
|
.goods-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #f5f5f5;
|
|
.goods-image {
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 8rpx;
|
margin-right: 20rpx;
|
}
|
|
.goods-info {
|
flex: 1;
|
|
.goods-name {
|
font-size: 28rpx;
|
color: #333;
|
margin-bottom: 10rpx;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
}
|
|
.goods-price {
|
font-size: 28rpx;
|
color: #f44;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
