首页 > 小程序教程 > 微信小程序用户意见问题反馈组件页面制作设计模板下载

微信小程序用户意见问题反馈组件页面制作设计模板下载

上一篇 下一篇
今天给大家带来微信小程序用户意见问题反馈组件页面制作设计模板教程,主要用户意见反馈  在线留言   问题提交等页面使用,制作完毕以后效果图如下:

一、wxml页面代码如下:
<!--issues.wxml-->
<view class="container">
  <view class="list-btn" bindtap="openList">
    <image class="btn-icon" src="/static/images/icon/tick2.png"></image>
    <text class="btn-text">我的反馈记录({{feednum}}次)</text>
    <view class="btn-open">
      <image class="btn-open-img" src="/static/images/more/{{status ? 'up' : 'down'}}.png"></image>
    </view>
  </view>

  <view class="issues-list" wx:if="{{status}}">
    <block>
      <!--无反馈记录-->
      <view wx:if="{{hasFeed == false}}">
        <view class="imgitem">
          <image src="/static/images/norecord1.png" class="empty_img"></image>
        </view>
        <view class="txtitem">
          <text class="t28rpx">暂无您的反馈记录</text>
        </view>
      </view>
      <view wx:if="{{hasFeed}}" wx:for="{{feedList}}" wx:key="id" class="issues-item {{index == itemopen ? '' : 'close'}}" data-index="{{index}}" bindtap="openItem">
        <text class="btn-text">{{item.title}}</text>
        <text class="item-status">{{item.pubtime}}</text>
        <view class="btn-open" wx:if="{{index != itemopen}}">
          <image class="btn-open-img" src="/static/images/more/down.png"></image>
        </view>

        <view class="item-bd" wx:else>
          <view class="item-comment">
            <image class="item-comment-img" src="{{item.feedpic}}"></image>
            <view class="item-comment-bd">
              <text>{{item.content}}</text>
            </view>
          </view>
        </view>
      </view>

      <text class="issues-remind">若要了解更多反馈信息,请访问 —— http://together.demgo.me/。</text>
    </block>
  </view>

  <block wx:else>
    <text class="issues-label">新建反馈</text>
    <form bindsubmit="submitForm">
      <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{TopTips}}</view>
      <view class="issues-panel">
        <view class="issues-input">
          <input placeholder="请输入反馈标题" name="title" value="{{title}}" />
        </view>
        <textarea class="issues-textarea" cursor-spacing="50" placeholder="请输入反馈内容" name="content" value="{{content}}"></textarea>
      </view>

      <block>
        <text class="issues-label">选择图片(可选)</text>
        <view class="issues-img-panel">
          <view class="issues-photo-item add-photo" bindtap="uploadPic" wx:if="{{!isSrc}}"></view>
          <view wx:if="{{isSrc}}" class="image_box">
            <view class="picPre">
              <image src="{{src}}" mode="aspectFit"></image>
              <view bindtap="clearPic"></view>
            </view>
          </view>
        </view>
      </block>

      <text class="issues-remind ">您可以加入"一起 "用户反馈QQ群285263346进行即时反馈。</text>
      <button class="submit-btn" loading="{{isLoading}}" hover-start-time="200" disabled="{{isdisabled}}" formType="submit">提交反馈</button>
    </form>
  </block>
</view>

二、wxss样式页面代码如下:
/**issuse.wxss**/
@import '/style/weui.wxss';
.container{
    background-color: #f6f6f6;
    padding: 0;
    padding-top: 30rpx;
    font-size: 11pt;
    box-sizing: border-box;
}
.list-btn {
  align-items: center;
  font-size: 11pt;
  padding: 0 30rpx 0 10px;
  margin-bottom: 10rpx;
  display: flex;
  background-color: #fff;
  min-height: 85rpx;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.list-btn:active {
  background-color: #fcfcfc;
}
.btn-icon {
  width: 45rpx;
  height: 45rpx;
  margin-right: 15rpx;
}
.btn-text{
    flex: 1;
    margin: 20rpx 0 15rpx;
}
.btn-open {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 10rpx;
}
.btn-open-img {
  width: 30rpx;
  height: 30rpx;
}
.issues-list{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 10rpx;
}
.item-labels{
    flex: 1;
}
.item-label{
    flex: 1;
    background: #7acfa6;
    color: #fff;
    font-size: 9pt;
    padding: 4rpx 10rpx;
    border-radius: 3px;
    margin: 0 5rpx;
}
.item-status{
    font-size: 10pt;
    color: #999;
}
.issues-item{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #fff;
    margin: 10rpx 30rpx;
    font-size: 11pt;
    padding: 15rpx 25rpx;
    min-height: 100rpx;
    border-radius: 3px;
    box-shadow: 1px 2px 3px #ddd;
}
.issues-item.close {
    flex-direction: row;
    align-items: center;
}
.issues-item.close:active{
    background-color: #fcfcfc;
    opacity: .8;
}
.item-hd{
    display: flex;
    align-items: center;
}
.btn-id {
    flex-shrink: 0;
    color: #aaa;
    font-size: 10pt;
    margin-right: 10rpx;
}
.issues-item.close .btn-text{
    flex: 1 1 auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
}
.item-bd{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding:  0 10rpx 15rpx;
    font-size: 10pt;
}
.item-content {
    padding-bottom: 20rpx;
}
.item-comment{
    display: flex;
    border-top: 1rpx solid #eee;
    padding: 10rpx 5rpx;
}
.item-comment-img{
    flex-shrink: 0;
    width: 100px;
    height: 70px;
    margin: 10rpx 20rpx 0 10rpx;
    border-radius: 3px;
}
.item-comment-bd{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
}
.item-comment-name{
    font-size: 9pt;
    color: #999;
}

.issues-label{
    font-size: 10pt;
    line-height: 100%;
    color: #999;
    margin: 25rpx 20rpx 15rpx;
}
.issues-panel{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}
.issues-img-panel{
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    padding: 15rpx 25rpx;
}
.issues-img-panel.error{
    background: rgba(231, 138, 176, 0.06);
}
.issues-input{
    border-bottom: 1px solid #e5e5e5;
    padding: 15rpx 25rpx;
}
.issues-input.error{
    background: rgba(231, 138, 176, 0.06);
}
.issues-textarea{
    width: 100%;
    padding: 25rpx;
    min-height: 225rpx;
    box-sizing: border-box;
}
.issues-textarea.error{
    background: rgba(231, 138, 176, 0.06);
}
.issues-photo-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    margin: 20rpx;
    margin-right: 0;
    width: 135rpx;
    height: 135rpx;
    border: 1rpx solid #e5e5e5;
    border-radius: 5rpx;
}
.issues-photo-item:active{
    opacity: .8;
}
.issues-photo-item .remind-img{
    padding: 0;
}
.issues-photo-item image{
    width: 100%;
    height: 100%;
}
.add-photo:active {
    background: #f0f0f0;
}
.add-photo::before, .add-photo::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #e5e5e5;
}
.add-photo:active::before, .add-photo:active::after{
    background: #ddd;
}
.add-photo::before {
    width: 10rpx;
    height: 80rpx;
    margin-top: -40rpx;
    margin-left: -5rpx;
}
.add-photo::after {
    width: 80rpx;
    height: 10rpx;
    margin-top: -5rpx;
    margin-left: -40rpx;
}
.issues-remind {
    flex: 1;
    font-size: 9pt;
    line-height: 135%;
    color: #ccc;
    padding: 0 30rpx;
    word-break: break-all;
    text-indent: 1em;
    padding-top: 30rpx;
}
.issues-remind.text-center{
    text-align: center;
}
.submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40rpx 3%;
    height: 80rpx;
    border-radius: 3px;
    text-align: center;
    background-color: #118fff;
    color: #fff;
    font-size: 12pt;
    line-height: 150%;
    padding: 0;
    border: none;
}
.submit-btn.disabled{
    opacity: .7;
}
.submit-btn:active{
    opacity: .7;
}

/*----------------------*/
.add_pic {
  padding: 0 40rpx;
  background: #fff;
}

.add_pic view {
  display: inline-block;
  margin-top: 20rpx;
  width: 430rpx;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  background: url(http://bmob-cdn-14867.b0.upaiyun.com/2017/11/23/e93d28a14095af18801d3c1c68e08fe7.png) no-repeat left center;
  background-size: 160rpx auto;
  padding-left: 80rpx;
  color: #b2b2b2;
}

.image_box {
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  padding: 10px 0 10rpx;
}

.picPre {
  width: 50%;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.picPre image {
  width: 100%;
  height: 180rpx;
}

.picPre view {
  position: absolute;
  right: 0px;
  top: -20rpx;
  width: 15px;
  height: 15px;
  background: url(http://bmob-cdn-14867.b0.upaiyun.com/2017/11/23/b93323e440f4c3998034dbb9011a1e1d.png) no-repeat;
  background-size: cover;
}

.hidden {
  display: none;
}

三、js页面代码如下:
//issues.js
//获取应用实例
var common = require('../../../utils/common.js')
var Bmob = require("../../../utils/bmob.js");
var util = require('../../../utils/util.js');
var common = require('../../template/getCode.js')
var app = getApp();
var that;
var username = wx.getStorageSync("my_nick");
var openid = wx.getStorageSync("user_openid");
var userid = wx.getStorageSync("user_id");
Page({
  data: {
    list_remind: '加载中',
    status: false,  //是否显示列表
    itemopen:false,
    feednum: 0, //反馈的次数
    hasFeed: false,
    title: '',
    content: '',
    info: '',
    showTopTips: false,
    TopTips: '',
  },
  onLoad: function () {
    that = this;
    that.setData({//初始化数据
      src: "",
      isSrc: false,
      ishide: "0",
      autoFocus: true,
      isLoading: false,
      loading: true,
      isdisabled: false
    })

    //获取设备和用户信息
    wx.getSystemInfo({
      success: function (res) {
        var info = '---rn**用户信息**rn';
        info += '用户名:' + username;
        info += 'rn手机型号:' + res.model;
        info += '(' + res.platform + ' - ' + res.windowWidth + 'x' + res.windowHeight + ')';
        info += 'rn微信版本号:' + res.version;
        info += 'rnTogether版本号:' + app.version;
        that.setData({
          info: info
        });
        console.log(info);
      }
    });
    
  },
  /**
  * 生命周期函数--监听页面初次渲染完成
  */
  onReady: function () {
    wx.hideToast()

  },
  onShow:function(){
    console.log("调用onShow")
    this.getIssue();
  },
  //获取评论信息
  getIssue: function () {
    //或取总的反馈次数
    var userQuery = new Bmob.Query(Bmob.User);
    userQuery.equalTo("objectId", userid);
    userQuery.find({
      success: function (result) {
        var feednum = result[0].get("feednum");
        console.log("feednum=" + feednum);
        if (feednum != 0) {
          that.setData({
            feednum: feednum,
            hasFeed: true,
          })
        }
      }
    })
    var self = this;
    var molist = new Array();
    var Diary = Bmob.Object.extend("Feedback");
    var query = new Bmob.Query(Diary);
    var me = new Bmob.User();
    me.id = wx.getStorageSync("user_id");
    query.equalTo("feedUser", me);
    query.include("feedUser");
    query.descending("createAt");
    query.find({
      success: function (result) {
        for (var i = 0; i < result.length; i++) {
          var feedUserId = result[i].get("feedUser").objectId;
          var title = result[i].get("title");
          var content = result[i].get("content");
          var id = result[i].id;
          var createdAt = result[i].createdAt;
          var pubtime = util.getDateDiff(createdAt);
          var _url;
          var feedpic = result[i].get("feedpic");
          if (feedpic) {
            _url = result[i].get("feedpic")._url;
          } else {
            _url = "http://ovasw3yf9.bkt.clouddn.com/blog/171126/31GdaHlkh4.jpg?imageslim";
          }
          var publisherName = result[i].get("feedUser").nickname;
          var publisherPic = result[i].get("feedUser").userPic;
          var jsonA;
          jsonA = {
            "title": title || '',
            "content": content || '',
            "publisherPic": publisherPic || '',
            "publisherName": publisherName || '',
            "pubtime": pubtime || '',
            "feedpic": _url || '',
            "feedUserId": feedUserId || '',
            "id": id || '',
          }
          molist.push(jsonA);
          that.setData({
            feedList: molist
          })
        }
      }
    })

  },

  openList: function (e) {
    that.setData({
      'status': !that.data.status
    });
  },

  openItem: function (e) {
    var index = e.currentTarget.dataset.index;
    if (index != that.data.itemopen) {
      that.setData({
        'itemopen': index
      });
    }
  },

  //上传图片
  uploadPic: function () {
    var that = this;
    wx.showModal({
      title: '提示',
      content: '上传图片需要消耗流量,是否继续?',
      confirmText: '继续',
      success: function (res) {
        if (res.confirm) {
          wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['compressed'], //压缩图
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) {
              // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
              var tempFilePaths = res.tempFilePaths
              that.setData({
                isSrc: true,
                src: tempFilePaths
              })
            }
          })
        }
      }
    });
  },

  //删除图片
  clearPic: function () {//删除图片
    that.setData({
      isSrc: false,
      src: ""
    })
  },

  //表单验证
  showTopTips: function () {
    var that = this;
    this.setData({
      showTopTips: true
    });
    setTimeout(function () {
      that.setData({
        showTopTips: false
      });
    }, 3000);
  },
  //提交表单
  submitForm: function (e) {
    var title = e.detail.value.title;
    var content = e.detail.value.content;
    //先进行表单非空验证
    if (title == "") {
      this.setData({
        showTopTips: true,
        TopTips: '请输入反馈标题'
      });
    } else if (content == "") {
      this.setData({
        showTopTips: true,
        TopTips: '请输入反馈内容'
      });
    } else {
      that.setData({
        isLoading: true,
        isdisabled: true
      })
      wx.showModal({
        title: '提示',
        content: '是否确认提交反馈',
        success: function (res) {
          if (res.confirm) {
            wx.getStorage({
              key: 'user_id',
              success: function (ress) {
                var Diary = Bmob.Object.extend("Feedback");
                var diary = new Diary();
                var me = new Bmob.User();
                me.id = ress.data;
                diary.set("feedUser", me);
                diary.set("title", title);
                diary.set("content", content);
                diary.set("feedinfo", that.data.info);
                if (that.data.isSrc == true) {
                  var name = that.data.src; //上传图片的别名
                  var file = new Bmob.File(name, that.data.src);
                  file.save();
                  diary.set("feedpic", file);
                }
                diary.save(null, {
                  success: function (result) {
                    //该用户的反馈次数加1
                    wx.getStorage({
                      key: 'my_username',
                      success: function (ress) {
                        var my_username = ress.data;
                        wx.getStorage({
                          key: 'user_openid',
                          success: function (res) { //将该文章的Id添加到我的收藏中,或者删除
                            var openid = res.data;
                            var user = Bmob.User.logIn(my_username, openid, {
                              success: function (user) {
                                var feednum = user.get("feednum");
                                user.set("feednum", feednum + 1);
                                user.save();
                              }
                            })
                          }
                        });
                      },
                    })
                    console.log("反馈成功");
                    that.setData({
                      isLoading: false,
                      isdisabled: false,
                      eventId: result.id,
                      feednum:that.data.feednum+1,
                    })
                    //添加成功,返回成功之后的objectId(注意,返回的属性名字是id,而不是objectId)
                    common.dataLoading("反馈成功", "success", function () {
                      //重置表单
                      that.setData({
                        title: '',
                        content: "",
                        src: "",
                        isSrc: false,
                      })
                    });
                  },
                  error: function (result, error) {
                    //添加失败
                    console.log("反馈失败=" + error);
                    that.setData({
                      isLoading: false,
                      isdisabled: false
                    })
                  }
                })
              }
            })
          }
        }
      })
    }
    setTimeout(function () {
      that.setData({
        showTopTips: false
      });
    }, 1000);
  }

});

模板简介:该模板名称为【微信小程序用户意见问题反馈组件页面制作设计模板下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 48,300次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 05-18
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信图片 微信文章 企业网站 微信素材 html5 单页式简历模板 微信模板 微信公众平台 响应式 自适应
您可能会喜欢的其他模板