514 lines
15 KiB
Vue
514 lines
15 KiB
Vue
<template>
|
|
<Header />
|
|
<div class="container">
|
|
<el-breadcrumb separator="/">
|
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
<el-breadcrumb-item>预约车</el-breadcrumb-item>
|
|
</el-breadcrumb>
|
|
|
|
<div class="cart-title">
|
|
<div></div>
|
|
<div style="margin: 0 8px">预约车</div>
|
|
<div>({{ amountNum }})</div>
|
|
</div>
|
|
|
|
<el-row class="cart-th">
|
|
<el-col :span="2">
|
|
<div>
|
|
<el-checkbox v-model="allChecked" @change="onChangeAll" :key="allKey">
|
|
全选
|
|
</el-checkbox>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<div>装备信息</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div>租期</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div>日租金/元</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div>天数</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div>数量</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div>总金额/元</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div>操作</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div class="cart-tbody" v-for="(item, index) in cardList" :key="index">
|
|
<el-row style="border-bottom: 1px solid #ccc">
|
|
<el-col :span="1">
|
|
<div style="text-align: center">
|
|
<el-checkbox
|
|
v-model="item.isChecked"
|
|
:key="index"
|
|
@change="onChangeCompany($event, index, item)"
|
|
>
|
|
</el-checkbox>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="22" class="cart-user-info">
|
|
<div>{{ item.companyPersonPhoneKey.companyName }}</div>
|
|
<div class="user-name">{{ item.companyPersonPhoneKey.person }}</div>
|
|
<div class="user-phone">{{ item.companyPersonPhoneKey.personPhone }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row class="cart-list" v-for="(goods, j) in item.devInfoVoList" :key="goods.id">
|
|
<el-col :span="1">
|
|
<div style="text-align: center">
|
|
<el-checkbox
|
|
v-model="goods.isChecked"
|
|
@change="onChangeGoods(index)"
|
|
:key="goods.id"
|
|
>
|
|
</el-checkbox>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="9" class="goods-info">
|
|
<img
|
|
src="https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1"
|
|
alt=""
|
|
/>
|
|
<div class="goods-code">
|
|
<div style="font-size: 14px; font-weight: bold">{{ goods.deviceName }}</div>
|
|
<div>装备编号： {{ goods.code }}</div>
|
|
<div>装备型号： {{ goods.typeName }}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="lease-date">
|
|
<div v-if="goods.rentBeginTime && goods.rentEndTime">
|
|
{{ goods.rentBeginTime }}-{{ goods.rentEndTime }}
|
|
</div>
|
|
<el-date-picker
|
|
style="width: 100px; margin-top: 10px"
|
|
v-model="goods.lease_date"
|
|
type="daterange"
|
|
size="small"
|
|
value-format="YYYY-MM-DD"
|
|
@change="onLeaseDateChange($event, goods)"
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="red-font">
|
|
{{ goods.dayLeasePrice }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="red-font" style="color: #0062ff">
|
|
{{ goods.days }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div>
|
|
<el-input-number
|
|
v-model="goods.num"
|
|
style="width: 100px"
|
|
:min="1"
|
|
:max="goods.deviceCount"
|
|
size="small"
|
|
/>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div class="red-font">
|
|
{{ goods.num * goods.days * goods.dayLeasePrice }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div>
|
|
<!-- <el-button
|
|
link
|
|
@click="onDeleteGoods(goods.id)"
|
|
style="color: #ff4800; font-weight: bold"
|
|
>
|
|
删除
|
|
</el-button> -->
|
|
|
|
<el-popconfirm
|
|
width="220"
|
|
:icon="InfoFilled"
|
|
icon-color="#626AEF"
|
|
title="确定删除该条预约车记录吗？"
|
|
@confirm="onDeleteGoods(goods.id)"
|
|
>
|
|
<template #reference>
|
|
<el-button link style="color: #ff4800; font-weight: bold">
|
|
删除</el-button
|
|
>
|
|
</template>
|
|
<template #actions="{ confirm }">
|
|
<el-button size="small">取消</el-button>
|
|
<el-button type="danger" size="small" @click="confirm()">
|
|
确定
|
|
</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<div class="protocol-handle" v-if="cardList.length > 0">
|
|
<el-row style="display: flex; align-items: center">
|
|
<el-col :span="16">
|
|
<div class="checkbox-container">
|
|
<el-checkbox v-model="protocolChecked">
|
|
我已阅读并同意签署
|
|
<a href="#"> 《xxxx公司租赁服务合同》 </a>
|
|
</el-checkbox>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div>
|
|
共：<span style="color: #ff4800; font-weight: bold">{{
|
|
amountDevice
|
|
}}</span>
|
|
件装备
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<div class="red-font">
|
|
订单总金额：<span style="color: #ff4800; font-weight: bold"
|
|
>{{ orderAmountPice }} 元</span
|
|
>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="2">
|
|
<div style="text-align: right">
|
|
<el-button
|
|
size="small"
|
|
@click="onCartSubmit"
|
|
style="padding: 6px 24px; background-color: #1abc9c; color: #fff"
|
|
>提交</el-button
|
|
>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
<FooterInfo />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Header from '../../components/header/index.vue'
|
|
import FooterInfo from '../../components/FooterInfo/index.vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import {
|
|
getBookCarDetailsApi,
|
|
submitBookCarApi,
|
|
deleteCartByIdApi,
|
|
} from '../../http/api/cart/index'
|
|
import moment, { max } from 'moment'
|
|
import { InfoFilled } from '@element-plus/icons-vue'
|
|
|
|
const protocolChecked = ref<boolean>(false)
|
|
const allKey = ref(0)
|
|
|
|
const cardList = ref<any>([])
|
|
|
|
const getBookCarDetailsData = async () => {
|
|
const res: any = await getBookCarDetailsApi()
|
|
|
|
cardList.value = []
|
|
cardList.value = JSON.parse(JSON.stringify(res.data))
|
|
cardList.value.forEach((e: any) => {
|
|
e.isChecked = false
|
|
|
|
e.devInfoVoList.forEach((j: any) => {
|
|
j.days = 0
|
|
j.num = 1
|
|
j.costs = 0
|
|
j.rentBeginTime = ''
|
|
j.rentEndTime = ''
|
|
})
|
|
})
|
|
|
|
console.log(cardList.value, '***********')
|
|
// console.log(res, '购物车详情')
|
|
}
|
|
|
|
onMounted(() => {
|
|
getBookCarDetailsData()
|
|
})
|
|
|
|
// 日期change事件
|
|
const onLeaseDateChange = (e: any, item: any) => {
|
|
console.log(e, '*****')
|
|
if (!e) {
|
|
item.rentBeginTime = ''
|
|
item.rentEndTime = ''
|
|
item.days = 0
|
|
} else {
|
|
item.rentBeginTime = e[0]
|
|
item.rentEndTime = e[1]
|
|
item.days = moment(e[1]).diff(e[0], 'day')
|
|
}
|
|
}
|
|
|
|
// 删除按钮
|
|
const onDeleteGoods = async (id: number | string) => {
|
|
const res: any = await deleteCartByIdApi({ id })
|
|
if (res.code == 200) {
|
|
ElMessage({
|
|
showClose: false,
|
|
message: '删除成功',
|
|
type: 'success',
|
|
})
|
|
|
|
getBookCarDetailsData()
|
|
}
|
|
}
|
|
|
|
// 全选change事件
|
|
const onChangeAll = (e: boolean) => {
|
|
cardList.value.forEach((item: any) => {
|
|
item.isChecked = e
|
|
item.devInfoVoList.forEach((j: any) => {
|
|
j.isChecked = e
|
|
})
|
|
})
|
|
}
|
|
|
|
// 公司全选事件
|
|
const onChangeGoods = (index: number) => {
|
|
cardList.value[index].isChecked = cardList.value[index].devInfoVoList.every(
|
|
(e: any) => e.isChecked === true,
|
|
)
|
|
}
|
|
// 公司全选事件
|
|
const onChangeCompany = (e: boolean, index: number, item: any) => {
|
|
cardList.value[index].devInfoVoList.every((j) => (j.isChecked = e))
|
|
}
|
|
|
|
// 计算所有装备
|
|
const amountNum = computed(() => {
|
|
let amountNum = 0
|
|
cardList.value.forEach((e: any) => {
|
|
amountNum = e.devInfoVoList.length + amountNum
|
|
})
|
|
return amountNum
|
|
})
|
|
// 计算全选按钮的选中状态
|
|
const allChecked = computed(() => {
|
|
if (cardList.value.length < 1) {
|
|
return false
|
|
} else {
|
|
return cardList.value.every((e: any) => e.isChecked === true)
|
|
}
|
|
})
|
|
|
|
// 已勾选的装备数量
|
|
const amountDevice = computed(() => {
|
|
let amountNum = 0
|
|
cardList.value.forEach((e: any) => {
|
|
e.devInfoVoList.forEach((g: any) => {
|
|
if (g.isChecked) {
|
|
amountNum++
|
|
}
|
|
})
|
|
})
|
|
return amountNum
|
|
})
|
|
// 已勾选的装备数量
|
|
const amountDeviceList = computed(() => {
|
|
let selectList: any = []
|
|
cardList.value.forEach((e: any) => {
|
|
e.devInfoVoList.forEach((g: any) => {
|
|
if (g.isChecked) {
|
|
selectList.push(g)
|
|
}
|
|
})
|
|
})
|
|
return selectList
|
|
})
|
|
|
|
// 计算订单总价格
|
|
const orderAmountPice = computed(() => {
|
|
let orderAmountPice = 0
|
|
cardList.value.forEach((e: any) => {
|
|
e.devInfoVoList.forEach((g: any) => {
|
|
if (g.isChecked) {
|
|
orderAmountPice = g.num * g.dayLeasePrice * g.days + orderAmountPice
|
|
}
|
|
})
|
|
})
|
|
return orderAmountPice
|
|
})
|
|
|
|
// 提交按钮
|
|
const onCartSubmit = async () => {
|
|
ElMessage.closeAll()
|
|
if (amountDevice.value < 1) {
|
|
ElMessage({
|
|
showClose: false,
|
|
message: '请选择装备',
|
|
type: 'error',
|
|
})
|
|
return
|
|
}
|
|
if (!protocolChecked.value) {
|
|
ElMessage({
|
|
showClose: false,
|
|
message: '请阅读公司合同',
|
|
type: 'error',
|
|
})
|
|
return
|
|
}
|
|
|
|
// 组装参数
|
|
const detailsList = amountDeviceList.value.map((e: any) => {
|
|
return {
|
|
maId: e.maId,
|
|
id: e.id,
|
|
rentBeginTime: e.rentBeginTime + ' ' + '00:00:00',
|
|
rentEndTime: e.rentEndTime + ' ' + '00:00:00',
|
|
manageType: e.manageType,
|
|
days: e.days,
|
|
num: e.num,
|
|
costs: e.num * e.days * e.dayLeasePrice,
|
|
}
|
|
})
|
|
|
|
const submitParams = {
|
|
cost: orderAmountPice.value,
|
|
detailsList,
|
|
}
|
|
|
|
const res: any = await submitBookCarApi(submitParams)
|
|
if (res.code === 200) {
|
|
ElMessage({
|
|
showClose: false,
|
|
message: '提交成功',
|
|
type: 'success',
|
|
})
|
|
allKey.value++
|
|
|
|
getBookCarDetailsData()
|
|
}
|
|
// console.log(res, '预约车提交结果')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 10px;
|
|
background: #eeeff6;
|
|
font-size: 14px;
|
|
|
|
.cart-title {
|
|
margin-top: 20px;
|
|
padding: 10px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.cart-title div:first-child {
|
|
width: 5px;
|
|
height: 20px;
|
|
background-color: #4fabfe;
|
|
}
|
|
|
|
.cart-th {
|
|
margin: 15px 0;
|
|
div {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.cart-tbody {
|
|
background: #fff;
|
|
padding: 8px 12px;
|
|
margin: 10px;
|
|
|
|
.cart-user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
|
|
.user-name,
|
|
.user-phone {
|
|
padding: 3px 18px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.user-name {
|
|
margin-left: 20px;
|
|
border-right: none;
|
|
}
|
|
}
|
|
|
|
.cart-list {
|
|
margin: 15px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
div {
|
|
text-align: center;
|
|
}
|
|
|
|
.goods-info {
|
|
display: flex;
|
|
align-content: center;
|
|
|
|
img {
|
|
width: 160px;
|
|
height: 100px;
|
|
}
|
|
|
|
.goods-code {
|
|
margin-left: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
|
|
div {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lease-date {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.red-font {
|
|
color: #ff4800;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.protocol-handle {
|
|
background: #fff;
|
|
padding: 8px 12px;
|
|
margin: 10px;
|
|
font-size: 13px;
|
|
|
|
.checkbox-container a {
|
|
color: #ff4800;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
</style>
|