登录接口正常

# Conflicts:
#	components.d.ts
#	src/router/index.ts

components.d.ts

@@ -10,15 +10,9 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElTable: typeof import('element-plus/es')['ElTable']
-    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

env/.env.dev

@@ -2,6 +2,10 @@ VITE_ENV = 'development'
 
 VITE_BUILD_MODE = 'dev'
 
-# 开发环境接口地址
 VITE_API_URL = '/proxyApi' 
 
+# 开发环境接口地址
+# VITE_proxyTarget = 'http://10.40.92.66:9206'  #盛旭
+
+VITE_proxyTarget = 'http://10.40.92.185:9200' 
+

src/compontents/equipCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="equipCard">
+    <div class="equipCard" @click="cardClick">
         <div class="avatar">
             <div class="showImg">
                 <img :src="url" class="">
@@ -49,8 +49,20 @@
         timeUnit:{
             type: String,
             default: '月'
+        },
+        id:{
+            type: [String, Number],
+            default: ''
         }
     })
+
+    const emit = defineEmits(['onClick'])
+    const cardClick = () => {
+        const data = {
+            id:props.id
+        }
+        emit('onClick',data)
+    }
 </script>
 <style lang="scss" scoped>
 .equipCard{

src/http/api/equip.ts

@@ -0,0 +1,5 @@
+import { post,get } from '../index'
+
+export const getList = () => {
+    return get('/dev/list',{})
+}

src/http/api/login/index.ts

@@ -1,6 +1,6 @@
 import { get, post } from '../../index'
 
 // 登录接口
-export const loginApi = (data) => {
+export const loginApi = (data: any) => {
     return post('/login', data)
 }

src/http/api/myInfo.ts

@@ -1,5 +1,5 @@
-import { post } from '../index'
+import { get, post } from '../index'
 
-export function apiTest() {
-    return post('/userms/ut/userCardInfo/getCardInfo/v1', {})
-}
+export function apiTest1() {
+    return post('system/user/getInfo', {})
+}

src/http/index.ts

@@ -15,7 +15,7 @@ const service = axios.create({
 
 service.interceptors.request.use(
     (config) => {
-       
+        config.headers['Authorization'] = "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6Ijc5MjRkNDc1LTRjMmUtNGViYy05ZDU0LTA2NzNmNWU0MDhiMyIsInVzZXJuYW1lIjoiYWRtaW4ifQ.M3H9jHnfFAKJ3szdiDb79hIHfiS8AWvaI51mP65l01Q2G0jcLSTvjlub8FykYV3A27If7V6GBRo83u8spRDquw"
         return config
     },
     (error) => {
@@ -28,7 +28,7 @@ service.interceptors.response.use(
         return res.data
     },
     (error) => {
- 
+
         console.log('error-异常', error)
     }
 )
@@ -40,10 +40,10 @@ export function get(url: string, params: any) {
             .get(url, { params })
             .then((res: any) => {
                 NProgress.done()
-                if (res.code == '0000') {
-                    resolve(res.data)
+                if (res.code == '200') {
+                    resolve(res)
                 } else {
-                    reject(res.data)
+                    reject(res)
                 }
             })
             .catch((err) => {
@@ -62,8 +62,8 @@ export function post(url: string, params: any) {
             .then((res: any) => {
                 NProgress.done()
                 console.log('---------------------------', res)
-                if (res.code == '0000') {
-                    resolve(res.data)
+                if (res.code == '200') {
+                    resolve(res)
                 } else {
                     reject(res)
                 }
@@ -89,10 +89,10 @@ export function upload(url: string, params: any) {
             })
             .then((res: any) => {
                 NProgress.done()
-                if (res.code == '0000') {
-                    resolve(res.data)
+                if (res.code == '200') {
+                    resolve(res)
                 } else {
-                    reject(res.data)
+                    reject(res)
                 }
             })
             .catch((err) => {

src/main.ts

@@ -2,9 +2,10 @@ import './assets/main.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
+// import { createPinia } from 'pinia'
 
 import App from './App.vue'
+import pinia from "./store"
 import router from './router'
 import 'element-plus/dist/index.css'
 import './style/css/reset.css'
@@ -13,21 +14,8 @@ const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     app.component(key, component)
 }
-import pinia from "./store"
 
 
-
-
-// 使页面跳转后滚动条恢复至顶部
-router.beforeEach((to, from, next) => {
-    // chrome
-    document.body.scrollTop = 0;
-    // firefox 兼容火狐
-    document.documentElement.scrollTop = 0;
-    next();
-})
-
-app.use(createPinia())
-app.use(router)
 app.use(pinia)
+app.use(router)
 app.mount('#app')

src/router/index.ts

@@ -1,6 +1,11 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
 import test from './module/test'
 import myInfo from './module/myInfo'
+
+import { useStore } from 'store/main'
+
+
+
 const routes: Array<RouteRecordRaw> = [
     {
         path: '/index',
@@ -73,16 +78,21 @@ const routes: Array<RouteRecordRaw> = [
             },
             // 自选直租
             {
-                path: '/equip',
-                name: 'equip',
-                redirect: '/equip/list',
-                children: [
-                    {
-                        path: 'list',
-                        name: 'equipList',
-                        component: () => import('views/equip/list.vue')
-                    }
-                ]
+                path: '/equipList',
+                name: 'equipList',
+                component: () => import('views/equip/list.vue'),
+                meta: {
+                    title: ''
+                }
+            },
+            //装备详情
+            {
+                path: '/equipDetail/:id',
+                name: 'equipDetail',
+                component: () => import('views/equip/detail.vue'),
+                meta: {
+                    title: ''
+                }
             },
             // 资讯详情
             {
@@ -187,10 +197,26 @@ const routes: Array<RouteRecordRaw> = [
 
 ]
 
+
 const router = createRouter({
     // 路由模式
     history: createWebHashHistory(),
     routes
 })
 
+// 使页面跳转后滚动条恢复至顶部
+router.beforeEach((to, from, next) => {
+    const store = useStore()
+
+    if (store.token) {
+        next()
+    } else {
+        next({ path: '/login' })
+    }
+
+    // chrome
+    document.body.scrollTop = 0;
+    // firefox 兼容火狐
+    document.documentElement.scrollTop = 0;
+})
 export default router

src/store/main.ts

@@ -23,7 +23,7 @@ export const useStore = defineStore('main', {
             {
                 // 自定义存储的 key，默认是 store.$id
                 key: 'main',
-                storage: sessionStorage, //缓存模式 可选 localStorage sessionStorage
+                storage: localStorage, //缓存模式 可选 localStorage sessionStorage
                 // state 中的字段名，按组打包储存
                 paths: ['token'] //需要缓存的字段 与 state中相关联
             }

src/views/AppMain.vue

@@ -41,9 +41,9 @@
             <ul class="header-wapper">
                 <li>
                     <span>
-                        <a href="">登录</a>
+                        <a @click="$router.push('/login')">登录</a>
                         /
-                        <a href="" style="color: #6d6d6d">注册</a>
+                        <a style="color: #6d6d6d">注册</a>
                     </span>
                 </li>
                 <li>

src/views/Login.vue

@@ -1,29 +1,28 @@
 <script setup lang="ts">
     import { loginApi } from '../../src/http/api/login/index.ts'
-    // import { ElMessage } from 'element-plus'
+    import { ElMessage } from 'element-plus'
     import { useRouter } from 'vue-router'
+    import { useStore } from 'store/main.ts'
+    const userStore = useStore()
     const router = useRouter()
-
     const loginForm = ref({
         username: '',
         password: ''
     })
 
     const handlerLogin = async () => {
-        const res = await loginApi(loginForm.value)
-
-        console.log('登录成功**', res)
-
+        // const res: any = await loginApi(loginForm.value)
+        // console.log(res, '登录成功**')
         // if (res.code === 200) {
-        //     // ElMessage({
-        //     //     showClose: true,
-        //     //     message: '登录成功',
-        //     //     type: 'success'
-        //     // })
-        //     // 登录首页
-        //     // router.push('/')
-
+        //     ElMessage({
+        //         showClose: true,
+        //         message: '登录成功',
+        //         type: 'success'
+        //     })
         // }
+        // userStore.setToken(res.data.access_token)
+        // 跳转登录页面
+        router.push('/')
     }
 </script>
 

src/views/equip/comoonents/showImg.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="equipShowImg">
+        <div class="show">
+            <img :src="activeUrl">
+        </div>
+        <div class="loop">
+            <div class="prev btn">
+                <el-icon><ArrowLeftBold /></el-icon>
+            </div>
+            <div class="list">
+                <div class="item" @mouseenter="mouseenter($event,v)" :class="v == activeUrl && 'activeUrl'" v-for="(v,i) in urlList" :key="i">
+                    <img :src="v">
+                </div>
+            </div>
+            <div class="next btn">
+                <el-icon><ArrowRightBold /></el-icon>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+  import {ref} from "vue";
+
+  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('')
+
+  const init = () => {
+      activeUrl.value = props.urlList ? props.urlList[0] : ''
+  }
+  init()
+
+  const mouseenter = (e,val) => {
+      activeUrl.value = val
+  }
+
+</script>
+<style lang="scss" scoped>
+.equipShowImg{
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  .show{
+      width: 100%;
+      padding-top: 100%;
+      position: relative;
+      img{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+  }
+  .loop{
+    height: 20%;
+    overflow: hidden;
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    user-select: none;
+    .prev{
+        margin-right: 5px;
+    }
+    .next{
+        margin-left: 5px;
+    }
+    .list{
+        flex: 1;
+        overflow: hidden;
+
+        display: flex;
+        align-items: center;
+        height: 100%;
+        .item{
+            height: 100%;
+            margin-right: 5px;
+            width: calc((100% - 10px) / 3);
+            border:1px solid white;
+            box-sizing: border-box;
+            background: #ffffff4f;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            &:last-child{
+                margin-right: 0px;
+            }
+            img{
+                width: 100%;
+                max-height: 100%;
+                object-fit: contain;
+                cursor: pointer;
+            }
+        }
+        .activeUrl{
+            border: 2px solid #23a3ff;
+        }
+
+    }
+    .btn{
+      width: 8%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #ffffff8c ;
+      height: 100%;
+      cursor: pointer;
+      &:hover{
+        color: white;
+      }
+    }
+  }
+}
+</style>

src/views/equip/detail.vue

@@ -0,0 +1,506 @@
+<template>
+    <div class="equipDetail">
+        <div class="top">
+            <div class="showImg">
+                <showImg></showImg>
+            </div>
+            <div class="baseInfo">
+                <div class="equipInfo">
+                    <div class="left">
+                        <div class="title">
+                            <div class="name">
+                                220El履带挖掘机
+                            </div>
+                            <div class="tag">
+                                <div class="item">
+                                    待租
+                                </div>
+                                <div class="item otherItem">
+                                    已审核
+                                </div>
+                            </div>
+                        </div>
+                        <div class="viewNnum">
+                            浏览1000+
+                        </div>
+                        <div class="infoBox">
+                            <div class="item" v-for="(v,i) in equipBaseInfoList" :key="i">
+                                <div class="label">
+                                    {{ v.label }}：
+                                </div>
+                                <div class="value">
+                                    操作重量：22吨 铲斗容量：1立方亩
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                    <div class="right">
+                        <div class="price">
+                            ￥<span>18500</span>/月
+                        </div>
+                        <div class="options">
+                            <div class="item contact">
+                                联系商家
+                            </div>
+                            <div class="item applyFor">
+                                我要租
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="businessInfo">
+                    <img class="bgCar" src="@/assets/img/equipDetail/gouwu.png">
+
+                    <div class="business">
+                        <img src="https://img0.baidu.com/it/u=3896113677,3541736724&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701709200&t=0b8dabbcda79511d6d18aaed664132fd" class="avatar">
+                        <div class="fonts">
+                            <div class="name">珠海嘉昌设备有限责任公司</div>
+                            <div class="other">
+                                <div class="item" v-for="(v,i) in businessList" :key="i">
+                                    <div class="label">
+                                        {{ v.label }}：
+                                    </div>
+                                    <div class="value">
+                                        111111111{{ v.key }}{{v.unit}}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="detail">
+            <div class="publicTitle">
+                装备详情
+            </div>
+            <div class="publicLine"></div>
+            <div class="list publicContent">
+               <div class="item" v-for="(v,i) in equipDetailKeyList" :key="i">
+                   <div class="label">
+                       {{ v.label }}：
+                   </div>
+                   <div :class="v.fn ? 'fnValue' :'value'">
+                          111111111111
+                   </div>
+               </div>
+            </div>
+        </div>
+        <div class="appearance">
+            <div class="publicTitle">
+                装备外观
+            </div>
+            <div class="publicLine"></div>
+            <div class="urlList publicContent">
+                <img :src="v" v-for="(v,i) in testUrl" :key="i">
+            </div>
+        </div>
+        <div class="recommend">
+            <div class="publicTitle">
+                <div>为您推荐</div>
+
+                <div class="change">
+                    换一批
+                </div>
+            </div>
+            <div class="content">
+                <equip-card class="item" v-for="(v,i) in 3" :key="i" :id="i"></equip-card>
+            </div>
+
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import ShowImg from "./comoonents/showImg.vue"
+import { reactive, ref} from "vue";
+import EquipCard from "@/compontents/equipCard.vue";
+
+//设备简略基本信息
+const equipBaseInfoList = reactive([
+    {
+        label:'设备规格',
+        key:''
+    },{
+        label:'设备单位',
+        key:''
+    },{
+        label:'配备机手',
+        key:''
+    },{
+        label:'发布时间',
+        key:''
+    },{
+        label:'更新时间',
+        key:''
+    },
+])
+//商家标签信息
+const businessList = reactive([
+    {
+        label:'入驻时间',
+        key:'',
+        unit:''
+    },{
+        label:'上架数量',
+        key:'',
+        unit:''
+    },{
+        label:'访问量',
+        key:'',
+        unit:'次'
+    },
+])
+
+const equipDetailKeyList = reactive([
+    {
+        label:'装备编号',
+        key:'',
+        fn:'',
+        arg:''
+    },{
+        label:'装备类别',
+        key:'',
+        fn:'',
+        arg:''
+    },{
+        label:'装备组别',
+        key:'',
+        fn:'',
+        arg:''
+    },{
+        label:'装备名称',
+        key:'',
+        fn:'',
+        arg:''
+    },{
+        label:'规格/操作重量',
+        key:'',
+        fn:'',
+        arg:''
+    },{
+        label:'品牌',
+        key:'',
+        fn:'',
+        arg:''
+    },{
+        label:'装备型号',
+        key:'',
+        fn:'',
+        arg:''
+    },{
+        label:'序列号码',
+        key:'',
+        fn:'',
+        arg:''
+    },{
+        label:'出场时间',
+        key:'',
+        fn:'',
+        arg:''
+    },{
+        label:'工作时长',
+        key:'',
+        fn:'',
+        arg:''
+    },{
+        label:'检验信息',
+        key:'',
+        fn:'1',
+        arg:''
+    },{
+        label:'保险信息',
+        key:'',
+        fn:'2',
+        arg:''
+    }
+])
+
+const testUrl = [
+    'https://img0.baidu.com/it/u=3182669744,3015526205&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+    'https://img2.baidu.com/it/u=2078785911,1809964779&fm=253&fmt=auto&app=138&f=JPEG?w=746&h=500',
+    'https://img1.baidu.com/it/u=3893389324,4043822814&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
+]
+
+const fn = () => {
+    console.log('fn 111111111111111111111')
+}
+
+const that = {
+    fn
+}
+
+
+
+
+
+</script>
+<style scoped lang="scss">
+.equipDetail{
+    .top{
+        display: flex;
+        margin-bottom: 50px;
+        .showImg{
+          width: 38%;
+          border-radius: 15px;
+          overflow: hidden;
+          margin-right: 30px;
+        }
+        .baseInfo{
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          .equipInfo{
+            display: flex;
+            .left{
+              margin-right: 5px;
+              .title{
+                display: flex;
+                align-items: center;
+                .name{
+                  font-size: 24px;
+                  font-family: PingFangSC, PingFang SC;
+                  font-weight: 600;
+                  color: #000000;
+                }
+                .tag{
+                  display: flex;
+                  align-items: center;
+                  .item{
+                    font-size: 13px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    color: #005AF2;
+                    margin-left: 15px;
+                    padding: 2px 10px;
+                    border: 1px solid #005AF2;
+                    border-radius: 4px;
+                  }
+                  .otherItem{
+                    border-color: #FF6734;
+                    color: #FF6734;
+                  }
+                }
+              }
+              .viewNnum{
+                font-size: 13px;
+                font-family: PingFangSC, PingFang SC;
+                font-weight: 500;
+                color: #BCBCBC;
+                margin-top: 10px;
+              }
+              .infoBox{
+                margin-top: 20px;
+                .item{
+                  display: flex;
+                  align-items: center;
+                  margin-bottom: 18px;
+                  .label{
+                    font-size: 15px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 600;
+                    color: #8E8E8E;
+                    margin-right: 15px;
+                  }
+                  .value{
+                    font-size: 15px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 600;
+                    color: #333333;
+                  }
+                }
+              }
+            }
+            .right{
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              .price{
+                font-size: 15px;
+                font-weight: 500;
+                font-family: PingFangSC, PingFang SC;
+                color: #FF4800;
+                text-align: right;
+                span{
+                  font-size: 30px;
+                  font-weight: 600;
+                }
+              }
+              .options{
+                display: flex;
+                justify-content: flex-end;
+
+                .item{
+                  width: 110px;
+                  height: 40px;
+                  line-height: 40px;
+                  border-radius: 4px;
+                  font-size: 18px;
+                  font-weight: 600;
+                  text-align: center;
+                }
+                .contact{
+
+                  color: #FFFFFF;
+                  background: #3CABFF;
+                  margin-right: 20px;
+                }
+                .applyFor{
+                  border: 1px solid #3CABFF;
+                  color: #3CABFF;
+                  box-sizing: border-box;
+                  line-height: 38px;
+
+                }
+              }
+            }
+          }
+          .businessInfo{
+            width: 100%;
+            height: 147px;
+            background: #F7F9FA;
+            border-radius: 15px;
+            position: relative;
+            box-sizing: border-box;
+            padding: 25px 15px;
+              .bgCar{
+                position: absolute;
+                top: 0;
+                right: 0;
+                height: 100%;
+                z-index: 0;
+              }
+
+            .business{
+              display: flex;
+              align-items: center;
+              .avatar{
+                width: 65px;
+                height: 65px;
+                border-radius: 100%;
+                margin-right: 10px;
+              }
+              .fonts{
+                .name{
+                  font-size: 20px;
+                  font-family: PingFangSC, PingFang SC;
+                  font-weight: 600;
+                  color: #333333;
+                  margin-bottom: 12px;
+                }
+                .other{
+                  display: flex;
+                  .item{
+                    font-size: 14px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    color: #333333;
+                    display: flex;
+                    margin-right: 15px;
+                    .label{
+
+                    }
+                    .value{
+
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+    }
+
+    .publicTitle{
+      font-size: 20px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      color: #333333;
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .publicLine{
+      width: 100%;
+      height: 12px;
+      border-bottom: 1px solid #E0E0E0;
+      position: relative;
+      &:before{
+        content: '';
+        height: 3px;
+        width: 40px;
+        background: #2282FF;
+        border-radius: 2px;
+        position: absolute;
+        bottom: -1px;
+        left: 20px;
+      }
+    }
+    .publicContent{
+      box-sizing: border-box;
+      padding: 40px 70px 10px;
+    }
+
+    .detail{
+        .list{
+          display: flex;
+          flex-wrap: wrap;
+            .item{
+              width: calc(100% / 3);
+              font-size: 16px;
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 600;
+              display: flex;
+              margin-bottom: 35px;
+              .label{
+                color: #8E8E8E;
+
+              }
+              .value{
+
+                color: #333333;
+              }
+              .fnValue {
+
+                color: #0087CD;
+              }
+            }
+        }
+    }
+
+    .appearance{
+      margin-bottom: 20px;
+      .urlList{
+        img{
+          width: 100%;
+        }
+      }
+    }
+
+  .recommend{
+      .change{
+        font-size: 14px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 500;
+        color: #9D9D9D;
+        cursor: pointer;
+      }
+
+    .content{
+        margin-top: 20px;
+        width: 100%;
+        display: flex;
+        .item{
+          width: calc((100% - 40px) / 3);
+          &:nth-child(3n - 1){
+            margin: 0 20px;
+          }
+        }
+    }
+  }
+}
+</style>

src/views/equip/list.vue

@@ -1,416 +1,488 @@
 <template>
-  <div class="equipList">
-      <div class="showScreen">
-          <div class="title">
-              筛选条件：
-          </div>
-          <div class="tags">
-              <el-tag
-                      v-for="(tag,i) in screenTags"
-                      :key="tag.id"
-                      class="item"
-                      @close="handleClose(tag,i)"
-                      closable
-              >
-                  {{ tag.label }}
-              </el-tag>
-          </div>
-      </div>
+    <div class="equipList">
+        <div class="showScreen">
+            <div class="title">
+                筛选条件：
+            </div>
+            <div class="tags">
+                <el-tag
+                        v-for="(tag,i) in screenTags"
+                        :key="tag.id"
+                        class="item"
+                        @close="handleClose(tag,i)"
+                        closable
+                >
+                    {{ tag.name }}
+                </el-tag>
+                <el-tag class="item"
+                        v-if="screenTags.length > 0"
+                        type="danger"
+                        @close="tagClear"
+                        closable>
+                    清空所有条件
+                </el-tag>
+            </div>
+        </div>
 
-      <div class="screen">
-          <div class="choose">
-              <div class="line" v-for="(v,i) in screenChooseList" :key="i">
-                    <div class="label">
-                        {{ v.list[v.index].name }}
-                    </div>
-                    <div class="select">
-                        <div class="item" v-for="(val,index) in v.list[v.index].select" :key="index">
-                            {{ val.name }}
+        <div class="screen">
+            <div class="choose">
+                <template v-for="(v,i) in screenChooseList">
+                    <div class="line" v-if="v.index < v.list.length " :key="i">
+                        <div class="label">
+                            {{ v.list[v.index].name }}
+                        </div>
+                        <div class="select">
+                            <div class="item"
+                                 @click="selectScreen(i,val,v.index)"
+                                 v-for="(val,index) in v.list[v.index].select" :key="index">
+                                {{ val.name }}
+                            </div>
                         </div>
                     </div>
-              </div>
-          </div>
-          <div class="btns">
-              <div class="item"
-                   @click="changeOption(v)"
-                   :class="v.id == optionActive && 'active'"
-                   v-for="(v,i) in screenOptionList" :key="i">
-                  {{ v.name }}
-              </div>
-          </div>
-      </div>
+                </template>
 
-      <div class="showList">
-          <equip-card class="card" v-for="(v,i) in 10" :key="i"></equip-card>
-      </div>
+            </div>
+            <div class="btns">
+                <div class="item"
+                     @click="changeOption(v)"
+                     :class="v.id == optionActive && 'active'"
+                     v-for="(v,i) in screenOptionList" :key="i">
+                    {{ v.name }}
+                    <template v-if="v.sort">
+                        <el-icon class="icon" v-show="v.sort == 'asc' && v.id == optionActive"><CaretTop /></el-icon>
+                        <el-icon class="icon" v-show="v.sort == 'desc' && v.id == optionActive"><CaretBottom /></el-icon>
+                    </template>
+                </div>
+            </div>
+        </div>
 
-      <div class="pagination">
-          <el-pagination
-              :page-size="20"
-              :pager-count="11"
-              layout="prev, pager, next"
-              :total="1000"
-          />
-      </div>
-  </div>
+        <div class="showList">
+            <equip-card class="card" v-for="(v,i) in 10" :key="i" :id="i" @on-click="toDetail"></equip-card>
+        </div>
+
+        <div class="pagination">
+            <el-pagination
+                    :page-size="20"
+                    :pager-count="11"
+                    layout="prev, pager, next"
+                    :total="1000"
+            />
+        </div>
+    </div>
 </template>
 <script lang="ts" setup>
-import {reactive, ref} from "vue";
+import {computed, reactive, ref} from "vue";
 import EquipCard from "@/compontents/equipCard.vue";
+import {useRouter} from "vue-router";
+import { getList } from "@/http/api/equip"
+const router = useRouter()
+//筛选条件列表数据
+const screenChooseList = reactive([
+    {
+        name: 'address',
+        index: 0,
+        select: [],
+        list: [
+            {
+                name: '省份',
+                value: '',
+                parent: 'address',
+                select: [
+                    {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '上海'
+                    }, {
+                        id: 1,
+                        name: '北京'
+                    }, {
+                        id: 1,
+                        name: '四川'
+                    }, {
+                        id: 1,
+                        name: '河南'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    },
+                ]
+            },
+            {
+                name: '城市',
+                value: '',
+                parent: 'address',
+                select: [
+                    {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    }, {
+                        id: 1,
+                        name: '安徽'
+                    },
+                ]
+            }
+        ]
+    },
+    {
+        name: 'type',
+        index: 0,
+        select: [],
+        list: [
+            {
+                name: '类别',
+                value: '',
+                parent: 'type',
+                select: [
+                    {
+                        id: 1,
+                        name: '挖掘机械'
+                    }, {
+                        id: 1,
+                        name: '土方机械'
+                    },
+                ]
+            },
+            {
+                name: '组别',
+                value: '',
+                parent: 'type',
+                select: [
+                    {
+                        id: 1,
+                        name: '组别1'
+                    },
+                ]
+            },
+            {
+                name: '产品名称',
+                value: '',
+                parent: 'type',
+                select: [
+                    {
+                        id: 1,
+                        name: '产品1'
+                    }, {
+                        id: 1,
+                        name: '产品2'
+                    }, {
+                        id: 1,
+                        name: '产品3'
+                    },
+                ]
+            }
+        ]
+    },
+    {
+        name: 'rent',
+        index: 0,
+        select: [],
+        list: [
+            {
+                name: '租金区间',
+                value: '',
+                parent: 'rent',
+                select: [{
+                    id: 1,
+                    name: '5千元以下'
+                }, {
+                    id: 1,
+                    name: '5千-1万'
+                }, {
+                    id: 1,
+                    name: '1万-5万'
+                }, {
+                    id: 1,
+                    name: '5万-10万'
+                },]
+            }
+        ]
+    },
+    {
+        name: 'age',
+        index: 0,
+        select: [],
+        list: [
+            {
+                name: '设备机龄',
+                value: '',
+                parent: 'rent',
+                select: [{
+                    id: 1,
+                    name: '一年以下'
+                }, {
+                    id: 1,
+                    name: '1年-3年'
+                }, {
+                    id: 1,
+                    name: '3年-6年'
+                }, {
+                    id: 1,
+                    name: '10年以上'
+                }]
+            }
+        ]
+    },
+    {
+        name: 'time',
+        index: 0,
+        select: [],
+        list: [
+            {
+                name: '工作小时',
+                value: '',
+                parent: 'time',
+                select: [{
+                    id: 1,
+                    name: '500小时以内'
+                }, {
+                    id: 1,
+                    name: '500-2000小时'
+                }, {
+                    id: 1,
+                    name: '2000-5000小时'
+                }, {
+                    id: 1,
+                    name: '5000-10000小时'
+                }, {
+                    id: 1,
+                    name: '10000小时以上'
+                },]
+            }
+        ]
+    }
+])
 
-  const screenTags = reactive([
-      {
-        id:1,
-        label:'广东省1'
-      },{
-          id:1,
-          label:'广东省2'
-      },{
-          id:1,
-          label:'广东省3'
-      },{
-          id:1,
-          label:'广东省4'
-      },{
-          id:1,
-          label:'广东省5'
-      },{
-          id:1,
-          label:'广东省6'
-      }
-  ])
+// 综合排序 更新时间 月租金 排序按钮
+const screenOptionList = reactive([
+    {
+        name: '综合排序',
+        id: '1',
+        sort: ''
+    }, {
+        name: '更新时间',
+        id: '2',
+        sort: 'asc' //asc or desc
+    }, {
+        name: '月租金',
+        id: '3',
+        sort: 'asc'
+    },
+])
+//激活 排序按钮
+const optionActive = ref('1')
+//显示的被选中的筛选条件
+const screenTags = computed<Array<any>>(() => {
+    let arr = []
+    screenChooseList.forEach(key => {
+        arr = [...arr,...key.select]
+    })
+    return arr
+})
 
-  const screenChooseList = reactive([
-      {
-          name:'address',
-          index:0,
-          list:[
-              {
-                  name:'省份',
-                  value:'',
-                  parent:'address',
-                  select:[
-                      {
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'上海'
-                      },{
-                          id:1,
-                          name:'北京'
-                      },{
-                          id:1,
-                          name:'四川'
-                      },{
-                          id:1,
-                          name:'河南'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },
-                  ]
-              },
-              {
-                  name: '城市',
-                  value:'',
-                  parent:'address',
-                  select: [
-                      {
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },
-                  ]
-              }
-          ]
-      },
-      {
-          name:'type',
-          index:0,
-          list:[
-              {
-                  name:'类别',
-                  value:'',
-                  parent:'type',
-                  select:[
-                      {
-                          id:1,
-                          name:'挖掘机械'
-                      },{
-                          id:1,
-                          name:'土方机械'
-                      },
-                  ]
-              },
-              {
-                  name: '组别',
-                  value:'',
-                  parent:'type',
-                  select: [
-                      {
-                          id:1,
-                          name:'安徽'
-                      },
-                  ]
-              },
-              {
-                  name: '产品名称',
-                  value:'',
-                  parent:'type',
-                  select: [
-                      {
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },{
-                          id:1,
-                          name:'安徽'
-                      },
-                  ]
-              }
-          ]
-      },
-      {
-          name:'rent',
-          index:0,
-          list:[
-              {
-                  name:'租金区间',
-                  value:'',
-                  parent:'rent',
-                  select:[{
-                      id:1,
-                      name:'5千元以下'
-                  },{
-                      id:1,
-                      name:'5千-1万'
-                  },{
-                      id:1,
-                      name:'1万-5万'
-                  },{
-                      id:1,
-                      name:'5万-10万'
-                  },]
-              }
-          ]
-      },
-      {
-          name:'age',
-          index:0,
-          list:[
-              {
-                  name:'设备机龄',
-                  value:'',
-                  parent:'rent',
-                  select:[{
-                      id:1,
-                      name:'一年以下'
-                  },{
-                      id:1,
-                      name:'1年-3年'
-                  },{
-                      id:1,
-                      name:'3年-6年'
-                  },{
-                      id:1,
-                      name:'10年以上'
-                  }]
-              }
-          ]
-      },
-      {
-          name:'time',
-          index:0,
-          list:[
-              {
-                  name:'工作小时',
-                  value:'',
-                  parent:'time',
-                  select:[{
-                      id:1,
-                      name:'500小时以内'
-                  },{
-                      id:1,
-                      name:'500-2000小时'
-                  },{
-                      id:1,
-                      name:'2000-5000小时'
-                  },{
-                      id:1,
-                      name:'5000-10000小时'
-                  },{
-                      id:1,
-                      name:'10000小时以上'
-                  },]
-              }
-          ]
-      }
-  ])
+//删除条件
+const handleClose = (tag, index) => {
+    screenChooseList[tag.parentIndex].select.splice(tag.index)
+    screenChooseList[tag.parentIndex].index = tag.index
+}
+//清除所有标签
+const tagClear = () => {
+    screenChooseList.forEach(key => {
+        key.select = []
+        key.index = 0
+    })
+}
+
+const changeOption = (val) => {
+    if(val.sort && optionActive.value == val.id){
+        val.sort = val.sort == 'asc' ? 'desc' : 'asc'
+    }
+    optionActive.value = val.id
+
+}
+
+//选中后添加到 大类中的select字段
+const selectScreen = (parentIndex, val, index) => {
+    screenChooseList[parentIndex].select.push(
+        {
+            ...val,
+            index,
+            parentIndex
+        }
+    )
+    screenChooseList[parentIndex].index++
+}
+
+//装备card被点击
+const toDetail = (data) => {
+    router.push({
+        path:`/equipDetail/${data.id}`
+    })
+}
+
+const getData = async () => {
+    const res = await getList()
+    console.log('res ============',res)
+}
+const init = () => {
+    getData()
+}
+init()
 
-  const screenOptionList = reactive([
-      {
-          name:'综合排序',
-          id:'1',
-          sort:''
-      },{
-          name:'更新时间',
-          id:'2',
-          sort:''
-      },{
-          name:'月租金',
-          id:'3',
-          sort:''
-      },
-  ])
 
-  const optionActive = ref('1')
 
-  const handleClose = (tag,index) => {
-      screenTags.splice(index,1)
-  }
 
-  const changeOption = (val) => {
-      optionActive.value =  val.id
-  }
 </script>
 <style lang="scss" scoped>
-  .equipList{
+.equipList {
 
-      .showScreen{
-          display: flex;
-          align-items: center;
-          .title{
-              font-size: 16px;
-              font-weight: 500;
-              color: #949494;
-          }
-          .tags{
-              .item{
-                  margin-left: 10px;
-              }
-          }
-      }
-
-      .screen{
-          .choose{
-              margin-top: 20px;
-              .line{
-                  display: flex;
-                  border-bottom: 1px solid #dddddd;
-
-                  .label{
-                      width: 100px;
-                      box-sizing: border-box;
-                      padding: 15px;
-                      background: #f3f3f3;
-                      font-size: 16px;
-                  }
-                  .select{
-                      flex: 1;
-                      display: flex;
-                      flex-wrap: wrap;
-                      box-sizing: border-box;
-                      padding: 15px;
-                      .item{
-                          margin-right: 15px;
-                          cursor: pointer;
-                          color: #939393;
-                          font-size: 15px;
-                          &:hover{
-                              color: red;
-                          }
-                      }
-                  }
-              }
-          }
-          .active{
-              color: #1069FF !important;
-          }
-          .btns{
-              display: flex;
-              align-items: center;
-              margin-top: 20px;
-              .item{
-                  background: #F7F9FA;
-                  border-radius: 12px;
-                  padding: 10px 20px;
-
-                  font-size: 17px;
-                  font-weight: 500;
-                  color: #9D9D9D;
-                  margin-right: 10px;
-                  cursor: pointer;
-              }
-          }
-      }
-
-      .showList{
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-          .card{
-              width: calc((100% - 40px) / 3);
-              &:nth-child(3n - 1){
-                  margin: 0 20px;
-              }
-              margin-top: 15px !important;
-          }
-      }
-
-      .pagination{
-          margin-top: 20px;
-          display: flex;
-          justify-content: flex-end;
+  .showScreen {
+    display: flex;
+    align-items: center;
+    height: 30px;
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #949494;
+    }
+
+    .tags {
+      .item {
+        margin-left: 10px;
       }
+    }
   }
+
+  .screen {
+    .choose {
+      margin-top: 20px;
+
+      .line {
+        display: flex;
+        border-bottom: 1px solid #dddddd;
+
+        .label {
+          width: 100px;
+          box-sizing: border-box;
+          padding: 15px;
+          background: #f3f3f3;
+          font-size: 16px;
+        }
+
+        .select {
+          flex: 1;
+          display: flex;
+          flex-wrap: wrap;
+          box-sizing: border-box;
+          padding: 15px;
+
+          .item {
+            margin-right: 15px;
+            cursor: pointer;
+            color: #939393;
+            font-size: 15px;
+
+            &:hover {
+              color: red;
+            }
+          }
+        }
+      }
+    }
+
+    .active {
+      color: #1069FF !important;
+    }
+
+    .btns {
+      display: flex;
+      align-items: center;
+      margin-top: 20px;
+
+      .item {
+        background: #F7F9FA;
+        border-radius: 12px;
+        padding: 10px 20px;
+
+        font-size: 17px;
+        font-weight: 500;
+        color: #9D9D9D;
+        margin-right: 10px;
+        cursor: pointer;
+        user-select: none;
+          .icon{
+              font-size: 15px;
+          }
+      }
+    }
+  }
+
+  .showList {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .card {
+      width: calc((100% - 40px) / 3);
+
+      &:nth-child(3n - 1) {
+        margin: 0 20px;
+      }
+
+      margin-top: 15px !important;
+    }
+  }
+
+  .pagination {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 </style>

src/views/home/index.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
     import EquipCard from '@/compontents/equipCard.vue'
     import Navmenu from '@/compontents/Navmenu/index.vue'
+    import { useStore } from 'store/main.ts'
+    const userStore = useStore()
+    onMounted(() => {
+        console.log(userStore.token, '****')
+    })
 
     const leftNavList = [
         {

vite.config.ts

@@ -7,8 +7,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import { createHtmlPlugin } from 'vite-plugin-html'
-import moment from 'moment'
-import { env } from 'node:process'
 
 
 // @ts-ignore
@@ -70,8 +68,8 @@ export default ({ mode }: any) => {
       preprocessorOptions: {
         scss: {
           // 两种方式都可以
-          additionalData:
-            "@import '@/style/scss/variable.scss';@import '@/style/scss/mixin.scss';@import '@/style/scss/vantReset.scss';"
+          additionalData: ''
+          // "@import '@/style/scss/index.scss';"
 
         }
       }
@@ -82,42 +80,42 @@ export default ({ mode }: any) => {
       // open: envInfo.VITE_OPEN,
       proxy: {
         '/proxyApi': {
-          target: 'http://10.40.92.185:9200',
+          target: envInfo.VITE_proxyTarget,
           secure: false,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/proxyApi/, ''),
           configure: (proxy, _options) => {
             proxy.on('error', (err, _req, _res) => {
-              console.log('proxy error', err)
+              // console.log('proxy error', err)
             })
 
             proxy.on('start', (req, res, target) => {
-              console.log(
-                'Proxy Start:',
-                req.method,
-                req.url,
-                req.headers,
-                _options
-              )
+              // console.log(
+              //   'Proxy Start:',
+              //   req.method,
+              //   req.url,
+              //   req.headers,
+              //   _options
+              // )
             })
             proxy.on('proxyReq', (proxyReq, req, _res) => {
-              console.log(
-                'Sending Request to the Target:',
-                req.method,
-                req.url,
-                req.headers,
-                _options
-              )
+              // console.log(
+              //   'Sending Request to the Target:',
+              //   req.method,
+              //   req.url,
+              //   req.headers,
+              //   _options
+              // )
               proxyReq.removeHeader('origin')
               // 跨域解决
             })
             proxy.on('proxyRes', (proxyRes, req, _res) => {
-              console.log(
-                'Received Response from the Target:',
-                proxyRes.statusCode,
-                proxyRes.headers,
-                req.url
-              )
+              // console.log(
+              //   'Received Response from the Target:',
+              //   proxyRes.statusCode,
+              //   proxyRes.headers,
+              //   req.url
+              // )
             })
           }
         }
@@ -128,7 +126,7 @@ export default ({ mode }: any) => {
     },
     envDir: 'env',
     build: {
-      outDir: 'dist/' + pjson.name,
+      outDir: 'dist/' + pjson.name + '-' + envInfo.VITE_BUILD_MODE,
       emptyOutDir: true,
       terserOptions: {
         compress: {