zhangdan 4 лет назад
Родитель
Сommit
5c11317830

+ 8 - 0
api/order.js

@@ -36,6 +36,14 @@ export const orderDetail = (params) => {
   })
 }
 
+// 查询是否有待处理的订单
+export const hasOrder = (params) => {
+  return axios.request({
+    url: `reserve/findUnfinishedNum`,
+    method: 'get',
+	data: {}
+  })
+}
 // 查询商铺详情
 // export const shopDetails = (params) => {
 //   const url = `/customer/reserve/findById/${params.id}`

+ 5 - 41
pages/index/index.vue

@@ -7,22 +7,12 @@
 		</view>
 		<view class="content-bottom">
 			<!-- 接单信息 -->
-			<view class="bottom-new-notice" v-if="orderStatusText" @click="checkOrderDetail()">
+			<view class="bottom-new-notice" v-if="orderTime" @click="checkOrderDetail()">
 				<view class="notice-content">
-					<view class="notice-content-item"><u-icon class="icon" name="home_icon_bells" custom-prefix="custom-icon" size="38" color="#333"></u-icon></span><span class="item-title">最新通知</span></view>
-					<view class="notice-content-item" v-if="itemOrderStatus=='CONFIRM'">订单<span>{{orderStatusText ? orderStatusText :''}},</span>请耐心等待</view>
-					<view class="notice-content-item" v-if="itemOrderStatus=='CONFIRM'">{{orderTime ? orderTime :''}}</view>
-					<view class="notice-content-item" v-if="itemOrderStatus=='FINISH'">订单<span>{{orderStatusText ? orderStatusText :''}},</span>欢迎再次下单</view>
-					<view class="notice-content-item" v-if="itemOrderStatus=='FINISH'">{{finishTime ? finishTime :''}}</view>
-				</view>
-				<view class="notice-static">
-					<span class="notice-static-text">{{orderStatusText ? orderStatusText :''}}</span>
+					<view class="notice-content-item"><u-icon class="icon" name="home_icon_bells" custom-prefix="custom-icon" size="38" color="#333"></u-icon></span><span class="item-title">您于{{orderTime ? orderTime :''}}下单成功,点击查看详情</span></view>
+					<view class="notice-content-item"></view>
 				</view>
 			</view>
-			<!-- 回收指引 -->
-			<!-- <view class="bottom-zhiyin" @click="toZY">
-				<u-image src="/static/houme_bg_guide.png" mode="" height="160"></u-image>
-			</view> -->
 			<!-- 下单 -->
 			<view class="bottom-order flex justify_between align_center">
 				<view class="order-type flex flex_column justify_center" @click="gotoSaoMa">
@@ -109,10 +99,7 @@
 				},
 				hasLogin:false, // 是否登录
 				noDataText:"", // 未登录提示文字
-				itemOrderStatus:'', // 
-				orderStatusText:'', // 订单状态
-				orderTime:'', // 
-				finishTime:'', // 订单完成时间
+				orderTime:'', // 创建时间
 				bannerList:[],
 				rubbishPaperName:"",
 				rubbishSLName:"",
@@ -150,10 +137,7 @@
 		},
 		methods: {
 			pageInit() {
-				this.itemOrderStatus=''
-				this.orderStatusText=''
 				this.orderTime=''
-				this.finishTime=''
 				this.getBanner()
 				this.getOrderStatus()
 				this.checkUpdate()
@@ -164,20 +148,14 @@
 					if(res.status==200){
 						this.bannerList=res.data || []
 					}
-					console.log(res,'-----banner')
 				})
 			},
 			// 获取订单状态
 			getOrderStatus(){
 				orderStatus().then(res=>{
 					if(res.status==200){
-						console.log(res,'----------订单状态')
 						this.orderId=res.data.id
-						this.itemOrderStatus=res.data.orderStatus
-						this.orderStatusText=res.data.orderStatusDictValue
-						this.orderTime=res.data.reserveDateBegin.substring(0,10)+' '+res.data.reserveTimeTypeDictValue
-						this.finishTime=res.data.finishDate
-						console.log(res,this.orderId,'----------订单状态')
+						this.orderTime=res.data.createDate
 					}
 				})
 			},
@@ -191,7 +169,6 @@
 			geRubbishTypeList(){
 				geRubbishType().then(res=>{
 					if(res.status==200){
-						console.log(res,'---------垃圾类型')
 						this.rubbishPriceList=res.data
 						const a= res.data.find(item=>item.code=='PAPER')
 						const b= res.data.find(item=>item.code=='PLASTIC')
@@ -270,7 +247,6 @@
 						  uni.navigateTo({
 						      url: '/pages/index/order'
 						  })
-					    console.log(res,'----------------res===================')
 					  }
 					})
 				}else{
@@ -287,12 +263,6 @@
 					this.loginModal()
 				}
 			},
-			// 回收指引
-			// toZY(){
-			// 	uni.navigateTo({
-			// 	    url: '/pages/index/zhiyin'
-			// 	})
-			// },
 			// 未登录弹窗
 			loginModal(){
 				uni.showModal({
@@ -356,12 +326,6 @@
 		flex-direction: column;
 		padding: 0;
 			.content-top{
-				// width: 100%;
-				// height:260upx ;
-				// background-color: #4F88F7;
-				// border-bottom-left-radius: 50%;  /* 左下角 */
-				// border-bottom-right-radius:50%; /* 右下角 */
-				// opacity: 1;
 				.top-banner{
 					padding: 20upx 30upx 0;
 					.banner{

+ 199 - 98
pages/index/order.vue

@@ -17,99 +17,122 @@
 					<text v-if="isHasRider.haveBindRider && pageInfo.name">{{pageInfo.name}}</text>
 					<text v-else>{{mobile}}</text>
 				</view>
+				
 				<!-- 表单 -->
-				<view class="list-container">
-					<view class="list-item">
-						<view class="list-item-left phone flex align_center">
-							<text>联系电话</text>
-							<u-image src="/static/billing_icon.png" width="24" height="24" style="margin:0 0 16rpx 10rpx;"></u-image>
-						</view>
-					    <view class="list-item-right flex_1">
-							<u-input class="flex_1" :custom-style="inputClass" v-model="form.mobile" placeholder="请输入联系电话" placeholder-style="color:'#bbb';font-size:18px"/>
-					    </view>
-					</view>
-					<view class="list-item">
-						<view class="list-item-left">
-							<text>通信地址</text>
-						</view>
-					    <view class="list-item-right flex_1">
-							<u-input class="flex_1" :custom-style="inputClass" v-model="reverseReceiveAddress.receiveAreasName" @click="selectAddress" :disabled="true" placeholder="请选择通信地址" placeholder-style="color:'#bbb';font-size:18px"/>
-							<u-icon class="back-img" name="arrow-right" color="#9DA8B5"  @click="selectAddress"></u-icon>
-					    </view>
-					</view>
-					<view class="list-item">
-						<view class="list-item-left">
-							<text>详细地址</text>
+				<view v-if="!isHasOrder">
+					<view class="list-container">
+						<view class="list-item">
+							<view class="list-item-left phone flex align_center">
+								<text>联系电话</text>
+								<u-image src="/static/billing_icon.png" width="24" height="24" style="margin:0 0 16rpx 10rpx;"></u-image>
+							</view>
+						    <view class="list-item-right flex_1">
+								<u-input class="flex_1" :custom-style="inputClass" v-model="form.mobile" placeholder="请输入联系电话" placeholder-style="color:'#bbb';font-size:18px"/>
+						    </view>
 						</view>
-					    <view class="list-item-right flex_1">
-							<u-input class="flex_1" :custom-style="inputClass"  v-model="reverseReceiveAddress.receiveAddress" placeholder="街道,楼牌号等" placeholder-style="color:'#bbb';font-size:18px"/>
-					    </view>
-					</view>
-				</view>
-				<!-- 一键预约 -->
-				<view class="flex flex_column justify_center align_center yuyueBtn">
-					<view v-if="!isHasRider.haveBindRider && !isHasRider.haveTempRider" class="title">暂无可上门骑手,不能下单</view>
-					<view class="haveRiderStyle" @click="submit" v-if="isHasRider.haveBindRider || isHasRider.haveTempRider">一键预约</view>
-					<view class="noRiderStyle" v-if="!isHasRider.haveBindRider && !isHasRider.haveTempRider">一键预约</view>
-					<!-- <u-button :custom-style="yuYueBtn" :hair-line="false" >一键预约</u-button> -->
-				</view>
-				
-				<!-- 今日上门回收价格 -->
-				<view class="statistics-title">今日上门回收价格</view>
-				<view>
-					<!-- 纸张类 -->
-					<view class="statistics-box" v-if="rubbishPaperList.length">
-						<view class="rubbishType-type">
-							{{rubbishPaperName ? rubbishPaperName :''}}
+						<view class="list-item">
+							<view class="list-item-left">
+								<text>通信地址</text>
+							</view>
+						    <view class="list-item-right flex_1">
+								<u-input class="flex_1" :custom-style="inputClass" v-model="reverseReceiveAddress.receiveAreasName" @click="selectAddress" :disabled="true" placeholder="请选择通信地址" placeholder-style="color:'#bbb';font-size:18px"/>
+								<u-icon class="back-img" name="arrow-right" color="#9DA8B5"  @click="selectAddress"></u-icon>
+						    </view>
 						</view>
-						<view class="flex rubbish">
-							<view v-for="item in rubbishPaperList" class="rubbishType-item">
-								<u-image :src="item.image" width="92" height="92"></u-image>
-								<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
+						<view class="list-item">
+							<view class="list-item-left">
+								<text>详细地址</text>
 							</view>
+						    <view class="list-item-right flex_1">
+								<u-input class="flex_1" :custom-style="inputClass"  v-model="reverseReceiveAddress.receiveAddress" placeholder="街道,楼牌号等" placeholder-style="color:'#bbb';font-size:18px"/>
+						    </view>
 						</view>
 					</view>
-					<!-- 塑料类 -->
-					<view class="statistics-box" v-if="rubbishSLList.length">
-						<view class="rubbishType-type">
-							{{rubbishSLName ? rubbishSLName :''}}
+					<!-- 一键预约 -->
+					<view class="flex flex_column justify_center align_center yuyueBtn">
+						<view v-if="!isHasRider.haveBindRider && !isHasRider.haveTempRider" class="title">暂无可上门骑手,不能下单</view>
+						<view class="haveRiderStyle" @click="submit" v-if="isHasRider.haveBindRider || isHasRider.haveTempRider">一键预约</view>
+						<view class="noRiderStyle" v-if="!isHasRider.haveBindRider && !isHasRider.haveTempRider">一键预约</view>
+						<!-- <u-button :custom-style="yuYueBtn" :hair-line="false" >一键预约</u-button> -->
+					</view>
+					
+					<!-- 今日上门回收价格 -->
+					<view class="statistics-title">今日上门回收价格</view>
+					<view >
+						<!-- 纸张类 -->
+						<view class="statistics-box" v-if="rubbishPaperList.length">
+							<view class="rubbishType-type">
+								{{rubbishPaperName ? rubbishPaperName :''}}
+							</view>
+							<view class="flex rubbish">
+								<view v-for="item in rubbishPaperList" class="rubbishType-item">
+									<u-image :src="item.image" width="92" height="92"></u-image>
+									<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
+								</view>
+							</view>
 						</view>
-						<view class="flex rubbish">
-							<view v-for="item in rubbishSLList" class="rubbishType-item">
-								<u-image :src="item.image" width="92" height="92"></u-image>
-								<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
+						<!-- 塑料类 -->
+						<view class="statistics-box" v-if="rubbishSLList.length">
+							<view class="rubbishType-type">
+								{{rubbishSLName ? rubbishSLName :''}}
+							</view>
+							<view class="flex rubbish">
+								<view v-for="item in rubbishSLList" class="rubbishType-item">
+									<u-image :src="item.image" width="92" height="92"></u-image>
+									<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
+								</view>
 							</view>
 						</view>
-					</view>
-					<!-- 金属类 -->
-					<view class="statistics-box" v-if="rubbishJSList.length">
-						<view class="rubbishType-type">
-							{{rubbishJSName ? rubbishJSName :''}}
+						<!-- 金属类 -->
+						<view class="statistics-box" v-if="rubbishJSList.length">
+							<view class="rubbishType-type">
+								{{rubbishJSName ? rubbishJSName :''}}
+							</view>
+							<view class="flex rubbish">
+								<view v-for="item in rubbishJSList" class="rubbishType-item">
+									<u-image :src="item.image" width="92" height="92"></u-image>
+									<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
+								</view>
+							</view>
 						</view>
-						<view class="flex rubbish">
-							<view v-for="item in rubbishJSList" class="rubbishType-item">
-								<u-image :src="item.image" width="92" height="92"></u-image>
-								<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
+						<!-- 衣物类 -->
+						<view class="statistics-box" v-if="rubbishYWList.length">
+							<view class="rubbishType-type">
+								{{rubbishYWName ? rubbishYWName :''}}
+							</view>
+							<view class="flex rubbish">
+								<view v-for="item in rubbishYWList" class="rubbishType-item">
+									<u-image :src="item.image" width="92" height="92"></u-image>
+									<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
+								</view>
 							</view>
 						</view>
-					</view>
-					<!-- 衣物类 -->
-					<view class="statistics-box" v-if="rubbishYWList.length">
-						<view class="rubbishType-type">
-							{{rubbishYWName ? rubbishYWName :''}}
+						<view class="nodata" v-if="rubbishPriceList.length==0">
+							<u-empty src="/static/def_result.png" :text="noDataText" icon-size="260" ></u-empty>
 						</view>
-						<view class="flex rubbish">
-							<view v-for="item in rubbishYWList" class="rubbishType-item">
-								<u-image :src="item.image" width="92" height="92"></u-image>
-								<span>{{item.name ? item.name :''}}</span><span>{{item.customerPrice ? (item.customerPrice).toFixed(2)/1+'元/kg' :''}} </span>
+					</view>
+					</view>
+					<!-- 订单完成 -->
+					<view v-if="isHasOrder">
+						<view class="body-state">
+							<!-- <view class="store-image flex flex_column justify_center align_center">
+								<u-image src="/static/index/def_home_shop.png" width="172" height="172" ></u-image>
+							</view> -->
+							<view class="result">
+								您于<text>{{createDate|| ''}}</text>下单成功, 点击<text style="color:#1995FF" @click="checkOrderDetail">查看详情</text>
 							</view>
 						</view>
+						<view class="content-footer" @itemChange="chooseReason">
+							<v-select :showSelete="false" :showBtn="true" code="CANCEL_REASON" @itemChange="chooseReason" ></v-select>
+						</view>
 					</view>
-					<view class="nodata" v-if="rubbishPriceList.length==0">
-						<u-empty src="/static/def_result.png" :text="noDataText" icon-size="260" ></u-empty>
-					</view>
-				</view>
+					
+				
 			</view>
+			<!-- 取消订单弹窗 -->
+			<uni-popup ref="openModal" type="center">
+				<uni-popup-dialog content="您确定要取消此订单吗?" @confirm="onOk" title="取消订单"></uni-popup-dialog>
+			</uni-popup>
 	</view>
 </template>
 
@@ -118,9 +141,13 @@
 	import {geRubbishType} from '@/api/index'
 	import {orderInfoSave,searchRider} from '@/api/data.js'
 	import { checkLogin } from '@/api/login.js' 
-	import {saomaOrder} from '@/api/order.js'
+	import {saomaOrder,hasOrder} from '@/api/order.js'
+	import uniPopup from '@/components/uni-popup/uni-popup.vue'
+	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
+	import {cancelOrder} from '@/api/order.js'
+	import vSelect  from  '@/components/select/v-select.vue'
 	export default{
-		components: {uniNavBar},
+		components: {uniPopup,uniPopupDialog,vSelect,uniNavBar},
 		data(){
 			return{
 				yuYueBtn:{
@@ -142,21 +169,17 @@
 					mobile:'', // 手机号码
 				},
 				reverseReceiveAddress: {
-				  // provinceName: '',//  省
-				  // cityName: '',// 市
-				  // districtName: '', // 区
 				  receiveAddress: '',// 详细地址
 				  receiveAreasName:'',
 				  lat:'',
 				  lng:''
 				},
 				area:{},
-				statusBarHeight:0,
-				// toBar:44
-				// statusBarHeight:20,
+				statusBarHeight:20,
 				toBarHeight:44,
-				pageInfo:{},
-				isHasRider:{} // 是否有绑定的骑手或3公里有可分配的骑手
+				pageInfo:null,
+				isHasRider:null ,// 是否有绑定的骑手或3公里有可分配的骑手
+				isHasOrder:false,
 			}
 		},
 		onLoad() {
@@ -187,14 +210,14 @@
 			})
 		},
 		computed: {
-			// user() {
-			// 	return this.userData 
-			// },
-			// name(){
-			// 	return this.$store.state.vuex_userInfoData.contactName
-			// },
 			mobile(){
 				return this.$store.state.vuex_userInfoData.contactMobile
+			},
+			orderId(){
+				return this.$store.state.vuex_orderInfo.id
+			},
+			createDate(){
+				return this.$store.state.vuex_orderInfo.createDate
 			}
 		},
 		methods:{
@@ -202,8 +225,48 @@
 				this.geRubbishTypeList()
 				this.getSaomaInfo()
 				this.getHasRider()
+				this.getOrderNum()
 				// this.checkUpdate()
 			},
+			// 查看是否有待完成订单
+			getOrderNum(){
+				hasOrder().then(res=>{
+					if(res.status==200){
+						this.isHasOrder=res.data>0
+					}else{
+						uni.showToast({
+							title: res.message,
+							icon: 'none'
+						})
+					}
+					console.log(res,'===========')
+				})
+			},
+			// 查看订单详情
+			checkOrderDetail(){
+				uni.navigateTo({
+					url:`/pages/order/orderDetails?id=${this.orderId}`
+				})
+			},
+			// 取消订单
+			chooseReason(e){
+				console.log(e,'-------取消订单')
+				cancelOrder({id:this.orderId,cancelReason:e}).then(res=>{
+					if(res.status==200){
+						uni.showToast({
+							title: res.message,
+							icon: 'none'
+						})
+						this.getOrderNum()
+						setTimeout(()=>{
+							uni.switchTab({
+								url:'/pages/index/index'
+							})
+						},200)
+					}
+				})
+				
+			},
 			// 返回
 			onClickBack(){
 				uni.switchTab({
@@ -386,12 +449,15 @@
 				params.lng=this.reverseReceiveAddress.lng?this.reverseReceiveAddress.lng:''
 				orderInfoSave(params).then(res=>{
 					if(res.status==200){
-						const id=res.data?res.data.id:''
-						setTimeout(()=>{
-							uni.navigateTo({
-								url:`/pages/index/yuyueResult?id=${id}`
-							})
-						},300)
+						this.getOrderNum()
+						this.$u.vuex('vuex_orderInfo',res.data)
+						// this.orderId=res.data?res.data.id:''
+						// this.orderCreateTime=res.data? res.data.createDate:""
+						// setTimeout(()=>{
+						// 	uni.navigateTo({
+						// 		url:`/pages/index/yuyueResult?id=${id}`
+						// 	})
+						// },300)
 					}
 				})
 			},
@@ -528,6 +594,41 @@
 					border-bottom: none;
 				}
 			}
+			.body-state{
+				flex: 1;
+				overflow-y:scroll;
+				padding: 0 26rpx 30rpx;
+			}
+			// .store-image{
+			// 	// display:table-cell;
+			// 	padding:60upx 0;
+			// 	text-align: center;
+			// }
+			.result{
+				background-color: #FFFFFF;
+				padding: 30upx;
+				border-radius: 8px;
+			}
+			.content-footer{
+				width: 100%;
+				padding: 12upx 32upx 32upx;
+				background: #FFFFFF;
+				position: fixed;
+				bottom: 0;
+				left: 0;
+				.cancelBtn{
+					width: 100%;
+					height: 84upx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					// background: #E5E5E5;
+					color: #666;
+					border-radius: 16upx;
+					font-size: 36upx;
+					font-weight: 500;
+				}
+			}
 			.yuyueBtn{
 				width: 100%;
 				.title{

+ 0 - 4
pages/index/yuyueResult.vue

@@ -20,10 +20,6 @@
 					您于<text>{{'2020-02-02 13:59:56'}}</text>下单成功, 点击<text style="color:#1995FF" @click="checkOrderDetail">查看详情</text>
 				</view>
 			</view>
-			<!-- <view class="content-footer"> -->
-				<!-- <v-select :showSelete="false" :showBtn="true"  class="cancelBtn" @itemChange="chooseReason()" code="CANCEL_REASON" ></v-select> -->
-				<!-- <view class="cancelBtn" @click="cancel">取消订单</view> -->
-			<!-- </view> -->
 			<view class="content-footer" @itemChange="chooseReason">
 				<v-select :showSelete="false" :showBtn="true" code="CANCEL_REASON" ></v-select>
 			</view>

+ 186 - 41
pages/order/orderDetails.vue

@@ -1,73 +1,138 @@
 <template>
 	<view class="content-orderDetails">
-		<view class="flex justify_center align_center order-states">
-			<u-image src="/static/order/prescription_order_icon_pay.png" width="48" height="48"></u-image>
-			<text>{{pageInfo.orderStatusDictValue||''}}</text>
-		</view>
-		<view class="flex justify_center order-time">下单时间:{{pageInfo.createDate||'--'}}</view>
-		<view class="order-info">
-			<view class="flex justify_between item">
-				<text>店铺名称</text>
-				<text>{{pageInfo.customerName||'--'}}</text>
-			</view>
-			<view class="flex justify_between item">
-				<text>订单编号</text>
-				<text>{{pageInfo.orderReserveNo|| '--'}}</text>
-			</view>
-			<view class="flex justify_between item">
-				<text>服务骑手</text>
-				<text>{{pageInfo.name||'--'}}</text>
-			</view>
-		</view>
-		<view class="order-info">
-			<view class="flex justify_between item">
-				<text>下单用户</text>
-				<text>{{pageInfo.contactMobile||'--'}}</text>
+		<view>
+			<view class="flex justify_center align_center order-states">
+				<u-image src="/static/order/prescription_order_icon_pay.png" width="48" height="48" v-if="pageInfo.orderStatus=='FINISH'"></u-image>
+				<u-image src="/static/order/prescription_order_icon.png" width="48" height="48" v-if="pageInfo.orderStatus=='CONFIRM'"></u-image>
+				<u-image src="/static/order/prescription_order_icon_cancel.png" width="48" height="48" v-if="pageInfo.orderStatus=='CANCEL'"></u-image>
+				<text>{{pageInfo.orderStatusDictValue||''}}</text>
 			</view>
-		</view>
-		<view class="order-info" v-if="pageInfo.orderStatus=='FINISH'">
-			<view class="flex flex_column item type">
-				<view>回收品类明细</view>
-				<view></view>
+			<view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='FINISH'">服务时间:{{pageInfo.finishDate||'--'}}</view>
+			<view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='CONFIRM'">下单时间:{{pageInfo.createDate||'--'}}</view>
+			<view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='CANCEL'">取消时间:{{pageInfo.confirmDate||'--'}}</view>
+			<view class="item-info">
+				<view class="flex justify_between item">
+					<text>店铺名称</text>
+					<text>{{pageInfo.customerName||'--'}}</text>
+				</view>
+				<view class="flex justify_between item">
+					<text>订单编号</text>
+					<text>{{pageInfo.orderReserveNo|| '--'}}</text>
+				</view>
+				<view class="flex justify_between item">
+					<text>服务骑手</text>
+					<text>{{pageInfo.name||'--'}}</text>
+				</view>
 			</view>
-			<view class="flex justify_between item">
-				<text>黄纸1.2元/千克</text>
-				<text>5千克/6元</text>
+			<view class="item-info">
+				<view class="flex justify_between item">
+					<text>下单用户</text>
+					<text>{{pageInfo.contactMobile||'--'}}</text>
+				</view>
 			</view>
-			<view class="flex justify_between item">
-				<text>黄纸1.2元/千克</text>
-				<text>5千克/6元</text>
+			<view v-if="typeData.length && pageInfo.orderStatus=='FINISH'" class="item-info">
+				<view class="item-title flex justify_between">
+					<text>回收品类明细</text>
+				</view>
+				<view class="item flex">
+					<view :class="['item-type', curIndex == index ? 'active' : '']" v-for="(item,index) in typeData" :key="item.id"  @click="curIndex=index" >
+						{{item.name}}
+					</view>
+				</view>
+				<view v-for="item in typeData[curIndex].typeList" :key="item.id" class="item flex justify_between">
+					<text>{{item.typeName || '--'}} {{item.rubbishPrice || 0}}元/kg</text>
+					<text>{{item.rubbishWeight/1000 || 0}}kg/{{item.totalAmount || 0}}元</text>
+				</view>
 			</view>
-			<view class="flex justify_between item">
-				<text>黄纸1.2元/千克</text>
-				<text>5千克/6元</text>
+			
+			<view class="item-info" v-if="pageInfo.orderStatus=='FINISH'">
+				<view class="flex justify_between item">
+					<text>服务时间</text>
+					<text>{{pageInfo.finishDate||'--'}}</text>
+				</view>
+				<view class="flex justify_between item">
+					<text>支付金额</text>
+					<text>{{pageInfo.originalAmount||'0'}}元</text>
+				</view>
 			</view>
 		</view>
+		<view class="content-footer" @itemChange="chooseReason">
+			<v-select :showSelete="false" :showBtn="true" code="CANCEL_REASON" @itemChange="chooseReason"></v-select>
+		</view>
+		<!-- 取消订单弹窗 -->
+		<uni-popup ref="openModal" type="center">
+			<uni-popup-dialog content="您确定要取消此订单吗?" @confirm="onOk" title="取消订单"></uni-popup-dialog>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
+	import uniPopup from '@/components/uni-popup/uni-popup.vue'
+	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
+	import {cancelOrder} from '@/api/order.js'
+	import vSelect  from  '@/components/select/v-select.vue'
 	import {orderDetail}from '@/api/order.js'
+	import {getLookUpDatas}from "@/api/data.js"
 	export default{
+		components: {uniPopup,uniPopupDialog,vSelect},
 		data(){
 			return{
 				pageInfo:null,
-				orderId:''  // 订单id
+				orderId:''  ,// 订单id
+				typeData: [], // 订单包含类型数据
+				typeNames: '', // 预约品类名称
+				curIndex: 0 ,// 当前类型下标
 			}
 		},
 		onLoad(query) {
-			console.log(query,query.id,'============订单')
+			this.geRubbishTypeData()
 			if(query){
 				this.orderId=query.id
 				this.getPageInfo()
 			}
 		},
 		methods:{
+			geRubbishTypeData(){
+				getLookUpDatas({type:'RESERVE_RUBBISH_TYPE'}).then(res=>{
+					if(res.status==200){
+						this.rubbishData=res.data
+					}else{
+						uni.showToast({
+							title:res.message,
+							icon:none
+						})
+					}
+				})
+			},
+			
 			getPageInfo(){
+				this.typeData = []
+				this.typeNames = ''
 				orderDetail({id:this.orderId}).then(res=>{
-					console.log(res,'============订单详情')
 					if(res.status==200){
 						this.pageInfo=res.data
+						let data = this.rubbishData
+						// 重组类型数据
+						if(this.pageInfo.orderReserveItemEntityList) {
+							data.map(k =>{
+								let arr = this.pageInfo.orderReserveItemEntityList.filter(item=>{
+									return item.rubbishType == k.code
+								})
+								console.log(arr,'dddd')
+								if(arr.length) {
+									let p = {
+										typeCode: k.code,
+										name: k.dispName,
+										typeList: arr
+									}
+									this.typeData.push(p)
+									console.log(p,this.typeData,'pppppp')
+								}
+							})
+							this.typeData.map(item=>{
+								this.typeNames = (this.typeNames ? (this.typeNames + ','):'') + item.name
+							})
+						}
 					}else{
 						uni.showToast({
 							title:res.message,
@@ -75,7 +140,26 @@
 						})
 					}
 				})
-			}
+			},
+			// 取消订单
+			chooseReason(e){
+				console.log(e,'-------取消订单')
+				cancelOrder({id:this.orderId,cancelReason:e}).then(res=>{
+					if(res.status==200){
+						uni.showToast({
+							title: res.message,
+							icon: 'none'
+						})
+						this.getOrderNum()
+						setTimeout(()=>{
+							uni.switchTab({
+								url:'/pages/index/index'
+							})
+						},200)
+					}
+				})
+				
+			},
 		}
 	}
 </script>
@@ -118,5 +202,66 @@
 				color: #7C7D7E;
 			}
 		}
+		.item-info{
+			border-radius: 24rpx;
+			padding: 0rpx 32rpx;
+			margin-bottom: 20upx;
+			background-color: #fff;
+			.item-title{
+				color: #7C7D7E;
+				padding-top: 28rpx;
+			}
+			.item{
+				padding: 28rpx 0;
+				border-bottom: 1px solid #EBEBEB;
+				:first-child{
+					color: #7C7D7E;
+				}
+				:last-child-child{
+					color: #222222;
+				}
+				&:last-child{
+					border-bottom: none;
+				}
+				
+				.item-type{
+					padding: 0 20rpx;
+					height: 56rpx;
+					border: 1px solid #979797;
+					opacity: 1;
+					border-radius: 28rpx;
+					font-size: 24rpx;
+					color: #999999;
+					text-align: center;
+					line-height: 56rpx;
+					margin-right: 20rpx;
+				}
+				.item-type.active{
+					background-color: #4F88F7;
+					border: none;
+					color: #fff;
+				}
+			}
+		}
+		.content-footer{
+			width: 100%;
+			padding: 12upx 32upx 32upx;
+			background: #FFFFFF;
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			.cancelBtn{
+				width: 100%;
+				height: 84upx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				// background: #E5E5E5;
+				color: #666;
+				border-radius: 16upx;
+				font-size: 36upx;
+				font-weight: 500;
+			}
+		}
 	}
 </style>

BIN
static/order/prescription_order_icon.png


BIN
static/order/prescription_order_icon_cancel.png


+ 5 - 0
store/index.js

@@ -21,6 +21,7 @@ let saveStateKeys = [
 	'vuex_orderNo',
 	'vuex_orderStatus',
 	'vuex_userInfoData',
+	'vuex_orderInfo',
 ];
 
 // 保存变量到本地存储中
@@ -105,6 +106,10 @@ const store = new Vuex.Store({
 		vuex_bizId: lifeData.vuex_bizId ? lifeData.vuex_bizId : '',// 设备编号
 		vuex_orderNo: lifeData.vuex_orderNo ? lifeData.vuex_orderNo : '',// 订单编号
 		vuex_orderStatus: lifeData.vuex_orderStatus ? lifeData.vuex_orderStatus : '',// 订单状态
+		vuex_orderInfo:lifeData.vuex_orderInfo?lifeData.vuex_orderInfo:{
+			id:'',
+			createDate:''
+		},
 		// 购物车及下单
 		vuex_cartList: [],
 		vuex_cartNums: 0,