491 lines
15 KiB
Vue
491 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"> 全选 </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"
|
|||
|
|
@change="onChangeCompany($event, index, item)"
|
|||
|
|
>
|
|||
|
|
</el-checkbox>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="22" class="cart-user-info">
|
|||
|
|
<div>{{ item.company_name }}</div>
|
|||
|
|
<div class="user-name">{{ item.user_name }}</div>
|
|||
|
|
<div class="user-phone">{{ item.user_phone }}</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row class="cart-list" v-for="(goods, j) in item.good_list" :key="j">
|
|||
|
|
<el-col :span="1">
|
|||
|
|
<div style="text-align: center">
|
|||
|
|
<el-checkbox v-model="goods.isChecked" @change="onChangeGoods(index)">
|
|||
|
|
</el-checkbox>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="9" class="goods-info">
|
|||
|
|
<img :src="goods.goods_pic" alt="" />
|
|||
|
|
<div class="goods-code">
|
|||
|
|
<div style="font-size: 14px; font-weight: bold">{{ goods.goods_name }}</div>
|
|||
|
|
<div>装备编号： {{ goods.goods_code }}</div>
|
|||
|
|
<div>装备型号： {{ goods.goods_type }}</div>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="4">
|
|||
|
|
<div class="lease-date">
|
|||
|
|
<div>{{ goods.lease_date_string }}</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.lease_pic }}
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="2">
|
|||
|
|
<div class="red-font" style="color: #0062ff">
|
|||
|
|
{{ goods.lease_day }}
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="2">
|
|||
|
|
<div>
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="goods.goods_num"
|
|||
|
|
style="width: 100px"
|
|||
|
|
:min="1"
|
|||
|
|
size="small"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="2">
|
|||
|
|
<div class="red-font">
|
|||
|
|
{{ goods.goods_num * goods.lease_pic * goods.lease_day }}
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="2">
|
|||
|
|
<div>
|
|||
|
|
<el-button
|
|||
|
|
@click="onDeleteGoods(j)"
|
|||
|
|
type="text"
|
|||
|
|
style="color: #ff4800; font-weight: bold"
|
|||
|
|
>
|
|||
|
|
删除
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="protocol-handle">
|
|||
|
|
<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 } from '../../http/api/cart/index'
|
|||
|
|
import moment from 'moment'
|
|||
|
|
|
|||
|
|
const protocolChecked = ref<boolean>(false)
|
|||
|
|
|
|||
|
|
const cardList = ref([
|
|||
|
|
{
|
|||
|
|
company_name: '安徽博诺斯有限公司',
|
|||
|
|
user_name: '王先生',
|
|||
|
|
user_phone: '18725632356',
|
|||
|
|
isChecked: false,
|
|||
|
|
good_list: [
|
|||
|
|
{
|
|||
|
|
goods_pic:
|
|||
|
|
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
|||
|
|
goods_name: 'W190挖掘机',
|
|||
|
|
goods_code: '995221_JHL',
|
|||
|
|
goods_type: '挖地型号996',
|
|||
|
|
lease_date: '',
|
|||
|
|
lease_pic: 300,
|
|||
|
|
lease_day: 1,
|
|||
|
|
goods_num: 0,
|
|||
|
|
totalAmount: 0,
|
|||
|
|
isChecked: false,
|
|||
|
|
lease_date_string: '',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
company_name: '安徽博诺斯有限公司',
|
|||
|
|
user_name: '王先生',
|
|||
|
|
user_phone: '18725632356',
|
|||
|
|
isChecked: false,
|
|||
|
|
good_list: [
|
|||
|
|
{
|
|||
|
|
goods_pic:
|
|||
|
|
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
|||
|
|
goods_name: 'W190挖掘机',
|
|||
|
|
goods_code: '995221_JHL',
|
|||
|
|
goods_type: '挖地型号996',
|
|||
|
|
lease_date: '',
|
|||
|
|
lease_pic: 300,
|
|||
|
|
lease_day: 0,
|
|||
|
|
goods_num: 0,
|
|||
|
|
totalAmount: 0,
|
|||
|
|
isChecked: false,
|
|||
|
|
lease_date_string: '',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
goods_pic:
|
|||
|
|
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
|||
|
|
goods_name: 'W190挖掘机',
|
|||
|
|
goods_code: '995221_JHL',
|
|||
|
|
goods_type: '挖地型号996',
|
|||
|
|
lease_date: '',
|
|||
|
|
lease_pic: 300,
|
|||
|
|
lease_day: 0,
|
|||
|
|
goods_num: 0,
|
|||
|
|
totalAmount: 0,
|
|||
|
|
isChecked: false,
|
|||
|
|
lease_date_string: '',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
goods_pic:
|
|||
|
|
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
|||
|
|
goods_name: 'W190挖掘机',
|
|||
|
|
goods_code: '995221_JHL',
|
|||
|
|
goods_type: '挖地型号996',
|
|||
|
|
lease_date: '',
|
|||
|
|
lease_pic: 300,
|
|||
|
|
lease_day: 0,
|
|||
|
|
goods_num: 0,
|
|||
|
|
totalAmount: 0,
|
|||
|
|
isChecked: false,
|
|||
|
|
lease_date_string: '',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
company_name: '安徽博诺斯有限公司',
|
|||
|
|
user_name: '王先生',
|
|||
|
|
user_phone: '18725632356',
|
|||
|
|
isChecked: false,
|
|||
|
|
good_list: [
|
|||
|
|
{
|
|||
|
|
goods_pic:
|
|||
|
|
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
|||
|
|
goods_name: 'W190挖掘机',
|
|||
|
|
goods_code: '995221_JHL',
|
|||
|
|
goods_type: '挖地型号996',
|
|||
|
|
lease_date: '',
|
|||
|
|
lease_pic: 300,
|
|||
|
|
lease_day: 0,
|
|||
|
|
goods_num: 0,
|
|||
|
|
totalAmount: 0,
|
|||
|
|
isChecked: false,
|
|||
|
|
lease_date_string: '',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
goods_pic:
|
|||
|
|
'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
|
|||
|
|
goods_name: 'W190挖掘机',
|
|||
|
|
goods_code: '995221_JHL',
|
|||
|
|
goods_type: '挖地型号996',
|
|||
|
|
lease_date: '',
|
|||
|
|
lease_pic: 300,
|
|||
|
|
lease_day: 0,
|
|||
|
|
goods_num: 0,
|
|||
|
|
totalAmount: 0,
|
|||
|
|
isChecked: false,
|
|||
|
|
lease_date_string: '',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const getBookCarDetailsData = async () => {
|
|||
|
|
const res = await getBookCarDetailsApi()
|
|||
|
|
console.log(res, '购物车详情')
|
|||
|
|
}
|
|||
|
|
getBookCarDetailsData()
|
|||
|
|
// 日期change事件
|
|||
|
|
const onLeaseDateChange = (e: any, item: any) => {
|
|||
|
|
item.lease_date_string = `${e[0]}至${e[1]}`
|
|||
|
|
item.lease_day = moment(e[1]).diff(e[0], 'day')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除按钮
|
|||
|
|
const onDeleteGoods = (index: number) => {
|
|||
|
|
console.log('删除---', index)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 全选change事件
|
|||
|
|
const onChangeAll = (e: boolean) => {
|
|||
|
|
cardList.value.forEach((item) => {
|
|||
|
|
item.isChecked = e
|
|||
|
|
item.good_list.forEach((j) => {
|
|||
|
|
j.isChecked = e
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 公司全选事件
|
|||
|
|
const onChangeGoods = (index: number) => {
|
|||
|
|
cardList.value[index].isChecked = cardList.value[index].good_list.every(
|
|||
|
|
(e) => e.isChecked === true,
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
// 公司全选事件
|
|||
|
|
const onChangeCompany = (e: boolean, index: number, item: any) => {
|
|||
|
|
cardList.value[index].good_list.every((j) => (j.isChecked = e))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算所有装备
|
|||
|
|
const amountNum = computed(() => {
|
|||
|
|
let amountNum = 0
|
|||
|
|
cardList.value.forEach((e) => {
|
|||
|
|
amountNum = e.good_list.length + amountNum
|
|||
|
|
})
|
|||
|
|
return amountNum
|
|||
|
|
})
|
|||
|
|
// 计算全选按钮的选中状态
|
|||
|
|
const allChecked = computed(() => {
|
|||
|
|
return cardList.value.every((e) => e.isChecked === true)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 已勾选的所有装备
|
|||
|
|
const amountDevice = computed(() => {
|
|||
|
|
let amountNum = 0
|
|||
|
|
cardList.value.forEach((e) => {
|
|||
|
|
e.good_list.forEach((g) => {
|
|||
|
|
if (g.isChecked) {
|
|||
|
|
amountNum++
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
return amountNum
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 计算订单总价格
|
|||
|
|
const orderAmountPice = computed(() => {
|
|||
|
|
let orderAmountPice = 0
|
|||
|
|
cardList.value.forEach((e) => {
|
|||
|
|
e.good_list.forEach((g) => {
|
|||
|
|
if (g.isChecked) {
|
|||
|
|
orderAmountPice = g.goods_num * g.lease_pic * g.lease_day + orderAmountPice
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
return orderAmountPice
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 提交按钮
|
|||
|
|
const onCartSubmit = () => {
|
|||
|
|
ElMessage.closeAll()
|
|||
|
|
if (!protocolChecked.value) {
|
|||
|
|
ElMessage({
|
|||
|
|
showClose: false,
|
|||
|
|
message: '请阅读公司合同',
|
|||
|
|
type: 'error',
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
console.log('提交订单')
|
|||
|
|
}
|
|||
|
|
</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>
|