一、項目文件說明:
(注:getMyMoney無用已刪除)
二、重要文件介紹
1.reinfo.js:位于utils文件下,該文件封裝有統一的請求URL,和請求API同意封裝供頁面調用;調用時候需要在頁面上先引入該文件,如下(index/index.js為例):
//先引入
import API from "../../utils/reinfo.js";// 后使用的時候如下
wx.request({url: API.getSysConfig,//這里的API就是上面引入時候的名字,getSysConfig就是我們reinfo.js文件里封裝的method:"get",success: function (res) {// 調用接口成功后執行的}
})
2.app.js:這個是小程序的啟動文件,每次小程序啟動的話,必定會執行這個文件里的方法。
//onLaunch 小程序生命周期,啟動就會執行
onLaunch: function () {var that=this;// 展示本地存儲能力var openId = wx.getStorageSync('openId') || null// 獲取用戶openid、使用 Promise // 這里的獲取用戶openid使用Promise 因為需要讓index.js可以調用他來獲取openid,因為index作為第一個小程序頁面,也具有優先執行權,有時候會在app.js執行之前先執行,有時候會在app.js執行之后執行,所以這里使用Promise做一個異步請求,來供index.js頁面調用回調獲取用戶數據const getUserOpenId = new Promise((resolve, reject) => {if(openId){console.log('緩存openid',openId)resolve(openId); // resolve Promise}else{// 登錄code獲取openidwx.login({success: function (res) {var code = res.code;//發送給服務器的codeif (code) {wx.request({url: API.getSessinOpenid,method:"post",data: {code: code,},header: {'content-tpe': 'application/json'},success: function (res) {console.log('獲取到的用戶openid為:',res)//可以把openid保存到本地緩存,方便以后調用wx.setStorageSync('openId', res.data.data);// that.getUserInfoFun(res.data.data)resolve(res.data.data); // resolve Promise},fail:function(res){reject(err); // reject Promiseconsole.log(res)}})}else {console.log("獲取用戶登錄態失敗!");}},fail: function (error) {}})}});// 將 Promise 對象存儲到全局數據對象中this.globalData.getUserOpenId = getUserOpenId;// 獲取用戶信息//這個獲取用戶信息同上意思const getUserInfo = new Promise((resolve, reject) => {wx.request({url: API.getUserInfo,method:"post",data: {openId: wx.getStorageSync('openId') || null,},success: function (res) {console.log('openid獲取用戶信息:',res)wx.setStorageSync('userInfo', res.data.data);resolve(res.data.data); // resolve Promise}})})// 將 Promise 對象存儲到全局數據對象中this.globalData.getUserInfo = getUserInfo;},
這個頁面底部有個changeTabBar方法這個是自定義底部導航組件用來切換頁面的公共方法
小程序組件的使用方法如下:
1.封裝組件如comment\tabbar\tabbar.wxml這里就是封裝了一個底部導航組件:
其他需要使用的頁面進行引入(index/index):
wxml:
<import src="../../comment/tabbar/tabbar.wxml" />
<template is="tabbar" data="{{tabbar}}"/>
js:
//獲取應用實例
const app = getApp();
Page({
/*** 頁面的初始數據*/data: {//底部導航欄tabbar: {},},//在onshow或者onload調用app下的changeTabBar方法來進行點擊切換頁面onload(){//調用app中的函數app.changeTabBar(); }
})
3.postOrder:發布訂單是一個大麻煩:這里需要使用一個點擊切換和滑動切換(同用戶訂單列表頁和跑腿訂單列表頁)。
wxml:
<view class="navbar"><text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text>
</view>
js:
/*** 頁面的初始數據*/
data: {navbar: ['幫我買', '幫我送', '幫我取'],currentTab: 0,
}//電機頭部切換barnavbarTap: function (e) {console.log( e.currentTarget.dataset.idx)let initPrice = app.globalData.sysConfig.minDeliveryPrice// 切換的時候需要將數據清空,讓用戶重新輸入let postData = {"commodity": "","commodityCost": 0,"commodityWeight": 1,"deliveryAddress": "","deliveryConcat": "","deliveryPhone": "","deliveryTime": "","openId": "","orderType": e.currentTarget.dataset.idx*1,"pickUpAddress": "","pickUpContact": "","pickUpPhone": "","pickUpTime": "","remark": "","tipCost": 0,"totalCost": 0}// 設置取貨時間、配送時間postData.deliveryTime = this.calculateFutureTime()if(postData.orderType == 1||postData.orderType == 2){postData.pickUpTime = this.calculateFutureTime()}var userInfo = wx.getStorageSync('userInfo') || {}postData.deliveryPhone = userInfo.phone// postData.orderType = e.currentTarget.dataset.idxthis.setData({currentTab: e.currentTarget.dataset.idx,postData,multiIndex1: [0, 0], // 默認選擇當天和第一個時間段multiIndex2: [0, 0], // 默認選擇當天和第一個時間段multiIndex3: [0, 0], // 默認選擇當天和第一個時間段multiIndex4: [0, 0], // 默認選擇當天和第一個時間段price: initPrice})//全局變量app.globalData.currentTab = e.currentTarget.dataset.idx;},// 輪播切換,即左右滑動切換swiperChange: function (e) {let initPrice = app.globalData.sysConfig.minDeliveryPrice// 切換類型的話清空let postData = {"commodity": "","commodityCost": 0,"commodityWeight": 1,"deliveryAddress": "","deliveryConcat": "","deliveryPhone": "","deliveryTime": "","openId": "","orderType": e.detail.current*1,"pickUpAddress": "","pickUpContact": "","pickUpPhone": "","pickUpTime": "","remark": "","tipCost": 0,"totalCost": 0}// 設置取貨時間、配送時間postData.deliveryTime = this.calculateFutureTime()if(postData.orderType == 1||postData.orderType == 2){postData.pickUpTime = this.calculateFutureTime()}var userInfo = wx.getStorageSync('userInfo') || {}postData.deliveryPhone = userInfo.phonethis.setData({currentTab: e.detail.current,postData,multiIndex1: [0, 0], // 默認選擇當天和第一個時間段multiIndex2: [0, 0], // 默認選擇當天和第一個時間段multiIndex3: [0, 0], // 默認選擇當天和第一個時間段multiIndex4: [0, 0], // 默認選擇當天和第一個時間段price: initPrice})//全局變量app.globalData.postOrderCurrentTab = e.detail.current;},
來實現頂部以及點擊切換:
配送時間的選擇,進行一個立即配送和之后的每隔30分鐘可供選擇,有當天和次日,
wxml:
<view class="v1-item"><view>預計送達時間</view><picker mode="multiSelector" bindcolumnchange="bindMultiPickerColumnChange" range="{{[dateRange, timeRange]}}" value="{{multiIndex1}}" data-id="1" bindchange="bindMultiPickerChange"><view class="picker">{{dateRange[multiIndex1[0]]}} {{timeRange[multiIndex1[1]]}}</view></picker>
</view>
js:
data:{dateRange: ['今天', '明天'],timeRange: [], // 存儲時間段的數組multiIndex1: [0, 0], // 默認選擇當天和第一個時間段 幫我買:預計送達時間multiIndex2: [0, 0], // 默認選擇當天和第一個時間段 幫我送:預計取貨時間multiIndex3: [0, 0], // 默認選擇當天和第一個時間段 幫我送:預計送達時間multiIndex4: [0, 0], // 默認選擇當天和第一個時間段 幫我取:預計送達時間
}// 配送時間選擇列表發生改變時候監聽bindMultiPickerColumnChange(e){console.log('修改的列為', e.detail.column, ',值為', e.detail.value,e);if(e.detail.column == 0 && e.detail.value == 1){var startOfDay = new Date();startOfDay.setHours(0, 0, 0, 0);dayType = 1this.generateTimeRange(startOfDay)}else if(e.detail.column == 0 && e.detail.value == 0){dayType = 0this.generateTimeRange(new Date())}},// 計算時間選擇列表generateTimeRange: function(now) {// var now = new Date();var hours = now.getHours();var minutes = now.getMinutes();var timeRange = [];// 生成時間段,每半個小時為一個時間段,共24小時for (var i = 0; i < 48; i++) {var hour = Math.floor(i / 2);var minute = (i % 2) * 30;// 格式化時間,補零操作var hourStr = hour < 10 ? '0' + hour : '' + hour;var minuteStr = minute === 0 ? '00' : '' + minute;if (hour > hours || (hour == hours && minute >= minutes)) {timeRange.push(hourStr + ':' + minuteStr);}}if(dayType == 0){timeRange[0] = '立即配送'}this.setData({timeRange: timeRange});},// 根據當前時間自動計算30分鐘后的時間,并在遇到23:40時能正確計算到次日calculateFutureTime() {var currentDate = new Date();var futureDate = new Date(currentDate.getTime() + 30 * 60000); // 加上30分鐘的毫秒數// 如果超過了當天的23:59:59,就設置到次日的00:30if (futureDate.getDate() > currentDate.getDate()) {futureDate = new Date(futureDate.getFullYear(), futureDate.getMonth(), futureDate.getDate(), 0, 30, 0);var originalDate = new Date(futureDate);var hour = originalDate.getHours()<10?'0'+originalDate.getHours():originalDate.getHours();// var minute = originalDate.getMinutes();var minute = originalDate.getMinutes()<10?'0'+originalDate.getMinutes():originalDate.getMinutes();var formattedTime = hour + ':' + minute;// var formattedTime = hour<10?0+hour:hour + ':' + minute;console.log("當前時間0000:" , currentDate);console.log("30分鐘后的時間000:" , futureDate,formattedTime);return '次日 '+formattedTime;}var originalDate = new Date(futureDate);var hour = originalDate.getHours()<10?'0'+originalDate.getHours():originalDate.getHours();var minute = originalDate.getMinutes()<10?'0'+originalDate.getMinutes():originalDate.getMinutes();// var minute = originalDate.getMinutes();var formattedTime = hour + ':' + minute;// var formattedTime = hour<10?0+hour:hour + ':' + minute;console.log("當前時間111:" , currentDate);console.log("30分鐘后的時間1111:" , futureDate,formattedTime);return '今天 '+formattedTime;},// 選擇bindMultiPickerChange: function(e) {console.log('選擇',e)let postData = this.data.postDatalet type = e.currentTarget.dataset.idconsole.log('這樣可以嗎?',this.data['multiIndex'+type])// 如果是立即配送自動匹配現在的30分鐘后if(this.data.timeRange[e.detail.value[1]] == '立即配送'){postData.deliveryTime = this.calculateFutureTime()}if(type == 1){postData.deliveryTime = this.data.dateRange[this.data['multiIndex'+type][0]] +' '+ this.data.timeRange[this.data['multiIndex'+type][1]]}if(type == 2){postData.pickUpTime = this.data.dateRange[this.data['multiIndex'+type][0]] +' '+ this.data.timeRange[this.data['multiIndex'+type][1]]}if(type == 3){postData.deliveryTime = this.data.dateRange[this.data['multiIndex'+type][0]] +' '+ this.data.timeRange[this.data['multiIndex'+type][1]]}if(type == 4){postData.deliveryTime = this.data.dateRange[this.data['multiIndex'+type][0]] +' '+ this.data.timeRange[this.data['multiIndex'+type][1]]}this.setData({['multiIndex'+type]: e.detail.value,postData,});console.log('結果》》》?',this.data['multiIndex'+type])},
圖片上傳列表
wxml:
<view class="v1"><!-- 圖片列表 --><view class="image-list"><block wx:for="{{images}}" wx:key="index"><view class="image-item"><image src="{{item}}" mode="aspectFill" data-src="{{item}}" bindtap="previewImage"></image><view class="delete-btn" bindtap="deleteImage" data-index="{{index}}">×</view></view></block><!-- 添加圖片按鈕 --><view class="add-image" bindtap="chooseImage"><text>+</text></view></view></view>
js:
data:{images: [], // 存儲已選擇的圖片列表
}// 選擇圖片chooseImage() {let that = this;wx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: (res) => {console.log('選擇圖片',res)wx.uploadFile({url: API.uploadImg,filePath: res.tempFilePaths[0],name: 'file',header: {"Content-Type": "multipart/form-data"},formData: {'type': 4 //1-表示頭像,2-表示身份證,4-訂單圖片},success (resFile){let fileData = JSON.parse(resFile.data)console.log("文件上傳接口",JSON.parse(resFile.data))if(fileData.code == 0){// 上傳成功時候插入原有的數據中const newImages = that.data.images.concat(fileData.data);that.setData({images: newImages,});}else{wx.showToast({title: fileData.msg,icon: 'error'})}}})},});},// 預覽圖片previewImage(e) {const current = e.target.dataset.src;wx.previewImage({current: current,urls: this.data.images,});},// 刪除圖片deleteImage(e) {const index = e.target.dataset.index;const newImages = this.data.images;// 刪除指定位置index的圖片newImages.splice(index, 1);this.setData({images: newImages,});},
4.index:搶單大廳樣式
//<!-- class使用三元運算符,動態設置class名稱,用遍歷數據,判斷奇偶數來實現左右不同樣式 -->
<view class="{{index%2 == 0?'v2-body-v1':'v2-body-v2'}}" wx:for="{{orderHallList}}" bindtap="gotoOrderDetail" data-paymentStatus="{{item.paymentStatus}}" data-orderStatus="{{item.orderStatus}}" data-id="{{item.id}}" data-type="orderHall"><view class="{{index%2 == 0?'v2-body-v1-price':'v2-body-v2-price'}}">¥{{item.totalCost}}</view><view class="{{index%2 == 0?'v2-body-v1-text':'v2-body-v2-text'}}"><image src="{{index%2 == 0?'/images/zuo.png':'/images/you.png'}}"></image><text>{{item.orderType == 'BUY'?'幫我買':item.orderType == 'SEND'?'幫我送':item.orderType == 'TAKE'?'幫我取':''}}</text></view><view class="{{index%2 == 0?'v2-body-v1-img':'v2-body-v2-img'}}"><view>{{item.deliveryAddress}}</view><view>{{item.deliveryTime}}</view></view>
</view>
5.訂單完成的評價打分:
wxml:
<view class="v1-item">// <!-- 星星打分實現 --><view style="width: 100%;line-height: 60rpx;"><view style="width: unset;margin-left: unset;" class='starLen' bindtap="myStarChoose"><block wx:for="{{starMap}}"><image wx:if="{{star>=index+1}}" class='star' data-star="{{index+1}}" src="../../images/start-2.png" /> <image wx:if="{{star<index+1}}" class='star' data-star="{{index+1}}" src="../../images/start-1.png" /> </block></view><view class="scoreContent" style="width: unset;margin-left: unset;">{{starMap[star-1]}}</view></view></view>
js:
/*** 頁面的初始數據*/data: {star: 0, //默認0分starMap: ['非常差','差','一般','好','非常好',],},// 選星myStarChoose(e) {let star = parseInt(e.target.dataset.star) || 0;// 獲取打的分this.setData({star: star,});},
這里列舉這幾個比較難的流程,如果后面對哪些模塊的流程有不明白的可以再提出來