完善首页兑换弹幕显示

components/prize-news/prize-news.vue

@@ -4,11 +4,12 @@
 		<view class="text-content" :style="{ left:leftMove+'px' }">
 			<view class="text-item" v-for="(item,index) in myList" :key="index">
 				<view class="text">
-					<image :src="item.url" class="image"></image>
+					<image :src="item.avatar" class="image"></image>
 					<view class="title">
-						<view class="name">{{ item.text }}</view>
-						<view class="prize">刮出</view>
-						<view class="prize">{{ item.text }}</view>
+						<view class="name">恭喜</view>
+						<view class="prize">{{ item.nickName }}</view>
+						<view class="name">刮出了</view>
+						<view class="prize">{{ item.prizeInfo }}</view>
 					</view>
 				</view>
 			</view>
@@ -24,7 +25,11 @@
 			list: { // 滚动列表
 				type: Array,
 				default: () => {
-					return [];
+					return [{
+						nickName: '测试'
+					},{
+						nickName: '测试'
+					}];
 				}
 			},
 			type: { // 类型
@@ -163,16 +168,16 @@
 					display: flex;
 					align-items: center;
 					height: 50rpx;
-					padding: 0 40rpx 0 0;
-					margin: 0 80rpx;
+					padding: 0 40rpx 0 4rpx;
+					margin: 0 60rpx;
 					background: rgba(255, 255, 255, .5);
-					border-radius: 20rpx;
+					border-radius: 25rpx;
 					font-size: 24rpx;
 
 					.image {
 						display: inline-block;
-						width: 50rpx;
-						height: 50rpx;
+						width: 46rpx;
+						height: 46rpx;
 						vertical-align: middle;
 						border-radius: 50%;
 					}

pages/index/index.vue

@@ -21,8 +21,8 @@
 					</view>
 				</view>
 				<view class="box-top-news">
-					<prize-news :list="list" duration="35" />
-					<prize-news :list="list" duration="15" />
+					<prize-news :list="prizeNewsListOne" duration="20" v-if="prizeNewsListOne.length" />
+					<prize-news :list="prizeNewsListTwo" duration="15" v-if="prizeNewsListTwo.length" />
 				</view>
 			</view>
 			<view class="box-ticket">
@@ -100,19 +100,8 @@
 
 				payInfo: {},
 				prizeList: [],
-				list: [{
-					url: 'https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/EJSFMIQFND7IYJO3T37Q.png',
-					text: '测试'
-				}, {
-					url: 'https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/EJSFMIQFND7IYJO3T37Q.png',
-					text: '测试'
-				}, {
-					url: 'https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/EJSFMIQFND7IYJO3T37Q.png',
-					text: '测试'
-				}, {
-					url: 'https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/EJSFMIQFND7IYJO3T37Q.png',
-					text: '测试'
-				}],
+				prizeNewsListOne: [],
+				prizeNewsListTwo: [],
 			};
 		},
 		onLoad(opthios) {
@@ -126,6 +115,7 @@
 		onShow(opthios) {
 			this.loginState = uni.getStorageSync('token') ? true : false
 			this.getList()
+			this.getPrizeNews()
 		},
 		methods: {
 			swiperChange(e) {
@@ -153,6 +143,23 @@
 					this.getPrize(this.imgList[this.currentIndex].boxId)
 				}
 			},
+			
+			getPrizeNews() {
+				$http.post('/api/v1/mp/user/ticket/hitPrizeBarrage', { noToken: true }).then(res => {
+					const { listOne, listTwo } = res && res.data
+					listOne.forEach(item => {
+						item.avatar = env.filePublic + item.avatar
+						item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo.substring(0, 15) + '...' : item.prizeInfo
+					})
+					
+					listTwo.forEach(item => {
+						item.avatar = env.filePublic + item.avatar
+						item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo.substring(0, 15) + '...' : item.prizeInfo
+					})
+					this.prizeNewsListOne = listOne
+					this.prizeNewsListTwo = listTwo
+				})
+			},
 
 			clickImg(item) {
 				console.log(item);
@@ -189,10 +196,7 @@
 					res => {
 						uni.hideLoading();
 						if (res.code == 0) {
-							res.rows.forEach(item => {
-								let picUrlArr = item.picUrl.split(',')
-								item.picUrl = env.filePublic + picUrlArr[0]
-							})
+							res.rows.forEach(item => item.picUrl = env.filePublic + item.picUrl.split(',')[0])
 							this.total = res.total
 							this.imgList = res.rows
 							this.getPrize(this.imgList[0].boxId)