jsh_erp_app/uni_modules/uview-ui/components/u-swiper/u-swiper.vue

<template>
	<view
		class="u-swiper"
		:style="{
			backgroundColor: bgColor,
			height: $u.addUnit(height),
			borderRadius: $u.addUnit(radius)
		}"
	>
		<view class="u-swiper__loading" v-if="loading">
			<u-loading-icon mode="circle"></u-loading-icon>
		</view>
		<swiper
			v-else
			class="u-swiper__wrapper"
			:style="{
				height: $u.addUnit(height)
			}"
			@change="change"
			:circular="circular"
			:interval="interval"
			:duration="duration"
			:autoplay="autoplay"
			:current="current"
			:currentItemId="currentItemId"
			:previousMargin="$u.addUnit(previousMargin)"
			:nextMargin="$u.addUnit(nextMargin)"
			:acceleration="acceleration"
			:displayMultipleItems="displayMultipleItems"
			:easingFunction="easingFunction"
		>
			<swiper-item class="u-swiper__wrapper__item" v-for="(item, index) in list" :key="index">
				<view class="u-swiper__wrapper__item__wrapper" :style="[itemStyle(index)]">
					<!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
					<image
						class="u-swiper__wrapper__item__wrapper__image"
						v-if="getItemType(item) === 'image'"
						:src="getSource(item)"
						:mode="imgMode"
						@tap="clickHandler(index)"
						:style="{
							height: $u.addUnit(height),
							borderRadius: $u.addUnit(radius)
						}"
					></image>
					<video
						class="u-swiper__wrapper__item__wrapper__video"
						v-if="getItemType(item) === 'video'"
						:id="`video-${index}`"
						:enable-progress-gesture="false"
						:src="getSource(item)"
						:poster="getPoster(item)"
						:title="showTitle && $u.test.object(item) && item.title ? item.title : ''"
						:style="{
							height: $u.addUnit(height)
						}"
						controls
						@tap="clickHandler(index)"
					></video>
					<text v-if="showTitle && $u.test.object(item) && item.title && $u.test.image(getSource(item))" class="u-swiper__wrapper__item__wrapper__title u-line-1">
						{{ item.title }}
					</text>
					<view v-if="showContent" class="u-swiper__wrapper__item__wrapper__content" @click="toDetail(index)">
						<view class="fine_bottom">
							<view class="fine_bottom_content">
								<view class="fine_name u-line-1">{{ item.name }}</view>
								<view class="fine_user">
									<u-avatar-group :urls="item.member.map(item => item.avatar)" size="30rpx" gap="0.4"></u-avatar-group>
									<view class="fine_user_text">{{ item.number_num }}人已加入</view>
								</view>
							</view>
							<view @click.stop="circleEnter(index)" class="fine_btn" v-if="item.is_enter === 0">加入</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="u-swiper__indicator" :style="[$u.addStyle(indicatorStyle)]">
			<slot name="indicator">
				<u-swiper-indicator
					v-if="!loading && indicator && !showTitle"
					:indicatorActiveColor="indicatorActiveColor"
					:indicatorInactiveColor="indicatorInactiveColor"
					:length="list.length"
					:current="currentIndex"
					:indicatorMode="indicatorMode"
				></u-swiper-indicator>
			</slot>
		</view>
	</view>
</template>

<script>
import props from './props.js'
/**
 * Swiper 轮播图
 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
 * @tutorial https://www.uviewui.com/components/swiper.html
 * @property {Array}			list					轮播图数据
 * @property {Boolean}			indicator				是否显示面板指示器（默认 false ）
 * @property {String}			indicatorActiveColor	指示器非激活颜色（默认 '#FFFFFF' ）
 * @property {String}			indicatorInactiveColor	指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
 * @property {String | Object}	indicatorStyle			指示器样式，可通过bottom，left，right进行定位
 * @property {String}			indicatorMode			指示器模式（默认 'line' ）
 * @property {Boolean}			autoplay				是否自动切换（默认 true ）
 * @property {String | Number}	current					当前所在滑块的 index（默认 0 ）
 * @property {String}			currentItemId			当前所在滑块的 item-id ，不能与 current 被同时指定
 * @property {String | Number}	interval				滑块自动切换时间间隔（ms）（默认 3000 ）
 * @property {String | Number}	duration				滑块切换过程所需时间（ms）（默认 300 ）
 * @property {Boolean}			circular				播放到末尾后是否重新回到开头（默认 false ）
 * @property {String | Number}	previousMargin			前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
 * @property {String | Number}	nextMargin				后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
 * @property {Boolean}			acceleration			当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
 * @property {Number}			displayMultipleItems	同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
 * @property {String}			easingFunction			指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
 * @property {String}			keyName					list数组中指定对象的目标属性名（默认 'url' ）
 * @property {String}			imgMode					图片的裁剪模式（默认 'aspectFill' ）
 * @property {String | Number}	height					组件高度（默认 130 ）
 * @property {String}			bgColor					背景颜色（默认 	'#f3f4f6' ）
 * @property {String | Number}	radius					组件圆角，数值或带单位的字符串（默认 4 ）
 * @property {Boolean}			loading					是否加载中（默认 false ）
 * @property {Boolean}			showTitle				是否显示标题，要求数组对象中有title属性（默认 false ）
 * @event {Function(index)}	click	点击轮播图时触发	index：点击了第几张图片，从0开始
 * @event {Function(index)}	change	轮播图切换时触发(自动或者手动切换)	index：切换到了第几张图片，从0开始
 * @example	<u-swiper :list="list4" keyName="url" :autoplay="false"></u-swiper>
 */
export default {
	name: 'u-swiper',
	mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
	data() {
		return {
			currentIndex: 0
		}
	},
	watch: {
		current(val, preVal) {
			if (val === preVal) return
			this.currentIndex = val // 和上游数据关联上
		}
	},
	computed: {
		itemStyle() {
			return (index) => {
				const style = {}
				// #ifndef APP-NVUE || MP-TOUTIAO
				// 左右流出空间的写法不支持nvue和头条
				// 只有配置了此二值，才加上对应的圆角，以及缩放
				if (this.nextMargin && this.previousMargin) {
					style.borderRadius = uni.$u.addUnit(this.radius)
					if (index !== this.currentIndex) style.transform = 'scale(0.92)'
				}
				// #endif
				return style
			}
		}
	},
	methods: {
		getItemType(item) {
			if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
			if (typeof item === 'object' && this.keyName) {
				if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
				if (item.type === 'image') return 'image'
				if (item.type === 'video') return 'video'
				return 'image'
			}
		},
		// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
		getSource(item) {
			if (typeof item === 'string') return item
			if (typeof item === 'object' && this.keyName) return item[this.keyName]
			else uni.$u.error('请按格式传递列表参数')
			return ''
		},
		// 轮播切换事件
		change(e) {
			// 当前的激活索引
			const { current } = e.detail
			this.pauseVideo(this.currentIndex)
			this.currentIndex = current
			this.$emit('change', e.detail)
		},
		// 切换轮播时，暂停视频播放
		pauseVideo(index) {
			const lastItem = this.getSource(this.list[index])
			if (uni.$u.test.video(lastItem)) {
				// 当视频隐藏时，暂停播放
				const video = uni.createVideoContext(`video-${index}`, this)
				video.pause()
			}
		},
		// 当一个轮播item为视频时，获取它的视频海报
		getPoster(item) {
			return typeof item === 'object' && item.poster ? item.poster : ''
		},
		// 点击某个item
		clickHandler(index) {
			this.$emit('click', index)
		},
		// 详情
		toDetail(index) {
			this.$emit('toDetail', index)
		},
		// 新增加入
		circleEnter(index) {
			this.$emit('circleEnter', index)
		}
	}
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/components.scss';

.u-swiper {
	@include flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;

	&__wrapper {
		flex: 1;

		&__item {
			flex: 1;

			&__wrapper {
				@include flex;
				position: relative;
				overflow: hidden;
				transition: transform 0.3s;
				flex: 1;

				&__image {
					flex: 1;
				}

				&__video {
					flex: 1;
				}

				&__title {
					position: absolute;
					background-color: rgba(0, 0, 0, 0.3);
					bottom: 0;
					left: 0;
					right: 0;
					font-size: 28rpx;
					padding: 12rpx 24rpx;
					color: #ffffff;
					flex: 1;
				}
				&__content {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					padding: 12rpx 0 10rpx 0;
					.fine_top {
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						width: 100rpx;
						height: 48rpx;
						background: rgba(0, 0, 0, 0.6);
						border-radius: 24rpx;
						margin-left: 16rpx;
						.fine_top_text {
							font-size: 20rpx;
							color: #ffffff;
							margin-left: 10rpx;
						}
					}
					.fine_bottom {
						margin: 0 auto;
						width: 580rpx;
						height: 100rpx;
						background: #ffffff;
						border-radius: 20rpx;
						padding: 0 20rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						.fine_bottom_content {
							width: 400rpx;
							.fine_name {
								font-weight: bold;
								font-size: 26rpx;
								color: #323232;
								line-height: 36rpx;
								margin-bottom: 4rpx;
							}
							.fine_user {
								display: flex;
								flex-direction: row;
								align-items: center;
								height: 40rpx;
								font-size: 20rpx;
								color: #323232;
								.fine_user_text {
									margin-left: 10rpx;
								}
							}
						}
						.fine_btn {
							width: 110rpx;
							height: 54rpx;
							background: #d59b4d;
							border-radius: 27rpx;
							text-align: center;
							line-height: 54rpx;
							font-size: 24rpx;
							font-weight: bold;
							color: #ffffff;
						}
					}
				}
			}
		}
	}

	&__indicator {
		position: absolute;
		bottom: 10px;
	}
}
</style>