源文件

2025-04-25 09:49:53 +08:00
commit 791d82b9e3
640 changed files with 130029 additions and 0 deletions
--- a/components/slider/slider.vue
+++ b/components/slider/slider.vue
@@ -0,0 +1,158 @@
+<template>
+    <view :class="theme_view">
+        <view v-if="propData.length > 0" class="spacing-mb" :class="(propLeft ? 'swiper-left ' : '') + (propRight ? 'swiper-right ' : '')">
+            <uni-swiper-dot class="uni-swiper-dot-box" :mode="propMode" :dots-styles="dotsStyles" @clickItem="click_item" :info="propData" :current="current">
+                <swiper class="banner oh" :class="' banner-' + (propSize || 'default') + ' ' + propRadius" :autoplay="propData.length > 0" :duration="duration" :circular="circular" @change="swiper_change" :current="swiperDotIndex">
+                    <swiper-item v-for="(item, i) in propData" :key="i">
+                        <image class="image" :src="item.images_url" mode="widthFix" :data-value="item.event_value || item.url" :data-type="item.event_type == undefined ? 1 : item.event_type" @tap="banner_event"> </image>
+                    </swiper-item>
+                </swiper>
+            </uni-swiper-dot>
+        </view>
+    </view>
+</template>
+<script>
+    const app = getApp();
+    export default {
+        data() {
+            return {
+                theme_view: app.globalData.get_theme_value_view(),
+                circular: true,
+                duration: 500,
+                styleIndex: -1,
+                current: 0,
+                swiperDotIndex: 0,
+                dotsStyles: {},
+            };
+        },
+
+        components: {},
+        props: {
+            propData: {
+                type: Array,
+                default: [],
+            },
+            propSize: {
+                type: String,
+                default: 'default',
+            },
+            propRadius: {
+                type: String,
+                default: 'border-radius-main',
+            },
+            // 指示点 class 调整靠左
+            propLeft: {
+                type: Boolean,
+                default: false,
+            },
+            // 指示点 class 调整靠右
+            propRight: {
+                type: Boolean,
+                default: false,
+            },
+            // 轮播指示点分类 default/dot/round/nav/indexes
+            propMode: {
+                type: String,
+                default: 'dot',
+            },
+            // 未选择指示点背景色
+            propBackgroundColor: {
+                type: String,
+                default: '#fff',
+            },
+            // 指示点宽度 在 mode = nav、mode = indexes 时不生效
+            propWidth: {
+                type: Number,
+                default: 6,
+            },
+            // 指示点距 swiper 底部的高度
+            propBottom: {
+                type: Number,
+                default: 10,
+            },
+            // 未选择指示点边框样式
+            propBorder: {
+                type: String,
+                default: '0',
+            },
+            // 指示点前景色，只在 mode = nav ，mode = indexes 时生效
+            propColor: {
+                type: String,
+                default: '#fff',
+            },
+            // 已选择指示点背景色，在 mode = nav 时不生效
+            propSelectedBackgroundColor: {
+                type: String,
+                default: '' + app.globalData.hex_rgba(app.globalData.get_theme_color(), 0.5),
+            },
+            // 已选择指示点边框样式，在 mode = nav 时不生效
+            propSelectedBorder: {
+                type: String,
+                default: '0',
+            },
+        },
+        beforeMount() {
+            this.dotsStyles = {
+                backgroundColor: this.propBackgroundColor,
+                width: this.propWidth,
+                bottom: this.propBottom,
+                border: this.propBorder,
+                color: this.propColor,
+                selectedBackgroundColor: this.propSelectedBackgroundColor,
+                selectedBorder: this.propSelectedBorder,
+            };
+        },
+        methods: {
+            swiper_change(e) {
+                // 原始index
+                this.current = e.detail.current;
+                // 当前滑index
+                // this.currentIndex = tmpCurrent == this.propData.length - 1 ? 0 : tmpCurrent + 1;
+                this.$emit('changeBanner', this.propData[this.current].bg_color);
+            },
+            click_item(e) {
+                this.swiperDotIndex = e;
+            },
+            banner_event(e) {
+                app.globalData.operation_event(e);
+            },
+        },
+    };
+</script>
+<style>
+    .banner {
+        transform: translateY(0);
+    }
+
+    .banner .image {
+        min-width: 100%;
+    }
+
+    .banner-mini,
+    .banner-mini .image {
+        height: 200rpx !important;
+    }
+
+    .banner-default,
+    .banner-default .image {
+        height: 280rpx !important;
+    }
+
+    .banner-max,
+    .banner-max .image {
+        height: 420rpx !important;
+    }
+
+    /**
+	 * 指示点 左右定位
+	 */
+    .swiper-left /deep/ .uni-swiper__dots-box {
+        justify-content: start;
+        padding-left: 24rpx;
+    }
+
+    .swiper-right /deep/ .uni-swiper__dots-box {
+        justify-content: end;
+        padding-right: 24rpx;
+    }
+</style>