仿微信意见反馈设计

仿微信意见反馈设计

​ 由于没有ui设计，要实现意见反馈功能，就仿照着微信的做了个demo。其中关于图片添加的组件

参考了博客：https://blog.youkuaiyun.com/qq_52126119/article/details/124441161?spm=1001.2014.3001.5506。

​ 具体的实现如下图所示，有任何问题也欢迎大家在评论区讨论，博主也是刚接触前端不久~

wxml：

<!--pages/suggestion/suggestion.wxml-->

<!-- 问题和意见 -->
<view class="txt">
  <view>问题和意见 </view>
  <view>0/200 </view>
</view>

<!-- 意见框 -->
<view class="txt_content">
  <textarea value="{{textVal}}" bindinput="handleTextInput" placeholder="请填写十个字以上的问题描述以便我们提供更好的帮助" placeholder-class="placeholderStyle"> </textarea>
</view>

<!-- 图片 -->
<view class="txt">
  <view>图片{选填，提供问题截图} </view>
  <view>0/4 </view>
</view>

<!-- 图片框 -->
<view class="txt_content">
  <view class="fb_tool">
    <button bindtap="handleChooseImg">+</button>

    <view class="up_img_item" wx:for="{{chooseImgs}}" wx:key="*this" bindtap="handleRemoveImg" data-index="{{index}}">
      <UpImg src="{{item}}"></UpImg>
    </view>

  </view>
</view>

<!-- 联系电话 -->
<view class="txt">
  <view>联系电话 </view>
</view>

<!-- 电话框 -->
<view class="txt_content" style="height: 40rpx;">
  <textarea value="{{telVal}}" bindinput="handleTextInput" placeholder="选填，便于我们与您联系" placeholder-class="placeholderStyle"> </textarea>
</view>

<!-- 提交按钮 -->
<view class="submit">
  <button>
    提交
  </button>
</view>

wxss:

/* pages/suggestion/suggestion.wxss */
page {
  background-color: #eeeeee;
}

.txt {
  display: flex;
  justify-content: space-between;
  padding: 25rpx 25rpx 10rpx 25rpx;
  font-size: 28rpx;
  color: #727171;
}

.txt_content {
  color: black;
  background-color: white;
  font-size: 35rpx;
  padding: 25rpx;
  /* height: 168rpx; */
}

.txt_content textarea {
  height: 168rpx;
}

.placeholderStyle {
  color: #ADA9A7;
  font-size: 30rpx;
}

.fb_tool {
  display: flex;
  padding: 8rpx;
}

.fb_tool button {
  margin: 0;
  width: 144rpx;
  height: 144rpx;
  font-size: 60rpx;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ccc;
}

.up_img_item {
  margin-left: 20rpx;
  margin-top: 20rpx;
}

.submit {
  margin: 100rpx 200rpx;
}

.submit button {
  background-color: #06c05f;
  color: white;
  font-weight: 526;
  display: flex;
  align-items: center;
  padding-left: 40%;
  height: 75rpx;
}

js:

Page({
  data: {
   
    // 被选中的图片路径 数组
    chooseImgs: [],
    // 文本域的内容
    textVal: "",
    telVal:""

  },
  // 外网的图片的路径数组
  UpLoadImgs: [],
  handleTabsItemChange(e) {
    // 1 获取被点击的标题索引
    const {
      index
    } = e.detail;
    // 2 修改源数组
    let {
      tabs
    } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    // 3 赋值到data中
    this.setData({
      tabs
    })
  },
  // 点击 “+” 选择图片
  handleChooseImg() {
    // 2 调用小程序内置的选择图片api
    wx.chooseImage({
      // 同时选中的图片的数量
      count: 9,
      // 图片的格式  原图  压缩
      sizeType: ['original', 'compressed'],
      // 图片的来源  相册  照相机
      sourceType: ['album', 'camera'],
      success: (result) => {
        this.setData({
          // 图片数组 进行拼接 
          chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths]
        })
      }
    });

  },
  // 点击 自定义图片组件
  handleRemoveImg(e) {
    // 2 获取被点击的组件的索引
    const {
      index
    } = e.currentTarget.dataset;
    // 3 获取data中的图片数组
    let {
      chooseImgs
    } = this.data;
    // 4 删除元素
    chooseImgs.splice(index, 1);
    this.setData({
      chooseImgs
    })
  },
  // 文本域的输入的事件
  handleTextInput(e) {
    this.setData({
      textVal: e.detail.value
    })
  },
  // 提交按钮的点击
  handleFormSubmit() {
    // 1 获取文本域的内容 图片数组
    const {
      textVal,
      chooseImgs
    } = this.data;
    // 2 合法性的验证
    if (!textVal.trim()) {
      // 不合法
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true
      });
      return;
    }
    // 3 准备上传图片 到专门的图片服务器 
    // 上传文件的 api 不支持 多个文件同时上传  遍历数组 挨个上传 
    // 显示正在等待的图片
    wx.showLoading({
      title: "正在上传中",
      mask: true
    });
    // 判断有没有需要上传的图片数组
    if (chooseImgs.length != 0) {
      chooseImgs.forEach((v, i) => {
        wx.uploadFile({
          // 图片要上传到哪里
          url: 'https://images.ac.cn/Home/Index/UploadAction/',
          // 被上传的文件的路径
          filePath: v,
          // 上传的文件的名称 后台来获取文件  file
          name: "file",
          // 顺带的文本信息
          formData: {},
          success: (result) => {
            console.log(result);
            let url = JSON.parse(result.data).url;
            this.UpLoadImgs.push(url);
            // 所有的图片都上传完毕了才触发  
            if (i === chooseImgs.length - 1) {
              //关闭正在等待的提示 
              wx.hideLoading();
              console.log("把文本的内容和外网的图片数组 提交到后台中");
              //  提交都成功了
              // 重置页面
              this.setData({
                textVal: "",
                chooseImgs: []
              })
              // 返回上一个页面
              wx.navigateBack({
                delta: 1
              });

            }
          }
        });
      })
    } else {
      wx.hideLoading();

      console.log("只是提交了文本");
      wx.navigateBack({
        delta: 1
      });

    }
  }
})

json:

{
  "usingComponents": {
    "Tabs":"../../component/Tabs/Tabs",
    "UpImg":"../../component/UpImg/UpImg",
    "van-button":"/miniprogram_npm/@vant/weapp/button/index"
  },
  "navigationBarTitleText": "意见反馈",
   "navigationBarBackgroundColor": "#eeeeee"
}