样式等问题优化
This commit is contained in:
BianLzhaoMin
parent
031102bec8
commit
433c04463b
|
|
@ -13,6 +13,7 @@ declare module 'vue' {
|
|||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
|
||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||
|
|
@ -27,7 +28,6 @@ declare module 'vue' {
|
|||
ElEmpty: typeof import('element-plus/es')['ElEmpty']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElHeader: typeof import('element-plus/es')['ElHeader']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
|
|
@ -35,7 +35,6 @@ declare module 'vue' {
|
|||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
"@vitejs/plugin-vue-jsx": "^3.0.2",
|
||||
"@vue/tsconfig": "^0.4.0",
|
||||
"npm-run-all2": "^6.1.1",
|
||||
"postcss-px-to-viewport": "^1.1.1",
|
||||
"sass": "^1.32.13",
|
||||
"typescript": "~5.2.0",
|
||||
"unplugin-auto-import": "^0.17.1",
|
||||
|
|
@ -3917,6 +3918,17 @@
|
|||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-px-to-viewport": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz",
|
||||
"integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"object-assign": ">=4.0.1",
|
||||
"postcss": ">=5.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/process-nextick-args": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://repo.huaweicloud.com/repository/npm/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@
|
|||
"@vitejs/plugin-vue-jsx": "^3.0.2",
|
||||
"@vue/tsconfig": "^0.4.0",
|
||||
"npm-run-all2": "^6.1.1",
|
||||
"postcss-px-to-viewport": "^1.1.1",
|
||||
"sass": "^1.32.13",
|
||||
"typescript": "~5.2.0",
|
||||
"unplugin-auto-import": "^0.17.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-px-to-viewport': {
|
||||
viewportWidth: 1920, // 设计稿的视口宽度
|
||||
viewportHeight: 1080, // 设计稿的视口宽度
|
||||
viewportUnit: 'vw', // 希望使用的视口单位
|
||||
fontViewportUnit: 'vw', // 字体使用的视口单位
|
||||
unitPrecision: 5,
|
||||
propList: ['*'],
|
||||
selectorBlackList: ['.ignore'], // 需要忽略的CSS选择器
|
||||
minPixelValue: 1, // 小于或等于`1px`不转换为视口单位
|
||||
mediaQuery: false, // 允许在媒体查询中转换`px`
|
||||
selectorBlackList: [':root', 'el-'], // 排除 Element Plus 的类名
|
||||
// replace: true,
|
||||
exclude: [/node_modules\/element-plus/], // 排除 Element Plus 的样式文件
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<RouterView />
|
||||
</template>
|
||||
|
|
@ -29,4 +28,8 @@
|
|||
::-webkit-scrollbar-corner {
|
||||
background-color: transparent; /* 滚动条和内容区的角落部分，通常用于表格等 */
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,3 +21,9 @@ defineProps({
|
|||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-breadcrumb {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,56 +3,42 @@
|
|||
<template>
|
||||
<!-- 公共页脚 -->
|
||||
<div class="footer-container">
|
||||
<div class="wapper">
|
||||
<ul class="icon-info">
|
||||
<li>
|
||||
<span>正</span>
|
||||
<span>
|
||||
<i>正品行货</i>
|
||||
<i>品类齐全</i>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>透</span>
|
||||
<span>
|
||||
<i>阳光采购</i>
|
||||
<i>一站服务</i>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>快</span>
|
||||
<span>
|
||||
<i>轻松畅选</i>
|
||||
<i>租赁快捷</i>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>好</span>
|
||||
<span>
|
||||
<i>售后无忧</i>
|
||||
<i>精致服务</i>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- <ul class="mobile-info">
|
||||
<li>商城热线</li>
|
||||
<li>供应商入驻、开店、续费资讯：010-2345-1234</li>
|
||||
<li>供应商咨询：010-2345-1234</li>
|
||||
<li>采购商咨询：010-2345-1234</li>
|
||||
<li>互联网公司投诉意见：010-2345-1234</li>
|
||||
<li>
|
||||
工作时间：周一至周五 8:30-12：00
|
||||
14：00-17：30
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
<ul class="icon-info">
|
||||
<li>
|
||||
<span>正</span>
|
||||
<span>
|
||||
<i>正品行货</i>
|
||||
<i>品类齐全</i>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>透</span>
|
||||
<span>
|
||||
<i>阳光采购</i>
|
||||
<i>一站服务</i>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>快</span>
|
||||
<span>
|
||||
<i>轻松畅选</i>
|
||||
<i>租赁快捷</i>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>好</span>
|
||||
<span>
|
||||
<i>售后无忧</i>
|
||||
<i>精致服务</i>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.footer-container {
|
||||
margin-top: 40px;
|
||||
// margin-top: 40px;
|
||||
// height: 650px;
|
||||
border-top: 1px solid #979797;
|
||||
background: url('../../assets/img/home/2023_12_01_beijing2/beijing2.png') no-repeat;
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ const navMenuClick = (name: any) => {
|
|||
v-for="item in navMenuList"
|
||||
:key="item.name"
|
||||
@click="navMenuClick(item.routerName)"
|
||||
:class="{ active: route.meta.activeName === item.routerName }"
|
||||
:class="{ 'active-li': route.meta.activeName === item.routerName }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
|
|
@ -74,20 +74,23 @@ const navMenuClick = (name: any) => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.nav-menu {
|
||||
height: 43px;
|
||||
// height: 48px;
|
||||
padding: 6px 0;
|
||||
background-color: #f7f9fa;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
li {
|
||||
color: #7d7d7d;
|
||||
padding: 0 20px;
|
||||
border-right: 1px solid #7d7d7d;
|
||||
padding: 10px 20px;
|
||||
|
||||
// border-right: 1px solid #7d7d7d;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: #333333;
|
||||
color: #00a288;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -96,9 +99,11 @@ const navMenuClick = (name: any) => {
|
|||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #333333;
|
||||
.active-li {
|
||||
color: #00a288;
|
||||
font-weight: bold;
|
||||
background-color: #c9e7e5;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ defineProps({
|
|||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<span class="item_1_span"> {{ name }} </span>
|
||||
<!-- <span class="item_2_span"> 待租 </span> -->
|
||||
</li>
|
||||
<li style="color: #b6b6b6">{{ company }}</li>
|
||||
<li style="color: #b6b6b6">
|
||||
<li style="color: #b6b6b6; font-size: 14px">{{ company }}</li>
|
||||
<li style="color: #b6b6b6; font-size: 14px">
|
||||
<el-icon style="margin-right: 3px; color: #25ac9c"><PhoneFilled /></el-icon>
|
||||
{{ personPhone }}
|
||||
</li>
|
||||
|
|
@ -15,9 +15,9 @@
|
|||
|
||||
<div style="margin: 10px 0; padding-right: 15px; text-align: right">
|
||||
<span style="text-align: right; color: #ff4800">
|
||||
<i style="font-size: 10px">￥</i>
|
||||
<i style="margin: 0 6px; font-size: 17px; font-weight: bold">{{ price }}</i>
|
||||
<i style="font-size: 10px">/ 天</i>
|
||||
<i style="font-size: 14px">￥</i>
|
||||
<i style="margin: 0 6px; font-size: 18px; font-weight: bold">{{ price }}</i>
|
||||
<i style="font-size: 14px">/ 天</i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -103,7 +103,7 @@ const onHandelLessee = () => {
|
|||
}
|
||||
|
||||
.item_1_span {
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.item_2_span {
|
||||
|
|
@ -157,7 +157,7 @@ const onHandelLessee = () => {
|
|||
margin-top: 8px;
|
||||
.item {
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
|
||||
font-weight: 400;
|
||||
color: #005af2;
|
||||
padding: 2px 3px;
|
||||
|
|
@ -168,7 +168,7 @@ const onHandelLessee = () => {
|
|||
}
|
||||
.company {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
|
||||
font-weight: 400;
|
||||
color: #a5a4a4;
|
||||
line-height: 20px;
|
||||
|
|
@ -177,7 +177,6 @@ const onHandelLessee = () => {
|
|||
white-space: nowrap;
|
||||
}
|
||||
.price {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ff4800;
|
||||
margin-top: 20px;
|
||||
|
|
|
|||
|
|
@ -284,7 +284,7 @@ const isMyInfoPage = () => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
color: #6d6d6d;
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
.line {
|
||||
|
|
|
|||
|
|
@ -281,16 +281,7 @@ const onJumpUser = () => {
|
|||
<div class="header-item roles-check" @click="onRolesCheck" v-if="isShowLogout">
|
||||
<!-- <img src="../assets/img/home/star.png" alt="" /> -->
|
||||
<a style="display: flex; justify-content: center">
|
||||
<i
|
||||
style="
|
||||
background-color: #c9e7e5;
|
||||
color: #47c4ad;
|
||||
padding: 4px 6px;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
border-radius: 4px;
|
||||
"
|
||||
>
|
||||
<i class="lease-name">
|
||||
{{ isAdmin ? '管理方' : rolesName == 1 ? '出租方' : '承租方' }}
|
||||
</i>
|
||||
<!-- <el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon> -->
|
||||
|
|
@ -298,7 +289,7 @@ const onJumpUser = () => {
|
|||
|
||||
<div class="line"></div>
|
||||
|
||||
<div class="select-list" v-if="isRolesSelect">
|
||||
<div class="select-list" v-show="isRolesSelect">
|
||||
<div
|
||||
style="border-top-left-radius: 6px; border-top-right-radius: 6px"
|
||||
@click.stop="onSelectRoles(1)"
|
||||
|
|
@ -336,13 +327,13 @@ const onJumpUser = () => {
|
|||
|
||||
<!-- 中间logo 部分 -->
|
||||
<div class="logo-ipt-container">
|
||||
<div class="home-logo">
|
||||
<el-image
|
||||
style="width: 70%; margin-left: 100px; cursor: pointer"
|
||||
<div class="home-logo" @click="$router.push('/mall-view')">
|
||||
<!-- <el-image
|
||||
style="width: 70%; cursor: pointer"
|
||||
:src="imgSrc"
|
||||
fit="cover"
|
||||
@click="$router.push('/mall-view')"
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
<div class="home-search">
|
||||
<input
|
||||
|
|
@ -464,6 +455,8 @@ const onJumpUser = () => {
|
|||
|
||||
/* 头部个人信息部分 */
|
||||
.header-box {
|
||||
width: 1552px;
|
||||
margin: 0 auto;
|
||||
height: 37px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -475,8 +468,16 @@ const onJumpUser = () => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
color: #6d6d6d;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
||||
.lease-name {
|
||||
background-color: #c9e7e5;
|
||||
color: #47c4ad;
|
||||
padding: 4px 6px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.line {
|
||||
width: 1px;
|
||||
height: 15px;
|
||||
|
|
@ -510,11 +511,12 @@ const onJumpUser = () => {
|
|||
position: relative;
|
||||
}
|
||||
.roles-check .select-list {
|
||||
height: 50px;
|
||||
// height: 50px;
|
||||
// display: none;
|
||||
position: absolute;
|
||||
left: 1%;
|
||||
bottom: -46px;
|
||||
bottom: 0;
|
||||
transform: translateY(100%);
|
||||
width: 98%;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
|
|
@ -523,9 +525,9 @@ const onJumpUser = () => {
|
|||
transition: all 1s linear;
|
||||
|
||||
div {
|
||||
height: 25px;
|
||||
font-size: 14px;
|
||||
line-height: 25px;
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
|
@ -575,36 +577,48 @@ const onJumpUser = () => {
|
|||
|
||||
/* 中间logo 搜索框部分 */
|
||||
.logo-ipt-container {
|
||||
width: 1552px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #eeeff6;
|
||||
padding: 30px 0;
|
||||
box-sizing: content-box;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
// box-sizing: content-box;
|
||||
|
||||
// padding: 30px 0 60px 0;
|
||||
|
||||
.home-logo {
|
||||
width: 286px;
|
||||
height: 100%;
|
||||
// width: 286px;
|
||||
// height: 100%;
|
||||
width: 240px;
|
||||
height: 80px;
|
||||
background-color: orange;
|
||||
background: url('@/assets/img/logo.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.home-search {
|
||||
position: relative;
|
||||
width: 1000px;
|
||||
margin-left: 40px;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin: 0 20px;
|
||||
// width: 1000px;
|
||||
// margin-left: 40px;
|
||||
|
||||
.left-check-box {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 53px;
|
||||
width: 70px;
|
||||
width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 1px solid #3cb4a6;
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
color: #11806f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -612,8 +626,9 @@ const onJumpUser = () => {
|
|||
.check-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -100%;
|
||||
width: 70px;
|
||||
bottom: 0;
|
||||
transform: translateY(100%);
|
||||
width: 100px;
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
|
@ -622,9 +637,9 @@ const onJumpUser = () => {
|
|||
cursor: pointer;
|
||||
|
||||
div {
|
||||
height: 25px;
|
||||
font-size: 14px;
|
||||
line-height: 25px;
|
||||
height: 35px;
|
||||
// font-size: 14px;
|
||||
line-height: 35px;
|
||||
text-align: center;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
|
@ -637,7 +652,10 @@ const onJumpUser = () => {
|
|||
}
|
||||
|
||||
.cart-container {
|
||||
flex: 1;
|
||||
width: 130px;
|
||||
// background-color: orange;
|
||||
// height: 60px;
|
||||
// flex: 1;
|
||||
}
|
||||
|
||||
// img {
|
||||
|
|
@ -656,7 +674,7 @@ const onJumpUser = () => {
|
|||
line-height: 53px;
|
||||
color: #333;
|
||||
text-shadow: 0 0 0 #333;
|
||||
padding-left: 75px;
|
||||
padding-left: 110px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -137,13 +137,13 @@ table {
|
|||
}
|
||||
|
||||
#app {
|
||||
width: 100vw;
|
||||
/* width: 100vw; */
|
||||
/* height: 100vh; */
|
||||
background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%);
|
||||
}
|
||||
|
||||
.wapper {
|
||||
width: 1200px;
|
||||
width: 1552px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
<script setup lang="ts">
|
||||
import FooterInfo from '../components/FooterInfo/index.vue'
|
||||
import HeaderCom from '../layout/header.vue'
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
const locale = zhCn
|
||||
|
||||
const route = useRoute()
|
||||
// 判断是否是个人中心页面 如果是则隐藏页脚
|
||||
const isMyInfoPage = () => {
|
||||
if (route.path.indexOf('myuser') === -1) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<HeaderCom />
|
||||
<div class="container">
|
||||
<el-config-provider :locale="locale">
|
||||
<RouterView />
|
||||
</el-config-provider>
|
||||
</div>
|
||||
<FooterInfo v-if="isMyInfoPage()" />
|
||||
</div>
|
||||
|
||||
<!-- <FooterInfo /> -->
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border-radius: 30px;
|
||||
padding: 20px 30px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import FooterInfo from '../components/FooterInfo/index.vue'
|
||||
import HeaderCom from '../layout/header.vue'
|
||||
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
|
||||
const locale = zhCn
|
||||
|
||||
const route = useRoute()
|
||||
// 判断是否是个人中心页面 如果是则隐藏页脚
|
||||
const isMyInfoPage = () => {
|
||||
if (route.path.indexOf('myuser') === -1) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
|
@ -21,27 +10,31 @@ onMounted(() => {})
|
|||
<div class="app-container">
|
||||
<HeaderCom />
|
||||
<div class="container">
|
||||
<el-config-provider :locale="locale">
|
||||
<el-config-provider>
|
||||
<RouterView />
|
||||
</el-config-provider>
|
||||
</div>
|
||||
<FooterInfo v-if="isMyInfoPage()" />
|
||||
</div>
|
||||
|
||||
<!-- <FooterInfo /> -->
|
||||
<FooterInfo />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 1920px;
|
||||
height: auto;
|
||||
// height: 1080px;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
width: 1552px;
|
||||
background-color: pink;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border-radius: 30px;
|
||||
padding: 20px 30px;
|
||||
// padding: 20px 30px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
// overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,97 +1,100 @@
|
|||
<template>
|
||||
<div style="width: 100%; background-color: #f5f5f5">
|
||||
<Header class="wapper" />
|
||||
</div>
|
||||
<div class="container">
|
||||
<el-breadcrumb separator="/" class="primary-lease">
|
||||
<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 style="display: flex; flex-direction: column; height: 100vh">
|
||||
<div style="width: 100%; background-color: #f5f5f5">
|
||||
<Header class="wapper" />
|
||||
</div>
|
||||
<div class="container">
|
||||
<el-breadcrumb separator="/" class="primary-lease">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>预约车</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<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-title">
|
||||
<div></div>
|
||||
<div style="margin: 0 8px">预约车</div>
|
||||
<div>({{ amountNum }})</div>
|
||||
</div>
|
||||
|
||||
<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-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="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 :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>
|
||||
|
||||
<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="goods.picUrl" 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 style="margin-bottom: 8px">
|
||||
{{ goods.rentBeginTime }}
|
||||
<span v-if="goods.rentBeginTime && goods.rentEndTime">-</span>
|
||||
{{ goods.rentEndTime }}
|
||||
<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-date-picker
|
||||
<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="goods.picUrl" 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 style="margin-bottom: 8px">
|
||||
{{ goods.rentBeginTime }}
|
||||
<span v-if="goods.rentBeginTime && goods.rentEndTime">-</span>
|
||||
{{ goods.rentEndTime }}
|
||||
</div>
|
||||
|
||||
<!-- <el-date-picker
|
||||
style="width: 100px; margin-top: 10px"
|
||||
v-model="goods.lease_date"
|
||||
type="daterange"
|
||||
|
|
@ -101,46 +104,46 @@
|
|||
>
|
||||
</el-date-picker> -->
|
||||
|
||||
<CustomDatePickerButton
|
||||
:modelValue="goods.lease_date"
|
||||
:companyIndex="index"
|
||||
:goodsIndex="j"
|
||||
type="primary"
|
||||
size="large"
|
||||
placeholder="选择日期"
|
||||
@onLeaseDateChange="onLeaseDateChange"
|
||||
/>
|
||||
</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 || 1"
|
||||
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
|
||||
<CustomDatePickerButton
|
||||
:modelValue="goods.lease_date"
|
||||
:companyIndex="index"
|
||||
:goodsIndex="j"
|
||||
type="primary"
|
||||
size="large"
|
||||
placeholder="选择日期"
|
||||
@onLeaseDateChange="onLeaseDateChange"
|
||||
/>
|
||||
</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 || 1"
|
||||
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"
|
||||
|
|
@ -148,146 +151,147 @@
|
|||
删除
|
||||
</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>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<div class="checkbox-container">
|
||||
<el-checkbox v-model="item.protocolChecked">
|
||||
我已阅读并同意签署
|
||||
|
||||
<a @click.stop="handleViewWord(index)">
|
||||
《{{ item.companyPersonPhoneKey.companyName }}租赁服务合同》
|
||||
</a>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="protocol-handle" v-if="cardList.length > 0">
|
||||
<el-row style="margin: 15px 0">
|
||||
<el-col :span="24">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item :title="addressTitle" name="1">
|
||||
<template v-if="addressList.length > 0">
|
||||
<div
|
||||
:key="index"
|
||||
class="address-item"
|
||||
@click="onSelectAddress(item.addressName)"
|
||||
v-for="(item, index) in addressList"
|
||||
>
|
||||
{{ item.addressName }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div style="width: 100%; text-align: center; font-size: 14px">
|
||||
当前没有收货地址...
|
||||
<a
|
||||
style="
|
||||
color: #00a288;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
text-decoration: underline;
|
||||
"
|
||||
@click="onAddAddress"
|
||||
<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
|
||||
>
|
||||
点击新增
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="display: flex; align-items: center">
|
||||
<el-col :span="16">
|
||||
<!-- <div class="checkbox-container">
|
||||
</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>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<div class="checkbox-container">
|
||||
<el-checkbox v-model="item.protocolChecked">
|
||||
我已阅读并同意签署
|
||||
|
||||
<a @click.stop="handleViewWord(index)">
|
||||
《{{ item.companyPersonPhoneKey.companyName }}租赁服务合同》
|
||||
</a>
|
||||
</el-checkbox>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="protocol-handle" v-if="cardList.length > 0">
|
||||
<el-row style="margin: 15px 0">
|
||||
<el-col :span="24">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item :title="addressTitle" name="1">
|
||||
<template v-if="addressList.length > 0">
|
||||
<div
|
||||
:key="index"
|
||||
class="address-item"
|
||||
@click="onSelectAddress(item.addressName)"
|
||||
v-for="(item, index) in addressList"
|
||||
>
|
||||
{{ item.addressName }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div style="width: 100%; text-align: center; font-size: 14px">
|
||||
当前没有收货地址...
|
||||
<a
|
||||
style="
|
||||
color: #00a288;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
text-decoration: underline;
|
||||
"
|
||||
@click="onAddAddress"
|
||||
>
|
||||
点击新增
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="display: flex; align-items: center">
|
||||
<el-col :span="16">
|
||||
<!-- <div class="checkbox-container">
|
||||
<el-checkbox v-model="protocolChecked">
|
||||
我已阅读并同意签署
|
||||
|
||||
<a @click="handleViewWord"> 《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>
|
||||
</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: 12px 24px; background-color: #1abc9c; color: #fff"
|
||||
>提交</el-button
|
||||
>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<Empty v-if="cardList.length == 0" />
|
||||
</div>
|
||||
|
||||
<Empty v-if="cardList.length == 0" />
|
||||
<FooterInfo />
|
||||
|
||||
<!-- 租赁协议 -->
|
||||
<el-dialog
|
||||
v-model="dialogFormVisibleSettleWord"
|
||||
:title="settleWordTitle"
|
||||
width="50%"
|
||||
align-center
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<!-- <div style="display: flex; justify-content: center"> -->
|
||||
<!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
|
||||
<!-- </div> -->
|
||||
<div v-html="bookCarAgreement"></div>
|
||||
<div style="display: flex; justify-content: flex-end; margin-bottom: 10px">
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogFormVisibleSettleWord = false"
|
||||
>关 闭</el-button
|
||||
>
|
||||
<el-button @click="submitBtn" type="success"> 下载 </el-button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="mmm" style="height: 600px"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
<FooterInfo />
|
||||
|
||||
<!-- 租赁协议 -->
|
||||
<el-dialog
|
||||
v-model="dialogFormVisibleSettleWord"
|
||||
:title="settleWordTitle"
|
||||
width="50%"
|
||||
align-center
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<!-- <div style="display: flex; justify-content: center"> -->
|
||||
<!-- <img src="@/assets/img/zuLin.png" style="width: 100%; height: 600px" /> -->
|
||||
<!-- </div> -->
|
||||
<div v-html="bookCarAgreement"></div>
|
||||
<div style="display: flex; justify-content: flex-end; margin-bottom: 10px">
|
||||
<span class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogFormVisibleSettleWord = false"
|
||||
>关 闭</el-button
|
||||
>
|
||||
<el-button @click="submitBtn" type="success"> 下载 </el-button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="mmm" style="height: 600px"></div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -680,7 +684,7 @@ const dialogFormVisibleSettleWord: any = ref(false)
|
|||
//租赁服务合同
|
||||
const handleViewWord = async (index: any) => {
|
||||
// 组装参数
|
||||
const { companyName, companyId,personPhone } = cardList.value[index].companyPersonPhoneKey
|
||||
const { companyName, companyId, personPhone } = cardList.value[index].companyPersonPhoneKey
|
||||
let cost = 0
|
||||
let detailsList: any = []
|
||||
|
||||
|
|
@ -716,7 +720,7 @@ const handleViewWord = async (index: any) => {
|
|||
companyId,
|
||||
cost,
|
||||
detailsList,
|
||||
personPhone
|
||||
personPhone,
|
||||
}
|
||||
|
||||
console.log('查询参数', queryParams)
|
||||
|
|
@ -727,20 +731,18 @@ const handleViewWord = async (index: any) => {
|
|||
|
||||
settleWordTitle.value = '租赁服务合同'
|
||||
setTimeout(() => {
|
||||
const myDocxPreviewer = jsPreviewDocx.init(document.getElementById("mmm"));
|
||||
//传递要预览的文件地址即可
|
||||
myDocxPreviewer
|
||||
.preview(
|
||||
wordUrl.value
|
||||
)
|
||||
.then((res) => {
|
||||
console.log("预览完成");
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log('1111', wordUrl.value)
|
||||
console.log("预览失败", e);
|
||||
});
|
||||
}, 1000);
|
||||
const myDocxPreviewer = jsPreviewDocx.init(document.getElementById('mmm'))
|
||||
//传递要预览的文件地址即可
|
||||
myDocxPreviewer
|
||||
.preview(wordUrl.value)
|
||||
.then((res) => {
|
||||
console.log('预览完成')
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log('1111', wordUrl.value)
|
||||
console.log('预览失败', e)
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 下载合同为 Word 文件
|
||||
|
|
@ -748,7 +750,6 @@ const submitBtn = () => {
|
|||
window.location.href = wordUrl.value
|
||||
}
|
||||
|
||||
|
||||
// 获取收货地址
|
||||
const getReceiptGoodsAddress = async () => {
|
||||
const res: any = await getAddressListApi({})
|
||||
|
|
@ -779,19 +780,23 @@ getReceiptGoodsAddress()
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
min-height: 550px;
|
||||
// width: 1200px;
|
||||
width: 1552px;
|
||||
margin: 15px auto;
|
||||
flex: 1;
|
||||
// min-height: 550px;
|
||||
background: #eeeff6;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
padding: 20px 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
|
||||
.cart-title {
|
||||
margin-top: 20px;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
|
@ -804,6 +809,7 @@ getReceiptGoodsAddress()
|
|||
|
||||
.cart-th {
|
||||
margin: 15px 0;
|
||||
font-size: 18px;
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -817,7 +823,6 @@ getReceiptGoodsAddress()
|
|||
.cart-user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
|
||||
.user-name,
|
||||
.user-phone {
|
||||
|
|
@ -835,7 +840,7 @@ getReceiptGoodsAddress()
|
|||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -866,7 +871,6 @@ getReceiptGoodsAddress()
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.red-font {
|
||||
|
|
@ -880,7 +884,6 @@ getReceiptGoodsAddress()
|
|||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
font-size: 13px;
|
||||
|
||||
.checkbox-container a {
|
||||
color: #ff4800;
|
||||
|
|
|
|||
|
|
@ -334,18 +334,18 @@ onMounted(() => {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
background: #eeeff6;
|
||||
font-size: 14px;
|
||||
width: 1552px;
|
||||
margin: 15px auto;
|
||||
padding: 20px 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
|
||||
.cart-title {
|
||||
margin-top: 20px;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
|
@ -434,7 +434,7 @@ onMounted(() => {
|
|||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
font-size: 13px;
|
||||
font-size: 16px;
|
||||
|
||||
.checkbox-container a {
|
||||
color: #ff4800;
|
||||
|
|
@ -444,12 +444,13 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.device-info {
|
||||
width: 75%;
|
||||
// width: 75%;
|
||||
padding: 0 50px;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
|
||||
.baseInfo {
|
||||
width: 75%;
|
||||
// width: 100%;
|
||||
margin: 35px auto 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -458,6 +459,7 @@ onMounted(() => {
|
|||
|
||||
.equipInfo {
|
||||
display: flex;
|
||||
padding: 0 50px;
|
||||
|
||||
.left {
|
||||
margin-right: 5px;
|
||||
|
|
@ -480,7 +482,7 @@ onMounted(() => {
|
|||
margin-top: 10px;
|
||||
|
||||
.item {
|
||||
font-size: 13px;
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #005af2;
|
||||
|
|
@ -516,7 +518,7 @@ onMounted(() => {
|
|||
margin-bottom: 18px;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 600;
|
||||
color: #8e8e8e;
|
||||
|
|
@ -524,7 +526,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.value {
|
||||
font-size: 13px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
|
@ -747,4 +749,7 @@ onMounted(() => {
|
|||
left: 20px;
|
||||
}
|
||||
}
|
||||
.el-breadcrumb {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -101,9 +101,9 @@
|
|||
>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style="margin-left: 20px">
|
||||
<el-button
|
||||
class="item_btn applyFor primary-lease"
|
||||
class="primary-lease"
|
||||
type="primary"
|
||||
:disabled="
|
||||
pageData.isBookCar == 0 ||
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
</div>
|
||||
<div class="item" v-for="(v, i) in propertyNames" :key="i">
|
||||
<div class="label">{{ v.propertyName }}：</div>
|
||||
<div>
|
||||
<div class="value">
|
||||
{{ v.propertyValue }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1148,7 +1148,7 @@ const onAddCart = async () => {
|
|||
margin-top: 10px;
|
||||
|
||||
.item {
|
||||
font-size: 16px;
|
||||
// font-size: 16px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #005af2;
|
||||
|
|
@ -1166,7 +1166,7 @@ const onAddCart = async () => {
|
|||
}
|
||||
|
||||
.viewNnum {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #bcbcbc;
|
||||
|
|
@ -1184,7 +1184,7 @@ const onAddCart = async () => {
|
|||
margin-bottom: 18px;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 600;
|
||||
color: #8e8e8e;
|
||||
|
|
@ -1192,7 +1192,7 @@ const onAddCart = async () => {
|
|||
}
|
||||
|
||||
.value {
|
||||
font-size: 13px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
color: #333333;
|
||||
}
|
||||
|
|
@ -1207,7 +1207,7 @@ const onAddCart = async () => {
|
|||
height: 36px;
|
||||
line-height: 36px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -1241,7 +1241,7 @@ const onAddCart = async () => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
color: #acacac;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -1308,7 +1308,7 @@ const onAddCart = async () => {
|
|||
|
||||
.fonts {
|
||||
.name {
|
||||
font-size: 16px;
|
||||
// font-size: 16px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
|
|
@ -1319,7 +1319,7 @@ const onAddCart = async () => {
|
|||
display: flex;
|
||||
|
||||
.item {
|
||||
font-size: 12px;
|
||||
// font-size: 12px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #747373;
|
||||
|
|
@ -1384,7 +1384,7 @@ const onAddCart = async () => {
|
|||
.item {
|
||||
cursor: pointer;
|
||||
width: calc(100% / 3);
|
||||
font-size: 14px;
|
||||
// font-size: 16px;
|
||||
// font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 600;
|
||||
display: flex;
|
||||
|
|
@ -1392,13 +1392,15 @@ const onAddCart = async () => {
|
|||
|
||||
.label {
|
||||
color: #8e8e8e;
|
||||
width: 100px;
|
||||
width: 160px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
font-size: 16px;
|
||||
// font-family: 'fangsong';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -779,7 +779,6 @@ const onHandleDetails = (id: number | string) => {
|
|||
border-bottom: 1px solid #ccc;
|
||||
.choose {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
|
||||
.line {
|
||||
padding: 14px 0;
|
||||
|
|
@ -790,6 +789,7 @@ const onHandleDetails = (id: number | string) => {
|
|||
.label {
|
||||
// width: 100px;
|
||||
box-sizing: border-box;
|
||||
|
||||
// padding: 0 15px;
|
||||
// background: #f3f3f3;
|
||||
}
|
||||
|
|
@ -806,7 +806,8 @@ const onHandleDetails = (id: number | string) => {
|
|||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
color: #939393;
|
||||
font-size: 15px;
|
||||
// font-size: 15px;
|
||||
font-size: 17px;
|
||||
line-height: 25px;
|
||||
height: 25px;
|
||||
|
||||
|
|
@ -861,7 +862,7 @@ const onHandleDetails = (id: number | string) => {
|
|||
border-radius: 12px;
|
||||
padding: 10px 20px;
|
||||
|
||||
font-size: 17px;
|
||||
// font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #9d9d9d;
|
||||
margin-right: 10px;
|
||||
|
|
@ -905,7 +906,7 @@ const onHandleDetails = (id: number | string) => {
|
|||
|
||||
.class-container {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
color: #ccc;
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -145,8 +145,10 @@ const onSelectItem = (type: number) => {
|
|||
<ul class="left-nav">
|
||||
<!-- 左侧机械名称菜单按钮 -->
|
||||
<li class="left-filter" @click="onSelectOptions">
|
||||
{{ selectOptionsValue }}
|
||||
<el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
|
||||
<div>
|
||||
{{ selectOptionsValue }}
|
||||
<el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
|
||||
</div>
|
||||
|
||||
<div class="select-options" v-if="selectOptions">
|
||||
<div @click.stop="onSelectItem(1)">分类筛选</div>
|
||||
|
|
@ -382,14 +384,14 @@ const onSelectItem = (type: number) => {
|
|||
}
|
||||
.home-index-banner {
|
||||
background-color: #fff;
|
||||
padding: 20px 5px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
// padding: 20px 5px;
|
||||
// border-radius: 10px;
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
|
||||
.home-index {
|
||||
.home-goods {
|
||||
height: 500px;
|
||||
height: 700px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -407,7 +409,7 @@ const onSelectItem = (type: number) => {
|
|||
|
||||
.left-filter {
|
||||
margin-top: 10px;
|
||||
padding: 3px 0;
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
|
|
@ -419,20 +421,26 @@ const onSelectItem = (type: number) => {
|
|||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.select-options {
|
||||
position: absolute;
|
||||
width: 120%;
|
||||
left: 50%;
|
||||
bottom: -65px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
transform: translate(50%, 100%);
|
||||
// left: 50%;
|
||||
// bottom: -65px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
||||
transform: translateX(-50%);
|
||||
// transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
|
||||
div {
|
||||
padding: 8px 6px;
|
||||
padding: 10px 30px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
|
|
@ -452,12 +460,12 @@ const onSelectItem = (type: number) => {
|
|||
// padding-left: 50px;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
padding: 0 10px;
|
||||
// padding: 0 10px;
|
||||
color: #000;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
font-size: 16px !important;
|
||||
// font-size: 16px !important;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
|
@ -474,7 +482,7 @@ const onSelectItem = (type: number) => {
|
|||
display: none;
|
||||
top: 0;
|
||||
left: 270px;
|
||||
width: 1200px;
|
||||
width: 1242px;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
background-color: #fff;
|
||||
|
|
@ -486,18 +494,21 @@ const onSelectItem = (type: number) => {
|
|||
|
||||
li {
|
||||
// margin: 10px 0;
|
||||
padding: 10px 80px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// background: orange;
|
||||
|
||||
.second-name {
|
||||
width: 160px;
|
||||
// width: 160px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
span a {
|
||||
margin: 0 15px;
|
||||
font-size: 14px;
|
||||
margin: 0 30px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #333;
|
||||
&:hover {
|
||||
|
|
@ -526,6 +537,7 @@ const onSelectItem = (type: number) => {
|
|||
}
|
||||
|
||||
.right-content {
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
|
|
@ -533,6 +545,7 @@ const onSelectItem = (type: number) => {
|
|||
flex-direction: column;
|
||||
|
||||
.swiper-img {
|
||||
margin-top: 20px;
|
||||
flex: 1;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,92 +1,95 @@
|
|||
<template>
|
||||
<div style="width: 100%; background-color: #f5f5f5">
|
||||
<Header class="wapper" />
|
||||
</div>
|
||||
<div class="container">
|
||||
<el-breadcrumb separator="/" class="primary-lease">
|
||||
<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 style="display: flex; flex-direction: column; height: 100vh">
|
||||
<div style="width: 100%; background-color: #f5f5f5">
|
||||
<Header class="wapper" />
|
||||
</div>
|
||||
<div class="container">
|
||||
<el-breadcrumb separator="/" class="primary-lease">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>提交订单</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<el-row class="cart-th">
|
||||
<el-col :span="2">
|
||||
<!-- <div>
|
||||
<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="8">
|
||||
<div>装备信息</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<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>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>装备信息</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<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 orderList" :key="index">
|
||||
<el-row style="border-bottom: 1px solid #ccc">
|
||||
<el-col :span="1">
|
||||
<div style="text-align: center">
|
||||
<!-- <el-checkbox
|
||||
<div class="cart-tbody" v-for="(item, index) in orderList" :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.companyName }}</div>
|
||||
<div class="user-name">{{ item.person }}</div>
|
||||
<div class="user-phone">{{ item.personPhone }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="22" class="cart-user-info">
|
||||
<div>{{ item.companyName }}</div>
|
||||
<div class="user-name">{{ item.person }}</div>
|
||||
<div class="user-phone">{{ item.personPhone }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row class="cart-list">
|
||||
<el-col :span="1">
|
||||
<!-- <div style="text-align: center">
|
||||
<el-row class="cart-list">
|
||||
<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="item.picUrl" alt="" />
|
||||
<div class="goods-code">
|
||||
<div style="font-size: 14px; font-weight: bold">{{ item.deviceName }}</div>
|
||||
<div>装备编号： {{ item.code }}</div>
|
||||
<div>装备型号： {{ item.typeName }}</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<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>
|
||||
{{ item.rentEndTime }}
|
||||
</el-col>
|
||||
<el-col :span="9" class="goods-info">
|
||||
<img :src="item.picUrl" alt="" />
|
||||
<div class="goods-code">
|
||||
<div style="font-size: 14px; font-weight: bold">
|
||||
{{ item.deviceName }}
|
||||
</div>
|
||||
<div>装备编号： {{ item.code }}</div>
|
||||
<div>装备型号： {{ item.typeName }}</div>
|
||||
</div>
|
||||
<!-- <el-date-picker
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<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>
|
||||
{{ item.rentEndTime }}
|
||||
</div>
|
||||
<!-- <el-date-picker
|
||||
style="width: 100px; margin-top: 10px"
|
||||
v-model="item.lease_date"
|
||||
type="daterange"
|
||||
|
|
@ -94,131 +97,132 @@
|
|||
value-format="YYYY-MM-DD"
|
||||
@change="onLeaseDateChange($event, item)"
|
||||
/> -->
|
||||
<CustomDatePickerButton
|
||||
:modelValue="item.lease_date"
|
||||
:companyIndex="index"
|
||||
:goodsIndex="index"
|
||||
type="primary"
|
||||
size="large"
|
||||
placeholder="选择日期"
|
||||
@onLeaseDateChange="onLeaseDateChange"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div class="red-font">
|
||||
{{ item.dayLeasePrice }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div class="red-font" style="color: #0062ff">
|
||||
{{ item.days }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="item.num"
|
||||
style="width: 100px; margin-left: 10px"
|
||||
:min="1"
|
||||
:max="item.deviceCount"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div class="red-font" style="margin-left: 20px">
|
||||
{{ item.num * item.dayLeasePrice * item.days }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div>
|
||||
<el-button
|
||||
@click="onDeleteGoods(index)"
|
||||
link
|
||||
style="color: #ff4800; font-weight: bold"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<CustomDatePickerButton
|
||||
:modelValue="item.lease_date"
|
||||
:companyIndex="index"
|
||||
:goodsIndex="index"
|
||||
type="primary"
|
||||
size="large"
|
||||
placeholder="选择日期"
|
||||
@onLeaseDateChange="onLeaseDateChange"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div class="red-font">
|
||||
{{ item.dayLeasePrice }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div class="red-font" style="color: #0062ff">
|
||||
{{ item.days }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="item.num"
|
||||
style="width: 100px; margin-left: 10px"
|
||||
:min="1"
|
||||
:max="item.deviceCount"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div class="red-font" style="margin-left: 20px">
|
||||
{{ item.num * item.dayLeasePrice * item.days }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div>
|
||||
<el-button
|
||||
@click="onDeleteGoods(index)"
|
||||
link
|
||||
style="color: #ff4800; font-weight: bold"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="protocol-handle">
|
||||
<el-row style="margin: 15px 0">
|
||||
<el-col :span="24">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item :title="addressTitle" name="1">
|
||||
<template v-if="addressList.length > 0">
|
||||
<div
|
||||
:key="index"
|
||||
class="address-item"
|
||||
@click="onSelectAddress(item.addressName)"
|
||||
v-for="(item, index) in addressList"
|
||||
>
|
||||
{{ item.addressName }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div style="width: 100%; text-align: center; font-size: 14px">
|
||||
当前没有收货地址...
|
||||
<a
|
||||
style="
|
||||
color: #00a288;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
text-decoration: underline;
|
||||
"
|
||||
@click="onAddAddress"
|
||||
<div class="protocol-handle">
|
||||
<el-row style="margin: 15px 0">
|
||||
<el-col :span="24">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item :title="addressTitle" name="1">
|
||||
<template v-if="addressList.length > 0">
|
||||
<div
|
||||
:key="index"
|
||||
class="address-item"
|
||||
@click="onSelectAddress(item.addressName)"
|
||||
v-for="(item, index) in addressList"
|
||||
>
|
||||
点击新增
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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>
|
||||
{{ item.addressName }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div style="width: 100%; text-align: center; font-size: 14px">
|
||||
当前没有收货地址...
|
||||
<a
|
||||
style="
|
||||
color: #00a288;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
text-decoration: underline;
|
||||
"
|
||||
@click="onAddAddress"
|
||||
>
|
||||
点击新增
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<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: 12px 24px; background-color: #1abc9c; color: #fff"
|
||||
>提交</el-button
|
||||
>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<FooterInfo />
|
||||
</div>
|
||||
<FooterInfo />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -481,18 +485,22 @@ getReceiptGoodsAddress()
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
width: 1553px;
|
||||
margin: 15px auto;
|
||||
flex: 1;
|
||||
// min-height: 550px;
|
||||
background: #eeeff6;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
padding: 20px 10px;
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
|
||||
.cart-title {
|
||||
margin-top: 20px;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
|
@ -505,6 +513,7 @@ getReceiptGoodsAddress()
|
|||
|
||||
.cart-th {
|
||||
margin: 15px 0;
|
||||
font-size: 18px;
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -518,7 +527,7 @@ getReceiptGoodsAddress()
|
|||
.cart-user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
// font-size: 13px;
|
||||
|
||||
.user-name,
|
||||
.user-phone {
|
||||
|
|
@ -536,7 +545,7 @@ getReceiptGoodsAddress()
|
|||
margin: 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
// font-size: 13px;
|
||||
div {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -567,7 +576,7 @@ getReceiptGoodsAddress()
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
// font-size: 12px;
|
||||
}
|
||||
|
||||
.red-font {
|
||||
|
|
@ -581,7 +590,7 @@ getReceiptGoodsAddress()
|
|||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
margin: 10px;
|
||||
font-size: 13px;
|
||||
// font-size: 13px;
|
||||
.checkbox-container a {
|
||||
color: #ff4800;
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -500,7 +500,7 @@ const onAcceptOrders = (id: any) => {
|
|||
border-bottom: 1px solid #ccc;
|
||||
.choose {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
|
||||
.line {
|
||||
padding: 14px 0;
|
||||
|
|
@ -527,7 +527,7 @@ const onAcceptOrders = (id: any) => {
|
|||
margin-right: 15px;
|
||||
cursor: pointer;
|
||||
color: #939393;
|
||||
font-size: 15px;
|
||||
font-size: 17px;
|
||||
line-height: 25px;
|
||||
height: 25px;
|
||||
|
||||
|
|
@ -582,7 +582,7 @@ const onAcceptOrders = (id: any) => {
|
|||
border-radius: 12px;
|
||||
padding: 10px 20px;
|
||||
|
||||
font-size: 17px;
|
||||
// font-size: 17px;
|
||||
font-weight: 500;
|
||||
color: #9d9d9d;
|
||||
margin-right: 10px;
|
||||
|
|
@ -599,7 +599,7 @@ const onAcceptOrders = (id: any) => {
|
|||
.showList {
|
||||
.demand-card {
|
||||
margin-bottom: 15px;
|
||||
padding: 15px 25px;
|
||||
padding: 20px 25px;
|
||||
border-radius: 14px;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
|
|
@ -608,7 +608,7 @@ const onAcceptOrders = (id: any) => {
|
|||
|
||||
.el-row {
|
||||
padding: 10px 0;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.count-down {
|
||||
|
|
|
|||
Loading…
Reference in New Issue