505 lines
13 KiB
Vue
505 lines
13 KiB
Vue
<template>
|
||
<div class="shop_page_container">
|
||
<nut-navbar title="订单编辑" :fixed="true" ref="navtest" left-show :safe-area-inset-top="true"
|
||
:custom-color="'#312D22'">
|
||
</nut-navbar>
|
||
|
||
<div class="base_box short_box">
|
||
<div class="short_item" style="border-bottom: 1px solid #E9E8E8;padding-bottom: 10px;">
|
||
<div class="short_item_title">订单号：{{orderItem?.orderId}}</div>
|
||
<div class="short_item_pay">{{orderItem?.payStatus == 1 ? '已支付' : '未支付'}}</div>
|
||
</div>
|
||
<div class="show_box_item" style="border-bottom: 1px solid #E9E8E8;padding-bottom: 10px;">
|
||
<div class="short_item_title">地址信息</div>
|
||
<div class="short_item_time">{{extractPhoneNumber( orderItem?.userServiceAddr) }}</div>
|
||
<div class="short_item_normal">{{orderItem?.addr }}</div>
|
||
</div>
|
||
<div class="show_box_item" style="border-bottom: 1px solid #E9E8E8;padding-bottom: 10px;">
|
||
<div class="short_item_title">宠物信息</div>
|
||
<div v-for="(item, index) in orderItem?.petList" :key="index">
|
||
<div class="short_item_time">{{ item?.nickName+' | '+item?.assortment+' | '+ item?.weight+'kg'}}</div>
|
||
<div class="short_item_normal">{{item?.goodsNameList }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="show_box_item">
|
||
<div class="short_item_time">订单服务时长</div>
|
||
<div class="choose_box">
|
||
<nut-input v-model="showProjectServerTime" placeholder="请输入订单服务时长" type="number" >
|
||
<template #right>
|
||
分钟
|
||
</template>
|
||
</nut-input>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="show_box_item">
|
||
<div class="short_item_time">服务时间</div>
|
||
<div class="choose_box" @tap="handleshowtimepopup">
|
||
<div class="con_content">{{ showtimeboxinfo }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="show_box_item">
|
||
<div class="short_item_time">详细地址信息</div>
|
||
<div class="choose_box" @tap="handlegotoaddresspage">
|
||
<div class="con_content_address">{{ showaddressName }}</div>
|
||
<div class="loaction_icon">
|
||
<img src="../../static/images/locationYellow.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="show_box_item">
|
||
<div class="short_item_time">更换车辆</div>
|
||
<div class="choose_box">
|
||
<CarNoSelecter v-model="showCarNo" :localdata="carOptions" @change="carChoose" placeholder="车辆信息">
|
||
</CarNoSelecter>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<time-popup :showbottomstates="showtimebottomstates" @selfclose="handleclosetimebottom"
|
||
:timelists="orderServiceTimeList.info" @uploadtime="handleuploadtime"></time-popup>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="bottom_safe_area"> </div>
|
||
<nut-safe-area position="bottom"></nut-safe-area>
|
||
<div class="shopcar_box">
|
||
<button class="submit-btn" :style="{ backgroundColor: '#FFCD35' }" @click="handleSubmit">
|
||
确认
|
||
</button>
|
||
<div class="shopcar_box_list">
|
||
</div>
|
||
<nut-safe-area position="bottom"></nut-safe-area>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive
|
||
} from 'vue';
|
||
|
||
import timePopup from '../../components/timepopup'
|
||
import CarNoSelecter from '../../components/carNoSelecter'
|
||
|
||
import {
|
||
orderCar,
|
||
orderDispatch
|
||
} from '../../api/orders'
|
||
import {
|
||
isDateTimeGreaterThanCurrent
|
||
} from '../../utils/date'
|
||
import {
|
||
carList
|
||
} from '../../api/cars.js'
|
||
|
||
import {
|
||
useUserInfo
|
||
} from '@/store'
|
||
const userInfo = useUserInfo()
|
||
|
||
const showtimeboxinfo = ref('请选择您预约的洗护时间段')
|
||
const timeboxinfoList = ref([])
|
||
const showtimebottomstates = ref(false)
|
||
|
||
const showaddressName = ref('请设置服务地址')
|
||
|
||
const showCarNo = ref('请选择您的车辆')
|
||
const showCarNoItem = ref({})
|
||
const chooseUid = ref(0)
|
||
|
||
const showProjectServerTime = ref('请输入服务时间')
|
||
|
||
const orderServiceTimeList = reactive({
|
||
info: []
|
||
})
|
||
|
||
const carOptions = ref([])
|
||
const orderItem = ref({})
|
||
const submitList = reactive({
|
||
info: {
|
||
petGoodsInfos: [],
|
||
serviceTime: "",
|
||
serviceAddrId: 0
|
||
}
|
||
})
|
||
|
||
const fieldNames = ref({
|
||
text: "addr",
|
||
value: "id",
|
||
});
|
||
|
||
function handleSubmit() {
|
||
|
||
const submitParams = {
|
||
"carId": showCarNo.value,
|
||
"orderId":orderItem.value.orderId,
|
||
"orderUpdateDTO": {
|
||
"addr": showaddressName.value,
|
||
"carId": showCarNo.value,
|
||
"orderId":orderItem.value.orderId,
|
||
"projectionServiceTime": showProjectServerTime.value,
|
||
"remark": orderItem.value.remark,
|
||
"serviceTime": showtimeboxinfo.value,
|
||
"userServiceAddrId":orderItem.value.userServiceAddrId
|
||
}
|
||
}
|
||
|
||
console.log(submitParams,'==========submitParams')
|
||
orderDispatch(submitParams).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '派单成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
// 返回上一页或刷新数据
|
||
setTimeout(() => {
|
||
// uni.navigateBack()
|
||
uni.switchTab({
|
||
url: `/pages/index/index`
|
||
})
|
||
}, 1500)
|
||
} else {
|
||
uni.showToast({
|
||
title: '派单失败，请稍后重试',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
//车辆选择
|
||
function carChoose(val) {
|
||
showCarNo.value = val.value
|
||
showCarNoItem.value = val
|
||
}
|
||
|
||
function handleuploadtime(e) {
|
||
console.log(e, 'handleuploadtime')
|
||
showtimeboxinfo.value = e
|
||
}
|
||
|
||
// // 时间处理函数
|
||
function getorderServiceTime() {
|
||
carList(userInfo.getUid).then((res) => {
|
||
if (res.code == 200) {
|
||
orderServiceTimeList.info = []
|
||
orderServiceTimeList.info.length = 0
|
||
let j = 1
|
||
for (let item of res.data) {
|
||
console.log('------', item)
|
||
let date = new Date(item?.serviceDate).getDay()
|
||
let result = {
|
||
backtime: item?.serviceDate,
|
||
date,
|
||
ischeck: j == 1 ? true : false,
|
||
day: item?.serviceDate?.split('-')[1] + '.' + item?.serviceDate.split('-')[2],
|
||
timelist: item?.carDispatchList[0].dispatchResults
|
||
}
|
||
|
||
j += 1
|
||
for (let j in result.timelist) {
|
||
result.timelist[j].ischeck = false
|
||
result.timelist[j].isOver = isDateTimeGreaterThanCurrent(item?.serviceDate, result
|
||
.timelist[j].time) //
|
||
}
|
||
orderServiceTimeList.info.push(result)
|
||
}
|
||
console.log(orderServiceTimeList, 'res.data.times')
|
||
}
|
||
})
|
||
}
|
||
|
||
function handleclosetimebottom(e) {
|
||
showtimebottomstates.value = e
|
||
}
|
||
|
||
function handlegotoaddresspage() {
|
||
uni.navigateTo({
|
||
url: '/pages/addresslist/index?type=2'+'&uid='+chooseUid.value,
|
||
})
|
||
}
|
||
|
||
function handleshowtimepopup() {
|
||
console.log(showtimebottomstates.value)
|
||
showtimebottomstates.value = !showtimebottomstates.value
|
||
}
|
||
|
||
onShow(_ => {
|
||
uni.$on('returnData', (e) => {
|
||
showaddressName.value = e.e.addr
|
||
console.log(e)
|
||
})
|
||
})
|
||
|
||
onLoad((e) => {
|
||
if (e.orderInfo && e.orderInfo != 'undefined') {
|
||
const res = JSON.parse(e.orderInfo)
|
||
orderItem.value = res
|
||
showtimeboxinfo.value = res.serviceTime
|
||
showaddressName.value = res.addr
|
||
showProjectServerTime.value = res?.projectionServiceTime ? res.projectionServiceTime:0
|
||
chooseUid.value = res.uid
|
||
getorderServiceTime()
|
||
usetCarList()
|
||
orderGoodsList(res)
|
||
console.log(res);
|
||
}
|
||
})
|
||
|
||
function orderGoodsList(data) {
|
||
let petLists = data?.petList
|
||
if (petLists?.length<=0 )return;
|
||
const result = petLists.map(pet => {
|
||
// 使用对象展开运算符保留所有原有属性
|
||
return {
|
||
...pet,
|
||
// 添加新的 goodsNameList 属性
|
||
goodsNameList: pet.petDetailList
|
||
.map(detail => detail.goodsName)
|
||
.join(', ')
|
||
};
|
||
});
|
||
orderItem.value.petList = result
|
||
console.log(orderItem.value, ">>>>>>n===")
|
||
}
|
||
|
||
//提交编辑信息
|
||
function usetCarList() {
|
||
orderCar(userInfo.uid).then(res => {
|
||
if (res.code == 200) {
|
||
const newCarList = res.data.map(car => ({
|
||
...car, // 保留原有所有属性
|
||
text: car.carNo, // 添加text字段，值为carNo
|
||
value: car.id // 添加value字段，值为id
|
||
}));
|
||
carOptions.value = newCarList
|
||
showCarNo.value = newCarList.find(car => car.carNo == orderItem.value.carNo)?.id
|
||
}
|
||
})
|
||
}
|
||
|
||
function extractPhoneNumber(str) {
|
||
if (str?.length <= 0) return ""
|
||
// 尝试多种可能的格式
|
||
const patterns = [
|
||
/联系电话[：:]\s*(\d{11})/, // 格式：联系电话：13912712777
|
||
/电话[：:]\s*(\d{11})/, // 格式：电话：13912712777
|
||
/手机[：:]\s*(\d{11})/, // 格式：手机：13912712777
|
||
/1[3-9]\d{9}/ // 直接匹配11位手机号
|
||
];
|
||
|
||
// for (const pattern of patterns) {
|
||
// const match = str.match(pattern);
|
||
// if (match) {
|
||
// // 返回第一个捕获组或整个匹配
|
||
// return match[1] || match[0];
|
||
// }
|
||
// }
|
||
|
||
return ""; // 没有找到手机号
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
image {
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
|
||
.shop_page_container {
|
||
// --nut-navbar-background: #FFDE5E;
|
||
--nut-button-border-radius: 0px 25px 25px 0px;
|
||
--nut-navbar-color: #312D22;
|
||
--nut-button-default-color: #312D22;
|
||
--nut-radio-button-border-radius: 8rpx;
|
||
--nut-form-item-label-width: 50rpx;
|
||
--nut-navbar-box-shadow: 0px 0px 0px 0px;
|
||
--nut-textarea-font: 16pt;
|
||
--nut-input-border-bottom:rgba(0,0,0,0);
|
||
height: 100%;
|
||
background-color: #F3F3F3;
|
||
}
|
||
|
||
.show_box {
|
||
background-color: #FFFFFF;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.show_box_item {
|
||
padding: 24rpx;
|
||
padding-bottom: 0rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.choose_box {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
margin-top: 12rpx;
|
||
width: 702rpx;
|
||
height: 112rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
border: 2rpx solid #E5E4E4;
|
||
color: $uni-text-color-grey;
|
||
font-size: $uni-font-size-base;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
|
||
|
||
}
|
||
|
||
.bottom_safe_area {
|
||
height: 128rpx;
|
||
padding-bottom: 60rpx;
|
||
}
|
||
|
||
.short_item_time {
|
||
font-size: $uni-font-size-base;
|
||
color: $uni-text-color-grey;
|
||
max-width: 500rpx;
|
||
margin-top: 20rpx;
|
||
// text-align: right;
|
||
}
|
||
|
||
.short_item_normal {
|
||
font-size: $uni-font-size-base;
|
||
color: $uni-text-color-grey;
|
||
max-width: 650rpx;
|
||
margin-top: 20rpx;
|
||
// text-align: right;
|
||
}
|
||
|
||
.shopcar_box {
|
||
position: fixed;
|
||
bottom: 0px;
|
||
left: 0px;
|
||
background-color: #fff;
|
||
|
||
.shopcar_box_list {
|
||
height: 68rpx;
|
||
width: 750rpx;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
|
||
.box_list_button {
|
||
width: 702rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient(270deg, #FFCD35 0%, #FFDE5E 100%);
|
||
border-radius: 74rpx 74rpx 74rpx 74rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: $uni-text-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.con_content {
|
||
color: #444137;
|
||
font-size: 13pt;
|
||
}
|
||
|
||
.con_content_address {
|
||
color: #444137;
|
||
font-size: 13pt;
|
||
white-space: nowrap;
|
||
/* 禁止换行 */
|
||
overflow: hidden;
|
||
/* 隐藏超出部分 */
|
||
text-overflow: ellipsis;
|
||
/* 超出部分显示省略号 */
|
||
// width: 500px; /* 设置一个固定宽度或最大宽度 */
|
||
}
|
||
|
||
.submit-btn {
|
||
// margin-top: 50rpx;
|
||
height: 88rpx;
|
||
width: 700rpx;
|
||
line-height: 88rpx;
|
||
border-radius: 44rpx;
|
||
color: #ffffff;
|
||
font-size: 32rpx;
|
||
background-color: #cccccc;
|
||
transition: background-color 0.3s;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.base_box {
|
||
width: 702rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
margin: 24rpx;
|
||
}
|
||
|
||
.short_box {
|
||
padding-bottom: 0rpx;
|
||
background-color: #FFFFFF;
|
||
|
||
.short_item {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: space-between;
|
||
margin-bottom: 26rpx;
|
||
padding: 24rpx;
|
||
|
||
.short_item_title {
|
||
color: $uni-text-color;
|
||
font-size: $uni-font-size-base;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.short_item_time {
|
||
font-size: $uni-font-size-base;
|
||
color: $uni-text-color-grey;
|
||
max-width: 500rpx;
|
||
text-align: right;
|
||
}
|
||
|
||
.short_item_pay {
|
||
font-size: $uni-font-size-base;
|
||
color: $uni-text-color-grey;
|
||
max-width: 500rpx;
|
||
text-align: right;
|
||
color: red;
|
||
}
|
||
}
|
||
}
|
||
|
||
.short_box::after {
|
||
content: '';
|
||
display: table;
|
||
}
|
||
.loaction_icon {
|
||
position: absolute;
|
||
right: 44rpx;
|
||
width: 32rpx;
|
||
height: 40rpx;
|
||
}
|
||
.choose_box_text {
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
align-items: center;
|
||
margin-top: 12rpx;
|
||
width: 702rpx;
|
||
height: 112rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
border: 2rpx solid #E5E4E4;
|
||
color: $uni-text-color-grey;
|
||
font-size: $uni-font-size-base;
|
||
box-sizing: border-box;
|
||
}
|
||
</style> |