Compare commits
9 Commits
93aa763064
...
79a1a6d55c
| Author | SHA1 | Date |
|---|---|---|
 songyang
|
79a1a6d55c | |
 13218645326
|
79c5923f3a | |
|
13218645326
|
6cd6ad5f75 | |
wlikett
|
fba797139a | |
|
13218645326
|
561fa32a42 | |
|
13218645326
|
0ba301fc73 | |
|
wlikett
|
1ab6209482 | |
|
songyang
|
74bd26c254 | |
|
wlikett
|
5d5333c3ed |
|
|
@ -13,6 +13,7 @@ declare module 'vue' {
|
|||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
|
|
@ -21,16 +22,18 @@ 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']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTimeline: typeof import('element-plus/es')['ElTimeline']
|
||||
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
EquipCard: typeof import('./src/components/equipCard.vue')['default']
|
||||
EquipDetailTable: typeof import('./src/components/equipDetailTable.vue')['default']
|
||||
FooterInfo: typeof import('./src/components/FooterInfo/index.vue')['default']
|
||||
FormComponent: typeof import('./src/components/FormComponent/index.vue')['default']
|
||||
Navmenu: typeof import('./src/components/Navmenu/index.vue')['default']
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
<title>机具租赁商城</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<el-table :data="[props]"
|
||||
border
|
||||
:header-cell-class-name="headerClassName"
|
||||
style="width: 100%">
|
||||
<el-table-column label="装备" min-width="200" >
|
||||
<template #default="scope">
|
||||
<div class="equipData">
|
||||
<div class="name">
|
||||
{{ scope.row.name }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
<div class="Img">
|
||||
<img :src="scope.row.url">
|
||||
</div>
|
||||
<div class="state">
|
||||
<div class="item" v-for="(v,i) in stateList" :key="i">
|
||||
<div class="label">
|
||||
{{ v.label }}：
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ scope.row[v.key] || '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="租金" min-width="120" >
|
||||
<template #default="scope">
|
||||
{{ scope.row.price }}/{{ scope.row.unit }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="company" label="供应商" min-width="180" />
|
||||
</el-table>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {ref} from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* @description 装备名称
|
||||
* */
|
||||
name:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
/**
|
||||
* @description 装备图片
|
||||
* */
|
||||
url:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
/**
|
||||
* @description 装备编码
|
||||
* */
|
||||
code:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
/**
|
||||
* @description 装备类别
|
||||
* */
|
||||
type:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
/**
|
||||
* @description 装备组别
|
||||
* */
|
||||
group:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
/**
|
||||
* @description 装备品牌
|
||||
* */
|
||||
brand:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
/**
|
||||
* @description 装备规格
|
||||
* */
|
||||
specifications:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
/**
|
||||
* @description 装备位置
|
||||
* */
|
||||
position:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
/**
|
||||
* @description 装备价格
|
||||
* */
|
||||
price:{
|
||||
type: [String, Number],
|
||||
default:''
|
||||
},
|
||||
/**
|
||||
* @description 装备价格单位
|
||||
* */
|
||||
unit: {
|
||||
type: String,
|
||||
default:''
|
||||
},
|
||||
/**
|
||||
* @description 装备公司
|
||||
* */
|
||||
company: {
|
||||
type: String,
|
||||
default:''
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const stateList = ref([
|
||||
{
|
||||
label:'装备编号',
|
||||
key:'code'
|
||||
},{
|
||||
label:'装备类别',
|
||||
key:'type'
|
||||
},{
|
||||
label:'装备组别',
|
||||
key:'group'
|
||||
},{
|
||||
label:'品牌',
|
||||
key:'brand'
|
||||
},{
|
||||
label:'设备规格',
|
||||
key:'specifications'
|
||||
},{
|
||||
label:'设备位置',
|
||||
key:'position'
|
||||
},
|
||||
])
|
||||
|
||||
const headerClassName = () => {
|
||||
return 'headerColor'
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep() .headerColor{
|
||||
background: #3E98FF !important;
|
||||
color: white !important;
|
||||
}
|
||||
.equipData{
|
||||
.name{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: black;
|
||||
}
|
||||
.desc{
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
.Img{
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #e5e5e5;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
img{
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.state{
|
||||
flex: 1;
|
||||
.item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.label{
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
color: #858585;
|
||||
}
|
||||
.value{
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
|
||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
|
||||
import test from './module/test'
|
||||
import myInfo from './module/myInfo'
|
||||
|
||||
|
|
@ -80,7 +81,7 @@ const routes: Array<RouteRecordRaw> = [
|
|||
{
|
||||
path: '/equipList',
|
||||
name: 'equipList',
|
||||
component: () => import('views/equip/list.vue'),
|
||||
component: () => import('@/views/equip/list.vue'),
|
||||
meta: {
|
||||
title: ''
|
||||
}
|
||||
|
|
@ -187,6 +188,26 @@ const routes: Array<RouteRecordRaw> = [
|
|||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'orderDetails',
|
||||
name: 'orderDetails',
|
||||
component: () => import('views/user/orderManagement/orderCom/orderDetails.vue'),
|
||||
meta: {
|
||||
title: '订单详情',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'orderConfirm',
|
||||
name: 'orderConfirm',
|
||||
component: () => import('views/user/orderManagement/orderCom/orderConfirm.vue'),
|
||||
meta: {
|
||||
title: '订单确认',
|
||||
keepAlive: true,
|
||||
AuthFlag: false
|
||||
},
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
.button {
|
||||
border-radius: 3px;
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
@import './variable.scss';
|
||||
@import './mixin.scss';
|
||||
@import './common.module.scss';
|
||||
@import './nprogress.scss';
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: $main-color;
|
||||
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
/* Fancy blur effect */
|
||||
#nprogress .peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px $main-color, 0 0 5px $main-color;
|
||||
opacity: 1.0;
|
||||
|
||||
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||
transform: rotate(3deg) translate(0px, -4px);
|
||||
}
|
||||
|
||||
/* Remove these to get rid of the spinner */
|
||||
#nprogress .spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: $main-color;
|
||||
border-left-color: $main-color;
|
||||
border-radius: 50%;
|
||||
|
||||
-webkit-animation: nprogress-spinner 400ms linear infinite;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent #nprogress .spinner,
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@-webkit-keyframes nprogress-spinner {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nprogress-spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
.van-button--primary {
|
||||
background-color: $main-color;
|
||||
border: $main-color;
|
||||
}
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
$main-color: #f00;
|
||||
$main-color: #2282fe;
|
||||
$second-color: #666;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import FooterInfo from 'components/FooterInfo/index.vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import FooterInfo from '../components/FooterInfo/index.vue'
|
||||
import {useRouter} from "vue-router";
|
||||
import $bus from "@/utils/bus"
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const route: any = useRoute()
|
||||
|
||||
const searchIptRef: any = shallowRef(null)
|
||||
|
||||
// 判断是否是个人中心页面 如果是则隐藏页脚
|
||||
const isMyInfoPage = () => {
|
||||
if (route.path.indexOf('myuser') === -1) {
|
||||
|
|
@ -27,19 +25,32 @@
|
|||
])
|
||||
|
||||
// 搜索按钮
|
||||
const searchKeywordBtn = () => {
|
||||
console.log('搜索关键字', keywordIptValue.value)
|
||||
const searchKeywordBtn = (e) => {
|
||||
if(route.path == '/equipList'){
|
||||
$bus.emit('search',keywordIptValue.value)
|
||||
}else {
|
||||
router.push({
|
||||
name:'equipList',
|
||||
state:{keyWord: keywordIptValue.value}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 点击下方搜索记录时
|
||||
const handleHistory = (hisValue: any) => {
|
||||
keywordIptValue.value = hisValue
|
||||
nextTick(() => {
|
||||
searchIptRef.value.focus()
|
||||
})
|
||||
}
|
||||
//页面刷新回显模糊搜索词
|
||||
$bus.on('callBackText',(val) => {
|
||||
nextTick(() => {
|
||||
keywordIptValue.value = val
|
||||
})
|
||||
})
|
||||
|
||||
onMounted(() => {})
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -57,11 +68,11 @@
|
|||
<span @click="$router.push({ name: 'myuser' })">个人中心</span>
|
||||
</li>
|
||||
<li @click="$router.push('/collect')">
|
||||
<img src="../assets/img/home/2023_12_01_beijing2/shoucang.png" alt="" />
|
||||
<img src="./assets/img/home/2023_12_01_beijing2/shoucang.png" alt="" />
|
||||
<span>收藏夹</span>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../assets/img/home/2023_12_01_beijing2/shouji.png" alt="" />
|
||||
<img src="./assets/img/home/2023_12_01_beijing2/shouji.png" alt="" />
|
||||
<span class="last-span">手机版</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -81,8 +92,7 @@
|
|||
placeholder="输入设备关键词"
|
||||
type="text"
|
||||
v-model="keywordIptValue"
|
||||
@keydown.enter="searchKeywordBtn"
|
||||
ref="searchIptRef" />
|
||||
@keydown.enter="searchKeywordBtn" />
|
||||
<button class="search-btn" @click="searchKeywordBtn">搜索</button>
|
||||
<div class="erweima">
|
||||
<div class="tilte">手机扫码登录</div>
|
||||
|
|
@ -105,6 +115,7 @@
|
|||
<RouterView />
|
||||
</div>
|
||||
<FooterInfo v-if="isMyInfoPage()" />
|
||||
<!-- <FooterInfo /> -->
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="line" :style="`transform: translateX(calc((-100% - 10px) / 3 * ${activeUrl - 3}))`">
|
||||
<div class="line" :style="`transform: translateX(calc((-100% - 10px) / 3 * ${move}))`">
|
||||
<div class="item" @mouseenter="mouseenter($event,i)" :class="i == activeUrl && 'activeUrl'" v-for="(v,i) in urlList" :key="i">
|
||||
<img :src="v">
|
||||
</div>
|
||||
|
|
@ -22,22 +22,26 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {ref} from "vue";
|
||||
import {el} from "element-plus/es/locale";
|
||||
|
||||
const props = defineProps({
|
||||
urlList:{
|
||||
type:Array,
|
||||
default: [
|
||||
'https://img0.baidu.com/it/u=4159562347,2163772228&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701622800&t=e00e9ffd17009de0374cfc7769143ff6',
|
||||
'https://img1.baidu.com/it/u=2080801041,3349735074&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1701622800&t=5e131c7f2b0d5b02b9e82c0180b62fa8',
|
||||
'https://img0.baidu.com/it/u=1302187753,1022585962&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701622800&t=13ebea0b989899b3b933c19938b23f76',
|
||||
'https://img0.baidu.com/it/u=2453512896,179623672&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500'
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
//激活图片下标
|
||||
const activeUrl = ref(0)
|
||||
|
||||
|
||||
//展示 起始
|
||||
const startIndex = ref(0)
|
||||
//展示 结束
|
||||
const endIndex = ref(2)
|
||||
//移动
|
||||
const move = ref(0)
|
||||
|
||||
const init = () => {
|
||||
|
||||
}
|
||||
|
|
@ -54,6 +58,11 @@
|
|||
}else if(activeUrl.value == props.urlList?.length){
|
||||
activeUrl.value = props.urlList.length - 1
|
||||
}
|
||||
if(activeUrl.value > endIndex.value || activeUrl.value < startIndex.value){
|
||||
endIndex.value = endIndex.value + val
|
||||
startIndex.value = startIndex.value + val
|
||||
move.value = move.value + val
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -101,6 +110,7 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all ease 0.5s;
|
||||
}
|
||||
.item{
|
||||
height: 100%;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<el-page-header @back="goBack">
|
||||
<template #content>
|
||||
<span>详情 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<timeLineHorizontal></timeLineHorizontal>
|
||||
<el-form label-width="130px" inline="true" style="padding: 0 20px 0px 20px;width: 865px;" size="small">
|
||||
<el-form-item label="订单编号" style="width: 600px;">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="需求单位" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="租赁时长" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="设备进场地址：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="进场时间：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="是否需求机手：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="工期时长：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="发票类型：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="项目说明：" style="width: 800px;">
|
||||
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="订单起止时间：" style="width: 800px;">
|
||||
xxxx-xx-xx ~ xxxx-xx-xx
|
||||
</el-form-item>
|
||||
<!-- 表格 -->
|
||||
<orderTable :tableInfo="tableInfo"></orderTable>
|
||||
<el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
|
||||
xxxxxxxxxxxx.pdf
|
||||
</el-form-item>
|
||||
<el-form-item label="机手姓名：" class="table_item_sub">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话：" class="table_item_sub">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="物流司机电话：" style="width: 800px;">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
|
||||
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import orderTable from "./orderTable.vue"
|
||||
import {reactive} from "vue"
|
||||
import { MoreFilled } from '@element-plus/icons-vue'
|
||||
import timeLineHorizontal from "./timeLineHorizontal.vue"
|
||||
const tableInfo = reactive({
|
||||
v_equipment_title: "220E履带挖掘机",
|
||||
v_equipment_code: "88888",
|
||||
v_equipment_group_type: "挖掘机械",
|
||||
v_equipment_brand: "挖掘机",
|
||||
v_equipment_weight: "22吨",
|
||||
v_equipment_volume: "1立方米",
|
||||
v_equipment_address: '广东省广州市',
|
||||
money: '2000',
|
||||
unit: '月',
|
||||
imgUrl: ""
|
||||
})
|
||||
const timeLineStep = reactive({
|
||||
list:[
|
||||
{
|
||||
content: '订单状态',
|
||||
timestamp: '需求已提交，等待供应商审核。',
|
||||
size: 'large',
|
||||
type: 'primary',
|
||||
icon: MoreFilled,
|
||||
},
|
||||
{
|
||||
content: '订单状态',
|
||||
timestamp: '订单已确认，供应商会与您联系，签订合同。',
|
||||
color: '#0bbd87',
|
||||
},
|
||||
{
|
||||
content: '订单状态',
|
||||
timestamp: '装备已发出，到货后请及时确认。',
|
||||
size: 'large',
|
||||
},
|
||||
{
|
||||
content: '订单状态',
|
||||
timestamp: '租赁进行中。',
|
||||
type: 'primary',
|
||||
hollow: true,
|
||||
last:true
|
||||
},
|
||||
{
|
||||
content: 'Default node',
|
||||
timestamp: '2018-04-03 20:46',
|
||||
|
||||
},
|
||||
]})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table_item {
|
||||
width: 250px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.table_item_sub {
|
||||
width: 250px;
|
||||
height: 20px;
|
||||
}
|
||||
.time_line_item{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
.btn_c{
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<el-page-header @back="goBack">
|
||||
<template #content>
|
||||
<span>详情 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-form label-width="130px" inline="true" style="padding: 0 20px 0px 20px;width: 865px;" size="small">
|
||||
<el-form-item label="订单编号" style="width: 600px;">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="需求单位" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="租赁时长" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="设备进场地址：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="进场时间：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="是否需求机手：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="工期时长：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="发票类型：" class="table_item">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="项目说明：" style="width: 800px;">
|
||||
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="订单起止时间：" style="width: 800px;">
|
||||
xxxx-xx-xx ~ xxxx-xx-xx
|
||||
</el-form-item>
|
||||
<!-- 表格 -->
|
||||
<orderTable :tableInfo="tableInfo"></orderTable>
|
||||
<el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
|
||||
xxxxxxxxxxxx.pdf
|
||||
</el-form-item>
|
||||
<el-form-item label="机手姓名：" class="table_item_sub">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="联系电话：" class="table_item_sub">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
<el-form-item label="物流司机电话：" style="width: 800px;">
|
||||
xxxxx
|
||||
</el-form-item>
|
||||
|
||||
<el-timeline style="margin-left:20px;width:560px;">
|
||||
<el-timeline-item v-for="(item, index) in activities" :key="index" :icon="item.icon" :type="item.type"
|
||||
:color="item.color" :size="item.size" :hollow="item.hollow" :timestamp="item.timestamp">
|
||||
<div class="time_line_item">
|
||||
<div class="title">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div class="btn_c" >
|
||||
<el-button type="primary" v-if="item.last">确认到货</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup lang="ts">
|
||||
import {reactive} from "vue"
|
||||
import orderTable from "./orderTable.vue"
|
||||
import { MoreFilled } from '@element-plus/icons-vue'
|
||||
const tableInfo = reactive({
|
||||
v_equipment_title: "220E履带挖掘机",
|
||||
v_equipment_code: "88888",
|
||||
v_equipment_group_type: "挖掘机械",
|
||||
v_equipment_brand: "挖掘机",
|
||||
v_equipment_weight: "22吨",
|
||||
v_equipment_volume: "1立方米",
|
||||
v_equipment_address: '广东省广州市',
|
||||
money: '2000',
|
||||
unit: '月',
|
||||
imgUrl: ""
|
||||
})
|
||||
const activities = [
|
||||
{
|
||||
content: '订单状态',
|
||||
timestamp: '需求已提交，等待供应商审核。',
|
||||
size: 'large',
|
||||
type: 'primary',
|
||||
icon: MoreFilled,
|
||||
},
|
||||
{
|
||||
content: '订单状态',
|
||||
timestamp: '订单已确认，供应商会与您联系，签订合同。',
|
||||
color: '#0bbd87',
|
||||
},
|
||||
{
|
||||
content: '订单状态',
|
||||
timestamp: '装备已发出，到货后请及时确认。',
|
||||
size: 'large',
|
||||
},
|
||||
{
|
||||
content: '订单状态',
|
||||
timestamp: '租赁进行中。',
|
||||
type: 'primary',
|
||||
hollow: true,
|
||||
last:true
|
||||
},
|
||||
{
|
||||
content: 'Default node',
|
||||
timestamp: '2018-04-03 20:46',
|
||||
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table_item {
|
||||
width: 250px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.table_item_sub {
|
||||
width: 250px;
|
||||
height: 20px;
|
||||
}
|
||||
.time_line_item{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
.btn_c{
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<template>
|
||||
<el-table :data="[{
|
||||
name: ''
|
||||
}]" border :header-cell-class-name="headerClassName" style="width: 100%">
|
||||
<el-table-column label="装备" min-width="200">
|
||||
<template #default="scope">
|
||||
<div class="equipData">
|
||||
<div class="name">
|
||||
{{ props.tableInfo.v_equipment_title }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
<div class="Img">
|
||||
<img :src="props.tableInfo.imgUrl">
|
||||
</div>
|
||||
<div class="state">
|
||||
<div class="item">
|
||||
<div class="label">
|
||||
装备编号：
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ props.tableInfo.v_equipment_title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">
|
||||
装备类别：
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ props.tableInfo.v_equipment_code }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">
|
||||
装备组别：
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ props.tableInfo.v_equipment_group_type }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">
|
||||
品牌 ：
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ props.tableInfo.v_equipment_brand }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item item_sub_out">
|
||||
<div class="label">
|
||||
设备规格：
|
||||
</div>
|
||||
<div class="value">
|
||||
|
||||
<div class="sub_item">
|
||||
<div class="sub_label">
|
||||
操作重量：
|
||||
</div>
|
||||
<div class="sub_value">
|
||||
{{ props.tableInfo.v_equipment_weight }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub_item">
|
||||
<div class="sub_label">
|
||||
铲斗容量：
|
||||
</div>
|
||||
<div class="sub_value">
|
||||
{{ props.tableInfo.v_equipment_volume }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">
|
||||
设备位置：
|
||||
</div>
|
||||
<div class="value">
|
||||
{{ props.tableInfo.v_equipment_address }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="租金" min-width="120">
|
||||
<template #default="scope">
|
||||
<span style="color:#f00;"> {{ props.tableInfo.money }}</span>/{{ props.tableInfo.unit }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
||||
const props = defineProps({
|
||||
tableInfo: {
|
||||
type: Object,
|
||||
default: {}
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
const headerClassName = () => {
|
||||
return 'headerColor'
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.headerColor) {
|
||||
background: #3E98FF !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.equipData {
|
||||
height: 220px;
|
||||
|
||||
.name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
|
||||
.Img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #e5e5e5;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.state {
|
||||
flex: 1;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.item_sub_out {
|
||||
height: 46px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.sub_item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.label {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
color: #858585;
|
||||
}
|
||||
.value {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.money_c{
|
||||
color:#f00;
|
||||
}
|
||||
}</style>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<div class="processBox">
|
||||
<div class="title">工程进度</div>
|
||||
<el-divider />
|
||||
<div class="timelineProcessBox">
|
||||
<el-timeline class="timeline">
|
||||
<el-timeline-item
|
||||
class="lineitem"
|
||||
:class="item.done ? 'active' : 'inactive'"
|
||||
v-for="(item, index) in activities"
|
||||
:key="index"
|
||||
:timestamp="item.time"
|
||||
>
|
||||
<div>
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const activities = [
|
||||
{
|
||||
content: '开工阶段',
|
||||
time: '2018-04-12 20:46',
|
||||
people: '五六七',
|
||||
done: true,
|
||||
},
|
||||
{
|
||||
content: '实施阶段',
|
||||
people: '吉吉国王',
|
||||
done: true,
|
||||
time: '2018-04-03 20:46',
|
||||
},
|
||||
{
|
||||
content: '竣工阶段',
|
||||
done: false,
|
||||
people: '熊大',
|
||||
time: '2018-04-03 20:46',
|
||||
},
|
||||
{
|
||||
content: '结算阶段',
|
||||
people: '',
|
||||
done: false,
|
||||
time: '',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.processBox {
|
||||
background-color: #fff;
|
||||
height: 210px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding-left: 32px;
|
||||
padding-top: 16px;
|
||||
}
|
||||
.timelineProcessBox {
|
||||
.timeline {
|
||||
display: flex;
|
||||
width: 95%;
|
||||
margin: 40px auto;
|
||||
.lineitem {
|
||||
transform: translateX(50%);
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-timeline-item__tail) {
|
||||
border-left: none;
|
||||
border-top: 2px solid #e4e7ed;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
}
|
||||
:deep(.el-timeline-item__wrapper) {
|
||||
padding-left: 0;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
:deep(.el-timeline-item__timestamp) {
|
||||
font-size: 14px;
|
||||
}
|
||||
.active {
|
||||
border: none!important;
|
||||
:deep(.el-timeline-item__node) {
|
||||
background-color: $main-color;
|
||||
}
|
||||
:deep(.el-timeline-item__tail) {
|
||||
border-color: $main-color;
|
||||
}
|
||||
}
|
||||
// 有active样式的下一个li
|
||||
.active + li {
|
||||
:deep(.el-timeline-item__node) {
|
||||
background-color: $main-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -68,8 +68,7 @@ export default ({ mode }: any) => {
|
|||
preprocessorOptions: {
|
||||
scss: {
|
||||
// 两种方式都可以
|
||||
additionalData: ''
|
||||
// "@import '@/style/scss/index.scss';"
|
||||
additionalData: "@import '@/style/scss/index.scss';"
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue