library-wechat/subpkg/pages/feedback/feedback.vue

<template>
  <view class="feedback-container">
    <view class="form-box">
      <view class="item">
        <text class="label">姓名</text>
        <input 
          class="input" 
          placeholder="请输入姓名" 
          v-model="formData.name"
          :disabled="hasNickname"
        />
      </view>
      <view class="item">
        <text class="label">读者证</text>
        <input 
          class="input" 
          placeholder="请输入读者证号" 
          v-model="formData.readerCard"
          disabled
        />
      </view>
      <view class="item">
        <text class="label">主题</text>
        <input 
          class="input" 
          placeholder="请输入主题（最少5个字）" 
          v-model="formData.subject"
          maxlength="50"
        />
      </view>
      <view class="item">
        <text class="label">联系方式/手机号码</text>
        <input 
          class="input" 
          placeholder="请输入手机号码" 
          v-model="formData.phone"
          type="number"
          maxlength="11"
        />
      </view>
      <view class="item textarea-item">
        <text class="label">您的建议或意见</text>
        <textarea
          class="textarea"
          placeholder="HI，请留下您的留言吧!（最少10个字）"
          v-model="formData.content"
          :maxlength="500"
        />
      </view>
      <button class="commit" type="primary" @click="onBtnClick">提交</button>
    </view>
  </view>
</template>

<script>
import { getCurrentReaderCard } from '@/utils/storage';

const USER_KEY = 'user-info';

export default {
  data() {
    return {
      hasNickname: false,
      formData: {
        name: '',
        readerCard: '',
        subject: '',
        phone: '',
        content: ''
      }
    };
  },
  onLoad() {
    this.loadReaderCardInfo();
    this.loadUserInfo();
  },
  methods: {
    async loadReaderCardInfo() {
      try {
        const readerCard = await getCurrentReaderCard();
        if (readerCard) {
          this.formData.readerCard = readerCard.bindValue || '';
        }
      } catch (err) {
        console.error('Failed to load reader card info:', err);
      }
    },

    loadUserInfo() {
      const userInfo = uni.getStorageSync(USER_KEY) || {};
      if (userInfo.nickname) {
        this.formData.name = userInfo.nickname;
        this.hasNickname = true;
      }
    },

    validatePhone(phone) {
      const phoneReg = /^1[3-9]\d{9}$/;
      return phoneReg.test(phone);
    },

    onBtnClick() {
      const { name, readerCard, subject, phone, content } = this.formData;

      if (!name || name.trim().length === 0) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        });
        return;
      }

      if (!readerCard || readerCard.trim().length === 0) {
        uni.showToast({
          title: '请先绑定读者证',
          icon: 'none'
        });
        return;
      }

      if (!subject || subject.trim().length < 5) {
        uni.showToast({
          title: '主题至少需要5个字',
          icon: 'none'
        });
        return;
      }

      if (!phone) {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        });
        return;
      }

      if (!this.validatePhone(phone)) {
        uni.showToast({
          title: '手机号码格式不正确',
          icon: 'none'
        });
        return;
      }

      if (!content || content.trim().length < 10) {
        uni.showToast({
          title: '建议内容至少需要10个字',
          icon: 'none'
        });
        return;
      }

      uni.showLoading({
        title: '提交中'
      });

      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '提交成功',
          icon: 'success',
          mask: true
        });

        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.feedback-container {
  padding: 15px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.form-box {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}

.item {
  margin-bottom: 20px;
}

.label {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.input {
  width: 100%;
  height: 44px;
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 0 15px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}

.input[disabled] {
  background-color: #e8e8e8;
  color: #999;
}

.textarea-item {
  margin-bottom: 30px;
}

.textarea {
  width: 100%;
  min-height: 120px;
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 12px 15px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  line-height: 1.6;
}

.commit {
  width: 100%;
  height: 44px;
  background-color: #01a4fe;
  color: #fff;
  border-radius: 22px;
  font-size: 16px;
  border: none;
  margin-top: 20px;
}

.commit::after {
  border: none;
}
</style>