pet_server/pages/order/order.vue

<template>
	<view class="content" :style="'padding-top:'+ headerHeight+'px'">
		<uHeader ref="toRefresh" :userinfo="userinfo" />
		<view class="menu-top">
			<u-tabs :list="list" name="cate_name" count="cate_count" :is-scroll="false" :current="current"
				@change="change" bg-color="#F7E8CB" active-color="#E68500"></u-tabs>
			<swiper :interval="3000" :duration="1000" :current="current" class="order-list-box" @change="touchChange">
				<!-- 待接单 -->
				<swiper-item style="height: 100%;overflow-y: scroll;">
					<view class="noOrder" v-if="data.data.length < 1">
						暂无订单～～
					</view>
					<view class="card" @click="info(item)" v-for="(item,index) in data.data" :key="index">
						<view class="row center">
							<view class="big-text">
								{{item.from_city}}
							</view>
							<view class="image">
								<image src="http://pet.hdlkeji.com/assets/static/1/95.png" style="width: 50rpx;height: 20rpx;"></image>
							</view>
							<view class="big-text">
								{{item.to_city}}
							</view>
						</view>
						<view class="row">
							<view class="row half">
								<view class="name">
									宠物类别
								</view>
								<view class="text">
									{{item.pet_category}}
								</view>
							</view>
							<view class="row half">
								<view class="name">
									宠物规格
								</view>
								<view class="text">
									{{item.spec}}
								</view>
							</view>
						</view>
						<view class="row">
							<view class="row half" style="width: 100%;">
								<view class="name">
									取宠时间
								</view>
								<view class="text">
									{{item.agree_date}}
									{{item.agree_time}}
								</view>
							</view>
						</view>
						<view class="row">
							<view class="row half" style="width: 100%;">
								<view class="name">
									订单号
								</view>
								<view class="text">
									{{item.no}}
								</view>
							</view>
						</view>
						<!--  如果是配送员 接 收 都是接单操作 -->
						<view class="row border" v-if="!isAdmin">
							<view class="btn" @click.stop="getOrder(item.id)">
								立即接单
							</view>
						</view>
					</view>
				</swiper-item>
				<!-- 进行中 -->
				<swiper-item style="height: 100%;overflow-y: scroll;">
					<view class="noOrder" v-if="data.data.length < 1">
						暂无订单～～
					</view>
					<view class="card" @click="info(item)" v-for="(item,index) in data.data" :key="index">
						<view class="row center">
							<view class="big-text">
								{{item.from_city}}
							</view>
							<view class="image">
								<image src="http://pet.hdlkeji.com/assets/static/1/95.png" style="width: 40rpx;height: 20rpx;"></image>
							</view>
							<view class="big-text">
								{{item.to_city}}
							</view>
						</view>
						<view class="row">
							<view class="row half">
								<view class="name">
									宠物类别
								</view>
								<view class="text">
									{{item.pet_category}}
								</view>
							</view>
							<view class="row half">
								<view class="name">
									宠物规格
								</view>
								<view class="text">
									{{item.spec}}
								</view>
							</view>
						</view>
						<view class="row">
							<view class="row half" style="width: 100%;">
								<view class="name">
									取宠时间
								</view>
								<view class="text">
									{{item.agree_date}}
									{{item.agree_time}}
								</view>
							</view>
						</view>
						<view class="row">
							<view class="row half" style="width: 100%;">
								<view class="name">
									订单号
								</view>
								<view class="text">
									{{item.no}}
								</view>
							</view>
						</view>
						<!-- 判断位配送员 -->
						<view class="row border" v-if="!isAdmin">
							<!-- 判断已经接单 并且 配送员位取宠人 -->
							<view class="btn" v-if="item.status === 10 && item.current_send_order.type === 1">
								上传取宠视频
							</view>
							<view class="btn" v-if="item.status === 20 && item.current_send_order.type === 1">
								上传运宠视频
							</view>
							<!-- 判断已经接单 并且 配送员位取宠人 -->
							<view class="btn" v-if="item.status === 30 && item.current_send_order.type === 2">
								上传送达视频
							</view>
							
						</view>
					</view>
				</swiper-item>
				<!-- 已完成 -->
				<swiper-item style="height: 100%;overflow-y: scroll;">
					<view class="noOrder" v-if="data.data.length < 1">
						暂无订单～～
					</view>
					<view class="card" @click="info(item)" v-for="(item,index) in data.data" :key="index">
						<view class="row center">
							<view class="big-text">
								{{item.from_city}}
							</view>
							<view class="image">
								<image src="http://pet.hdlkeji.com/assets/static/1/95.png" style="width: 50rpx;height: 20rpx;"></image>
							</view>
							<view class="big-text">
								{{item.to_city}}
							</view>
						</view>
						<view class="row">
							<view class="row half">
								<view class="name">
									宠物类别
								</view>
								<view class="text">
									{{item.pet_category}}
								</view>
							</view>
							<view class="row half">
								<view class="name">
									宠物规格
								</view>
								<view class="text">
									{{item.spec}}
								</view>
							</view>
						</view>
						<view class="row">
							<view class="row half" style="width: 100%;">
								<view class="name">
									取宠时间
								</view>
								<view class="text">
									{{item.agree_date}}
									{{item.agree_time}}
								</view>
							</view>
						</view>
						<view class="row">
							<view class="row half" style="width: 100%;">
								<view class="name">
									订单号
								</view>
								<view class="text">
									{{item.no}}
								</view>
							</view>
						</view>
						<view class="row border" v-if="isAdmin">
							<view class="btn" @click.stop="refuse(item.id)">
								拒绝
							</view>
							<view class="btn" @click.stop="push(item.id)">
								结算
							</view>
						</view>
						<view class="row border" v-if="!isAdmin">
							<view class="btn" @click.stop="settle(item.id)">
								申请结算
							</view>
						</view>
					</view>
				</swiper-item>
				<!--  已结算 -->
				<swiper-item style="height: 100%;overflow-y: scroll;">
					<view class="noOrder" v-if="data.data.length < 1">
						暂无订单～～
					</view>
					<view class="card" @click="info(item)" v-for="(item,index) in data.data" :key="index">
						<view class="row center">
							<view class="big-text">
								{{item.from_city}}
							</view>
							<view class="image">
								<image src="http://pet.hdlkeji.com/assets/static/1/95.png" style="width: 50rpx;height: 20rpx;"></image>
							</view>
							<view class="big-text">
								{{item.to_city}}
							</view>
						</view>
						<view class="row">
							<view class="row half">
								<view class="name">
									宠物类别
								</view>
								<view class="text">
									{{item.pet_category}}
								</view>
							</view>
							<view class="row half">
								<view class="name">
									宠物规格
								</view>
								<view class="text">
									{{item.spec}}
								</view>
							</view>
						</view>
						<view class="row">
							<view class="row half" style="width: 100%;">
								<view class="name">
									取宠时间
								</view>
								<view class="text">
									{{item.agree_date}}
									{{item.agree_time}}
								</view>
							</view>
						</view>
						<view class="row">
							<view class="row half" style="width: 100%;">
								<view class="name">
									订单号
								</view>
								<view class="text">
									{{item.no}}
								</view>
							</view>
						</view>
						<view class="row border" v-if="isAdmin">
							<view class="btn" @click.stop="del(item.id)">
								删除
							</view>
						</view>
						<view class="row border" v-if="!isAdmin">
							<view class="btn"  @click.stop="del(item.id)">
								删除
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item style="height: 100%;overflow-y: scroll;">
					<view class="noOrder" v-if="data.data.length < 1">
						暂无订单～～
					</view>
					<view class="card" @click="info(item)" v-for="(item,index) in data.data" :key="index">
						<view class="row center">
							<view class="big-text">
								{{item.from_city}}
							</view>
							<view class="image">
								<image src="http://pet.hdlkeji.com/assets/static/1/95.png" style="width: 50rpx;height: 20rpx;"></image>
							</view>
							<view class="big-text">
								{{item.to_city}}
							</view>
						</view>
						<view class="row">
							<view class="row half">
								<view class="name">
									宠物类别
								</view>
								<view class="text">
									{{item.pet_category}}
								</view>
							</view>
							<view class="row half">
								<view class="name">
									宠物规格
								</view>
								<view class="text">
									{{item.spec}}
								</view>
							</view>
						</view>
						<view class="row">
							<view class="row half" style="width: 100%;">
								<view class="name">
									取宠时间
								</view>
								<view class="text">
									{{item.agree_date}}
									{{item.agree_time}}
								</view>
							</view>
						</view>
						<view class="row">
							<view class="row half" style="width: 100%;">
								<view class="name">
									订单号
								</view>
								<view class="text">
									{{item.no}}
								</view>
							</view>
						</view>
						<view class="row border" v-if="isAdmin">
							<view class="btn">
								拒绝
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<!-- 弹窗 -->
		<u-popup v-model="show" :show-cancel-button="true" mode="center" :border-radius="50" closeable>
			<view class="u-update-content">
				<view class="u-update-top">
					<image src="http://pet.hdlkeji.com/assets/static/1/111.png" class="top-image"></image>
				</view>
				<view class="u-update-bottom">
					<view class="text">
						<view>资料填写不完整，请完善</view>
						<view>资料信息</view>
					</view>
					<view class="btn" @click="goToPrefect">
						马上完善
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import uHeader from '../../components/u-header.vue'
	export default {
		components: {
			uHeader
		},
		data() {
			return {
				// 用户信息
				userInfo: {},
				// 选项切换
				current: 0,
				list: [{
						cate_name: '待接单',
						cate_count: 0
					},
					{
						cate_name: '进行中',
						cate_count: 0
					},
					{
						cate_name: '已完成',
						cate_count: 0
					},
					{
						cate_name: '已结算',
						cate_count: 0
					},
					{
						cate_name: '已取消',
						cate_count: 0
					}
				],
				// 弹窗
				show: false,
				page: 1,
				limit: 100,
				type: 1,
				data: {},
				// 是否是管理员
				isAdmin: false,
				// 顶部高度
				headerHeight: ''
			}
		},
		watch: {
			type(e) {
				this.getData()
			}
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					const menuButton = uni.getMenuButtonBoundingClientRect() // 胶囊
					const navBarPadding = (menuButton.top - res.statusBarHeight) * 2
					let statusBarHeight = res.statusBarHeight
					let navHeight = menuButton.height + navBarPadding
					this.headerHeight = navHeight + statusBarHeight
				}
			})
		},
		onLoad() {
			this.getData()
			// 获取订单数量
			this.getDataNum()
			let data = getApp().globalData
			this.isAdmin = data.isAdmin
			if (!this.isAdmin) {
				this.getInfo()
			}
		},
		onShow() {
			this.getData()
			this.getDataNum()
		},
		onPullDownRefresh() {
			this.getDataNum()
			this.getData()
		},
		methods: {
			// 删除订单
			del(id) {
				let url = ""
				if (this.isAdmin) {
					url = "/admin_order/order_delete"
				} else {
					url = "/sender_order_controller/delete"
				}
				this.request(url, {
					id: id
				}, "GET").then(res => {
					if (res.code === 1) {
						this.getData()
						this.getDataNum()
					}
				})
			},
			// 拒绝结算
			refuse(id) {
				this.request("/admin_order/deal_settle", {
					id: id,
					status: 2
				}, "GET").then(res => {
					if (res.code === 1) {
						this.getData()
						this.getDataNum()
					}
				})
			},
			// 结算
			push(id) {
				this.request("/admin_order/deal_settle", {
					id: id,
					status: 1
				}, "GET").then(res => {
					if (res.code === 1) {
						this.getData()
						this.getDataNum()
					}
				})
			},
			// 申请结算
			settle(id) {
				// this.requset("/sender_order_controller/settle",{

				// },"POST").then(res=>{
				// 	console.log(res)
				// })
				uni.navigateTo({
					url: './settle?id=' + id
				})
			},
			// 获取会员信息
			getInfo() {
				this.request('/user/index', {}, "GET").then(res => {
					if (res.code === 1) {
						if (res.data.need_verification) {
							this.show = true
						}
					}
				})
			},
			// 点击立即接单
			getOrder(id) {
				this.request("/sender_order_controller/get", {
					id: id
				}, "POST").then(res => {
					if (res.code === 1) {
						this.getData()
						this.getDataNum()
					}
				})
			},
			// 获取订单数量
			getDataNum() {
				this.request("/sender_order_controller/nums", {}, "GET").then(res => {
					console.log(res)
					if (res.code === 1) {
						this.list[0].cate_count = res.data[1]
						this.list[1].cate_count = res.data[2]
						this.list[2].cate_count = res.data[3]
						this.list[3].cate_count = res.data[4]
						this.list[4].cate_count = res.data[5]
					}
				})
			},
			// 获取订单列表
			getData() {
				let url = "";
				if (this.isAdmin) {
					url = "/admin_order/orders";
				} else {
					url = "/sender_order_controller/list";
				}
				this.request(url, {
					page: this.page,
					limit: this.limit,
					type: this.type
				}, "GET").then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 1) {
						this.data = res.data
						this.list[this.current].cate_count = res.data.total
					}
				})
			},
			// 点击完善信息
			goToPrefect() {
				uni.navigateTo({
					url: "./perfect"
				})
			},
			// 点击订单
			info(info) {
				uni.navigateTo({
					url: "./info?id=" + info.id
				})
			},
			// 滑动切换
			touchChange(e) {
				this.current = e.detail.current
				this.type = e.detail.current + 1
			},
			// 点击菜单
			change(e) {
				console.log(e)
				this.current = e
				if (e === 0) {
					this.type = 1
				}
				if (e === 1) {
					this.type = 2
				}
				if (e === 2) {
					this.type = 3
				}
				if (e === 3) {
					this.type = 4
				}
				if (e === 4) {
					this.type = 5
				}

			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F8F8F8;

		.order-list-box {
			height: 80vh;
			background-color: #F8F8F8;
			padding-top: 20rpx;

		}
	}

	.menu-top {
		width: 100%;
		background-color: #FFFFFF;

		.menu-list {
			background-color: #F7E8CB;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	}

	.card {
		width: 93%;
		padding: 30rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		background-color: #FFFFFF;
		border-radius: 30rpx;

		.center {
			width: 60%;

			.image {
				width: 50rpx;
				height: 40rpx;
			}
		}

		.row {
			margin: 8rpx 0;
		}

		.half {
			width: 50%;
			justify-content: flex-start;

			.name {
				color: #999;
			}

			.text {
				text-indent: 1em;
			}
		}

		.border {
			border-top: 1px #eee solid;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
		}

		.btn {
			background-color: #F6B301;
			color: #FFFFFF;
			margin: 20rpx 20rpx 0 20rpx;
			padding: 10rpx 30rpx;
			border-radius: 50rpx;
			min-width: 120rpx;
			text-align: center;
		}
	}

	.big-text {
		font-size: 38rpx;
		font-weight: bold;
	}

	// 弹窗
	.u-update-content {
		width: 500rpx;
		height: 650rpx;
		padding: 40rpx;
		background-image: url("http://pet.hdlkeji.com/assets/static/1/110.png");
		background-size: 100% 100%;

		.u-update-top {
			height: 50%;
			display: flex;
			position: relative;

			.top-image {
				height: 300rpx;
				width: 300rpx;
				position: absolute;
				left: 100rpx;
			}
		}

		.u-update-bottom {
			height: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			.btn {
				width: 115px;
				height: 34px;
				background: linear-gradient(90deg, #F6B44D 0%, #FF7A60 100%);
				box-shadow: 0px 3px 6px rgba(248, 144, 64, 0.35);
				opacity: 1;
				border-radius: 34px;
				text-align: center;
				line-height: 34px;
				color: #fff;
			}
		}
	}
</style>