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">
					<view class="order_p">{{info.from_addr.address}}</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>
			<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">
					<view class="order_p">{{info.to_addr.address}}</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>
			<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}}
					</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">
						{{info.remark}}
					</view>
				</view>
			</view>
			<view class="row" v-if="info.images.length > 1">
				<view class="row half">
					<view class="name">
						宠物图片
					</view>
				</view>
			</view>
			<view class="image">
				<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">
				<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分'):"-"}}
				</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分'):'-'}}
				</view>
			</view>
		</view>

		<view class="card" v-if="info.protect_valid">
			<view class="row">
				<view class="row half">
					<image src="http://pet.hdlkeji.com/assets/static/detaila.png" style="width: 30rpx;height: 30rpx;"></image>
					<view style="margin: 0 20rpx;">宠物安心保</view>
					<image src="http://pet.hdlkeji.com/assets/static/1/29.png" style="width: 30rpx;height: 30rpx;"></image>
				</view>
				<view class="row half yellow">
					生效中
				</view>
			</view>
			<view class="row">
				<view class="name">
					{{info.protect_amount}}保{{info.protect_max}}
				</view>
			</view>
		</view>

		<view class="card">
			<view class="title">
				配送信息
			</view>
			<view class="row">
				<view class="name">
					取宠代理
				</view>
				<view class="text">
					{{info.from_addr.name}}
				</view>
			</view>
			<view class="row">
				<view class="name">
					联系电话
				</view>
				<view class="text">
					{{info.from_addr.mobile}}
				</view>
			</view>
			<view class="row">
				<view class="name">
					派送代理
				</view>
				<view class="text">
					{{info.to_addr.name}}
				</view>
			</view>
			<view class="row">
				<view class="name">
					联系方式
				</view>
				<view class="text">
					{{info.to_addr.mobile}}
				</view>
			</view>
			<view class="row">
				<view class="name">
					完成时间
				</view>
				<view class="text">
					{{info.completed_at?$u.timeFormat(info.completed_at, 'yyyy年mm月dd日 hh时MM分'):'-'}}
				</view>
			</view>
		</view>

		<view class="card" v-if="info.status > 50">
			<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>
		</view>

		<view class="card" v-if="info.status === 70">
			<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">
				<view class="row">
					<view class="name">
						退款时间
					</view>
					<view class="text red">
						{{info.refund_at?$u.timeFormat(info.refund_at, 'yyyy年mm月dd日 hh时MM分'):'-'}}
					</view>
				</view>
			</view>
			<view class="row">
				<view class="row">
					<view class="name">
						退款原因
					</view>
					<view class="text red">
						{{info.refund_reason||''}}
					</view>
				</view>
			</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"></image>
			</view>
		</view>

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

		<view class="bottom-btn">
			<view class="buttom-dom" @click="create(info.id)" v-if="info.status === 1">
				立即接单
			</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(0,2,info.id)" v-if="info.status === 10 || info.status === 20">
				上传更多
			</view>
			<view class="buttom-dom" @click="video(info.status,3,info.id)" v-if="info.status === 10">
				上传取宠视频
			</view>
			<view class="buttom-dom" @click="video(info.status,4,info.id)" v-if="info.status === 20">
				上传运输视频
			</view>
			<view class="buttom-dom" @click="video(info.status,5,info.id)" v-if="info.status === 30">
				上传送达视频
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否是管理员
				isAdmin: false,
				info: {}
			}
		},
		onShow() {
			this.isAdmin = getApp().globalData.isAdmin
			this.getData(id);
		},
		onLoad(e) {
			let id = e.id
			this.isAdmin = getApp().globalData.isAdmin
			this.getData(id);
		},
		methods: {
			// 点击查看图片
			clickImage(){
				uni.previewImage({
					urls:this.info.refund_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()
				// 			}
				// 		}
				// 	})
				// }
				uni.navigateTo({
					url: "./video?status=" + status + "&type=" + type + "&id=" + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 40rpx;
		padding-bottom: 5vh;
	}
	.yellow{
		color: #F6B403;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end !important;
	}
	.row {
		justify-content: flex-start;
	}

	.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;
		}

		.text {
			text-indent: 1em;
		}

		.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: 85%;
				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;

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


	.bottom-btn {
		position: fixed;
		bottom: 0;
		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>