171 lines
3.8 KiB
Vue
171 lines
3.8 KiB
Vue
<template>
|
|
<view class="publish-container">
|
|
<view class="publish-container-box">
|
|
<up-upload
|
|
:fileList="fileList1"
|
|
@afterRead="afterRead"
|
|
@delete="deletePic"
|
|
name="1"
|
|
multiple
|
|
:maxCount="1"
|
|
:previewFullImage="true"
|
|
width="400rpx"
|
|
height="300rpx"
|
|
></up-upload>
|
|
</view>
|
|
<!-- 输入区域 -->
|
|
<view class="input-container">
|
|
<input v-model="state.title" class="input-title" placeholder="标题" />
|
|
<input v-model="state.description" class="input-content" placeholder="描述" />
|
|
<textarea v-model="state.content" class="input-description" placeholder="内容"></textarea>
|
|
</view>
|
|
|
|
<!-- 发布按钮 -->
|
|
<view class="publish-button" @click="publish">发表</view>
|
|
</view>
|
|
<up-notify ref="uNotifyRef" message="Hi uview-plus"></up-notify>
|
|
</template>
|
|
<script setup>
|
|
import { reactive,ref } from 'vue';
|
|
// import { notify } from 'uview-ui';
|
|
import {uploadFile} from '@/utils/http.js'
|
|
import{saveCaseInfo} from '@/apis/cast.js'
|
|
const fileList1 = reactive([]);
|
|
const uNotifyRef = ref(null);
|
|
// 删除图片
|
|
const deletePic = (event) => {
|
|
fileList1.splice(event.index, 1);
|
|
};
|
|
|
|
// 新增图片
|
|
const afterRead = async (event) => {
|
|
let lists = [].concat(event.file);
|
|
for (let item of lists) {
|
|
fileList1.push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中',
|
|
});
|
|
console.log("开始上传");
|
|
try {
|
|
console.log(item)
|
|
let res = await uploadFile(item.url); // 调用上传文件的方法
|
|
res=JSON.parse(res);
|
|
console.log("上传图片结果", res);
|
|
// 上传成功后更新 fileList1 中的状态和 URL
|
|
fileList1[fileList1.length - 1].status = 'done';
|
|
// fileList1[fileList1.length - 1].url = URL.createObjectURL(item.file);
|
|
fileList1[fileList1.length - 1].url = res.url;
|
|
state.imageUrl=res.url;
|
|
} catch (error) {
|
|
console.error("上传图片失败", error);
|
|
// 上传失败时处理
|
|
fileList1[fileList1.length - 1].status = 'failed';
|
|
fileList1[fileList1.length - 1].message = '上传失败';
|
|
}
|
|
}
|
|
};
|
|
// 初始化数据
|
|
const state = reactive({
|
|
title: '',
|
|
description: '',
|
|
content: '',
|
|
imageUrl:'',
|
|
});
|
|
const isCont=(e)=>{
|
|
if(e==''||e==null)
|
|
return false;
|
|
return true;
|
|
}
|
|
// 发表方法
|
|
const publish = async() => {
|
|
//检查数据
|
|
if(!isCont(state.title)||!isCont(state.description)||!isCont(state.content)||!isCont(state.imageUrl)){
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "请填写完整"
|
|
})
|
|
return;
|
|
}
|
|
// 收集需要上传的信息和图片 URL
|
|
const data = {
|
|
title: state.title,
|
|
description: state.description,
|
|
content: state.content,
|
|
imageUrl:state.imageUrl,
|
|
};
|
|
|
|
console.log('发布内容：', data);
|
|
let res=await saveCaseInfo(data)
|
|
if(res.code==200){
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "发表成功"
|
|
})
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
// 清空表单
|
|
resetForm();
|
|
};
|
|
|
|
// 清空表单
|
|
const resetForm = () => {
|
|
fileList1.splice(0, fileList1.length);
|
|
state.title = '';
|
|
state.description = '';
|
|
state.content = '';
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.publish-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.input-container {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.input-title,
|
|
.input-description {
|
|
width: 100%;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.input-content {
|
|
width: 100%;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.publish-button {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.publish-button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
.publish-container-box{
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|