pet_server/pages/order/info.vue

<template>
	<view class="content">
		<view class="card">
			<view class="row">
				<view class="name">
					取宠时间
				</view>
				<view class="text">
					{{info.agree_date}}
					{{info.agree_time}}
				</view>
			</view>
			<view class="row">
				<view class="name">
					托运方式
				</view>
				<view class="text">
					{{info.freight === 'air'?'空运':''}}
					{{info.freight === 'fast'?'快车':''}}
					{{info.freight === 'special'?'专车':''}}
				</view>
			</view>
		</view>

		<view class="card">
			<view class="title">
				托运信息
			</view>
			<view class="order">
				<view class="order_a"><text class="order_yuan"></text> <text>取</text></view>
				<view class="order_b" @click="copy(info.from_addr.location)">
					<view class="order_p">{{info.from_addr.location}}</view>
					<view class="order_c">
						<view class="order_p1">{{info.from_addr.name}}</view>
						<view class="order_p2">{{info.from_addr.mobile}}</view>
					</view>
				</view>
				<view class="order_c" @click="callPhone(info.from_addr.mobile)">
					<image src="https://pet.hdlkeji.com/assets/static/phone.png" style="width: 50rpx;height: 50rpx;">
					</image>
				</view>
			</view>
			<view class="order" style="margin-bottom: 20rpx;">
				<view class="order_a"><text class="order_yuana order_yuan "></text> <text>送</text></view>
				<view class="order_b" @click="copy(info.to_addr.location)">
					<view class="order_p">{{info.to_addr.location}}</view>
					<view class="order_c">
						<view class="order_p1">{{info.to_addr.name}}</view>
						<view class="order_p2">{{info.to_addr.mobile}}</view>
					</view>
				</view>
				<view class="order_c" @click="callPhone(info.to_addr.mobile)">
					<image src="https://pet.hdlkeji.com/assets/static/phone.png" style="width: 50rpx;height: 50rpx;">
					</image>
				</view>
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						宠物类别
					</view>
					<view class="text">
						{{info.pet_category}}
					</view>
				</view>
				<view class="row half">
					<view class="name">
						宠物数量
					</view>
					<view class="text">
						{{info.num}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						上门接宠
					</view>
					<view class="text">
						{{info.pick_up === 1 || info.pick_up === 4? '需要':'不需要'}}
					</view>
				</view>
				<view class="row half">
					<view class="name">
						送宠到家
					</view>
					<view class="text">
						{{info.pick_up === 2|| info.pick_up === 4? '需要':'不需要'}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						宠物规格
					</view>
					<view class="text">
						{{info.spec}}
					</view>
				</view>
				<view class="row half">
					<view class="name">
						有无宠笼
					</view>
					<view class="text">
						{{info.has_cage?"有":"没有"}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						宠物重量
					</view>
					<view class="text">
						{{info.weight}}KG
					</view>
				</view>
				<view class="row half">
					<view class="name">
						宠具件数
					</view>
					<view class="text">
						{{info.piece}}件
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						备注信息
					</view>
					<view class="text">

					</view>
				</view>
			</view>
			<view class="row">
				{{info.remark === null ?'无':info.remark}}
			</view>
			<view class="row" v-if="info.images.length > 1" @click="clickImage(info.images)">
				<view class="row half">
					<view class="name">
						宠物图片
					</view>
				</view>
			</view>
			<view class="image" @click="clickImage(info.images)">
				<image v-for="(item,index) in info.images" :src="item" class="image-dom" :key="index"></image>
			</view>
		</view>

		<view class="card">
			<view class="title">
				订单信息
			</view>
			<view class="row" v-if="isAdmin">
				<view class="name">
					订单金额
				</view>
				<view class="text" style="color: red;">
					¥{{info.real_amount}}
				</view>
			</view>
			<view class="row" v-if="isAdmin">
				<view class="name">
					优惠金额
				</view>
				<view class="text" style="color: red;">
					¥{{info.discount_amount}}
				</view>
			</view>
			<view class="row">
				<view class="name">
					订单编号
				</view>
				<view class="text">
					{{info.no}}
				</view>
			</view>
			<view class="row">
				<view class="name">
					下单时间
				</view>
				<view class="text">
					<!-- {{info.created_at?$u.timeFormat(info.created_at, 'yyyy年mm月dd日 hh时MM分'):"-"}} -->
					{{info.created_at?info.created_at:"-"}}
				</view>
			</view>
			<view class="row">
				<view class="name">
					支付方式
				</view>
				<view class="text">
					{{info.pay_type === 1?"余额支付":"微信支付"}}
				</view>
			</view>
			<view class="row">
				<view class="name">
					支付时间
				</view>
				<view class="text">
					<!-- {{info.pay_time?$u.timeFormat(info.pay_time, 'yyyy年mm月dd日 hh时MM分'):'-'}} -->
					{{info.pay_time?info.pay_time:"-"}}
				</view>
			</view>
		</view>

		<view class="card">
			<view class="row">
				<view class="row half">
					<image src="https://ldc365.cn/assets/static/detaila.png" style="width: 30rpx;height: 30rpx;">
					</image>
					<view class="yellow" style="margin: 0 20rpx;">宠物安心保</view>
					<image src="https://ldc365.cn/assets/static/1/29.png" style="width: 30rpx;height: 30rpx;">
					</image>
				</view>
				<view class="row half yellow">
					{{info.protect_valid?"生效中":"已失效"}}
				</view>
			</view>
			<view class="row">
				<view class="name">
					{{info.protect_amount}}保{{info.protect_max}}
				</view>
			</view>
		</view>

		<view class="card" v-if="info.status >1&&info.senders.length>0">
			<view class="title">
				配送信息
			</view>
			<view class="row" v-if="info.senders[0].user.name">
				<view class="name">
					取宠代理
				</view>
				<view class="text">
					{{info.senders[0]?info.senders[0].user.name: "-"}}
				</view>
			</view>
			<view class="row" v-if="info.senders[0].user.mobile">
				<view class="name">
					联系电话
				</view>
				<view class="text row" style="justify-content: space-between;">
					<view>
						{{info.senders[0]?info.senders[0].user.mobile: "-"}}
					</view>
					<image src="https://pet.hdlkeji.com/assets/static/phone.png" style="width: 30rpx;height: 30rpx;"
						@click="callPhone(info.senders[0].user.mobile)">
					</image>
				</view>
			</view>
			<view class="row" v-if="info.senders[1].user.name">
				<view class="name">
					派送代理
				</view>
				<view class="text">
					{{info.senders[1]?info.senders[1].user.name: "-"}}
				</view>
			</view>
			<view class="row" v-if="info.senders[1].user.mobile">
				<view class="name">
					联系电话
				</view>
				<view class="text row" style="justify-content: space-between;">
					<view>{{info.senders[1]?info.senders[1].user.mobile: "-"}}</view>
					<image src="https://pet.hdlkeji.com/assets/static/phone.png" style="width: 30rpx;height: 30rpx;"
						@click="callPhone(info.senders[1].user.mobile)">
					</image>
				</view>
			</view>
			<view class="row" v-if="">
				<view class="name">
					完成时间
				</view>
				<view class="text">
					{{info.completed_at}}
					<!-- {{info.completed_at?$u.timeFormat(info.completed_at, 'yyyy年mm月dd日 hh时MM分'):'-'}} -->
				</view>
			</view>
		</view>

		<view class="card" v-if="info.status > 50&&info.status <70">
			<view class="title">
				结算信息
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						取件费
					</view>
					<view class="text red">
						¥{{info.current_send_order.fee_1}}
					</view>
				</view>
				<view class="row half">
					<view class="name">
						派送费
					</view>
					<view class="text red">
						¥{{info.current_send_order.fee_3}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						运输费
					</view>
					<view class="text red">
						¥{{info.current_send_order.fee_2}}
					</view>
				</view>
				<view class="row half">
					<view class="name">
						寄养费
					</view>
					<view class="text red">
						¥{{info.current_send_order.fee_5}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						宠具费
					</view>
					<view class="text red">
						¥{{info.current_send_order.fee_4}}
					</view>
				</view>
				<view class="row half">
					<view class="name">
						其他
					</view>
					<view class="text red">
						¥{{info.current_send_order.fee_6}}
					</view>
				</view>
			</view>
			<view class="row ">
				<view class="row half">
					<view class="name">
						总计
					</view>
					<view class="text red">
						¥{{info.current_send_order.fee_total}}
					</view>
				</view>
				<view class="row half">

				</view>
			</view>
		</view>

		<view class="card" v-if="info.status === 80 && info.refund_status > -1">
			<view class="title">
				退款信息
			</view>
			<view class="row">
				<view class="row">
					<view class="name">
						退款金额
					</view>
					<view class="text red">
						{{info.refund_amount||''}}
					</view>
				</view>
			</view>
			<view class="row" v-if="info.refund_at">
				<view class="row">
					<view class="name">
						退款时间
					</view>
					<view class="text red">
						<!-- {{info.refund_at?$u.timeFormat(info.refund_at, 'yyyy年mm月dd日 hh时MM分'):'-'}} -->
						{{info.refund_at}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row">
					<view class="name">
						退款原因
					</view>
					<view class="text">

					</view>
				</view>
			</view>
			<view class="row">
				{{info.refund_reason||''}}
			</view>
			<view class="row">
				<view class="row half">
					<view class="name">
						退款图片
					</view>
				</view>
			</view>
			<view class="image">
				<image :src="item" class="image-dom" v-for="(item,index) in info.refund_images"
					@click="clickImage(info.refund_images)"></image>
			</view>
		</view>

		<view class="card" style="margin-bottom: 15vh;" v-if="info.user_remark.length>0">
			<view class="title">
				备注信息
			</view>
			<view class="col" style="width: 100%;">
				<view class="name" v-for="(item,key) in info.user_remark" style="width: 100%;">
					{{item.txt}}
				</view>
			</view>
		</view>

		<view class="bottom-btn" v-if="!isAdmin">
			<view class="buttom-dom" @click="create(info.id)" v-if="info.status === 1 && !isAdmin">
				立即接单
			</view>
			<view class="buttom-dom" @click="video(0,1,info.id)"
				v-if="info.status === 10 || info.status === 20 || info.status === 30">
				备注
			</view>
			<view class="buttom-dom" @click="video(1,2,info.id)" v-if="info.status === 10 || info.status === 20  || info.status === 30">
				上传更多
			</view>
			<view class="buttom-dom" @click="video(info.status,3,info.id)"
				v-if="info.status === 10  && info.current_send_order.type === 1">
				上传取宠视频
			</view>
			<view class="buttom-dom" @click="video(info.status,4,info.id)"
				v-if="info.status === 20 && info.current_send_order.type === 1">
				上传运输视频
			</view>
			<view class="buttom-dom" @click="video(info.status,5,info.id)"
				v-if="info.status === 30 && info.current_send_order.type === 2">
				上传送达视频
			</view>
			<view class="buttom-dom" @click="del(info.id)" v-if="info.status === 60 && info.refund_status !== 0">
				删除订单
			</view>
			<view class="buttom-dom" @click="del(info.id)" v-if="info.status === 80 && info.refund_status !== 0">
				删除订单
			</view>
		</view>
		<view class="bottom-btn" v-if="isAdmin">
			<view class="buttom-dom" @click.stop="transport(info.id)" v-if="info.status>1">运送详情</view>
			<view class="buttom-dom" @click="video(0,1,info.id)"
				v-if="info.status === 1 || info.status === 10 || info.status === 20 || info.status === 30">
				备注
			</view>
			<view class="buttom-dom" @click.stop="push(info.id)" v-if="info.status == 55">结算</view>
			<view class="buttom-dom" @click.stop="refuse(info.id)" v-if="info.status == 55">拒绝</view>
			<view class="buttom-dom" @click="del(info.id)" v-if="info.status === 60 && info.refund_status !== 0">
				删除订单
			</view>
			<view class="buttom-dom" @click="del(info.id)" v-if="info.status === 80 && info.refund_status !== 0">
				删除订单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否是管理员
				isAdmin: false,
				info: {},
				id: ''
			}
		},
		onShow() {
			// this.isAdmin = getApp().globalData.isAdmin
			// this.getData(this.id);
		},
		onLoad(e) {
			let id = e.id
			this.isAdmin = getApp().globalData.isAdmin
			this.getData(id);
			this.id = id
		},
		methods: {
			// 拒绝结算
			refuse(id) {
				this.request("/admin_order/deal_settle", {
					id: id,
					status: 2
				}, "GET").then(res => {
					if (res.code === 1) {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			// 结算
			push(id) {
				this.request("/admin_order/deal_settle", {
					id: id,
					status: 1
				}, "GET").then(res => {
					if (res.code === 1) {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			// 运行详情
			transport(id) {
				uni.navigateTo({
					url: "./transport?id=" + id + "&admin=" + 1
				})
			},
			// 删除订单
			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) {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
			// 点击复制
			copy(str) {
				wx.setClipboardData({
					data: str,
					success(res) {
						wx.getClipboardData({
							success(res) {
								console.log(res.data) // data
							}
						})
					}
				})
			},
			// 点击拨打电话
			callPhone(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			// 点击查看图片
			clickImage(images) {
				uni.previewImage({
					urls: images
				})
			},
			// 点击立即接单
			create(id) {
				this.request("/sender_order_controller/get", {
					id: id
				}, "POST").then(res => {
					if (res.code === 1) {
						this.$u.toast('接单成功')
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 2000);
					}
				})
			},
			// 获取订单信息
			getData(id) {
				// 判断是否是管理员
				let url = '';
				if (!this.isAdmin) {
					url = "/sender_order_controller/detail"
				} else {
					url = "/admin_order/order_detail"
				}
				this.request(url, {
					id: id
				}, "GET").then(res => {
					console.log(res)
					if (res.code === 1) {
						this.info = res.data
					}
				})
			},
			// 点击上传视频
			video(status, type, id) {
				// status 的订单状态 10取宠视频 20 运输视频 30送宠视频 
				// type 1 备注 2上传更多 3上传取宠视频 4上传运输视频 5上传送达视频
				// function gotoPage(){
				// 	uni.navigateTo({
				// 		url: "./video?status=" + status + "&type=" + type + "&id=" + id
				// 	})
				// }
				// if(type === 3){
				// 	uni.showModal({
				// 		title:"确认宠物已到达正在配送？",
				// 		success(res) {
				// 			if(res.confirm){
				// 				gotoPage()
				// 			}
				// 		}
				// 	})
				// }
				if (type == 3) {
					uni.showModal({
						content: "确定宠物已到达正在配送中吗？",
						cancelText: "取消",
						confirmColor:"#F6B403",
						success(res) {
							if(res.confirm){
								uni.redirectTo({
									url: "./video?status=" + status + "&type=" + type + "&id=" + id
								})
							}
						}
					})
					return false
				}
				if (type == 5) {
					uni.showModal({
						content: "确定已将宠物安全送达吗？",
						cancelText: "取消",
						confirmColor:"#F6B403",
						success(res) {
							if(res.confirm){
								uni.redirectTo({
									url: "./video?status=" + status + "&type=" + type + "&id=" + id
								})
							}
						}
					})
					return false
				}
				uni.redirectTo({
					url: "./video?status=" + status + "&type=" + type + "&id=" + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 40rpx;
	}

	.yellow {
		color: #F6B403;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end !important;
	}

	.row {
		justify-content: flex-start;

		.row {
			.name {
				min-width: 90rpx;
				text-align: right;
			}
		}
	}

	.card {
		background-color: #FFFFFF;
		width: 93%;
		margin: 0 auto;
		margin-bottom: 40rpx;
		padding: 30rpx;
		border-radius: 30rpx;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		.name {
			color: #999;
			min-width: 20%;
		}

		.text {
			text-indent: 1em;
			overflow-x: scroll;
			white-space: nowrap;
		}

		.red {
			color: red;
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			padding-bottom: 20rpx;
			width: 100%;
		}

		.row {
			margin-bottom: 20rpx;
		}
	}

	.card {
		.order {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// height: 100rpx;
			background: #F5F6FB;
			opacity: 1;
			padding: 14rpx 24rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			margin-bottom: 10rpx;

			.order_a {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 36rpx;
				color: #1F4971;
				opacity: 1;
				display: flex;
				justify-content: flex-start;
				align-items: center;


				.order_yuan {
					display: inline-block;
					width: 14rpx;
					height: 14rpx;
					background: #F6B403;
					border-radius: 50%;
					opacity: 1;
					margin-right: 10rpx;
				}

				.order_yuana {
					display: inline-block;
					width: 14rpx;
					height: 14rpx;
					background: #F54948;
					border-radius: 50%;
					opacity: 1;
					margin-right: 10rpx;
				}
			}

			.order_b {
				width: 80%;
				text-align: left;


				.order_p {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 36rpx;
					color: #111111;
					opacity: 1;
				}

				.order_c {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-top: 6rpx;

					.order_p1 {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 36rpx;
						color: #111111;
						opacity: 1;
					}

					.order_p2 {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 36rpx;
						color: #111111;
						opacity: 1;
						margin-left: 40rpx;

					}
				}
			}
		}
	}

	.min-card {
		width: 100%;
		background-color: #F8F8F8;
	}

	.image {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;

		.image-dom {
			width: 120rpx;
			height: 120rpx;
			border: 1px #eee solid;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}


	.bottom-btn {
		width: 100vw;
		height: 10vh;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;

		.buttom-dom {
			height: 70rpx;
			min-width: 20%;
			background-color: #F6B301;
			color: #FFFFFF;
			text-align: center;
			line-height: 70rpx;
			color: #FFFFFF;
			border-radius: 70rpx;
			margin: 0 40rpx;
			padding: 0 10rpx;
		}
	}
</style>