You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
294 lines
6.4 KiB
294 lines
6.4 KiB
<template>
|
|
<view class="content">
|
|
<navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<!-- 头部图片 -->
|
|
<view class="head">
|
|
<image v-if="orderDetail.headerImage" class="head" :src="orderDetail.headerImage" mode="scaleToFill" />
|
|
<image v-else class="head" src="/static/re/center.png" mode="scaleToFill" />
|
|
</view>
|
|
|
|
<!-- 计划信息 -->
|
|
<view class="item-card b-relative">
|
|
<view class="title">
|
|
<label class="title-span">·</label>计划信息
|
|
</view>
|
|
<view class="tips" style="line-height:48rpx;font-size:28rpx">
|
|
<view>到场时间：{{ orderDetail.arrivalTime }}</view>
|
|
<view>计划数量：{{ orderDetail.quantity }} 立方或者趟</view>
|
|
<view>合同类型：{{ orderDetail.contractType }}</view>
|
|
<view @click="openMap">
|
|
<label>施工地址：{{ orderDetail.address }}</label>
|
|
<image src="/static/icons/icon1.png" class="square40" style="margin:0 0 -8rpx" />
|
|
</view>
|
|
</view>
|
|
<view class="tips ti">{{ orderDetail.publisher }}发布</view>
|
|
</view>
|
|
|
|
<!-- 车辆信息 -->
|
|
<view class="item-card">
|
|
<view class="title">
|
|
<label class="title-span">·</label>车辆信息
|
|
</view>
|
|
<view class="tips" style="line-height:48rpx;font-size:28rpx">
|
|
<view>车辆牌照：{{ orderDetail.plateNumber }}</view>
|
|
<view>车辆轴数：{{ orderDetail.axleCount }}</view>
|
|
<view @click="viewCertificates">
|
|
<label>证照信息：点击查看证件信息</label>
|
|
<image src="/static/icons/icon1.png" class="square40" style="margin:0 0 -8rpx" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 接单须知 -->
|
|
<view class="item-card">
|
|
<view class="title">
|
|
<label class="title-span">·</label>接单须知
|
|
</view>
|
|
<view class="tips">
|
|
<view>1.您需要预交保证金进行接单，接单后如有特殊情况请及时与平台沟通协调，可通过个人中心-我要拒单联系客服</view>
|
|
<view>2.为了保障工作顺利开展建议您提前一定时间到达现场，请规划您的合理出行时间</view>
|
|
<view>3.施工完成、取车前后请您按照平台要求及时准确的拍摄报，以便出现合同争议时通过您提交的信息保证您的利益</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 确认接单按钮 -->
|
|
<view v-if="showConfirmBtn" class="re-end-pand">
|
|
<button @click="confirmOrder">确认接单</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/navbar.vue'
|
|
|
|
export default {
|
|
name: 'UserOrderd',
|
|
components: {
|
|
navbar
|
|
},
|
|
data() {
|
|
return {
|
|
orderId: '',
|
|
showConfirmBtn: true,
|
|
orderDetail: {
|
|
headerImage: '',
|
|
arrivalTime: '2024-01-15 08:00',
|
|
quantity: '200',
|
|
contractType: '按方计费',
|
|
address: '长沙市雨花区建设工地A区',
|
|
publisher: '湖南建设集团',
|
|
plateNumber: '湘A12345',
|
|
axleCount: '4轴',
|
|
longitude: 112.9388,
|
|
latitude: 28.2282
|
|
}
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.orderId = options.id;
|
|
this.loadOrderDetail();
|
|
}
|
|
uni.setNavigationBarTitle({
|
|
title: '订单详情'
|
|
});
|
|
},
|
|
methods: {
|
|
// 加载订单详情
|
|
loadOrderDetail() {
|
|
// 模拟加载订单详情数据
|
|
console.log('加载订单详情:', this.orderId);
|
|
// 这里可以调用API获取真实数据
|
|
},
|
|
|
|
// 打开地图
|
|
openMap() {
|
|
uni.openLocation({
|
|
latitude: this.orderDetail.latitude,
|
|
longitude: this.orderDetail.longitude,
|
|
name: '施工地址',
|
|
address: this.orderDetail.address,
|
|
success: () => {
|
|
console.log('打开地图成功');
|
|
},
|
|
fail: (err) => {
|
|
console.error('打开地图失败:', err);
|
|
uni.showToast({
|
|
title: '打开地图失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 查看证件信息
|
|
viewCertificates() {
|
|
uni.navigateTo({
|
|
url: '/pages_order/base/showcar?id=' + this.orderId
|
|
});
|
|
},
|
|
|
|
// 确认接单
|
|
confirmOrder() {
|
|
uni.showModal({
|
|
title: '确认接单',
|
|
content: '确定要接取这个订单吗？接单后需要按时到达现场。',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.submitOrder();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 提交接单
|
|
submitOrder() {
|
|
uni.showLoading({
|
|
title: '接单中...'
|
|
});
|
|
|
|
// 模拟接单请求
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '接单成功',
|
|
icon: 'success'
|
|
});
|
|
|
|
// 跳转到我的订单页面
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: '/pages_order/user/orders'
|
|
});
|
|
}, 1500);
|
|
}, 2000);
|
|
},
|
|
|
|
goBack() {
|
|
uni.navigateBack();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
min-height: 100vh;
|
|
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;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.title-span {
|
|
font-size: 30rpx;
|
|
font-weight: bolder;
|
|
margin-right: 10rpx;
|
|
color: #F40000;
|
|
}
|
|
|
|
.tips {
|
|
font-size: 24rpx;
|
|
font-weight: 350;
|
|
line-height: 36rpx;
|
|
letter-spacing: 0px;
|
|
color: #333333;
|
|
padding: 20rpx;
|
|
|
|
&.ti {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
right: 20rpx;
|
|
color: #999;
|
|
padding: 0;
|
|
}
|
|
|
|
view {
|
|
margin-bottom: 10rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.square40 {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
vertical-align: middle;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.re-end-pand {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
|
|
|
button {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
background-color: #F40000;
|
|
color: #fff;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
.b-relative {
|
|
position: relative;
|
|
}
|
|
|
|
.placeholder-icon {
|
|
font-size: 120rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.placeholder-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.placeholder-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.back-btn {
|
|
padding: 20rpx 40rpx;
|
|
background-color: #007AFF;
|
|
color: #fff;
|
|
border-radius: 25rpx;
|
|
font-size: 28rpx;
|
|
border: none;
|
|
}
|
|
</style>
|