基于vue.js的跨平台框架 uni-app商城 毕业设计（1）首页

vue页面代码

<template>
 <view>

 <!-- 用法
 indicator-dots	Boolean	 false	是否显示面板指示点
 vertical      	Boolean	 false	滑动方向是否为纵向
 autoplay      	Boolean	 false	是否自动切换
 interval      	Number	5000	自动切换时间间隔
 duration	      Number	500	滑动动画时长
 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
	<swiper-item v-for="img in ads">
		<image :src="img.tupian" mode="widthFix" style="width: 100%;"></image>
	</swiper-item>
</swiper>

<!--快捷菜单-->
<view class="navs">
 <navigator class="nav-item">
	 <image src="/static/images/menu01.png" class="nav-image"></image>
	 <text class="nav-text">所有商品</text>
 </navigator>
 <navigator class="nav-item">
	 <image src="/static/images/menu02.png" class="nav-image"></image>
	 <text class="nav-text">商品分类</text>
 </navigator>	
 <!--navigator class="nav-item" url="/pages/d/u_reg/u_reg">
	 <image src="/static/images/menu03.png" class="nav-image"></image>
	 <text class="nav-text">用户中心</text>
 </navigator>
 <navigator class="nav-item">
	 <image src="/static/images/menu04.png" class="nav-image"></image>
	 <text class="nav-text">订单列表</text>
 </navigator-->	
 <navigator class="nav-item" url="/pages/pub/xinxi_list/xinxi_list">
	 <image src="/static/images/menu06.png" class="nav-image"></image>
	 <text class="nav-text">资讯中心</text>
 </navigator>		
 <navigator class="nav-item">
	 <image src="/static/images/menu05.png" class="nav-image"></image>
	 <text class="nav-text">留言反馈</text>
 </navigator>													   
</view>
	 
<!--最新资讯-->
<navigator url="" class="zixun" v-for="zx in zixuns"
	:url="'/pages/pub/xinxi_xiangqing/xinxi_xiangqing?zixun_id='+zx.myid+'&zixun_mc='+zx.mybiaoti" >
  <image src="/static/img/news.png" mode="widthFix" class="zixun_zuo"></image>
  <view class="zixun_zhong">{
     {
     zx.mybiaoti}}</view>
  <image src="/static/img/right.png" class="zixun_you"></image>
</navigator>

<!--区块标题-最新产品-->
<view class="qukuai" style="display: none;">
  <view class="qukuai_zuo"></view>
  <view class="qukuai_zhong">最新商品</view>
  <navigator class="qukuai_you">more></navigator>
</view>
<!--最新产品 列表（1行3列流式布局）-->
<view class="cp_zuixin" style="display: none;">
	<navigator :url="'/pages/pub/sp_xinxi/sp_xinxi?cp_id='+cp.cp_id+ '&cp_mc='+cp.cp_mingcheng" 
		class="cp_xiangmu" v-for="cp in cp1s">
		<image :src="cp.cp_tupian" mode="widthFix"  class="cp_tupian"></image>
		<view class="cp_biaoti">{
     {
     cp.cp_mingcheng}}</view>
		<view class="cp_jiage">￥ {
     {
     cp.jiage}}</view>
	</navigator>		
</view>



<!--猜你喜欢 区块标题-->
 <view class="qukuai2">
	 <view  class="qukuai2_zuo">---</view>
	 <view  class="qukuai2_zhong">最新商品</view>
	 <view  class="qukuai2_you">---</view>
 </view>
<!--最新产品 列表（1行2列流式布局）-->
<view class="cp_zuixin">
	<navigator url="" class="cp_xiangmu2"  v-for="cp in cp1s"
		:url="'/pages/pub/sp_xinxi/sp_xinxi?cp_id='+cp.cp_id+ '&cp_mc='+cp.cp_mingcheng"  >
		<image :src="cp.cp_tupian" mode="widthFix"  class="cp_tupian"></image>
		<view class="cp_biaoti">{
     {
     cp.cp_mingcheng}}</view>
		<view class="cp_jiage">￥ {
     {
     cp.jiage}}</view>
	</navigator>
</view>

<!--区块标题-推荐商品6条-->
<view class="qukuai">
  <view class="qukuai_zuo"></view>
  <view class="qukuai_zhong">商品推荐</view>
  <navigator class="qukuai_you">more></navigator>
</view>
<!--商品推荐  1行2列：左图片，右文字（多行文字）-->
<navigator class="line"  v-for="cp in cp3s"
	:url="'/pages/pub/sp_xinxi/sp_xinxi?cp_id='+cp.cp_id+ '&cp_mc='+cp.cp_mingcheng"  >
	<image :src="cp.cp_tupian" mode="widthFix" class="line-img"></image>
	<view class="line-text">
	    <text class='txt1'>{
     {
     cp.cp_mingcheng}}</text>
	    <text class='txt2'>{
     {
     cp.jianjie}}</text>
	    <text class='txt3'>¥：{
     {
     cp.jiage}}</text>
	</view>
</navigator>


 </view>
</template>

<script>
	export default {
     
		data() {
     
			return {
     
				ads:[]  ,     //轮播图片
				zixuns:[],    //最新信息,
				cp1s:[],      //最新商品
				cp2s:[],      //猜你喜欢
				cp3s:[]       //推荐商品
			}
		},
		onLoad() {
     
			//console.log(this.$WebURL.WebUrl.phpweb)
			
			//加载轮播图片
			//http://phpshop.yaoyiwangluo.com/wx_lunbo.php
			uni.request({
     
				url:this.$WebURL.WebUrl.phpweb + "/wx_lunbo.php",
				success:(res)=>{
     
					this.ads = res.data
				}
			})

			//获取最新的信息（3）条
			//http://phpshop.yaoyiwangluo.com/wx_news_list.php
			//php版本地址：wx_news_list.php		
			uni.request({
     
				url:this.$WebURL.WebUrl.phpweb + "/wx_news_list.php",
				success:(res)=>{
     
					this.zixuns = res.data
				}
			})	
			
		   //最新上架产品（4）条
		   //http://phpshop.yaoyiwangluo.com/wx_CpList_top4.php
		   //php版本地址：wx_CpList_top4.php			
			uni.request({
     
				url:this.$WebURL.WebUrl.phpweb + "/wx_CpList_top4.php",
				success:(res)=>{
     
					this.cp1s = res.data
				}
			})	
			
		   //首页商品推荐（6）条
		   //http://phpshop.yaoyiwangluo.com/wx_CpList_top4.php
		   //php版本地址：wx_CpList_top4.php			
			uni.request({
     
				url:this.$WebURL.WebUrl.phpweb + "/wx_CpList_tuijian6.php",
				success:(res)=>{
     
					this.cp3s = res.data
				}
			})	
			
			
		},
		methods: {
     
			
		}
	}
</script>

<style>
/* 商品推荐  1行2列：左图片，右文字（多行文字） */
.line{
     padding: 5px;display: flex; border-bottom: 1px solid #F1F1F1;}
.line-img{
     width: 80px; height: 80px; border-radius: 3px; box-shadow: 2px 2px 5px #808080; width: 25%;}
.line-text{
     display: flex;flex-direction: column; padding: 0px 10px; width: 75%;}
.txt1{
     color: #333333;font-size: 14px;}
.txt2{
     color: #8F8F94;font-size: 13px; line-height: 28px;}
.txt3{
     color: #DD524D;}

	
/*猜你喜欢 区块标题*/	
.qukuai2{
     display: flex;background-color: #DD524D;color: #FFFFFF;}
.qukuai2_zuo{
     flex-grow: 1; display: flex;justify-content: flex-end;}
.qukuai2_zhong{
     width: 6em; text-align: center;}
.qukuai2_you{
     flex-grow: 1;} 
.cp_xiangmu2{
     width: 50%;padding: 3px; box-sizing: border-box;}
 
/*最新产品 列表*/		
.cp_zuixin{
     display: flex;flex-wrap: wrap;}
.cp_xiangmu{
     width: 33%;padding: 3px; box-sizing: border-box;}
.cp_tupian{
     width: 100%;}
.cp_biaoti{
     font-size: 14px;color: #333333;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;}
.cp_jiage{
     font-size: 12px; color: #DD524D;}	
	
/*区块标题*/		
.qukuai{
     display: flex;color: #555555; background-color: #f8f8f8;padding: 3px;}
.qukuai_zuo{
     width: 3px;height: 15px; background: #DD524D;margin: 5px;}
.qukuai_zhong{
     flex-grow: 1;}
.qukuai_you{
     text-shadow: 2px 2px 3px #8F8F94;}
	
/*最新资讯*/	
.zixun{
     display: flex;align-items: center;border-bottom: 1px solid #ebeaef;padding: 5px;}
.zixun_zuo{
     width: 25px;}
.zixun_zhong{
     flex-grow: 1;}
.zixun_you{
     width: 20px;height: 20px;}

/*导航菜单*/	
.navs{
     display: flex;justify-content: center;flex-wrap: wrap;border-bottom: 1px solid #ebeaef;}
.nav-item{
     display: flex;flex-direction: column;width: 25%; align-items: center; 
		padding: 10px;box-sizing: border-box;}	
.nav-image{
     width: 60px;height: 60px;}
.nav-text{
     font-size: 14px;}
/*广告图片*/	
.ad01{
     }
</style>