基于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>