微信小程序端的效果
1:微信端代码
(2)wxxml
<view class="container-body container-gray" style="display:{
{showfootertab==0?'block':'none'}}">
<form bindsubmit="evaSubmit">
<view class="group">
<view class="group-header">问题描述</view>
<view class="group-body">
<textarea name="evaContent" maxlength="500" value="{
{evaContent}}" class="weui-textarea" placeholder="填写内容(12-500字)" bindblur="charChange" />
</view>
<view class="group-header">上传图片</view>
<view class="group-body">
<view class="img-upload">
<view class="img-add" bindtap="chooseImage"></view>
<view class="img-item" name="img" bindlongtap="editImage" wx:for="{
{uploadimgs}}" wx:key="{
{index}}">
<icon type="clear" size="20" color="red" style="display:{
{editable?'block':'none'}}" bindtap="deleteImg" data-index="{
{index}}"/>
<image src="{
{item}}" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
<button formType="submit" disabled="{
{subdisabled}}" class="btn-block btn-orange" type="primary" size="mini">提交</button>
</form>
<view class="question-text">
<text>如问题无法简单描述清楚</text>
<text>可以直接拨打电话</text>
<text>我们将第一时间为您答疑解惑</text>
<view bindtap="callContact" data-phonenumber="400-1234-567">***********</view>
</view>
</view>
(2)wxjs(这里是重点,大家需要认真看)
var app = getApp()
Page({
data: {
showtabtype: '', //选中类型
showfootertab: 0, //底部标签页索引
tabnav: {}, //顶部选项卡数据
questionsall: [], //所有问题
questions: [], //问题列表
showquestionindex: null, //查看问题索引,
uploadimgs: [], //上传图片列表
editable: false //是否可编辑
},
onLoad: function () {
},
chooseImage: function () {
let _this = this;
wx.showActionSheet({
itemList: ['从相册中选择', '拍照'],
itemColor: "#f7982a",
success: function (res) {
if (!res.cancel) {
if (res.tapIndex == 0) {
_this.chooseWxImage('album')
} else if (res.tapIndex == 1) {
_this.chooseWxImage('camera')
}
}
}
})
},
chooseWxImage: function (type) {
let _this = this;
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
success: function (res) {
const tempFilePaths = res.tempFilePaths
app.globalData.filepath = res.tempFilePaths
_this.setData({
uploadimgs: _this.data.uploadimgs.concat(res.tempFilePaths)
})
//图片上传
wx.uploadFile({
url: 'http://localhost:8080/lg/test/upload',//将照片上传到后端 返回照片的名称和格式 这一步没有将数据真正入数据库
filePath: tempFilePaths[0],
name: 'file',
success: function (res) {
var s = res.data
console.log(s)
console.log(s.length)
var s1 = s.length - 21
var rs = s.slice(8, s1)
console.log(rs)
wx.setStorageSync("picturepath", rs)
},
fail: function (err) {
console.log(err.data)
}
})
}
})
},
//事件 //获取投诉的内容
textBlur: function (e) {
if (e.detail && e.detail.value.length > 0) {
if (e.detail.value.length < 12 || e.detail.value.length > 500) {
//app.func.showToast('内容为12-500个字符','loading',1200);
} else {
this.setData({
evaContent: e.detail.value
});
}
} else {
this.setData({
evaContent: ''
});
evaData.evaContent = '';
app.func.showToast('请输入投诉内容', 'loading', 1200);
}
},
//提交事件
evaSubmit: function (eee) {
var utel = wx.getStorag