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 { FetchReaderMessage  } from '@/api/user';
import config from '@/utils/config';
import { getCurrentReaderCard,getOpenId } 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('获取读者证信息失败：', 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);
    },

    async 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: '提交中'
      });
    try {
      const openId = await getOpenId();
      if (!openId) {
        uni.showToast({ title: '获取用户信息失败', icon: 'none' });
        this.isLoading = false;
        return;
      }


      const res = await FetchReaderMessage({
        libcode: config.LIB_CODE,
        openid: openId,
        phone,
        readCardNo: readerCard,
        readName: name,
        suggestion: content,
        title: subject
      });

      if (res.code !== 200) {
        uni.showToast({ title: res.message || '留言提交失败', icon: 'none' });
        this.isLoading = false;
        return;
      }else{
        // 设置刷新标记
        uni.setStorageSync('needRefreshFeedback', true);
        
        uni.showToast({ title: '留言提交成功', icon: 'success' });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
      
    } catch (err) {
      console.error('留言提交失败', err);
      uni.showToast({ title: err.message || '留言提交失败', icon: 'none' });
    } finally {
      this.isLoading = false;
    }
    }
  }
};
</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>