concrete-transportation-uniapp-20250821/pages/user/orderd.vue

<template>
	<view class="content">
		
		<view class="head">
			<image v-if="o.car_image" class="head" :src="o.car_image" mode="scaleToFill"/>
			<image v-else class="head" src="/static/re/center.png" mode="scaleToFill"/>
		</view>
		
		<view class="item-card b-relative">
			<view>
				<view class="title">
					<span class="title-span">·</span>计划信息
				</view>
			</view>
			<view class="tips" style="line-height: 48rpx;font-size: 28rpx;">
				<view>到场时间：{{ $timeUtils.formatTime2Day(o.in_time) }}</view>
				<view>计划数量：{{ o.mi || '-- ' }} 立方或者趟</view>
				<view>合同类型：{{ +o.type===1?'现金单':'合同单' }}</view>
				<view @click="openMap()">
					<span>施工地址：{{ o.address || '--' }}</span>
					<image src="/static/icons/icon1.png" class="square40" style="margin: 0 0 -8rpx;"/>
				</view>
			</view>
			<view class="tips ti">{{ $timeUtils.formatTime(o.create_time) || '--'}}发布</view>
		</view>
		
		<view class="item-card">
			<view>
				<view class="title">
					<span class="title-span">·</span>车辆信息
				</view>
			</view>
			<view class="tips" style="line-height: 48rpx;font-size: 28rpx;">
				<view>车辆牌照：{{ o.car_no }}</view>
				<view>车辆轴数：{{ o.car_mi }}</view>
				<view @click="clickCar(o.car_id)">
					<span>证照信息：点击查看证件信息</span>
					<image src="/static/icons/icon1.png" class="square40" style="margin: 0 0 -8rpx;"/>
				</view>
			</view>
		</view>
		
		<view class="item-card">
			<view>
				<view class="title">
					<span class="title-span">·</span>接单须知
				</view>
			</view>
			<view class="tips">
				<p>1.您需要预交保证金进行接单，接单后如有特殊情况请及时与平台沟通协调，可通过个人中心-我要拒单联系客服</p>
				<p>2.为了保障工作顺利开展建议您提前一定时间到达现场，请规划您的合理出行时间</p>
				<p>3.施工完成、取车前后请您按照平台要求及时准确的拍摄报，以便出现合同争议时通过您提交的信息保证您的利益</p>
			</view>
		</view>
		
		<view class="re-end-pand" v-if="+role===0 && +o.status===0">
			<button @click="loadOnline">确认接单</button>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				role: "1",
				o: {}
			}
		},
		onLoad(opn) {
			this.id = opn.id
			console.log(opn);
			this.role = uni.getStorageSync("role");
			this.loadOrder()
			if(!uni.getStorageSync("userid")){
				uni.showModal({
					title: "登陆检测",
					content: "查看和接单需要识别您的用户身份，请先登陆",
					success: (res) => {
						if(res.confirm === true){
							uni.navigateTo({
								url: "/pages/login/login"
							})
						} else {
							uni.navigateBack({delta: 1})
						}
					}
				})
			}
		},
		methods: {
			clickBanner(){ uni.navigateTo({ url: '/pages/login/login' }) },
			clickCar(id){
				uni.navigateTo({ url: `/pages/base/showcar?id=${id}`})
			},
			loadOnline(){
				const _this = this
				this.$httpGet("/api/online/get", {}, (res) => {
					console.log('[/online/get]', res);
					if(res.data && +res.data===1){
						uni.showModal({
							title: "在线检测",
							content: "请上线后再接单，点击确认自动上线",
							success: (res) => {
								if(res.confirm === true){
									_this.$httpGet("/api/online/set", {online: '0'}, (res) => {
										console.log('[/online/set]', res);
										if(res.data || res.data == 0){
											_this.clickRecrive()
										} 
									})
								}
							}
						})
					} else {
						_this.checkDriver()
					}
				})
			},
			checkDriver(){
				const _this = this
				this.$httpGet("/api/driver/checkOrder", {}, function(res) {
					console.log('[/driver/checkOrder]', res);
					if(res.data>0){
						uni.showModal({
							title: "订单检测",
							content: "您还有正在进行中的订单，请完成后在试",
							success: (res) => {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					} else {
						_this.clickRecrive()
					}
				})
			},
			clickRecrive() {
				this.$httpGet("/api/order/receive", {id: this.id}, function(res) {
					console.log('[/order/receive]', res);
					if(res.data){
						uni.showToast({ icon: "success", title: "接单成功" })
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					}
				})
			},
			loadOrder(){
				const _this = this
				this.$httpGet("/api/order/get", {id: this.id}, function(res) {
					console.log('[/order/get]', res);
					if(res.data){
						_this.o = res.data
					}
				})
			},
			openMap(){
				uni.openLocation({
					latitude: parseFloat(this.o.latitude),
					longitude:parseFloat(this.o.longitude),
					scale: 18,
					name: this.o.address || '未命名地址'
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.head{
		height: 460rpx; 
		width: 100vw; 
	}
	
	.item-card{
		width: calc(100vw - 40rpx);
		min-height: 176rpx;
		padding: 30rpx 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
	}
	
	.title{
		font-size: 30rpx;
		font-weight: 400;
		line-height: 36rpx;
		letter-spacing: 0px;
		color: #000000;
	}
	
	.title-span {
		font-size: 30rpx;
		font-weight: bolder;
		margin-right: 10rpx;
	}
	
	.tips{
		font-size: 24rpx;
		font-weight: 350;
		line-height: 36rpx;
		letter-spacing: 0px;
		color: #333333;
		
		padding: 20rpx;
	}
	
	.tips.ti{
		position: absolute; 
		top: 10rpx;right: 20rpx;
		color: #999;
	}
</style>