nherp-shop/pages/commponent/home/chaozhi.vue

<template>
	<view class="chaozhi" :style="{'background-image':'url('+ list.bgi +')'}">
		<view style="height: 30%;" class="flex justify-between padding-top-xs align-center">
			<view class="flex padding-l" style="width:80%;line-height: 60rpx;">
				<image :src="list.logo" class="logo"></image>
				<image :src="list.title" class="title"></image>
				<view class="padding-left-xs text-orange text-xs">|</view>
				<!-- :circular="true" 设置无缝滚动 -->
				<swiper class="notice_swiper padding-left-xs" :circular="true" vertical easing-function="easeInOutCubic" autoplay interval="3000">
				  <swiper-item v-for="(item,index) in list.noticeList" :key="index" class="sw_item">
						   <text class="sw_text " style="font-weight: 900;">{{item.title}}</text>
				  </swiper-item>
				</swiper>
			</view>
			
			<view class="radius chaozhi_button text-center margin-xs"> 
				<view style="border: 1px solid #FFEB8F;padding:2px;border-radius: 20px;">
					<text class=" border">去抢购</text> <text class="cuIcon-right text-orange"></text>
				</view>
			</view>
		</view>
		
		<swiper class="chaozhi_list" @change="Swiper" :circular="true" vertical easing-function="easeInOutCubic" autoplay interval="3000">
		  <swiper-item  v-for="(item,index) in list.list_good" :key="index" class="grid col-4 ">
			
			<view class="flex justify-center" v-for="(good_item,index) in item" :key="index">
				<image :src="good_item.img" class="h-100 padding-xs sw_img" style="position: relative; padding-bottom: 30rpx;" mode="aspectFill"></image>
				<view class="text-bold flex align-end" style=" position: absolute; bottom:0; margin-bottom: 10rpx;">
					<view class="bg-gradual-orange text-price flex" style="border-radius: 10rpx 10rpx 0 6rpx;padding:0rpx 4rpx 0rpx 2rpx;">
						<view class=" text-l" style="padding:2rpx 8rpx;" v-html="good_item.price" ></view> 
					</view>
					
					<view class="oldprice  text-price "v-if="good_item.oldPrice!=''">
						{{good_item.oldPrice}}
					</view>
				</view>
			</view>
			
		  </swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import indexBackgroundImage from "@/static/images/new/chaozhi_bgi.png"
	
	export default {
	  data() {
	    return {
			list:{
				bgi:indexBackgroundImage,
				logo:'/static/images/new/chaozhi_logo.png',
				title:'/static/images/new/chaozhi_title.png',
				noticeList: [
					{title: '32324465人正在抢购'},
					{title: '宋**婷刚刚下单啦'},
					{title: '尚**际刚刚下单啦'},
					{title: '付**白刚刚下单啦'},
					{title: '海**海刚刚下单啦'}
				],
				sw_select:0,
				list_good:[
					{img:"https://p0.meituan.net/mallimages/2fd33f00df1266428c446ab0544f170b105276.jpg",price:"9.5",oldPrice:"",},
					{img:"https://p0.meituan.net/mallimages/2bf56ad37cd865c9b936de355ac703da291588.jpg",price:"2.5",oldPrice:"3.0",},
					{img:"https://p0.meituan.net/mallimages/9a4786e764d0f53318a42d0df8628e7f516056.png",price:"9.99",oldPrice:"12.0",},
					{img:"https://p0.meituan.net/mallimages/965103a1fe16a42ce9e9e525382490be247677.jpg",price:"7.9",oldPrice:"9.0",},
					
					{img:"https://p0.meituan.net/mallimages/d4bfebff42d203e6ef8df97dc9c4c53e243115.jpg",price:"19.9",oldPrice:"23.5",},
					{img:"https://p0.meituan.net/mallimages/f724bb1033b0bf84ddda34a72af89468302986.jpg",price:"6.99",oldPrice:"",},
					{img:"https://p1.meituan.net/mallimages/f9d4e9fd6e59a028f95461fcac070926829853.png",price:"0.99",oldPrice:"1.5",},
					{img:"https://p0.meituan.net/mallimages/5c71f2f5a30ea1ba19e0261796abbb4760368.jpg",price:"0.99",oldPrice:"1.2",}
					
				],
				
			},

		};
	  },
	  created() {
	  	    
			
	  	    
	  },
	  components: {},
	  props: {
	  },
	  mounted(){
		  // 处理数组
		  this.arrgood()
	  },
	  methods: {
		  
		  // 处理超值商品数组
		  arrgood(){
			  for(var i=0;i< this.list.list_good.length;i++){
			  	var price =  this.list.list_good[i].price
			  	
			  	let splitPrice = price.split(".");
			  	//2.重新赋值
			  	this.list.list_good[i].price = `${splitPrice[0]}.<span style="font-size:12px;">${splitPrice[1]}</span>`;
			  	
			  }
			  
			  
			  this.list.list_good =  this.arrTrans(4,this.list.list_good);
		  },
		  
		  
		  
		  Swiper(e) {
		  	
		  	this.sw_select = e.detail.current
		  },
		  
		  arrTrans(num, arr) { // 一维数组转换为二维数组
		    const iconsArr = []; // 声明数组
		    arr.forEach((item, index) => {
		      const page = Math.floor(index / num); // 计算该元素为第几个素组内
		      if (!iconsArr[page]) { // 判断是否存在
		        iconsArr[page] = [];
		      }
		      iconsArr[page].push(item);
		    });
		    return iconsArr;
		  }
	  }
	};
</script>

<style>
.chaozhi{
	width: 94%;
	height: 285upx;
	background-size: 100% 100%;
	margin: 0 3%;
	padding-bottom: 20rpx;
	
}
.logo{
	width: 65rpx;
	height: 65rpx;
}
.title{
	width: 140rpx;
	height: 60rpx;
}
.notice_swiper{
  width: 50%;
  height: 50upx;
}
.notice_swiper .sw_item{
  height: 80upx;
}
.notice_swiper .sw_item .sw_text{
  font-size: 24upx;
  color: #EE5D37;
  display: inline-block;
}
.notice_swiper .sw_image{
  width: 40upx;
  height: 40upx;
  float: right;
  margin-top: 20upx;
}
.chaozhi_button{
	width: 17%;
	height: 50rpx;
	text-align: center;
	background: linear-gradient(155deg, #fffbeb 0%, #FFEB8F 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	margin-right: 3%;
	font-size: 13px;
	color: #FF3B3B;
}
.chaozhi_list{
	height: 70%;
	background-color: #FFFFFF;
	margin: 10rpx;
	border-radius: 10rpx;
}
.sw_img{
	position: relative;
}
.text-price::before{padding-top: 10%;padding-left: 5%;margin-right:0;}
.oldprice{
	background-color: #FFE26A;
	color: #9D4900;
	text-decoration: line-through;
	font-size: 12px;
	padding-right: 10rpx;
	border-radius: 0 10rpx 6rpx 0;
}
</style>