Эх сурвалжийг харах

feat(banner): 添加banner位置字段及图片展示优化

- 新增 banner 位置选择功能,支持首页和我的页面
- 优化图片展示逻辑,支持逗号分隔的多图片预览
- 修复本地开发环境接口地址配置问题
- 移除冗余的图片基础URL常量引用
zouzexu 5 өдөр өмнө
parent
commit
93fb0f57e9

+ 2 - 2
.env.development

@@ -7,8 +7,8 @@ VITE_APP_BASE_API=/dev-api
 
 # 接口地址
 #VITE_APP_API_URL=https://api.youlai.tech # 线上
-#VITE_APP_API_URL=http://192.168.0.11:8989    # 本地
-VITE_APP_API_URL=http://192.168.0.217:8989    # 本地
+VITE_APP_API_URL=http://192.168.0.11:8989    # 本地
+#VITE_APP_API_URL=http://192.168.0.217:8989    # 本地
 
 # WebSocket 端点(不配置则关闭),线上 ws://api.youlai.tech/ws ,本地 ws://localhost:8989/ws
 VITE_APP_WS_ENDPOINT=

BIN
src/assets/images/qrCode_bg.jpg


+ 12 - 0
src/components/CURD/PageContent.vue

@@ -68,6 +68,18 @@
                     />
                   </template>
                 </template>
+                <template v-else-if="typeof scope.row[col.prop] === 'string' && scope.row[col.prop].includes(',')">
+                  <!-- 处理逗号分隔的图片字符串 -->
+                  <template v-for="(item, index) in scope.row[col.prop].split(',')" :key="index">
+                    <el-image
+                      :src="getFullImageUrl(item.trim())"
+                      :preview-src-list="scope.row[col.prop].split(',').map((url: string) => getFullImageUrl(url.trim()))"
+                      :initial-index="index"
+                      :preview-teleported="true"
+                      :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                    />
+                  </template>
+                </template>
                 <template v-else>
                   <el-image
                     :src="getFullImageUrl(scope.row[col.prop])"

+ 27 - 2
src/views/operationsManage/banner-info/index.vue

@@ -24,6 +24,11 @@
           {{ scope.row.orJump == 1 ? "跳转" : "不跳转" }}
         </el-tag>
       </template>
+      <template #location="scope">
+        <el-tag :type="scope.row.location == 1 ? 'primary' : 'danger'">
+          {{ scope.row.location == 1 ? "首页" : "我的" }}
+        </el-tag>
+      </template>
       <template #status="scope">
         <el-tag :type="scope.row.status == 1 ? 'success' : 'warning'">
           {{ scope.row.status == 1 ? "启用" : "禁用" }}
@@ -71,7 +76,6 @@
 
 <script setup lang="ts">
 import SingleImageUpload from "@/components/Upload/SingleImageUpload.vue";
-
 defineOptions({ name: "BannerInfo" });
 
 import BannerInfoAPI, {
@@ -80,7 +84,6 @@ import BannerInfoAPI, {
 } from "@/api/operationsManage/banner-info-api";
 import type { IObject, IModalConfig, IContentConfig, ISearchConfig } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
-import { IMAGE_BASE_URL } from "@/constants";
 // 组合式 CRUD
 const {
   searchRef,
@@ -170,6 +173,13 @@ const contentConfig: IContentConfig<BannerInfoPageQuery> = reactive({
       align: "center",
       templet: "custom",
     },
+    {
+      label: "展示位置",
+      prop: "location",
+      width: 100,
+      align: "center",
+      templet: "custom",
+    },
     {
       label: "跳转小程序appid",
       prop: "jumpAppid",
@@ -254,6 +264,21 @@ const addModalConfig: IModalConfig<BannerInfoForm> = reactive({
       initialValue: 0,
       rules: [{ required: true, message: "请选择是否跳转", trigger: "change" }],
     },
+    {
+      type: "select",
+      label: "banner位置",
+      prop: "location",
+      attrs: {
+        placeholder: "请选择banner位置",
+        clearable: true,
+        style: { width: "200px" },
+      },
+      rlules: [{ required: true, message: "请选择是否跳转", trigger: "change" }],
+      options: [
+        { label: "首页", value: 1 },
+        { label: "我的", value: 2 },
+      ],
+    },
     {
       type: "input",
       attrs: {