9.16下午更新 包含im
This commit is contained in:
zoujiandong
@@ -0,0 +1,397 @@
|
||||
<template>
|
||||
<view class="reply-page">
|
||||
<!-- 导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="回复"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eee"
|
||||
>
|
||||
<template #right>
|
||||
<view class="nav-right" @click="confirmReply">
|
||||
<view class="btn-confirm" >确定</view>
|
||||
</view>
|
||||
</template>
|
||||
</uni-nav-bar>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<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: 20px 16px;
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user