1、wxml部分
<!--pages/zizhushangbao/zizhushangbao.wxml--><form bindsubmit="formSubmit" bindreset="formReset" class="form"><view class="section section_gap"><view class="section__title"><i style="color:red;">*</i>标题</view><input name="title" bindinput="bindInput" placeholder="标题" placeholder-style=" line-height:72rpx" /></view><view class="section section_gap"><view class="section__title">类型</view><picker bindchange="bindPickerChange" mode:value="{{typeIndex}}" range-key="value" range="{{type}}"><view class="picker">{{type[typeIndex].value}}</view></picker></view><view class="section section_gap"><view class="section__title"><i style="color:red;">*</i>内容</view><textarea bindinput="bindTextAreaInput" auto-height placeholder="内容" /></view><view class="section section_gap"><view class="section__title">图片</view><view class="recode_upload_item"><view><image wx:for="{{imgs}}" src="{{item}}" alt="" /></view><text class=" iconfont icon-zengjia" bindtap="chooseImg">+</text></view></view><button class="btn" bindtap="submit">提交</button></form>
2、json
{"usingComponents": {},"navigationBarTitleText": "自主上报"}
3、wxss
/* pages/zizhushangbao/zizhushangbao.wxss */.form{ width: 100%; padding: 30rpx 3%; box-sizing: border-box; display: block;}.btn{ display: block; width: 100%; background: #1989F7; text-align: center; margin-top: 40rpx; height:72rpx; line-height: 72rpx; border-radius: 10rpx; color: #fff; font-size: 32rpx;} .section{ width: 100%; height: auto; margin-bottom: 20rpx;}.section>view{ width: 100%; height: 50rpx; line-height: 50rpx; font-size: 28rpx;}.section>text,.section>input,.section>picker{ display: block; width: 100%; height: 60rpx; line-height: 60rpx; background: #fff; border-radius: 10rpx; padding: 0 20rpx; box-sizing: border-box; border: none;}.section>textarea{ display: block; width: 100%; min-height: 120rpx; line-height: 50rpx; background: #fff; border-radius: 10rpx; padding: 10rpx 20rpx; box-sizing: border-box; border: none;}.icon-zengjia{ display: block; width: 200rpx; height: 200rpx; border: 1px dashed #ddd; text-align: center; line-height: 200rpx; font-size: 80rpx; background: #fff; color: #888;}.section>view.recode_upload_item{ width: auto; height: auto;}.recode_upload_item>view{ width: 100%; height: auto; overflow: hidden;}.recode_upload_item>view image{ display: block; width: 200rpx; height: 200rpx; float: left; margin: 0 20rpx 20rpx 0;}.section__title{ color: #888; font-size: 26rpx;}
4、js
// pages/zizhushangbao/zizhushangbao.jsimport {selfReport} from "../../api/api"const config = require('../../config.js')Page({/*** 页面的初始数据*/data: {title: "",content: "",type: [{keys: 1,value: "意见反馈"}, {keys: 2,value: "其他"}, ],typeIndex: 0,imgs: [], //上传图片列表imgUrls: [], //已上传成功的图片路径},submit() {if(!this.data.title){wx.showToast({title:"标题不能为空",icon:"none"})return}if(!this.data.content){wx.showToast({title:"内容不能为空",icon:"none"})return}selfReport({title:this.data.title,type:Number(this.data.typeIndex)+1,content:this.data.content,imgUrls:this.data.imgUrls}).then(res=>{wx.showToast({title:"提交成功",icon:"none"})wx.navigateTo({url: '/pages/zizhushangbao_list/zizhushangbao_list',})})},bindInput(e){this.setData({title: e.detail.value})},bindPickerChange(e) {this.setData({typeIndex: e.detail.value})// console.log(this.data.typeIndex, 11)},bindTextAreaInput(e){this.setData({content: e.detail.value})},// 上传照片chooseImg(e) {const _this = this;let imgs = this.data.imgs;let imgNumber = this.data.imgs.length; //当前已上传的图片张数if (imgNumber >= 3) {wx.showToast({title:"最多只能上传三张图片！",icon:"none"})return false;} else {imgNumber = 3 - imgNumber;};wx.chooseImage({ //打开本地相册选择图片count: imgNumber,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success(res) {const tempFilePaths = res.tempFilePaths;for (let i = 0; i < tempFilePaths.length; i++) {imgs.push(tempFilePaths[i]);}_this.setData({ //赋值，回显照片imgs: imgs});let successUp = 0; //成功let failUp = 0; //失败let count = 0; //第几张let length = tempFilePaths.length; //总数_this.recursionUploading(tempFilePaths, successUp, failUp, count, length); //调用上传方法}})},//采用递归的方式上传图片recursionUploading(imgPaths, successUp, failUp, count, length) {let token = wx.getStorageSync('token');var _this = this;wx.showLoading({title: '正在上传第' + (count+1) + '张',});wx.uploadFile({url: `${config.host}/oss/upload`,filePath: imgPaths[count],// formData: {//userId: app.globalData.userMsg.userId// },name: "file",header: {'content-type': 'application/json',Authorization: token},success(e) {console.log(e)let path = _this.data.imgUrls;let obj = JSON.parse(e.data);if (obj.code ==200) {path.push(obj.data);_this.setData({imgUrls: path});console.log(_this.data.imgUrls,1212121)}successUp++; //成功+1},fail(e) {// failUp++; //失败+1},complete(e) {count++; //下一张if (count == length) {wx.showToast({title: '上传成功',})} else {//递归调用，上传下一张_this.recursionUploading(imgPaths, successUp, failUp, count, length);}}})},// 预览大图lookBigImg(e) {let index = e.currentTarget.dataset.index; //索引let big = this.data.imgs[index];wx.previewImage({current: big, // 当前显示图片的http链接urls: this.data.imgs // 需要预览的图片http链接列表})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})
