yshopb2c-uniapp/pages/home/index.vue

<template>
	<view class="index">
		<view class="header acea-row row-center-wrapper">
			<view @click="goGoodSearch()" class="search acea-row row-middle">
				<text class="iconfont icon-xiazai5"></text>
				搜索商品
			</view>
		</view>
		<view class="slider-banner banner">
			<swiper indicatorDots="true" v-if="banner.length > 0">
				<block v-for="(item, bannerIndex) in banner" :key="bannerIndex">
					<swiper-item>
						<view @click="item.url ? $yrouter.push('/' + item.url) : ''" class="swiper-item"><image :src="item.pic" /></view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="news acea-row row-between-wrapper">
			<view class="pictrue" v-if="$VUE_APP_RESOURCES_URL"><image src="@/static/images/news.png" /></view>
			<view class="swiper-no-swiping new-banner">
				<swiper class="swiper-wrapper" v-if="roll.length > 0" :indicator-dots="false" autoplay circular vertical>
					<block v-for="(item, rollIndex) in roll" :key="rollIndex">
						<swiper-item class="swiper-slide">
							<view @click="item.uniapp_url ? $yrouter.push(item.uniapp_url) : ''" class="swiper-item acea-row row-between-wrapper">
								<view class="text acea-row row-between-wrapper">
									<view class="label" v-if="item.show === '是'">最新</view>
									<view class="newsTitle line1">{{ item.info }}</view>
								</view>
								<view class="iconfont icon-xiangyou"></view>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		<view class="nav acea-row">
			<view @click="goWxappUrl(item)" class="item" v-for="(item, menusIndex) in menus" :key="menusIndex">
				<view class="pictrue"><image :src="item.pic" /></view>
				<view>{{ item.name }}</view>
			</view>
		</view>
		<view class="wrapper hot" v-if="bastList.length > 0">
			<image class="bg" src="../../static/images/index-bg.png" mode="widthFix"></image>
			<view class="title acea-row row-between-wrapper">
				<view class="text"><view class="name line1">热门榜单</view></view>
				<view @click="goHotNewGoods(2)" class="more">
					更多
					<text class="iconfont icon-jiantou"></text>
				</view>
			</view>
			<view class="newProducts">
				<scroll-view scroll-y="false" scroll-x="true">
					<view class="newProductsScroll">
						<view @click="goGoodsCon(item)" class="newProductsItem" v-for="(item, likeInfoIndex) in likeInfo" :key="likeInfoIndex">
							<view class="img-box"><image :src="item.image" /></view>
							<view class="pro-info line1"><text>{{ item.storeName }}</text></view>
							<view class="money font-color-red"><text>￥{{ item.price }}</text></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="wrapper" v-if="bastList.length > 0">
			<view class="title acea-row row-between-wrapper">
				<view class="text"><view class="name line1">精品推荐</view></view>
				<view @click="goHotNewGoods(1)" class="more">
					更多
					<text class="iconfont icon-jiantou"></text>
				</view>
			</view>
			<Good-list :good-list="bastList" :is-sort="false"></Good-list>
		</view>

		<view class="wrapper" v-if="firstList.length > 0">
			<view class="title acea-row row-between-wrapper">
				<view class="text">
					<view class="name line1">
						首发新品
						<text class="new font-color-red">NEW~</text>
					</view>
				</view>
				<view @click="goHotNewGoods(3)" class="more">
					更多
					<text class="iconfont icon-jiantou"></text>
				</view>
			</view>
			<view class="newProducts">
				<scroll-view scroll-y="false" scroll-x="true">
					<view class="newProductsScroll">
						<view @click="goGoodsCon(item)" class="newProductsItem" v-for="(item, firstListIndex) in firstList" :key="firstListIndex">
							<view class="img-box"><image :src="item.image" /></view>
							<view class="pro-info line1">{{ item.storeName }}</view>
							<view class="money font-color-red">￥{{ item.price }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="wrapper" v-if="benefit.length > 0">
			<view class="title acea-row row-between-wrapper">
				<view class="text"><view class="name line1">促销单品</view></view>
				<view @click="goGoodsPromotion(4)" class="more">
					更多
					<text class="iconfont icon-jiantou"></text>
				</view>
			</view>
		</view>
		<PromotionGood :benefit="benefit"></PromotionGood>
		<Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"></Coupon-window>
	</view>
</template>
<script>
// import { swiper, swiperSlide } from "vue-awesome-swiper";

import GoodList from '@/components/GoodList';
import PromotionGood from '@/components/PromotionGood';
import CouponWindow from '@/components/CouponWindow';
import { getHomeData, getShare } from '@/api/public';
import cookie from '@/utils/store/cookie';
import { isWeixin } from '@/utils/index';

const HAS_COUPON_WINDOW = 'has_coupon_window';

export default {
	name: 'Index',
	components: {
		// swiper,
		// swiperSlide,
		GoodList,
		PromotionGood,
		CouponWindow
	},
	props: {},
	data: function() {
		return {
			showCoupon: false,
			logoUrl: '',
			banner: [],
			menus: [],
			roll: [],
			activity: [],
			activityOne: {},
			bastList: [],
			firstList: [],
			info: {
				fastList: [],
				bastBanner: [],

				bastList: []
			},
			likeInfo: [],
			lovely: [],
			benefit: [],
			couponList: [],
			swiperOption: {
				pagination: {
					el: '.swiper-pagination',
					clickable: true
				},
				autoplay: {
					disableOnInteraction: false,
					delay: 2000
				},
				loop: true,
				speed: 1000,
				observer: true,
				observeParents: true
			},
			swiperRoll: {
				direction: 'vertical',
				autoplay: {
					disableOnInteraction: false,
					delay: 2000
				},
				loop: true,
				speed: 1000,
				observer: true,
				observeParents: true
			},
			swiperScroll: {
				freeMode: true,
				freeModeMomentum: false,
				slidesPerView: 'auto',
				observer: true,
				observeParents: true
			},
			swiperBoutique: {
				pagination: {
					el: '.swiper-pagination',
					clickable: true
				},
				autoplay: {
					disableOnInteraction: false,
					delay: 2000
				},
				loop: true,
				speed: 1000,
				observer: true,
				observeParents: true
			},
			swiperProducts: {
				freeMode: true,
				freeModeMomentum: false,
				slidesPerView: 'auto',
				observer: true,
				observeParents: true
			}
		};
	},
	onShow: function() {
		let that = this;
		uni.showLoading({
			title: '加载中'
		});
		getHomeData().then(res => {
			console.log(res);
			that.logoUrl = res.data.logoUrl;
			that.$set(that, 'banner', res.data.banner);
			that.$set(that, 'menus', res.data.menus);
			that.$set(that, 'roll', res.data.roll);
			that.$set(that, 'activity', res.data.activity);
			var activityOne = res.data.activity.shift();
			that.$set(that, 'activityOne', activityOne);
			that.$set(that, 'info', res.data.info);
			that.$set(that, 'firstList', res.data.firstList);
			that.$set(that, 'bastList', res.data.bastList);
			that.$set(that, 'likeInfo', res.data.likeInfo);
			that.$set(that, 'lovely', res.data.lovely);
			that.$set(that, 'benefit', res.data.benefit);
			that.$set(that, 'couponList', res.data.couponList);
			uni.hideLoading();
			that.setOpenShare();
		});
	},
	methods: {
		goGoodSearch() {
			this.$yrouter.push('/pages/shop/GoodSearch/index');
		},
		goWxappUrl(item) {
			this.$yrouter.push(item.uniapp_url);
		},
		goHotNewGoods(type) {
			this.$yrouter.push({
				path: '/pages/shop/HotNewGoods/index',
				query: { type }
			});
		},
		goGoodsCon(item) {
			console.log(item);
			this.$yrouter.push({
				path: '/pages/shop/GoodsCon/index',
				query: { id: item.id }
			});
		},
		goGoodsPromotion() {
			this.$yrouter.push('/pages/shop/GoodsPromotion/index');
		},
		setOpenShare: function() {}
	}
};
</script>
<style scoped lang="less">
.index {
	background-color: #fff;
}
.swiper-item {
	height: 100%;
}
</style>