hxj-adrioid/pages/index/index.vue

<template>
	<view style="background-color: #FEFFFE;">
		<view class="swiper_cent">
			<swiper style="height: 900rpx;" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="1000" @change="swiperChange" :circular="true">
				<swiper-item v-for="(item,index) in banners" :key="index" @click="goPage(item.url)">
					<image :src="item.picUrl" style="width: 100%;height: 900rpx;" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="swiper_zhishi">
				<view :class="swiperKey===i?'view_active':''" v-for="(item1,i) in 3" :key="i"></view>
			</view>
		</view>
		<!-- <view class="main-center cross-center" style="height: 132rpx;">
			<image style="width: 32rpx;height: 17rpx;margin-right: 22rpx;" src="/static/</image>
							<image class="hxjImg" src="https://t17.9026.com/web/statics/image/index/HUIXIANGJIA.png" mode=""></image>
		</view>
						<view class="more-an">
							<view class="text" style="position: relative;" @click="goMore">了解更多
							<image style="width: 105rpx;height: 9rpx;position: absolute;left: 0;bottom: 0;" src="/static/image/viewmore.png" mode=""></image>
							</view>image/bz1.png" mode=""></image>
			<view style="font-size: 40rpx;">热卖套装</view>
			<image style="width: 32rpx;height: 17rpx;margin-left: 22rpx;" src="/static/image/bz.png" mode=""></image>
		</view> -->
		<view class="list">
			
			<view class="item" v-for="(item,index) in allList" :key="index">
				<view class="index">
					<text>0{{index+1}}</text>
				</view>
				<view class="main-between cross-center link">
						<view class="title">
							{{item[0].cat_name}}
						</view>
				</view>
				<app-scroll-list :list="item" :itemWidth="'200rpx'" :itemHeight="'278rpx'"></app-scroll-list>
			</view>
		</view>
		
		<!-- <view class="link">
			<view class="title1">本期家点灵感</view>
			<image class="tyx" src="https://t17.9026.com/web/statics/image/index/tyx.png" mode=""></image>
			<image class="d6" src="https://t17.9026.com/web/statics/image/index/6d.png" mode=""></image>
			<view class="subtitle">臻选整装 · 安全无甲醛 · 7天入住</view>
		</view>
		<view class="lg_list">
			<view class="item" v-for="(item,index) in homePages[5].data.list" :key="index"
				@click="goPage(item.type=='goods'?`/pages/goods/goods?id=${item.id}`:`/pages/case/projectInfo?id=${item.id}`)">
				<image class="imgBox" :src="item.cover_pic">
				</image>
				<view class="b_card main-between">
					<view class="left">
						<view class="title t-omit" style="width: 420rpx;">{{item.name}}</view>
						<view class="desc t-omit" style="width: 420rpx;">{{item.subtitle}}</view>
					</view>
					<view class="right">
						<view class="price"><text class="rmb">￥</text><text>{{item.price}}</text><text
								class="dw">元</text></view>
					</view>
				</view>
			</view>
			<view class="more">
				<view>VIEW MORE</view>
				<view>
					<image src="https://t17.9026.com/web/statics/image/index/viewmore.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="link ">
			<view class="title1 main-left cross-center">优惠券<image class="coupon_1"
					src="https://t17.9026.com/web/statics/image/index/coupon_1.png" mode=""></image><text
					class="coupon_sub">RECOMMEND</text></view>

		</view>
		<view class="coupon main-left">
			<view class="item main-left" v-for="(item,index) in homePages[6].data.coupon_list" :key="index"
				@click="goPage(`/pages/coupon/list/list`)">
				<view class="Wb">
					<view>
						<view class="title_2">定制优享礼券 <text class="hjx-tc-B19D60 hjx-ts-21 hxj-ml-10">立即领取</text></view>
						<view class="desc_2">新用户礼遇</view>
					</view>
					<view>
						<view class="price"><text>￥</text>{{item.sub_price}}</view>
						<view class="yxq">有效期至{{item.end_time.split(' ')[0]}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="link mt_20">
			<view class="title1">荟享定制<image class="coupon_1"
					src="https://t17.9026.com/web/statics/image/index/coupon_1.png" mode="">
				</image><text class="coupon_sub">HUIXIANG</text></view>

		</view>
		<view class="hxdz">
			<view class="main-left q">
				<view class="l">
					<view class="title_2">明星套装</view>
					<view class="desc_2">自然高端好家居</view>
					<image src="https://t17.9026.com/web/statics/image/index/4.png" mode=""></image>
				</view>
				<view class="main-between-y">
					<view class="r1" @click="goPage('/pages/case/selectedCases')">
						<view class="title_2">优选</view>
						<view class="desc_2">优选家居</view>
						<image src="https://t17.9026.com/web/statics/image/index/5.png" mode=""></image>
					</view>
					<view class="r2">
						<view class="title_2">专属</view>
						<view class="desc_2">定制精品</view>
						<image src="https://t17.9026.com/web/statics/image/index/6.png" mode=""></image>
					</view>
				</view>
			</view>
			<scroll-view scroll-x="true">
				<view class="main-left w">
					<view class="item" v-for="(item,index) in qwe" :key="index">
						<image class="borradu_20"
							:src="`https://t17.9026.com/web/statics/image/index/temporary/${item.cover_image}.png`"
							mode=""></image>
						<view class="title_2">{{item.title}}</view>
						<view class="desc_2">独到品味的代表备份</view>
					</view>
				</view>
			</scroll-view>
			<view class="more">
				<view class="viewmore1_color">查看更多</view>
				<view class="viewmore1_color">VIEW MORE</view>
				<view>
					<image class="viewmore1" src="https://t17.9026.com/web/statics/image/index/viewmore1.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="main-between link mt_20">
			<view class="title1">
				限时团购
				<image class="coupon_1" src="https://t17.9026.com/web/statics/image/index/coupon_1.png" mode="">
				</image>
				<text class="coupon_sub">TUANGOU</text>
			</view>
			<view class="link-more" @click="goPage('/plugins/pt/index/index')">
				查看更多<image src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image>
			</view>
		</view>

		<view class="group_list">
			<swiper style="height: 606rpx;" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
				previous-margin="75rpx" next-margin="75rpx">
				<swiper-item class="" v-for="(item,index) in 3" :key="index"
					@click="goPage('/plugins/pt/goods/goods?goods_id=29')">
					<view class="item">
						<view class="imgBox">
							<image class="img" src="https://t17.9026.com/web/statics/image/index/3.png"></image>
						</view>
						<view class="b_card main-between">
							<view class="main-left cross-center left">
								<view class="i">02</view>
								<view class="q">:</view>
								<view class="i">24</view>
								<view class="q">:</view>
								<view class="i">45</view>
							</view>
							<view class="right">
								<view class="price"><text class="rmb">￥</text><text>56800</text><text
										class="dw">元</text></view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="link main-left">
			<view class="title1" style="margin-right: 61rpx;" :style="{'color':bottom_goods_index===index?'':'#A7A7A7'}"
				v-for="(item,index) in homePages[11].data.catList" :key="index" @click="selectCat(index)">
				{{item.menuName}}</view>
			<image class="tyx" src="https://t17.9026.com/web/statics/image/index/tyx.png" mode=""></image>
		</view>
		<view class="hxzy">
			<view class="top">
				<image
					style="width: 560rpx;height: 270rpx;border-radius: 20rpx 0 0 0;position: absolute;top: 0;right: 0;"
					src="https://t17.9026.com/web/statics/image/index/9.png" mode=""></image>
				<view class="dbo main-between-y">
					<view>
						<view class="text">decoration荟享自营</view>
						<view class="text">心至所向·渐入家境</view>
					</view>
					<view class="category">2930人已收藏</view>
				</view>
			</view>
			<view class="dir-left-wrap bottom">
				<view class="item" v-for="(item,index) in homePages[11].data.catList[bottom_goods_index].goodsList"
					:key="index" @click="goPage(`/pages/goods/goods?id=${item.id}`)">
					<view>
						<image class="cover" :src="item.cover_pic" mode=""></image>
					</view>
					<view class="title_2 t-omit" style="width: 320rpx;">{{item.name}}</view>
					<view class="desc_2">{{item.sales}}</view>
					<view class="price" style="margin-top: 27rpx;"><text
							class="rmb">￥</text><text>{{item.price}}</text><text class="dw">元</text></view>
				</view>
			</view>
			<view class="more1" @click="goPage('/pages/cats/cats')">
				<view class="viewmore1_color main-center cross-center">更多荟享<image class=""
						src="https://t17.9026.com/web/statics/image/index/viewmore1.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="bottom_logo">
			<image src="https://t17.9026.com/web/statics/image/index/bottom_logo.png" mode=""></image>
			<view class="text">home shopping mall</view>
		</view> -->
	</view>
</template>

<script>
	let _this
	
	import appScrollList from './components/scroll-list.vue'
	export default {
		components: {
			appScrollList
		},
		data() {
			return {
				allList:[],
				pageData: '',
				swiperKey: 0, //轮播位置
				bottom_goods_index: 0, //底部商品分类索引
				banners: [{
						"link": null,
						"openType": "",
						"open_type": "",
						"page_url": "",
						"picUrl": "https://swdzshopv4.oss-cn-chengdu.aliyuncs.com/uploads/mall10000/20210811/ea8f12c9fac0ef1353ef10025bce982e.jpg",
						"pic_url": "https://swdzshopv4.oss-cn-chengdu.aliyuncs.com/uploads/mall10000/20210811/ea8f12c9fac0ef1353ef10025bce982e.jpg",
						"url": ""
					},
					{
						"link": null,
						"openType": "",
						"open_type": "",
						"page_url": "",
						"picUrl": "https://swdzshopv4.oss-cn-chengdu.aliyuncs.com/uploads/mall10000/20210811/3c14220516b0d47808484f72442edbbf.jpg",
						"pic_url": "https://swdzshopv4.oss-cn-chengdu.aliyuncs.com/uploads/mall10000/20210811/3c14220516b0d47808484f72442edbbf.jpg",
						"url": ""
					},
					{
						"link": null,
						"openType": "",
						"open_type": "",
						"page_url": "",
						"picUrl": "https://swdzshopv4.oss-cn-chengdu.aliyuncs.com/uploads/mall10000/20210811/7e56eaf80af09b51d18ec93259cd5b4b.jpg",
						"pic_url": "https://swdzshopv4.oss-cn-chengdu.aliyuncs.com/uploads/mall10000/20210811/7e56eaf80af09b51d18ec93259cd5b4b.jpg",
						"url": ""
					}
				],
				list: [

					{
						image: 'https://t17.9026.com/web/statics/image/index/temporary/jhk-1634283687206.png',
						// title: '热销方案',
						// tag: '热销',
						link: '/pages/case/hot_sale_project'
					},
					{
						image: 'https://t17.9026.com/web/statics/image/index/temporary/jhk-1634284372084.png',
						// title: '主题专区',
						// tag: '主题',
						link: '/pages/case/themeArea'
					},
					{
						image: 'https://t17.9026.com/web/statics/image/index/temporary/jhk-1634283667210.png',
						// title: '定制产品',
						// tag: '定制',
						link: ''
					},
					{
						image: 'https://t17.9026.com/web/statics/image/index/2.png',
						// title: '明星套装',
						// tag: '套装'
					}
				],
				jdlg: [{
						title: '兴城人居ins风套装',
						sub_title: '细节控·轻奢风',
						price: '65622',
						cover_image: '3',
					},
					{
						title: '风创造「最大坪效」85m²MUJI',
						sub_title: '细节控·轻奢风',
						price: '7486',
						cover_image: 'temporary/jhk-1634283447190'
					},
					{
						title: '85m²MUJI风创造「最大坪效」',
						sub_title: '细节控·轻奢风',
						price: '27853',
						cover_image: 'temporary/jhk-1634284367308'
					}
				],
				qwe: [{
						'title': '兴城人居',
						'cover_image': 'jhk-1634283667210'
					}, {
						'title': '世龙广场',
						'cover_image': 'jhk-1634284372084'
					}, {
						'title': '新中式',
						'cover_image': 'jhk-1634283687206'
					}, 
				]

			}
		},
		onLoad(){
			_this=this
			this.getList()
			
		},
		methods: {
			goMore(){
				uni.navigateTo({
					url:'/pages/more/more'
				})
			},
			getList(){
				// console.log(8888)
				_this.$post('api/big-screen/compositions',{
					data:{
						estate_id:3,
					},
					success(res){	
						_this.allList=res.data.list
					},
					error(res) {
						t.$toast(res)
					}
				},'GET')
			},
			selectCat(index) {
				this.bottom_goods_index = index
			},
			swiperChange(e) {
				// console.log(e.detail.current)
				this.swiperKey = e.detail.current
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
.list{
	
	.item{
		width: 100%;
		height: 596rpx;
		background: #F9F6F4;
		opacity: 0.76;
		border-radius: 0px 40rpx 0px 0px;
		.index{
			padding: 43rpx 42rpx;
			font-size: 40rpx;
			font-family: DIN Medium;
			font-weight: 400;
			color: #8D6D5D;
			opacity: 0.23;
		}
		.more-an{
			width: 105rpx;
			height: 43rpx;
			padding-top: 6rpx;
			.text{
				height: 43rpx;
				width: 105rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #999999;
				line-height: 30rpx;
			}
		}
	}
}
	.swiper_cent {
		position: relative;

		.swiper_zhishi {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: center;
			position: absolute;
			bottom: 39rpx;

			view {
				width: 81rpx;
				height: 4rpx;
				background: #c8c8c8;
			}

			.view_active {
				background: #f4f4f4;
			}
		}
	}
</style>