微信小程式專案之失物招領平臺-4.資訊釋出頁面的編寫
阿新 • • 發佈:2019-01-09
1.send.js檔案,新增資料及方法
// pages/send/send.js Page({ /** * 頁面的初始資料 */ data: { tabs1: [ { text: '首頁', }, { text: '釋出', }, { text: '查詢', }, { text: '我的', }, ], items: [ { name: '1', value: '證件' }, { name: '2', value: '書籍' }, { name: '3', value: '服飾' }, { name: '4', value: '食品' }, { name: '5', value: '其他' } ], images: [], category:"", content:"" }, //單選框選擇事件 radioChange: function (e) { console.log('radio發生change事件,攜帶value值為:', e.detail.value); this.setData({ category: e.detail.value }) }, //上傳圖片 chooseImage() { var that = this; if (this.data.images.length < 3) { wx.chooseImage({ sizeType: ['original', 'compressed'], success: function (res) { that.setData({ images: that.data.images.concat(res.tempFilePaths) }) } }) } else { wx.showToast({ title: '最多上傳三張圖片', icon: 'loading', duration: 3000 }); } }, // 刪除圖片 deleteImg: function (e) { var imgs = this.data.images; var index = e.currentTarget.dataset.index; imgs.splice(index, 1); this.setData({ images: imgs }); }, //失去焦點時獲取輸入框內容 bindTextAreaBlur: function (e) { console.log(e.detail.value) this.setData({ content: e.detail.value, }) }, //失物招領表單的提交 lostandfoundMsgFormSubmit(e){ var category = this.data.category; var content=this.data.content; //test console.log("category:"+category); console.log("content:"+content); var images=this.data.images; for(var i=0;i<images.length;i++){ console.log("圖片地址:"+images[i]); } this.setData({ images:[] }); wx.showToast({ title: '釋出成功', duration:2000 }) }, //選單導航欄的跳轉 handleChange(e) { const index = e.detail.value; console.log(e); console.log("value: " + e.detail.value); switch (index) { case 0: wx.redirectTo({ url: '/pages/lostandfound/lostandfound', }) break; case 1: // wx.navigateTo({ // url: '/pages/send/send', // }) break; case 2: wx.redirectTo({ url: '/pages/find/find', }) break; case 3: wx.redirectTo({ url: '/pages/userMsg/userMsg', }) break; } }, handleSelected() { this.setData({ index: 2, }); }, handleClick(e) { const { index, title } = e.detail; console.log('點選了tab:' + index, title); }, /** * 生命週期函式--監聽頁面載入 */ onLoad: function (options) { }, /** * 生命週期函式--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命週期函式--監聽頁面顯示 */ onShow: function () { }, /** * 生命週期函式--監聽頁面隱藏 */ onHide: function () { }, /** * 生命週期函式--監聽頁面解除安裝 */ onUnload: function () { }, /** * 頁面相關事件處理函式--監聽使用者下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函式 */ onReachBottom: function () { }, /** * 使用者點選右上角分享 */ onShareAppMessage: function () { } })
2.send.json檔案中引入相應的UI元件
{
"usingComponents": {
"w-button": "/dist/w-button/index",
"w-tabs": "/dist/w-tabs/index",
"w-cell": "/dist/w-cell/index",
"w-cell-group": "/dist/w-cell-group/index",
"w-input": "/dist/w-input/index"
}
}
3.send.wxss檔案
/* pages/send/send.wxss */ .tabs{ position: fixed; width: 100%; bottom: 0; } .big-logos { float: left; margin-top: 10rpx; margin-bottom: 10rpx; width: 100%; height: 200rpx; border: 1px solid #ccc; } .big-logos .big-logos_img { float: left; width: 100%; height: 200rpx; } .big-logos .big-logos_img image { float: left; width: 250rpx; height: 200rpx; } .big-logos .logoinfo { float: left; width: 250rpx; height: 200rpx; margin-top: -196rpx; } .big-logos .logoinfo image { float: left; width: 250rpx; height: 200rpx; } .delete-btn{ width: 10%; height: 50rpx; } .submit-btn-view{ margin-top: 50rpx; } .submit-btn{ background-color: green; color: white; } .space{ width: 100%; height: 80rpx; }
4.send.wxml檔案
<!--pages/send/send.wxml--> <view> <form bindreset="lostandfoundMsgFormSubmit"> <label>1.選擇類別</label> <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group> <!-- 留下距離--> <view class='space'></view> <label>2.輸入內容</label> <w-cell-group> <!-- <w-input clear count="200" type="textarea" placeholder="輸入" bindblur='bindTextAreaBlur'/> --> <textarea placeholder="請輸入200字以內" bindblur='bindTextAreaBlur' maxlength='200'></textarea> </w-cell-group> <!-- 留下距離--> <view class='space'></view> <label>3.上傳圖片</label> <!-- 圖片上傳--> <view class="big-logos"> <view class='big-logos_img'> <image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image> <image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image> <image bindtap="chooseImage" src='/images/wx_app_add.jpg'></image> </view> <block wx:for="{{images}}" wx:key="{{index}}"> <view class='logoinfo'> <image src='{{item}}' catchtap='deleteImg'></image> </view> </block> </view> <!-- 圖片上傳--> <!-- 留下距離--> <view class='space'></view> <view class='submit-btn-view'> <button formType="reset" class='submit-btn' >釋出</button> </view> </form> </view> <view class='tabs'> <w-tabs bind:onChange="handleChange" currentIndex="1" options="{{ tabs1 }}" /> </view>