<template>
<view class="page">
<view class="content">
<view class="input_text">
<input type="text" v-model="title" placeholder="請輸入標題"/>
</view>
<view class="text">
<textarea maxlength="140" v-model="content" rows="2" placeholder="請輸入您要留言的內容" placeholder-class="plac" @input="conInput"></textarea>
<view class='text_right'>
<view class="em" style='color:red'>{{tatVal}}</view>/<view class="span">140</view>
</view>
</view>
</view>
</view>
</template>
<script>
var guid = uni.getStorageSync('guid');
export default {
computed: {
},
data() {
return {
title:'',
content:'',
tatVal: 0
};
},
onLoad() {
},
onNavigationBarButtonTap(btn){
if(btn.index==0){
if(this.title==""){
uni.showToast({
icon: 'none',
title: '標題不能為空'
});
}else if(this.content==""){
uni.showToast({
icon: 'none',
title: '內容不能為空'
});
}else{
this.getNews();
}
}
},
methods:{
conInput(){
this.tatVal = this.content.length;
if(this.tatVal == 140){
uni.showToast({
icon: 'none',
title: '最多只能輸入140個字'
});
}
},
getNews(){
// 请求
var url = this.$url+'messageBoard';
console.log(JSON.stringify(url));
uni.request({
url: url,
data: {
guid: guid,
title: this.title,
content: this.content
},
method:'POST',
success: (res) => {
console.log(JSON.stringify(res));
if(res.data.code==1){
uni.showToast({
title: '留言成功',
icon: "none",
});
setTimeout(()=>{
uni.navigateBack({
delta:1
});
},1000);
}else {
uni.showToast({
title: '留言失敗',
icon: "none",
});
}
},
fail: (data, code) => {
uni.showToast({
title: '網絡異常',
icon: "none",
});
}
});
}
},
}
</script>
<style>
.order-btn{display: block;width: 95%;height:90upx;line-height: 90upx;text-align: center;color: white;font-size:32upx;background-color: #e11c1c;border-radius:20upx;margin:0upx auto;}
.input_text{
width: 90%;
height: 100upx;
margin: 20upx auto;
background-color: #fff;
border-radius: 20upx;
}
.input_text input{
border: none;
border-radius: 16upx;
padding: 20upx;
}
::-webkit-input-placeholder{
color: #ccc;
font-size: 14px;
}
.text{
width: 90%;
height: 400upx;
margin: 10upx auto;
}
.text textarea{
width: 95%;
height: 400upx;
background-color: #fff;
border-radius: 20upx;
border: none;
padding: 20upx;
}
.text_right{
position: absolute;
right: 50upx;
margin-top: -60upx;
font-size: 14px;
display: flex;
}
</style>