<template>
  <view class="container">
    <view class="form-box">
      <text class="title">留言</text>

      <textarea
        v-model="message"
        placeholder="请输入您的留言..."
        class="input-area"
        maxlength="500"
        auto-height
      />

      <button class="submit-btn" @click="submitMessage">
        留 言
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { LiuYan } from "@/api"
// 响应式数据
const message = ref('');

// 提交方法
const submitMessage = () => {
  if (!message.value.trim()) {
    uni.showToast({
      title: '请输入留言内容',
      icon: 'none'
    });
    return;
  }
LiuYan({ info:{content: message.value,openid:uni.getStorageSync("openid")} }).then(res => {
			 uni.showToast({
			   title: '留言成功',
			   icon: 'success'
			 });
			 
			}) 

  message.value = '';
};
</script>

<style scoped>
/* 全屏容器：用于居中 */
.container {
  display: flex;
  justify-content: center;
 
  min-height: 100vh;
  background-color: #f8fafc;
  padding: 40rpx;
  box-sizing: border-box;
}

/* 表单区域 */
.form-box {
  width: 100%;
  max-width: 600rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-size: 44rpx;
  font-weight: bold;
  color: #2d3748;
  margin-bottom: 50rpx;
}

.input-area {
  width: 100%;
  min-height: 200rpx;
  padding: 30rpx;
  border-radius: 24rpx;
  background-color: white;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  font-size: 32rpx;
  line-height: 1.5;
  color: #333;
  margin-bottom: 50rpx;
  box-sizing: border-box;
}

.submit-btn {
  width: 100%;
  padding: 28rpx;
  border-radius: 24rpx;
  background: linear-gradient(135deg, #4a6cf7, #6366f1);
  color: white;
  font-size: 34rpx;
  font-weight: 600;
  border: none;
  box-shadow: 0 6rpx 16rpx rgba(74, 108, 247, 0.3);
  transition: transform 0.2s ease;
}

.submit-btn:active {
  transform: scale(0.97);
}
</style>