hxj/src/pages/index/hxj_index_component.vue

<template>
	<view style="background-color: #FEFFFE;">
		<view class="swiper_cent">
			<swiper style="height: 900rpx;" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
				@change="swiperChange">
				<swiper-item v-for="(item,index) in homePages[0].data.banners" :key="index" @click="goPage(item.url)">
					<image :src="item.picUrl" style="width: 100%;height: 900rpx;" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="swiper_zhishi">
				<view :class="swiperKey===i?'view_active':''" v-for="(item1,i) in homePages[0].data.banners.length" :key="i"></view>
			</view>
		</view>
		<u-announcement
		  v-bind:bgColor="homePages[1].data.background"
		  v-bind:btn-color="homePages[1].data.btnColor"
		  v-bind:btn-height="homePages[1].data.btnHeight"
		  v-bind:btn-radius="`${homePages[1].data.btnRadius}rpx`"
		  v-bind:btn-text="homePages[1].data.btnText"
		  v-bind:btn-text-color="homePages[1].data.btnTextColor"
		  v-bind:btn-width="homePages[1].data.btnWidth"
		  v-bind:content="homePages[1].data.content"
		  v-bind:header-url="homePages[1].data.headerUrl"
		  v-bind:icon="homePages[1].data.icon"
		  v-bind:name="homePages[1].data.name"
		  v-bind:textColor="homePages[1].data.textColor"
		></u-announcement>
		<view class="link">
			<view>
				<view class="title">人居 · 荟享家<image class="hxjImg"
						src="https://t17.9026.com/web/statics/image/index/HUIXIANGJIA.png" mode=""></image>
				</view>
			</view>
		</view>
		<app-scroll-list :list="list"></app-scroll-list>
		<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 compositionList" :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_img">
				</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.tag}}</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="receive(index)">
				<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" @click="goPage(homePages[7].data.list[0].link.new_link_url)">
					<view class="title_2">明星套装</view>
					<view class="desc_2">自然高端好家居</view>
					<image :src="homePages[7].data.list[0].pic_url" mode=""></image>
				</view>
				<view class="main-between-y">
					<view class="r1" @click="goPage(homePages[7].data.list[1].link.new_link_url)">
						<view class="title_2">优选</view>
						<view class="desc_2">优选家居</view>
						<image :src="homePages[7].data.list[1].pic_url" mode=""></image>
					</view>
					<view class="r2" @click="goPage(homePages[7].data.list[2].link.new_link_url)">
						<view class="title_2">专属</view>
						<view class="desc_2">定制精品</view>
						<image :src="homePages[7].data.list[2].pic_url" mode=""></image>
					</view>
				</view>
			</view>
			<scroll-view scroll-x="true">
				<view class="main-left w">
					<view class="item" v-for="(item,index) in homePages[8].data.navs" :key="index">
						<image class="borradu_20"
							:src="item.icon_url"
							mode=""></image>
						<view class="title_2">{{item.name}}</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="25rpx" next-margin="25rpx" :current="ptCurrent"  @change="ptChange">
				<swiper-item class="" v-for="(item,index) in homePages[9].data.list" :key="index"
					@click="goPage(item.page_url)">
					<view class="item">
						<view class="imgBox" >
							<image class="img" :src="item.cover_pic"></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>{{item.pintuan_price}}</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;">荟享自营</view>
			<view class="title1" style="margin-right: 61rpx;color: #A7A7A7;">精选类别</view>
			<view class="title1" style="margin-right: 61rpx;color: #A7A7A7;">精选类别</view>
			<view class="title1" style="margin-right: 61rpx;color: #A7A7A7;">精选类别</view> -->
			<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>
	import {mapState} from 'vuex'
	import appScrollList from './components/scroll-list.vue'
	import uAnnouncement from "@/components/page-component/u-announcement/u-announcement.vue";
	export default {
		components: {
			appScrollList,
			uAnnouncement
		},
		props: {
			homePages: {
				type: Object,
				default () {
					return {
						navs: [],
					};
				},
			},
			page_id:{
				type:Number,
				default:0
			},
			dIndex: {
				type: Array,
				default () {
					return [0, 0];
				}
			},
			mIndex: {
				type: Array,
				default () {
					return [0, 0];
				}
			},
			dType:String
		},
		computed:{
			...mapState({
				selectedProperties:state=>state.user.selectedProperties
			})
		},
		watch:{
			selectedProperties(){
				this.getComposition()
			},
		},
		data() {
			return {
				ptCurrent:1,//拼图轮播第几个
				pageData: '',
				swiperKey: 0, //轮播位置
				bottom_goods_index:0, //底部商品分类索引
				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'
						link:'/pages/topic/list'
					},
					{
						image: 'https://t17.9026.com/web/statics/image/index/temporary/jhk-1634283667210.png',
						title: '定制产品',
						tag: '预约',
						link: '/pages/case/appointment/appointment-list'
					},
					{
						image: 'https://t17.9026.com/web/statics/image/index/2.png',
						title: '明星套装',
						tag: '套装',
						link: '/pages/case/appointment/appointment-list'
					}
				],
				// 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'
				// 	}, 
				// ],
				compositionList:[],//本期家点灵感
			}
		},
		created() {
			this.getComposition()
		},
		methods: {
			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
				})
			},
			//获取推荐套餐
			getComposition(){
				this.$request({
					url:this.$api.composition.list,
					data:{
						is_recommend:1,
						limit:3
					},
					method:'post'
				}).then(res=>{
					if(res.code===0){
						this.compositionList=res.data.list
					}
				})
			},
			//领取优惠券
			receive(index) {
				let list = this.homePages[6].data.coupon_list
				if (this.sign == 'integral-mall') {
					this.$jump({
						url: list[index].page_url,
						open_type: 'navigate'
					});
					return;
				}
				if (list[index].is_receive == 1) {
					uni.showToast({
						mask: true,
						title: '已领取',
						icon: 'none'
					});
					return true;
				}
				uni.showLoading({
					mask: true,
					title: '领取中'
				});
			
				this.$request({
					url: this.$api.coupon.receive,
					data: {
						coupon_id: list[index].id
					}
				}).then(e => {
					uni.hideLoading();
					if (e.code === 0) {
						if (e.data.rest == 0) {
							this.homePages[6].data.coupon_list[index].is_receive = '1';
						}
						let tempList = this.homePages[6].data.coupon_list;
						this.flushCache(tempList);
						this.$store.dispatch('page/actionSetCoupon', {
							list: [Object.assign(tempList[index], e.data)],
							type: 'receive'
						});
					} else {
						uni.showToast({
							title: e.msg,
							icon: 'none'
						});
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			flushCache(coupon_list) {
				if (this.page_id == 0) {
					let storage = this.$storage.getStorageSync('INDEX_MALL');
					let dIndex = this.dIndex;
					let mIndex = this.mIndex;
			
					if (this.dType === 'module') {
						storage.home_pages.navs[mIndex[0]].template.data[mIndex[1]].data.list[dIndex[0]].data[dIndex[1]]
							.data.coupon_list = coupon_list;
					} else {
						storage.home_pages.navs[dIndex[0]].template.data[dIndex[1]].data.coupon_list = coupon_list;
					}
					this.$storage.setStorageSync('INDEX_MALL', storage);
				}
			},
			ptChange(e){
				this.ptCurrent=e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';

	.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;
			}
		}
	}
	.ptcc{
		animation:myfirst 0.5s infinite;
		animation-iteration-count:1;
		animation-fill-mode:forwards;
		
	}
	// .ptee{
	// 	animation:myfirst 0.5s infinite;
	// 	animation-iteration-count:1;
	// 	animation-fill-mode:forwards;
	// 	animation-direction:reverse;
	// }
	@keyframes myfirst
	{
	    from   {height: 404rpx;}
	    to   {margin-top: 40rpx;height: 365rpx!important;}
	    
	}
	 
</style>