![]()
![]()
<!--pages/feedback/index.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="{{textVal}}" bindinput="handleTextInput" placeholder="请描述一下您的问题"> </textarea>
<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="form_btn_wrap">
<button bindtap="handleFormSubmit">
<icon type="success_no_circle" size="23" color="white">
</icon>
提交</button>
</view>
</view>
</Tabs>
/* pages/feedback/index.wxss */
page {
background-color: #eee;
}
.fb_main {
padding: 20rpx;
color: #666;
}
.fb_main .fb_tips {
display: flex;
flex-wrap: wrap;
}
.fb_main .fb_tips text {
width: 30%;
padding: 10rpx;
text-align: center;
background-color: #fff;
margin: 20rpx 10rpx;
}
.fb_main .fb_content {
background-color: #fff;
margin-top: 20rpx;
}
.fb_main .fb_content textarea {
padding: 10rpx;
}
.fb_main .fb_content .fb_tool {
display: flex;
flex-wrap: wrap;
padding-bottom: 30rpx;
}
.fb_main .fb_content .fb_tool 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;
background-color: #eee;
}
.fb_main .fb_content .fb_tool .up_img_item {
margin-left: 20rpx;
margin-top: 20rpx;
}
.fb_main .form_btn_wrap {
margin-top: 20rpx;
display: flex;
justify-content: flex-end;
}
.fb_main .form_btn_wrap button {
margin: 0;
width: 35%;
background-color: var(--themeColor);
color: #fff;
display: flex;
}
// pages/feedback/index.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs:[
{
id:0,
value:'体验问题',
isActive:true
},
{
id:1,
value:'商品/商家投诉',
isActive:false
}
],
// 被选中的图片路径 数组
chooseImgs:[],
// 文本域的内容
textVal:""
},
// 外网的图片路径数组
UploadImgs:[],
// 提交按钮的点击
handleFormSubmit(){
// 1 获取文本域 的内容 图片数组
const {textVal,chooseImgs} = this.data;
// 2 合法性验证
if(!textVal.trim()){
// 不合法
wx.showToast({
title: '内容不能为空',
icon: 'none',
mask: true,
});
return
}
// 3 准备上传图片到专门的图片服务器
// 遍历图片数组 挨个上传
// 显示正在等待的图片
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,
// 名称 可以自定义
name: "file",
formData: {},
success: (result) => {
// console.log(result)
// 上传成功的代码
// let url = JSON.parse(result.data)
// this.UploadImgs.push(url)
// 所有图片上传完毕了 才触发
if(i === chooseImgs.length-1){
// 关闭弹窗
wx.hideLoading();
// 把 文本的内容和 图片 提交到后台
// 最后 重置页面
this.setData({
textVal:"",
chooseImgs:[]
})
// 返回上一个页面
wx.navigateBack({
delta: 1
});
}
}
});
})
}else{
console.log('只是提交了文本')
// 关闭弹窗
wx.hideLoading();
// 最后 重置页面
this.setData({
textVal:""
})
// 返回上一个页面
wx.navigateBack({
delta: 1
});
}
},
// 文本域的输入事件
handleTextInput(e){
this.setData({
textVal:e.detail.value
})
},
// 点击加号 选择图片
handleChooseImg(){
// 2 调用 小程序内置的 选择图片api
wx.chooseImage({
//选中的图片数量
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (result) => {
console.log(result)
this.setData({
// 图片数组 进行 拼接
chooseImgs: [...this.data.chooseImgs,...result.tempFilePaths]
})
}
});
},
// 标题点击
handleTabsItemChange(e){
// 1 获取被点击的标题索引
const {index} = e.detail
// console.log(index)
this.changeTitleByIndex(index)
},
// 点击自定义图片组件
handleRemoveImg(e){
// 2 获取被点击组件的索引
const {index} = e.currentTarget.dataset;
// console.log(index)
// 3 获取data 中的图片数组
let {chooseImgs} = this.data;
// 4 删除元素
chooseImgs.splice(index,1);
this.setData({chooseImgs})
},
// 根据标题索引来激活选中的 标题数组
changeTitleByIndex(index){
// 2 修改源数据
let {tabs} = this.data;
tabs.forEach( (v,i)=>i === index ? v.isActive = true : v.isActive = false )
// 3 赋值到 data 中
this.setData({
tabs
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
------------------
组件内容
--------------
{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs",
"UpImg":"../../components/UpImg/UpImg"
},
"navigationBarTitleText": "意见反馈"
}
<!--components/UpImg/UpImg.wxml-->
<view class="up_img_wrap">
<image src="{{src}}" />
<icon type="clear" size="15" 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: -15rpx;
right:-15rpx;
}
// components/UpImg/UpImg.js
Component({
/**
* 组件的属性列表
*/
properties: {
src:{
type:String,
value:""
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})
浙公网安备 33010602011771号