|
<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> |