<span class=“find_title”>
<view>
<view class="content">
<!-- 上传封面 -->
<view class="want">
<span class="find_title">上传封面</span>
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"
uploadIcon="plus-circle-fill" uploadText="添加封面" :action="uploadUrl"></u-upload>
</view>
<!-- 上传分享背景 -->
<view class="want">
<text class="find_title">上传分享背景</text>
<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" :maxCount="10"
uploadIcon="plus-circle-fill" uploadText="添加分享背景" :action="uploadUrl"></u-upload>
</view>
<!-- 直播描述 -->
<view class="want">
<span class="find_title">
<u-icon name="edit-pen" class="edit-pen" size="28"></u-icon>
直播描述
</span>
<u--textarea v-model="value" placeholder="请输入内容"></u--textarea>
</view>
<!-- 选择商品 -->
<view class="want">
<span class="find_title">
</样式>
选择商品
</span>
<u-button @click="fetchProducts">
<u-icon name="plus-circle-fill" class="plusCir" size="24" color="#D3D4D6" />
<text>打开</text>
</u-button>
</view>
<!-- 已选商品列表 -->
<view class="selected-products" v-if="selectedProducts.length > 0">
<view class="product-list">
<view class="product-item" v-for="(item, index) in selectedProducts" :key="index">
<image :src="item.images" class="product-image"></image>
<text class="product-title">{{ item.title }}</text>
<u-icon name="close-circle-fill" class="delete-icon" size="20"
@click="removeProduct(index)"></u-icon>
</view>
</view>
</view>
<!-- 发布 -->
<button class="yes" @click="release">
<image src="/static/images/lives/1.png" mode=""></image>
<p>发布</p>
</button>
</view>
<!-- 模态框 -->
<u-modal :show="show" :title="title" :content="content" :closeOnClickOverlay="true" :showCancelButton="true"
@confirm="show = false" @cancel="show = false">
<view v-if="products.length > 0">
<u-button v-for="(product, index) in products" :key="index" @click="selectProduct(product)">
{{ product.title }}
</u-button>
</view>
</u-modal>
</view>
</template>
<script>
export default {
data() {
return {
https://lvxiaoyunkang.lifeepay.com/index/ajax/upload
products: [],
selectedProducts: [],
show: false,
title: '选择商品',
content: '请选择要关联的商品',
fileList1: [],
fileList2: [],
value: '',
loading: false
};
},
methods: {
async fetchProducts() {
try {
const [err, res] = await uni.request({
url: `/../index/wanlshop/goods/select?sort=id&order=desc&offset=0&limit=10&filter=%7B%7D&op=%7B%7D&_=${Date.now()}`,
method: 'GET',
header: {
'x-requested-with': 'XMLHttpRequest',
'X-Custom-Header': 'wxminiapp',
},
});
if (err) {
throw new Error("请求失败");
}
if (Array.isArray(res.data.rows)) {
this.products = res.data.rows;
this.show = true;
} else {
throw new Error("API 返回的数据格式错误");
}
} catch (error) {
console.error(error);
uni.showToast({
title: '获取商品列表失败',
icon: 'none'
});
}
},
selectProduct(product) {
if (!product || typeof product !== 'object') {
console.error("商品数据格式错误:", product);
return;
}
const exists = this.selectedProducts.some(item => item.id === product.id);
if (!exists) {
this.selectedProducts.push(product);
}
this.show = false;
},
removeProduct(index) {
this.selectedProducts.splice(index, 1);
},
deletePic(event) {
const listKey = `fileList${event.name}`;
this[listKey].splice(event.index, 1);
},
async afterRead(event) {
const listKey = `fileList${event.name}`;
const lists = [].concat(event.file);
// 显示加载中
uni.showLoading({
title: '上传中...'
});
try {
for (let i = 0; i < lists.length; i++) {
const item = lists[i];
const uploadResult = await this.uploadFile(item.url);
this[listKey].push({
...item,
status: 'success',
message: '上传成功',
url: uploadResult.url,
response: uploadResult
});
}
} catch (error) {
console.error('上传失败:', error);
uni.showToast({
title: '上传失败',
icon: 'none'
});
} finally {
uni.hideLoading();
}
},
uploadFile(filePath) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: this.uploadUrl,
filePath: filePath,
name: 'file',
header: {
'x-requested-with': 'XMLHttpRequest',
},
success: (res) => {
if (res.statusCode === 200) {
try {
const data = JSON.parse(res.data);
if (data.code === 1) {
resolve(data
.data); // 假设返回数据格式为 { code: 1, data: { url: '...' } }
} else {
reject(new Error(data.msg || '上传失败'));
}
} catch (e) {
reject(new Error('解析响应数据失败'));
}
} else {
reject(new Error(`上传失败，状态码: ${res.statusCode}`));
}
},
fail: (err) => {
reject(err);
}
});
});
},
async release() {
if (!this.fileList1.length) {
uni.showToast({
title: '请上传封面',
icon: 'none'
});
return;
}
if (!this.value) {
uni.showToast({
title: '请输入直播描述',
icon: 'none'
});
return;
}
if (this.loading) return;
this.loading = true;
try {
const [err, res] = await uni.request({
url: '/../index/wanlshop/find/addzhibo',
method: 'POST',
header: {
'x-requested-with': 'XMLHttpRequest',
'Content-Type': 'application/json',
},
data: {
content: this.value,
goods_ids: this.selectedProducts.map(item => item.id).join(','),
images: this.fileList1.map(item => item.url),
share_img: this.fileList2.map(item => item.url),
createtime: Math.floor(Date.now() / 1000),
updatetime: Math.floor(Date.now() / 1000)
},
});
if (res.res.code === 1) {
uni.showToast({
title: '发布成功',
icon: 'success'
});
const resData = encodeURIComponent(JSON.stringify(res.data));
setTimeout(() => {
uni.navigateTo({
url: `/pages/shop/plugFlow/plugFlow?resData=${resData}`
});
}, 1500);
} else {
throw new Error(res.data.msg || '发布失败');
}
} catch (error) {
console.error('发布失败:', error);
uni.showToast({
title: error.message || '发布失败',
icon: 'none'
});
} finally {
this.loading = false;
}
}
}
};
</script>
<style lang="scss">
.content {
padding: 0 15px;
height: 100vh;
position: relative;
.want {
margin-top: 15px;
height: 108px;
.find_title {
font-size: 14px;
display: flex;
align-content: center;
align-items: center;
}
.u-button {
width: 160rpx;
height: 160rpx;
position: absolute;
display: flex;
flex-direction: column;
background-color: #f4f5f7;
border: 0;
text {
font-size: 11px;
color: #909193;
margin-top: 2px;
}
}
}
.yes {
width: 100%;
height: 100rpx;
position: absolute;
bottom: 0;
right: 0;
left: 0;
background-color: #e74c3c;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
image {
width: 52rpx;
height: 52rpx;
}
p {
font-size: 40rpx;
color: #f4f5f7;
}
}
.selected-products {
margin-top: 20px;
.find_title {
font-size: 14px;
display: block;
margin-bottom: 10px;
}
.product-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
.product-item {
// width: calc(50% - 50px);
background: #f8f8f8;
border-radius: 8px;
padding: 10px;
box-sizing: border-box;
position: relative;
display: flex;
.product-image {
width: 100rpx;
height: 100rpx;
border-radius: 4px;
}
.product-title {
display: block;
font-size: 12px;
margin-top: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.delete-icon {
position: absolute;
top: 5px;
right: 5px;
color: #ff4d4f;
}
}
}
}
}
</style>
后台配置用户隐私协议了么