project-shenyangk11
/
sy_k11_H_base_daoshi_vue_ts
forked from common/base_daoshi_vue_ts
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 增加艺术的接口

pull/2/head
deepblues 3 years ago
parent
c6aed703b3
commit
f55e638482
11 changed files with 354 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 162
      public/static/offline/JSON/getArtData.json
  2. 2
      src/components/Map/Map.vue
  3. 2
      src/components/ShopItem/ShopItem.vue
  4. 10
      src/http/api/art/index.ts
  5. 93
      src/types/art.d.ts
  6. 2
      src/types/shop.d.ts
  7. 95
      src/views/Art/Art.vue
  8. 16
      src/views/Art/ArtMapItem.vue
  9. 4
      src/views/Art/ArtRightItem.vue
  10. 6
      src/views/Brand/Brand.vue
  11. 1
      src/views/Nav/Nav.vue

162
public/static/offline/JSON/getArtData.json
View File

@ -0,0 +1,162 @@
{
"code": 200,
"msg": "操作成功",
"data": {
"artFloorList": [{
"id": 10,
"projectCode": "project-bffju2pfalsylhcfcuzgaa",
"fileCode": "dSZh63lMJALCTq2H4BZvx",
"fileUrl": "/iotFile/2023/04/18/qcivkL9KGHO-0DonwV8UR.png",
"artFloorCode": "MfVCgPyK9hS2XErT1J63N",
"artFloorName": "测试的666",
"buildingCode": "fYqhuYPU-kclTGNAMtdEn",
"floorCode": "kswkhGsmfPMO7pMCxSQT0",
"floorName": "B2",
"status": 0,
"artworkNumber": 0,
"floorOrder": 5
},
{
"id": 9,
"projectCode": "project-bffju2pfalsylhcfcuzgaa",
"fileCode": "AQOoO0YmlD52hKcbSypLu",
"fileUrl": "/iotFile/2023/04/18/miGcfMCie6YfZsYEjclmB.png",
"artFloorCode": "q4pnmJy5ScRikzTEvHQzj",
"artFloorName": "艺术楼层5",
"buildingCode": "fYqhuYPU-kclTGNAMtdEn",
"floorCode": "oY78y2PdtRhul4FdQhYOc",
"floorName": "L5",
"floorOrder": 4,
"status": 1,
"artworkNumber": 0
},
{
"id": 8,
"projectCode": "project-bffju2pfalsylhcfcuzgaa",
"fileCode": "csd12E0mDZ3ShN-4HI6L1",
"fileUrl": "/iotFile/2023/04/18/qfS_4xP8Wrs4FZuLe6u32.png",
"artFloorCode": "0WP2TBMU1SK5ypfY0Mj1v",
"artFloorName": "测试3",
"buildingCode": "fYqhuYPU-kclTGNAMtdEn",
"floorCode": "UC06wuVCxXmVQ1WXtRSKN",
"floorName": "空中花园",
"floorOrder": 3,
"status": 0,
"artworkNumber": 0
},
{
"id": 7,
"projectCode": "project-bffju2pfalsylhcfcuzgaa",
"fileCode": "lpcf8e03fdNpE5rlKOni9",
"fileUrl": "/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png",
"artFloorCode": "MvCFxZuebdA6FURyHNKIf",
"artFloorName": "测试",
"buildingCode": "fYqhuYPU-kclTGNAMtdEn",
"floorCode": "nQZLlF9WB0zaMeSvUL3op",
"floorName": "L3",
"floorOrder": 2,
"status": 0,
"artworkNumber": 0
},
{
"id": 5,
"projectCode": "project-bffju2pfalsylhcfcuzgaa",
"fileCode": "yhrzaO7RHZ-xYH_bBCtT7",
"fileUrl": "/iotFile/2023/04/18/qcivkL9KGHO-0DonwV8UR.png",
"artFloorCode": "dxt-_I67KdLIaJw69806u",
"artFloorName": "艺术楼层2楼",
"buildingCode": "fYqhuYPU-kclTGNAMtdEn",
"floorCode": "fXikXvRBbcfNjRz3Tc7H5",
"floorName": "L2",
"floorOrder": 1,
"status": 0,
"artworkNumber": 0
},
{
"id": 2,
"projectCode": "project-bffju2pfalsylhcfcuzgaa",
"fileCode": "FPtIgw4blIIAjUnmOnwZ3",
"fileUrl": "/iotFile/2023/04/18/qfS_4xP8Wrs4FZuLe6u32.png",
"artFloorCode": "EnHgskSGDk2R6RM14Bow-",
"artFloorName": "艺术楼1层",
"buildingCode": "fYqhuYPU-kclTGNAMtdEn",
"floorCode": "m98RaT7oQ5LzJxECix64d",
"floorName": "L1",
"floorOrder": 0,
"status": 0,
"artworkNumber": 3
}
],
"artworkList": [{
"id": 3,
"projectCode": "project-bffju2pfalsylhcfcuzgaa",
"fileCode": "FPtIgw4blIIAjUnmOnwZ3",
"artFloorName": "艺术楼1层",
"buildingCode": "fYqhuYPU-kclTGNAMtdEn",
"floorCode": "m98RaT7oQ5LzJxECix64d",
"artworkCode": "zBMuBD-nBUWHBxupN-iF8",
"artworkName": "长置日思1",
"artworkNameEn": "hahaha",
"author": "王赢",
"material": "陶瓷",
"dimension": "100x100",
"point": 31,
"ord": 1,
"creationYear": 2023,
"floorOrder": 1,
"urlList": [
"/iotFile/2023/04/06/3_Q635rTW2Ydl0Eeg7MJr.png",
"/iotFile/project-bffju2pfalsylhcfcuzgaa/20230505/FPtIgw4blIIAjUnmOnwZ3.png",
"/iotFile/project-bffju2pfalsylhcfcuzgaa/20230506/Fmk6kcf07YcAJp7sw2ZQb.png"
]
},
{
"id": 4,
"projectCode": "project-bffju2pfalsylhcfcuzgaa",
"fileCode": "FPtIgw4blIIAjUnmOnwZ3",
"artFloorName": "艺术楼1层",
"buildingCode": "fYqhuYPU-kclTGNAMtdEn",
"floorCode": "m98RaT7oQ5LzJxECix64d",
"artworkCode": "FxIFTBGRGa5OK4yxvGF61",
"artworkName": "长置日思2",
"artworkNameEn": "hahaha",
"author": "王赢",
"material": "玻璃",
"dimension": "100x100",
"point": 31,
"ord": 1,
"creationYear": 2023,
"floorOrder": 2,
"urlList": [
"/iotFile/2023/04/06/3_Q635rTW2Ydl0Eeg7MJr.png",
"/iotFile/project-bffju2pfalsylhcfcuzgaa/20230505/FPtIgw4blIIAjUnmOnwZ3.png",
"/iotFile/project-bffju2pfalsylhcfcuzgaa/20230506/Fmk6kcf07YcAJp7sw2ZQb.png"
]
},
{
"id": 5,
"projectCode": "project-bffju2pfalsylhcfcuzgaa",
"fileCode": "FPtIgw4blIIAjUnmOnwZ3",
"artFloorName": "艺术楼1层",
"buildingCode": "fYqhuYPU-kclTGNAMtdEn",
"floorCode": "m98RaT7oQ5LzJxECix64d",
"artworkCode": "FTckVC_UDaKCdB5JD1Lmd",
"artworkName": "长置日思3",
"artworkNameEn": "hahaha",
"author": "王赢",
"material": "塑料",
"dimension": "100x100",
"point": 31,
"ord": 1,
"creationYear": 2023,
"floorOrder": 3,
"urlList": [
"/iotFile/2023/04/06/5CYODhtY43yA6ViGG3CIb.png",
"/iotFile/project-bffju2pfalsylhcfcuzgaa/20230505/FPtIgw4blIIAjUnmOnwZ3.png",
"/iotFile/project-bffju2pfalsylhcfcuzgaa/20230506/Fmk6kcf07YcAJp7sw2ZQb.png"
]
}
]
}
}

2
src/components/Map/Map.vue
View File

@ -99,6 +99,7 @@ function handleDetail() {
/* stylelint-disable-next-line selector-id-pattern */ /* stylelint-disable-next-line selector-id-pattern */
#moveFloorBG { #moveFloorBG {
position: absolute; position: absolute;
z-index: 500 !important;
width: 48px; width: 48px;
background-color: #fff; background-color: #fff;
border-radius: 5px; border-radius: 5px;
@ -109,6 +110,7 @@ function handleDetail() {
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
left: 2px; left: 2px;
z-index: -1;
width: 48px; width: 48px;
height: 48px; height: 48px;
background-color: #dbb186; background-color: #dbb186;

2
src/components/ShopItem/ShopItem.vue
View File

@ -15,7 +15,7 @@
</span> </span>
<div class="likes"> <div class="likes">
<img src="@/assets/images/brand/icon_heart.svg" alt="" /> <img src="@/assets/images/brand/icon_heart.svg" alt="" />
111
{{ shop.star }}
</div> </div>
</div> </div>
</div> </div>

10
src/http/api/art/index.ts
View File

@ -0,0 +1,10 @@
import { request } from '@/http/http'
import type { ArtFloor, ArtItem } from '@/types/art'
type ArtType = {
artFloorList: ArtFloor[]
artworkList: ArtItem[]
}
//获取商场活动
export const getArtData = () => request<ArtType>({ url: `/JSON/getArtData.json` })

93
src/types/art.d.ts
View File

@ -0,0 +1,93 @@
export interface ArtFloor {
artFloorCode: string
/**
* 艺术楼名称
*/
artFloorName: string
artworkNumber: number
buildingCode: string
fileCode: string
/**
* 艺术楼图片地址
*/
fileUrl: string
/**
* 楼层编码
*/
floorCode: string
floorOrder: number
/**
* 楼层名称
*/
floorName: string
id: number
projectCode: string
status: number
}
export interface ArtItem {
/**
* 楼层order
*/
floorOrder: number
/**
* 艺术楼名称
*/
artFloorName: string
/**
* 艺术品编码
*/
artworkCode: string
/**
* 艺术品名称
*/
artworkName: string
/**
* 艺术品英文名称
*/
artworkNameEn: string
/**
* 作者
*/
author: string
buildingCode: string
/**
* 年份
*/
creationYear: number
/**
* 尺寸
*/
dimension: string
fileCode: string
/**
* 楼层编码
*/
floorCode: string
id: number
/**
* 中文介绍
*/
introduce: string
/**
* 英文介绍
*/
introduceEn: string
/**
* 材质
*/
material: string
/**
* 排序
*/
ord: number
/**
* 导航点
*/
point: number
projectCode: string
/**
* 艺术品图片集合
*/
urlList: string[]
}

2
src/types/shop.d.ts
View File

@ -42,4 +42,6 @@ declare interface Shop {
activityList?: Activity[] //店铺活动图 activityList?: Activity[] //店铺活动图
//艺术点位 //艺术点位
artAuthor?: string //艺术点位的作者 artAuthor?: string //艺术点位的作者
//点赞数量
star?: number //点赞数量
} }

95
src/views/Art/Art.vue
View File

@ -5,10 +5,10 @@
<li <li
v-for="(item, index) in mapList" v-for="(item, index) in mapList"
:key="index" :key="index"
:style="{ 'animation-delay': (mapList.length - index) * delaytime + 's' }"
:style="{ 'animation-delay': item.floorOrder * delaytime + 's' }"
class="animate__animated animate__fadeInDown" class="animate__animated animate__fadeInDown"
> >
<img :src="item" alt="" />
<img :src="item.fileUrl" alt="" />
</li> </li>
</ul> </ul>
<!-- 地图左侧的列表 --> <!-- 地图左侧的列表 -->
@ -17,7 +17,7 @@
<artMapItem <artMapItem
v-for="(item, index) in artListLeft" v-for="(item, index) in artListLeft"
:key="index" :key="index"
:style="{ 'animation-delay': (mapList.length - index) * delaytime + 's' }"
:style="{ 'animation-delay': item.floorOrder * delaytime + 's' }"
class="animate__animated animate__fadeInDown" class="animate__animated animate__fadeInDown"
:art-info="item" :art-info="item"
@go="clickGo" @go="clickGo"
@ -41,12 +41,16 @@
<!-- 右侧的列表 --> <!-- 右侧的列表 -->
<div class="right-bg"></div> <div class="right-bg"></div>
<swiper <swiper
:autoplay="{
delay: 0,
disableOnInteraction: true
}"
:autoplay="
artListAll.length > 8
? {
delay: 0,
disableOnInteraction: true
}
: false
"
:speed="5000" :speed="5000"
:loop="true"
:loop="artListAll.length > 8"
:loop-prevents-sliding="false" :loop-prevents-sliding="false"
:loop-additional-slides="3" :loop-additional-slides="3"
:looped-slides="8" :looped-slides="8"
@ -78,6 +82,8 @@ import artMapItem from './ArtMapItem.vue'
import artRightItem from './ArtRightItem.vue' import artRightItem from './ArtRightItem.vue'
import scrollView from '@/base/ScrollView/ScrollView.vue' import scrollView from '@/base/ScrollView/ScrollView.vue'
import Brand from '@/utils/Class/Brand' import Brand from '@/utils/Class/Brand'
import { getArtData } from '@/http/api/art'
import type { ArtFloor, ArtItem } from '@/types/art'
// import { storeToRefs } from 'pinia' // import { storeToRefs } from 'pinia'
import { useRootStore } from '@/store/root' import { useRootStore } from '@/store/root'
@ -87,16 +93,19 @@ const store = useRootStore()
const router = useRouter() const router = useRouter()
const delaytime = 0.5 //延迟时间 const delaytime = 0.5 //延迟时间
const mapList = ref([
'/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
'/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png',
'/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
'/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png',
'/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
'/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png'
])
const artListLeft = ref([
const mapList = ref<ArtFloor[]>([])
// ref([
// '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
// '/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png',
// '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
// '/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png',
// '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
// '/static/offline/iotFile/2023/04/18/QO4q9Fa2CZHvnCKc9NyKI.png'
// ])
const artListLeft = ref<ArtItem[]>([])
/**ref([
{ {
fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png', fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
title: '啥的了开发就阿索拉卡的就飞拉萨的发', title: '啥的了开发就阿索拉卡的就飞拉萨的发',
@ -194,7 +203,9 @@ const artListLeft = ref([
point: 5 point: 5
} }
]) ])
const artListRight = ref([
*/
const artListRight = ref<ArtItem[]>([])
/**ref([
{ {
fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png', fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
title: '啥的了开发就阿索拉卡的就飞拉萨的发', title: '啥的了开发就阿索拉卡的就飞拉萨的发',
@ -292,8 +303,9 @@ const artListRight = ref([
point: 5 point: 5
} }
]) ])
const artListAll = ref([
**/
const artListAll = ref<ArtItem[]>([])
/** ref([
{ {
fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png', fileUrl: '/static/offline/iotFile/2023/04/18/Ijx8KWpFoVdfflrqB8nHm.png',
title: '啥的了开发就阿索拉卡的就飞拉萨的发', title: '啥的了开发就阿索拉卡的就飞拉萨的发',
@ -440,18 +452,44 @@ const artListAll = ref([
point: 5 point: 5
} }
]) ])
function clickGo(item: any) {
*/
getData()
function getData() {
getArtData()
.then(res => {
if (res.code === 200) {
const arr = res.data.artFloorList
if (arr) {
arr.sort((a, b) => b.floorOrder - a.floorOrder)
}
mapList.value = arr
artListAll.value = res.data.artworkList
console.log('mapList :>> ', mapList)
for (let t = 0; t < artListAll.value.length; t += 2) {
artListLeft.value?.push(artListAll.value[t])
artListRight.value?.push(artListAll.value[t + 1])
}
artListLeft.value.sort((a, b) => b.floorOrder - a.floorOrder)
artListRight.value.sort((a, b) => b.floorOrder - a.floorOrder)
}
})
.catch(err => {
console.log('err :>> ', err)
})
}
function clickGo(item: ArtItem) {
const shop = new Brand({ const shop = new Brand({
shopName: item.title,
shopName: item.artworkName,
floorOrder: item.floorOrder, floorOrder: item.floorOrder,
floor: item.floor,
logoUrl: item.fileUrl,
floor: item.artFloorName,
logoUrl: item.urlList[0],
yaxis: item.point, yaxis: item.point,
shopCode: '-11', shopCode: '-11',
intro: item.intro,
introEn: item.introEn,
intro: item.introduce,
introEn: item.introduceEn,
artAuthor: item.author, artAuthor: item.author,
doorMaterialList: item.doorMaterialList
doorMaterialList: item.urlList
}) })
store.SET_SHOP(shop) store.SET_SHOP(shop)
router.push('/nav?type=art') router.push('/nav?type=art')
@ -462,6 +500,9 @@ function clickGo(item: any) {
:deep(.swiper-wrapper) { :deep(.swiper-wrapper) {
transition-timing-function: linear; transition-timing-function: linear;
} }
:deep(.bscroll-vertical-scrollbar) {
z-index: 1 !important;
}
.art-container { .art-container {
position: relative; position: relative;
width: 100vw; width: 100vw;

16
src/views/Art/ArtMapItem.vue
View File

@ -1,14 +1,19 @@
<template> <template>
<div class="art-item"> <div class="art-item">
<!-- 图 --> <!-- 图 -->
<img class="banner" :src="artInfo.fileUrl" alt="" />
<img class="banner" :src="artInfo?.urlList[0]" alt="" />
<div class="intro-container"> <div class="intro-container">
<!-- 标题 --> <!-- 标题 -->
<h3 class="art-title">{{ switchLanguage(artInfo, 'title') }}</h3>
<h3 class="art-title">{{ switchLanguage(artInfo, 'artworkName') }}</h3>
<!-- 作者 --> <!-- 作者 -->
<h5 class="art-author">{{ artInfo.author }}</h5> <h5 class="art-author">{{ artInfo.author }}</h5>
<!-- 介绍 --> <!-- 介绍 -->
<p class="art-intro">{{ switchLanguage(artInfo, 'intro') }}</p>
<div class="art-intro">
<p>{{ artInfo.creationYear }}</p>
<p>{{ artInfo.material }}</p>
<p>{{ artInfo.dimension }}</p>
<!-- {{ switchLanguage(artInfo, 'intro') }} -->
</div>
</div> </div>
<!-- 编号 --> <!-- 编号 -->
<p class="art-number">{{ artInfo.artNum }}</p> <p class="art-number">{{ artInfo.artNum }}</p>
@ -19,7 +24,6 @@
<script setup> <script setup>
// import { ref } from 'vue' // import { ref } from 'vue'
const emits = defineEmits(['go']) const emits = defineEmits(['go'])
const props = defineProps({ const props = defineProps({
artInfo: { artInfo: {
@ -83,9 +87,9 @@ function clickGo() {
color: #9b8c85; color: #9b8c85;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
line-height: 150%;
line-height: 15px;
@include more-wrap(3);
@include no-wrap();
} }
} }
.art-number { .art-number {

4
src/views/Art/ArtRightItem.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="art-item"> <div class="art-item">
<!-- 图 --> <!-- 图 -->
<img class="banner" :src="artInfo.fileUrl" alt="" />
<img class="banner" :src="artInfo?.urlList[0]" alt="" />
<div class="intro-container"> <div class="intro-container">
<!-- 标题 --> <!-- 标题 -->
<h3 class="art-title">{{ switchLanguage(artInfo, 'title') }}</h3>
<h3 class="art-title">{{ switchLanguage(artInfo, 'artworkName') }}</h3>
<!-- 作者 --> <!-- 作者 -->
<h5 class="art-author">{{ artInfo.author }}</h5> <h5 class="art-author">{{ artInfo.author }}</h5>
<!-- 导航按钮 --> <!-- 导航按钮 -->

6
src/views/Brand/Brand.vue
View File

@ -91,7 +91,7 @@ getBrandInfo().then(({ data }) => {
formatList.value.push({ formatList.value.push({
fileUrl: '', fileUrl: '',
isSpecial: 0, isSpecial: 0,
industryCode: 0,
industryCode: '0',
industryName: '全部类别', industryName: '全部类别',
industryNameEn: '', industryNameEn: '',
shopNum: 0, shopNum: 0,
@ -100,7 +100,7 @@ getBrandInfo().then(({ data }) => {
zmList.value.push({ zmList.value.push({
fileUrl: '', fileUrl: '',
isSpecial: 0, isSpecial: 0,
industryCode: 0,
industryCode: '0',
industryName: 'ALL', industryName: 'ALL',
industryNameEn: '', industryNameEn: '',
shopNum: 0, shopNum: 0,
@ -123,7 +123,7 @@ getBrandInfo().then(({ data }) => {
letters.split('').forEach(letter => { letters.split('').forEach(letter => {
const temp = { const temp = {
fileUrl: '', fileUrl: '',
industryCode: 0,
industryCode: '0',
industryNameEn: '', industryNameEn: '',
shopNum: 0, shopNum: 0,
industryList: [] industryList: []

1
src/views/Nav/Nav.vue
View File

@ -249,6 +249,7 @@ watch(shop, newVal => {
<style lang="scss" scoped> <style lang="scss" scoped>
.nav-container { .nav-container {
position: absolute; position: absolute;
overflow: hidden;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
pointer-events: none; pointer-events: none;

Write Preview
Loading…
Cancel
Save