页面搭建

components.d.ts

@@ -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']
@@ -28,8 +29,11 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    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']

src/router/index.ts

@@ -198,6 +198,16 @@ const routes: Array<RouteRecordRaw> = [
                             keepAlive: true,
                             AuthFlag: false
                         },
+                    },
+                    {
+                        path: 'orderConfirm',
+                        name: 'orderConfirm',
+                        component: () => import('views/user/orderManagement/orderCom/orderConfirm.vue'),
+                        meta: {
+                            title: '订单确认',
+                            keepAlive: true,
+                            AuthFlag: false
+                        },
                     }
                 ]
             },

src/style/scss/common.module.scss

@@ -1,5 +0,0 @@
-.button {
-    border-radius: 3px;
-    background-color: green;
-    color: white;
-}

src/style/scss/index.scss

@@ -0,0 +1,4 @@
+@import './variable.scss';
+@import './mixin.scss';
+@import './common.module.scss';
+@import './nprogress.scss';

src/style/scss/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);
+    }
+  }
+  

src/style/scss/vantReset.scss

@@ -1,4 +0,0 @@
-.van-button--primary {
-    background-color: $main-color;
-    border: $main-color;
-}

src/style/scss/variable.scss

@@ -1,2 +1,2 @@
-$main-color: #f00;
+$main-color: #2282fe;
 $second-color: #666;

src/views/user/orderManagement/orderCom/orderConfirm.vue

@@ -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>

src/views/user/orderManagement/orderCom/orderDetails.vue

@@ -1,75 +1,142 @@
 <template>
     <el-page-header @back="goBack">
         <template #content>
-            <span> {{详情}} </span>
+            <span>详情 </span>
         </template>
     </el-page-header>
-    <el-form label-width="130px" inline="true" style="padding: 0 20px 0px 20px;">
+    <el-form label-width="130px" inline="true" style="padding: 0 20px 0px 20px;width: 865px;" size="small">
-        <el-form-item label="订单编号">
+        <el-form-item label="订单编号" style="width: 600px;">
-        xxxxx
+            xxxxx
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="需求单位">
+        <el-form-item label="需求单位" class="table_item">
-        xxxxx
+            xxxxx
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="联系电话">
+        <el-form-item label="联系电话" class="table_item">
-        xxxxx
+            xxxxx
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="租赁时长">
+        <el-form-item label="租赁时长" class="table_item">
-        xxxxx
+            xxxxx
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="设备进场地址：">
+        <el-form-item label="设备进场地址：" class="table_item">
-        xxxxx
+            xxxxx
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="进场时间：">
+        <el-form-item label="进场时间：" class="table_item">
-        xxxxx
+            xxxxx
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="是否需求机手：">
+        <el-form-item label="是否需求机手：" class="table_item">
-        xxxxx
+            xxxxx
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="详细地址：">
+        <el-form-item label="详细地址：" class="table_item">
-        xxxxx
+            xxxxx
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="工期时长：">
+        <el-form-item label="工期时长：" class="table_item">
-        xxxxx
+            xxxxx
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="发票类型：">
+        <el-form-item label="发票类型：" class="table_item">
-        xxxxx
+            xxxxx
-      </el-form-item>
+        </el-form-item>
-      <el-form-item label="项目说明：" style="width:500px">
+        <el-form-item label="项目说明：" style="width: 800px;">
-        <div>
+            xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-
+        </el-form-item>
-        </div>
+        <el-form-item label="订单起止时间：" style="width: 800px;">
-      </el-form-item>
+            xxxx-xx-xx ~ xxxx-xx-xx
-      <el-form-item label="订单起止时间：">
+        </el-form-item>
-        xxxxx
+        <!-- 表格 -->
-      </el-form-item>
+        <orderTable :tableInfo="tableInfo"></orderTable>
-      <!-- 表格 -->
+        <el-form-item label="订单合同：" style="width: 800px;margin-top:12px;">
-      <el-form-item label="订单合同：">
+            xxxxxxxxxxxx.pdf
-        xxxxx
+        </el-form-item>
-      </el-form-item>
+        <el-form-item label="机手姓名：" class="table_item_sub">
-      <el-form-item label="机手姓名：">
+            xxxxx
-        xxxxx
+        </el-form-item>
-      </el-form-item>
+        <el-form-item label="联系电话：" class="table_item_sub">
-      <el-form-item label="联系电话：">
+            xxxxx
-        xxxxx
+        </el-form-item>
-      </el-form-item> 
+        <el-form-item label="物流司机电话：" style="width: 800px;">
-
+            xxxxx
-
+        </el-form-item>
-      物流司机电话：
+ 
-      <el-form-item label="订单状态：">
+        <el-timeline style="margin-left:20px;width:560px;">
-        xxxxx
+            <el-timeline-item v-for="(item, index) in activities" :key="index" :icon="item.icon" :type="item.type"
-      </el-form-item>
+                :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"></style>
+<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>

src/views/user/orderManagement/orderCom/orderTable.vue

@@ -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>

src/views/user/orderManagement/orderCom/timeLineHorizontal.vue

@@ -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>

vite.config.ts

@@ -68,8 +68,7 @@ export default ({ mode }: any) => {
       preprocessorOptions: {
         scss: {
           // 两种方式都可以
-          additionalData: ''
+          additionalData: "@import '@/style/scss/index.scss';"
-          // "@import '@/style/scss/index.scss';"
 
         }
       }