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