169 lines
3.3 KiB
Vue
169 lines
3.3 KiB
Vue
<template>
|
|
<t-form class="tui-comment-reply-form">
|
|
<t-form-item label="昵称" name="nick">
|
|
<t-input
|
|
ref="nickRef"
|
|
class="nick"
|
|
v-model="formData.data.senderNick"
|
|
placeholder="昵称"
|
|
:disabled="userStore.isLogged()"
|
|
/>
|
|
<span v-if="replyToNick" class="gray selectable clip-text" v-text="` 回复 ${replyToNick}`"></span>
|
|
</t-form-item>
|
|
<t-form-item label="评论" name="content">
|
|
<markdown-editor ref="contentRef" v-model:data="formData.data.content" />
|
|
</t-form-item>
|
|
<t-form-item label="验证码" name="captcha">
|
|
<div class="captcha-box">
|
|
<div>
|
|
<t-input class="captcha" v-model="formData.captcha" placeholder="" />
|
|
<captcha
|
|
ref="captchaRef"
|
|
class="captcha-img"
|
|
:api="CommonAPI.getCaptchaAPI()"
|
|
:width="90"
|
|
:height="28"
|
|
:from="CaptchaFrom.COMMENT_REPLY"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<t-button
|
|
class="submit"
|
|
type="submit"
|
|
:loading="doSubmitting"
|
|
:disabled="doSubmitting"
|
|
@click="doSubmit"
|
|
>提交</t-button>
|
|
<t-button theme="default" @click="onCancel">取消</t-button>
|
|
</div>
|
|
</div>
|
|
</t-form-item>
|
|
</t-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {
|
|
Captcha,
|
|
CaptchaData,
|
|
CaptchaFrom,
|
|
CommentAPI,
|
|
CommentReply,
|
|
CommonAPI,
|
|
MarkdownEditor,
|
|
Scroller,
|
|
userStore
|
|
} from "timi-web";
|
|
import { Emits, useHandler } from "~/components/comment/form/reply/emits";
|
|
|
|
defineOptions({
|
|
name: "CommentReplyForm"
|
|
});
|
|
|
|
const emits = defineEmits<Emits>();
|
|
const { onCancel, onSubmit } = useHandler(emits);
|
|
|
|
const props = withDefaults(defineProps<{
|
|
commentId: number,
|
|
replyId?: number,
|
|
replyToNick?: string,
|
|
}>(), {});
|
|
const { commentId, replyId, replyToNick } = toRefs(props);
|
|
|
|
const doSubmitting = ref(false);
|
|
const nickRef = ref();
|
|
const contentRef = ref();
|
|
|
|
const formData = reactive<CaptchaData<CommentReply>>({
|
|
from: CaptchaFrom.COMMENT_REPLY,
|
|
captcha: "",
|
|
data: {
|
|
commentId: commentId.value,
|
|
replyId: replyId.value,
|
|
senderNick: "",
|
|
content: ""
|
|
}
|
|
});
|
|
|
|
/** 提交回复 */
|
|
async function doSubmit() {
|
|
doSubmitting.value = true;
|
|
|
|
formData.data.commentId = commentId.value;
|
|
formData.data.replyId = replyId.value;
|
|
const loginUser = userStore.loginUser;
|
|
if (userStore.isLogged() && loginUser.user) {
|
|
formData.data.senderNick = loginUser.user.name;
|
|
formData.data.senderId = loginUser.user.id;
|
|
}
|
|
await CommentAPI.createReply(formData);
|
|
formData.captcha = "";
|
|
await onSubmit(formData.data);
|
|
|
|
doSubmitting.value = false;
|
|
}
|
|
|
|
async function focus() {
|
|
await nextTick();
|
|
let focusEl: HTMLElement;
|
|
if (userStore.isLogged()) {
|
|
focusEl = nickRef.value[0].textArea;
|
|
} else {
|
|
focusEl = contentRef.value[0].inputRef;
|
|
}
|
|
focusEl.focus();
|
|
Scroller.toElement(focusEl);
|
|
}
|
|
|
|
// 登录用户
|
|
const updateNick = () => formData.data.senderNick = userStore.loginUser?.user?.name || "";
|
|
watch(userStore.loginUser, updateNick);
|
|
onMounted(updateNick);
|
|
|
|
defineExpose({
|
|
focus
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.tui-comment-reply-form {
|
|
padding: 1rem 1rem 1rem 0;
|
|
|
|
.nick {
|
|
width: 12rem;
|
|
}
|
|
|
|
.captcha-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
div {
|
|
display: flex;
|
|
}
|
|
|
|
.captcha {
|
|
width: 6rem;
|
|
}
|
|
|
|
.captcha-img {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.submit {
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 650px) {
|
|
.tui-comment-reply-form {
|
|
|
|
.captcha-box {
|
|
|
|
> div:first-child {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|