仿微信意见反馈设计
由于没有ui设计,要实现意见反馈功能,就仿照着微信的做了个demo。其中关于图片添加的组件
参考了博客:https://blog.csdn.net/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"
}