mirror of
https://gitee.com/beecue/fastbee.git
synced 2025-12-18 17:05:55 +08:00
添加意见反馈页面
This commit is contained in:
qianlile
115
wechat/pages/feedBack/feedBack.js
Normal file
115
wechat/pages/feedBack/feedBack.js
Normal file
@@ -0,0 +1,115 @@
|
||||
// pages/feedBack/feedBack.js
|
||||
|
||||
const { request } = require('../../API/request');
|
||||
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
selectData:[
|
||||
{ id:1,text:'程序bug' },
|
||||
{ id:2,text:'内容意见' },
|
||||
{ id:3,text:'网络问题' },
|
||||
{ id:4,text:'功能建议' },
|
||||
{ id:5,text:'其他' }
|
||||
],
|
||||
maxlength:200,
|
||||
radio: 1,
|
||||
value:'',
|
||||
tempFilePaths:[],
|
||||
phoneNum:'',
|
||||
lengthErr:false
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
wx.setNavigationBarTitle({
|
||||
title: '意见反馈'
|
||||
});
|
||||
wx.setNavigationBarColor({
|
||||
backgroundColor: '#58bcff',
|
||||
frontColor: '#ffffff',
|
||||
})
|
||||
},
|
||||
|
||||
checkOne(e){
|
||||
this.setData({
|
||||
radio:e.detail
|
||||
})
|
||||
},
|
||||
|
||||
inputDetail(e){
|
||||
if (e.detail.value.trim().length >= 15) {
|
||||
this.setData({
|
||||
lengthErr:false
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
value:e.detail.value
|
||||
})
|
||||
},
|
||||
|
||||
chooseImage(){
|
||||
const that = this;
|
||||
let tempFilePaths = this.data.tempFilePaths;
|
||||
wx.chooseImage({
|
||||
count: 3,
|
||||
sizeType: ['original', 'compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (result) => {
|
||||
that.setData({
|
||||
tempFilePaths:tempFilePaths.concat(result.tempFilePaths)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
previewImage(e){
|
||||
console.log(e);
|
||||
wx.previewImage({
|
||||
urls: this.data.tempFilePaths,
|
||||
current:this.data.tempFilePaths[e.currentTarget.dataset.index]
|
||||
})
|
||||
},
|
||||
|
||||
deleteImage(e){
|
||||
let tempFilePaths = this.data.tempFilePaths;
|
||||
tempFilePaths.splice(e.currentTarget.dataset.index,1);
|
||||
this.setData({
|
||||
tempFilePaths
|
||||
})
|
||||
},
|
||||
inputNum(e){
|
||||
this.setData({
|
||||
phoneNum:e.detail.value
|
||||
})
|
||||
},
|
||||
|
||||
async submit(){
|
||||
const tempFilePaths = this.data.tempFilePaths;
|
||||
const describe = this.data.value;
|
||||
const phone = this.data.phoneNum;
|
||||
const radio = this.data.radio;
|
||||
if(describe.trim().length < 15){
|
||||
this.setData({
|
||||
lengthErr:true
|
||||
})
|
||||
return;
|
||||
}
|
||||
const res = await request('','post',{
|
||||
phone,
|
||||
tempFilePaths,
|
||||
describe,
|
||||
type:this.data.selectData[radio-1]
|
||||
});
|
||||
if (res.code === 200) {
|
||||
wx.switchTab({
|
||||
url: '/pages/my/my',
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
3
wechat/pages/feedBack/feedBack.json
Normal file
3
wechat/pages/feedBack/feedBack.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
59
wechat/pages/feedBack/feedBack.wxml
Normal file
59
wechat/pages/feedBack/feedBack.wxml
Normal file
@@ -0,0 +1,59 @@
|
||||
<!--pages/feedBack/feedBack.wxml-->
|
||||
<view class="checkbox">
|
||||
<view class="title">选择反馈类型</view>
|
||||
<van-radio-group
|
||||
value="{{ radio }}"
|
||||
bind:change="onChange"
|
||||
direction="horizontal"
|
||||
bind:change="checkOne"
|
||||
>
|
||||
<van-radio wx:for="{{ selectData }}" name="{{ item.id }}" >{{ item.text }}</van-radio>
|
||||
</van-radio-group>
|
||||
</view>
|
||||
|
||||
<view class="input">
|
||||
<view class="main">
|
||||
<textarea placeholder="请输入15~200字的问题描述"
|
||||
value="{{ value }}" maxlength='{{ maxlength }}'
|
||||
bindinput="inputDetail">
|
||||
</textarea>
|
||||
|
||||
<view class="addImage">
|
||||
<view class="add">
|
||||
<image bindtap="chooseImage" src="/icons/add_1.png" />
|
||||
</view>
|
||||
<view class="imgs">
|
||||
<view class="item" wx:for="{{ tempFilePaths }}" wx:key='index'>
|
||||
<image bindtap="previewImage" data-index='{{ index }}' src="{{ item }}" />
|
||||
<view class="delete">
|
||||
<image src="/icons/delete.png" bindtap="deleteImage" data-index="{{ index }}" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="length">
|
||||
<text>{{ value.length }}</text>
|
||||
<text>/</text>
|
||||
<text>{{ maxlength }}</text>
|
||||
</view>
|
||||
<view wx:if="{{ lengthErr }}" class="errMsg {{ lengthErr && 'Vibration' }}">
|
||||
<text style="color:#ff0000;">请至少输入15个字符！</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="phone">
|
||||
<view class="title">联系方式（选填）</view>
|
||||
<view class="inputPhone">
|
||||
<view class="icon">
|
||||
<image src="/icons/phone.png" />
|
||||
</view>
|
||||
<input type="number" placeholder="请输入手机号" value="{{ phoneNum }}" bindtap="inputNum" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="btn">
|
||||
<van-button block color='#58bcff' round bindtap="submit">默认按钮</van-button>
|
||||
</view>
|
||||
138
wechat/pages/feedBack/feedBack.wxss
Normal file
138
wechat/pages/feedBack/feedBack.wxss
Normal file
@@ -0,0 +1,138 @@
|
||||
/* pages/feedBack/feedBack.wxss */
|
||||
.checkbox{
|
||||
width: calc(100vw - 120rpx);
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 0 12rpx #bfbfbf;
|
||||
margin: 30rpx auto 15rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.title{
|
||||
color: #9e9e9e;
|
||||
padding-bottom: 15rpx;
|
||||
}
|
||||
.van-radio{
|
||||
margin: 15rpx 0;
|
||||
}
|
||||
.length{
|
||||
color: #9e9e9e;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.input{
|
||||
width: calc(100vw - 120rpx);
|
||||
padding: 30rpx;
|
||||
box-shadow: 0 0 12rpx #bfbfbf;
|
||||
margin: 15rpx auto;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.main{
|
||||
box-shadow: 0 0 5rpx #bfbfbf;
|
||||
}
|
||||
textarea{
|
||||
padding:15rpx;
|
||||
height: 150rpx;
|
||||
width: calc(100% - 30rpx);
|
||||
}
|
||||
.phone{
|
||||
width: calc(100vw - 120rpx);
|
||||
padding: 15rpx 30rpx;
|
||||
box-shadow: 0 0 12rpx #bfbfbf;
|
||||
margin: 15rpx auto;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.inputPhone{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.inputPhone>input{
|
||||
padding: 10rpx 30rpx;
|
||||
border-bottom: 2rpx solid #bfbfbf;
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.addImage{
|
||||
display: flex;
|
||||
}
|
||||
.add{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border: 4rpx dashed #aaaaaa;
|
||||
margin: 15rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.add>image{
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
.add>image:active{
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
}
|
||||
.imgs{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.item{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border: 2rpx solid #8a8a8a;
|
||||
margin: 15rpx;
|
||||
position: relative;
|
||||
}
|
||||
.item>image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.delete{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ff1515;
|
||||
transform: translate(50%,-50%);
|
||||
border:1rpx solid #666;
|
||||
}
|
||||
.delete>image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon{
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.icon>image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.btn{
|
||||
width: calc(100vw - 60rpx);
|
||||
padding: 30rpx;
|
||||
}
|
||||
.Vibration{
|
||||
animation: Vibration 0.3s 1;
|
||||
}
|
||||
@keyframes Vibration{
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-10rpx);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(10rpx);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(10rpx);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-10rpx);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user