moxuan_takeaway_qishou_1/pages/riderMy/order.vue

<template>
	<view>
		<view class="order">
			<u-tabs :list="list" :is-scroll="false" active-color="#FF7F00" inactive-color=" #666666" :bold="bold" :current="current" @change="change"></u-tabs>
			<!-- 全部 -->
			<view class="tabs_box" :class="{ dis: current == 0 }">
				<view class="order_box" v-for="(item, index) in lists" :key="index" @click="bindorderDetail(item.indentNumber, item.orderId)">
					<view class="order_success" v-if="item.indentState == '2'">
						<view class="order_name">待支付领取</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '3'">
						<view class="order_name">待取货</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '4'">
						<view class="order_name">配送中</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '5'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '6'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '7'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '10'">
						<view class="order_name">已取消</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '9'">
						<view class="order_name">已取消</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_city">
						<view class="city_type">
							<view class="type_name" v-if="item.indentType == 1">帮我送</view>
							<view class="type_name" v-if="item.indentType == 2">帮我取</view>
							<view class="type_name" v-if="item.indentType == 3">同城帮买</view>
							<view class="type_name" v-if="item.indentType == 4">同城服务</view>
							<view class="type_name" v-if="item.indentType == 5">同城外卖</view>
							<view class="city_text" v-if="item.itemType">{{ item.itemType }}</view>
						</view>
						<view style="padding: 0 30rpx; font-size: 20px" v-if="item.orderPaySequence">#{{ item.orderPaySequence }}</view>
						<view style="padding: 0 30rpx; color: #ff7f00">{{ item.shopName }}</view>
						<view style="padding: 0 30rpx">订单编号：{{ item.indentNumber }}</view>
						<view class="city_address" v-if="item.indentType == 1 || item.indentType == 2">
							<view class="fh_box">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 3">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 4">
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 5">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_btn">
						<view class="btn1" v-if="item.indentState == '3'" @click.stop="quxiao(item.indentNumber)">取消订单</view>
						<!-- <view class="btn1"  v-if="item.indentState=='6'">客户待确认</view> -->
						<view class="btn2" v-if="item.indentState == '3'" @click.stop="quhuo(item.indentId)">确认取货</view>
						<view class="btn2" v-if="item.indentState == '4'" @click.stop="onshow(item)">确认送达</view>
						<view class="btn2" v-if="item.indentState == '9'">已取消</view>
						<view class="btn2" v-if="item.indentState == '10'">已取消</view>
					</view>
				</view>
			</view>
			<!-- 待取货 -->
			<view class="tabs_box" :class="{ dis: current == 1 }">
				<view class="order_box" v-for="(item, index) in lists" :key="index" @click="bindorderDetail(item.indentNumber, item.orderId)">
					<view class="order_success" v-if="item.indentState == '2'">
						<view class="order_name">待支付领取</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '3'">
						<view class="order_name">待取货</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_city">
						<view class="city_type">
							<view class="type_name" v-if="item.indentType == 1">帮我送</view>
							<view class="type_name" v-if="item.indentType == 2">帮我取</view>
							<view class="type_name" v-if="item.indentType == 3">同城帮买</view>
							<view class="type_name" v-if="item.indentType == 4">同城服务</view>
							<view class="type_name" v-if="item.indentType == 5">同城外卖</view>
							<view class="city_text" v-if="item.itemType">{{ item.itemType }}</view>
						</view>
						<view style="padding: 0 30rpx; color: #ff7f00">{{ item.shopName }}</view>
						<view style="padding: 0 30rpx">订单编号：{{ item.indentNumber }}</view>
						<view class="city_address" v-if="item.indentType == 1 || item.indentType == 2">
							<view class="fh_box">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 3">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 4">
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 5">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_btn">
						<view class="btn1" v-if="item.indentState == '3'" @click.stop="quxiao(item.indentNumber)">取消订单</view>
						<view class="btn2" v-if="item.indentState == '3'" @click.stop="quhuo(item.indentId)">确认取货</view>
					</view>
				</view>
			</view>
			<!-- 配送中 -->
			<view class="tabs_box" :class="{ dis: current == 2 }">
				<view class="order_box" v-for="(item, index) in lists" :key="index" @click="bindorderDetail(item.indentNumber, item.orderId)">
					<view class="order_success" v-if="item.indentState == '4'">
						<view class="order_name">配送中</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '5'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '6'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '7'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_city">
						<view class="city_type">
							<view class="type_name" v-if="item.indentType == 1">帮我送</view>
							<view class="type_name" v-if="item.indentType == 2">帮我取</view>
							<view class="type_name" v-if="item.indentType == 3">同城帮买</view>
							<view class="type_name" v-if="item.indentType == 4">同城服务</view>
							<view class="type_name" v-if="item.indentType == 5">同城外卖</view>
							<view class="city_text" v-if="item.itemType">{{ item.itemType }}</view>
						</view>
						<view style="padding: 0 30rpx; color: #ff7f00">{{ item.shopName }}</view>
						<view style="padding: 0 30rpx">订单编号：{{ item.indentNumber }}</view>
						<view class="city_address" v-if="item.indentType == 1 || item.indentType == 2">
							<view class="fh_box">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 3">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 4">
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 5">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_btn">
						<view class="btn1" v-if="item.indentState == '3'">取消订单</view>
						<!-- <view class="btn1" v-if="item.indentState=='6'">客户待确认</view> -->
						<view class="btn2" v-if="item.indentState == '3'" @click.stop="quhuo(item.indentId)">确认取货</view>
						<view class="btn2" v-if="item.indentState == '4'" @click.stop="onshow(item)">确认送达</view>
						<view class="btn2" v-if="item.indentState == '9'">已取消</view>
					</view>
				</view>
			</view>
			<!-- 配送完 -->
			<view class="tabs_box" :class="{ dis: current == 3 }">
				<view class="order_box" v-for="(item, index) in lists" :key="index" @click="bindorderDetail(item.indentNumber, item.orderId)">
					<!-- <view class="order_success" v-if="item.indentState=='4'">
						<view class="order_name">配送中</view>
						<view class="order_data">{{item.receivingTime}}</view>
					</view> -->
					<view class="order_success" v-if="item.indentState == '5'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '6'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '7'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_city">
						<view class="city_type">
							<view class="type_name" v-if="item.indentType == 1">帮我送</view>
							<view class="type_name" v-if="item.indentType == 2">帮我取</view>
							<view class="type_name" v-if="item.indentType == 3">同城帮买</view>
							<view class="type_name" v-if="item.indentType == 4">同城服务</view>
							<view class="type_name" v-if="item.indentType == 5">同城外卖</view>
							<view class="city_text" v-if="item.itemType">{{ item.itemType }}</view>
						</view>
						<view style="padding: 0 30rpx; color: #ff7f00">{{ item.shopName }}</view>
						<view style="padding: 0 30rpx">订单编号：{{ item.indentNumber }}</view>
						<view class="city_address" v-if="item.indentType == 1 || item.indentType == 2">
							<view class="fh_box">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 3">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 4">
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 5">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_btn">
						<view class="btn1" v-if="item.indentState == '3'">取消订单</view>
						<!-- <view class="btn1" v-if="item.indentState=='6'">客户待确认</view> -->
						<view class="btn2" v-if="item.indentState == '3'" @click="quhuo(item.indentId)">确认取货</view>
						<view class="btn2" v-if="item.indentState == '4'" @click="onshow(item)">确认送达</view>
						<view class="btn2" v-if="item.indentState == '9'">已取消</view>
					</view>
				</view>
			</view>
			<!-- 已完成 -->
			<view class="tabs_box" :class="{ dis: current == 4 }">
				<view class="order_box" v-for="(item, index) in lists" :key="index" @click="bindorderDetail(item.indentNumber, item.orderId)">
					<view class="order_success" v-if="item.indentState == '4'">
						<view class="order_name">配送中</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '5'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '6'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '7'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_city">
						<view class="city_type">
							<view class="type_name" v-if="item.indentType == 1">帮我送</view>
							<view class="type_name" v-if="item.indentType == 2">帮我取</view>
							<view class="type_name" v-if="item.indentType == 3">同城帮买</view>
							<view class="type_name" v-if="item.indentType == 4">同城服务</view>
							<view class="type_name" v-if="item.indentType == 5">同城外卖</view>
							<view class="city_text" v-if="item.itemType">{{ item.itemType }}</view>
						</view>
						<view style="padding: 0 30rpx; color: #ff7f00">{{ item.shopName }}</view>
						<view style="padding: 0 30rpx">订单编号：{{ item.indentNumber }}</view>
						<view class="city_address" v-if="item.indentType == 1 || item.indentType == 2">
							<view class="fh_box">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 3">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 4">
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 5">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_btn">
						<view class="btn1" v-if="item.indentState == '3'">取消订单</view>
						<!-- <view class="btn1" v-if="item.indentState=='6'">客户待确认</view> -->
						<view class="btn2" v-if="item.indentState == '3'" @click="quhuo(item.indentId)">确认取货</view>
						<view class="btn2" v-if="item.indentState == '4'" @click="onshow(item)">确认送达</view>
						<view class="btn2" v-if="item.indentState == '9'">已取消</view>
					</view>
				</view>
			</view>
			<!-- 已取消 -->
			<view class="tabs_box" :class="{ dis: current == 5 }">
				<view class="order_box" v-for="(item, index) in lists" :key="index" @click="bindorderDetail(item.indentNumber, item.orderId)">
					<view class="order_success" v-if="item.indentState == '4'">
						<view class="order_name">配送中</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '5'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '6'">
						<view class="order_name">已完成</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<view class="order_success" v-if="item.indentState == '9'">
						<view class="order_name">已取消</view>
						<view class="order_data">{{ item.receivingTime }}</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_city">
						<view class="city_type">
							<view class="type_name" v-if="item.indentType == 1">帮我送</view>
							<view class="type_name" v-if="item.indentType == 2">帮我取</view>
							<view class="type_name" v-if="item.indentType == 3">同城帮买</view>
							<view class="type_name" v-if="item.indentType == 4">同城服务</view>
							<view class="type_name" v-if="item.indentType == 5">同城外卖</view>
							<view class="city_text" v-if="item.itemType">{{ item.itemType }}</view>
						</view>
						<view style="padding: 0 30rpx; color: #ff7f00">{{ item.shopName }}</view>
						<view style="padding: 0 30rpx">订单编号：{{ item.indentNumber }}</view>
						<view class="city_address" v-if="item.indentType == 1 || item.indentType == 2">
							<view class="fh_box">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 3">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 4">
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="city_address" v-if="item.indentType == 5">
							<view class="fh_box" v-if="item.buy_type == 1">
								<view class="fh_image">
									<image src="../../static/image/icon_f.png"></image>
								</view>
								<view class="box">
									<view class="fh_name">{{ item.shopAddressDetail }}</view>
									<view class="fh_type">
										{{ item.shopName }}
										<text>{{ item.shopPhone }}</text>
									</view>
								</view>
							</view>
							<view class="sh_box">
								<view class="sh_image">
									<image src="../../static/image/icon_s.png"></image>
								</view>
								<view class="box">
									<view class="sh_name">{{ item.userAddressDetail }}</view>
									<view class="sh_type">
										{{ item.userName }}
										<text>{{ item.userPhone }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_btn">
						<view class="btn2" v-if="item.indentState == '9'">已取消</view>
					</view>
				</view>
			</view>
			<empty v-if="lists.length == 0"></empty>
			<!-- 收货码弹框 -->
			<u-popup v-model="shows" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle" close-icon-size="45" width="580rpx" height="400rpx">
				<view class="receipt_code">
					<view class="code_title">填写收货码</view>
					<u-input v-model="shouhuoma" type="text" placeholder="请输入收货码" :border="true" />
					<view class="sure" @click="querenSh">确定</view>
				</view>
			</u-popup>
			<!-- 确认收货拍照弹出框 -->
			<u-popup
				v-model="alertPhone"
				mode="center"
				border-radius="18"
				:closeable="closeable"
				close-icon="close-circle"
				close-icon-size="45"
				width="680rpx"
				height="900rpx"
				@close="onclose"
			>
				<view class="receipt_code">
					<view class="phone_title">图片凭证</view>
					<view class="phone_title2">请在确认外卖送达后、通过拍照，进行现场还原</view>
					<view>
						<view class="flex" style="overflow: hidden; flex-wrap: wrap">
							<view v-if="goodsPicture.length">
								<view class="margin-top flex margin-right-sm flex-wrap">
									<view
										class="flex"
										style="width: 200rpx; height: 200rpx; margin-right: 2rpx; position: relative"
										v-for="(image, index) in goodsPicture"
										:key="index"
									>
										<image :src="image" style="width: 100%; height: 100%"></image>
										<view style="z-index: 9; position: absolute; top: -15rpx; right: -15rpx" @click="removeImg(index, 'lb')">
											<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
										</view>
									</view>
								</view>
							</view>
							<view class="margin-top" @click="addImages(1)" v-if="goodsPicture.length <= 1">
								<view style="width: 200rpx; height: 200rpx; background: #f4f5f6" class="flex justify-center align-center">
									<view>
										<view class="text-center">
											<image src="../../static/addimg.png" style="width: 65rpx; height: 55rpx"></image>
										</view>
										<view class="text-center text-black">添加图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="receipt_code" v-if="alertduan">
						<view class="code_title">是否确认送达</view>
						<view class="code_title2">已选订单：1单</view>
						<view class="code_title2">通知形式：短信</view>
						<view class="code_title2">通知内容：{{ duanxin[0].templateContent.substring(0, 21) }}{{ qiPhone }}</view>
						<view class="sure" @click="querenSh">确认送达</view>
					</view>
					<!-- <view class="sure" @click="querenduanxin">确认拍照</view> -->
				</view>
			</u-popup>
			<!-- 确认收货选择短信框 -->
			<!-- <u-popup v-model="alertduan" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle"
				close-icon-size="45" width="680rpx" height="600rpx">
				<view class="receipt_code">
					<view class="code_title">是否确认送达</view>
					<view class="code_title2">已选订单：1单</view>
					<view class="code_title2">通知形式：短信</view>
					<view class="code_title2">通知内容：{{duanxin[0].templateContent.substring(0, 21)}}{{qiPhone}}</view>
					<view class="sure" @click="querenSh">确认送达</view>
				</view>
			</u-popup> -->
		</view>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
import empty from '@/components/empty'
import configdata from '@/common/config.js'
import getLessLimitSizeImage from '@/utils/imageCompress.js'
export default {
	components: {
		empty
	},
	data() {
		return {
			shows: false,
			alertPhone: false, //确认收货拍照弹出框
			alertduan: false, //确认收货选择短信框
			closeable: true,
			shouhuoma: '',
			list: [
				{
					name: '全部'
				},
				{
					name: '待取货'
				},
				{
					name: '配送中'
				},
				{
					name: '已完成'
				}
			],
			current: 0,
			bold: false,
			page: 1,
			limit: 5,
			order: [],
			lists: [],
			totalCount: 0,
			longitude: '', //经度
			latitude: '', //纬度
			indentState: '', //订单状态
			indentNumber: '', //订单号
			goodsPicture: [],
			count: 3,
			duanxin: [], //发送的短信
			qiPhone: '', //骑手电话
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth
		}
	},
	onLoad() {
		this.qiPhone = uni.getStorageSync('phone')

		var that = this
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				console.log('当前位置的经度：' + res.longitude)
				console.log('当前位置的纬度：' + res.latitude)
				that.longitude = res.longitude
				that.latitude = res.latitude
				that.taskData()
			}
		})
	},
	onShow() {
		let zhuandan = this.$queue.getData('zhuandan')
		if (zhuandan) {
			this.$queue.remove('zhuandan')
			this.page = 1
			this.taskData()
		}
	},
	methods: {
		change(index) {
			uni.showLoading({
				title: '加载中......',
				mask: true, // 是否显示透明蒙层，防止触摸穿透
				icon: 'none'
			})
			this.current = index
			this.lists = []
			this.page = 1
			if (index == 0) {
				this.indentState = ''
			}
			if (index == 1) {
				this.indentState = 3
			}
			if (index == 2) {
				this.indentState = 4
			}
			if (index == 3) {
				this.indentState = 6
			}
			if (index == 4) {
				this.indentState = 9
			}
			this.taskData()
		},
		// 订单获取
		taskData() {
			uni.showLoading({
				title: '加载中......',
				mask: true, // 是否显示透明蒙层，防止触摸穿透
				icon: 'none'
			})
			this.$Request
				.getT('/app/tbindent/findRiderIndent', {
					page: this.page,
					limit: 10,
					indentState: this.indentState
				})
				.then((res) => {
					uni.hideLoading()
					if (this.page == 1) {
						this.lists = res.data.list
					} else {
						this.lists = this.lists.concat(res.data.list)
					}
					for (var i in this.lists) {
						if (this.lists[i].distanceInitial > 1000) {
							this.lists[i].distanceInitials = (Number(this.lists[i].distanceInitial) / 100).toFixed(2)
						}
						if (this.lists[i].distance > 1000) {
							this.lists[i].distances = (Number(this.lists[i].distance) / 100).toFixed(2)
						}
					}
					console.log('lists', this.lists)
					this.totalCount = res.data.totalCount
					uni.stopPullDownRefresh()
				})
		},
		// 订单详情
		bindorderDetail(indentNumber, orderId) {
			console.log(indentNumber, orderId)
			uni.navigateTo({
				url: '/pages/index/orderdetail/orderdetail?id=' + indentNumber + '&orderId=' + orderId
			})
		},
		// 取消订单
		quxiao(indentNumber) {
			let that = this
			console.log('indentNumber', indentNumber)
			uni.showModal({
				title: '取消订单将会被扣保证金',
				content: '',
				cancelText: '取消',
				confirmText: '确认'
			})
				.then((res) => {
					that.$Request
						.postT('/app/tbindent/riderCancleIndent', {
							indentNumber: indentNumber
						})
						.then((res) => {
							console.log(res)
							if (res.code == 0) {
								that.page = 1
								that.taskData()
								uni.showToast({
									title: '订单已取消',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
				})
				.catch((err) => {})
		},
		quhuo(indentId) {
			let that = this
			uni.showModal({
				title: '提示',
				content: '确认取到货吗',
				success: function (res) {
					if (res.confirm) {
						that.$Request
							.postJson('/app/tbindent/riderBuyGoods', {
								indentId: indentId,
								indentState: 4
							})
							.then((res) => {
								if (res.code == 0) {
									that.page = 1
									that.taskData()
									uni.showToast({
										title: '确认取货成功',
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
					}
				}
			})
		},
		onshow(e) {
			this.indentNumber = e.indentNumber
			if (e.itemCodeFlag == 0) {
				this.shows = true
			} else {
				//需拍照的弹出框
				this.alertPhone = true
				// this.querenSh()
			}
		},
		// 图片上传
		addImages(e) {
			if (e == 1) {
				var num = this.goodsPicture.length
				this.count = 2 - num
			}

			let that = this
			uni.chooseImage({
				count: this.count,
				sourceType: ['camera'],
				success: (res) => {
					for (let i = 0; i < res.tempFiles.length; i++) {
						//这里的id和页面中写的html代码的canvas的id要一致
						let canvasId = 'zipCanvas'
						//原图的路径
						let imagePath = res.tempFiles[i].path
						//大小限制
						let limitSize = 1024 * 2
						//初始绘画区域是画布自身的宽度也就是屏幕宽度
						let drawWidth = uni.getSystemInfoSync().windowWidth
						let that = this
						getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
							uni.showLoading({
								title: '上传中'
							})
							uni.uploadFile({
								url: that.config('APIHOST1') + '/alioss/upload',
								filePath: resPath,
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										if (that.goodsPicture.length < 2) {
											that.goodsPicture.push(JSON.parse(uploadFileRes.data).data)
										}
									}
									uni.hideLoading()
									this.querenduanxin()
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'error'
									})
								}
							})
						})
					}
				}
			})
		},
		// 图片删除
		removeImg(index, texts) {
			if (texts == 'lb') {
				this.goodsPicture.splice(index, 1)
			}
		},
		config: function (name) {
			var info = null
			if (name) {
				var name2 = name.split('.') //字符分割
				if (name2.length > 1) {
					info = configdata[name2[0]][name2[1]] || null
				} else {
					info = configdata[name] || null
				}
				if (info == null) {
					let web_config = cache.get('web_config')
					if (web_config) {
						if (name2.length > 1) {
							info = web_config[name2[0]][name2[1]] || null
						} else {
							info = web_config[name] || null
						}
					}
				}
			}
			return info
		},
		// 监听拍照框关闭
		onclose() {
			this.alertPhone = false
			this.alertduan = false
			this.goodsPicture = []
		},
		// 获取确认送达短信模板
		querenduanxin() {
			// this.$Request.postT('/app/tb-indent-sms/template', {
			this.$Request
				.getT('/app/tb-indent-sms/template', {
					// indentNumber: this.indentNumber,
					// itemCode: this.shouhuoma
				})
				.then((res) => {
					console.log(res)
					this.duanxin = res.data.list
					if (res.code == 0) {
						this.page = 1
						// this.alertPhone = false
						this.alertduan = true
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
		},
		querenSh() {
			var tupian = this.goodsPicture.toString()
			console.log(this.goodsPicture.toString())
			// this.$Request.postT('/app/tbindent/riderDelivery', {
			this.$Request
				.postJson('/app/tbindent/riderDelivery', {
					imgs: tupian,
					smsTemplateId: this.duanxin[0].id,
					indentNumber: this.indentNumber,
					itemCode: this.shouhuoma
				})
				.then((res) => {
					console.log(res)
					if (res.code == 0) {
						this.page = 1
						this.taskData()
						uni.showToast({
							title: '订单完成',
							icon: 'none'
						})
						this.alertPhone = false
						// this.alertduan = false
						this.shows = false
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
		}
	},
	onReachBottom: function () {
		if (this.page < this.totalCount) {
			this.page += 1
			this.taskData()
		}
	},
	onPullDownRefresh: function () {
		this.page = 1
		this.taskData()
	}
}
</script>

<style>
body {
	background: #f5f5f5;
}

.tabs_box {
	display: none;
}

.dis {
	display: block;
	width: 100%;
}

.u-tab-item {
	font-size: 26upx !important;
	/* color: #666666 !important; */
}

.success_box {
	width: 100%;
}

.order_box {
	width: 90%;
	margin: 0 auto;
	/* height: 390rpx; */
	background: #ffffff;
	margin-top: 20rpx;
	border-radius: 16px;
	padding-bottom: 16rpx;
}

.order_success {
	width: 90%;
	margin: 0 auto;
	display: flex;
	height: 80upx;
}

.order_name {
	flex: 1;
	display: flex;
	justify-content: left;
	align-items: center;
	font-weight: bold;
	font-size: 26rpx;
	letter-spacing: 1upx;
}

.order_data {
	flex: 1;
	color: #999999;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 24rpx;
}

.city_type {
	width: 90%;
	margin: 0 auto;
	height: 60upx;
	line-height: 60upx;
	display: flex;
	justify-content: left;
	align-items: center;
}

.type_name {
	font-size: 27rpx;
}

.city_text {
	width: 70rpx;
	line-height: 36rpx;
	color: #49a5ff;
	background: #c4e2ff;
	text-align: center;
	font-size: 19rpx;
	margin-left: 20rpx;
}

.city_address {
	width: 85%;
	margin: 0 auto;
	margin-top: -10rpx;
}

/* 发货地址 */
.fh_box {
	display: flex;
	/* height: 80upx; */
	margin-top: 20upx;
}

.fh_image {
	flex: 1;
}

.box {
	flex: 11;
}

.fh_name {
	font-size: 26rpx;
	font-weight: 600;
	letter-spacing: 2upx;
}

.fh_type {
	color: #999999;
	font-size: 22upx;
}

.fh_type text {
	margin-left: 20upx;
}

/* 送货地址 */
.sh_box {
	display: flex;
	margin-bottom: 14upx;
	margin-top: 14rpx;
}

.sh_image {
	flex: 1;
}

.sh_name {
	font-size: 26rpx;
	font-weight: 600;
	letter-spacing: 2upx;
}

.sh_type {
	color: #999999;
	font-size: 22upx;
}

.sh_type text {
	margin-left: 20upx;
}

.fh_image image {
	width: 30upx;
	height: 30upx;
}

.sh_image image {
	width: 30upx;
	height: 30upx;
}

.order_btn {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	/* height: 80upx; */
	margin-top: 8upx;
}

.btn1 {
	width: 170upx;
	font-size: 22upx;
	line-height: 60upx;
	text-align: center;
	border: 1upx solid #9c9c9c;
	border-radius: 20upx;
	color: #9c9c9c;
	margin-right: 30upx;
}

.btn2 {
	width: 170upx;
	line-height: 60upx;
	color: white;
	background: #ff6a04;
	font-size: 22upx;
	text-align: center;
	margin-right: 30upx;
	border-radius: 20upx;
}

/* 收货码弹框 */
.receipt_code {
	width: 90%;
	margin: 0 auto;
}

.code_title {
	width: 100%;
	line-height: 100rpx;
	font-size: 31rpx;
	font-weight: bold;
	text-align: center;
	letter-spacing: 2rpx;
	margin-top: 21rpx;
	margin-bottom: 25rpx;
}

.u-input--border {
	border: 1px solid #f2f2f2 !important;
	background: #f2f2f2 !important;
	color: #999999 !important;
	font-weight: 500 !important;
	letter-spacing: 2rpx !important;
}

.u-input__input {
	font-size: 30rpx;
	font-weight: bold;
	flex: 1;
	color: #999999 !important;
	min-height: 85rpx !important;
	margin-top: 7rpx;
}

.sure {
	width: 100%;
	height: 80rpx;
	background: #ff7f00;
	color: white;
	border-radius: 46rpx;
	text-align: center;
	line-height: 80rpx;
	margin-top: 30rpx;
	letter-spacing: 2rpx;
}
/* 确认送达拍照框 */
.phone_title {
	margin-top: 10px;
	width: 100%;
	height: 40px;
	/* background-color: #FF7F00; */
	text-align: center;
	line-height: 40px;
	/* color:#FFFFFF; */
}
.phone_title2 {
	margin-top: 10px;
	text-align: center;
	color: #9d9d9d;
}
.code_title2 {
	width: 100%;
	line-height: 50rpx;
	text-align: center;
	letter-spacing: 2rpx;
	margin-top: 21rpx;
	margin-bottom: 25rpx;
}
</style>