CommunityApp/pages/device/device.vue

<template>
	<view class="container">
		<view class="tabs">
			<scroll-view scroll-x class="nav" style="background-color: #efefef;color: #5b5b5b;">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==subsectionCurrent?'text-checked':''" v-for="(item,index) in subsectionList" :key="index" @tap="subsectionChange(index)" >
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<view class="" style="height: 20rpx;"></view>
		</view>
		<view style="height: 100%;">
			<swiper style="height: 100%;" :current="subsectionCurrent"  @change="swiperChange"
				@animationfinish="animationfinish">
				<swiper-item >
					<scroll-view scroll-y style="height: 100%;">
						<view class="margin-20  bg-white" style="height: 390rpx;border-radius: 12rpx;padding: 20rpx;">
							<view @click="addDevice" style="padding:6rpx 10rpx 10rpx;box-sizing: border-box;" class="flex justify-between">
								<text class="text-bold text-lg">我的设备</text>
								<view class="cu-btn line-red sm padding-right-40">
									<text class="cuIcon-add padding-right-10"></text>
									添加设备
								</view>
							</view>
							<view class="text-left flex justify-around content">
								<view class="" @click="add">
									<image src="/static/yangan.jpg"  ></image>
									<text>智能烟感</text>
								</view>
								<view class="" @click="add">
									<image src="http://139.9.103.171:1888/miniofile/app/baojing.jpg"  ></image>
									<text>一键报警</text>
								</view>
								<view class="" @click="add">
									<image src="http://139.9.103.171:1888/miniofile/app/ranqi.jpg"  ></image>
									<text>燃气监控</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item >
					<scroll-view scroll-y style="height: 100%;">
					<view class="goods-data margin-top-20">
						<view class="goods-list">
							<view class="list-li" style="margin-bottom: 4rpx;" v-for="(item,index) in goodsList"  :key="index">
								<view class="thumb" >
									<image   :src="item.image" mode="scaleToFill"></image>
								</view>
								<view class="item">
									<view class="name">
										<text class="text-cut-2">{{item.name}}</text>
									</view>
									<view class="intro">
										<view class="left">
											<view class="cu-tag sm bg-red radius" v-if="index==0"  >
												<text >家庭必备</text>
											</view>
											<view class="study text-red">
												￥ {{item.price}}元
											</view>
										</view>
										<view @click="add" class="right line-blue cu-btn sm round" style="margin-right: 20rpx;">
											<text class="cuIcon-add"></text>
											立即添加
										</view>
									</view>
								</view>
							</view>
						</view>
						<view style="height: 80rpx;">
							<u-divider bgColor="#f6f6f6" height="60">没有更多了</u-divider>
						</view>
					</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				goodsList:[
					{
						image:'http://139.9.103.171:1888/miniofile/app/del/3.png',
						name:'面积80M²以下 千兆路由器1台 上门安装调测1次',
						price:'269'
					},
					{
						image:'http://139.9.103.171:1888/miniofile/app/del/4.png',
						name:'路由器/电力猫 代装服务',
						price:'100'
					},
					{
						image:'http://139.9.103.171:1888/miniofile/app/del/1172ba52446aeaa027e2442a7aadac8.jpg',
						name:'中国电信天翼看家TP-LINK云摄像云存储回看专业师傅上门安装',
						price:'347'
					},
					{
						image:'http://139.9.103.171:1888/miniofile/app/del/2.png',
						name:'面积80-140M² 分布式路由器1对 上门安装调测1次',
						price:'289.9'
					},
					
					{
						image:'http://139.9.103.171:1888/miniofile/app/del/e77500992d0740707b142ef237aabb4.jpg',
						name:'全屋wifi 千兆路由器',
						price:'289.9'
					},
					{
						image:'/static/yangan.jpg',
						name:'烟雾报警器家用',
						price:'254'
					},
					{
						image:'http://139.9.103.171:1888/miniofile/app/ad3d6aa4bbd5b98bb27395f7220b7de.jpg',
						name:'家用燃气传感器',
						price:'299'
					},
					{
						image:'http://139.9.103.171:1888/miniofile/app/f890a65d984b9bb2d84617c25781d32.jpg',
						name:'一键报警器',
						price:'356'
					},
					
				],
				
				subsectionCurrent:0,
				swiperCurrent:0,
				subsectionList:[
					{
						name: '设备'
					},
					{
						name: '应用'
					}
				]
				
			}
		},
		methods: {
			add(){
				uni.showToast({
					title:"待开发",
					icon:"none"
				})
			},
			addDevice(){
				this.subsectionCurrent=1
				this.swiperCurrent=1
			},
			subsectionChange(index){
				this.subsectionCurrent=index
			},
			swiperChange(e) {
			  uni.pageScrollTo({
			      scrollTop: 0,
			      duration: 0
			  });
			  this.subsectionCurrent = e.detail.current
			},
			animationfinish({detail: { current }}) {
				this.swiperCurrent = current;
				this.subsectionCurrent = current;
			},
		}
	}
</script>

<style lang="scss">
	.container {
		  height: calc(100vh);
		  background-color: #F6F6F6;
		  padding: 90rpx 0rpx 0rpx;
		 .tabs {
			 height: 90rpx;
		    position: fixed;
		    top: 0rpx;
			left: 0;
			right: 0;
			width: 100%;
			z-index: 3;
		  }
	}
	
	.text-checked{
		font-weight: 800;
		background-color: #FFFFFF;
		color: #2f7ff5;
		font-size: 800;
	}
	
	view{
		box-sizing: border-box;
	}
	.scroll-view {
		height: 150rpx;
		white-space: nowrap;
		width: 100%;
		position: relative;
		top: -30rpx;
	}
	.scroll-view-item {
		color: #FFFFFF;
		background-image: linear-gradient(to right, #2f7ff5, #2f7ff5);
		display: inline-block;
		text-align: left;
		padding: 20rpx 40rpx;
		margin:0 8rpx;
		width:24%;
		border-radius: 12rpx;
	}
	.scroll-view-item:first-child{
		margin-left: 30rpx;
	}
	.scroll-view-item:last-child{
		margin-right: 30rpx;
	}
	.content{
		image{
			height: 210rpx;
			width: 210rpx;
			border-radius: 12rpx;
			margin: 20rpx 0;
		}
	}
	
	.goods-data {
		width: 100%;
		.goods-list {
			border-radius: 6rpx;
			overflow: hidden;
			// 列表
			.list-li {
				display: flex;
				align-items: center;
				width: 100%;
				height: 230rpx;
				background-color: #ffffff;
				.thumb {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30%;
					height: 100%;
					image {
						width: 178rpx;
						height: 200rpx;
						border-radius: 6rpx;
					}
				}
				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 70%;
					height: 100%;
					border-bottom: 2rpx solid #f6f6f6;
					.name {
						padding:0 20rpx 20rpx 20rpx;
						text {
							width: 100%;
							color: #212121;
							font-size: 28rpx;
						}
					}
					.intro{
						display: flex;
						justify-content: space-between;
						margin-top: 30rpx;
						margin-left: 8rpx;
						.left{
							font-size: 26rpx;
							.study{
								padding-top: 10rpx;
							}
						}
						.right{
							padding-right: 30rpx;
						}
						
					}
				}
			}
		}
	}
</style>