项目初始化

pages/tabbar/components/home/noticeBar.vue

@@ -0,0 +1,112 @@
+<template>
+	<view class="tui-rolling-news">
+		<view class="title">
+			<u-icon name="bell-fill" size="26" color='#fff'></u-icon>
+			<text class="text">最新消息</text>
+		</view>
+		<swiper vertical autoplay circular interval="3000" class="tui-swiper">
+			<swiper-item v-for="(item,index) in newsList" :key="index" class="tui-swiper-item">
+				<view class="tui-news-item">{{item}}</view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	import sheep from '@/sheep';
+	export default {
+		components: {
+			
+		},
+		props: {
+			
+		},
+		data() {
+			return {
+				
+			}
+		},
+		computed: {
+			newsList() {
+				var giftList = sheep.$store('sys').giftList;
+				var newsList = [];
+				var that = this;
+				giftList.forEach(function(item){
+					var news = "【"+item.nickname+"】收到了好友赠送 "+ that.fen2yuan(item.payMoney)+" 颗"
+					if(item.rewardType){
+						news = "【"+item.nickname+"】收到好友赠送 "+item.name+" x"+item.count;
+					}
+					newsList.push(news);
+				})
+				return newsList;
+			},
+		},
+		methods: {
+			fen2yuan(price) {
+			  var f = 0;
+			  var p = (price / 100.0).toFixed(0);
+			  var p1 = (price / 100.0).toFixed(1);
+			  var p2 = (price / 100.0).toFixed(2);
+			  if(p*100 == price){
+				f = 0;  
+			  }else if(p1*100 == price){
+				  f = 1;
+			  }else if(p2*100 == price){
+				  f = 2;
+			  }
+			  return (price / 100.0).toFixed(f)
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tui-rolling-news {
+		width: 100%;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: nowrap;
+		background-color: #fff;
+		border-radius: 40px;
+		height: 30px;
+		
+		.title {
+			background-color: var(--ui-BG-Main);
+			height: 30px;
+			display: flex;
+			align-items: center;
+			color: #fff;
+			border-top-left-radius: 20px;
+			border-top-right-radius: 20px;
+			border-bottom-left-radius: 20px;
+			padding: 10px;
+			margin-right: 10px;
+			font-size: 24rpx;
+			
+			.text {
+				margin-left: 4px;
+			}
+		}
+	}
+	
+	.tui-swiper {
+		font-size: 24rpx;
+		height: 50rpx;
+		flex: 1;
+	}
+	
+	.tui-swiper-item {
+		display: flex;
+		align-items: center
+	}
+	
+	.tui-news-item {
+		line-height: 24rpx;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		color: #666;
+	}
+</style>