1

build/build.js

@@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  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\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})

build/check-versions.js

@@ -0,0 +1,49 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}

build/dev-client.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+'use strict'
+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()
+  }
+})

build/dev-server.js

@@ -0,0 +1,105 @@
+'use strict'
+require('./check-versions')()
+
+const config = require('../config')
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+const opn = require('opn')
+const path = require('path')
+const express = require('express')
+const webpack = require('webpack')
+const proxyMiddleware = require('http-proxy-middleware')
+const webpackConfig = require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+const port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+const autoOpenBrowser = !!config.dev.autoOpenBrowser
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+const proxyTable = config.dev.proxyTable
+
+const app = express()
+const compiler = webpack(webpackConfig)
+
+const devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  quiet: true
+})
+
+const hotMiddleware = require('webpack-hot-middleware')(compiler, {
+  log: false,
+  heartbeat: 2000
+})
+// force page reload when html-webpack-plugin template changes
+// currently disabled until this is resolved:
+// https://github.com/jantimon/html-webpack-plugin/issues/680
+// compiler.plugin('compilation', function (compilation) {
+//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+//     hotMiddleware.publish({ action: 'reload' })
+//     cb()
+//   })
+// })
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+  let options = proxyTable[context]
+  if (typeof options === 'string') {
+    options = { target: options }
+  }
+  app.use(proxyMiddleware(options.filter || context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// serve pure static assets
+const staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+const uri = 'http://localhost:' + port
+
+var _resolve
+var _reject
+var readyPromise = new Promise((resolve, reject) => {
+  _resolve = resolve
+  _reject = reject
+})
+
+var server
+var portfinder = require('portfinder')
+portfinder.basePort = port
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+  portfinder.getPort((err, port) => {
+    if (err) {
+      _reject(err)
+    }
+    process.env.PORT = port
+    var uri = 'http://localhost:' + port
+    console.log('> Listening at ' + uri + '\n')
+    // when env is testing, don't need open it
+    if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+      opn(uri)
+    }
+    server = app.listen(port)
+    _resolve()
+  })
+})
+
+module.exports = {
+  ready: readyPromise,
+  close: () => {
+    server.close()
+  }
+}

build/utils.js

@@ -0,0 +1,98 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const pkg = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  var postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}
+
+exports.createNotifierCallback = function () {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') {
+      return
+    }
+    const error = errors[0]
+
+    const filename = error.file && error.file.split('!').pop()
+    notifier.notify({
+      title: pkg.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -0,0 +1,23 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting, 
+  transformToRequire: {
+    video: 'src',
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,75 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.sass$/,
+        loader:'style!css!sass'
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  }
+}
+
+
+

build/webpack.dev.conf.js

@@ -0,0 +1,78 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: true,
+    hot: true,
+    compress: true,
+    host: process.env.HOST || config.dev.host,
+    port: process.env.PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay ? {
+      warnings: false,
+      errors: true,
+    } : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${config.dev.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -0,0 +1,142 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    // UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // set the following option to `true` if you want to extract CSS from
+      // codesplit chunks into this main css file as well.
+      // This will result in *all* of your app's CSS being loaded upfront.
+      allChunks: false,
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+      ? { safe: true, map: { inline: false } }
+      : { safe: true }
+    }),
+    // 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'
+    }),
+    // keep module.id stable when vender modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module) {
+        // 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',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const 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
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig

config/dev.env.js

@@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

@@ -0,0 +1,82 @@
+'use strict'
+// Template version: 1.2.4
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    // devtool: 'eval-source-map',
+    devtool: 'inline-source-map',   //dev safari  SockJS not find ， 改为这个即可
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    // 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,
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // 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'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}

config/prod.env.js

@@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

index.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="./static/image/favicon.ico">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title></title>
+    <style type="text/css">
+
+        .ub {
+            display: -webkit-box;
+            display: -moz-box;
+        //display: box;
+            position:relative;
+        }
+
+        /*以反方向显示 div 框的子元素*/
+        .ub-rev {
+            -webkit-box-direction:reverse;
+            -moz-box-direction:reverse;
+            box-direction:reverse;
+        }
+
+        .ub-fh {
+            width: 100%;
+        }
+
+        .ub-fv {
+            height: 100%;
+        }
+
+        .ub-con {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+
+        /*通过使用 box-align and box-pack 属性，居中 div 框的子元素*/
+        .ub-ac
+        {
+            -webkit-box-align:center;
+            -moz-box-align:center;
+            box-align:center;
+        }
+        /*通过使用 box-align and box-pack :end属性，右下 div 框的子元素*/
+        .ub-ae
+        {
+            -webkit-box-align:end;
+            -moz-box-align:end;
+            box-align:end;
+        }
+
+        .ub-pc
+        {
+            -webkit-box-pack:center;
+            -moz-box-pack:center;
+            box-pack:center;
+        }
+        .ub-pe
+        {
+            -webkit-box-pack:end;
+            -moz-box-pack:end;
+            box-pack:end;
+        }
+        /*两端对齐*/
+        .ub-pj
+        {
+            -webkit-box-pack:justify;
+            -moz-box-pack:justify;
+            box-pack:justify;
+        }
+        /*从上向下垂直排列子元素。*/
+        .ub-ver
+        {
+            -webkit-box-orient:vertical;
+            -moz-box-orient:vertical;
+            box-orient:vertical;
+        }
+        /*box-flex主要让子容器针对父容器的宽度按一定规则进行划分*/
+        .ub-f1
+        {
+            position:relative;
+            -webkit-box-flex: 1;
+            -moz-box-flex: 1;
+            box-flex: 1;
+        }
+
+        .ub-f2
+        {
+            position:relative;
+            -webkit-box-flex: 2;
+            -moz-box-flex: 2;
+            box-flex: 2;
+        }
+
+        .ub-f3
+        {
+            position:relative;
+            -webkit-box-flex: 3;
+            -moz-box-flex: 3;
+            box-flex: 3;
+        }
+
+        .ub-f4
+        {
+            position:relative;
+            -webkit-box-flex: 4;
+            -moz-box-flex: 4;
+            box-flex: 4;
+        }
+
+    </style>
+</head>
+<body style="max-width:540px;margin:0 auto;">
+<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
+</html>

package.json

@@ -0,0 +1,80 @@
+{
+    "name": "official",
+    "version": "1.0.0",
+    "description": "officialWebsite",
+    "author": "zhizhuchuxing.com",
+    "private": true,
+    "scripts": {
+        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+        "start": "npm run dev",
+        "build": "node build/build.js"
+    },
+    "dependencies": {
+        "fundebug-javascript": "^0.3.4",
+        "mint-ui": "^2.2.13",
+        "vue": "^2.5.2",
+        "vue-awesome-swiper": "^2.5.4",
+        "vue-baidu-map": "^0.19.5",
+        "vue-router": "^3.0.1",
+        "wc-messagebox": "^1.9.9"
+    },
+    "devDependencies": {
+        "ajv": "^6.3.0",
+        "ajv-keywords": "^3.1.0",
+        "autoprefixer": "^7.1.2",
+        "babel-core": "^6.22.1",
+        "babel-loader": "^7.1.1",
+        "babel-plugin-add-module-exports": "^0.2.1",
+        "babel-plugin-transform-runtime": "^6.22.0",
+        "babel-polyfill": "^6.26.0",
+        "babel-preset-env": "^1.3.2",
+        "babel-preset-es2015": "^6.24.1",
+        "babel-preset-es2015-loose": "^8.0.0",
+        "babel-preset-stage-2": "^6.22.0",
+        "babel-register": "^6.22.0",
+        "chalk": "^2.0.1",
+        "clone-deep": "^2.0.1",
+        "copy-webpack-plugin": "^4.0.1",
+        "css-loader": "^0.28.7",
+        "eventsource-polyfill": "^0.9.6",
+        "extract-text-webpack-plugin": "^3.0.0",
+        "file-loader": "^1.1.4",
+        "friendly-errors-webpack-plugin": "^1.6.1",
+        "html-webpack-plugin": "^2.30.1",
+        "less": "^2.6.1",
+        "less-loader": "^2.2.3",
+        "lodash.tail": "^4.1.1",
+        "node-notifier": "^5.1.2",
+        "node-sass": "^4.9.0",
+        "optimize-css-assets-webpack-plugin": "^3.2.0",
+        "ora": "^1.2.0",
+        "portfinder": "^1.0.13",
+        "postcss-import": "^11.0.0",
+        "postcss-loader": "^2.0.8",
+        "rimraf": "^2.6.0",
+        "sass": "^1.0.0-beta.3",
+        "sass-loader": "^6.0.6",
+        "scss": "^0.2.4",
+        "scss-loader": "^0.0.1",
+        "semver": "^5.3.0",
+        "shelljs": "^0.7.6",
+        "style-loader": "^0.19.0",
+        "url-loader": "^0.5.8",
+        "vue-loader": "^13.3.0",
+        "vue-style-loader": "^3.0.3",
+        "vue-template-compiler": "^2.5.2",
+        "webpack": "^3.6.0",
+        "webpack-bundle-analyzer": "^2.9.0",
+        "webpack-dev-server": "^2.9.1",
+        "webpack-merge": "^4.1.0"
+    },
+    "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+    },
+    "browserslist": [
+        "> 1%",
+        "last 4 versions",
+        "not ie <= 8"
+    ]
+}

remark.txt

@@ -0,0 +1,29 @@
+注意：
+1、所有图片加载尽量使用 img 标签 ， 否则打包后容易出现图片路径错误显示出不来
+2、尽量使用 img的src
+
+
+
+http请求
+1、
+同步请求
+async initData() {
+  let param = {username:'xxx'};
+  let res_data = await homeList(param);
+}
+
+
+2、异步请求
+load(){
+    let param = {username:'yyyyy'};
+    homeList(param).then(res=>{
+        //...
+    }).catch(e=>{
+        //...
+    });
+}
+
+
+tool工具类
+只需引用config/mutil/tool.js 就可以了
+tool拥有cardId和dateUtil对象

src/App.vue

@@ -0,0 +1,29 @@
+<template>
+  <div id="app">
+    <transition name="router-fade" mode="out-in">
+      <keep-alive>
+        <router-view></router-view>
+      </keep-alive>
+
+
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app'
+}
+</script>
+
+<style lang="scss" type="text/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/common/FooterView.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="tabbar ub max-width">
+        <div v-for="(dict,index) in list" class="ub-f1 ub ub-ver tx-c controller ub-pc ub-ac"
+             @click="selectTabbar(index)">
+            <!--<router-link :to="dict.urlInfo">-->
+            <div style="background-repeat: no-repeat;background-size: 100% 100%;width:0.26rem;height:0.26rem;"
+                 :style="getStyle(dict)"></div>
+            <div :class="dict.flag?'select_title':'normal_title'">{{dict.name}}</div>
+            <!--</router-link>-->
+        </div>
+    </div>
+</template>
+
+<script>
+    import tool from './../config/mUtil/tool'
+
+
+    export default {
+        name: 'FooterView',
+        props: {
+            list:{
+                type: Array
+            }
+        },
+        data() {
+            return {
+                showInfo: false,
+                urlParam: {}
+            }
+        },
+        update: {},
+        mounted() {
+            this.$nextTick(() => {
+                let name = this.$router.history.current.name;
+                let index = this.list.findObjIndex('url', name);
+                if (index !== -1) this.showInfo = true;
+            });
+        },
+        methods: {
+            selectTabbar(index) {
+                this.list.map(x => x.flag = false);
+                this.list[index].flag = true;
+                let item = this.list[index];
+                tool.log(item);
+                this.$emit('selectTabbar', item);
+            },
+            getStyle(item){
+                let img = item.flag?item.img_s:item.img_n;
+                let style = {
+                    backgroundImage:'url('+img+')'
+                };
+                return style;
+            },
+        }
+    }
+</script>
+
+<style type="text/scss" scoped lang="scss">
+    @import "./../style/mixin";
+    @import "../../static/css/ui-base.css";
+
+    .tabbar {
+        position: fixed;
+        width: 100%;
+        bottom: 0;
+        /*-webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);*/
+        /*-webkit-filter:blur(10px);*/
+        background-color: rgba(233, 234, 238, 0.95);
+        box-shadow: inset 0 0.5px 0 0 rgba(44, 45, 58, 0.1);
+        height: 0.5rem;
+        /*-webkit-filter: blur(10px);
+        filter: blur(10px);*/
+    }
+
+    .select_title {
+        font-family: PingFangSC;
+        font-size: 0.1rem;
+        font-weight: normal;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.0;
+        letter-spacing: 0.1px;
+        color: #368ff4;
+    }
+
+    .normal_title {
+        font-family: PingFangSC;
+        font-size: 0.1rem;
+        font-weight: normal;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: 1.0;
+        letter-spacing: 0.1px;
+        color: #686872;
+        /*padding-bottom: 0.03rem;*/
+    }
+</style>

src/common/HeaderView.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="_header" style="background:yellow;">
+        this is header
+    </div>
+</template>
+
+<script>
+    import info from './../config/info'
+    import tool from './../config/mUtil/tool'
+    export default {
+        name: "HeaderView",
+        data() {
+            return {}
+        }
+
+    }
+</script>
+
+<style scoped="scoped" lang="scss" type="text/scss">
+    @import "./../style/mixin";
+
+</style>

src/config/env.js

@@ -0,0 +1,29 @@
+/**
+ * Created by web_developer_02 on 2017/11/30
+ * 配置编译环境和线上环境之间的切换
+ *
+ * baseUrl: 域名地址
+ * routerMode: 路由模式
+ * imgBaseUrl: 图片所在域名地址
+ *
+ */
+
+let baseUrl = '';
+let printLog = true;
+let mode = '';
+let routerBase = '';
+if (process.env.NODE_ENV === 'development') {
+    baseUrl = "http://zzwx";
+    printLog = true;
+} else if (process.env.NODE_ENV === 'production') {
+    baseUrl = "";
+    printLog = false;
+    // mode = 'history';
+    // routerBase = '/web/zzwx';
+}
+export {
+    baseUrl,
+    printLog,
+    mode,
+    routerBase
+}

src/config/fetch.js

@@ -0,0 +1,103 @@
+/**
+ * Created by web_developer_02 on 2017/11/30
+ */
+import tool from './mUtil/tool'
+import {
+    baseUrl
+} from './env'
+
+
+export default async (url = '', data = {}, type = 'POST', method = 'fetch') => {
+
+    function convertData(data) {
+        if (typeof data === 'object') {
+            let convertResult = "";
+            for (let c in data) {
+                convertResult += c + "=" + data[c] + "&";
+            }
+            convertResult = convertResult.substring(0, convertResult.length - 1);
+            return convertResult;
+        } else {
+            return data;
+        }
+    }
+
+
+    type = type.toUpperCase();
+    url = baseUrl + url;
+
+    if (type === 'GET') {
+        let dataStr = ''; //数据拼接字符串
+        Object.keys(data).forEach(key => {
+            dataStr += key + '=' + data[key] + '&';
+        });
+
+        if (dataStr !== '') {
+            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
+            url = url + '?' + dataStr;
+        }
+    }
+    if (window.fetch && method === 'fetch') {
+        let requestConfig = {
+            credentials: 'include',   //注释掉能fetch
+            method: type,
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/x-www-form-urlencoded;application/json;charset=utf-8'
+            },
+            mode: "cors",
+            cache: "force-cache"
+        };
+
+        if (type === 'POST') {
+            Object.defineProperty(requestConfig, 'body', {
+                value: convertData(data)
+            })
+        }
+
+        try {
+            const response = await fetch(url, requestConfig);
+            const responseJson = await response.json();
+            tool.log(responseJson);
+            return responseJson;
+        } catch (error) {
+            throw new Error(error)
+        }
+    } else {
+        return new Promise((resolve, reject) => {
+            let requestObj;
+            if (window.XMLHttpRequest) {
+                requestObj = new XMLHttpRequest();
+            } else {
+                requestObj = new ActiveXObject;
+            }
+
+            let sendData = '';
+            if (type === 'POST') {
+                sendData = convertData(data);
+            }
+            requestObj.withCredentials = true;
+            requestObj.crossDomain = true;
+            requestObj.open(type, url, true);
+            requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded;application/json;charset=utf-8");
+            requestObj.send(sendData);
+
+            requestObj.onreadystatechange = () => {
+                if (requestObj.readyState === 4) {
+                    if (requestObj.status === 200) {
+                        let obj = requestObj.response;
+                        if (typeof obj !== 'object') {
+                            obj = JSON.parse(obj);
+                        }
+                        tool.log(obj);
+                        resolve(obj)
+                    } else {
+                        reject(requestObj)
+                    }
+                }
+            }
+        })
+    }
+}
+
+

src/config/info.js

@@ -0,0 +1,29 @@
+/**
+ * Created by web_developer_02 on 2017/12/1
+ */
+
+let dev = {
+    infoApiError: "后台接口错误，必须的!",
+    infoNotLogin: "您还没有登录，请登录后再试",
+    codeNotLogin: 'LOGIN-100001',
+    codeToken: 'wx_token',
+    timeStorage: 'd30',
+    delayTime:300,
+};
+
+let build = {
+    infoApiError: '服务器开小差了，请尝试重新连接',
+    infoNotLogin: '您还没有登录，请登录后再试',
+    codeNotLogin: 'LOGIN-100001',
+    codeToken: 'wx_token',
+    timeStorage: 'd30',
+    delayTime:300,
+};
+let info = null;
+if (process.env.NODE_ENV === 'development') {
+    info = dev;
+} else if (process.env.NODE_ENV === 'production') {
+    info = build;
+}
+
+export default info;

src/config/mUtil/Calendar.js

@@ -0,0 +1,550 @@
+/**
+ * Created by web_developer_02 on 2018/1/4
+ */
+/**
+ * @1900-2100区间内的公历、农历互转
+ * @charset UTF-8
+ * @Author  Jea杨(JJonline@JJonline.Cn)
+ * @Time    2014-7-21
+ * @Time    2016-8-13 Fixed 2033hex、Attribution Annals
+ * @Time    2016-9-25 Fixed lunar LeapMonth Param Bug
+ * @Time    2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
+ * @Version 1.0.3
+ * @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
+ * @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
+ */
+var calendar = {
+
+    /**
+     * 农历1900-2100的润大小信息表
+     * @Array Of Property
+     * @return Hex
+     */
+    lunarInfo:[0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,//1900-1909
+        0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,//1910-1919
+        0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,//1920-1929
+        0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,//1930-1939
+        0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,//1940-1949
+        0x06ca0,0x0b550,0x15355,0x04da0,0x0a5b0,0x14573,0x052b0,0x0a9a8,0x0e950,0x06aa0,//1950-1959
+        0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,//1960-1969
+        0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b6a0,0x195a6,//1970-1979
+        0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,//1980-1989
+        0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,//1990-1999
+        0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,//2000-2009
+        0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,//2010-2019
+        0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,//2020-2029
+        0x05aa0,0x076a3,0x096d0,0x04afb,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,//2030-2039
+        0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0,//2040-2049
+        /**Add By JJonline@JJonline.Cn**/
+        0x14b63,0x09370,0x049f8,0x04970,0x064b0,0x168a6,0x0ea50, 0x06b20,0x1a6c4,0x0aae0,//2050-2059
+        0x0a2e0,0x0d2e3,0x0c960,0x0d557,0x0d4a0,0x0da50,0x05d55,0x056a0,0x0a6d0,0x055d4,//2060-2069
+        0x052d0,0x0a9b8,0x0a950,0x0b4a0,0x0b6a6,0x0ad50,0x055a0,0x0aba4,0x0a5b0,0x052b0,//2070-2079
+        0x0b273,0x06930,0x07337,0x06aa0,0x0ad50,0x14b55,0x04b60,0x0a570,0x054e4,0x0d160,//2080-2089
+        0x0e968,0x0d520,0x0daa0,0x16aa6,0x056d0,0x04ae0,0x0a9d4,0x0a2d0,0x0d150,0x0f252,//2090-2099
+        0x0d520],//2100
+
+    /**
+     * 公历每个月份的天数普通表
+     * @Array Of Property
+     * @return Number
+     */
+    solarMonth:[31,28,31,30,31,30,31,31,30,31,30,31],
+
+    /**
+     * 天干地支之天干速查表
+     * @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
+     * @return Cn string
+     */
+    Gan:["\u7532","\u4e59","\u4e19","\u4e01","\u620a","\u5df1","\u5e9a","\u8f9b","\u58ec","\u7678"],
+
+    /**
+     * 天干地支之地支速查表
+     * @Array Of Property
+     * @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
+     * @return Cn string
+     */
+    Zhi:["\u5b50","\u4e11","\u5bc5","\u536f","\u8fb0","\u5df3","\u5348","\u672a","\u7533","\u9149","\u620c","\u4ea5"],
+
+    /**
+     * 天干地支之地支速查表<=>生肖
+     * @Array Of Property
+     * @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
+     * @return Cn string
+     */
+    Animals:["\u9f20","\u725b","\u864e","\u5154","\u9f99","\u86c7","\u9a6c","\u7f8a","\u7334","\u9e21","\u72d7","\u732a"],
+
+    /**
+     * 24节气速查表
+     * @Array Of Property
+     * @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
+     * @return Cn string
+     */
+    solarTerm:["\u5c0f\u5bd2","\u5927\u5bd2","\u7acb\u6625","\u96e8\u6c34","\u60ca\u86f0","\u6625\u5206","\u6e05\u660e","\u8c37\u96e8","\u7acb\u590f","\u5c0f\u6ee1","\u8292\u79cd","\u590f\u81f3","\u5c0f\u6691","\u5927\u6691","\u7acb\u79cb","\u5904\u6691","\u767d\u9732","\u79cb\u5206","\u5bd2\u9732","\u971c\u964d","\u7acb\u51ac","\u5c0f\u96ea","\u5927\u96ea","\u51ac\u81f3"],
+
+    /**
+     * 1900-2100各年的24节气日期速查表
+     * @Array Of Property
+     * @return 0x string For splice
+     */
+    sTermInfo:['9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f',
+        '97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+        '97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f','b027097bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd0b06bdb0722c965ce1cfcc920f',
+        'b027097bd097c36b0b6fc9274c91aa','9778397bd19801ec9210c965cc920e','97b6b97bd19801ec95f8c965cc920f',
+        '97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2','9778397bd197c36c9210c9274c91aa',
+        '97b6b97bd19801ec95f8c965cc920e','97bd09801d98082c95f8e1cfcc920f','97bd097bd097c36b0b6fc9210c8dc2',
+        '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec95f8c965cc920e','97bcf97c3598082c95f8e1cfcc920f',
+        '97bd097bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e',
+        '97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e','97bcf97c3598082c95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f',
+        '97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+        '97bcf97c359801ec95f8c965cc920f','97bd097bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e','97bcf97c359801ec95f8c965cc920f','97bd097bd07f595b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9210c8dc2','9778397bd19801ec9210c9274c920e','97b6b97bd19801ec95f8c965cc920f',
+        '97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
+        '97b6b97bd19801ec95f8c965cc920f','97bd07f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
+        '9778397bd097c36c9210c9274c91aa','97b6b97bd19801ec9210c965cc920e','97bd07f1487f595b0b0bc920fb0722',
+        '7f0e397bd097c36b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+        '97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c965cc920e','97bcf7f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e','97bcf7f1487f531b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b97bd19801ec9210c965cc920e',
+        '97bcf7f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+        '97b6b97bd19801ec9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
+        '9778397bd097c36b0b6fc9210c91aa','97b6b97bd197c36c9210c9274c920e','97bcf7f0e47f531b0b0bb0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','9778397bd097c36c9210c9274c920e',
+        '97b6b7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c36b0b6fc9210c8dc2',
+        '9778397bd097c36b0b70c9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc9210c8dc2','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f595b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+        '97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
+        '9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc920fb0722','9778397bd097c36b0b6fc9274c91aa','97b6b7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9274c91aa',
+        '97b6b7f0e47f531b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
+        '9778397bd097c36b0b6fc9210c91aa','97b6b7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722','9778397bd097c36b0b6fc9210c8dc2','977837f0e37f149b0723b0787b0721',
+        '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f5307f595b0b0bc920fb0722','7f0e397bd097c35b0b6fc9210c8dc2',
+        '977837f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0721','7f0e37f1487f595b0b0bb0b6fb0722',
+        '7f0e397bd097c35b0b6fc9210c8dc2','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722','977837f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd097c35b0b6fc920fb0722',
+        '977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0b0bb0b6fb0722','7f0e397bd07f595b0b0bc920fb0722',
+        '977837f0e37f14998082b0723b06bd','7f07e7f0e37f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
+        '7f0e397bd07f595b0b0bc920fb0722','977837f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b0721',
+        '7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f595b0b0bb0b6fb0722','7f0e37f0e37f14898082b0723b02d5',
+        '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e37f1487f531b0b0bb0b6fb0722',
+        '7f0e37f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e37f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e37f14898082b072297c35',
+        '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722',
+        '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f149b0723b0787b0721',
+        '7f0e27f1487f531b0b0bb0b6fb0722','7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14998082b0723b06bd',
+        '7f07e7f0e47f149b0723b0787b0721','7f0e27f0e47f531b0723b0b6fb0722','7f0e37f0e366aa89801eb072297c35',
+        '7ec967f0e37f14998082b0723b06bd','7f07e7f0e37f14998083b0787b0721','7f0e27f0e47f531b0723b0b6fb0722',
+        '7f0e37f0e366aa89801eb072297c35','7ec967f0e37f14898082b0723b02d5','7f07e7f0e37f14998082b0787b0721',
+        '7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66aa89801e9808297c35','665f67f0e37f14898082b0723b02d5',
+        '7ec967f0e37f14998082b0787b0721','7f07e7f0e47f531b0723b0b6fb0722','7f0e36665b66a449801e9808297c35',
+        '665f67f0e37f14898082b0723b02d5','7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721',
+        '7f0e36665b66a449801e9808297c35','665f67f0e37f14898082b072297c35','7ec967f0e37f14998082b0787b06bd',
+        '7f07e7f0e47f531b0723b0b6fb0721','7f0e26665b66a449801e9808297c35','665f67f0e37f1489801eb072297c35',
+        '7ec967f0e37f14998082b0787b06bd','7f07e7f0e47f531b0723b0b6fb0721','7f0e27f1487f531b0b0bb0b6fb0722'],
+
+    /**
+     * 数字转中文速查表
+     * @Array Of Property
+     * @trans ['日','一','二','三','四','五','六','七','八','九','十']
+     * @return Cn string
+     */
+    nStr1:["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341"],
+
+    /**
+     * 日期转农历称呼速查表
+     * @Array Of Property
+     * @trans ['初','十','廿','卅']
+     * @return Cn string
+     */
+    nStr2:["\u521d","\u5341","\u5eff","\u5345"],
+
+    /**
+     * 月份转农历称呼速查表
+     * @Array Of Property
+     * @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
+     * @return Cn string
+     */
+    nStr3:["\u6b63","\u4e8c","\u4e09","\u56db","\u4e94","\u516d","\u4e03","\u516b","\u4e5d","\u5341","\u51ac","\u814a"],
+
+    /**
+     * 返回农历y年一整年的总天数
+     * @param lunar Year
+     * @return Number
+     * @eg:var count = calendar.lYearDays(1987) ;//count=387
+     */
+    lYearDays:function(y) {
+        var i, sum = 348;
+        for(i=0x8000; i>0x8; i>>=1) { sum += (calendar.lunarInfo[y-1900] & i)? 1: 0; }
+        return(sum+calendar.leapDays(y));
+    },
+
+    /**
+     * 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
+     * @param lunar Year
+     * @return Number (0-12)
+     * @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
+     */
+    leapMonth:function(y) { //闰字编码 \u95f0
+        return(calendar.lunarInfo[y-1900] & 0xf);
+    },
+
+    /**
+     * 返回农历y年闰月的天数 若该年没有闰月则返回0
+     * @param lunar Year
+     * @return Number (0、29、30)
+     * @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
+     */
+    leapDays:function(y) {
+        if(calendar.leapMonth(y))  {
+            return((calendar.lunarInfo[y-1900] & 0x10000)? 30: 29);
+        }
+        return(0);
+    },
+
+    /**
+     * 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
+     * @param lunar Year
+     * @return Number (-1、29、30)
+     * @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
+     */
+    monthDays:function(y,m) {
+        if(m>12 || m<1) {return -1}//月份参数从1至12，参数错误返回-1
+        return( (calendar.lunarInfo[y-1900] & (0x10000>>m))? 30: 29 );
+    },
+
+    /**
+     * 返回公历(!)y年m月的天数
+     * @param solar Year
+     * @return Number (-1、28、29、30、31)
+     * @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
+     */
+    solarDays:function(y,m) {
+        if(m>12 || m<1) {return -1} //若参数错误 返回-1
+        var ms = m-1;
+        if(ms==1) { //2月份的闰平规律测算后确认返回28或29
+            return(((y%4 == 0) && (y%100 != 0) || (y%400 == 0))? 29: 28);
+        }else {
+            return(calendar.solarMonth[ms]);
+        }
+    },
+
+    /**
+     * 农历年份转换为干支纪年
+     * @param  lYear 农历年的年份数
+     * @return Cn string
+     */
+    toGanZhiYear:function(lYear) {
+        var ganKey = (lYear - 3) % 10;
+        var zhiKey = (lYear - 3) % 12;
+        if(ganKey == 0) ganKey = 10;//如果余数为0则为最后一个天干
+        if(zhiKey == 0) zhiKey = 12;//如果余数为0则为最后一个地支
+        return calendar.Gan[ganKey-1] + calendar.Zhi[zhiKey-1];
+
+    },
+
+    /**
+     * 公历月、日判断所属星座
+     * @param  cMonth [description]
+     * @param  cDay [description]
+     * @return Cn string
+     */
+    toAstro:function(cMonth,cDay) {
+        var s   = "\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf";
+        var arr = [20,19,21,21,21,22,23,23,23,23,22,22];
+        return s.substr(cMonth*2 - (cDay < arr[cMonth-1] ? 2 : 0),2) + "\u5ea7";//座
+    },
+
+    /**
+     * 传入offset偏移量返回干支
+     * @param offset 相对甲子的偏移量
+     * @return Cn string
+     */
+    toGanZhi:function(offset) {
+        return calendar.Gan[offset%10] + calendar.Zhi[offset%12];
+    },
+
+    /**
+     * 传入公历(!)y年获得该年第n个节气的公历日期
+     * @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
+     * @return day Number
+     * @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
+     */
+    getTerm:function(y,n) {
+        if(y<1900 || y>2100) {return -1;}
+        if(n<1 || n>24) {return -1;}
+        var _table = calendar.sTermInfo[y-1900];
+        var _info = [
+            parseInt('0x'+_table.substr(0,5)).toString() ,
+            parseInt('0x'+_table.substr(5,5)).toString(),
+            parseInt('0x'+_table.substr(10,5)).toString(),
+            parseInt('0x'+_table.substr(15,5)).toString(),
+            parseInt('0x'+_table.substr(20,5)).toString(),
+            parseInt('0x'+_table.substr(25,5)).toString()
+        ];
+        var _calday = [
+            _info[0].substr(0,1),
+            _info[0].substr(1,2),
+            _info[0].substr(3,1),
+            _info[0].substr(4,2),
+
+            _info[1].substr(0,1),
+            _info[1].substr(1,2),
+            _info[1].substr(3,1),
+            _info[1].substr(4,2),
+
+            _info[2].substr(0,1),
+            _info[2].substr(1,2),
+            _info[2].substr(3,1),
+            _info[2].substr(4,2),
+
+            _info[3].substr(0,1),
+            _info[3].substr(1,2),
+            _info[3].substr(3,1),
+            _info[3].substr(4,2),
+
+            _info[4].substr(0,1),
+            _info[4].substr(1,2),
+            _info[4].substr(3,1),
+            _info[4].substr(4,2),
+
+            _info[5].substr(0,1),
+            _info[5].substr(1,2),
+            _info[5].substr(3,1),
+            _info[5].substr(4,2),
+        ];
+        return parseInt(_calday[n-1]);
+    },
+
+    /**
+     * 传入农历数字月份返回汉语通俗表示法
+     * @param lunar month
+     * @return Cn string
+     * @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
+     */
+    toChinaMonth:function(m) { // 月 => \u6708
+        if(m>12 || m<1) {return -1} //若参数错误 返回-1
+        var s = calendar.nStr3[m-1];
+        s+= "\u6708";//加上月字
+        return s;
+    },
+
+    /**
+     * 传入农历日期数字返回汉字表示法
+     * @param lunar day
+     * @return Cn string
+     * @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
+     */
+    toChinaDay:function(d){ //日 => \u65e5
+        var s;
+        switch (d) {
+            case 10:
+                s = '\u521d\u5341'; break;
+            case 20:
+                s = '\u4e8c\u5341'; break;
+                break;
+            case 30:
+                s = '\u4e09\u5341'; break;
+                break;
+            default :
+                s = calendar.nStr2[Math.floor(d/10)];
+                s += calendar.nStr1[d%10];
+        }
+        return(s);
+    },
+
+    /**
+     * 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
+     * @param y year
+     * @return Cn string
+     * @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
+     */
+    getAnimal: function(y) {
+        return calendar.Animals[(y - 4) % 12]
+    },
+
+    /**
+     * 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
+     * @param y  solar year
+     * @param m  solar month
+     * @param d  solar day
+     * @return JSON object
+     * @eg:console.log(calendar.solar2lunar(1987,11,01));
+     */
+    solar2lunar:function (y,m,d) { //参数区间1900.1.31~2100.12.31
+        //年份限定、上限
+        if(y<1900 || y>2100) {
+            return -1;// undefined转换为数字变为NaN
+        }
+        //公历传参最下限
+        if(y==1900&&m==1&&d<31) {
+            return -1;
+        }
+        //未传参  获得当天
+        if(!y) {
+            var objDate = new Date();
+        }else {
+            var objDate = new Date(y,parseInt(m)-1,d)
+        }
+        var i, leap=0, temp=0;
+        //修正ymd参数
+        var y = objDate.getFullYear(),
+            m = objDate.getMonth()+1,
+            d = objDate.getDate();
+        var offset = (Date.UTC(objDate.getFullYear(),objDate.getMonth(),objDate.getDate()) - Date.UTC(1900,0,31))/86400000;
+        for(i=1900; i<2101 && offset>0; i++) {
+            temp    = calendar.lYearDays(i);
+            offset -= temp;
+        }
+        if(offset<0) {
+            offset+=temp; i--;
+        }
+
+        //是否今天
+        var isTodayObj = new Date(),
+            isToday    = false;
+        if(isTodayObj.getFullYear()==y && isTodayObj.getMonth()+1==m && isTodayObj.getDate()==d) {
+            isToday = true;
+        }
+        //星期几
+        var nWeek = objDate.getDay(),
+            cWeek  = calendar.nStr1[nWeek];
+        //数字表示周几顺应天朝周一开始的惯例
+        if(nWeek==0) {
+            nWeek = 7;
+        }
+        //农历年
+        var year   = i;
+        var leap   = calendar.leapMonth(i); //闰哪个月
+        var isLeap = false;
+
+        //效验闰月
+        for(i=1; i<13 && offset>0; i++) {
+            //闰月
+            if(leap>0 && i==(leap+1) && isLeap==false){
+                --i;
+                isLeap = true; temp = calendar.leapDays(year); //计算农历闰月天数
+            }
+            else{
+                temp = calendar.monthDays(year, i);//计算农历普通月天数
+            }
+            //解除闰月
+            if(isLeap==true && i==(leap+1)) { isLeap = false; }
+            offset -= temp;
+        }
+        // 闰月导致数组下标重叠取反
+        if(offset==0 && leap>0 && i==leap+1)
+        {
+            if(isLeap){
+                isLeap = false;
+            }else{
+                isLeap = true; --i;
+            }
+        }
+        if(offset<0)
+        {
+            offset += temp; --i;
+        }
+        //农历月
+        var month      = i;
+        //农历日
+        var day        = offset + 1;
+        //天干地支处理
+        var sm         = m-1;
+        var gzY        = calendar.toGanZhiYear(year);
+
+        // 当月的两个节气
+        // bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
+        var firstNode  = calendar.getTerm(y,(m*2-1));//返回当月「节」为几日开始
+        var secondNode = calendar.getTerm(y,(m*2));//返回当月「节」为几日开始
+
+        // 依据12节气修正干支月
+        var gzM        = calendar.toGanZhi((y-1900)*12+m+11);
+        if(d>=firstNode) {
+            gzM        = calendar.toGanZhi((y-1900)*12+m+12);
+        }
+
+        //传入的日期的节气与否
+        var isTerm = false;
+        var Term   = null;
+        if(firstNode==d) {
+            isTerm  = true;
+            Term    = calendar.solarTerm[m*2-2];
+        }
+        if(secondNode==d) {
+            isTerm  = true;
+            Term    = calendar.solarTerm[m*2-1];
+        }
+        //日柱 当月一日与 1900/1/1 相差天数
+        var dayCyclical = Date.UTC(y,sm,1,0,0,0,0)/86400000+25567+10;
+        var gzD         = calendar.toGanZhi(dayCyclical+d-1);
+        //该日期所属的星座
+        var astro       = calendar.toAstro(m,d);
+
+        return {'lYear':year,'lMonth':month,'lDay':day,'Animal':calendar.getAnimal(year),'IMonthCn':(isLeap?"\u95f0":'')+calendar.toChinaMonth(month),'IDayCn':calendar.toChinaDay(day),'cYear':y,'cMonth':m,'cDay':d,'gzYear':gzY,'gzMonth':gzM,'gzDay':gzD,'isToday':isToday,'isLeap':isLeap,'nWeek':nWeek,'ncWeek':"\u661f\u671f"+cWeek,'isTerm':isTerm,'Term':Term,'astro':astro};
+    },
+
+    /**
+     * 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
+     * @param y  lunar year
+     * @param m  lunar month
+     * @param d  lunar day
+     * @param isLeapMonth  lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
+     * @return JSON object
+     * @eg:console.log(calendar.lunar2solar(1987,9,10));
+     */
+    lunar2solar:function(y,m,d,isLeapMonth) {   //参数区间1900.1.31~2100.12.1
+        var isLeapMonth = !!isLeapMonth;
+        var leapOffset  = 0;
+        var leapMonth   = calendar.leapMonth(y);
+        var leapDay     = calendar.leapDays(y);
+        if(isLeapMonth&&(leapMonth!=m)) {return -1;}//传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
+        if(y==2100&&m==12&&d>1 || y==1900&&m==1&&d<31) {return -1;}//超出了最大极限值
+        var day  = calendar.monthDays(y,m);
+        var _day = day;
+        //bugFix 2016-9-25
+        //if month is leap, _day use leapDays method
+        if(isLeapMonth) {
+            _day = calendar.leapDays(y,m);
+        }
+        if(y < 1900 || y > 2100 || d > _day) {return -1;}//参数合法性效验
+
+        //计算农历的时间差
+        var offset = 0;
+        for(var i=1900;i<y;i++) {
+            offset+=calendar.lYearDays(i);
+        }
+        var leap = 0,isAdd= false;
+        for(var i=1;i<m;i++) {
+            leap = calendar.leapMonth(y);
+            if(!isAdd) {//处理闰月
+                if(leap<=i && leap>0) {
+                    offset+=calendar.leapDays(y);isAdd = true;
+                }
+            }
+            offset+=calendar.monthDays(y,i);
+        }
+        //转换闰月农历 需补充该年闰月的前一个月的时差
+        if(isLeapMonth) {offset+=day;}
+        //1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
+        var stmap   =   Date.UTC(1900,1,30,0,0,0);
+        var calObj  =   new Date((offset+d-31)*86400000+stmap);
+        var cY      =   calObj.getUTCFullYear();
+        var cM      =   calObj.getUTCMonth()+1;
+        var cD      =   calObj.getUTCDate();
+
+        return calendar.solar2lunar(cY,cM,cD);
+    }
+};
+export default calendar;

src/config/mUtil/cardId.js

@@ -0,0 +1,221 @@
+// /**
+//  * Created by web_developer_02 on 2017/12/1
+//  */
+//
+import areaInfo from './areaInfo'
+let cardId = {};
+
+cardId.getAddress=function(cardId){
+    if(cardId){
+        let index = cardId.substr(0,6);
+        let area = areaInfo;
+        if(area[index])
+            return area[index];
+        else return "";
+    }else{
+        return "";
+    }
+};
+
+cardId.getSex = function (cardId) {
+    return cardId.substr(16, 1) % 2 ? "男" : "女"
+};
+cardId.getBirthday = function (cardId) {
+    let sBirthday = cardId.substr(6, 4) + "-" + Number(cardId.substr(10, 2)) + "-" + Number(cardId.substr(12, 2));
+    let d = new Date(sBirthday.replace(/-/g, "/"));
+    let myYear = ';' + d.getFullYear() + ';';
+    let myMonth = ';' + Math.floor(d.getMonth() + 1) + ';';
+    let myDay = ';' + d.getDate() + ';';
+    if (myMonth.length < 4) myMonth = '0' + myMonth;
+    if (myDay.length < 4) myDay = '0' + myDay;
+    let timestr = myYear + '-' + myMonth + '-' + myDay;
+    timestr = timestr.replace(/;/g, "");
+    return timestr;
+};
+cardId.getOld = function (cardId) {
+    let info = this.getCardIdInfo(cardId);
+    return info.old;
+};
+
+cardId.isCardId18 = function (cardId) {
+    let info = this.getCardIdInfo(cardId);
+    return info.isCard;
+};
+/**
+ * 得到身份证相关信息
+ * @param {String} cardId
+ * @return Object
+ */
+cardId.getCardIdInfo = function (cardId,datestr) {
+    let aCity = {
+        11: "北京",
+        12: "天津",
+        13: "河北",
+        14: "山西",
+        15: "内蒙古",
+        21: "辽宁",
+        22: "吉林",
+        23: "黑龙江",
+        31: "上海",
+        32: "江苏",
+        33: "浙江",
+        34: "安徽",
+        35: "福建",
+        36: "江西",
+        37: "山东",
+        41: "河南",
+        42: "湖北",
+        43: "湖南",
+        44: "广东",
+        45: "广西",
+        46: "海南",
+        50: "重庆",
+        51: "四川",
+        52: "贵州",
+        53: "云南",
+        54: "西藏",
+        61: "陕西",
+        62: "甘肃",
+        63: "青海",
+        64: "宁夏",
+        65: "新疆",
+        71: "台湾",
+        81: "香港",
+        82: "澳门",
+        91: "国外"
+    };
+    let iSum = 0;
+
+    let obj = {
+        isCard: false,
+        msg: "",
+        cardId: cardId,
+        provinceId: -1,
+        provinceName: "其它",
+        cardAddress: "其它",
+        birthday: "",
+        year: -1,
+        month: -1,
+        day: -1,
+        days:-1,
+        old: -1,
+        sex: "其它"
+    };
+    if (!/^\d{17}(\d|x)$/i.test(cardId)) {
+        obj.isCard = false;
+        obj.msg = "你输入的身份证长度或格式错误";
+        return obj;
+    }
+    cardId = cardId.replace(/x$/i, "a");
+    if (aCity[parseInt(cardId.substr(0, 2))] === null) {
+        obj.isCard = false;
+        obj.msg = "你的身份证地区非法";
+        return obj;
+    }
+    let sBirthday = cardId.substr(6, 4) + "-" + Number(cardId.substr(10, 2))
+        + "-" + Number(cardId.substr(12, 2));
+    let d = new Date(sBirthday.replace(/-/g, "/"));
+    let ymdstr = d.getFullYear() + '-' + Math.floor(d.getMonth() + 1) + '-' + d.getDate();
+    if (sBirthday !== ymdstr) {
+        obj.isCard = false;
+        obj.msg = "身份证上的出生日期非法";
+        return obj;
+    }
+    for (let i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(cardId.charAt(17 - i), 11);
+    if (iSum % 11 !== 1) {
+        obj.isCard = false;
+        obj.msg = "你输入的身份证号非法";
+        return obj;
+    }
+    obj.isCard = true;
+    obj.msg = "身份证合法";
+    obj.provinceId = Math.floor(cardId.substr(0, 2));
+    obj.provinceName = aCity[parseInt(obj.provinceId)];
+    obj.cardAddress = this.getAddress(cardId);
+    let timestr = this.getBirthday(cardId);
+    obj.birthday = timestr;
+    obj.year = Math.floor(timestr.split('-')[0]);
+    obj.month = Math.floor(timestr.split('-')[1]);
+    obj.day = Math.floor(timestr.split('-')[2]);
+    obj.sex = (cardId.substr(16, 1) % 2 ? "男" : "女");
+
+    datestr = datestr || new Date();
+    obj.old = yearMinus(new Date(timestr), new Date(datestr));
+    obj.days = Math.floor((new Date(datestr)-new Date(timestr))/(1000 * 60 * 60 * 24));
+    function yearMinus(startDate, endDate) {
+        let y1 = startDate.getFullYear();
+        let m1 = startDate.getMonth() + 1;
+        let d1 = startDate.getDate();
+
+        let y2 = endDate.getFullYear();
+        let m2 = endDate.getMonth() + 1;
+        let d2 = endDate.getDate();
+
+        let year = y2 - y1;
+        if (m1 > m2) {
+            year--;
+        } else if (m1 === m2) {
+            if (d1 > d2) {
+                year--;
+            }
+        } else {
+        }
+        return year;
+    }
+
+    // let a=aCity[parseInt(cardId.substr(0,2))]+","+sBirthday+","+(cardId.substr(16,1)%2?"男":"女");//此次还可以判断出输入的身份证号的人性别
+    return obj;
+};
+/**
+ * @description 得到随机身份证号码
+ * @return {String}
+ */
+cardId.getRandCardId = function (ymd, address) {
+    let coefficientArray = ["7", "9", "10", "5", "8", "4", "2", "1", "6", "3", "7", "9", "10", "5", "8", "4", "2"];// 加权因子
+    let lastNumberArray = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];// 校验码
+
+    let areas = Object.keys(areaInfo);
+    let index = Math.floor(Math.random()*areas.length);
+    address = address || areas[index];
+    // address = address || "420101"; // 住址
+    // let birthday = "20160103"; // 生日
+    // let index = Math.floor(Math.random() * areas.length);
+    let birthday = ymd || getRandYear();
+
+    function getRandYear() {
+        let maxY = (new Date()).getFullYear();
+        let minY = maxY - 150;
+        let y = Math.floor(Math.random() * (maxY - minY + 1) + minY);
+        let m = Math.floor(Math.random() * (12 - 1 + 1) + 1);
+        let d = 0;
+        if ([1, 3, 5, 7, 8, 10, 12].indexOf(m) > -1) {
+            d = Math.floor(Math.random() * (31 - 1 + 1) + 1);
+        }
+        if ([4, 6, 9, 11].indexOf(m) > -1) {
+            d = Math.floor(Math.random() * (30 - 1 + 1) + 1);
+        }
+        if (m === 2) {
+            if ((y % 4 === 0 && y % 100 !== 0) || y % 400 === 0) {
+                d = Math.floor(Math.random() * (28 - 1 + 1) + 1);
+            } else {
+                d = Math.floor(Math.random() * (27 - 1 + 1) + 1);
+            }
+        }
+        m = m < 10 ? '0' + m : m;
+        d = d < 10 ? '0' + d : d;
+        return '' + y + m + d;
+    }
+
+    let s = Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString() + Math.floor(Math.random() * 10).toString();
+
+    let array = (address + birthday + s).split("");
+    let total = 0;
+    for (let i = 0; i < array.length; i++) {
+        total = total + parseInt(array[i]) * parseInt(coefficientArray[i]);
+    }
+    let lastNumber = lastNumberArray[parseInt(total % 11)];
+    return address + birthday + s + lastNumber;
+};
+
+
+export default cardId;

src/config/mUtil/dateUtil.js

@@ -0,0 +1,309 @@
+/**
+ * Created by web_developer_02 on 2017/12/1
+ */
+let dateUtil = {};
+
+/**
+ * @param {String} year
+ * @param {String} month
+ * @description 得到当前月的天数
+ * */
+dateUtil.getDays = function(year,month){
+    return new Date(year,month,0).getDate();
+};
+/**
+ * @param {String} date
+ * @description 得到当前日期是星期几
+ * */
+dateUtil.getWeekDay = function (date) {
+  return new Date(date).getDay();
+};
+/**
+ * @param {String} date
+ * @description 获取前一天日期 传入指定时间
+ * */
+dateUtil.before = function (date) {
+  let d = date;
+  d = new Date(d);
+  d = +d - 10006060 / 3 * 24;
+  d = new Date(d);
+  //格式化
+  let year = ";" + d.getFullYear() + ";";
+  let month = ";" + (d.getMonth() - 1 + 1 + 1) + ";";
+  let day = ";" + d.getDate() + ";";
+  if (year.length < 4) {
+    year = "0" + year;
+  }
+  if (month.length < 4) {
+    month = "0" + month;
+  }
+  if (day.length < 4) {
+    day = "0" + day;
+  }
+  let datestr = year + "-" + month + "-" + day;
+  datestr = datestr.replace(/;/g, "");
+  return datestr;
+};
+/**
+ * @param {Number} addDayCount
+ * @param {String} curDate
+ * @description 获取指定日期的前后几天
+ * */
+dateUtil.getDateByDay = function (addDayCount, curDate) {
+  let d = new Date(curDate);
+  d.setDate(d.getDate() + addDayCount); //获取AddDayCount天后的日期
+  //格式化
+  let year = ";" + d.getFullYear() + ";";
+  let month = ";" + (d.getMonth() - 1 + 1 + 1) + ";";
+  let day = ";" + d.getDate() + ";";
+  if (year.length < 4) {
+    year = "0" + year;
+  }
+  if (month.length < 4) {
+    month = "0" + month;
+  }
+  if (day.length < 4) {
+    day = "0" + day;
+  }
+  let datestr = year + "-" + month + "-" + day;
+  datestr = datestr.replace(/;/g, "");
+  return datestr;
+};
+/**
+ * @param {String} date
+ * @description 获取后一天日期  传入指定时间
+ * */
+dateUtil.after = function (date) {
+  let d = date;
+  d = new Date(d);
+  d = +d + 10006060 / 3 * 24;
+  d = new Date(d);
+  //格式化
+  let year = ";" + d.getFullYear() + ";";
+  let month = ";" + (d.getMonth() - 1 + 1 + 1) + ";";
+  let day = ";" + d.getDate() + ";";
+  if (year.length < 4) {
+    year = "0" + year;
+  }
+  if (month.length < 4) {
+    month = "0" + month;
+  }
+  if (day.length < 4) {
+    day = "0" + day;
+  }
+  let datestr = year + "-" + month + "-" + day;
+  datestr = datestr.replace(/;/g, "");
+  return datestr;
+};
+//得到下个月的当前日期
+dateUtil.changeMonth=function(datestr,monthCount){
+    let date = datestr;
+    let arr = date.split('-');
+    let year = arr[0]; //获取当前日期的年份
+    let month = arr[1]; //获取当前日期的月份
+    let day = arr[2]; //获取当前日期的日
+    let days = new Date(year, month, 0);
+    days = days.getDate(); //获取当前日期中的月的天数
+    let year2 = year;
+    let month2 = parseInt(month) + monthCount;
+    if(month2 === 13) {
+        year2 = parseInt(year2) + monthCount;
+        month2 = 1;
+    }
+    let day2 = day;
+    let days2 = new Date(year2, month2, 0);
+    days2 = days2.getDate();
+    if(day2 > days2) {
+        day2 = days2;
+    }
+    if(month2 < 10) {
+        month2 = '0' + month2;
+    }
+
+    return year2 + '-' + month2 + '-' + day2;
+};
+//得到年月日
+dateUtil.getYMDByDate = function (datestr){
+    let dateArr = datestr.split('-');
+    return {
+        year:dateArr[0],
+        month:dateArr[1],
+        day:dateArr[2]
+    }
+};
+//得到日期中的年
+dateUtil.getYearByDate = function (datestr) {
+  let dateArr = datestr.split('-');
+  return dateArr[0];
+};
+//得到日期中的月
+dateUtil.getMonthByDate = function (datestr) {
+  let dateArr = datestr.split('-');
+  return dateArr[1];
+};
+//得到日期中的天
+dateUtil.getDayByDate = function (datestr) {
+  let dateArr = datestr.split('-');
+  return dateArr[2];
+};
+/**
+ * @param {Number} nTypeFlag
+ * @description 得到时间组合
+ * */
+dateUtil.getDateTime = function (nTypeFlag) {
+  let tNowTime = new Date();
+  let myYear = ';' + tNowTime.getFullYear() + ';';
+  let myMonth = ';' + (tNowTime.getMonth() - 1 + 1 + 1) + ';';
+  let myDay = ';' + tNowTime.getDate() + ';';
+  let myHour = ';' + tNowTime.getHours() + ';';
+  let myMinu = ';' + tNowTime.getMinutes() + ';';
+  let mySecond = ';' + tNowTime.getSeconds() + ';';
+
+  if (myMonth.length < 4) myMonth = '0' + myMonth;
+  if (myDay.length < 4) myDay = '0' + myDay;
+  if (myHour.length < 4) myHour = '0' + myHour;
+  if (myMinu.length < 4) myMinu = '0' + myMinu;
+  if (mySecond.length < 4) mySecond = '0' + mySecond;
+
+  let cNewTimeStr;
+  //alert(tNowTime);
+  switch (nTypeFlag + 1 - 1) {
+    case 0:
+      cNewTimeStr = myYear + '-' + myMonth + '-' + myDay;
+      break;
+    case 1:
+      cNewTimeStr = myYear + myMonth + myDay;
+      break;
+    case 2:
+      cNewTimeStr = myHour + ':' + myMinu + ':' + mySecond;
+      break;
+    case 3:
+      cNewTimeStr = myHour + myMinu + mySecond;
+      break;
+    case 4:
+      cNewTimeStr = myYear + myMonth + myDay + myHour + myMinu + mySecond;
+      break;
+    case 5:
+      cNewTimeStr = myYear + '年' + myMonth + '月' + myDay + '日';
+      break;
+    case 6:
+      cNewTimeStr = myYear;
+      break;
+    case 7:
+      cNewTimeStr = myYear + '-' + myMonth;
+      break;
+    default:
+      cNewTimeStr = myYear + '-' + myMonth + '-' + myDay + ' ' + myHour + ':' + myMinu + ':' + mySecond;
+      break;
+  }
+
+  cNewTimeStr = cNewTimeStr.replace(/;/g, "");
+
+  return cNewTimeStr;
+};
+
+/**
+ * 得到日期在一年当中的周数
+ */
+dateUtil.getYearWeeks = function (date) {
+  let commericalyear = this.getYearByDate(date);
+  let date2 = this.getYearFirstWeekDate(commericalyear);
+  date = new Date(date);
+  let day1 = date.getDay();
+  if (day1 === 0) day1 = 7;
+  let day2 = date2.getDay();
+  if (day2 === 0) day2 = 7;
+  let d = Math.round((date.getTime() - date2.getTime() + (day2 - day1) * (24 * 60 * 60 * 1000)) / 86400000);
+  return Math.floor(d / 7) + 1;
+};
+/**
+ * 得到一年之中的第一周的日期
+ */
+dateUtil.getYearFirstWeekDate = function (commericalyear) {
+  let yearfirstdaydate = new Date(commericalyear, 0, 1);
+  let daynum = yearfirstdaydate.getDay();
+  let monthday = yearfirstdaydate.getDate();
+  if (daynum === 0) daynum = 7;
+  if (daynum <= 4) {
+    return new Date(yearfirstdaydate.getFullYear(), yearfirstdaydate.getMonth(), monthday + 1 - daynum);
+  } else {
+    return new Date(yearfirstdaydate.getFullYear(), yearfirstdaydate.getMonth(), monthday + 8 - daynum);
+  }
+};
+/*
+ * 方法作用：【计算2个日期之间的天数】
+ * 传入格式：yyyy-mm-dd(2015-01-31)
+ * 使用方法：dateUtil.dayMinus(startDate,endDate);
+ * @startDate {Date}起始日期
+ * @endDate {Date}结束日期
+ * @return endDate - startDate的天数差
+ */
+dateUtil.getDayMinus = function (startDate, endDate) {
+  if (startDate instanceof Date && endDate instanceof Date) {
+    let days = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
+    return days;
+  } else {
+    return "Param error,date type!";
+  }
+};
+/**
+ * 由秒数转化成hh:mm:ss格式
+ * @param {Number} seconds
+ */
+dateUtil.stringTimeTohhmmss = function (seconds) {
+  let hh;
+  let mm;
+  let ss;
+  if (seconds === null || seconds < 0) {
+    return;
+  }
+  let pseconds = parseInt(seconds);
+  //得到小时
+  hh = pseconds / 3600 | 0;
+  pseconds = parseInt(pseconds) - parseInt(hh) * 3600;
+  if (parseInt(hh) < 10) {
+    hh = "0" + hh;
+  }
+  if (parseInt(hh) >= 24) {
+    hh = "00";
+  }
+  //得到分钟
+  mm = parseInt(pseconds) / 60 | 0;
+  //得到秒
+  ss = parseInt(pseconds) - parseInt(mm) * 60;
+  if (parseInt(mm) < 10) {
+    mm = "0" + mm;
+  }
+  if (parseInt(ss) < 10) {
+    ss = "0" + ss;
+  }
+  return hh + ":" + mm + ":" + ss;
+};
+/**
+ * 由秒数转化成mm:ss格式
+ * @param {Number} seconds
+ */
+dateUtil.stringTimeTommss = function (seconds) {
+    let mm;
+    let ss;
+    if (seconds === null || seconds < 0) {
+        return '00:00';
+    }
+    let pseconds = parseInt(seconds);
+    //得到分钟
+    mm = parseInt(pseconds) / 60 | 0;
+    //得到秒
+    ss = parseInt(pseconds) - parseInt(mm) * 60;
+    if (parseInt(mm) < 10) {
+        mm = "0" + mm;
+    }
+    if(parseInt(mm) >= 60){
+      mm = "00";
+    }
+    if (parseInt(ss) < 10) {
+        ss = "0" + ss;
+    }
+    return mm + ":" + ss;
+};
+
+export default dateUtil;

src/config/mUtil/prototype.js

@@ -0,0 +1,641 @@
+/**
+ * Created by fuhc on 2017/11/8
+ */
+/*================================================ Array 分类 ==============================================*/
+/**
+ * @return {Number} index
+ */
+Object.defineProperty(Array.prototype, 'findObjIndex', {
+    value: function (key, val) {
+        let index = -1;
+        for (let i = 0; i < this.length; i++) {
+            let dict = this[i];
+            if (typeof(dict) === 'object') {
+                if (dict.hasOwnProperty(key) && dict[key] === val) {
+                    index = i;
+                    break;
+                }
+            } else {
+                index = -1;
+            }
+        }
+        return index;
+    }
+});
+/*
+* @description 清空数组
+*/
+Object.defineProperty(Array.prototype, 'removeAll', {
+    value: function () {
+        this.splice(0, this.length);
+    }
+});
+/*
+* @description 删除数组中的指定下标元素
+*/
+Object.defineProperty(Array.prototype, 'removeAtIndex', {
+    value: function (index) {
+        if (isNaN(index) || index > this.length) {
+            return false;
+        }
+        this.splice(index, 1);
+    }
+});
+/*
+* @description 插件元素到指定下村
+*/
+Object.defineProperty(Array.prototype, 'pushItemAtIndex', {
+    value: function (item, index) {
+        if (isNaN(index) || index > this.length) {
+            return false;
+        }
+        this.splice(index, 0, item);
+    }
+});
+
+/*================================================ Object 分类 ==============================================*/
+/**
+ * @return url 参数字符串
+ */
+Object.defineProperty(Object.prototype, 'URLQueryString', {
+    value: function () {
+        let arr = [];
+        for (let key in this) {
+            if (typeof(this[key]) !== 'function') {
+                let str = key + '=' + this[key];
+                arr.push(str);
+            }
+        }
+        return arr.join('&');
+    }
+});
+/**
+ * @param  {String} cstr - URL-param字符串
+ * @return Object
+ */
+Object.defineProperty(Object, 'objectWithURLQuery', {
+    value: function (cstr) {
+        cstr = cstr || location.search;
+        let search = cstr.replace(/^\s+/, '').replace(/\s+$/, '').match(/([^?#]*)(#.*)?$/);//提取location.search中'?'后面的部分
+        if (!search) {
+            return {};
+        }
+        let searchStr = search[1];
+        let searchHash = searchStr.split('&');
+
+        let ret = {};
+        for (let i = 0, len = searchHash.length; i < len; i++) { //这里可以调用each方法
+            let pair = searchHash[i];
+            if ((pair = pair.split('='))[0]) {
+                let key = decodeURIComponent(pair.shift());
+                let value = pair.length > 1 ? pair.join('=') : pair[0];
+                if (value !== undefined) {
+                    value = decodeURIComponent(value);
+                }
+                if (key in ret) {
+                    if (ret[key].constructor !== Array) {
+                        ret[key] = [ret[key]];
+                    }
+                    ret[key].push(value);
+                } else {
+                    ret[key] = value;
+                }
+            }
+        }
+        return ret;
+    }
+});
+
+/*================================================ Date分类 ==============================================*/
+
+/**
+ * 对Date的扩展，将 Date 转化为指定格式的String
+ * 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
+ * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
+ * eg:(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
+ * (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
+ * 将日期格式化
+ * @param {String} fmt
+ * @return String
+ */
+Object.defineProperty(Date.prototype, 'dateFormat', {
+    value: function (fmt) {
+        let 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 (let 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;
+    }
+});
+/** * 对Date的扩展，将 Date 转化为指定格式的String * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q)
+ 可以用 1-2 个占位符 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) * eg: * (new
+ Date()).pattern("yyyy-MM-dd hh:mm:ss.S")==> 2006-07-02 08:09:04.423
+ * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
+ * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
+ * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
+ * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
+ */
+Object.defineProperty(Date.prototype, 'datePattern', {
+    value: function (fmt) {
+        let o = {
+            "M+": this.getMonth() + 1, //月份
+            "d+": this.getDate(), //日
+            "h+": this.getHours() % 12 === 0 ? 12 : this.getHours() % 12, //小时
+            "H+": this.getHours(), //小时
+            "m+": this.getMinutes(), //分
+            "s+": this.getSeconds(), //秒
+            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
+            "S": this.getMilliseconds() //毫秒
+        };
+        let week = {
+            "0": "/u65e5",
+            "1": "/u4e00",
+            "2": "/u4e8c",
+            "3": "/u4e09",
+            "4": "/u56db",
+            "5": "/u4e94",
+            "6": "/u516d"
+        };
+
+        if (/(y+)/.test(fmt)) {
+            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+        }
+        if (/(E+)/.test(fmt)) {
+            fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[this.getDay() + ""]);
+            fmt = unescape(fmt.replace(/\u/g, '%u')).replace(/\//g, '');
+        }
+        for (let 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;
+    }
+});
+/*
+ * 方法作用：【计算2个日期之间的天数】
+ * 传入格式：yyyy-mm-dd(2015-01-31)
+ * @startDate {Date}起始日期
+ * @endDate {Date}结束日期
+ * @return endDate - startDate的天数差
+ */
+Object.defineProperty(Date, 'dayMinus', {
+    value: function (startDate, endDate) {
+        if (startDate instanceof Date && endDate instanceof Date) {
+            return Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24));
+        } else {
+            return "Param error,date type!";
+        }
+    }
+});
+/*
+ * 方法作用：【计算2个日期之间的年数】
+ * 传入格式：yyyy-mm-dd(2015-01-31)
+ * @startDate {Date}起始日期
+ * @endDate {Date}结束日期
+ * @return endDate - startDate的年数差
+ */
+Object.defineProperty(Date, 'yearMinus', {
+    value: function (startDate, endDate) {
+        let y1 = startDate.getFullYear();
+        let m1 = startDate.getMonth() + 1;
+        let d1 = startDate.getDate();
+
+        let y2 = endDate.getFullYear();
+        let m2 = endDate.getMonth() + 1;
+        let d2 = endDate.getDate();
+
+        let year = y2 - y1;
+        if (m1 > m2) {
+            year--;
+        } else if (m1 === m2) {
+            if (d1 > d2) {
+                year--;
+            }
+        } else {
+        }
+        return year;
+    }
+});
+/*================================================ String分类 ==============================================*/
+
+
+/*================================================ (String 类方法) ==============================================*/
+/**
+ * @description 得到随机姓名
+ * @return String
+ */
+Object.defineProperty(String, 'getRandName', {
+    value: function (type) {
+        type = type || 1;
+        let cstr1 =
+            "赵,钱,孙,李,周,吴,郑,王,冯,陈," +
+            "褚,卫,蒋,沈,韩,杨,朱,秦,尤,许," +
+            "何,吕,施,张,孔,曹,严,华,金,魏," +
+            "陶,姜,戚,谢,邹,喻,柏,水,窦,章," +
+            "云,苏,潘,葛,奚,范,彭,郎,鲁,韦," +
+            "昌,马,苗,凤,花,方,俞,任,袁,柳," +
+            "酆,鲍,史,唐,费,廉,岑,薛,雷,贺," +
+            "倪,汤,滕,殷,罗,毕,郝,邬,安,常," +
+            "乐,于,时,傅,皮,卞,齐,康,伍,余," +
+            "元,卜,顾,孟,平,黄,和,穆,萧,尹";
+        let familyNames = cstr1.split(',');
+        let cstr3 =
+            "司马,诸葛,呼延,欧阳,太史,端木,上官," +
+            "东方,南宫,尉迟,宇文,长孙,司徒,令狐," +
+            "公孙,慕容,百里,东郭,达奚,拓跋,申屠";
+        let comFamilyNames = cstr3.split(',');
+        let cstr2 = "子璇,淼,国栋,夫子,瑞堂,甜,敏,尚,国贤,贺祥,晨涛," +
+            "昊轩,易轩,益辰,益帆,益冉,瑾春,瑾昆,春齐,杨,文昊," +
+            "东东,雄霖,浩晨,熙涵,溶溶,冰枫,欣欣,宜豪,欣慧,建政," +
+            "美欣,淑慧,文轩,文杰,欣源,忠林,榕润,欣汝,慧嘉,新建," +
+            "建林,亦菲,林,冰洁,佳欣,涵涵,禹辰,淳美,泽惠,伟洋," +
+            "涵越,润丽,翔,淑华,晶莹,凌晶,苒溪,雨涵,嘉怡,佳毅," +
+            "子辰,佳琪,紫轩,瑞辰,昕蕊,萌,明远,欣宜,泽远,欣怡," +
+            "佳怡,佳惠,晨茜,晨璐,运昊,汝鑫,淑君,晶滢,润莎,榕汕," +
+            "佳钰,佳玉,晓庆,一鸣,语晨,添池,添昊,雨泽,雅晗,雅涵," +
+            "清妍,诗悦,嘉乐,晨涵,天赫,玥傲,佳昊,天昊,萌萌,若萌";
+        let givenNames = cstr2.split(',');
+        if (type !== 1) familyNames = comFamilyNames;
+        let i = Math.floor(familyNames.length * Math.random());
+        let familyName = familyNames[i];
+
+        let j = Math.floor(givenNames.length * Math.random());
+        let givenName = givenNames[j];
+        return familyName + givenName;
+    }
+});
+
+/**
+ * @description 得到随机手机号
+ * @return String
+ */
+Object.defineProperty(String, 'getRandMobile', {
+    value: function () {
+        let prefixArray = ["130", "131", "132", "133", "135", "137", "138", "170", "187", "189"];
+        let i = parseInt(10 * Math.random());
+        let prefix = prefixArray[i];
+        for (let j = 0; j < 8; j++) {
+            prefix = prefix + Math.floor(Math.random() * 10);
+        }
+        return prefix;
+    }
+});
+/**
+ * @description 得到uuid
+ */
+Object.defineProperty(String, 'getUUID', {
+    value: function () {
+        let d = new Date().getTime();
+        let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            let r = (d + Math.random() * 16) % 16 | 0;
+            d = Math.floor(d / 16);
+            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+        });
+        return uuid;
+    }
+});
+/**
+ * @param {Number} len
+ * @description 得到随机字符串
+ * */
+Object.defineProperty(String, 'getRdStr', {
+    value: function (len) {
+        len = len || 1;
+        let rdmString = "";
+        for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2)) ;
+        return rdmString.substr(0, len);
+    }
+});
+/**
+ * @param {Number} num
+ * @description 比如： 1：一  11：十一  101：一百零一
+ * */
+Object.defineProperty(String,'numberToChinese',{
+    value: function(num){
+        var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");
+        var BB = new Array("", "十", "百", "仟", "萬", "億", "点", "");
+        var a = ("" + num).replace(/(^0*)/g, "").split("."),
+            k = 0,
+            re = "";
+        for(var i = a[0].length - 1; i >= 0; i--) {
+            switch(k) {
+                case 0:
+                    re = BB[7] + re;
+                    break;
+                case 4:
+                    if(!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$")
+                            .test(a[0]))
+                        re = BB[4] + re;
+                    break;
+                case 8:
+                    re = BB[5] + re;
+                    BB[7] = BB[5];
+                    k = 0;
+                    break;
+            }
+            if(k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
+                re = AA[0] + re;
+            if(a[0].charAt(i) != 0)
+                re = AA[a[0].charAt(i)] + BB[k % 4] + re;
+            k++;
+        }
+
+        if(a.length > 1) // 加上小数部分(如果有小数部分)
+        {
+            re += BB[6];
+            for(var i = 0; i < a[1].length; i++)
+                re += AA[a[1].charAt(i)];
+        }
+        if(re == '一十')
+            re = "十";
+        if(re.match(/^一/) && re.length == 3)
+            re = re.replace("一", "");
+        return re;
+    }
+})
+/**
+ * @param {Number} num
+ * @description 比如： 20304 贰万零叁佰零肆元贰角
+ * */
+Object.defineProperty(String,'moneyToChinese',{
+    value: function(Num){
+        //判断如果传递进来的不是字符的话转换为字符
+        if(typeof Num == "number") {
+            Num = new String(Num);
+        };
+        Num = Num.replace(/,/g, "") //替换tomoney()中的“,”
+        Num = Num.replace(/ /g, "") //替换tomoney()中的空格
+        Num = Num.replace(/￥/g, "") //替换掉可能出现的￥字符
+        if(isNaN(Num)) { //验证输入的字符是否为数字
+            //alert("请检查小写金额是否正确");
+            return "";
+        };
+        //字符处理完毕后开始转换，采用前后两部分分别转换
+        var part = String(Num).split(".");
+        var newchar = "";
+        //小数点前进行转化
+        for(let i = part[0].length - 1; i >= 0; i--) {
+            if(part[0].length > 10) {
+                return "";
+                //若数量超过拾亿单位，提示
+            }
+            var tmpnewchar = ""
+            var perchar = part[0].charAt(i);
+            switch(perchar) {
+                case "0":
+                    tmpnewchar = "零" + tmpnewchar;
+                    break;
+                case "1":
+                    tmpnewchar = "壹" + tmpnewchar;
+                    break;
+                case "2":
+                    tmpnewchar = "贰" + tmpnewchar;
+                    break;
+                case "3":
+                    tmpnewchar = "叁" + tmpnewchar;
+                    break;
+                case "4":
+                    tmpnewchar = "肆" + tmpnewchar;
+                    break;
+                case "5":
+                    tmpnewchar = "伍" + tmpnewchar;
+                    break;
+                case "6":
+                    tmpnewchar = "陆" + tmpnewchar;
+                    break;
+                case "7":
+                    tmpnewchar = "柒" + tmpnewchar;
+                    break;
+                case "8":
+                    tmpnewchar = "捌" + tmpnewchar;
+                    break;
+                case "9":
+                    tmpnewchar = "玖" + tmpnewchar;
+                    break;
+            }
+            switch(part[0].length - i - 1) {
+                case 0:
+                    tmpnewchar = tmpnewchar + "元";
+                    break;
+                case 1:
+                    if(perchar != 0) tmpnewchar = tmpnewchar + "拾";
+                    break;
+                case 2:
+                    if(perchar != 0) tmpnewchar = tmpnewchar + "佰";
+                    break;
+                case 3:
+                    if(perchar != 0) tmpnewchar = tmpnewchar + "仟";
+                    break;
+                case 4:
+                    tmpnewchar = tmpnewchar + "万";
+                    break;
+                case 5:
+                    if(perchar != 0) tmpnewchar = tmpnewchar + "拾";
+                    break;
+                case 6:
+                    if(perchar != 0) tmpnewchar = tmpnewchar + "佰";
+                    break;
+                case 7:
+                    if(perchar != 0) tmpnewchar = tmpnewchar + "仟";
+                    break;
+                case 8:
+                    tmpnewchar = tmpnewchar + "亿";
+                    break;
+                case 9:
+                    tmpnewchar = tmpnewchar + "拾";
+                    break;
+            }
+            var newchar = tmpnewchar + newchar;
+        }
+        //小数点之后进行转化
+        if(Num.indexOf(".") != -1) {
+            if(part[1].length > 2) {
+                // alert("小数点之后只能保留两位,系统将自动截断");
+                part[1] = part[1].substr(0, 2)
+            }
+            for(i = 0; i < part[1].length; i++) {
+                tmpnewchar = ""
+                perchar = part[1].charAt(i)
+                switch(perchar) {
+                    case "0":
+                        tmpnewchar = "零" + tmpnewchar;
+                        break;
+                    case "1":
+                        tmpnewchar = "壹" + tmpnewchar;
+                        break;
+                    case "2":
+                        tmpnewchar = "贰" + tmpnewchar;
+                        break;
+                    case "3":
+                        tmpnewchar = "叁" + tmpnewchar;
+                        break;
+                    case "4":
+                        tmpnewchar = "肆" + tmpnewchar;
+                        break;
+                    case "5":
+                        tmpnewchar = "伍" + tmpnewchar;
+                        break;
+                    case "6":
+                        tmpnewchar = "陆" + tmpnewchar;
+                        break;
+                    case "7":
+                        tmpnewchar = "柒" + tmpnewchar;
+                        break;
+                    case "8":
+                        tmpnewchar = "捌" + tmpnewchar;
+                        break;
+                    case "9":
+                        tmpnewchar = "玖" + tmpnewchar;
+                        break;
+                }
+                if(i == 0) tmpnewchar = tmpnewchar + "角";
+                if(i == 1) tmpnewchar = tmpnewchar + "分";
+                newchar = newchar + tmpnewchar;
+            }
+        }
+        //替换所有无用汉字
+        while(newchar.search("零零") != -1)
+            newchar = newchar.replace("零零", "零");
+        newchar = newchar.replace("零亿", "亿");
+        newchar = newchar.replace("亿万", "亿");
+        newchar = newchar.replace("零万", "万");
+        newchar = newchar.replace("零元", "元");
+        newchar = newchar.replace("零角", "");
+        newchar = newchar.replace("零分", "");
+        if(newchar.charAt(newchar.length - 1) == "元") {
+            newchar = newchar + "整"
+        }
+        return newchar;
+    }
+})
+
+/*================================================ (String 实例方法) ==============================================*/
+/**
+ * 将字符串拼接
+ * @return
+ */
+Object.defineProperty(String.prototype, 'format', {
+    value: function () {
+        if (arguments.length === 0) return this;
+        let param = arguments[0];
+        let s = this;
+        if (typeof(param) === 'object') {
+            for (let key in param)
+                s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
+            return s;
+        } else {
+            for (let i = 0; i < arguments.length; i++)
+                s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
+            return s;
+        }
+    }
+});
+
+/**
+ * 保留中文
+ * @return String
+ */
+Object.defineProperty(String.prototype, 'onlyHaveCN', {
+    value: function () {
+        let regEx = /[^\u4e00-\u9fa5\uf900-\ufa2d]/g;
+        return this.replace(regEx, '');
+    }
+});
+/**
+ * 统计含有的子字符串的个数
+ * @return String
+ */
+Object.defineProperty(String.prototype, 'countMatches', {
+    value: function (sub) {
+        if (this.isEmpty(this) || this.isEmpty(sub)) {
+            return 0;
+        }
+        let count = 0;
+        let index = 0;
+        while ((index === this.indexOf(sub, index)) !== -1) {
+            index += sub.length;
+            count++;
+        }
+        return count;
+    }
+});
+
+/**
+ * 判断字符串是否为空，若为空则返回true否则返回false
+ * @return true或者false
+ **/
+Object.defineProperty(String.prototype, 'isEmpty', {
+    value: function () {
+        let str = this.replace(/(^\s*)|(\s*$)/g, "");
+        if (str === "" || str.toLowerCase() === "null" || str.length <= 0) {
+            return true;
+        } else {
+            return false;
+        }
+
+    }
+});
+/**
+ * 判断是否是中文
+ * @returns {Boolean}
+ */
+Object.defineProperty(String.prototype, 'isChine', {
+    value: function () {
+        let reg = /^([u4E00-u9FA5]|[uFE30-uFFA0])*$/;
+        if (reg.test(this)) {
+            return false;
+        }
+        return true;
+    }
+});
+//字符串编码
+Object.defineProperty(String.prototype, 'Encode', {
+    value: function () {
+        return encodeURIComponent(this);
+    }
+});
+//字符串解码
+Object.defineProperty(String.prototype, 'Decode', {
+    value: function () {
+        return decodeURIComponent(this);
+    }
+});
+/**
+ * 将一个字符串用给定的字符变成数组
+ * @param tag
+ * @return Array
+ */
+Object.defineProperty(String.prototype, 'Array', {
+    value: function (tag) {
+        tag = tag || ',';
+        if (this.indexOf(tag) !== -1) {
+            return this.split(tag);
+        } else {
+            if (this !== '') {
+                return [this.toString()];
+            } else {
+                return [];
+            }
+        }
+    }
+});
+/**
+ * 字符串替换全部
+ * @return String
+ */
+Object.defineProperty(String.prototype, 'replaceAll', {
+    value: function (s1, s2) {
+        return this.replace(new RegExp(s1, 'gm'), s2);
+    }
+});
+
+

src/config/mUtil/tool.js

@@ -0,0 +1,466 @@
+import './prototype'
+
+import {printLog} from "../env";
+
+let tool = {};
+/**
+ * @description 延迟函数
+ * */
+tool.delay = (function () {
+    let timer = 0;
+    return function (callback, time) {
+        clearTimeout(timer);
+        timer = setTimeout(callback, time);
+    };
+})();
+/**
+ * @param {Object} param
+ * @description 定时器
+ * */
+tool.timer = function (param) {
+    let data = {
+        toDo: param.toDo || function () {
+        },
+        didStop: param.didStop || function () {
+        },
+        interval: param.interval || 1000,
+        repeats: param.repeats || true
+    };
+    let timer_t = null;
+    let count = 1;
+    let obj = {
+        clear: function () {
+            clearInterval(timer_t);
+            data.didStop();
+        }
+    };
+    timer_t = setInterval(function () {
+        if (data.repeats) {
+            data.toDo(obj);
+        } else {
+            if (count > 0) {
+                count--;
+                data.toDo(obj);
+            } else {
+                clearInterval(timer_t);
+                timer_t = null;
+                data.didStop();
+            }
+        }
+    }, data.interval);
+    return timer_t;
+};
+/*
+ * @param {Object} obj
+ * @description 克隆一个对象
+ * */
+tool.clone = function (obj) {
+    // Handle the 3 simple types, and null or undefined
+    if (null === obj || "object" !== typeof obj) return obj;
+
+    // Handle Date
+    if (obj instanceof Date) {
+        let copy = new Date();
+        copy.setTime(obj.getTime());
+        return copy;
+    }
+
+    // Handle Array
+    if (obj instanceof Array) {
+        let copy = [];
+        for (let i = 0, len = obj.length; i < len; ++i) {
+            copy[i] = Object.assign({}, obj[i]);
+        }
+        return copy;
+    }
+
+    // Handle Object
+    if (obj instanceof Object) {
+        return Object.assign({}, obj);
+    }
+    console.warn("Unable to copy obj! Its type isn't supported.");
+    throw new Error("Unable to copy obj! Its type isn't supported.");
+};
+/**description 自定义打印日志*/
+tool.log = function (...type) {
+    if (printLog) {
+        type.forEach(v => {
+            if (typeof(v) === 'object') {
+                console.log(v);
+            } else {
+                console.log('%c' + v, 'color:#666699;');
+            }
+        })
+    }
+};
+/**
+ * @param {String} par
+ * @param {String} specialKey
+ * @description  从URL上获得参数
+ */
+tool.getPar = function (par, specialKey) {
+    //获取当前URL
+    let local_url = document.location.href;
+    local_url = decodeURI(local_url);
+    //获取要取得的get参数位置
+    let get = local_url.indexOf(par + "=");
+    if (get === -1) {
+        return "";
+    }
+    //截取字符串
+    let get_par = local_url.slice(par.length + get + 1);
+
+    //判断特殊par eg:specialKey = toUrl
+    if (par === specialKey) {
+        return get_par;
+    }
+
+    //判断截取后的字符串是否还有其他get参数
+    let nextPar = get_par.indexOf("&");
+    if (nextPar !== -1) {
+        get_par = get_par.slice(0, nextPar);
+    }
+    return get_par;
+};
+/**
+ * @param {String} name
+ * @param {String} value
+ * @param {String} time
+ * @description 设置cookie   eg:time='d30|s30|h24'
+ * */
+tool.setCookie = function (name, value, time) {
+    let strsec = getsec(time);
+    let exp = new Date();
+    exp.setTime(exp.getTime() + strsec * 1);
+    document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString();
+
+    function getsec(str) {
+        let str1 = str.substring(1, str.length) * 1;
+        let str2 = str.substring(0, 1);
+        if (str2 === "s") {
+            return str1 * 1000;
+        } else if (str2 === "h") {
+            return str1 * 60 * 60 * 1000;
+        } else if (str2 === "d") {
+            return str1 * 24 * 60 * 60 * 1000;
+        }
+    }
+};
+/**
+ * @param {String} name
+ * @description 删除指定cookie
+ * */
+tool.delCookie = function (name) {
+    let exp = new Date();
+    exp.setTime(exp.getTime() - 1);
+    let cval = tool.getCookie(name);
+    if (cval !== null)
+        document.cookie = name + "=" + cval + ";path=/;expires=" + exp.toGMTString();
+};
+/**
+ * @param {String} name
+ * @description 得到指定cookie
+ * */
+tool.getCookie = function (name) {
+    let arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
+    if (arr = document.cookie.match(reg))
+        return unescape(arr[2]);
+    else
+        return null;
+};
+tool.getDateTime = function () {
+    let tNowTime = new Date();
+    let myYear = ';' + tNowTime.getFullYear() + ';';
+    let myMonth = ';' + (tNowTime.getMonth() - 1 + 1 + 1) + ';';
+    let myDay = ';' + tNowTime.getDate() + ';';
+    let myHour = ';' + tNowTime.getHours() + ';';
+    let myMinu = ';' + tNowTime.getMinutes() + ';';
+    let mySecond = ';' + tNowTime.getSeconds() + ';';
+
+    if (myMonth.length < 4) myMonth = '0' + myMonth;
+    if (myDay.length < 4) myDay = '0' + myDay;
+    if (myHour.length < 4) myHour = '0' + myHour;
+    if (myMinu.length < 4) myMinu = '0' + myMinu;
+    if (mySecond.length < 4) mySecond = '0' + mySecond;
+
+    let cNewTimeStr;
+    cNewTimeStr = myYear + myMonth + myDay + myHour + myMinu + mySecond;
+    cNewTimeStr = cNewTimeStr.replace(/;/g, "");
+    return cNewTimeStr;
+};
+/**
+ * @param {String} objName
+ * @param {String} objValue
+ * @param {String} time
+ * @description 设置字符串类型的本地缓存
+ * */
+tool.setStorage = function (objName, objValue, time) {
+    time = time || 'd180';
+    let strsec = getsec(time);
+    let nowTime = tool.getDateTime() - 0;
+    let setTime = nowTime + strsec / 1000;
+    let obj = {};
+    obj['maxage'] = setTime;
+    obj['value'] = objValue;
+
+    function getsec(str) {
+        let str1 = str.substring(1, str.length) * 1;
+        let str2 = str.substring(0, 1);
+        if (str2 === "s") {
+            return str1 * 1000;
+        } else if (str2 === "h") {
+            return str1 * 60 * 60 * 1000;
+        } else if (str2 === "d") {
+            return str1 * 24 * 60 * 60 * 1000;
+        }
+    }
+
+    let sto = window.localStorage;
+    if (sto)
+        sto.setItem(objName, JSON.stringify(obj));
+};
+/**
+ * @param {String} objName
+ * @description 读取字符串类型的本地缓存
+ * */
+tool.getStorage = function (objName) {
+    let sto = window.localStorage;
+    let resu = '';
+    if (sto) {
+        let ret = JSON.parse(sto.getItem(objName));
+        if (ret) {
+            let maxage = ret['maxage'] - 0;
+            let nowTime = tool.getDateTime() - 0;
+            if (maxage - nowTime >= 0) {
+                resu = ret['value'];
+            } else {
+                tool.clearStorage(objName);
+            }
+        }
+    }
+    return resu;
+};
+/**
+ * @param {String} objName
+ * @description 清除本地缓存，如没指定名称则为清空所有缓存
+ * */
+tool.clearStorage = function (objName) {
+    let sto = window.localStorage;
+    if (sto) {
+        if (objName)
+            sto.removeItem(objName);
+        else
+            sto.clear();
+    }
+};
+/**
+ * @param {String} objName
+ * @param {Object} json
+ * @param {String} time
+ * @description 设置Json类型的本地缓存
+ * */
+tool.setStorJson = function (objName, json, time) {
+    if (json) tool.setStorage(objName, JSON.stringify(json), time);
+};
+/**
+ * @param {String} objName
+ * @description 读取Json类型的本地缓存
+ * */
+tool.getStorJson = function (objName) {
+    let ret = null;
+    let str = tool.getStorage(objName);
+    if (str)
+        ret = JSON.parse(str);
+    return ret;
+};
+/**
+ * @param {String} str
+ * @description 得到原生dom
+ * */
+tool.navDom = function (str) {
+    return document.querySelectorAll(str);
+};
+/**
+ * @param {String} str
+ * @param {Function} callback
+ * @description 遍历dom 回调中为原生dom
+ * */
+tool.navDomEach = function (str, callback) {
+    let doms = document.querySelectorAll(str);
+    for (let i = 0; i < doms.length; i++) {
+        if (callback) {
+            callback(doms[i], i);
+        }
+    }
+};
+/**
+ * @param {Element} element
+ * @param {String} type
+ * @param {Event} handler
+ * @description 添加监听
+ * */
+tool.addHandler = function (element, type, handler) {
+    if (element.addEventListener) {
+        element.addEventListener(type, handler, false);
+    } else if (element.attachEvent) {
+        element.attachEvent("on" + type, handler);
+    } else {
+        element["on" + type] = handler;
+    }
+};
+/**
+ * @description 得到浏览器
+ * */
+tool.myBrowser = function () {
+    let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
+    let ua = {};
+    let isOpera = userAgent.indexOf("Opera") > -1;
+    //判断是否Opera浏览器
+    ua.isOpera = isOpera;
+    //判断是否Firefox浏览器
+    let isFirefox = userAgent.indexOf("Firefox") > -1;
+    ua.isFirefox = isFirefox;
+    //判断是否Chrome浏览器
+    let isChrome = userAgent.indexOf("Chrome") > -1;
+    ua.isChrome = isChrome;
+    //判断是否Safari浏览器
+    let isSafari = userAgent.indexOf("Safari") > -1;
+    ua.isSafari = isSafari;
+    if (isChrome === isSafari) {
+        ua.isSafari = false;
+    }
+    let isIE = false;
+    let isIE_1_10 = false;
+    let IEVersion = -1;
+    let isEdge = false;
+    let isIE11 = false;
+    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
+        isIE = true;
+        isIE_1_10 = true;
+        //判断是IE几
+        let browser = navigator.appName;
+        let b_version = navigator.appVersion;
+        let version = b_version.split(';');
+        let IENAME = "Microsoft Internet Explorer";
+
+        let trim_Version = version[1].replace(/[ ]/g, "");
+
+        if (IENAME === browser && trim_Version === "MSIE6.0") IEVersion = 6;
+        else if (IENAME === browser && trim_Version === "MSIE7.0") IEVersion = 7;
+        else if (IENAME === browser && trim_Version === "MSIE8.0") IEVersion = 8;
+        else if (IENAME === browser && trim_Version === "MSIE9.0") IEVersion = 9;
+        else IEVersion = 10;
+        // return "IE";
+    } //判断是否IE浏览器
+    if (!!window.ActiveXObject || 'ActiveXObject' in window) {
+        let _isEdge = userAgent.indexOf('Edge') > -1 && !isIE;
+        let _isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
+        isEdge = _isEdge;
+        isIE11 = _isIE11;
+        isIE = true;
+        if (isIE11) IEVersion = 11;
+    }
+    ua.isIE = isIE;
+    ua.isIE_1_10 = isIE_1_10;
+    ua.IEVersion = IEVersion;
+    ua.isEdge = isEdge;
+    ua.isIE11 = isIE11;
+    ua.appType = 'browser';
+    let userA = userAgent.toLocaleLowerCase();
+    let a = userA.match(/Alipay/i);
+    let b = userA.match(/MicroMessenger/i);
+    if (a&& a[0] === 'alipay')
+        ua.appType = 'alipay';
+    else if (b && b[0] === 'micromessenger')
+        ua.appType = 'micromessenger';
+    return ua;
+};
+
+tool.open = function (obj) {
+    let path = obj.path || '';
+    let param = obj.param || {};
+
+    let arr = [];
+    for (let key in param) {
+        let val = param[key] ? param[key] : "";
+        arr.push(key + '=' + val);
+    }
+    let query = arr.join('&');
+    let url = location.origin + '/#' + path + '?' + query;
+    window.open(url)
+};
+tool.urlCommon = function () {
+    let fx_uid = tool.getPar('fx_uid');
+    if (fx_uid === '') {
+        fx_uid = tool.getCookie('fx_uid');
+        if (!fx_uid || fx_uid === 'null' || typeof(fx_uid) === 'undefined' || fx_uid === '') fx_uid = 0;
+    } else {
+        tool.setCookie('fx_uid', fx_uid, 'h12');
+    }
+    return {
+        fx_uid
+    }
+};
+tool.urlCommon();
+tool.$router = {};
+tool.$router.push = function (vm, param) {
+    let urlParam = tool.urlCommon();
+    if (!param.hasOwnProperty('query')) param.query = {};
+    param.query = Object.assign(param.query, urlParam);
+    tool.log(param.query.URLQueryString());
+    tool.log(vm.$router)
+    if(param.name === 'order_pay'){
+        goPayUrl();
+    }else{
+        vm.$router.push(param);
+    }
+    function goPayUrl(){
+        let origin = window.location.origin;
+        let pathname = window.location.pathname;
+        let hash = '?#/main/pay/order_pay?'+param.query.URLQueryString();
+        let url = origin+pathname+hash;
+        window.location.href = url;
+    }
+};
+tool.$router.replace = function(vm, param){
+    let urlParam = tool.urlCommon();
+    if (!param.hasOwnProperty('query')) param.query = {};
+    param.query = Object.assign(param.query, urlParam);
+    if(param.name === 'order_pay'){
+        goPayUrl();
+    }else{
+        vm.$router.replace(param);
+    }
+    function goPayUrl(){
+        let origin = window.location.origin;
+        let hash = '/?#/main/pay/order_pay?'+param.query.URLQueryString();
+        window.location.href = origin+hash;
+    }
+};
+
+tool.addClass = function (obj, cls) {
+    let obj_class = obj.className;//获取 class 内容.
+    let blank = (obj_class !== '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
+    added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.
+    obj.className = added;//替换原来的 class.
+};
+tool.removeClass = function (obj, cls) {
+    let obj_class = ' ' + obj.className + ' ';//获取 class 内容, 并在首尾各加一个空格. ex) 'abc    bcd' -> ' abc    bcd '
+    obj_class = obj_class.replace(/(\s+)/gi, ' ');//将多余的空字符替换成一个空格. ex) ' abc    bcd ' -> ' abc bcd '
+    let removed = obj_class.replace(' ' + cls + ' ', ' ');//在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
+    removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd'
+    obj.className = removed;//替换原来的 class.
+};
+tool.hasClass = function (obj, cls) {
+    let obj_class = obj.className;//获取 class 内容.
+    let obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组.
+    x = 0;
+    for (x in obj_class_lst) {
+        if (obj_class_lst[x] === cls) {//循环数组, 判断是否包含cls
+            return true;
+        }
+    }
+    return false;
+};
+
+export default tool;

src/main.js

@@ -0,0 +1,61 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import MintUI from 'mint-ui'
+import 'mint-ui/lib/style.css'
+import '../static/js/rem.js'
+import {Alert, Confirm} from 'wc-messagebox'
+import { MessageBox } from 'mint-ui'
+import 'wc-messagebox/style.css'
+import './style/my-mint-ui.scss'
+
+
+
+Vue.use(MintUI);
+Vue.use(Alert);
+Vue.use(Confirm);
+Vue.config.productionTip = false;
+
+
+
+// let fundebug= require('fundebug-javascript');
+// fundebug.apikey = '4c6305a907db94ac135f5adad906aad54097d21f0322495202692db17c6ed50c';
+function formatComponentName(vm)
+{
+    if (vm.$root === vm) return 'root';
+    let name = vm._isVue ? (vm.$options && vm.$options.name) || (vm.$options && vm.$options._componentTag) : vm.name;
+    return (name ? 'component <' + name + '>' : 'anonymous component') + (vm._isVue && vm.$options && vm.$options.__file ? ' at ' + (vm.$options && vm.$options.__file) : '');
+}
+Vue.config.errorHandler = function(err, vm, info)
+{
+    let componentName = formatComponentName(vm);
+    let propsData = vm.$options && vm.$options.propsData;
+    // if(fundebugAllow) {
+    //     fundebug.notifyError(err,
+    //         {
+    //             metaData:
+    //                 {
+    //                     componentName: componentName,
+    //                     propsData: propsData,
+    //                     info: info
+    //                 }
+    //         });
+    // }
+};
+
+
+/* eslint-disable no-new */
+new Vue({
+    el: '#app',
+    router,
+    template: '<App/>',
+    components: { App }
+});
+
+//百度地图
+import BaiduMap from 'vue-baidu-map'
+Vue.use(BaiduMap, {
+    ak: 'qnG9Q2oSgfGlwLUBeYBp7gTvFUCk31me',
+});

src/pages/bus/choose_seats.vue

@@ -0,0 +1,370 @@
+<template>
+    <div class="bg_color">
+    <!-- 选缓存图片 -->
+        <div v-show="showFlag" class="block-having block-ok block-select"></div>
+        <div class="big_div" v-show="showFlag">
+            <div class="top_info ub ub-ver" style="background:#fff;position: fixed;top: 0;left: 0;right: 0;z-index: 10;">
+                <div class="info ub ub-ver" style="padding-left:0.2rem;padding-right:0.2rem;padding-top:0.22rem;">
+                    <div class="ub">
+                        <div id="start_end_res" class="ub-f1" style="width:1%;margin-right:0.15rem;font-size:14px;font-weight:500;color:#333;    overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{info.start_res}} - {{info.end_res}}</div>
+                        <div id="date_week" class="ub ub-pe ub-f1" style="width:1%;font-size:14px;font-weight:500;color:#333;">{{info.date_week}}</div>
+                    </div>
+                    <div class="ub" style="padding-top:0.05rem;padding-bottom:0.05rem;">
+                        <div id="max_count" class="ub ub-f1" style="color:#999;">共{{info.travel_people_count}}人出行</div>
+                        <div id="select_count"  class="ub ub-f1 ub-pe" style="width:1%;color:#999;">已选座位{{info.select_count}}/{{info.travel_people_count}}</div>
+                    </div>
+                </div>
+                <div class="seat_type ub ub-pc" style="padding-bottom:0.13rem;padding-top:0.13rem;border-top:1px solid #e6e6e6;box-shadow: 0 0 12px 0 rgba(34, 31, 32, 0.02);">
+                    <div class="img ub ub-ac">
+                        <div class="small-block small-ok"></div>
+                        <div style="margin-left:0.075rem;">可订</div>
+                    </div>
+                    <div class="img ub ub-ac" style="margin-left:0.2rem">
+                        <div class="small-block small-having"></div>
+                        <div style="margin-left:0.075rem;">已订</div>
+                    </div>
+                    <div class="img ub ub-ac" style="margin-left:0.2rem">
+                        <div class="small-block small-select"></div>
+                        <div style="margin-left:0.075rem;">选中</div>
+                    </div>
+                </div>
+            </div>
+            <div class="seats" style="padding-top:1.23rem;padding-bottom:0.14rem;background:#e6e6e6;">
+                <div class="content" :style="one_width" style="margin:0 auto;margin-bottom:0.5rem;border-radius:15px 15px 0 0;background:#fff;">
+                    <!-- 驾驶台,普通座位 -->
+                    <div class="normal">
+                        <div v-for="(item,y) in cache_data.seat_list" class="line ub ub-pc">
+                            <div v-for="(dict,x) in item" class="box ub" @click="selectSeat(x,y)">
+                                <div class="ub ub-ac ub-pc" :class="dict.STYLE_CLASS?dict.STYLE_CLASS:'block-empty'" v-text="dict.text"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="button-ok ub ub-ac ub-pc" style="background:#368ff4;opacity:0.9;height:0.5rem;position:fixed;z-index:10;bottom:0;right:0;left:0;" @click="buttonOk">
+                <div class="ok" style="color:#fff;font-size:17px;">确定</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { Toast,MessageBox } from 'mint-ui';
+    import tool from '../../config/mUtil/tool';
+    import info from './../../config/info'
+    import date from '../../config/mUtil/dateUtil'
+    import {initChooseSeat,chooseSeat} from '../../service/httpService'
+
+    export default {
+        name: "choose_seats",
+        data(){
+            return {
+                showFlag:false,
+                info:{},
+                cache_data:{},
+                one_width:'',
+                travelId:'',
+            }
+        },
+        mounted(){
+            this.load();
+        },
+        methods:{
+            load(){
+                let travel_id = this.$route.query.travel_id?this.$route.query.travel_id:'';
+                this.travelId = travel_id;
+                if(travel_id===""){
+                    MessageBox.alert("缺少参数");
+                    return false;
+                }
+                let data = {
+                    travel_id:travel_id
+                };
+                this.showFlag = true;
+                let infos = {};
+                initChooseSeat(data).then(res_data=>{
+                    this.cache_data = res_data.data;
+                    tool.log(res_data)
+                    if(res_data.flag === false && res_data.url === "") {
+                        MessageBox.alert(res_data.msg).then(
+                            action=>{
+                                tool.$router.replace(this,{
+                                    name:'trip_list',
+                                })
+                            }
+                        );
+                    } else if(res_data.flag === false && res_data.url) {
+                        MessageBox.alert(res_data.msg).then(
+                            action=>{
+                                this.$router.push({
+                                    path:res_data['url'],
+                                })
+                            }
+                        );
+                    } else {
+                        Toast("请确认自己的座位");
+                        let data = res_data['data'];
+                        infos.travel_people_count = data.person_cnt;
+                        infos.select_count = 0;
+                        infos.start_res = data.start_res;
+                        infos.end_res = data.end_res;
+                        infos.date_week = this.getMonthDayWeekByDate(data.start_time);
+                        this.getNormalHtml();
+                    }
+                    this.info = infos;
+                }).catch(e=>{
+                    Toast(info.infoApiError)
+                })
+            },
+            getMonthDayWeekByDate(d){
+                let w = date.getWeekDay(d);
+                let m = date.getMonthByDate(d);
+                let day = date.getDayByDate(d);
+                let arr = ["日", "一", "二", "三", "四", "五", "六"]
+                return m+'月'+day+'日 周'+arr[w];
+            },
+            getNormalHtml(){
+                let seat_list = this.cache_data.seat_list;
+                if(seat_list.length>0){
+                    let cols = seat_list[0].length;
+                    let width = 250/4*cols/100;
+                    this.one_width = {
+                        width:width+'rem',
+                    };
+                }
+                // 处理数据
+                let list = this.cache_data.list;
+                let seat_obj = {};
+                for(let i= 0;i<list.length;i++){
+                    let item = list[i];
+                    let key = item.seat_x+'-'+item.seat_y;
+                    seat_obj[key] = item;
+                }
+                // 处理驾驶台 和每个座位
+                for(let i=0;i<this.cache_data.seat_list.length;i++){
+                    let x=0;
+                    for(let j=0;j<this.cache_data.seat_list[i].length;j++){
+                        // 初始化选座功能
+                        x++;
+                        this.cache_data.seat_list[i][j].allow_select_seat=false;
+                        this.cache_data.seat_list[i][j].text=this.cache_data.seat_list[i][j].POS_TYPE==104?'':this.cache_data.seat_list[i][j].POS_NAME;
+                        if(this.cache_data.seat_list[i][j].POS_TYPE==104){
+                            this.cache_data.seat_list[i][j+1].POS_TYPE = 100;
+                            this.cache_data.seat_list[i][j+1].POS_NAME = '驾驶台';
+                            this.cache_data.seat_list[i][j+1].STYLE_CLASS = 'block-driver-info';
+                            this.cache_data.seat_list[i][j].STYLE_CLASS='block-driver';
+                        }
+                        if(this.cache_data.seat_list[i][j].POS_TYPE==72){
+
+                            this.cache_data.seat_list[i][j].STYLE_CLASS='block-ok';
+                            let str = x+'-'+this.cache_data.seat_list[i][j].POS_Y;
+                            if(seat_obj.hasOwnProperty(str)){
+                                let item = seat_obj[str];
+                                if( item && item.seat_status==2){
+                                    this.cache_data.seat_list[i][j].STYLE_CLASS='block-having';
+                                }else {
+                                    this.cache_data.seat_list[i][j].allow_select_seat=true;
+                                }
+                            }
+                        }
+                        // 导游处理
+                        if(this.cache_data.seat_list[i][j].POS_TYPE==105){
+                            this.cache_data.seat_list[i][j].STYLE_CLASS='block-ok';
+                        }
+                    }
+                }
+            },
+            selectSeat(x,y){
+                let info = this.cache_data.seat_list[y][x];
+                if(info.allow_select_seat===true){
+                    // 选座位
+                    if(info.STYLE_CLASS==='block-ok'){
+                        if(this.info.select_count>= this.info.travel_people_count){
+                            Toast("座位数不能超过出行人数");
+                            return false;
+                        }
+                        this.cache_data.seat_list[y][x].STYLE_CLASS='block-select';
+                        this.cache_data.seat_list[y][x].text='';
+                        let num = this.info.select_count+1;
+                        this.$set(this.info,'select_count',num);
+                    } else if(info.STYLE_CLASS==='block-select') {
+                        this.cache_data.seat_list[y][x].STYLE_CLASS='block-ok';
+                        this.cache_data.seat_list[y][x].text=this.cache_data.seat_list[y][x].POS_NAME;
+                        let num = this.info.select_count-1;
+                        this.$set(this.info,'select_count',num);
+                    }
+                } else if(info.POS_TYPE==104|| info.POS_TYPE==72 ||info.POS_TYPE==105) {
+                }
+            },
+            buttonOk(){
+                let select_count = this.info.select_count;
+                let travel_people_count = this.info.travel_people_count;
+                let count = travel_people_count-select_count;
+                if(select_count===0){
+                    Toast("请选择"+count+"个座位");
+                    return false;
+                }
+                if(select_count!= travel_people_count){
+
+                    Toast("请再选择"+count+"个座位");
+                    return false;
+                }
+                let list = this.cache_data.seat_list;
+                let travel_id = this.$route.query.travel_id;
+                let other = this;
+                MessageBox.confirm("确定座位选择好了吗？").then(
+                    action=>{
+                        let arr = [];
+                        list.forEach(function(item){
+                            item.forEach(function(dict){
+                                if(dict.STYLE_CLASS==='block-select'){
+                                    let id = dict.POS_SEQ_ID;
+                                    if(id!='') arr.push(id);
+                                }
+                            })
+                        })
+                        let seq_id = arr.join(',');
+                        let data = {
+                            travel_id:travel_id,
+                            seq_id:seq_id
+                        }
+                        // 请求接口
+                        chooseSeat(data).then(res_data=>{
+                            if(res_data['flag'] == false && res_data['url'] == "") {
+                                MessageBox.alert(res_data['msg']);
+                            } else if(res_data['flag'] == false && res_data['url']) {
+                                this.$router.push({
+                                    path:res_data['url'],
+                                })
+                            } else {
+                                Toast({
+                                    message: '确认座位成功',
+                                    duration: 1000
+                                });
+                                tool.delay(function(){
+                                    tool.$router.replace(other,{
+                                        name:'watch_seats',
+                                        query:{
+                                            travel_id:other.travelId
+                                        }
+                                    })
+                                },1000)
+                            }
+                        })
+                    },
+                    action=>{
+                        return false;
+                    }
+                )
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+
+    @media screen and (min-width:540px){
+        .header{max-width:540px;margin:0 auto;}
+    }
+    .box{
+        /*display: inline-block;*/
+    }
+    .line:first-child{
+        padding-top: 0.15rem;
+    }
+    .line:last-child{
+        padding-bottom:0.15rem;
+    }
+    .line:not(:first-child){
+        padding-top:0.15rem;
+
+    }
+    .line .box:not(:first-child){
+        margin-left:0.15rem;
+
+    }
+    .small-block{
+        width:0.17rem;height:0.15rem;
+    }
+    .small-ok{
+        background-image:url('../../../static/image/seats/white_small.png');
+        background-size: 0.17rem 0.15rem;
+        background-repeat: no-repeat;
+    }
+    .small-having{
+        background-image:url('../../../static/image/seats/having_small.png');
+        background-size: 0.17rem 0.15rem;
+        background-repeat: no-repeat;
+    }
+    .small-select{
+        background-image:url('../../../static/image/seats/select_small.png');
+        background-size: 0.17rem 0.15rem;
+        background-repeat: no-repeat;
+    }
+    .block{
+        width:0.35rem;
+        height:0.31rem;
+        background:red;
+    }
+    .block-empty{
+        width:0.35rem;
+        height:0.31rem;
+        background:clear;
+        visibility:hidden;
+    }
+    .block-having{
+        width:0.35rem;
+        height:0.31rem;
+        background-image:url('../../../static/image/seats/having.png');
+        background-size: 0.35rem 0.3rem;
+        background-repeat: no-repeat;
+        color:#fff;
+        padding-bottom: 0.04rem;
+        padding-right: 0.015rem;
+        font-family: PingFangSC;
+        font-size: 12px;
+        font-weight: normal;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: normal;
+        letter-spacing: normal;
+    }
+    .block-ok{
+        width:0.35rem;
+        height:0.31rem;
+        background-image:url('../../../static/image/seats/white.png');
+        background-size: 0.35rem 0.3rem;
+        background-repeat: no-repeat;
+        color:#999;
+        padding-bottom: 0.04rem;
+        padding-right: 0.015rem;
+        font-family: PingFangSC;
+        font-size: 12px;
+        font-weight: normal;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: normal;
+        letter-spacing: normal;
+    }
+    .block-driver{
+        width:0.35rem;
+        height:0.31rem;
+        background-image:url('../../../static/image/seats/white.png');
+        background-size: 0.35rem 0.3rem;
+        background-repeat: no-repeat;
+        color:#999;
+    }
+    .block-driver-info{
+        height:0.31rem;
+        font-size:12px;
+    }
+    .block-select{
+        width:0.35rem;height:0.31rem;
+        background-image:url('../../../static/image/seats/select.png');
+        background-size: 0.35rem 0.3rem;
+        background-repeat: no-repeat;
+        color:#fff;
+    }
+</style>

src/pages/bus/search_bus.vue

@@ -0,0 +1,217 @@
+<template>
+    <div>
+        <baidu-map v-if="hasHttp" class="map" :center="station_location" :zoom="13" style="height:700px;">
+            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
+            <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-navigation>
+            <bm-marker :dragging="true" :position="station_location"  animation="BMAP_ANIMATION_BOUNCE" @click="zzz(station_location.lat,station_location.lng)">
+                <bm-label content="上车点"   :offset="{width: -35, height: 30}"/>
+            </bm-marker>
+            <bm-marker :dragging="true" :position="bus_location" animation="BMAP_ANIMATION_BOUNCE">
+                <bm-label content="车的位置"  :offset="{width: -35, height: 30}"/>
+            </bm-marker>
+        </baidu-map>
+
+        <div class="bus_info">
+            <div class="ub ub-ver">
+                <div style="border-bottom: 1px solid #f0f2f6;" class="ub ub-ac">
+                    <div @click="show_bus()" style="padding: 0.13rem 0 0.1rem 0.15rem;"
+                         class="ub ub-ver ub-f1">
+                        <div id="name_and_nomber" class="ulev1 lightblack_color" v-html="name_and_nomber"></div>
+                        <div id="bus_type" class="commongray_color" v-text="bus_type"></div>
+                    </div>
+                    <a id="call_phone" style="display: inline-block;" :href="phone_href"><img
+                            style="width: 0.16rem;top:0.02rem;position: relative;padding: 0.15rem 0.15rem 0.15rem 0.15rem;"
+                            src="static/image/search_bus/call_phone.png"/></a>
+                </div>
+                <div id="bus_pic" style="overflow: hidden;" v-show="bus_show"><img id="bus_img" v-lazy=" setLoading(bus_img)"
+                                                                                   style="width: 3.55rem;height: 1.36rem;"/></div>
+                <div style="padding: 0.01rem 0;" @click="show_bus()" class="ub ub-pc"><img id="on_off"
+                                                                                           style="width: 0.12rem;"
+                                                                                           :src="show_bus_icon"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import tool from '../../config/mUtil/tool'
+    import info from './../../config/info'
+    import {getBusPosition} from '../../service/httpService';
+    import {Toast} from 'mint-ui'
+
+    export default {
+        name: "search_bus",
+        data() {
+            return {
+                bus_show: false,//是否显示车辆图片
+                show_bus_icon: 'static/image/search_bus/enter_on.png', //显示/隐藏车图片的箭头
+                order_id: 0,
+                run_date: '',
+                travel_id: 0,
+                data: {},
+                // phone_href: this.data.data.bus.driver_mobile,
+                // name_and_nomber: this.data.data.bus.driver_name + '&nbsp;&nbsp;&nbsp;' + this.data.data.bus.bus_no,
+                // bus_type: this.data.data.bus.color + '·' + this.data.data.bus.bus_name,
+                // bus_img: this.data.data.bus.img_url,
+                phone_href: '',
+                name_and_nomber: '',
+                bus_type: '',
+                bus_img: '',
+                station_location:{},
+                bus_location:{},
+                hasHttp:false
+            }
+        },
+        mounted() {
+            tool.log('search_bus');
+            // this.$nextTick(() => {
+                this.load();
+                tool.log(this.bus_location);
+            // })
+        },
+        methods: {
+            setLoading(url){
+                return {
+                    src:url,
+                    error:'static/image/search_bus/bus_pic.png',
+                    loading:'static/image/search_bus/bus_pic.png'
+                }
+            },
+            load() {
+                this.order_id = this.$route.query.order_id;
+                this.run_date = this.$route.query.run_date;
+                this.travel_id = this.$route.query.travel_id;
+                let params = {order_id: this.order_id, run_date: this.run_date, travel_id: this.travel_id};
+                getBusPosition(params).then(res => {
+                    this.hasHttp = true;
+                    if(res.flag===false){
+                        if(res.code === info.codeNotLogin){
+                            let param = tool.clone(this.$route.query);
+                            param['routerName'] = 'search_bus';
+                            tool.$router.push(this,{
+                                name: 'login',
+                                query: param
+                            });
+                        }else{
+                            Toast(res.msg);
+                        }
+                    }else{
+                        let bus = res.data.bus;
+                        this.phone_href = 'tel:'+res.data.bus.driver_mobile;
+                        this.name_and_nomber = res.data.bus.driver_name + '&nbsp;&nbsp;&nbsp;' + res.data.bus.bus_no;
+                        this.bus_type = res.data.bus.color + '·' + res.data.bus.bus_name;
+                        this.bus_img =bus.img_url;
+                        let r_res = res.data.res;
+                        this.station_location.lng = r_res.longitude;
+                        this.station_location.lat = r_res.latitude;
+                        this.bus_location.lng = bus.lng;
+                        this.bus_location.lat= bus.lat;
+                    }
+                }).catch(e => {
+                    Toast(info.infoApiError);
+                });
+
+            },
+            show_bus() {
+                if (this.show_bus_icon === 'static/image/search_bus/enter_on.png') {
+                    this.bus_show = true;
+                    this.show_bus_icon = 'static/image/search_bus/enter_off.png';
+                } else {
+                    this.bus_show = false;
+                    this.show_bus_icon = 'static/image/search_bus/enter_on.png';
+                }
+            },
+            srarch_bus(data) {
+
+            },
+            zzz(latitude,longitude){
+                var geolocation = new BMap.Geolocation();
+                geolocation.getCurrentPosition(function(r){
+                    var alatlng={lat:r.point.lat,lng:r.point.lng}
+                    var blatlng={lat:latitude,lng:longitude}
+                    var start = {
+                        latlng:alatlng
+                    }
+                    var end = {
+                        latlng:blatlng
+                    }
+
+                    var opts = {
+                        mode:BMAP_MODE_DRIVING,
+                        region:"中国"
+                    }
+                    var ss = new BMap.RouteSearch();
+                    ss.routeCall(start,end,opts);
+                },{enableHighAccuracy: true})
+
+            },
+        }
+    }
+</script>
+
+<style scoped lang="scss" type="text/scss">
+    @import "../../../static/css/ui-base.css";
+    @import "../../../static/css/ui-box.css";
+    @import "../../../static/css/ui-color.css";
+    body, html, #allmap {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        margin: 0;
+    }
+
+    #golist {
+        display: none;
+    }
+
+    @media (max-device-width: 780px) {
+        #golist {
+            display: block !important;
+        }
+    }
+
+    .infoBoxContent {
+    /*url(static/image/search_bus/img_shangchedian.png)*/
+        font-size: 0.12rem;
+        width: 2.1rem;
+        height: 0.523rem;
+        background-repeat: no-repeat;
+        background-size: 2.1rem 0.523rem;
+        left: -0.93rem;
+        top: -0.25rem;
+    }
+
+    .div1 {
+        width: 1.63rem;
+        margin: 0 0.05rem 0 0.1rem;
+        float: left;
+        top: -0.02rem;
+    }
+
+    .div2 {
+        width: 0.32rem;
+        height: 0.46rem;
+        float: left;
+        color: #fff;
+        margin-top: 0.09rem;
+        text-align: center;
+        top: -0.02rem;
+    }
+
+    .bus_info {
+        position: fixed;
+        top: 0.1rem;
+        left: 0.1rem;
+        right: 0.1rem;
+        background-color: #fff;
+        border: 1px solid #f0f2f6;
+        border-radius: 0.03rem;
+        box-shadow: 0 0 6px 0 rgba(60, 67, 79, 0.2);
+    }
+
+    .infoBox img {
+        width: 0px !important;
+        height: 0px !important;
+    }
+</style>

src/pages/bus/send_car_info.vue

@@ -0,0 +1,193 @@
+<template>
+    <div class="bg_color">
+        <div class="no_trip" v-show="no_trip_flag">
+            <div class="ulev1" style="margin:0.45rem 0.27rem;">您乘坐的车辆暂未派车，预约出行车辆信息请点击预约按钮，车辆派车后我们将立刻短信通知您，请注意查看。</div>
+            <div v-if="reservation_flag" @click="book_travel_msg" class="book ub ub-ac ub-pc ulev1 send_msg_able" style="margin:0 0.63rem;line-height: 1;padding: 0.13rem 0;">
+                预约出行车辆信息
+            </div>
+            <div v-else id="" class="book ub ub-ac ub-pc ulev1 send_msg_dis" style="margin:0 0.63rem;line-height: 1;padding: 0.13rem 0;">
+                已预约
+            </div>
+        </div>
+        <div class="has_trip" v-show="has_trip_flag">
+            <div class="ub ub-ver" style="margin: 0.16rem 0.08rem;background: #FFFFFF;box-shadow: 0 0 3px 0 #e9ebee;">
+                <div class="ub ub-ac" style="padding: 0.14rem 0;border-bottom: 1px solid #e9ebee;">
+                    <div class="ulev1" style="width: 0.7rem;text-align: right;">车牌号</div>
+                    <div class="ub-f1 ub ub-ac" style="padding-left: 0.16rem;">
+                        <div class="ulev1 car_num">{{bus_no}}</div>
+                        <div @click="go_search_bus" class="find_car" style="padding-left: 0.14rem;color: #3399ff;">实时位置</div>
+                    </div>
+                </div>
+                <div class="ub ub-ac" style="padding: 0.14rem 0;border-bottom: 1px solid #e9ebee;">
+                    <div class="ulev1 " style="width: 0.7rem;text-align: right;">座位号</div>
+                    <div class="ub-f1 ulev1 seat_num" style="padding-right: 0.26rem;padding-left: 0.16rem;">{{seat_no}}</div>
+                </div>
+                <div class="ub ub-ac" style="padding: 0.14rem 0;border-bottom: 1px solid #e9ebee;">
+                    <div class="ulev1" style="width: 0.7rem;text-align: right;">上车地点</div>
+                    <div class="ub-f1 ulev1 start_area" style="padding-right: 0.26rem;padding-left: 0.16rem;">{{start_area}}</div>
+                </div>
+                <div class="ub ub-ac" style="padding: 0.14rem 0;">
+                    <div class="ulev1" style="width: 0.7rem;text-align: right;">联系司机</div>
+                    <div class="ub-f1 " style="padding-left: 0.16rem;">
+                        <div @click="call_driver" tel="" id="driver_tel" style="background-image: url(static/image/trip/tel.png);background-repeat: no-repeat;background-size: 100% 100%;width: 0.28rem;height: 0.28rem;"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div v-if="send_message_flag" @click="send_travel_msg" class="send_msg ub ub-ac ub-pc send_msg_able" style="margin: 0 0.08rem;padding: 0.13rem 0;line-height: 1.0;">
+                免费发送至预约手机号
+            </div>
+            <div v-else id="a" class="send_msg ub ub-ac ub-pc send_msg_dis" style="margin: 0 0.08rem;padding: 0.13rem 0;line-height: 1.0;">
+                已发送
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {getBusPosition,bookTravalMsg,sendTravelMsg} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import date from '../../config/mUtil/dateUtil'
+    import info from '../../config/info'
+    import { Toast, Swipe, SwipeItem,Switch,MessageBox} from 'mint-ui';
+    export default {
+        name: "send_car_info",
+        data(){
+            return {
+                order_id:this.$route.query.order_id,
+                run_date:this.$route.query.run_date,
+                travel_id:this.$route.query.travel_id,
+                data:[],
+                cantel:false,
+                click_send_message:'',
+                appoint_message:'',
+                has_trip_flag:false,
+                no_trip_flag:false,
+                reservation_flag:false,
+                send_message_flag:false,
+                bus_no:'',
+                seat_no:'',
+                start_area:'',
+                driver_tel:'',
+
+
+
+            }
+        },
+        mounted(){
+            this.$nextTick(() => {
+                this.baseData();
+            })
+        },
+        methods:{
+            baseData(){
+                getBusPosition({order_id:this.order_id,run_date:this.run_date,travel_id:this.travel_id}).then(res=>{
+                    if(res['flag'] == false) {
+                        MessageBox.alert(res['msg']);
+                    } else {
+                        this.data = res['data'];
+                        this.cantel = this.data['cantel'];
+                        this.click_send_message = this.data['wx_flag']['click_send_message'];
+                        this.appoint_message = this.data['wx_flag']['appoint_message'];
+                        if(this.data['send_bus_flag'] == 0) {
+                            this.has_trip_flag =false;
+                            this.no_trip_flag =true;
+                            if(this.appoint_message != '0') {
+                                this.reservation_flag =false;
+                            } else {
+                                this.reservation_flag =true;
+                            }
+                        } else {
+                            //派车
+                            this.has_trip_flag = true;
+                            this.no_trip_flag = false;
+
+                            this.seat_no = this.data['bus']['seat_no'].join('/');
+                            this.bus_no = this.data['bus']['bus_no']
+
+                            if(this.data['res']['address'] == ''){
+                                this.start_area = this.data['res']['res_name'];
+                            }else{
+                                this.start_area = this.data['res']['address'];
+                            }
+                            this.driver_tel = this.data['bus']['driver_mobile'];
+
+                            if(this.click_send_message != '0') {
+                               this.send_message_flag = false;
+                            } else {
+                                this.send_message_flag = true;
+                            }
+
+                        }
+                    }
+                }).catch(e=>{
+                    Toast(info.infoApiError);
+                })
+            },
+            book_travel_msg(){
+                bookTravalMsg({order_id:this.order_id,travel_id:this.travel_id}).then(res=>{
+                    if (res['flag'] == false) {
+                        MessageBox.alert(res['msg']);
+                    } else{
+                       this.appoint_message = '1';
+                       Toast('预约成功');
+                       this.baseData();
+                    }
+                }).catch(e=>{
+                    Toast(info.infoApiError);
+                })
+            },
+            send_travel_msg(){
+                sendTravelMsg({order_id:this.order_id,travel_id:this.travel_id}).then(res=>{
+                    if (res['flag'] == false) {
+                        MessageBox.alert(res['msg']);
+                    } else{
+                        this.click_send_message = '1';
+                        Toast('已发送至预订手机，请查看');
+                        this.baseData();
+                    }
+                }).catch(e=>{
+                    Toast(info.infoApiError);
+                })
+            },
+            call_driver(){
+                if (this.cantel == false) {
+                  Toast('请在发车前15分钟内拨打司机电话');
+                }else{
+                    let tel = this.driver_tel;
+                    location.href = 'tel://'+tel;
+                }
+            },
+            go_search_bus(){
+                tool.$router.push(this,{
+                    name:'search_bus',
+                    query:{
+                        order_id:this.order_id,
+                        run_date:this.run_date,
+                        travel_id:this.travel_id
+
+                    }
+                })
+            }
+
+        }
+    }
+</script>
+
+<style scoped lang="scss" type="text/scss">
+    @import "../../../static/css/ui-base.css";
+    @import "../../../static/css/ui-box.css";
+    @import "../../../static/css/ui-color.css";
+
+    .send_msg_able{
+        background-color: #2d2e3a;
+        border-radius: 0.2rem;
+        color: #ffffff;
+    }
+    .send_msg_dis{
+        background: #e9ebee;
+        border-radius: 0.2rem;
+        color: #999999;
+    }
+
+</style>

src/pages/bus/watch_seats.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="box" style="position: fixed;bottom: 0;left: 0;right: 0;top: 0;">
+        <div class="ub ub-pc" style="padding-top: 0.79rem;position: relative">
+            <img src="../../../static/image/home/cpk.png" class="img1">
+            <div class="ticket ub ub-ver" style="background-image: url(static/image/home/piao.png);">
+                <div class="ticket_title ub ub-pc">您的座位号</div>
+                <div class="ticket_content hide_info ub ub-pc" @click="lookDetail">
+                    {{content}}
+                </div>
+            </div>
+        </div>
+        <div class="ub ub-pc">
+            <div class="ub ub-ver note">
+                <div class="ub">乘车须知：</div>
+                <div class="ub">1.座位预定成功之后不能修改，如有特殊原因，可在乘车时与其他乘客进行协调</div>
+                <div class="ub">2.请按照预定座位号就坐，未经他人允许的情况下不得私自占座，因此产生的纠纷及其他后果由乘客自己承担</div>
+                <div class="ub">3.其他相关问题，请咨询微信在线客服</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {watchSeats} from '../../service/httpService'
+    import {MessageBox} from 'mint-ui';
+    import tool from '../../config/mUtil/tool'
+
+    export default {
+        name: "watch_seats",
+        data(){
+            return{
+                content:'',
+            };
+        },
+        mounted(){
+            this.load();
+        },
+        methods:{
+            load(){
+                let travel_id = this.$route.query.travel_id;
+                let params = {
+                    travel_id:travel_id,
+                };
+                watchSeats(params).then(res=>{
+                    res.flag = true;
+                    if(res.flag===false){
+                        MessageBox.alert(res.msg);
+                    }else{
+                        this.content = res.data;
+                    }
+                }).catch(e=>{
+                    MessageBox.alert(tool.infoApiError);
+                })
+            },
+            lookDetail(){
+                let strs = this.content.split(',');
+                let temp='';
+                for (let i=0;i<strs.length ; )
+                {
+                    temp += strs[i]+' ';
+                    i++;
+                }
+                MessageBox.alert(temp,{
+                    title:'您的座位号',
+                })
+            }
+        },
+    }
+</script>
+<style lang="scss" type="text/scss">
+    .box{
+        background-color:#368ff4;
+    }
+</style>
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+    .img1 {
+        width: 2.32rem;
+        height: 0.3625rem;
+    }
+    .ticket {
+        position: absolute;
+        left:0.95rem;
+        top:0.91rem;
+        width: 1.84rem;
+        height: 1.9125rem;
+        background-size:cover;
+        z-index: 99;
+    }
+    .ticket_title {
+        font-family: PingFangSC;
+        font-size: 0.13rem;
+        color: #333333;
+        margin-top:0.39rem;
+    }
+    .ticket_content {
+        font-family: PingFangSC;
+        font-size: 0.2rem;
+        margin: 0.53rem auto 0;
+        width: 1.5rem;
+        word-wrap: break-word;
+        overflow: hidden;
+        display: block;
+        word-break: break-all;
+        word-wrap: break-word;
+        text-align: center;
+        height: 0.6rem;
+    }
+    .hide_info {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+    .note {
+
+        width: 2.76rem;
+        margin-top:2.225rem;
+    }
+    .note div {
+        font-family: PingFangSC;
+        font-size: 0.12rem;
+        color: #ffffff;
+    }
+</style>

src/pages/free/create_free_order.vue

@@ -0,0 +1,574 @@
+<template>
+    <div class="bg_color">
+        <div id="body_mod" v-show="pageShow" class="ub ub-ver ui_hide" :class="bodyMod?'mod_fil':''">
+            <!--banner-->
+            <div id="show_img" class="ub ub-ae"
+                 style="width: 100%;height: 1.88rem;background-repeat: no-repeat;background-size: 100% 100%;"
+                 :style="backgroundImg">
+                <div id="pro_cate_name" class="ub-f1 ulev1"
+                     style="color: #ffffff;background-color: rgba(44, 45, 58, 0.7);line-height: 1.0;padding: 0.08rem 0 0.08rem 0.12rem;">
+                    {{info.pro_cate_name}}
+                </div>
+            </div>
+            <!--产品介绍-->
+            <div class="ub ub-ver"
+                 style="padding: 0.1rem 0.12rem 0.15rem 0.12rem;background-color: #ffffff;border-bottom: 1px solid #e9ebee;;">
+                <div class="ulev1" id="prod_des" style="color: #2d2e3a;">{{info.des}}</div>
+                <div class="ub ub-ae ub-f1" style="padding-top: 0.24rem;">
+                    <div class="ub-f1" style="color: #686872;" id="sales_count">已售{{info.sales_count}}</div>
+                    <div class="ub-f1 ub ub-ae ub-pe" style="text-align: right;width: 1%;">
+                        <div id="show_price" style="font-size:0.18rem;color: #cc3333;line-height: 1.2;">
+                            ¥{{info.show_price}}
+                        </div>
+                        <span class="" style="color: #686872;;margin-left:0.05rem;line-height: 1.0;">起/人</span>
+                    </div>
+                </div>
+            </div>
+            <!--去程日期-->
+            <div id="date_select" class="ub"
+                 style="padding: 0.16rem 0.16rem 0.16rem 0.12rem;border-bottom: 1px solid #e9ebee;background-color: #ffffff;">
+                <div class="ub-f1 ulev1" style="color: #686872;line-height: 1.0;">去程日期</div>
+                <div class="ub-f1 ub ub-pe">
+                    <div id="run_date" class="ulev1" style="line-height: 1.0;color: #2d2e3a;padding-right: 0.1rem;"
+                         @click="selectDate">{{run_date}}
+                    </div>
+                    <div
+                        style="width: 0.08rem;height: 0.14rem;background-image: url(static/image/home/row.png);background-repeat: no-repeat;background-size: 100% 100%;"></div>
+                </div>
+            </div>
+            <!--票种-->
+            <div id="ticket_arr">
+                <div v-for="(dict,index) in ticketInfo" class="ub ticket"
+                     style="padding: 0.16rem 0.12rem;background-color: #ffffff;border-bottom: 1px solid #e9ebee;">
+                    <div class="ub-f1 ulev1" style="width: 1%;line-height: 1;color: #686872;">{{dict.prod_name}} <span
+                        class="ulev1" :data-price="dict.prod_price" style="line-height: 1;color: #cc3333;">¥{{dict.prod_price}}/张(均价)</span>
+                    </div>
+                    <div :class="dict.is_chen==1?'people':'child'" class="ub numBox" :init_max="dict.prod_count"
+                         :init_total="dict.ticket_all_num" :type="dict.is_chen==1?'people':'child'" data-minValue="0"
+                         style="border: solid 1px rgba(45,46,58,0.2);border-radius: 50px;width: 1rem;height: 0.3rem;">
+                        <div class="ub-f1 ub ub-ac ub-pc cut">
+                            <div
+                                :style="dict.leftFlag? 'background-image:url(static/image/home/Triangle_l_u.png)':'background-image:url(static/image/home/Triangle_l_d.png)'"
+                                style="background-repeat: no-repeat;background-size: 100% 100%;width: 0.06rem;height: 0.1rem;"
+                                @click="ticketNumSub(index)"></div>
+                        </div>
+                        <div class="ub-f2 ub ub-ac ub-pc ulev1 numberValue"
+                             style="width: 1%;line-height: 1.0;color: #2d2e3a;">{{dict.num}}
+                        </div>
+                        <div class="ub-f1 ub ub-ac ub-pc">
+                            <div
+                                :style="dict.rightFlag? 'background-image:url(static/image/home/Triangle_r_u.png)':'background-image:url(static/image/home/Triangle_r_d.png)'"
+                                style="background-repeat: no-repeat;background-size: 100% 100%;width: 0.06rem;height: 0.1rem;"
+                                @click="ticketNumAdd(index)"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="ub" style="padding: 0.12rem 0;background-color: #e9ebee;">
+                <div v-for="dict in tips" class="ub-f1 ub ub-ac ub-pc">
+                    <div
+                        style="background-size: 100% 100%;background-image: url(static/image/home/right.png);background-repeat: no-repeat;width: 0.11rem;height: 0.08rem;"></div>
+                    <div style="color: #686872;line-height: 1;">{{dict.title}}</div>
+                </div>
+            </div>
+
+            <!--评论-->
+            <div id="comment" class="ub">
+                <div class="ub-f1 ub">
+                    <div style="color: #686872;font-size: 14px;line-height: 1.0;">评分：</div>
+                    <star-view :star-value="info.star"></star-view>
+                    <div id="star_num" class="ub ub-ac" style="color: #686872;line-height: 1.0;padding-left: 0.04rem;">
+                        {{info.star}}分
+                    </div>
+                </div>
+                <div class="ub-f1 ub ub-pe" @click="lookComments">
+                    <div id="comment_count" class="ulev1"
+                         style="line-height: 1.0;color: #2d2e3a;padding-right: 0.1rem;">共{{info.comment_cnt}}条评论
+                    </div>
+                    <div
+                        style="width: 0.08rem;height: 0.14rem;background-image: url(static/image/home/row.png);background-repeat: no-repeat;background-size: 100% 100%;"></div>
+                </div>
+            </div>
+
+            <!--行程相关-->
+            <div class="ub header">
+                <div v-for="(dict,index) in descriptionList" class="ub-f1 ulev1 description"
+                     :class="dict.selected?'select_header':'normal_header'" @click="selectDescription(index)">
+                    {{dict.title}}
+                </div>
+            </div>
+            <div id="info" class="info" style="padding: 0.12rem;margin-bottom: 0.5rem;overflow: hidden;" v-html="des">
+            </div>
+
+            <!--去下单-->
+            <div class="go_create_order">
+                <div class="ub">
+                    <div class="create_left ub ub-f1 ub-pc ub-ac" style="background: white;opacity: 1;">
+                        <span class="ulev1">金额：<span class="ulev1">￥</span></span>
+                        <span id="total_money" class="ulev1" style="margin-left: -0.06rem;">{{this.ticketPrice}}</span>
+                    </div>
+                    <div id="btn_create_order" class="create_right ub ub-f1 ub-pc ub-ac"
+                         style="background-color: #2d2e3a;color: #fff;" @click="buyOrder">去下单
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--日历-->
+        <div class="model" v-show="dateShow" @click="closeDate">
+            <div class="model_box animated" :class="dateFetch?'fadeInUp':'fadeInDown'" v-show="dateShow">
+                <div class="ub ub-ver">
+                    <div class="ub ub-ver">
+                        <div class="ub ub-pc">
+                            <div class="model_la"></div>
+                        </div>
+                        <div class="ub ub-ac"
+                             style="border-bottom: 1px solid #e9ebee;padding: 0.07rem 0.08rem 0.12rem 0.08rem;">
+                            <div class="ub-f1">
+                                <span class="ulev1 text_c_80" style="color: #686872;">选择乘车日期</span>
+                                <span id="go_sel_date" class="ulev1 text_c_80" style="display: none;"></span>
+                            </div>
+                            <div id="make_sure" class="text_c_2b ulev2"></div>
+                        </div>
+                    </div>
+                    <div class="ub ub-ver select_hei">
+                        <calendar-view @selectDateOp="selectDateOp" :dateList="info.date_list"
+                                       :select-go-date="run_date"></calendar-view>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import {freeDetail} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import info from '../../config/info'
+    import {Toast} from 'mint-ui';
+    import {Swipe, SwipeItem, MessageBox, Indicator} from 'mint-ui';
+    import starView from '../product/view/Star';
+    import CalendarView from '../product/view/Calendar'
+
+    export default {
+        name: "freeOrder",
+        data() {
+            return {
+                pageShow: false,
+                loadingToast: false,
+                info: {
+                    date_list: {}
+                },
+                backgroundImg: '',
+                num: 0,
+                count: '',
+                tips: [
+                    {title: '景区直达'},
+                    {title: '优惠低价'},
+                    {title: '省心省力'},
+                    {title: '扫码乘车'},
+                ],
+                descriptionList: [
+                    {title: '产品特色', selected: true},
+                    {title: '行程说明', selected: false},
+                    {title: '预订须知', selected: false},
+                ],
+                des: '',
+                ticketInfo: [],
+                ticketNum: 0,
+                ticketPrice: 0,
+                dateShow: false,
+                dateFetch: false,
+                bodyMod: false,
+                run_date: '',
+            }
+        },
+        components: {
+            starView, CalendarView
+        },
+        mounted() {
+            let that = this;
+            tool.delay(function () {
+                that.load();
+            }, info.delayTime);
+        },
+        methods: {
+            selectDateOp(params) {
+                this.run_date = params.run_date;
+                this.$set(this.ticketInfo[0], 'prod_price', params.run_price);
+                if(this.info.child_date_list && this.info.child_date_list.hasOwnProperty(params.run_date)){
+                    this.$set(this.ticketInfo[1], 'prod_price', this.info.child_date_list[params.run_date]);
+                }
+                this.ticketPrice = 0;
+                this.ticketInfo.map(x => {
+                    this.ticketPrice += x.num * x.prod_price;
+                });
+            },
+            load() {
+                Indicator.open({
+                    spinnerType: 'fading-circle'
+                });
+                let params = {pro_cate_id: this.$route.query.pro_cate_id};
+                freeDetail(params).then(res => {
+                    Indicator.close();
+                    this.info = res['data'];
+                    this.run_date = this.info.date;
+                    this.backgroundImg = {
+                        backgroundImage: `url(${this.info.show_img})`
+                    };
+                    this.des = this.info.feature;
+                    this.ticketInfo = this.info.prod_arr;
+                    this.ticketInfo.forEach(function (item) {
+                        item.leftFlag = false;
+                        if (item.ticket_all_num <= 0) {
+                            item.rightFlag = false;
+                        } else {
+                            item.rightFlag = true;
+                        }
+                        item.num = 0;
+                    })
+                    this.loadingToast = !this.loadingToast;
+                    this.pageShow = !this.pageShow;
+                }).catch(e => {
+                    Indicator.close();
+                    this.loadingToast = !this.loadingToast;
+                    Toast({
+                        message: '产品已售完',
+                        duration: 2000
+                    })
+                    setTimeout(this.setInfo, 2000)
+                    return false;
+                })
+            },
+            setInfo() {
+                this.$router.go(-1);
+            },
+            selectDescription(index) {
+                this.descriptionList.map(x => x.selected = false);
+                this.descriptionList[index].selected = true;
+                if (index === 1) {
+                    this.des = this.info.trip_desc;
+                } else if (index === 2) {
+                    this.des = this.info.booking_notice;
+                } else {
+                    this.des = this.info.feature;
+                }
+            },
+            ticketNumSub(index) {
+                if (this.ticketInfo[index].num > 0) {
+                    if (this.ticketNum === this.ticketInfo[index].ticket_all_num) {
+                        this.ticketInfo.map(x => x.rightFlag = true);
+                    }
+                    this.ticketInfo[index].num -= 1;
+                    if (this.ticketInfo[index].num === 0) {
+                        this.ticketInfo[index].leftFlag = false;
+                    }
+                    this.ticketNum -= 1;
+                    this.ticketPrice -= this.ticketInfo[index].prod_price;
+                } else {
+                    this.ticketInfo[index].num = 0;
+                    this.ticketInfo[index].leftFlag = false;
+                }
+                this.$set(this.ticketInfo, index, this.ticketInfo[index]);
+
+            },
+            ticketNumAdd(index) {
+                if (this.ticketNum < this.ticketInfo[index].ticket_all_num) {
+                    this.ticketInfo[index].num += 1;
+                    this.ticketInfo[index].leftFlag = this.ticketInfo[index].leftFlag === false ? true : true;
+                    this.ticketNum += 1;
+                    if (this.ticketNum === this.ticketInfo[index].ticket_all_num) {
+                        this.ticketInfo.map(x => x.rightFlag = false);
+                    }
+                    this.ticketPrice += this.ticketInfo[index].prod_price;
+                } else {
+                    let instance = Toast('库存不足');
+                    setTimeout(() => {
+                        instance.close();
+                    }, 1000);
+                }
+                this.$set(this.ticketInfo, index, this.ticketInfo[index])
+            },
+            selectDate() {
+                this.dateShow = !this.dateShow;
+                this.dateFetch = !this.dateFetch;
+                this.bodyMod = !this.bodyMod;
+            },
+            closeDate() {
+                this.dateFetch = !this.dateFetch;
+                setTimeout(() => {
+                    this.dateShow = !this.dateShow;
+                    this.bodyMod = !this.bodyMod;
+                }, 400)
+            },
+            buyOrder() {
+                if (this.ticketNum === 0) {
+                    MessageBox.alert('请选择票种数量')
+                } else {
+                    let ticket_arr = [];
+                    this.ticketInfo.forEach(function (item) {
+                        let info = {
+                            prod_id: item.prod_id,
+                            prod_price: item.prod_price,
+                            prod_count: item.num,
+                            prod_name: item.prod_name,
+                        };
+                        ticket_arr.push(info);
+                    })
+                    let params = {
+                        pro_cate_id: this.$route.query.pro_cate_id,
+                        pro_cate_name: this.info.pro_cate_name,
+                        start_date: this.run_date,
+                        prod_arr: ticket_arr,
+                        total_money: this.ticketPrice,
+                    };
+                    tool.setStorJson('fill_free_order', params);
+                    tool.$router.push(this, {
+                        name: 'fillFreeOrder',
+                        //params:params,
+                    })
+                }
+            },
+            lookComments() {
+                tool.$router.push(this, {
+                    name: 'description_list',
+                    query: {
+                        pro_cate_id: this.$route.query.pro_cate_id,
+                    }
+                })
+            }
+        }
+    }
+</script>
+<style lang="scss" type="text/scss">
+    #info {
+        img {
+            max-width: 100%;
+        }
+        p {
+            font-size: 14px;
+            margin-top: 0;
+            margin-bottom: 10px;
+            color: #8f8f94;
+        }
+        strong {
+            color: #333
+        }
+    }
+</style>
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+
+    .info img {
+        max-width: 100%;
+    }
+
+    .header {
+        background-color: #ffffff;
+        box-shadow: 0 0.5px 3px 0 #e9ebee;
+        margin: 0.08rem 0;
+    }
+
+    .select_header {
+        color: #2d2e3a;
+        border-bottom: 2px solid #2d2e3a;
+        line-height: 1.0;
+        padding: 0.15rem 0;
+        text-align: center;
+    }
+
+    .normal_header {
+        line-height: 1.0;
+        color: #686872;
+        padding: 0.15rem 0;
+        text-align: center;
+    }
+
+    .next {
+        position: fixed;
+        left: 0.08rem;
+        right: 0.08rem;
+        bottom: 0.16rem;
+        border-radius: 100px;
+        height: 0.4rem;
+        line-height: 1.0;
+        background-color: #2d2e3a;
+        color: #FFFFFF;
+    }
+
+    #comment {
+        padding: 0.16rem 0.16rem 0.16rem 0.12rem;
+        border-bottom: 1px solid #e9ebee;
+        background-color: #ffffff;
+    }
+
+    .model {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        /*-webkit-filter: blur(6px);
+filter: blur(6px);*/
+        background-color: rgba(0, 0, 0, 0.25);
+        z-index: 100;
+    }
+
+    .model_box {
+        position: fixed;
+        height: 4.3rem;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: #fff;
+        -webkit-border-top-left-radius: 8px;
+        -webkit-border-top-right-radius: 8px;
+    }
+
+    .model_la {
+        width: 0.37rem;
+        height: 0.05rem;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, 0.2);
+        margin-top: 0.06rem;
+    }
+
+    .select_hei {
+        overflow: scroll;
+        height: 3.8rem;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .mod_fil {
+        -webkit-filter: blur(6px);
+        filter: blur(6px);
+    }
+
+    .animated {
+        -webkit-animation-duration: 0.4s;
+        animation-duration: 0.4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+    }
+
+    @-webkit-keyframes fadeInUp {
+        0% {
+            /*opacity: 0;*/
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+        100% {
+            /*opacity: 1;*/
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    @keyframes fadeInUp {
+        0% {
+            /*opacity: 0;*/
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+        100% {
+            /*opacity: 1;*/
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    .fadeInUp {
+        -webkit-animation-name: fadeInUp;
+        animation-name: fadeInUp;
+    }
+
+    @-webkit-keyframes fadeInDown {
+        0% {
+            -webkit-transform: none;
+            transform: none;
+        }
+        100% {
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    @keyframes fadeInDown {
+        0% {
+            -webkit-transform: none;
+            transform: none;
+        }
+        100% {
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+    }
+
+    .fadeInDown {
+        -webkit-animation-name: fadeInDown;
+        animation-name: fadeInDown;
+    }
+
+    .go_create_order {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        box-shadow: 0 -1px 19px 0 rgba(100, 150, 255, 0.15);
+    }
+
+    .create_left {
+        width: 1%;
+        padding-top: 0.1rem;
+        padding-bottom: 0.1rem;
+    }
+
+    .create_right {
+        color: #fff;
+        font-size: 0.18rem;
+        width: 1%;
+        background: #2d2e3a;
+        padding-top: 0.1rem;
+        padding-bottom: 0.1rem;
+    }
+
+    .weui_mask_transparent {
+        position: fixed;
+        z-index: 1000;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .weui_toast {
+        position: fixed;
+        z-index: 50000;
+        width: 7.6em;
+        min-height: 7.6em;
+        top: 180px;
+        left: 50%;
+        margin-left: -3.8em;
+        background: rgba(40, 40, 40, .75);
+        text-align: center;
+        border-radius: 5px;
+        color: #fff;
+    }
+
+    .weui_loading {
+        position: absolute;
+        width: 0;
+        z-index: 1;
+        left: 29%;
+        top: 20%;
+    }
+
+    .weui_loading_toast .weui_toast_content {
+        margin-top: 64%;
+        font-size: 14px;
+        color: #fff;
+    }
+
+    .weui_toast_content {
+        margin: 0 0 15px;
+    }
+</style>

src/pages/free/fill_free_order.vue

@@ -0,0 +1,939 @@
+<template>
+    <div class="big_div fill_free_order" style="height: 6.15rem;overflow: scroll;">
+        <div class="panel">
+            <div class="top_info">
+                <div class="go">
+                    <div class="one ub">
+                        <div class="left">产品名称</div>
+                        <div id="pro_cate_name" class="right ub-f1">{{info.pro_cate_name}}</div>
+                    </div>
+                    <div class="one ub">
+                        <div class="left">游玩日期</div>
+                        <div id="start_date" class="right ub-f1">{{info.date}}</div>
+                    </div>
+                    <!--<div class="one ub">
+                        <div class="left" style="padding-left: 0.4rem;">行程</div>
+                        <div id="start_date" class="right ub-f1">2日1晚</div>
+                    </div>-->
+                </div>
+                <div class="info">
+                    <div class="one ub">
+                        <div class="left">游玩人数</div>
+                        <div id="info_ticket" class="right ub-f1">{{info.people_str}}</div>
+                    </div>
+                </div>
+            </div>
+            <!--top_info end-->
+            <div class="ub ub-ver" style="padding:0.1rem 0.15rem 0.06rem 0.15rem;">
+                <div class="ub">出行人信息</div>
+                <div class="ub" style="color: #368ff4;">( 根据交通部道路旅客运输规定，实行客票实名制 )</div>
+            </div>
+            <div class="insurance_center">
+                <div class="insure_info">
+                    <div class="insure_title" style="margin-top:0.1425rem;">出行人信息(需填<span class="insure_num"
+                                                                                          style="color: #f45a36;">0</span>人,儿童无需填写)
+                    </div>
+                    <div class="insure_detail">
+                        <div v-for="val in info.num" class="ub ub-ver p_info"
+                             style="margin: 0.02rem 0;background-color: #FFFFFF;">
+                            <div class="one ub">
+                                <div class="left3" style="color: #2d2e3a; text-align:left">出行人{{val}}</div>
+                                <input class="right ub ub-f1 passanger_name" v-model="people_name[val-1]" type="text"
+                                       placeholder="必填，姓名"/>
+                            </div>
+                            <div class="one ub">
+                                <div class="left3" style="color: #2d2e3a;">身份证号</div>
+                                <input class="right ub ub-f1 passanger_cardId" v-model="people_id[val-1]" maxlength="21"
+                                       type="text" placeholder="必填" @blur="cardId(people_id[val-1],(val-1))">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--top_info end-->
+            <div class="bottom_customer" style="margin-top: 0.075rem;">
+                <div class="one ub">
+                    <div class="left2">预订人</div>
+                    <input class="right ub ub-f1" type="text" v-model="book_people.name" placeholder="必填，姓名"/>
+                </div>
+                <div class="one ub">
+                    <div class="left2">手机号</div>
+                    <input type="tel" class="right ub ub-f1" v-model="book_people_phone" maxlength="11"
+                           placeholder="必填，用于接收预订短信" onkeyup="this.value=this.value.replace(/[^0-9Xx]/g,'')"
+                           onafterpaste="this.value=this.value.replace(/[^0-9Xx]/g,'')" lazy @blur="phoneNumRex()">
+                </div>
+            </div>
+            <div class="insurance" style="margin-top: 0.075rem;margin-bottom:0.7rem;background: white;">
+                <!--此处开始画保险的页面-->
+                <div class="">
+                    <div>
+                        <div class="ub ub-ac ub-f1">
+                            <div class="ub shuoming1">乘客出行保障计划</div>
+                            <div class="ub" @click="lookPlanInfo"
+                                 style="margin-left: 0.075rem;height: 0.1125rem;width:0.1125rem"><img id="tiaoyue"
+                                                                                                      src="../../../static/image/bus_order/biaozhu.png"
+                                                                                                      alt=""
+                                                                                                      style="height: 100%;width:100%">
+                            </div>
+                            <div class="ub shuoming2" style="margin-left: 0.075rem;color:#f45a36">(仅适用于18-75周岁成人购买)
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ub">
+                        <div class="ub ub-f1" style="margin-top:0.1425rem;">
+                            <div class="ub shuoming3"><span id="insurance_price">{{insurance_price}}</span>元</div>
+                            <div class="ub shuoming4" style="margin-left: 0.1075rem;margin-right:0.09rem;">
+                                (含保额10w元旅行意外险)
+                            </div>
+                            <div class="ub shuoming5">x <span class="insure_num">{{insurance_num}}</span>人</div>
+                        </div>
+                        <div class="ub ub-f1 ub-pe ub-ac" style="width:0.45rem;height:0.275rem;">
+                            <mt-switch :value.sync="insurance_flag" v-model="buy_insurance"
+                                       @change="BuyInsuranceOnOff"></mt-switch>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--去下单-->
+            <div class="go_create_order">
+                <div class="ub">
+                    <div class="create_left ub ub-f2  ub-ac" style="background: white;opacity: 1;padding-left:0.15rem;"
+                         @click="lookPriceDetail">
+                        <div style="width:0.12rem;height:0.07rem"
+                             :style="showPrice?'background: url(static/image/bus_order/down_arrow.png) 0% 0% / 100% 100% no-repeat;':'background: url(static/image/bus_order/up_arrow.png) 0% 0% / 100% 100% no-repeat;'"></div>
+                        <span class="ulev1"
+                              style="margin-left:0.21rem;height: 0.1225rem;font-family: PingFangSC;font-size: 0.13rem;text-align: left;color: #666666;">总价：<span
+                                class="ulev1"
+                                style="font-size: 0.13rem;font-weight: normal;color:#f45a36;">￥</span></span>
+                        <span id="total_money" class="ulev1 total_money_style">{{total_money}}</span>
+                    </div>
+                    <div id="btn_create_order" class="create_right ub ub-f1 ub-pc ub-ac" @click="payMoney">
+                        <span style="height: 0.15rem;font-family:PingFangSC;font-size: 0.16rem;text-align: left;color: #ffffff;">去支付</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--模态框-->
+        <div class="model_price" v-show="showPrice" @click="closePriceDetail">
+            <div class="model_box_price animated" :class="fadeFlag?'fadeInUp':'fadeInDown'">
+                <div class="ub ub-pe ub-ac" style="height:0.45rem;">
+                    <!--padding: 0 0.15rem 0 0.15rem;-->
+                    <div class="ub ub-f1 ub-ac box_title" style="color:#666;margin-left:0.15rem;">总价详情</div>
+                </div>
+                <div style="border-bottom:1px solid #e6e6e6;"></div>
+                <div class="desc ub ub-ver" style="padding: 0 0.15rem 0 0.15rem;">
+                    <div class="ub ticket_price_desc"
+                         style="padding: 0.12rem 0 0.12rem 0;border-bottom:1px solid #e6e6e6;">
+                        <div class="ub desc_name" style="color: #96969c;">成人票价</div>
+                        <div class="ub ub-ac desc_price" style="margin-left: 0.3rem;color:#f45a36;width:0.5rem;">￥<span
+                                class="adult_price" style="color:#f45a36;">{{ticket_info.people.prod_price}}</span>
+                        </div>
+                        <div class="ub" style="padding: 0 0.1rem 0 0.1rem;">x</div>
+                        <div class="ub ticket_price_desc_count"><span
+                                class="adult_num">{{ticket_info.people.num}}</span>人
+                        </div>
+                    </div>
+                    <div v-if="ticket_info.child.num>0" class="ub ticket_price_desc"
+                         style="padding: 0.12rem 0 0.12rem 0;border-bottom:1px solid #e6e6e6;">
+                        <div class="ub desc_name" style="color: #96969c;">儿童票价</div>
+                        <div class="ub ub-ac desc_price" style="margin-left: 0.3rem;color:#f45a36;width:0.5rem;">￥<span
+                                class="child_price" style="color:#f45a36;">{{ticket_info.child.prod_price}}</span></div>
+                        <div class="ub" style="padding: 0 0.1rem 0 0.1rem;">x</div>
+                        <div class="ub ticket_price_desc_count"><span class="child_num">{{ticket_info.child.num}}</span>人
+                        </div>
+                    </div>
+                    <div class="ub insurance_price_desc" style="padding: 0.12rem 0 0.12rem 0;">
+                        <div class="ub desc_name" style="color: #96969c;">保险</div>
+                        <div class="ub ub-ac desc_insurance_price"
+                             style="margin-left: 0.3rem;color:#f45a36;width:0.5rem;">￥<span class="insurance_price"
+                                                                                            style="color:#f45a36;">{{insurance_price}}</span>
+                        </div>
+                        <div class="ub" style="padding: 0 0.1rem 0 0.1rem;">x</div>
+                        <div class="ub insurance_desc_count"><span class="insurance_num">{{insurance_num}}</span>人</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!--模态框-->
+        <transition name="fade">
+            <div class="model" v-show="showPlanInfo">
+                <div class="model_box" ref="modelBox">
+                    <div class="ub ub-pe ub-ac" style="height:0.45rem;">
+                        <div class="ub ub-f1 ub-ac ub-pc box_title" style="font-size:0.14rem;color:#333">乘客出行保障计划</div>
+                        <div id="box_clear"
+                             style="position:absolute;right:0.16rem;top:0.14rem;width: 0.14rem;height: 0.14rem;background-image: url(static/image/home/clear.png);background-repeat:  no-repeat;background-size: 100% 100%;"
+                             @click="closePlanInfo"></div>
+                    </div>
+                    <div style="border-bottom:1px solid #e6e6e6;margin-left:0.07rem;margin-right:0.07rem;"></div>
+                    <div id="desc" style="position: absolute; bottom: 0.21rem; top: 0.6rem;left:0;right:0; overflow: scroll;-webkit-overflow-scrolling: touch; padding-left: 0.16rem; padding-right: 0.16rem;">
+                        <div>
+                            <p>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">1、被保险人年龄</span>
+                                <span style="color: rgb(54, 143, 244); font-family:微软雅黑; font-size:12px; font-style:normal; text-decoration:none">30天-70</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">周岁；</span><br>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">2、一位被保险人最多可投保</span>
+                                <span style="color: rgb(54, 143, 244); font-family:微软雅黑; font-size:12px; font-style:normal; text-decoration:none">1</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">份；</span><br>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">3、温馨提示：阳光保险全国统一客户服务专线</span>
+                                <a href="tel:95510">
+                                    <span style="color: rgb(54, 143, 244); font-family: 微软雅黑; font-size: 12px; font-style: normal; text-decoration: none;">95510</span>
+                                </a>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">；</span><br><span style="color:#666666; font-family:微软雅黑; font-size:12px">4、本产品目前的销售区域为：北京、天津、河北、山西、内蒙古、辽宁、吉林、黑龙江、上海、江苏、浙江、安徽、福建、江西、山东、河南、湖北、湖南、广东、广西、海南、重庆、四川、贵州、云南、陕西、甘肃、宁夏、新疆。</span><br><span style="color:#666666; font-family:微软雅黑; font-size:12px; font-weight:bold">如实告知：</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">投保人应如实告知保险人就保险标的、投保人或者被保险人的有关情况所提出的询问。否则，我公司有权解除本保险合同，并不承担任何责任。</span>
+                            </p>
+                            <p style=" margin:5pt 0pt">
+                                <span style="font-family:Calibri; font-size:12px">5.</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">为倡导绿色低碳理念，支持绿色环保电子保单，该产品我们只提供电子保单， 电子保单与纸质保单具有同等法律效力。您完成购买后，我们会将电子保单发到您的邮箱。</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">保单查询方式：在阳光保险官网
+                                    <a target="_blank" href="https://www.sinosig.com/" style="color: rgb(54, 143, 244);">www.sinosig.com</a>首页"快速服务入口—保单查询"处查询电子保单；
+                                </span>
+                            </p>
+                            <p style=" margin:5pt 0pt">
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">6.保险产品费率、条款及险种名称和备案号说明：</span>
+                            </p>
+                            <p style=" margin:5pt 0pt">
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">查看产品详细</span>
+                                <a href="http://img.zhizhuchuxing.cn/wendang/insurance/lyxfl.pdf" style="display: inline-block;color: rgb(54, 143, 244); font-family: 微软雅黑; font-size: 12px;">
+                                    费率说明
+                                </a>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">、查看</span>
+                                <a href="http://img.zhizhuchuxing.cn/wendang/insurance/阳光人寿和泰安心旅行综合意外伤害保险条款.pdf" style="display: inline-block;color: rgb(54, 143, 244); font-family: 微软雅黑; font-size: 12px;">
+                                    产品条款
+                                </a>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">，产品险种和备案号《阳光人寿和泰安心旅行综合意外伤害保险》阳光人寿〔2018〕308号</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">&nbsp;</span>
+                            </p>
+                            <table cellspacing="0" cellpadding="0">
+                                <caption style="text-align:center;">产品责任和保额保费</caption>
+                                <tr>
+                                    <td style="width:20%;">方案名称</td>
+                                    <td style="width:20%;">保险责任</td>
+                                    <td style="width:20%;">保险金额</td>
+                                    <td style="width:20%;">保障期间</td>
+                                    <td style="width:20%;">保费</td>
+                                </tr>
+                                <tr>
+                                    <td rowspan="2">阳光人寿蜘蛛出行游旅游意外险A款QP120276</td>
+                                    <td>意外伤害身故/伤残</td>
+                                    <td>100000</td>
+                                    <td rowspan="2">
+                                        <div>1-5天</div>
+                                        <div>(根据实际出行日期为准)</div>
+                                    </td>
+                                    <td rowspan="2">2元/人/天</td>
+                                </tr>
+                                <tr>
+                                    <td>意外伤害医疗</td>
+                                    <td>20000（医保范围内100免赔，90%赔付）</td>
+                                </tr>
+                            </table>
+                            <p style=" margin:0pt">
+                                <span style="color:#666666; font-family:宋体; font-size:12pt; font-weight:bold">理赔流程</span><br>
+                                <img src="http://img.zhizhuchuxing.cn/zzwx/insurance/insurance_word_img.png" style="width:100%;" alt="IMG_257">
+                                <span style="font-family:Calibri; font-size:12px">&nbsp;</span>
+                            </p>
+                            <p style=" margin:0pt">
+                                <span style="color:#666666; font-family:宋体; font-size:12pt; font-weight:normal">拨打</span>
+                                <a href="tel:95510">
+                                    <span style="color: rgb(54, 143, 244); font-family:宋体; font-size:12pt; font-weight:normal">95510</span>
+                                </a>
+                                <span style="color:#666666; font-family:宋体; font-size:12pt; font-weight:normal"></span>
+                                <span style="color:#666666; font-family:宋体; font-size:12pt; font-weight:normal">报案—提交证明材料—资料审核—核定理赔结论</span>
+                            </p>
+                            <p style=" margin:7.5pt 0pt; text-align:center">
+                                <span style="color: rgb(54, 143, 244); font-family: 微软雅黑; font-size: 16pt; font-weight: bold;">!!!责任免除</span>
+                            </p>
+                            <p style=" margin:7.5pt 0pt">
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px; font-weight:bold">请仔细阅读保险条款，并请特别留意条款中的“</span>
+                                <span style="color:#ff0000; font-family:微软雅黑; font-size:12px; font-weight:bold">责任免除</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px; font-weight:bold">”部分。</span><br>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px; font-weight:bold">免责条款：</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">因被保险人在</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">某些特定原因、特定情形下或期间内的状态会影响保险风险等级的评定，保险公司在这些情况下的保险责任将会免除，被保险人发生的保险事故，保险公司不承担给付保险金的责任。</span>
+                                <span style="color: rgb(54, 143, 244); font-family:微软雅黑; font-size:12px; font-style:normal; text-decoration:none">具体免责内容详情请见产品条款及免责条款规定</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px"> </span>
+                            </p>
+                            <p style=" margin:7.5pt 0pt">
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px; font-weight:bold">备注</span>
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">：根据保监会规定，未成年人身故保险金给付总额，不满10周岁的最高20万，已满10周岁不满18周岁的最高50万，航空意外身故保险金额不计算在内。</span>
+                            </p>
+                            <p style="margin: 7.5pt 0pt;">
+                                <span style="color: rgb(102, 102, 102); font-family: 微软雅黑; font-size: 12px; font-weight: bold;">查看</span>
+                                <a href="http://img.zhizhuchuxing.cn/wendang/insurance/tbxz.doc" style="color: rgb(255,0,0); font-family: 微软雅黑; font-size: 16px;font-weight: 600;">
+                                    投保须知
+                                </a>
+                            </p>
+                            <p style=" margin:7.5pt 0pt">
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">&nbsp;</span>
+                            </p>
+                            <p style=" margin:7.5pt 0pt">
+                                <span style="color:#666666; font-family:微软雅黑; font-size:12px">&nbsp;</span>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+
+</template>
+
+<script>
+    import {getFreeWalkInsure} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import info from '../../config/info'
+    import {Toast} from 'mint-ui';
+    import {Swipe, SwipeItem, MessageBox, Switch} from 'mint-ui';
+    import dateUtil from '../../config/mUtil/dateUtil'
+    import cardId from '../../config/mUtil/cardId'
+    import {makeOrder} from '../../service/httpService'
+
+    const CONST_MIN_AGE = 18;
+    const CONST_MAX_AGE = 70;
+
+    export default {
+        name: "fill_free_order",
+        data() {
+            return {
+                info: {},
+                insurance_price: '',
+                insurance_flag: true, //是否有保险可售
+                buy_insurance: true, //默认购买保险
+                showPlanInfo: false,
+                showPrice: false,
+                fadeFlag: false,
+                descHeight: '',
+                ticket_info: {
+                    people: {},
+                    child: {}
+                },
+                people_name: [],
+                people_id: [],
+                book_people: {
+                    name: '',
+                },
+                book_people_phone: '',
+                insurance_flags: [],//存放保险是否购买
+                insurance_num: 0,//保险数量
+                insurance_total_price: 0,//保险总价
+                total_money: 0,//订单总价
+            };
+        },
+        mounted() {
+            this.load();
+        },
+        watch: {
+            showPlanInfo(cur, old) {
+                let body = document.querySelectorAll('body')[0];
+                body.style.overflow = cur === false ? '' : 'hidden';
+            },
+            book_people_phone(old, cur) {
+                this.book_people_phone = this.book_people_phone.replace(/[^\d]/g, '');
+            }
+        },
+        methods: {
+            load() {
+                this.info = tool.getStorJson('fill_free_order');
+                // 处理日期
+                let month = dateUtil.getMonthByDate(this.info.start_date);
+                let day = dateUtil.getDayByDate(this.info.start_date);
+                this.info.date = month + '月' + day + '日';
+                // 处理出行人数
+                let str = '';
+                let num = 0;
+                let info_people = {
+                    prod_price: 0,
+                    num: 0
+                };
+                let info_child = {
+                    prod_price: 0,
+                    num: 0
+                };
+                this.info.prod_arr.forEach(function (item) {
+                    if (item.prod_count > 0) {
+                        if (item.prod_name === "成人票") {
+                            str += '成人' + item.prod_count + ' ';
+                            num = item.prod_count;
+                        } else {
+                            str += '儿童' + item.prod_count + ' ';
+                        }
+                    }
+                    // 处理售卖信息
+                    if (item.prod_name === "成人票") {
+                        info_people.prod_price = item.prod_price;
+                        info_people.num = item.prod_count;
+                    }
+                    if (item.prod_name === "儿童票") {
+                        info_child.prod_price = item.prod_price;
+                        info_child.num = item.prod_count;
+                    }
+                });
+                this.ticket_info.people = info_people;
+                this.ticket_info.child = info_child;
+
+                tool.log(this.ticket_info.people)
+
+                this.info.people_str = str;
+                this.info.num = num;
+                // 初始化people_name和people_id，以及保险
+                for (let i = 0; i < num; i++) {
+                    this.people_name[i] = '';
+                    this.people_id[i] = '';
+                    this.insurance_flags[i] = false;//默认不够买保险
+                }
+                // 初始化总价
+                this.total_money = this.info.total_money;
+                // 获取保险价格
+                let params = {
+                    pro_cate_id: this.info.pro_cate_id,
+                    run_date: this.info.start_date,
+                };
+                getFreeWalkInsure(params).then(res => {
+                    if (res.flag === true) {
+                        // 保险价格
+                        this.insurance_price = res.data.price;
+                        this.insurance_flag = true;
+                        this.buy_insurance = true;
+                    } else {
+                        this.insurance_flag = false;
+                        this.buy_insurance = false;
+                    }
+                }).catch(x => {
+                    Toast(info.infoApiError)
+                })
+            },
+            lookPlanInfo() {
+                this.showPlanInfo = !this.showPlanInfo
+                tool.log(this.showPlanInfo)
+                tool.delay(() => {
+                    let dom = tool.navDom('.model_box')[0];
+                    let height = dom.clientHeight - 46 - 21 * 2;
+                    this.descHeight = 'height:' + height + 'px';
+                }, 1000)
+            },
+            closePlanInfo() {
+                this.showPlanInfo = false;
+            },
+            lookPriceDetail() {
+                this.fadeFlag = !this.fadeFlag;
+                if (this.showPrice === false) {
+                    this.showPrice = !this.showPrice;
+                } else {
+                    setTimeout(() => {
+                        this.showPrice = !this.showPrice;
+                    }, 400)
+                }
+
+            },
+            closePriceDetail() {
+                this.fadeFlag = false;
+                setTimeout(() => {
+                    this.showPrice = false;
+                }, 400)
+            },
+            BuyInsuranceOnOff() {
+                this.insurance_flag = !this.insurance_flag;
+                tool.log(this.buy_insurance, this.insurance_flag)
+                // 计算所有的保险
+                if (this.insurance_flag === true) {
+                    let count = 0;
+                    this.insurance_flags.forEach(function (item, i) {
+                        if (item === true) {
+                            count++;
+                        }
+                    })
+                    // 计算总价
+                    this.insurance_total_price = this.insurance_price * count;
+                    this.insurance_num = count;
+                } else {
+                    this.insurance_total_price = 0;
+                    this.insurance_num = 0;
+                }
+                // 修改总价
+                this.total_money = this.info.total_money + this.insurance_total_price;
+            },
+            cardId(card_id, index) {
+                let cardInfo = cardId.getCardIdInfo(card_id,this.info.start_date);
+                if (cardInfo.isCard === false) {
+                    this.insurance_flags[index] = false;
+                    Toast(`出行人${(index + 1)}的身份证号输入不正确`)
+                } else {
+                    if (cardInfo.old >= CONST_MIN_AGE && cardInfo.old < CONST_MAX_AGE) {
+                        this.insurance_flags[index] = true;
+                    } else {
+                        this.insurance_flags[index] = false;
+                    }
+                }
+                // 计算所有的保险
+                if (this.insurance_flag === true) {
+                    let count = 0;
+                    this.insurance_flags.forEach(function (item, i) {
+                        if (item === true) {
+                            count++;
+                        }
+                    })
+                    // 计算总价
+                    this.insurance_total_price = this.insurance_price * count;
+                    this.insurance_num = count;
+                    // 修改总价
+                    this.total_money = (this.info.total_money + this.insurance_total_price).toFixed(2);
+                    let haha = parseInt(this.total_money);
+                    if (this.total_money - haha === 0) {
+                        this.total_money = haha;
+                    }
+                }
+            },
+            payMoney() {
+                if (this.book_people.name === '') {
+                    MessageBox.alert('请输入预订人');
+                    return false;
+                }
+                if (this.book_people_phone.length !== 11) {
+                    MessageBox.alert('请输入11位手机号码');
+                    return false;
+                }
+                let regx = new RegExp('^((13[0-9])|(15[0-9])|(18[0-9])|(14[0-9])|(17[0-9]))\\d{8}$');
+                if(!regx.test(this.book_people_phone)){
+                    Toast('请输入正确的手机号');
+                    return;
+                }
+                // 数据验证
+                let insurance_list = [];
+                let passanger_arr = [];
+                let id_info = this.people_id;
+                this.people_name.forEach((item, index)=>{
+                    passanger_arr.push({
+                        passenger_name: item ? item : '',
+                        passenger_cardid: id_info[index] ? id_info[index] : '',
+                    });
+                    let cardInfo = cardId.getCardIdInfo(id_info[index],this.info.start_date);
+                    if (cardInfo.old >= CONST_MIN_AGE && cardInfo.old <= CONST_MAX_AGE) {
+                        insurance_list.push({
+                            passenger_name: item ? item : '',
+                            passenger_cardid: id_info[index] ? id_info[index] : '',
+                        });
+                    }
+                });
+
+                //遍历数组 判断当后面的没有则补充第一个的信息
+                if(!this.buy_insurance){
+                    passanger_arr.map((x,i)=>{
+                        if(i!==0){
+                            if(x.passenger_name==="" && x.passenger_cardid===""){
+                                x.passenger_name = passanger_arr[0].passenger_name;
+                                x.passenger_cardid = passanger_arr[0].passenger_cardid;
+                            }
+                        }
+                    });
+                }
+                let allow_flag = true;
+                for (let i = 0; i < passanger_arr.length; i++) {
+                    let index = i + 1;
+                    if (passanger_arr[i].passenger_name === '') {
+                        MessageBox.alert('请填写出行人' + index);
+                        allow_flag = false;
+                        break;
+                    } else if (passanger_arr[i].passenger_cardid === '') {
+                        MessageBox.alert('请填写出行人' + index + '身份证号');
+                        allow_flag = false;
+                        break;
+                    } else if (cardId.isCardId18(passanger_arr[i].passenger_cardid) === false) {
+                        MessageBox.alert('出行人' + index + '身份证号输入不正确');
+                        allow_flag = false;
+                        break;
+                    }
+                }
+                if(allow_flag===false)return;
+                // 生成订单
+                let prod_arr = [];
+                this.info.prod_arr.forEach(function (item) {
+                    if (item.prod_name === '成人票') {
+                        let t_obj = {
+                            prod_name: item.prod_name,
+                            prod_id: item.prod_id,
+                            prod_count: item.prod_count
+                        };
+                        prod_arr.push(t_obj);
+                    }
+                    if (item.prod_name === '儿童票') {
+                        let y_obj = {
+                            prod_name: item.prod_name,
+                            prod_id: item.prod_id,
+                            prod_count: item.prod_count
+                        };
+                        prod_arr.push(y_obj);
+                    }
+                });
+
+                let params = {
+                    pro_cate_id: this.info.pro_cate_id,
+                    start_date: this.info.start_date,
+                    prod_arr: JSON.stringify(prod_arr),
+                    contacts_name: this.book_people.name,
+                    contacts_phone: this.book_people_phone,
+                    insurance_list: JSON.stringify(insurance_list),
+                    passanger_arr: JSON.stringify(passanger_arr),
+                    is_buy_insurance: this.buy_insurance ? 1 : 0,
+                    insurance_price: this.insurance_price,
+                    if_back: 0
+                };
+                makeOrder(params).then(res => {
+                    if (res['flag'] == false) {
+                        MessageBox.alert(res['msg']);
+                    } else {
+                        window.location.href = res.data.pay_url;
+                    }
+                }).catch(e => {
+                    Toast(info.infoApiError);
+                })
+            },
+            phoneNumRex(){
+                let regx = new RegExp('^((13[0-9])|(15[0-9])|(18[0-9])|(14[0-9])|(17[0-9]))\\d{8}$');
+                if(!regx.test(this.book_people_phone)){
+                    Toast('请输入正确的手机号');
+                }
+            }
+        }
+    }
+</script>
+<style lang="scss" type="text/scss">
+    .fill_free_order{
+        table{
+            border:1px solid #ddd;
+        }
+        td{
+            border:1px solid #ddd;
+            text-align: center;
+        }
+    }
+</style>
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+
+    @keyframes fadeInUp {
+        0% {
+            /*opacity: 0;*/
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+        100% {
+            /*opacity: 1;*/
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .9s;
+    }
+
+    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
+    {
+        opacity: 0;
+    }
+
+    .fadeInUp {
+        -webkit-animation-name: fadeInUp;
+        animation-name: fadeInUp;
+    }
+
+    @-webkit-keyframes fadeInDown {
+        0% {
+            -webkit-transform: none;
+            transform: none;
+        }
+        100% {
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    @keyframes fadeInDown {
+        0% {
+            -webkit-transform: none;
+            transform: none;
+        }
+        100% {
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+    }
+
+    .fadeInDown {
+        -webkit-animation-name: fadeInDown;
+        animation-name: fadeInDown;
+    }
+
+    .go,
+    .back,
+    .info {
+        background: white;
+        margin-top: 0.06rem;
+    }
+
+    .one,
+    .two,
+    .three {
+        padding-top: 0.16rem;
+        padding-bottom: 0.16rem;
+        border-bottom: 1px solid #e9ebee;
+    }
+
+    .left {
+        padding-left: 0.12rem;
+        font-size: 0.14rem;
+        color: #96969c;
+    }
+
+    .left2 {
+        /*padding-left: 0.26rem;*/
+        text-align: center;
+        font-size: 0.14rem;
+        color: #96969c;
+        width: 0.6rem;
+    }
+
+    .left3 {
+        font-size: 0.14rem;
+        color: #96969c;
+        width: 0.6rem;
+    }
+
+    .right {
+        padding-left: 0.16rem;
+        font-size: 0.14rem;
+        color: #686872;
+        padding-right: 0.16rem;
+    }
+
+    .bottom_customer .left2 {
+        color: #2d2e3a;
+    }
+
+    .bottom_customer .right {
+        color: #2d2e3a;
+    }
+
+    .go_create_order {
+        position: fixed;
+        width: 3.75rem;
+        /*height:0.5rem;*/
+        z-index: 120;
+        bottom: 0;
+        box-shadow: 0 -1px 19px 0 rgba(100, 150, 255, 0.15);
+
+    }
+
+    .create_left {
+        width: 1%;
+        padding-top: 0.14rem;
+        padding-bottom: 0.14rem;
+    }
+
+    .create_right {
+        opacity: 0.9;
+        background-color: #368ff4;
+    }
+
+    .weui_mask_transparent {
+        position: fixed;
+        z-index: 1000;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .weui_toast {
+        position: fixed;
+        z-index: 50000;
+        width: 7.6em;
+        min-height: 7.6em;
+        top: 180px;
+        left: 50%;
+        margin-left: -3.8em;
+        background: rgba(40, 40, 40, .75);
+        text-align: center;
+        border-radius: 5px;
+        color: #fff;
+    }
+
+    .weui_loading {
+        position: absolute;
+        width: 0;
+        z-index: 1;
+        left: 29%;
+        top: 20%;
+    }
+
+    .weui_loading_toast .weui_toast_content {
+        margin-top: 64%;
+        font-size: 14px;
+        color: #fff;
+    }
+
+    .weui_toast_content {
+        margin: 0 0 15px;
+    }
+
+    .bottom_customer, .insure_detail {
+        background: #ffffff;
+        width: 3.75rem;
+        padding: 0 0.15rem 0 0.15rem;
+    }
+
+    .instruction {
+        margin-top: 0.16rem;
+    }
+
+    .insurance {
+        margin-top: 0.075rem;
+        background: #ffffff;
+        width: 3.75rem;
+        /*height:0.675rem;*/
+        padding: 0.165rem 0.15rem 0.165rem 0.15rem;
+    }
+
+    .insure_title {
+        display: none;
+    }
+
+    .model {
+        position: fixed;
+        z-index: 150;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        /*-webkit-filter: blur(6px);
+filter: blur(6px);*/
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+
+    .model_box {
+        position: fixed;
+        top: 0.23rem;
+        bottom: 0.23rem;
+        left: 0.2rem;
+        right: 0.2rem;
+        border-radius: 0.05rem;
+        background-color: #fff;
+        /*-webkit-border-top-left-radius: 8px;
+        -webkit-border-top-right-radius: 8px;*/
+    }
+
+    .model_price {
+        position: fixed;
+        z-index: 100;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+
+    .model_box_price {
+        position: fixed;
+        bottom: 0.5rem;
+        left: 0;
+        right: 0;
+        background-color: #fff;
+    }
+
+    .desc .desc_name {
+        width: 50px;
+    }
+
+    .animated {
+        -webkit-animation-duration: 0.4s;
+        animation-duration: 0.4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+    }
+
+    .total_money_style {
+        height: 0.1475rem;
+        font-family: PingFangSC;
+        font-size: 0.2rem;
+        font-weight: 500;
+        line-height: 0.9;
+        text-align: left;
+        color: #f45a36;
+    }
+
+    .weui_mask_transparent {
+        position: fixed;
+        z-index: 1000;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .weui_toast {
+        position: fixed;
+        z-index: 50000;
+        width: 7.6em;
+        min-height: 7.6em;
+        top: 180px;
+        left: 50%;
+        margin-left: -3.8em;
+        background: rgba(40, 40, 40, .75);
+        text-align: center;
+        border-radius: 5px;
+        color: #fff;
+    }
+
+    .weui_loading {
+        position: absolute;
+        width: 0;
+        z-index: 1;
+        left: 29%;
+        top: 20%;
+    }
+
+    .weui_loading_toast .weui_toast_content {
+        margin-top: 64%;
+        font-size: 14px;
+        color: #fff;
+    }
+
+    .weui_toast_content {
+        margin: 0 0 15px;
+    }
+
+    #desc {
+        font-size: 0.12rem;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    #desc a {
+        word-wrap: break-word !important;
+    }
+
+    .model_price {
+        position: fixed;
+        z-index: 100;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+
+    .model_box_price {
+        position: fixed;
+        bottom: 0.5rem;
+        left: 0;
+        right: 0;
+        background-color: #fff;
+    }
+
+    .animated {
+        -webkit-animation-duration: 0.4s;
+        animation-duration: 0.4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+    }
+</style>

src/pages/home/end_prod_list.vue

@@ -0,0 +1,432 @@
+<template>
+    <div class="bg_color ui_hide" id="div_body">
+        <div style="position:fixed; top:0;z-index;z-index: 50">
+            <div id="show_img" class="ub ub-ver" :style="showImgStyle" style="width: 3.75rem;height: 1.5rem;background-repeat: no-repeat;background-size: 100% 100%;">
+                <div id="category_name" class="ub" style="color: #ffffff;font-family: PingFangSC;font-size: 0.2rem;font-weight: 500;text-align: left;margin-left: 0.2rem;margin-top: 0.91rem;height:0.1875rem">{{intro.category_name}}</div>
+                <div id="category_describe" class="ub" style="color: #ffffff;font-family: PingFangSC;font-size: 0.12rem;font-weight: 500;text-align: left;margin-left: 0.2rem;margin-top: 0.135rem;height:0.115rem">{{intro.category_describe}}</div>
+            </div>
+            <div class="ub ub-f1" style="width: 3.75rem; height: 0.3975rem; border-bottom: 0.005rem solid #e6e6e6; background: #fff;">
+                <div v-for="(item,$index) in titleItems" @click="selectStyle($index)" class="ub ub-f1 ub-ac ub-pc type" :class="item.selected?'selected':''">
+                    {{item.select}}
+                </div>
+            </div>
+        </div>
+
+
+        <!--产品列表-->
+        <div v-if="type" class="list_info" style="margin-top: 1.895rem;background:#fff;padding-bottom:0.075rem;">
+            <div v-if="list.length==0" class="ub ub-ac ub-pc ulev1" style="padding:0.3rem 0;width: 3.75rem">暂无相关信息</div>
+            <div v-else v-for="dict in list" class="hot_sale_line ub"  @click="prodDetail(dict.category_id,dict.prod_cate_id)" >
+                <img v-lazy="setLoading(dict.show_img)" class="goods_img">
+                <div class="goods_contents">
+                    <div class="goods_name">{{dict.pro_cate_name}}</div>
+                    <div class="goods_mark ub">
+                        <div :style="dict.category_name =='巴士自由行'?'width: 0.7rem':''" class="goods_mark_content ub ub-pc ub-ac" v-bind:category_id="dict.category_id">
+                            {{dict.category_name}}
+                        </div>
+                    </div>
+                    <div class="ub ub-ac" style="margin-top: 0.15rem;">
+                        <!--<div class="ub ub-ac star_ary f1">-->
+                            <!--<div  v-for="star in starList[$index]" class="ub star"  :style="star"></div>-->
+                            <star-view :starValue="dict.star"></star-view>
+                        <!--</div>-->
+                        <div class="ub goods_contents_font ub-f1">评分{{dict.star}}分</div>
+                        <div class="ub ub-ae" style="margin-right: 0.21rem">
+                            <div class="goods_contents_font3 ub ub-f1 ub-ae" style="line-height: 1">¥</div>
+                            <div class="goods_contents_font2 ub ub-f1" style="line-height: 1">{{dict.show_price}}</div>
+                            <div class="ub ub-f1" style="color:#666666;line-height: 1">起</div>
+                        </div>
+                    </div>
+                    <div class="ub ub-ae" style="margin-top: 0.05rem;">
+                        <div class="ub ub-ac star_ary goods_contents_font1 f1">月销售{{dict.sales_count}}单</div>
+                        <div class="ub goods_contents_font ub-f1">{{dict.comment_count}}评论</div>
+                        <div class="ub goods_contents_font" style="text-decoration: line-through;margin-right: 0.21rem">原价{{dict.original_price}}元</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div  class="list_info" style="margin-top: 1.895rem;background:#fff;padding-bottom:0.075rem;" v-else>
+            <div v-if="list.length==0" class="ub ub-ac ub-pc ulev1" style="padding:0.3rem 0;width: 3.75rem">暂无相关信息</div>
+            <div v-else v-for="dict in list" class="itinerary">
+                <div class="itinerary-title ub ub-ac">
+                    <div class="ub" style="width: 0.05rem;height: 0.12rem; background-color: #368ff4"></div>
+                    <div class="ub  ulev1" style="line-height: 1;margin-left: 0.1rem;">{{dict.name}}</div>
+                </div>
+                <div class="itinerary-content" v-html="dict.intro"></div>
+                <div class="click_detail ulev0 ub ub-ac" @click="openModel(dict.name,dict.detail)">
+                    <div class="ub" style="margin-right: 0.05rem;color: #368ff4;">查看完整内容</div>
+                    <div class="ub" style="background-image: url(../../../static/image/home/jiantou.png);background-repeat: no-repeat;background-size: 100% 100%;width: 0.0425rem;height:0.085rem"></div>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="list.length>0" class="footer_info">
+            <div class="ub-ac ub-pc ub ui_p_b15" style="margin-bottom: 0.5rem;color: #686872;"></div>
+        </div>
+        <!-- 详情弹框 -->
+        <div  class="model" v-show="!model.show">
+            <div class="model_box" ref="modelBox">
+                <div class="ub ub-pe ub-ac" style="height:0.45rem;">
+                    <div class="ub ub-f1 ub-ac ub-pc box_title" style="font-size:0.14rem;color:#333">{{modelName}}</div>
+                    <div @click="closeModel" style="position:absolute;right:0.16rem;top:0.14rem;width: 0.14rem;height: 0.14rem;background-image: url(static/image/home/clear.png);background-repeat:  no-repeat;background-size: 100% 100%;"></div>
+                </div>
+                <div style="border-bottom:1px solid #e6e6e6;margin-left:0.07rem;margin-right:0.07rem;"></div>
+                <div id="desc" :style="descHeight" style="height:4.75rem;overflow:scroll;margin-top:0.21rem;padding-left:0.16rem;padding-right:0.16rem;" v-html="modelContent">
+
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import tool from '../../config/mUtil/tool'
+    import info from '../../config/info'
+    import { Swipe, SwipeItem,MessageBox,Toast,Indicator} from 'mint-ui';
+    import starView from '../product/view/Star'
+    import {endProdList, endProdFoodList,endProdTicketList,endProdItineraryList}  from '../../service/httpService';
+
+    let cache_key = 'cache_key_tripgongnue_20180131';
+
+    export default {
+        name:'prod',
+        components:{
+            starView
+        },
+        data() {
+            return {
+                cache_data:{},
+                data:{},
+                intro:{},
+                showImgStyle:{},
+                titleItems:[
+                    {select:'一日游',selected:true},
+                    {select:'门票',selected:false},
+                    {select:'美食娱乐',selected:false},
+                    {select:'行程攻略',selected:false},
+                ],
+                list:[],
+                type:true,
+                model:{
+                    show:true,
+                },
+                modelName:'',
+                modelContent:'',
+                descHeight:'',
+            }
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.load();
+            })
+        },
+        methods:{
+            // async initData() {
+            //     let params = {'cms_category_id':this.$route.query.cms_prod_id};
+            //     this.data = await endProdList(params)['data'];
+            // },
+            load() {
+                let params = {'cms_category_id':this.$route.query.cms_prod_id};
+                this.selectStyle(0);
+            },
+            selectStyle(index) {
+                let delayT = 500;
+                this.titleItems.map(x=>x.selected=false);
+                this.titleItems[index].selected=true;
+                let params = {'cms_category_id':this.$route.query.cms_prod_id};
+                Indicator.open({
+                    spinnerType:'fading-circle'
+                });
+                if(index==0){
+                    tool.delay(()=>{
+                        endProdList(params).then(res=>{
+                            Indicator.close();
+                            this.cache_data[index] = res['data'];
+                            this.data = res['data'];
+                            if(res.flag===false){
+                                Toast(res.msg);
+                            }else{
+                                this.showImgStyle={
+                                    backgroundImage: `url(${this.data.intro[0].img_url})`
+                                };
+                                this.intro = {
+                                    category_name:this.data.intro?this.data.intro[0].category_name:'',
+                                    category_describe:this.data.intro?this.data.intro[0].category_describe:'',
+                                };
+                                this.list = res['data'].oneDayTrip;
+                                this.type = true;
+                            }
+                        }).catch(e=>{
+                            Indicator.close();
+                            Toast(info.infoApiError);
+                        })
+                    },delayT);
+                }else if(index==1){
+                    tool.delay(()=>{
+                        endProdTicketList(params).then(res=>{
+                            Indicator.close();
+                            this.cache_data[index] = res['data'];
+                            if(res.flag===false){
+                                Toast(res.msg);
+                            }else{
+                                this.list = res['data'].ticket;
+                                this.type = true;
+                            }
+                        }).catch(e=>{
+                            Indicator.close();
+                            Toast(info.infoApiError);
+                        })
+                    },delayT);
+                }else if(index==2){
+                    tool.delay(()=>{
+                        endProdFoodList(params).then(res=>{
+                            this.cache_data[index] = res['data'];
+                            Indicator.close();
+                            if(res.flag===false){
+                                Toast(res.msg);
+                            }else{
+                                this.list = res['data'].food;
+                                this.type = true;
+                            }
+                        }).catch(e=>{
+                            Indicator.close();
+                            Toast(info.infoApiError);
+                        })
+                    },delayT);
+                }else if(index==3){
+                    tool.delay(()=>{
+                        if(this.cache_data.hasOwnProperty(index)){
+                            tool.log(this.cache_data[index])
+                            this.list = this.cache_data[index].list;
+                            this.type = false;
+                            Indicator.close();
+                            return;
+                        }
+                        endProdItineraryList(params).then(res=>{
+                            Indicator.close();
+                            this.cache_data[index] = res['data'];
+                            if(res.flag===false){
+                                Toast(res.msg);
+                            }else{
+                                this.list = res['data'].list;
+                                this.type = false;
+                            }
+                        }).catch(e=>{
+                            Indicator.close();
+                            Toast(info.infoApiError);
+                        })
+                    },delayT);
+                }
+            },
+            setLoading(url){
+                return {
+                    src:url,
+                    error:'static/image/home/productloading.png',
+                    loading:'static/image/home/productloading.png'
+                }
+            },
+            openModel(name,intro){
+                tool.navDom('body')[0].className = "pos";
+                this.model = !this.model;
+                this.modelName = name;
+                this.modelContent = intro;
+                tool.delay(()=>{
+                    let dom = tool.navDom('.model_box')[0];
+                    let height =dom.clientHeight- 46 - 21*2;
+                    this.descHeight = 'height:'+height+'px';
+                },10)
+            },
+            closeModel(){
+                this.model = {
+                    show:true,
+                };
+            },
+            prodDetail(category_id,pro_cate_id){
+                // category_id 1车票 2门票 3酒店 4巴士自由行 5上门接
+                if('1' == category_id) {
+                    MessageBox.alert('该产品已售完');
+                    return;
+                    this.$router.go(-1);
+                } else if('2' == category_id){
+                    this.$router.push({
+                        name:'createTicketOrder',
+                        query:{
+                            pro_cate_id:pro_cate_id
+                        }
+                    })
+                } else if('4' == category_id) {
+                    this.$router.push({
+                        name:'freeOrder',
+                        query:{
+                            pro_cate_id:pro_cate_id
+                        }
+                    })
+                }
+            }
+        }
+    }
+</script>
+<style lang="scss" type="text/scss">
+    #desc{
+        img {
+            max-width: 100%;
+        }
+        p{
+            font-size: 14px;
+            margin-top: 0;
+            margin-bottom: 10px;
+            color: #8f8f94;
+        }
+        strong{
+            color:#333
+        }
+    }
+</style>
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+
+    .hot_sale {
+        padding-top:0.05rem;
+        background-color: #ffffff;
+    }
+    .hot_sale_line {
+        height:1.15rem;
+        width:3.75rem;
+        padding-left:0.1rem;
+
+    }
+    .goods_img {
+        width: 1rem;
+        height: 1rem;
+        background-color: #cccccc;
+        margin-top: 0.075rem;
+        margin-bottom: 0.075rem;
+    }
+    .goods_contents {
+        margin-top:0.075rem;
+        margin-left:0.1125rem;
+        width:2.5rem;
+        border-bottom: 1px solid #dadada;
+    }
+    .goods_name {
+        width: 2.5rem;
+        /*font-family: PingFangSC;*/
+        font-size: 0.13rem;
+        line-height: 1.38;
+        text-align: left;
+        color: #333333;
+        text-overflow: ellipsis;/*文字隐藏后添加省略号*/
+        white-space: nowrap;/*强制不换行*/
+        overflow: hidden;
+    }
+    .goods_mark {
+        margin-top:0.1rem;
+    }
+    .goods_mark_content {
+        width: 0.525rem;
+        padding-bottom: 0.01rem;
+        padding-top: 0.02rem;
+        line-height:1;
+        border-radius: 0.08rem;
+        color: #368ff4;
+        border: solid 1px #368ff4;
+        margin-right:0.05rem;
+    }
+
+    .f1 {
+        width:0.8rem;
+    }
+    .f2 {
+        width:0.9rem;
+    }
+    .goods_contents_font {
+        font-family: PingFangSC;
+        font-size: 0.11rem;
+        line-height: 1.64;
+        text-align: left;
+        color: #999999;
+    }
+    .goods_contents_font1 {
+        font-family: PingFangSC;
+        font-size: 0.11rem;
+        line-height: 1.64;
+        text-align: left;
+        color: #333333;
+    }
+    .goods_contents_font2 {
+        font-family: PingFangSC;
+        font-size: 0.19rem;
+        font-weight: 500;
+        line-height: 1;
+        text-align: left;
+        color: #f45a36;
+    }
+    .goods_contents_font3 {
+        font-size: 0.12rem;
+        font-weight: normal;
+        line-height: 1.5;
+        color: #f45a36;
+    }
+    .ub .selected{
+        color:#368ff4;
+        border-bottom: 0.02rem solid #368ff4 ;
+    }
+    .type {
+        border-bottom: 0.02rem solid #ffffff ;
+    }
+    .itinerary{
+        width:3.75rem;
+        height: 1.7rem;
+        background-color: #ffffff;
+        margin-bottom:0.075rem;
+        padding-left:0.2rem;
+        padding-top:0.23rem;
+    }
+    .itinerary-content {
+        margin-top:0.19rem;
+        padding-right:0.225rem;
+        font-size: 0.13rem;
+        height:0.7rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+    }
+    .click_detail {
+        margin-top:0.16rem;
+        color: #368ff4;
+    }
+
+
+
+
+    .model {
+        position: fixed;
+        z-index: 100;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        /*-webkit-filter: blur(6px);
+        filter: blur(6px);*/
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+    .model_box {
+        position: fixed;
+        top:0.23rem;
+        bottom: 0.23rem;
+        left: 0.2rem;
+        right: 0.2rem;
+        border-radius: 0.05rem;
+        background-color: #fff;
+        /*-webkit-border-top-left-radius: 8px;
+        -webkit-border-top-right-radius: 8px;*/
+    }
+
+    .hot_sale_line:last-child>.goods_contents{
+        border:0px;
+    }
+</style>

src/pages/home/home.vue

@@ -0,0 +1,502 @@
+<template>
+    <div id="div_body">
+        <div class="swiper-container" style="height: 1.48rem;" >
+            <swiper :options="swiperOption" ref="mySwiper">
+                <swiper-slide v-for="(tmp_banner,index) in list.banner_list" :key="index">
+                    <img style="height:1.48rem;width:3.75rem" :src="tmp_banner.img" />
+                </swiper-slide>
+                <div class="swiper-pagination"  slot="pagination"></div>
+            </swiper>
+        </div>
+
+        <div class="search_bar ub ub-f1 ub-ac" style="position: absolute" @click="searchInfo" >
+            <div class="search_img"></div>
+            <div class="ub-f1 ulev1 ub ub-ac" style="color:rgba(255,255,255,0.9);padding: 0.08rem 0.08rem 0.08rem 0;line-height: 1;margin-left: 0.08rem;">目的地／景点</div>
+        </div>
+        <!--景区直通车-->
+        <div class="title ub ub-ac ub-pc">
+            <img src="../../../static/image/home/title_icon.png" class="title_icon1 ub">
+            <div class="ub" style="font-size: 0.13rem;line-height: 1">{{train.cms_name}}</div>
+            <img src="../../../static/image/home/title_icon.png" class="title_icon2 ub">
+        </div>
+        <div class="train-content">
+            <div class="ub ub-f1">
+                <div v-for="(dict,index) in train.scenic_through_train" v-if="index<4" class="ub ub-f1 ub-ver ub-ac train_info" @click="busTicket(index)">
+                    <div class="radius ub">
+                        <img :src="dict.url" style="width: 0.45rem;height: 0.45rem">
+                    </div>
+                    <div class="layer ub">{{dict.name}}</div>
+                </div>
+            </div>
+            <div class="ub ub-f1" style="margin-top: 0.15rem;">
+                <div v-for="(dict,index) in train.scenic_through_train" v-if="index>=4" class="ub ub-f1 ub-ver ub-ac train_info" @click="busTicket(index)">
+                    <div class="radius ub">
+                        <img :src="dict.url" style="width: 0.45rem;height: 0.45rem">
+                    </div>
+                    <div class="layer ub">{{dict.name}}</div>
+                </div>
+            </div>
+        </div>
+
+        <!--目的地玩乐-->
+        <div class="title ub ub-ac ub-pc" v-if="destination.destination_list.length > 0">
+            <img src="../../../static/image/home/title_icon.png" class="title_icon1 ub">
+            <div class="ub" style="font-size: 0.13rem;line-height: 1">{{destination.cms_name}}</div>
+            <img src="../../../static/image/home/title_icon.png" class="title_icon2 ub">
+        </div>
+        <div class="destination ub content" id="destination" v-if="destination.destination_list.length > 0">
+            <div class="city ub ub-ac ub-pc destination_info" v-for="(dict,index) in destination.destination_list" style="background-size:100% 100%;background-size:cover" :style="dict.img" @click="endProd(index)">
+                <div class="city_bg"></div>
+                <div class="city_name ulev1">{{dict.category_name}}</div>
+            </div>
+        </div>
+        <!-- 昆山外部链接-->
+        <div class="title ub ub-ac ub-pc" v-if="external.length > 0">
+            <img src="../../../static/image/home/title_icon.png" class="title_icon1 ub">
+            <div class="ub" style="font-size: 0.13rem;line-height: 1">昆山特产</div>
+            <img src="../../../static/image/home/title_icon.png" class="title_icon2 ub">
+        </div>
+        <div class="destination ub content" id="external" v-if="external.length > 0">
+            <div class="city ub ub-ac ub-pc destination_info" v-for="dict in external" style="background-size:100% 100%;background-size:cover;height:1rem !important;" :style="dict.img" @click="toUrl(dict.toUrl)">
+                <div class="city_bg" style="height: 1rem !important;"></div>
+                <div class="city_name ulev1"></div>
+            </div>
+        </div>
+        <!--超值热卖-->
+        <div class="title ub ub-ac ub-pc">
+            <img src="../../../static/image/home/title_icon.png" class="title_icon1 ub">
+            <div class="ub" style="font-size: 0.13rem;line-height: 1">{{hot_sale.cms_name}}</div>
+            <img src="../../../static/image/home/title_icon.png" class="title_icon2 ub">
+        </div>
+        <div class="hot_sale">
+            <div class="hot_sale_line ub" v-for="dict in hot_sale.hot_line_list" @click="prodDetail(dict.category_id,dict.pro_cate_id)">
+                <img v-lazy=" setLoading(dict.show_img)" class="goods_img">
+                <div class="goods_contents">
+                    <div class="goods_name">{{dict.pro_cate_name}}</div>
+                    <div class="goods_mark ub">
+                        <div :style="dict.category_name =='巴士自由行'?'width: 0.7rem':''" class="goods_mark_content ub ub-pc ub-ac">
+                            {{dict.category_name}}
+                        </div>
+                    </div>
+                    <div class="ub ub-ac" style="margin-top: 0.15rem;">
+                        <start-show :starValue="dict.star"></start-show>
+                        <div class="ub goods_contents_font ub-f1">评分{{dict.star}}分</div>
+                        <div class="ub ub-ae" style="margin-right: 0.21rem">
+                            <div class="goods_contents_font3 ub ub-f1 ub-ae" style="line-height: 1">¥</div>
+                            <div class="goods_contents_font2 ub ub-f1" style="line-height: 1">{{dict.show_price}}</div>
+                            <div class="ub ub-f1" style="color:#666666;line-height: 1">起</div>
+                        </div>
+                    </div>
+                    <div class="ub ub-ae" style="margin-top: 0.05rem;">
+                        <div class="ub ub-ac star_ary goods_contents_font1 f1">月销售{{dict.sales_count}}单</div>
+                        <div class="ub goods_contents_font ub-f1">{{dict.comment_count}}评论</div>
+                        <div class="ub goods_contents_font" style="text-decoration: line-through;margin-right: 0.21rem">原价{{dict.original_price}}元</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div style="height: 0.075rem;background-color: #ffffff"></div>
+        <div class="ub-ac ub-pc ub ui_p_b15" style="margin-top: 0.25rem;margin-bottom: 0.7rem;color: #686872;">- 已经到达最底部 -</div>
+    </div>
+</template>
+
+<script>
+    import {homeList} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import info from './../../config/info'
+    import { Toast ,MessageBox } from 'mint-ui';
+    import { swiper, swiperSlide } from 'vue-awesome-swiper'
+    import StartShow from "../product/view/Star"
+
+    export default {
+        name: "home",
+        data() {
+            return {
+                swiperOption:{
+                    pagination: '.swiper-pagination',
+                    loop: true,
+                    initialSlide:1,
+                    paginationClickable: true,
+                    centeredSlides: true,
+                    observer: true, //修改swiper自己或子元素时，自动初始化swiper
+                    observeParents: true, //修改swiper的父元素时，自动初始化swiper
+                    autoplay: 2000,
+                    autoplayDisableOnInteraction: false,
+                    onTouchEnd:swiper=>{
+                        if(Math.abs(swiper.touches.currentX - swiper.touches.startX) < 3) {
+                            let i = swiper.realIndex;
+                            let url = this.list.banner_list[i].toUrl;
+                            window.location.href = url;
+                        }
+                    }
+                },
+                list:{},
+                train:{},
+                destination:{
+                    cms_name:"目的地玩乐",
+                    destination_list:[]
+                },
+                hot_sale:{},
+                external:[]
+            }
+        },
+        components:{
+            StartShow,
+            swiper,
+            swiperSlide
+        },
+        mounted() {
+            this.load();
+        },
+        methods: {
+            load() {
+              homeList().then(res=>{
+                  if(res.flag === false){
+                      MessageBox.alert(res.msg);
+                  } else {
+                      this.list = res['data'];
+                      this.train = res['data'].train;
+                      this.destination = res['data'].destination;
+                      this.hot_sale = res['data'].hot_line;
+                      this.external=res['data'].external;
+                      // 处理图片信息
+                      for(let i=0;i<this.destination.destination_list.length;i++){
+                          this.destination.destination_list[i].img = {
+                              backgroundImage:`url(${this.destination.destination_list[i].img_url}.min.jpg)`
+                          }
+                      }
+                      // 处理图片信息
+                      for(let i=0;i<this.external.length;i++){
+                          this.external[i].img = {
+                              backgroundImage:`url(${this.external[i].img})`
+                          }
+                      }
+
+                  }
+              }).catch(e=>{
+                   Toast(info.infoApiError);
+              })
+            },
+            toUrl(url){
+                window.location.href = url;
+            },
+            searchInfo(){
+                tool.$router.push(this,{
+                    name:'prod_search',
+                })
+            },
+            busTicket(index){
+                if(this.train.scenic_through_train[index].hasOwnProperty("prodIds")) {
+                    tool.$router.push(this,{
+                        name:'showProdList',
+                        query:{
+                            prodIds:this.train.scenic_through_train[index].prodIds
+                        }
+                    })
+                }else if(this.train.scenic_through_train[index].hasOwnProperty("menpProd")) {
+                    tool.$router.push(this,{
+                        name:'createTicketOrder',
+                        query:{
+                            pro_cate_id:this.train.scenic_through_train[index].menpProd
+                        }
+                    })
+                } else {
+                    tool.$router.push(this,{
+                        name:'scenic_spot',
+                        query:{
+                            poi_id:this.train.scenic_through_train[index].poi_id
+                        }
+                    })
+                }
+            },
+            endProd(index){
+                tool.log(index)
+                    tool.$router.push(this,{
+                        name:'prod',
+                        query:{
+                            cms_prod_id:this.destination.destination_list[index].category_id
+                        }
+                    })
+            },
+            setLoading(url){
+                return {
+                    src:url,
+                    error:'static/image/home/productloading.png',
+                    loading:'static/image/home/productloading.png'
+                }
+            },
+            prodDetail(category_id,pro_cate_id){
+                // category_id 1车票 2门票 3酒店 4巴士自由行 5上门接
+                if('1' == category_id) {
+                    MessageBox.alert('该产品已售完');
+                } else if('2' == category_id){
+                    tool.$router.push(this,{
+                        name:'createTicketOrder',
+                        query:{
+                            pro_cate_id:pro_cate_id
+                        }
+                    })
+                } else if('4' == category_id) {
+                    tool.$router.push(this,{
+                        name:'freeOrder',
+                        query:{
+                            pro_cate_id:pro_cate_id
+                        }
+                    })
+                }
+            }
+        }
+    }
+</script>
+<style lang="scss" type="text/scss">
+    @import "./../../style/mixin";
+    @import "../../../static/css/travel_book.css";
+    @import "../../../static/css/swiper.min.css";
+    #div_body{
+        .swiper-pagination-bullet-active {
+            background-color:$colorWhite!important;
+        }
+        .swiper-pagination-bullet{
+            background-color:rgba(255,255,255,0.4);
+        }
+        .swiper-pagination{
+            bottom:20px;
+        }
+    }
+</style>
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+
+
+    .title {
+        text-align: center;
+        height:0.4rem;
+        line-height:1;
+        font-size:0.13rem;
+    }
+
+    .title_icon1 {
+        height:0.12rem;
+        width: 0.1rem;
+        transform: rotate(180deg);
+        margin-right:0.095rem;
+    }
+    .title_icon2 {
+        height:0.12rem;
+        width: 0.1rem;
+        margin-left:0.095rem;
+    }
+    .train-content{
+        width: 3.75rem;
+        height: 1.75rem;
+        background-color: #ffffff;
+        box-shadow: 0 0 12px 0 rgba(34, 31, 32, 0.02);
+        padding-top:0.175rem;
+    }
+    .train_info{
+        width: 1%;
+    }
+    .radius {
+        width: 0.45rem;
+        height: 0.45rem;
+        background-color: #ffffff;
+        /*border-radius: 100%;*/
+    }
+    .radius img{
+        border-radius:0.45rem;
+    }
+    .radius-active {
+        box-shadow:0 0.075rem 0.15rem rgba(0,0,0,0.1);
+        transform:translate3d(0, -2px, 0)
+    }
+    .layer {
+        font-family: PingFangSC;
+        font-size: 0.12rem;
+        margin-top:0.06rem;
+        color: #333333;
+        line-height: 1;
+    }
+    .destination {
+        width:  3.75rem;
+        height: 1.1rem;
+        background-color: #ffffff;
+        box-shadow: 0 0 12px 0 rgba(34, 31, 32, 0.02);
+        padding-top: 0.175rem;
+        -webkit-overflow-scrolling:touch;
+    }
+    .city {
+        width: 1.05rem;
+        height: 0.75rem;
+        /*opacity: 0.7;*/
+        /*background-color: #000000;*/
+        margin-left:0.1rem;
+        position: relative;
+    }
+    .city_bg {
+        width: 1.05rem;
+        height: 0.75rem;
+        opacity: 0.3;
+        background-color: #000000;;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+    .city_name {
+        font-size: 0.14rem;
+        color: #ffffff;
+    }
+    .hot_sale {
+        padding-top:0.05rem;
+        background-color: #ffffff;
+    }
+    .hot_sale_line {
+        height:1.15rem;
+        width:3.75rem;
+        padding-left:0.1rem;
+
+    }
+    .goods_img {
+        width: 1rem;
+        height: 1rem;
+        background-color: #cccccc;
+        margin-top: 0.075rem;
+        margin-bottom: 0.075rem;
+    }
+    .goods_contents {
+        margin-top:0.075rem;
+        margin-left:0.1125rem;
+        width:2.5rem;
+        border-bottom: 1px solid #dadada;
+    }
+    .goods_name {
+        width: 2.5rem;
+        font-family: PingFangSC;
+        font-size: 0.13rem;
+        line-height: 1.38;
+        text-align: left;
+        color: #333333;
+        text-overflow: ellipsis;/*文字隐藏后添加省略号*/
+        white-space: nowrap;/*强制不换行*/
+        overflow: hidden;
+    }
+    .goods_mark {
+        margin-top:0.1rem;
+    }
+    .goods_mark_content {
+        width: 0.525rem;
+        padding-bottom: 0.01rem;
+        padding-top: 0.02rem;
+        line-height: 1;
+        border-radius: 0.08rem;
+        color: #368ff4;
+        border: solid 1px #368ff4;
+        margin-right: 0.05rem
+    }
+
+    .f1 {
+        width:0.8rem;
+    }
+    .f2 {
+        width:0.9rem;
+    }
+    .star {
+        width: 0.1rem;
+        height: 0.1rem;
+        margin: 0.01rem;
+        background-repeat:no-repeat;
+        background-size:100% 100%
+    }
+    .goods_contents_font {
+        font-family: PingFangSC;
+        font-size: 0.11rem;
+        line-height: 1.64;
+        text-align: left;
+        color: #999999;
+    }
+    .goods_contents_font1 {
+        font-family: PingFangSC;
+        font-size: 0.11rem;
+        line-height: 1.64;
+        text-align: left;
+        color: #333333;
+    }
+    .goods_contents_font2 {
+        font-family: PingFangSC;
+        font-size: 0.19rem;
+        font-weight: 500;
+        line-height: 1;
+        text-align: left;
+        color: #f45a36;
+    }
+    .goods_contents_font3 {
+        font-size: 0.12rem;
+        font-weight: normal;
+        line-height: 1.5;
+        color: #f45a36;
+    }
+    /*webkit内核*/
+    .content::-webkit-scrollbar-button    {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar-track     {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar-track-piece {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar-thumb{
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar-corner {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar-resizer  {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar {
+        display: none;/*隐藏滚轮*/
+    }
+    /*o内核*/
+    .content .-o-scrollbar{
+        -moz-appearance: none !important;
+        background: rgba(0,255,0,0) !important;
+    }
+    .content::-o-scrollbar-button    {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-o-scrollbar-track     {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-o-scrollbar-track-piece {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-o-scrollbar-thumb{
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-o-scrollbar-corner {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-o-scrollbar-resizer  {
+        background-color:rgba(0,0,0,0);
+    }
+    /*IE10,IE11,IE12*/
+    .content{
+        -ms-scroll-chaining: chained;
+        -ms-overflow-style: none;
+        -ms-content-zooming: zoom;
+        -ms-scroll-rails: none;
+        -ms-content-zoom-limit-min: 100%;
+        -ms-content-zoom-limit-max: 500%;
+        -ms-scroll-snap-type: proximity;
+        -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+        -ms-overflow-style: none;
+        overflow: auto;
+        overflow-y:hidden;
+    }
+    .hot_sale_line:last-child > .goods_contents{
+        border-bottom: 0px;
+    }
+
+
+</style>

src/pages/home/prod_search.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="bg_color ui_hide" id="div_body">
+        <div class="ub" style="background-color:#ffffff;height: 0.44rem;box-shadow: 0 0.5px 3px 0 #e9ebee;">
+            <div></div>
+            <div class="ub-f1 ub" style="border-radius: 5px;">
+                <div style="width:0.33rem;height: 0.3rem;margin: 0.07rem 0.05rem;background-image: url(static/image/home/back.png);background-repeat: no-repeat;background-size: 100% 100%;" @click="goBack"></div>
+                <div class="ub ub-f1" style="margin: 0.07rem;border-radius: 5px;background-color: #E9EBEE;">
+                    <div style="width:0.13rem;height: 0.13rem;margin: 0.075rem; background-image: url(static/image/home/search-icon.png);background-repeat: no-repeat;background-size: 100% 100%;"></div>
+                    <div class="ub-f1 ub"><input class="ulev1 ub-f1" id="prod_name" type="text" placeholder="目的地／景点" style="height: 0.3rem;color: #2d2e3a;" v-model="prod_name" @input="inputSearchProd"/></div>
+                    <div class="" style="width: 0.14rem;height: 0.14rem;background-image: url(static/image/home/clear.png);background-repeat: no-repeat;background-size: 100% 100%;margin: 0.08rem 0.12rem;" @click=" cancelSearchProd"></div>
+                </div>
+                <div class="ulev1 ub-ac ub-pc ub" style="color: #3177f6;text-align:center;padding: 0.08rem;line-height: 1.0;" @click="cancelSearchProd">取消</div>
+            </div>
+        </div>
+        <!--热门搜索-->
+        <div class="hot_div" v-show="hotProd_flag">
+            <div class="cms_title">热门搜索</div>
+            <div class="hot_name">
+                <div class="ufl ulev1 hot_city" v-for="name in hot_prod_list" @click="selectHotCity(name)">{{name}}</div>
+            </div>
+        </div>
+        <!--产品搜索-->
+        <div class="ub ub-ver pro_list" v-show="prod_flag">
+            <div v-if="search_list.length > 0">
+                <div class="ub ub-ver" v-for="item in search_list">
+                    <div class="ub cms_title">{{item.cate_name}}</div>
+                    <div class="ub ub-ver cms_info">
+                        <div v-for="dict in item.list" class="ulev1 prod_info" style="padding: 0.08rem 0.12rem;color: #2d2e3a;border-bottom:1px solid #e9ebee ;" v-html="dict.pro_cate_name" @click="hrefUrl(item.cate_id,dict.pro_cate_id)"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="ub ub-ac ub-pc ulev1" style="margin: 0.4rem;" v-else>无相关产品</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import tool from '../../config/mUtil/tool'
+    import info from '../../config/info'
+    import {getHotProd,search} from '../../service/httpService'
+
+    export default {
+        name: "prod_search",
+        data(){
+            return {
+                prod_name:'',
+                hotProd_flag:false,
+                prod_flag:false,
+                hot_prod_list:[],
+                search_list:[],
+            }
+        },
+        watch:{
+            search_list(old,cur){
+                let list = this.search_list;
+                for(let i=0;i<list.length;i++){
+                    let info = list[i].list;
+                    for(let j=0;j<info.length;j++){
+                        info[j].pro_cate_name = info[j].pro_cate_name.replace(this.prod_name,'<span class="ulev1" style="color:#3177f6;line-height:1.0;font-size: 0.14rem;">'+this.prod_name+'</span>')
+                    }
+                    list[i].list = info;
+                }
+                this.search_list = list;
+            }
+        },
+        mounted(){
+            this.load();
+        },
+        methods:{
+            load(){
+                getHotProd().then(res=>{
+                    if(res.flag === false){
+                        this.$alert(res.msg);
+                    }else{
+                        this.flag = false;
+                        // 热门线路展示
+                        this.hotProd_flag = true;
+                        this.hot_prod_list = res.data.list;
+                    }
+                }).catch(e=>{
+                    this.$alert(tool.infoApiError);
+                })
+            },
+            selectHotCity(name){
+                this.prod_name = name;
+                this.httpSearchProd();
+            },
+            httpSearchProd(){
+                let data = {
+                    prod_name:this.prod_name
+                };
+                tool.log(data)
+                search(data).then(res=>{
+                    tool.log(res.data.list)
+                    if(res.flag === false){
+                        this.$alert(res.msg);
+                    }else{
+                        if(res.code === '1000'){
+                            this.hotProd_flag = true;
+                            this.prod_flag = false;
+                        } else {
+                            this.replaceListInfo(res.data);
+                            this.hotProd_flag = false;
+                        }
+                    }
+                }).catch(e=>{
+                    this.$alert(tool.infoApiError)
+                })
+            },
+            replaceListInfo(data){
+                this.prod_flag = true;
+                this.search_list = data.list;
+
+            },
+            hrefUrl(category_id,pro_cate_id){
+                if(1 === category_id) {
+                    this.$alert('该产品已售完');
+                    return;
+                }
+                if(4 === category_id)
+                    this.$router.push({
+                        name:'freeOrder',
+                        query:{
+                            pro_cate_id:pro_cate_id
+                        },
+                    })
+                if(100 === category_id)
+                    this.$router.push({
+                        name:'prod',
+                        query:{
+                            cms_prod_id:pro_cate_id
+                        },
+                    })
+            },
+            goBack(){
+                this.$router.go(-1);
+            },
+            cancelSearchProd(){
+                this.prod_name = '';
+                this.hotProd_flag = true;
+                this.prod_flag = false;
+            },
+            inputSearchProd(){
+                // 用户输入
+                tool.delay(this.httpSearchProd,700)
+            },
+        }
+    }
+</script>
+
+<style type="text/css" lang="scss">
+    body{
+        background-color: #f6f8f9 !important;
+    }
+</style>
+<style scoped type="text/css" lang="scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+
+    .hot_city {
+        padding: 0.06rem 0.14rem;
+        margin: 0.12rem 0.08rem 0.08rem 0.08rem;
+        color: #2D2E3A;
+        border-radius: 50px;
+        background-color: #e9ebee;
+        line-height: 1.0;
+    }
+
+    .cms_title {
+        padding: 0.24rem 0 0.12rem 0.08rem;
+        color: #686872;
+        line-height: 1.0;
+        border-bottom: solid 1px #e9ebee;
+    }
+
+    .cms_info{
+        background-color: #ffffff;
+        box-shadow: 0 0.5px 3px 0 #e9ebee;
+    }
+    ::-webkit-input-placeholder{
+        color: #686872;
+    }
+
+</style>

src/pages/home/scenic_spot.vue

@@ -0,0 +1,837 @@
+<template>
+    <div class="bg_color " id="div_body">
+        <div id="body_mod" style="display: block;">
+            <!--线路产品信息-->
+            <div class="line_list" style="margin-top: 0.08rem;">
+                <div class="ub ub-f1 "
+                     style=" width: 3.75rem; height: 0.3975rem; border-bottom: 0.005rem solid #e6e6e6;">
+                    <div v-on:click="topLeftClick" v-bind:class="{selected:leftIsSelected}"
+                         class="ub ub-f1 ub-ac ub-pc type end_poi js-top" cate_id="1">去{{poiName}}
+                    </div>
+                    <div v-on:click="topRightClick" v-bind:class="{selected:rightIsSelected}"
+                         class="ub ub-f1 ub-ac ub-pc type start_poi js-top" cate_id="2">从{{poiName}}出发
+                    </div>
+                </div>
+                <div class="ub ub-ac ub-pc " id="go_date_select"
+                     style=" width: 3.75rem; height: 0.3975rem;background-color: #ffffff;border-bottom: 0.005rem solid #e6e6e6;">
+                    <div class="go_date">{{new Date(date).dateFormat('yyyy年MM月dd日')}}{{date_name}}<!--2017年10月21日--></div>
+                </div>
+                <!--content-->
+                <div class="content">
+                    <!--有产品-->
+                    <div class="prod_list" v-if="prodList" v-show="prodList.length>0">
+                        <!--左侧分类tab-->
+                        <div class="left_cate"
+                             style="float: left;width: 0.75rem;height:5.3rem;padding-bottom:0.6rem;overflow:scroll;">
+
+                            <div v-for="(v,index) in leftCateList" v-on:click="leftClick(index)"
+                                 v-bind:class="{select_left:index === cateIndex}" class="ub ub-pc left_cate_one"
+                                 :poi_id="v.poi_id" :data-index="index"
+                                 style="width:0.75rem ;text-align: center; font-size: 0.12rem;float: left">
+                                <div class="prod_cate select_line"
+                                     style="margin-left:0.05rem;margin-right: 0.05rem;padding-bottom: 0.14rem;padding-top: 0.14rem">
+                                    {{v['poi_name']}}
+                                </div>
+                            </div>
+
+                        </div>
+
+                        <div class="" style="float: right;width: 3rem;height:5.3rem;overflow:scroll;">
+                            <div class="list_all" style="padding-bottom: 0.6rem;">
+                                <div v-for="(val,index) in prodList">
+                                    <!--右侧产品列表 ,可售-->
+                                    <div @click="go_fill_bus_order(index)"
+                                         v-show="val.is_delay == 0 && val.ticket_cnt != 0" class="able_list one_box"
+                                         :ticket_cnt="val.ticket_cnt" :end_station=" val.end_res_name"
+                                         :start_station="val.start_res_name" :start_time="val.start_time"
+                                         :run_id="val.run_id" :prod_cate_id="val.prod_cate_id">
+                                        <div class="ub ub-ver" style="background-color: #ffffff;">
+                                            <div class="ub ub-ver border"
+                                                 style="margin: 0.15rem 0.15rem 0 0.1rem;border-bottom: 1px solid #e9ebee;">
+                                                <div class="ub ub-f1" style="font-size: 0.13rem">
+                                                    {{val['start_time']}}
+                                                </div>
+                                                <div class="ub ub-f1">
+                                                    <div class="ub">
+                                                        <div
+                                                            style="background-image: url('static/image/home/rectangle.png');background-repeat: no-repeat;background-size: 100% 100%;width: 0.06rem;height: 0.345rem;margin-top: 0.15rem"></div>
+                                                        <div class="ub ub-ver" style="padding-left: 0.05rem;">
+                                                            <div
+                                                                style="line-height: 1.0;color: #2d2e3a;margin-top: 0.12rem;font-size: 0.13rem">
+                                                                {{val['start_res_name']}}
+                                                            </div>
+                                                            <div class="ub-f1"
+                                                                 style="line-height: 1.0;padding-top: 0.15rem;padding-bottom:0.15rem;color: #2d2e3a;font-size: 0.13rem">
+                                                                {{val['end_res_name']}}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="ub-f1 ub-ae ub ub-ver">
+                                                        <div class="ulev3"
+                                                             style="line-height: 1.0;color: #f45a36;margin-top: 0.1rem">
+                                                            <span style="font-size: 0.12rem;color: #f45a36;">¥</span>
+                                                            {{val['show_price']}}
+                                                        </div>
+                                                        <div class=""
+                                                             style="line-height: 1.0;color: #999999;margin-top: 0.08rem">
+                                                            {{val['prod_num']}}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <!--右侧产品列表,不可售-->
+                                    <div v-show="val.is_delay != 0||val.ticket_cnt == false"
+                                         class="disable_list one_box">
+                                        <div class="ub ub-ver" style="background-color: #ffffff;">
+                                            <div class="ub ub-ver border"
+                                                 style="margin: 0.15rem 0.15rem 0 0.1rem;border-bottom: 1px solid #e9ebee;">
+                                                <div class="ub ub-f1" style="font-size: 0.13rem;color:#96969c;">
+                                                    {{val['start_time']}}
+                                                </div>
+                                                <div class="ub ub-f1">
+                                                    <div class="ub">
+                                                        <div
+                                                            style="background-image: url('static/image/home/rectangle_hui.png');background-repeat: no-repeat;background-size: 100% 100%;width: 0.06rem;height: 0.345rem;margin-top: 0.15rem"></div>
+                                                        <div class="ub ub-ver" style="padding-left: 0.05rem;">
+                                                            <div class="ulev1"
+                                                                 style="color: #96969c;line-height: 1.0;margin-top: 0.12rem;font-size: 0.13rem">
+                                                                {{val.start_res_name}}
+                                                            </div>
+                                                            <div class="ub-f1 ulev1"
+                                                                 style="color: #96969c;line-height: 1.0;padding-top: 0.15rem;padding-bottom:0.15rem;font-size: 0.13rem">
+                                                                {{val.end_res_name}}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="ub-f1 ub-ae ub ub-ver">
+                                                        <div class="ulev3"
+                                                             style="line-height: 1.0;color: #96969c;margin-top: 0.1rem">
+                                                            <span style="font-size: 0.12rem;color: #96969c;">¥</span>
+                                                            {{val.show_price}}
+                                                        </div>
+                                                        <div v-if="val.is_delay==1" class=""
+                                                             style="line-height: 1.0;color: #96969c;margin-top: 0.08rem">
+                                                            已发车
+                                                        </div>
+                                                        <div v-else class=""
+                                                             style="line-height: 1.0;color: #96969c;margin-top: 0.08rem">
+                                                            {{val.prod_num}}
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!--没有产品-->
+                    <div class="null_list" v-if="prodList" v-show="prodList.length ==0">
+                        <div style="text-align: center">
+                            <div style="width: 0.5rem;height: 0.5rem;margin: 0.64rem auto 0.28rem">
+                                <img src="./../../../static/image/trip/404.png" style="width: 100%;height: 100%">
+                            </div>
+                            <div style="font-size: 0.12rem;margin-bottom: 0.09rem;color: #666666;">
+                                非常抱歉，无当日班次
+                            </div>
+                            <div style="font-size: 0.12rem;color: #666666;">
+                                请选择其他出发日期
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!--tabbar-->
+        <footer class="tabbar ub max-width" style="z-index:9999;position: fixed">
+            <div @click="stationPop" class="ub-f1 ub ub-ver tx-c controller ub-pc ub-ac" id="run_station"
+                 data-index="0">
+
+                <div v-if="popupStation" class="station_img"
+                     style="background-image: url('static/image/trip/luxian_n.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 0.25rem; height: 0.25rem; margin-bottom: 0.03rem;"></div>
+                <div v-else class="station_img"
+                     style="background-image: url('static/image/trip/luxian_s.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 0.25rem; height: 0.25rem; margin-bottom: 0.03rem;"></div>
+                <div v-if="popupStation" class="station_btn select_title">乘车站点</div>
+                <div v-else class="station_btn normal_title">乘车站点</div>
+
+            </div>
+            <div @click="timePop" class="ub-f1 ub ub-ver tx-c controller ub-pc ub-ac" id="run_date" data-index="0">
+                <div v-if="popupVisible" class="date_img"
+                     style="background-image: url('static/image/trip/riqi_n.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 0.25rem; height: 0.25rem; margin-bottom: 0.03rem;"></div>
+                <div v-else class="date_img"
+                     style="background-image: url('static/image/trip/riqi_s.png'); background-repeat: no-repeat; background-size: 100% 100%; width: 0.25rem; height: 0.25rem; margin-bottom: 0.03rem;"></div>
+                <div v-if="popupVisible" class="date_btn select_title">出发日期</div>
+                <div v-else class="date_btn normal_title">出发日期</div>
+
+            </div>
+
+        </footer>
+        <mt-popup :visible.sync="popupVisible" v-model="popupVisible" position="bottom"
+                  style="margin-bottom:-3px;position: fixed; width: 100%;height: 2.6rem;">
+            <div class="ub ub-ver">
+                <div class="ub ub-ver select_hei">
+                    <div class="calendar" style="background:white;margin-bottom:1.7rem;">
+                        <div class="ub ub-ver days">
+                            <div v-for="(item,index) in rightDateList" @click="clickDate(item,index)" :key="item.date"
+                                 :class="{aday_line_select:item.selected}" class="aday_line ub ub-ac ub-pc">{{new
+                                Date(item.date).dateFormat('MM月dd日')}}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </mt-popup>
+
+        <mt-popup :visible.sync="popupStation" v-model="popupStation" position="bottom"
+                  style="margin-bottom:0.5rem;position: fixed; width: 100%;">
+            <div class="ub ub-ver ">
+                <div class="ub ub-ac bor_b_e5" style="height: 0.4rem">
+                    <div class="ub-f1 ulev1 text_c_80" style="margin-left: 0.2rem">乘车站点</div>
+                    <div @click="clickStationOK()" class="text_c_2b ulev1" style="margin-right: 0.2rem">确定</div>
+                </div>
+            </div>
+            <div class="ub ub-ver">
+                <div class="ub ub-ver select_hei">
+                    <div class="ub ub-ver bor_b_e5">
+                        <div class="ub ub-ac runbus  open bor_b_e5" style="height: 0.4rem">
+                            <div class="ui_p_t12 ui_p_b12 ulev1 text_c_2b" style="padding-left: 0.2rem;color:#999">上车站
+                            </div>
+                        </div>
+                        <div class="ub ub-ver station" style="background-color: rgb(246, 246, 246);">
+                            <div class="ub ">
+                                <div class="ub ub-ver ub-f1 end_station ulev1" style="width: 1%;">
+                                    <div class="start_stations">
+                                        <div @click="clickRes(item,index,'start')"
+                                             v-for="(item,index) in leftStationList.start_station_list"
+                                             :key="item.start_res_id"
+                                             class="start_station_all start_station_one ub ub-ac ui_p_t12  ui_p_b12">
+                                            <div class="ub-f1 text_c_80 ulev1 text_c_2b" v-html="item.start_res_name">
+                                                不限
+                                            </div>
+                                            <div>
+                                                <div v-if="item.selected" class="end_image select_quan start_all"
+                                                     style="background-image: url('static/image/home/bus_duihao.png');"></div>
+                                                <div v-else class="end_image select_quan start_all"
+                                                     style="background-image: url('static/image/home/bus_kong.png');"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ub ub-ver bor_b_e5">
+                        <div class="ub ub-ac runbus  open bor_b_e5" style="height: 0.4rem">
+                            <div class="ui_p_t12 ui_p_b12 ulev1 text_c_2b" style="padding-left: 0.2rem;color:#999">下车站
+                            </div>
+                        </div>
+                        <div class="ub ub-ver station" style="background-color: rgb(246, 246, 246);">
+                            <div class="ub ">
+                                <div class="ub ub-ver ub-f1 end_station ulev1" style="width: 1%;">
+                                    <div class="end_stations">
+                                        <div @click="clickRes(item,index,'end')"
+                                             v-for="(item,index) in leftStationList.end_station_list"
+                                             :key="item.end_res_id"
+                                             class="end_station_all end_station_one ub ub-ac ui_p_t12  ui_p_b12 ">
+                                            <div class="ub-f1 text_c_80 ulev1 text_c_2b" v-html="item.end_res_name">不限
+                                            </div>
+                                            <div>
+                                                <div v-if="item.selected" class="end_image select_quan end_all"
+                                                     style="background-image: url('static/image/home/bus_duihao.png');"></div>
+                                                <div v-else class="end_image select_quan end_all"
+                                                     style="background-image: url('static/image/home/bus_kong.png');"></div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </mt-popup>
+
+
+    </div>
+
+</template>
+
+
+<script>
+    import {getProdByPoi, list} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import dateUtil from '../../config/mUtil/dateUtil'
+    import info from '../../config/info'
+    import {Toast, Swipe, SwipeItem, Popup, Indicator, MessageBox} from 'mint-ui';
+
+    export default {
+        name: "scenic_spot",
+        data() {
+            return {
+                list: [],
+                poi: this.$route.query.poi_id,
+                other_poi: '',
+                date: dateUtil.getDateTime(0),
+                date_name : '',
+                rightDateList: [],
+                leftStationList: {},
+                selectStartIds: [],
+                selectEndIds: [],
+                tempStartIds: [],
+                tempEndIds: [],
+                cate: 1,
+                poiName: '',
+                year: '',
+                month: '',
+                day: '',
+                leftCateList: [],
+                prodList: null,
+                cateIndex: 0,
+                leftIsSelected: true,
+                rightIsSelected: false,
+                pickerVisible: true,
+                popupVisible: false,
+                ifClickStationOK: false,
+                popupStation: false,
+                value_year: '2017',
+                value_month: '12',
+                value_day: '21',
+                slots: "151515151",
+                init_flag: 0,//数据初始化标志，用于后台判断是否是第一次请求数据
+            }
+        },
+        watch: {
+            popupStation(cur, old) {
+                if (!cur) {
+                    if (!this.ifClickStationOK) {
+                        this.leftStationList.start_station_list.map(x => {
+                            if (this.selectStartIds.indexOf(x.start_res_id) !== -1) {
+                                x.selected = true;
+                            } else {
+                                x.selected = false;
+                            }
+                        });
+                        this.leftStationList.end_station_list.map(x => {
+                            if (this.selectEndIds.indexOf(x.end_res_id) !== -1) {
+                                x.selected = true;
+                            } else {
+                                x.selected = false;
+                            }
+                        });
+                        if (this.selectStartIds.length === 0) this.leftStationList.start_station_list[0].selected = true;
+                        if (this.selectEndIds.length === 0) this.leftStationList.end_station_list[0].selected = true;
+                    }
+                } else {
+                    this.ifClickStationOK = false;
+                }
+            }
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.baseData();
+                this.rightDateList = getDates(3);
+
+                function getDates(monthCount) {
+                    monthCount = monthCount || 3;
+                    let dates = [];
+                    let now = dateUtil.getDateTime(0);
+                    let m_arr = [];
+                    let old_m = dateUtil.getMonthByDate(now,);
+                    for (let i = 0; i < Infinity; i++) {
+                        let m = dateUtil.getMonthByDate(now,);
+                        if (old_m !== m) {
+                            m_arr.push(m);
+                            old_m = m;
+                        }
+                        if (m_arr.length >= monthCount) {
+                            break;
+                        }
+                        let cstr = now;
+                        let item = {
+                            date: cstr,
+                            selected: false
+                        };
+                        if (cstr === dateUtil.after(dateUtil.getDateTime(0))) {
+                            item.selected = true;
+                        }
+                        dates.push(item);
+                        now = dateUtil.after(cstr);
+
+                    }
+                    return dates;
+                }
+
+
+            })
+        },
+        methods: {
+            setRepeatData() {
+
+                //站点
+                this.leftStationList.start_station_list.unshift({
+                    start_res_name: '不限',
+                    start_res_id: ''
+                });
+                this.leftStationList.end_station_list.unshift({
+                    end_res_name: '不限',
+                    end_res_id: ''
+                });
+                this.leftStationList.start_station_list.map((x, i) => {
+                    this.$set(x, 'selected', false);
+                    if (i === 0) x.selected = true;
+                });
+                this.leftStationList.end_station_list.map((x, i) => {
+                    this.$set(x, 'selected', false);
+                    if (i === 0) x.selected = true;
+                });
+                if (this.leftCateList.length === 0) {
+                    this.prodList = [];
+                } else {
+                    this.prodList = this.leftCateList[this.cateIndex]['ticket_list'];
+                }
+            },
+            //访问接口
+            baseData() {
+                let param = {
+                    init_flag: this.init_flag,
+                    poi: this.poi,
+                    date: this.date,
+                    cate_id: this.cate,
+                    other_poi: this.other_poi,
+                    start_station_arr: this.selectStartIds.join(','),
+                    end_station_arr: this.selectEndIds.join(',')
+                };
+                this.init_flag = 1;
+                Indicator.open({
+                    spinnerType: 'fading-circle'
+                });
+                tool.delay(() => {
+                    getProdByPoi(param).then(res => {
+                        Indicator.close();
+                        if (res.flag) {
+                            this.list = res['data'];
+                            this.poiName = this.list['poi_name'];
+                            this.leftCateList = this.list['ticket'];
+                            this.leftStationList = this.list['station'];
+
+                            //重构数据
+                            this.setRepeatData();
+
+                            this.date = this.list['date']['date'];
+                            this.rightDateList.map(x => {
+                                x.selected = x.date === this.date;
+                            });
+                            this.year = this.list['date']['year'];
+                            this.month = this.list['date']['month'];
+                            this.day = this.list['date']['day'];
+                            this.date_name = this.list['date']['date_name'];
+
+                            //景区直通车
+                            this.leftStationList.start_station_list.map(x => {
+                                if (this.selectStartIds.indexOf(x.start_res_id) !== -1) {
+                                    x.selected = true;
+                                } else {
+                                    x.selected = false;
+                                }
+                            });
+                            this.leftStationList.end_station_list.map(x => {
+                                if (this.selectEndIds.indexOf(x.end_res_id) !== -1) {
+                                    x.selected = true;
+                                } else {
+                                    x.selected = false;
+                                }
+                            });
+                            if (this.selectStartIds.length === 0) this.leftStationList.start_station_list[0].selected = true;
+                            if (this.selectEndIds.length === 0) this.leftStationList.end_station_list[0].selected = true;
+                        }
+                        else {
+                            Toast(res.msg);
+                        }
+                    }).catch(e => {
+                        Indicator.close();
+                        Toast(info.infoApiError);
+                    })
+                }, info.delayTime);
+
+            },
+            clickStationOK() {
+                this.ifClickStationOK = true;
+                this.selectStartIds = this.tempStartIds;
+                this.selectEndIds = this.tempEndIds;
+                this.stationPop();
+                this.baseData();
+            },
+            //点击站点
+            clickRes(item, index, type) {
+                let startL = this.leftStationList.start_station_list;
+                let endL = this.leftStationList.end_station_list;
+                if (type === 'start') {
+                    if (index === 0) {
+                        startL.map(x => {
+                            x.selected = false;
+                        });
+                        item.selected = true;
+                    } else {
+                        startL.map((x, i) => {
+                            if (i === 0) x.selected = false;
+                        });
+                        item.selected = !item.selected;
+                    }
+
+                } else if (type === 'end') {
+                    if (index === 0) {
+                        endL.map(x => {
+                            x.selected = false;
+                        });
+                        item.selected = true;
+                    } else {
+                        endL.map((x, i) => {
+                            if (i === 0) x.selected = false;
+                        });
+                        item.selected = !item.selected;
+                    }
+                } else {
+                }
+//                this.selectStartIds = [];
+//                this.selectEndIds = [];
+                this.tempStartIds = [];
+                this.tempEndIds = [];
+                startL.map(x => {
+                    if (x.selected) this.tempStartIds.push(x.start_res_id);
+                });
+                endL.map(x => {
+                    if (x.selected) this.tempEndIds.push(x.end_res_id);
+                });
+            },
+            clickDate(item, index) {
+                this.rightDateList.map(x => {
+                    x.selected = false;
+                });
+                this.date = item.date;
+                item.selected = true;
+                this.timePop();
+                this.selectStartIds.removeAll();
+                this.selectEndIds.removeAll();
+                this.baseData();
+            },
+            //左侧tab切换
+            leftClick(index) {
+                this.cateIndex = index;
+                this.other_poi = this.leftCateList[this.cateIndex].poi_id;
+                this.prodList = this.leftCateList[this.cateIndex]['ticket_list'];
+                this.pickerVisible = true;
+            },
+            //点击顶部左侧
+            topLeftClick() {
+                this.init_flag = 0;
+                this.leftIsSelected = true;
+                this.rightIsSelected = false;
+                this.cate = 1;
+                this.baseData(this.poi, this.date, this.cate);
+            },
+            //点击顶部右侧
+            topRightClick() {
+                this.init_flag = 0;
+                this.rightIsSelected = true;
+                this.leftIsSelected = false;
+                this.cate = 2;
+                this.baseData(this.poi, this.date, this.cate);
+            },
+            stationPop() {
+                this.popupVisible = false;
+                this.popupStation = !this.popupStation;
+            },
+            timePop() {
+                this.popupStation = false;
+                this.popupVisible = !this.popupVisible;
+            },
+            go_fill_bus_order(index) {
+                let now = dateUtil.getDateTime(0) + ' ' + dateUtil.getDateTime(2);
+                let depart_time = this.date + ' ' + this.prodList[index].start_time + ":00";
+                let time_space = this.timeDiff(now, depart_time, 'minute');
+                tool.log(time_space);
+                if (time_space <= 15 && time_space > 0) {
+                    MessageBox.confirm('', {
+                        message: '离该班次发车还有' + time_space + '分钟，麻烦您在购票前再次确认能否及时赶往发车站点。',
+                        title: '温馨提示',
+                        confirmButtonText: '确定',
+                        cancelButtonText: '不确定'
+                    }).then(
+                        action => {
+                            tool.log(action + '确定');
+                            tool.$router.push(this, {
+                                name: 'fill_bus_order',
+                                query: {
+                                    prod_cate_id: this.prodList[index].prod_cate_id,
+                                    run_id: this.prodList[index].run_id,
+                                    start_date: this.date,
+                                    year: this.year,
+                                    month: this.month,
+                                    day: this.day,
+                                    start_station: this.prodList[index].start_res_name,
+                                    end_station: this.prodList[index].end_res_name,
+                                    start_time: this.prodList[index].start_time,
+                                    ticket_cnt: this.prodList[index].ticket_cnt,
+                                }
+                            })
+                        },
+                        action => {
+                            tool.log(action + '不确定');
+                            return false;
+                        },
+                    )
+
+
+                } else if (time_space <= 0) {
+                    MessageBox.alert('该班次已发车!')
+                } else {
+                    tool.$router.push(this, {
+                        name: 'fill_bus_order',
+                        query: {
+                            prod_cate_id: this.prodList[index].prod_cate_id,
+                            run_id: this.prodList[index].run_id,
+                            start_date: this.date,
+                            year: this.year,
+                            month: this.month,
+                            day: this.day,
+                            start_station: this.prodList[index].start_res_name,
+                            end_station: this.prodList[index].end_res_name,
+                            start_time: this.prodList[index].start_time,
+                            ticket_cnt: this.prodList[index].ticket_cnt,
+                        }
+                    })
+                }
+
+            },
+
+            timeDiff(startTime, endTime, diffType) {
+                //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式
+                startTime = startTime.replace(/\-/g, "/");
+                endTime = endTime.replace(/\-/g, "/");
+                //将计算间隔类性字符转换为小写
+                diffType = diffType.toLowerCase();
+                let sTime = new Date(startTime); //开始时间
+                let eTime = new Date(endTime); //结束时间
+                //作为除数的数字
+                let timeType = 1;
+                switch (diffType) {
+                    case"second":
+                        timeType = 1000;
+                        break;
+                    case"minute":
+                        timeType = 1000 * 60;
+                        break;
+                    case"hour":
+                        timeType = 1000 * 3600;
+                        break;
+                    case"day":
+                        timeType = 1000 * 3600 * 24;
+                        break;
+                    default:
+                        break;
+                }
+                return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(timeType));
+            }
+
+        }
+    }
+
+</script>
+
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+    @import "../../../static/css/ui-box.css";
+    @import "../../../static/css/ui-color.css";
+    @import "../../../static/css/calendar.css";
+    @import "../../../static/css/run_station.css";
+    @import "../../../static/css/tabbar.css";
+    @import "../../../static/css/animate.css";
+
+    .info img {
+        max-width: 100%;
+    }
+
+    .mui-switch.mui-active {
+        border-color: #339933;
+        background-color: #339933;
+    }
+
+    .header {
+        background-color: #ffffff;
+        box-shadow: 0 0.5px 3px 0 #e9ebee;
+        margin: 0.08rem 0;
+    }
+
+    .select_header {
+        color: #2d2e3a;
+        border-bottom: 2px solid #2d2e3a;
+        line-height: 1.0;
+        padding: 0.15rem 0;
+        text-align: center;
+    }
+
+    .normal_header {
+        line-height: 1.0;
+        color: #686872;
+        padding: 0.15rem 0;
+        text-align: center;
+    }
+
+    .next {
+        position: fixed;
+        left: 0.08rem;
+        right: 0.08rem;
+        bottom: 0.16rem;
+        border-radius: 100px;
+        height: 0.4rem;
+        line-height: 1.0;
+        background-color: #2d2e3a;
+        color: #FFFFFF;
+    }
+
+    .model {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        /*-webkit-filter: blur(6px);
+filter: blur(6px);*/
+        background-color: rgba(0, 0, 0, 0.25);
+        z-index: 100;
+    }
+
+    .model_box {
+        position: fixed;
+        height: 2rem;
+        bottom: 0.6rem;
+        left: 0;
+        right: 0;
+        background-color: #fff;
+        /*-webkit-border-top-left-radius: 8px;*/
+        /*-webkit-border-top-right-radius: 8px;*/
+    }
+
+    .model_la {
+        width: 0.37rem;
+        height: 0.05rem;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, 0.2);
+        margin-top: 0.06rem;
+    }
+
+    .select_hei {
+        overflow: scroll;
+        height: 3.8rem;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .select_line {
+        border-bottom: 1px solid #e9ebee;
+        padding-bottom: 0.13rem !important;
+    }
+
+    .animatedw {
+        -webkit-animation-duration: 0.4s;
+        animation-duration: 0.4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+    }
+
+    /*rili*/
+    .days {
+        /*overflow: scroll;*/
+    }
+
+    .aday_line {
+        color: #333;
+        font-size: 0.14rem;
+        padding-top: 0.1rem;
+        padding-bottom: 0.1rem;
+        border-bottom: 1px solid #e6e6e6;
+    }
+
+    .aday_line_select {
+        color: #368ff4 !important;
+    }
+
+    @keyframes fadeInUp {
+        0% {
+            /*opacity: 0;*/
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+        100% {
+            /*opacity: 1;*/
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    .fadeInUp {
+        -webkit-animation-name: fadeInUp;
+        animation-name: fadeInUp;
+    }
+
+    @-webkit-keyframes fadeInDown {
+        0% {
+            -webkit-transform: none;
+            transform: none;
+        }
+        100% {
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    @keyframes fadeInDown {
+        0% {
+            -webkit-transform: none;
+            transform: none;
+        }
+        100% {
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+    }
+
+    .fadeInDown {
+        -webkit-animation-name: fadeInDown;
+        animation-name: fadeInDown;
+    }
+
+    .line_list .selected {
+        color: #368ff4;
+        border-bottom-color: #368ff4;
+    }
+
+    .js-top {
+        border-bottom: 2px solid #f6f8f9;
+    }
+
+    .select_left {
+        background-color: #ffffff;
+    }
+
+    .one_box:last-child .border {
+        border: 0px !important;
+    }
+
+    .start_station_all, .end_station_all {
+        border-bottom: 1px solid #ccc;
+        margin-left: 0.2rem;
+        margin-right: 0.2rem;
+    }
+
+    .start_station_all:last-child, .end_station_all:last-child {
+        border-bottom: 0 solid #fff
+    }
+
+</style>

src/pages/hotel/ChooseCity.vue

@@ -0,0 +1,300 @@
+<template>
+    <div class="chooseCity">
+        <div class="searchBar ub ub-f1  ub-ac">
+            <div class="search_icon" style="background: url('static/image/home/search-icon.png');"></div>
+            <div class="searchText ub-f1 ulev1 ub ub-ac"><input type="text" placeholder="上海" v-model="searchText"></div>
+        </div>
+        <div v-show="list">
+            <div class="cityTop ub ub-f1 ub-ver">
+                <div class="localPosition">
+                    <div class="positionTitle" id="local">当前位置</div>
+                    <div class="cityList">
+                        <div class="cityName ub ub-ac ub-pc" @click="jump2">{{localCity}}</div>
+                    </div>
+                </div>
+                <div class="localPosition">
+                    <div class="hotCity" id="hot">热门位置</div>
+                    <div class="cityList">
+                        <div class="cityName ub ub-ac ub-pc" v-for="item in hot_city" @click="jump(item)">
+                            {{item.area_name}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="cityList2" v-for="(item,index) in cityList">
+                <div class="cityListTitle ub ub-ac" :id=index><a href="javascript:;">{{index}}</a></div>
+                <div class="cityListContent">
+                    <div class="cityName2 ub ub-ac" v-for="cityName in item" @click="jump(cityName)"><span
+                            :id="cityName.id">{{cityName.area_name}}</span></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="ub ub-ac ub-pc"><a href="#local">当前</a></div>
+                <div class="ub ub-ac ub-pc"><a href="#hot">热门</a></div>
+                <div class="ub ub-ac ub-pc" v-for="(item,index) in cityList"><a :href="'#'+index">{{index}}</a></div>
+            </div>
+        </div>
+        <div v-show="search" class="haha">
+            <div class="cityList2" v-for="item in cities2" v-show="search_success">
+                <div class="cityListContent">
+                    <div class="cityName2 ub ub-ac" @click="jump(item)"><span
+                            :id="item.id">{{item.area_name}}</span></div>
+                </div>
+            </div>
+            <div class="cityList2" v-show="search_false">
+                <div class="cityListContent">
+                    <div class="cityName2 ub ub-ac"><span class="ub ub-f3">暂无该城市的相关信息</span><span
+                            style="margin-right:0.22rem;" class="ub ub-f1 ub-pe" @click="research">重新搜索</span></div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import {getHotelArea} from '../../service/httpService';
+    import tool from '../../config/mUtil/tool';
+    import info from './../../config/info'
+    import {Toast, Search} from 'mint-ui';
+
+    export default {
+        name: "choose-city",
+        data() {
+            return {
+                localCity: '', //当前位置
+                localCityId: 0,//当前位置id
+                cityList: {},
+                hot_city: [],
+                cities: [],
+                value: '',
+                list: true,
+                search: false,
+                searchText: '',
+                cities2: [],
+                search_success: false,
+                search_false: false,
+
+            }
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.init();
+            })
+        },
+        watch: {
+            searchText() {
+                if (this.searchText === '') {
+                    this.list = true;
+                    this.search = false;
+                    this.search_success = false;
+                } else {
+                    tool.log(this.searchText);
+                    let arr = [];
+                    for (let i = 0; i < this.cities.length; i++) {
+                        if (this.cities[i].area_name.indexOf(this.searchText) >= 0) {
+                            arr.push(this.cities[i]);
+                        }
+                    }
+                    this.cities2 = arr;
+                    this.list = false;
+                    this.search = true;
+                    if (this.cities2.length > 0) {
+                        this.search_success = true;
+                        this.search_false = false;
+                    } else {
+                        this.search_success = false;
+                        this.search_false = true;
+                    }
+
+                }
+            },
+        },
+        methods: {
+            init() {
+                //获取当前位置
+                this.localCity = this.$route.query.localArea;
+                if (this.localCity === '' || this.localCity === undefined) {
+                    this.localCity = '上海';
+                }
+                //获取城市列表
+                getHotelArea().then(res => {
+                    if (res.flag === true) {
+                        this.cityList = res.data.city_list;
+                        this.hot_city = res.data.hot_city;
+                        this.cities = res.data.cities;
+                    } else {
+                        Toast(res.msg);
+                    }
+                }).catch(e => {
+                    Toast(info.infoApiError);
+                });
+            },
+            jump(item) {
+                event.cancelBubble = true;
+                tool.log(item);
+                tool.$router.push(this, {
+                    name: 'HotelReservation',
+                    query: {
+                        city_name: item.area_name,
+                        city_id: item.id,
+                    }
+                })
+            },
+            research() {
+                this.searchText = '';
+            },
+            jump2() {
+                for (let i = 0; i < this.cities.length; i++) {
+                    if (this.cities[i].area_name == this.localCity) {
+                        this.localCityId = this.cities[i].id;
+                    }
+                }
+                if (this.localCityId == 0) {
+                    let local = this.localCity.replace('市', '');
+                    for (let i = 0; i < this.cities.length; i++) {
+                        if (this.cities[i].area_name == local) {
+                            this.localCityId = this.cities[i].id;
+                        }
+                    }
+                }
+                tool.$router.push(this, {
+                    name: 'HotelReservation',
+                    query: {
+                        city_name: this.localCity,
+                        city_id: this.localCityId,
+                    }
+                });
+            },
+
+        }
+
+    }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+    @import "./../../style/mixin";
+
+    .chooseCity {
+        width: 100%;
+        background-color: #f7f7f7;
+    }
+
+    .searchBar {
+        width: 3.51rem;
+        height: 0.33rem;
+        background-color: $colorWhite;
+        margin: 0.12rem auto;
+    }
+
+    .search_icon {
+        height: 0.12rem;
+        width: 0.12rem;
+        margin-left: 0.085rem;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .searchText {
+        margin-left: 0.1rem;
+        height: 0.165rem;
+        line-height: 0.165rem;
+        padding-top: 0.01rem;
+    }
+
+    .localPosition {
+        width: 100%;
+    }
+
+    .positionTitle {
+        height: 0.15rem;
+        font-family: PingFangSC;
+        font-size: 0.11rem;
+        margin-left: 0.12rem;
+        color: #AFAFAF;
+    }
+
+    .cityList {
+        width: 100%;
+        margin: 0.080rem 0.32rem 0 0.12rem;
+    }
+
+    .hotCity {
+        margin-top: 0.1rem;
+        height: 0.15rem;
+        font-family: PingFangSC;
+        font-size: 0.11rem;
+        margin-left: 0.12rem;
+        color: #AFAFAF;
+    }
+
+    .cityName {
+        width: 0.79rem;
+        height: 0.3rem;
+        background-color: $colorWhite;
+        border: solid 1px #ececec;
+        font-family: PingFangSC;
+        font-size: 0.12rem;
+        margin-right: 0.05rem;
+        margin-top: 0.05rem;
+        float: left;
+    }
+
+    .cityName:nth-of-type(4n) {
+        margin-right: 0;
+    }
+
+    .cityTop {
+        margin-bottom: 0.1rem;
+    }
+
+    .cityListTitle {
+        padding-left: 0.12rem;
+        width: 100%;
+        height: 0.25rem;
+        background-color: #ececec;
+    }
+
+    .cityListTitle a {
+        width: 0.075rem;
+        height: 0.15rem;
+        font-family: PingFangSC;
+        font-size: 0.11rem;
+    }
+
+    .cityListContent {
+        width: 100%;
+    }
+
+    .cityName2 {
+        width: 100%;
+        height: 0.405rem;
+        border-bottom: 1px solid #F9F9F9;
+        background-color: $colorWhite;
+    }
+
+    .cityName2 span {
+        margin-left: 0.12rem;
+    }
+
+    .right {
+        float: right;
+        position: fixed;
+        z-index: 400;
+        right: 0.085rem;
+        top: 0.59rem;
+        display: none;
+    }
+
+    .right a {
+        margin-top: 0.1rem;
+        color: #4E9BF4;
+        font-family: PingFangSC;
+        font-size: 0.09rem;
+        font-weight: 500;
+    }
+
+    .right a:first-child {
+        margin-top: 0;
+    }
+</style>

src/pages/hotel/FillHotelOrder.vue

@@ -0,0 +1,821 @@
+<template>
+    <div class="fillOrder">
+        <div class="topInfo divide">
+            <div class="hotelName ml24">{{hotelName}}</div>
+            <div class="roomType ml24">{{roomType}}</div>
+            <div class="stayTime ml24">
+                <span>入住&nbsp;</span><span>{{inTime}}</span><span>&nbsp;&nbsp;离店&nbsp;</span><span>{{outTime}}</span>&nbsp;&nbsp;<span>{{nights}}</span>晚
+            </div>
+        </div>
+        <div class="gift divide ub" v-if="gift">
+            <div class="giftLeft ub">
+                <img src="./../../../static/image/hotel/ht_gift_icon.png" style="width:0.12rem;height:0.12rem;" alt="">
+            </div>
+            <div class="giftRight">
+                <div class="" v-for="(item,index) in gift">&nbsp;&nbsp;{{index+1}}、{{item.date}}:{{item.name}}</div>
+            </div>
+        </div>
+        <div class="roomInfo">
+            <div class="roomNum divide ub ub-ac">
+                <div class="ml24 roomInfoLeft1 ub ">
+                    房间数
+                </div>
+                <div class="ub roomLeft w5 ml78"><span>{{roomNum}}</span>间</div>
+                <div class="roomRight ub">
+                    <div style="width:0.12rem;height:0.07rem"
+                         :style="roomNumber?'background: url(static/image/bus_order/up_arrow.png) 0% 0% / 100% 100% no-repeat;':'background: url(static/image/bus_order/down_arrow.png) 0% 0% / 100% 100% no-repeat;'"
+                         @click="lookRoomNumber"></div>
+                </div>
+            </div>
+            <div class="ub ub ub-f1 ub-ver">
+                <div class="roomBottom divide" v-show="roomNumber">
+                    <div class="roomBorder ub ub-ac ub-pc" :class="roomNum === n?chooseRoomNum:''"
+                         v-for="(n,index) in hasRoomNum" @click="chooseRoom(n,index)">{{n}}
+                    </div>
+                </div>
+            </div>
+            <div class="inPeople  divide ub ub-ac">
+                <div class="ml24 roomInfoLeft ub ">入住人</div>
+                <div class="roomLeft ml42">
+                    <div class="divide peopleName ub ub-ac" v-for="(item,index) in roomNum"><input type="text"
+                                                                                                   placeholder="每间需填写1人姓名"
+                                                                                                   v-model="name[index]"
+                                                                                                   maxlength="20">
+                    </div>
+                </div>
+            </div>
+            <div class="phoneNumber divide ub ub-ac">
+                <div class="ml24 roomInfoLeft1 ub">手机号</div>
+                <input type="tel" class="ub roomLeft ml78" placeholder="用于接收确认短信" v-model="phone"
+                       @blur="checkPhoneNumber" maxlength="11" onkeyup="this.value=this.value.replace(/[^0-9Xx]/g,'')"
+                       onafterpaste="this.value=this.value.replace(/[^0-9Xx]/g,'')">
+            </div>
+        </div>
+        <div class="remark divide">
+            <textarea name="otherRequirements" class="otherRequire" maxlength="100" cols="30" rows="10" placeholder="如有其他需求,请填写,我们将竭诚为您服务。"
+                      v-model="otherRequirments"></textarea>
+        </div>
+        <div class="attention divide ub ub-pc">
+            <div class="attentionInfo ub"><span class="attentionTitle">注意事项:&nbsp;&nbsp;</span><span
+                    class="warningInfo">{{warnings}}</span></div>
+        </div>
+        <!--去下单-->
+        <div class="go_create_order" style="z-index: 25;">
+            <div class="ub">
+                <div class="create_left ub ub-f2  ub-ac" style="background: white;opacity: 1;padding-left:0.15rem;"
+                     @click="lookPriceDetail">
+                    <div class="arrow" style="width:0.12rem;height:0.07rem"
+                         :style="showPrice?'background: url(static/image/bus_order/down_arrow.png) 0% 0% / 100% 100% no-repeat;':'background: url(static/image/bus_order/up_arrow.png) 0% 0% / 100% 100% no-repeat;'"></div>
+                    <span class="ulev1"
+                          style="margin-left:0.21rem;height: 0.1225rem;font-family: PingFangSC;font-size: 0.13rem;text-align: left;color: #666666;">总价：<span
+                            class="ulev1" style="font-size: 0.1rem;font-weight: normal;color:#f45a36;">￥</span></span>
+                    <span id="total_money" class="ulev1 total_money_style">{{total_money}}</span>
+                </div>
+                <div id="btn_create_order" class="create_right ub ub-f1 ub-pc ub-ac" @click="makeOrder">
+                    <span style="height: 0.15rem;font-family:PingFangSC;font-size: 0.16rem;text-align: left;color: #ffffff;">立即支付</span>
+                </div>
+            </div>
+        </div>
+        <!--模态框-->
+        <div class="model_price divide" v-show="showPrice" @click="closePriceDetail">
+            <div class="model_box_price animated" :class="fadeFlag?'fadeInUp':'fadeInDown'">
+                <div class="ub ub-pe ub-ac" style="height:0.45rem;">
+                    <!--padding: 0 0.15rem 0 0.15rem;-->
+                    <div class="ub ub-f1 ub-ac box_title"
+                         style="margin:0.105rem 0 0.07rem 0.12rem;width: 0.56rem;height: 0.2rem;font-family: PingFangSC;font-size: 0.14rem;">
+                        总价详情
+                    </div>
+                    <div class="ub ub-ac"
+                         style="font-family: PingFangSC;font-size:0.12rem;height:0.165rem;margin-right:0.12rem;color:#818181;">
+                        {{nights}}晚，&nbsp;{{roomNum}}间
+                    </div>
+                </div>
+                <div class="desc ub ub-ver " style="margin-bottom:0.165rem;max-height:3.66rem;overflow-y: scroll;-webkit-overflow-scrolling: touch;">
+                    <div class="ub ticket_price_desc" v-for="item in date_price_show">
+                        <div class="ub ub-f1 desc_name"
+                             style="font-family: PingFangSC;color: #96969c; margin-left:0.12rem;">
+                            <div class="showDate ub" style="font-family: PingFangSC;color: #96969c;width:0.5rem;">{{item.date}}</div>
+                            <div
+                                class="showBreakfast ub"
+                                style="font-family: PingFangSC;color: #96969c;">{{breakfast}}</div>
+                        </div>
+                        <div class="ub"
+                             style="font-family: PingFangSC;font-size:0.12rem;height:0.165rem;margin-right:0.12rem;color:#818181;">
+                            <span class="peopleNum">{{roomNum}}</span>&nbsp;&nbsp;×&nbsp;&nbsp;¥<span class="unitPrice">{{item.price}}</span>
+                        </div>
+                    </div>
+                    <div class="ub" style="font-family: PingFangSC;color: #96969c; margin-left:0.12rem;">
+                        <div class="ub" style="width:0.5rem;color: #96969c;">{{leaveDate}}</div>
+                        <span
+                            class="showBreakfast"
+                            style="font-family: PingFangSC;color: #96969c;">{{breakfast}}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+    import tool from '../../config/mUtil/tool';
+    import info from './../../config/info'
+    import dateUtil from '../../config/mUtil/dateUtil';
+    import {Toast} from 'mint-ui';
+    import {getHotelRoomList} from '../../service/httpService';
+    import {checkHotel} from '../../service/httpService';
+    import {hotelMakeOrder} from '../../service/httpService';
+
+    export default {
+        name: "fill-hotel-order",
+        data() {
+            return {
+                hotel_id: 0,
+                room_id: 0,
+                start_date: '',
+                end_date: '',
+                hotelName: '',
+                roomType: '',
+                inTime: '', //入住日期
+                in_time: '', //入住的具体时间点,如8:00
+                outTime: '',
+                nights: 1,
+                gift: '',
+                roomNumber: false,
+                roomNum: 1, //选择房间数
+                hasRoomNum: 10,//可预订的房间数
+                name: [],
+                phone: '',
+                otherRequirments: '',
+                warnings: '1.每个房间需至少有一位成人宾客入住，不接受18岁以下客人单独入住。订单备注信息为尽量满足，敬请谅解。\n' +
+                '2.发票信息：发票类型：增值税普通发票；如需发票请关注【蜘蛛出行】微信公众号，在线联系客服索取。\n' +
+                '3.订单一经确认，不可退改。',
+                showPrice: false,
+                total_money: 0,
+                fadeFlag: false,
+                chooseRoomNum: 'chooseRoomNum',
+                phoneFill: false, //是否填写手机号码
+                nameFill: false, //是否填写了名字
+                date_price: [], //价格日历
+                date_price_show: [],//展示的价格日历
+                breakfast: '',//早饭
+                leaveDate: '',
+            }
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.init();
+            })
+        },
+        methods: {
+            //初始化加载页面
+            init() {
+                // 从前一个页面获取id
+                this.hotel_id = this.$route.query.hotel_id;
+                this.room_id = this.$route.query.room_id;
+                this.start_date = this.$route.query.start_date;
+                this.end_date = this.$route.query.end_date;
+                // this.hotel_id = 197;
+                // this.room_id = 2284;
+                // this.start_date = '2018-01-10';
+                // this.end_date = '2018-01-11';
+                // tool.log(dateUtil.getYMDByDate('2017-12-21'));
+                let param = {
+                    hotel_id: this.hotel_id,
+                    start_date: this.start_date,
+                    end_date: this.end_date,
+                    room_id: this.room_id
+                };
+                getHotelRoomList(param).then(res => {
+                    if (res.flag) {
+                        this.hotelName = res.data[0].room_list[0].hotel_name;
+                        this.roomType = res.data[0].room_list[0].room_name;
+                        this.breakfast = res.data[0].room_list[0].breakfast;
+                        this.inTime = dateUtil.getYMDByDate(this.start_date).month + '月' + dateUtil.getYMDByDate(this.start_date).day + '日';
+                        this.outTime = dateUtil.getYMDByDate(this.end_date).month + '月' + dateUtil.getYMDByDate(this.end_date).day + '日';
+                        this.leaveDate = dateUtil.getYMDByDate(this.end_date).month + '-' + dateUtil.getYMDByDate(this.end_date).day;
+                        this.nights = res.data[0].room_list[0].date_price.length;
+                        this.gift = res.data[0].room_list[0].gift_list.length === 0 ? '' : res.data[0].room_list[0].gift_list;
+                        this.hasRoomNum = res.data[0].room_list[0].stock > 10 ? 10 : parseInt(res.data[0].room_list[0].stock);
+                        this.date_price = res.data[0].room_list[0].date_price;
+                        this.date_price_show = this.date_price;
+                        for (let i = 0; i < this.date_price_show.length; i++) {
+                            this.date_price_show[i].date = dateUtil.getMonthByDate(this.date_price_show[i].date) + '-' + dateUtil.getDayByDate(this.date_price_show[i].date);
+                            let xixi = parseInt(this.date_price_show[i].price);
+                            if (this.date_price_show[i].price - xixi === 0) {
+                                this.date_price_show[i].price = xixi;
+                            }
+                        }
+                        tool.log('-----------date_price_show--------')
+                        tool.log(this.date_price_show)
+                        this.in_time = res.data[0].room_list[0].in_time;
+                        this.getTotalMoney();
+                    } else {
+                        Toast(res.msg);
+                        return false;
+                    }
+                }).catch(e => {
+                    Toast(info.infoApiError);
+                    this.$router.go(-1);
+                    return false;
+                });
+
+            },
+            checkPhoneNumber() {
+                let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
+                if (this.phone === '') {
+                    Toast("请输入手机号码");
+                    this.phoneFill = false;
+                    return '';
+                } else if (!reg.test(this.phone)) {
+                    Toast("手机格式不正确");
+                    this.phoneFill = false;
+                    return '';
+                } else {
+                    this.phoneFill = true;
+                }
+            },
+
+            lookPriceDetail() {
+                this.fadeFlag = !this.fadeFlag;
+                if (this.showPrice === false) {
+                    this.showPrice = !this.showPrice;
+                } else {
+                    setTimeout(() => {
+                        this.showPrice = !this.showPrice;
+                    }, 400)
+                }
+            },
+            lookRoomNumber() {
+                this.roomNumber = !this.roomNumber;
+            },
+            chooseRoom(n, index) {
+                this.roomNum = n;
+                this.getTotalMoney();
+            },
+            makeOrder() {
+                //1.检查名字是否都有
+                this.checkNameList();
+                if (!this.nameFill) {
+                    return '';
+                }
+                //2.检查手机号码
+                this.checkPhoneNumber();
+                if (!this.phoneFill) {
+                    return '';
+                }
+                //3.去下单
+                if (this.nameFill && this.phoneFill) {
+                    //3.1可订检查
+                    let param1 = {
+                        total_details: JSON.stringify(this.date_price),
+                        hotel_id: this.hotel_id,
+                        start_date: this.start_date,
+                        end_date: this.end_date,
+                        room_id: this.room_id,
+                        prod_cnt: this.roomNum
+                    };
+                    tool.log('param1', param1);
+                    let pass_arr = [];
+                    for (let item in this.name) {
+                        let json1 = {};
+                        json1 = {'passenger_name': this.name[item], 'passenger_cardid': ''};
+                        pass_arr.push(json1);
+                    }
+                    let param2 = {
+                        hotel_id: this.hotel_id,
+                        start_date: this.start_date,
+                        end_date: this.end_date,
+                        room_id: this.room_id,
+                        prod_cnt: this.roomNum,
+                        contacts_name: this.name[0],
+                        contacts_phone: this.phone,
+                        in_time: this.in_time,
+                        hotel_name: this.hotelName,
+                        remark: this.otherRequirments,
+                        passanger_arr: JSON.stringify(pass_arr),
+
+                    };
+                    checkHotel(param1).then(res => {
+                        tool.log('检查可订:', res.data.total_price);
+                        if (res.flag) {
+                            if (res.data.total_price - this.total_money == 0) {
+                                //3.2下单
+                                hotelMakeOrder(param2).then(res_data => {
+                                    if (res_data.flag) {
+                                        let order_id = res_data.data.order_id;
+                                        window.location.href = res_data.data.pay_url;
+                                    } else {
+                                        Toast(res_data.msg);
+                                        return false;
+                                    }
+                                }).catch(e2 => {
+                                    Toast('下单失败,请返回重试!');
+                                    return false;
+                                });
+                            } else {
+                                Toast('价格有变化,请刷新后重试!');
+                                return false;
+                            }
+                        } else {
+                            Toast(info.infoApiError);
+                            return false;
+                        }
+                    }).catch(e => {
+                        Toast(info.infoApiError);
+                        return false;
+                    });
+                }
+
+            },
+            closePriceDetail() {
+                this.fadeFlag = false;
+                setTimeout(() => {
+                    this.showPrice = false;
+                }, 400)
+            },
+            //检查名字是否都有
+            checkNameList() {
+                if (this.name.length < this.roomNum) {
+                    Toast('请填写完整入住人的姓名!');
+                    this.nameFill = false;
+                    return '';
+                } else if (this.name.length === this.roomNum) {
+                    for (let i = 0; i < this.name.length; i++) {
+                        if (this.name[i] === '') {
+                            Toast('请填写完整入住人的姓名!');
+                            this.nameFill = false;
+                            return '';
+                        } else {
+                            this.nameFill = true;
+                        }
+                    }
+                } else {
+                    let newName = [];
+                    for (let i = 0; i < this.roomNum; i++) {
+                        if (this.name[i] === '') {
+                            Toast('请填写完整入住人的姓名!');
+                            this.nameFill = false;
+                            return '';
+                        } else {
+                            newName[i] = this.name[i];
+                            this.nameFill = true;
+                        }
+                    }
+                    this.name = newName;
+                }
+            },
+            //计算总价
+            getTotalMoney() {
+                var price = 0;
+                for (let i = 0; i < this.date_price.length; i++) {
+                    price = parseFloat(price) + parseFloat(this.date_price[i].price);
+                }
+                this.total_money = (this.roomNum * price).toFixed(2);
+                let haha = parseInt(this.total_money);
+                if (this.total_money - haha === 0) {
+                    this.total_money = haha;
+                }
+            }
+        },
+    }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+    @import "./../../style/mixin";
+
+    @keyframes fadeInUp {
+        0% {
+            /*opacity: 0;*/
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+        100% {
+            /*opacity: 1;*/
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    .fadeInUp {
+        -webkit-animation-name: fadeInUp;
+        animation-name: fadeInUp;
+    }
+
+    @-webkit-keyframes fadeInDown {
+        0% {
+            -webkit-transform: none;
+            transform: none;
+        }
+        100% {
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    @keyframes fadeInDown {
+        0% {
+            -webkit-transform: none;
+            transform: none;
+        }
+        100% {
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+    }
+
+    .fadeInDown {
+        -webkit-animation-name: fadeInDown;
+        animation-name: fadeInDown;
+    }
+
+    .fillOrder {
+        width: 100%;
+        background-color: #f7f7f7;
+    }
+
+    .ml24 {
+        margin-left: 0.12rem;
+    }
+
+    .divide {
+        width: 3.75rem;
+        border-bottom: 1px solid #cccccc;
+    }
+
+    .topInfo {
+        width: 100%;
+        height: 0.92rem;
+        padding-top: 0.115rem;
+        background-color: $colorWhite;
+    }
+
+    .hotelName {
+        height: 0.2rem;
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+        font-weight: 500;
+        text-align: left;
+    }
+
+    .roomType {
+        margin-top: 0.075rem;
+        height: 0.165rem;
+        font-family: PingFangSC;
+        font-size: 0.12rem;
+    }
+
+    .stayTime {
+        margin-top: 0.075rem;
+        height: 0.165rem;
+        font-family: PingFangSC;
+        font-size: 0.12rem;
+    }
+
+    .stayTime span {
+        height: 0.165rem;
+        font-family: PingFangSC;
+        font-size: 0.12rem;
+    }
+
+    .gift {
+        padding-top: 0.11rem;
+        background-color: $colorWhite;
+    }
+
+    .giftLeft {
+        height: 0.15rem;
+        margin-left: 0.13rem;
+        margin-top: 0.005rem;
+    }
+
+    .giftRight {
+        margin-right: 0.3rem;
+        margin-left: 0.085rem;
+        margin-bottom: 0.115rem;
+    }
+
+    .roomInfo {
+        background-color: $colorWhite;
+        margin-top: 0.06rem;
+    }
+
+    .roomNum, .phoneNumber {
+        height: 0.44rem;
+    }
+
+    .inPeople {
+        min-height: 0.44rem;
+    }
+
+    .roomInfoLeft {
+        width: 0.42rem;
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+        color: #999999;
+    }
+
+    .peopleName {
+        width: 3rem;
+        height: 0.44rem;
+        padding-left: 0.18rem;
+    }
+
+    .peopleName:last-child {
+        border-bottom: 0;
+    }
+
+    .roomInfoLeft1 {
+        width: 0.42rem;
+        height: 0.2rem;
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+        color: #999999;
+    }
+
+    .roomLeft, .roomLeft span {
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+    }
+
+    .w5 {
+        width: 0.5rem;
+    }
+
+    .ml78 {
+        margin-left: 0.39rem;
+    }
+
+    .ml42 {
+        margin-left: 0.21rem;
+    }
+
+    .remark {
+        margin-top: 0.04rem;
+        height: 1.74rem;
+        background-color: $colorWhite;
+    }
+
+    .otherRequire {
+        margin: 0.15rem 0.12rem;
+        resize: none;
+        height: 1.44rem;
+        width: 3.51rem;
+        background-color: $colorBackgroundHotel;
+        border: solid 1px $colorBorder2;
+        padding: 0.1rem;
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+    }
+
+    input::-webkit-input-placeholder {
+        color: $colorGray3;
+        height: 0.2rem;
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+    }
+
+    input:-moz-placeholder {
+        color: $colorGray3;
+        height: 0.2rem;
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+    }
+
+    input::-moz-placeholder {
+        color: $colorGray3;
+        height: 0.2rem;
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+    }
+
+    input:-ms-input-placeholder {
+        color: $colorGray3;
+        height: 0.2rem;
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+    }
+
+    textarea::-webkit-input-placeholder {
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+        color: $colorGray2;
+    }
+
+    textarea:-moz-placeholder {
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+        color: $colorGray2;
+    }
+
+    textarea::-moz-placeholder {
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+        color: $colorGray2;
+    }
+
+    textarea:-ms-input-placeholder {
+        font-family: PingFangSC;
+        font-size: 0.14rem;
+        color: $colorGray2;
+    }
+
+    .attention {
+        margin-top: 0.12rem;
+        margin-bottom: 0.45rem;
+        width: 100%;
+    }
+
+    .attentionInfo {
+        width: 3.51rem;
+        margin-bottom: 0.195rem;
+    }
+
+    .attentionTitle {
+        font-size: 0.11rem;
+        font-family: PingFangSC;
+        font-weight: 500;
+    }
+
+    .warningInfo {
+        font-size: 0.11rem;
+        font-family: PingFangSC;
+        color: $colorGray2;
+    }
+
+    .go_create_order {
+        position: fixed;
+        bottom: 0;
+        width: 3.75rem;
+        /*<!--box-shadow: 0 -1px 19px 0 rgba(100, 150, 255, 0.15);-->*/
+        height: 0.45rem;
+    }
+
+    .create_left {
+        width: 2.7rem;
+        padding-top: 0.14rem;
+        padding-bottom: 0.14rem;
+    }
+
+    .create_right {
+        opacity: 0.9;
+        background-color: $colorMain;
+        width: 1.05rem;
+    }
+
+    .total_money_style {
+        height: 0.1475rem;
+        font-family: PingFangSC;
+        font-size: 0.18rem;
+        font-weight: 500;
+        line-height: 0.9;
+        text-align: left;
+        color: $colorPrice;
+    }
+
+    .model_price {
+        position: fixed;
+        z-index: 24;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+
+    .model_box_price {
+        position: fixed;
+        bottom: 0.45rem;
+        left: 0;
+        right: 0;
+        background-color: #fff;
+        border-bottom: 1px solid #cccccc;
+    }
+
+    .animated {
+        -webkit-animation-duration: 0.4s;
+        animation-duration: 0.4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+    }
+
+    .peopleNum, .unitPrice {
+        font-family: PingFangSC;
+        font-size: 0.12rem;
+        height: 0.165rem;
+        color: #818181;
+    }
+
+    .ticket_price_desc:first-child .showBreakfast {
+        display: none;
+    }
+
+    .roomBottom {
+        background-color: #ECECEC;
+        width: 100%;
+    }
+
+    .roomRight {
+        margin-left: 2rem;
+    }
+
+    .roomBorder {
+        width: 0.63rem;
+        height: 0.29rem;
+        border-radius: 0.145rem;
+        background-color: #ffffff;
+        margin-top: 0.085rem;
+        margin-bottom: 0.08rem;
+        margin-right: 0.07rem;
+        font-family: PingFangSC;
+        font-size: 0.12rem;
+        float: left;
+    }
+
+    .roomBorder:nth-of-type(5n+1) {
+        margin-left: 0.12rem;
+    }
+
+    .roomBorder:nth-of-type(n+6) {
+        margin-top: 0;
+    }
+
+    .chooseRoomNum {
+        color: #368ff4;
+        border: solid 2px #368ff4;
+    }
+
+    /*webkit内核*/
+    .content::-webkit-scrollbar-button {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar-track {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar-track-piece {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar-corner {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar-resizer {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar {
+        display: none; /*隐藏滚轮*/
+    }
+
+    /*o内核*/
+    .content .-o-scrollbar {
+        -moz-appearance: none !important;
+        background: rgba(0, 255, 0, 0) !important;
+    }
+
+    .content::-o-scrollbar-button {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-o-scrollbar-track {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-o-scrollbar-track-piece {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-o-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-o-scrollbar-corner {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-o-scrollbar-resizer {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    /*IE10,IE11,IE12*/
+    .content {
+        -ms-scroll-chaining: chained;
+        -ms-overflow-style: none;
+        -ms-content-zooming: zoom;
+        -ms-scroll-rails: none;
+        -ms-content-zoom-limit-min: 100%;
+        -ms-content-zoom-limit-max: 500%;
+        -ms-scroll-snap-type: proximity;
+        -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+        -ms-overflow-style: none;
+        overflow: auto;
+        overflow-y: hidden;
+    }
+</style>

src/pages/hotel/HotelDetail.vue

@@ -0,0 +1,532 @@
+<template>
+    <div class="HotelDetail">
+        <div class="content" v-if="hotelInfo">
+            <hotel-top-image-view :item="hotelInfo" @clickTopImage="callbackClickTopImage"></hotel-top-image-view>
+            <div class="hotel-address ub" style="padding:0.11rem 0.12rem 0.12rem 0.11rem;">
+                <div class="address-left ub ub-f3 ub-ver" style="width:1%;">
+                    <div class="address-area ub">{{hotelInfo.hotel_address}}</div>
+                    <div class="address-desc ub">{{hotelInfo.business_area}}</div>
+                </div>
+                <div @click="clickMap()" class="map ub ub-f1 ub-pe ub-ac" style="width:1%;">
+                    <div class="map-text ub">地图/周边</div>
+                    <img style="width:0.07rem;height:0.13rem;margin-left:0.07rem;padding-top:0.01rem;"
+                         src="./../../../static/image/hotel/ht_arrow_right.png" alt="">
+                </div>
+            </div>
+
+            <div class="hotel-desc ub" style="padding:0.11rem 0.12rem 0.12rem 0.11rem;margin-top:0.055rem;">
+                <div class="ub ub-f1 ub-ver">
+                    <div class="ub tag-1" v-if="hotelInfo.sale_labels.length>0">
+                        <div class="ub lijian ub-ac" v-for="val in hotelInfo.sale_labels" v-html="val">立减</div>
+                    </div>
+                    <div class="ub tag-2" v-show="hotelInfo.hotel_label" style="margin-top:0.07rem;">
+                        <div class="ub label" v-if="i<=3" v-for="(val,i) in hotelInfo.hotel_labels">
+                            <div class="ub" style="margin-right:0.025rem;">
+                                <img src="./../../../static/image/hotel/ht_arrow_down_circular.png" style="width:0.1rem;height:0.1rem;position: absolute;top: 0.015rem;" alt="">
+                            </div>
+                            <div class="ub tag2-text" style="margin-left:0.1rem;" v-html="val">免费WiFi</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="ub ub-f1 ub-pe ub-ac" style="line-height: 1;" @click="clickHotelDesc()">
+                    <div class="ub blue-text">详情</div>
+                    <img style="width:0.07rem;height:0.13rem;margin-left:0.07rem;padding-top:0.01rem;"
+                         src="./../../../static/image/hotel/ht_arrow_right.png" alt="">
+                </div>
+            </div>
+
+            <div class="hotel-calander ub ub-ver">
+
+               <div class="l-date ub ub-f1">
+                   <div class="ub ub-f1" @click="chooseDate()"
+                        style="padding-top:0.1225rem;padding-bottom:0.1225rem;padding-left:0.115rem;line-height: 1;">
+                       <img src="./../../../static/image/hotel/ht_calender_icon.png" alt="" style="width:0.165rem;height:0.16rem;">
+                       <div class="ub" style="margin-left:0.1rem;">{{checkindate()}} - {{checkoutdate()}}</div>
+                   </div>
+                   <div class="ub ub-f1 ub-ac ub-pe" style="line-height: 1;padding-right:0.12rem;">
+                       <div class="total-day ub">共{{dayCount}}晚</div>
+                       <img style="width:0.07rem;height:0.13rem;margin-left:0.07rem;padding-top:0.01rem;"
+                            src="./../../../static/image/hotel/ht_arrow_right.png" alt="">
+                   </div>
+               </div>
+                <!--<div class="ub ub-f1" v-show="tempBaseCellObj.item.selected">-->
+                    <!--<hotel-base-room-cell @click.native="clickBaseRoom(tempBaseCellObj.index,$event)" :item="tempBaseCellObj.item" :key="tempBaseCellObj.index"></hotel-base-room-cell>-->
+                <!--</div>-->
+            </div>
+
+            <div ref="iscroll" class="room-list ub ub-ver">
+                <div class="base" v-for="(base,index) in hotelInfo.list">
+                    <hotel-base-room-cell @click.native="clickBaseRoom(index,$event)" :item="base"></hotel-base-room-cell>
+                    <hotel-child-room-cell v-show="base.selected" @childBook="callbackChildBook" @clickGift="callbackChildGift" :item="child" :showAvg="childShowAvg" :key="(index+1)*(i+1)+'key'" v-for="(child,i) in base.room_list"></hotel-child-room-cell>
+                </div>
+                <div v-show="hotelInfo.list.length<=0" class="ub ub-ac ub-pc" style="padding:0.3rem 0;font-size:0.14rem;">暂无相关房型</div>
+            </div>
+        </div>
+        <div class="pop-calendar">
+            <mt-popup v-model="popupVisible" position="bottom" style="background:rgba(0,0,0,0)">
+                <hotel-calendar ref="htCalendar" :checkInDate="hotelInfoParam.start_date" :checkOutDate="hotelInfoParam.end_date" @clickDate="callbackClickDate"></hotel-calendar>
+            </mt-popup>
+        </div>
+        <div class="pop-gift">
+            <mt-popup class="gift" :closeOnClickModal="false" v-model="popupGift" position="center" popup-transition="popup-fade" style="background:rgb(255,255,255)">
+                <div  class="ub" style="max-height:3rem;width:3rem;padding-top:0.25rem;padding-bottom:0.25rem;padding-left:0.2rem;padding-right:0.225rem;">
+                    <div class="ub">
+                        <img src="./../../../static/image/hotel/ht_gift_icon.png" style="width:0.12rem;height:0.12rem;" alt="">
+                    </div>
+                    <div class="ub ub-ver ub-f1" v-if="giftList && giftList.length<=11" style="margin-left:0.1rem;max-height:3rem;overflow-y: hidden">
+                        <div class="ub gift-item" v-for="item in giftList">{{item.date}}&emsp;{{item.name}}</div>
+                    </div>
+                    <div class="ub ub-ver ub-f1" v-else style="margin-left:0.1rem;max-height:3rem;overflow-y: scroll">
+                        <div class="ub gift-item" v-for="item in giftList">{{item.date}}&emsp;{{item.name}}</div>
+                    </div>
+                    <div @click="closeGift()" class="ub" style="position: absolute;right: 0.04rem;top: 0.04rem;padding: 0.03rem;">
+                        <img src="./../../../static/image/home/clear.png" style="width:0.12rem;height:0.12rem;" alt="">
+                    </div>
+                </div>
+            </mt-popup>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import tool from './../../config/mUtil/tool'
+    import dateUtil from './../../config/mUtil/dateUtil'
+    import info from './../../config/info'
+
+    import HotelTopImageView from './view/detailView/HotelTopImage'
+    import HotelBaseRoomCell from './view/detailView/cell/HotelBaseRoomCell'
+    import HotelChildRoomCell from './view/detailView/cell/HotelChildRoomCell'
+    import HotelCalendar from './view/detailView/HotelCalendar'
+    import {Popup, Toast, Indicator} from 'mint-ui'
+    import {getHotelDetail,checkLogin} from './../../service/httpService'
+
+
+    let cachekey ='hotel-detail-20170117';
+    let cachekey_indate='hotel_in_date';
+    let cachekey_outdate='hotel_out_date';
+
+    export default {
+        name: "HotelDetail",
+        components: {
+            HotelTopImageView,
+            HotelBaseRoomCell,
+            HotelChildRoomCell,
+            HotelCalendar
+        },
+        data() {
+            return {
+                popupVisible: false,
+                popupGift:false,
+                giftList:null,
+                toastObj: null,
+                hotelInfoParam: {
+                    hotel_id: '',
+                    start_date: '',
+                    end_date: ''
+                },
+                hotelInfo:null,
+                childShowAvg:false,
+                dayCount:1,
+                tempIndex:-1,
+                urlParam:null
+            }
+        },
+        watch: {
+            popupVisible(cur, old) {
+                let body = document.querySelectorAll('body')[0];
+                body.style.overflow=cur===false?'':'hidden';
+                if (cur === false) {
+                    this.toastObj.close();
+                }
+
+            },
+            'hotelInfoParam':{
+                handler(cur,old){
+                    let count = Date.dayMinus(new Date(cur.start_date),new Date(cur.end_date));
+                    this.dayCount = count;
+                    this.childShowAvg = count>1;
+                },
+                deep:true
+            },
+            popupGift(cur,old){
+                let body = document.querySelectorAll('body')[0];
+                body.style.overflow=cur===false?'':'hidden';
+            }
+
+        },
+        created() {
+            this.initLoad();
+                tool.addHandler(document,'scroll',e=>{
+                    let sc = window.scrollY;
+                    tool.log('sc='+sc);
+                });
+        },
+        mounted(){
+        },
+        beforeRouteLeave(to,from,next){
+            if(this.toastObj) this.toastObj.close();
+            next(vm=>{});
+        },
+        methods: {
+            initLoad() {
+                this.urlParam = this.$route.query;
+                if(!this.urlParam.hasOwnProperty('hotel_id')){
+                    return false;
+                }
+                this.hotelInfoParam.hotel_id = this.urlParam.hotel_id;
+                let cache_indate = tool.getStorage(cachekey_indate);
+                let cache_outdate = tool.getStorage(cachekey_outdate);
+                if(cache_indate) this.hotelInfoParam.start_date = cache_indate;
+                else this.hotelInfoParam.start_date = this.urlParam.start_date;
+
+                if(cache_outdate) this.hotelInfoParam.end_date = cache_outdate;
+                else this.hotelInfoParam.end_date = this.urlParam.end_date;
+
+                if(!this.hotelInfoParam.start_date) this.hotelInfoParam.start_date = dateUtil.getDateTime(0);
+                if(!this.hotelInfoParam.end_date) this.hotelInfoParam.end_date = dateUtil.after(dateUtil.getDateTime(0));
+
+                if(Date.dayMinus(new Date(dateUtil.getDateTime(0)),new Date(this.hotelInfoParam.start_date))<=0){
+                    this.hotelInfoParam.start_date = dateUtil.getDateTime(0);
+                }
+                if(Date.dayMinus(new Date(dateUtil.after(dateUtil.getDateTime(0))),new Date(this.hotelInfoParam.end_date))<=0){
+                    this.hotelInfoParam.end_date = dateUtil.after(dateUtil.getDateTime(0));
+                }
+
+
+//                this.hotelInfoParam.hotel_id = 197;
+//                this.hotelInfoParam.start_date = '2018-01-09';
+//                this.hotelInfoParam.end_date = '2018-01-10';
+                this.httpHotelDetail();
+            },
+            httpHotelDetail() {
+                Indicator.open({
+                    spinnerType:'fading-circle'
+                });
+                getHotelDetail(this.hotelInfoParam).then(res=>{
+                    Indicator.close();
+                    if(res.flag){
+                        this.hotelInfo=res.data;
+                        this.$set(this.hotelInfo,'sale_labels',this.hotelInfo.sale_label.Array());
+                        tool.setStorJson(cachekey,this.hotelInfo,'d1');
+                        this.$set(this.hotelInfo,'hotel_labels',this.hotelInfo.hotel_label.Array(','));
+                        if(this.hotelInfo.list.length>0){
+                            this.hotelInfo.list.map(x=>{
+                                this.$set(x,'selected',false);
+                            });
+                        }
+                    }else{
+                        Toast(res.msg);
+                        tool.delay(()=>{
+                            this.$router.go(-1);
+                        },2000);
+                    }
+                }).catch(e=>{
+                    Toast(info.infoApiError);
+                    Indicator.close();
+                });
+
+            },
+            chooseDate() {
+                this.popupVisible = true;
+                this.$refs.htCalendar.reload();
+                this.toastObj = Toast({
+                    message: "请选择入住日期",
+                    duration: -1,
+                    position: 'bottom'
+                })
+            },
+            callbackClickDate(item) {
+                if (item.checkInDate && item.checkOutDate === "") {
+                    this.toastObj.close();
+                    tool.delay(()=>{
+                        if(this.popupVisible){
+                            this.toastObj=null;
+                            this.toastObj = Toast({
+                                message: "请选择离店日期",
+                                duration: -1,
+                                position: 'bottom'
+                            })
+                        }
+                    },50);
+                }
+                if (item.checkInDate && item.checkOutDate) {
+                    tool.setStorage(cachekey_indate,item.checkInDate);
+                    tool.setStorage(cachekey_outdate,item.checkOutDate);
+                    tool.delay(()=>{
+                        this.popupVisible = false;
+                        this.toastObj.close();
+                        this.hotelInfoParam.start_date = item.checkInDate;
+                        this.hotelInfoParam.end_date = item.checkOutDate;
+                        this.httpHotelDetail();
+                    },300);
+                }
+            },
+            //地图/周边
+            clickMap(){
+                tool.$router.push(this,{
+                    name:'HotelMap',
+                    query:{
+                        lng:this.hotelInfo.LONGITUDE,
+                        lat:this.hotelInfo.LATITUDE,
+                        hotel_id:this.urlParam.hotel_id,
+                        hotel_name:this.hotelInfo.hotel_name,
+                        hotel_address:this.hotelInfo.hotel_address,
+                        start_date:this.hotelInfoParam.start_date,
+                        end_date:this.hotelInfoParam.end_date
+                    }
+                })
+            },
+            //详情
+            clickHotelDesc(){
+                tool.$router.push(this,{
+                    name:'HotelDetailDesc',
+                    query:{
+                        hotel_id:this.urlParam.hotel_id,
+                        cacheKey:cachekey
+                    }
+                });
+            },
+            //点击基础房型
+            clickBaseRoom(index,e){
+                let baseItem = this.hotelInfo.list[index];
+                let t = 0;
+                if(this.tempIndex<index && this.tempIndex!==-1)t=-70*baseItem.room_list.length;
+                else t=0;
+                let topH = 277 + t;
+                let curT = e.currentTarget;
+                let oft = curT.offsetTop;
+                let sc = window.scrollY;
+                if(!this.hotelInfo.list[index].selected){
+                    animat(oft+topH-sc,80);
+                }
+
+                function animat(num,time){
+                    let s = sc;
+                    let m = num/time;
+                    tool.timer({
+                        toDo:(obj)=>{
+                            s+=m;
+                            if(s>=(num+sc))obj.clear();
+                            scrollTo(0,s);
+                        },
+                        interval:1
+
+                    })
+                }
+
+                if(baseItem.selected){
+
+                }else{
+                    this.hotelInfo.list.map(x=>x.selected = false);
+                }
+                baseItem.selected = !baseItem.selected;
+                this.tempIndex = index;
+
+            },
+            callbackChildBook(item){
+                tool.$router.push(this,{
+                    name:"fillHotelOrder",
+                    query:{
+                        hotel_id:item.hotel_id,
+                        room_id:item.room_id,
+                        start_date:this.hotelInfoParam.start_date,
+                        end_date:this.hotelInfoParam.end_date
+                    }
+                })
+            },
+            callbackChildGift(item){
+                this.giftList = item.gift_list;
+                this.popupGift = true;
+            },
+            closeGift(){
+                this.popupGift = false;
+            },
+            checkindate(){
+                return new Date(this.hotelInfoParam.start_date).dateFormat('MM月dd日');
+            },
+            checkoutdate(){
+                return new Date(this.hotelInfoParam.end_date).dateFormat('MM月dd日');
+            },
+            callbackClickTopImage(item){
+                if(item.img_list.length<=0)return;
+                //将图片存在缓存里
+                tool.$router.push(this,{
+                    name:'HotelImageDetail',
+                    query:{
+                        hotel_id:this.urlParam.hotel_id,
+                        imgKey:cachekey
+                    }
+                })
+            }
+        }
+    }
+</script>
+<style type="text/scss" lang="scss">
+    @import "./../../style/mixin";
+
+    body {
+        background: $colorBackgroundHotel !important;
+    }
+
+    .HotelDetail {
+        .mint-popup-bottom {
+            background-color: rgba(0, 0, 0, 0);
+            width: 3.76rem;
+        }
+        .gift{
+            border-radius: 0.08rem;
+            box-shadow: 0 0 14px 2px rgba(0, 0, 0, 0.1);
+        }
+        .pop-gift{
+            .v-modal{
+                background:content-box;
+            }
+        }
+    }
+</style>
+<style scoped type="text/scss" lang="scss">
+    @import "./../../style/mixin";
+    @import "./../../../static/css/ui-box.css";
+
+    .blue-text {
+        color: $colorMain;
+    }
+
+    .hotel-address {
+        background: $colorWhite;
+        border-bottom: 1px solid $colorBorder2;
+    }
+
+    .address-left {
+        .address-desc {
+            color: $colorGray;
+            margin-top: 0.02rem;
+        }
+    }
+
+    .map {
+        font-size: 0.14rem;
+        line-height: 1;
+        .map-text {
+            color: $colorMain;
+        }
+    }
+
+    .hotel-desc {
+        background: $colorWhite;
+        border-bottom: 1px solid $colorBorder2;
+        .lijian {
+            color: $colorOrange;
+            border: 1px solid $colorOrange;
+            padding: 0 0.1rem;
+            font-size: 0.1rem;
+            line-height: 1;
+            padding-top:0.01rem;
+            -webkit-border-radius: 1px;
+            -moz-border-radius: 1px;
+            border-radius: 1px;
+            &:not(:first-child){
+                margin-left:0.05rem;
+            }
+        }
+        .tag2-text {
+            color: $colorGray;
+            font-size: 10px;
+        }
+        .label:not(:first-child){
+            margin-left:0.2rem;
+        }
+    }
+
+    .hotel-calander {
+        background: $colorWhite;
+        position: sticky;
+        position: -webkit-sticky;
+        top:-1px;
+        border-bottom:1px solid $colorBorder2;
+        .total-day {
+            color: $colorGray2;
+        }
+    }
+    .gift-item{
+        color:$colorGray4;
+        &:not(:first-child){
+            margin-top:0.05rem;
+        }
+    }
+    /*webkit内核*/
+    .content::-webkit-scrollbar-button {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar-track {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar-track-piece {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar-corner {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar-resizer {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-webkit-scrollbar {
+        display: none; /*隐藏滚轮*/
+    }
+
+    /*o内核*/
+    .content .-o-scrollbar {
+        -moz-appearance: none !important;
+        background: rgba(0, 255, 0, 0) !important;
+    }
+
+    .content::-o-scrollbar-button {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-o-scrollbar-track {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-o-scrollbar-track-piece {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-o-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-o-scrollbar-corner {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .content::-o-scrollbar-resizer {
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    /*IE10,IE11,IE12*/
+    .content {
+        -ms-scroll-chaining: chained;
+        -ms-overflow-style: none;
+        -ms-content-zooming: zoom;
+        -ms-scroll-rails: none;
+        -ms-content-zoom-limit-min: 100%;
+        -ms-content-zoom-limit-max: 500%;
+        -ms-scroll-snap-type: proximity;
+        -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+        -ms-overflow-style: none;
+        overflow: auto;
+        overflow-y: hidden;
+    }
+
+</style>

src/pages/hotel/HotelDetailDesc.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="HotelDetailDesc">
+        <div class="box">
+            <div class="box-title">预订须知</div>
+            <div class="box-content" v-html="hotelInfo.reservation_notes">
+
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-title">酒店介绍</div>
+            <div class="box-content" v-html="hotelInfo.introduction">
+
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-title">设施服务</div>
+            <div class="box-content" v-html="hotelInfo.hotel_label">
+
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-title">周边交通</div>
+            <div class="box-content" v-html="hotelInfo.peripheral_traffic">
+
+            </div>
+        </div>
+        <div class="box" style="padding-top:0.02rem;">
+            <div class="box-content" style="line-height: 1.92;">
+                客服电话&emsp;&emsp;&emsp;<a href="tel:021-33280519">021-33280519</a><br/>
+                服务时间&emsp;&emsp;&emsp;09:00-21:00
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import tool from './../../config/mUtil/tool'
+
+    export default {
+        name: "HotelDetailDesc",
+        data() {
+            return {
+                hotelInfo: null
+            }
+        },
+        created() {
+
+            this.hotelInfo = tool.getStorJson(this.$route.query.cacheKey);
+            tool.log(this.hotelInfo);
+        },
+        mounted() {
+            tool.navDomEach('table', (e) => {
+                e.style.width = '3.52rem';
+                e.setAttribute('width', '3.52rem');
+            })
+        },
+    }
+</script>
+<style type="text/scss" lang="scss">
+    @import "./../../style/mixin";
+
+    body {
+        background: $colorBackgroundHotel !important;
+    }
+    .HotelDetailDesc{
+        img{
+            max-width:3.51rem;
+        }
+    }
+</style>
+<style scoped type="text/scss" lang="scss">
+    @import "./../../style/mixin";
+
+    .HotelDetailDesc {
+
+    }
+
+    .box {
+        background-color: $colorWhite;
+        padding-left: 0.12rem;
+        padding-right: 0.12rem;
+        padding-top: 0.11rem;
+        padding-bottom: 0.1rem;
+    }
+
+    .box:not(:first-child) {
+        margin-top: 0.025rem;
+    }
+
+    .box-title {
+
+        font-size: 0.14rem;
+        padding-left: 0.07rem;
+        border-left: 0.03rem solid $colorMain;
+    }
+
+    .box-content {
+        background-color: $colorWhite;
+        margin-top: 0.045rem;
+        p {
+            line-height: 1.92;
+        }
+        table {
+            width: 3.52rem !important;
+        }
+    }
+</style>

src/pages/hotel/HotelImageDetail.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="bg ub hotelImageDetail">
+        <!-- <div v-for="dict in img" class="ub">
+         <div v-for="item in dict" class="img_box ub">
+             <img :src="item.img" alt="" @click="lookBigImg(item.index)">
+         </div>
+     </div> -->
+        <div class="img-list" style="padding-left:0.12rem;padding-right:0.12rem;">
+            <div class="ub img_box" v-for="(item,index) in images">
+                <img :src="item" alt="" @click="lookBigImg(index)">
+            </div>
+        </div>
+
+        <!--弹层-->
+        <div v-if="imageDisplay" class="model swiper-container" @click.stop="imageDisplay=!imageDisplay">
+            <swiper :options="swiperOption" class="my-swiper ub ub-ver">
+                <swiper-slide v-for="(item,index) in images" :key="index">
+                    <img style="width:3.75rem" :src="item"/>
+                </swiper-slide>
+                <div class="swiper-pagination ub ub-pc ub-ac" slot="pagination"></div>
+            </swiper>
+        </div>
+    </div>
+</template>
+
+<script>
+    import tool from './../../config/mUtil/tool'
+    import {swiper, swiperSlide} from 'vue-awesome-swiper'
+
+    export default {
+        name: "hotelImageDetail",
+        data() {
+            return {
+                images: {},
+                imageDisplay: false,
+                page: '',
+                swiperOption: {
+                    pagination: '.swiper-pagination',
+                    paginationType: 'fraction',
+                    loop: false,
+                    centeredSlides: true,
+                    observer: true, //修改swiper自己或子元素时，自动初始化swiper
+                    observeParents: true, //修改swiper的父元素时，自动初始化swiper
+                    initialSlide: 1,
+                },
+            };
+        },
+        components: {
+            swiper,
+            swiperSlide
+        },
+        beforeRouteEnter(to, from, next) {
+            next(vm => {
+                // 从缓存里读取图片
+                if (vm.$route.query.hasOwnProperty('hotel_id')) {
+                    let key = vm.$route.query.imgKey;
+                    let hotelInfo = tool.getStorJson(key);
+                    vm.images = hotelInfo.img_list;
+                }
+            })
+        },
+        mounted() {
+            this.load()
+        },
+        methods: {
+            load() {
+//                let imgs = [
+//                    'http://img.zhizhuchuxing.cn/wechat/Disney.jpg',
+//                    'http://img.zhizhuchuxing.cn/wechat/qiandaohu.jpg',
+//                    'http://img.zhizhuchuxing.cn/wechat/zhoushan.jpg',
+//                    'http://nwx.zhizhuchuxing.cn/web/admin/images/prodImg/15090134874033.jpg',
+//                ];
+//                this.images = imgs;
+            },
+            lookBigImg(index) {
+
+                tool.log(index, this.swiperOption);
+                this.swiperOption.initialSlide = index;
+
+                this.imageDisplay = true;
+            },
+            lookOther(index) {
+
+            }
+        }
+    }
+</script>
+<style type="text/scss" lang="scss">
+    .hotelImageDetail {
+        .swiper-container {
+            height: 90%;
+        }
+        .swiper-slide {
+            justify-content: center;
+            align-items: center;
+            display: -webkit-flex;
+        }
+        .swiper-pagination {
+            width: 100%;
+            height: 10%;
+            color: #fff !important;
+        }
+        .swiper-pagination span {
+            color: #fff !important;
+        }
+        .swiper-wrapper {
+            margin-top: 2.18rem;
+            display: -webkit-box;
+            display: -moz-box;
+            position: relative;
+        }
+    }
+
+</style>
+<style scoped type="text/scss" lang="scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-box.css";
+
+    .bg {
+        margin-top: 0.1rem;
+        /*margin-left: 0.12rem;*/
+        /*margin-right: 0.12rem;*/
+    }
+
+    .img_box {
+        width: 1.7rem;
+        height: 1.15rem;
+        border: 1px solid #ccc;
+        /*margin-right: 0.11rem;*/
+        margin-bottom: 0.1rem;
+        float: left;
+    }
+
+    .img_box:nth-of-type(even) {
+        margin-left: 0.11rem;
+    }
+
+    .img_box img {
+        width: 1.7rem;
+        height: 1.15rem;
+    }
+
+    .model {
+        background-color: rgba(0, 0, 0, 0.8);
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .page {
+        font-size: 0.18rem;
+        color: #fff;
+        position: absolute;
+        bottom: 0.4rem;
+    }
+</style>

src/pages/hotel/HotelList.vue

@@ -0,0 +1,514 @@
+<template>
+    <div class="HotelList">
+        <div class="search">
+            <div class="search-box ub">
+                <div class="search-date" @click="selectDate">
+                    <div>住 <span style="color:#368FF4">{{dateInfo.inDate}}</span></div>
+                    <div>离 <span style="color:#368FF4">{{dateInfo.outDate}}</span></div>
+                </div>
+                <div class="search-content ub ub-ac">
+                    <div class="search-icon"></div>
+                    <input placeholder="品牌/商圈/名称" v-model="searchMore" @input="inputSearchHotel">
+                </div>
+            </div>
+        </div>
+
+        <div class="line"></div>
+
+        <div class="hotel-list" v-show="!nullShow" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading">
+            <div class="hotel ub" v-for="(item,index) in hotelList" :class="item.stock?'hotel':'hotel-over'"
+                 @click="lookHotelDetail(item)">
+                <img class="hotel-img" v-lazy="setLoading(item.hotel_image)">
+                <div class="hotel-contents">
+                    <div class="hotel-name" :class="item.stock?'':'over-color'">{{item.hotel_name}}</div>
+                    <div class="star">{{item.star_level}}</div>
+                    <div class="hotel-mark ub">
+                        <div class="mark" v-for="dict in item.sale_label">{{dict}}</div>
+                        <div class="mark-null" v-if="item.sale_label.length?false:true"></div>
+                    </div>
+                    <div class="hotel-other ub">
+                        <div class="area star ub-f1">{{item.area_name}}</div>
+                        <div class="price ub ub-ae ub-f1 ub-pe">
+                            <div class="goods_contents_font3 ub-ae " :class="item.stock?'':'over-color'"
+                                 style="line-height: 1">¥
+                            </div>
+                            <div class="goods_contents_font2" :class="item.stock?'':'over-color'"
+                                 style="line-height: 1">{{item.price}}
+                            </div>
+                            <div class="star" style="line-height: 1;margin-left: 0.03rem">起</div>
+                        </div>
+                    </div>
+                    <div v-if="item.stock?false:true" class="sale_out"><img
+                        src="./../../../static/image/hotel/ht_sale_out.png"></div>
+                </div>
+            </div>
+            <div v-if="!loading" class="ub-ac ub-pc ub ui_p_b15"
+                 style="margin-top: 0.25rem;margin-bottom: 0.5rem;color: #686872;">加载中...
+            </div>
+            <div v-if="loading" class="ub-ac ub-pc ub ui_p_b15"
+                 style="margin-top: 0.25rem;margin-bottom: 0.5rem;color: #686872;" :style="styleBottom()">- 已经到达最底部 -
+            </div>
+        </div>
+
+        <div class="null_list" v-show="nullShow">
+            <div style="text-align: center">
+                <div style="width: 0.5rem;height: 0.5rem;margin: 0.64rem auto 0.28rem">
+                    <img src="../../../static/image/trip/404.png" style="width: 100%;height: 100%">
+                </div>
+                <div style="font-size: 0.12rem;margin-bottom: 0.09rem;color: #666666;">
+                    未找到合适的酒店
+                </div>
+                <div style="font-size: 0.12rem;color: #666666;">
+                    请修改条件查询选择
+                </div>
+            </div>
+        </div>
+
+        <div class="ub bottom-sort-fliter max-width">
+            <div class="ub ub-ac ub-pc ub-f1" @click="sort()" style="font-size:0.1rem;">排序</div>
+            <div class="ub ub-ac ub-pc ub-f1" @click="fliter()" style="font-size:0.1rem;">筛选</div>
+        </div>
+        <mt-popup v-model="popupVisible" position="bottom" style="background:rgba(0,0,0,0);margin-bottom:0.45rem;">
+            <hotel-filter-box :boxType="boxType" @clickSort="callbackClickSort" @ok="callOk"></hotel-filter-box>
+        </mt-popup>
+        <mt-popup v-model="dateShow" class="date-layer" position="bottom" style="background: rgba(0, 0, 0, 0);">
+            <hotel-calendar ref="htCalendar" :checkInDate="inDate" :checkOutDate="outDate"
+                            @clickDate="callbackClickDate"></hotel-calendar>
+        </mt-popup>
+    </div>
+</template>
+
+<script>
+    import tool from './../../config/mUtil/tool'
+    import info from './../../config/info'
+    import date from './../../config/mUtil/dateUtil'
+    import {Popup, Toast, InfiniteScroll, MessageBox} from 'mint-ui'
+    import HotelFilterBox from './view/listView/HotelFilterBox.vue'
+    import HotelCalendar from './view/detailView/HotelCalendar'
+    import {getHotelList} from './../../service/httpService'
+
+    export default {
+        name: "HotelList",
+        components: {
+            HotelFilterBox,
+            HotelCalendar,
+        },
+        data() {
+            return {
+                dateShow: false,
+                nullShow: false,
+                toastObj: null,
+                popupVisible: false,
+                inDate: '2018-01-18',
+                outDate: '2018-01-20',
+                areaId: '',
+                searchMore: '',
+                dateInfo: {},
+                boxType: "",
+                sendData: {},
+                hotelList: [],
+                current_page: 1,
+                page_size: 10,
+                loading: false,
+            }
+        },
+        created() {
+            this.load();
+        },
+        beforeRouteLeave(to, from, next) {
+            if (this.toastObj) this.toastObj.close();
+            next(vm => {
+            });
+        },
+        watch: {
+            dateShow(cur, old) {
+                let body = document.querySelectorAll('body')[0];
+                body.style.overflow = cur === false ? '' : 'hidden';
+                if (cur === false) {
+                    this.toastObj.close();
+                }
+
+            },
+        },
+        methods: {
+            load() {
+                this.inDate = this.$route.query.start_date;
+                this.outDate = this.$route.query.end_date;
+                this.areaId = this.$route.query.area_id;
+                this.searchMore = this.$route.query.more;
+                this.sendData = {
+                    'start_date': this.inDate,
+                    'end_date': this.outDate,
+                    'area_id': this.areaId,
+                    'search_more': this.searchMore,
+                    'current_page': this.current_page,
+                    'page_size': this.page_size,
+                };
+                tool.log(this.outDate)
+                this.dateInfo = {
+                    inDate: this.getDate(this.inDate),
+                    outDate: this.getDate(this.outDate)
+                };
+                this.getListInfo();
+            },
+            setLoading(url) {
+                return {
+                    src: url,
+                    error: 'static/image/hotel/no_hotel.png',
+                    loading: 'static/image/hotel/no_hotel.png'
+                }
+            },
+            callbackClickDate(item) {
+                tool.log('选择日期', item);
+                if (item.checkInDate && item.checkOutDate === "") {
+                    this.toastObj.close();
+                    tool.delay(()=>{
+                        if(this.dateShow){
+                            this.toastObj=null;
+                            this.toastObj = Toast({
+                                message: "请选择离店日期",
+                                duration: -1,
+                                position: 'bottom'
+                            })
+                        }
+                    },50);
+                }
+                if (item.checkInDate && item.checkOutDate) {
+                    tool.delay(()=>{
+                        this.dateShow = false;
+                        this.toastObj.close();
+                        this.inDate = item.checkInDate;
+                        this.outDate = item.checkOutDate;
+                        this.$set(this.sendData, 'start_date', item.checkInDate);
+                        this.$set(this.sendData, 'end_date', item.checkOutDate);
+                        this.dateInfo = {
+                            inDate: this.getDate(this.inDate),
+                            outDate: this.getDate(this.outDate)
+                        };
+                        // 调用接口
+                        this.current_page = 1;
+                        this.getListInfo();
+                    },300);
+
+                }
+            },
+            inputSearchHotel() {
+                // 用户输入
+                tool.delay(this.httpSearchHotel, 700)
+            },
+            httpSearchHotel() {
+                this.$set(this.sendData, 'search_more', this.searchMore);
+                this.current_page = 1;
+                this.getListInfo();
+            },
+
+            getDate(runDate) {
+                let m = date.getMonthByDate(runDate);
+                let d = date.getDayByDate(runDate);
+                return m + '-' + d;
+            },
+            selectDate() {
+                this.dateShow = true;
+                this.$refs.htCalendar.reload();
+                this.toastObj = Toast({
+                    message: "请选择入住日期",
+                    duration: -1,
+                    position: 'bottom'
+                })
+            },
+            sort() {
+                if (this.popupVisible && this.boxType === 'fliter') {
+                    this.popupVisible = false;
+                    tool.delay(() => {
+                        this.popupVisible = true;
+                        this.boxType = 'sort';
+                    }, 200);
+                } else {
+                    this.popupVisible = !this.popupVisible;
+                    this.boxType = 'sort';
+                }
+
+            },
+            callbackClickSort(item, index) {
+                this.popupVisible = false;
+                this.$set(this.sendData, 'sort', item.id);
+                this.current_page = 1;
+                this.getListInfo();
+            },
+            callOk(param) {
+                //关闭弹框
+                this.popupVisible = false;
+                // 初始化变量名称
+                let param_name = [
+                    '',
+                    'price_type',
+                    'star_type',
+                    'brand',
+                    'hotel_label',
+                    'bed_type',
+                    'breakfast_include'
+                ];
+                let that = this;
+                param.forEach(function (item) {
+                    let pName = param_name[item.type_id];
+                    let data = item.params;
+                    that.$set(that.sendData, pName, data)
+                });
+                this.current_page = 1;
+                this.getListInfo();
+            },
+            fliter() {
+                if (this.popupVisible && this.boxType === 'sort') {
+
+                    this.popupVisible = false;
+                    tool.delay(() => {
+                        this.popupVisible = true;
+                        this.boxType = 'fliter';
+                    }, 200);
+
+                } else {
+                    this.popupVisible = !this.popupVisible;
+                    this.boxType = 'fliter';
+                }
+            },
+            loadMore() {
+                tool.delay(() => {
+                    this.current_page++;
+                    this.$set(this.sendData, 'current_page', this.current_page);
+                    this.$set(this.sendData, 'page_size', this.page_size);
+                    this.getListInfo()
+                }, 500)
+            },
+            getListInfo() {
+                this.$set(this.sendData, 'current_page', this.current_page);
+                this.loading=true;
+                getHotelList(this.sendData).then(res => {
+                    if (res.flag === false) {
+                        MessageBox.alert(res.msg);
+                    } else {
+                        let list = res.data.hotel_list;
+                        if (this.current_page === 1) {
+                            this.hotelList = [];
+                        }
+                        if (list.length === 0 && this.hotelList.length === 0) {
+                            this.nullShow = true;
+                        } else {
+                            this.nullShow = false;
+                            if (list.length < this.page_size) {
+                                this.loading = true;
+                            } else {
+                                this.loading = false;
+                            }
+
+                            for (let i = 0; i < list.length; i++) {
+                                this.hotelList.push(list[i]);
+                            }
+                        }
+                    }
+                }).catch(e => {
+                    Toast(info.infoApiError);
+                })
+            },
+            lookHotelDetail(item) {
+                if (item.stock === 1) {
+                    tool.$router.push(this, {
+                        name: 'HotelDetail',
+                        query: {
+                            'hotel_id': item.hotel_id,
+                            'start_date': this.inDate,
+                            'end_date': this.outDate,
+                        }
+                    })
+                }
+            },
+            styleBottom() {
+                let style = {};
+                if (this.hotelList.length > 6) {
+
+                } else {
+                    style = {opacity: 0}
+                }
+                return style;
+            }
+        }
+    }
+</script>
+<style type="text/scss" lang="scss">
+    @import "./../../style/mixin";
+
+    body {
+        background: $colorBackgroundHotel !important;
+    }
+
+    .HotelList {
+        .mint-popup-bottom {
+            background-color: rgba(0, 0, 0, 0);
+            width: 3.76rem;
+        }
+    }
+
+    .date-layer {
+        z-index: 9999 !important;
+    }
+</style>
+<style scoped type="text/scss" lang="scss">
+    @import "./../../style/mixin";
+
+    .search {
+        padding: 0.1rem 0.12rem;
+        width: 3.75rem;
+        border-bottom: 1px solid $colorGray3;
+        background-color: $colorWhite;
+    }
+
+    .search-box {
+        border: 1px solid $colorBorder2;
+        background-color: $colorWhite;
+        border-radius: 0.04rem;
+        padding: 0.04rem 0.05rem;
+    }
+
+    .search-date {
+        margin-right: 0.11rem;
+    }
+
+    .search-content {
+        border-left: 1px solid $colorBorder2;
+        padding-left: 0.11rem;
+        padding-top: 0.04rem;
+        padding-right: 0.04rem;
+    }
+
+    .search-icon {
+        width: 0.12rem;
+        height: 0.12rem;
+        background-image: url('./../../../static/image/home/search-icon.png');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin-right: 0.08rem;
+    }
+
+    .line {
+        width: 3.75rem;
+        height: 0.08rem;
+        background-color: $colorBorder2;
+    }
+
+    .hotel, .hotel-over {
+        height: 1rem;
+        width: 3.75rem;
+        background-color: $colorWhite;
+    }
+
+    .hotel-over {
+        background-color: $colorBackgroundHotel;
+    }
+
+    .hotel-name {
+        font-size: 0.14rem;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+    }
+
+    .hotel-img {
+        padding-left: 0.05rem;
+        padding-top: 0.05rem;
+        padding-bottom: 0.05rem;
+        height: 0.9rem;
+        width: 0.9rem;
+        margin-right: 0.1rem;
+    }
+
+    .hotel-contents {
+        border-bottom: 1px solid $colorBorder2;
+        padding-top: 0.1rem;
+        padding-bottom: 0.11rem;
+        width: 2.7rem;
+    }
+
+    .star {
+        font-size: 0.1rem;
+        color: $colorGray2;
+    }
+
+    .mark {
+        border: 1px solid $colorOrange;
+        color: $colorOrange;
+        margin-right: 0.05rem;
+        padding-left: 0.03rem;
+        padding-right: 0.03rem;
+    }
+
+    .mark-null {
+        height: 0.17rem;
+    }
+
+    .hotel-other {
+        margin-top: 0.04rem;
+        margin-bottom: 0.04rem;
+    }
+
+    .area {
+        padding-top: 0.08rem;
+    }
+
+    .price {
+        text-align: right;
+        padding-right: 0.12rem;
+        padding-bottom: 0.03rem;
+    }
+
+    .goods_contents_font1 {
+        font-size: 0.11rem;
+        line-height: 1.64;
+        text-align: left;
+        color: $colorBlack;
+    }
+
+    .goods_contents_font2 {
+        font-size: 0.19rem;
+        font-weight: 500;
+        line-height: 1;
+        text-align: left;
+        color: #f45a36;
+    }
+
+    .goods_contents_font3 {
+        font-size: 0.12rem;
+        font-weight: normal;
+        line-height: 1.5;
+        color: #f45a36;
+    }
+
+    .hotel-over .hotel-content {
+        background-color: $colorBackgroundHotel;
+    }
+
+    .over-color {
+        color: $colorGray2 !important;
+    }
+
+    .bottom-sort-fliter {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 0.45rem;
+        z-index: 2500;
+        background-color: $colorBackgroundHotel;
+        border-top: 1px solid $colorBorder2;
+    }
+
+    .sale_out {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+
+    .sale_out img {
+        width: 0.47rem;
+        height: 0.42rem;
+    }
+</style>

src/pages/hotel/HotelMap.vue

@@ -0,0 +1,293 @@
+<template>
+    <div class="HotelMap">
+        <baidu-map class="bm-view" :style="styleBMap()" :dragging="false" :center="center" :zoom="zoom" data-aos="slide-up">
+            <bm-marker :position="center"
+                       :icon="{url: 'static/image/hotel/ht_bmap_location.png', size: {width: 25, height: 40}}"></bm-marker>
+            <bm-view style="width: 100%; height:100%; flex: 1"></bm-view>
+            <bm-overlay
+                pane="labelPane"
+                class="sample"
+                @draw="draw">
+                <div class="infoWindow ub ub-f1">
+                    <div class="ub ub-f3 ub-ver ub-pc" style="padding:0.07rem;width:1%;">
+                        <div class="hotel-name ub">{{hotel_name}}</div>
+                        <div class="hotel-address ub">{{hotel_address}}</div>
+                    </div>
+                    <div @click="clickBook()" class="book ub ub-f1 ub-ac ub-pc" style="width: 1%;">预订</div>
+                </div>
+            </bm-overlay>
+        </baidu-map>
+
+        <i class="top-left" @click="goBack()" style="z-index: 10;top:0.1rem;"></i>
+
+        <div class="bottom-left">
+            <i class="add" @click="addMapLevel()">+</i>
+            <i class="dec" @click="decMapLevel()">-</i>
+        </div>
+
+        <i class="top-right" @click="navigation()">
+            <i class="icon" style="background-image: url('static/image/hotel/ht_bmap_nav.png');"></i>
+            <i class="text">导航</i>
+        </i>
+
+    </div>
+</template>
+
+<script>
+    import tool from './../../config/mUtil/tool'
+    import {Toast, Indicator} from 'mint-ui'
+
+    export default {
+        name: "HotelMap",
+        data() {
+            return {
+//                center: {"lng": '121.32149503743', "lat": '31.203148018668'},
+                center:{lng:this.$route.query.lng,lat:this.$route.query.lat},
+                zoom: 19,
+                active: false,
+                hotel_name: '',
+                hotel_address: '',
+                urlParam: null,
+                curPoint: {
+                    lng: 0,
+                    lat: 0
+                }
+            }
+        },
+        mounted() {
+            this.urlParam = this.$route.query;
+            this.hotel_name = this.urlParam.hotel_name;
+            this.hotel_address = this.urlParam.hotel_address;
+            let lng = this.urlParam.lng;
+            let lat = this.urlParam.lat;
+        },
+        methods: {
+            styleBMap() {
+                return {
+                    height: document.documentElement.clientHeight + 'px'
+                }
+            },
+            infoWH() {
+                return {
+                    width: document.documentElement.clientWidth * 0.6,
+                    height: 60
+                }
+            },
+            draw(item) {
+                let el = item.el;
+                let BMap = item.BMap;
+                let map = item.map;
+                const pixel = map.pointToOverlayPixel(new BMap.Point(this.center.lng, this.center.lat));
+                el.style.position = 'absolute';
+                el.style.left = pixel.x - 120 + 'px';
+                el.style.top = pixel.y - 87 + 'px';
+                el.style.width = '240px';
+                el.style.height = '60px';
+            },
+            clickBook() {
+                tool.log('click-book');
+                tool.$router.replace(this, {
+                    name: 'HotelDetail',
+                    query: {
+                        hotel_id: this.urlParam.hotel_id,
+                        start_date:this.urlParam.start_date,
+                        end_date:this.urlParam.end_date
+                    }
+                })
+            },
+            goBack() {
+                this.clickBook();
+            },
+            addMapLevel() {
+                this.zoom = this.zoom >= 19 ? 19 : ++this.zoom;
+            },
+            decMapLevel() {
+                this.zoom = this.zoom <= 9 ? 9 : --this.zoom;
+            },
+            navigation() {
+                let tolng = this.urlParam.lng;
+                let tolat = this.urlParam.lat;
+                Indicator.open({
+                    text: '定位中',
+                    spinnerType: 'fading-circle'
+                });
+                let current_loc = new BMap.Geolocation();
+                let geoc = new BMap.Geocoder();
+                let point = null;
+                let _this = this;
+                current_loc.getCurrentPosition(function (r) {
+                    if (this.getStatus() === BMAP_STATUS_SUCCESS) {
+                        Indicator.close();
+                        let longitude = r.longitude;
+                        let latitude = r.latitude;
+                        point = {
+                            lng: longitude,
+                            lat: latitude
+                        };
+                        geoc.getLocation(r.point, function (rs) {
+                            let addComp = rs.addressComponents;
+                            let address = rs.address;
+                            tool.log(rs);
+                            let opts = {
+                                mode: BMAP_MODE_DRIVING,
+                                region: "中国"
+                            };
+                            let ss = new BMap.RouteSearch();
+                            let start = {
+                                latlng: new BMap.Point(point.lng, point.lat),
+                                name: address
+                            };
+                            let end = {
+                                latlng: new BMap.Point(tolng, tolat),
+                                name: _this.hotel_address
+                            };
+                            ss.routeCall(start, end, opts);
+//                                let url = `http://api.map.baidu.com/direction?origin=latlng:${point.lat},${point.lng}|name:我的位置&destination=${tolat}|name:${_this.hotel_address},${tolng}&mode=driving&region=${city}&output=html&src=yourCompanyName|yourAppName/tab=line`;
+//                                let url = `https://map.baidu.com/mobile/webapp/place/linesearch/foo=bar/end=word=${_this.hotel_address}&point=${tolng},${tolat}&routeType=2`;
+                            //https://map.baidu.com/mobile/webapp/index/index/qt=cur&wd=%E4%B8%8A%E6%B5%B7%E5%B8%82&from=maponline&tn=m01&ie=utf-8=utf-8/tab=line&routeType=2
+//                                alert(url);
+//                                window.location.href = url;
+                        });
+
+                    } else {
+                        Toast('定位失败');
+                        Indicator.close();
+                    }
+                }, {enableHighAccuracy: true});
+            }
+        }
+    }
+</script>
+<style type="text/scss" lang="scss">
+    .BMap_Marker {
+        img {
+            transform: scale(0.8);
+        }
+    }
+
+</style>
+<style scoped type="text/scss" lang="scss">
+    @import "./../../style/mixin";
+
+    .bm-view {
+        width: 100%;
+    }
+
+    .infoWindow {
+        background: $colorWhite;
+        height: 100%;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        &:before {
+            width: 0;
+            height: 0;
+            border-top: 8px solid $colorWhite;
+            border-right: 8px solid transparent;
+            border-left: 8px solid transparent;
+            display: inline-block;
+            content: "";
+            position: absolute;
+            bottom: -8px;
+            left: 50%;
+            -webkit-transform: translateX(-50%);
+        }
+        .hotel-name {
+
+        }
+        .hotel-address {
+            color: $colorGray;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+        }
+        .book {
+            background: $colorMain;
+            color: $colorWhite;
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+        }
+    }
+
+    .top-left {
+        width: 0.36rem;
+        height: 0.36rem;
+        background-color: rgba(0, 0, 0, .7);
+        border-radius: 3px;
+        position: absolute;
+        left: 0.1rem;
+        &:before {
+            width: 0.1rem;
+            height: 0.1rem;
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            margin: -0.06rem 0 0 -0.03rem;
+            border-right: $colorWhite 2px solid;
+            border-bottom: $colorWhite 2px solid;
+            -webkit-transform: rotate(135deg);
+            -moz-transform: rotate(135deg);
+            -ms-transform: rotate(135deg);
+            transform: rotate(135deg);
+        }
+    }
+
+    .bottom-left {
+        .add {
+            width: 0.36rem;
+            height: 0.36rem;
+            position: absolute;
+            left: 0.1rem;
+            background-color: rgba(0, 0, 0, .7);
+            color: $colorWhite;
+            text-align: center;
+            font-size: 0.35rem;
+            bottom: 0.77rem;
+            line-height: 0.3rem;
+            border-radius: 0.03rem 0.03rem 0 0;
+        }
+        .dec {
+            width: 0.36rem;
+            height: 0.36rem;
+            position: absolute;
+            left: 0.1rem;
+            background-color: rgba(0, 0, 0, .7);
+            color: $colorWhite;
+            text-align: center;
+            font-size: 0.35rem;
+            bottom: 0.39rem;
+            line-height: 0.3rem;
+            border-radius: 0.03rem 0.03rem 0 0;
+        }
+    }
+
+    .top-right {
+        min-width: 0.5rem;
+        background-color: rgba(0, 0, 0, .7);
+        border-radius: 5px;
+        position: absolute;
+        right: 0.05rem;
+        top: 0.1rem;
+        height: 0.37rem;
+        line-height: 0.38rem;
+        padding: 0 0.06rem;
+        .text {
+            color: $colorWhite;
+            font-size: 0.13rem;
+        }
+        .icon {
+            display: inline-block;
+            /*background-image: url(https://pages.ctrip.com/hotel_h5/res/img/hotel-icon-T20161213.png);*/
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            vertical-align: middle;
+            text-indent: -9999px;
+            width: 0.24rem;
+            height: 0.25rem;
+            transform: scale(0.5);
+        }
+    }
+
+
+</style>

src/pages/hotel/HotelReservation.vue

@@ -0,0 +1,456 @@
+<template>
+    <div class="HotelReservation">
+        <div class="content">
+            <div class="HotelTopImage">
+                <img style=" width: 100%;height: 100%;object-fit:cover;" src="http://img.zhizhuchuxing.cn/zzwx/HomeRecom/20180129-01.jpg" alt="">
+            </div>
+
+            <div class="input-div" style=" padding:0 0.22rem 0 0.22rem;">
+                <div class="hotel-address ub" >
+                    <div class="address-left ub ub-f1 ub-ver" style="height: 100%;width: 0.365rem">
+                        <div class="address-area ub" style="height:100%;" @click="chooseArea">
+                            <!--<input placeholder="请输入地址" style="width: 1.5rem;height: 100%;font-size: 0.18rem;font-weight: normal" type="text">-->
+                           <div style="width: 1.8rem;height: 100%;font-size: 0.18rem;font-weight: normal" >{{area_name}}</div>
+                        </div>
+                    </div>
+                    <div @click="getPosition" class="map ub ub-f1 ub-pe ub-ac">
+                        <img style="width:0.07rem;height:0.13rem;margin-left:0.1rem; margin-right:0.2rem;padding-top:0.01rem;"
+                             src="./../../../static/image/hotel/ht_arrow_right.png" alt="">
+                        <div class="map-text">
+                            <div style="width: 0.14rem;height: 0.16rem;margin: 0 auto">
+                                <img style="width: 0.14rem;height: 0.16rem;" src="./../../../static/image/hotel/location.png" alt="">
+                            </div>
+                            <div class="map-text" style="margin-top: 0">当前位置</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="input-div" style=" padding:0 0.22rem 0 0.22rem;">
+                <div class="inout-time">
+                    <div class="total-night" style="height: 100%;float: right">共{{nights}}晚</div>
+                    <div class="in-time" @click="chooseDate">
+                        <div class="tag-1 inout">
+                            入住
+                        </div>
+                        <div class="tag-2 inout-date" style="margin-top:0.01rem;">
+                            <!--12月13号-->
+                            {{inDateMonth}}月{{inDateDay}}号
+                        </div>
+                        <div class="week-day" style="float: left;">周{{inDateWeekDay}}</div>
+                    </div>
+
+
+                    <div class="out-time"  @click="chooseDate">
+                        <div class="tag-1 inout">
+                            离店
+                        </div>
+                        <div class=" tag-2 inout-date" style="margin-top:0.01rem;">
+                            <!--12月15号-->
+                            {{outDateMonth}}月{{outDateDay}}号
+                        </div>
+                        <div class="week-day" style="float: left;">周{{outDateWeekDay}}</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="input-div" style=" padding:0 0.22rem 0 0.22rem;">
+                <div class="hotel-detail ub" >
+                    <div class="address-left ub ub-f1 ub-ver" style="height: 100%;width: 0.365rem">
+                        <div class="address-area ub" style="height:100%;">
+                            <input v-model="more" style="width: 3rem;height: 100%;font-size: 0.16rem;font-weight: normal" type="text" placeholder="名称/商圈/品牌">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="input-div" style=" padding:0.5rem 0.22rem 0.5rem 0.22rem;">
+                <div @click="goHotelList" class="search">
+                    查找酒店
+                </div>
+            </div>
+        </div>
+
+        <mt-popup v-model="popVisible" position="bottom" style="background:rgba(0,0,0,0)">
+            <hotel-calendar ref="htCalendar" :checkInDate="inDate" :checkOutDate="outDate" @clickDate="callbackClickDate"></hotel-calendar>
+        </mt-popup>
+        <baidu-map class="bm-view" style="display:none;" @ready="BMready">
+        </baidu-map>
+    </div>
+</template>
+
+<script>
+
+    import {getProdArr,getHotelArea} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import date from '../../config/mUtil/dateUtil'
+    import info from '../../config/info'
+    import { Toast, Swipe, SwipeItem,Indicator } from 'mint-ui';
+    import HotelCalendar from './view/detailView/HotelCalendar'
+
+    let sinDate=tool.getStorage('hotel_in_date');
+    let soutDate=tool.getStorage('hotel_out_date');
+    if(sinDate<date.getDateTime(0)) {
+        sinDate = date.getDateTime(0);
+        soutDate = date.after(date.getDateTime(0));
+    }
+
+    export default {
+        name: "hotel_reservation",
+        components: {
+            HotelCalendar,
+        },
+        data(){
+            return {
+                toastObj:null,
+                popVisible:false,
+                inDate:sinDate || date.getDateTime(0),
+                outDate:soutDate || date.after(date.getDateTime(0)),
+                inDateYear:'',
+                inDateMonth:'',
+                inDateDay:'',
+                outDateYear:'',
+                outDateMonth:'',
+                outDateDay:'',
+                nights:0,
+                inDateWeekDay:'',
+                outDateWeekDay:'',
+                more:'',
+                area_id:this.$route.query.city_id?this.$route.query.city_id:791,
+                area_name:this.$route.query.city_name?this.$route.query.city_name:'上海',
+                local_area:this.$route.query.local_area?this.$route.query.local_area:'上海',
+                cities:[]
+
+            }
+        },
+        created(){
+            getHotelArea().then(res=>{
+               if(res.flag===false){
+                   Toast(res.msg);
+               } else{
+                   this.cities = res.data.cities;
+               }
+            }).catch(e=>{
+                Toast(info.infoApiError);
+            });
+        },
+        mounted(){
+            this.baseDada();
+
+        },
+        watch: {
+            popVisible(cur, old) {
+                let body = document.querySelectorAll('body')[0];
+                body.style.overflow = cur === false ? '' : 'hidden';
+                if (cur === false) {
+                    this.toastObj.close();
+                }
+
+            }
+        },
+        beforeRouteLeave(to,from,next){
+            if(this.toastObj) this.toastObj.close();
+            next(vm=>{});
+        },
+        methods:{
+            BMready(a){
+                let city_name = this.$route.query.city_name;
+                if(!city_name) {
+                    this.getPosition();
+                }
+            },
+            baseDada(){
+                // 判断是否有缓存
+//                if(tool.getStorage('hotel_in_date')&&tool.getStorage('hotel_in_date')>=this.inDate){
+//                    this.inDate = tool.getStorage('hotel_in_date');
+//                    this.outDate = tool.getStorage('hotel_out_date');
+//                    debugger;
+//                }
+                this.dateFormat();
+            },
+            dateFormat(){
+                this.inDateYear = date.getYearByDate(this.inDate);
+                this.inDateMonth = date.getMonthByDate(this.inDate);
+                this.inDateDay = date.getDayByDate(this.inDate);
+                this.outDateYear = date.getYearByDate(this.outDate);
+                this.outDateMonth = date.getMonthByDate(this.outDate);
+                this.outDateDay = date.getDayByDate(this.outDate);
+                // this.nights = date.getDayMinus(this.inDate,this.outDate);
+                this.nights = Math.floor((new Date(this.outDate) - new Date(this.inDate)) / (1000 * 60 * 60 * 24));
+                this.inDateWeekDay = this.weekDayFormat(date.getWeekDay(this.inDate));
+                this.outDateWeekDay = this.weekDayFormat(date.getWeekDay(this.outDate));
+            },
+            weekDayFormat(weekDay){
+                if(weekDay==1){
+                    return '一';
+                }else if(weekDay ==2){
+                    return '二';
+                }else if(weekDay ==3){
+                    return '三';
+                }else if(weekDay ==4){
+                    return '四';
+                }else if(weekDay ==5){
+                    return '五';
+                }else if(weekDay ==6){
+                    return '六';
+                }else if(weekDay ==0){
+                    return '日';
+                }else{
+                    return false;
+                }
+            },
+            chooseArea(){
+                tool.$router.push(this,{
+                    name:'chooseCity',
+                    query:{
+                        cityName:this.area_name,
+                        localArea:this.local_area
+                    }
+                })
+            },
+            chooseDate(){
+                this.popVisible = true;
+                this.$refs.htCalendar.reload();
+                this.toastObj = Toast({
+                    message: "请选择入住日期",
+                    duration: -1,
+                    position: 'bottom'
+                })
+            },
+            callbackClickDate(item){
+                tool.log('选择日期', item);
+                if (item.checkInDate && item.checkOutDate === "") {
+                    this.toastObj.close();
+                    tool.delay(()=>{
+                        if(this.popVisible){
+                            this.toastObj=null;
+                            this.toastObj = Toast({
+                                message: "请选择离店日期",
+                                duration: -1,
+                                position: 'bottom'
+                            })
+                        }
+                    },50);
+                }
+                if (item.checkInDate && item.checkOutDate) {
+                    // 设置缓存
+                    tool.setStorage('hotel_in_date',item.checkInDate);
+                    tool.setStorage('hotel_out_date',item.checkOutDate);
+                    tool.delay(()=>{
+                        this.popVisible = false;
+                        this.toastObj.close();
+                        this.inDate = item.checkInDate;
+                        this.outDate = item.checkOutDate;
+                        this.dateFormat();
+                    },300);
+
+
+                }
+            },
+            getPosition() {
+                Indicator.open({
+                    text: '定位中',
+                    spinnerType: 'fading-circle'
+                });
+                let current_loc = new BMap.Geolocation();
+                let _this = this;
+                current_loc.getCurrentPosition(function(r){
+                    if (this.getStatus() === BMAP_STATUS_SUCCESS) {
+                        tool.log(r);
+                        let city = r.address.city;
+                        city = city.replace('市','');
+                        let index = _this.cities.findObjIndex('area_name',city);
+                        if(index!==-1){
+                            let obj = _this.cities[index];
+                            _this.area_id = obj.id;
+                            _this.area_name = obj.area_name;
+                            _this.local_area = tool.clone(obj.area_name);
+                        }else{
+                            _this.area_id = -1;
+                        }
+
+                        Indicator.close();
+                    } else {
+                        Toast('定位失败，请手动选择当前城市');
+                        Indicator.close();
+                    }
+                }, {enableHighAccuracy: true});
+            },
+            goHotelList(){
+                if(this.area_id === -1){
+                    Toast('当前位置周边无酒店');
+                    return false;
+                }
+                tool.log('start_date--'+this.inDate+'end_date-----'+this.outDate+'more---'+this.more);
+                tool.$router.push(this,{
+                    name:'HotelList',
+                    query:{
+                        start_date:this.inDate,
+                        end_date:this.outDate,
+                        area_id:this.area_id,
+                        more:this.more
+
+                    }
+                })
+            }
+
+        }
+    }
+</script>
+<style scoped lang="scss" type="text/scss">
+    .HotelReservation{
+        .mint-popup{
+            position:fixed!important;
+        }
+    }
+
+</style>
+<style scoped lang="scss" type="text/scss">
+    @import "./../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+    @import "../../../static/css/ui-box.css";
+    @import "../../../static/css/ui-color.css";
+
+    .HotelTopImage{
+        height: 1.6rem;
+        width: 100%;
+    }
+    .blue-text {
+        color: $colorMain;
+    }
+
+    .input-div{
+        background: $colorWhite;
+    }
+    .hotel-address {
+        background: $colorWhite;
+        border-bottom: 1px solid $colorBorder2;
+        height: 0.545rem;
+        padding:0.19rem 0 0.1rem 0;
+    }
+
+    .hotel-detail{
+        background: $colorWhite;
+        border-bottom: 1px solid $colorBorder2;
+        height: 0.545rem;
+        padding:0.19rem 0 0.1rem 0;
+    }
+
+    .inout{
+        font-size: 0.12rem;
+        font-weight: normal;
+        font-style: normal;
+        font-stretch: normal;
+        color: $colorGray;
+    }
+    .inout-time{
+        background: $colorWhite;
+        border-bottom: 1px solid $colorBorder2;
+        height: 1.09rem;
+    }
+    .inout-date{
+        float: left;
+        width: 0.85rem;
+        height: 0.25rem;
+        font-size: 0.18rem;
+        font-weight: normal;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: normal;
+        letter-spacing: normal;
+        text-align: left;
+    }
+    .week-day{
+        margin-top: 0.07rem;
+        font-size: 0.12rem;
+        font-weight: normal;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: normal;
+        letter-spacing: normal;
+        text-align: left;
+        color: $colorGray;
+
+    }
+    .in-time{
+        width: 2.54rem;
+        border-bottom: 1px solid $colorBorder2;
+        height: 0.54rem;
+        padding:0.1rem 0 0.1rem 0;
+    }
+    .out-time{
+        width: 2.54rem;
+        height: 0.54rem;
+        padding:0.1rem 0 0.1rem 0;
+    }
+    .total-night{
+        height: 1.08rem;
+        line-height: 1.08rem;
+        text-align: center;
+        font-size: 0.16rem;
+        font-weight: normal;
+        font-style: normal;
+        font-stretch: normal;
+        letter-spacing: normal;
+        margin-right: 0.15rem;
+
+    }
+    .address-left {
+        .address-desc {
+            color: $colorGray;
+            margin-top: 0.02rem;
+        }
+    }
+
+    .map {
+        margin-left: 1rem;
+        width: 0.1rem;
+        font-size: 0.14rem;
+        line-height: 1;
+        .map-text {
+            color: $colorMain;
+        }
+    }
+    .search{
+        height: 0.4rem;
+        border-radius: 0.04rem;
+        background-color: $colorMain;
+        text-align:center;
+        line-height: 0.4rem;
+        font-size: 0.18rem;
+        font-weight: normal;
+        color: $colorWhite;
+    }
+
+    .hotel-desc {
+        background: $colorWhite;
+        border-bottom: 1px solid $colorBorder2;
+        .lijian {
+            color: $colorOrange;
+            border: 1px solid $colorOrange;
+            padding: 0 10px;
+            font-size: 10px;
+            line-height: 1;
+            -webkit-border-radius: 1px;
+            -moz-border-radius: 1px;
+            border-radius: 1px;
+        }
+        .tag2-text {
+            color: $colorGray;
+            font-size: 10px;
+        }
+    }
+
+    .hotel-calander {
+        background: $colorWhite;
+        position: sticky;
+        position: -webkit-sticky;
+        top:0;
+        border-bottom:1px solid $colorBorder2;
+        z-index:100;
+        .total-day {
+            color: $colorGray2;
+        }
+    }
+
+</style>

src/pages/hotel/view/detailView/HotelCalendar.vue

@@ -0,0 +1,503 @@
+<template>
+    <div class="HotelCalendar">
+        <div class="ub ub-ac ub-pc title">选择入住/离店日期</div>
+        <div class="ub week">
+            <div class="ub ub-ac ub-pc week-day" :style="getWeekDayStyle()">日</div>
+            <div class="ub ub-ac ub-pc week-day" :style="getWeekDayStyle()">一</div>
+            <div class="ub ub-ac ub-pc week-day" :style="getWeekDayStyle()">二</div>
+            <div class="ub ub-ac ub-pc week-day" :style="getWeekDayStyle()">三</div>
+            <div class="ub ub-ac ub-pc week-day" :style="getWeekDayStyle()">四</div>
+            <div class="ub ub-ac ub-pc week-day" :style="getWeekDayStyle()">五</div>
+            <div class="ub ub-ac ub-pc week-day" :style="getWeekDayStyle()">六</div>
+        </div>
+        <div class="ub ub-ver calendar">
+            <div class="ub ub-f1 ub-ver amonth" v-for="(dict,i) in dateArr" :key="i">
+                <div class="ub ub-f1 ub-ac ub-pc top-year-month">{{dict.year+'年'+dict.month+'月'}}</div>
+                <div class="days">
+                    <div v-for="(item,index) in dict.dateList" :key="index" :class="getAdayClass(item)"
+                         class="ub ub-ver ub-ac ub-pc aday" @click="clickAday(item,index,i)"
+                         :style="{width:getDayWidth()}">
+                        <div class="ub aday-center-num">{{item.day}}</div>
+                        <div v-if="item.active" class="ub aday-bottom-info">{{item.corn}}</div>
+                        <div v-else class="ub aday-bottom-info">{{item.dayInfo}}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import tool from '../../../../config/mUtil/tool'
+    import dateUtil from '../../../../config/mUtil/dateUtil'
+    import Calendar from '../../../../config/mUtil/Calendar'
+
+    const status = {
+        active: 'active',
+        belong: 'belong',
+        holiday: 'holiday',
+        last: 'last'
+    };
+
+    export default {
+        name: "HotelCalendar",
+        props:{
+            checkInDate:{
+                type:String,
+                default:dateUtil.getDateTime(0)
+            },
+            checkOutDate:{
+                type:String,
+                default:dateUtil.after(dateUtil.getDateTime(0))
+            }
+        },
+        data() {
+            return {
+                dateArr: [],
+                dateArrTemp: [],
+                DcheckInDate: this.checkInDate,
+                DcheckOutDate: this.checkOutDate,
+                checkInDesc: "入住",
+                checkOutDesc: "离店"
+            }
+        },
+        mounted() {
+            this.load();
+
+        },
+        methods: {
+            reload(){
+                this.dateArr = [];
+                this.dateArrTemp = [];
+                this.DcheckInDate = this.checkInDate;
+                this.DcheckOutDate = this.checkOutDate;
+                this.load();
+            },
+            load() {
+
+                let date1 = dateUtil.getDateTime(0);
+                let t_date = '';
+                for (let i = 0; i < 3; i++) {
+                    if(i===0)t_date = date1;
+                    else t_date = dateUtil.changeMonth(t_date,1);
+                    let t_arr = this.getDateArr(t_date);
+                    this.dateArr.push({
+                        year: dateUtil.getYearByDate(t_date),
+                        month: dateUtil.getMonthByDate(t_date),
+                        date: t_date,
+                        dateList: t_arr
+                    });
+                    this.dateArrTemp.push(...t_arr);
+                }
+            },
+            getDayWidth() {
+                return 375/7/100+'rem';
+            },
+            getWeekDayStyle() {
+                return {
+                    width: this.getDayWidth()
+                }
+            },
+            clickAday(item, index, parentIndex) {
+                if (item.date === "" || item.last) return;
+                if (this.DcheckInDate && Date.dayMinus(new Date(this.DcheckInDate), new Date(item.date)) < 0) {
+                    this.dateArrTemp.forEach(v => {
+                        v.active = false;
+                        v.belong = false;
+                        this.DcheckInDate = '';
+                        this.DcheckOutDate = '';
+                    });
+                }
+                if (item.date === this.DcheckInDate || item.date === this.DcheckOutDate) {
+                    this.dateArrTemp.forEach(v => {
+                        v.active = false;
+                        v.belong = false;
+                        this.DcheckInDate = '';
+                        this.DcheckOutDate = '';
+                    });
+                }
+
+
+                item.active = true;
+
+                let count = 0;
+                this.dateArrTemp.forEach(v => {
+                    if (v.active) count++;
+                });
+                if (count === 3) {
+                    this.dateArrTemp.forEach(v => {
+                        v.active = false;
+                        v.belong = false;
+                        this.DcheckInDate = '';
+                        this.DcheckOutDate = '';
+                    });
+                    item.active = true;
+                    count = 1;
+                }
+                if (count === 1 || count === 2) {
+
+                    if (count === 1) {
+                        this.DcheckInDate = item.date;
+                        item.corn = this.checkInDesc;
+                    }
+                    if (count === 2) {
+                        this.DcheckOutDate = item.date;
+                        item.corn = this.checkOutDesc;
+                        for (let i = 0; i < this.dateArrTemp.length; i++) {
+                            let d_date = this.dateArrTemp[i].date;
+                            if (d_date === "") continue;
+                            let ds1 = d_date.replaceAll('-', '') - 0;
+                            let ds2 = this.DcheckInDate.replaceAll('-', '') - 0;
+                            let ds3 = this.DcheckOutDate.replaceAll('-', '') - 0;
+                            if (ds1 > ds2 && ds1 < ds3) {
+                                this.dateArrTemp[i].belong = true;
+                            } else {
+                                this.dateArrTemp[i].belong = false;
+                            }
+                        }
+                    }
+                    let clickItem = {
+                        checkInDate:this.DcheckInDate,
+                        checkOutDate:this.DcheckOutDate
+                    };
+                    this.$emit('clickDate',clickItem)
+                }
+
+            },
+            //得到一个月的日期
+            getDateArr(curDate) {
+                let ymdInfo = dateUtil.getYMDByDate(curDate);
+                let curY = ymdInfo.year - 0;
+                let curM = ymdInfo.month - 0;
+                let curFirstDate = new Date(curY, curM - 1).dateFormat('yyyy-MM-dd');
+                let curDays = dateUtil.getDays(curY, curM);
+                let weekIndex = dateUtil.getWeekDay(curFirstDate);
+                let monthIndex = curM - 1;
+
+
+                let dates = [];
+                //向当月第一天前追加空
+                for (let i = 0; i < weekIndex; i++) {
+                    let obj = {
+                        date: "",
+                        day: '',
+                        dayInfo: "",
+                        corn: "",
+                        last: true,
+                        holiday: false,
+                        belong: false,
+                        active: false,
+                        xiu: false,
+                        ban: false
+                    };
+                    dates.push(obj);
+                }
+                for (let i = 0; i < 60; i++) {
+                    if (i === curDays) break;
+                    let t_date = new Date(curY, monthIndex, (i + 1)).dateFormat('yyyy-MM-dd');
+                    let day = dateUtil.getDayByDate(t_date);
+                    let day_count = Date.dayMinus(new Date(t_date), new Date());
+                    let last = true;
+                    if (day_count <= 0) {
+                        last = false;
+                    }
+                    let dayObj = this.getDayInfo(t_date);
+                    let dayInfo = dayObj.info;
+                    if (day_count === 0) dayInfo = '今天';
+                    if (day_count === -1) dayInfo = '明天';
+                    if (day_count === -2) dayInfo = '后天';
+                    let obj = {
+                        date: t_date,
+                        day: Math.floor(day),
+                        dayInfo: dayInfo,
+                        corn: "",
+                        last: last,
+                        holiday: dayObj.holiday,
+                        belong: dayObj.belong,
+                        active: dayObj.active,
+                        xiu: dayObj.xiu,
+                        ban: dayObj.ban
+                    };
+                    //判断周六，周日
+                    let everyDayIndex = dateUtil.getWeekDay(obj.date);
+                    if (everyDayIndex === 0 || everyDayIndex === 6) {
+                        obj.holiday = true;
+                        obj.xiu = true;
+                        if (obj.ban) {
+                            obj.holiday = false;
+                            obj.xiu = false;
+                            obj.ban = true;
+                        }
+                    }
+                    //判断除夕
+                    if (obj.dayInfo === '春节') {
+                        dates[dates.length - 1].dayInfo = '除夕';
+                        dates[dates.length - 1].holiday = true;
+                        dates[dates.length - 1].xiu = true;
+                    }
+                    //默认选中入住离店日期
+                    if(obj.date === this.DcheckInDate ){
+                        obj.active = true;
+                        obj.corn = this.checkInDesc;
+                    }
+                    if(obj.date === this.DcheckOutDate){
+                        obj.active = true;
+                        obj.corn = this.checkOutDesc;
+                    }
+                    //设置区间的日期
+                    let ds1 = obj.date.replaceAll('-', '') - 0;
+                    let ds2 = this.DcheckInDate.replaceAll('-', '') - 0;
+                    let ds3 = this.DcheckOutDate.replaceAll('-', '') - 0;
+                    if (ds1 > ds2 && ds1 < ds3) {
+                        obj.belong = true;
+                    } else {
+                        obj.belong = false;
+                    }
+                    dates.push(obj);
+                }
+                return dates;
+            },
+            getDayInfo(datestr) {
+
+                //c开头的是公历各属性值 l开头的自然就是农历咯 gz开头的就是天干地支纪年的数据啦~
+                let y = dateUtil.getYearByDate(datestr);
+                let m = dateUtil.getMonthByDate(datestr);
+                let d = dateUtil.getDayByDate(datestr);
+                let md = m + '-' + d;
+
+                let dd_obj = {
+                    info: '',
+                    holiday: false,
+                    belong: false,
+                    active: false,
+                    xiu: false,
+                    ban: false
+                };
+
+                //得到日期详细信息 包含农历
+                let ClDayInfo = Calendar.solar2lunar(y - 0, m - 0, d - 0);
+                let lm = ClDayInfo.lMonth;
+                lm = lm > 9 ? lm : '0' + lm;
+                let ld = ClDayInfo.lDay;
+                ld = ld > 9 ? ld : '0' + ld;
+
+                let lmd = lm + '-' + ld;
+                let {holidays, xiuday, banday} = this.getHoliday();
+                let lday = holidays.lday;
+                let Cday = holidays.Cday;
+                if (Cday.hasOwnProperty(md)) {
+                    dd_obj.info = Cday[md].info;
+                    dd_obj.xiu = Cday[md].xiu;
+                    dd_obj.holiday = true;
+                }
+                if (lday.hasOwnProperty(lmd)) {
+                    dd_obj.info = lday[lmd].info;
+                    dd_obj.xiu = lday[lmd].xiu;
+                    dd_obj.holiday = true;
+                }
+                let curYearObj = xiuday.hasOwnProperty(y) && xiuday[y];
+                if (curYearObj.hasOwnProperty(md)) {
+                    dd_obj.info = curYearObj[md];
+                    dd_obj.holiday = true;
+                    dd_obj.xiu = true;
+                }
+                curYearObj = banday.hasOwnProperty(y) && banday[y];
+                if (curYearObj.hasOwnProperty(md)) {
+                    dd_obj.info = curYearObj[md];
+                    dd_obj.holiday = false;
+                    dd_obj.ban = true;
+                }
+                return dd_obj;
+            },
+            getHoliday() {
+
+                let day1 = {
+                    '01-01': {info: '元旦节', xiu: true},
+                    '02-14': {info: '情人节', xiu: false},
+                    '04-05': {info: '清明节', xiu: true},
+                    '05-01': {info: '劳动节', xiu: true},
+                    '06-01': {info: '儿童节', xiu: false},
+                    '09-10': {info: '教师节', xiu: false},
+                    '10-01': {info: '国庆节', xiu: true},
+                    '12-25': {info: '圣诞节', xiu: false}
+                };
+                let day2 = {
+                    '01-01': {info: '春节', xiu: true},
+                    '05-05': {info: '端午节', xiu: true},
+                    '07-07': {info: '七夕节', xiu: false},
+                    '08-15': {info: '中秋节', xiu: true}
+                };
+                let x_info = '休';
+                let xiuday = {
+                    '2018': {
+                        '02-11': x_info,
+                        '02-17': x_info,
+                        '02-18': x_info,
+                        '02-19': x_info,
+                        '02-20': x_info,
+                        '02-21': x_info,
+                        '04-06': x_info,
+                        '04-07': x_info,
+                        '04-29': x_info,
+                        '04-30': x_info,
+                        '06-16': x_info,
+                        '06-17': x_info,
+                        '06-18': x_info,
+                        '09-22': x_info,
+                        '09-23': x_info,
+                        '10-02': x_info,
+                        '10-03': x_info,
+                        '10-04': x_info,
+                        '10-05': x_info,
+                        '10-06': x_info,
+                        '10-07': x_info
+                    }
+                };
+                let b_info = '班';
+                let banday = {
+                    '2018': {
+                        '02-11': b_info,
+                        '02-24': b_info,
+                        '04-08': b_info,
+                        '04-28': b_info,
+                        '09-29': b_info,
+                        '09-30': b_info
+                    }
+                };
+                let holidays = {
+                    Cday: day1,
+                    lday: day2
+                };
+                return {
+                    holidays, xiuday, banday
+                }
+            },
+            getAdayClass(item) {
+                let className = '';
+                if (item.last) {
+                    className = 'aday-last';
+                }
+                if (item.active) {
+                    className =  'aday-active';
+                    return className;
+                }
+
+                if (item.belong) {
+                    className =  'aday-belong';
+                    if (item.holiday) {
+
+                        if (item.xiu) {
+                            className += ' aday-holiday';
+                        }
+                        if (item.ban) {
+                            className +=  ''
+                        }
+                    }
+                }
+                if (item.holiday && !item.belong) {
+
+                    if (item.xiu) {
+                        if(item.last){
+                            className = 'aday-last';
+                        }else{
+                            className =  'aday-holiday';
+                        }
+                    }
+                    if (item.ban) {
+                        className =  ''
+                    }
+                }
+                return className;
+
+
+
+            }
+
+        }
+    }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+    @import "../../../../style/mixin";
+
+    .HotelCalendar {
+        height: 4.3rem;
+        .title {
+            font-size: 0.14rem;
+            padding: 0.15rem 0 0.14rem 0;
+            border-top-left-radius: 0.1rem;
+            border-top-right-radius: 0.1rem;
+            background-color: $colorWhite;
+        }
+        .week {
+            background-color: $colorBorder2;
+            padding-top: 0.045rem;
+            padding-bottom: 0.04rem;
+            .week-day {
+                &:first-child, &:last-child {
+                    color: $colorMain;
+                }
+            }
+        }
+    }
+
+    .calendar {
+        background-color: $colorWhite;
+        height: 3.56rem;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;
+        .amonth {
+            min-height: 3.38rem;
+        }
+        .top-year-month {
+            padding-top: 0.15rem;
+            padding-bottom: 0.14rem;
+            font-size: 0.14rem;
+            font-weight: 500;
+        }
+        .aday {
+            float: left;
+            height: 0.58rem;
+
+            .aday-center-num {
+                color: $colorBlack;
+                font-size: 0.16rem;
+            }
+            .aday-bottom-info {
+                color: $colorBlack;
+                font-size: 0.1rem;
+                height: 0.17rem;
+            }
+        }
+        .aday-holiday {
+            .aday-center-num {
+                color: $colorMain;
+            }
+            .aday-bottom-info {
+                color: $colorMain;
+            }
+        }
+        .aday-active {
+            background-color: $colorMain;
+            .aday-center-num {
+                color: $colorWhite;
+            }
+            .aday-bottom-info {
+                color: $colorWhite;
+            }
+        }
+        .aday-belong {
+            background-color: $colorLightBlue;
+        }
+        .aday-last {
+            .aday-center-num {
+                color: $colorGray;
+            }
+            .aday-bottom-info {
+                color: $colorGray;
+            }
+        }
+    }
+
+</style>

src/pages/hotel/view/detailView/HotelTopImage.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="HotelTopImage">
+        <div class="content" @click="clickTopImage(item)">
+            <!--<div style="width: 100%;position: relative;left:-1.875rem;text-align: center;min-width: 3.75rem;">-->
+                <!--<div style="width: 100%;position: relative;">-->
+                    <!--<img class="" style="height:1.7rem;width:3.75rem;position: absolute;" v-lazy="topImgUrl" alt="">-->
+                <!--</div>-->
+            <!--</div>-->
+            <img class="" style="height:1.7rem;width:3.75rem;position: absolute;" v-lazy="setLoadingImage(item.img_list[0])" alt="">
+            <div class="mask" style="opacity: 0.2;background-color:#000;position: absolute;"></div>
+            <div class="title ub">
+                <div class="ub" >
+                    <div class="hotel-name ub ub-ae">{{item.hotel_name}} </div>
+                    <div class="hotel-level ub ub-ae" v-if="item.star_level">{{item.star_level}}级</div>
+                </div>
+                <div class="ub ub-f1 ub-pe ub-ae" style="margin-right:0.06rem;">
+                    <div class="ub" style="padding-bottom:0.02rem;">
+                        <img class="ub" src="static/image/hotel/ht_img_icon.png" style="width:0.16rem;height:0.15rem;margin-right:0.045rem;" alt="">
+                    </div>
+                    <div class="ub ub-ae" style="color:#fff;padding-top:0.04rem;">{{item.img_cnt}}张</div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+	export default {
+		name: "HotelTopImage",
+        props:{
+		    item:{
+		        type:Object
+            }
+        },
+		data() {
+			return {
+			    topImgUrl:'http://nwx.zhizhuchuxing.cn/web/admin/images/prodImg/15090134874033.jpg'
+            }
+		},
+        methods:{
+            clickTopImage(item){
+                this.$emit('clickTopImage',item);
+            },
+            setLoadingImage(url){
+                return {
+                    src:url?url:'static/image/hotel/no_hotel_l.png',
+                    error:'static/image/hotel/no_hotel_l.png',
+                    loading:'static/image/hotel/no_hotel_l.png'
+                }
+            }
+        }
+	}
+</script>
+
+<style scoped type="text/scss" lang="scss">
+    @import "../../../../style/mixin";
+    @import "../../../../../static/css/ui-base.css";
+    .content,.mask{
+        width:3.75rem;height:1.7rem;
+    }
+    .content{
+        .title{
+            position: absolute;
+            left:0.12rem;
+            right:0;
+            bottom:0.06rem;
+        }
+        .hotel-name{
+            @include sc(0.16rem,$colorWhite);
+            width:2.5rem;
+        }
+        .hotel-level{
+            @include sc(0.12rem,$colorWhite);
+            margin-left:0.075rem;
+
+
+        }
+    }
+
+
+</style>

src/pages/hotel/view/detailView/cell/HotelBaseRoomCell.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="HotelBaseRoomCell ub ub-f1">
+        <div class="cell-icon ub" style="width:0.8rem;height:0.65rem;">
+            <div class="mask"
+                 style="width:0.8rem;height:0.65rem;opacity: 0.2;background-color:#000;position: absolute;"></div>
+            <img style="width:0.8rem;height:0.65rem;" v-lazy="setLoadingImage(item.room_img)" alt="">
+
+        </div>
+        <div class="cell-room ub ub-f1" style="margin-left:0.1rem;">
+            <div class="ub ub-ver">
+                <div class="room-name ub" v-html="item.base_room_name">花园景观双床房</div>
+                <div class="room-area ub">
+                    {{item.area_size}}㎡<br/>
+                    {{item.bed_name}}
+                </div>
+                <!--<div class="room-desc ub"></div>-->
+            </div>
+        </div>
+        <div class="cell-price ub ub-f1 ub-pe ub-ac" style="line-height: 1;">
+            <div class="ub price-mark">¥</div>
+            <div class="ub price-num">{{item.min_price}}</div>
+            <div class="ub price-qi">起</div>
+            <img v-if="item.selected" style="width:0.125rem;height:0.125rem;padding-bottom: 0.05rem;transform: scaleY(-1);"
+                 src="./../../../../../../static/image/hotel/ht_arrow_down_circular.png" alt="">
+            <img v-else style="width:0.125rem;height:0.125rem;padding-top:0.055rem;"
+                 src="./../../../../../../static/image/hotel/ht_arrow_down_circular.png" alt="">
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import hotelChildRoomCell from './HotelChildRoomCell.vue'
+
+    export default {
+        name: "HotelBaseRoomCell",
+        components: {
+            hotelChildRoomCell
+        },
+        props: {
+            item: {
+                type: Object
+            }
+        },
+        data() {
+            return {}
+        },
+        methods:{
+            setLoadingImage(url){
+                return {
+                    src:url,
+                    error:'static/image/hotel/no_room.png',
+                    loading:'static/image/hotel/no_room.png'
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+    @import "../../../../../style/mixin";
+
+    .HotelBaseRoomCell {
+        padding: 0.07rem 0.125rem 0.07rem 0.07rem;
+        background: $colorWhite;
+        border-bottom: 1px solid $colorBorder2;
+    }
+
+    .cell-active {
+        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    .cell-room {
+        .room-name {
+            font-size: 0.14rem;
+        }
+        .room-desc, .room-area {
+            margin-top: 0.045rem;
+            color: $colorGray;
+        }
+        .room-lijian {
+            margin-top: 0.125rem;
+            line-height: 1;
+            padding: 0 0.02rem;
+            color: $colorOrange;
+            border: 1px solid $colorOrange;
+        }
+    }
+
+    .cell-price {
+
+        .price-mark {
+            font-size: 0.1rem;
+            padding-top: 0.05rem;
+            margin-right: 0.025rem;
+            color: $colorPrice;
+        }
+        .price-num {
+            font-size: 0.18rem;
+            font-weight: 500;
+            color: $colorPrice;
+
+        }
+        .price-qi {
+            font-size: 0.1rem;
+            padding-top: 0.05rem;
+            color: $colorGray;
+            margin-left: 0.025rem;
+            margin-right: 0.1rem;
+        }
+    }
+</style>

src/pages/hotel/view/detailView/cell/HotelChildRoomCell.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="HotelChildRoomCell ub">
+        <div class="ub ub-f1 ub-ver">
+            <div class="child-room-name-line ub" >
+                <div class="ub child-room-name" v-html="item.room_name"></div>
+                <div class="ub" @click="clickGift()" style="margin-left:0.05rem;" v-if="item.gift_list.length>0">
+                    <img src="./../../../../../../static/image/hotel/ht_gift_icon.png" style="width:0.12rem;height:0.12rem;vertical-align: middle;" alt="">
+                </div>
+            </div>
+            <div class="child-room-desc ub" style="margin-top: 0.07rem">
+                <div class="desc ub" v-html="item.breakfast">单份早</div>
+                <div class="desc ub" style="margin-left:0.1rem;" v-html="">不可取消</div>
+            </div>
+        </div>
+        <div class="child-room-price ub">
+            <div v-if="item.can_reserve" class="ub ub-f1 ub-ac ub-pe price" >
+                <div class="ub price-tag" v-show="showAvg">均</div>
+                <div class="ub price-tag" style="padding-left:0.045rem;padding-right:0.06rem;">¥</div>
+                <div class="ub price-num" v-if="showAvg" v-html="item.avg_price">123</div>
+                <div class="ub price-num" v-else v-html="item.min_price">123</div>
+                <div class="ub price-book" @click="clickChildBook()">预订</div>
+            </div>
+            <div v-else class="ub ub-f1 ub-ac ub-pe price-gray">
+                <div class="ub price-tag" v-show="showAvg">均</div>
+                <div class="ub price-tag" style="padding-left:0.045rem;padding-right:0.06rem;">¥</div>
+                <div class="ub price-num" v-if="showAvg" v-html="item.avg_price">123</div>
+                <div class="ub price-num" v-else v-html="item.min_price">123</div>
+                <div class="ub price-book">售完</div>
+            </div>
+
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import tool from './../../../../../config/mUtil/tool'
+    export default {
+        name: "HotelChildRoomCell",
+        props:{
+            showAvg:{
+                type:Boolean
+            },
+            item:{
+                type:Object
+            }
+        },
+        data() {
+            return {}
+        },
+        methods:{
+            clickChildBook(){
+                this.$emit('childBook',this.item);
+            },
+            clickGift(){
+                this.$emit('clickGift',this.item);
+            }
+        }
+    }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+    @import "../../../../../style/mixin";
+
+    .HotelChildRoomCell {
+        margin-left: 0.12rem;
+        padding-top: 0.13rem;
+        padding-bottom: 0.13rem;
+        margin-right: 0.12rem;
+        border-bottom: 1px solid $colorBorder2;
+    }
+
+    .child-room-name {
+        font-size: 0.14rem;
+    }
+
+    .child-room-desc {
+        .desc {
+            color: $colorGray;
+        }
+    }
+
+    .child-room-price {
+        div {
+            color: $colorPrice;
+        }
+        .price-tag {
+            padding-top: 0.03rem;
+        }
+        .price-num {
+            font-size: 0.18rem;
+            font-weight: 500;
+            margin-right: 0.1rem;
+        }
+        .price-book {
+            color: $colorWhite;
+            background: $colorOrange2;
+            /*padding:0.075rem;*/
+            padding-left: 0.075rem;
+            padding-right: 0.075rem;
+            padding-top: 0.04rem;
+            padding-bottom: 0.04rem;
+            border-radius: 0.04rem;
+        }
+        .price-gray {
+            .price-tag, .price-num, .price-book {
+                color: $colorGray3;
+            }
+            .price-book {
+                color: $colorWhite;
+                background: $colorGray3;
+            }
+        }
+
+    }
+
+</style>

src/pages/hotel/view/listView/HotelFilterBox.vue

@@ -0,0 +1,295 @@
+<template>
+    <div class="HotelFilterBox">
+        <div class="box1" v-if="boxType==='sort'" style="height: 1.2rem;">
+            <div @click="clickSort(index)" class="ub box-item" v-for="(item,index) in box1Arr"
+                 :class="item.selected?'box-item-active':''">
+                <div class="ub ub-f1 box-item-desc">{{item.info}}</div>
+                <div class="ub ub-f1 ub-pe box-item-icon" v-show="item.selected">
+                    <img class="ub ub-pe right-item-icon" src="./../../../../../static/image/hotel/ht_gou_blue_icon.png" style="width:0.15rem;height:0.11rem;">
+                </div>
+            </div>
+        </div>
+        <div class="box2" v-if="boxType==='fliter'" style="height:3.125rem" :style="getStyleBox2()">
+            <div class="ub top">
+                <div class="ub ub-f1 top-left-btn" @click="clear()">清空筛选</div>
+                <div class="ub ub-f1 ub-pe top-right-btn" @click="ok()">确定</div>
+            </div>
+            <div class="bottom ub">
+                <div class="bottom-left ub ub-ver" :style="getStyleBottomLeft()">
+                    <div class="ub menu-item" :class="item.selected?'menu-item-active':''"
+                         v-for="(item,index) in box2Arr" :key="index" @click="clickLeftMenu(item,index)">
+                        {{item.type_name}}
+                        <em class="menu-point" v-if="item.hasSelected"></em>
+                    </div>
+                </div>
+                <div class="bottom-right ub ub-f1 ub-ver" :style="getStyleBottomRight()">
+                    <div class="ub right-item" v-for="(item,index) in rightArr" :key="index"
+                         @click="clickRightItem(item,index)">
+                        <div class="ub ub-f1 right-item-desc" :class="item.selected?'right-item-desc-active':''">{{item.name}}</div>
+                        <div class="ub ub-f1 ub-pe right-item-icon" v-show="item.selected">
+                            <img class="ub ub-pe right-item-icon" src="./../../../../../static/image/hotel/ht_gou_blue_icon.png" style="width:0.15rem;height:0.11rem;">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+    import tool from './../../../../config/mUtil/tool'
+    import fetch from './../../../../config/fetch'
+    import {MessageBox,Toast} from 'mint-ui'
+    import {getHotelType} from './../../../../service/httpService'
+
+    export default {
+        name: "HotelFilterBox",
+        props: {
+            boxType: {
+                'type': String
+            }
+        },
+        data() {
+            return {
+                box1Arr: [
+                    {
+                        id: -1,
+                        info: '综合排序',
+                        selected: true
+                    },
+                    {
+                        id: 0,
+                        info: '价格从高到低',
+                        selected: false
+                    },
+                    {
+                        id: 1,
+                        info: '价格从低到高',
+                        selected: false
+                    }
+                ],
+                rightArr: [],
+                box2Arr: [],
+                allowMoreSelected:false,
+                typeId:1,
+                saveData:[],
+            }
+        },
+        created() {
+            // 请求接口
+            getHotelType().then(res=>{
+                tool.log(res)
+                if(res.flag===false){
+                    MessageBox.alert(res.msg);
+                }else {
+                    this.box2Arr = res.data.select_list;
+                    this.box2Arr.map(x=>{
+                        this.$set(x,'hasSelected',false);
+                    });
+                    this.rightArr = this.box2Arr[0].list;
+                    tool.log(this.saveData)
+                    this.initSaveDate();
+                }
+            }).catch(e=>{
+                MessageBox.alert('加载失败')
+            })
+        },
+        methods: {
+            clear() {
+                // 请求接口
+                getHotelType().then(res=>{
+                    if(res.flag===false){
+                        MessageBox.alert(res.msg);
+                    } else {
+                        this.box2Arr = res.data.select_list;
+                        this.rightArr = this.box2Arr[0].list;
+                        this.initSaveDate();
+                    }
+                    Toast('清除成功')
+                }).catch(e=>{
+                    Toast('清除失败')
+                })
+            },
+            initSaveDate(){
+                this.saveData = [];
+                for(let i=0;i<this.box2Arr.length;i++){
+                    this.saveData.push({
+                        'type_id':this.box2Arr[i].type_id,
+                        'params':0
+                    })
+                }
+            },
+            ok() {
+                this.$emit('ok',this.saveData)
+            },
+            clickSort(index) {
+                let item = this.box1Arr[index];
+                this.box1Arr.map(x => x.selected = false);
+                item.selected = true;
+                this.$emit('clickSort', item, index);
+            },
+            clickLeftMenu(item, index) {
+                this.box2Arr.map(x => x.selected = false);
+                item.selected = true;
+                this.rightArr = item.list;
+                this.allowMoreSelected = item.allowMoreSelected;
+                this.typeId = item.type_id;
+            },
+            clickRightItem(item, index) {
+                if(this.allowMoreSelected && item.name!=='不限'){
+                    this.rightArr[0].name==='不限'?this.rightArr[0].selected=false:'';
+                    item.selected = !item.selected;
+                } else {
+                    this.rightArr.map(x => x.selected = false);
+                    item.selected = true;
+                }
+                // 存储信息
+                let param = '';
+                for(let i=0;i<this.rightArr.length;i++){
+                    if(this.rightArr[i].selected){
+                        param += (param?',':'');
+                        param +=i;
+                    }
+                }
+                if(!param){
+                    this.rightArr[0].selected=true;
+                    param = 0;
+                }
+                let that = this;
+                this.saveData.forEach(function(item,i){
+                    if(item.type_id === that.typeId){
+                        item.params = param;
+                    }
+                });
+                for(let i=0;i<this.box2Arr.length;i++){
+                    let item = this.box2Arr[i];
+                    if(item.selected){
+                        for(let j=0;j<item.list.length;j++){
+                            let val = item.list[j];
+                            if(val.selected && j!==0){
+                                item.hasSelected = true;
+                                break;
+                            }else{
+                                item.hasSelected = false;
+                            }
+                        }
+                    }
+                }
+
+            },
+            getBottomH(){
+                let len = this.box2Arr.length;
+                if(len<6)len = 6;
+                return 250 / 6 * len;
+            } ,
+            getStyleBox2() {
+                return {
+                    height: this.getBottomH() / 100 + 0.43 + 'rem'
+                }
+            },
+            getStyleBottomLeft() {
+                return {
+                    height: this.getBottomH() / 100 + 'rem'
+                }
+            },
+            getStyleBottomRight(){
+                return {
+                    height: this.getBottomH() / 100 + 'rem'
+                }
+            }
+        }
+    }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+    @import "./../../../../style/mixin";
+
+    .HotelFilterBox {
+        background: $colorWhite;
+    }
+
+    .box1 {
+        padding-left: 0.12rem;
+        padding-right: 0.15rem;
+        .box-item {
+            padding-top: 0.11rem;
+            padding-bottom: 0.11rem;
+        }
+        .box-item-active {
+            .box-item-desc {
+                color: $colorMain;
+            }
+        }
+    }
+
+    .box2 {
+        .top {
+            border-bottom: 1px solid $colorGray3;
+            div {
+                padding: 0.13rem 0.12rem;
+            }
+            .top-left-btn {
+                color: $colorLightBlack;
+                font-size: 0.11rem;
+            }
+            .top-right-btn {
+                color: $colorMain;
+                font-size: 0.12rem;
+            }
+        }
+
+        $bottomH: 2.51rem;
+        .bottom {
+            height: $bottomH;
+        }
+        .bottom-left {
+            width: 0.65rem;
+            height: $bottomH;
+            /*overflow-y: scroll;*/
+            background-color: $colorBorder2;
+            border-right: 1px solid $colorGray3;
+            .menu-point{
+                width: 4px;height: 4px;border-radius: 50%;position: absolute;top: 0.15rem;left: 0.07rem;
+                background:$colorPrice;
+            }
+            .menu-item {
+                padding: 0.095rem 0 0.095rem 0.13rem;
+                border-bottom: 1px solid $colorBorder2;
+                border-top: 1px solid $colorBorder2;
+                font-size: 0.11rem;
+                margin-right: -1px;
+            }
+            .menu-item-active {
+                background-color: $colorWhite;
+                border-right: 1px solid $colorWhite;
+                border-top: 1px solid $colorGray3;
+                border-bottom: 1px solid $colorGray3;
+                &:first-child {
+                    border-top: 1px solid $colorWhite;
+                }
+            }
+        }
+        .bottom-right {
+            height: $bottomH;
+            overflow-y: scroll;
+            padding-left: 0.135rem;
+            padding-right: 0.15rem;
+            background-color: $colorWhite;
+            .right-item {
+                padding-top: 0.11rem;
+                padding-bottom: 0.11rem;
+                border-bottom: 1px solid $colorBorder2;
+                font-size: 0.11rem;
+            }
+            .right-item-desc{
+
+            }
+            .right-item-desc-active{
+                color: $colorMain;
+            }
+        }
+
+    }
+</style>

src/pages/hotel/view/listView/cell/HotelCell.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="HotelCell">
+
+    </div>
+</template>
+
+<script>
+	export default {
+		name: "HotelCell",
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style scoped type="text/scss" lang="scss">
+    @import "./../../../../../style/mixin";
+</style>

src/pages/main/MainView.vue

@@ -0,0 +1,136 @@
+<template>
+    <div class="main">
+
+
+        <header-view v-if="showHeader"></header-view>
+        <router-view></router-view>
+        <footer-view @selectTabbar="selectTabbar" :list="list" v-show="showFooter"></footer-view>
+    </div>
+
+</template>
+
+<script>
+    import HeaderView from '../../common/HeaderView.vue'
+    import FooterView from '../../common/FooterView.vue'
+
+
+    //    const routeNames = ['home', 'prod','trip_list', 'user_center'];
+    const name1 = ['home'];
+    const name2 = ['HotelReservation'];
+    const name3 = ['trip_list'];
+    const name4 = ['user_center'];
+    let routeNames = name1.concat(name2, name3, name4);
+    import tool from './../../config/mUtil/tool'
+    import info from './../../config/info'
+    import {fenXiang,httpGetTabbar} from './../../service/httpService'
+    import {Toast} from 'mint-ui'
+
+    export default {
+        name: "MainView",
+        components: {
+            HeaderView, FooterView
+        },
+        data() {
+            return {
+                selectIndex: 0,
+                showHeader: false,
+                showFooter: true,
+                list: []
+            }
+        },
+        watch: {
+            $route(to, from) {
+                this.setInfo(to.name);
+                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在 页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready 函数中。
+                wx.ready(function(){
+                    // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
+                    wx.onMenuShareTimeline({
+                        title: '蜘蛛出行-'+document.title, // 分享标题
+                        link: encodeURI(window.location.href),
+                        imgUrl: "http://img.zhizhuchuxing.cn/zzwx/logo.jpg" // 分享图标
+                    });
+                    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
+                    wx.onMenuShareAppMessage({
+                        title: '蜘蛛出行-'+document.title, // 分享标题
+                        desc: "【蜘蛛出行】安全舒适便捷的巴士出行品牌", // 分享描述
+                        link:encodeURI(window.location.href),
+                        imgUrl: "http://img.zhizhuchuxing.cn/zzwx/logo.jpg", // 分享图标
+                        type: 'link' // 分享类型,music、video或link，不填默认为link
+                    });
+                });
+            }
+        },
+        mounted() {
+            this.load();
+            let ua = tool.myBrowser();
+            if(ua.appType === 'micromessenger'){
+                fenXiang({
+                    url:encodeURI(window.location.href)
+                }).then(result=>{
+                    // 微信配置
+                    wx.config({
+                        debug: false,
+                        appId: result.appId,
+                        timestamp: result.timestamp,
+                        nonceStr: result.nonceStr,
+                        signature: result.signature,
+                        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 功能列表，我们要使用JS-SDK的什么功能
+                    });
+                    wx.ready(function(){
+                        // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
+                        wx.onMenuShareTimeline({
+                            title: '蜘蛛出行-'+document.title, // 分享标题
+                            link: encodeURI(window.location.href),
+                            imgUrl: "http://img.zhizhuchuxing.cn/zzwx/logo.jpg" // 分享图标
+                        });
+                        // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
+                        wx.onMenuShareAppMessage({
+                            title: '蜘蛛出行-'+document.title, // 分享标题
+                            desc: "【蜘蛛出行】安全舒适便捷的巴士出行品牌", // 分享描述
+                            link:encodeURI(window.location.href),
+                            imgUrl: "http://img.zhizhuchuxing.cn/zzwx/logo.jpg", // 分享图标
+                            type: 'link' // 分享类型,music、video或link，不填默认为link
+                        });
+                    });
+                });
+            }
+
+        },
+        methods: {
+            load(){
+                httpGetTabbar().then(res=>{
+                    if(!res.flag){
+                        Toast(res.msg)
+                    }else{
+                        this.list = res.data.list;
+                        tool.log(this.list)
+                        this.list.map(x=>{
+                            this.$set(x,'flag',false);
+                        });
+                        let toName = this.$router.history.current.name;
+                        this.setInfo(toName);
+                    }
+                }).catch(e=>{
+                    Toast(info.infoApiError)
+                })
+            },
+            setInfo(toName){
+                this.list.map(x=>{
+                    if(x.url===toName){
+                        x.flag=true;
+                    }
+                });
+                this.showFooter = routeNames.indexOf(toName)!==-1;
+            },
+            selectTabbar(item) {
+
+                tool.$router.push(this, {
+                    name: item.url
+                })
+            }
+        }
+    }
+</script>
+
+<style>
+</style>

src/pages/pay/pay_success.vue

@@ -0,0 +1,246 @@
+<template>
+    <div class="bg_color">
+        <div class="big_div" style="display: block;">
+
+            <div v-if="category_id ==3" class="center_info" style="margin-top: 1.22rem;text-align: center;">
+                <div style="font-size:0.19rem;color:#339933;"><img class="duihao" src="../../../static/image/home/duihao.png" />预定成功！</div>
+                <div class="ulev1" style="color:#686872;margin-top:0.16rem;">等待酒店确认接单</div>
+                <div class="ulev1" style="color:#686872;margin-top:0.08rem;">如酒店不接单将全额退款至您的付款账户</div>
+            </div>
+
+            <div  v-else-if="category_id ==-1" class="center_info" style="margin-top: 1.22rem;text-align: center;">
+                <div style="font-size:0.19rem;color:#339933;"><img class="duihao" src="../../../static/image/home/duihao.png" />预定成功！</div>
+                <div class="ulev1" style="color:#686872;margin-top:0.16rem;"></div>
+                <div class="ulev1" style="color:#686872;margin-top:0.08rem;"></div>
+            </div>
+
+            <div v-else class="center_info" style="margin-top: 1.22rem;text-align: center;">
+                <div style="font-size:0.19rem;color:#339933;"><img class="duihao" src="../../../static/image/home/duihao.png" />预定成功！</div>
+                <div class="ulev1" style="color:#686872;margin-top:0.16rem;">出票成功会有短信提醒</div>
+                <div class="ulev1" style="color:#686872;margin-top:0.08rem;">出票失败系统自动退款</div>
+            </div>
+            <div class="center_button ub ub-pc" style="margin-top: 0.27rem;">
+                <div @click="go_home" id="back_home" class="back_home ub ub-ac ub-pc">返回首页</div>
+                <div @click="go_detail" id="see_detail" class="see_detail ub ub-ac ub-pc" style="margin-left: 0.2rem;">查看详情</div>
+            </div>
+
+            <!--精品推荐-->
+            <div class="recommon_list" style="margin-top: 0.8rem;">
+                <!--<div style="line-height: 1.0;padding-left: 0.08rem;color: #686872;padding-bottom: 0.05rem;">精品推荐</div>-->
+                <!--<div class="list_info">-->
+
+                    <!--<div v-if="!recommend_flag" class="ub ub-ac ub-pc ulev1" style="padding:0.3rem 0;">-->
+                        <!--暂无相关推荐-->
+                    <!--</div>-->
+
+                    <!--<div v-else v-for="(val,index) in recommend_list" class="ub" style="margin-bottom: 0.05rem;">-->
+
+                        <!--<div class="ub-f1 ub one_box" style="background-color: #FFFFFF;width: 1%;" category_id='+dict.category_id+' pro_cate_id=' + dict.pro_cate_id + '>-->
+                            <!--<div class="ub ub-ver ub-f1" style="padding: 0.08rem;">-->
+                                <!--<img v-if="val['show_img'] == ''" class="lazy-load" src="../../../static/image/home/product02loading.png" data-original="../../../static/image/home/product02loading.png" style="width: 1.69rem;height: 0.9rem;" />-->
+                                <!--<img v-else id="" class="lazy-load" src="../../../static/image/home/product02loading.png" :data-original="val['show_img']" style="width: 1.69rem;height: 0.9rem;" />-->
+                                <!--<div class="ulev1" style="padding-top: 0.08rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color: #2d2e3a;">-->
+                                    <!--{{val['pro_cate_name']}}-->
+                                <!--</div>-->
+                                <!--<div class="ub ub-ae ub-f1 ui_p_t10">-->
+                                    <!--<div style="color: #96969c;text-decoration: line-through;text-decoration-color:#96969c;">-->
+                                        <!--原价 {{val['original_price']}}元-->
+                                    <!--</div>-->
+                                    <!--<div class="ub-f1 tx-r" style="color: #686872;">-->
+                                        <!--<span class="ulev3" style="color: #cc3333;">¥{{val['show_price']}} </span>起-->
+                                    <!--</div>-->
+                                <!--</div>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                        <!--<div style="width: 0.05rem;"></div>-->
+
+                        <!--<div  class="ub-f1 ub one_box" style="background-color: #FFFFFF;width: 1%;" category_id='+dict.category_id+' pro_cate_id=' + dict.pro_cate_id + '>-->
+                            <!--<div class="ub ub-ver ub-f1" style="padding: 0.08rem;">-->
+                                <!--<img class="lazy-load" src="../../../static/image/home/product02loading.png" data-original=' + dict.show_img + ' style="width: 1.69rem;height: 0.9rem;" />-->
+                                <!--<div class="ulev1" style="padding-top: 0.08rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color: #2d2e3a;">-->
+                                    <!--{{val['pro_cate_name']}}-->
+                                <!--</div>-->
+                                <!--<div class="ub ub-ae ub-f1 ui_p_t10">-->
+                                    <!--<div style="color: #96969c;text-decoration: line-through;text-decoration-color:#96969c;">-->
+                                        <!--原价 {{val['original_price']}}元-->
+                                    <!--</div>-->
+                                    <!--<div class="ub-f1 tx-r" style="color: #686872;">-->
+                                        <!--<span class="ulev3" style="color: #cc3333;">¥{{val['show_price']}} </span>起-->
+                                    <!--</div>-->
+                                <!--</div>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                    <!--</div>-->
+
+
+                    <!--<div class="ub" style="margin-bottom: 0.05rem;">-->
+                    <!--<div class="ub-f1 ub" style="background-color: #FFFFFF;width: 1%;">-->
+                    <!--<div class="ub ub-ver ub-f1" style="padding: 0.08rem;">-->
+                    <!--<img src="images/home/product02loading.png" style="width: 1.69rem;height: 0.9rem;" />-->
+                    <!--<div class="ulev1" style="padding-top: 0.08rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #2d2e3a;">乌镇一日游</div>-->
+                    <!--<div class="ub ub-ae ub-f1 ui_p_t10">-->
+                    <!--<div style="color: #96969c;text-decoration: line-through;text-decoration-color:#96969c;">原价50元</div>-->
+                    <!--<div class="ub-f1 tx-r" style="color: #686872;">-->
+                    <!--<span class="ulev3" style="color: #cc3333;">¥50</span>起-->
+                    <!--</div>-->
+                    <!--</div>-->
+                    <!--</div>-->
+                    <!--</div>-->
+                    <!--<div style="width: 0.05rem;"></div>-->
+                    <!--<div class="ub-f1 ub" style="background-color: #FFFFFF;width: 1%;">-->
+                    <!--<div class="ub ub-ver ub-f1" style="padding: 0.08rem;">-->
+                    <!--<img src="images/home/product02loading.png" style="width: 1.69rem;height: 0.9rem;" />-->
+                    <!--<div class="ulev1" style="padding-top: 0.08rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color: #2d2e3a;">乌镇一日游</div>-->
+                    <!--<div class="ub ub-ae ub-f1 ui_p_t10">-->
+                    <!--<div style="color: #96969c;text-decoration: line-through;text-decoration-color:#96969c;">原价50元</div>-->
+                    <!--<div class="ub-f1 tx-r" style="color: #686872;">-->
+                    <!--<span class="ulev3" style="color: #cc3333;">¥50</span>起-->
+                    <!--</div>-->
+                    <!--</div>-->
+                    <!--</div>-->
+                    <!--</div>-->
+                    <!--</div>-->
+                <!--</div>-->
+            </div>
+
+        </div>
+    </div>
+
+</template>
+
+<script>
+    import {getRecommend} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import date from '../../config/mUtil/dateUtil'
+    import cardId from '../../config/mUtil/cardId'
+    import info from '../../config/info'
+    import { Toast } from 'mint-ui';
+    import { Swipe, SwipeItem,Switch,} from 'mint-ui';
+    export default {
+        name: "pay_success",
+        data(){
+            return {
+                //order_id:11487,
+                order_id:this.$route.query.order_id,
+                list:[],
+                recommend_list:[],
+                recommend_flag:false,
+                category_id:-1,
+
+
+            }
+        },
+        mounted(){
+            this.$nextTick(() => {
+                this.baseData(this.order_id);
+            })
+        },
+        methods:{
+            baseData(order_id){
+                getRecommend({order_id:order_id}).then(res=>{
+                    this.list = res['data'];
+                    this.recommend_list = this.list['list'];
+                    this.category_id = this.list['category_id'];
+                    if(this.recommend_list.length ==0 || this.recommend_list.length ==1){
+                        this.recommend_flag = false;
+                    }else{
+                        // this.recommend_flag= true;
+                         this.recommend_flag= false;
+                    }
+                }).catch(e=>{
+                    Toast('服务器掉了！');
+                })
+            },
+            go_home(){
+                tool.$router.push(this,{
+                    name:'home'
+                })
+            },
+            go_detail(){
+                tool.$router.push(this,{
+                    name:'order_detail',
+                    query:{
+                        order_id:this.order_id,
+                    }
+                })
+            }
+
+
+        }
+    }
+</script>
+
+<style scoped lang="scss" type="text/scss">
+    @import "../../../static/css/ui-base.css";
+    @import "../../../static/css/ui-box.css";
+    @import "../../../static/css/ui-color.css";
+    //@import "../../../static/css/main.css";
+    .back_home {
+        font-size: 0.14rem;
+        color: #2d2e3a;
+        height: 0.38rem;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        border-radius: 1rem;
+        border: 1px solid #2d2e3a;
+    }
+
+    .see_detail {
+        font-size: 0.14rem;
+        color: #ffffff;
+        height: 0.38rem;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        border-radius: 1rem;
+        border: 1px solid #2d2e3a;
+        background: #2d2e3a;
+    }
+
+    .duihao {
+        width: 0.22rem;
+        height: 0.16rem;
+        margin-right: 0.08rem;
+    }
+    /* 精品推荐 */
+
+    .recommon_list {
+        margin-top: 0.8rem;
+        margin-bottom: 0.15rem
+    }
+
+    .re_title {
+        line-height: 1.0;
+        padding-left: 0.08rem;
+        color: #686872;
+        padding-bottom: 0.05rem;
+    }
+
+    .one_line {
+        margin-bottom: 0.05rem;
+    }
+
+    .one_box {
+        background-color: #FFFFFF;
+        width: 1%;
+    }
+
+    .re_img {
+        width: 1.69rem;
+        height: 0.9rem;
+    }
+
+    .prod_name {
+        padding-top: 0.08rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: #2d2e3a;
+        font-size: 0.14rem;
+    }
+
+    .bottom_left {
+        color: #96969c;
+        text-decoration: line-through;
+        text-decoration-color: #96969c;
+    }
+</style>

src/pages/product/product_list.vue

@@ -0,0 +1,362 @@
+<template>
+    <div id="div_body">
+        <div class="title ub ub-ac ub-pc">
+            <img src="../../../static/image/home/title_icon.png" class="title_icon1 ub">
+            <div class="ub" style="font-size: 0.13rem;line-height: 1">产品列表</div>
+            <img src="../../../static/image/home/title_icon.png" class="title_icon2 ub">
+        </div>
+        <!--超值热卖-->
+        <div class="hot_sale">
+            <div class="hot_sale_line ub" v-for="dict in hot_line_list" @click="prodDetail(dict.category_id,dict.pro_cate_id)">
+                <img v-lazy=" setLoading(dict.show_img)" class="goods_img">
+                <div class="goods_contents">
+                    <div class="goods_name">{{dict.pro_cate_name}}</div>
+                    <div class="goods_mark ub">
+                        <div :style="dict.category_name =='巴士自由行'?'width: 0.7rem':''" class="goods_mark_content ub ub-pc ub-ac">
+                            {{dict.category_name}}
+                        </div>
+                    </div>
+                    <div class="ub ub-ac" style="margin-top: 0.15rem;">
+                        <start-show :starValue="dict.star"></start-show>
+                        <div class="ub goods_contents_font ub-f1">评分{{dict.star}}分</div>
+                        <div class="ub ub-ae" style="margin-right: 0.21rem">
+                            <div class="goods_contents_font3 ub ub-f1 ub-ae" style="line-height: 1">¥</div>
+                            <div class="goods_contents_font2 ub ub-f1" style="line-height: 1">{{dict.show_price}}</div>
+                            <div class="ub ub-f1" style="color:#666666;line-height: 1">起</div>
+                        </div>
+                    </div>
+                    <div class="ub ub-ae" style="margin-top: 0.05rem;">
+                        <div class="ub ub-ac star_ary goods_contents_font1 f1">月销售{{dict.sales_count}}单</div>
+                        <div class="ub goods_contents_font ub-f1">{{dict.comment_count}}评论</div>
+                        <div class="ub goods_contents_font" style="text-decoration: line-through;margin-right: 0.21rem">原价{{dict.original_price}}元</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div style="height: 0.075rem;background-color: #ffffff"></div>
+        <div class="ub-ac ub-pc ub ui_p_b15" style="margin-top: 0.25rem;margin-bottom: 0.7rem;color: #686872;">- 已经到达最底部 -</div>
+    </div>
+</template>
+
+<script>
+    import {showProdList} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import info from './../../config/info'
+    import { Toast ,MessageBox } from 'mint-ui';
+    import { swiper, swiperSlide } from 'vue-awesome-swiper'
+    import StartShow from "../product/view/Star"
+
+    export default {
+        name: "product_list",
+        data() {
+            return {
+                prodIds:"246",
+                hot_line_list:[]
+            }
+        },
+        components:{
+            StartShow,
+            swiper,
+            swiperSlide
+        },
+        mounted() {
+            this.prodIds = tool.getPar('prodIds');
+            this.load();
+        },
+        methods: {
+            load() {
+                let data = {
+                    prodIds:this.prodIds
+                };
+                showProdList(data).then(res=>{
+                    if(res.flag === false){
+                        MessageBox.alert(res.msg);
+                    } else {
+                        this.hot_line_list = res['data'];
+                    }
+                }).catch(e=>{
+                    Toast(info.infoApiError);
+                })
+            },
+            setLoading(url){
+                return {
+                    src:url,
+                    error:'static/image/home/productloading.png',
+                    loading:'static/image/home/productloading.png'
+                }
+            },
+            prodDetail(category_id,pro_cate_id){
+                // category_id 1车票 2门票 3酒店 4巴士自由行 5上门接
+                if('1' == category_id) {
+                    MessageBox.alert('该产品已售完');
+                } else if('2' == category_id){
+                    tool.$router.push(this,{
+                        name:'createTicketOrder',
+                        query:{
+                            pro_cate_id:pro_cate_id
+                        }
+                    })
+                } else if('4' == category_id) {
+                    tool.$router.push(this,{
+                        name:'freeOrder',
+                        query:{
+                            pro_cate_id:pro_cate_id
+                        }
+                    })
+                }
+            }
+        }
+    }
+</script>
+<style lang="scss" type="text/scss">
+    @import "./../../style/mixin";
+    @import "../../../static/css/travel_book.css";
+    @import "../../../static/css/swiper.min.css";
+    #div_body{
+        .swiper-pagination-bullet-active {
+            background-color:$colorWhite!important;
+        }
+        .swiper-pagination-bullet{
+            background-color:rgba(255,255,255,0.4);
+        }
+        .swiper-pagination{
+            bottom:20px;
+        }
+    }
+</style>
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+
+
+    .title {
+        text-align: center;
+        height:0.4rem;
+        line-height:1;
+        font-size:0.13rem;
+    }
+
+    .title_icon1 {
+        height:0.12rem;
+        width: 0.1rem;
+        transform: rotate(180deg);
+        margin-right:0.095rem;
+    }
+    .title_icon2 {
+        height:0.12rem;
+        width: 0.1rem;
+        margin-left:0.095rem;
+    }
+    .train-content{
+        width: 3.75rem;
+        height: 1.75rem;
+        background-color: #ffffff;
+        box-shadow: 0 0 12px 0 rgba(34, 31, 32, 0.02);
+        padding-top:0.175rem;
+    }
+    .train_info{
+        width: 1%;
+    }
+    .radius {
+        width: 0.45rem;
+        height: 0.45rem;
+        background-color: #ffffff;
+        /*border-radius: 100%;*/
+    }
+    .radius img{
+        border-radius:0.45rem;
+    }
+    .radius-active {
+        box-shadow:0 0.075rem 0.15rem rgba(0,0,0,0.1);
+        transform:translate3d(0, -2px, 0)
+    }
+    .layer {
+        font-family: PingFangSC;
+        font-size: 0.12rem;
+        margin-top:0.06rem;
+        color: #333333;
+        line-height: 1;
+    }
+    .destination {
+        width:  3.75rem;
+        height: 1.1rem;
+        background-color: #ffffff;
+        box-shadow: 0 0 12px 0 rgba(34, 31, 32, 0.02);
+        padding-top: 0.175rem;
+        -webkit-overflow-scrolling:touch;
+    }
+    .city {
+        width: 1.05rem;
+        height: 0.75rem;
+        /*opacity: 0.7;*/
+        /*background-color: #000000;*/
+        margin-left:0.1rem;
+        position: relative;
+    }
+    .city_bg {
+        width: 1.05rem;
+        height: 0.75rem;
+        opacity: 0.3;
+        background-color: #000000;;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+    .city_name {
+        font-size: 0.14rem;
+        color: #ffffff;
+    }
+    .hot_sale {
+        padding-top:0.05rem;
+        background-color: #ffffff;
+    }
+    .hot_sale_line {
+        height:1.15rem;
+        width:3.75rem;
+        padding-left:0.1rem;
+
+    }
+    .goods_img {
+        width: 1rem;
+        height: 1rem;
+        background-color: #cccccc;
+        margin-top: 0.075rem;
+        margin-bottom: 0.075rem;
+    }
+    .goods_contents {
+        margin-top:0.075rem;
+        margin-left:0.1125rem;
+        width:2.5rem;
+        border-bottom: 1px solid #dadada;
+    }
+    .goods_name {
+        width: 2.5rem;
+        font-family: PingFangSC;
+        font-size: 0.13rem;
+        line-height: 1.38;
+        text-align: left;
+        color: #333333;
+        text-overflow: ellipsis;/*文字隐藏后添加省略号*/
+        white-space: nowrap;/*强制不换行*/
+        overflow: hidden;
+    }
+    .goods_mark {
+        margin-top:0.1rem;
+    }
+    .goods_mark_content {
+        width: 0.525rem;
+        padding-bottom: 0.01rem;
+        padding-top: 0.02rem;
+        line-height: 1;
+        border-radius: 0.08rem;
+        color: #368ff4;
+        border: solid 1px #368ff4;
+        margin-right: 0.05rem
+    }
+
+    .f1 {
+        width:0.8rem;
+    }
+    .f2 {
+        width:0.9rem;
+    }
+    .star {
+        width: 0.1rem;
+        height: 0.1rem;
+        margin: 0.01rem;
+        background-repeat:no-repeat;
+        background-size:100% 100%
+    }
+    .goods_contents_font {
+        font-family: PingFangSC;
+        font-size: 0.11rem;
+        line-height: 1.64;
+        text-align: left;
+        color: #999999;
+    }
+    .goods_contents_font1 {
+        font-family: PingFangSC;
+        font-size: 0.11rem;
+        line-height: 1.64;
+        text-align: left;
+        color: #333333;
+    }
+    .goods_contents_font2 {
+        font-family: PingFangSC;
+        font-size: 0.19rem;
+        font-weight: 500;
+        line-height: 1;
+        text-align: left;
+        color: #f45a36;
+    }
+    .goods_contents_font3 {
+        font-size: 0.12rem;
+        font-weight: normal;
+        line-height: 1.5;
+        color: #f45a36;
+    }
+    /*webkit内核*/
+    .content::-webkit-scrollbar-button    {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar-track     {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar-track-piece {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar-thumb{
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar-corner {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar-resizer  {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-webkit-scrollbar {
+        display: none;/*隐藏滚轮*/
+    }
+    /*o内核*/
+    .content .-o-scrollbar{
+        -moz-appearance: none !important;
+        background: rgba(0,255,0,0) !important;
+    }
+    .content::-o-scrollbar-button    {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-o-scrollbar-track     {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-o-scrollbar-track-piece {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-o-scrollbar-thumb{
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-o-scrollbar-corner {
+        background-color:rgba(0,0,0,0);
+    }
+    .content::-o-scrollbar-resizer  {
+        background-color:rgba(0,0,0,0);
+    }
+    /*IE10,IE11,IE12*/
+    .content{
+        -ms-scroll-chaining: chained;
+        -ms-overflow-style: none;
+        -ms-content-zooming: zoom;
+        -ms-scroll-rails: none;
+        -ms-content-zoom-limit-min: 100%;
+        -ms-content-zoom-limit-max: 500%;
+        -ms-scroll-snap-type: proximity;
+        -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+        -ms-overflow-style: none;
+        overflow: auto;
+        overflow-y:hidden;
+    }
+    .hot_sale_line:last-child > .goods_contents{
+        border-bottom: 0px;
+    }
+
+
+</style>

src/pages/product/view/Calendar.vue

@@ -0,0 +1,246 @@
+<template>
+    <div class="calendar">
+        <div v-for="(info,index) in dateArr" class="month clearfix fire aonelist amonth">
+            <div class="month_title">
+                <span class="current_month">{{info.month}}月</span>
+                <span class="current_year">{{info.year}}</span>
+            </div>
+            <div class="ub" style="margin-left:0.2rem;margin-right:0.2rem;text-align: center">
+                <div v-for="dict in dayTitle" class="aweek ub-f1 tx-c ui_p_t15 ui_p_b15">{{dict}}</div>
+            </div>
+            <div class="week ub" v-for="(week,i) in info.day" style="margin-left:0.2rem;margin-right:0.2rem;">
+                <div @click="item.able?selectDateOp(item.date,item.price):''" class="aday ub" :class="!item.able?'disday':(!item.goDate?'ableday canday':'ableday canday select_go_day')" v-for="item in week">
+                    {{item.day}}
+                    <div :class="!item.able?'hide_price':(item.goDate?'select_go_price':'price')">{{item.price}}起</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import tool from './../../../config/mUtil/tool'
+    import dateUtil from './../../../config/mUtil/dateUtil'
+    export default {
+        name: "calendar",
+        props:{
+            // dateList:{},
+            dateList:{
+                type:Object
+,            },
+            selectGoDate:'',
+        },
+        data(){
+            return{
+                dateArr:[],
+                dayTitle:['日','一','二','三','四','五','六'],
+            }
+        },
+        mounted(){
+            this.load();
+        },
+        watch:{
+            dateList(old,cur){
+                tool.log(cur)
+
+                this.load();
+            },selectGoDate(old,cur){
+                this.load();
+            }
+
+        },
+        methods:{
+            load(){
+                let curDate = dateUtil.getDateTime(0);// 当前日期
+                let curMonth = dateUtil.getMonthByDate(curDate);// 当前月
+                let arrList = [];
+                for(let key in this.dateList){
+                    let obj = {
+                        date:key,
+                        price:this.dateList[key]
+                    };
+                    arrList.push(obj);
+                }
+
+                tool.log(arrList);
+                this.dateArr.splice(0, this.dateArr.length);
+                this.dateArr.push(this.getDateArr(curMonth,arrList,this.selectGoDate));
+                this.dateArr.push(this.getDateArr(Math.floor(curMonth)+1,arrList,this.selectGoDate));
+                this.dateArr.push(this.getDateArr(Math.floor(curMonth)+2,arrList,this.selectGoDate));
+                tool.log(this.dateArr);
+            },
+            getDateArr(curMonth,dateList,goDate){
+                let curDate = dateUtil.getDateTime(0);// 当前日期
+                let curYear = dateUtil.getYearByDate(curDate);// 当前年
+                let curDays = dateUtil.getDays(curYear,curMonth);// 当月天数
+                let curFirstDate = new Date(curYear,curMonth-1).dateFormat('yyyy-MM-dd');// 当月天数
+                let weekIndex = dateUtil.getWeekDay(curFirstDate);// 当月第一天
+                let newMonth = dateUtil.getMonthByDate(curFirstDate);// 新的月份
+                let newYear = dateUtil.getYearByDate(curFirstDate);// 新的年份
+                let arr = [];
+                let selectDate = goDate;
+                for(let i = 0;i<weekIndex;i++) {
+                    let obj = {
+                        date: '',
+                        able: false,
+                        day: '',
+                        price: 0,
+                        goDate:false,
+                    };
+                    arr.push(obj);
+                }
+                for(let i =0;i<60;i++){
+                    if(i===curDays)break;
+                    let date = dateUtil.getDateByDay(i,curFirstDate);
+                    let able = false;
+                    let price = 0;
+                    let goDate = false;
+
+                    dateList.forEach(function(item){
+                        let count = Date.dayMinus(new Date(item['date']),new Date(date));
+                        if(count==0){
+                            able = true;
+                            price = item['price'];
+                        }
+                    })
+                    let count = Date.dayMinus(new Date(selectDate),new Date(date));
+                    if(count==0){
+                        goDate = true;
+                    }
+                    let obj = {
+                        date:date,
+                        day:Math.floor(dateUtil.getDayByDate(date)),
+                        able:able,
+                        price:price,
+                        goDate:goDate,
+                    };
+                    arr.push(obj);
+                }
+
+                let b_arr = [];
+                let t_arr = [];
+                for (let i = 0; i < arr.length; i++) {
+                    t_arr.push(arr[i]);
+                    if ((i + 1) % 7 === 0) {
+                        b_arr.push(t_arr);
+                        t_arr = [];
+                    }
+                    if (i === arr.length - 1) {
+                        b_arr.push(t_arr);
+                    }
+                }
+
+                let info = {
+                    year:newYear,
+                    month:newMonth,
+                    day:b_arr,
+                }
+                return info;
+            },
+            selectDateOp(date,price){
+                let params = {
+                    run_date:date,
+                    run_price:price,
+                }
+                this.$emit('selectDateOp',params);
+            }
+        }
+    }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+    .month_title{
+        padding-top: 0.15rem;
+        padding-bottom: 0.15rem;
+    }
+
+    .current_year{
+        color: #686872;
+        font-size: 0.14rem;
+        margin-left: 0.05rem;
+
+    }
+
+    .current_month{
+        color: #686872;
+        font-size: 0.32rem;
+        padding-left: 0.12rem;
+        padding-top: 0.15rem;
+
+    }
+
+    .aweek{
+        color: #686872;
+        font-size: 0.14rem;
+        /*float: left;*/
+        /*padding: 0.16rem;*/
+        /*width: 0.457rem;
+        height: 0.457rem;
+        text-align: center;
+        line-height: 0.457rem;*/
+    }
+
+    .aday{
+        float: left;
+        color: #2d2e3a;
+        width: 0.478rem;
+        height: 0.478rem;
+        text-align: center;
+        border-radius: 50%;
+        font-size: 0.14rem;
+        display: -webkit-box;
+        display: -moz-box;
+        display: box;
+        position:relative;
+        -webkit-box-align:center;
+        -moz-box-align:center;
+        box-align:center;
+        -webkit-box-pack:center;
+        -moz-box-pack:center;
+        box-pack:center;
+        -webkit-box-orient:vertical;
+        -moz-box-orient:vertical;
+        box-orient:vertical;
+
+    }
+
+    .disday{
+        color: rgb(207,207,207);
+    }
+
+    .calendar{
+        margin-bottom: 0.2rem;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .select_day{
+        background-color: #2d2e3a;
+        font-size: 0.16rem;
+        color: #ffffff;
+
+    }
+    .select_go_day{
+        /*background-color: #8d8dc3;*/
+        background-color: #2d2e3a;
+        color: #ffffff;
+    }
+
+    .price{
+        color:#ef5b4c;
+        font-size: 0.09rem;
+    }
+    .hide_price{
+        opacity: 0
+    ;color:#fff;
+        font-size: 0.09rem;
+    }
+    .select_go_price{
+        color:#FFFFFF;
+        font-size: 0.09rem;
+    }
+    .select_price{
+        color:#FFFFFF;
+        font-size: 0.09rem;
+    }
+
+</style>

src/pages/product/view/Star.vue

@@ -0,0 +1,67 @@
+<template lang="html">
+        <div v-if="allGray==false" class="ub ub-ac star_ary f1">
+            <img v-for="num in formatStar(value).all" src="./../../../../static/image/home/staro.png" alt="" class="ub star">
+            <img v-if="formatStar(value).half!=0" src="./../../../../static/image/home/starh.png" alt="" class="ub star">
+            <img v-for="num in formatStar(value).empty" src="./../../../../static/image/home/stare.png" alt="" class="ub star">
+        </div>
+        <div class="ub ub-ac star_ary f1" v-else >
+            <img v-for="num in formatStar(value).all" src="./../../../../static/image/home/stare.png" alt="" class="ub star">
+            <img v-if="formatStar(value).half!=0" src="./../../../../static/image/home/stare.png" alt="" class="ub star">
+            <img v-for="num in formatStar(value).empty" src="./../../../../static/image/home/stare.png" alt="" class="ub star">
+        </div>
+</template>
+
+<script>
+    export default {
+        name: "startShow",
+        props: {
+            starValue: {
+                // required:true,
+                default:'3.0',
+                type:[String, Number]
+            },
+            allGray: {
+                default:false,
+                type:[Boolean]
+            }
+        },
+        data() {
+            return {
+                value: ''
+            }
+        },
+        watch: {
+            starValue(cur, old) {
+                this.value = cur;
+            }
+        },
+        mounted() {
+            this.value = this.starValue;
+        },
+        methods: {
+            formatStar(value) {
+                if (value > 5) value = '5.0';
+                let star = (value - 0).toFixed(1) + '';
+                let arr = star.split('.');
+                let all = arr[0] - 0;
+                let half = arr[1] - 0;
+                if (half != 0) half = 1;
+                let empty = 5 - Math.ceil(star);
+                let starObj = {
+                    all,
+                    half,
+                    empty
+                }
+                return starObj;
+            }
+        }
+    }
+</script>
+
+<style lang="css" scoped>
+    .star {
+        width: 0.1rem;
+        height: 0.1rem;
+        margin: 0.01rem;
+    }
+</style>

src/pages/ticket/create_ticket_order.vue

@@ -0,0 +1,595 @@
+<template>
+    <div class="bg_color create_ticket_order">
+        <div id="body_mod" v-show="pageShow" class="ub ub-ver ui_hide" :class="bodyMod?'mod_fil':''">
+            <!--banner-->
+            <div id="show_img" @click="shareShowFun" class="ub ub-ae"
+                 style="width: 100%;height: 1.88rem;background-repeat: no-repeat;background-size: 100% 100%;"
+                 :style="backgroundImg">
+                <div  id="pro_cate_name" class="ub-f1 ulev1"
+                     style="color: #ffffff;background-color: rgba(44, 45, 58, 0.7);line-height: 1.0;padding: 0.08rem 0 0.08rem 0.12rem;">
+                    {{info.pro_cate_name}}<span style="font-size: 11px;color: #94dcd4">(点击分享)</span>
+                </div>
+            </div>
+            <!--产品介绍-->
+            <div class="ub ub-ver"
+                 style="padding: 0.1rem 0.12rem 0.15rem 0.12rem;background-color: #ffffff;border-bottom: 1px solid #e9ebee;;">
+                <div class="ulev1" id="prod_des" style="color: #2d2e3a;">{{info.des}}</div>
+                <div class="ub ub-ae ub-f1" style="padding-top: 0.24rem;">
+                    <div class="ub-f1" style="color: #686872;" id="sales_count">已售{{info.sales_count}}</div>
+                    <div class="ub-f1 ub ub-ae ub-pe" style="text-align: right;width: 1%;">
+                        <div id="show_price" style="font-size:0.18rem;color: #cc3333;line-height: 1.2;">
+                            ¥{{info.show_price}}
+                        </div>
+                        <span class="" style="color: #686872;;margin-left:0.05rem;line-height: 1.0;">元/人</span>
+                    </div>
+                </div>
+            </div>
+            <!--去程日期-->
+            <div id="date_select" class="ub"
+                 style="padding: 0.16rem 0.16rem 0.16rem 0.12rem;border-bottom: 1px solid #e9ebee;background-color: #ffffff;">
+                <div class="ub-f1 ulev1" style="color: #686872;line-height: 1.0;">去程日期</div>
+                <div class="ub-f1 ub ub-pe">
+                    <div id="run_date" class="ulev1" style="line-height: 1.0;color: #2d2e3a;padding-right: 0.1rem;"
+                         @click="selectDate">{{run_date}}
+                    </div>
+                    <div style="width: 0.08rem;height: 0.14rem;background-image: url(static/image/home/row.png);background-repeat: no-repeat;background-size: 100% 100%;"></div>
+                </div>
+            </div>
+            <!--票种-->
+            <div id="ticket_arr">
+                <div v-for="(dict,index) in ticketInfo" class="ub ticket"
+                     style="padding: 0.16rem 0.12rem;background-color: #ffffff;border-bottom: 1px solid #e9ebee;">
+                    <div class="ub-f1 ulev1" style="width: 1%;line-height: 1;color: #686872;">{{dict.prod_name}} <span
+                            class="ulev1" :data-price="dict.prod_price" style="line-height: 1;color: #cc3333;">¥{{dict.prod_price}}/人(均价)</span>
+                    </div>
+                    <div class="ub numBox" :init_max="dict.prod_count"
+                         style="border: solid 1px rgba(45,46,58,0.2);border-radius: 50px;width: 1rem;height: 0.3rem;">
+                        <div class="ub-f1 ub ub-ac ub-pc cut">
+                            <div :style="dict.leftFlag? 'background-image:url(static/image/home/Triangle_l_u.png)':'background-image:url(static/image/home/Triangle_l_d.png)'"
+                                 style="background-repeat: no-repeat;background-size: 100% 100%;width: 0.06rem;height: 0.1rem;"
+                                 @click="ticketNumSub(index)"></div>
+                        </div>
+                        <div class="ub-f2 ub ub-ac ub-pc ulev1 numberValue"
+                             style="width: 1%;line-height: 1.0;color: #2d2e3a;">{{dict.num}}
+                        </div>
+                        <div class="ub-f1 ub ub-ac ub-pc">
+                            <div :style="dict.rightFlag? 'background-image:url(static/image/home/Triangle_r_u.png)':'background-image:url(static/image/home/Triangle_r_d.png)'"
+                                 style="background-repeat: no-repeat;background-size: 100% 100%;width: 0.06rem;height: 0.1rem;"
+                                 @click="ticketNumAdd(index)"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="ub" style="padding: 0.12rem 0;background-color: #e9ebee;">
+                <div v-for="dict in tips" class="ub-f1 ub ub-ac ub-pc">
+                    <div style="background-size: 100% 100%;background-image: url(static/image/home/right.png);background-repeat: no-repeat;width: 0.11rem;height: 0.08rem;"></div>
+                    <div style="color: #686872;line-height: 1;">{{dict.title}}</div>
+                </div>
+            </div>
+
+            <!--评论-->
+            <div id="comment" class="ub">
+                <div class="ub-f1 ub">
+                    <div style="color: #686872;font-size: 14px;line-height: 1.0;">评分：</div>
+                    <star-view :star-value="info.star"></star-view>
+                    <div id="star_num" class="ub ub-ac" style="color: #686872;line-height: 1.0;padding-left: 0.04rem;">
+                        {{info.star}}分
+                    </div>
+                </div>
+                <div class="ub-f1 ub ub-pe" @click="lookComments">
+                    <div id="comment_count" class="ulev1"
+                         style="line-height: 1.0;color: #2d2e3a;padding-right: 0.1rem;">共{{info.comment_cnt}}条评论
+                    </div>
+                    <div style="width: 0.08rem;height: 0.14rem;background-image: url(./../../../static/image/home/row.png);background-repeat: no-repeat;background-size: 100% 100%;"></div>
+                </div>
+            </div>
+
+            <!--行程相关-->
+            <div class="ub header">
+                <div v-for="(dict,index) in descriptionList" class="ub-f1 ulev1 description"
+                     :class="dict.selected?'select_header':'normal_header'" @click="selectDescription(index)">
+                    {{dict.title}}
+                </div>
+            </div>
+            <div id="info" class="info" style="padding: 0.12rem;margin-bottom: 0.5rem;overflow: hidden;" v-html="des">
+            </div>
+
+            <!--下一步-->
+            <div id="next_btn" class="next ub ub-ac ub-pc ulev1" @click="buyOrder">下一步</div>
+        </div>
+        <!--日历-->
+        <div class="model" v-show="dateShow" @click="closeDate">
+            <div class="model_box animated" :class="dateFetch?'fadeInUp':'fadeInDown'" v-show="dateShow">
+                <div class="ub ub-ver">
+                    <div class="ub ub-ver">
+                        <div class="ub ub-pc">
+                            <div class="model_la"></div>
+                        </div>
+                        <div class="ub ub-ac"
+                             style="border-bottom: 1px solid #e9ebee;padding: 0.07rem 0.08rem 0.12rem 0.08rem;">
+                            <div class="ub-f1">
+                                <span class="ulev1 text_c_80" style="color: #686872;">选择乘车日期</span>
+                                <span id="go_sel_date" class="ulev1 text_c_80" style="display: none;"></span>
+                            </div>
+                            <div id="make_sure" class="text_c_2b ulev2"></div>
+                        </div>
+                    </div>
+                    <div class="ub ub-ver select_hei">
+                        <calendar-view @selectDateOp="selectDateOp" :dateList="info.date_list"
+                                       :select-go-date="run_date"></calendar-view>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-show="shareShow" class="fenxiang">
+            <img  :src="shareShowUrl" @click="shareShow = false" style="border: 2px solid #6d6d72;width: 250px;">
+        </div>
+    </div>
+</template>
+
+<script>
+    import {initialize, mpGetProdArr} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import {Toast, Swipe, SwipeItem, MessageBox, Indicator} from 'mint-ui';
+    import starView from './../product/view/Star';
+    import CalendarView from './../product/view/Calendar'
+    import info from "../../config/info";
+
+    export default {
+        name: "createTicketOrder",
+        data() {
+            return {
+                shareShow:false,
+                shareShowUrl:"",
+                pageShow: false,
+                info: {
+                    date_list: {}
+                },
+                backgroundImg: '',
+                num: 0,
+                count: '',
+                tips: [
+                    {title: '提前预定'},
+                    {title: '不退不改'},
+                    {title: '省心省力'},
+                    {title: '安全保障'},
+                ],
+                descriptionList: [
+                    {title: '预定须知', selected: true},
+                    {title: '行程说明', selected: false},
+                ],
+                des: '',
+                ticketInfo: [],
+                ticketNum: 0,
+                ticketPrice: 0,
+                dateShow: false,
+                dateFetch: false,
+                bodyMod: false,
+                run_date: '',
+            }
+        },
+        components: {
+            starView, CalendarView
+        },
+        mounted() {
+            this.load();
+        },
+        methods: {
+            shareShowFun(){
+                var url = window.location.href;
+                this.shareShow = true;
+                this.shareShowUrl = "http://fx.zhizhuchuxing.com/fx/?r=weChat/we-chat/q-code&qCode="+encodeURIComponent(url);
+            },
+            selectDateOp(params) {
+                this.run_date = params.run_date;
+                let param = {
+                    prod_cate_id: this.info.pro_cate_id,
+                    date:this.run_date
+                };
+                Indicator.open({
+                    spinnerType: 'fading-circle'
+                });
+                tool.delay(() => {
+                    mpGetProdArr(param).then(res => {
+                        Indicator.close();
+                        if (res.flag === false) {
+                            Toast({
+                                message: res.msg,
+                                duration: 2000
+                            });
+                            return false;
+                        } else {
+                            this.ticketInfo = res['data'].prod_arr;
+                            tool.log(this.ticketInfo);
+                            this.ticketInfo.forEach(function (item) {
+                                item.leftFlag = false;
+                                if (item.prod_count <= 0) {
+                                    item.rightFlag = false;
+                                } else {
+                                    item.rightFlag = true;
+                                }
+                                item.num = 0;
+                            })
+                        }
+
+                    }).catch(e => {
+                        Indicator.close();
+                        MessageBox.alert(info.infoApiError);
+                        return false;
+                    })
+                }, info.delayTime);
+            },
+            load() {
+
+                let params = {pro_cate_id: this.$route.query.pro_cate_id};
+                Indicator.open({
+                    spinnerType: 'fading-circle'
+                });
+                tool.delay(() => {
+                    initialize(params).then(res => {
+                        Indicator.close();
+                        if (res.flag === false) {
+                            Toast({
+                                message: res.msg,
+                                duration: 2000
+                            });
+                            tool.delay(() => {
+                                this.$router.go(-1);
+                            }, 2000);
+                            return false;
+                        } else {
+                            // 显示页面
+                            this.pageShow = !this.pageShow;
+
+                            this.info = res['data'];
+                            this.run_date = this.info.date;
+                            this.backgroundImg = {
+                                backgroundImage: `url(${this.info.show_img})`
+                            };
+                            this.des = this.info.booking_notice;
+                            this.ticketInfo = this.info.prod_arr;
+                            tool.log(this.ticketInfo)
+                            this.ticketInfo.forEach(function (item) {
+                                item.leftFlag = false;
+                                if (item.prod_count <= 0) {
+                                    item.rightFlag = false;
+                                } else {
+                                    item.rightFlag = true;
+                                }
+                                item.num = 0;
+                            })
+                        }
+
+                    }).catch(e => {
+                        Indicator.close();
+                        MessageBox.alert(info.infoApiError);
+                        tool.delay(() => {
+                            this.$router.go(-1);
+                        }, 2000);
+                        return false;
+                    })
+                }, info.delayTime);
+
+            },
+            selectDescription(index) {
+                this.descriptionList.map(x => x.selected = false);
+                this.descriptionList[index].selected = true;
+                if (index === 1) {
+                    this.des = this.info.trip_desc;
+                } else {
+                    this.des = this.info.booking_notice;
+                }
+            },
+            ticketNumSub(index) {
+                if (this.ticketInfo[index].num > 0) {
+                    this.ticketInfo[index].rightFlag = this.ticketInfo[index].rightFlag === false ? true : true;
+                    this.ticketInfo[index].num -= 1;
+                    this.ticketNum--;
+                    if (this.ticketInfo[index].num === 0) {
+                        this.ticketInfo[index].leftFlag = false;
+                    }
+                } else {
+                    this.ticketInfo[index].num = 0;
+                    this.ticketInfo[index].leftFlag = false;
+                }
+                this.$set(this.ticketInfo, index, this.ticketInfo[index])
+            },
+            ticketNumAdd(index) {
+                if (this.ticketInfo[index].num < this.ticketInfo[index].prod_count) {
+                    this.ticketInfo[index].num += 1;
+                    this.ticketNum++;
+                    this.ticketInfo[index].leftFlag = this.ticketInfo[index].leftFlag === false ? true : true;
+                    if (this.ticketInfo[index].num == this.ticketInfo[index].prod_count) {
+                        this.ticketInfo[index].rightFlag = false;
+                    }
+                } else {
+                    let instance = Toast('库存不足');
+                    setTimeout(() => {
+                        instance.close();
+                    }, 1000);
+                }
+                this.$set(this.ticketInfo, index, this.ticketInfo[index])
+            },
+            selectDate() {
+                this.dateShow = !this.dateShow;
+                this.dateFetch = !this.dateFetch;
+                this.bodyMod = !this.bodyMod;
+            },
+            closeDate() {
+                this.dateFetch = !this.dateFetch;
+                setTimeout(() => {
+                    this.dateShow = !this.dateShow;
+                    this.bodyMod = !this.bodyMod;
+                }, 400)
+            },
+            buyOrder() {
+                if (this.ticketNum === 0) {
+                    MessageBox.alert('请选择票种数量');
+//                    this.$messagebox.alert('请选择票种数量2')
+                } else {
+                    let ticket_arr = [];
+                    let total_price = 0;
+                    this.ticketInfo.forEach(function (item) {
+                        let info = {
+                            prod_id: item.prod_id,
+                            prod_count: item.num,
+                            prod_name: item.prod_name,
+                        };
+                        total_price = (total_price * 100 + item.num * item.prod_price * 100 - 0) / 100;
+                        ticket_arr.push(info);
+                    })
+                    this.ticketPrice = total_price;
+                    let params = {
+                        pro_cate_id: this.$route.query.pro_cate_id,
+                        pro_cate_name: this.info.pro_cate_name,
+                        start_date: this.run_date,
+                        prod_arr: ticket_arr,
+                        total_money: this.ticketPrice,
+                    };
+                    tool.setStorJson('fill_ticket_order', params);
+                    tool.$router.push(this, {
+                        name: 'fillTicketOrder',
+                        params: params,
+                    })
+                }
+            },
+            lookComments() {
+                tool.$router.push(this, {
+                    name: 'description_list',
+                    query: {
+                        pro_cate_id: this.$route.query.pro_cate_id,
+                    }
+                })
+            }
+        }
+    }
+</script>
+<style lang="scss" type="text/scss">
+    .create_ticket_order{
+        .info img {
+            max-width: 100%;
+        }
+    }
+</style>
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+
+    .header {
+        background-color: #ffffff;
+        box-shadow: 0 0.5px 3px 0 #e9ebee;
+        margin: 0.08rem 0;
+    }
+
+    .select_header {
+        color: #2d2e3a;
+        border-bottom: 2px solid #2d2e3a;
+        line-height: 1.0;
+        padding: 0.15rem 0;
+        text-align: center;
+    }
+
+    .normal_header {
+        line-height: 1.0;
+        color: #686872;
+        padding: 0.15rem 0;
+        text-align: center;
+    }
+
+    .next {
+        position: fixed;
+        left: 0.08rem;
+        right: 0.08rem;
+        bottom: 0.16rem;
+        border-radius: 100px;
+        height: 0.4rem;
+        line-height: 1.0;
+        background-color: #2d2e3a;
+        color: #FFFFFF;
+    }
+
+    .fenxiang{
+        position: fixed;
+        top: 0.5rem;
+        z-index: 1000;
+        width: 100%;
+        text-align: center;
+    }
+    #comment {
+        padding: 0.16rem 0.16rem 0.16rem 0.12rem;
+        border-bottom: 1px solid #e9ebee;
+        background-color: #ffffff;
+    }
+
+    .model {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        /*-webkit-filter: blur(6px);
+filter: blur(6px);*/
+        background-color: rgba(0, 0, 0, 0.25);
+        z-index: 100;
+    }
+
+    .model_box {
+        position: fixed;
+        height: 4.3rem;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: #fff;
+        -webkit-border-top-left-radius: 8px;
+        -webkit-border-top-right-radius: 8px;
+    }
+
+    .model_la {
+        width: 0.37rem;
+        height: 0.05rem;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, 0.2);
+        margin-top: 0.06rem;
+    }
+
+    .select_hei {
+        overflow: scroll;
+        height: 3.8rem;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .mod_fil {
+        -webkit-filter: blur(6px);
+        filter: blur(6px);
+    }
+
+    .animated {
+        -webkit-animation-duration: 0.4s;
+        animation-duration: 0.4s;
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+    }
+
+    @-webkit-keyframes fadeInUp {
+        0% {
+            /*opacity: 0;*/
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+        100% {
+            /*opacity: 1;*/
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    @keyframes fadeInUp {
+        0% {
+            /*opacity: 0;*/
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+        100% {
+            /*opacity: 1;*/
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    .fadeInUp {
+        -webkit-animation-name: fadeInUp;
+        animation-name: fadeInUp;
+    }
+
+    @-webkit-keyframes fadeInDown {
+        0% {
+            -webkit-transform: none;
+            transform: none;
+        }
+        100% {
+            -webkit-transform: none;
+            transform: none;
+        }
+    }
+
+    @keyframes fadeInDown {
+        0% {
+            -webkit-transform: none;
+            transform: none;
+        }
+        100% {
+            -webkit-transform: translate3d(0, 100%, 0);
+            transform: translate3d(0, 100%, 0);
+        }
+    }
+
+    .fadeInDown {
+        -webkit-animation-name: fadeInDown;
+        animation-name: fadeInDown;
+    }
+
+    .go_create_order {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        box-shadow: 0 -1px 19px 0 rgba(100, 150, 255, 0.15);
+    }
+
+    .create_left {
+        width: 1%;
+        padding-top: 0.1rem;
+        padding-bottom: 0.1rem;
+    }
+
+    .create_right {
+        color: #fff;
+        font-size: 0.18rem;
+        width: 1%;
+        background: #2d2e3a;
+        padding-top: 0.1rem;
+        padding-bottom: 0.1rem;
+    }
+
+    .weui_mask_transparent {
+        position: fixed;
+        z-index: 1000;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .weui_toast {
+        position: fixed;
+        z-index: 50000;
+        width: 7.6em;
+        min-height: 7.6em;
+        top: 180px;
+        left: 50%;
+        margin-left: -3.8em;
+        background: rgba(40, 40, 40, .75);
+        text-align: center;
+        border-radius: 5px;
+        color: #fff;
+    }
+
+    .weui_loading {
+        position: absolute;
+        width: 0;
+        z-index: 1;
+        left: 29%;
+        top: 20%;
+    }
+
+    .weui_loading_toast .weui_toast_content {
+        margin-top: 64%;
+        font-size: 14px;
+        color: #fff;
+    }
+
+    .weui_toast_content {
+        margin: 0 0 15px;
+    }
+</style>

src/pages/ticket/fill_ticket_order.vue

@@ -0,0 +1,294 @@
+<template>
+    <div class="bg_color">
+        <div class="big_div" v-show="pageShow">
+            <div class="panel">
+                <div class="top_info">
+                    <div class="go">
+                        <div class="one ub">
+                            <div class="left">产品名称</div>
+                            <div id="pro_cate_name" class="right ub-f1">{{info.pro_cate_name}}</div>
+                        </div>
+                        <div class="one ub">
+                            <div class="left">出行日期</div>
+                            <div id="start_date" class="right ub-f1">{{info.date}}</div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="one ub">
+                            <div class="left">行程</div>
+                            <div id="info_ticket" class="right ub-f1">{{info.prod_arr_str}}</div>
+                        </div>
+                    </div>
+                </div>
+                <!--top_info end-->
+                <div class="bottom_customer" style="margin-top: 0.2rem;margin-bottom:0.2rem;background: white;">
+                    <div class="one ub">
+                        <div class="left2">预定人</div>
+                        <input id="contacts_name" class="right ub ub-f1" v-model="book_people_name" type="text" placeholder="必填，姓名" />
+                    </div>
+                    <div class="one ub">
+                        <div class="left2">手机号</div>
+                        <input id="contacts_phone" class="right ub ub-f1" v-model="book_people_phone" maxlength="11" type="tel" placeholder="必填，用于接收预订短信">
+                    </div>
+                    <div class="one ub">
+                        <div class="left" style="color: #2d2e3a;">身份证号</div>
+                        <input id="contacts_cardId" class="right ub ub-f1" v-model="book_people_id" type="text" placeholder="非必填" @blur="cardId">
+                    </div>
+                </div>
+                <div style="margin-bottom:0.2rem;background: white;">
+                    <div class="one ub">
+                        <div class="left2" style="color: #2d2e3a;">备注</div>
+                            <textarea class="right ub ub-f1" style="height: 0.8rem;width: auto;margin: auto 5px" placeholder=" 必填，请填写已购车票出发时间以及所在酒店名称" v-model="remark">
+
+                            </textarea>
+                    </div>
+                </div>
+            </div>
+            <!--去下单-->
+            <div class="go_create_order">
+                <div class="ub">
+                    <div class="create_left ub ub-f1 ub-pc ub-ac" style="background: white;opacity: 1;">
+                        <span class="ulev1">金额：<span class="ulev1">￥</span></span>
+                        <span id="total_money" class="ulev1" style="margin-left: -0.06rem;">{{info.total_money}}</span>
+                    </div>
+                    <div id="btn_create_order" class="create_right ub ub-f1 ub-pc ub-ac" @click="buyOrder">去下单</div>
+                </div>
+            </div>
+        </div>
+        <!--转圈圈-->
+        <div id="loadingToast" class="weui_loading_toast" v-show="!loadingToast">
+            <div class="weui_mask_transparent"></div>
+            <div class="weui_toast">
+                <div class="weui_loading">
+                    <img style="width: 0.4rem;" src="./../../../static/image/home/loading2.gif" />
+                </div>
+                <p class="weui_toast_content">查询中...</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import tool from '../../config/mUtil/tool'
+    import info from './../../config/info'
+    import { Toast, Indicator, Swipe, SwipeItem, MessageBox } from 'mint-ui';
+    import dateUtil from './../../config/mUtil/dateUtil'
+    import cardId from '../../config/mUtil/cardId'
+    import {makeOrder} from '../../service/httpService'
+
+    export default {
+        name: "fillTicketOrder",
+        data() {
+            return {
+                remark:"",
+                pageShow: false,
+                loadingToast: false,
+                info:{},
+                book_people_phone:'',
+                book_people_name:'',
+                book_people_id:'',
+            }
+        },
+        mounted(){
+            this.load()
+        },
+        watch:{
+            book_people_phone(old,cur) {
+                this.book_people_phone = this.book_people_phone.replace(/[^\d]/g,'');
+            }
+        },
+        methods:{
+            load(){
+                let param = tool.getStorJson('fill_ticket_order');
+                tool.log(param);
+                if(!param){
+                    this.$router.push({
+                        name:'home'
+                    })
+                } else {
+                    this.pageShow = !this.pageShow;
+                    this.loadingToast = !this.loadingToast;
+
+                    this.info = param;
+
+                    // 处理日期
+                    let month = dateUtil.getMonthByDate(this.info.start_date);
+                    let day = dateUtil.getDayByDate(this.info.start_date);
+                    this.info.date = month+'月'+day+'日';
+
+                    // 游玩人数处理
+                    let play_people_str = '';
+                    this.info.prod_arr.forEach(function(dict){
+                        if(dict.prod_count >0){
+                            play_people_str += dict.prod_name.replace('票','') + dict.prod_count + ' ';
+                        }
+                    });
+                    this.info.prod_arr_str = play_people_str;
+
+                }
+            },
+            cardId(){
+                if(!this.book_people_id === "" && cardId.getCardIdInfo(this.book_people_id).isCard===false){
+                    Toast('身份证号不正确')
+                }
+            },
+            buyOrder(){
+                if(this.book_people_name===''){
+                    MessageBox.alert('请输入预定人');
+                    return;
+                }
+                if(this.book_people_phone===''){
+                    MessageBox.alert('请输入手机号');
+                    return;
+                } else if(this.book_people_phone.length !== 11){
+                    MessageBox.alert('手机号位数不正确，请重新输入');
+                    return;
+                }
+
+                // if(this.book_people_id===''){
+                //     MessageBox.alert('请输入身份证');
+                //     return;
+                // } else if(!this.book_people_id === "" && !cardId.getCardIdInfo(this.book_people_id).isCard) {
+                //     MessageBox.alert('身份证号不正确，请重新输入');
+                //     return;
+                // }
+
+                let _data = {
+                    remark:this.remark,
+                    pro_cate_id: this.info.pro_cate_id,
+                    start_date: this.info.start_date,
+                    prod_arr: JSON.stringify(this.info.prod_arr),
+                    contacts_name: this.book_people_name,
+                    contacts_phone: this.book_people_phone,
+                    contacts_ID: this.book_people_id
+                };
+                Indicator.open({
+                    spinnerType:'fading-circle'
+                });
+                tool.delay(()=>{
+                    makeOrder(_data).then(res=>{
+                        Indicator.close();
+                        debugger;
+                        if(res.flag===false){
+                            MessageBox.alert(res.msg);
+                        } else {
+                            window.location.href = res.data.pay_url;
+                        }
+                    }).catch(e=>{
+                        Indicator.close();
+                        MessageBox.alert(tool.infoApiError);
+                    })
+                },info.delayTime)
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+    .go,
+    .back,
+    .info {
+        background: white;
+        margin-top: 0.06rem;
+    }
+
+    .one,
+    .two,
+    .three {
+        padding-top: 0.16rem;
+        padding-bottom: 0.16rem;
+        border-bottom: 1px solid #e9ebee;
+    }
+
+    .left {
+        padding-left: 0.12rem;
+        font-size: 0.14rem;
+        color: #96969c;
+    }
+
+    .left2 {
+        padding-left: 0.26rem;
+        font-size: 0.14rem;
+        color: #96969c;
+    }
+
+    .right {
+        padding-left: 0.16rem;
+        font-size: 0.14rem;
+        color: #686872;
+        padding-right: 0.16rem;
+    }
+
+    .bottom_customer .left2 {
+        color: #2d2e3a;
+    }
+
+    .bottom_customer .right {
+        color: #2d2e3a;
+    }
+
+    .go_create_order {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        box-shadow: 0 -1px 19px 0 rgba(100, 150, 255, 0.15);
+    }
+
+    .create_left {
+        width: 1%;
+        padding-top: 0.1rem;
+        padding-bottom: 0.1rem;
+    }
+
+    .create_right {
+        color: #fff;
+        font-size: 0.18rem;
+        width: 1%;
+        background: #2d2e3a;
+        padding-top: 0.1rem;
+        padding-bottom: 0.1rem;
+    }
+
+    .weui_mask_transparent {
+        position: fixed;
+        z-index: 1000;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .weui_toast {
+        position: fixed;
+        z-index: 50000;
+        width: 7.6em;
+        min-height: 7.6em;
+        top: 180px;
+        left: 50%;
+        margin-left: -3.8em;
+        background: rgba(40, 40, 40, .75);
+        text-align: center;
+        border-radius: 5px;
+        color: #fff;
+    }
+
+    .weui_loading {
+        position: absolute;
+        width: 0;
+        z-index: 1;
+        left: 29%;
+        top: 20%;
+    }
+
+    .weui_loading_toast .weui_toast_content {
+        margin-top: 64%;
+        font-size: 14px;
+        color: #fff;
+    }
+
+    .weui_toast_content {
+        margin: 0 0 15px;
+    }
+</style>

src/pages/user/add_common.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="bg_color">
+        <div style="padding: 0.12rem 0.12rem 0.09rem 0.12rem;height: 2.64rem;background-color: #ffffff;">
+            <div class=""><textarea class="info"  rows="5" style="width: 100%;height: 2.2rem;" v-model="content" @input="checkWordCount"></textarea></div>
+            <div class="ub-f1 count_div ub ub-pe" >
+                <span class="count" :style="font_color_flag?'color:red':''">{{word_count}}</span>
+                <span>/300</span>
+            </div>
+        </div>
+        <div class="ub ub-ac" style="padding: 0.11rem 0.12rem;background-color: #ffffff;margin-top: 0.08rem;">
+            <div class="ub-f1 ub ub-ac" style="width: 1%;">
+                <div class="ulev1" style="color: #686872;font-size: 14px;line-height: 1.0;">评分：</div>
+                <div id="star_par" class="ub ub-ac">
+                    <div v-for="(item,index) in star_arr" class="ub-f1 star_btn" :style="item.flag?'backgroundImage:url(static/image/home/staro.png)':'backgroundImage:url(static/image/home/stare.png)'" @click="clickStar(index)"></div>
+                </div>
+            </div>
+            <div class="ub ub-pe"><div class="star ulev1" style="color: #2d2e3a;line-height: 1;">{{count}}</div><div style="line-height: 1;color: #2D2E3A;" class="ulev1">分</div></div>
+        </div>
+        <div class="ulev1 send tx-c" style="margin:0.2rem 0.08rem 0 0.08rem;padding:0.13rem 0;border-radius: 100px;background-color: #2d2e3a;line-height: 1.0;color: #ffffff;" @click="saveCommon">提交</div>
+    </div>
+</template>
+
+<script>
+    import {addCommon} from '../../service/httpService'
+    import { Toast,MessageBox } from 'mint-ui';
+    import tool from '../../config/mUtil/tool'
+
+    export default {
+        name: "add_common",
+        data(){
+            return {
+                star_arr:[
+                    {flag:false},
+                    {flag:false},
+                    {flag:false},
+                    {flag:false},
+                    {flag:false},
+                ],
+                count:0,
+                content:'',
+                word_count:0,
+                font_color_flag:false,
+            }
+        },
+        methods:{
+            clickStar(index){
+                this.star_arr.map(x => x.flag = false);
+                for(let i=0;i<=index;i++){
+                    this.star_arr[i].flag = true;
+                }
+                this.count = (index+1).toFixed(1);
+            },
+            checkWordCount(){
+                let num = this.content.length;
+                if(num >= 300){
+                    let t_val = this.content.substr(0,299);
+                    this.content = t_val;
+                    this.word_count = 300;
+                } else if(num >=290) {
+                    this.font_color_flag = true;
+                    this.word_count = num;
+                } else {
+                    this.font_color_flag = false;
+                    this.word_count = num;
+                }
+            },
+            saveCommon() {
+                let info = this.$route.query;
+                let prod_id = info.prod_id;
+                let travel_id = info.travel_id;
+                let star_count = 0;
+                if(this.content === ''){
+                    MessageBox.alert('请输入对我们的评价哦！');
+                    // return false;
+                }
+                if(this.count == 0) {
+                    star_count = '5.0';
+                    this.count = '5.0'
+                }
+
+                let data = {
+                    travel_id : travel_id,
+                    prod_id : prod_id,
+                    content : this.content,
+                    star : this.count
+                }
+                tool.log(data)
+                addCommon(data).then(res=>{
+                    if(res.flag===false){
+                        MessageBox.alert(res.msg);
+                    } else {
+                        Toast({
+                            message: '提交评价成功',
+                            duration: 500
+                        });
+                        let that = this;
+                        tool.delay(function(){
+                            that.$router.go(-1);
+                        },1000)
+                    }
+                }).catch(e=>{
+                    MessageBox.alert(tool.infoApiError);
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped type="text/css" lang="scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+
+    .count_div span {
+        color: #686872;
+        line-height: 1.0;
+    }
+    .star_btn {
+        width: 0.17rem;
+        height: 0.17rem;
+        margin: 0.04rem;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+</style>

src/pages/user/description_list.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="bg_color">
+        <div class="big_div">
+            <div id="list" class="list" style="padding: 0.1rem 0 0.1rem 0;">
+                <div v-if="info.length===0" class="ub ub-ac ub-pc ulev1" style="padding:0.3rem 0;">暂无相关评论</div>
+                <div v-else v-for="dict in info" class="one_line">
+                    <div class="list_top ub ub-ac">
+                        <div class="user_icon" :style="dict.head_img"></div>
+                        <div class="ub ub-f1" style="margin-left:0.04rem;">
+                            <div class="ub-f1">{{dict.u_name}}</div>
+                            <div class="ub-f1 text_right" style="font-size:0.12rem;color: #686872;">{{dict.create_time}}</div>
+                        </div>
+                    </div>
+                    <div class="list_middle">{{dict.content}}</div>
+                    <div class="list_bottom">
+                        <div class="ub ub-pe">
+                            <div style="color: #686872;font-size: 14px;line-height: 1.0;">评分：</div>
+                            <star-view :star-value="dict.star"></star-view>
+                            <div class="ub ub-ac" style="color：#686872;font-size:0.12rem;line-height: 1.0;">{{dict.star}}分</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {getProdComment} from '../../service/httpService';
+    import starView from '../product/view/Star'
+    import tool from '../../config/mUtil/tool'
+
+    export default {
+        name: "description_list",
+        data(){
+            return {
+                info:{}
+            }
+        },
+        components:{
+            starView,
+        },
+        mounted(){
+            this.httpBaseInfo();
+        },
+        methods:{
+            httpBaseInfo(){
+                let _data = {
+                    page:"1",
+                    page_size:"999",
+                    pro_cate_id:this.$route.query.pro_cate_id
+                };
+                getProdComment(_data).then(res=>{
+                    if(res.flag===false){
+                        this.$alert(res.msg);
+                    } else {
+                        this.info = res.data.list;
+                        // 处理图片和分数
+                        for(let i=0;i<this.info.length;i++){
+                            this.info[i].head_img = this.info[i].head_img?this.info[i].head_img:'./../../../static/image/mycenter/user_default_icon.png';
+                            this.info[i].head_img = {
+                                backgroundImage:`url(${this.info[i].head_img})`
+                            };
+                            this.info[i].star = (this.info[i].star-0).toFixed(1);
+                        }
+                    }
+                }).catch(e=>{
+                    this.$alert(tool.infoApiError);
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped type="text/css" lang="scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+    .start{
+        width: 0.1rem;height: 0.1rem;margin: 0.01rem;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+    }
+    .staro{
+        background-image: url(../../../static/image/home/staro.png);
+    }
+    .stare{
+        background-image: url(../../../static/image/home/stare.png);
+    }
+    .starh{
+        background-image: url(../../../static/image/home/starh.png);
+    }
+    .one_line{
+        padding: 10px 0 10px 0;
+        box-shadow: 0 0.5px 3px 0 #e9ebee;
+        margin-bottom: 5px;
+        background: white;
+    }
+    .list_top{
+        padding:0.08rem 0.12rem 0.08rem 0.12rem;
+        border-bottom: 1px solid #e9ebee;
+    }
+    .user_icon{
+        width:0.13rem;height:0.13rem;
+        background-image: url(../../../static/image/home/staro.png);
+        background-repeat: no-repeat;
+        background-size: 0.13rem 0.13rem;
+        border-radius: 0.13rem;
+    }
+    .list_middle{
+        padding:0.12rem 0.12rem 0.24rem 0.12rem;
+    }
+    .list_bottom{
+        padding-bottom: 0.12rem;
+        padding-right: 0.12rem;
+    }
+    .text_right {
+        text-align: right;
+    }
+</style>

src/pages/user/gt.js

@@ -0,0 +1,277 @@
+/* initGeetest 1.0.0
+ * 用于加载id对应的验证码库，并支持宕机模式
+ * 暴露 initGeetest 进行验证码的初始化
+ * 一般不需要用户进行修改
+ */
+var gtInit=(function (global, factory) {
+    "use strict";
+    if (typeof module === "object" && typeof module.exports === "object") {
+        // CommonJS
+        module.exports = global.document ?
+            factory(global, true) :
+            function (w) {
+                if (!w.document) {
+                    throw new Error("Geetest requires a window with a document");
+                }
+                return factory(w);
+            };
+    } else {
+        factory(global);
+    }
+})(typeof window !== "undefined" ? window : this, function (window, noGlobal) {
+    "use strict";
+    if (typeof window === 'undefined') {
+        throw new Error('Geetest requires browser environment');
+    }
+    var document = window.document;
+    var Math = window.Math;
+    var head = document.getElementsByTagName("head")[0];
+
+    function _Object(obj) {
+        this._obj = obj;
+    }
+
+    _Object.prototype = {
+        _each: function (process) {
+            var _obj = this._obj;
+            for (var k in _obj) {
+                if (_obj.hasOwnProperty(k)) {
+                    process(k, _obj[k]);
+                }
+            }
+            return this;
+        }
+    };
+    function Config(config) {
+        var self = this;
+        new _Object(config)._each(function (key, value) {
+            self[key] = value;
+        });
+    }
+
+    Config.prototype = {
+        api_server: 'api.geetest.com',
+        protocol: 'http://',
+        type_path: '/gettype.php',
+        fallback_config: {
+            slide: {
+                static_servers: ["static.geetest.com", "dn-staticdown.qbox.me"],
+                type: 'slide',
+                slide: '/static/js/geetest.0.0.0.js'
+            },
+            fullpage: {
+                static_servers: ["static.geetest.com", "dn-staticdown.qbox.me"],
+                type: 'fullpage',
+                fullpage: '/static/js/fullpage.0.0.0.js'
+            }
+        },
+        _get_fallback_config: function () {
+            var self = this;
+            if (isString(self.type)) {
+                return self.fallback_config[self.type];
+            } else if (self.new_captcha) {
+                return self.fallback_config.fullpage;
+            } else {
+                return self.fallback_config.slide;
+            }
+        },
+        _extend: function (obj) {
+            var self = this;
+            new _Object(obj)._each(function (key, value) {
+                self[key] = value;
+            })
+        }
+    };
+    var isNumber = function (value) {
+        return (typeof value === 'number');
+    };
+    var isString = function (value) {
+        return (typeof value === 'string');
+    };
+    var isBoolean = function (value) {
+        return (typeof value === 'boolean');
+    };
+    var isObject = function (value) {
+        return (typeof value === 'object' && value !== null);
+    };
+    var isFunction = function (value) {
+        return (typeof value === 'function');
+    };
+    var callbacks = {};
+    var status = {};
+    var random = function () {
+        return parseInt(Math.random() * 10000) + (new Date()).valueOf();
+    };
+    var loadScript = function (url, cb) {
+        var script = document.createElement("script");
+        script.charset = "UTF-8";
+        script.async = true;
+        script.onerror = function () {
+            cb(true);
+        };
+        var loaded = false;
+        script.onload = script.onreadystatechange = function () {
+            if (!loaded &&
+                (!script.readyState ||
+                    "loaded" === script.readyState ||
+                    "complete" === script.readyState)) {
+
+                loaded = true;
+                setTimeout(function () {
+                    cb(false);
+                }, 0);
+            }
+        };
+        script.src = url;
+        head.appendChild(script);
+    };
+    var normalizeDomain = function (domain) {
+        return domain.replace(/^https?:\/\/|\/$/g, '');
+    };
+    var normalizePath = function (path) {
+        path = path.replace(/\/+/g, '/');
+        if (path.indexOf('/') !== 0) {
+            path = '/' + path;
+        }
+        return path;
+    };
+    var normalizeQuery = function (query) {
+        if (!query) {
+            return '';
+        }
+        var q = '?';
+        new _Object(query)._each(function (key, value) {
+            if (isString(value) || isNumber(value) || isBoolean(value)) {
+                q = q + encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&';
+            }
+        });
+        if (q === '?') {
+            q = '';
+        }
+        return q.replace(/&$/, '');
+    };
+    var makeURL = function (protocol, domain, path, query) {
+        domain = normalizeDomain(domain);
+
+        var url = normalizePath(path) + normalizeQuery(query);
+        if (domain) {
+            url = protocol + domain + url;
+        }
+
+        return url;
+    };
+    var load = function (protocol, domains, path, query, cb) {
+        var tryRequest = function (at) {
+
+            var url = makeURL(protocol, domains[at], path, query);
+            loadScript(url, function (err) {
+                if (err) {
+                    if (at >= domains.length - 1) {
+                        cb(true);
+                    } else {
+                        tryRequest(at + 1);
+                    }
+                } else {
+                    cb(false);
+                }
+            });
+        };
+        tryRequest(0);
+    };
+    var jsonp = function (domains, path, config, callback) {
+        if (isObject(config.getLib)) {
+            config._extend(config.getLib);
+            callback(config);
+            return;
+        }
+        if (config.offline) {
+            callback(config._get_fallback_config());
+            return;
+        }
+        var cb = "geetest_" + random();
+        window[cb] = function (data) {
+            if (data.status === 'success') {
+                callback(data.data);
+            } else if (!data.status) {
+                callback(data);
+            } else {
+                callback(config._get_fallback_config());
+            }
+            window[cb] = undefined;
+            try {
+                delete window[cb];
+            } catch (e) {
+            }
+        };
+        load(config.protocol, domains, path, {
+            gt: config.gt,
+            callback: cb
+        }, function (err) {
+            if (err) {
+                callback(config._get_fallback_config());
+            }
+        });
+    };
+    var throwError = function (errorType, config) {
+        var errors = {
+            networkError: '网络错误'
+        };
+        if (typeof config.onError === 'function') {
+            config.onError(errors[errorType]);
+        } else {
+            throw new Error(errors[errorType]);
+        }
+    };
+    var detect = function () {
+        return !!window.Geetest;
+    };
+    if (detect()) {
+        status.slide = "loaded";
+    }
+    var initGeetest = function (userConfig, callback) {
+        var config = new Config(userConfig);
+        if (userConfig.https) {
+            config.protocol = 'https://';
+        } else if (!userConfig.protocol) {
+            config.protocol = window.location.protocol + '//';
+        }
+        jsonp([config.api_server || config.apiserver], config.type_path, config, function (newConfig) {
+            var type = newConfig.type;
+            var init = function () {
+                config._extend(newConfig);
+                callback(new window.Geetest(config));
+            };
+            callbacks[type] = callbacks[type] || [];
+            var s = status[type] || 'init';
+            if (s === 'init') {
+                status[type] = 'loading';
+                callbacks[type].push(init);
+                load(config.protocol, newConfig.static_servers || newConfig.domains, newConfig[type] || newConfig.path, null, function (err) {
+                    if (err) {
+                        status[type] = 'fail';
+                        throwError('networkError', config);
+                    } else {
+                        status[type] = 'loaded';
+                        var cbs = callbacks[type];
+                        for (var i = 0, len = cbs.length; i < len; i = i + 1) {
+                            var cb = cbs[i];
+                            if (isFunction(cb)) {
+                                cb();
+                            }
+                        }
+                        callbacks[type] = [];
+                    }
+                });
+            } else if (s === "loaded") {
+                init();
+            } else if (s === "fail") {
+                throwError('networkError', config);
+            } else if (s === "loading") {
+                callbacks[type].push(init);
+            }
+        });
+    };
+    window.initGeetest = initGeetest;
+    return initGeetest;
+});
+export default {gtInit};

src/pages/user/order_detail.vue

@@ -0,0 +1,582 @@
+<template>
+    <div class="bg_color" style="background-color: #e6e6e6">
+        <div class="big_div" style="display: block;">
+
+            <!--  巴士  车票 上门接 category_id=1  -->
+            <div class="box" v-if="(category_id==1 || category_id==4 || category_id==5) && info" style="background-color: white;padding-bottom:1rem;">
+                <div class="box_top">
+                    <div style="background-color: white">
+                        <div class="one ub " v-bind:class="{'left_border1':order_status==1}"
+                             style="background: white;padding: 0.14rem 0;margin: 0 0.15rem">
+                            <div class="ub ulev0" style="color:#2d2e3a;">{{order_status_des}}订单</div>
+                            <div class="ub ulev0 ub-f1 ub-pe top-right-type">
+                                {{category_name}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ub area" v-if="category_id!=4"
+                         style="background: white;padding: 0.12rem 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">上车站点</div>
+                        <div class="ub ulev1 ub-f1 right">
+                            {{start_area}}
+                        </div>
+                    </div>
+                    <div class="ub area" v-if="category_id!=4"
+                         style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">到达地点</div>
+                        <div class="ub ulev1 ub-f1 right" style="margin-left: 0.22rem;color: #686872;">
+                            {{end_area}}
+                        </div>
+                    </div>
+                    <div class="ub" v-if="category_id==4" style="background: white;padding: 0.12rem 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">出游时间</div>
+                        <div class="ub ulev1 ub-f1 right"
+                             style="margin-left: 0.22rem;color: #686872;">
+                            {{start_date.substr(-5)=='00:00' ? start_date.substr(0,10):start_date}}
+                            &emsp;出发
+                        </div>
+                    </div>
+                    <div class="ub" style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">预订数量</div>
+                        <div v-if="prod_info" class="ub ulev1 ub-f1 right"
+                             style="margin-left: 0.2rem;color: #686872;" v-html="prod_info">
+                        </div>
+                        <div v-else class="ub ulev1 ub-f1 right"
+                             style="margin-left: 0.2rem;color: #686872;">{{prod_cnt}}人
+                        </div>
+                    </div>
+                    <div class="ub" style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">联系人</div>
+                        <div class="ub ulev1 ub-f1 ub-ver" style="margin-left: 0.22rem;">
+                            <div class="ub ulev1 right-color" style="color: #686872;">{{contacts_name}}
+                            </div>
+                            <div class="ub ulev1 right-color" style="color: #686872;margin-top: 0.06rem;">
+                                {{contacts_phone}}
+                            </div>
+                            <div v-show="contacts_id" class="ub ulev1 right-color"
+                                 style="color: #686872;margin-top: 0.06rem;">{{contacts_id}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ub" style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">订单号</div>
+                        <div class="ub ulev1 ub-f1 right" style="margin-left: 0.22rem;color: #686872;">
+                            {{order_id}}
+                        </div>
+                    </div>
+                    <div v-show="category_id==1" class="ub"
+                         style="background: white;padding: 0 0.12rem 0.21rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">保险</div>
+                        <div v-if="contacts_num!=0" class="ub ulev1 ub-f1 right"
+                             style="margin-left: 0.22rem;color: #686872;">意外乘车险 × {{contacts_num}}
+                        </div>
+                        <div v-else class="ub ulev1 ub-f1 right"
+                             style="margin-left: 0.22rem;color: #686872;">未购
+                        </div>
+                    </div>
+                    <div style="background: white">
+                        <div class="two ub"
+                             style="background: white;padding: 0.175rem 0 0.21rem 0.05rem; margin: 0 0.15rem;">
+                            <div class="ub ulev1 ub-pe ub-ac" style="color:#96969c;width: 0.7rem;;line-height: 1;">总额
+                            </div>
+                            <div class="ub ulev1 ub-f1 right ub-ac"
+                                 style="margin-left: 0.22rem;color:#f45a36;line-height: 1;font-size: 0.2rem">
+                                <span style="font-size: 0.12rem;line-height: 1;color:#f45a36">￥</span>{{total_money}}
+                            </div>
+                            <div v-show="order_status==2" @click="cancel" class="ub ulev1 ub-ac ub-pc"
+                                 style="color:#333333;background: #e6e6e6;width: 0.68rem;height: 0.26rem;border-radius: 0.5rem;">
+                                退票
+                            </div>
+                        </div>
+                    </div>
+                    <div v-if="contacts_num!=0">
+                        <div class="ub" style="background: white;padding-left:0.2rem;padding-right:0.12rem;">
+                            <div class="ub ulev0 ub-pe" style="color:#96969c;width: 0.7rem;;">
+                                <span v-if="category_id==4" class="prod_name">自由行产品</span>
+                                <span v-else class="prod_name">巴士车票</span>
+                            </div>
+                            <div class="ub ulev0 ub-f1 right"
+                                 style="margin-left: 0.22rem;color: #f45a36;">
+                               <span v-for="(val,index) in bus_tickets" style="color: #f45a36;">
+                                   ￥{{val.unit_price}}<span style="color: #686872"> × </span>{{val.count}}张
+                                   <span v-show="index+1<bus_tickets.length" style="color: #686872"> + </span>
+                               </span>
+                            </div>
+                        </div>
+                        <div class="ub" style="background: white;padding: 0.12rem 0.12rem 0.19rem 0.2rem;">
+                            <div class="ub ulev0 ub-pe" style="color:#96969c;width: 0.7rem;;">
+                                <span v-if="category_id ==4" class="insurance_name">旅行意外险</span>
+                                <span v-else class="insurance_name">乘车意外险</span>
+                            </div>
+                            <div class="ub ulev0 ub-f1 right"
+                                 style="margin-left: 0.22rem;color: #f45a36;">
+                                ￥{{insurance_price}}<span style="color: #686872"> × </span>{{contacts_num}}张
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="order_status==1" @click="go_pay" class="box_button ub ub-ac ub-pc ulev1"
+                     style="margin: 0.2rem 0.08rem 0;padding: 0.11rem 0;background-color: #2d2e3a;border-radius: 100px;color: #ffffff;">
+                    立即支付
+                </div>
+                <div class="box_rule1" style="display: none;">查看退票规则</div>
+            </div>
+
+            <!--门票-->
+            <div class="box" v-if="category_id==2 && info" style="background-color: white;padding-bottom:1rem;">
+                <div class="box_top">
+                    <div style="background-color: white">
+                        <div class="one ub " v-bind:class="{'left_border1':order_status==1}"
+                             style="background: white;padding: 0.14rem 0;margin: 0 0.15rem">
+                            <div class="ub ulev0" style="color:#2d2e3a;">{{order_status_des}}订单</div>
+                            <div class="ub ulev0 ub-f1 ub-pe top-right-type">
+                                {{category_name}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ub" style="background: white;padding: 0.12rem 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">出游时间</div>
+                        <div class="ub ulev1 ub-f1 right"
+                             style="margin-left: 0.22rem;color: #686872;">{{start_date.substr(0,10)}}&emsp;入园
+                        </div>
+                    </div>
+                    <div class="ub" style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">预订数量</div>
+                        <div v-if="prod_info" class="ub ulev1 ub-f1 right"
+                             style="margin-left: 0.2rem;color: #686872;" v-html="prod_info">
+                        </div>
+                        <div v-else id="" class="ub ulev1 ub-f1 right"
+                             style="margin-left: 0.2rem;color: #686872;">{{prod_cnt}}人
+                        </div>
+                    </div>
+                    <div class="ub" style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">联系人</div>
+                        <div class="ub ulev1 ub-f1 ub-ver right">
+                            <div class="ub ulev1 right-color">{{contacts_name}}
+                            </div>
+                            <div class="ub ulev1 right-color" style="margin-top: 0.06rem;">
+                                {{contacts_phone}}
+                            </div>
+                            <div class="ub ulev1 right-color"
+                                 style="margin-top: 0.06rem;">{{contacts_id}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ub" style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">订单号</div>
+                        <div class="ub ulev1 ub-f1 right" style="margin-left: 0.22rem;color: #686872;">
+                            {{order_id}}
+                        </div>
+                    </div>
+                    <div style="background: white">
+                        <div class="two ub"
+                             style="background: white;padding: 0.175rem 0 0.21rem 0.05rem; margin: 0 0.15rem;">
+                            <div class="ub ulev1 ub-pe ub-ac" style="color:#96969c;width: 0.7rem;;line-height: 1;">总额
+                            </div>
+                            <div class="ub ulev1 ub-f1 right ub-ac"
+                                 style="margin-left: 0.22rem;color:#f45a36;line-height: 1;font-size: 0.2rem">
+                                <span style="font-size: 0.12rem;line-height: 1;color:#f45a36">￥</span>{{total_money}}
+                            </div>
+                            <div v-if="order_status==2" @click="cancel" class="ub ulev1 ub-ac ub-pc"
+                                 style="color:#333333;background: #e6e6e6;width: 0.68rem;height: 0.26rem;border-radius: 0.5rem;">
+                                退票
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="order_status==1" @click="go_pay" class="box_button ub ub-ac ub-pc ulev1"
+                     style="margin: 0.2rem 0.08rem 0;padding: 0.11rem 0;background-color: #2d2e3a;border-radius: 100px;color: #ffffff;">
+                    立即支付
+                </div>
+                <div class="box_rule1" style="display: none;">查看退票规则</div>
+            </div>
+
+            <!-- 酒店 -->
+            <div class="box" v-if="category_id==3 && info" style="background-color: white;padding-bottom:1rem;">
+                <div class="box_top">
+                    <div style="background-color: white">
+                        <div class="one ub " v-bind:class="{'left_border1':order_status==1}"
+                             style="background: white;padding: 0.14rem 0;margin: 0 0.15rem">
+                            <div class="ub ulev0" style="color:#2d2e3a;">{{order_status_des}}订单</div>
+                            <div class="ub ulev0 ub-f1 ub-pe" style="color: #368ff4;margin-left:0.22rem;">
+                                <div v-if="order_status==2" class="ub" style="position: absolute;font-size:0.1rem;color:#368ff4;">
+                                    {{info.is_confirm==0?'待确认':'已确认'}}
+                                </div>
+                                <div class="ub top-right-type">
+                                    {{category_name}}
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ub"
+                         style="background: white;padding: 0.12rem 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">酒店名称</div>
+                        <div class="ub ulev1 ub-f1 right">
+                            {{info.hotel_name}}
+                        </div>
+                    </div>
+                    <div class="ub"
+                         style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">房间类型</div>
+                        <div class="ub ulev1 ub-f1 right" style="margin-left: 0.22rem;color: #686872;">
+                            {{info.room_name}}
+                        </div>
+                    </div>
+                    <div class="ub"
+                         style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">间数</div>
+                        <div class="ub ulev1 ub-f1 right" style="margin-left: 0.22rem;color: #686872;">
+                            {{info.prod_cnt}}间
+                        </div>
+                    </div>
+                    <div class="ub"
+                         style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">入住日期</div>
+                        <div class="ub ulev1 ub-f1 right" style="margin-left: 0.22rem;color: #686872;">
+                            {{new Date(info.start_date).dateFormat('MM月dd日')}}&emsp;住{{Date.dayMinus(new
+                            Date(info.start_date),new Date(info.end_date))}}晚
+                        </div>
+                    </div>
+                    <div class="ub" style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">入住人</div>
+                        <div class="ub ulev1 ub-f1 ub-ver right">
+                            <div class="ub ulev1 right-color">{{info.user_name_list.join(',')}}
+                            </div>
+                            <div class="ub ulev1 right-color">
+                                {{contacts_phone}}
+                            </div>
+                            <div class="ub ulev1 right-color">{{contacts_id}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ub"
+                         style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">备注</div>
+                        <div class="ub ulev1 ub-f1 right" style="margin-left: 0.22rem;color: #686872;">
+                            {{info.remarks}}
+                        </div>
+                    </div>
+                    <div class="ub" style="background: white;padding: 0 0.12rem 0.12rem 0.2rem;">
+                        <div class="ub ulev1 ub-pe left-title">总价详情</div>
+                        <div class="ub ulev1 ub-f1 ub-ver" style="margin-left: 0.22rem;">
+                            <div v-for="(val,index) in date_arr" v-if="info" class="ub ulev1 right-color">
+                                <div class="ub ub-f1 desc_name right-color ulev1">{{val.date}}&nbsp;&nbsp;&nbsp;&nbsp;
+                                    <span class="right-color ulev1" v-show="index!=0">{{info.breakfast}}</span>
+                                </div>
+                                <div v-show="(index+1)!=date_arr.length" class="ub right-color ulev1"
+                                     style="height:0.165rem;margin-right:0.12rem;color:#818181;">
+                                    <span class="peopleNum right-color ulev1">{{info.prod_cnt}}</span>&nbsp;&nbsp;×&nbsp;&nbsp;¥<span class="unitPrice right-color ulev1">{{val.price}}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div style="background: white;margin: 0 0.15rem;border-bottom: 0.01rem solid #e9ebee;"></div>
+                </div>
+                <div class="ub"
+                     style="padding-top:0.15rem;padding-bottom:0.15rem;border-bottom: 0.01rem solid #e9ebee;">
+                    <div class="ub ub-ac ulev1 ub-pe" style="width:0.7rem;color:#96969c;">总额</div>
+                    <div class="ub ulev1 ub-f1 ub-ac" style="margin-left:0.22rem;">
+                        <div class="ub ub-ae">
+                            <div class="ub price-color" style="font-size:0.1rem;padding-bottom:1px;padding-right:1px;">
+                                ¥
+                            </div>
+                            <div class="ub price-color" style="font-size:0.18rem;font-weight: 500;">{{total_money}}</div>
+                        </div>
+                        <div class="ub" style="margin-right:0.15rem;position: absolute;right:0;">
+                            <div v-if="order_status==2 || order_status==1" @click="cancel()" class="ub ub-ac ub-pc"
+                                 style="width:0.9rem;height:0.25rem;padding-top:1px;border-radius: 0.13rem;background:#ccc;">
+                                取消订单
+                            </div>
+                            <div v-if="order_status==1" class="ub ub-ac ub-pc" @click="go_pay()"
+                                 style="margin-left:0.1rem;color:#fff;padding-top:1px;width:0.68rem;height:0.25rem;background-color:#368ff4;border-radius: 0.13rem;">
+                                支付
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="box_rule1" style="display: none;">查看退票规则</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {getOrderInfo, getFreeWalkInsure, cancelOrder} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import date from '../../config/mUtil/dateUtil'
+    import cardId from '../../config/mUtil/cardId'
+    import info from '../../config/info'
+    import {Toast} from 'mint-ui';
+    import {Swipe, SwipeItem, Switch, MessageBox} from 'mint-ui';
+
+    export default {
+        name: "order_detail",
+        data() {
+            return {
+                // order_id:11488,
+                info: null,
+                order_id: this.$route.query.order_id,
+                pro_cate_id: 0,
+                run_date: '',
+                insurance_flag: false,
+                insurance_price: 3,
+                contacts_num: 0,
+                order_status_des: '',
+                category_name: '',
+                prod_info: '',
+                prod_cnt: '',
+                contacts_name: '',
+                contacts_phone: '',
+                contacts_id: '',
+                prod_name: '',
+                insurance_name: '',
+                category_id: 0,
+                start_area: '',
+                end_area: '',
+                start_date: '',
+                total_money: 0,
+                bus_tickets: [],
+                order_status: 0,
+                date_arr:[]
+
+            }
+        },
+        mounted() {
+            this.$nextTick(() => {
+                this.baseData();
+            })
+        },
+        methods: {
+            baseData() {
+                let order_id = this.order_id;
+                if(!order_id){
+                    tool.$router.replace(this,{
+                       name:'user_center'
+                    });
+                    return;
+                }
+                getOrderInfo({order_id: order_id}).then(res => {
+                    if (res['flag'] === false) {
+                        if (res['code'] === info.codeNotLogin) {
+                            tool.$router.push(this, {
+                                name: 'login',
+                                query: {
+                                    routerName: 'order_detail',
+                                    order_id:order_id
+                                }
+                            })
+                        } else {
+                            MessageBox.alert(res.msg);
+                        }
+                    } else {
+                        this.info = res.data.info;
+                        this.pro_cate_id = res['data']['info']['category_id'];
+                        this.$set(this.info,'user_name_list',[]);
+                        if(this.pro_cate_id == 3){
+                            this.$set(this.info, 'user_name_list', this.info.user_list.map(x => x.contacts_name));
+                            this.date_arr = JSON.parse(this.info['total_details']);
+                            this.date_arr.push({
+                                date:this.info.end_date,
+                                price:''
+                            });
+                            for (let i = 0; i < this.date_arr.length; i++) {
+                                this.date_arr[i].date = date.getMonthByDate(this.date_arr[i].date) + '-' + date.getDayByDate(this.date_arr[i].date);
+                                let price = Math.floor(this.date_arr[i].price);
+                                if (this.date_arr[i].price - price === 0) {
+                                    this.date_arr[i].price = price;
+                                }
+                            }
+                        }
+                        this.run_date = res['data']['info']['start_date'];
+                        if (this.pro_cate_id == 4 && this.run_date !== '') {
+                            getFreeWalkInsure({pro_cate_id: res['data']['info']['prod_cate_id'], run_date: this.run_date}).then(res1 => {
+                                if (res1['flag'] === true) {
+                                    this.insurance_flag = true;
+                                    this.insurance_price = res1['data']['price'];
+                                }else{
+                                    Toast(res1.msg);
+                                }
+                            }).catch(e => {
+                                Toast(info.infoApiError);
+                            })
+                        }
+                        this.order_status_des = res['data']['info']['order_status_des'];
+                        this.category_name = res['data']['info']['category_name'];
+                        this.prod_info = res['data']['info']['prod_info'];
+                        this.prod_cnt = res['data']['info']['prod_cnt'];
+                        this.contacts_name = res['data']['info']['contacts_name'];
+                        this.contacts_num = res['data']['info']['contacts_num'];
+                        this.contacts_phone = res['data']['info']['contacts_phone'];
+                        this.contacts_id = res['data']['info']['contacts_ID'];
+                        this.category_id = res['data']['info']['category_id'];
+                        this.start_area = res['data']['info']['start_area'];
+                        this.end_area = res['data']['info']['end_area'];
+                        this.start_date = this.getDateStr(res['data']['info']);
+                        this.total_money = res['data']['info']['total_money'];
+                        if (this.contacts_num != 0) {
+                            this.bus_tickets = res['data']['info']['price_info'];
+                            tool.log(this.bus_tickets);
+                            tool.log(this.bus_tickets.length);
+                        }
+                        this.order_status = res['data']['info']['order_status'];
+                    }
+
+                }).catch(e => {
+                    Toast(info.infoApiError);
+                })
+            },
+            getDateStr(v) {
+                let m = date.getMonthByDate(v['start_date']);
+                let d = date.getDayByDate(v['start_date']);
+                let go_date_str = v['start_date']
+                let d1 = v['start_date'].replace(/-/g, '');
+                let d2 = date.getDateTime(0).replace(/-/g, '');
+                if (d1 == d2) go_date_str += '（今天）'
+                else go_date_str += ' ';
+                if (v['start_time'].length > 5) {
+                    v['start_time'] = v['start_time'].substring(0, 5);
+                }
+                go_date_str += v['start_time'];
+
+                return go_date_str;
+            },
+            cancel() {
+
+//                巴士自由行和酒店的订单特殊处理
+                if(Math.floor(this.category_id) === 3 || Math.floor(this.category_id) === 4){
+                    MessageBox.alert('', {
+                        message: '暂不支持在线取消，如需取消请联系蜘蛛出行公众号在线客服帮助您！',
+                        title: '提示',
+                        confirmButtonText: '确定',
+                    });
+                    return;
+                }
+
+
+                MessageBox.confirm('', {
+                    message: '你确定退票吗',
+                    title: '提示',
+                    confirmButtonText: '直接退票',
+                    cancelButtonText: '再考虑考虑'
+                }).then(
+                    action => {
+                        tool.log(action + '确认退票');
+                        cancelOrder({order_id: this.order_id}).then(res => {
+                            if (res['flag'] == false) {
+                                if (res['code'] == info.codeNotLogin) {
+                                    MessageBox.alert('', {
+                                        message: '未登录',
+                                        title: '提示',
+                                        confirmButtonText: '确定',
+                                    }).then(
+                                        action => {
+                                            tool.$router.push(this, {
+                                                name: 'home',
+                                                query: {}
+                                            })
+                                        }
+                                    )
+                                } else {
+                                    MessageBox.alert(res['msg'])
+                                }
+
+                            } else {
+                                MessageBox.alert('退票成功');
+                                this.baseData();
+                            }
+                        }).catch(e => {
+                            Toast(info.infoApiError)
+                        })
+
+                    },
+                    action => {
+                        tool.log(action + '不退了');
+                        return false;
+                    },
+                )
+
+            },
+            go_pay() {
+                tool.$router.push(this, {
+                    name: 'order_pay',
+                    query: {
+                        order_id: this.order_id,
+                    }
+                })
+            },
+
+
+        }
+    }
+</script>
+
+<style scoped lang="scss" type="text/scss">
+    @import "./../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+    @import "../../../static/css/ui-box.css";
+    @import "../../../static/css/ui-color.css";
+
+    .left_border1 {
+        border-left: 0.03rem solid #cc3333;
+        padding-left: 0.09rem !important;
+    }
+
+    .one {
+        border-bottom: 0.01rem solid #e9ebee;
+    }
+
+    .two {
+        border-top: 0.01rem solid #e9ebee;
+    }
+
+    .box_rule1 {
+        margin-top: 0.12rem;
+        color: #3177f6;
+        margin-left: 0.12rem;
+        margin-right: 0.12rem;
+    }
+
+    .box_rule2 {
+        margin-top: 0.12rem;
+        color: #3177f6;
+        margin-left: 0.12rem;
+        margin-right: 0.12rem;
+        display: -webkit-box;
+        position: relative;
+        -webkit-box-pack: end;
+    }
+
+    .none {
+        display: none;
+    }
+
+    .block {
+        display: block;
+    }
+    .left-title{
+        color:$colorGray2;
+        width:0.7rem;
+        font-size: 0.14rem;
+    }
+    .right{
+        margin-left: 0.22rem;
+        color: $colorLightBlack;
+    }
+    .right-color{
+        color: $colorLightBlack;
+    }
+    .right-gray-color{
+        color:$colorGray2;
+    }
+    .top-right-type{
+        color:$colorGray2;
+    }
+
+    .price-color {
+        color: $colorPrice;
+    }
+
+
+
+</style>

src/pages/user/order_list.vue

@@ -0,0 +1,377 @@
+<template>
+    <div class="bg_color" style="display: block;">
+        <div class="big_div">
+            <div class="ub top_title_div">
+                <div @click="change_status('')"
+                     v-bind:class="{'sel_title':sendData.order_status=='','top_title':sendData.order_status!=''}"
+                     class="ub ub-f1 ub-ac ub-pc status" order_status="">全部
+                </div>
+                <div @click="change_status(1)" v-bind:class="{'sel_title':sendData.order_status==1,'top_title':sendData.order_status!=1}"
+                     class="ub ub-f1 ub-ac ub-pc status top_title" order_status="1">待支付
+                </div>
+                <div @click="change_status(2)" v-bind:class="{'sel_title':sendData.order_status==2,'top_title':sendData.order_status!=2}"
+                     class="ub ub-f1 ub-ac ub-pc status top_title" order_status="2">已支付
+                </div>
+                <div @click="change_status(3)" v-bind:class="{'sel_title':sendData.order_status==3,'top_title':sendData.order_status!=3}"
+                     class="ub ub-f1 ub-ac ub-pc status top_title" order_status="3">已完成
+                </div>
+                <div @click="change_status(5)" v-bind:class="{'sel_title':sendData.order_status==5,'top_title':sendData.order_status!=5}"
+                     class="ub ub-f1 ub-ac ub-pc status top_title" order_status="5">已取消
+                </div>
+            </div>
+            <div id="order_list" style="height:6.06rem;" class="order_list" v-infinite-scroll="loadMore"
+                 infinite-scroll-disabled="loading" infinite-scroll-distance="10">
+
+                <div v-for="item in list" class="box_one box_black"
+                     style="padding-left: 0.08rem;padding-right: 0.08rem;">
+                    <!--上门接待支付-->
+                    <div class="one_content" style="background: #ffffff;">
+                        <div class="go_detail" @click="go_detail(item.order_id)">
+                            <!--出行时间-->
+                            <div v-bind:class="{'one1 left_border1':item.order_status_id==1,
+                            'one1_noborder':item.order_status_id==2||item.order_status_id==3,
+                            'one1 left_border2':item.order_status_id==4,
+                            'one1_noborder left_border2':item.order_status_id==5}" class="one ub">
+                                <div v-if="item.category_id ==3" class="ulev0" style="color: #686872;">入住时间：</div>
+                                <div v-else class="ulev0" style="color: #686872;">出行时间：</div>
+                                <div class="ulev0" style="color: #686872;" v-html="getDateStr(item)"></div>
+                                <div v-bind:class="{'red_color':item.order_status_id==1}" class="ulev0 ub ub-f1 ub-pe"
+                                     style="padding-right: 0.12rem;">{{item.order_status_des}}
+                                </div>
+                            </div>
+                            <!--品类-->
+                            <div class="one_noborder one2 ub">
+                                <div class="ulev1" style="color:#3177f6;"
+                                     v-html="getCategoryName(item.category_id)"></div>
+                                <div class="ulev1 ub ub-ver ub-f1 "
+                                     style="padding-left: 0.2rem;padding-right: 0.12rem;">
+                                    <div v-if="item.category_id!=5"
+                                         v-bind:class="{'cancel_color':item.order_status_id==4||item.order_status_id==5}"
+                                         style="font-size:0.14rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
+                                        {{item.book_product}}
+                                    </div>
+                                    <div v-else
+                                         v-bind:class="{'cancel_color':item.order_status_id==4||item.order_status_id==5}"
+                                         style="font-size:0.14rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
+                                        {{item.start_area}}
+                                    </div>
+                                    <div v-if="item.category_id!=5"
+                                         v-bind:class="{'cancel_color':item.order_status_id==4||item.order_status_id==5}"
+                                         style="font-size:0.14rem;margin-top:0.12rem;"></div>
+                                    <div v-else
+                                         v-bind:class="{'cancel_color':item.order_status_id==4||item.order_status_id==5}"
+                                         style="font-size:0.14rem;margin-top:0.12rem;">{{item.end_area}}
+                                    </div>
+                                </div>
+                            </div>
+                            <!--<div class="one_noborder one2 ub ub-ac" style="padding: 0.16rem 0.12rem;">
+                                <div class="ulev1" style="line-height: 1;color: #3177f6;">巴士路线</div>
+                                <div class="ub-f1 ub ub-ver" style="width: 1%;padding-left: 0.2rem;">
+                                    <div class="ulev1 pl_txt_c1" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 1;">皇甫旅游集散站皇甫旅游集散站 - 迪士尼皇甫旅游集散站皇甫旅游集散站 - 迪士尼</div>
+                                </div>
+                            </div>-->
+                            <!--出游人数-->
+                            <div class="one one3 ub">
+                                <div v-if="item.category_id ==3" class="ulev1" style="color:#96969c;">入住人数</div>
+                                <div v-else class="ulev1" style="color:#96969c;">出游人数</div>
+                                <div v-if="item.prod_des"
+                                     v-bind:class="{'pl_txt_c1':item.order_status_id==1,'cancel_color':item.order_status_id==4||item.order_status_id==5}"
+                                     class="ulev1 ub ub-f1" style="padding-left: 0.2rem;padding-right: 0.12rem;">
+                                    {{item.prod_des}}
+                                </div>
+                                <div v-else
+                                     v-bind:class="{'pl_txt_c1':item.order_status_id==1,'cancel_color':item.order_status_id==4||item.order_status_id==5}"
+                                     class="ulev1 ub ub-f1" style="padding-left: 0.2rem;padding-right: 0.12rem;">
+                                    {{item.prod_cnt}}人
+                                </div>
+                            </div>
+                            <!--订单号-->
+                            <div class="one one4 ub">
+                                <div class="ulev0" style="color:#686872;">订单号：</div>
+                                <div class="ulev0" style="color:#686872;">{{item.order_id}}</div>
+                                <div class="right ub ub-f1 ub-pe ub-ac">
+                                    <div class="ulev0" style="color: #686872;">消费总额：</div>
+                                    <div v-bind:class="{'red_color':item.order_status_id==1||item.order_status_id==2,
+                            'grey_color':item.order_status_id==3||item.order_status_id==4||item.order_status_id==5}"
+                                         class="ulev3" style="line-height: 1;">¥{{item.total_money}}
+                                    </div>
+                                    <div class="ulev0"
+                                         style="color: #686872;padding-right:0.12rem;padding-left: 0.05rem;">元
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!--前往支付-->
+                        <div v-show="item.order_status_id==1" class="to_pay one one5 ub ub-ac ub-pc">
+                            <div @click="go_pay(item.order_id)" class="ub-f1"
+                                 style="margin: 0.08rem 0.12rem;border-radius: 50px;background-color: #e9ebee;color: #2d2e3a;line-height: 1.0;padding: 0.07rem 0;text-align: center;">
+                                前往支付
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-show="list.length<=0 && hasHttp" class="ub ub-ac ub-pc" style="padding:0.3rem 0;font-size:0.14rem;">暂无相关订单</div>
+                <div class="ub ub-pc ub-ac" v-if="!loading && !hasHttp">
+                    <mt-spinner class="ub" type="fading-circle"></mt-spinner>
+                    <div class="ub" style="text-align: center;margin-left:0.1rem;">加载中...</div>
+                </div>
+
+                <div class="grey_color" v-if="loading" style="margin-top: 0.1rem;margin-bottom: 0.1rem;text-align: center;" :style="styleBottom()">- 已经到达最底部 -
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {getOrderList} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import date from '../../config/mUtil/dateUtil'
+    import info from '../../config/info'
+    import {Toast, Swipe, SwipeItem, Switch, InfiniteScroll, MessageBox, Spinner} from 'mint-ui';
+
+    export default {
+        name: "order_list",
+        data() {
+            return {
+                data: [],
+                list: [],
+                sendData:{
+                    order_status:this.$route.query.order_status ? this.$route.query.order_status : '',
+                    current_page:0,
+                    page_size:10
+                },
+                list_append: [], //每次请求的需要追加的数据
+                loading: false,
+                hasHttp:false
+
+            }
+        },
+        mounted() {
+            this.$nextTick(() => {
+                //this.sendData.order_status = '';
+                this.sendData.current_page = 0;
+                this.sendData.page_size = 10;
+                // this.loadMore();
+
+
+            })
+        },
+        methods: {
+            baseData() {
+                tool.log('-------------baseData->data-----------------')
+
+                tool.delay(() => {
+                    this.sendData.current_page++;
+                    tool.log(JSON.stringify(this.sendData));
+                    getOrderList(this.sendData).then(res_data => {
+                        this.hasHttp = true;
+                        if (res_data['flag'] == false) {
+                            this.loading=true;
+                            if (res_data['code'] == info.codeNotLogin) {
+                                tool.$router.push(this, {
+                                    name: 'login',
+                                    query: {
+                                        routerName: 'order_list'
+                                    }
+                                })
+                            } else {
+                                MessageBox.alert(res_data['msg']);
+                            }
+                        } else {
+                            this.data = res_data['data'];
+                            this.list_append = this.data['list'];
+                            if (this.list_append.length < this.sendData.page_size) {
+                                this.loading = true;
+                            } else {
+                                this.loading = false;
+                            }
+                            for (let i = 0; i < this.list_append.length; i++) {
+                                this.list.push(this.list_append[i]);
+                            }
+                        }
+
+                    }).catch(e => {
+                        Toast(info.infoApiError);
+                    })
+                }, info.delayTime);
+            },
+            loadMore() {
+                // this.loading = true;  //loading为true时不再继续加载
+                this.loading = false;
+                this.hasHttp = false;
+                this.baseData()
+            },
+
+            change_status(status) {
+                this.loading = false;
+                this.hasHttp = false;
+                this.sendData.current_page = 0;
+                this.sendData.order_status = status;
+                this.list = [];
+                tool.delay(() => {
+                    this.baseData()
+                }, 500);
+            },
+            getDateStr(v) {
+                let m = date.getMonthByDate(v['start_date']);
+                let d = date.getDayByDate(v['start_date']);
+                let go_date_str = parseInt(m) + '月' + d + '日';
+                let d1 = v['start_date'].replace(/-/g, '');
+                let d2 = date.getDateTime(0).replace(/-/g, '');
+                if (d1 == d2) go_date_str += '   （今天）'
+                else go_date_str += '&emsp;';
+                if (v['start_time'].length > 5) {
+                    v['start_time'] = v['start_time'].substring(0, 5);
+                }
+                go_date_str += v['start_time'];
+                //判断是车票还是门票
+                if (v['category_id'] == '2') {
+                    go_date_str += '&emsp;入园';
+                } else if (v['category_id'] == '3') {
+                    go_date_str += '&emsp;入住';
+                } else {
+                    go_date_str += '&emsp;出发';
+                }
+                return go_date_str;
+            },
+            getCategoryName(cateid) {
+                if (cateid == '1') return '巴&emsp;士&emsp;';
+                if (cateid == '2') return '门&emsp;票&emsp;';
+                if (cateid == '3') return '酒&emsp;店&emsp;';
+                if (cateid == '4') return '自由行&emsp;';
+                if (cateid == '5') return '上门接&emsp;';
+            },
+            go_detail(order_id) {
+                tool.$router.push(this, {
+                    name: 'order_detail',
+                    query: {
+                        order_id: order_id,
+                    }
+                })
+            },
+            go_pay(order_id) {
+                tool.$router.push(this, {
+                    name: 'order_pay',
+                    query: {
+                        order_id: order_id,
+                    }
+                })
+            },
+            styleBottom() {
+                let style = {};
+                if (this.list.length > 6) {
+
+                } else {
+                    style = {opacity: 0}
+                }
+                return style;
+            }
+
+        }
+    }
+</script>
+
+<style scoped lang="scss" type="text/scss">
+    @import "../../../static/css/ui-base.css";
+    @import "../../../static/css/ui-box.css";
+    @import "../../../static/css/ui-color.css";
+
+    .red_color {
+        color: #cc3333
+    }
+
+    .grey_color {
+        color: #686872;
+    }
+
+    .cancel_color {
+        color: #96969c;
+    }
+
+    .top_title {
+        padding: 0.15rem 0;
+        color: #686872;
+        font-size: 0.14rem;
+    }
+
+    .top_title_div {
+        background: #ffffff;
+        overflow: scroll;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+    }
+
+    .sel_title {
+        padding: 0.15rem 0 0.13rem 0;
+        color: #2d2e3a;
+        font-size: 0.14rem;
+        border-bottom: 2px solid #2d2e3a;
+    }
+
+    .order_list {
+        overflow: scroll;
+        -webkit-overflow-scrolling:  touch;
+        margin-top: 0.6rem;
+    }
+
+    .one_content {
+        margin-bottom: 0.05rem;
+    }
+
+    .one {
+        border-bottom: 1px solid #e9ebee;
+    }
+
+    .one1 {
+        padding: 0.12rem 0 0.12rem 0.09rem;
+    }
+
+    .one1_noborder {
+        padding: 0.12rem 0 0.12rem 0.12rem;
+    }
+
+    .one2 {
+        padding: 0.16rem 0 0 0.12rem;
+    }
+
+    .one3 {
+        padding: 0.18rem 0 0.16rem 0.12rem;
+    }
+
+    .one4 {
+        padding: 0.12rem 0 0.12rem 0.12rem;
+    }
+
+    .box_one:last-child {
+        margin-bottom: 0.48rem;
+    }
+
+    .left_border1 {
+        border-left: 0.03rem solid #cc3333;
+    }
+
+    .left_border2 {
+        border-left: 0.03rem solid #96969c;
+    }
+
+    /*品类*/
+    .pl_txt_c1 {
+        color: #2d2e3a;
+    }
+
+    .pl_txt_c2 {
+        color: #96969c;
+    }
+
+    .hide {
+        display: none;
+    }
+
+
+</style>

src/pages/user/trip_list.vue

@@ -0,0 +1,448 @@
+<template>
+    <div class="bg_color" id="div_body">
+        <div v-show="code_url_show_flag" id="ttt"
+             style="position: fixed;left: 0;right: 0;bottom: 0;top: 0;-webkit-filter: blur(6px);filter: blur(6px);z-index: 1;display: none;"></div>
+        <div v-bind:class="{'mod_fil':code_url_show_flag}" class="container-div ">
+            <!--未登录状态-->
+            <div class="exit" v-if="!ifLogin && hasHttp">
+                <div class="ub ub-pc ulev1" style="margin-top: 1.56rem;color: #2d2e3a;">您还未登录</div>
+                <div class="ub ub-pc ulev1" style="color: #2d2e3a;">登录后即可查看行程</div>
+                <div class="ub ub-pc ub-ac ulev1 login_btn"
+                     style="padding: 0.13rem 0;color: #ffffff;line-height: 1.0;margin-top: 0.77rem;border-radius: 100px;background-color: #2d2e3a;margin-left: 1.2rem;margin-right: 1.2rem;"
+                     @click="goLogin">前往登录
+                </div>
+            </div>
+
+            <!--已登录状态-->
+            <div class="login" style="margin-bottom: 0.75rem;" v-if="ifLogin && hasHttp">
+                <div class="ub header"  >
+                    <div @click="change_status(1)"
+                         v-bind:class="{'select_header':status_id==1,'normal_header':status_id==3}"
+                         class="ub-f1 ulev1  herder_title" status_id="1">进行中
+                    </div>
+                    <div @click="change_status(3)"
+                         v-bind:class="{'select_header':status_id==3,'normal_header':status_id==1}"
+                         class="ub-f1 ulev1  herder_title" status_id="3">已完成
+                    </div>
+                </div>
+
+                <div class="list ub ub-ver" style="margin-top: 0.58rem;">
+                    <!--没有行程-->
+                    <div v-show="!list_flag" class="ub ub-ac ub-pc ulev1" style="padding:0.3rem 0;">暂无相关行程</div>
+
+                    <!--正在进行中的行程-->
+                    <div v-for="item in list" v-show="status_id==1&&list_flag" class="ub sigle  ub-ver">
+                        <div class="ub" style="padding: 0.16rem;border-bottom: 1px solid #E9EBEE;">
+                            <div class="ub-f2 top" style="width: 1%;">
+                                <span>出行时间:</span>
+                                <span v-if="item.if_today==1">{{item.start_date}}(今天)</span>
+                                <span v-else>{{item.start_date}}</span>
+                                <span style="padding-left:0.05rem;"> {{item.start_time}}</span>
+                            </div>
+                            <div class="ub-f1 tx-r" style="width: 1%;color:#368ff4;">{{item.status_des}}</div>
+                        </div>
+                        <div class="ub" style="padding: 0.16rem 0.12rem;border-bottom: 1px solid #E9EBEE;">
+                            <div class="ub ub-f1">
+                                <div style="background-image: url(../../../static/image/home/rectangle.png);background-repeat: no-repeat;background-size: 100% 100%;width: 0.06rem;height: 0.37rem;margin-top: 0.05rem"></div>
+                                <div class="ub ub-ver" style="padding-left: 0.05rem;">
+                                    <div class="ulev1" style="line-height: 1.0;color: #2d2e3a;">{{item.start_res}}</div>
+                                    <div class="ub-f1 ulev1"
+                                         style="line-height: 1.0;padding-top: 0.1675rem;color: #2d2e3a;">
+                                        {{item.end_res}}
+                                    </div>
+                                </div>
+                            </div>
+                            <div @click="code_show(item.cs_order_id,item.code_url)" class="e_ticket"
+                                 style="background-image: url(../../../static/image/trip/erweima.png);background-repeat: no-repeat;background-size: 100% 100%;width: 0.5rem;height: 0.5rem;"></div>
+                        </div>
+                        <div class="ub ub-f1" style="padding: 0.11rem 0;">
+                            <div class="ub-f1 tx-r ub-pc" dict=' + JSON.stringify(dict) + '>
+
+                                <div @click="goto_watch_seat(item.travel_id)"
+                                     v-if="item.get_change_seat_type.data.change_seat_type ==2||item.get_change_seat_type.data.change_seat_type ==4"
+                                     class="ufl watch_seats">
+                                    查看座位
+                                </div>
+                                <div @click="goto_choose_seat(item.travel_id)"
+                                     v-if="item.get_change_seat_type.data.change_seat_type ==0||item.get_change_seat_type.data.change_seat_type ==3"
+                                     class="ufl select_seat">选座
+                                </div>
+                                <div @click="goto_end_prod_list(item.cms_category_id)"
+                                     class="ufr travel_around travel_div_normal">当地玩乐
+                                </div>
+                                <div @click="goto_sendcar_info(item.cs_order_id,item.start_date,item.travel_id)"
+                                     class="ufr find_car travel_div_car">出行车辆信息
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!--已完成的行程-->
+
+                    <div v-for="item in list" v-show="status_id==3&&list_flag" class="ub sigle  ub-ver">
+                        <div class="ub" style="padding: 0.16rem;border-bottom: 1px solid #E9EBEE;">
+                            <div class="ub-f2 top" style="width: 1%;	">
+                                <span>出行时间:</span>
+                                <span v-if="item.if_today==1">{{item.start_date}}(今天)</span>
+                                <span v-else>{{item.start_date}}</span>
+                                <span style="padding-left:0.05rem;">{{item.start_time}}</span>
+                            </div>
+                            <div class="ub-f1 tx-r" style="width: 1%;color:#368ff4;">{{item.status_des}}</div>
+                        </div>
+                        <div class="ub" style="padding: 0.16rem 0.12rem;border-bottom: 1px solid #E9EBEE;">
+                            <div class="ub ub-f1">
+                                <div style="background-image: url(../../../static/image/home/rectangle.png);background-repeat: no-repeat;background-size: 100% 100%;width: 0.06rem;height: 0.37rem;margin-top: 0.05rem"></div>
+                                <div class="ub ub-ver" style="padding-left: 0.05rem;">
+                                    <div class="ulev1" style="line-height: 1.0;color: #2d2e3a;">{{item.start_res}}</div>
+                                    <div class="ub-f1 ulev1"
+                                         style="line-height: 1.0;padding-top: 0.1675rem;color: #2d2e3a;">
+                                        {{item.end_res}}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class=""
+                                 style="background-image: url(../../../static/image/trip/erweima_hui.png);background-repeat: no-repeat;background-size: 100% 100%;width: 0.5rem;height: 0.5rem;"></div>
+                        </div>
+                        <!--已经评价-->
+                        <div v-if="item.if_comment == 1" class="ub ub-f1" style="padding: 0.08rem 0;">
+                            <div class="ub-f1 tx-r">
+                                <div class="ufr travel_div_disabled">已评价</div>
+                            </div>
+                        </div>
+                        <!--还未评价-->
+                        <div v-else id="" class="ub ub-ac ub-pc">
+                            <div @click="common(item.prod_id,item.travel_id)" class="ub-f1 common"
+                                 style="margin: 0.08rem 0.12rem;border-radius: 50px;background-color: #e9ebee;color: #2d2e3a;line-height: 1.0;padding: 0.07rem 0;text-align: center;"
+                                 prod_id='+dict.prod_id+' travel_id=' + dict.travel_id + '>
+                                评价这次行程
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        <!--支付弹框-->
+        <div v-show="code_url_show_flag==true" class="model">
+            <div class="model_box">
+                <!--<div class="ub ub-ver">
+                    <div class="ub ub-ac bor_b_e5">
+                        <div class="ub-f1 ui_p_l15 ui_p_t12 ui_p_b12">
+                            <span class="ulev1 text_c_2b">支付金额：¥</span>
+                            <span class="ulev1 text_c_2b" id="pay_money">0</span>
+                        </div>
+                        <div id="close_cha" class="ui_p_r15 ui_p_l15 ui_p_b14 ui_p_t14" style="display: none;">
+                            <div class="search_r"></div>
+                        </div>
+                    </div>
+                    <div class="ub ub-ver ui_p_t20 ui_p_b20 ui_p_r15 ui_p_l15">
+                        <div class="ub ub-ac">
+                            <div class="pay_type weixin ui_m_r05"></div>
+                            <div class="qr_pay_type ub-f1 text_c_80">微信扫码支付:</div>
+                        </div>
+                        <div class="ub ub-pc ui_m_a05">
+                            <img id="qr_code_img" style="width: 1.32rem;height: 1.32rem;" src="images/base.png" />
+                        </div>
+                        <div style="margin-top: -0.05rem;" class="ub ub-pc ui_m_b15">
+                            <span class="text_c_80">请<span style="color: #ef5b4c;">扫一扫</span>二维码进行支付</span>
+                        </div>
+                    </div>
+                </div>-->
+                <div class="ub ub-pe">
+                    <div @click="code_hide" id="box_clear"
+                         style="width: 0.14rem;height: 0.14rem;margin-top: 0.16rem;margin-right: 0.16rem;background-image: url(../../../static/image/home/clear.png);background-repeat:  no-repeat;background-size: 100% 100%;"></div>
+                </div>
+                <div class="box_font_color">
+                    <span style="padding-left: 0.16rem;">订单号：</span><span style="padding-left: 0.03rem;"
+                                                                          id="box_order_id">{{img_order_id}}</span>
+                </div>
+                <div class="ub ub-pc" style="padding-top: 0.16rem;">
+                    <img id="qr_code_img" style="width: 1.32rem;height: 1.32rem;" :src="img_url"
+                         :data-original="img_url"/>
+                </div>
+                <div class="ub ub-ac ub-pc ulev1" style="color: #96969c;line-height: 1;margin-top: 0.16rem;">
+                    上车时向司机出示二维码
+                </div>
+                <div class="ub ub-ac ub-pc ulev1"
+                     style="color: #96969c;line-height: 1;margin-bottom: 0.25rem;padding-top: 0.02rem;">或订单号进行检票
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+  import {getTravelList, checkLogin} from '../../service/httpService'
+  import tool from '../../config/mUtil/tool'
+  import date from '../../config/mUtil/dateUtil'
+  import info from '../../config/info'
+  import {Toast, Swipe, SwipeItem, Switch, MessageBox} from 'mint-ui';
+
+  export default {
+    name: "trip_list",
+    data() {
+      return {
+        ifLogin: false,
+        hasHttp: false,
+        status_id: 1,
+        list: [],
+        cache_data: [],
+        list_flag: false,
+        code_url_show_flag: false,
+        img_order_id: '',
+        img_url: 'static/image/home/productloading.png',
+
+
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.load();
+      })
+    },
+    methods: {
+      goLogin() {
+        tool.$router.push(this, {
+          name: 'login',
+          query: {
+            routerName: 'trip_list',
+          }
+        })
+      },
+      load() {
+        checkLogin({
+          login: () => {
+            this.ifLogin = true;
+            this.baseData(this.status_id);
+          },
+          unlogin: () => {
+            this.ifLogin = false;
+            this.hasHttp = true;
+          }
+        })
+      },
+      baseData(status_id) {
+        getTravelList({current_page: 1, page_size: 9999, status_id: status_id}).then(res => {
+          this.hasHttp = true;
+          if (res['flag'] == false) {
+            MessageBox.alert(res['msg']);
+          } else {
+            this.cache_data[status_id] = res['data'];
+            this.list = this.cache_data[status_id]['list'];
+            if (this.list.length == 0) {
+              this.list_flag = false;
+            } else {
+              this.list_flag = true;
+            }
+          }
+        }).catch(e => {
+          this.hasHttp = true;
+          Toast(info.infoApiError);
+        })
+      },
+      change_status(status) {
+        this.status_id = status;
+        this.list = [];
+        if (!this.cache_data.hasOwnProperty(this.status_id)) {
+          this.baseData(status);
+        } else {
+          this.list = this.cache_data[status]['list'];
+          if (this.list.length == 0) {
+            this.list_flag = false;
+          } else {
+            this.list_flag = true;
+          }
+        }
+        tool.log('cache_data');
+        tool.log(this.cache_data);
+        tool.log('list');
+        tool.log(this.list)
+
+      },
+      code_show(cs_order_id, code_url) {
+        this.code_url_show_flag = true;
+        this.img_order_id = cs_order_id;
+        this.img_url = code_url;
+      },
+      code_hide() {
+        this.code_url_show_flag = false;
+      },
+      common(prod_id, travel_id) {
+        tool.$router.push(this, {
+          name: 'add_common',
+          query: {
+            travel_id: travel_id,
+            prod_id: prod_id
+
+          }
+        })
+      },
+      goto_sendcar_info(order_id, run_date, travel_id) {
+        tool.$router.push(this, {
+          name: 'send_car_info',
+          query: {
+            order_id: order_id,
+            run_date: run_date,
+            travel_id: travel_id
+
+          }
+        })
+      },
+      goto_end_prod_list(cms_prod_id) {
+        tool.$router.push(this, {
+          name: 'prod',
+          query: {
+            cms_prod_id: cms_prod_id
+
+          }
+        })
+      },
+      goto_watch_seat(travel_id) {
+        tool.$router.push(this, {
+          name: 'watch_seats',
+          query: {
+            travel_id: travel_id
+
+          }
+        })
+      },
+      goto_choose_seat(travel_id) {
+        tool.$router.push(this, {
+          name: 'choose_seats',
+          query: {
+            travel_id: travel_id
+
+          }
+        })
+      }
+
+    }
+  }
+</script>
+
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+    @import "../../../static/css/ui-color.css";
+    @import "../../../static/css/tabbar.css";
+
+    .header {
+        background-color: #ffffff;
+        box-shadow: 0 0.5px 3px 0 #e9ebee;
+        left: 0;
+        right: 0;
+        z-index: 1;
+    }
+
+    .normal_header {
+        line-height: 1.0;
+        color: #686872;
+        padding: 0.15rem 0;
+        text-align: center;
+    }
+
+    .select_header {
+        color: #368ff4;;
+        border-bottom: 2px solid #368ff4;;
+        line-height: 1.0;
+        padding: 0.15rem 0;
+        text-align: center;
+    }
+
+    .sigle {
+        margin-bottom: 0.05rem;
+        background-color: #ffffff;
+        box-shadow: 0 0.5px 3px 0 #e9ebee;
+        padding-left: 0.15rem;
+        padding-right: 0.15rem;
+    }
+
+    .travel_div_normal {
+        margin-right: 0.12rem;
+        padding: 0.06rem 0.12rem;
+        text-align: center;
+        border-radius: 50px;
+        color: #333333;
+        line-height: 1.0;
+        border: solid 1px #333333;
+        font-size: 0.11rem;
+    }
+
+    .travel_div_disabled {
+        margin-right: 0.12rem;
+        padding: 0.06rem 0.12rem;
+        text-align: center;
+        border-radius: 50px;
+        color: #999999;
+        line-height: 1.0;
+        border: solid 1px #999999;
+        font-size: 0.11rem;
+    }
+
+    .travel_div_car {
+        margin-right: 0.12rem;
+        padding: 0.06rem 0.12rem;
+        text-align: center;
+        border-radius: 50px;
+        color: #333333;
+        line-height: 1.0;
+        border: solid 1px #333333;
+        font-size: 0.11rem;
+    }
+
+    .top span {
+        color: #686872;
+    }
+
+    .mod_fil {
+        -webkit-filter: blur(6px);
+        filter: blur(6px);
+    }
+
+    .model_box {
+        position: fixed;
+        top: 1.3rem;
+        left: 0.52rem;
+        right: 0.52rem;
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 3px 10px 0 rgba(60, 67, 79, 0.2);
+        z-index: 2;
+        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px);
+    }
+
+    .box_font_color span {
+        color: #686872;
+        font-size: 0.16rem;
+        line-height: 1.0;
+        padding-top: 0.08rem;
+    }
+
+    .select_seat {
+        width: 0.685rem;
+        height: 0.26rem;
+        border-radius: 0.13rem;
+        background-color: #368ff4;
+        color: #ffffff;
+        font-family: PingFangSC;
+        text-align: center;
+        line-height: 0.26rem;
+        font-size: 0.11rem;
+        margin-left: 0.2rem;
+    }
+
+    .watch_seats {
+        width: 0.685rem;
+        height: 0.26rem;
+        border-radius: 0.13rem;
+        border: solid 0.01rem #368ff4;
+        color: #368ff4;
+        font-family: PingFangSC;
+        text-align: center;
+        line-height: 0.26rem;
+        font-size: 0.11rem;
+        margin-left: 0.2rem;
+    }
+
+</style>

src/pages/user/user_center.vue

@@ -0,0 +1,175 @@
+<template>
+    <div class="big_div" style="display: block;">
+        <!--头部-->
+        <div class="top_panel ub" style="height: 1rem;background-image: url(static/image/user/my_center_bgi.png);">
+            <div class="icon ub"
+                 style="width: 0.6rem;border-radius: 0.6rem;margin: 0.2rem 0 0.2rem 0.12rem;background-repeat: no-repeat;background-size: 0.6rem 0.6rem;"
+                 :style="backgroundImg"></div>
+            <div class="user_info ub ub-f1 ub-ver">
+                <div id="user_not_login" class="ub ub-ac"
+                     style="margin-top: 0.38rem;margin-left:0.12rem;font-size: 0.18rem;color:#ffffff" @click="userLogin"
+                     v-if="!ifLogin && hasHttp">点击登录
+                </div>
+                <div id="user_info1" class="ub ub-ac"
+                     style="display: none;margin-top: 0.28rem;margin-left:0.12rem;font-size: 0.18rem;color:#ffffff"
+                     v-show="ifLogin && hasHttp">{{user_info.user_name}}
+                </div>
+                <div id="user_info2" class="ub ub-ac"
+                     style="display: none;margin-top: 0.06rem;margin-left:0.12rem;font-size:0.14rem;color:#ffffff;opacity: 0.6;"
+                     v-show="ifLogin && hasHttp">{{user_info.phone}}<div style="margin-left: 135px;color: rgb(12, 10, 33)" @click="loginOut">[退出登录]</div>
+                </div>
+            </div>
+        </div>
+        <!--我的订单-->
+        <div class="my_order" style="background: #ffffff;">
+            <div class="ub ub-ac" style="border-bottom: 1px solid #e9ebee;">
+                <div class="ulev1" style="padding: 0.16rem 0.2rem 0.16rem;color: #686872;">我的订单</div>
+                <div class="ub-f1 ub ub-ac" style="padding: 0.16rem 0;" @click="order_status('')">
+                    <div class="ulev1 ub ub-pe ub-f1 ub-ac order_status"
+                         style="padding-right:0.16rem;line-height: 1;color:#96969c;">查看全部
+                    </div>
+                    <div
+                        style="width: 0.08rem;height: 0.14rem;background-image: url(static/image/home/row.png);background-repeat: no-repeat;background-size: 100% 100%;margin-right: 0.16rem;"></div>
+                </div>
+            </div>
+        </div>
+        <!--4个主题内容-->
+        <div class="ub main_cms" style="margin-bottom: 0.15rem;background: white;">
+            <div class="ub ub-f1 ub-ver tx-c ub-pc ub-ac order_status" @click="order_status(1)">
+                <div class="info_image" style="background-image: url(static/image/user/daizhifu.png);"></div>
+                <div class="info_title">待支付</div>
+            </div>
+            <div class="ub ub-f1 ub-ver tx-c ub-pc ub-ac order_status" @click="order_status(2)">
+                <div class="info_image" style="background-image: url(static/image/user/yizhifu.png);"></div>
+                <div class="info_title">已支付</div>
+            </div>
+            <div class="ub ub-f1 ub-ver tx-c ub-pc ub-ac order_status" @click="order_status(3)">
+                <div class="info_image" style="background-image: url(static/image/user/yiwancheng.png);"></div>
+                <div class="info_title">已完成</div>
+            </div>
+            <div class="ub ub-f1 ub-ver tx-c ub-pc ub-ac order_status" @click="order_status(5)">
+                <div class="info_image" style="background-image: url(static/image/user/yiquxiao.png);"></div>
+                <div class="info_title">已取消</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {checkLogin, getUserInfo} from '../../service/httpService'
+    import tool from '../../config/mUtil/tool'
+    import date from '../../config/mUtil/dateUtil'
+    import info from '../../config/info'
+    import {Toast} from 'mint-ui';
+    import {Switch, MessageBox} from 'mint-ui';
+
+    export default {
+        name: "user_center",
+        data() {
+            return {
+                ifLogin: false,
+                hasHttp: false,
+                user_info: '',
+                backgroundImg: {
+                }
+            };
+        },
+        mounted() {
+            this.load();
+        },
+        methods: {
+            load() {
+                checkLogin({
+                    login: () => {
+                        this.ifLogin = !this.ifLogin;
+                        this.httpBaseInfo();
+                    }, unlogin: () => {
+                        this.hasHttp = true;
+                        this.ifLogin = false;
+                        this.backgroundImg = {
+                            backgroundImage: `url(static/image/user/user_default_icon.png)`,
+                        };
+                    }
+                })
+            },
+            httpBaseInfo() {
+                getUserInfo().then(res => {
+                    this.hasHttp = true;
+                    if (res.flag === false) {
+                        if (res.code === info.codeNotLogin) {
+                            MessageBox.alert('未登录', '提示').then(e => {
+                                tool.$router.push(this, {
+                                    name: 'home'
+                                })
+                            })
+                        } else {
+                            MessageBox.alert(res.msg);
+                        }
+                    } else {
+                        let data = res.data;
+                        this.user_info = data.user_info;
+                        if (this.user_info.head_img != '') {
+                            this.backgroundImg = {
+                                backgroundImage: `url(${this.user_info.head_img})`,
+                            };
+                        }else{
+                            this.backgroundImg = {
+                                backgroundImage: `url(static/image/user/user_default_icon.png)`,
+                            };
+                        }
+                    }
+                })
+            },
+            userLogin() {
+                tool.$router.push(this, {
+                    name: 'login',
+                    query: {
+                        routerName: 'user_center'
+                    }
+                })
+            },
+            order_status(index) {
+                if (this.ifLogin === true) {
+                    tool.$router.push(this, {
+                        name: 'order_list',
+                        query: {
+                            order_status: index,
+                        }
+                    })
+                }
+            },
+            loginOut(){
+                tool.setCookie('access_token','',"s30")
+                this.userLogin();
+            },
+        }
+    }
+</script>
+
+<style scoped lang="scss" type="text/scss">
+    @import "../../style/mixin";
+    @import "../../../static/css/ui-base.css";
+    @import "../../../static/css/travel_book.css";
+
+    .info_image {
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        width: 0.16rem;
+        height: 0.12rem;
+        margin-bottom: 0.12rem;
+        margin-top: 0.23rem;
+    }
+
+    .info_title {
+        margin-bottom: 0.22rem;
+        font-size: 0.14rem;
+        color: #686872;
+    }
+
+    .one {
+        padding-top: 0.16rem;
+        padding-bottom: 0.16rem;
+        border-bottom: 1px solid #e9ebee;
+    }
+
+</style>

src/router/index.js

@@ -0,0 +1,296 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import {mode,routerBase} from "../config/env"
+Vue.use(Router)
+
+
+//主框 含 header 以及 footer
+import main from '@/pages/main/MainView'
+
+// import home from '@/pages/home/home'
+// const home = r => require.ensure([], () => r(require('../pages/home/home')), '');
+
+//首页
+const home = () => import('../pages/home/home');
+const prod_search = ()=>import('../pages/home/prod_search');
+const scenic_spot = ()=>import('../pages/home/scenic_spot');
+const prod = () => import('../pages/home/end_prod_list');
+const prod_list = () => import('../pages/product/product_list');
+
+//车票
+const search_bus = ()=>import('../pages/bus/search_bus');
+const fill_bus_order = ()=>import('../pages/bus/fill_bus_order');
+const watch_seats = ()=>import('../pages/bus/watch_seats');
+const choose_seats = ()=>import('../pages/bus/choose_seats');
+const send_car_info = ()=>import('../pages/bus/send_car_info');
+
+//门票
+const create_ticket_order = ()=>import('../pages/ticket/create_ticket_order');
+const fill_ticket_order = ()=>import('../pages/ticket/fill_ticket_order');
+
+//自由行
+const freeOrder = () => import('../pages/free/create_free_order');
+const fillFreeOrder = () => import('../pages/free/fill_free_order');
+
+//酒店
+const HotelList = () => import('../pages/hotel/HotelList');
+const HotelDetail = ()=>import('../pages/hotel/HotelDetail');
+const HotelDetailDesc = ()=>import('../pages/hotel/HotelDetailDesc');
+const HotelMap = ()=>import('../pages/hotel/HotelMap');
+const HotelReservation = ()=>import('../pages/hotel/HotelReservation');
+const HotelImageDetail = ()=>import('../pages/hotel/HotelImageDetail');
+const fill_hotel_order = ()=>import('../pages/hotel/FillHotelOrder');
+const choose_city = () => import('../pages/hotel/ChooseCity');
+
+//支付
+const order_pay = ()=>import('../pages/pay/order_pay');
+const pay_success = ()=>import('../pages/pay/pay_success');
+
+//个人中心
+const user_center = ()=>import('../pages/user/user_center');
+const login = ()=>import('../pages/user/login');
+const add_common = ()=>import('../pages/user/add_common');
+const description_list = ()=>import('../pages/user/description_list');
+const order_detail = ()=>import('../pages/user/order_detail');
+const trip_list = ()=>import('../pages/user/trip_list');
+const order_list = ()=>import('../pages/user/order_list');
+
+//========================================end==========================================//
+
+
+
+const router = new Router({
+    mode:mode,
+    base:routerBase,
+    routes: [
+        {
+            path: '/main',
+            name: 'main',
+            component: main,
+            children: [
+                /*---------------------------首页--------------------------*/
+                {
+                    path: '/main/home',
+                    name: 'home',
+                    meta: {title: '首页'},
+                    component: home
+                },
+                {
+                    path: '/main/prod_search',
+                    name: 'prod_search',
+                    meta: {title:'搜索页面'},
+                    component: prod_search,
+                },
+                {
+                    path: '/main/scenic_spot',
+                    name: 'scenic_spot',
+                    meta: {title: "景区直通车"},
+                    component: scenic_spot
+                },
+                {
+                    path: '/main/prod',
+                    name: 'prod',
+                    meta: {title: '目的地玩乐'},
+                    component: prod
+                },
+                {
+                    path: '/main/product_list',
+                    name: 'showProdList',
+                    meta: {title: '产品列表'},
+                    component: prod_list
+                },
+                /*---------------------------车票--------------------------*/
+                {
+                    path: '/main/bus/search_bus',
+                    name: 'search_bus',
+                    meta: {title: '我要找车'},
+                    component: search_bus,
+                },
+                {
+                    path: '/main/bus/fill_bus_order',
+                    name: 'fill_bus_order',
+                    meta: {title: '填写订单'},
+                    component: fill_bus_order
+                },
+                {
+                    path: '/main/bus/watch_seats',
+                    name: 'watch_seats',
+                    meta: {title: '查看座位'},
+                    component: watch_seats,
+                },
+                {
+                    path: '/main/bus/choose_seats',
+                    name: 'choose_seats',
+                    meta: {title: '在线选座位'},
+                    component: choose_seats,
+                },
+                {
+                    path: '/main/bus/send_car_info',
+                    name: 'send_car_info',
+                    meta: {title: '出行车辆信息'},
+                    component: send_car_info,
+                },
+
+
+                /*---------------------------门票--------------------------*/
+                {
+                    path: '/main/ticket/create_ticket_order',
+                    name: 'createTicketOrder',
+                    meta: {title: '门票'},
+                    component: create_ticket_order
+                },
+                {
+                    path: '/main/ticket/fill_ticket_order',
+                    name: 'fillTicketOrder',
+                    meta: {title: '填写订单'},
+                    component: fill_ticket_order
+                },
+
+                /*---------------------------自由行--------------------------*/
+                {
+                    path: '/main/free/freeOrder',
+                    name: 'freeOrder',
+                    meta: {title: '巴士自由行'},
+                    component: freeOrder
+                },
+                {
+                    path: '/main/free/fillFreeOrder',
+                    name: 'fillFreeOrder',
+                    meta: {title: '填写订单'},
+                    component: fillFreeOrder
+                },
+
+                /*---------------------------酒店--------------------------*/
+                {
+                    path: '/main/hotel/list',
+                    name: 'HotelList',
+                    meta: {title: '酒店列表'},
+                    component: HotelList
+                },
+                {
+                    path: '/main/hotel/detail',
+                    name: 'HotelDetail',
+                    meta: {title: '酒店详情'},
+                    component: HotelDetail
+                },
+                {
+                    path: '/main/hotel/detail/desc',
+                    name: 'HotelDetailDesc',
+                    meta: {title: '酒店详情'},
+                    component: HotelDetailDesc
+                },
+                {
+                    path: '/main/hotel/map',
+                    name: 'HotelMap',
+                    meta: {title: '酒店地图'},
+                    component: HotelMap
+                },
+                {
+                    path: '/main/hotel/reservation',
+                    name: 'HotelReservation',
+                    meta: {title: '酒店预订'},
+                    component: HotelReservation
+                },
+                {
+                    path: '/main/hotel/fill_hotel_order',
+                    name: 'fillHotelOrder',
+                    meta: {title: '填写订单'},
+                    component: fill_hotel_order
+                },
+                {
+                    path: '/main/hotel/image_detail',
+                    name: 'HotelImageDetail',
+                    meta: {title: '酒店图片'},
+                    component: HotelImageDetail
+                },
+                {
+                    path: '/main/hotel/choose_city',
+                    name: 'chooseCity',
+                    meta: {title: '选择城市'},
+                    component: choose_city
+                },
+
+                /*---------------------------支付--------------------------*/
+                {
+                    path: '/main/pay/order_pay',
+                    name: 'order_pay',
+                    meta: {title: '订单支付'},
+                    component: order_pay,
+                },
+                {
+                    path: '/main/pay/pay_success',
+                    name: 'order_success',
+                    meta: {title: '预定成功'},
+                    component: pay_success,
+                },
+                /*---------------------------个人中心--------------------------*/
+                {
+                    path: '/main/user/user_center',
+                    name: 'user_center',
+                    meta: {title: '个人中心'},
+                    component: user_center
+                },
+                {
+                    path: '/main/user/trip_list',
+                    name: 'trip_list',
+                    meta: {title: '我的行程'},
+                    component: trip_list,
+                },
+                {
+                    path: '/main/user/order_list',
+                    name: 'order_list',
+                    meta: {title: '订单列表'},
+                    component: order_list,
+                },
+                {
+                    path: '/main/user/order_detail',
+                    name: 'order_detail',
+                    meta: {title: '订单详情'},
+                    component: order_detail,
+                },
+                {
+                    path: '/main/user/login',
+                    name: 'login',
+                    meta: {title: '登录'},
+                    component: login,
+                },
+                {
+                    path: '/main/user/add_common',
+                    name: 'add_common',
+                    meta: {title: '添加评论'},
+                    component: add_common,
+                },
+                {
+                    path: '/main/user/description_list',
+                    name: 'description_list',
+                    meta: {title: '评论列表'},
+                    component: description_list,
+                },
+                /*=================================end======================================*/
+
+
+            ]
+        },
+        {
+            path: '/',
+            name: 'default',
+            redirect: {
+                name: 'home'
+            }
+        },
+        {
+            path: '*',
+            name: '404',
+            redirect: {
+                name: 'home'
+            }
+        }
+    ]
+})
+
+
+router.afterEach((to, from, next) => {
+    window.scrollTo(0,0);
+    if (to.meta.title) document.title = to.meta.title;
+})
+export default router;

src/service/httpService.js

@@ -0,0 +1,194 @@
+/**
+ * Created by web_developer_02 on 2017/11/30
+ */
+import fetch from '../config/fetch'
+import info from './../config/info'
+
+/**
+ * @description 首页请求
+ */
+export const homeList = (param={}) => fetch('/zzcx/home/home/home-list',param);
+export const httpGetTabbar = (param={}) => fetch('/zzcx/home/home/get-bottom',param);
+export const getProdByPoi = (param={}) =>fetch('/zzcx/home/home/get-prod-by-poi',param);
+
+export const getProdArr = (param={}) =>fetch('/zzcx/home/bus/get-prod-arr',param);
+
+export const showProdList = (param={}) => fetch('/zzcx/home/home/prod-list',param);
+
+/**
+ * 目的地玩乐请求
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const endProdList = (param={}) => fetch('/zzcx/home/destination/init',param);
+export const endProdTicketList = (param={}) => fetch('/zzcx/home/destination/get-ticket',param);
+export const endProdFoodList = (param={}) => fetch('/zzcx/home/destination/get-food',param);
+export const endProdItineraryList = (param={}) => fetch('/zzcx/home/destination/get-itinerary',param);
+
+/***
+ * 自由行详情
+ */
+export const freeDetail = (param={}) => fetch('/zzcx/home/free-walker/initialize',param);
+
+/***
+ * 自由行订单页
+ */
+export const getFreeWalkInsure = (param={}) => fetch('/zzcx/home/free-walker/get-free-walk-insure',param);
+
+/**
+ * 自由行下单
+ */
+export const makeOrder = (param={}) => fetch('/zzcx/order/order/make-order',param);
+
+/***
+ * 初始化控件数据
+ */
+export const startGee = (param={}) => fetch('/zzcx/user/login/start-gee',param,'get');
+/***
+ * 发送验证码
+ */
+export const sendMsg = (param={}) => fetch('/zzcx/user/login/send-login-msg',param);
+/***
+ * 登录
+ */
+export const login = (param={}) => fetch('/zzcx/user/login/do-login',param);
+/***
+ * 校验是否登录
+ */
+export const checkLogin = (param={}) => {
+    fetch('/zzcx/user/login/check-login',{}).then(res=>{
+        if(res.flag===false){
+            if(res.code===info.codeNotLogin){
+                if(param.unlogin)param.unlogin();
+            }
+        }else{
+            if(param.login)param.login();
+        }
+    })
+};
+export const getUserInfo = (param={}) => fetch('/zzcx/user/user/get-user-info',param);
+/***
+ * 查询热门产品
+ */
+export const getHotProd = (param={})=>fetch('/zzcx/home/home/get-hot',param);
+export const search = (param={})=>fetch('/zzcx/home/home/search',param);
+
+/**
+ * 添加评论
+ */
+export const addCommon = (param={})=>fetch('/zzcx/user/travel/add-travel',param);
+/**
+ * 评论列表
+ */
+export const getProdComment = (param={}) => fetch('/zzcx/home/prod/get-prod-comment',param);
+/***
+ *查看座位
+ */
+export const watchSeats = (param={}) => fetch('/zzcx/user/travel/watch-seats',param);
+/***
+ * 获取车位置
+ */
+export const getBusPosition = (param={}) => fetch('/zzcx/user/travel/get-bus-position',param);
+
+/**
+ * 选座座位页面初始化
+ */
+export const initChooseSeat = (param={}) => fetch('/zzcx/user/travel/init-chose-seat',param);
+/**
+ * 确认选座
+ */
+export const chooseSeat = (param={}) => fetch('/zzcx/user/travel/chose-seat',param);
+
+/**
+ * 订单详情
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const getOrderInfo = (param={}) => fetch('/zzcx/user/order/get-order-info',param);
+export const cancelOrder = (param={}) => fetch('/zzcx/user/order/cancel',param);
+
+/**
+ * 订单支付
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const getPayDate = (param={}) => fetch('/zzcx/order/order/get-pay-date',param);
+export const checkOrderStatus = (param={}) => fetch('/zzcx/order/order/check-order-status',param);
+/**
+ * 酒店订单支付可订检查
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const payCheckOrder = (param={}) => fetch('/zzcx/order/order/check-hotel',param);
+/**
+ * 支付成功
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const getRecommend = (param={}) => fetch('/zzcx/order/order/get-recommend',param);
+
+/**
+ * 我的行程
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const getTravelList = (param={}) => fetch('/zzcx/user/travel/get-travel-list',param);
+export const bookTravalMsg = (param={}) => fetch('/zzcx/user/travel/book-travel-msg',param);
+export const sendTravelMsg = (param={}) => fetch('/zzcx/user/travel/send-travel-msg',param);
+
+/**
+ * 订单列表
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const getOrderList = (param={}) => fetch('/zzcx/user/order/get-list',param);
+
+/**
+ * 门票订单初始化
+ * @param param
+ */
+export const initialize = (param={}) => fetch('/zzcx/home/men-p/initialize',param);
+export const mpGetProdArr = (param={}) => fetch('/zzcx/home/men-p/get-prod-arr',param);
+
+/**
+ * 酒店详情
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const getHotelDetail = (param={}) => fetch('/zzcx/home/hotel/get-info',param);
+/**
+ * 酒店房型列表
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const getHotelRoomList = (param={}) => fetch('/zzcx/home/hotel/get-room-list',param);
+/**
+ * 酒店下单
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const hotelMakeOrder = (param={}) => fetch('/zzcx/home/hotel/make-order',param);
+/**
+ * 酒店下单页可定检查
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const checkHotel = (param={}) => fetch('/zzcx/home/hotel/check-hotel',param);
+
+
+export const getHotelType = (param={}) => fetch('/zzcx/home/hotel/get-hotel-type',param);
+export const getHotelList = (param={}) => fetch('/zzcx/home/hotel/get-hotel-list',param);
+
+/**
+ * 获取酒店所在城市
+ * @param param
+ * @returns {Promise<*>}
+ */
+export const getHotelArea = (param={}) => fetch('/zzcx/home/hotel/get-hotel-area',param);
+
+/**
+ * 分享接口
+ * @param param
+ */
+export const fenXiang = (param={}) => fetch('/zzcx/user/login/get-fx',param);
+

src/style/common.scss

@@ -0,0 +1,126 @@
+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;
+    font-weight: normal;
+    font-size: 12px;
+    color:#333;
+    line-height:1.42;
+    // font-family: Open Sans, Helvetica Neue, Helvetica, Arial, STHeiti, sans-serif, Microsoft Yahei;
+    font-family: Microsoft Yahei,PingFangSC;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    //-webkit-font-smoothing: antialiased;  //搞锯齿属性
+    &:hover {
+        outline: none;
+    }
+}
+
+body {
+    background-color: #f6f8f9 !important;
+}
+
+.ub {
+    display: -webkit-box;
+    display: -moz-box;
+    //display: box;
+    position:relative;
+}
+
+/*以反方向显示 div 框的子元素*/
+.ub-rev {
+    -webkit-box-direction:reverse;
+    -moz-box-direction:reverse;
+    box-direction:reverse;
+}
+
+.ub-fh {
+    width: 100%;
+}
+
+.ub-fv {
+    height: 100%;
+}
+
+.ub-con {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+/*通过使用 box-align and box-pack 属性，居中 div 框的子元素*/
+.ub-ac
+{
+    -webkit-box-align:center;
+    -moz-box-align:center;
+    box-align:center;
+}
+/*通过使用 box-align and box-pack :end属性，右下 div 框的子元素*/
+.ub-ae
+{
+    -webkit-box-align:end;
+    -moz-box-align:end;
+    box-align:end;
+}
+
+.ub-pc
+{
+    -webkit-box-pack:center;
+    -moz-box-pack:center;
+    box-pack:center;
+}
+.ub-pe
+{
+    -webkit-box-pack:end;
+    -moz-box-pack:end;
+    box-pack:end;
+}
+/*两端对齐*/
+.ub-pj
+{
+    -webkit-box-pack:justify;
+    -moz-box-pack:justify;
+    box-pack:justify;
+}
+/*从上向下垂直排列子元素。*/
+.ub-ver
+{
+    -webkit-box-orient:vertical;
+    -moz-box-orient:vertical;
+    box-orient:vertical;
+}
+/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分*/
+.ub-f1
+{
+    position:relative;
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    box-flex: 1;
+}
+
+.ub-f2
+{
+    position:relative;
+    -webkit-box-flex: 2;
+    -moz-box-flex: 2;
+    box-flex: 2;
+}
+
+.ub-f3
+{
+    position:relative;
+    -webkit-box-flex: 3;
+    -moz-box-flex: 3;
+    box-flex: 3;
+}
+
+.ub-f4
+{
+    position:relative;
+    -webkit-box-flex: 4;
+    -moz-box-flex: 4;
+    box-flex: 4;
+}

src/style/mixin.scss

@@ -0,0 +1,54 @@
+@import "./common";
+//具体需根据UI图进行编写
+
+$colorMain: #368ff4;
+$colorLightBlue: #d7e9fd;
+$colorBorder: #e6e6e6;
+$colorBorder2: #ececec;
+$colorWhite: #ffffff;
+$colorGray: #96969c;
+$colorGray2: #999;
+$colorGray3: #ccc;
+$colorGray4: #666;
+$colorBlack: #333;
+$colorLightBlack: #686872;
+$colorBackgroundHotel: #f7f7f7;
+$colorPrice: #ff4023;
+$colorOrange: #f67a23;
+$colorOrange2: #ff6023;
+
+// 背景图片地址和大小
+@mixin bis($url) {
+    background-image: url($url);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+//定位全屏
+@mixin allcover {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+//宽高
+@mixin wh($width, $height) {
+    width: $width;
+    height: $height;
+}
+
+//字体大小，颜色
+@mixin sc($size, $color) {
+    font-size: $size;
+    color: $color;
+}
+
+@mixin scf($size,$color,$family) {
+    @include sc($size, $color);
+    font-family: $family;
+}
+
+.max-width {
+    margin: 0 auto;
+    max-width: 540px;
+}

src/style/my-mint-ui.scss

@@ -0,0 +1,47 @@
+@import "./mixin";
+
+.mint-toast-text {
+    color: $colorWhite !important;
+}
+
+.mint-popup {
+    transition: .35s ease-out !important;
+}
+
+.mint-toast, .mint-indicator, .mint-indicator-wrapper {
+    z-index: 10000;
+}
+
+.mint-popup-bottom {
+    z-index: 2300 !important;
+}
+
+.v-modal {
+    opacity: 0.4;
+}
+
+//message-box
+.mint-msgbox {
+    border-radius: 13px;
+    width: 2.7rem;
+
+    .mint-msgbox-content {
+        padding: 10px 20px 10px 15px;
+
+        .mint-msgbox-message {
+            font-size: 0.14rem;
+            color: $colorBlack;
+            line-height: 1.4;
+        }
+    }
+
+    .mint-msgbox-confirm {
+        color: $colorMain;
+        font-size: 17px;
+        font-weight: 600;
+    }
+}
+
+
+
+

static/css/calendar.css

@@ -0,0 +1,95 @@
+
+
+.month_title{
+	padding-top: 0.15rem;
+	padding-bottom: 0.15rem;
+}
+
+.current_year{
+	color: #686872;
+	font-size: 0.14rem;
+	margin-left: 0.05rem;
+	
+}
+
+.current_month{
+	color: #686872;
+	font-size: 0.32rem;
+	padding-left: 0.12rem;
+	padding-top: 0.15rem;
+	
+}
+
+.aweek{
+	color: #686872;
+	font-size: 0.14rem;
+	/*float: left;*/
+	/*padding: 0.16rem;*/
+	/*width: 0.457rem;
+	height: 0.457rem;
+	text-align: center;
+	line-height: 0.457rem;*/
+}
+
+.aday{
+	float: left;
+	color: #2d2e3a;
+	width: 0.478rem;
+	height: 0.478rem;
+	text-align: center;
+	border-radius: 50%;
+	font-size: 0.14rem;
+	display: -webkit-box;
+	display: -moz-box;
+	display: box;
+	position:relative;
+	-webkit-box-align:center;
+	-moz-box-align:center;
+	box-align:center;
+	-webkit-box-pack:center;
+	-moz-box-pack:center;
+	box-pack:center;
+	-webkit-box-orient:vertical;
+	-moz-box-orient:vertical;
+	box-orient:vertical;
+	
+}
+
+.disday{
+	color: rgb(207,207,207);
+}
+
+.calendar{
+	margin-bottom: 0.2rem;
+	-webkit-overflow-scrolling: touch;
+}
+
+.select_day{
+	background-color: #2d2e3a;
+	font-size: 0.16rem;
+	color: #ffffff;
+	
+}
+.select_go_day{
+	/*background-color: #8d8dc3;*/
+	background-color: #2d2e3a;
+	color: #ffffff;
+}
+
+.price{
+	color:#ef5b4c;
+	font-size: 0.09rem;
+}
+.hide_price{
+	opacity: 0
+	;color:#fff;
+	font-size: 0.09rem;
+}
+.select_go_price{
+	color:#FFFFFF;
+	font-size: 0.09rem;
+}
+.select_price{
+	color:#FFFFFF;
+	font-size: 0.09rem;
+}

static/css/main.css

@@ -0,0 +1,570 @@
+/*padding - top*/
+
+.ui_p_t05 {
+	padding-top: 0.05rem;
+}
+
+.ui_p_t10 {
+	padding-top: 0.1rem;
+}
+
+.ui_p_t15 {
+	padding-top: 0.15rem;
+}
+
+.ui_p_t13 {
+	padding-top: 0.13rem;
+}
+
+.ui_p_t20 {
+	padding-top: 0.2rem;
+}
+
+.ui_p_t25 {
+	padding-top: 0.25rem;
+}
+
+.ui_p_t30 {
+	padding-top: 0.3rem;
+}
+
+.ui_p_t35 {
+	padding-top: 0.35rem;
+}
+
+.ui_p_t40 {
+	padding-top: 0.4rem;
+}
+
+
+/*padding - bottom*/
+
+.ui_p_b05 {
+	padding-bottom: 0.05rem;
+}
+
+.ui_p_b10 {
+	padding-bottom: 0.1rem;
+}
+
+.ui_p_b13 {
+	padding-bottom: 0.13rem;
+}
+
+.ui_p_b15 {
+	padding-bottom: 0.15rem;
+}
+
+.ui_p_b20 {
+	padding-bottom: 0.2rem;
+}
+
+.ui_p_b25 {
+	padding-bottom: 0.25rem;
+}
+
+.ui_p_b30 {
+	padding-bottom: 0.3rem;
+}
+
+.ui_p_b35 {
+	padding-bottom: 0.35rem;
+}
+
+.ui_p_b40 {
+	padding-bottom: 0.4rem;
+}
+
+
+/*padding-left*/
+
+.ui_p_l05 {
+	padding-left: 0.05rem;
+}
+
+.ui_p_l10 {
+	padding-left: 0.1rem;
+}
+
+.ui_p_l15 {
+	padding-left: 0.15rem;
+}
+
+.ui_p_l20 {
+	padding-left: 0.2rem;
+}
+
+.ui_p_l25 {
+	padding-left: 0.25rem;
+}
+
+.ui_p_l30 {
+	padding-left: 0.3rem;
+}
+
+.ui_p_l35 {
+	padding-left: 0.35rem;
+}
+
+.ui_p_l40 {
+	padding-left: 0.4rem;
+}
+
+.ui_p_l45 {
+	padding-left: 0.45rem;
+}
+
+.ui_p_l50 {
+	padding-left: 0.5rem;
+}
+
+.ui_p_l55 {
+	padding-left: 0.55rem;
+}
+
+
+/*padding-right*/
+
+.ui_p_r05 {
+	padding-right: 0.05rem;
+}
+
+.ui_p_r10 {
+	padding-right: 0.1rem;
+}
+
+.ui_p_r15 {
+	padding-right: 0.15rem;
+}
+
+.ui_p_r20 {
+	padding-right: 0.2rem;
+}
+
+.ui_p_r25 {
+	padding-right: 0.25rem;
+}
+
+.ui_p_r30 {
+	padding-right: 0.3rem;
+}
+
+.ui_p_r35 {
+	padding-right: 0.35rem;
+}
+
+.ui_p_r40 {
+	padding-right: 0.4rem;
+}
+
+.ui_p_r45 {
+	padding-right: 0.45rem;
+}
+
+.ui_p_r50 {
+	padding-right: 0.5rem;
+}
+
+.ui_p_r55 {
+	padding-right: 0.55rem;
+}
+
+.ui_p_a05 {
+	padding: 0.05rem;
+}
+
+.ui_p_a10 {
+	padding: 0.1rem;
+}
+
+.ui_p_a15 {
+	padding: 0.15rem;
+}
+
+.ui_p_a20 {
+	padding: 0.2rem;
+}
+
+.ui_p_a25 {
+	padding: 0.25rem;
+}
+
+.ui_p_a30 {
+	padding: 0.3rem;
+}
+
+.ui_p_a35 {
+	padding: 0.35rem;
+}
+
+.ui_p_a40 {
+	padding: 0.4rem;
+}
+
+
+/*margin-top*/
+
+.ui_m_t05 {
+	margin-top: 0.05rem;
+}
+
+.ui_m_t10 {
+	margin-top: 0.1rem;
+}
+
+.ui_m_t15 {
+	margin-top: 0.15rem;
+}
+
+.ui_m_t20 {
+	margin-top: 0.2rem;
+}
+
+.ui_m_t25 {
+	margin-top: 0.25rem;
+}
+
+.ui_m_t30 {
+	margin-top: 0.3rem;
+}
+
+.ui_m_t35 {
+	margin-top: 0.35rem;
+}
+
+.ui_m_t40 {
+	margin-top: 0.4rem;
+}
+
+
+/*margin-bottom*/
+
+.ui_m_b05 {
+	margin-bottom: 0.05rem;
+}
+
+.ui_m_b10 {
+	margin-bottom: 0.1rem;
+}
+
+.ui_m_b15 {
+	margin-bottom: 0.15rem;
+}
+
+.ui_m_b20 {
+	margin-bottom: 0.2rem;
+}
+
+.ui_m_b25 {
+	margin-bottom: 0.25rem;
+}
+
+.ui_m_b30 {
+	margin-bottom: 0.3rem;
+}
+
+.ui_m_b35 {
+	margin-bottom: 0.35rem;
+}
+
+.ui_m_b40 {
+	margin-bottom: 0.4rem;
+}
+
+
+/*margin-left*/
+
+.ui_m_l05 {
+	margin-left: 0.05rem;
+}
+
+.ui_m_l10 {
+	margin-left: 0.1rem;
+}
+
+.ui_m_l15 {
+	margin-left: 0.15rem;
+}
+
+.ui_m_l20 {
+	margin-left: 0.2rem;
+}
+
+.ui_m_l25 {
+	margin-left: 0.25rem;
+}
+
+.ui_m_l30 {
+	margin-left: 0.3rem;
+}
+
+.ui_m_l35 {
+	margin-left: 0.35rem;
+}
+
+.ui_m_l40 {
+	margin-left: 0.4rem;
+}
+
+
+/*margin-right*/
+
+.ui_m_r05 {
+	margin-right: 0.05rem;
+}
+
+.ui_m_r10 {
+	margin-right: 0.1rem;
+}
+
+.ui_m_r15 {
+	margin-right: 0.15rem;
+}
+
+.ui_m_r20 {
+	margin-right: 0.2rem;
+}
+
+.ui_m_r25 {
+	margin-right: 0.25rem;
+}
+
+.ui_m_r30 {
+	margin-right: 0.3rem;
+}
+
+.ui_m_r35 {
+	margin-right: 0.35rem;
+}
+
+.ui_m_r40 {
+	margin-right: 0.4rem;
+}
+
+.ui_m_a05 {
+	margin: 0.05rem;
+}
+
+.ui_m_a10 {
+	margin: 0.1rem;
+}
+
+.ui_m_a15 {
+	margin: 0.15rem;
+}
+
+.ui_m_a20 {
+	margin: 0.2rem;
+}
+
+.ui_m_a25 {
+	margin: 0.25rem;
+}
+
+.ui_m_a30 {
+	margin: 0.3rem;
+}
+
+.ui_m_a35 {
+	margin: 0.35rem;
+}
+
+.ui_m_a40 {
+	margin: 0.4rem;
+}
+
+
+/*左右margin 0.2rem*/
+
+.ui_m_lr20 {
+	margin: 0 0.1rem;
+}
+
+
+/*隐藏*/
+
+.ui_hide {
+	display: none !important;
+}
+
+.ui_p_l12{
+	padding-left: 0.12rem;
+}
+
+.ui_p_r12{
+	padding-right: 0.12rem;
+}
+
+
+/*左上  圆角*/
+
+.ui_radiu_top_l {
+	-webkit-border-top-left-radius: 0.05rem;
+	border-top-left-radius: 0.05rem
+}
+
+
+/*右上  圆角*/
+
+.ui_radiu_top_r {
+	-webkit-border-top-right-radius: .6rem;
+	border-top-right-radius: .6rem
+}
+
+
+/*左下  圆角*/
+
+.ui_radiu_bottom_l {
+	-webkit-border-bottom-left-radius: 0.05rem;
+	border-bottom-left-radius: 0.05rem;
+}
+
+
+/*右下  圆角*/
+
+.ui_radiu_bottom_r {
+	-webkit-border-bottom-right-radius: 0.05rem;
+	border-bottom-right-radius: 0.05rem;
+}
+
+
+/*上  圆角*/
+
+.ui_radiu_top {
+	-webkit-border-top-left-radius: 0.05rem;
+	border-top-left-radius: 0.05rem;
+	-webkit-border-top-right-radius: 0.05rem;
+	border-top-right-radius: 0.05rem;
+}
+
+
+/*下  圆角*/
+
+.ui_radiu_bottom {
+	-webkit-border-bottom-left-radius: 0.05rem;
+	border-bottom-left-radius: 0.05rem;
+	-webkit-border-bottom-right-radius: 0.05rem;
+	border-bottom-right-radius: 0.05rem;
+}
+
+
+/*右  圆角*/
+
+.ui_radiu_right {
+	-webkit-border-top-right-radius: 0.05rem;
+	border-top-right-radius: 0.05rem;
+	-webkit-border-bottom-right-radius: 0.05rem;
+	border-bottom-right-radius: 0.05rem;
+}
+
+
+/*左  圆角*/
+
+.ui_radiu_left {
+	-webkit-border-top-left-radius: 0.05rem;
+	border-top-left-radius: 0.05rem;
+	-webkit-border-bottom-left-radius: 0.05rem;
+	border-bottom-left-radius: 0.05rem;
+}
+
+
+/*all 圆角*/
+
+.ui_radiu_all {
+	-webkit-border-radius: 0.03rem;
+	border-radius: 0.03rem;
+}
+
+
+/*边框线*/
+
+.ui_line {
+	border: 0.5px solid;
+}
+
+.ui_line_t {
+	border-top: 0.5px solid;
+}
+
+.ui_line_b {
+	border-bottom: 0.5px solid;
+}
+
+.ui_solid_gray {
+	border: solid 0.5px #e5e5e5;
+}
+
+.ui_dotted_gray {
+	border: dotted 0.5px #e5e5e5;
+}
+
+.ui_line_l {
+	border-left: 0.5px solid;
+}
+
+.ui_line_r {
+	border-right: 0.5px solid;
+}
+
+
+/*文本居右*/
+
+.text_right {
+	text-align: right;
+}
+
+
+/*文本居中*/
+
+.text_middle {
+	text-align: center;
+}
+
+
+/*文本居左*/
+
+.text_left {
+	text-align: left;
+}
+
+
+/*定位底部*/
+
+.bottom_screen {
+	position: fixed !important;
+	bottom: 0;
+	width: 100%;
+}
+
+
+/*按钮*/
+
+.ui_btn {
+	width: 0.60rem;
+	height: 0.30rem;
+	line-height: 0.30rem;
+	border: 0.5px solid darkseagreen;
+}
+
+
+/*边线*/
+
+.ui_btn_border {
+	border: 0.5px solid darkseagreen;
+}
+
+　::-webkit-input-placeholder { /* WebKit browsers */
+　　color:#;
+　　}
+　　:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+　　color:#cccccc;
+　　}
+　　::-moz-placeholder { /* Mozilla Firefox 19+ */
+　　color:#cccccc;
+　　}
+　　:-ms-input-placeholder { /* Internet Explorer 10+ */
+　　color:#cccccc;
+　　}
+
+
+

static/css/master.css

@@ -0,0 +1,474 @@
+body{
+	position: relative;
+	background:#fff;
+}
+
+
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  font-size: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.content{
+	position: relative; 
+	margin:0 auto;
+	width: 3.2rem;
+}
+.content .warp{
+	width:9.125rem;
+	padding-left: 0.4375rem;
+	padding-right: 0.4375rem;
+}
+.content .marwarp{
+	width:9.125rem;
+	margin:0 auto;
+}
+
+.content .amonth{
+	background: #fff;
+
+}
+
+.content .amonth>.aday{
+	margin-bottom: 1px;
+	float: left;
+	width: 0.445rem;
+	height: 0.445rem;	
+	margin-left:1px;
+	text-align: center;
+	line-height: 0.445rem;	
+	font-size: 0.16rem;
+}
+.content .amonth>.disday{
+
+	background:#f5f5f5; 
+}
+
+.content .amonth>.thisday{
+	border-radius: 5px;
+	background: #ff8800;
+}
+.content .amonth>.aweek{
+	float: left;
+	width: 0.445rem;
+	height: 0.445rem;
+	margin-left:1px;	
+	text-align: center;
+	line-height: 0.445rem;
+	font-size: 0.16rem;
+	background: #e1e1e1;
+	border-radius: 3px; 
+
+}
+.content .amonth>.showdate{
+	height: 0.5rem;
+	line-height: 0.5rem;
+	text-align: center;
+	font-size: 0.16rem;
+}
+.content .amonth>.showdate>.monthleft{
+	padding-right: 0.5rem;
+}
+.content .amonth>.showdate>.monthright{
+	padding-left: 0.5rem;
+}
+
+
+/*选择票种界面*/
+.content .asell_list .sell_info{
+	float: right;
+}
+.content .asell_list .sell_info>img{
+	margin-right: 0.5em;
+}
+
+.content .asell_list>.ticket_title{
+	background: #fff;
+	height: 0.4375rem;
+	padding-top: 0.4375rem;
+	padding-bottom :0.4375rem;
+	font-size: 0.4375rem;
+	line-height: 0.4375rem;
+	border-top:1px solid  #e2e2e2;
+	border-bottom:1px solid  #e2e2e2;
+}
+.content .asell_list>.ticket_title>img{
+	height: 0.4375rem;
+}
+.content .asell_list .sel_ticket{
+	background: #fff;
+	border-top:1px solid #e2e2e2; 
+	border-bottom:1px solid #e2e2e2;
+}
+.content .asell_list .sel_tickettitle{
+	background: #fff;
+	font-size: 0.40625rem;
+	line-height: 0.40625rem;
+	padding-bottom: 0.234375rem;
+	padding-top: 0.234375rem;
+	/*border-top: 1px solid  #e2e2e2e2e2e2;*/
+	border-bottom: 1px solid  #e2e2e2;
+}
+.content .asell_list .sel_tickettitle>.sell_info{
+	font-size: 0.34375rem;
+	line-height: 0.40625rem;
+}
+.content .asell_list .sel_tickettitle>.sell_info>img{
+	height: 0.40625rem;
+}
+.content .asell_list .sel_tickettitle>img{
+	height: 0.34375rem;
+}
+
+.content .asell_list>.sel_ticket>.ticket_list>.ticket_man{
+
+	background: #fff;
+	float: left;
+	font-size: 0.375rem;
+	line-height: 0.5625rem;
+
+}
+.content .asell_list>.sel_ticket>.ticket_list>.ticket_price{
+	float: left;
+	font-size: 0.4375rem;
+	color: #ff8800;
+	margin-left: 0.9375rem;
+	line-height: 0.5625rem;
+}
+.content .asell_list>.sel_ticket>.ticket_list>.ticket_num{
+	float: right;
+
+}
+.content .asell_list>.sel_ticket>.ticket_list>.ticket_num>img{
+	float: left;
+	height: 0.5625rem;
+	border: 1px solid #e2e2e2;
+
+}
+.content .asell_list>.sel_ticket>.ticket_list>.ticket_num>input{
+	float: left;
+	height: 0.5625rem;
+	width: 0.75rem;
+	border: 0;
+	border-top:1px solid #e2e2e2; 
+	border-bottom:1px solid #e2e2e2; 
+	text-align: center;
+	font-size: 0.375rem;
+	line-height: 0.5625rem;
+	outline: none;
+
+}
+.content .asell_list>.sel_ticket>.ticket_list{
+
+	padding-bottom: 0.4375rem;
+	padding-top: 0.4375rem;
+	/*border-top: 1px solid #e2e2e2;*/
+	border-bottom: 1px dashed #e2e2e2;
+}
+.content .asell_list>.sel_ticket>.ticket_list:last-child{
+		border-bottom: 0;
+}
+
+.content .asell_list .sel_goback{
+	background: #fff;
+	font-size: 0.40625rem;
+	line-height: 1.03125rem;
+	padding-top:0.171875rem;
+	padding-bottom:0.171875rem;
+	border-top:1px solid #e2e2e2;
+	border-bottom:1px solid #e2e2e2;
+
+}
+
+.content .asell_list .sel_goback .goback_date{
+	float: left;
+	font-size: 0.40625rem;
+	line-height: 1.03125rem;
+
+}
+.content .asell_list .sel_goback .goback_time1{
+	float: left;
+
+}
+.content .asell_list .sel_goback .goback_time1>img{
+	margin-top: 0.1875rem;
+	margin-left: 0.125rem;
+	margin-right: 0.125rem;
+	float: left;
+	width: 0.21875rem;
+
+}
+.content .asell_list .sel_goback .goback_time1>.goback_timeinfo{
+	float: left;
+}
+.content .asell_list .sel_goback .goback_time1>.goback_timeinfo>p{
+	line-height: 0.515625rem;
+	font-size: 0.375rem;
+}
+.content .asell_list .sel_goback .goback_time1>.goback_timeinfo>.go{
+	color: #ff8800;
+}
+.content .asell_list .sel_goback .goback_time1>.goback_timeinfo>.back{
+	color: #00be96;
+}
+.content .asell_list .sel_goback .goback_time1>.goback_timeinfo>.go>.agodata{
+	margin-right: 0.5em;
+}
+.content .asell_list .sel_goback .goback_time1>.goback_timeinfo>.back>.backtime{
+	margin-right: 0.5em;
+}
+
+.content .asell_list .sel_goback .goback_time2{
+	float: left;
+}
+
+.content .asell_list .sel_goback .goback_time2>.goback_timeinfo>.onego{
+	text-indent: 0.5em;
+	color: #ff8800;
+	float: left;
+}
+
+
+.content .asell_list .sel_goback .goback_time3>.goback_timeinfo>.onego{
+	text-indent: 0.5em;
+	color: #00be96;
+	float: left;	
+}
+
+.content .asell_list .sel_goback:before{
+	content: "";	
+	float: right;
+	width: 0.1875rem;
+	height: 0.375rem;
+	margin-top:0.375rem;
+	background-image:url(../images/icon-more.png); 
+	background-size: 100% 100%;  
+
+	
+}
+
+
+.content .aonelist{
+	background: #fff;
+
+}
+.content .cartime {
+	background: #fff;
+}
+.content .cartime li{
+	float: left;
+	font-size: 0.375rem;
+	padding:0.1875rem 0.25rem;
+	line-height: 0.375rem;
+	border: 0.03125rem solid #e0e0e0;
+	background: #f5f5f5;
+	border-radius: 0.09375rem;
+	margin-left: 0.75rem;
+	margin-bottom: 0.34375rem;
+	margin-top: 0.34375rem;
+
+}
+.content .cartime li.sel{
+	border: 0.03125rem solid #e59801;
+	background: #fda801;
+	color: #fff ;
+}
+.content .cartime li.disable{
+	border: 0.03125rem solid #fafafa;
+	background: #efefef;
+	color: #6e6e6e;	
+}
+/*.content .cartime li.nosel{}*/
+
+
+.content .asell_list .writeinfo{
+	height: 3rem;
+	position: relative;
+}
+.content .asell_list .writeinfo:after{
+	content: "";
+	position: absolute;
+}
+
+.content .asell_list .alist{
+	border-bottom:1px solid #e2e2e2;
+	border-top:1px solid #e2e2e2;	
+	background: #fff;
+}
+.content .asell_list .alist>div.title{
+	background: #fff;
+	font-size: 0.40625rem;
+	line-height: 0.40625rem;
+	padding-bottom: 0.28125rem;
+	padding-top: 0.28125rem;
+}
+.content .asell_list .alist>div.content{
+	font-size: 0.375rem;
+	line-height:1.0625rem;
+	height: 1.0625rem;
+	padding-top:1px;
+	padding-bottom:1px;
+
+}
+.content .asell_list .writeinfo{
+	height: 3rem;
+	position: relative;
+}
+.content .asell_list .writeinfo>img{
+	position: absolute;
+	right: 0;
+	width: 0.375rem;
+}
+.content .asell_list .writeinfo>textarea{
+	background: #f6f6f6;
+	width: 100%;
+	height: 100%;
+	border: 0;
+}
+.content .asell_list .writeinfo>textarea:focus{
+	outline: none;
+}
+
+
+.content .borderbot{
+	border-bottom:1px solid #e2e2e2; 
+}
+.content .borderbotda{
+	border-bottom:1px dashed #e2e2e2; 
+}
+
+.content .fire{
+	margin-bottom:0.140625rem;
+}
+.content .name{
+	outline:none;
+	background:#fff;
+	padding:0;
+	border: 0;
+	font-size: 0.375rem;
+    /*line-height: 0.375rem;*/
+    width: 100%;
+    height: 100%;
+    line-height: 1.0625rem;
+    /*border-bottom: 1px dashed #e2e2e2;*/
+}
+
+.content .phone:focus{
+	outline:none;
+
+
+}
+
+.content .name:focus{
+	outline:none;
+
+
+}
+
+.content .phone{
+	background:#fff;
+	outline:none;
+	padding:0;
+	border: 0;
+	font-size: 0.375rem;
+    /*line-height: 0.375rem;*/
+    width: 100%;
+    height: 100%;
+    line-height: 1.0625rem;
+    /*border-bottom: 1px dashed #e2e2e2;*/
+}
+.content .idcard:focus{
+	outline:none;
+
+
+}
+.content .idcard{
+	background:#fff;
+	outline:none;
+	padding:0;
+	border: 0;
+	font-size: 0.375rem;
+    /*line-height: 0.375rem;*/
+    width: 100%;
+    height: 100%;
+    line-height: 1.0625rem;
+    /*border-bottom: 1px dashed #e2e2e2;*/
+}
+
+
+
+.content .buy{
+	position: fixed;
+	bottom: 0;
+
+}
+.content .buy .buyprice{
+
+	height: 1.25rem;
+	width: 4.375rem;
+	line-height: 1.25rem;
+	text-align: center;
+	font-size: 0.5625rem;
+	float: left;
+	color: #ff8800;
+	background: #fff;
+	border-top: 1px solid #e2e2e2;
+
+}
+.content .buy .pay{
+	height: 1.25rem;
+	width: 5.625rem;
+	font-size: 0.5rem;
+	color: #fff;
+	line-height: 1.25rem;
+	background:#ff8800;
+	float: left;
+	text-align: center;
+	border-top: 1px solid #ff8800;
+}
+
+#detailsone{
+	position: absolute;
+	top: 0.0rem;
+	left: 0rem;
+	background: rgba(0,0,0,0.8);
+	width: 100%;
+	display: none;
+}
+.dscontent{
+	position: relative;
+	width: 10rem;
+	margin:0 auto; 
+}
+#x{
+	font-size: 0.5625rem;
+	color: red;
+	font-weight: 600;
+	position: absolute;
+	right: 0.3125rem;
+	top: 0.15625rem;
+}
+#detailcontent{
+	position: absolute;
+	top:0.625rem;
+	width:9.9475rem;
+	left:0.46875rem;
+	color: #fff;
+	font-size: 0.5625rem;
+}
+
+
+
+
+.placesel{; opacity:1; filter: Alpha(Opacity=80);  
+-moz-animation:myfirst 1s  linear infinite alternate;/* Firefox */
+-webkit-animation:myfirst 1s  linear infinite alternate;	/* Safari 和 Chrome */
+-o-animation:myfirst 1s  linear infinite alternate;
+animation:myfirst 1s  linear infinite alternate;}
+@keyframes myfirst{from {background:#ff8800;opacity:0.8; filter: Alpha(Opacity=80);}
+to {background:#ff8800;opacity:0.2; filter: Alpha(Opacity=20);}
+}

static/css/run_station.css

@@ -0,0 +1,99 @@
+.model_car {
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	/*-webkit-filter: blur(6px);
+	filter: blur(6px);*/
+	background-color: rgba(0, 0, 0, 0.25);
+	z-index: 100;
+}
+
+.model_box_car {
+	position: fixed;
+	height: 4.3rem;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: #fff;
+	/*-webkit-border-top-left-radius: 8px;
+	-webkit-border-top-right-radius: 8px;*/
+}
+
+.model_la_car {
+	width: 0.37rem;
+	height: 0.05rem;
+	border-radius: 4px;
+	background-color: rgba(0, 0, 0, 0.2);
+	margin-top: 0.06rem;
+}
+
+.bor_b_e5 {
+	border-bottom: 0.5px solid #e5e5e5;
+}
+.ui_p_t08 {
+	padding-top: 0.08rem;
+}
+
+.ui_p_b08 {
+	padding-bottom: 0.08rem;
+}
+
+.text_c_80 {
+	color: #686872;
+}
+.text_c_2b{
+	color:#2d2e3a;
+}
+
+.ui_p_t12 {
+	padding-top: 0.12rem;
+}
+
+.ui_p_b12 {
+	padding-bottom: 0.12rem;
+}
+
+.select_hei {
+	overflow: scroll;
+	height: 3.8rem;
+	-webkit-overflow-scrolling: touch;
+}
+
+.bus_sel_image {
+	background-image: url(../../../static/image/home/bus_sel.png);
+	width: 0.22rem;
+	height: 0.22rem;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+
+.bus_kong {
+	background-image: url(../../../static/image/home/bus_kong.png);
+	width: 0.22rem;
+	height: 0.22rem;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+
+.select_gou {
+	background-image: url(../../../static/image/home/bus_duihao.png);
+	width: 0.2rem;
+	height: 0.2rem;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+
+.select_quan {
+	background-image: url(../../../static/image/home/bus_kong.png);
+	width: 0.2rem;
+	height: 0.2rem;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+
+.select_kong {
+	width: 0.2rem;
+	height: 0.2rem;
+}

static/css/style.css

@@ -0,0 +1,109 @@
+html,body,div,ul,li,ol,a,input,textarea,p,dl,dt,dd{margin:0;padding:0;}
+ul li{list-style: none;}
+a{text-decoration: none;cursor: pointer;}
+html{height: 100%;}
+body{height: 100%;background: #f5f5f5;position: relative;font-family: '微软雅黑';max-width: 640px;margin:auto;}
+a,input,img,textarea,span,div{outline: 0;-webkit-tap-highlight-color:rgba(255,0,0,0);}
+header{
+    width:100%;
+    height: 45px;
+    background: #ececea;
+    border-bottom: 1px solid #ddd;
+}
+header.fixed{
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 99;
+}
+.header{
+    margin:0 20px;
+    text-align: center;
+    color: #4e4a49;
+    font-size: 1em;
+    height: 45px;
+    line-height: 45px;
+    position: relative;
+}
+#letter{
+    width: 100px;
+    height: 100px;
+    border-radius: 5px;
+    font-size: 75px;
+    color: #555;
+    text-align: center;
+    line-height: 100px;
+    background: rgba(145,145,145,0.6);
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    margin:-50px 0px 0px -50px;
+    z-index: 99;
+    display: none;
+}
+#letter img{
+    width: 50px;
+    height: 50px;
+    float: left;
+    margin:25px 0px 0px 25px;
+}
+.sort_box{
+    width: 100%;
+    margin-top: 0.01rem;
+    overflow: hidden;
+    background-color: #fff;
+}
+.sort_list{
+    padding:0.09rem 0.5rem 0.08rem 0.53rem;
+    position: relative;
+    /*height: 0.4rem;*/
+    line-height: 0.4rem;
+    border-bottom:1px solid #f0f2f6;
+}
+
+.sort_list .num_logo{
+    width: 50px;
+    height: 50px;
+    border-radius: 10px;
+    overflow: hidden;
+    position: absolute;
+    top: 5px;
+    left: 20px;
+}
+.sort_list .num_logo img{
+    width: 50px;
+    height: 50px;
+}
+.sort_list .num_name{
+    color: #666;
+    font-size: 0.16rem;
+}
+
+.sort_letter{
+	width: 0.14rem;
+    position: relative;
+    height: 0.19rem;
+    color: #1b1a20;
+    font-size: 0.14rem;
+    background-color: #eaebed;
+    margin-top: -0.25rem;
+    top: 0.25rem;
+    text-align: center;
+    line-height: 0.19rem;
+    left: 0.2rem;
+    margin-bottom: 0.05rem;
+}
+.initials{
+    position: fixed;
+    top: 2.5rem;
+    right: 0px;
+    height: 100%;
+    width: 0.25rem;
+    text-align: center;
+    font-size: 12px;
+    z-index: 99;
+    background: rgba(145,145,145,0);
+}
+.initials li img{
+    width: 14px;
+}

static/css/swiper.min.css

@@ -0,0 +1,582 @@
+/**
+ * Swiper 3.3.1
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * 
+ * http://www.idangero.us/swiper/
+ * 
+ * Copyright 2016, Vladimir Kharlampidi
+ * The iDangero.us
+ * http://www.idangero.us/
+ * 
+ * Licensed under MIT
+ * 
+ * Released on: February 7, 2016
+ */
+
+.swiper-container {
+	margin: 0 auto;
+	position: relative;
+	overflow: hidden;
+	z-index: 1
+}
+
+.swiper-container-no-flexbox .swiper-slide {
+	float: left
+}
+
+.swiper-container-vertical>.swiper-wrapper {
+	-webkit-box-orient: vertical;
+	-moz-box-orient: vertical;
+	-ms-flex-direction: column;
+	-webkit-flex-direction: column;
+	flex-direction: column
+}
+
+.swiper-wrapper {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+	display: -webkit-box;
+	display: -moz-box;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-transition-property: -webkit-transform;
+	-moz-transition-property: -moz-transform;
+	-o-transition-property: -o-transform;
+	-ms-transition-property: -ms-transform;
+	transition-property: transform;
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box
+}
+
+.swiper-container-android .swiper-slide,
+.swiper-wrapper {
+	-webkit-transform: translate3d(0, 0, 0);
+	-moz-transform: translate3d(0, 0, 0);
+	-o-transform: translate(0, 0);
+	-ms-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0)
+}
+
+.swiper-container-multirow>.swiper-wrapper {
+	-webkit-box-lines: multiple;
+	-moz-box-lines: multiple;
+	-ms-flex-wrap: wrap;
+	-webkit-flex-wrap: wrap;
+	flex-wrap: wrap
+}
+
+.swiper-container-free-mode>.swiper-wrapper {
+	-webkit-transition-timing-function: ease-out;
+	-moz-transition-timing-function: ease-out;
+	-ms-transition-timing-function: ease-out;
+	-o-transition-timing-function: ease-out;
+	transition-timing-function: ease-out;
+	margin: 0 auto
+}
+
+.swiper-slide {
+	-webkit-flex-shrink: 0;
+	-ms-flex: 0 0 auto;
+	flex-shrink: 0;
+	width: 100%;
+	height: 100%;
+	position: relative
+}
+
+.swiper-container-autoheight,
+.swiper-container-autoheight .swiper-slide {
+	height: auto
+}
+
+.swiper-container-autoheight .swiper-wrapper {
+	-webkit-box-align: start;
+	-ms-flex-align: start;
+	-webkit-align-items: flex-start;
+	align-items: flex-start;
+	-webkit-transition-property: -webkit-transform, height;
+	-moz-transition-property: -moz-transform;
+	-o-transition-property: -o-transform;
+	-ms-transition-property: -ms-transform;
+	transition-property: transform, height
+}
+
+.swiper-container .swiper-notification {
+	position: absolute;
+	left: 0;
+	top: 0;
+	pointer-events: none;
+	opacity: 0;
+	z-index: -1000
+}
+
+.swiper-wp8-horizontal {
+	-ms-touch-action: pan-y;
+	touch-action: pan-y
+}
+
+.swiper-wp8-vertical {
+	-ms-touch-action: pan-x;
+	touch-action: pan-x
+}
+
+.swiper-button-next,
+.swiper-button-prev {
+	position: absolute;
+	top: 50%;
+	width: 27px;
+	height: 44px;
+	margin-top: -22px;
+	z-index: 10;
+	cursor: pointer;
+	-moz-background-size: 27px 44px;
+	-webkit-background-size: 27px 44px;
+	background-size: 27px 44px;
+	background-position: center;
+	background-repeat: no-repeat
+}
+
+.swiper-button-next.swiper-button-disabled,
+.swiper-button-prev.swiper-button-disabled {
+	opacity: .35;
+	cursor: auto;
+	pointer-events: none
+}
+
+.swiper-button-prev,
+.swiper-container-rtl .swiper-button-next {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+	left: 10px;
+	right: auto
+}
+
+.swiper-button-prev.swiper-button-black,
+.swiper-container-rtl .swiper-button-next.swiper-button-black {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
+}
+
+.swiper-button-prev.swiper-button-white,
+.swiper-container-rtl .swiper-button-next.swiper-button-white {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
+}
+
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+	right: 10px;
+	left: auto
+}
+
+.swiper-button-next.swiper-button-black,
+.swiper-container-rtl .swiper-button-prev.swiper-button-black {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
+}
+
+.swiper-button-next.swiper-button-white,
+.swiper-container-rtl .swiper-button-prev.swiper-button-white {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
+}
+
+.swiper-pagination {
+	position: absolute;
+	text-align: center;
+	-webkit-transition: .3s;
+	-moz-transition: .3s;
+	-o-transition: .3s;
+	transition: .3s;
+	-webkit-transform: translate3d(0, 0, 0);
+	-ms-transform: translate3d(0, 0, 0);
+	-o-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+	z-index: 10
+}
+
+.swiper-pagination.swiper-pagination-hidden {
+	opacity: 0
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets,
+.swiper-pagination-custom,
+.swiper-pagination-fraction {
+	bottom: 10px;
+	width: 100%
+}
+
+.swiper-pagination-bullet {
+	width: 8px;
+	height: 8px;
+	display: inline-block;
+	border-radius: 12px;
+	background: #fff;
+}
+
+button.swiper-pagination-bullet {
+	border: none;
+	margin: 0;
+	padding: 0;
+	box-shadow: none;
+	-moz-appearance: none;
+	-ms-appearance: none;
+	-webkit-appearance: none;
+	appearance: none
+}
+
+.swiper-pagination-clickable .swiper-pagination-bullet {
+	cursor: pointer
+}
+
+.swiper-pagination-white .swiper-pagination-bullet {
+	background: #fff
+}
+
+.swiper-pagination-bullet-active {
+	opacity: 1;
+	background: #ffffff;
+	width: 18px;
+}
+
+.swiper-pagination-white .swiper-pagination-bullet-active {
+	background: #fff
+}
+
+.swiper-pagination-black .swiper-pagination-bullet-active {
+	background: #000
+}
+
+.swiper-container-vertical>.swiper-pagination-bullets {
+	right: 10px;
+	top: 50%;
+	-webkit-transform: translate3d(0, -50%, 0);
+	-moz-transform: translate3d(0, -50%, 0);
+	-o-transform: translate(0, -50%);
+	-ms-transform: translate3d(0, -50%, 0);
+	transform: translate3d(0, -50%, 0)
+}
+
+.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
+	margin: 5px 0;
+	display: block
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
+	margin: 0 5px
+}
+
+.swiper-pagination-progress {
+	background: rgba(0, 0, 0, .25);
+	position: absolute
+}
+
+.swiper-pagination-progress .swiper-pagination-progressbar {
+	background: #007aff;
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	-webkit-transform: scale(0);
+	-ms-transform: scale(0);
+	-o-transform: scale(0);
+	transform: scale(0);
+	-webkit-transform-origin: left top;
+	-moz-transform-origin: left top;
+	-ms-transform-origin: left top;
+	-o-transform-origin: left top;
+	transform-origin: left top
+}
+
+.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
+	-webkit-transform-origin: right top;
+	-moz-transform-origin: right top;
+	-ms-transform-origin: right top;
+	-o-transform-origin: right top;
+	transform-origin: right top
+}
+
+.swiper-container-horizontal>.swiper-pagination-progress {
+	width: 100%;
+	height: 4px;
+	left: 0;
+	top: 0
+}
+
+.swiper-container-vertical>.swiper-pagination-progress {
+	width: 4px;
+	height: 100%;
+	left: 0;
+	top: 0
+}
+
+.swiper-pagination-progress.swiper-pagination-white {
+	background: rgba(255, 255, 255, .5)
+}
+
+.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
+	background: #fff
+}
+
+.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
+	background: #000
+}
+
+.swiper-container-3d {
+	-webkit-perspective: 1200px;
+	-moz-perspective: 1200px;
+	-o-perspective: 1200px;
+	perspective: 1200px
+}
+
+.swiper-container-3d .swiper-cube-shadow,
+.swiper-container-3d .swiper-slide,
+.swiper-container-3d .swiper-slide-shadow-bottom,
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-wrapper {
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	-ms-transform-style: preserve-3d;
+	transform-style: preserve-3d
+}
+
+.swiper-container-3d .swiper-slide-shadow-bottom,
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	z-index: 10
+}
+
+.swiper-container-3d .swiper-slide-shadow-left {
+	background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
+	background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: -moz-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-3d .swiper-slide-shadow-right {
+	background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
+	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: -moz-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-3d .swiper-slide-shadow-top {
+	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
+	background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-3d .swiper-slide-shadow-bottom {
+	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
+	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-coverflow .swiper-wrapper,
+.swiper-container-flip .swiper-wrapper {
+	-ms-perspective: 1200px
+}
+
+.swiper-container-cube,
+.swiper-container-flip {
+	overflow: visible
+}
+
+.swiper-container-cube .swiper-slide,
+.swiper-container-flip .swiper-slide {
+	pointer-events: none;
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility: hidden;
+	-ms-backface-visibility: hidden;
+	backface-visibility: hidden;
+	z-index: 1
+}
+
+.swiper-container-cube .swiper-slide .swiper-slide,
+.swiper-container-flip .swiper-slide .swiper-slide {
+	pointer-events: none
+}
+
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-active .swiper-slide-active,
+.swiper-container-flip .swiper-slide-active,
+.swiper-container-flip .swiper-slide-active .swiper-slide-active {
+	pointer-events: auto
+}
+
+.swiper-container-cube .swiper-slide-shadow-bottom,
+.swiper-container-cube .swiper-slide-shadow-left,
+.swiper-container-cube .swiper-slide-shadow-right,
+.swiper-container-cube .swiper-slide-shadow-top,
+.swiper-container-flip .swiper-slide-shadow-bottom,
+.swiper-container-flip .swiper-slide-shadow-left,
+.swiper-container-flip .swiper-slide-shadow-right,
+.swiper-container-flip .swiper-slide-shadow-top {
+	z-index: 0;
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility: hidden;
+	-ms-backface-visibility: hidden;
+	backface-visibility: hidden
+}
+
+.swiper-container-cube .swiper-slide {
+	visibility: hidden;
+	-webkit-transform-origin: 0 0;
+	-moz-transform-origin: 0 0;
+	-ms-transform-origin: 0 0;
+	transform-origin: 0 0;
+	width: 100%;
+	height: 100%
+}
+
+.swiper-container-cube.swiper-container-rtl .swiper-slide {
+	-webkit-transform-origin: 100% 0;
+	-moz-transform-origin: 100% 0;
+	-ms-transform-origin: 100% 0;
+	transform-origin: 100% 0
+}
+
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-next,
+.swiper-container-cube .swiper-slide-next+.swiper-slide,
+.swiper-container-cube .swiper-slide-prev {
+	pointer-events: auto;
+	visibility: visible
+}
+
+.swiper-container-cube .swiper-cube-shadow {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	background: #000;
+	opacity: .6;
+	-webkit-filter: blur(50px);
+	filter: blur(50px);
+	z-index: 0
+}
+
+.swiper-container-fade.swiper-container-free-mode .swiper-slide {
+	-webkit-transition-timing-function: ease-out;
+	-moz-transition-timing-function: ease-out;
+	-ms-transition-timing-function: ease-out;
+	-o-transition-timing-function: ease-out;
+	transition-timing-function: ease-out
+}
+
+.swiper-container-fade .swiper-slide {
+	pointer-events: none;
+	-webkit-transition-property: opacity;
+	-moz-transition-property: opacity;
+	-o-transition-property: opacity;
+	transition-property: opacity
+}
+
+.swiper-container-fade .swiper-slide .swiper-slide {
+	pointer-events: none
+}
+
+.swiper-container-fade .swiper-slide-active,
+.swiper-container-fade .swiper-slide-active .swiper-slide-active {
+	pointer-events: auto
+}
+
+.swiper-scrollbar {
+	border-radius: 10px;
+	position: relative;
+	-ms-touch-action: none;
+	background: rgba(0, 0, 0, .1)
+}
+
+.swiper-container-horizontal>.swiper-scrollbar {
+	position: absolute;
+	left: 1%;
+	bottom: 3px;
+	z-index: 50;
+	height: 5px;
+	width: 98%
+}
+
+.swiper-container-vertical>.swiper-scrollbar {
+	position: absolute;
+	right: 3px;
+	top: 1%;
+	z-index: 50;
+	width: 5px;
+	height: 98%
+}
+
+.swiper-scrollbar-drag {
+	height: 100%;
+	width: 100%;
+	position: relative;
+	background: rgba(0, 0, 0, .5);
+	border-radius: 10px;
+	left: 0;
+	top: 0
+}
+
+.swiper-scrollbar-cursor-drag {
+	cursor: move
+}
+
+.swiper-lazy-preloader {
+	width: 42px;
+	height: 42px;
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	margin-left: -21px;
+	margin-top: -21px;
+	z-index: 10;
+	-webkit-transform-origin: 50%;
+	-moz-transform-origin: 50%;
+	transform-origin: 50%;
+	-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
+	-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
+	animation: swiper-preloader-spin 1s steps(12, end) infinite
+}
+
+.swiper-lazy-preloader:after {
+	display: block;
+	content: "";
+	width: 100%;
+	height: 100%;
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+	background-position: 50%;
+	-webkit-background-size: 100%;
+	background-size: 100%;
+	background-repeat: no-repeat
+}
+
+.swiper-lazy-preloader-white:after {
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}
+
+@-webkit-keyframes swiper-preloader-spin {
+	100% {
+		-webkit-transform: rotate(360deg)
+	}
+}
+
+@keyframes swiper-preloader-spin {
+	100% {
+		transform: rotate(360deg)
+	}
+}

static/css/tabbar.css

@@ -0,0 +1,38 @@
+
+
+.tabbar{
+	position: fixed;
+	width: 100%;
+	bottom: 0;
+	/*-webkit-backdrop-filter: blur(10px);
+	backdrop-filter: blur(10px);*/
+	/*-webkit-filter:blur(10px);*/
+	background-color: rgba(233, 234, 238, 0.95);
+	box-shadow: inset 0 0.5px 0 0 rgba(44, 45, 58, 0.1);
+	height: 0.5rem;
+	/*-webkit-filter: blur(10px);
+	filter: blur(10px);*/
+}
+
+.select_title{
+	font-family: PingFangSC;
+	font-size: 0.1rem;
+	font-weight: normal;
+	font-style: normal;
+	font-stretch: normal;
+	line-height: 1.0;
+	letter-spacing: 0.1px;
+	color:  #368ff4;
+}
+
+.normal_title{
+	font-family: PingFangSC;
+	font-size: 0.1rem;
+	font-weight: normal;
+	font-style: normal;
+	font-stretch: normal;
+	line-height: 1.0;
+	letter-spacing: 0.1px;
+	color: #686872;
+	/*padding-bottom: 0.03rem;*/
+}

static/css/travel_book.css

@@ -0,0 +1,129 @@
+.swiper-container {
+	width: 100%;
+	/*height: 0.5rem;*/
+}
+
+.swiper-slide {
+	text-align: center;
+	font-size: 18px;
+	background: #fff;
+	Center slide text vertically display: -webkit-box;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	-webkit-justify-content: center;
+	justify-content: center;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	-webkit-align-items: center;
+	align-items: center;
+}
+
+.swiper-pagination-bullet {
+	background: rgba(255, 255, 255, 0.4);
+}
+
+.swiper-pagination-bullet-active {
+	background-color: #ffffff;
+}
+
+.hot_area_div {
+	padding: 0.08rem 0.08rem;
+	background-color: #ffffff;
+	box-shadow: 0 0.5px 3px 0 #e9ebee;
+}
+
+.hot_area {
+	padding: 0.03rem 0;
+	border-radius: 0.5rem;
+	background-color: #e9ebee;
+	margin: 0 0.04rem;
+	color: #2d2e3a;
+	font-size: 0.12rem;
+	font-weight: normal;
+	font-style: normal;
+	font-stretch: normal;
+	line-height: 1.0;
+	letter-spacing: 0.1px;
+}
+
+.hot_area_title {
+	font-family: PingFangSC;
+	font-size: 0.12rem;
+	font-weight: normal;
+	font-style: normal;
+	font-stretch: normal;
+	letter-spacing: 0.1px;
+	color: #686872;
+}
+
+.cms_title {
+	padding-left: 0.08rem;
+	padding-top: 0.05rem;
+	padding-bottom: 0.05rem;
+	font-family: PingFangSC;
+	font-size: 11px;
+	font-weight: normal;
+	font-style: normal;
+	font-stretch: normal;
+	line-height: 1.0;
+	letter-spacing: 0.1px;
+	color: #686872;
+}
+
+.see_more {
+	font-family: PingFangSC;
+	font-size: 0.14rem;
+	font-weight: normal;
+	font-style: normal;
+	font-stretch: normal;
+	line-height: 1.0;
+	letter-spacing: 0.1px;
+	text-align: right;
+	color: #6699ff;
+	padding-right: 0.08rem;
+	padding-top: 0.12rem;
+	padding-bottom: 0.12rem;
+}
+
+.info_image {
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+	width: 0.35rem;
+	height: 0.35rem;
+	margin-bottom: 0.03rem;
+}
+
+.search_bar{
+	border-radius: 5px;
+	background-color: rgba(45, 46, 58, 0.6);
+	position: absolute;
+	top: 0.08rem;
+	left: 0.08rem;
+	right: 0.08rem;
+	height: 0.3rem;
+	z-index: 1;
+}
+
+.search_img{
+	background-image: url('../../../static/image/home/searchicon2.png');
+	margin-left: 0.12rem;
+	width: 0.14rem;
+	height: 0.14rem;
+	background-repeat: no-repeat;
+	background-size: 100% 100%;
+}
+
+.ad{
+	border-radius: 5px;
+	/*background-image: linear-gradient(to bottom, #151c3e, #314d93);*/
+	box-shadow: 0 0.5px 3px 0 #e9ebee;
+	
+	margin: 0.18rem 0;
+	width: 3.6rem;
+	/*background-color: red;*/
+}
+
+

static/css/ui-base.css

@@ -0,0 +1,494 @@
+* {
+	line-height: 1.42;
+    margin: 0;
+    padding: 0;
+    font-size: 0.12rem;
+    color: #333;
+    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,STHeiti,"Microsoft Yahei",sans-serif!important;
+}
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button, html input[type="button"], /* 1 */
+input[type="reset"], input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer
+}
+.clg_input {
+
+}
+a {
+    text-decoration: none;
+}
+input, textarea {
+    outline: none;
+    display: inline-block;
+    box-sizing: border-box;
+    background: transparent;
+    border: 0;
+    height: 0.2rem;
+}
+
+div {
+    outline: 0 !important;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    position: relative;
+}
+
+ul, li {
+    list-style: none;
+}
+
+.uc-tl {
+    -webkit-border-top-left-radius: .6rem;
+    border-top-left-radius: .6rem
+}
+
+.uc-tr {
+    -webkit-border-top-right-radius: .6rem;
+    border-top-right-radius: .6rem
+}
+
+.uc-bl {
+    -webkit-border-bottom-left-radius: .6rem;
+    border-bottom-left-radius: .6rem
+}
+
+.uc-br {
+    -webkit-border-bottom-right-radius: .6rem;
+    border-bottom-right-radius: .6rem
+}
+
+.uc-t {
+    -webkit-border-top-left-radius: .6rem;
+    border-top-left-radius: .6rem;
+    -webkit-border-top-right-radius: .6rem;
+    border-top-right-radius: .6rem
+}
+
+.uc-b {
+    -webkit-border-bottom-left-radius: .6rem;
+    border-bottom-left-radius: .6rem;
+    -webkit-border-bottom-right-radius: .6rem;
+    border-bottom-right-radius: .6rem
+}
+
+.uc-r {
+    -webkit-border-top-right-radius: .6rem;
+    border-top-right-radius: .6rem;
+    -webkit-border-bottom-right-radius: .6rem;
+    border-bottom-right-radius: .6rem
+}
+
+.uc-l {
+    -webkit-border-top-left-radius: .6rem;
+    border-top-left-radius: .6rem;
+    -webkit-border-bottom-left-radius: .6rem;
+    border-bottom-left-radius: .6rem
+}
+
+.uc-a {
+    -webkit-border-radius: .6rem;
+    border-radius: .6rem
+}
+
+.uc-n {
+    -webkit-border-radius: 0;
+    border-radius: 0
+}
+
+.uc-tl1 {
+    -webkit-border-top-left-radius: 0.03rem;
+    border-top-left-radius: 0.03rem
+}
+
+.uc-tr1 {
+    -webkit-border-top-right-radius: 0.03rem;
+    border-top-right-radius: 0.03rem
+}
+
+.uc-bl1 {
+    -webkit-border-bottom-left-radius: 0.03rem;
+    border-bottom-left-radius: 0.03rem
+}
+
+.uc-br1 {
+    -webkit-border-bottom-right-radius: 0.03rem;
+    border-bottom-right-radius: 0.03rem
+}
+
+.uc-t1 {
+    -webkit-border-top-left-radius: 0.3rem;
+    border-top-left-radius: 0.3rem;
+    -webkit-border-top-right-radius: 0.3rem;
+    border-top-right-radius: 0.3rem
+}
+
+.uc-b1 {
+    -webkit-border-bottom-left-radius: 0.3rem;
+    border-bottom-left-radius: 0.3rem;
+    -webkit-border-bottom-right-radius: 0.3rem;
+    border-bottom-right-radius: 0.3rem
+}
+
+.uc-r1 {
+    -webkit-border-top-right-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+    -webkit-border-bottom-right-radius: 0.3rem;
+    border-bottom-right-radius: 0.3rem
+}
+
+.uc-l1 {
+    -webkit-border-top-left-radius: 0.3rem;
+    border-top-left-radius: 0.3rem;
+    -webkit-border-bottom-left-radius: 0.3rem;
+    border-bottom-left-radius: 0.3rem
+}
+
+.uc-a1 {
+    -webkit-border-radius: 0.3rem;
+    border-radius: 0.3rem
+}
+.uc-a3 {
+    -webkit-border-radius: 0.4rem;
+    border-radius: 0.4rem
+}
+.uc-a2 {
+    -webkit-border-radius: 1.2rem;
+    border-radius: 1.2rem
+}
+.uc-tl, .uc-tr, .uc-bl, .uc-br, .uc-t, .uc-b, .uc-r, .uc-l, .uc-a, .uc-n, .uc-tl1, .uc-tr1, .uc-bl1, .uc-br1, .uc-t1, .uc-b1, .uc-r1, .uc-l1, .uc-a1, .uc-a2, .uc-a3 {
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box
+}
+
+.us {
+    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, .3)
+}
+.us1 {
+    -webkit-box-shadow: 0 1px 4px rgba(120, 120, 120, .3);
+    box-shadow: 0 1px 4px rgba(120, 120, 120, .3)
+}
+.us-i {
+    -webkit-box-shadow: inset 0px 2px 3px rgba(0, 0, 0, .4);
+    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, .4)
+}
+
+.uts {
+    text-shadow: 0px 2px 2px #000;
+}
+
+.um, .um body {
+    height: 100%;
+    padding: 0px;
+    margin: 0px;
+    font-family: "Helvetica Neue", Helvetica;
+}
+
+.um-vp {
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-user-select: none
+}
+
+.um-vp .up {
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100%;
+    max-height: 100%;
+    position: absolute;
+    border: 0
+}
+
+.uh, .uf {
+    display: block;
+    width: 100%;
+    font-size: 1rem;
+}
+
+.up .uh, .up .uf, .pos_re {
+    position: relative
+}
+
+.uh .ut, .uf .ut {
+    padding: .72rem 1rem .72rem;
+    margin: 0;
+}
+
+.ufl {
+    float: left !important;
+}
+.ufr {
+    float: right !important;
+}
+
+.ulev0 {
+    font-size: 0.12rem;
+}
+
+.ulev1 {
+    font-size: 0.14rem;
+}
+
+.ulev2 {
+    font-size: 0.16rem;
+}
+
+.ulev3 {
+    font-size: 0.18rem;
+}
+
+.ulev4 {
+    font-size: 0.20rem;
+}
+.ulev5 {
+    font-size: 0.22rem;
+}
+.ulev6 {
+    font-size: 0.24rem;
+}
+.ulev7 {
+    font-size: 0.26rem;
+}
+.ulev8 {
+    font-size: 0.28rem;
+}
+.ulev9 {
+    font-size: 0.30rem;
+}
+.ulim {
+    max-width: 5rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.uinl {
+    display: inline-block;
+    position: relative;
+}
+
+.uinn {
+    padding: 0.15rem;
+}
+.uinn1 {
+    padding: 0.1rem 0.15rem;
+}
+.uinn2 {
+    padding: 0.5rem 1rem;
+}
+.uinn3 {
+    padding: 0.2rem;
+}
+.uinn4 {
+    padding: 0 0.1rem;
+}
+.uinn5 {
+    padding: 0.75rem 0.5rem;
+}
+.uinn6 {
+    padding: 0.1rem;
+}
+.uinn8 {
+    padding: 0.05rem;
+}
+.uinn7 {
+    padding: 0.66rem 0.375rem;
+}
+.uinn9 {
+    padding: 0.15rem 0rem;
+}
+.uinn10 {
+    padding: 0.1rem 0rem;
+}
+.umh1 {
+    min-height: 1rem;
+}
+
+.umh2 {
+    min-height: 1.2rem;
+}
+
+.umh3 {
+    min-height: 1.5rem;
+}
+
+.umh4 {
+    min-height: 2rem;
+}
+.umh5 {
+    min-height: 3rem;
+}
+.umh6 {
+    min-height: 4rem;
+}
+.umh7 {
+    min-height: 1.8rem;
+}
+.umw1 {
+    min-width: 1rem;
+}
+.umw1-5 {
+    min-width: 1.5rem;
+}
+
+.umw2 {
+    min-width: 2rem;
+}
+
+.umw3 {
+    min-width: 3rem;
+}
+
+.umw4 {
+    min-width: 4rem;
+}
+
+.tx-l {
+    text-align: left;
+}
+.tx-r {
+    text-align: right;
+}
+.tx-c {
+    text-align: center;
+}
+
+.ut-s {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap !important;
+    outline: 0 !important
+}
+
+.ut-m {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: normal !important;
+    outline: 0 !important
+}
+
+.uba {
+    border: 1px solid;
+}
+.uba1 {
+    border: 2px solid;
+}
+.uba2 {
+    border: 3px solid;
+}
+
+.ubt {
+    border-top: 1px solid;
+}
+.ubb {
+    border-bottom: 1px solid;
+}
+
+.ubl {
+    border-left: 1px solid;
+}
+
+.ubr {
+    border-right: 1px solid;
+}
+
+.uhide {
+    display: none !important;
+}
+
+.umar-b {
+    margin-bottom: 0.2rem;
+}
+.umar-t {
+    margin-top: 0.2rem;
+}
+.umar-l {
+    margin-left: 0.2rem;
+}
+.umar-r {
+    margin-right: 0.2rem;
+}
+.umar-b15 {
+    margin-bottom: 0.15rem;
+}
+.umar-t15 {
+    margin-top: 0.15rem;
+}
+.umar-l15 {
+    margin-left: 0.15rem;
+}
+.umar-r15 {
+    margin-right: 0.15rem;
+}
+.umar-a15 {
+    margin: 0.15rem;
+}
+.umar-a {
+    margin: 0.05rem 0.15rem;
+}
+.umar-a1 {
+    margin: 0rem 0.15rem;
+}
+
+.umar-a-15{
+	margin: 0.15rem;
+}
+
+.uof {
+    overflow: hidden;
+}
+.uof-x {
+    overflow-x: hidden;
+}
+.uof-y {
+    overflow-y: hidden;
+}
+
+.uabs {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.uabs-r {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.utra {
+    -webkit-transition: all 300ms ease-in 100ms
+}
+.line1 {
+    -webkit-line-clamp: 1;
+}
+.line2 {
+    -webkit-line-clamp: 2;
+}
+
+.line3 {
+    -webkit-line-clamp: 3;
+}
+
+.ani-act {
+    transform: scale(0.95,0.97);
+    -webkit-transform: scale(0.95,0.97);
+    -webkit-transition-duration: 300ms;
+    opacity: .7;
+}
+
+.uh_ios7 .uh {
+    padding: 1rem 0 0;
+}

static/css/ui-box.css

@@ -0,0 +1,164 @@
+.ub
+{
+	display: -webkit-box;
+	display: -moz-box;
+	display: box;
+	position:relative;
+}
+/*以反方向显示 div 框的子元素*/
+.ub-rev
+{
+	-webkit-box-direction:reverse;
+	-moz-box-direction:reverse;
+	box-direction:reverse;
+}
+
+.ub-fh
+{
+	width:100%;
+}
+
+.ub-fv
+{
+	height:100%;
+}
+
+.ub-con
+{
+	position:absolute;
+	width:100%;
+	height:100%;
+}
+/*通过使用 box-align and box-pack 属性，居中 div 框的子元素*/
+.ub-ac
+{
+	-webkit-box-align:center;
+	-moz-box-align:center;
+	box-align:center;
+}
+/*通过使用 box-align and box-pack :end属性，右下 div 框的子元素*/
+.ub-ae
+{
+	-webkit-box-align:end;
+	-moz-box-align:end;
+	box-align:end;
+}
+
+.ub-pc
+{
+	-webkit-box-pack:center;
+	-moz-box-pack:center;
+	box-pack:center;
+}
+.ub-pe
+{
+	-webkit-box-pack:end;
+	-moz-box-pack:end;
+	box-pack:end;
+}
+/*不知道*/
+.ub-pj
+{
+	-webkit-box-pack:justify;
+	-moz-box-pack:justify;
+	box-pack:justify;
+}
+/*从上向下垂直排列子元素。*/
+.ub-ver
+{
+	-webkit-box-orient:vertical;
+	-moz-box-orient:vertical;
+	box-orient:vertical;
+}
+/*box-flex主要让子容器针对父容器的宽度按一定规则进行划分*/
+.ub-f1
+{
+	position:relative;
+	-webkit-box-flex: 1;
+	-moz-box-flex: 1;  
+	box-flex: 1;
+}
+
+.ub-f2
+{
+	position:relative;
+	-webkit-box-flex: 2;
+	-moz-box-flex: 2;
+	box-flex: 2; 
+}
+
+.ub-f3
+{
+	position:relative;
+	-webkit-box-flex: 3;
+	-moz-box-flex: 3;
+	box-flex: 3;
+}
+
+.ub-f4
+{
+	position:relative;
+	-webkit-box-flex: 4;
+	-moz-box-flex: 4;
+	box-flex: 4;
+}
+
+.ub-img
+{
+	/*把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。*/
+	-webkit-background-size:contain;
+	background-size:contain;
+	/*背景图像将仅显示一次。*/
+	background-repeat:no-repeat;
+	background-position:center;
+}
+
+.ub-img1
+{	
+	/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
+背景图像的某些部分也许无法显示在背景定位区域中。*/
+	-webkit-background-size:cover;
+	background-size:cover;
+	background-repeat:no-repeat;
+	background-position:center;
+}
+.ub-img2
+{
+	background-repeat:repeat-x;
+	/*宽高*/
+	background-size:auto 100%
+}
+.ub-img3
+{
+	background-repeat:repeat-y;
+	background-size:100% auto
+}
+
+.ub-img4
+{
+	-webkit-background-size:100% auto;
+	background-size:100% auto;
+	background-repeat:no-repeat;
+	background-position:center;
+}
+.ub-img5
+{
+	-webkit-background-size:auto 100%;
+	background-size:auto 100%;
+	background-repeat:no-repeat;
+	background-position:center;
+}
+
+.ub-img6
+{
+	background-repeat:no-repeat;
+	background-position:center;
+}
+.ub-img7
+{
+	-webkit-background-size:100% 100%;
+	background-size:100% 100%;
+	background-repeat:no-repeat;
+	background-position:center;
+}
+

static/css/ui-color.css

@@ -0,0 +1,203 @@
+/*背景色*/
+
+/*.bg_color {
+	background-color: rgb(240, 242, 246);
+}*/
+.bg_color {
+	background-color: #f6f8f9;
+}
+
+/*深绿*/
+
+.darkgreen_color {
+	background-color: #94dcd4;
+}
+
+.fontgreen_color {
+	color: #519d9e;
+}
+
+
+/*白色*/
+
+.lightgreen_color {
+	background-color: #ffffff;
+
+}
+
+
+/*字体浅灰色*/
+
+.lightgray_color {
+	color: rgb(207, 207, 207);
+}
+
+
+/*浅灰灰*/
+
+.lightgray_color_gray {
+	color: #cccccc;
+}
+
+/*浅绿色字体*/
+.main_font_color{
+	color: #519d9e;
+}
+.end_font_color{
+	color: #1b1a20;
+}
+
+/*字体中度灰色*/
+
+.commongray_color {
+	color: #999999;
+}
+
+.layergray_bc {
+	background-color: #999999;
+}
+
+.fontmiddle_color {
+	color: #666666;
+}
+
+.price_color {
+	color: #3d434f;
+}
+
+
+/*字体浅黑色*/
+
+.lightblack_color {
+	color: #333333;
+}
+
+
+/*字体深黑色*/
+
+.darkblack_color {
+	color: #1b1a20;
+}
+
+.white_color {
+	color: #ffffff;
+}
+
+
+/*黄色字体*/
+
+.yellow_color {
+	color: #ffca50;
+}
+
+
+/*浅黄色背景*/
+
+.lightyellow_color {
+	background-color: #fffeea;
+}
+
+
+/*layer层字体*/
+
+.layer_color {
+	color: #50576e;
+}
+
+.white_bccolor {
+	background-color: white;
+}
+
+
+/*layer层背景*/
+
+.layer_background {
+	background-color: #ffffff;
+}
+
+
+
+/*待支付颜色*/
+
+.pay145_color {
+	color: #ff6d6d;
+}
+/*已出票颜色*/
+
+.pay146_color {
+	color: #1b1a20;
+}
+
+/*已完成颜色*/
+
+.pay147_color {
+	color: #999999;
+}
+/*已取消颜色*/
+
+.pay148_color {
+	color: #999999;
+}
+
+
+/*分割线颜色*/
+
+.line_color_b {
+	border-bottom-color: #e5e5e5;
+}
+
+.line_color_t {
+	border-top-color: #e5e5e5;
+}
+
+.font_blue_color {
+	color: #0076ff;
+}
+
+.ui_line_b_d {
+	border-bottom: 1px dashed #f0f2f6;
+}
+
+.ui_line_a_c {
+	border: 1px solid #666666;
+}
+
+
+/*微信改版列表背景色*/
+
+.ui_list_bg_color {
+	background-color: rgb(247, 248, 250);
+}
+
+
+/*中间线边框颜色*/
+
+.inner_up_line_color {
+	border-top: 1px solid #f0f2f6;
+}
+
+
+/*中间线边框颜色*/
+
+.inner_down_line_color {
+	border-bottom: 1px solid #f0f2f6;
+}
+
+
+/*上边框颜色*/
+
+.outer_line_up_color {
+	border-top: 1px solid #E5E5E5;
+}
+
+
+/*下边框颜色*/
+
+.outer_line_down_color {
+	border-bottom: 1px solid #E5E5E5;
+}
+
+.pay_bg_color {
+	background-color: rgb(255, 254, 234);
+}
+