From ab0fa022718a0f8bbef24f43a60b0860c41947e3 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Sun, 30 Mar 2025 19:39:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=B7=BB=E5=8A=A0=E7=BB=84=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../other/h-carousel-roll/h-carousel-roll.vue | 310 ++++++++++++++++++
 1 file changed, 310 insertions(+)
 create mode 100644 src/sheep/components/other/h-carousel-roll/h-carousel-roll.vue

diff --git a/src/sheep/components/other/h-carousel-roll/h-carousel-roll.vue b/src/sheep/components/other/h-carousel-roll/h-carousel-roll.vue
new file mode 100644
index 0000000..3d21b5b
--- /dev/null
+++ b/src/sheep/components/other/h-carousel-roll/h-carousel-roll.vue
@@ -0,0 +1,310 @@
+<!-- 轮播滚动组件 -->
+
+<template>
+	<view class="flex row bg-white">
+		<view
+			v-if="textShow"
+			class="family700 size16 line20 bg-clip-text col-transparent"
+			:style="{
+				backgroundImage: gradients ? 'linear-gradient(to bottom right, ' + textColor + ', ' + colorRgba(textColor, 0.2) + ')' : '',
+				color: gradients ? '' : textColor,
+			}"
+		>
+			{{ text }}
+		</view>
+		<swiper
+			circular
+			autoplay
+			vertical
+			current="1"
+			:interval="interval"
+			duration="1000"
+			:display-multiple-items="2"
+			class="swiper marginLR15"
+			:style="{ color: titleColor }"
+		>
+			<swiper-item v-if="list.length > 3" v-for="(item, index) in list" :key="index" @click="$emit('active', item)" class="flex jbetween">
+				<view class="ellipsis">{{ item[title] }}</view>
+				<view v-if="timeShow" class="white-space size12 color9 paddingL5">
+					{{ timeFrom(item[time]) }}
+				</view>
+			</swiper-item>
+			<swiper-item v-if="list.length == 3" v-for="(item, index) in 4" :key="index" @click="$emit('active', list[item - 1])">
+				<view v-if="item < 4" class="flex jbetween">
+					<view class="ellipsis">{{ list[item - 1][title] }}</view>
+					<view v-if="timeShow" class="white-space size12 color9 paddingL5">
+						{{ timeFrom(list[item - 1][time]) }}
+					</view>
+				</view>
+				<view v-else class="flex jbetween">
+					<view class="ellipsis">{{ list[1][title] }}</view>
+					<view v-if="timeShow" class="white-space size12 color9 paddingL5">
+						{{ timeFrom(list[1][time]) }}
+					</view>
+				</view>
+			</swiper-item>
+			<swiper-item v-if="list.length == 0" v-for="item in 3" :key="item" class="flex jbetween">
+				<view class="ellipsis">暂无 {{ text }}</view>
+				<view v-if="timeShow" class="white-space size12 color9 paddingL5">刚刚</view>
+			</swiper-item>
+			<swiper-item v-if="list.length == 1" v-for="item in 3" :key="item" @click="$emit('active', list[0])" class="flex jbetween">
+				<view class="ellipsis">{{ list[0][title] }}</view>
+				<view v-if="timeShow" class="white-space size12 color9 paddingL5">
+					{{ timeFrom(list[0][time]) }}
+				</view>
+			</swiper-item>
+			<swiper-item
+				v-if="list.length == 2"
+				v-for="(item, index) in 4"
+				:key="item"
+				@click="$emit('active', list[index % list.length])"
+				class="flex jbetween"
+			>
+				<!-- #ifdef MP-WEIXIN -->
+				<view class="ellipsis" v-if="item == 0">{{ list[0][title] }}</view>
+				<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 0">
+					{{ timeFrom(list[0][time]) }}
+				</view>
+				<view class="ellipsis" v-if="item == 1">{{ list[1][title] }}</view>
+				<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 1">
+					{{ timeFrom(list[1][time]) }}
+				</view>
+				<view class="ellipsis" v-if="item == 2">{{ list[0][title] }}</view>
+				<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 2">
+					{{ timeFrom(list[0][time]) }}
+				</view>
+				<view class="ellipsis" v-if="item == 3">{{ list[1][title] }}</view>
+				<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 3">
+					{{ timeFrom(list[1][time]) }}
+				</view>
+				<!-- #endif -->
+				<!-- #ifndef MP-WEIXIN -->
+				<view class="ellipsis" v-if="item == 1">{{ list[0][title] }}</view>
+				<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 1">
+					{{ timeFrom(list[0][time]) }}
+				</view>
+				<view class="ellipsis" v-if="item == 2">{{ list[1][title] }}</view>
+				<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 2">
+					{{ timeFrom(list[1][time]) }}
+				</view>
+				<view class="ellipsis" v-if="item == 3">{{ list[0][title] }}</view>
+				<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 3">
+					{{ timeFrom(list[0][time]) }}
+				</view>
+				<view class="ellipsis" v-if="item == 4">{{ list[1][title] }}</view>
+				<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 4">
+					{{ timeFrom(list[1][time]) }}
+				</view>
+				<!-- #endif -->
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+/**
+ * @description 轮播滚动
+ * @example <h-carousel-roll :list="list"></h-carousel-roll>
+ *
+ * @property {String}			text				标题文字（默认 通知公告 ）
+ * @property {Boolean}			textShow			是否展示标题文字（默认 true ）
+ * @property {String}			textColor			标题文字颜色（默认 #f15723 ）
+ * @property {Boolean}			gradients			字体是否开启渐变色（默认 true ）
+ * @property {Array}			list				滚动数据
+ * @property {String}			title				滚动数据标题字段（默认 title）
+ * @property {String}			titleColor			滚动数据标题颜色（默认 #000000）
+ * @property {String}			time				滚动数据时间字段（默认 time）
+ * @property {Boolean}			timeShow			是否展示时间（默认 true ）
+ * @property {Number}			interval			轮播自动切换时间间隔（默认 5000 ）
+ *
+ * @event {Function} active			点击数据时触发
+ */
+export default {
+	// 小程序样式穿透
+	options: {
+		styleIsolation: "shared",
+	},
+	name: "h-carousel-roll",
+	props: {
+		// 标题文字
+		text: {
+			type: String,
+			default: "通知公告",
+		},
+		// 是否展示标题文字
+		textShow: {
+			type: Boolean,
+			default: true,
+		},
+		// 标题文字颜色
+		textColor: {
+			type: String,
+			default: "#f15723",
+		},
+		// 字体是否开启渐变色
+		gradients: {
+			type: Boolean,
+			default: true,
+		},
+		// 滚动数据
+		list: {
+			type: Array,
+			default: () => [],
+		},
+		// 滚动数据标题字段
+		title: {
+			type: String,
+			default: "title",
+		},
+		// 滚动数据标题颜色
+		titleColor: {
+			type: String,
+			default: "#000000",
+		},
+		// 滚动数据时间字段
+		time: {
+			type: String,
+			default: "time",
+		},
+		// 是否展示时间
+		timeShow: {
+			type: Boolean,
+			default: true,
+		},
+		// 轮播自动切换时间间隔
+		interval: {
+			type: Number,
+			default: 5000,
+		},
+	},
+	data() {
+		return {}
+	},
+	methods: {
+		// 转换时间
+		timeFrom(time) {
+			if (time) {
+				let arrs = time.split(/[- :]/)
+				let times = new Date(arrs[0], arrs[1] - 1, arrs[2], arrs[3], arrs[4], arrs[5])
+				return uni.$u.timeFrom(new Date(times).getTime(), false)
+			}
+		},
+		// 颜色转换
+		colorRgba(sHex, alpha = 1) {
+			// 十六进制颜色值的正则表达式
+			var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+			/* 16进制颜色转为RGB格式 */
+			let sColor = sHex.toLowerCase()
+			if (sColor && reg.test(sColor)) {
+				if (sColor.length === 4) {
+					var sColorNew = "#"
+					for (let i = 1; i < 4; i += 1) {
+						sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+					}
+					sColor = sColorNew
+				}
+				//  处理六位的颜色值
+				var sColorChange = []
+				for (let i = 1; i < 7; i += 2) {
+					sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)))
+				}
+				if (alpha == 1) {
+					return sColorChange.join(",")
+				} else {
+					return "rgba(" + sColorChange.join(",") + "," + alpha + ")"
+				}
+			} else {
+				return sColor
+			}
+		},
+	},
+}
+</script>
+<style lang="scss" scoped>
+page {
+	background: #f9f9f9;
+	font-family: "微软雅黑", sans-serif;
+	font-size: 28rpx;
+	min-height: 100%;
+	overflow-x: hidden;
+	-webkit-overflow-scrolling: touch;
+}
+
+.bg-white {
+	background-color: #ffffff !important;
+}
+
+.row {
+	flex-direction: row;
+}
+
+.flex {
+	display: flex;
+}
+
+.family700 {
+	font-weight: 700;
+}
+
+.line20 {
+	line-height: 40rpx;
+}
+
+.col-transparent {
+	color: transparent;
+}
+
+.marginLR15 {
+	margin: 0 30rpx;
+}
+
+.jbetween {
+	justify-content: space-between;
+}
+
+/* 不换行显示省略号 */
+.ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* 不换行 */
+.white-space {
+	white-space: nowrap;
+}
+
+.size12 {
+	font-size: 24rpx;
+}
+
+.size16 {
+	font-size: 32rpx;
+}
+
+.color9 {
+	color: #999999;
+}
+
+.paddingL5 {
+	padding-left: 10rpx;
+}
+
+.swiper {
+	width: 100%;
+	height: 108rpx;
+	padding: 16rpx 0;
+}
+
+.bg-clip-text {
+	padding: 30rpx 0 30rpx 30rpx;
+	-webkit-background-clip: text;
+	background-clip: text;
+	min-width: 70rpx;
+	width: 70rpx;
+}
+
+/deep/ .uni-swiper-slide-frame {
+	line-height: 54rpx;
+}
+</style>