微信小程序开发一个小型商城（九、意见反馈页面）

上一篇文章：微信小程序开发一个小型商城（八、个人页面）
在我的页面当中有一个页面反馈的栏目，单击进入后：一个tabs和易性标签一样的文字，下方文本输入框和上传图片按钮和提交按钮。

单击自定义组件事件：根据index来进行哦安短显示的是哪一个小栏目，以及下方标红的是哪一个小项。
文本输入事件：给textarea定义一个事件，并且获取其value值就是所有输入的文本。
选择图片事件与删除图片事件：在这里需要使用到图片上传一个内置api chooseImage 属性值分别有：最多可上传多少张图片、图片格式 原图/压缩、图片来源。上传成功后对图片数组进行拼接。删除图片的本质就是对图片数组当中的值进行删除，只要获取到index即可进行删除。
提交按钮单击事件：先获取文本的值，判断值的合法性即是够全部是空格，判断有没有需要上传的图片数组，验证通过后需要用到一个上传图片的api uploadFile，这个api 不支持多个文件同时上场所以只能够遍历数组挨个上传，提交给后台后，需要hideLoading即关闭弹窗，到最后使用navigateBack返回上一界面。
代码如下所示：注意在json文件当中引入tabs组件
wxml

<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange">
    <view class="fb_main">
        <view class="fb_title"></view>
        <view class="fb_tips">
            <text >功能建议</text>
            <text >购买遇到问题</text>
            <text >性能问题</text>
            <text >其他</text>
        </view>
        <view class="fb_content">
            <textarea value="{{textValue}}" bindinput = "handleTextInput" placeholder="请描述一下问题"></textarea>
            <view class="fb_tool">
                <button bindtap = "handleimg" >+</button>
                <view class="up_img_item" wx:for="{{chooseimg}}"
                wx:key="*this" bindtap = "handleremoveimg" data-index="{{index}}"
                >
                <!--数组为简单数组的时候，使用 *this 的值作为wx:key 的值即可-->
                    <UpImg src="{{item}}"></UpImg>
                </view>
            </view>
        </view>
        <view class="form_btn_wrap"> 
            <button bindtap="handlefrom">
                <icon type="success_no_circle"color="white"></icon>
                提交
            </button>
        </view>
    </view>
</Tabs>

less

page {
  background-color: #eeeeee;
}
.fb_main {
    padding:20rpx;
    color: #666;
  .fb_tips {
      display: flex;
      flex-wrap: wrap;
    text {
        width: 30%;
        padding: 10rpx;
        background-color: #fff;
        text-align: center;
        margin:20rpx 10rpx;
    }
  }
  .fb_content {
      background-color: #fff;
      margin-top: 20rpx;
    textarea {
        padding: 10rpx;
    }
    .fb_tool {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 30rpx;
        button{
          margin: 0;
            width: 90rpx;
            height: 90rpx;
            font-size: 60rpx;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 20rpx;
            margin-top: 20rpx;
            color: #ccc;
        }
        .up_img_item{
          margin-left: 20rpx;
          margin-top: 20rpx;
        }
    }
  }
  .form_btn_wrap {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-end;
      button{
        margin: 0;
        width: 38%;
        color: #fff;
        background-color: var(--themeColor);
      }
  }
}

js文件

// pages/feedback/index.js
Page({
  data: {
    tabs: [
      {
        id: 0,
        value: "体验问题",
        isActive: true,
      },
      {
        id: 1,
        value: "商品、商家投诉",
        isActive: false,
      },
    ],
    //文本的值
    textValue: "",
    //被选中的图片数组
    chooseimg: [],
    //上传后的图片数组
    upLoadImg: "",
  },
  onShow: function () {},
  //单击自定义组件事件
  handleTabsItemChange(e) {
    //console.log(e)
    //获取索引值
    const { index } = e.detail;
    let { tabs } = this.data;
    tabs.forEach((v, i) =>
      i === index ? (v.isActive = true) : (v.isActive = false)
    );
    this.setData({
      tabs,
    });
  },
  //选择图片事件
  handleimg(e) {
    console.log(e);
    //调用api
    wx.chooseImage({
      count: 9, //最多可选择几张照片
      sizeType: ["original", "compressed"], //图片格式 原图/压缩
      sourceType: ["album", "camera"], //图片来源
      success: (result) => {
        console.log(result);
        this.setData({
          //图片数组进行拼接
          chooseimg: [...this.data.chooseimg, ...result.tempFilePaths],
        });
      },
      fail: () => {},
      complete: () => {},
    });
  },
  //删除图片元素
  handleremoveimg(e) {
    console.log(e);
    //获取传递过来的索引值
    const { index } = e.currentTarget.dataset;
    //获取图片数组
    let { chooseimg } = this.data;
    //删除元素
    chooseimg.splice(index, 1);
    //将修改后的值重新赋值
    this.setData({
      chooseimg,
    });
  },
  //文本输入
  handleTextInput(e) {
    this.setData({
      textValue: e.detail.value,
    });
  },
  //提交按钮单击事件
  handlefrom(e) {
    //获取文本的值
    const { textValue, chooseimg } = this.data;
    //验证合法性
    if (!textValue.trim()) {
      //不合法
      wx.showToast({
        title: "输入有误",
        icon: "none",
        mask: true,
      });
      return;
    }
    //显示正在上传中
    wx.showLoading({
      title: "正在上传中",
      mask: true,
    });
    //判断有没有需要上传的图片数组
    if (chooseimg.length != 0) {
      //遍历数组
      chooseimg.forEach((v, i) => {
        //验证通过，上传图片==》图片服务器 api
        wx.uploadFile({
          //不支持多个文件同时上场==》遍历数组 挨个上传
          //url: 'https://images.ac.cn/Home/Index/UploadAction/',
          url: "https://imgchr.com/", //图片上传到哪里
          filePath: v, //路径
          name: "file", //图片名称
          formData: {}, //文本信息
          success: (result) => {
            console.log(result);
            //let url = HTML.parse(result.data).url;
            //this.upLoadImg.push(url)
            if (i === chooseimg.length - 1) {
              console.log("提交给后台，将回到上一界面");
              //关闭弹窗
              wx.hideLoading();
              //重置页面
              this.setData({
                textValue: "",
                chooseimg: [],
              });
              //返回上一个页面
              wx.navigateBack({
                delta: 1,
              });
            }
          },
        });
        wx.getNetworkType({
          success: (result) => {
            console.log(result)
          },
          fail: () => {},
          complete: () => {}
        });
      });
    } else {
      wx.hideLoading();
      console.log("只提交了文本");
      wx.navigateBack({
        delta: 1,
      });
    }
  },
});

感谢你的预览，文章持续更新中…
下一篇文章：微信小程序开发一个小型商城（十、搜索商品页面页面）