html
<view class="main">
<form bindsubmit="feedback">
<textarea class="main-content" auto-height placeholder="請輸入您的反饋，我們會不斷改進" id="content" name="content" />
<view class="main-telephone">
<label class="" for="telephone">
手機號
</label>
<input id='telephone' name='telephone' type="text" placeholder="請填寫(選填)" />
</view>
<button class="main-submit" id="submit" form-type="submit">我要反饋</button>
</form>
</view>
scss
page {
background-color: #ffffff;
}
.main {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin-top:50rpx;
.main-content {
border:1px solid #D3D3D3;
min-height: 200rpx;
margin-bottom:40rpx;
padding:20rpx;
font-size:28rpx;
}
.main-telephone {
display:flex;
label {
font-size:30rpx;
}
input {
font-size:28rpx;
margin-left:15rpx;
margin-top:3rpx;
}
}
.main-submit {
color:#fff;
background-color:#FF6D6D;
margin-top:30rpx;
}
}
自動生成wxss
page {
background-color: #ffffff;
}
.main {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 50rpx;
}
.main .main-content {
border: 1px solid #D3D3D3;
min-height: 200rpx;
margin-bottom: 40rpx;
padding: 20rpx;
font-size: 28rpx;
}
.main .main-telephone {
display: flex;
}
.main .main-telephone label {
font-size: 30rpx;
}
.main .main-telephone input {
font-size: 28rpx;
margin-left: 15rpx;
margin-top: 3rpx;
}
.main .main-submit {
color: #fff;
background-color: #FF6D6D;
margin-top: 30rpx;
}
結構非常清晰，很方便。
這里的表單提交，放到form中。
js
// pages/mine/advice/index.js
const util = require('../../../utils/getData.js');
const app = getApp();
Page({
/**
* 頁面的初始數據
*/
data: {
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
},
feedback: function (e) {
let that = this;
let uid = app.globalData.uid;
let content = e.detail.value.content;
let telephone = e.detail.value.telephone;
if (!content) {
wx.showToast({
title: '請填寫反饋內容',
icon : 'none',
duration: 1000
});
return;
}
util.getData('feedback', {
uid: uid,
content: content,
telephone: telephone,
method: 'POST'
}, function (res) {
if (res.errno) {
wx.showToast({
title: res.errdesc,
icon : 'none',
duration:1000
});
return;
}
wx.showToast({
title: res.errdesc
});
setTimeout(() => {
wx.navigateBack()
}, 2000)
})
},
})
很有意思。