fanghuayuexuan/pages_shopping/live/life.vue

<template>
	<view class="content">
		<view class="info">
			<image class="info-bg" src="/static/images/live_broadcast_bg.png"></image>
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="shop-block">
				<view class="title-box">
					<view class="title">生活号</view>
					<image class="line" src="/static/images/header_tabs_icon.png"></image>
				</view>
				<view class="shop">
					<image class="w40 h40" src="/static/images/shopping_car.png"></image>
				</view>
			</view>
			<view class="search-cont" @click="toSearch">
				<image class="icon-search" src="/static/images/search.png" mode=""></image>
				<input type="text" disabled value="" placeholder="搜索商品"
					placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
			</view>
			<view class="vedio-block">
				<!-- tab栏 -->
				<view class="pub-tab-box">
					<view class="tab-inner">
						<view v-for="(item,index) in orderStatus" :key="index"
							:class="status ==item.value?'item active':'item'" @click="orderStatusChange(item)">
							<view class="text">
								{{ item.name }}
								</image>
							</view>
						</view>
					</view>
				</view>

				<!-- 专区 -->
				<view class="zone-box">
					<view class="zone-item green-bg">
						<view class="title-item">
							<image class="icon" src="/static/images/hdzx_icon.png" mode=""></image>
							<image class="title" src="/static/images/hdzx_title.png" mode=""></image>
						</view>
						<view class="entrance-item">
							<text class="txt">#活动中心标题</text>
							<image class="icon" src="/static/images/shh_arrow_right_icon.png" mode=""></image>
						</view>
					</view>

					<view class="zone-item">
						<view class="title-item">
							<image class="icon" src="/static/images/ranking_icon.png" mode=""></image>
							<image class="title" src="/static/images/yxjb_title.png" mode=""></image>
						</view>
						<view class="entrance-item">
							<view class="left">
								<text class="bold">TOP.1</text>
								<text class="txt">冰乳绿豆糕 冰冰</text>
							</view>
							<image class="icon" src="/static/images/shh_arrow_right_icon.png" mode=""></image>
						</view>
					</view>
				</view>

				<!-- 视频文章列表 -->
				<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
					:down="downOption" :up="upOption">
					<view class="list">
						<view class="list-item" @click="goLive(item)" v-for="(item,index) in list" :key="index">
							<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl" mode="widthFix"></image>
							<image class="video-icon" src="/static/images/video_icon.png"></image>
							<image class="suspension-icon" src="/static/images/suspension.png"></image>
							<view class="info-block">
								<view class="title">冰乳绿豆糕 冰冰凉凉谁吃谁迷糊! 谁懂，...</view>
								<view class="item">
									<view class="flex">
										<image class="head" src="/static/images/img.png"></image>
										<text class="name">崔医生</text>
									</view>
									<view class="flex">
										<image class="icon" src="/static/images/zan_icon.png"></image>
										<text>141</text>
									</view>
								</view>
								<view class="card">
									<view class="card-item">
										<image class="img" src="/static/images/jinbang_font.png"></image>
										<text class="ranking">达人榜 第15名</text>
									</view>
									<image class="go" src="/static/images/jb_arrow_right_icon.png"></image>
								</view>
							</view>
						</view>
					</view>
				</mescroll-body>
			</view>
			<Task></Task>

		</view>
	</view>
</template>

<script>
	import Task from '@/pages_shopping/live/components/task.vue'
	import {
		liveList
	} from '@/api/living.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			Task
		},
		data() {
			return {
				status: '',
				orderStatus: [{
						name: "推荐",
						value: ""
					},
					{
						name: "今日主推",
						value: "0"
					},
					{
						name: "溯源相册",
						value: "1"
					},
					{
						name: "悦选菜谱",
						value: "2"
					}, {
						name: "好物分享",
						value: "3"
					}
				],
				activeTab: 0,
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				list: [],
				downOption: {
					offset: 80,
					use: true,
					auto: false
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0,
						size: 10
					}
				},
				mescroll: null,
			}
		},
		onLoad() {
			// if (!uni.getStorageSync("AppToken")) {
			// 	uni.navigateTo({
			// 		url: '/pages/auth/login'
			// 	});
			// }
		},
		onUnload() {

		},
		methods: { // 顶部搜索
			toSearch() {
				uni.navigateTo({
					url: 'pages/home/productSearch'
				})
			},
			orderStatusChange(item) {
				this.status = item.value
			},

			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},

			// 下拉刷新回调
			downCallback(mescroll) {
				this.list = [];
				mescroll.resetUpScroll();
			},

			// 上拉加载回调
			upCallback(mescroll) {
				const pageNum = mescroll.num;
				const pageSize = mescroll.size;

				let data = {
					pageSize: pageSize,
					pageNum: pageNum,
				}
				liveList(data).then(res => {
					if (!res) {
						mescroll.endErr();
						return;
					}
					if (res.code == 200) {
						let curPageData = Array.isArray(res.data.list) ? res.data.list : [];
						let totalSize = Number(res.data.total) || 0;
						if (pageNum === 1) {
							this.list = [];
						}
						this.list = this.list.concat(curPageData);

						mescroll.endBySize(curPageData.length, totalSize);
					} else {
						mescroll.endErr();
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}).catch(err => {
					mescroll.endErr();
				});
			},

			goLive(item) {
				uni.navigateTo({
					// &immediate=true
					url: `./living?liveId=${item.liveId}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		background: #F5F7FA;

		.info {
			width: 100%;
			height: 600rpx;
			position: relative;
			z-index: 0;

			.shop-block {
				padding-left: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title-box {
					position: relative;

					.title {
						font-weight: 600;
						font-size: 40rpx;
						color: #333333;
					}

					.line {
						position: absolute;
						top: 24rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 68rpx;
						height: 32rpx;
						z-index: -1;
					}
				}

				.shop {
					width: 64rpx;
					height: 64rpx;
					padding: 12rpx;
					margin-right: 210rpx;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					border: 1rpx solid #E9E9E9;
					box-sizing: border-box;
					background: #FFFFFF;

				}
			}

			.search-cont {
				box-sizing: border-box;
				display: flex;
				align-items: center;
				height: 68rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				padding: 0 24rpx;
				margin: 24rpx 24rpx 32rpx;

				.icon-search {
					width: 24rpx;
					height: 24rpx;
					margin-right: 16rpx;
				}

				input {
					height: 68rpx;
					line-height: 68rpx;
					flex: 1;
				}

				.search-button {
					width: 120rpx;
					height: 60rpx;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 60rpx;
				}
			}

			.info-bg {
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
			}

			.data-block {
				padding: 0 20rpx;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.number-block {
					display: flex;

					.item {
						margin-right: 32rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.number-item {
							font-family: Roboto, Roboto;
							font-weight: 600;
							font-size: 36rpx;
							color: #FFFFFF;
						}

						.txt-item {
							margin-top: 6rpx;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.7);
						}
					}
				}

				.button {
					width: 144rpx;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #02B176;

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}
				}
			}

			.shop-icon {
				display: flex;
				justify-content: flex-end;
				margin: 12rpx 210rpx 0 0;
			}


			//达人视频
			.vedio-block {
				position: relative;
				z-index: 1;
				border-radius: 32rpx 32rpx 0rpx 0rpx;
				padding: 0 0 26rpx;

				// tab栏切换
				.pub-tab-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					box-sizing: border-box;
					width: 100%;
					padding: 0 24rpx;
					justify-content: space-between;

					.tab-inner {
						width: 100%;
						height: 88rpx;
						line-height: 88rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						overflow-x: auto;
						position: relative;
					}

					.item {
						font-size: 30rpx;
						white-space: nowrap;
						line-height: 1;
						font-family: PingFang SC, PingFang SC;
						color: #4D4D4D;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;

						&.active {
							font-weight: bold;
							color: #333333;

							&::after {
								content: '';
								position: absolute;
								left: 50%;
								bottom: -10rpx;
								transform: translateX(-50%);
								width: 100%;
								height: 12rpx;
								background: linear-gradient(90deg, rgba(56, 217, 125, 0.5) 0%, rgba(56, 217, 125, 0) 100%);
								border-radius: 6rpx;
							}
						}
					}
				}

				// 活动专区
				.zone-box {
					display: flex;
					justify-content: space-between;
					padding: 0 24rpx;
					margin-bottom: 20rpx;

					.zone-item {
						padding: 24rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						width: 342rpx;
						height: 136rpx;
						background: linear-gradient(180deg, #FFF9F3 0%, #FFFFFF 40%, #FFFFFF 100%);
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 2rpx solid #FFFFFF;

						.title-item {
							margin-bottom: 20rpx;

							.icon {
								width: 32rpx;
								height: 32rpx;
								margin-right: 8rpx;
							}

							.title {
								width: 120rpx;
								height: 28rpx;
							}
						}

						.entrance-item {
							font-size: 24rpx;
							color: #666666;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.left {
								display: flex;

								.bold {
									font-family: Roboto Flex, Roboto Flex;
									font-weight: 600;
									font-size: 24rpx;
									color: #D46C0D;
									margin-right: 6rpx;
									transform: skewX(-8deg);
									/* 负值向左倾斜，正值向右倾斜 */
									display: inline-block;
									/* transform需要inline-block或block */
								}
							}

							.icon {
								width: 24rpx;
								height: 24rpx;
							}
						}
					}
				}

				.list {
					padding: 24rpx 24rpx;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.list-item {
						width: 342rpx;
						margin-bottom: 18rpx;
						position: relative;
						display: flex;
						flex-direction: column;

						.img {
							width: 100%;
							border-radius: 16rpx 16rpx 0rpx 0rpx;

						}

						.video-icon {
							width: 40rpx;
							height: 40rpx;
							position: absolute;
							top: 20rpx;
							right: 20rpx;
						}

						.suspension-icon {
							width: 144rpx;
							height: 144rpx;
							position: absolute;
							top: -14rpx;
							right: 0rpx;
						}

						.info-block {
							border-radius: 0rpx 0rpx 16rpx 16rpx;
							padding: 12rpx 20rpx 20rpx;
							box-sizing: border-box;
							width: 100%;
							background: #FFFFFF;
							display: flex;
							flex-direction: column;

							.title {
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								margin-bottom: 20rpx;
							}

							.item {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 20rpx;

								.flex {
									display: flex;
									align-items: center;
									font-size: 22rpx;
									color: #999999;
								}

								.icon {
									width: 32rpx;
									height: 32rpx;
									margin-right: 4rpx;
								}

								.head {
									width: 32rpx;
									height: 32rpx;
									border-radius: 50%;
									margin-right: 8rpx;
								}

								.name {
									color: #757575;
								}
							}

							text {
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.card {

								display: flex;
								justify-content: space-between;
								align-items: center;
								background: #FFF5EB;
								width: 302rpx;
								height: 40rpx;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								border: 1rpx solid #F3E2D0;
								padding: 8rpx;
								box-sizing: border-box;

								.card-item {
									display: flex;
									align-items: center;

									.img {
										width: 48rpx;
										height: 24rpx;
										margin-right: 8rpx;
									}

									.ranking {
										font-size: 22rpx;
										color: #D46C0D;
									}
								}

								.go {
									width: 16rpx;
									height: 16rpx;
								}
							}
						}

					}

					.list-item:nth-child(2n) {
						margin-right: 0;
					}
				}
			}

		}
	}
</style>