h5轮播图代码_Flask蘑菇app 首页轮播图和站点配置

最新推荐文章于 2024-06-26 20:04:17 发布

weixin_39834084

最新推荐文章于 2024-06-26 20:04:17 发布

阅读量446

点赞数

文章标签： h5轮播图代码 html三张图片的轮播代码

获取首页的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>

weixin_39834084

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫