|
|
@@ -0,0 +1,229 @@
|
|
|
+<template>
|
|
|
+ <div class="scene-layout">
|
|
|
+ <header class="scene-layout__header">
|
|
|
+ <div class="header__btn" @click="router.back">
|
|
|
+ <img :src="rollback" />
|
|
|
+ <span>返回</span>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+ <main class="scene-layout__main">
|
|
|
+ <section v-if="length > 0" class="main__layout">
|
|
|
+ <el-card
|
|
|
+ v-for="company in companyList"
|
|
|
+ :key="company.id"
|
|
|
+ shadow="hover"
|
|
|
+ class="layout-cards"
|
|
|
+ >
|
|
|
+ <div class="layout-card" @click="handleClickCompany(company.id, company.name)">
|
|
|
+ <div v-if="company.layout">
|
|
|
+ <MapContainerSmall
|
|
|
+ ref="mapContainerRef"
|
|
|
+ :bg-image-url="(company.layout as any).bgInfo.img"
|
|
|
+ :show-shops="(company.layout as any).shopList"
|
|
|
+ class="content-pic"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-else>
|
|
|
+ <img :src="noLayout" />
|
|
|
+ <span>请添加场景布局</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="footer--default">{{ company.name }}</span>
|
|
|
+ <div class="icons">
|
|
|
+ <el-image
|
|
|
+ v-if="company.layout"
|
|
|
+ :src="preview"
|
|
|
+ :preview-src-list="[company.layout]"
|
|
|
+ hide-on-click-modal
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+
|
|
|
+ <img :src="edit" @click="handleClickCompany(company.id, company.name)" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-card>
|
|
|
+ </section>
|
|
|
+ <section class="main__empty" v-else>
|
|
|
+ <img :src="empty" />
|
|
|
+ <span>
|
|
|
+ 目前无内容，
|
|
|
+ <router-link to="/scene/workshop">请先添加公司</router-link>
|
|
|
+ </span>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+ import rollback from '@/assets/rollback.png';
|
|
|
+ import empty from '@/assets/images/table/table-empty.png';
|
|
|
+ import noLayout from '@/assets/images/page-config/no-layout.png';
|
|
|
+ import preview from '@/assets/images/table/table-preview.png';
|
|
|
+ import edit from '@/assets/images/table/table-edit.png';
|
|
|
+ import router from '@/router';
|
|
|
+ import { CompanyInfoList } from '@/types/scene-layout/type';
|
|
|
+ import { ViewType } from '@/types/page-config/type';
|
|
|
+ import {
|
|
|
+ getCompanyListApi,
|
|
|
+ getPcCompanyLayoutListApi,
|
|
|
+ getMobileCompanyLayoutList,
|
|
|
+ } from '@/api/scene/scene';
|
|
|
+ import { computed, onMounted, ref } from 'vue';
|
|
|
+ import MapContainerSmall from '@/views/page-config/component/mapContainer/MapContainerSmall.vue';
|
|
|
+ const companyList = ref<CompanyInfoList[]>([]);
|
|
|
+ const length = computed(() => {
|
|
|
+ return companyList.value.length;
|
|
|
+ });
|
|
|
+
|
|
|
+ const viewType = ref<number>();
|
|
|
+
|
|
|
+ const handleClickCompany = (companyId, companyName) => {
|
|
|
+ router.push({
|
|
|
+ path: '/layout/scene-config',
|
|
|
+ query: { companyId, companyName, viewType: viewType.value },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ viewType.value = Number(router.currentRoute.value.query.viewType);
|
|
|
+ companyList.value = await getCompanyListApi();
|
|
|
+ const companyIDList = companyList.value.map((x) => x.id);
|
|
|
+
|
|
|
+ const platformApiMap = {
|
|
|
+ [ViewType.companyHomepage_PC]: getPcCompanyLayoutListApi,
|
|
|
+ [ViewType.companyHomepage_phone]: getMobileCompanyLayoutList,
|
|
|
+ };
|
|
|
+
|
|
|
+ platformApiMap[viewType.value]({ companyIds: companyIDList }).then((res) => {
|
|
|
+ res.map((companyWithLayout) => {
|
|
|
+ companyList.value.find((company) => company.id === companyWithLayout.id)!.layout =
|
|
|
+ JSON.parse(companyWithLayout.layout);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .footer--default {
|
|
|
+ opacity: 0.45;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scene-layout {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 64px);
|
|
|
+
|
|
|
+ &__header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: inherit;
|
|
|
+ height: 54px;
|
|
|
+ padding-left: 23px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
|
|
|
+
|
|
|
+ .header__btn {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ line-height: 14px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.12);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__main {
|
|
|
+ margin-top: 12px;
|
|
|
+ width: inherit;
|
|
|
+ height: calc(100vh - 64px - 54px - 12px);
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.12);
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main__layout {
|
|
|
+ display: flex;
|
|
|
+ gap: 25px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-content: flex-start;
|
|
|
+ width: inherit;
|
|
|
+ height: inherit;
|
|
|
+ padding: 22px 24px 22px 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layout-cards {
|
|
|
+ width: 216px;
|
|
|
+ height: 190px;
|
|
|
+
|
|
|
+ .layout-card div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-card__body) {
|
|
|
+ width: inherit;
|
|
|
+ height: 145px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0;
|
|
|
+ background: #f5f5f5;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-card__footer) {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: inherit;
|
|
|
+ height: 45px;
|
|
|
+ padding: 0 12px 0 12px;
|
|
|
+
|
|
|
+ .icons {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+
|
|
|
+ img,
|
|
|
+ el-image {
|
|
|
+ cursor: pointer;
|
|
|
+ opacity: 0.4;
|
|
|
+ transition: opacity 0.5s ease-in-out;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main__empty {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 2px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: inherit;
|
|
|
+ height: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
chauncey
