chore: init

src/views/cloud-museum/components/card.vue

@@ -9,7 +9,7 @@
       />
     </div>
     <div class="cloud-museum-card__title">
-      <span>{{ item.name }}</span>
+      <span class="limit-line">{{ item.name }}</span>
       <template v-if="!!item.tag">
         <span v-for="tag in tags" :key="tag" class="cloud-museum-card__tag">{{
           tag
@@ -59,6 +59,8 @@ const handleClick = () => {
     height: 4.375rem /* 350/80 */;
   }
   &__title {
+    display: flex;
+    align-items: center;
     margin: 0.125rem /* 10/80 */ 0 0.05rem /* 4/80 */;
     font-size: 0.25rem /* 20/80 */;
     font-family: Source Han Serif CN-Bold;
@@ -72,15 +74,17 @@ const handleClick = () => {
     font-size: 0.1875rem /* 15/80 */;
   }
   &__tag {
-    position: relative;
-    top: -0.025rem /* 2/80 */;
+    flex-shrink: 0;
     margin-left: 0.125rem /* 10/80 */;
-    padding: 0.025rem /* 2/80 */ 0.125rem /* 10/80 */;
+    padding: 0 0.125rem /* 10/80 */;
     font-size: 0.15rem /* 12/80 */;
+    height: 0.275rem /* 22/80 */;
+    line-height: 0.275rem /* 22/80 */;
     color: #8f6c38;
     background: rgba(239, 212, 152, 0.5);
     border-radius: 0.0375rem /* 3/80 */;
     border: 1px solid #8f6c38;
+    box-sizing: border-box;
   }
 }
 </style>

src/views/venue-reservation/index.scss

@@ -119,6 +119,8 @@
       width: 2.5rem /* 200/80 */;
       height: 1.5625rem /* 125/80 */;
       border-radius: 0.0375rem /* 3/80 */;
+      background-size: cover;
+      background-position: center;
 
       &::after {
         content: "";

src/views/venue-reservation/index.vue

@@ -14,13 +14,13 @@
         <el-form-item label="参观展馆">
           <div class="vr-ex-flex">
             <div
-              v-for="item in museumList"
+              v-for="item in MUSEUM_LIST"
               :key="item.id"
               :class="[
                 'vr-ex-flex__item',
                 form.exhibitionName === item.name && 'active',
               ]"
-              :style="{ background: `url(${item.thumb})` }"
+              :style="{ backgroundImage: `url(${item.bg})` }"
               @click="handleExhibition(item)"
             >
               <span>{{ item.name }}</span>
@@ -137,13 +137,16 @@
 </template>
 
 <script lang="ts" setup>
-import { getExhibitListApi, reservationVenueApi } from "@/api";
-import { CityMuseumItemType } from "@/api/types";
+import { reservationVenueApi } from "@/api";
 import { BackBtn, SvgIcon } from "@/components";
 import { formatDate } from "@/utils";
 import { FormInstance, FormRules } from "element-plus";
 import { computed, onActivated, onMounted, reactive, ref, watch } from "vue";
 import { useRouter } from "vue-router";
+import NJImg from "./imgs/img_nanjing.jpg";
+import DYHImg from "./imgs/img_yangzhou.jpg";
+import SZImg from "./imgs/img_suzhou.jpg";
+
 import "./index.scss";
 
 type DateType = {
@@ -153,7 +156,6 @@ type DateType = {
 
 let visitorId = 0;
 const router = useRouter();
-const DEFAULT_MUSEUM_ID = [1, 2, 3];
 const curExhibitionId = ref(0);
 const venues = computed(() => {
   const str = window.museum[curExhibitionId.value];
@@ -174,6 +176,23 @@ const DEFAULT_VISITOR = {
   idcard: "",
   phone: "",
 };
+const MUSEUM_LIST = [
+  {
+    id: 1,
+    name: "南京博物院",
+    bg: NJImg,
+  },
+  {
+    id: 2,
+    name: "中国大运河博物馆",
+    bg: DYHImg,
+  },
+  {
+    id: 3,
+    name: "苏州博物馆",
+    bg: SZImg,
+  },
+];
 const visitorList = reactive<
   {
     id: number;
@@ -187,7 +206,6 @@ const visitorList = reactive<
   },
 ]);
 const dateList = ref<DateType[]>([]);
-const museumList = ref<CityMuseumItemType[]>([]);
 const bookDay = ref("");
 const form = reactive({ ...DEFAULT_FORM });
 const rules = reactive<FormRules>({
@@ -198,22 +216,19 @@ const formRef = ref<FormInstance>();
 
 onMounted(() => {
   initDate();
-  getExhibitList();
 });
 
 onActivated(() => {
   // 清除缓存数据
-  if (museumList.value.length) {
-    Object.assign(form, {
-      ...DEFAULT_FORM,
-      bookDay: dateList.value[0].value,
-      venues: venues.value[0],
-      exhibitionName: museumList.value[0].name,
-    });
-    visitorList.length = 0;
-    visitorList.push({ ...DEFAULT_VISITOR });
-    curExhibitionId.value = museumList.value[0].id;
-  }
+  Object.assign(form, {
+    ...DEFAULT_FORM,
+    bookDay: dateList.value[0].value,
+    venues: venues.value[0],
+    exhibitionName: MUSEUM_LIST[0].name,
+  });
+  visitorList.length = 0;
+  visitorList.push({ ...DEFAULT_VISITOR });
+  curExhibitionId.value = MUSEUM_LIST[0].id;
 });
 
 watch(venues, (list) => {
@@ -226,26 +241,6 @@ const disabledDate = (time: Date) => {
   return time.getTime() < today.getTime();
 };
 
-const getExhibitList = async () => {
-  loading.value = true;
-  try {
-    const { data } = await getExhibitListApi({
-      pageNum: 0,
-      pageSize: 0,
-    });
-    museumList.value = data.records
-      .filter((item) => DEFAULT_MUSEUM_ID.includes(item.id))
-      .map((item) => ({
-        ...item,
-        thumb: process.env.VUE_APP_BACKEND_URL + item.thumb,
-      }));
-    curExhibitionId.value = museumList.value[0].id;
-    form.exhibitionName = museumList.value[0].name;
-  } finally {
-    loading.value = false;
-  }
-};
-
 const addVisitor = () => {
   visitorList.push({
     id: ++visitorId,
@@ -306,7 +301,7 @@ const submit = async () => {
   }
 };
 
-const handleExhibition = (item: CityMuseumItemType) => {
+const handleExhibition = (item: (typeof MUSEUM_LIST)[0]) => {
   form.exhibitionName = item.name;
   curExhibitionId.value = item.id;
 };