init

.babelrc

+{
+  "presets": ["es2015", "stage-2"],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+}

.editorconfig

+root = true
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

+node_modules
+dist/index.js
+dist/authUseful.js
+dist/stroke.js
+dist/
+yqy/
+node_modules/
\ No newline at end of file

build/build.js

+// https://github.com/shelljs/shelljs
+require('shelljs/global')
+env.NODE_ENV = 'production'
+
+var path = require('path')
+var config = require('../config')
+var ora = require('ora')
+var webpack = require('webpack')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
+rm('-rf', assetsPath)
+mkdir('-p', assetsPath)
+cp('-R', 'static/*', assetsPath)
+
+webpack(webpackConfig, function(err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+        colors: true,
+        modules: false,
+        children: false,
+        chunks: false,
+        chunkModules: false
+    }) + '\n')
+})
\ No newline at end of file

build/dev-client.js

+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function(event) {
+	if (event.action === 'reload') {
+		window.location.reload()
+	}
+})
\ No newline at end of file

build/dev-server.js

+var config = require('../config')
+if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var opn = require('opn')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+    // Define HTTP proxies to your custom API backend
+    // https://github.com/chimurai/http-proxy-middleware
+
+var server = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+    publicPath: webpackConfig.output.publicPath,
+    stats: {
+        colors: true,
+        chunks: false
+    }
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler)
+    // force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function(compilation) {
+    compilation.plugin('html-webpack-plugin-after-emit', function(data, cb) {
+        hotMiddleware.publish({
+            action: 'reload'
+        })
+        cb()
+    })
+})
+
+var context = config.dev.context
+
+switch(process.env.NODE_ENV){
+    case 'local': var proxypath = 'http://localhost:8001'; break;
+    case 'online': var proxypath = 'http://yqy.cangdu.org'; break;
+    default:  var proxypath = config.dev.proxypath;
+}
+var options = {
+    target: proxypath,
+    changeOrigin: true,
+}
+if (context.length) {
+    server.use(proxyMiddleware(context, options))
+}
+
+// handle fallback for HTML5 history API
+server.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+server.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+server.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+server.use(staticPath, express.static('./static'))
+
+module.exports = server.listen(port, function(err) {
+    if (err) {
+        console.log(err)
+        return
+    }
+    var uri = 'http://localhost:' + port
+    console.log('Listening at ' + uri + '\n')
+
+    // when env is testing, don't need open it
+    if (process.env.NODE_ENV !== 'testing') {
+        opn(uri)
+    }
+})

build/utils.js

+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function(_path) {
+    var assetsSubDirectory = process.env.NODE_ENV === 'production' ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory
+    return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function(options) {
+    options = options || {}
+        // generate loader string to be used with extract text plugin
+    function generateLoaders(loaders) {
+        var sourceLoader = loaders.map(function(loader) {
+            var extraParamChar
+            if (/\?/.test(loader)) {
+                loader = loader.replace(/\?/, '-loader?')
+                extraParamChar = '&'
+            } else {
+                loader = loader + '-loader'
+                extraParamChar = '?'
+            }
+            return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
+        }).join('!')
+
+        // (which is the case during production build)
+        if (options.extract) {
+            return ExtractTextPlugin.extract('vue-style-loader', sourceLoader)
+        } else {
+            return ['vue-style-loader', sourceLoader].join('!')
+        }
+    }
+
+    // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+    return {
+        css: generateLoaders(['css']),
+        postcss: generateLoaders(['css']),
+        less: generateLoaders(['css', 'less']),
+        sass: generateLoaders(['css', 'sass?indentedSyntax']),
+        scss: generateLoaders(['css', 'sass']),
+        stylus: generateLoaders(['css', 'stylus']),
+        styl: generateLoaders(['css', 'stylus'])
+    }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function(options) {
+    var output = []
+    var loaders = exports.cssLoaders(options)
+    for (var extension in loaders) {
+        var loader = loaders[extension]
+        output.push({
+            test: new RegExp('\\.' + extension + '$'),
+            loader: loader
+        })
+    }
+    return output
+}
\ No newline at end of file

build/webpack.base.conf.js

+var path = require('path')
+var config = require('../config')
+var utils = require('./utils')
+var projectRoot = path.resolve(__dirname, '../')
+
+var env = process.env.NODE_ENV
+    // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
+    // various preprocessor loaders added to vue-loader at the end of this file
+var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
+var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
+var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
+
+
+module.exports = {
+    entry: {
+        app: './src/main.js'
+    },
+    output: {
+        path: config.build.assetsRoot,
+        publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
+        filename: '[name].js'
+    },
+    resolve: {
+        extensions: ['', '.js', '.vue', '.less', '.css', '.scss'],
+        fallback: [path.join(__dirname, '../node_modules')],
+        alias: {
+            'vue$': 'vue/dist/vue.common.js',
+            'src': path.resolve(__dirname, '../src'),
+            'assets': path.resolve(__dirname, '../src/assets'),
+            'components': path.resolve(__dirname, '../src/components'),
+            '@': path.resolve('src')
+        }
+    },
+    resolveLoader: {
+        fallback: [path.join(__dirname, '../node_modules')]
+    },
+    module: {
+        loaders: [{
+            test: /\.vue$/,
+            loader: 'vue'
+        }, {
+            test: /\.js$/,
+            loader: 'babel',
+            include: projectRoot,
+            exclude: /node_modules/
+        }, {
+            test: /\.json$/,
+            loader: 'json'
+        }, {
+            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+            loader: 'url',
+            query: {
+                limit: 10000,
+                name: utils.assetsPath('img/[name].[ext]')
+            }
+        }, {
+            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+            loader: 'url',
+            query: {
+                limit: 10000,
+                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+            }
+        }]
+    },
+    vue: {
+        loaders: utils.cssLoaders({
+            sourceMap: useCssSourceMap
+        }),
+        postcss: [
+            require('autoprefixer')({
+                browsers: ['last 10 versions']
+            })
+        ]
+    }
+}
\ No newline at end of file

build/webpack.dev.conf.js

+var config = require('../config')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var utils = require('./utils')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function(name) {
+    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+    module: {
+        loaders: utils.styleLoaders({
+            sourceMap: config.dev.cssSourceMap
+        })
+    },
+    // eval-source-map is faster for development
+    devtool: '#eval-source-map',
+    plugins: [
+        new webpack.DefinePlugin({
+            'process.env': config.dev.env
+        }),
+        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+        new webpack.optimize.OccurenceOrderPlugin(),
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NoErrorsPlugin(),
+        // https://github.com/ampedandwired/html-webpack-plugin
+        new HtmlWebpackPlugin({
+            filename: 'index.html',
+            template: 'index.html',
+            favicon: 'favicon.ico',
+            inject: true
+        })
+    ]
+})
\ No newline at end of file

build/webpack.prod.conf.js

+var path = require('path')
+var config = require('../config')
+var utils = require('./utils')
+var webpack = require('webpack')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var env = config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+    module: {
+        loaders: utils.styleLoaders({
+            sourceMap: config.build.productionSourceMap,
+            extract: true
+        })
+    },
+    //devtool: config.build.productionSourceMap ? '#source-map' : false,
+    output: {
+        path: config.build.assetsRoot,
+        filename: utils.assetsPath('js/[name].js'),
+        chunkFilename: utils.assetsPath('js/[name].[chunkhash].min.js')
+    },
+    vue: {
+        loaders: utils.cssLoaders({
+            sourceMap: config.build.productionSourceMap,
+            extract: true
+        })
+    },
+    plugins: [
+        // http://vuejs.github.io/vue-loader/en/workflow/production.html
+        new webpack.DefinePlugin({
+            'process.env': env
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        new webpack.optimize.OccurrenceOrderPlugin(),
+        // extract css into its own file
+        new ExtractTextPlugin(utils.assetsPath('css/[name].css')),
+        // generate dist index.html with correct asset hash for caching.
+        // you can customize output by editing /index.html
+        // see https://github.com/ampedandwired/html-webpack-plugin
+        new HtmlWebpackPlugin({
+            filename: config.build.index,
+            template: 'index.html',
+            inject: true,
+            // minify: {
+            //     removeComments: true,
+            //     collapseWhitespace: true,
+            //     removeAttributeQuotes: true
+            //         // more options:
+            //         // https://github.com/kangax/html-minifier#options-quick-reference
+            // },
+            // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+            chunksSortMode: 'dependency'
+        }),
+        // split vendor js into its own file
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'vendor',
+            minChunks: function(module, count) {
+                // any required modules inside node_modules are extracted to vendor
+                return (
+                    module.resource &&
+                    /\.js$/.test(module.resource) &&
+                    module.resource.indexOf(
+                        path.join(__dirname, '../node_modules')
+                    ) === 0
+                )
+            }
+        }),
+        // extract webpack runtime and module manifest to its own file in order to
+        // prevent vendor hash from being updated whenever app bundle is updated
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'manifest',
+            chunks: ['vendor']
+        })
+    ]
+})
+
+if (config.build.productionGzip) {
+    var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+    webpackConfig.plugins.push(
+        new CompressionWebpackPlugin({
+            asset: '[path].gz[query]',
+            algorithm: 'gzip',
+            test: new RegExp(
+                '\\.(' +
+                config.build.productionGzipExtensions.join('|') +
+                ')$'
+            ),
+            threshold: 10240,
+            minRatio: 0.8
+        })
+    )
+}
+
+module.exports = webpackConfig
\ No newline at end of file

config/index.js

+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+    build: {
+        env: {
+            NODE_ENV: '"production"'
+        },
+        index: path.resolve(__dirname, '../yqy/index.html'),
+        assetsRoot: path.resolve(__dirname, '../yqy'),
+        assetsSubDirectory: './static',
+        assetsPublicPath: '/yqy/',
+        productionSourceMap: true,
+        // Surge or Netlify already gzip all static assets for you.
+        // Before setting to `true`, make sure to:
+        // npm install --save-dev compression-webpack-plugin
+        productionGzip: false,
+        productionGzipExtensions: ['js', 'css']
+    },
+    dev: {
+        env: {
+            NODE_ENV: '"development"'
+        },
+        port: 8000,
+        assetsSubDirectory: 'static',
+        assetsPublicPath: '/',
+        
+        proxyTable: {
+            '/': {
+                // target: 'http://localhost:8084',
+                // target: 'http://10.64.1.93:8084',
+                // target: 'http://10.64.1.179:8084',
+                // target: 'http://10.64.1.227:8084',
+                // target: 'http://172.31.100.141:8084',
+                // target: 'http://192.168.10.58:8084',
+                // target: 'http://192.168.80.44:9000',
+
+                target: 'http://test1-sc.yunqueyi.com/',
+                // target: 'http://test1-api.yunqueyi.com',
+                changeOrigin: true
+            }
+        },
+
+        context: [ //代理路径
+            // '/shopping',
+            // '/ugc',
+            // '/v1',
+            // '/v2',
+            // '/v3',
+            // '/v4',
+            // '/bos',
+            // '/member',
+            // '/promotion',
+            // '/eus',
+            // '/payapi',
+            // '/img',
+            '/exams'
+        ],
+        proxypath: 'http://test1-sc.yunqueyi.com',
+        // proxypath: 'http://test1-api.yunqueyi.com',
+        // proxypath: 'http://cangdu.org:8001',
+        // CSS Sourcemaps off by default because relative paths are "buggy"
+        // with this option, according to the CSS-Loader README
+        // (https://github.com/webpack/css-loader#sourcemaps)
+        // In our experience, they generally work as expected,
+        // just be aware of this issue when enabling this option.
+        cssSourceMap: false
+    }
+}
\ No newline at end of file

index.html

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
+    <meta name="screen-orientation" content="portrait"/>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="full-screen" content="yes">
+    <meta name="x5-fullscreen" content="true">
+    <title>云鹊·医</title>
+  </head>
+  <body>
+    <div id="app">
+    	<router-view></router-view>
+    </div>
+  </body>
+</html>

package.json

+{
+  "name": "yqy",
+  "version": "2.0.1",
+  "description": "vue2-yqy",
+  "author": "cangdu <1264889788@qq.com>",
+  "private": true,
+  "license": "GPL",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=online node build/dev-server.js",
+    "local": "cross-env NODE_ENV=local node build/dev-server.js",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "0.16.2",
+    "better-scroll": "^0.1.15",
+    "fastclick": "^1.0.6",
+    "iscroll": "^5.2.0",
+    "js-cookie": "^2.2.0",
+    "mint-ui": "^2.2.13",
+    "showdown": "^1.6.4",
+    "vue": "^2.1.0",
+    "vue-router": "^2.1.1",
+    "vuex": "^2.0.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.4.0",
+    "autoprefixer-loader": "^3.2.0",
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-plugin-transform-runtime": "^6.0.0",
+    "babel-preset-es2015": "^6.0.0",
+    "babel-preset-stage-2": "^6.0.0",
+    "babel-register": "^6.0.0",
+    "babel-runtime": "^6.23.0",
+    "chalk": "^1.1.3",
+    "connect-history-api-fallback": "^1.1.0",
+    "cross-env": "^5.0.0",
+    "css-loader": "^0.25.0",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.13.3",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
+    "function-bind": "^1.0.2",
+    "html-webpack-plugin": "^2.8.1",
+    "http-proxy-middleware": "^0.17.2",
+    "json-loader": "^0.5.4",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
+    "node-gyp": "^3.4.0",
+    "node-sass": "^4.9.2",
+    "opn": "^4.0.2",
+    "ora": "^0.3.0",
+    "sass": "^0.5.0",
+    "sass-loader": "^4.1.1",
+    "scss": "^0.2.4",
+    "scss-loader": "0.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.4",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "vue-loader": "^10.0.0",
+    "vue-style-loader": "^1.0.0",
+    "vue-template-compiler": "^2.1.0",
+    "webpack": "^1.13.2",
+    "webpack-dev-middleware": "^1.8.3",
+    "webpack-dev-server": "^1.16.2",
+    "webpack-hot-middleware": "^2.12.2",
+    "webpack-merge": "^0.14.1"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  }
+}

src/App.vue

+<template>
+	<div>
+		<transition name="router-fade" mode="out-in">
+			<keep-alive>
+			    <router-view v-if="$route.meta.keepAlive"></router-view>
+			</keep-alive>
+    	</transition>
+    	<transition name="router-fade" mode="out-in">
+			<router-view v-if="!$route.meta.keepAlive"></router-view>
+		</transition>
+		<svg-icon></svg-icon>	
+    </div>
+</template>
+
+<script>
+	import svgIcon from './components/common/svg';
+  	export default {
+    	components:{
+            svgIcon
+        },
+  	}
+
+</script>
+
+<style lang="scss">
+  	@import './style/common';
+	.router-fade-enter-active, .router-fade-leave-active {
+	  	transition: opacity .3s;
+	}
+	.router-fade-enter, .router-fade-leave-active {
+	  	opacity: 0;
+	}
+</style>

src/components/common/alertTip.vue

+ <template>
+    <div class="alet_container">
+	    <section class="tip_text_container">
+            <div class="tip_icon">
+                <span></span>
+                <span></span>
+            </div>
+            <p class="tip_text">{{alertText}}</p>
+            <div class="confrim" @click="closeTip">确认</div>
+        </section>
+    </div>
+</template>
+
+<script>
+    export default {
+    	data(){
+            return{
+                positionY: 0,
+                timer: null,
+            }
+        },
+        mounted(){
+      
+        },
+        props: ['alertText'],
+        methods: {
+            closeTip(){
+                this.$emit('closeTip')
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '../../style/mixin';
+	@keyframes tipMove{
+       0%   { transform: scale(1) }
+       35%  { transform: scale(.8) }
+       70%  { transform: scale(1.1) }
+       100% { transform: scale(1) }
+    }
+    .alet_container{
+    	position: fixed;
+    	top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 200;
+    }
+    .tip_text_container{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -6rem;
+        margin-left: -6rem;
+        width: 12rem;
+        animation: tipMove .4s ;
+        background-color: rgba(255,255,255,1);
+        border: 1px;
+        padding-top: .6rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        border: 1px;
+        border-radius: 0.25rem;
+        .tip_icon{
+            @include wh(3rem, 3rem);
+            border: 0.15rem solid #f8cb86;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            span:nth-of-type(1){
+                @include wh(.12rem, 1.5rem);
+                background-color: #f8cb86;
+            }
+            span:nth-of-type(2){
+                @include wh(.2rem, .2rem);
+                border: 1px;
+                border-radius: 50%;
+                margin-top: .2rem;
+                background-color: #f8cb86;
+            }
+        }
+        .tip_text{
+            @include sc(.7rem, #333);
+            line-height: .9rem;
+            text-align: center;
+            margin-top: .8rem;
+            padding: 0 .4rem;
+        }
+        .confrim{
+            @include sc(.8rem, #fff);
+            font-weight: bold;
+            margin-top: .8rem;
+            background-color: #4cd964;
+            width: 100%;
+            text-align: center;
+            line-height: 1.8rem;
+            border: 1px;
+            border-bottom-left-radius: 0.25rem;
+            border-bottom-right-radius: 0.25rem;
+        }
+    }
+    
+</style>

src/components/common/buyCart.vue

+ <template>
+    <section class="cart_module">
+        <section v-if="!foods.specifications.length" class="cart_button">
+            <transition name="showReduce">
+                <span @click="removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock)" v-if="foodNum">
+                    <svg>
+                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
+                    </svg>
+                </span>
+            </transition>
+            <transition name="fade">
+                <span class="cart_num" v-if="foodNum">{{foodNum}}</span>
+            </transition>
+            <svg class="add_icon" @touchstart="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
+            </svg>
+        </section>
+        <section v-else class="choose_specification">
+            <section class="choose_icon_container">
+                <transition name="showReduce">
+                    <svg class="specs_reduce_icon" v-if="foodNum" @click="showReduceTip">
+                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
+                    </svg>
+                </transition>
+                <transition name="fade">
+                    <span class="cart_num" v-if="foodNum">{{foodNum}}</span>
+                </transition>
+                <span class="show_chooselist" @click="showChooseList(foods)">选规格</span>
+            </section>
+        </section>
+    </section>
+</template>
+
+<script>
+    import {mapState, mapMutations} from 'vuex'
+    export default {
+    	data(){
+            return{
+               showMoveDot: [], //控制下落的小圆点显示隐藏
+            }
+        },
+        mounted(){
+            
+        },
+        computed: {
+            ...mapState([
+                'cartList'
+            ]),
+            /**
+             * 监听cartList变化，更新当前商铺的购物车信息shopCart，同时返回一个新的对象
+             */
+            shopCart: function (){
+                return Object.assign({},this.cartList[this.shopId]);
+            },
+            //shopCart变化的时候重新计算当前商品的数量
+            foodNum: function (){
+                let category_id = this.foods.category_id;
+                let item_id = this.foods.item_id;
+                if (this.shopCart&&this.shopCart[category_id]&&this.shopCart[category_id][item_id]) {
+                    let num = 0;
+                    Object.values(this.shopCart[category_id][item_id]).forEach((item,index) => {
+                        num += item.num;
+                    })
+                    return num;
+                }else {
+                    return 0;
+                }
+            },
+        },
+        props:['foods', 'shopId'],
+        methods: {
+            ...mapMutations([
+                'ADD_CART','REDUCE_CART',
+            ]),
+            //移出购物车
+            removeOutCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock){
+                if (this.foodNum > 0) {
+                    this.REDUCE_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
+                }
+            },
+            //加入购物车，计算按钮位置。
+            addToCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock, event){
+                this.ADD_CART({shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock});
+                let elLeft = event.target.getBoundingClientRect().left;
+                let elBottom = event.target.getBoundingClientRect().bottom;
+                this.showMoveDot.push(true);
+                this.$emit('showMoveDot', this.showMoveDot, elLeft, elBottom);
+
+            },
+            //显示规格列表
+            showChooseList(foodScroll){
+                this.$emit('showChooseList', foodScroll)
+            },
+            //点击多规格商品的减按钮，弹出提示
+            showReduceTip(){
+                this.$emit('showReduceTip')
+            },
+            
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '../../style/mixin';
+	.cart_module{
+        .add_icon{
+            position: relative;
+            z-index: 999;
+        }
+        .cart_button{
+            display: flex;
+            align-items: center;
+        }
+        svg{
+            @include wh(.9rem, .9rem);
+            fill: #3190e8;
+        }
+        .specs_reduce_icon{
+            fill: #999;
+        }
+        .cart_num{
+            @include sc(.65rem, #666);
+            min-width: 1rem;
+            text-align: center;
+            font-family: Helvetica Neue,Tahoma;
+        }
+        .choose_specification{
+            .choose_icon_container{
+                display: flex;
+                align-items: center;
+                .show_chooselist{
+                    display: block;
+                    @include sc(.55rem, #fff);
+                    padding: .1rem .2rem;
+                    background-color: $blue;
+                    border-radius: 0.2rem;
+                    border: 1px solid $blue;
+                }
+            }
+        }
+    }
+    .showReduce-enter-active, .showReduce-leave-active {
+        transition: all .3s ease-out;
+    }
+    .showReduce-enter, .showReduce-leave-active {
+        opacity: 0;
+        transform: translateX(1rem);
+    }
+    .fade-enter-active, .fade-leave-active {
+        transition: all .3s;
+    }
+    .fade-enter, .fade-leave-active {
+        opacity: 0;
+    }
+    .fadeBounce-enter-active, .fadeBounce-leave-active {
+        transition: all .3s;
+    }
+    .fadeBounce-enter, .fadeBounce-leave-active {
+        opacity: 0;
+        transform: scale(.7);
+    }
+    
+</style>
+

src/components/common/computeTime.vue

+ <template>
+    <div class="page">
+        <span class="rem_time" style="color: orange;border-width: 1px;border-style: solid;border-color: orange;" @click="gotoPay">
+	       {{remaining}}
+        </span>
+        <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>  
+    </div>
+</template>
+
+<script>
+    import alertTip from 'src/components/common/alertTip'
+
+    export default {
+    	data(){
+            return{
+                countNum: 900,
+                showAlert: false,
+                alertText: null,
+            }
+        },
+        mounted(){
+            this.countNum -= this.numTime;
+            this.remainingTime();
+        },
+        props: ['time'],
+        components: {
+            alertTip,
+        },
+        methods: {
+            closeTip(){
+                this.$emit('closeTip')
+            },
+            //计算时间
+            remainingTime(){
+                clearInterval(this.timer);
+                this.timer = setInterval(() => {
+                    this.countNum --;
+                    if (this.countNum == 0) {
+                        clearInterval(this.timer);
+                        this.showAlert = true;
+                        this.alertText = '支付超时';
+                    }
+                }, 1000);
+            },
+            gotoPay(){
+                this.showAlert = true;
+                this.alertText = '暂不开放支付接口';
+            }
+        },
+        computed: {
+            //转换时间成分秒
+            remaining: function (){
+                let minute = parseInt(this.countNum/60);
+                let second = parseInt(this.countNum%60);
+                if (minute < 10) {
+                    minute = '0' + minute;
+                }
+                if (second < 10) {
+                    second = '0' + second;
+                }
+                return '去支付(还剩' + minute + '分' + second + '秒)';
+            },
+            //订单返回时间秒分分别处理
+            numTime: function (){
+                if (this.time.toString().indexOf('分钟') !== -1) {
+                    return parseInt(this.time)*60;
+                }else{
+                    return parseInt(this.time);
+                }
+            }
+        },
+
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import 'src/style/mixin';
+	.page{
+        display: inline-block;
+        .rem_time{
+            @include sc(.55rem, orange);
+            padding: .1rem .2rem;
+            border-radius: .15rem;
+        }
+    }
+</style>

src/components/common/loading.vue

+ <template>
+	<div class="loading_container">
+	    <div class="load_img" :style="{backgroundPositionY: -(positionY%7)*2.5 + 'rem'}">
+	    </div>
+    	<svg class="load_ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
+			<ellipse cx="26" cy="10" rx="26" ry="10" style="fill:#ddd;stroke:none;"></ellipse>
+		</svg>
+	</div>
+</template>
+
+<script>
+    export default {
+    	data(){
+            return{
+                positionY: 0,
+                timer: null,
+            }
+        },
+        mounted(){
+        	this.timer = setInterval(() => {
+        		this.positionY ++;
+        	}, 600)
+        },
+        beforeDestroy(){
+        	clearInterval(this.timer);
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '../../style/mixin';
+	@keyframes load{
+		0%   {transform: translateY(0px);}
+		50%  {transform: translateY(-50px);}
+		100% {transform: translateY(0px);}
+	}
+	@keyframes ellipse{
+		0%   {transform: scale(1);}
+		50%  {transform: scale(0.3);}
+		100% {transform: scale(1);}
+	}
+    .loading_container{
+    	position: fixed;
+    	top: 50%;
+    	left: 50%;
+    	transform: translate(-50%, -50%);
+    	@include wh(2.5rem, 2.5rem);
+    }
+    .load_img{
+    	@include wh(100%, 100%);
+    	background: url(../../images/icon_loading.png) no-repeat 0 0;
+    	background-size: 2.5rem auto;
+    	transform: translateY(0px);
+    	animation: load .6s infinite ease-in-out;
+    	position: relative;
+    	z-index: 11;
+    }
+	.load_ellipse{
+		position: absolute;
+		@include wh(2.6rem, 2rem);
+		top: 2.2rem;
+        left: 0.2rem;
+		z-index: 10;
+		animation: ellipse .6s infinite ease-in-out;
+	}
+</style>

src/components/common/mixin.js

+import { getStyle } from '../../config/mUtils'
+import { imgBaseUrl, localapi, proapi } from '../../config/env'
+
+export const loadMore = {
+	directives: {
+		'load-more': {
+			bind: (el, binding) => {
+				let windowHeight = window.screen.height;
+				let height;
+				let setTop;
+				let paddingBottom;
+				let marginBottom;
+				let requestFram;
+				let oldScrollTop;
+				let scrollEl;
+				let heightEl;
+				let scrollType = el.attributes.type && el.attributes.type.value;
+				let scrollReduce = 2;
+				if (scrollType == 2) {
+					scrollEl = el;
+					heightEl = el.children[0];
+				} else {
+					scrollEl = document.body;
+					heightEl = el;
+				}
+
+				el.addEventListener('touchstart', () => {
+					height = heightEl.clientHeight;
+					if (scrollType == 2) {
+						height = height
+					}
+					setTop = el.offsetTop;
+					paddingBottom = getStyle(el, 'paddingBottom');
+					marginBottom = getStyle(el, 'marginBottom');
+				}, false)
+
+				el.addEventListener('touchmove', () => {
+					loadMore();
+				}, false)
+
+				el.addEventListener('touchend', () => {
+					oldScrollTop = scrollEl.scrollTop;
+					moveEnd();
+				}, false)
+
+				const moveEnd = () => {
+					requestFram = requestAnimationFrame(() => {
+						if (scrollEl.scrollTop != oldScrollTop) {
+							oldScrollTop = scrollEl.scrollTop;
+							moveEnd()
+						} else {
+							cancelAnimationFrame(requestFram);
+							height = heightEl.clientHeight;
+							loadMore();
+						}
+					})
+				}
+
+				const loadMore = () => {
+					if (scrollEl.scrollTop + windowHeight >= height + setTop + paddingBottom + marginBottom - scrollReduce) {
+						binding.value();
+					}
+				}
+			}
+		}
+	}
+};
+
+export const getImgPath = {
+	methods: {
+		//传递过来的图片地址需要处理后才能正常使用
+		getImgPath(path) {
+			let suffix;
+			if (!path) {
+				return '//yqy.cangdu.org/img/default.jpg'
+			}
+			if (path.indexOf('jpeg') !== -1) {
+				suffix = '.jpeg'
+			} else {
+				suffix = '.png'
+			}
+			let url = '/' + path.substr(0, 1) + '/' + path.substr(1, 2) + '/' + path.substr(3) + suffix;
+			return 'https://fuss10.elemecdn.com' + url
+		},
+	}
+
+}
\ No newline at end of file

src/components/common/ratingStar.vue

+ <template>
+	<div class="rating_container">
+        <section class="star_container">
+            <svg class="grey_fill" v-for="num in 5" :key="num">
+                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
+            </svg>
+        </section>
+        <div :style="'width:' + rating*2/5 + 'rem'" class="star_overflow">
+            <section class="star_container" >
+                <svg  class="orange_fill" v-for="num in 5" :key="num">
+                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#star"></use>
+                </svg>
+            </section>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+    	data(){
+            return{
+               
+            }
+        },
+        mounted(){
+        	
+        },
+        props:['rating'],
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '../../style/mixin';
+	.rating_container{
+        position: relative;
+        top: .2rem;
+        @include wh(2rem, .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: #ff9a0d;
+            }
+        }
+    }
+</style>

src/components/common/shoplist.vue

+<template>
+	<div class="shoplist_container">
+		<ul v-load-more="loaderMore" v-if="shopListArr.length" type="1">
+			<router-link :to="{path: 'shop', query:{geohash, id: item.id}}" v-for="item in shopListArr" tag='li' :key="item.id" class="shop_li">
+				<section>
+					<img :src="imgBaseUrl + item.image_path" class="shop_img">
+				</section>
+				<hgroup class="shop_right">
+					<header class="shop_detail_header">
+						<h4 :class="item.is_premium? 'premium': ''" class="" class="shop_title ellipsis">{{item.name}}</h4>
+						<ul class="shop_detail_ul">
+							<li v-for="item in item.supports" :key="item.id" class="supports">{{item.icon_name}}</li>
+						</ul>
+					</header>
+					<h5 class="rating_order_num">
+						<section class="rating_order_num_left">
+							<section class="rating_section">
+								<rating-star :rating='item.rating'></rating-star>
+								<span class="rating_num">{{item.rating}}</span>
+							</section>
+							<section class="order_section">
+								月售{{item.recent_order_num}}单
+							</section>
+						</section>
+						<section class="rating_order_num_right">
+							<span class="delivery_style delivery_left" v-if="item.delivery_mode">{{item.delivery_mode.text}}</span>
+							<span class="delivery_style delivery_right" v-if="zhunshi(item.supports)">准时达</span>
+						</section>
+					</h5>
+					<h5 class="fee_distance">
+						<p class="fee">
+							¥{{item.float_minimum_order_amount}}起送
+							<span class="segmentation">/</span>
+							{{item.piecewise_agent_fee.tips}}
+						</p>
+						<p class="distance_time">
+							<span v-if="Number(item.distance)">{{item.distance > 1000? (item.distance/1000).toFixed(2) + 'km': item.distance + 'm'}}
+								<span class="segmentation">/</span>
+							</span>
+							<span v-else>{{item.distance}}</span>
+							<span class="segmentation">/</span>
+							<span class="order_time">{{item.order_lead_time}}</span>
+						</p>
+					</h5>
+				</hgroup>
+			</router-link>
+		</ul>
+		<ul v-else class="animation_opactiy">
+			<li class="list_back_li" v-for="item in 10" :key="item">
+				<img src="../../images/shopback.svg" class="list_back_svg">
+			</li>
+		</ul>
+		<p v-if="touchend" class="empty_data">没有更多了</p>
+		<aside class="return_top" @click="backTop" v-if="showBackStatus">
+			<svg class="back_top_svg">
+				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#backtop"></use>
+			</svg>
+		</aside>
+		<div ref="abc" style="background-color: red;"></div>
+		<transition name="loading">
+			<loading v-show="showLoading"></loading>
+		</transition>
+	</div>
+</template>
+
+<script>
+
+import {mapState} from 'vuex'
+import {shopList} from 'src/service/getData'
+import {imgBaseUrl} from 'src/config/env'
+import {showBack, animate} from 'src/config/mUtils'
+import {loadMore, getImgPath} from './mixin'
+import loading from './loading'
+import ratingStar from './ratingStar'
+
+export default {
+	data(){
+		return {
+			offset: 0, // 批次加载店铺列表，每次加载20个 limit = 20
+			shopListArr:[], // 店铺列表数据
+			preventRepeatReuqest: false, //到达底部加载数据，防止重复加载
+			showBackStatus: false, //显示返回顶部按钮
+			showLoading: true, //显示加载动画
+			touchend: false, //没有更多数据
+			imgBaseUrl,
+		}
+	},
+	mounted(){
+		this.initData();
+	},
+	components: {
+		loading,
+		ratingStar,
+	},
+	props: ['restaurantCategoryId', 'restaurantCategoryIds', 'sortByType', 'deliveryMode', 'supportIds', 'confirmSelect', 'geohash'],
+	mixins: [loadMore, getImgPath],
+	computed: {
+		...mapState([
+			'latitude','longitude'
+		]),
+	},
+	updated(){
+		// console.log(this.supportIds, this.sortByType)
+	},
+	methods: {
+		async initData(){
+			//获取数据
+			let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
+			this.shopListArr = [...res];
+			if (res.length < 20) {
+				this.touchend = true;
+			}
+			this.hideLoading();
+			//开始监听scrollTop的值，达到一定程度后显示返回顶部按钮
+			showBack(status => {
+				this.showBackStatus = status;
+			});
+		},
+		//到达底部加载更多数据
+		async loaderMore(){
+			if (this.touchend) {
+				return
+			}
+			//防止重复请求
+			if (this.preventRepeatReuqest) {
+				return
+			}
+			this.showLoading = true;
+			this.preventRepeatReuqest = true;
+
+			//数据的定位加20位
+			this.offset += 20;
+			let res = await shopList(this.latitude, this.longitude, this.offset, this.restaurantCategoryId);
+			this.hideLoading();
+			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.showLoading = true;
+			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];
+		},
+		//开发环境与编译环境loading隐藏方式不同
+		hideLoading(){
+			this.showLoading = false;
+		},
+		zhunshi(supports){
+			let zhunStatus;
+			if ((supports instanceof Array) && supports.length) {
+ 				supports.forEach(item => {
+ 					if (item.icon_name === '准') {
+ 						zhunStatus = true;
+ 					}
+ 				})
+			}else{
+				zhunStatus = false;
+			}
+			return zhunStatus
+		},
+	},
+	watch: {
+		//监听父级传来的restaurantCategoryIds，当值发生变化的时候重新获取餐馆数据，作用于排序和筛选
+		restaurantCategoryIds: function (value){
+			this.listenPropChange();
+		},
+		//监听父级传来的排序方式
+		sortByType: function (value){
+			this.listenPropChange();
+		},
+		//监听父级的确认按钮是否被点击，并且返回一个自定义事件通知父级，已经接收到数据，此时父级才可以清除已选状态
+		confirmSelect: function (value){
+			this.listenPropChange();
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	@import 'src/style/mixin';
+	.shoplist_container{
+		background-color: #fff;
+		margin-bottom: 2rem;
+	}
+	.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: .01rem;
+				@include font(0.65rem, 0.65rem, 'PingFangSC-Regular');
+				font-weight: 700;
+			}
+			.premium::before{
+				content: '品牌';
+				display: inline-block;
+				font-size: 0.5rem;
+				line-height: .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(.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(.8);
+					margin-left: -0.2rem;
+					@include sc(0.4rem, #666);
+				}
+			}
+			.rating_order_num_right{
+				display: flex;
+				align-items: center;
+				transform: scale(.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(.9);
+				@include sc(0.5rem, #666);
+			}
+			.distance_time{
+				transform: scale(.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>

src/main.js

+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import routes from './router/router'
+import store from './store/'
+const mixins = require('@/utils/mixins');
+import '@/utils/rem'					// 引入自适应
+import '@/utils/yqyServerRegister'		// 移动端服务
+import FastClick from 'fastclick'
+import Logger from './plugins/logger' 	// 日志插件
+
+// 引入Mint
+import Mint from 'mint-ui'
+import 'mint-ui/lib/style.css'
+Vue.use(Mint)
+Vue.use(Logger, { prefix: new Date(), isDev: process.env.NODE_ENV === 'development', cLevel: 'debug' })
+
+if ('addEventListener' in document) {
+    document.addEventListener('DOMContentLoaded', function() {
+        FastClick.attach(document.body);
+    }, false);
+}
+
+Vue.use(VueRouter)
+const router = new VueRouter({
+	routes,
+	mode: 'hash',
+	strict: process.env.NODE_ENV !== 'production',
+	scrollBehavior (to, from, savedPosition) {
+	    if (savedPosition) {
+		    return savedPosition
+		} else {
+			if (from.meta.keepAlive) {
+				from.meta.savedPosition = document.body.scrollTop;
+			}
+		    return { x: 0, y: to.meta.savedPosition || 0 }
+		}
+	}
+})
+
+// 加入混合
+Vue.mixin({
+	...mixins
+})
+new Vue({
+	router,
+	store,
+}).$mount('#app')
+

src/plugins/logger.js

+/**
+ *  G-Logger
+ *  version 1.0.0
+ *  Author: Anndy Yang(Guang Jun)
+ *  description: 模拟log4j的日志插件（Vue插件，同时支持浏览器环境）
+ * 
+ *  log4j提供了4种日志级别和2个日志开关。 
+    官方网址: http://logging.apache.org/log4j/1.2/
+
+    DEBUG：输出调试信息；指出细粒度信息事件对调试应用程序是非常有帮助的。 
+    INFO： 输出提示信息；消息在粗粒度级别上突出强调应用程序的运行过程。 
+    WARN： 输出警告信息；表明会出现潜在错误的情形。 
+    ERROR：输出错误信息；指出虽然发生错误事件，但仍然不影响系统的继续运行。 
+    FATAL： 输出致命错误；指出每个严重的错误事件将会导致应用程序的退出。 
+    ALL level：打开所有日志记录开关；是最低等级的，用于打开所有日志记录。 
+    OFF level：关闭所有日志记录开关；是最高等级的，用于关闭所有日志记录。
+
+    按照范围从小到大排序：OFF level > FATAL > ERROR > WARN > INFO > DEBUG > ALL level；范围大的会包含范围小的。
+    例如日志设置为INFO级别，则FATAL、ERROR、WARN、INFO的日志开关都是打开的，而DEBUG的日志开关将是关闭的。
+
+    Log4j建议只使用四个级别，优先级从高到低分别是 ERROR、WARN、INFO、DEBUG。
+ */
+
+const gLogger = {}
+gLogger.install = function (Vue, options) {
+  if (gLogger.installed) return
+  let logger = {
+    isDev: true,
+    cLevel: 'debug',
+    prefix: 'gLogger Says'
+    // levels: ['off', 'fatal', 'error', 'warn', 'info', 'debug', 'all']
+  }
+  if (options) {
+    for (const key of Object.keys(options)) {
+        logger[key] = options[key]
+    }
+  }
+  logger.levels = ['off', 'fatal', 'error', 'warn', 'info', 'debug', 'all']
+  for (const level of logger.levels) {
+    logger[level] = function () {
+      if (!this.isDev || typeof console === 'undefined') return
+      let levelIndex = logger.levels.indexOf(level)
+      // 如果是OFF级别，则不输出日志
+      if (levelIndex === 0) return
+      let cLevelIndex = logger.levels.indexOf(logger.cLevel)
+      // 如果当前级别底，则不输出日志
+      if(cLevelIndex < levelIndex) return
+      let args = Array.from(arguments)
+      args.unshift(`[${this.prefix} :: ${level}]`.toUpperCase())
+      console.log(...args)
+    }
+  }
+  Vue.prototype.$log = logger
+  if (window) window.logger = logger
+}
+export default gLogger
\ No newline at end of file

src/router/router.js

+import App from '../App'
+
+const home = r => require.ensure([], () => r(require('../views/home/home')), 'home')
+
+export default [{
+    path: '/',
+    component: App, //顶层路由，对应index.html
+    children: [ //二级路由。对应App.vue
+        //地址为空时跳转home页面
+        {
+            path: '',
+            redirect: '/home'
+        },
+        //首页城市列表页
+        {
+            path: '/home',
+            component: home
+        },
+    ]
+}]

src/store/getters.js

+const getters = {
+  // sidebar: state => state.app.sidebar,
+  // token: state => state.user.token,
+  // avatar: state => state.user.avatar,
+}
+export default getters

src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+import common from './modules/common'
+import diagnosis from './modules/diagnosis'
+import gpRanking from './modules/gpRanking'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    common,
+    diagnosis,
+    gpRanking
+  },
+  getters
+})
+
+export default store

src/store/modules/common.js

+import router from '@/router/router'
+import { uniqueArray } from '@/utils'
+
+const common = {
+  state: {
+    homeTabs: [],
+    homeTabsActiveName: '',
+    comModObject: null
+  },
+  mutations: {
+    SET_HOME_TABS: (state, homeTabs) => {
+      state.homeTabs = homeTabs
+    },
+    SET_HOME_TABS_ACTIVE_NAME: (state, homeTabsActiveName) => {
+      state.homeTabsActiveName = homeTabsActiveName
+    },
+    SET_COMMON_OBJECT: (state, comModObject) => {
+      state.comModObject = comModObject
+    }
+  },
+  actions: {
+    setHomeTabs({ commit }, homeTabs) {
+      commit('SET_HOME_TABS', homeTabs)
+    },
+    setHomeTabsActiveName({ commit }, homeTabsActiveName) {
+      commit('SET_HOME_TABS_ACTIVE_NAME', homeTabsActiveName)
+    },
+    // 添加tab
+    addTabs({ commit, state }, tab) {
+      let homeTabs = state.homeTabs.slice()
+      if (homeTabs.length === 0) {
+        tab.closable = false
+      } else {
+        homeTabs[0].closable = false
+      }
+      homeTabs.push(tab)
+      homeTabs = uniqueArray(homeTabs, 'name')
+      commit('SET_HOME_TABS', homeTabs)
+      commit('SET_HOME_TABS_ACTIVE_NAME', tab.name)
+    },
+    // 删除tab(单个)
+    removeOneTab({ commit, state }, tabName) {
+      logger.warn(tabName)
+      const homeTabs = state.homeTabs.slice()
+      let name
+      for (let i = 0; i < homeTabs.length; i++) {
+        let item = homeTabs[i]
+        if (item.name === tabName) {
+          homeTabs.splice(i, 1)
+          item = homeTabs[i]
+          if (state.tabsActiveName === tabName) {
+            if (item) {
+              name = item.name
+            } else {
+              name = homeTabs[i - 1].name
+            }
+            commit('SET_HOME_TABS_ACTIVE_NAME', name)
+            router.push({ path: name })
+          }
+          break
+        }
+      }
+      commit('SET_HOME_TABS', homeTabs)
+    },
+
+    // 删除tabs(多个)
+    removeAllTabs({ commit, state }) {
+      const homeTabs = state.homeTabs.slice()
+      if (homeTabs.length === 0) {
+        return
+      }
+      const firstTab = [homeTabs.shift()]
+      commit('SET_HOME_TABS_ACTIVE_NAME', firstTab[0].name)
+      router.push({
+        path: firstTab[0].name
+      })
+      commit('SET_HOME_TABS', firstTab)
+    },
+
+    setCommonObjct({ commit, state }) {
+      commit('SET_COMMON_OBJECT', state.comModObject)
+    }
+  }
+}
+
+export default common

src/store/modules/diagnosis.js

+
+const diagnosis = {
+  state: {
+  },
+    
+  mutations: {
+    
+  },
+
+  actions: {
+    
+  }
+}
+
+export default diagnosis

src/store/modules/gpRanking.js

+const gpRankings = {
+  state: {
+    
+  },
+  mutations: {
+    
+  },
+  actions: {
+    
+  }
+}
+
+export default gpRankings

src/store/modules/yqyApp.js

+
+const yqyHome = {
+  state: {
+  },
+
+  mutations: {
+    
+  },
+
+  actions: {
+    
+  }
+}
+
+export default yqyHome

src/style/common.scss

+body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption, {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    font-style: normal;
+    text-decoration: none;
+    border: none;
+    color: #333;
+    font-weight: normal;
+    font-family: "Microsoft Yahei";
+    box-sizing: border-box;
+    -webkit-tap-highlight-color:transparent;
+    -webkit-font-smoothing: antialiased;
+    &:hover{
+        outline: none;
+    }
+}
+
+/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
+::-webkit-scrollbar  
+{  
+    width: 0px;  
+    height: 0px;  
+    background-color: #F5F5F5;  
+}  
+  
+/*定义滚动条轨道 内阴影+圆角*/  
+::-webkit-scrollbar-track  
+{  
+    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);  
+    border-radius: 10px;  
+    background-color: #F5F5F5;  
+}  
+  
+/*定义滑块 内阴影+圆角*/  
+::-webkit-scrollbar-thumb  
+{  
+    border-radius: 10px;  
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
+    background-color: #555;  
+}  
+
+input[type="button"], input[type="submit"], input[type="search"], input[type="reset"] {
+    -webkit-appearance: none;
+}
+
+textarea { -webkit-appearance: none;}   
+
+html,body{
+    height: 100%;
+    width: 100%;
+    background-color: #F5F5F5;
+}
+
+
+.clear:after{
+    content: '';
+    display: block;
+    clear: both;
+}
+
+.clear{
+    zoom:1;
+}
+
+.back_img{
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.margin{
+    margin: 0 auto;
+}
+
+.left{
+    float: left;
+}
+
+.right{
+    float: right;
+}
+
+.hide{
+    display: none;
+}
+
+.show{
+    display: block;
+}
+
+.ellipsis{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.paddingTop{
+    padding-top: 1.95rem;
+}
+
+@keyframes backOpacity{
+   0%   { opacity: 1 }
+   25%  { opacity: .5 }
+   50%  { opacity: 1 }
+   75%  { opacity: .5 }
+   100% { opacity: 1 }
+}
+
+.animation_opactiy{
+    animation: backOpacity 2s ease-in-out infinite;
+}
\ No newline at end of file

src/style/mixin.scss

+$blue: #3190e8;  
+$bc: #e4e4e4;
+$fc:#fff;
+
+// 背景图片地址和大小
+@mixin bis($url) { 
+	background-image: url($url);
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+
+@mixin borderRadius($radius) {
+    -webkit-border-radius: $radius;
+    -moz-border-radius: $radius;
+    -ms-border-radius: $radius;
+    -o-border-radius: $radius;
+    border-radius: $radius;
+}
+//定位全屏
+@mixin allcover{
+	position:absolute;
+	top:0;
+	right:0;
+}
+
+//定位上下左右居中
+@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: flex;
+	justify-content: $type;
+
+}
+
+@function px2rem($px){
+	$rem: 37.5px;
+	@return ($px / $rem) + rem;
+}
\ No newline at end of file

src/utils/fetch.js

+import axios from 'axios'
+import { Message, MessageBox } from 'element-ui'
+import store from '../store'
+import { getHostnameAndPort } from '../utils'
+// axios.defaults.withCredentials = true
+
+const service = axios.create({
+  // baseURL: process.env.BASE_API
+  timeout: 15000,
+  withCredentials: false
+})
+
+// request拦截器
+service.interceptors.request.use(config => {
+  // console.log('config: ', config, config.data.setEntry)
+  if (config.data && config.data.setEntry) {
+    config.headers['sysCode'] = config.data.sysCode || 10
+    config.headers['token'] = config.data.token || '625D128F3DBA486AABE7CBA9BDF90E69'
+    config.headers['deviceInfo'] = JSON.stringify({ "app_channel": "", "app_mac": "", "app_uuid": "", "app_version": "", "device_brand": "", "device_ip": "", "device_model": "", "device_net": "", "device_ops": "", "resolution_wh": "", "system_level": "", "device_type": '10' })
+  } 
+  return config
+}, error => {
+  logger.debug('service.interceptors.request: ', error)
+  Promise.reject(error)
+})
+
+// respone拦截器
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    /*  
+      baseUrl时，返回000000为成功
+      apiUrl时，返回200为成功
+    */    
+    if (res.code !== '000000' && response.respCode === 200) {
+      return Promise.reject('error')
+    } else {
+      return response.data
+    }
+  },
+  error => {
+    logger.error('err' + error)
+    return Promise.reject(error)
+  }
+)
+export default service

src/utils/filter.js

+import { formatTime } from './index'
+
+const vueFilter = {
+  // 通用状态过滤器
+  formatStatus: function(value) {
+    return !value ? '正常' : '停用'
+  }
+}
+
+export default vueFilter

src/utils/index.js

+/**
+ * Created by Anndy Yang on 18/03/18.
+ */
+
+Date.prototype.format = function(fmt) {
+  var o = {
+    'M+': this.getMonth() + 1,                 // 月份
+    'd+': this.getDate(),                    // 日
+    'h+': this.getHours(),                   // 小时
+    'm+': this.getMinutes(),                 // 分
+    's+': this.getSeconds(),                 // 秒
+    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
+    'S': this.getMilliseconds()             // 毫秒
+  }
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
+  }
+  for (var k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+    }
+  }
+  return fmt
+}
+
+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+  let date
+  if (typeof time === 'object') {
+    date = time
+  } else {
+    if (('' + time).length === 10) time = parseInt(time) * 1000
+    date = new Date(time)
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay()
+  }
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key]
+    if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
+    if (result.length > 0 && value < 10) {
+      value = '0' + value
+    }
+    return value || 0
+  })
+  return time_str
+}
+
+export function formatTime(time, option) {
+  time = +time * 1000
+  const d = new Date(time)
+  const now = Date.now()
+  const diff = (now - d) / 1000
+  let des = ''
+
+  if (diff < 30) {
+    des = '刚刚'
+  } else if (diff < 3600) { // less 1 hour
+    des = Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    des = Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    des = '1天前'
+  }
+  if (option) {
+    return parseTime(time, option)
+  } else {
+    if (des) {
+      return des + ' (' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ')'
+    } else {
+      return d.getMonth() + 1 + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
+    }
+  }
+}
+
+// 将树形结构任意两个key修改成对应的特定key
+// {id: '', name: ''} => {id: '', label: ''}
+export function convertTreeData(originData, orgId = 'id', orgLabel = 'name', targetId = 'id', targetLabel = 'label') {
+  const targetData = []
+  let targetObj = {}
+  for (let i = 0; i < originData.length; i++) {
+    targetObj = {}
+    targetObj[targetId] = originData[i][orgId]
+    targetObj[targetLabel] = originData[i][orgLabel]
+    targetData.push(targetObj)
+    if (originData[i].children && originData[i].children.length > 0) {
+      targetObj.children = convertTreeData(originData[i].children, orgId, orgLabel, targetId, targetLabel)
+    }
+  }
+  return targetData
+}
+
+/**
+ * JSON数组去重
+ * @param: [array] json Array
+ * @param: [string] 唯一的key名，根据此键名进行去重
+ */
+export function uniqueArray(array, key) {
+  const result = [array[0]]
+  for (let i = 1; i < array.length; i++) {
+    const item = array[i]
+    let repeat = false
+    for (let j = 0; j < result.length; j++) {
+      if (item[key] === result[j][key]) {
+        repeat = true
+        break
+      }
+    }
+    if (!repeat) {
+      result.push(item)
+    }
+  }
+  return result
+}
+
+export function resizeHeight(cMinusHeight = 152, iMinuxHeight = 210, refHeightId = 'sidebarWrapperId', 
+  containerHeightId = 'appContainerId', innerHeightId = 'elTableId'){
+  if (!p_getElm(refHeightId) || !p_getElm(containerHeightId) || !p_getElm(innerHeightId)) {
+    // window.onresize = null
+    logger.warn('No certain dom id!!!');
+  }
+  let containerHeight = p_getElm(refHeightId).getBoundingClientRect().height - 50
+  p_getElm(containerHeightId).style.height = containerHeight - cMinusHeight + 'px'
+  p_getElm(innerHeightId).style.height = containerHeight - iMinuxHeight + 'px'
+  if(p_getElm('elTableIdInner')){
+    p_getElm('elTableIdInner').style.height = containerHeight - iMinuxHeight + 'px' 
+  }
+  window.onresize = function() {
+    containerHeight = p_getElm(refHeightId).getBoundingClientRect().height - 50
+    p_getElm(containerHeightId).style.height = containerHeight - cMinusHeight + 'px'
+    p_getElm(innerHeightId).style.height = containerHeight - iMinuxHeight + 'px'
+    if (p_getElm('elTableIdInner')) {
+      p_getElm('elTableIdInner').style.height = containerHeight - iMinuxHeight + 'px'  
+    }
+  }
+}
+
+function p_getElm(elmId) {
+  return document.getElementById(elmId)
+}
+
+export function getHostnameAndPort() {
+  const NODE_ENV = process.env.NODE_ENV
+  if (NODE_ENV === 'production') {
+    return location.hostname + ':' + location.port
+  } else {
+    return '192.168.80.191:8080'
+  }
+}
+
+// test1地址
+const baseUrl = 'http://test1-sc.yunqueyi.com/'
+const apiUrl = 'http://test1-api.yunqueyi.com/'
+
+// // uat地址
+// const baseUrl = 'http://uat-sc.yunqueyi.com/'
+// const apiUrl = 'http://uat-api.yunqueyi.com/'
+
+// // pro地址
+// const baseUrl = 'http://sc.yunqueyi.com/'
+// const apiUrl = 'http://api.yunqueyi.com/'
+
+
+// 为每个URL添加应用校验密钥
+export function getBaseUrl(url) {
+  return baseUrl + url
+}
+
+export function getApiUrl(url) {
+  return apiUrl + url
+}

src/utils/mixins.js

+import fetch from '@/utils/fetch'
+import { getBaseUrl, getApiUrl } from '@/utils/index'
+
+module.exports = {
+    data: function () {
+        return {
+            // isIpx: Utils.env.isIPhoneX(),//是不是iphoneX
+            // isAndroid: Utils.env.isAndroid(),
+            // isIOS: false,
+            // isWeb: false,
+            token: null
+        }
+    },
+    created: function () {
+        let query = this.$router.query
+        // this.token = this.getUrlSearch(location.href, 'token') || (query && query.token) || null
+        this.token = this.getUrlKey('token') || (query && query.token) || null
+    },
+    mounted() {
+
+    },
+    methods: {
+        getUrlPara(obj) {
+            let dataStr = ''
+            let list = [];
+            for (let attr in obj) {
+                if (obj.hasOwnProperty(attr)) {
+                    list.push(attr + '=' + obj[attr])
+                }
+            }
+            dataStr = list.join('&')
+            if (dataStr !== '') {
+                return '?' + dataStr
+            }
+            return ''
+        },
+
+        // 通用GET请求
+        GET(api, para, callback) {
+            para.token = para.token || this.token || '625D128F3DBA486AABE7CBA9BDF90E69' //'AF3DFCF2DD4B4115AC47ACA25D5420E9''F90DF48D3EFA49DFAE1267A67DBEFB18'//token
+            let url = api + this.getUrlPara(para)
+            return fetch({
+                url: getBaseUrl(url),
+                method: 'get',
+                data: para
+            })
+        },
+
+        // 通用POST请求
+        POST(api, para, callback) {
+            para.token = para.token || this.token || '625D128F3DBA486AABE7CBA9BDF90E69' //'AF3DFCF2DD4B4115AC47ACA25D5420E9''F90DF48D3EFA49DFAE1267A67DBEFB18'//token
+            return fetch({
+                url: getBaseUrl(api),
+                method: 'post',
+                data: para
+            })
+        },
+        
+        // 通用GET请求
+        API_GET(api, para, callback) {
+            para.token = para.token || this.token || '625D128F3DBA486AABE7CBA9BDF90E69' //'AF3DFCF2DD4B4115AC47ACA25D5420E9''F90DF48D3EFA49DFAE1267A67DBEFB18'//token
+            let url = api + this.getUrlPara(para)
+            return fetch({
+                url: getApiUrl(url),
+                method: 'get',
+                data: para
+            })
+        },
+
+        // 通用POST请求
+        API_POST(api, para, callback) {
+            para.token = para.token || this.token || '625D128F3DBA486AABE7CBA9BDF90E69' //'AF3DFCF2DD4B4115AC47ACA25D5420E9''F90DF48D3EFA49DFAE1267A67DBEFB18'//token
+            return fetch({
+                url: getApiUrl(api),
+                method: 'post',
+                data: para
+            })
+        },
+
+        // 从html参数
+        getUrlKey(name) {
+            if (decodeURIComponent && location.href) {
+                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
+            } else {
+                return null
+            }
+        },
+        getUrlSearch(url, name) {
+            if (typeof name == 'undefined') {
+                name = url
+                url = location.href
+            }
+            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+            var r = url.slice(url.indexOf('?') + 1).match(reg);
+            if (r != null) {
+                try {
+                    return decodeURIComponent(r[2]);
+                } catch (_e) {
+                    return null
+                }
+            }
+            return null
+        },
+
+    }
+}

src/utils/rem.js

+(function(doc, win) {
+    var docEl = doc.documentElement || doc.body,
+        htmlDom = doc.getElementsByTagName('html')[0],
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function() {
+            var clientWidth = docEl.clientWidth
+            if (!clientWidth) return
+            // docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
+            htmlDom.style.fontSize = clientWidth / 10 + 'px'
+        };
+    if (!doc.addEventListener) return
+    win.addEventListener(resizeEvt, recalc, false)
+    doc.addEventListener('DOMContentLoaded', recalc, false)
+})(document, window)
\ No newline at end of file

src/utils/yqyServerRegister.js

+/* 
+    注册移动端通用服务
+*/
+(function (e) {
+    var i = {}, t = {}, n = 0;
+    e.rocNative = {
+        __nativeCall: function (e, t, n) {
+            var a = i[e];
+            delete i[e], "function" == typeof a && a(t, n)
+        }, 
+        __callNative: function (t, a, o) {
+            "function" == typeof o && (n++ , i[n] = o);
+            var r = JSON.stringify({
+                name: t,
+                callbackId: "function" == typeof o ? n : -1,
+                param: a === undefined ? {} : a
+            });
+            if (e.__rocAndroid) {
+                e.__rocAndroid.postMessage(r)
+                return true;
+            }
+            if (e.webkit && window.webkit.messageHandlers.rociOS) {
+                window.webkit.messageHandlers.rociOS.postMessage(r)
+                return true;
+            }
+            return false;
+        },
+        __onEvent: function (e, i) {
+            if (e && i && "function" == typeof i) {
+                (t[e] || (t[e] = [])).push(i)
+            }
+        },
+        __clearEvent: function (e) {
+            e && delete t[e]
+        },
+        __fireEvent: function (e, i) {
+            var n = t[e];
+            n && n.forEach(function (e) {
+                e(i)
+            })
+        }, 
+        on: function (e, i) {
+            rocNative.__onEvent(e, i)
+        }, 
+        off: function (e) {
+            rocNative.__clearEvent(e)
+        }
+    }, function () {
+        Array.prototype.slice.apply(arguments).forEach(function (i) {
+            e.rocNative[i] = function (t) {
+                return new Promise(function (n, a) {
+                    e.rocNative.__callNative(i, t, function (e, i) {
+                        null !== e ? a({ error: e, result: i }) : n(i)
+                    }) ? void 0 : n({})
+                })
+            }
+        })
+    }("toast", "pushView", "goBack", "appVersion", "appInit", "heartBeat", "getAppSetting", "setAppSetting")
+})(window)

src/views/home/home.vue

+<template>
+  	<section class="font-style">
+        <section class="home-header">
+            <mt-header>
+                <router-link to="/" slot="left">
+                    <mt-button icon="back"></mt-button>
+                </router-link>
+                <mt-button icon="more" slot="right"></mt-button>
+            </mt-header>
+            <article style="width: 100%;text-align:center;">
+                <img class="logo_img" src='../../images/header-bg-2.png' />
+            </article>
+        </section>
+        <section class="home-body">
+            <span @click="pushView('http://10.177.10.121:8080/yqy/index.html?1')"> pushView 1</span>
+            <span @click="goBack"> goBack 2</span>
+            <span @click="toast('Hi, 你好，宾宾！')"> toast 3</span>
+        </section>
+        <section class="home-bottom">
+            <yqyTest/>
+        </section>
+    </section>
+</template>
+
+<script>
+import { Header } from 'mint-ui';
+import yqyTest from '@/components/common/yqy/yqyTest'
+
+export default {
+    data(){
+        return {
+            
+        }
+    },
+    components:{
+        Header,
+        yqyTest
+    },
+	mounted(){
+        this.init()
+    },
+
+    computed:{
+    },
+
+    methods:{
+        init() {
+
+            this.API_GET('contents/homeButton/msg', {}).then( res => {
+                logger.debug(res)
+                this.$log.debug(res)
+            })
+
+            let para = {
+                sysCode: 27, 
+                token: this.token,
+                setEntry: 'headers'
+            }
+            this.GET('analysis/activityDetail', para).then( res => {
+                logger.debug(res)
+            })
+            para = {
+                sysCode: 27, 
+                rankingType: 27,
+                flag: 1,
+                token: this.token,
+                setEntry: 'headers'
+            }
+            this.GET('exams/rankings', para).then( res => {
+                logger.debug(res)
+            })
+         
+        },
+        pushView : function(page){
+            console.log('pushView');
+            rocNative.pushView({
+                url : page
+            }).then(function(res) {
+                console.log('pushView then' + JSON.stringify(res));
+            }).catch(function(res){
+                console.log('pushView catch' + JSON.stringify(res));
+            });
+        },
+        goBack: function (msg) {
+            console.log('goBack');
+            rocNative.goBack()
+            .then(function(res) {
+                console.log('goBack then' + JSON.stringify(res));
+            }).catch(function(res){
+                console.log('goBack catch' + JSON.stringify(res));
+            });
+        },
+        toast : function(msg){
+            console.log('toast');
+            rocNative.toast({
+                msg: msg
+            }).then(function(res) {
+                console.log('toast then' + JSON.stringify(res));
+            }).catch(function(res){
+                console.log('toast catch' + JSON.stringify(res));
+            });
+        },
+    },
+}
+
+</script>
+
+<style lang="scss" scoped>
+    @import '../../style/mixin';
+    .mint-header {
+        background-color: rgba($color: #000000, $alpha: 0)
+    }
+    .font-style {
+        @include sc(0.6rem, #666);
+    }
+
+    .home-header {
+        height: px2rem(202px);
+        @include bis('../../images/552064153@2x.png');
+
+        .logo_img{
+            height: px2rem(85px);
+            width: px2rem(345px);
+            text-align: center;
+        }
+    }
+</style>