<view class="container">
<view class="title">用户反馈</view>
<form class="form" bindsubmit="formSubmit"
bindreset="formReset"
report-submit="true"
report-type="subscribe"
subscribe-id="food"
template-id="BD0001">
<view class="question">
<view class="pass pass1">
<view class="ques_title">您遇到了什么问题</view>
<radio-group name="radio-group" class="ques_ul">
<label class="items"><radio value="radio1" checked/>答案文不对题或明显错误</label>
<label class="items"><radio value="radio2"/>答案不算错但是不全面</label>
<label class="items"><radio value="radio3"/>答案文不对题或明显错误</label>
<label class="items"><radio value="radio4"/>答案不算错但是不全面</label>
<label class="items"><radio value="radio5"/>答案文不对题或明显错误</label>
</radio-group>
</view>
<view class="pass pass2">
<view class="ques_title">您遇到的问题具体是什么?</view>
<view class="pass2_textarea">
<textarea style="height: 6em;font-size: 14px;"
maxlength="-1"
auto-focus="{{focus}}"
cursor="-1" show-confirm-bar="true"
placeholder="您遇到的问题具体是什么?"
placeholder-class="plh"
selection-start="-1"
selection-end="-1"
adjust-position="true"
bindinput="bindInput"
bindfocus="bindFocus"
bindblur="bindBlur"
bindlinechange="bindLineChange"
bindconfirm="bindConfirm"
class="textarea_input textarea_text"
/>
<view class="textarea-remind"><text class="textarea-text-cur" id="text-count">{{ textareanumber }}</text>/300</view>
</view>
<view class="addpic">
<view class="addbutton" bindtap="selectImage">+</view>
<view s-if="{{imageList.length > 0 ? true : false}}" class="image-container">
<view class="imageList" s-for="{{ imageList }}">
<view class="delpic" data-index="{{ index }}" bindtap="delpic">
<image src="/images/delete@2x.png"></image>
</view>
<image class="image-items" src="{{ item }}" data-src="{{ item }}"></image>
</view>
</view>
<view s-else class="addtip" >
<view class="addtip_text">上传图片,最多四张</view>
<view class="addtip_text">图片小于2M</view>
</view>
</view>
</view>
<view class="pass pass3">
<view class="ques_title">您的联系方式是什么?</view>
<input type="text" class="ipt" cursor='10' bindblur="bindKeyblur" bindconfirm="bindKeyconfirm" placeholder="请留下邮箱或电话,使我们快速反馈"/>
</view>
<button class="tel_input" formType="submit" type="primary">提交</button>
</view>
</form>
</view>
Page({
data: {
//输入的文本数量
textareanumber: 0,
//上传图片组件
sourceIndex: 2,
sourceArray: ['拍照', '相册', '拍照或相册'],
sizeIndex: 2,
sizeArray: ['压缩', '原图', '压缩或原图'],
countIndex: 0,
countArray: [],
imageList: []
},
onLoad: function () {
// 监听页面加载的生命周期函数
},
bindInput(e) {
this.setData({
textareanumber: e.detail.cursor
})
},
//上传图片组件
selectImage() {
const sourceIndex = this.getData('sourceIndex');
if( this.data.imageList.length < 3 ){
const count = this.getData('countIndex') + 1;
if (sourceIndex === 2) {
swan.showActionSheet({
itemList: ['拍照', '相册'],
success: res => {
const sourceType = res.tapIndex === 0 ? 'camera' : 'album';
this.chooseImage(sourceType, count);
}
});
} else {
const sourceType = sourceIndex === 0 ? 'camera' : 'album';
this.chooseImage(sourceType, count);
}
}else{
swan.showToast({
title: '最多三张哦~',
})
}
},
chooseImage(sourceType, count) {
const sizeIndex = this.getData('sizeIndex');
let sizeType = ['compressed', 'original'];
if (sizeIndex === 0) {
sizeType = ['compressed'];
} else if (sizeIndex === 1) {
sizeType = ['original'];
}
swan.chooseImage({
count,
sizeType,
sourceType: [sourceType],
success: res => {
var image = res.tempFilePaths[0];
var arr = this.data.imageList;
arr.push(image);
this.setData('imageList', arr);
},
fail: err => {
console.log('chooseImage fail', err);
}
});
},
delpic: function(e){
var idx = e.currentTarget.dataset.index;
var imageList = this.data.imageList;
imageList.splice(idx, 1);
this.setData('imageList', imageList);
}
});
html,body{
font-family: "微软雅黑" !important;
background: #f5f5f5;
}
ul{
list-style-type: none
}
.container{
background: #fff;
margin-bottom: 2rem;
padding-bottom: .5rem;
}
.title{
width: 100%;
color: #000;
font-weight: bold;
box-sizing: border-box;
display: block;
font-size: 1rem;
line-height: 2.5rem;
text-align: center;
border-bottom: 1px solid #f5f5f5;
}
.question{
box-sizing: border-box;
padding: 0 12px 12px 12px;
}
.ques_title{
font-size: 1rem;
font-weight: bold;
margin-bottom: .7rem;
}
.items{
font-size: .85rem;
line-height: 2.4rem;
color: #555;
border-bottom: 1px solid #eee;
display: block;
}
.checkedbox{
width: 12px;
height: 12px;
border: 1px solid #999;
border-radius: 50%;
display: inline-block;
vertical-align: middle;
margin-right: .8rem;
}
.pass{
margin-top: 1.2rem;
margin-bottom: .6rem;
}
.pass2_textarea{
border: 1px solid #eee;
border-radius: 5px;
}
.textarea_text{
resize: none;
width: 100%;
word-break: normal;
word-wrap: normal;
-webkit-appearance: none;
appearance: none;
display: inline-block;
vertical-align: middle;
line-height: normal;
font-size: .9rem;
color: #000;
background-color: #fff;
border-radius: 5px;
overflow: scroll;
outline: 0;
box-sizing: border-box;
padding: .5rem;
border: none;
}
.textarea-remind{
color: #999;
font-size: .8rem;
width: 100%;
text-align: right;
box-sizing: border-box;
padding: .5rem;
}
.textarea-text-cur{
color: #999;
}
.addpic{
margin-top: .6rem;
display: flex
}
.addbutton{
width: 5.5rem;
height: 5.5rem;
border-radius: .05rem;
border: 1px solid #eee;
display: flex;
display: -webkit-flex;
align-items:center;
justify-content:center;
}
.imageList{
width: 5.5rem;
height: 5.5rem;
border-radius: .3rem;
overflow: hidden;
margin-left: .4rem;
display: inline-block;
margin-bottom: .3rem;
position: relative;
}
.delpic{
position:absolute;
top:0;
right:0;
background:#fff;
width:1.5rem;
height:1.5rem;
opacity:.8;
}
.delpic image{
width: 100%;
height: 100%
}
.image-items{
width: 100%;
height: 100%;
}
.addtip{
display: inline-block;
margin-left: .5rem;
}
.addtip_text{
color: #999;
font-size: .8rem;
position: relative;
top: 1.6rem;
}
.tel_input{
width: 100%;
font-size: 1rem;
background-color: #fff !important;
border: 1px solid #333 !important;
border-radius: .3rem;
margin-top: 2rem;
color: #333 !important;
font-weight: bold;
}
.submitbutton{
display: inline-block;
padding: 0 .08rem;
width: 100%;
font: 14px/24px Arial,Helvetica,sans-serif;
line-height: 2rem;
text-decoration: none;
text-align: center;
color: #000;
background-color: #fff;
border: 1px solid #707379;
border-radius: 5px;
vertical-align: middle;
overflow: hidden;
outline: 0;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-tap-highlight-color: rgba(0,0,0,0);
border-radius: 5px;
}
#demo{
width: 100% !important;
height: auto !important;
}
.upload_box{
margin: 0 auto !important;
}
.add_imgBox{
width: 1.2rem !important;
height:1.5rem !important;
}
.imgBox{
width: 1.2rem !important;
height:1.5rem !important;
}
.upload_main{
border-top: none;
border-bottom: none;
}
.uploadImg img{
margin: 0 auto;
}
.checked{
background: #888;
}
.ipt{
border: 1px solid #eee;
font-size: .9rem;
padding: .3rem;
border-radius: .3rem;
}