微信小程序源码：简洁大方的好差评生成器

非常漂亮的微信小程序，AI生成好评、差评回复，界面简洁大方。

reply.js

var app = getApp()
Page({
  data: {
    keyword: '', // 用户输入的关键词
    content: '', // 当前显示的评价内容
    cid: '1', // 默认1好评,2差评
    num: 0,
    tags: [],
  },
  onLoad() {
    var that = this,
      dataArr = {
        type: "getTags",
        id: 1,
      }
    app.wx_req(dataArr, function (res) {
      that.setData({
        tags: res,
      })
    })
  },
  // 选择好评或差评
  onSelectcid(e) {
    const type = e.currentTarget.dataset.type;
    this.setData({
      cid: type,
      num: 0,
    });
  },
  // 监听输入框变化
  onInput(e) {
    this.setData({
      keyword: e.detail.value,
      num: 0,
    });
  },
  clearInput(){
    this.setData({
      keyword: '',
      num: 0,
    });
  },
  // 点击热门标签填入
  selectTag(e) {
    const val = e.currentTarget.dataset.val;
    this.setData({
      keyword: val,
      num: 0,
    });
  },

  // 生成评价逻辑
  generateReview() {
    var that = this;
    if (that.data.num == 0) {
      var dataArr = {
        type: "makeReply",
        //调用ai接口，生成好差评回复内容
        keyword: that.data.keyword,
        cid: that.data.cid,
        //1好评,2差评
      }
      app.wx_req(dataArr, function (res) {
        if (res.errcode === 0) {
          var result = res.result,
            num = result.length - 1,
            content = result[num].content;
          console.log(num)
          that.setData({
            content: content,
            num: num,
            result: result,
          })
        } else {
          that.setData({
            content: '',
            num: 0,
            result: [],
          })
          wx.showModal({
            title: '错误提示',
            content: '生成失败，换个关键词',
            showCancel: false
          })
        }
      })
    } else {
      var result = that.data.result,
        num = that.data.num - 1,
        content = result[num].content;
      console.log(num)
      that.setData({
        content: content,
        num: num,
      })
    }
  },

  // 复制功能
  copyText() {
    app.adsShow();
    //插入弹窗广告展示
    wx.setClipboardData({
      data: this.data.content,
      success: () => {
        wx.showToast({
          title: '复制成功',
          icon: 'success'
        });
      }
    });
  },

  onShareAppMessage() {
    return {
      title: "快来试一试~",
    };
  }
})

reply.wxml

<view class="container">

  <!-- 输入区域 -->
  <view class="input-wrapper">
    <input class="single-input" type="text" placeholder="请输入关键词" value="{{keyword}}" bindinput="onInput" confirm-type="search" bindconfirm="onGenerate" />
    <view bindtap="clearInput" class="clearInput" hidden="{{!keyword}}">
      <icon size="20" type="clear"></icon>
    </view>
  </view>

  <!-- 热门关键词标签 -->
  <view class="hot-section">
    <view class="hot-title">热门关键词</view>
    <view class="hot-tags">
      <text class="tag" wx:for="{{tags}}" wx:key="index" bindtap="selectTag" data-val="{{item}}">{{item}}</text>
    </view>
  </view>

  <!-- 新增：类型选择器 (好评/差评) -->
  <view class="type-selector">
    <view class="radio-group">
      <view class="radio-item {{cid == '1' ? 'active-good' : ''}}" bindtap="onSelectcid" data-type="1">
        <view class="radio-circle"></view>
        <text>? 好评回复</text>
      </view>
      <view class="radio-item {{cid == '2' ? 'active-bad' : ''}}" bindtap="onSelectcid" data-type="2">
        <view class="radio-circle"></view>
        <text>? 差评回复</text>
      </view>
    </view>
  </view>

  <!-- 按钮区域 -->
  <view class="btn-area">
    <button class="generate-btn" bindtap="generateReview">
      <text class="btn-text">生成回复</text>
    </button>
  </view>

  <!-- 结果展示区域 (有内容时显示) -->
  <view class="result-card" wx:if="{{content.length}}">
    <view class="result-header">
      <text class="result-title">生成结果</text>
      <text class="refresh-btn" bindtap="generateReview">? 换一换</text>
    </view>

    <view class="result-content-box">
      <text class="result-text">{{content}}</text>
    </view>

    <view class="copy-area">
      <text class="word-count">{{content.length}}字</text>
      <button class="copy-btn" size="mini" bindtap="copyText">复制文案</button>
    </view>
  </view>
</view>

reply.wxss

/* --- 新增：类型选择器样式 --- */
.type-selector {
  padding-top: 40rpx;
}

.radio-group {
  display: flex;
  gap: 20rpx;
}

.radio-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16rpx 0;
  border-radius: 12rpx;
  background-color: #f5f5f5;
  color: #666;
  font-size: 28rpx;
  transition: all 0.2s;
  border: 2rpx solid transparent;
}

.radio-circle {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;
  margin-right: 10rpx;
}

/* 选中状态 - 好评 */
.active-good {
  background-color: #e6f7ff;
  color: #1890ff;
  border-color: #1890ff;
}

.active-good .radio-circle {
  border-color: #1890ff;
  background-color: #1890ff;
}

/* 选中状态 - 差评 */
.active-bad {
  background-color: #fff1f0;
  color: #ff4d4f;
  border-color: #ff4d4f;
}

.active-bad .radio-circle {
  border-color: #ff4d4f;
  background-color: #ff4d4f;
}

app.wx_req()为调用AI回复内容接口。

标签：程序小程序js