專案實戰-點餐小程式-24 訂單

阿新 • • 發佈：2021-08-17

一、功能需求

1、不同狀態下的訂單資訊展示
2、取消訂單
3、訂單評價
4、刪除訂單
5、再來一單

二、程式碼實現

1、order.wxml

 1 <!--導航條-->
 2 <view class="navbar">
 3     <lable wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">
 4         <text>{{item}}</ 
text>
 5     </lable>
 6 </view>
 7 <view wx:if="{{list.length>0}}" class="orderRoot">
 8     <!-- 外層 -->
 9     <view class='cont_count' wx:for="{{list}}" wx:key="key">
10         <!-- 編號 -->
11         <view class='dingdanbianhao'>訂單編號:{{item._id}} </view 
>
12         <view class="content">
13             <!-- 列表 -->
14             <view class='mingxi'>
15                 <block wx:for="{{item.orderList}}" wx:for-item="arr_item" wx:key="key">
16                     <view class="mingxi_item">
17                             < 
text class="name">{{arr_item.name}}</text>
18                             <view class="nameRoot">
19                                 <text class="mingxi_number"> x{{arr_item.number}}</text>
20                                 <text class="mingxi_price">{{arr_item.price}}</text>
21                             </view>
22                     </view>
23                 </block>
24             </view>
25         </view>
26         <view class='totalPrice'>總價:<text class="pirce">{{item.totalPrice}}</text></view>
27         <view class='dibuttxt'>備註:{{item.beizhu}}</view>
28         <view class='dibuttxt'>下單時間:{{item._createTime}}</view>
29     <!-- //-1訂單取消,0新下單待上餐,1待使用者評價,2訂單已完成 -->
30     <view wx:if="{{item}}" class='coent_list'>
31                 <label wx:if="{{item.status==0}}" class='dingdanbtn' data-item='{{item}}' bindtap='cancleOrder'>取消訂單</label>
32                 <label wx:if="{{item.status==1}}" class='dingdanbtn' data-orderid='{{item._id}}' bindtap='showComment'>去評價</label>
33                 <label wx:if="{{item.status==2}}" class='dingdanbtn' bindtap='toFood'>再來一單</label>
34                 <label wx:if="{{item.status==-1}}" class='dingdanbtn' data-orderid='{{item._id}}' bindtap='deleteOrder'>刪除訂單</label>
35             </view>
36     </view>
37 </view>
38 <!-- 否則 -->
39 <view wx:else class="orderSpace">
40   <image src="/images/space.png"></image>
41   <view class="tip">您還沒有訂單~</view>
42   <view class="toOrder" bindtap="toFood">去點餐</view>
43 </view>
44 
45 <!-- 評論彈框 -->
46 <view class='toast-box' hidden='{{!isShowComment}}'>
47 <!-- 蒙層 -->
48     <view class='toastbg'></view>
49     <!-- 彈窗 -->
50     <view class='showToast'>
51     <!-- 彈窗標題 -->
52         <view class='toast-title'>
53             <text>填寫評價</text>
54         </view>
55         <!-- 輸入評價內容 -->
56         <view class='toast-main'>
57             <view class='toast-input'>
58                 <textarea class='textarea_comment' placeholder='請輸入您的評價內容' bindinput='setValue'></textarea>
59             </view>
60         </view>
61         <!-- 按鈕 -->
62         <view class='toast-button'>
63             <view class='button1' bindtap='cancelComment'>
64                 <view>取消</view>
65             </view>
66             <view class='button2' bindtap='submitComment'>
67                 <view>確定</view>
68             </view>
69         </view>
70     </view>
71 </view>

2、order.wxss

  1 page{
  2   background-color: #f2f2f2;
  3 }
  4 .orderSpace{
  5   margin-top: 200rpx;
  6   display: flex;
  7   flex-direction: column;
  8   align-items: center;
  9 }
 10 image{
 11   width: 150rpx;
 12   height: 150rpx;
 13 }
 14 .tip{
 15   font-size: 28rpx;
 16   margin: 20rpx 0;
 17 }
 18 .toOrder{
 19   width: 150rpx;
 20   height: 70rpx;
 21   background-color: #ff9966;
 22   color:#fff;
 23   font-size: 28rpx;
 24   border-radius: 50rpx;
 25   margin-top: 50rpx;
 26   /*文字居中顯示*/
 27   text-align: center;
 28   line-height: 70rpx;
 29 }
 30 
 31 /* 頂部選單切換 */
 32 page {
 33   background-color:#f2f2f2;
 34 }
 35 
 36 .navbar {
 37   display: flex;
 38   background: #fff;
 39   position: fixed;
 40   top: 0;
 41   left: 0;
 42   right: 0;
 43   z-index: 20;
 44 }
 45 
 46 .none_tab {
 47   position: relative;
 48   top: 20rpx;
 49   color: #999;
 50   font-size: 32rpx;
 51 }
 52 
 53 .navbar .item {
 54   /* 預設選中選單 */
 55   position: relative;
 56   flex: auto;
 57   font-size: 27rpx;
 58   width: 100rpx;
 59   text-align: center;
 60   line-height: 80rpx;
 61   color: #333;
 62   border-bottom: 1rpx solid #f2f2f3;
 63 }
 64 
 65 .navbar .item.active {
 66   /* 選中選單樣式 */
 67   color: #333;
 68   border-bottom: 6rpx solid #ff9966;
 69 }
 70 
 71 .navbar .item.active:after {
 72   /* 字型 */
 73   content: "";
 74   display: block;
 75   position: absolute;
 76   bottom: 0;
 77   left: 0;
 78   right: 0;
 79   height: 4rpx;
 80 }
 81 
 82 /* 全部 */
 83 .orderRoot{
 84   margin-top: 100rpx;
 85 }
 86 .cont_count {
 87   background-color: white;
 88   width: 100%;
 89   margin-top: 20rpx;
 90 }
 91 .totalPrice{
 92   display: flex;
 93   justify-content: flex-end;
 94   padding: 20rpx 50rpx;
 95 }
 96 .totalPrice .pirce{
 97   margin-left: 10rpx;
 98   font-size: 30rpx;
 99 }
100 .totalPrice .pirce::before{
101   margin-left: 10rpx;
102   content: '￥';
103   font-size: 24rpx;
104 }
105 .dingdanbianhao {
106   /* 訂單編號 */
107   padding: 20rpx;
108   font-size: 28rpx;
109   border-bottom: 1rpx solid #f2f2f2;
110 }
111 .dibuttxt {
112   padding: 20rpx;
113   font-size: 28rpx;
114   border-bottom: 1rpx solid #f2f2f2;
115 }
116 
117 /* 內容區域 */
118 .content {
119   display: flex;
120   flex-direction: row;
121   justify-content: space-between;
122   justify-items: center;
123   align-items: center;
124 }
125 
126 .mingxi {
127   /* 訂單明細 */
128   display: flex;
129   flex-direction: column;
130   flex: 5;
131 }
132 
133 .mingxi_item {
134   margin: 0 30rpx;
135   padding: 20rpx;
136   border-bottom: 1px solid #f2f2f2;
137   font-size: 28rpx;
138   display: flex;
139   justify-content: space-between;
140 }
141 
142 .name{
143   width:400rpx;
144   white-space: nowrap;
145   overflow: hidden;
146   text-overflow: ellipsis;
147   margin-right: 50rpx;
148 }
149 
150 .mingxi_price {
151   margin-left: 30rpx;
152   color: #ff9966;
153   font-size: 30rpx;
154 }
155 .mingxi_price::before{
156   content: '￥';
157   color: #ff9966;
158   font-size: 24rpx;
159 }
160 .coent_list{
161   display: flex;
162   justify-content: flex-end;
163   align-items: center;
164 }
165 .dingdanbtn {
166   width: 200rpx;
167   color: #ff9966;
168   margin: 30rpx;
169   width: 180rpx;
170   height: 56rpx;
171   text-align: center;
172   border: 1rpx solid #ff9966;
173   border-radius: 10rpx;
174   font-size: 30rpx;
175   display: inline-block;
176   line-height: 56rpx;
177 }
178 
179 /* 評論彈窗 */
180 .toast-box {
181   width: 100%;
182   height: 100%;
183   opacity: 1;
184   position: absolute;
185   top: 0px;
186   left: 0px;
187   display: flex;
188   justify-content: center;
189   align-items: center;
190 }
191 
192 /*蒙層*/
193 .toastbg {
194   opacity: 0.4;
195   background-color: black;
196   position: fixed;
197   top: 0;
198   left: 0;
199   right: 0;
200   bottom: 0;
201   width: 100%;
202   min-height: 100vh;
203   z-index:1
204 }
205 
206 .showToast {
207   width: 90%;
208   position: fixed;
209   top:300rpx;
210   right:0;
211   left:0;
212   margin:0 auto;
213   opacity: 1;
214   z-index: 2;
215 }
216 /* 評論標題 */
217 .toast-title {
218   padding-left: 5%;
219   background-color: #ff9966;
220   color: white;
221   padding-top: 2vh;
222   padding-bottom: 2vh;
223   border-top-right-radius: 16rpx;
224   border-top-left-radius: 16rpx;
225 }
226 /* 評論內容區 */
227 .toast-main {
228   padding-top: 2vh;
229   padding-bottom: 2vh;
230   background-color: white;
231   text-align: center;
232 }
233 
234 .toast-input {
235   margin-left: 5%;
236   margin-right: 5%;
237   border: 1px solid #ddd;
238   padding-left: 2vh;
239   padding-right: 2vh;
240   padding-top: 1vh;
241   padding-bottom: 1vh;
242 }
243 
244 .textarea_comment {
245   height: 80px;
246   width: 100%;
247 }
248 /* 評論按鈕區 */
249 .toast-button {
250   display: flex;
251   justify-content: center;
252   align-items: center;
253 }
254 
255 .button1 {
256   width: 50%;
257   text-align: center;
258   vertical-align: middle;
259   padding: 20rpx 0;
260   background-color: #fff;
261   border-bottom-left-radius: 16rpx;
262   border-right: 1rpx solid #f2f2f2;
263 }
264 
265 .button2 {
266   width: 50%;
267   text-align: center;
268   vertical-align: middle;
269   padding: 20rpx 0;
270   background-color: #fff;
271   border-bottom-right-radius: 16rpx;
272 }
273 
274 .button1 view {
275   color: #c3c3c3;  
276 }
277 
278 .button2 view {
279   color: #ff9966;
280 }

3、order.js

  1 //JS
  2 const app = getApp()
  3 let orderStatus = 0; //-1訂單取消,0新下單待上餐,1待使用者評價,2訂單已完成
  4 let db = wx.cloud.database();
  5 var util = require('../../utils/util.js');
  6 Page({
  7   data: {
  8     // 頂部選單切換
  9     navbar: ["待上餐", "待評價", "已完成", "已取消"],
 10     // 預設選中選單
 11     currentTab: 0,
 12     isShowComment: false, //是否顯示評論框
 13     list: []
 14   },
 15   //頂部tab切換
 16   navbarTap: function (e) {
 17     let index = e.currentTarget.dataset.idx;
 18     this.setData({
 19       currentTab: index
 20     })
 21     if (index == 0) {
 22       orderStatus = 0;
 23     } else if (index == 1) {
 24       orderStatus = 1;
 25     } else if (index == 2) {
 26       orderStatus = 2;
 27     } else if (index == 3) {
 28       orderStatus = -1;
 29     } else {
 30       orderStatus = 0;
 31     }
 32     this.getMyOrderList();
 33   },
 34 
 35   onShow: function () {
 36     this.getMyOrderList();
 37   },
 38 
 39   getMyOrderList() {
 40     let openid = app._checkOpenid();
 41     if (!openid) {
 42       return;
 43     }
 44     wx.cloud.callFunction({
 45         name: 'getOrderList',
 46         data: {
 47           action: 'user',
 48           orderStatus: orderStatus
 49         }
 50       })
 51       .then(res => {
 52         console.log("獲取我的訂單列表成功", res)
 53         this.setData({
 54           list: res.result.data,
 55         })
 56       }).catch(res => {
 57         console.log("獲取我的訂單列表失敗", res)
 58       })
 59   },
 60 
 61   //彈起評論框
 62   showComment(event) {
 63     let orderId = event.currentTarget.dataset.orderid;
 64     this.setData({
 65       isShowComment: true,
 66       orderId: orderId
 67     })
 68   },
 69 
 70   //隱藏評論框
 71   cancelComment() {
 72     this.setData({
 73       isShowComment: false
 74     })
 75   },
 76 
 77   //獲取評論內容
 78   setValue(input) {
 79     this.setData({
 80       content: input.detail.value
 81     })
 82   },
 83 
 84   //提交評論
 85   submitComment() {
 86     let orderId = this.data.orderId;
 87     this.cancelComment(); //隱藏評論框
 88     let content = this.data.content;
 89     if (!content) {
 90       wx.showToast({
 91         title: '評論內容為空',
 92         icon:"none"
 93       })
 94       return;
 95     }
 96     let openid = app._checkOpenid();
 97     if (!openid) {
 98       return;
 99     }
100     console.log("我的openid",openid);
101     db.collection("order").where({
102         _id: orderId
103       }).update({
104         data: {
105           status: 2
106         },
107       }).then(res => {
108         console.log("修改狀態成功", res)
109         var time = util.formatTime(new Date());
110           //將評論資料存到資料庫
111           db.collection("pinglun").add({
112             data: {
113               orderId: orderId,
114               name: app.globalData.userInfo.nickName,
115               avatarUrl:app.globalData.userInfo.avatarUrl,
116               content: content,
117               // _createTime: db.serverDate() //建立的時間
118               _createTime:new Date().getTime() || time //建立的時間
119             }
120           }).then(res => {
121             console.log("評論成功", res)
122             wx.showToast({
123               title: '評論成功',
124               icon:"success"
125             })
126             this.getMyOrderList()
127           }).catch(res => {
128             console.log("評論失敗", res)
129             wx.showToast({
130               icon: "none",
131               title: '評論失敗',
132             })
133           })
134       }).catch(res => {
135         console.log("修改狀態失敗", res)
136       })
137   },
138 
139   //取消訂單
140   cancleOrder(event) {
141     /**
142      * 如果允許使用者隨意取消訂單，就把下面註釋解開
143      */
144     wx.showModal({
145       title:'提示',
146       content:'確定取消訂單嗎？'
147     }).then(res=>{
148       console.log("使用者點選了確定",event)
149       if(res.confirm){
150         let orderId = event.currentTarget.dataset.item._id;
151         db.collection('order').doc(orderId).update({
152           data: {
153             status: -1
154           } 
155         })
156         console.log('取消訂單成功', res)
157         wx.showToast({
158           title: '訂單取消成功',
159           icon:'success'
160         })
161         this.getMyOrderList()
162       }else if(res.cancel){
163         console.log("使用者點選了取消",res)
164       }
165     }).catch(res => {
166         console.log('取消訂單失敗', res)
167       })
168       return
169     /**
170      * 如果不允許使用者隨意取消訂單，就用下面這段程式碼
171      */
172     // wx.showModal({
173     //   title: '提示!',
174     //   content: '菜品已在製作中,請去收銀臺聯絡店員進行取消',
175     // })
176   },
177 
178   //刪除訂單
179   deleteOrder(event){
180     console.log("使用者點選了刪除訂單",event)
181     let orderid = event.currentTarget.dataset.orderid
182     wx.showModal({
183       title:'提示',
184       content:'確定刪除訂單嗎？'
185     }).then(res=>{
186       if(res.confirm){
187         db.collection('order').doc(orderid).remove()
188         console.log("訂單刪除成功",res)
189         wx.showToast({
190           title: '訂單刪除成功',
191           icon:'success'
192         })
193         this.getMyOrderList()
194       }else if(res.cancel){
195         console.log("訂單刪除失敗",res)
196       }
197     })
198   },
199 
200   //去點餐
201   toFood(){
202     wx.reLaunch({
203       url: '/pages/food/food',
204     })
205   },
206 })