您的当前位置:首页正文

13 | 小程序实战之意见反馈

2024-11-26 来源:个人技术集锦

前言

其实微信小程序的button按钮,open-type可以跳转到内置的意见反馈界面,你如果想自己自定义一个意见反馈界面可以看看这篇文章,可以上传图片的哟

13.1 效果

13.2 静态页面

<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="{{textVal}}"
       bindinput="handleTextInput"
       placeholder="请描述一下您的问题"
      > </textarea>
      <view class="fb_tool">
        <button bindtap="handleChooseImg">+</button>
      </view>
    </view>
    <view class="form_btn_wrap">
      <button bindtap="handleFormSubmit" type="warn">
        <icon
         type="success_no_circle"
         size="23"
         color="white"
        >
        </icon>
        提交
      </button>
    </view>
  </view>
</Tabs>
page {
  background-color: #eeeeee;
}
.fb_main {
  padding: 20rpx;
  color: #666;
  .fb_title {
  }
  .fb_tips {
    display: flex;
    flex-wrap: wrap;
    text {
      width: 30%;
      padding: 10rpx;
      text-align: center;
      background-color: #fff;
      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{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin: 0;
      width: 30%;
      color: white;
      background-color: #e64340;
    }
  }
}
Page({
  data: {
    tabs: [
      {
        id: 0,
        value: "体验问题",
        isActive: true
      },
      {
        id: 1,
        value: "商品、商家投诉",
        isActive: false
      }
    ]
  }
})

13.3 选择并显示图片

(1)思路

1 先创建一个用来显示上传后的图片的组件
2 点击 “+” 触发tap点击事件
3 调用小程序内置的 选择图片的 api
4 获取到 图片的路径 数组
5 把图片路径 存到 data的变量中
6 页面就可以根据 图片数组 进行循环显示 自定义组件

(2)代码
1 自定义组件 UpImgs
<view class="up_img_wrap">
  <image src="{{src}}"></image>
  <icon
   type="clear"
   size="23"
   color="red"
  >
  </icon>
</view>
.up_img_wrap{
  width: 90rpx;
  height: 90rpx;
  position: relative;
}
.up_img_wrap image{
  width: 100%;
  height: 100%;
  border-radius: 15rpx;
}
.up_img_wrap icon{
  position: absolute;
  top:-22rpx;
  right: -22rpx;
}
properties: {
    src:{
      type:String,
      value:""
    }
  },
2 反馈页面
<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="{{textVal}}"
       bindinput="handleTextInput"
       placeholder="请描述一下您的问题"
      >
      </textarea>
      <view class="fb_tool">
        <button bindtap="handleChooseImg">+</button>
        <view
         class="up_img_item"
         wx:for="{{chooseImgs}}"
         wx:key="*this"
        >
          <UpImgs src="{{item}}"></UpImgs>
        </view>
      </view>
    </view>
    <view class="form_btn_wrap">
      <button bindtap="handleFormSubmit" type="warn">
        <icon
         type="success_no_circle"
         size="23"
         color="white"
        >
        </icon>
        提交
      </button>
    </view>
  </view>
</Tabs>
page {
  background-color: #eeeeee;
}
.fb_main {
  padding: 20rpx;
  color: #666;
  .fb_title {
  }
  .fb_tips {
    display: flex;
    flex-wrap: wrap;
    text {
      width: 30%;
      padding: 10rpx;
      text-align: center;
      background-color: #fff;
      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{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin: 0;
      width: 30%;
      color: white;
      background-color: #e64340;
    }
  }
}
Page({
  data: {
    tabs: [
      {
        id: 0,
        value: "体验问题",
        isActive: true
      },
      {
        id: 1,
        value: "商品、商家投诉",
        isActive: false
      }
    ],
    // 被选中的图片路径 数组
    chooseImgs: []
  },
  // 外网的图片的路径数组
  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]
        })
      }
    });
  },
})

13.4 删除上传的图片

(1)思路

1 点击 自定义图片 组件
2 获取被点击的元素的索引
3 获取 data中的图片数组
4 根据索引 数组中删除对应的元素
5 把数组重新设置回data中

(2)代码

在意见反馈页面中修改部分代码

<view
         class="up_img_item"
         wx:for="{{chooseImgs}}"
         wx:key="*this"
         bindtap="handleRemoveImg"
         data-index="{{index}}"
        >
          <UpImgs src="{{item}}"></UpImgs>
        </view>
// 根据索引删除上传的图片
  handleRemoveImg(e){
    // 1 获取被点击的组件的索引
    const {index} = e.currentTarget.dataset;
    // 2 获取data中的图片数组
    let { chooseImgs } = this.data;
    // 3 删除元素
    chooseImgs.splice(index, 1);
    this.setData({
      chooseImgs
    })
  }

13.5 提交功能

  // 文本域的输入的事件
  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://img.coolcr.cn/api/upload',
          // 被上传的文件的路径
          filePath: v,
          // 上传的文件的名称后台来获取文件file
          name: "image",
          // 顺带的文本信息
          formData: {},
          success: (result) =>{
            console.log(result);
            let url=JSON.parse (result.data);
            this.UpLoadImgs.push(url);
            // 所有的图片都上传完毕了才触发
            if(i===chooseImgs.length-1){

              // 关闭正在等待的图片
              wx.hideLoading();
              console.log("把文本的内容和外网的图片数组提交到后台中");
              // 提交都成功了
              // 重置页面
              this.setData({
                textVal:"",
                chooseImgs:[]
              })
              // 返回上一个页面
              wx.navigateBack({
                delta: 1
              });
            }
            console.log(this.UpLoadImgs);
          },
        })

      })

    }else{
      // 关闭弹窗
      wx.hideLoading();
      console.log("只是提交了文");
      // 返回上个页面
      wx.navigateBack({
        delta:1
      });
    }
显示全文