dreamland/template/graceUI商城套装新版本/graceMallForUniapp/pages/index/index.nvue

<template>
	<gracePage headerBG="#FF0000" statusBarBG="#FF0036">
		<!-- 页面头部 -->
		<view slot="gHeader">
			<view class="grace-header-body">
				<text class="grace-header-icons grace-icons grace-white">&#xe61d;</text>
				<view class="grace-header-content grace-flex-center">
					<view style="width:580rpx;">
						<graceSearch></graceSearch>
					</view>
				</view>
				<text class="grace-header-icons grace-icons grace-white">&#xe6fe;</text>
			</view>
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 轮播图 start -->
			<swiper class="grace-swiper" autoplay="true" indicator-dots indicator-color="rgba(255, 255, 255, 1)" 
			indicator-active-color="#FF0036" style="height:328rpx" interval="3000">
				<swiper-item class="grace-swiper-item" v-for="(item, index) in swiperItems" :key="index">
					<view class="grace-img-in">
						<image :src="item" mode="widthFix" class="grace-swiper-image"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="grace-common-line"></view>
			<!-- 推荐图标 start -->
			<view class="grace-grids">
				<view class="grace-grids-items" v-for="(item, index) in indexCate" :key="index">
					<image class="grace-grids-icon-img" :src="item.img" mode="widthFix"></image>
					<text class="grace-grids-text">{{item.title}}</text>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<view class="grace-body">
				<!-- 猜你喜欢 start -->
				<view class="grace-title">
					<text class="grace-title-text grace-black">猜你喜欢</text>
					<!-- 换一批调用 youlike 函数，利用后端随机更新喜欢的内容即可 -->
					<text class="grace-icons icon-refresh grace-green grace-text-small icon-right-margin" @tap="youlike">换一批</text>
				</view>
				<view class="grace-img-card">
					<view class="grace-img-card-item" :data-productid="index" v-for="(item, index) in youlikes" :key="index" @tap="openProductInfo">
						<view class="grace-img-card-img">
							<image :src="item.img" mode="widthFix" class="grace-img-card-img"></image>
						</view>
						<text class="grace-img-card-title grace-ellipsis">{{item.name}}</text>
						<view>
							<text class="grace-img-card-price">￥{{item.price}}</text>
							<text class="grace-line-through grace-text-small grace-gray">￥{{item.priceMarket}}</text>
						</view>
					</view>
				</view>
				<!-- 猜你喜欢 end -->
				<!-- 循环首页分类及分类推荐的产品 start -->
				<view v-for="(item, index) in indexCateAndProducts" :key="index">
					<view class="common-line"></view>
					<view class="grace-title">
						<text class="grace-title-text grace-black">{{item.cateName}}</text>
						<view :data-cateid="item.cateId">
							<text class="grace-text-small grace-gray">更多</text>
							<text class="grace-text-small grace-gray grace-icons icon-arrow-right icon-left-margin"></text>
						</view>
					</view>
					<view class="grace-img-card">
						<view class="grace-img-card-item" :data-productid="index" v-for="(item, index) in item.products" :key="index" @tap="openProductInfo">
							<view class="grace-img-card-img">
								<image :src="item.img" mode="widthFix" class="grace-img-card-img"></image>
							</view>
							<text class="grace-img-card-title grace-ellipsis">{{item.name}}</text>
							<view>
								<text class="grace-img-card-price">￥{{item.price}}</text>
								<text class="grace-line-through grace-text-small grace-gray">￥{{item.priceMarket}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 循环首页分类及分类推荐的产品 end -->
				
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "../../graceUI/weexComponents/gracePage.nvue";
import graceSearch from "../../graceUI/weexComponents/graceSearch.nvue";
var gRequest = require('../../graceUI/jsTools/request.js');
export default {
	data(){
		return {
			swiperItems : [],
			indexCate : [],
			youlikes:[],
			indexCateAndProducts : [],
			top: 0,
		}
	},
	onLoad:function(){
		// 加载轮播
		gRequest.get(
		'http://grace.hcoder.net/api/swipers',{},
		res => { this.swiperItems = res.data});
		// 加载首页推荐图标
		gRequest.get(
		'http://grace.hcoder.net/api/cate/indexCate',{},
		(res) => { this.indexCate = res.data;});
		// 猜你喜欢
		this.youlike();
		// 加载首页推荐分类及产品
		gRequest.get(
		'http://grace.hcoder.net/api/products/indexTj',{},
		(res) => { this.indexCateAndProducts = res.data});
	},
	components:{
		gracePage, graceSearch
	},
	methods:{
		// 搜索相关函数
		inputting : function(e){ console.log(e); },
		confirm : function (e) { console.log(e); },
		// 猜你喜欢
		youlike : function(){
			gRequest.get(
				'http://grace.hcoder.net/api/products/youlike',{},
				(res) => { this.youlikes = res.data});
		},
		// 打开商品详情
		openProductInfo : function(e){
			uni.navigateTo({ url: '../productInfo/productInfo'});
		}
	}
}
</script>
<style>
/* 九宫格个性修饰 */
.grace-grids-items{width:150rpx; padding:25rpx;}
.grace-grids-image{width:80rpx; height:80rpx;}
/* 产品列表修饰 */
.grace-img-card-img{height:340rpx;}
.grace-img-card-price{margin-right:20rpx;}
.grace-swiper-image{width:750rpx; height:328rpx;}
</style>