【Add】增加订单取消功能

pages/orders/index.vue

@@ -3,18 +3,15 @@
 		<view class="order_status_list">
 			<view class="order_status_item" :class="requestParam.status==0?'active':''" @click="setStatus(0)"> 全部 </view>
 			<view class="order_status_item" :class="requestParam.status==1?'active':''" @click="setStatus(1)"> 待跟进 </view>
+			<view class="order_status_item" :class="requestParam.status==4?'active':''" @click="setStatus(4)"> 已取消 </view>
 			<view class="order_status_item" :class="requestParam.status==8?'active':''" @click="setStatus(8)"> 已完成 </view>
 		</view>
 		<view class="to_bottom" v-if="!orderList.length"> -----还没有订单-----</view>
 		<view class="order_list">
 			<view class="order_item" v-for="(item,index) in orderList" :key="index" >
 				<view class="order_title" @click="item.product_list.length > 1">
-					<view class="business_name">
-						{{item.business_name}}
-					</view>
-					<view class="order_starus">
-						{{item.state}}
-					</view>
+					<view class="business_name">{{item.business_name}}</view>
+					<view class="order_status">{{item.state}}</view>
 				</view>
 				<view  class="product_list" :class="item.contents_class?'active':''">
 					<view class="product_item" v-for="product_info in item.product_list" :key="product_info.item_id"  >
@@ -38,7 +35,8 @@
 					<uni-icons :type="item.contents_class?'up':'down'" size="20" ></uni-icons>
 				</view>
 				<view class="order_price">
-					<span>￥{{item.pay_total}}</span>
+					<button class="order_cancel" v-if="item.status == 1" @click="cancelOrder(index)">取消订单</button>
+					<view class="pay_total">￥{{item.pay_total}}</view>
 				</view>
 			</view>
 		</view>
@@ -176,6 +174,21 @@
 			},
 			changeHeight(index){
 				this.orderList[index].contents_class  = this.orderList[index].contents_class ? 0:1;
+			},
+			// 取消订单
+			cancelOrder(index){
+				uni.showModal({
+					title:"确认取消该订单?",
+					success:res=>{
+						if (res.confirm) {
+							// 请求列表
+							this.$http.request('api/orders/cancel',{id:this.orderList[index].id}).then(re=>{
+								this.orderList[index].state  = '已取消';
+								this.orderList[index].status = 4;
+							});
+						}
+					}
+				})
 			}
 		}
 	}
@@ -219,9 +232,9 @@
 					float: left;
 					font-size: 32rpx;
 				}
-				.order_starus{
-					color: #999999;
+				.order_status{
 					float: right;
+					color: #999999;
 					font-size: 24rpx;
 				}
 			}
@@ -280,12 +293,30 @@
 				height: auto !important;
 			}
 			.order_price{
-				height: 60rpx;
 				display: block;
-				color: #E03519;
-				font-size: 28rpx;
-				text-align: right;
+				height: 60rpx;
+				overflow: hidden;
 				line-height: 60rpx;
+				.order_cancel{
+					float: left;
+					color: #999999;
+					height: 60rpx;
+					font-size: 24rpx;
+					padding: 0rpx 0rpx;
+					line-height: 60rpx;
+					margin-left: 10rpx;
+					background-color: transparent;
+				}
+				.order_cancel::after{
+					border: none;
+				}
+				.pay_total{
+					float: right;
+					height: 60rpx;
+					color: #E03519;
+					font-size: 28rpx;
+					line-height: 60rpx;
+				}
 			}
 			.show_more{
 				display: block;