166 lines
3.5 KiB
Vue
166 lines
3.5 KiB
Vue
<template>
|
||
<transition name="van-slide-right">
|
||
<div v-show="visible">
|
||
<van-sticky>
|
||
<van-row class="head-row">
|
||
<van-col span="3">
|
||
<router-link to="/recommend">
|
||
<van-icon name="arrow-left" size="1.5rem" />
|
||
</router-link>
|
||
</van-col>
|
||
<van-col span="18"><span>发图文</span></van-col>
|
||
<van-col span="3" @click="send" :style="{color: isSend?'#FE70A0':'#979797'}">发布</van-col>
|
||
</van-row>
|
||
</van-sticky>
|
||
|
||
<van-cell-group>
|
||
<van-field
|
||
rows="5"
|
||
autosize
|
||
type="textarea"
|
||
v-model="content"
|
||
label-width="0"
|
||
:show-word-limit="true"
|
||
maxlength="500"
|
||
placeholder="大于5字，每一天，都是为了下一天"
|
||
/>
|
||
</van-cell-group>
|
||
<van-row class="body-row">
|
||
<van-col span="10">
|
||
<van-icon name="share-o" size="1.5rem" /><span>发布到去其他</span>
|
||
</van-col>
|
||
<van-col span="4"></van-col>
|
||
<van-col span="10"
|
||
><span class="right-span">选择更多人看到</span>
|
||
<van-icon name="arrow" size="1.2rem" />
|
||
</van-col>
|
||
</van-row>
|
||
|
||
<van-divider />
|
||
<van-row>
|
||
<van-col class="img-col" span="24">
|
||
<van-uploader :after-read="afterRead" v-model="fileList" multiple />
|
||
</van-col>
|
||
</van-row>
|
||
</div>
|
||
</transition>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, reactive, toRefs,watch } from "vue";
|
||
import { ArticleEntity } from "@/type/interface/ArticleEntity.ts";
|
||
import fileApi from "@/api/fileApi.ts";
|
||
import articleApi from "@/api/articleApi.ts";
|
||
import { Toast } from "vant";
|
||
import { useRouter } from 'vue-router'
|
||
const router = useRouter();
|
||
const form = reactive<ArticleEntity>({
|
||
title: "",
|
||
content: "",
|
||
images: [],
|
||
isDeleted: false,
|
||
});
|
||
|
||
const isSend=ref(false)
|
||
const { images, content } = toRefs(form);
|
||
const fileList = ref([]);
|
||
const visible = ref<boolean>(false);
|
||
onMounted(() => {
|
||
visible.value = true;
|
||
});
|
||
const afterRead = (file: any) => {
|
||
|
||
file.status = "uploading";
|
||
file.message = "上传中...";
|
||
var formData = new FormData();
|
||
//一个文件
|
||
if(file.length==undefined)
|
||
{
|
||
formData.append("file", file.file);
|
||
}
|
||
else
|
||
{
|
||
//多个文件
|
||
file.forEach((f:any) => {
|
||
formData.append("file", f.file);
|
||
});
|
||
}
|
||
fileApi.upload("image", formData)
|
||
.then((response: any) => {
|
||
images.value.push(...response.data);
|
||
file.status = "done";
|
||
file.message = "成功";
|
||
})
|
||
};
|
||
|
||
const send = () => {
|
||
if(form.content.length<5)
|
||
{
|
||
Toast({
|
||
message: "请输入至少5个字符",
|
||
position: "bottom",
|
||
});
|
||
}
|
||
else
|
||
{
|
||
articleApi.add(form).then((response:any)=>{
|
||
router.push({ path: '/recommend'});
|
||
})
|
||
}
|
||
|
||
};
|
||
|
||
watch(()=>form.content,(newValue,oldValue)=>{
|
||
if(newValue.length<5)
|
||
{
|
||
isSend.value=false
|
||
}
|
||
else
|
||
{
|
||
isSend.value=true
|
||
}
|
||
console.log(isSend.value?'#FFF':'#111')
|
||
})
|
||
</script>
|
||
<style scoped>
|
||
.head-row {
|
||
background-color: #f8f8f8;
|
||
|
||
padding: 1.2rem 1rem 0.8rem 1rem;
|
||
}
|
||
|
||
.head-row span {
|
||
font-size: large;
|
||
}
|
||
|
||
.van-field-5-label {
|
||
display: none;
|
||
}
|
||
|
||
.body-row {
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.preview-cover {
|
||
position: absolute;
|
||
bottom: 0;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 4px;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.van-uploader {
|
||
margin: 0 1.2rem 0 1.2rem;
|
||
}
|
||
|
||
.img-col {
|
||
text-align: left;
|
||
}
|
||
.right-span
|
||
{
|
||
color: #979797;
|
||
}
|
||
</style> |