获取首页的API接口
轮播图
服务端提供轮播图API接口数据
模型是我们接下来项目中大量对接数据库的代码,所以针对公共的字段和方法,我们可以先实现一个公共模型,基于公共模型来创建对应的业务模型。
在application里面建立一个utils包,在utils里面建造models.py文件,代码
公共模型BaseModel,代码:
from application import db
from datetime import datetime
import copy
class BaseModel(object):
"""模型基类"""
created_time = db.Column( db.DateTime, default=datetime.now, comment="添加时间" )
updated_time = db.Column( db.DateTime, default=datetime.now, onupdate=datetime.now,comment="更新时间" )
sort = db.Column( db.Integer, default=0,comment="排序" )
is_deleted = db.Column( db.Boolean, default=False,comment="逻辑删除" )
is_show = db.Column( db.Boolean, default=True,comment="是否显示" )
def __to_dict__(self,fields=None):
"""把模型转换成字典"""
try:
self.created_time = self.created_time.strftime("%Y-%m-%d %H:%M:%S")
except:
pass
try:
self.updated_time = self.updated_time.strftime("%Y-%m-%d %H:%M:%S")
except:
pass
data = self.__dict__
if fields is None:
data_dict = copy.deepcopy(data)
# 可能存在外键,所以写这么一步
if "_sa_instance_state" in data_dict:
data_dict.pop("_sa_instance_state")
else:
data_dict = {}
for key,value in data.items():
if key in fields:
data_dict[key] = value
return data_dict
业务模型代码:
class Banner(BaseModel, db.Model):
"""轮播广告"""
__tablename__ = "mogu_banner"
id = db.Column( db.Integer, primary_key=True,comment="ID")
title = db.Column( db.String(80),comment="轮播标题" )
link = db.Column( db.String(164), nullable=True, comment="广告链接")
image = db.Column(db.String(256), nullable=True, comment="图片路径")
is_http = db.Column(db.Boolean(), default=0, comment="是否站外地址, 0为站内地址")
def __repr__(self):
return self.title
数据迁移
在mange.py文件中引入需要迁移的模型
from application import init_app
app = init_app("dev")
"""加载模型"""
from application.apps.home.models import *
if __name__ == '__main__':
app.run()
然后执行命令
python manage.py db migrate -m "轮播图"
python manage.py db upgrade
先在pycharm进入mysql,把所有其他表都删除,再删除version那个表,再删除项目中的migretions/versions/ 里面的版本描述文件
测试数据
需要手动添加is_http
# 轮播广告
INSERT INTO `mogu`.`mogu_banner` (`created_time`, `updated_time`, `sort`, `is_deleted`, `is_show`, `title`, `link`, `image_url`) VALUES ('2019-06-01 21:33:21', '2019-06-01 21:33:21', null, 0, 1, '第一张', '', '../image/banner-1.webp'), ('2019-06-01 21:33:21', '2019-06-01 21:33:21', null, 0, 1, '第二张', '', '../image/banner-2.webp'), ('2019-06-01 21:33:21', '2019-06-01 21:33:21', null, 0, 1, '第三张', '', '../image/banner-3.webp');
同时在application/__init__.py
中,新增配置静态文件目录,并把测试图片放到项目根目录下static/banner目录中。
from flask import Flask
from flask_session import Session
from flask_sqlalchemy import SQLAlchemy
from flask_script import Manager
from flask_migrate import Migrate, MigrateCommand
from flask_jsonrpc import JSONRPC
from .settings.dev import DevConfig
from .settings.prod import ProdConfig
from .settings import redis
from .libs.log import init_log
config = {
"dev": DevConfig,
"prod": ProdConfig,
}
db = SQLAlchemy()
# 初始化jsonrpc模块
jsonrpc = JSONRPC(service_url='/api')
def init_app(configName):
"""初始化函数"""
app = Flask(__name__, static_url_path="/static", static_folder="../static")
。。。。
图片目录
在谷歌浏览器可以访问一下图片路径
http://0.0.0.0:5000/static/banner/hero1.jpg
视图接口代码:
# 实现rpc接口
from application import jsonrpc
from .models import db,Banner
@jsonrpc.method("Home.banner")
def banner():
banner_list = Banner.query.filter(
Banner.is_show == True,
Banner.is_deleted == False
).order_by(
db.desc(Banner.sort),
db.desc(Banner.id)
)
data = []
# 循环每个轮播广告模型,转换成字典
for banner in banner_list:
item = banner.__to_dict__(["link", "is_http", "image"])
data.append(item)
return data
showDoc接口文档编写。
使用showDoc软件:
源码:
##### 简要描述
- 首页轮播图列表接口
##### 请求URL
- ` http://xx.com/api/`
##### 请求方式
- POST
##### 参数
|参数名|类型|值|
|:---- |:----- |----- |
|id |uuid|55946eb0-6c78-420a-bed2-58ec233844c9 |
|jsonrpc |string | 2.0 |
|method |string | Home.banner |
|params |string |[] |
##### 返回示例
```
{
"id": "92f4d401-8138-4421-93bd-264407305c5a",
"jsonrpc": "2.0",
"result": [
{
"image": "static/banner/hero3.jpg",
"is_http": false,
"link": "/"
},
{
"image": "static/banner/hero2.jpg",
"is_http": false,
"link": "login/"
},
{
"image": "static/banner/hero1.jpg",
"is_http": true,
"link": "www.baidu.com"
}
]
}
```
##### 返回参数说明
|参数名|类型|说明|
|:----- |:-----|----- |
|id |uuid | 唯一标记id |
|jsonrpc | int | rpc协议版本,默认2.0 |
|result | array | 轮播图列表数据 |
| image | string | 图片链接地址 |
| is_http | bool | 是否站外地址,true表示是站外地址 |
| link | string | 点击图片后,跳转的地址 |
##### 备注
- 空
效果图:
客户端获取轮播图API接口并展示数据
首页发送ajax.
common.js,代码:
apiready = function(){
var header = document.querySelector('#app');
$api.fixStatusBar(header);
}
// 在 #app 标签下渲染一个按钮组件
axios.defaults.withCredentials = false;
Vue.prototype.$axios = axios; // 把对象挂载vue中
// 服务器地址
// 8083后面加了一个斜杠/
Vue.prototype.$settings = {
Host: "http://192.168.137.1:8083",
}
Vue.prototype.$uuid = function() {
// http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);});
};
html/home.html
,代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<title>Document</title>
<link rel="stylesheet" href="../static/css/index.css"/>
<link rel="stylesheet" href="../static/css/home.css"/>
<script src="../static/js/vue.min.js"></script>
<script src="../static/js/vant.min.js"></script>
<script src="../static/js/axios.js"></script>
<script src="../static/js/api.js"></script>
<script src="../static/js/common.js"></script>
<script src="../static/js/uuid.js"></script>
<style>
.floor-bg {
background-color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div class="Home">
<div class="header">
<van-search v-model="search_text" placeholder="请输入搜索关键词"></van-search>
<van-swipe :autoplay="3000">
<van-swipe-item v-for="banner in banner_list"><a :href="banner.link"><img :src="$settings.Host+banner.image" alt=""></a></van-swipe-item>
</van-swipe>
<van-notice-bar left-icon="volume-o" text="商城开业,七夕狂欢,四重大礼等你来~"></van-notice-bar>
</div>
<van-grid class="title-list" :border="false" :column-num="4">
<van-grid-item>
<van-icon name="../static/images/icon/typeicon1.png" size="2rem"></van-icon>
<label>今天新品</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon2.png" size="2rem"></van-icon>
<label>全球购</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon3.png" size="2rem"></van-icon>
<label>充值中心</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon4.png" size="2rem"></van-icon>
<label>会员积分</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon5.png" size="2rem"></van-icon>
<label>大礼包</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon6.png" size="2rem"></van-icon>
<label>优惠券</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon7.png" size="2rem"></van-icon>
<label>闪电购</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon8.png" size="2rem"></van-icon>
<label>商品分类</label>
</van-grid-item>
</van-grid>
<div class="floor">
<div class="buy-limit">
<van-cell title="限时抢购" is-link value="全场活动商品任你挑选"></van-cell>
<van-grid :border="false" :column-num="4">
<van-grid-item>
<van-image src="../static/images/goods/timebuy1.png"></van-image>
<label>超值特惠电饭煲</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy2.png"></van-image>
<label>达芙妮秋款包包</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy3.png"></van-image>
<label>特百惠优质水杯</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy4.png"></van-image>
<label>易捷手机充电宝</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy1.png"></van-image>
<label>超值特惠电饭煲</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy2.png"></van-image>
<label>达芙妮秋款包包</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy3.png"></van-image>
<label>特百惠优质水杯</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy4.png"></van-image>
<label>易捷手机充电宝</label>
</van-grid-item>
</van-grid>
</div>
<img class="floor-ad" src="../static/images/ad/ad.jpg" alt="">
<van-row class="floor-bg">
<van-col span="12"><van-image src="../static/images/1.png" /></van-col>
<van-col span="6"><van-image src="../static/images/2.png" /></van-col>
<van-col span="6"><van-image src="../static/images/3.png" /></van-col>
</van-row>
<van-row class="floor-bg">
<van-col span="12"><van-image src="../static/images/4.png" /></van-col>
<van-col span="6"><van-image src="../static/images/5.png" /></van-col>
<van-col span="6"><van-image src="../static/images/6.png" /></van-col>
</van-row>
<div class="brand-buy">
<van-cell title="品牌特卖" is-link value="知名品牌,特价销售"></van-cell>
<div class="brand-list">
<van-row class="floor-bg">
<van-col span="12"><van-image src="../static/images/7.png" /></van-col>
<van-col span="12">
<van-row>
<van-col span="12"><van-image src="../static/images/8.png" /></van-col>
<van-col span="12"><van-image src="../static/images/9.png" /></van-col>
<van-col span="12"><van-image src="../static/images/10.png" /></van-col>
<van-col span="12"><van-image src="../static/images/11.png" /></van-col>
</van-row>
</van-col>
</van-row>
</div>
</div>
<div class="special-buy">
<van-cell title="热门主题" is-link value="太热门啦,要挤爆"></van-cell>
<div class="brand-list">
<van-row class="floor-bg">
<van-col span="12"><van-image src="../static/images/12.png" /></van-col>
<van-col span="12">
<van-row>
<van-col span="12"><van-image src="../static/images/13.png" /></van-col>
<van-col span="12"><van-image src="../static/images/14.png" /></van-col>
<van-col span="12"><van-image src="../static/images/15.png" /></van-col>
<van-col span="12"><van-image src="../static/images/16.png" /></van-col>
</van-row>
</van-col>
</van-row>
<van-row class="floor-bg">
<van-col span="6"><van-image src="../static/images/17.png" /></van-col>
<van-col span="6"><van-image src="../static/images/18.png" /></van-col>
<van-col span="6"><van-image src="../static/images/19.png" /></van-col>
<van-col span="6"><van-image src="../static/images/20.png" /></van-col>
</van-row>
</div>
</div>
<div class="maybe-buy">
<van-cell title="猜你喜欢" icon="like"></van-cell>
<div class="goods-list">
<van-grid column-num="2" :center="false">
<van-grid-item>
<van-image src="../static/images/21.png"></van-image>
<label>三利 毛巾家纺纯棉吸水 提缎面巾两条装</label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/22.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/23.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/24.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/25.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/26.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/27.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/28.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
</van-grid>
</div>
</div>
</div>
<van-tabbar v-model="tabbar_active" active-color="#ff2150" inactive-color="#000" @change="onTabbarChange">
<van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item name="hot" icon="hot-o">分类</van-tabbar-item>
<van-tabbar-item name="cart" icon="shopping-cart-o">购物车</van-tabbar-item>
<van-tabbar-item name="user" icon="user-o">会员</van-tabbar-item>
</van-tabbar>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
search_text: "",
tabbar_active: "home",
banner_list: [],
},
created(){
this.get_banner_list();
},
methods:{
onTabbarChange(event) {
this.tabbar_active=event;
},
get_banner_list(){
// 获取轮播图列表
alert(this.$uuid());
this.$axios.post(`${this.$settings.Host}/api`,{
id: this.$uuid(),
method: "Home.banner",
params: [],
jsonrpc: "2.0"
}).then(response=>{
this.banner_list = response.data.result;
}).catch(error=>{
alert("网络异常,无法获取轮播图数据");
})
}
},
});
</script>
</body>
</html>
站点配置
服务端提供API接口
模型代码:
class SiteConfig(BaseModel, db.Model):
"""站点配置"""
__tablename__ = "mogu_site_config"
id = db.Column( db.Integer, primary_key=True,comment="ID" )
title = db.Column( db.String(80),comment="提示文本" )
name = db.Column( db.String(164), nullable=True, comment="变量名")
value = db.Column( db.String(80), unique=True, comment="变量值")
dtype = db.Column( db.Enum( "text", "image", "link", "audio","video" ), default="text",comment="变量类型" )
def __repr__(self):
return '%s[%s=%s]' % (self.title,self.name,self.value)
数据迁移,终端执行命令:
python manage.py db migrate -m "站点配置信息"
python manage.py db upgrade
测试数据,代码:
INSERT INTO `moguapp`.`mogu_site_config` (`created_time`, `updated_time`, `sort`, `is_deleted`, `is_show`, `title`, `name`, `value`, `dtype`) VALUES ('2019-06-01 21:33:21', '2019-06-01 21:33:21', 0, 0, 1, '广告图片', 'ad', '/static/images/ad.png', 'image'),('2019-06-01 21:33:21', '2019-06-01 21:33:21', 0, 0, 1, '搜索框提示文本', 'search_text', '请输入您要搜索的商品关键字', 'text'), ('2019-06-01 21:33:21', '2019-06-01 21:33:21', 0, 0, 1, '滚动短语', 'phrase', '蘑菇街每天推出时尚服饰、新品搭配、最新潮流及其他时尚前沿资讯等方面的精彩文章,是居家过日子好参谋。欢迎各位美女前来选购!', 'text');
视图接口代码:
from .models import db,SiteConfig
@jsonrpc.method("Home.config")
def config():
config_list = SiteConfig.query.filter(
SiteConfig.is_show == True,
SiteConfig.is_deleted == False
).order_by(
db.desc(SiteConfig.sort),
db.desc(SiteConfig.id)
)
data = {}
# 循环每个轮播广告模型,转换成字典
for config in config_list:
item = config.__to_dict__(["name", "value"])
data[item.get("name")] = item.get("value")
return data
showDoc接口文档。
源码:
##### 简要描述
- 站点配置列表接口
##### 请求URL
- ` http://xx.com/api/`
##### 请求方式
- POST
##### 参数
|参数名|类型|值|
|:---- |:----- |----- |
|id |uuid|8fa389fa-80c3-481c-b037-9437db2ddc90 |
|jsonrpc |string | 2.0 |
|method |string | Home.site_config |
|params |string |[] |
##### 返回示例
```
{
"id": "8fa389fa-80c3-481c-b037-9437db2ddc90",
"jsonrpc": "2.0",
"result": {
"ad": "/static/images/ad.png",
"phrase": "蘑菇街每天推出时尚服饰、新品搭配、最新潮流及其他时尚前沿资讯等方面的精彩文章,是居家过日子好参谋。欢迎各位美女前来选购!",
"search_text": "请输入您要搜索的商品关键字"
}
}
```
##### 返回参数说明
|参数名|类型|说明|
|:----- |:-----|----- |
|id |uuid | 唯一标记id |
|jsonrpc | int | rpc协议版本,默认2.0 |
|result | array | 站点配置列表数据 |
| ad | string | 广告图片链接地址 |
| phrase | string | 公告轮转文字 |
| search_text | string | 默认搜索文本 |
##### 备注
- 空
效果:
客户端获取接口数据并展示
html/home.html
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<title>Document</title>
<link rel="stylesheet" href="../static/css/index.css"/>
<link rel="stylesheet" href="../static/css/home.css"/>
<script src="../static/js/vue.min.js"></script>
<script src="../static/js/vant.min.js"></script>
<script src="../static/js/axios.js"></script>
<script src="../static/js/api.js"></script>
<script src="../static/js/common.js"></script>
<script src="../static/js/uuid.js"></script>
<style>
.floor-bg {
background-color: #fff;
}
</style>
</head>
<body>
<div id="app">
<div class="Home">
<div class="header">
<van-search v-model="search_text" :placeholder="web_config.search_text"></van-search>
<van-swipe :autoplay="3000">
<van-swipe-item v-for="banner in banner_list"><a :href="banner.link"><img :src="$settings.Host+banner.image" alt=""></a></van-swipe-item>
</van-swipe>
<van-notice-bar left-icon="volume-o" :text="web_config.phrase"></van-notice-bar>
</div>
<van-grid class="title-list" :border="false" :column-num="4">
<van-grid-item>
<van-icon name="../static/images/icon/typeicon1.png" size="2rem"></van-icon>
<label>今天新品</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon2.png" size="2rem"></van-icon>
<label>全球购</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon3.png" size="2rem"></van-icon>
<label>充值中心</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon4.png" size="2rem"></van-icon>
<label>会员积分</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon5.png" size="2rem"></van-icon>
<label>大礼包</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon6.png" size="2rem"></van-icon>
<label>优惠券</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon7.png" size="2rem"></van-icon>
<label>闪电购</label>
</van-grid-item>
<van-grid-item>
<van-icon name="../static/images/icon/typeicon8.png" size="2rem"></van-icon>
<label>商品分类</label>
</van-grid-item>
</van-grid>
<div class="floor">
<div class="buy-limit">
<van-cell title="限时抢购" is-link value="全场活动商品任你挑选"></van-cell>
<van-grid :border="false" :column-num="4">
<van-grid-item>
<van-image src="../static/images/goods/timebuy1.png"></van-image>
<label>超值特惠电饭煲</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy2.png"></van-image>
<label>达芙妮秋款包包</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy3.png"></van-image>
<label>特百惠优质水杯</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy4.png"></van-image>
<label>易捷手机充电宝</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy1.png"></van-image>
<label>超值特惠电饭煲</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy2.png"></van-image>
<label>达芙妮秋款包包</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy3.png"></van-image>
<label>特百惠优质水杯</label>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/goods/timebuy4.png"></van-image>
<label>易捷手机充电宝</label>
</van-grid-item>
</van-grid>
</div>
<img class="floor-ad" :src="$settings.Host+web_config.ad" alt="">
<van-row class="floor-bg">
<van-col span="12"><van-image src="../static/images/1.png" /></van-col>
<van-col span="6"><van-image src="../static/images/2.png" /></van-col>
<van-col span="6"><van-image src="../static/images/3.png" /></van-col>
</van-row>
<van-row class="floor-bg">
<van-col span="12"><van-image src="../static/images/4.png" /></van-col>
<van-col span="6"><van-image src="../static/images/5.png" /></van-col>
<van-col span="6"><van-image src="../static/images/6.png" /></van-col>
</van-row>
<div class="brand-buy">
<van-cell title="品牌特卖" is-link value="知名品牌,特价销售"></van-cell>
<div class="brand-list">
<van-row class="floor-bg">
<van-col span="12"><van-image src="../static/images/7.png" /></van-col>
<van-col span="12">
<van-row>
<van-col span="12"><van-image src="../static/images/8.png" /></van-col>
<van-col span="12"><van-image src="../static/images/9.png" /></van-col>
<van-col span="12"><van-image src="../static/images/10.png" /></van-col>
<van-col span="12"><van-image src="../static/images/11.png" /></van-col>
</van-row>
</van-col>
</van-row>
</div>
</div>
<div class="special-buy">
<van-cell title="热门主题" is-link value="太热门啦,要挤爆"></van-cell>
<div class="brand-list">
<van-row class="floor-bg">
<van-col span="12"><van-image src="../static/images/12.png" /></van-col>
<van-col span="12">
<van-row>
<van-col span="12"><van-image src="../static/images/13.png" /></van-col>
<van-col span="12"><van-image src="../static/images/14.png" /></van-col>
<van-col span="12"><van-image src="../static/images/15.png" /></van-col>
<van-col span="12"><van-image src="../static/images/16.png" /></van-col>
</van-row>
</van-col>
</van-row>
<van-row class="floor-bg">
<van-col span="6"><van-image src="../static/images/17.png" /></van-col>
<van-col span="6"><van-image src="../static/images/18.png" /></van-col>
<van-col span="6"><van-image src="../static/images/19.png" /></van-col>
<van-col span="6"><van-image src="../static/images/20.png" /></van-col>
</van-row>
</div>
</div>
<div class="maybe-buy">
<van-cell title="猜你喜欢" icon="like"></van-cell>
<div class="goods-list">
<van-grid column-num="2" :center="false">
<van-grid-item>
<van-image src="../static/images/21.png"></van-image>
<label>三利 毛巾家纺纯棉吸水 提缎面巾两条装</label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/22.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/23.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/24.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/25.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/26.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/27.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
<van-grid-item>
<van-image src="../static/images/28.png"></van-image>
<label>韩国代购正品超爆款 </label>
<p class="goods-price">
¥198.0
<span>¥286.0</span>
<van-icon name="shopping-cart-o" size="1rem"></van-icon>
</p>
</van-grid-item>
</van-grid>
</div>
</div>
</div>
<van-tabbar v-model="tabbar_active" active-color="#ff2150" inactive-color="#000" @change="onTabbarChange">
<van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item name="hot" icon="hot-o">分类</van-tabbar-item>
<van-tabbar-item name="cart" icon="shopping-cart-o">购物车</van-tabbar-item>
<van-tabbar-item name="user" icon="user-o">会员</van-tabbar-item>
</van-tabbar>
</div>
</div>
<script>
new Vue({
el: '#app',
data:{
search_text: "",
tabbar_active: "home",
banner_list: [],
web_config:{},
},
created(){
this.get_banner_list();
this.get_web_config();
},
methods:{
onTabbarChange(event) {
this.tabbar_active=event;
},
get_banner_list(){
// 获取轮播图列表
this.$axios.post(`${this.$settings.Host}/api`,{
id: this.$uuid(),
method: "Home.banner",
params: [],
jsonrpc: "2.0"
}).then(response=>{
this.banner_list = response.data.result;
}).catch(error=>{
alert("网络异常,无法获取轮播图数据");
});
},
get_web_config(){
// 获取站点配置信息
this.$axios.post(`${this.$settings.Host}/api`,{
id: this.$uuid(),
method: "Home.config",
params: [],
jsonrpc: "2.0"
}).then(response=>{
this.web_config = response.data.result;
}).catch(error=>{
alert("网络异常,无法获取站点配置信息");
});
}
},
});
</script>
</body>
</html>