购物车
This commit is contained in:
parent
2d3c0796a4
commit
4f9c448a9a
|
|
@ -4,7 +4,7 @@
|
|||
<ul class="item-details">
|
||||
<li style="margin: 10px 0">
|
||||
<span class="item_1_span"> {{ name }} </span>
|
||||
<span>（{{ typeName }}）</span>
|
||||
<!-- <span>（{{ typeName }}）</span> -->
|
||||
<span class="item_2_span">
|
||||
{{ manageMode == '0' ? statusText : `在库数量: ${deviceCount}` }}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -29,21 +29,6 @@
|
|||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="proCode" label="使用项目">
|
||||
<el-select
|
||||
v-model="queryForm.proCode"
|
||||
placeholder="请选择使用项目"
|
||||
style="width: 240px"
|
||||
@change="onChangeProject"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in projectList"
|
||||
:key="item.proCode"
|
||||
:label="item.proName"
|
||||
:value="item.proCode"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目类型" prop="proTypeName">
|
||||
<el-input
|
||||
v-model="queryForm.proTypeName"
|
||||
|
|
@ -84,12 +69,60 @@
|
|||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="proCode" label="使用项目">
|
||||
<el-select
|
||||
v-model="queryForm.proCode"
|
||||
placeholder="请选择使用项目"
|
||||
style="width: 240px"
|
||||
@change="onChangeProject"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in projectList"
|
||||
:key="item.proCode"
|
||||
:label="item.proName"
|
||||
:value="item.proCode"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item prop="address" label="收货地址">
|
||||
<el-select
|
||||
v-model="queryForm.address"
|
||||
placeholder="请选择收货地址"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 616px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in addressList"
|
||||
:label="item.addressName"
|
||||
:value="item.addressName"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
style="margin-top: 10px"
|
||||
@click="handleAddress"
|
||||
>新增地址</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<el-row class="cart-th">
|
||||
<el-col :span="2">
|
||||
<div>
|
||||
<el-checkbox v-model="allChecked" @change="onChangeAll" :key="allKey" style="color: #fff">
|
||||
<el-checkbox
|
||||
v-model="allChecked"
|
||||
@change="onChangeAll"
|
||||
:key="allKey"
|
||||
style="color: #fff"
|
||||
>
|
||||
全选
|
||||
</el-checkbox>
|
||||
</div>
|
||||
|
|
@ -112,13 +145,13 @@
|
|||
<!-- <el-col :span="2">-->
|
||||
<!-- <div>总金额/元</div>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :span="2">
|
||||
<el-col :span="3">
|
||||
<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-row style="border-bottom: 1px solid #ccc">
|
||||
<el-col :span="1">
|
||||
<div style="text-align: center">
|
||||
<el-checkbox
|
||||
|
|
@ -131,13 +164,13 @@
|
|||
</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>
|
||||
<div class="user-name">姓名：{{ item.companyPersonPhoneKey.person }}</div>
|
||||
<div class="user-phone">手机号：{{ item.companyPersonPhoneKey.personPhone }}</div>
|
||||
</el-col>
|
||||
</el-row> -->
|
||||
</el-row>
|
||||
|
||||
<el-row class="cart-list" v-for="(goods, j) in item.devInfoVoList" :key="goods.id">
|
||||
<el-col :span="1">
|
||||
<el-col :span="2">
|
||||
<div style="text-align: center">
|
||||
<el-checkbox
|
||||
v-model="goods.isChecked"
|
||||
|
|
@ -164,7 +197,7 @@
|
|||
<div>装备型号： {{ goods.typeName }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-col :span="4">
|
||||
<div class="lease-date">
|
||||
<div style="margin-bottom: 8px">
|
||||
{{ goods.rentBeginTime }}
|
||||
|
|
@ -206,7 +239,7 @@
|
|||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<el-col :span="3">
|
||||
<div>
|
||||
<el-popconfirm
|
||||
width="220"
|
||||
|
|
@ -246,7 +279,7 @@
|
|||
</div>
|
||||
|
||||
<div class="protocol-handle" v-if="cardList.length > 0">
|
||||
<el-row style="margin: 15px 0">
|
||||
<!-- <el-row style="margin: 15px 0">
|
||||
<el-col :span="22">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item :title="addressTitle" name="1">
|
||||
|
|
@ -289,7 +322,7 @@
|
|||
>新增地址</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row> -->
|
||||
<el-row style="display: flex; align-items: center">
|
||||
<el-col :span="16">
|
||||
<!-- <div class="checkbox-container">
|
||||
|
|
@ -315,7 +348,7 @@
|
|||
<!-- >-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :span="2">
|
||||
<el-col :span="5">
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
size="small"
|
||||
|
|
@ -522,9 +555,11 @@ const queryForm: any = reactive({
|
|||
proProvince: '', // 项目所在省
|
||||
proCity: '', // 项目所在市
|
||||
proCounty: '', // 项目所在区/县
|
||||
address: '', // 收货地址
|
||||
})
|
||||
const queryFormRules = reactive({
|
||||
proCode: [{ required: true, message: '请选择使用项目', trigger: 'blur' }],
|
||||
address: [{ required: true, message: '请选择收货地址', trigger: 'blur' }],
|
||||
})
|
||||
const projectList: any = ref([])
|
||||
|
||||
|
|
@ -699,8 +734,8 @@ const onChangeGoods = (index: number) => {
|
|||
}
|
||||
// 公司全选事件
|
||||
const onChangeCompany = (e: boolean, index: number, item: any) => {
|
||||
cardList.value[index].devInfoVoList.every((j: any) => {
|
||||
if (j.maStatus == 1) {
|
||||
cardList.value[index].devInfoVoList.forEach((j: any) => {
|
||||
if (j.maStatus === 1) {
|
||||
j.isChecked = e
|
||||
}
|
||||
})
|
||||
|
|
@ -794,7 +829,7 @@ const onCartSubmit = debounce(async () => {
|
|||
// } catch (error) {}
|
||||
// if (isRead) return
|
||||
|
||||
if (addressTitle.value === '请选择收货地址') {
|
||||
if (!queryForm.address) {
|
||||
ElMessageBox.alert('请选择收货地址', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
type: 'error',
|
||||
|
|
@ -854,7 +889,8 @@ const onCartSubmit = debounce(async () => {
|
|||
paramsList[index] = {
|
||||
cost: 0,
|
||||
detailsList: itemsArray,
|
||||
address: addressTitle.value.split('：')[1],
|
||||
// address: addressTitle.value.split('：')[1],
|
||||
address: queryForm.address,
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -1121,7 +1157,7 @@ isShowPriceFun()
|
|||
.cart-th {
|
||||
padding: 15px 0;
|
||||
font-size: 18px;
|
||||
background-color: #58B99E;
|
||||
background-color: #58b99e;
|
||||
div {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
|
|
@ -1129,12 +1165,18 @@ isShowPriceFun()
|
|||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
.el-col {
|
||||
border-right: 1px solid #fff;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-tbody {
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
/* padding: 8px 12px; */
|
||||
margin: 10px 0;
|
||||
|
||||
.cart-user-info {
|
||||
display: flex;
|
||||
|
|
@ -1143,7 +1185,7 @@ isShowPriceFun()
|
|||
.user-name,
|
||||
.user-phone {
|
||||
padding: 3px 18px;
|
||||
border: 1px solid #ccc;
|
||||
/* border: 1px solid #ccc; */
|
||||
}
|
||||
|
||||
.user-name {
|
||||
|
|
@ -1156,6 +1198,27 @@ isShowPriceFun()
|
|||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 10px 0;
|
||||
background: #fafafa;
|
||||
|
||||
.el-col {
|
||||
border-right: 1px solid #ccc;
|
||||
// 第一个和最后一个不加边框
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
height: 103px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// 第二个靠左展示
|
||||
&:nth-child(2) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
|
|
@ -1202,6 +1265,7 @@ isShowPriceFun()
|
|||
|
||||
div {
|
||||
text-align: left;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1222,8 +1286,8 @@ isShowPriceFun()
|
|||
|
||||
.protocol-handle {
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
/* padding: 8px 12px; */
|
||||
margin: 18px 0;
|
||||
|
||||
.checkbox-container a {
|
||||
color: #ff4800;
|
||||
|
|
|
|||
|
|
@ -30,21 +30,6 @@
|
|||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="proCode" label="使用项目">
|
||||
<el-select
|
||||
v-model="queryForm.proCode"
|
||||
placeholder="请选择使用项目"
|
||||
style="width: 240px"
|
||||
@change="onChangeProject"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in projectList"
|
||||
:key="item.proCode"
|
||||
:label="item.proName"
|
||||
:value="item.proCode"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="项目类型" prop="proTypeName">
|
||||
<el-input
|
||||
v-model="queryForm.proTypeName"
|
||||
|
|
@ -85,6 +70,40 @@
|
|||
style="width: 240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="proCode" label="使用项目">
|
||||
<el-select
|
||||
v-model="queryForm.proCode"
|
||||
placeholder="请选择使用项目"
|
||||
style="width: 240px"
|
||||
@change="onChangeProject"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in projectList"
|
||||
:key="item.proCode"
|
||||
:label="item.proName"
|
||||
:value="item.proCode"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="0">
|
||||
<el-form-item prop="address" label="收货地址">
|
||||
<el-select
|
||||
v-model="queryForm.address"
|
||||
placeholder="请选择收货地址"
|
||||
clearable
|
||||
filterable
|
||||
style="width: 616px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in addressList"
|
||||
:label="item.addressName"
|
||||
:value="item.addressName"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<el-row class="cart-th">
|
||||
|
|
@ -98,7 +117,7 @@
|
|||
<el-col :span="8">
|
||||
<div>装备信息</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-col :span="5">
|
||||
<div>租期</div>
|
||||
</el-col>
|
||||
<el-col :span="2" v-if="isShowPrice">
|
||||
|
|
@ -153,12 +172,12 @@
|
|||
<div>装备型号： {{ item.typeName }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-col :span="5">
|
||||
<div class="lease-date">
|
||||
<!-- <div>{{ item.lease_date_string }}</div> -->
|
||||
<div style="margin-bottom: 8px">
|
||||
{{ item.rentBeginTime }}
|
||||
<span v-if="item.rentBeginTime && item.rentEndTime">-</span>
|
||||
<span v-if="item.rentBeginTime && item.rentEndTime">~</span>
|
||||
{{ item.rentEndTime }}
|
||||
</div>
|
||||
<!-- <el-date-picker
|
||||
|
|
@ -207,7 +226,7 @@
|
|||
<!-- </div>-->
|
||||
<!-- </el-col>-->
|
||||
<el-col :span="3">
|
||||
<div style="margin-left: 30px">
|
||||
<div>
|
||||
<el-button
|
||||
@click="onDeleteGoods(index)"
|
||||
link
|
||||
|
|
@ -221,7 +240,7 @@
|
|||
</div>
|
||||
|
||||
<div class="protocol-handle">
|
||||
<el-row style="margin: 15px 0">
|
||||
<!-- <el-row style="margin: 15px 0">
|
||||
<el-col :span="24">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item :title="addressTitle" name="1">
|
||||
|
|
@ -255,7 +274,7 @@
|
|||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row> -->
|
||||
<el-row style="display: flex; align-items: center">
|
||||
<el-col :span="16">
|
||||
<!-- <div class="checkbox-container">-->
|
||||
|
|
@ -362,9 +381,11 @@ const queryForm: any = reactive({
|
|||
proProvince: '', // 项目所在省
|
||||
proCity: '', // 项目所在市
|
||||
proCounty: '', // 项目所在区/县
|
||||
address: '', // 收货地址
|
||||
})
|
||||
const queryFormRules = reactive({
|
||||
proCode: [{ required: true, message: '请选择使用项目', trigger: 'blur' }],
|
||||
address: [{ required: true, message: '请选择收货地址', trigger: 'blur' }],
|
||||
})
|
||||
const projectList: any = ref([])
|
||||
|
||||
|
|
@ -525,7 +546,7 @@ const onCartSubmit = debounce(async () => {
|
|||
// return
|
||||
// }
|
||||
|
||||
if (addressTitle.value === '请选择收货地址') {
|
||||
if (!queryForm.address) {
|
||||
ElMessage({
|
||||
showClose: false,
|
||||
message: '请选择收货地址',
|
||||
|
|
@ -549,10 +570,12 @@ const onCartSubmit = debounce(async () => {
|
|||
|
||||
const submitParams = {
|
||||
cost: orderAmountPice.value,
|
||||
address: addressTitle.value.split('：')[1],
|
||||
// address: addressTitle.value.split('：')[1],
|
||||
address: queryForm.address,
|
||||
detailsList: [submitInfo],
|
||||
}
|
||||
// console.log('submitParams', submitParams)
|
||||
// console.log('submitParams--提交', submitParams)
|
||||
|
||||
const res: any = await submitBookCarApi({
|
||||
...queryForm,
|
||||
orderInfoDto: [submitParams],
|
||||
|
|
@ -737,12 +760,18 @@ isShowPriceFun()
|
|||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
.el-col {
|
||||
border-right: 1px solid #fff;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-tbody {
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
/* padding: 8px 12px; */
|
||||
margin: 10px 0;
|
||||
|
||||
.cart-user-info {
|
||||
display: flex;
|
||||
|
|
@ -765,7 +794,21 @@ isShowPriceFun()
|
|||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// font-size: 13px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 10px 0;
|
||||
background: #fafafa;
|
||||
|
||||
.el-col {
|
||||
border-right: 1px solid #ccc;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
height: 103px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -787,6 +830,7 @@ isShowPriceFun()
|
|||
|
||||
div {
|
||||
text-align: left;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue