欣新房车-移动端官网

.editorconfig

+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    'plugin:vue/recommended'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'vue/require-prop-types': 'off',
+  }
+}

.gitattributes

+*.js linguist-language=Vue
+*.css linguist-language=Vue
+*.scss linguist-language=Vue

.gitignore

+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist
+
+.DS_Store
+.eslintcache
+selenium-debug.log
+test/unit/coverage
+test/e2e/reports
+cordova/platforms
+cordova/plugins
+thumbs.db
+!.gitkeep
+.idea/
+.vscode
+.project
+typings/
+typings.json
+build/
+package-lock.json

README.md

@@ -9,18 +9,6 @@
 
 如遇网络不佳，请移步[国内镜像加速节点](https://gitee.com/easytuan/nuxt-elm)
 
-# 效果演示
-
-[查看demo请戳这里](https://elm.caibowen.net/)（请用chrome手机模式预览）
-
-### 移动端扫描下方二维码
-
-<img src="./screenshots/qr-code.png" width="250" height="250"/>
-
-# API接口文档
-
-[接口文档地址](https://easytuan.gitee.io/node-elm-api/doc)（基于apidoc）
-
 # 技术栈
 
 nuxt2 + vue + vuex + vue-router + mint-ui
@@ -53,24 +41,6 @@ npm run start
 
 如果只做前端开发，请忽略这句话。
 
-## 休闲一刻
-
-<img src="screenshots/gh_a896d27a50a3_430.jpg" width="250"/> <img src="screenshots/gh_44a51ea2dd08_430.jpg" width="250"/>
-
-
-# 目标功能
-- [x] 商家列表 -- 完成
-- [x] 购物车功能 -- 完成
-- [x] 餐馆食品列表页 -- 完成
-- [x] 店铺评价页面 -- 完成
-- [x] 商家详情页 -- 完成
-- [x] 登录、注册 -- 完成
-- [x] 修改密码 -- 完成
-- [x] 个人中心 -- 完成
-- [x] 红包 -- 完成
-- [x] 收货地址 -- 完成
-
-# 业务介绍
 
 目录结构
 
@@ -89,37 +59,6 @@ npm run start
     ├── static                   // 静态资源
     └── store                    //vuex状态树
 
-
-## 部分截图展示
-
-### 首页展示
-
-<img src="screenshots/1.png" width="375px" height="667px" /> <img src="screenshots/1.gif" width="375px" height="667px" />
-
-### 个人资料
-
-<img src="screenshots/2.png" width="375px" height="667px" /> <img src="screenshots/2.gif" width="375px" height="667px" />
-
-### 我的
-
-<img src="screenshots/3.png" width="375px" height="667px" /> <img src="screenshots/3.gif" width="375px" height="667px" />
-
-### 订餐
-
-<img src="screenshots/4.png" width="375px" height="667px" /> <img src="screenshots/4.gif" width="375px" height="667px" />
-
-### 商家评价
-
-<img src="screenshots/5.png" width="375px" height="667px" /> <img src="screenshots/5.gif" width="375px" height="667px" />
-
-# 说明
-
->  如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^
-
->  或者您可以 "follow" 一下，我会不断开源更多的有趣的项目
-
->  如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR 👍
-
 # 开发日常记录
 
 ### nuxt模版搭建
@@ -292,10 +231,7 @@ npm i @nuxtjs/axios @nuxtjs/proxy -D
 
 ### 项目部署
 
-到这一步的同学，你得先确保你拥有一个自己的服务器。如果没有的话，赶紧去买一个（我不会和你说AWS和google云有提供免费一年的云服务器试用）
-
-
-OK，文章继续。在进行部署讲解前，我们先看一下开发命令
+开发命令
 
 | 命令            | 描述                                       |
 | ------------- | ---------------------------------------- |
@@ -329,29 +265,8 @@ OK，文章继续。在进行部署讲解前，我们先看一下开发命令
 nginx -s restart
 ```
 
-然后你就能在 http://elm.caibowen.net 访问到你的网站啦
-
 
 ### 最后
 
 对于 `Nuxt`，在使用层面，是比较简单、好上手的。相对 vue-ssr 来说，它大大的简化了开发的配置，让开发人员可以只需思考业务的开发，而不用太去担心文件的配置。其中 `Nuxt` 通过监听 pages 目录文件变更并自动生成路由更是直接省去了我们平常对于路由的配置。
 
-但是，目前 `Nuxt` 整体还是有待提高的，目前社区相关的三方插件比较有限，市面上相关的参考资料也相对比较少。
-
-不管如何，希望 `Nuxt` 社区可以越来越好吧 ~
-
-# 赞助
-
-如有帮助，欢迎赞助
-
-收到赞助款后，我会及时更新[赞助墙](https://caibowen.net/sponsor)
-
-<img src="screenshots/wechat.jpg" width="200px" /> <img src="screenshots/alipay.jpg" width="200px" />
-
-# 友情链接
-
-[项目后台地址](https://github.com/EasyTuan/node-elm-api)
-
-# License
-
-[GPL](LICENSE)

assets/images/cart.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 58 58"><defs><filter id="a" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="b" d="M7.614 4.051c-1.066.086-1.452-.398-1.752-1.584C5.562 1.28.33 5.88.33 5.88l3.71 19.476c0 .148-1.56 7.515-1.56 7.515-.489 2.19.292 4.27 3.56 4.32 0 0 36.917.017 36.92.047 1.979-.012 2.981-.995 3.013-3.039.03-2.043-1.045-2.978-2.987-2.993L8.83 31.192s.86-3.865 1.077-3.865c0 0-5.788.122 32.065-1.956.606-.033 2.018-.764 2.298-1.848 1.113-4.317 4.008-13.26 4.458-15.64.932-4.925 2.061-8.558-4.28-7.405 0 0-35.768 3.487-36.833 3.573z"/></defs><g fill="none" fill-rule="evenodd" filter="url(#a)" transform="translate(3 2)"><g transform="translate(5.038 7.808)"><mask id="c" fill="#fff"><use xlink:href="#b"/></mask><use fill="#5F5F63" xlink:href="#b"/><path fill="#EBEEF3" d="M53.962 7.774l-5.701 19.305-40.78 1.574z" mask="url(#c)" opacity=".05"/></g><path stroke="#5F5F63" stroke-linecap="round" stroke-width="6" d="M9.374 18.722S7.868 11.283 7.323 8.71C6.778 6.136 5.86 5.33 3.978 4.52 2.096 3.713.367 2.286.367 2.286"/><circle cx="46" cy="51" r="4" fill="#5F5F63"/><circle cx="12" cy="51" r="4" fill="#5F5F63"/></g></svg>
\ No newline at end of file

assets/images/cart2.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 58 58"><defs><filter id="a" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="1.5"/><feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="b" d="M7.614 4.051c-1.066.086-1.452-.398-1.752-1.584C5.562 1.28.33 5.88.33 5.88l3.71 19.476c0 .148-1.56 7.515-1.56 7.515-.489 2.19.292 4.27 3.56 4.32 0 0 36.917.017 36.92.047 1.979-.012 2.981-.995 3.013-3.039.03-2.043-1.045-2.978-2.987-2.993L8.83 31.192s.86-3.865 1.077-3.865c0 0-5.788.122 32.065-1.956.606-.033 2.018-.764 2.298-1.848 1.113-4.317 4.008-13.26 4.458-15.64.932-4.925 2.061-8.558-4.28-7.405 0 0-35.768 3.487-36.833 3.573z"/></defs><g fill="none" fill-rule="evenodd" filter="url(#a)" transform="translate(3 2)"><g transform="translate(5.038 7.808)"><mask id="c" fill="#fff"><use xlink:href="#b"/></mask><use fill="#FFF" xlink:href="#b"/><path fill="#2073C1" d="M53.962 7.774l-5.701 19.305-40.78 1.574z" mask="url(#c)" opacity=".1"/></g><path stroke="#FFF" stroke-linecap="round" stroke-width="6" d="M9.374 18.722S7.868 11.283 7.323 8.71C6.778 6.136 5.86 5.33 3.978 4.52 2.096 3.713.367 2.286.367 2.286"/><circle cx="46" cy="51" r="4" fill="#FFF"/><circle cx="12" cy="51" r="4" fill="#FFF"/></g></svg>
\ No newline at end of file

assets/services/common.js

+import request from '../utils/request';
+
+const prefix = '/common';
+
+export const getHomeData = (params) => {
+  return request({
+    url: `${prefix}/getHomeData`,
+    method: 'GET',
+    data: params,
+  })
+}

assets/services/shopping.js

+import request from '../utils/request';
+
+const prefix = '/shopping';
+
+export const restaurants = (params) => {
+  return request({
+    url: `${prefix}/restaurants`,
+    method: 'GET',
+    data: params,
+  })
+}
+
+export const seller = (params) => {
+  return request({
+    url: `${prefix}/seller`,
+    method: 'GET',
+    data: params,
+  })
+}
+export const goods = (params) => {
+  return request({
+    url: `${prefix}/goods`,
+    method: 'GET',
+    data: params,
+  })
+}
+export const ratings = (params) => {
+  return request({
+    url: `${prefix}/ratings`,
+    method: 'GET',
+    data: params,
+  })
+}

assets/services/user.js

+import request from '../utils/request';
+
+const prefix = '/user';
+
+// 登录
+export const loginApi = (params) => {
+  return request({
+    url: `${prefix}/login`,
+    method: 'POST',
+    data: params,
+  })
+}
+
+// 修改昵称
+export const retsetName = (params) => {
+  return request({
+    url: `${prefix}/retsetName`,
+    method: 'POST',
+    data: params,
+  })
+}
+
+// 修改密码
+export const retsetPassword = (params) => {
+  return request({
+    url: `${prefix}/retsetPassword`,
+    method: 'POST',
+    data: params,
+  })
+}
+
+// 获取用户地址列表
+export const getAddress = (params) => {
+  return request({
+    url: `${prefix}/getAddress`,
+    method: 'GET',
+    data: params,
+  })
+}
+
+// 获取用户地址
+export const getAddAddressById = (params) => {
+  return request({
+    url: `${prefix}/getAddAddressById`,
+    method: 'GET',
+    data: params,
+  })
+}
+
+// 添加用户地址
+export const addAddress = (params) => {
+  return request({
+    url: `${prefix}/addAddress`,
+    method: 'POST',
+    data: params,
+  })
+}
+
+// 删除用户地址
+export const deleteAddress = (params) => {
+  return request({
+    url: `${prefix}/deleteAddress`,
+    method: 'DELETE',
+    data: params,
+  })
+}

assets/styles/base.scss

+@import './mixin';
+@import './iconfont';
+
+* {
+  word-break: break-all;
+  color: #333;
+}
+
+input[disabled] {
+  background: #fff;
+  opacity: 1;
+}
+.flex-aic-jcb{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.flex-aic{
+  display: flex;
+  align-items: center;
+}
+.flex-aic-fww{
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.flex-aic-jcc{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.flex-jcb{
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-aic-jcc-fdc{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.header-top{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 1.87733rem;
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  line-height: 1.87733rem;
+  padding: 0 10px;
+  background: #333;
+  color: #fff;
+  width:100%;
+}
+.ellipsis {
+  overflow: hidden;white-space: nowrap;text-overflow:ellipsis;word-wrap:break-word;word-break:break-all;
+}
+.ellipsis2{
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.main-padding{
+  padding: 0.7rem 0.4rem;
+}
+.tc{
+  text-align: center;
+}
+.empty_data{
+  font-size:.5rem;
+  color:#666;
+  text-align:center;
+  line-height:2rem
+}
+
+.mint-second-menu{
+  width: 30%;
+  background: #333;
+  color: #fff;
+  position: fixed;
+  top: 1.87733rem;
+  z-index: 999;
+  right: 0;
+}
+.mint-second-menu li{
+  padding: px2rem(30px) 0;
+  text-align: center;
+  color: #fff;
+}
+ul,
+li {
+  list-style: none;
+  padding: 0;
+}
+ul{
+  height:100%;
+}
+
+a:link,
+a:visited,
+a:hover,
+a:active {
+  text-decoration: none;
+}
+
+@media screen and (min-width: 500px) {
+
+  body,
+  .mint-tabbar,
+  .mint-header {
+    max-width: 500px;
+    margin: 0 auto;
+    position: relative;
+  }
+}
+
+.mint-header {
+  height: px2rem(88px);
+  font-size: px2rem(36px);
+
+  .mintui {
+    font-size: px2rem(36px);
+  }
+}
+
+body,
+html {
+  @include wh(100%, 100%);
+  background-color: $fill-base;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}

assets/styles/mixin.scss

+//******颜色变量******/
+$primary: #4aa5f0;
+$secondary: #fff100;
+$danger: #d81e06;
+$blue: #1070ff;
+$light: #eee;
+$dark: #333;
+
+$fc: #fff;
+$fill-base: #f5f5f5;
+
+
+
+@function px2rem($px, $base-font-size: 46.875px) {
+  @return ($px / $base-font-size) * 1rem;
+}
+
+// 背景图片地址和大小
+@mixin bg($url) {
+  background-image: url($url);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+@mixin borderRadius($radius:4px) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  -ms-border-radius: $radius;
+  -o-border-radius: $radius;
+  border-radius: $radius;
+}
+
+//定位全屏
+@mixin allcover {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+//定位上下左右居中
+@mixin center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+
+//定位上下居中
+@mixin ct {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+//定位上下居中
+@mixin cl {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+//宽高
+@mixin wh($width, $height) {
+  width: $width;
+  height: $height;
+}
+
+//字体大小、行高、字体
+@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
+  font: #{$size}/#{$line-height} $family;
+}
+
+//字体大小，颜色
+@mixin sc($size, $color) {
+  font-size: $size;
+  color: $color;
+}
+
+//flex 布局和 子元素 对其方式
+@mixin fj($type: space-between) {
+  display: -webkit-flex;
+  display: -webkit-box;
+  display: flex;
+  -webkit-justify-content: $type;
+  justify-content: $type;
+}

assets/utils/request.js

+import axios from 'axios';
+import config from '~/config';
+import { Toast } from 'mint-ui';
+
+axios.defaults.baseURL = config.BASE_URL;
+axios.defaults.timeout = config.TIMEOUT;
+axios.defaults.headers = config.HEADERS;
+
+// 请求拦截器
+axios.interceptors.request.use( request => {
+  if (!config.IS_RELEASE) {
+    console.log(
+      `${new Date().toLocaleString()}【 M=${request.url} 】P=`,
+      request.params || request.data,
+    );
+  }
+  return request;
+}, error => {
+  return Promise.reject(error);
+});
+
+export default async (options = { method: 'GET' }) => {
+  let isdata = true;
+  if (
+    options.method.toUpperCase() !== 'POST'
+    && options.method.toUpperCase() !== 'PUT'
+    && options.method.toUpperCase() !== 'PATCH'
+  ) {
+    isdata = false;
+  }
+  const res = await axios({
+    method: options.method,
+    url: options.url,
+    data: isdata ? options.data : null,
+    params: !isdata ? options.data : null,
+  });
+  if (res.status >= 200 && res.status < 300) {
+    if (!config.IS_RELEASE) {
+      console.log(
+        `${new Date().toLocaleString()}【接口响应：】`,
+        res.data,
+      );
+    }
+    // 浏览器环境弹出报错信息
+    if(typeof window !== "undefined" && res.data.code !== 0) {
+      Toast(res.data.msg);
+    }
+    return res.data;
+  }else {
+    if(typeof window !== "undefined" && res.data.code !== 0) {
+      Toast('请求错误');
+    }
+  }
+
+};

assets/utils/tool.js

+/**
+ * 常用工具
+ */
+export default class Tool {
+  /**
+   * 存储localStorage
+   */
+  static setStore(name, content) {
+    if (!name) return;
+    if (typeof content !== 'string') {
+      content = JSON.stringify(content);
+    }
+    window.localStorage.setItem(name, content);
+  }
+
+  /**
+   * 获取localStorage
+   */
+  static getStore(name) {
+    if (!name) return;
+    return window.localStorage.getItem(name);
+  }
+
+  /**
+   * 删除localStorage
+   */
+  static removeStore(name) {
+    if (!name) return;
+    window.localStorage.removeItem(name);
+  }
+}

assets/utils/validate.js

+/**
+ * 表单验证工具类
+ */
+export default class Validate {
+  /**
+   * 判断输入值是否为空
+   */
+  static required(value) {
+    if (typeof value === 'number') {
+      value = value.toString();
+    } else if (typeof value === 'boolean') {
+      return !0;
+    }
+    return value && value.length > 0;
+  }
+
+  /**
+   * 重复验证
+   */
+  static noDuplicate(values) {
+    for (let i = 0; i < values.length; i++) {
+      for (let j = 0; j < values.length; j++) {
+        if (values[i] == values[j] && i != j) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  
+  /**
+   * 验证电子邮箱格式
+   */
+  static email(value) {
+    return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(value);
+  }
+  
+  /**
+   * 验证手机格式
+   */
+  static tel(value) {
+    return /^1[234578]\d{9}$/.test(value);
+  }
+  
+  /**
+   * 验证电话格式
+   */
+  static phone(value) {
+    return /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/.test(value);
+  }
+
+  /**
+   * 验证联系方式（固话&手机）
+   */
+  static call(value) {
+    return /(^(0[0-9]{2,3}\-)?([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$)|(^((\(\d{3}\))|(\d{3}\-))?(1[358]\d{9})$)/.test(value);
+  }
+
+  /**
+   * 验证传真格式
+   */
+  static fax(value) {
+    return /^(\d{3,4}-)\d{7,8}$/.test(value);
+  }
+  
+  /**
+   * 验证URL格式
+   */
+  static url(value) {
+    return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(value);
+  }
+  
+  /**
+   * 验证日期格式
+   */
+  static date(value) {
+    return !/Invalid|NaN/.test(new Date(value).toString());
+  }
+  
+  /**
+   * 验证ISO类型的日期格式
+   */
+  static dateISO(value) {
+    return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test(value);
+  }
+  
+  /**
+   * 验证十进制数字
+   */
+  static number(value) {
+    return  /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
+  }
+  
+  /**
+   * 验证整数
+   */
+  static digits(value) {
+    return /^\d+$/.test(value);
+  }
+  
+  /**
+   * 验证正整数
+   */
+  static amount(value) {
+    return /^[1-9]\d*$/.test(value);
+  }
+  
+  /**
+   * 验证身份证号码
+   */
+  static idcard(value) {
+    return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value);
+  }
+  
+  /**
+   * 验证内容是否相同
+   */
+  static equalTo(value, param) {
+    return value == param;
+  }
+  
+  /**
+   * 验证是否包含某个值
+   */
+  static contains(value, param) {
+    return value.indexOf(param) >= 0;
+  }
+  
+  /**
+   * 验证最小长度
+   */
+  static minlength(value, param) {
+    return value.length >= param;
+  }
+  
+  /**
+   * 验证最大长度
+   */
+  static maxlength(value, param) {
+    return value.length <= param;
+  }
+  
+  /**
+   * 验证一个长度范围[min, max]
+   */
+  static rangelength(value, param) {
+    return (value.length >= param[0] && value.length <= param[1]);
+  }
+  
+  /**
+   * 验证最小值
+   */
+  static min(value, param) {
+    return Number(value) >= Number(param);
+  }
+  
+  /**
+   * 验证最大值
+   */
+  static max(value, param) {
+    return Number(value) <= Number(param);
+  }
+
+  /**
+   * 验证一个值范围[min, max]
+   */
+  static range(value, param) {
+    return (value >= param[0] && value <= param[1]);
+  }
+  
+}

components/detailBanner.vue

+<template>
+  <div class="detail-banner">
+    <div class="banner">
+      <div class="box">
+        <ul>
+          <li
+            v-for="(item, index) in list"
+            :key="item"
+            :class="index === current ? 'active' : ''"
+            @click="bannerClick(index, item)">
+            <img
+              :src= "item"
+              style="width:100%;">
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: [
+      'list',
+      'looptime',
+      'height',
+      'width',
+      'background',
+      'color',
+      'fontSize'
+    ],
+    data() {
+      return {
+        current: 0, // 当前索引
+        timerId: null, // 清除循环标记
+        intStyle: {}
+      }
+    },
+    created () {
+      this.int(4000);
+    },
+    methods: {
+      getArticle () {
+        this.$emit('getArticle', this.article)
+      },
+      // 鼠标移入状态圆点
+      changeBanner (index) {
+        this.$emit('change', this.current);
+        this.stopLoop();
+        this.current = index;
+      },
+      // 鼠标点击banner内容
+      bannerClick (index, item) {
+        this.$emit('click', index, item);
+      },
+      // 点击上一张按钮
+      prev () {
+        if(this.current > 0) {
+          // 将对象列表对应的索引和整个对象传出去
+          this.$emit('prev', this.current, this.list);
+          this.current--;
+        } else {
+          this.$emit('prev', this.current, this.list);
+          this.current = this.list.length - 1 ;
+        }
+      },
+      // 点击下一张按钮
+      next () {
+        if(this.current < this.list.length - 1) {
+          this.$emit('prev', this.current, this.list);
+          this.current ++;
+        } else {
+          this.$emit('prev', this.current, this.list);
+          this.current = 0;
+        }
+      },
+      // 鼠标移出继续循环播放
+      startLoop () {
+        this.int(4000);
+      },
+      // 鼠标移入停止循环播放
+      stopLoop () {
+        clearTimeout(this.timerId); // 清除循环
+      },
+      // 初始化加载
+      int (time){
+        this.timerId = setInterval(()=> {
+          this.next();
+        }, time);
+        // 初始化样式
+        this.intStyle = {
+          width: this.width + 'px',
+          height: this.height + 'px',
+          background: this.background,
+          color: this.color
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import "../assets/styles/mixin";
+  .detail-banner{
+    .banner-bg{
+      width: 100%;
+    }
+    .banner li{
+      position:absolute;
+      left:0;
+      width:100%;
+      height:100%;
+      color:#fff;
+      font-size:80px;
+      text-align:center;
+      opacity:0;
+      transition: all 1.5s;
+    }
+    .active{
+      opacity:1 !important;
+      transition: all 1.5s;
+    }
+    ul{
+      height:100%;
+    }
+    .banner .name-t{
+      display:inline-block;
+      height:40px;
+      width:100px;
+      font-size: 14px;
+      margin:0 5px;
+      background:#ccc;
+      color:#333;
+      cursor:pointer;
+    }
+    .banner span.active{
+      color:#fff;
+      background:#1bbb9f;
+    }
+    .banner .status{
+      position:absolute;
+      bottom:20px;
+      width:100%;
+      height:40px;
+      text-align:Center;
+      display: flex;
+      justify-content: center;
+    }
+    .banner .box{
+      position:relative;
+    }
+    .banner span{
+      display:block;
+      height:40px;
+      width:20px;
+      color:#fff;
+      line-height:40px;
+      text-align:Center;
+      background:rgba(0,0,0, .7);
+      cursor:pointer;
+    }
+    .banner span.prev{
+      float:left;
+    }
+    .banner span.next{
+      float:right;
+    }
+    .banner .btn{
+      position:absolute;
+      top:50%;
+      width:100%;
+      transform: translateY(-50%);
+    }
+    .banner{
+      height:px2rem(600px);
+      overflow: hidden;
+    }
+  }
+</style>

components/footer.vue

+<template>
+  <div class="main-padding">
+    <div>
+      <a
+        href="tel:4000369369"
+        class="ft-14"
+        style="color:#171413;">24小时竭诚为您服务</a>
+    </div>
+    <div class="flex-aic-jcb">
+      <div style="width: 30%;">
+        <img
+          src="../assets/images/xxgzh.jpg">
+        <div class="tc">欣新房车微信公众号</div>
+      </div>
+      <div style="width: 30%;">
+        <img
+          src="../assets/images/xxfczs.jpg">
+        <div class="tc">欣新房车助手小程序</div>
+      </div>
+      <div style="width: 30%;">
+        <img
+          src="../assets/images/dfcapp.png">
+        <div class="tc">滴房车App(欣新旗下)</div>
+      </div>
+    </div>
+    <div class="link-f flex-aic-jcc">©欣新房车控股集团（东莞）股份有限公司2019 保留一切权利。 </div>
+    <div class="flex-aic-jcc">
+      <a
+        href="http://beian.miit.gov.cn"
+        rel="nofollow"
+        target="_blank"><span>备案号：</span>粤ICP备19072339号-2</a>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      page: {
+        default: 0
+      }
+    },
+    data() {
+      return {
+        selected: 0
+      };
+    },
+    created() {
+      this.selected = this.page;
+    },
+    methods: {
+      goPage(url) {
+        this.$router.replace(url);
+      }
+    }
+  };
+
+</script>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/mixin";
+
+  .mint-tabbar>.mint-tab-item.is-selected {
+    background: #fafafa;
+  }
+
+  .mint-tab-item-icon {
+    @include wh(22px, 22px);
+  }
+
+  .mint-tabbar {
+    color: #818181;
+    position: fixed;
+  }
+
+  .mint-tabbar>.mint-tab-item.is-selected {
+    color: $primary;
+  }
+
+</style>

components/head.vue

+<template>
+  <div>
+    <div class="header-top">
+      <div
+        class="flex-aic"
+        @click="$router.push('/')">
+        <img
+          style="width: 30px;"
+          src="https://mgmt.dfangche.com/xxfccn/image/1/app/5d9c62b7412efd926f70e0ed5efb19a.png"
+        >
+        <span style="color:#fff;margin-left: 10px;">欣新房车</span>
+      </div>
+      <img
+        style="width: 20px;height: 20px;"
+        src="https://xxtest.upyuns.com/image/admin/2019-09-02/17.jpg"
+        @click="showMenu()"
+      >
+    </div>
+    <div v-if="isShowMenu">
+      <ul
+        class="mint-second-menu">
+        <li @click="$router.push('/')">首页</li>
+        <li @click="$router.push('/vehicle')">房车租赁</li>
+        <li @click="$router.push('/tour')">房车旅游</li>
+        <li @click="$router.push('/campsite')">房车营地</li>
+        <li @click="$router.push('/activity')">欣新活动</li>
+        <li @click="$router.push('/news')">新闻动态</li>
+        <li @click="$router.push('/aboutXx')">关于欣新</li>
+      </ul>
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        isShowMenu: false,
+      };
+    },
+    created() {
+    },
+    methods: {
+      /**
+       * 显示菜单
+       */
+      showMenu(){
+        this.isShowMenu = !this.isShowMenu;
+      },
+    }
+  };
+
+</script>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/mixin";
+
+  .mint-tabbar>.mint-tab-item.is-selected {
+    background: #fafafa;
+  }
+
+  .mint-tab-item-icon {
+    @include wh(22px, 22px);
+  }
+
+  .mint-tabbar {
+    color: #818181;
+    position: fixed;
+  }
+
+  .mint-tabbar>.mint-tab-item.is-selected {
+    color: $primary;
+  }
+
+</style>

components/ratingStar.vue

+<template>
+  <div class="rating_container">
+    <section class="star_container">
+      <svg 
+        v-for="num in 5" 
+        :key="num" 
+        class="grey_fill">
+        <svg 
+          id="star" 
+          viewBox="0 0 32 32" 
+          width="100%" 
+          height="100%">
+          <path 
+            d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z" 
+            class="path1"/>
+        </svg>
+      </svg>
+    </section>
+    <div 
+      :style="'width:' + rating*2/5 + 'rem'" 
+      class="star_overflow">
+      <section class="star_container">
+        <svg 
+          v-for="num in 5" 
+          :key="num" 
+          class="orange_fill">
+          <svg 
+            id="star" 
+            viewBox="0 0 32 32" 
+            width="100%" 
+            height="100%">
+            <path 
+              d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z" 
+              class="path1"/>
+          </svg>
+        </svg>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ["rating"]
+  };
+
+</script>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/mixin";
+
+  .rating_container {
+    position: relative;
+    top: 0.1rem;
+    @include wh(2rem, 0.4rem);
+
+    .star_overflow {
+      overflow: hidden;
+      position: relative;
+      height: 100%;
+    }
+
+    .star_container {
+      position: absolute;
+      display: flex;
+      width: 2rem;
+      height: 0.4rem;
+      top: -0.02rem;
+      left: -0.02rem;
+
+      .grey_fill {
+        fill: #d1d1d1;
+      }
+
+      .orange_fill {
+        fill: #f8ce46;
+      }
+    }
+  }
+
+</style>

components/secondBanner.vue

+<template>
+  <div class="banner">
+    <div class="box">
+      <ul>
+        <li
+          v-for="(item, index) in list"
+          :key="item.id"
+          :class="index === current ? 'active' : ''"
+          @click="bannerClick(index, item)">
+          <img
+            :src= "item.cover"
+            :alt="item.title"
+            style="width:100%;">
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: [
+      'list',
+      'looptime',
+      'height',
+      'width',
+      'background',
+      'color',
+      'fontSize'
+    ],
+    data() {
+      return {
+        current: 0, // 当前索引
+        timerId: null, // 清除循环标记
+        intStyle: {}
+      }
+    },
+    created () {
+      this.int(4000);
+    },
+    methods: {
+      getArticle () {
+        this.$emit('getArticle', this.article)
+      },
+      // 鼠标移入状态圆点
+      changeBanner (index) {
+        this.$emit('change', this.current);
+        this.stopLoop();
+        this.current = index;
+      },
+      // 鼠标点击banner内容
+      bannerClick (index, item) {
+        this.$emit('click', index, item);
+      },
+      // 点击上一张按钮
+      prev () {
+        if(this.current > 0) {
+          // 将对象列表对应的索引和整个对象传出去
+          this.$emit('prev', this.current, this.list);
+          this.current--;
+        } else {
+          this.$emit('prev', this.current, this.list);
+          this.current = this.list.length - 1 ;
+        }
+      },
+      // 点击下一张按钮
+      next () {
+        if(this.current < this.list.length - 1) {
+          this.$emit('prev', this.current, this.list);
+          this.current ++;
+        } else {
+          this.$emit('prev', this.current, this.list);
+          this.current = 0;
+        }
+      },
+      // 鼠标移出继续循环播放
+      startLoop () {
+        this.int(4000);
+      },
+      // 鼠标移入停止循环播放
+      stopLoop () {
+        clearTimeout(this.timerId); // 清除循环
+      },
+      // 初始化加载
+      int (time){
+        this.timerId = setInterval(()=> {
+          this.next();
+        }, time);
+        // 初始化样式
+        this.intStyle = {
+          width: this.width + 'px',
+          height: this.height + 'px',
+          background: this.background,
+          color: this.color
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  @import "../assets/styles/mixin";
+  .banner-bg{
+    width: 100%;
+  }
+  .banner li{
+    position:absolute;
+    left:0;
+    width:100%;
+    height:100%;
+    color:#fff;
+    font-size:80px;
+    text-align:center;
+    opacity:0;
+    transition: all 1.5s;
+  }
+  .active{
+    opacity:1 !important;
+    transition: all 1.5s;
+  }
+  ul{
+    height:100%;
+  }
+  .banner .name-t{
+    display:inline-block;
+    height:40px;
+    width:100px;
+    font-size: 14px;
+    margin:0 5px;
+    background:#ccc;
+    color:#333;
+    cursor:pointer;
+  }
+  .banner span.active{
+    color:#fff;
+    background:#1bbb9f;
+  }
+  .banner .status{
+    position:absolute;
+    bottom:20px;
+    width:100%;
+    height:40px;
+    text-align:Center;
+    display: flex;
+    justify-content: center;
+  }
+  .banner .box{
+    position:relative;
+  }
+  .banner span{
+    display:block;
+    height:40px;
+    width:20px;
+    color:#fff;
+    line-height:40px;
+    text-align:Center;
+    background:rgba(0,0,0, .7);
+    cursor:pointer;
+  }
+  .banner span.prev{
+    float:left;
+  }
+  .banner span.next{
+    float:right;
+  }
+  .banner .btn{
+    position:absolute;
+    top:50%;
+    width:100%;
+    transform: translateY(-50%);
+  }
+  .banner{
+    height:px2rem(100px);
+    overflow: hidden;
+  }
+</style>

components/shopList.vue

+<template>
+  <div class="shoplist_container">
+    <ul
+      v-if="shopListArr.length"
+      type="1">
+      <router-link
+        v-for="item in shopListArr"
+        :to="{ path: 'shop', query:{geohash, id: item.id }}"
+        :key="item.id"
+        class="shop_li">
+        <section>
+          <img
+            :src="item.image_path"
+            class="shop_img">
+        </section>
+        <hgroup class="shop_right">
+          <header class="shop_detail_header">
+            <h4
+              :class="item.is_premium? 'premium': ''"
+              class="shop_title ellipsis">{{ item.name }}</h4>
+          </header>
+        </hgroup>
+      </router-link>
+    </ul>
+    <p
+      v-if="touchend"
+      class="empty_data">没有更多了</p>
+    <aside
+      v-if="showBackStatus"
+      class="return_top"
+      @click="backTop">
+      <svg class="back_top_svg">
+        <use
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          xlink:href="#backtop"/>
+      </svg>
+    </aside>
+    <div
+      ref="abc"
+      style="background-color: red;"/>
+  </div>
+</template>
+
+<script>
+  import ratingStar from "./ratingStar";
+  import config from "~/config";
+  import {
+    restaurants
+  } from "~/assets/services/shopping";
+
+  export default {
+    components: {
+      ratingStar
+    },
+    props: [
+      "restaurantCategoryId",
+      "restaurantCategoryIds",
+      "sortByType",
+      "deliveryMode",
+      "supportIds",
+      "confirmSelect",
+      "geohash"
+    ],
+    data() {
+      return {
+        offset: 0, // 批次加载店铺列表，每次加载20个 limit = 20
+        shopListArr: [], // 店铺列表数据
+        preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
+        showBackStatus: false, //显示返回顶部按钮
+        touchend: false //没有更多数据
+      };
+    },
+    watch: {
+      //监听父级传来的restaurantCategoryIds，当值发生变化的时候重新获取餐馆数据，作用于排序和筛选
+      restaurantCategoryIds: function (value) {
+        this.listenPropChange();
+      },
+      //监听父级传来的排序方式
+      sortByType: function (value) {
+        this.listenPropChange();
+      },
+      //监听父级的确认按钮是否被点击，并且返回一个自定义事件通知父级，已经接收到数据，此时父级才可以清除已选状态
+      confirmSelect: function (value) {
+        this.listenPropChange();
+      }
+    },
+    mounted() {
+      this.initData();
+    },
+    methods: {
+      async initData() {
+        //获取数据
+        let res = await restaurants();
+        res.data.map(item => {
+          item.image_path = config.IMG_URL + item.image_path;
+        });
+        this.shopListArr = [...res.data];
+        if (res.data.length < 20) {
+          this.touchend = true;
+        }
+      },
+      //到达底部加载更多数据
+      async loaderMore() {
+        if (this.touchend) {
+          return;
+        }
+        //防止重复请求
+        if (this.preventRepeatReuqest) {
+          return;
+        }
+        this.preventRepeatReuqest = true;
+
+        //数据的定位加20位
+        this.offset += 20;
+        let res = await shopList(
+          this.latitude,
+          this.longitude,
+          this.offset,
+          this.restaurantCategoryId
+        );
+        this.shopListArr = [...this.shopListArr, ...res];
+        //当获取数据小于20，说明没有更多数据，不需要再次请求数据
+        if (res.length < 20) {
+          this.touchend = true;
+          return;
+        }
+        this.preventRepeatReuqest = false;
+      },
+      //返回顶部
+      backTop() {
+        animate(document.body, {
+          scrollTop: "0"
+        }, 400, "ease-out");
+      },
+      //监听父级传来的数据发生变化时，触发此函数重新根据属性值获取数据
+      async listenPropChange() {
+        this.offset = 0;
+        let res = await shopList(
+          this.latitude,
+          this.longitude,
+          this.offset,
+          "",
+          this.restaurantCategoryIds,
+          this.sortByType,
+          this.deliveryMode,
+          this.supportIds
+        );
+        this.hideLoading();
+        //考虑到本地模拟数据是引用类型，所以返回一个新的数组
+        this.shopListArr = [...res];
+      },
+      zhunshi(supports) {
+        let zhunStatus;
+        if (supports instanceof Array && supports.length) {
+          supports.forEach(item => {
+            if (item.icon_name === "准") {
+              zhunStatus = true;
+            }
+          });
+        } else {
+          zhunStatus = false;
+        }
+        return zhunStatus;
+      }
+    },
+  };
+
+</script>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/mixin";
+
+  .shoplist_container {
+    background-color: #fff;
+  }
+
+  .shop_li {
+    display: flex;
+    border-bottom: 0.025rem solid #f1f1f1;
+    padding: 0.7rem 0.4rem;
+  }
+
+  .shop_img {
+    @include wh(2.7rem, 2.7rem);
+    display: block;
+    margin-right: 0.4rem;
+  }
+
+  .list_back_li {
+    height: 4.85rem;
+
+    .list_back_svg {
+      @include wh(100%, 100%);
+    }
+  }
+
+  .shop_right {
+    flex: auto;
+
+    .shop_detail_header {
+      @include fj;
+      align-items: center;
+
+      .shop_title {
+        width: 8.5rem;
+        color: #333;
+        padding-top: 0.01rem;
+        @include font(0.65rem, 0.65rem, "PingFangSC-Regular");
+        font-weight: 700;
+      }
+
+      .premium::before {
+        content: "品牌";
+        display: inline-block;
+        font-size: 0.5rem;
+        line-height: 0.6rem;
+        color: #333;
+        background-color: #ffd930;
+        padding: 0 0.1rem;
+        border-radius: 0.1rem;
+        margin-right: 0.2rem;
+      }
+
+      .shop_detail_ul {
+        display: flex;
+        transform: scale(0.8);
+        margin-right: -0.3rem;
+
+        .supports {
+          @include sc(0.5rem, #999);
+          border: 0.025rem solid #f1f1f1;
+          padding: 0 0.04rem;
+          border-radius: 0.08rem;
+          margin-left: 0.05rem;
+        }
+      }
+    }
+
+    .rating_order_num {
+      @include fj(space-between);
+      height: 0.6rem;
+      margin-top: 0.52rem;
+
+      .rating_order_num_left {
+        @include fj(flex-start);
+
+        .rating_section {
+          display: flex;
+
+          .rating_num {
+            @include sc(0.4rem, #ff6000);
+            margin: 0 0.2rem;
+          }
+        }
+
+        .order_section {
+          transform: scale(0.8);
+          margin-left: -0.2rem;
+          @include sc(0.4rem, #666);
+        }
+      }
+
+      .rating_order_num_right {
+        display: flex;
+        align-items: center;
+        transform: scale(0.7);
+        min-width: 5rem;
+        justify-content: flex-end;
+        margin-right: -0.8rem;
+
+        .delivery_style {
+          font-size: 0.4rem;
+          padding: 0.04rem 0.08rem 0;
+          border-radius: 0.08rem;
+          margin-left: 0.08rem;
+          border: 1px;
+        }
+
+        .delivery_left {
+          color: #fff;
+          background-color: $blue;
+          border: 0.025rem solid $blue;
+        }
+
+        .delivery_right {
+          color: $blue;
+          border: 0.025rem solid $blue;
+        }
+      }
+    }
+
+    .fee_distance {
+      margin-top: 0.52rem;
+      @include fj;
+      @include sc(0.5rem, #333);
+
+      .fee {
+        transform: scale(0.9);
+        @include sc(0.5rem, #666);
+      }
+
+      .distance_time {
+        transform: scale(0.9);
+
+        span {
+          color: #999;
+        }
+
+        .order_time {
+          color: $blue;
+        }
+
+        .segmentation {
+          color: #ccc;
+        }
+      }
+    }
+  }
+
+  .loader_more {
+    @include font(0.6rem, 3);
+    text-align: center;
+    color: #999;
+  }
+
+  .empty_data {
+    @include sc(0.5rem, #666);
+    text-align: center;
+    line-height: 2rem;
+  }
+
+  .return_top {
+    position: fixed;
+    bottom: 3rem;
+    right: 1rem;
+
+    .back_top_svg {
+      @include wh(2rem, 2rem);
+    }
+  }
+
+  .loading-enter-active,
+  .loading-leave-active {
+    transition: opacity 1s;
+  }
+
+  .loading-enter,
+  .loading-leave-active {
+    opacity: 0;
+  }
+
+</style>

components/tabbar.vue

+<template>
+  <mt-tabbar v-model="selected">
+    <mt-tab-item id="0">
+      <div @click="goPage('/')">
+        <div class="mint-tab-item-icon">
+          <svg 
+            v-if="selected==0" 
+            viewBox="0 0 22 22" 
+            width="100%" 
+            height="100%">
+            <path 
+              fill="#4aa5f0" 
+              fill-rule="evenodd" 
+              d="M16.822 17.089l.456.707c.212.33.14.778-.174 1.033a9.91 9.91 0 0 1-.767.555 9.817 9.817 0 0 1-7.473 1.395 9.867 9.867 0 0 1-6.265-4.334C-.383 11.822.927 5.618 5.52 2.616a9.81 9.81 0 0 1 7.475-1.394 9.866 9.866 0 0 1 6.264 4.334c.166.258.323.528.466.803.19.385.072.82-.262 1.039l-9.05 5.916a.783.783 0 0 1-1.086-.232l-.47-.73a1.668 1.668 0 0 1 .484-2.295l5.766-3.769a.286.286 0 0 0 .03-.455 6.576 6.576 0 0 0-7.821-.434 6.636 6.636 0 0 0-2.877 4.213 6.671 6.671 0 0 0 .926 5.026c1.99 3.085 6.104 3.968 9.17 1.969a1.65 1.65 0 0 1 2.288.482zm3.878-5.445c.56.863.314 2.02-.549 2.58l-.906.59a.786.786 0 0 1-1.086-.232l-1.177-1.812a.787.787 0 0 1 .23-1.086l1.813-1.176a.783.783 0 0 1 1.086.23l.589.906z"/>
+          </svg>
+          <svg 
+            v-if="selected!=0" 
+            viewBox="0 0 22 22" 
+            width="100%" 
+            height="100%">
+            <path 
+              fill="#818181" 
+              fill-rule="nonzero" 
+              d="M7.924 6.273A5.597 5.597 0 0 0 5.48 9.828a5.596 5.596 0 0 0 .787 4.242 5.646 5.646 0 0 0 7.793 1.66 2.188 2.188 0 0 1 3.02.638l.43.663c.377.58.247 1.358-.3 1.798a10 10 0 0 1-.771.555 9.93 9.93 0 0 1-7.523 1.395 9.937 9.937 0 0 1-6.306-4.334C-.393 11.82.926 5.618 5.55 2.615a9.935 9.935 0 0 1 7.523-1.393 9.937 9.937 0 0 1 6.781 5.148c.318.64.12 1.396-.467 1.777l-8.54 5.546c-.632.41-1.478.23-1.89-.401l-.443-.684a2.182 2.182 0 0 1 .641-3.016l5.011-3.255a5.612 5.612 0 0 0-6.242-.064zm6.813 10.507c-3.184 2.062-7.453 1.152-9.519-2.03a6.846 6.846 0 0 1-.96-5.182 6.847 6.847 0 0 1 2.986-4.344 6.869 6.869 0 0 1 8.13.46.892.892 0 0 1-.098 1.422l-5.44 3.534a.932.932 0 0 0-.274 1.287l.444.684a.117.117 0 0 0 .16.034l8.54-5.547c.05-.032.067-.095.035-.16a8.687 8.687 0 0 0-5.928-4.494 8.685 8.685 0 0 0-6.583 1.22c-4.044 2.627-5.198 8.056-2.572 12.1a8.686 8.686 0 0 0 5.517 3.792 8.68 8.68 0 0 0 6.583-1.22c.231-.15.458-.314.672-.483.047-.038.057-.102.032-.142l-.43-.662a.938.938 0 0 0-1.295-.269zm5.88-5.517c.714 1.099.4 2.571-.697 3.284l-.851.553a1.362 1.362 0 0 1-1.882-.401l-1.103-1.7a1.362 1.362 0 0 1 .4-1.882l1.699-1.102a1.357 1.357 0 0 1 1.883.399l.552.85zm-1.6-.168a.107.107 0 0 0-.07-.048.107.107 0 0 0-.083.016l-1.699 1.102a.112.112 0 0 0-.032.154l1.102 1.698c.021.032.056.05.095.05a.108.108 0 0 0 .06-.016l.849-.552c.519-.337.667-1.035.33-1.555l-.551-.849z"/>
+          </svg>
+        </div>
+        首页
+      </div>
+    </mt-tab-item>
+    <mt-tab-item id="1">
+      <div @click="goPage('/discover')">
+        <div class="mint-tab-item-icon">
+          <svg 
+            v-if="selected==1" 
+            viewBox="0 0 22 22" 
+            width="100%" 
+            height="100%">
+            <path 
+              fill="#4aa5f0" 
+              fill-rule="evenodd" 
+              d="M3.929 3.929c3.899-3.9 10.243-3.9 14.142 0 3.899 3.899 3.899 10.243 0 14.142-3.899 3.9-10.243 3.9-14.142 0-3.9-3.899-3.9-10.243 0-14.142zM14.639 7a.363.363 0 0 0-.146.03l-4.39 1.901c-.254.11-.493.264-.701.471a2.23 2.23 0 0 0-.476.712l-1.896 4.38a.363.363 0 0 0 .476.476l4.38-1.896a2.203 2.203 0 0 0 1.183-1.178l1.9-4.39A.363.363 0 0 0 14.64 7zM11 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+          </svg>
+          <svg 
+            v-if="selected!=1" 
+            viewBox="0 0 22 22" 
+            width="100%" 
+            height="100%">
+            <path 
+              fill="#818181" 
+              fill-rule="nonzero" 
+              d="M16.62 2.727a.75.75 0 0 1-.844 1.24 8.455 8.455 0 0 0-4.095-1.44 8.5 8.5 0 0 0-9.153 7.792 8.499 8.499 0 0 0 7.79 9.153 8.5 8.5 0 0 0 9.154-7.791 8.46 8.46 0 0 0-1.435-5.449.75.75 0 1 1 1.24-.842 9.96 9.96 0 0 1 1.69 6.411c-.442 5.505-5.264 9.609-10.768 9.166-5.505-.442-9.61-5.263-9.166-10.768C1.475 4.694 6.296.59 11.8 1.033c1.75.14 3.398.727 4.819 1.694zM14.638 7c.244 0 .44.254.331.506l-1.9 4.39c-.11.255-.264.494-.471.702-.21.21-.454.367-.712.476l-4.38 1.895a.363.363 0 0 1-.476-.476l1.895-4.38c.11-.258.266-.5.477-.711.207-.208.447-.362.7-.471l4.391-1.9A.367.367 0 0 1 14.638 7zM12.45 9.55l-1.751.757a.737.737 0 0 0-.237.156.753.753 0 0 0-.156.236l-.758 1.752 1.742-.753a.766.766 0 0 0 .247-.161.733.733 0 0 0 .154-.234l.76-1.754z"/>
+          </svg>
+        </div>
+        发现
+      </div>
+    </mt-tab-item>
+    <mt-tab-item id="2">
+      <div @click="goPage('/order')">
+        <div class="mint-tab-item-icon">
+          <svg 
+            v-if="selected==2" 
+            viewBox="0 0 22 22" 
+            width="100%" 
+            height="100%">
+            <path 
+              fill="#4aa5f0" 
+              fill-rule="evenodd" 
+              d="M2.75 1.5h16.5a.75.75 0 0 1 .75.75v11.5a6.758 6.758 0 0 1-6.75 6.75H2.75a.75.75 0 0 1-.75-.75V2.25a.75.75 0 0 1 .75-.75zm12 6.5a.75.75 0 0 0 0-1.5h-7.5a.75.75 0 0 0 0 1.5h7.5zm-3.002 5.003a.75.75 0 0 0 0-1.5H7.25a.75.75 0 0 0 0 1.5h4.498z"/>
+          </svg>
+          <svg 
+            v-if="selected!=2" 
+            viewBox="0 0 22 22" 
+            width="100%" 
+            height="100%">
+            <path 
+              fill="#818181" 
+              fill-rule="nonzero" 
+              d="M7.25 8a.75.75 0 0 1 0-1.5h7.5a.75.75 0 1 1 0 1.5h-7.5zm0 5.004a.75.75 0 1 1 0-1.5h4.498a.75.75 0 1 1 0 1.5H7.25zM3.5 3v16h9.75c2.9 0 5.25-2.35 5.25-5.25V5.748a.75.75 0 1 1 1.5 0v8.002a6.75 6.75 0 0 1-6.75 6.75H2.75a.75.75 0 0 1-.75-.75V2.25a.75.75 0 0 1 .75-.75h16.5a.75.75 0 1 1 0 1.5H3.5z"/>
+          </svg>
+        </div>
+        订单
+      </div>
+    </mt-tab-item>
+    <mt-tab-item id="3">
+      <div @click="goPage('/user')">
+        <div class="mint-tab-item-icon">
+          <svg 
+            v-if="selected==3" 
+            viewBox="0 0 22 22" 
+            width="100%" 
+            height="100%">
+            <path 
+              fill="#4aa5f0" 
+              fill-rule="evenodd" 
+              d="M11 1c2.757 0 5 2.243 5 5v1c0 2.757-2.243 5-5 5S6 9.757 6 7V6c0-2.757 2.243-5 5-5zm5.967 10.071A6.76 6.76 0 0 1 21 17.251v3a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75v-3a6.76 6.76 0 0 1 4.033-6.18.992.992 0 0 1 1.135.263A6.476 6.476 0 0 0 11 13.5c1.919 0 3.642-.84 4.832-2.166a.993.993 0 0 1 1.135-.263z"/>
+          </svg>
+          <svg 
+            v-if="selected!=3" 
+            viewBox="0 0 22 22" 
+            width="100%" 
+            height="100%">
+            <path 
+              fill="#818181" 
+              fill-rule="nonzero" 
+              d="M10.955 12H7.75a5.25 5.25 0 0 0-5.25 5.25v2.25h17v-2.25a5.244 5.244 0 0 0-2.626-4.548.75.75 0 0 1 .75-1.3l.183.11A6.745 6.745 0 0 1 21 17.25v3a.75.75 0 0 1-.75.75H1.75a.75.75 0 0 1-.75-.75v-3a6.75 6.75 0 0 1 6.436-6.743A4.984 4.984 0 0 1 6 7V6a5 5 0 0 1 10 0v1a5 5 0 0 1-5.045 5zM11 10.5A3.5 3.5 0 0 0 14.5 7V6a3.5 3.5 0 0 0-7 0v1a3.5 3.5 0 0 0 3.5 3.5z"/>
+          </svg>
+        </div>
+        我的
+      </div>
+    </mt-tab-item>
+  </mt-tabbar>
+</template>
+
+<script>
+  export default {
+    props: {
+      page: {
+        default: 0
+      }
+    },
+    data() {
+      return {
+        selected: 0
+      };
+    },
+    created() {
+      this.selected = this.page;
+    },
+    methods: {
+      goPage(url) {
+        this.$router.replace(url);
+      }
+    }
+  };
+
+</script>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/mixin";
+
+  .mint-tabbar>.mint-tab-item.is-selected {
+    background: #fafafa;
+  }
+
+  .mint-tab-item-icon {
+    @include wh(22px, 22px);
+  }
+
+  .mint-tabbar {
+    color: #818181;
+    position: fixed;
+  }
+
+  .mint-tabbar>.mint-tab-item.is-selected {
+    color: $primary;
+  }
+
+</style>

config/index.js

+export default {
+  IS_RELEASE: false, // true线上，false测试
+
+  BASE_URL: 'http://localhost:3000/api', // 测试
+
+  // BASE_URL: '//elm.caibowen.net/api', // 生产
+
+  // IMG_URL: 'http://localhost:9000/', // 测试
+
+  IMG_URL: 'https://easytuan.gitee.io/node-elm-api/public/', // 生产（使用码云Gitee Pages 服务）
+
+  HEADERS: {
+    'Content-Type': 'application/json;charset=UTF-8'
+  },
+
+  TIMEOUT: 12000, // api超时时间
+
+};

layouts/default.vue

+<template>
+  <div>
+    <nuxt/>
+    <svg-icon />
+  </div>
+</template>
+
+<script>
+import svgIcon from "../components/svg";
+export default {
+  components: {
+    svgIcon
+  }
+};
+</script>
+
+<style>
+html {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  word-spacing: 1px;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.button--green {
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #3b8070;
+  color: #3b8070;
+  text-decoration: none;
+  padding: 10px 30px;
+}
+
+.button--green:hover {
+  color: #fff;
+  background-color: #3b8070;
+}
+
+.button--grey {
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #35495e;
+  color: #35495e;
+  text-decoration: none;
+  padding: 10px 30px;
+  margin-left: 15px;
+}
+
+.button--grey:hover {
+  color: #fff;
+  background-color: #35495e;
+}
+</style>

layouts/error.vue

+<template>
+  <div class="error-page">
+    <div>
+      <h1 class="error-code">{{ error.statusCode }}</h1>
+      <div class="error-wrapper-message">
+        <h2 class="error-message">{{ error.message }}</h2>
+      </div>
+      <p 
+        v-if="error.statusCode === 404" 
+        class="link"><nuxt-link 
+          class="error-link" 
+          to="/">Back to the home page</nuxt-link></p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NuxtError",
+  props: ["error"],
+  head() {
+    return {
+      title: this.error.message || "An error occured"
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.error-page {
+  color: #000;
+  background: #fff;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  position: absolute;
+  font-family: "SF UI Text", "Helvetica Neue", "Lucida Grande";
+  text-align: center;
+  padding-top: 20%;
+}
+.error-code {
+  display: inline-block;
+  font-size: 30px;
+  font-weight: 500;
+  vertical-align: top;
+  border-right: 1px solid rgba(0, 0, 0, 0.298039);
+  margin: 0px 10px 0px 0px;
+  padding: 5px 10px;
+}
+.error-wrapper-message {
+  display: inline-block;
+  text-align: left;
+  line-height: 50px;
+  height: 50px;
+  vertical-align: middle;
+}
+.error-message {
+  font-size: 15px;
+  font-weight: normal;
+  margin: 0px;
+  padding: 0px;
+}
+.error-link {
+  color: #00bcd4;
+  font-weight: normal;
+  text-decoration: none;
+  font-size: 20px;
+}
+.link {
+  margin-top: 30px;
+}
+</style>

middleware/README.md

+# MIDDLEWARE
+
+This directory contains your Application Middleware.
+The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/routing#middleware
+
+**This directory is not required, you can delete it if you don't want to use it.**
+

nuxt.config.js

+module.exports = {
+  mode: 'spa',
+  head: {
+    title: '欣新房车—房车·让生活更美好-房车销售丨房车租赁丨房车旅游丨房车托管',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' },
+      { name: 'format-detection', content: 'telephone=no' },
+      { name: 'msapplication-tap-highlight', content: 'no' },
+      { name: 'apple-mobile-web-app-capable', content: 'yes' },
+      {name:'keywords', 'content': '欣新房车，房车旅游，房车，房车租赁，房车销售，房车价格，房车之家，房车经济，房车高峰论坛' },
+      { hid: 'description', name: 'description', content: '欣新房车是一家专业从事房车销售，房车租赁，房车旅游，房车托管及房车产业配套与服务的免费异地取车异地还车已在全国各地举办多届房车经济峰会的集团股份公司' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: 'https://mgmt.dfangche.com/xxfccn/image/1/app/5d9c62b7412efd926f70e0ed5efb19a.png' },
+    ],
+    script: [
+      { src: 'https://easytuan.gitee.io/node-elm-api/public/flexible.js' },
+    ],
+  },
+
+  loading: { color: '#3B8070' },
+
+  cache: true,
+
+  build: {
+    vendor: ['axios', 'mint-ui', 'js-cookie'],
+    extend (config, { isDev, isClient }) {
+      if (isDev && isClient) {
+        config.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /(node_modules)/
+        })
+      }
+    }
+  },
+
+  plugins: [
+    { src: '~plugins/mint-ui' },
+    { src: '~assets/styles/base.scss' },
+    { src: '~plugins/filters.js', srr: false }
+  ],
+}
+

package.json

+{
+  "name": "nuxt-elm",
+  "version": "2.0.0",
+  "description": "Nuxt.js project",
+  "author": "[easytuan] <[easytuan@foxmail.com]>",
+  "private": true,
+  "license": "GPL",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
+    "start": "nuxt build && cross-env NODE_ENV=production pm2 start server/index.js --node-args='--harmony' --name 'nuxt-elm'",
+    "stop": "pm2 stop server/index.js --name 'nuxt-elm'",
+    "restart": "nuxt build && cross-env NODE_ENV=production pm2 restart server/index.js --node-args='--harmony' --name 'nuxt-elm'",
+    "delete": "pm2 delete nuxt-elm",
+    "lint": "eslint --cache --fix --ext .js,.vue --ignore-path .gitignore .",
+    "generate": "nuxt generate",
+    "tep": "node template",
+    "precommit": "npm run lint"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "cross-env": "^5.2.0",
+    "express": "^4.16.3",
+    "express-http-proxy": "^1.4.0",
+    "js-cookie": "^2.2.0",
+    "js-md5": "^0.7.3",
+    "mint-ui": "^2.2.13",
+    "moment": "^2.22.2",
+    "nuxt": "^2.0.0",
+    "pm2": "^3.1.2",
+    "postcss-loader": "^3.0.0"
+  },
+  "devDependencies": {
+    "nodemon": "^1.11.0",
+    "babel-eslint": "^8.2.1",
+    "eslint": "^5.0.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-vue": "^4.0.0",
+    "less-loader": "^4.0.5",
+    "node-sass": "^4.5.3",
+    "postcss-loader": "^3.0.0",
+    "postcss-px2rem": "^0.3.0",
+    "sass-loader": "^6.0.5",
+    "sass-resources-loader": "^1.3.3",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2"
+  }
+}

pages/aboutXx.vue

+<template>
+  <div class="order-page">
+    <Head/>
+    <second-banner
+      :list = "bannerList"
+      :looptime="looptime"
+      :width="width"
+      :height="height"
+      :background="background"
+      :color="color"
+      class="mb-50"
+      @prev="prev"
+      @next="next"
+      @change="changeBanner"
+      @click="bannerClick"/>
+  </div>
+</template>
+
+<script>
+  import config from "~/config";
+  import Footer from "~/components/footer";
+  import Head from "~/components/head";
+  import axios from '../plugins/axios'
+  import SecondBanner from '~/components/secondBanner'
+  import {
+    mapGetters
+  } from "vuex";
+
+  export default {
+    components: {
+      Footer,
+      Head,
+      SecondBanner
+    },
+    data(){
+      return{};
+    },
+    computed: {
+      ...mapGetters(["userInfo"])
+    },
+    created() {
+    },
+    async asyncData() {
+      //车型banner 0：首页，1：旅游 2：营地 3：房车 4：活动 5：新闻 6：关于欣新
+      let tempBannerData = await axios.get( '/api/app/banner/app/unauth/findBannerlist?type=6&platform=1');
+      let banner = tempBannerData.data.data;
+      return { bannerList: banner}
+    },
+    methods: {
+      // 点击下一页回调
+      prev () {},
+      // 点击下一页回调
+      next () {},
+      // 鼠标移入状态点回调
+      changeBanner () {},
+      bannerClick () {},
+    },
+    head () {
+      return {
+        title: "关于欣新|欣新房车股份有限公司官网|欣新房车有限公司官网|东莞欣新房车股份有限公司【总部】|关于欣新APP"
+      }
+    },
+  };
+
+</script>
+
+<style lang="scss">
+  @import "../assets/styles/mixin";
+  .news-item{
+    margin: 10px 0;
+  }
+  .tour-home-r, .news-home-r{
+    width: 58%;
+  }
+  .tour-img-home, .news-home-img{
+    width: px2rem(300px);
+    height: px2rem(150px);
+  }
+  .order-page {
+    padding: px2rem(88px) 0 3px 0;
+
+    .no-data {
+      text-align: center;
+
+      .nodata {
+        width: px2rem(400px);
+        height: px2rem(400px);
+        margin: 15vh auto px2rem(10px) auto;
+      }
+
+      p {
+        color: #6a6a6a;
+        font-size: px2rem(32px);
+        margin-bottom: px2rem(15px);
+      }
+
+      .login {
+        width: px2rem(240px);
+        height: px2rem(80px);
+        background: #56d176;
+        border: none;
+        color: #fff;
+        font-size: px2rem(28px);
+        border-radius: 2px;
+      }
+    }
+  }
+
+</style>

pages/activity.vue

+<template>
+  <div class="order-page">
+    <Head/>
+    <second-banner
+      :list = "bannerList"
+      :looptime="looptime"
+      :width="width"
+      :height="height"
+      :background="background"
+      :color="color"
+      class="mb-50"
+      @prev="prev"
+      @next="next"
+      @change="changeBanner"
+      @click="bannerClick"/>
+    <div class="main-padding"> 共{{ totalCount }}个活动</div>
+    <ul
+      v-if="dataDetail.length"
+      id="scroll-area"
+      type="1"
+      style="padding-top: 0;"
+      class="main-padding">
+      <router-link
+        v-for="item in dataDetail"
+        :to="{ path: 'activityDetail', query:{id: item.id }}"
+        :key="item.id"
+        class="flex-jcb news-item">
+        <img
+          :src="item.banner"
+          :alt = "item.title"
+          class="tour-img-home">
+        <div class="tour-home-r">
+          <div class="ellipsis2">{{ item.title }}</div>
+          <div class="activity-time">{{ item.startTime | formatDate('yyyy-MM-dd hh:mm') }}</div>
+          <div>{{ item.endTime | formatDate('yyyy-MM-dd hh:mm') }}</div>
+        </div>
+      </router-link>
+    </ul>
+    <p
+      v-if="touchend"
+      class="empty_data">——没有更多了——</p>
+  </div>
+</template>
+
+<script>
+  import config from "~/config";
+  import Footer from "~/components/footer";
+  import Head from "~/components/head";
+  import axios from '../plugins/axios'
+  import SecondBanner from '~/components/secondBanner'
+  import {
+    mapGetters
+  } from "vuex";
+
+  export default {
+    components: {
+      Footer,
+      Head,
+      SecondBanner
+    },
+    data(){
+      return{
+        showBanner: !0,
+        looptime: 4000, // 循环时间
+        touchend: false,////没有更多数据
+        nodata: `${config.IMG_URL}nodata.png`,
+        dataType: [],
+        totalCount: "",
+        dataDetail: [],
+        width: 400,
+        height:200,
+        background: 'red',
+        color: '#fff',
+        fontSize: '70px',
+        listQuery: {
+          page: 1,
+          limit: 10
+        },
+        store: "",
+        dataNull:false,
+        tourList: [],
+        currentPage: 1,//当前加载页
+        preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
+      };
+    },
+    computed: {
+      ...mapGetters(["userInfo"])
+    },
+    created() {
+      // handleScroll为页面滚动的监听回调
+      window.addEventListener('scroll', this.handleScroll);
+      this.getAll();
+    },
+    async asyncData() {
+      //车型banner 0：首页，1：旅游 2：营地 3：房车 4：活动 5：新闻 6：关于欣新
+      let tempBannerData = await axios.get( '/api/app/banner/app/unauth/findBannerlist?type=4&platform=1');
+      let banner = tempBannerData.data.data;
+      return { bannerList: banner}
+    },
+    methods: {
+      handleScroll: function () {
+        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+        // 设备/屏幕高度
+        let scrollObj = document.getElementById("scroll-area"); // 滚动区域
+        if(scrollObj){
+          let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
+          //滚动条到底部的条件
+          if(document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight){
+            if (this.touchend) {
+              return;
+            }
+            //防止重复请求
+            if (this.preventRepeatReuqest) {
+              return;
+            }
+            this.preventRepeatReuqest = true;
+            this.listQuery.page = this.currentPage+1;
+            this.getAll();
+          }
+        }
+      },
+      getAll() {
+        let t = this;
+        axios.get('/api/uccn/summitActivity/app/unauth/list?page='+this.listQuery.page+'&limit='+this.listQuery.limit)
+          .then(function(response) {
+            t.totalCount = response.data.data.totalCount;
+            let list = response.data.data.data;
+            t.dataDetail = [...t.dataDetail, ...list];
+            t.currentPage = response.data.data.pageNum;
+            if (response.data.data.totalCount < t.listQuery.page*t.listQuery.limit) {
+              t.touchend = true;
+            }
+            t.preventRepeatReuqest = false;
+          });
+      },
+      // 点击下一页回调
+      prev () {},
+      // 点击下一页回调
+      next () {},
+      // 鼠标移入状态点回调
+      changeBanner () {},
+      bannerClick () {},
+    },
+    head () {
+      return {
+        title: "欣新活动|欣新沙龙|欣新高峰论坛|欣新论坛|欣新俱乐部|欣新展会|欣新活动直播链接|欣新活动APP"
+      }
+    },
+  };
+
+</script>
+
+<style lang="scss">
+  @import "../assets/styles/mixin";
+  .news-item{
+    margin: 10px 0;
+  }
+  .tour-home-r, .news-home-r{
+    width: 58%;
+  }
+  .tour-img-home, .news-home-img{
+    width: px2rem(300px);
+    height: px2rem(150px);
+  }
+  .order-page {
+    padding: px2rem(88px) 0 3px 0;
+
+    .no-data {
+      text-align: center;
+
+      .nodata {
+        width: px2rem(400px);
+        height: px2rem(400px);
+        margin: 15vh auto px2rem(10px) auto;
+      }
+
+      p {
+        color: #6a6a6a;
+        font-size: px2rem(32px);
+        margin-bottom: px2rem(15px);
+      }
+
+      .login {
+        width: px2rem(240px);
+        height: px2rem(80px);
+        background: #56d176;
+        border: none;
+        color: #fff;
+        font-size: px2rem(28px);
+        border-radius: 2px;
+      }
+    }
+  }
+
+</style>

pages/activityDetail/components/goods/cartcontrol.vue

+<template>
+  <div class="cartcontrol">
+    <svg
+      v-show="food.count>0"
+      class="inner"
+      fill="rgb(35, 149, 255)"
+      @click.stop.prevent="decreaseCart"><use xlink:href="#cart-minus"/></svg>
+    <div
+      v-show="food.count>0"
+      class="cart-count">{{ food.count }}</div>
+    <svg
+      width="24"
+      height="24"
+      fill="rgb(35, 149, 255)"
+      @click="addCart"><use xlink:href="#cart-add"/></svg>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+
+export default {
+  props: ['food'],
+  methods: {
+    addCart(event) {
+      if (!this.food.count) {
+        Vue.set(this.food, "count", 1);
+      } else {
+        this.food.count++;
+      }
+      this.$emit("add", event.target);
+    },
+    decreaseCart(event) {
+      if (this.food.count) {
+        this.food.count--;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.cartcontrol {
+  display: flex;
+  align-items: center;
+  .inner {
+    width: 24px;
+    height: 24px;
+  }
+  .cart-count {
+    display: inline-block;
+    vertical-align: top;
+    width: 25px;
+    text-align: center;
+    font-size: 15px;
+    color: #333;
+  }
+
+  .cart-add {
+    display: inline-block;
+    padding: 6px;
+    line-height: 24px;
+    font-size: 24px;
+    color: rgb(0, 160, 220);
+  }
+}
+</style>

pages/activityDetail/components/goods/index.vue

+<template>
+  <div class="goods-page">
+    <div class="menu-wrapper">
+      <ul>
+        <li
+          v-for="(item, index) in goods"
+          :key="index"
+          :class="{'current':currentIndex === index}"
+          class="menu-item"
+          @click="selectMenu(index,$event)">
+          <span class="text">
+            <!-- <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span> -->
+            {{ item.name }}
+          </span>
+        </li>
+      </ul>
+    </div>
+    <div class="foods-wrapper">
+      <ul>
+        <li
+          v-for="(item, index) in goods"
+          :key="index"
+          class="food-list food-list-hook">
+          <h1
+            :id="'a'+index"
+            class="title">{{ item.name }}</h1>
+          <ul>
+            <li
+              v-for="(food, index) in item.foods"
+              :key="index"
+              class="food-item border-1px">
+              <div class="icon">
+                <img :src="food.icon" >
+              </div>
+              <div class="content">
+                <h2 class="name">{{ food.name }}</h2>
+                <p class="desc">{{ food.description }}</p>
+                <div class="extra">
+                  <span class="count">月售{{ food.sellCount }}份</span><span>好评率{{ food.rating }}%</span>
+                </div>
+                <div class="price">
+                  <span class="now">￥<b>{{ food.price }}</b></span>
+                  <cartcontrol :food="food" />
+                </div>
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+    <shopcart
+      ref="shopcart"
+      :select-foods="selectFoods"
+      :delivery-price="seller.deliveryPrice"
+      :min-price="seller.minPrice"/>
+  </div>
+</template>
+
+<script>
+  import shopcart from "./shopcart";
+  import cartcontrol from "./cartcontrol";
+  import * as shoppingApi from "~/assets/services/shopping";
+
+  export default {
+    components: {
+      shopcart,
+      cartcontrol
+    },
+    props: {
+      seller: {
+        default: {}
+      }
+    },
+    data() {
+      return {
+        goods: [],
+        listHeight: [],
+        scrollY: 0,
+        classMap: ["decrease", "discount", "special", "invoice", "guarantee"],
+        currentIndex: 0,
+        isScroll: false
+      };
+    },
+    computed: {
+      selectFoods() {
+        let foods = [];
+        this.goods.forEach(good => {
+          good.foods.forEach(food => {
+            if (food.count) {
+              foods.push(food);
+            }
+          });
+        });
+        return foods;
+      }
+    },
+    created() {},
+    mounted() {
+      shoppingApi.goods().then(res => {
+        if (res.code === 0) {
+          this.goods = res.data;
+        }
+      });
+
+      //菜品滚动选择类目
+      document.querySelector(".foods-wrapper").addEventListener(
+        "scroll",
+        this.throttle(() => {
+          // 防止手动选择的时候误操作
+          if (this.isScroll) {
+            return;
+          }
+          this.goods.map((item, index) => {
+            const rect_top = document
+              .querySelector("#a" + index)
+              .getBoundingClientRect().top;
+            const container_top = document
+              .querySelector(".foods-wrapper")
+              .getBoundingClientRect().top;
+            if (
+              rect_top - container_top < 100 &&
+              rect_top - container_top > -100
+            ) {
+              this.currentIndex = index;
+            }
+          });
+        }, 50)
+      );
+    },
+    methods: {
+      selectMenu(index) {
+        if (index === this.currentIndex) {
+          return;
+        }
+        this.currentIndex = index;
+        this.animateScroll("#a" + index, ".foods-wrapper", 50);
+      },
+      // 平滑滚动方法
+      animateScroll(element, container, speed) {
+        this.isScroll = true;
+        let rect =
+          document.querySelector(element).getBoundingClientRect().top -
+          document.querySelector(container).getBoundingClientRect().top;
+        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
+        let top = rect + document.querySelector(container).scrollTop;
+        let currentTop = 0;
+        let requestId;
+        //采用requestAnimationFrame，平滑动画
+        const step = timestamp => {
+          if (currentTop <= top) {
+            document.querySelector(container).scrollTo(0, currentTop);
+            requestId = window.requestAnimationFrame(step);
+          } else {
+            window.cancelAnimationFrame(requestId);
+            this.isScroll = false;
+          }
+          currentTop += speed;
+        };
+        window.requestAnimationFrame(step);
+      },
+      // 函数防抖
+      throttle(method, delay) {
+        var timer = null;
+        return function () {
+          clearTimeout(timer);
+          timer = setTimeout(() => {
+            method.apply(this, arguments);
+          }, delay);
+        };
+      }
+    },
+  };
+
+</script>
+
+<style lang="scss">
+  @import "../../../../assets/styles/mixin";
+
+  .goods-page {
+    display: flex;
+    background: #fff;
+    width: 100%;
+
+    .menu-wrapper {
+      flex: 0 0 80px;
+      width: 80px;
+      height: calc(100vh - 38px);
+      overflow-x: hidden;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      background: #f8f8f8;
+
+      .menu-item {
+        display: table;
+        height: 54px;
+        padding: 0 12px;
+        line-height: 14px;
+
+        &.current {
+          position: relative;
+          margin-top: -1px;
+          z-index: 10;
+          background: #ffffff;
+
+          .text {
+            color: #333;
+          }
+        }
+
+        .icon {
+          display: inline-block;
+          vertical-align: middle;
+          width: 12px;
+          height: 12px;
+          margin-right: 2px;
+          background-size: 12px 12px;
+          background-repeat: no-repeat;
+
+          // &.decrease {
+          //   bg-image('decrease_3');
+          // }
+
+          // &.discount {
+          //   bg-image('discount_3');
+          // }
+
+          // &.guarantee {
+          //   bg-image('guarantee_3');
+          // }
+
+          // &.invoice {
+          //   bg-image('invoice_3');
+          // }
+
+          // &.special {
+          //   bg-image('special_3');
+          // }
+        }
+
+        .text {
+          display: table-cell;
+          width: 56px;
+          vertical-align: middle;
+          font-size: 12px;
+          position: relative;
+          color: #666;
+        }
+      }
+    }
+
+    .foods-wrapper {
+      width: calc(100vw - 80px);
+      height: calc(100vh - 38px);
+      overflow-x: hidden;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      padding-bottom: 60px;
+
+      .title {
+        padding-left: 14px;
+        height: 30px;
+        line-height: 30px;
+        font-size: 12px;
+        color: #666;
+      }
+
+      .food-item {
+        display: flex;
+        margin: 10px;
+        padding-bottom: 18px;
+        position: relative;
+
+        &:after {
+          display: block;
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          content: " ";
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+
+          &:after {
+            display: none;
+          }
+        }
+
+        .icon {
+          flex: 0 0 80px;
+          margin-right: 10px;
+        }
+
+        .content {
+          flex: 1;
+          position: relative;
+
+          .name {
+            margin: 2px 0 8px 0px;
+            height: 14px;
+            line-height: 14px;
+            font-size: 14px;
+            color: rgb(7, 17, 27);
+          }
+
+          .desc,
+          .extra {
+            line-height: 10px;
+            font-size: 12px;
+            color: rgb(147, 153, 159);
+            transform: scale(0.9) translateX(-6%);
+          }
+
+          .desc {
+            margin-bottom: 8px;
+            line-height: 12px;
+            max-width: px2rem(350px);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .extra {
+            .count {
+              margin-right: 12px;
+            }
+          }
+
+          .price {
+            width: 100%;
+            font-weight: 700;
+            position: absolute;
+            bottom: 0;
+            @include fj(space-between);
+
+            .now {
+              margin-right: 8px;
+              font-size: 14px;
+              color: rgb(255, 83, 57);
+            }
+
+            .old {
+              text-decoration: line-through;
+              font-size: 10px;
+              color: rgb(147, 153, 159);
+            }
+
+            b {
+              font-weight: normal;
+              font-size: 18px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+</style>

pages/activityDetail/components/header.vue

+<template>
+  <div class="shop-header">
+    <div class="head">
+      <nav :style="`background-image: url('${banner}');`">
+        <i
+          class="mintui mintui-back"
+          @click="$router.go(-1);"/>
+        <img
+          :src="seller.avatar"
+          class="shop-logo">
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script>
+  import config from "~/config";
+  export default {
+    props: {
+      seller: {
+        default: {}
+      }
+    },
+    computed: {
+      banner: function () {
+        return config.IMG_URL + this.seller.banner;
+      }
+    }
+  };
+
+</script>
+
+<style lang="scss">
+  @import "../../../assets/styles/mixin";
+
+  .shop-header {
+    background: #fff;
+
+    .head {
+      height: px2rem(200px);
+
+      nav {
+        height: px2rem(200px);
+        background-position: 50%;
+        background-size: cover;
+        background-repeat: no-repeat;
+        padding: px2rem(10px);
+        position: relative;
+
+        .mintui-back {
+          font-size: px2rem(46px);
+          color: #fff;
+        }
+
+        .shop-logo {
+          width: px2rem(150px);
+          height: px2rem(150px);
+          position: absolute;
+          bottom: -10px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+
+    .content {
+      font-size: px2rem(24px);
+      margin-top: px2rem(50px);
+      text-align: center;
+
+      h2 {
+        font-size: px2rem(40px);
+      }
+
+      .info {
+        color: #666;
+
+        span {
+          margin: 0 px2rem(10px);
+        }
+      }
+    }
+
+    .foot {
+      padding: 0 px2rem(70px);
+      margin-top: 10px;
+      font-size: px2rem(24px);
+
+      .mint-badge {
+        transform: scale(0.8) translateX(-10%);
+        border-radius: 1px;
+      }
+
+      .announcement {
+        display: inline-block;
+        width: 100%;
+        color: #666;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+</style>

pages/activityDetail/components/seller.vue

+<template>
+  <div class="seller-page">
+    <div class="logo">
+      <img 
+        :src="banner" 
+        alt="">
+    </div>
+    <h2>{{ seller.name }}</h2>
+    <p>{{ seller.bulletin }}</p>
+    <a 
+      :href="seller.brandstory" 
+      class="brandstory">查看品牌故事</a>
+    <div class="placeholder"/>
+    <h2>配送信息</h2>
+    <p>由蜂鸟快送提供配送，约{{ seller.deliveryTime }}分钟送达，距离2.1km</p>
+    <p>配送费￥{{ seller.deliveryPrice }}</p>
+  </div>
+</template>
+
+<script>
+  import config from "~/config";
+  export default {
+    props: {
+      seller: {
+        default: {}
+      }
+    },
+    computed: {
+      banner: function () {
+        return config.IMG_URL + this.seller.banner;
+      }
+    }
+  };
+
+</script>
+
+<style lang="scss">
+  @import "../../../assets/styles/mixin";
+
+  .seller-page {
+    background: #fff;
+    padding-bottom: px2rem(30px);
+
+    .logo {
+      padding: px2rem(30px) px2rem(30px) 0 px2rem(30px);
+    }
+
+    h2 {
+      font-size: px2rem(32px);
+      margin-top: px2rem(40px);
+      padding: 0 px2rem(30px) px2rem(20px) px2rem(30px);
+    }
+
+    p {
+      padding: 0 px2rem(30px);
+      color: #666;
+      font-size: px2rem(26px);
+      line-height: 1.5;
+    }
+
+    .brandstory {
+      display: block;
+      line-height: px2rem(100px);
+      margin-top: px2rem(50px);
+      color: #666;
+      font-size: px2rem(28px);
+      text-align: center;
+    }
+
+    .placeholder {
+      height: px2rem(20px);
+      background: #f5f5f5;
+    }
+  }
+
+</style>

pages/campsiteDetail/components/goods/cartcontrol.vue

+<template>
+  <div class="cartcontrol">
+    <svg
+      v-show="food.count>0"
+      class="inner"
+      fill="rgb(35, 149, 255)"
+      @click.stop.prevent="decreaseCart"><use xlink:href="#cart-minus"/></svg>
+    <div
+      v-show="food.count>0"
+      class="cart-count">{{ food.count }}</div>
+    <svg
+      width="24"
+      height="24"
+      fill="rgb(35, 149, 255)"
+      @click="addCart"><use xlink:href="#cart-add"/></svg>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+
+export default {
+  props: ['food'],
+  methods: {
+    addCart(event) {
+      if (!this.food.count) {
+        Vue.set(this.food, "count", 1);
+      } else {
+        this.food.count++;
+      }
+      this.$emit("add", event.target);
+    },
+    decreaseCart(event) {
+      if (this.food.count) {
+        this.food.count--;
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.cartcontrol {
+  display: flex;
+  align-items: center;
+  .inner {
+    width: 24px;
+    height: 24px;
+  }
+  .cart-count {
+    display: inline-block;
+    vertical-align: top;
+    width: 25px;
+    text-align: center;
+    font-size: 15px;
+    color: #333;
+  }
+
+  .cart-add {
+    display: inline-block;
+    padding: 6px;
+    line-height: 24px;
+    font-size: 24px;
+    color: rgb(0, 160, 220);
+  }
+}
+</style>

plugins/axios.js

+import axios from 'axios'
+export default axios.create({
+  baseURL: "https://xxtest.upyuns.com"//"https://xxtest.upyuns.com","https://dev.dfangche.com"
+})

plugins/mint-ui.js

+import Vue from 'vue'
+import MintUI from 'mint-ui'
+import 'mint-ui/lib/style.css'
+
+Vue.use(MintUI)

static/robots.txt

+User-agent: *
+Disallow: /