mh/components/lunbobox.vue

<template>
	<view class="lunbobox-container">
		<template v-for="(lunbobox, index) in lunboboxList">
			<view :key="index" :class="['lunbobox', showIndex == index && 'show', nextIndex == index && 'next']"  @click="toDetail">
				<view class="left-info">
					<view class="avatar">
						<image :src="'/static/def-avatar.png'" mode="heightFix"></image>
					</view>
					<view class="user">{{ lunbobox.nickname }}</view>
					<view class="goods-name">获得{{ lunbobox.goods_name }}</view>
				</view>
				<view class="goods-img">
					<image :src="lunbobox.goods_image" mode="widthFix"></image>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:"lunbobox",
		data() {
			return {
				lunboboxList: [],
				showIndex: 0
			};
		},
		computed:{
			nextIndex(){
				if(this.showIndex < this.lunboboxList.length - 1){
					return this.showIndex + 1
				} else {
					return 0
				}
			},
			cueeShowBox(){
				return this.lunboboxList[this.showIndex]
			}
		},
		created() {
			this.getLunboBoxList()
			setInterval(() => {
				this.showIndex = this.nextIndex
			}, 3000)
		},
		methods: {
			getLunboBoxList(){
				this.$api.lunbobox().then( ({code, data}) => {
					if(code == 1){
						this.lunboboxList = this.dataHandler(data)
					}
				})
			},
			dataHandler(data){
				let dataList = data.map(item => {
					item.nickname = this.nicknameHandler(item.nickname)
					item.goods_name = this.goodsNameHandler(item.goods_name)
					return item
				})
				return dataList
			},
			nicknameHandler(nickname){
				let left = nickname.substring(0, 1)
				let right = nickname.substring(nickname.length - 2, nickname.length - 1)
				return `${left}***${right}`
			},
			goodsNameHandler(goodsName){
				let len = 4
				if(goodsName.length <= len){
					return goodsName
				}
				return goodsName.substring(0, len)
			},
			toDetail(){
				const boxId = this.cueeShowBox.box_id
				console.log(this.cueeShowBox)
				if(boxId){
					uni.navigateTo({url:'/pages/index/details?id=' + boxId + '&type=0'})
				}
			}
		}
	}
</script>

<style lang="scss">
	.user,.goods-name{
		color: #FFFFFF;
	}
	.lunbobox-container{
		padding: 10rpx 10rpx;
		margin-top: 5rpx;
		.lunbobox{
			transition: .5s;
			opacity: 0;
			display: flex;
			height: 0;
			background-image: url('@/static/lunbo.png');   
			background-repeat: no-repeat;
			background-size: auto 100%;
			width: 205px;
			$height: 35px;
			$avatar-size: 28px;
			position: relative;
			.avatar{
				width: $avatar-size;
				height: $avatar-size;
				border: solid 1px #fff;
				border-radius: 50px;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				margin-left: 5px;
				margin-right: 10px;
			}
			&.show{
				opacity: 1;
				height: $height;
			}
			&.next{
				height: $height;
				opacity: .5;
				transform: scale(0.7) translateX(-20%);
			}
			.left-info{
				height: 100%;
				display: flex;
				width: 162px;
				align-items: center;
				>view{
					font-size: 13px;
					font-weight: 500;
				}
			}
			.goods-img{
				height: 83%;
				transform: translateY(4px);
				flex: 1;
				display: flex;
				align-items: center;
				overflow: hidden;
				justify-content: center;
				image{
					width: 45%;
				}
			}
		}
	}
</style>