hn-hlw-app/pages/chat/input-bar.vue

<template>
  <view class="input-container" :class="{ 'input-container--elder': elderMode }">
    <input
      v-model="txt"
      class="message-input"
      :class="{ 'message-input--elder': elderMode }"
      placeholder="请输入消息"
      type="text"
      confirm-type="send"
      @confirm="send"
    />
    <view
      v-if="showSend"
      class="send-button"
      :class="{ 'send-button--elder': elderMode }"
      @touchstart.stop.prevent="sendByTouchStart"
      @click.stop="sendByClick"
    >发送</view>
    <image
      v-else
      class="more-tool"
      :class="{ 'more-tool--elder': elderMode }"
      src="/static/more-uni.png"
      mode="scaleToFill"
      @click="showTool = !showTool"
    >
    </image>
  </view>
  <view v-if="showTool" class="tool-box" :class="{ 'tool-box--elder': elderMode }">
    <view class="tool-item" :class="{ 'tool-item--elder': elderMode }" @click="chooseImage('camera')">
      <view class="icon-box" :class="{ 'icon-box--elder': elderMode }">
        <image
          class="tool-icon"
          :class="{ 'tool-icon--elder': elderMode }"
          src="/static/camera-uni.png"
          mode="scaleToFill"
        ></image>
      </view>
      <view class="tool-txt" :class="{ 'tool-txt--elder': elderMode }">拍照</view>
    </view>
    <view class="tool-item" :class="{ 'tool-item--elder': elderMode }" @click="chooseImage('album')">
      <view class="icon-box" :class="{ 'icon-box--elder': elderMode }">
        <image
          class="tool-icon"
          :class="{ 'tool-icon--elder': elderMode }"
          src="/static/image-uni.png"
          mode="scaleToFill"
        ></image>
      </view>
      <view class="tool-txt" :class="{ 'tool-txt--elder': elderMode }">图片</view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted } from "vue";

// 长辈模式状态
const elderMode = ref(false);

// 处理长辈模式变化
const handleElderModeChange = () => {
  try {
    const storedElderMode = uni.getStorageSync('elderMode');
    elderMode.value = storedElderMode === 'true' || storedElderMode === true;
    
    // 同步到全局数据
    const app = getApp();
    if (app && app.globalData) {
      app.globalData.elderMode = elderMode.value;
    }
  } catch (error) {
    console.error('获取长辈模式状态失败:', error);
    elderMode.value = false;
  }
};

onMounted(() => {
  handleElderModeChange();
  // 监听长辈模式变化事件
  uni.$on('elderModeChanged', handleElderModeChange);
});

onUnmounted(() => {
  // 移除事件监听
  uni.$off('elderModeChanged', handleElderModeChange);
});

const emits = defineEmits(["sendMessage", "sendImage"]);
const showTool = ref(false);
const txt = ref("");
const lastTouchSendAt = ref(0);
const showSend = computed(() => txt.value.trim() !== "");

function send() {
  if (txt.value.trim()) {
    emits("sendMessage", txt.value.trim());
    txt.value = "";
    showTool.value = false;
  }
}

function sendByTouchStart() {
  lastTouchSendAt.value = Date.now();
  send();
}

function sendByClick() {
  // 触摸设备通常会在 touchstart 后合成 click，避免同一操作重复发送。
  if (Date.now() - lastTouchSendAt.value < 500) return;
  send();
}

function chooseImage(source) {
  emits("sendImage", source);
  showTool.value = false;
}
</script>

<style lang="scss" scoped>
.input-container {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  background-color: #f0f0f0;

  // 长辈模式样式
  @at-root &.input-container--elder {
    padding: 32rpx 36rpx; // 增加内边距
  }
}

.message-input {
  flex-grow: 1;
  min-height: 50rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  line-height: 42rpx;

  // 长辈模式样式
  @at-root &.message-input--elder {
    min-height: 66rpx; // 输入框高度增加
    font-size: 36rpx; // 字体放大 (28rpx → 36rpx)
    line-height: 54rpx;
    border-radius: 14rpx;
  }
}

.send-button {
  background-color: $theme-brown-primary;
  color: white;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
  margin-left: 16rpx;
  height: 64rpx;
  line-height: 64rpx;
  padding: 0 40rpx;
  flex-shrink: 0;

  // 长辈模式样式
  @at-root &.send-button--elder {
    border-radius: 20rpx;
    font-size: 36rpx; // 字体放大 (28rpx → 36rpx)
    margin-left: 20rpx;
    height: 80rpx; // 按钮高度增加
    line-height: 80rpx;
    padding: 0 50rpx; // 增加左右内边距
  }
}

.more-tool {
  margin-left: 20rpx;
  width: 48rpx;
  height: 48rpx;
  flex-shrink: 0; // 防止图标被压缩
  display: block; // 确保图标显示

  // 长辈模式样式
  @at-root &.more-tool--elder {
    margin-left: 24rpx;
    width: 56rpx; // 图标适度放大，避免过大
    height: 56rpx;
  }
}

.tool-box {
  display: flex;
  background-color: #ebf0f6;
  padding: 24rpx 30rpx;

  // 长辈模式样式
  @at-root &.tool-box--elder {
    padding: 32rpx 36rpx; // 增加内边距
  }
}

.tool-item {
  text-align: center;

  // 长辈模式样式
  @at-root &.tool-item--elder {
    margin-right: 20rpx; // 增加项目间距
  }
}

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  background: white;

  // 长辈模式样式
  @at-root &.icon-box--elder {
    width: 150rpx; // 图标框稍微放大
    height: 150rpx;
    border-radius: 20rpx;
  }
}

.tool-icon {
  width: 64rpx;
  height: 50rpx;

  // 长辈模式样式
  @at-root &.tool-icon--elder {
    width: 80rpx; // 工具图标放大
    height: 62rpx;
  }
}

.tool-txt {
  margin-top: 12rpx;
  font-size: 28rpx;
  color: #8f959d;

  // 长辈模式样式
  @at-root &.tool-txt--elder {
    margin-top: 16rpx;
    font-size: 36rpx; // 字体放大 (28rpx → 36rpx)
  }
}
</style>