From 1dc9468dbf3cda42a49296246fe7dd4c56e54484 Mon Sep 17 00:00:00 2001
From: wlikett <2331964395@qq.com>
Date: Tue, 5 Dec 2023 09:45:01 +0800
Subject: [PATCH] change

---
 src/http/api/equip.ts                  |  9 ++-
 src/http/index.ts                      | 15 ++++-
 src/router/index.ts                    |  5 +-
 src/store/main.ts                      |  2 +-
 src/views/AppMain.vue                  | 26 ++++++--
 src/views/equip/comoonents/showImg.vue | 36 ++++++++---
 src/views/equip/detail.vue             | 70 ++++++++++++++++++---
 src/views/equip/list.vue               | 85 +++++++++++++++++++++++---
 8 files changed, 207 insertions(+), 41 deletions(-)

diff --git a/src/http/api/equip.ts b/src/http/api/equip.ts
index 30f8834..8dc3a25 100644
--- a/src/http/api/equip.ts
+++ b/src/http/api/equip.ts
@@ -1,5 +1,10 @@
 import { post,get } from '../index'
 
-export const getList = () => {
-    return get('/dev/list',{})
+// 获取装备列表
+export const getList = (params = {}) => {
+    return post('/dev/list',params)
+}
+
+export const getDetail = (id = '') => {
+    return get(`/dev/${id}`)
 }
diff --git a/src/http/index.ts b/src/http/index.ts
index 4b9db14..fba0d52 100644
--- a/src/http/index.ts
+++ b/src/http/index.ts
@@ -3,11 +3,14 @@
 import axios from 'axios'
 import NProgress from 'nprogress'
 import { useStore } from 'store/main'
+import {ElMessage} from "element-plus";
+import router from "@/router"
 const store = useStore()
 // const CancelToken = axios.CancelToken
 // const source = CancelToken.source()
 const baseUrl = import.meta.env.VITE_API_URL
 // const mode = import.meta.env.VITE_BUILD_MODE
+
 const service = axios.create({
     baseURL: baseUrl,
     timeout: 60000
@@ -15,7 +18,7 @@ const service = axios.create({
 
 service.interceptors.request.use(
     (config) => {
-        config.headers['Authorization'] = "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6Ijc5MjRkNDc1LTRjMmUtNGViYy05ZDU0LTA2NzNmNWU0MDhiMyIsInVzZXJuYW1lIjoiYWRtaW4ifQ.M3H9jHnfFAKJ3szdiDb79hIHfiS8AWvaI51mP65l01Q2G0jcLSTvjlub8FykYV3A27If7V6GBRo83u8spRDquw"
+        config.headers['Authorization'] = store.token
         return config
     },
     (error) => {
@@ -25,7 +28,15 @@ service.interceptors.request.use(
 // 响应拦截
 service.interceptors.response.use(
     (res) => {
-        return res.data
+        const { data } = res
+        if(data.code == '200'){
+            return data
+        }else if(data.code == '403'){
+            ElMessage.error('请重新登录')
+            router.push('/login')
+        }else{
+            return data
+        }
     },
     (error) => {
 
diff --git a/src/router/index.ts b/src/router/index.ts
index a25cfee..b5c1669 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -208,12 +208,11 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
     const store = useStore()
 
-    if (store.token) {
+    if (store.token || to.path == '/login') {
         next()
     } else {
-        next({ path: '/login' })
+        next('/login')
     }
-
     // chrome
     document.body.scrollTop = 0;
     // firefox 兼容火狐
diff --git a/src/store/main.ts b/src/store/main.ts
index 4ce20b3..330389a 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -2,7 +2,7 @@ export const useStore = defineStore('main', {
     state: () => {
         return {
             loadingFlag: false, //loading控制,
-            token: ''
+            token: 'eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6Ijc5MjRkNDc1LTRjMmUtNGViYy05ZDU0LTA2NzNmNWU0MDhiMyIsInVzZXJuYW1lIjoiYWRtaW4ifQ.M3H9jHnfFAKJ3szdiDb79hIHfiS8AWvaI51mP65l01Q2G0jcLSTvjlub8FykYV3A27If7V6GBRo83u8spRDquw'
         }
     },
     getters: {},
diff --git a/src/views/AppMain.vue b/src/views/AppMain.vue
index 6900f07..2906f08 100644
--- a/src/views/AppMain.vue
+++ b/src/views/AppMain.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
     import FooterInfo from '../compontents/FooterInfo/index.vue'
+    import {useRouter} from "vue-router";
+    import $bus from "@/utils/bus"
     const route = useRoute()
-
+    const router = useRouter()
     // 判断是否是个人中心页面 如果是则隐藏页脚
     const isMyInfoPage = () => {
         if (route.path.indexOf('myuser') === -1) {
@@ -23,16 +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
     }
+    //页面刷新回显模糊搜索词
+    $bus.on('callBackText',(val) => {
+        nextTick(() => {
+            keywordIptValue.value = val
+        })
+    })
 
-    onMounted(() => {})
+
+    onMounted(() => {
+
+    })
 </script>
 
 <template>
diff --git a/src/views/equip/comoonents/showImg.vue b/src/views/equip/comoonents/showImg.vue
index b8de8f4..62fdb63 100644
--- a/src/views/equip/comoonents/showImg.vue
+++ b/src/views/equip/comoonents/showImg.vue
@@ -1,18 +1,20 @@
 <template>
     <div class="equipShowImg">
         <div class="show">
-            <img :src="activeUrl">
+            <img :src="urlList[activeUrl]">
         </div>
         <div class="loop">
-            <div class="prev btn">
+            <div class="prev btn" @click="changeActive(-1)">
                 <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 class="line" :style="`transform: translateX(calc((-100% - 10px) / 3 * ${activeUrl - 3}))`">
+                    <div class="item" @mouseenter="mouseenter($event,i)" :class="i == activeUrl && 'activeUrl'" v-for="(v,i) in urlList" :key="i">
+                        <img :src="v">
+                    </div>
                 </div>
             </div>
-            <div class="next btn">
+            <div class="next btn" @click="changeActive(1)">
                 <el-icon><ArrowRightBold /></el-icon>
             </div>
         </div>
@@ -33,10 +35,11 @@
       }
   })
 
-  const activeUrl = ref('')
-
+  //激活图片下标
+  const activeUrl = ref(0)
+    
   const init = () => {
-      activeUrl.value = props.urlList ? props.urlList[0] : ''
+
   }
   init()
 
@@ -44,6 +47,15 @@
       activeUrl.value = val
   }
 
+  const changeActive = (val) => {
+      activeUrl.value = activeUrl.value + val
+      if(activeUrl.value < 0){
+          activeUrl.value = 0
+      }else if(activeUrl.value == props.urlList?.length){
+          activeUrl.value = props.urlList.length - 1
+      }
+  }
+
 </script>
 <style lang="scss" scoped>
 .equipShowImg{
@@ -83,9 +95,13 @@
         flex: 1;
         overflow: hidden;
 
-        display: flex;
-        align-items: center;
+
         height: 100%;
+        .line{
+            height: 100%;
+            display: flex;
+            align-items: center;
+        }
         .item{
             height: 100%;
             margin-right: 5px;
diff --git a/src/views/equip/detail.vue b/src/views/equip/detail.vue
index 9a5f760..dd64f78 100644
--- a/src/views/equip/detail.vue
+++ b/src/views/equip/detail.vue
@@ -29,15 +29,22 @@
                                     {{ v.label }}：
                                 </div>
                                 <div class="value">
-                                    操作重量：22吨 铲斗容量：1立方亩
+                                    {{ detailData[v.key] }}
                                 </div>
                             </div>
                         </div>
 
                     </div>
                     <div class="right">
-                        <div class="price">
-                            ￥<span>18500</span>/月
+                        <div class="Top">
+                            <div class="price">
+                                ￥<span>{{ detailData.monthLeasePrice }}</span>/月
+                            </div>
+                            <div class="collect" @click="collectChange">
+                                <el-icon class="no" v-show="!isCollect"><Star /></el-icon>
+                                <el-icon class="yes" v-show="isCollect"><StarFilled /></el-icon>
+                                {{ isCollect ? '装备已收藏' : '收藏装备' }}
+                            </div>
                         </div>
                         <div class="options">
                             <div class="item contact">
@@ -55,7 +62,7 @@
                     <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="name">{{ detailData.companyName }}</div>
                             <div class="other">
                                 <div class="item" v-for="(v,i) in businessList" :key="i">
                                     <div class="label">
@@ -116,7 +123,10 @@
 import ShowImg from "./comoonents/showImg.vue"
 import { reactive, ref} from "vue";
 import EquipCard from "@/compontents/equipCard.vue";
+import {getDetail} from "@/http/api/equip"
+import {useRoute} from "vue-router";
 
+const route = useRoute()
 //设备简略基本信息
 const equipBaseInfoList = reactive([
     {
@@ -124,16 +134,16 @@ const equipBaseInfoList = reactive([
         key:''
     },{
         label:'设备单位',
-        key:''
+        key:'companyName'
     },{
         label:'配备机手',
         key:''
     },{
         label:'发布时间',
-        key:''
+        key:'createTime'
     },{
         label:'更新时间',
-        key:''
+        key:'updateTime'
     },
 ])
 //商家标签信息
@@ -223,6 +233,11 @@ const testUrl = [
     'https://img1.baidu.com/it/u=3893389324,4043822814&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800'
 ]
 
+//装备详情数据
+const detailData = ref({})
+//是否收藏装备
+const isCollect = ref(false)
+
 const fn = () => {
     console.log('fn 111111111111111111111')
 }
@@ -231,9 +246,22 @@ const that = {
     fn
 }
 
+//获取装备详情数据
+const getPageData = async () => {
+    const res = await getDetail(route.params.id)
+    detailData.value = res.data
+    console.log(detailData.value)
+}
 
+const collectChange = () => {
+    isCollect.value = !isCollect.value
+}
 
-
+//模拟created
+const init = () => {
+    getPageData()
+}
+init()
 
 </script>
 <style scoped lang="scss">
@@ -305,9 +333,8 @@ const that = {
                     margin-right: 15px;
                   }
                   .value{
-                    font-size: 15px;
+                    font-size: 14px;
                     font-family: PingFangSC, PingFang SC;
-                    font-weight: 600;
                     color: #333333;
                   }
                 }
@@ -318,7 +345,11 @@ const that = {
               display: flex;
               flex-direction: column;
               justify-content: space-between;
+                .Top{
+                    width: 100%;
+                }
               .price{
+                 width: 100%;
                 font-size: 15px;
                 font-weight: 500;
                 font-family: PingFangSC, PingFang SC;
@@ -329,11 +360,30 @@ const that = {
                   font-weight: 600;
                 }
               }
+                .collect{
+                    user-select: none;
+                    margin-top: 10px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                    font-size: 14px;
+                    color: #acacac;
+                    cursor: pointer;
+                    .no{
+                        font-size: 16px;
+                    }
+                    .yes{
+                        font-size: 20px;
+                        color: #1b7eff;
+                    }
+                }
               .options{
                 display: flex;
                 justify-content: flex-end;
 
                 .item{
+                  cursor: pointer;
+                    user-select: none;
                   width: 110px;
                   height: 40px;
                   line-height: 40px;
diff --git a/src/views/equip/list.vue b/src/views/equip/list.vue
index ccb7032..1c2bdfc 100644
--- a/src/views/equip/list.vue
+++ b/src/views/equip/list.vue
@@ -57,25 +57,41 @@
         </div>
 
         <div class="showList">
-            <equip-card class="card" v-for="(v,i) in 10" :key="i" :id="i" @on-click="toDetail"></equip-card>
+            <equip-card
+                class="card"
+                v-for="(v,i) in equipList"
+                :key="i"
+                :url="v.picUrl"
+                :company="v.companyName"
+                :tags="[v.maStatus,v.location || '合肥市']"
+                :name="`${v.modelName}${v.typeName}`"
+                :price="v.monthLeasePrice"
+                :id="v.maId"
+                time-unit="月"
+                @on-click="toDetail"></equip-card>
         </div>
 
         <div class="pagination">
             <el-pagination
-                    :page-size="20"
-                    :pager-count="11"
+                    v-model:current-page="pageData.pageNum"
+                    :page-size="pageData.pageSize"
+                    @current-change="pageChange"
+                    :pager-count="5"
                     layout="prev, pager, next"
-                    :total="1000"
+                    :total="pageData.total"
             />
         </div>
     </div>
 </template>
 <script lang="ts" setup>
-import {computed, reactive, ref} from "vue";
+import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
 import EquipCard from "@/compontents/equipCard.vue";
-import {useRouter} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 import { getList } from "@/http/api/equip"
+import $bus from "@/utils/bus"
+
 const router = useRouter()
+
 //筛选条件列表数据
 const screenChooseList = reactive([
     {
@@ -326,6 +342,25 @@ const screenTags = computed<Array<any>>(() => {
     return arr
 })
 
+//分页参数
+const pageData = reactive({
+    pageNum: 1,
+    pageSize: 9,
+    total:100
+})
+
+//装备列表
+const equipList = ref([])
+
+
+onMounted(() => {
+    $bus.on('search',(val) => {
+        getData(val)
+    })
+})
+onUnmounted(() => {
+    $bus.off('search')
+})
 //删除条件
 const handleClose = (tag, index) => {
     screenChooseList[tag.parentIndex].select.splice(tag.index)
@@ -366,11 +401,43 @@ const toDetail = (data) => {
     })
 }
 
-const getData = async () => {
-    const res = await getList()
-    console.log('res ============',res)
+//分页page变化
+const pageChange = (val) => {
+    pageData.pageNum = val
+    getData()
+}
+//获取列表
+const getData = async (text = '') => {
+    const params = {
+        keyWord: text,
+        pageSize:pageData.pageSize,
+        pageNum:pageData.pageNum
+    }
+    const res = await getList(params)
+    console.log(res)
+    pageData.total = res.total
+    equipList.value = res.rows
+}
+
+const getParams = () => {
+    const paramsKey = ['keyWord']
+    let params = {}
+    paramsKey.forEach(key => {
+        if (history.state[key]){
+            params[key] = history.state[key]
+        }
+    })
+    return params
 }
 const init = () => {
+    const params = getParams()
+    console.log(params)
+
+    if(params && params.keyWord){
+        $bus.emit('callBackText',params.keyWord)
+        $bus.off('callBackText')
+    }
+
     getData()
 }
 init()