From 3d9c023bd0f9bd7ac1987e226955dcb67aa3c938 Mon Sep 17 00:00:00 2001
From: liwenxuan <1298531568@qq.com>
Date: Thu, 25 Jan 2024 10:35:42 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DesignForm/assembly/index.ts   |  7 +-
 src/components/DesignForm/formControlAttr.vue | 11 ++-
 src/widget/carousel/lowcodeCarousel.vue       | 90 ++++++++++++++-----
 3 files changed, 80 insertions(+), 28 deletions(-)

diff --git a/src/components/DesignForm/assembly/index.ts b/src/components/DesignForm/assembly/index.ts
index 96361afae..63b132672 100644
--- a/src/components/DesignForm/assembly/index.ts
+++ b/src/components/DesignForm/assembly/index.ts
@@ -350,7 +350,12 @@ const selectOption: any = [
 							imgSort:1,
 							imgUrl: '',
 							link: ''
-				}]
+				}],
+				config: {
+					carsuselWidth:448,
+					carsuselHeight:252,
+					interval:2000,
+				}
 			},
 			config: {}
 		}
diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index 71124f3ea..355341119 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -2006,7 +2006,12 @@ const changeCurrentUploadImgid = (clickedRow:any) => {
 	</div>
 	<!-- 轮播图设置弹窗 20240122 start -->
 	
-		<el-dialog v-model="dialogTableVisible" title="轮播图设置" top="20px" style="width:60%,margin-top:70px,margin-left:270px">
+		<el-dialog v-model="dialogTableVisible" title="轮播图设置" top="20px" style="margin-top:70px,margin-left:270px">
+			<div v-if="controlData.type=='lowcodeCarsusel'" style="margin-bottom: 30px;">
+				<span style="margin-right: 10px;">轮播图宽度(像素):</span><el-input-number v-model="controlData.control.config.carsuselWidth" :step="64" :max="4096" :min="178"/>
+				<span style="margin-left:15px;margin-right: 10px;">轮播图高度(像素):</span><el-input-number v-model="controlData.control.config.carsuselHeight" :step="36" :max="4096" :min="100"/>
+				<span style="margin-left:15px;margin-right: 10px;">切图间隔(毫秒):</span><el-input-number v-model="controlData.control.config.interval" :step="200"/>
+			</div>
 		<el-table v-if="controlData.type=='lowcodeCarsusel'" :data="controlData.control.carsuselConfigArr" border style="width: 100%" row-key="imgId">
 			<el-table-column  label="设置图片" width="180" >
 				<template #default="propFlag">
@@ -2017,7 +2022,7 @@ const changeCurrentUploadImgid = (clickedRow:any) => {
 					:limit="1"
 					accept=".jpg,.jpeg,.png,.tif,.tga,.bmp,.dds,.svg,.eps,.pdf,.hdr,.raw,.exr,.psd,.afphoto,.afdesign">
 						<el-button v-if="!propFlag.row.uploadFlag" type="primary" @click="changeCurrentUploadImgid(propFlag.row)">点此上传</el-button>
-						<el-button v-if="propFlag.row.uploadFlag" type="primary">已上传,点击修改</el-button>
+						<el-button v-if="propFlag.row.uploadFlag" type="primary" @click="changeCurrentUploadImgid(propFlag.row)">已上传,点击修改</el-button>
 					</el-upload>
 				</template>
 			</el-table-column>
@@ -2040,7 +2045,7 @@ const changeCurrentUploadImgid = (clickedRow:any) => {
 					<el-input v-model="linkScope.row.link"  placeholder="输入图片的链接地址" />
 				</template>
 			</el-table-column>
-			<el-table-column fixed="right" label="操作" width="120" >
+			<el-table-column fixed="right" label="操作（增/删）" width="120" >
 				
 				<template #default="scope">
 					
diff --git a/src/widget/carousel/lowcodeCarousel.vue b/src/widget/carousel/lowcodeCarousel.vue
index 383346888..8c7c41cde 100644
--- a/src/widget/carousel/lowcodeCarousel.vue
+++ b/src/widget/carousel/lowcodeCarousel.vue
@@ -1,51 +1,87 @@
 <template>
-    <el-carousel arrow="always" style="width: 495px; height: 300px;">
-        <el-carousel-item v-for="item in carsouselData" :key="item.imgId" >
-          <!-- <img 
-            style="width:100%,height:100%"
-            referrerpolicy="no-referrer" 
-            :src="item.imgUrl" fit="fill"
-            @error="errorImg($event)"
-            /> -->
-            <el-image style="width: 100%; height: 100%;cursor:pointer;" :src="item.imgUrl" fit="contain" alt="暂未上传" @click="handleLink(item)" >
-						<template #error>
-							<div class="image-slot">
-								<el-image style="width: 100%; height: 100%;" :src="errimg" fit="contain" ></el-image>
-							</div>
-						</template>
-					</el-image>
-        </el-carousel-item>
-    </el-carousel>
+  <el-carousel arrow="hover" :style="{height:carsuselHeight,width:carsuselWidth}" :interval = "interval" :height="carsuselHeight" trigger="click">
+    <el-carousel-item v-for="item in carsouselData" :key="item.imgId">
+      <el-image 
+        style="width: 100%; height: 100%;cursor:pointer;" :src="item.imgUrl" fit="cover" alt="暂未上传"
+        @click="handleLink(item)">
+        <template #error>
+          <!-- <div class="image-slot"> -->
+            <el-image style="width: 100%; height: 100%" :src="errimg" fit="fill" @click="noMsg" ></el-image>
+          <!-- </div> -->
+          <!-- <div class="image-slot">
+            <el-icon><icon-picture /></el-icon>
+          </div> -->
+        </template>
+      </el-image>
+    </el-carousel-item>
+  </el-carousel>
 </template>
 
 <script setup lang="ts">
 import { CarsuselConfig } from '@/api/DesignForm/types'
+import { Picture as IconPicture } from '@element-plus/icons-vue'
 import errimg from '@/assets/404_images/imgNotFound.png'
+//import errimg from '@/assets/404_images/untilUploadImg.png'
+
 const props = defineProps({
   // eslint-disable-next-line vue/require-default-prop
   data: {
     type: Object,
   }
 })
-const carsouselData:CarsuselConfig[] = props.data?.control.carsuselConfigArr
+const carsouselData: CarsuselConfig[] = props.data?.control.carsuselConfigArr
+
+const carsuselHeight = props.data?.control.config.carsuselHeight+'px'
+
+const carsuselWidth = props.data?.control.config.carsuselWidth+'px'
 
+const interval = props.data?.control.config.interval
 
 function errorImg(e: any) {
   e.srcElement.src = errimg;
   //这一句没用，如果默认图片的路径错了还是会一直闪屏，在方法的前面加个.once只让它执行一次也没用
   e.srcElement.onerror = null; //防止闪图
 }
-function handleLink(item:any){
-  alert(item.link)
-  window.open(item.link,'_blank')
+function handleLink(item: any) {
+  console.log("handleLink")
+  let url = "";
+  let urlStart = 'http://'
+  // http://  7
+  //https://  8
+  if (item.link.length < 7) {
+    if (item.link == '') {
+      alert("未配置跳转地址")
+      return
+    }
+    url = urlStart + "" + item.link
+  } else {
+    const linkStartComplete1 = item.link.startsWith("http://")
+    const linkStartComplete2 = item.link.startsWith("https://")
+    if (linkStartComplete1 || linkStartComplete2) {
+      url = item.link
+    } else {
+      url = urlStart + "" + item.link
+    }
+  }
+  window.open(url, '_blank')
+}
+function noMsg() {
+  alert("轮播图未配置")
 }
 </script>
 
 <style scoped>
-.lowcodeCarsousel{
-    height:300px;
-    width:550px;
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
 }
+
 .demonstration {
   color: var(--el-text-color-secondary);
 }
@@ -66,5 +102,11 @@ function handleLink(item:any){
   background-color: #d3dce6;
 }
 
+/* .el-carousel__item:nth-child(2n) {
+  background-color: white;
+}
 
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: white;
+} */
 </style>
\ No newline at end of file