uniapp-shikongwang/pages/index/index.vue

<template>
	<view class="lf-row-center lf-flex-column">
		<view class="ctab">
			<u-tabs :list="tab_list" :is-scroll="true" :show-bar="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="com" v-for="(tab, tabIndex) in tab_list" v-if="tabIndex == current" :key="tabIndex">
			<view class="lf-row-between list" v-for="(item, index) in tab.list" :key="index">
				<view class="left">
					<image src="../../static/tu.png" mode=""></image>
				</view>
				<view class="right">
					<view class="lf-line-2 title">网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季网红辣椒棒 魔鬼辣椒挑战全 网第一辣 网红优惠季</view>
					<view class="lf-row-between tips">
						<view class="u-line-progress">
							<u-line-progress :percent="25" height="20" :striped="true" active-color="#FE9903" :show-percent="false" inactive-color="#F5F5F5"></u-line-progress>
						</view>
						<text class="progress">已抢25%</text>
						<text class="bought">2.4万人已购买</text>
					</view>
					<view class="lf-row-between price">
						<text>￥</text><text>19</text>.<text>90</text>
						<text>￥39.00</text>
						<button>立即抢购</button>
					</view>
				</view>
			</view>
			<!-- 加载 -->
			<view class="loading-more">
				<text v-if="tab.list.length" :class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
				<my-nocontent v-else></my-nocontent>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			let shared = {
				loadingClass: false,
				loadingText: '没有更多数据啦~',
				page: 1,
				isPage: true
			}
			return {
				tab_list: [{
					name: '推荐',
					list: [1, 2, 3],
					...shared
				}, {
					name: '每日必抢',
					list: [],
					...shared
				}, {
					name: '生活用品',
					list: [1],
					...shared
				},{
					name: '家政服务',
					list: [],
					...shared
				},{
					name: '美食部落',
					list: [],
					...shared
				},{
					name: '奶茶夏日',
					list: [],
					...shared
				},{
					name: '奶茶夏日',
					list: [],
					...shared
				}],
				current: 0, // tab下表
			}
		},
		onLoad() {
			this.$http(this.API.API_GOODS_LIST, {data: 1}).then(res => {
				console.log(res);
			}).catch(err => err);
		},
		methods: {
			change(index) {
				this.current = index;
			},
		},
		onReachBottom(){
			console.log("页面触底")
		},
		onPullDownRefresh(){
			console.log("下拉刷新");
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss" scoped>
	
	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}
	
	// tab
	.ctab{
		width: 100%;
		margin: 20rpx 0  0rpx 0rpx;
		padding: 0 22rpx;
	}
	// 商品列表
	.com{
		width: 100%;
		overflow: hidden;
		.list{
			border-radius: 10rpx;
			overflow: hidden;
			margin: 20rpx 32rpx;
			background-color: #FFFFFF;
			box-shadow:0 0 10px 5px #e5e5e5;
			align-items: flex-start;
			.left{
				overflow: hidden;
				image{
					width: 204rpx;
					height: 204rpx;
					margin: 20rpx;
					border-radius: 10rpx;
				}
			}
			.right{
				overflow: hidden;
				width: 64%;
				.title{
					margin: 18rpx 20rpx 0 0;
					color: #222222;
					font-size: 32rpx;
				}
				.tips{
					margin: 16rpx 0;
					overflow: hidden;
					.u-line-progress{
						width: 112rpx;
						overflow: hidden;
						margin-right:20rpx ;
					}
					.progress{
						color: #777777;
						font-size: 24rpx;
					}
					.bought{
						color: #777777;
						font-size: 24rpx;
						margin-right: 20rpx;
					}
				}
				.price{
					overflow: hidden;
					color:#FF0000;
					text{
						font-size: 48rpx;
						color:#FF0000;
						font-weight: 500;
					}
					text:nth-child(1){
						color: #FF0000;
						font-size: 28rpx;
					}
					text:nth-child(2){
						color: #FF0000;
						font-size: 48rpx;
					}
					text:nth-child(3){
						color: #FF0000;
						font-size: 28rpx;
					}
					text:nth-child(4){
						color: #777777;
						font-size: 28rpx;
						text-decoration:line-through;
						font-weight: 400;
					}
					button{
						width: 160rpx;
						height: 60rpx;
						background: #FE9903;
						border-radius: 15px;
						font-size: 24rpx;
						color: #FFFFFF;
						margin: 0rpx 20rpx 0rpx 20rpx;
						border: none;
					}
				}
			}
		}
	}
</style>