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>

  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 
 
                       
                    
                    
 
                      




鲜花




握手




雷人




路过




鸡蛋