需求修改
This commit is contained in:
wlikett
parent
b941f3f81a
commit
bc4e671005
|
|
@ -3,3 +3,7 @@ import { get, post } from '../../index'
|
|||
export const getGoodsClassListApi = () => {
|
||||
return get('/zlpt-home/maType/getEquipmentType', {})
|
||||
}
|
||||
|
||||
export const apiGetCollect = (params = {}) => {
|
||||
return post('/zlpt-equip/dev/userCollectList',params)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,74 +1,81 @@
|
|||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
import {apiGetCollect} from "@/http/api/home";
|
||||
import {ref} from "vue";
|
||||
import {equipCollect} from "@/http/api/equip";
|
||||
import {ElMessage} from "element-plus";
|
||||
import NavMenu from "@/components/Navmenu/index.vue"
|
||||
const router = useRouter()
|
||||
|
||||
const getImg = (imgUrl: string) => {
|
||||
return new URL(imgUrl, import.meta.url).href
|
||||
}
|
||||
const collectList = ref([
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
},
|
||||
{
|
||||
v_collect_name: '出租17内燃式叉车',
|
||||
v_collect_price: '12000元/月',
|
||||
v_collect_adress: '浙江省嘉兴市',
|
||||
v_collect_imgsrc: '../../assets/img/home/2023_12_01_beijing2/left_bg.png'
|
||||
}
|
||||
])
|
||||
|
||||
const pageData = ref({
|
||||
pageSize:6,
|
||||
pageNum:1,
|
||||
total:0
|
||||
})
|
||||
|
||||
const collectList = ref([])
|
||||
|
||||
// 查看设备详情
|
||||
const previewCollectBtn = () => {
|
||||
router.push('/equipDetail/4')
|
||||
const previewCollectBtn = (id) => {
|
||||
router.push(`/equipDetail/${id}`)
|
||||
}
|
||||
// 删除设备收藏
|
||||
const deleteCollect = (indx: any) => {
|
||||
collectList.value.splice(indx, 1)
|
||||
const deleteCollect = async (id: any) => {
|
||||
const params = {
|
||||
maId: id,
|
||||
isCollect: false
|
||||
}
|
||||
const res = await equipCollect(params)
|
||||
if (res.code == '200') {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
duration: 1000,
|
||||
message: `装备已取消收藏`
|
||||
})
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
const params = {
|
||||
pageNum:pageData.value.pageNum,
|
||||
pageSize:pageData.value.pageSize
|
||||
}
|
||||
const res = await apiGetCollect(params)
|
||||
pageData.value.total = res.total
|
||||
|
||||
collectList.value = (res.rows || []).map(item => {
|
||||
return {
|
||||
v_collect_name: `${item.modelName}${item.deviceName}`,
|
||||
v_collect_price: item.monthLeasePrice,
|
||||
v_collect_adress: item.cityStr,
|
||||
v_collect_imgsrc: item.picUrl,
|
||||
...item
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const init = () => {
|
||||
getList()
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NavMenu></NavMenu>
|
||||
<!-- 收藏设备页面 -->
|
||||
<div class="my-collect">
|
||||
<div class="collect" v-for="(item, index) in collectList" :key="item.v_collect_name">
|
||||
<div class="collect" v-for="(item, index) in collectList" :key="index" v-show="pageData.total > 0">
|
||||
<!-- 商品图片 -->
|
||||
<img :src="getImg(item.v_collect_imgsrc)" alt="" />
|
||||
<img :src="item.v_collect_imgsrc" alt="" />
|
||||
<div class="lifting-info">
|
||||
<i>起重量：5吨</i>
|
||||
<i>起重量：5吨</i>
|
||||
<i></i>
|
||||
<i>{{ item.specification }}</i>
|
||||
</div>
|
||||
<div class="collect-price">￥{{ item.v_collect_price }}</div>
|
||||
<div class="collect-name">{{ item.v_collect_name }}</div>
|
||||
|
|
@ -77,16 +84,30 @@
|
|||
<!-- 遮罩层 -->
|
||||
<div class="collect-mask">
|
||||
<div class="collect-mask-btn">
|
||||
<button @click="previewCollectBtn">查看设备</button>
|
||||
<button @click="deleteCollect(index)">删除收藏</button>
|
||||
<button @click="previewCollectBtn(item.maId)">查看设备</button>
|
||||
<button @click="deleteCollect(item.maId)">删除收藏</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<el-empty v-show="pageData.total == 0" :image-size="200" />
|
||||
|
||||
<div class="pagination" v-if="pageData.total > 0">
|
||||
<el-pagination
|
||||
v-model:current-page="pageData.pageNum"
|
||||
:page-size="pageData.pageSize"
|
||||
@current-change="pageChange"
|
||||
:pager-count="5"
|
||||
layout="prev, pager, next"
|
||||
:total="pageData.total"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.my-collect {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.collect {
|
||||
|
|
@ -187,11 +208,17 @@
|
|||
|
||||
&:hover {
|
||||
transform: scale(1.03);
|
||||
transition: 2s all;
|
||||
transition: 1s all;
|
||||
.collect-mask {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="showList" v-if="pageData.total > 0">
|
||||
<div class="showList" v-show="pageData.total > 0">
|
||||
<equip-card
|
||||
class="card"
|
||||
v-for="(v,i) in equipList"
|
||||
|
|
@ -75,11 +75,11 @@
|
|||
time-unit="月"
|
||||
@on-click="toDetail"></equip-card>
|
||||
</div>
|
||||
<div class="noData" v-else>
|
||||
<div class="noData" v-show="pageData.total == 0">
|
||||
<el-empty :image-size="200"/>
|
||||
</div>
|
||||
|
||||
<div class="pagination" v-if="pageData.total > 0">
|
||||
<div class="pagination" v-show="pageData.total > 0">
|
||||
<el-pagination
|
||||
v-model:current-page="pageData.pageNum"
|
||||
:page-size="pageData.pageSize"
|
||||
|
|
|
|||
|
|
@ -4,12 +4,19 @@
|
|||
import { getGoodsClassListApi } from 'http/api/home'
|
||||
import { useStore } from 'store/main'
|
||||
import { getHotList } from 'http/api/equip'
|
||||
import {reactive} from "vue";
|
||||
import {reactive, ref} from "vue";
|
||||
import baseData from "@/assets/baseInformation.json"
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const leftNavList = ref([])
|
||||
|
||||
const loopList = ref([
|
||||
'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png',
|
||||
'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/41cd93cefd76c28c967f07ad33b5e6fe1575746850588196864475.jpg',
|
||||
'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/11800b353f4d1332b73f18bf0f2133a31575743878894452736462.jpg',
|
||||
'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/85a09403e4328a37b2686d20b2fe717e20220728085635540.jpg'
|
||||
])
|
||||
// 获取商品分类
|
||||
const getGoodsClassList = async () => {
|
||||
const res = await getGoodsClassListApi()
|
||||
|
|
@ -72,6 +79,7 @@
|
|||
const onClick = (val: any) => {
|
||||
router.push(`/equipDetail/${val.id}`)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -105,12 +113,12 @@
|
|||
<NavMenu />
|
||||
<!-- 轮播图 -->
|
||||
<div class="swpier-img">
|
||||
<el-carousel :interval="5000" arrow="always" height="437px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<el-carousel :interval="5000" arrow="always" height="437px" :autoplay="false">
|
||||
<el-carousel-item v-for="(item,index) in loopList" :key="index">
|
||||
<!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
|
||||
<el-image
|
||||
style="width: 100%"
|
||||
src="https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png"
|
||||
:src="item"
|
||||
fit="cover" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
|
|
@ -184,7 +192,16 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-carousel__container){
|
||||
.el-carousel__item{
|
||||
.el-image{
|
||||
height: 100%;
|
||||
img{
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-index-banner {
|
||||
background-color: #fff;
|
||||
padding: 20px 15px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue