401 lines
7.1 KiB
Vue
401 lines
7.1 KiB
Vue
<template>
|
||
<view class="reply-page">
|
||
<!-- 导航栏 -->
|
||
<view class="navbox">
|
||
<view class="status_bar"></view>
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
title="回复"
|
||
@clickLeft="goBack"
|
||
color="#8B2316"
|
||
|
||
:border="false"
|
||
backgroundColor="#eee"
|
||
>
|
||
<template #right>
|
||
<view class="nav-right" @click="confirmReply">
|
||
<view class="btn-confirm" >确定</view>
|
||
</view>
|
||
</template>
|
||
</uni-nav-bar>
|
||
</view>
|
||
|
||
<!-- 主内容区域 -->
|
||
<view class="main-content">
|
||
<view class="input-container">
|
||
<textarea
|
||
class="reply-input"
|
||
v-model="replyText"
|
||
:placeholder="placeholder"
|
||
:auto-height="true"
|
||
:maxlength="maxLength"
|
||
:disabled="isSubmitting"
|
||
></textarea>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
|
||
import api from '@/api/api'
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
const video_uuid=ref('');
|
||
const name=ref('');
|
||
const comment_partent=ref('');
|
||
onLoad((options) => {
|
||
video_uuid.value=options.video_uuid;
|
||
placeholder.value='回复 '+options.name+':';
|
||
comment_partent.value=options.comment_partent;
|
||
name.value=options.name;
|
||
})
|
||
|
||
// 响应式数据
|
||
const statusBarHeight = ref(0)
|
||
const replyText = ref('')
|
||
const isSubmitting = ref(false)
|
||
const maxLength = 500
|
||
const placeholder = ref('')
|
||
|
||
// 计算属性
|
||
const replyLength = computed(() => replyText.value.length)
|
||
const canSubmit = computed(() => replyText.value.trim().length > 0 && !isSubmitting.value)
|
||
const remainingChars = computed(() => maxLength - replyLength.value)
|
||
|
||
// 监听器
|
||
watch(replyText, (newValue) => {
|
||
if (newValue.length > maxLength) {
|
||
replyText.value = newValue.slice(0, maxLength)
|
||
}
|
||
})
|
||
const addCommentV2=async()=>{
|
||
const res=await api.addCommentV2({
|
||
article_uuid:video_uuid.value,
|
||
type: "8",
|
||
comment:replyText.value+'||'+name.value+'：'+comment_partent.value
|
||
})
|
||
if(res.code==200){
|
||
uni.showToast({ title: '回复成功', icon: 'none' })
|
||
replyText.value = '';
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
// 清理工作
|
||
console.log('回复页面已卸载')
|
||
})
|
||
|
||
// 方法
|
||
const goBack = () => {
|
||
uni.navigateBack();
|
||
}
|
||
|
||
const confirmReply = async () => {
|
||
console.log(1111)
|
||
if (!canSubmit.value) return
|
||
|
||
isSubmitting.value = true
|
||
|
||
try {
|
||
addCommentV2();
|
||
} catch (error) {
|
||
console.error('回复失败:', error)
|
||
uni.showToast({
|
||
title: '回复失败，请重试',
|
||
icon: 'error'
|
||
})
|
||
} finally {
|
||
isSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
const startVoiceInput = () => {
|
||
// 语音输入功能
|
||
uni.showToast({
|
||
title: '语音输入功能',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
const clearText = () => {
|
||
replyText.value = ''
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 变量定义
|
||
$primary-color: #ff2442;
|
||
$text-color: #000000;
|
||
$text-light: #999999;
|
||
$text-medium: #333333;
|
||
$border-color: #e0e0e0;
|
||
$border-light: #f0f0f0;
|
||
$white: #ffffff;
|
||
$green: #00a86b;
|
||
$orange: #ff6900;
|
||
$blue: #007aff;
|
||
|
||
.reply-page {
|
||
background-color: $white;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
// 状态栏样式
|
||
.status-bar {
|
||
background-color: $white;
|
||
|
||
.status-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 16px;
|
||
height: 20px;
|
||
|
||
.time {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: $text-color;
|
||
}
|
||
|
||
.status-icons {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.icon-group {
|
||
display: flex;
|
||
gap: 4px;
|
||
|
||
.app-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 10px;
|
||
color: $white;
|
||
|
||
&.green {
|
||
background-color: $green;
|
||
}
|
||
|
||
&.orange {
|
||
background-color: $orange;
|
||
}
|
||
|
||
&.red {
|
||
background-color: $primary-color;
|
||
}
|
||
|
||
&.blue {
|
||
background-color: $blue;
|
||
}
|
||
}
|
||
}
|
||
|
||
.network-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
|
||
.bluetooth-icon {
|
||
width: 12px;
|
||
height: 8px;
|
||
background-color: $text-color;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.speed {
|
||
font-size: 10px;
|
||
color: $text-color;
|
||
}
|
||
|
||
.signal-bars {
|
||
display: flex;
|
||
gap: 1px;
|
||
align-items: end;
|
||
|
||
.bar {
|
||
width: 2px;
|
||
background-color: $text-color;
|
||
|
||
&:nth-child(1) { height: 3px; }
|
||
&:nth-child(2) { height: 5px; }
|
||
&:nth-child(3) { height: 7px; }
|
||
&:nth-child(4) { height: 9px; }
|
||
}
|
||
}
|
||
|
||
.network-type {
|
||
font-size: 10px;
|
||
color: $text-color;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.wifi-icon {
|
||
width: 12px;
|
||
height: 8px;
|
||
background-color: $text-color;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
|
||
.battery {
|
||
font-size: 12px;
|
||
color: $text-color;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.btn-confirm {
|
||
font-size: 28rpx;
|
||
color: #8B2316;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
// 导航栏样式
|
||
.nav-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
background-color: $white;
|
||
border-bottom: 1px solid $border-light;
|
||
|
||
.nav-left, .nav-right {
|
||
width: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.nav-right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.back-arrow {
|
||
font-size: 24px;
|
||
color: $primary-color;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 18px;
|
||
color: $primary-color;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.confirm-btn {
|
||
font-size: 16px;
|
||
color: $primary-color;
|
||
font-weight: 600;
|
||
transition: opacity 0.3s ease;
|
||
|
||
&.disabled {
|
||
opacity: 0.5;
|
||
color: $text-light;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 主内容区域
|
||
.main-content {
|
||
flex: 1;
|
||
padding: 10px 16px;
|
||
background-color: #fff;
|
||
margin-top: calc(var(--status-bar-height) + 44px);
|
||
.input-container {
|
||
position: relative;
|
||
background-color: $white;
|
||
border: 1px solid $border-color;
|
||
border-radius: 8px;
|
||
min-height: 200px;
|
||
padding: 16px;
|
||
|
||
.input-placeholder {
|
||
font-size: 14px;
|
||
color: $text-light;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.reply-input {
|
||
width: 100%;
|
||
min-height: 120px;
|
||
font-size: 16px;
|
||
color: $text-medium;
|
||
line-height: 1.5;
|
||
border: none;
|
||
outline: none;
|
||
resize: none;
|
||
}
|
||
|
||
.input-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 12px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid $border-light;
|
||
|
||
.char-count {
|
||
font-size: 12px;
|
||
color: $text-light;
|
||
transition: color 0.3s ease;
|
||
|
||
&.warning {
|
||
color: $primary-color;
|
||
}
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
|
||
.clear-btn {
|
||
width: 32px;
|
||
height: 32px;
|
||
background-color: $border-light;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background-color 0.3s ease;
|
||
|
||
&:active {
|
||
background-color: $border-color;
|
||
}
|
||
|
||
.clear-icon {
|
||
font-size: 14px;
|
||
color: $text-light;
|
||
}
|
||
}
|
||
|
||
.voice-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
background-color: $primary-color;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 2px 8px rgba(255, 36, 66, 0.3);
|
||
transition: transform 0.2s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.voice-icon {
|
||
font-size: 18px;
|
||
color: $white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|