js部分
Page({
/**
* 页面的初始数据
*/
data: {
wordMax: 300,
imgList: [],
item: "",
disableButton: true, // 初始时按钮不可点击
buttonBackground: "#D6DDEB"
},
/**
* 获取输入框内容长度,并实时反馈长度。输入长度为0时提交按钮不可点击
* 输入长度大于0时提交按钮改变背景颜色样式,并可点击
*/
textInputs: function (e) {
// 获取输入框的内容
const value = e.detail.value;
this.setData({ //更新内容缓存
orderNote: e.detail.value
})
// 获取输入框内容的长度
const len = parseInt(value.length);
//最多字数限制
if (len > this.data.wordMax) return;
// 当输入框内容的长度大于最大长度限制(max)时,终止setData()的执行
this.setData({
currentWord: len //当前字数
})
if (len > 0) {
this.setData({
disableButton: false, //当内容长度大于0则可以点击
buttonBackground: "#1F86FF",
});
} else {
this.setData({
disableButton: true, //当内容长度为0则不能点击
buttonBackground: "#D6DDEB",
})
}
},
//点击按钮返回上级页面
submit() {
wx.navigateBack({
delta: 1
})
},
/**
* 上传图片并反显,点击删除按钮可以删除指定图片
*/
chooseSource: function () {
wx.chooseMedia({
count: 3,
mediaType: ['image'], //文件类型
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], //可以指定来源是相册还是相机, 默认二者都有
success: (res) => {
const _this = this;
// 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
const imgList = res.tempFiles
let tempFilePathsImg = _this.data.imgList
// 获取当前已上传的图片的数组
const tempFilePathsImgs = tempFilePathsImg.concat(imgList)
//把新增图片添加到当前数组
_this.setData({
imgList: tempFilePathsImgs
})
},
})
},
//删除图片
deleteImg: function (e) {
const _this = this;
const imgList = _this.data.imgList;
const index = e.currentTarget.dataset.index; //获取当前点击图片下标
imgList.splice(index, 1)
_this.setData({
imgList
})
}
})
wxml部分
<view class="feedback-wait">
<view class="problem-description">
问题反馈
</view>
<view class="text-box">
<textarea class="content" placeholder='请输入你的问题' maxlength="{{wordMax}}" bindinput="textInputs">
</textarea>
<text class="current-word">{{currentWord|0}}/{{wordMax}}</text>
</view>
<view class="picture-position">
<block wx:for="{{imgList}}" wx:key="item">
<image src="{{item.tempFilePath}}" class="img-size-box" data-url="{{item}}" mode="scaleToFill">
<image bindtap="deleteImg" data-index="{{index}}" class="picture-del" src="/imgs/feedback_picture_del.png" mode="aspectFit"></image>
</image>
</block>
<button class="view-picture" bindtap="chooseSource" wx:if="{{imgList.length < 3}}">
<image class="view-picture-add" src="/imgs/feedback_picture_add.png" mode="aspectFit"></image>
</button>
</view>
<text class="text-content">上传图片(可上传0-3张图片)</text>
<view class="content-line"></view>
<button bindtap="submit" id="button-submit" style="background-color: {{buttonBackground}}; " disabled="{{disableButton}}">提交</button>
</view>
less部分
page {
background-color: #fff;
}
.feedback-wait {
width: 750rpx;
padding-left: 32rpx;
.problem-description {
font-size: 36rpx;
font-weight: 600;
color: #1b2026;
margin-top: 16rpx;
}
.text-box {
width: 686rpx;
height: 272rpx;
margin-top: 32rpx;
border-radius: 8rpx;
background: #F2F5FB;
.current-word {
font-size: 28rpx;
color: gray;
position: absolute;
right: 72rpx;
margin-top: 32rpx;
}
.content {
width: 640rpx;
height: 190rpx;
font-size: 24rpx;
font-weight: 500;
color: #77818F;
top: 32rpx;
margin-left: 32rpx;
}
}
.picture-position {
width: 610rpx;
height: 160rpx;
display: flex;
margin-top: 32rpx;
.img-size-box {
width: 158rpx;
height: 160rpx;
border-radius: 4rpx;
margin-right: 16rpx;
.picture-del {
position: absolute;
width: 22rpx;
height: 22rpx;
margin-top: -160rpx;
margin-left: 136rpx;
}
}
.view-picture {
display: flex;
justify-content: center;
width: 158rpx;
margin-left: 0rpx;
border-radius: 4rpx;
background: #F2F5FB;
.view-picture-add {
width: 60rpx;
height: 60rpx;
margin-top: 50rpx;
}
}
}
.text-content {
font-size: 24rpx;
font-weight: 500;
margin-top: 16rpx;
color: #1B2026;
}
.content-line {
position: absolute;
top: 90%;
width: 750rpx;
height: 1rpx;
background: #1F2329D9;
}
#button-submit {
position: absolute;
width: 622rpx;
color: #fff;
top: 92%;
left: 65rpx;
border-radius: 12rpx;
font-size: 30rpx;
font-weight: 600;
}
}