一、功能需求
- 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
请发表评论