html
<view class='title'>
<view class='title-left'>请留下您宝贵的建议！</view>
<view class='title-right'>
<span class='title-right-count'>{{words_count}}</span>/200</view>
</view>
<view class='content'>
<block wx:if='{{textarea_hidden == 0}}'>
<textarea class='text_class' bindinput="textarea_hidden" placeholder="请详细描述您的问题，我们将及时跟进解决。
(建议添加相关问题截图)" placeholder-style="color:rgba(153,153,153,1);" maxlength='200'/>
</block>
<block wx:else>
<view class='text_class'>{{text_data}}</view>
</block>
</view>
<view class='pic-title'>
<view class='pic-title-content'>上传凭证
<span class='pic-title-content-right'>
(不超过
<span class='pic-title-content-right-count'>3</span>张)
</span>
</view>
</view>
<view class='pic-content'>
<view class="camera" bindtap='uploadImg'>
<image src="/img/common/camera.png" class="img">
</image>
</view>
<block wx:for="{{pics}}" wx:for-item="pic">
<image class="each-img" src='{{pic}}'>
<icon class='delete-icon' type="clear" size="40rpx" color="#999999" bindtap='delete_this' data-src="{{pic}}"/>
</image>
</block>
</view>
<view class='explain'>
<view class='explain-content'>如有紧急问题，您可以立即联系
<span class='service'>农商行官方客服。</span>
</view>
</view>
<view class='sub'>
<button bindtap="submit">提交</button>
</view>
<view class="mask {{mask_show ? 'mask-show' : ''}}" catchtouchmove="doNotMove" bindtap='closePage'>
<view class='mask-content'>
<view class='title'>非常感谢！</view>
<view class='content'>我们已经收到您的宝贵意见，我们将迅速跟进。</view>
<image src="/img/person/thanks.png" class="thanks">
</image>
<view class='close'>
<image src="/img/common/close.png" class='close-icon'>
</image>
</view>
</view>
</view>
css
.title {
margin: 20rpx;
display: flex;
position: relative;
}
.title .title-left {
font-size: 36rpx;
font-weight: bold;
color: rgba(34, 34, 34, 1);
}
.title .title-right {
position: absolute;
top: 5rpx;
right: 0rpx;
font-size: 30rpx;
font-weight: bold;
color: rgba(34, 34, 34, 1);
}
.title .title-right-count {
color: rgba(153, 153, 153, 1);
}
.content {
padding: 20rpx;
}
.content .text_class {
100%;
height: 300rpx;
font-size: 26rpx;
line-height: 1.25;
z-index: -1;
color: rgba(153, 153, 153, 1);
position: static;
}
.pic-title {
margin: 20rpx;
font-size: 30rpx;
font-weight: 500;
color: rgba(34, 34, 34, 1);
}
.pic-title .pic-title-content-right {
color: #999;
}
.pic-title .pic-title-content-right-count {
color: #fb0000;
}
.pic-content {
margin-left: 10rpx;
margin-right: 10rpx;
display: flex;
flex-wrap: wrap;
margin-top: 60rpx;
margin-bottom: 60rpx;
}
.pic-content .camera {
175rpx;
height: 175rpx;
background: rgba(255, 255, 255, 1);
border-radius: 10rpx;
position: relative;
margin-top: 20rpx;
}
.pic-content .camera .img {
74rpx;
height: 54rpx;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -55%);
}
.pic-content .each-img {
overflow: visible;
margin-left: 10rpx;
175rpx;
height: 175rpx;
margin-top: 20rpx;
position: relative;
}
.pic-content .each-img .delete-icon {
background-color: white;
border-radius: 50%;
position: absolute;
right: 5rpx;
top: 0rpx;
38rpx;
height: 38rpx;
}
.explain {
margin: 40rpx 20rpx 20rpx 20rpx;
font-size: 24rpx;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
.explain .service {
color: #0265ff;
}
.sub {
margin-top: 80rpx;
}
.sub button {
padding: 0rpx;
610rpx;
height: 100rpx;
background: rgba(2, 101, 255, 1);
border-radius: 10rpx;
color: #fff;
}
.mask {
display: none;
position: fixed;
top: 0;
100%;
height: 100%;
z-index: 10000;
background: rgba(0, 0, 0, 0.4);
}
.mask-show {
display: block;
}
.mask .mask-content {
482rpx;
height: 613rpx;
background: white;
border-radius: 10rpx;
position: absolute;
left: 50%;
top: 44.5%;
transform: translate(-50%, -55.5%);
z-index: 20000;
}
.mask-content .title {
display: block;
font-size: 38rpx;
margin-top:36rpx;
font-weight: bold;
color: rgba(51, 51, 51, 1);
text-align: center;
}
.mask-content .content {
margin-top:30rpx;
font-size: 28rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
text-align: center;
}
.mask-content .thanks {
256rpx;
height: 256rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-top:50rpx;
}
.mask .close {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -126rpx;
}
.mask .close .close-icon {
78rpx;
height: 78rpx;
}
js
const toast = require('../../../utils/toast.js');
const util = require('../../../utils/getData.js');
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
pics: [],
textarea_hidden: 0,
mask_show: 0,
text_data: "",
words_count: 0
},
doNotMove: function() {
console.log('stop user scroll it!');
return;
},
textarea_hidden: function(e) {
let text_data = e.detail.value;
let words_count = text_data.length;
let that = this;
that.setData({
text_data: text_data,
words_count: words_count
})
},
submit: function(e) {
let that = this;
// 获取描述内容
let content = that.data.text_data;
if (content == '') {
toast.showToast('请填写反馈内容！');
return;
}
util.getData('feedback', {
content: content,
images: JSON.stringify(that.data.pics),
openid: app.globalData.openid,
method: 'POST'
}, function(data) {
if (data.errno !== 0) {
toast.showToast(data.errdesc);
return;
}
that.setData({
textarea_hidden: 1,
mask_show: 1
})
})
},
closePage: function(e) {
wx.navigateBack();
},
uploadImg: function(e) {
let {
pics
} = this.data;
if (pics.length == 3) {
return;
}
let that = this;
wx.chooseImage({
count: 3 - pics.length,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
let tempFilePaths = res.tempFilePaths
let arr = that.uploadMutileimg({
pictures: tempFilePaths
})
}
})
},
uploadMutileimg: function(data) {
var that = this,
i = data.i ? data.i : 0,
success = data.success ? data.success : 0,
fail = data.fail ? data.fail : 0;
wx.uploadFile({
url: 'https://xxx/Upload/uploadMoreImg',
filePath: data.pictures[i],
name: 'file',
success: (res) => {
success++;
},
fail: (res) => {
fail++;
},
complete: (res) => {
i++;
var imgdata = JSON.parse(res.data);
var img = imgdata.data[0];
that.data.pics.push(img);
if (i == data.pictures.length) { //当图片传完时，停止调用
that.setData({
pics: that.data.pics
})
} else { //若图片还没有传完，则继续调用函数
data.i = i;
data.success = success;
data.fail = fail;
that.uploadMutileimg(data);
}
}
})
},
delete_this: function(e) {
var pics = this.data.pics;
var src = e.currentTarget.dataset.src;
for (var i = 0; i < pics.length; i++) {
if (pics[i] == src) {
pics.splice(i, 1);
}
}
this.setData({
pics: pics
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
太难了！！！搞了两天。