竞拍前端客户端

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,4 @@
+/build/
+/config/
+/dist/
+/*.js

.eslintrc.js

@@ -0,0 +1,31 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential',
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    "semi": [2, "always"],
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
+  }
+}

.gitignore

@@ -0,0 +1,15 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+package-lock.json

.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+
+node_js:
+  - '8'
+
+install:
+  - npm i npm install && npm install
+
+script:
+  - npm run build

README-ZH.md

@@ -0,0 +1,94 @@
+# MALL-VUE
+[![Build Status](https://travis-ci.com/PowerDos/Mall-Vue.svg?branch=master)](https://travis-ci.com/PowerDos/Mall-Vue)
+[![VueJS Version](https://img.shields.io/badge/VueJS-v2.5-green.svg?style=flat-square)](https://vuejs.org/)
+[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![Read the Docs (version)](https://img.shields.io/readthedocs/pip/stable.svg)](https://github.com/PowerDos/Mall-Vue)
+[![status](https://img.shields.io/badge/Mall--Vue-maintain-brightgreen.svg)](https://standardjs.com)
+[![npm version](https://img.shields.io/badge/npm-v5.5.1-brightgreen.svg)](https://standardjs.com)
+[![iview version](https://img.shields.io/badge/iview-2.13.1-brightgreen.svg)](https://standardjs.com)
+[![author](https://img.shields.io/badge/author-Gavin-brightgreen.svg)](https://standardjs.com)
+
+> 这是一个基于VUE + VUEX + iView做的一个电商网站前端项目, 附带前后端分离实现版本(在**forMallServer**分支)，欢迎fork或star
+
+
+> 项目预览地址(demo)： [https://powerdos.github.io/Mall-Vue/index.html](https://powerdos.github.io/Mall-Vue/index.html "Mall-Vue")
+
+## Document
+[中文](https://github.com/PowerDos/Mall-Vue/blob/master/README-ZH.md) | [English](https://github.com/PowerDos/Mall-Vue/blob/master/README.md)
+
+## 说明
+> **master**分支是单纯的前端项目，**forMallServer**分支为与后端接口结合的前端项目，附后端API项目地址：[https://github.com/PowerDos/Mall-Server](https://github.com/PowerDos/Mall-Server), 本项目仅供学习参考
+
+
+> master 分支为纯前端项目，所以登陆密码是写死的，体验账号：Gavin,密码： 123456
+
+## Build Setup
+
+``` bash
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 打包
+npm run build
+```
+
+## TO-DO-LIST
+- [x] [首页 HOME PAGE](#首页-home-page)
+- [x] [登陆 LOGIN PAGE](#登陆-login-page)
+- [x] [注册 SIGNUP PAGE](#注册-signup-page)
+- [x] [商品搜索页面 PRODUCT LIST PAGE](#商品搜索页面-product-list-page)
+- [x] [商品详情页面 PRODUCT DETAIL PAGE](#商品详情页面-product-detail-page)
+- [x] [购物车页面 SHOPPING CART PAGE](#购物车页面-shopping-cart-page)
+- [x] [确认订单页面 ORDER PAGE](#确认订单页面-order-page)
+- [x] [支付页面 PAY PAGE](#支付页面-pay-page)
+- [x] [购买成功页面 SUCCESS PAGE](#购买成功页面-success-page)
+- [x] [反馈页面 FREEBACK PACE](#%E5%8F%8D%E9%A6%88%E9%A1%B5%E9%9D%A2-freeback-page)
+- [x] [商家店铺页面 MERCHANT PAGE](#商家店铺页面-merchant-page)
+- [x] [用户页面 USER PAGE](#用户页面-user-page)
+
+## PAGE
+
+### 首页 HOME PAGE
+![首页1](https://i.imgur.com/cNtx70M.png)
+![首页2](https://i.imgur.com/ju5lfUc.png)
+![首页3](https://i.imgur.com/K8MMYGq.png)
+
+### 商品搜索页面 PRODUCT LIST PAGE
+![商品搜索页面1](https://i.imgur.com/Wu7TJ4G.png)
+![商品搜索页面2](https://i.imgur.com/ZTDRB2X.png)
+
+### 商品详情页面 PRODUCT DETAIL PAGE
+![商品详情页面1](https://i.imgur.com/0SQxUCN.png)
+![商品详情页面2](https://i.imgur.com/kBiQM9O.png)
+![商品详情页面3](https://i.imgur.com/aERYRmX.png)
+![商品详情页面4](https://i.imgur.com/vRpvcvj.png)
+
+### 购物车页面 SHOPPING CART PAGE
+![购物车页面](https://i.imgur.com/m5tftN7.png)
+
+### 确认订单页面 ORDER PAGE
+![确认订单页面](https://i.imgur.com/iNM3CQH.png)
+
+### 支付页面 PAY PAGE
+![支付页面](https://i.imgur.com/4OdCynR.png)
+
+### 购买成功页面 SUCCESS PAGE
+![购买成功页面](https://i.imgur.com/tOATGZP.png)
+
+### 反馈页面 FREEBACK PACE
+![反馈页面](https://i.imgur.com/fbOZAH8.png)
+
+### 商家店铺页面 MERCHANT PAGE
+![商家店铺页面](https://i.imgur.com/Zgu54lw.png)
+
+### 用户页面 USER PAGE
+![用户页面](https://i.imgur.com/ttCwhyT.png)
+
+### 登陆 LOGIN PAGE
+![登陆页面](https://i.imgur.com/d16GjOi.png)
+
+### 注册 SIGNUP PAGE
+![注册页面](https://i.imgur.com/no4Cb65.png)

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, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      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,54 @@
+'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/utils.js

@@ -0,0 +1,102 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = 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
+    }
+  }
+
+  const 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',
+        publicPath: '../../'
+      })
+    } 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 = () => {
+  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: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}

build/vue-loader.conf.js

@@ -0,0 +1,22 @@
+'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', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,92 @@
+'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)
+}
+
+const createLintingRule = () => ({
+/*  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }*/
+})
+
+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: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        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]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}

build/webpack.dev.conf.js

@@ -0,0 +1,95 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+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: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: 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
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+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://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})

build/webpack.prod.conf.js

@@ -0,0 +1,145 @@
+'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 UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: false,
+      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
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true,
+    }),
+    // 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 vendor 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 (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,84 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      '/api': {
+        target: 'http://localhost:8443',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': ''
+        }
+      }
+    },
+
+    // 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: 'cheap-module-eval-source-map',
+
+    // 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,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: './',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // 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,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>BIT MALL</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package.json

@@ -0,0 +1,82 @@
+{
+  "name": "mall-vue",
+  "version": "1.0.0",
+  "description": "Mall",
+  "author": "PowerDos <543541941@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "lint": "eslint --ext .js,.vue src",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "alipay-sdk": "^3.0.8",
+    "axios": "^0.19.0",
+    "crypto": "^1.0.1",
+    "dns": "^0.2.2",
+    "element-ui": "^2.12.0",
+    "iview": "^2.13.1",
+    "v-distpicker": "^1.0.17",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.7",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-runtime": "6.26.0",
+    "babel-eslint": "^8.2.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "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",
+    "node-notifier": "^5.1.2",
+    "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",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "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": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/App.vue

@@ -0,0 +1,38 @@
+<template>
+  <div id="app">
+    <Header></Header>
+    <router-view/>
+    <!-- 部分路由不应该包含这个Footer -->
+    <Footer v-if="excludeRoutes.indexOf($route.name) == -1"></Footer>
+  </div>
+</template>
+
+<script>
+import Header from '@/components/header/Header';
+import Footer from '@/components/footer/Footer';
+export default {
+  name: 'App',
+  data () {
+    return {
+      isRouterAlive: true,
+      excludeRoutes: ['HomeIndex', 'MyAddress', 'AddAddress', 'MyOrder', 'MyShoppingCart']
+    };
+  },
+  provide: function () {
+    return {
+      reload: this.reload
+    };
+  },
+  methods: {
+    reload: function () {
+      this.isRouterAlive = false;
+      this.$nextTick(function () {
+        this.isRouterAlive = true;
+      });
+    }
+  },
+  components: {
+    Header,Footer
+  }
+};
+</script>

src/components/AddMoneyOrder.vue

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <Search></Search>
+    <GoodsListNav></GoodsListNav>
+    <div class="goods-list-container">
+      <Alert show-icon class="tips-box">
+        小提示
+        <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
+        <template slot="desc">请点击商品前的选择框，选择商品，点击付款即可。</template>
+      </Alert>
+      <Table border ref="selection" :columns="columns" :data="myOrder" size="large" @on-selection-change="select" no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买">
+      </Table>
+      <div class="remarks-container">
+        <h3>备注</h3>
+        <i-input v-model="remarks" size="large" placeholder="在这里填写备注信息" class="remarks-input"></i-input>
+      </div>
+      <div class="invoices-container">
+        <h3>发票信息</h3>
+        <p>该商品不支持开发票</p>
+      </div>
+      <div class="pay-container">
+        <div class="pay-box">
+          <p><span>提交订单应付总额：</span> <span class="money"><Icon type="social-yen"></Icon> {{totalPrice.toFixed(2)}}</span></p>
+          <div class="pay-btn">
+            <Button type="error" size="large" @click="tradePay()">支付订单</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/Search';
+import GoodsListNav from '@/components/nav/GoodsListNav';
+import store from '@/vuex/store';
+import { mapState } from 'vuex';
+export default {
+  name: 'MemberOrder',
+  beforeRouteEnter (to, from, next) {
+    window.scrollTo(0, 0);
+    next();
+  },
+  created () {
+    this.getUid();
+    this.addOrder();
+  },
+  data () {
+    return {
+      columns: [
+        {
+          type: 'selection',
+          width: 58,
+          align: 'center'
+        },
+        {
+          title: '标题',
+          key: 'cname',
+          align: 'center'
+        },
+        {
+          title: '性质',
+          width: 198,
+          key: 'nature',
+          align: 'center'
+        },
+        {
+          title: '价格',
+          width: 180,
+          key: 'price',
+          align: 'center'
+        }
+      ],
+      flag: false,
+      remarks: '',
+      htmls: '',
+      myOrder: [],
+      uid: '',
+      memberid: 0,
+      record: 4, // 用于记录下单类型，会放在订单前面做标记 （充值钱包）
+      totalPrice: 0,
+      radio: '1',
+      modal: false,
+      userPackageTb: {}
+    };
+  },
+  computed: {
+    ...mapState(['shoppingCart'])
+  },
+  inject: ['reload'],
+  methods: {
+    select (selection, row) {
+      console.log(selection);
+      var price = 0;
+      selection.forEach(item => {
+        price += item.price;
+      });
+      this.totalPrice = price;
+      this.reload();
+    },
+    getUid () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      this.uid = (JSON.parse(loginInfo))['uid'];
+    },
+    addOrder () {
+      let cname = this.$route.query.cname;
+      let nature = this.$route.query.nature;
+      let price = this.$route.query.price;
+      var data = [{
+        cname: cname,
+        nature: nature,
+        price: price
+      }];
+      this.myOrder = data;
+    },
+    getOrderInfo () {
+      var orderInfo = {
+        tradeNo: this.record + '' + this.randomNumber(), // 商户订单号(记录号+memberid+随机号)
+        uid: this.uid,
+        subject: this.$route.query.uname, // 订单名称
+        totalPrice: this.totalPrice.toFixed(2), // 付款金额
+        nature: this.myOrder[0].nature, // 商品描述
+        remarks: this.remarks
+      };
+      return orderInfo;
+    },
+    openModal () {
+      this.$axios({
+        url: '/getMoney',
+        method: 'post',
+        params: {
+          uid: this.uid
+        }
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.userPackageTb = successResponce.data.data;
+          this.modal = true;
+        }
+      });
+    },
+    tradePay () { // 充值
+      this.alipay();
+    },
+    alipay () {
+      var orderInfo = this.getOrderInfo();
+      this.$axios({
+        url: '/tradePay',
+        method: 'post',
+        data: orderInfo
+      }).then(successResponce => {
+        console.log(successResponce.data.code);
+        if (successResponce.data.code === 200) {
+          // 打开新页面
+          let routerData = this.$router.resolve({path: '/payGateWay', query: {htmlData: successResponce.data.data}});
+          window.open(routerData.href);
+        }
+      }).catch(failResponse => {
+      });
+    },
+    closeModel () {
+      this.modal = false;
+    },
+    setTimeDateFmt (s) { // 个位数补齐十位数
+      return s < 10 ? '0' + s : s;
+    },
+    randomNumber () {
+      const now = new Date();
+      let month = now.getMonth() + 1;
+      let day = now.getDate();
+      let hour = now.getHours();
+      let minutes = now.getMinutes();
+      let seconds = now.getSeconds();
+      month = this.setTimeDateFmt(month);
+      day = this.setTimeDateFmt(day);
+      hour = this.setTimeDateFmt(hour);
+      minutes = this.setTimeDateFmt(minutes);
+      seconds = this.setTimeDateFmt(seconds);
+      let orderCode = now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 1000000)).toString();
+      return orderCode;
+    }
+  },
+  components: {
+    Search,
+    GoodsListNav
+  },
+  store
+};
+</script>
+
+<style scoped>
+.goods-list-container {
+  margin: 15px auto;
+  width: 80%;
+}
+.tips-box {
+  margin-bottom: 15px;
+}
+.remarks-container {
+  margin: 15px 0px;
+}
+.remarks-input {
+  margin-top: 15px;
+}
+.invoices-container p{
+  font-size: 12px;
+  line-height: 30px;
+  color: #999;
+}
+.pay-container {
+  margin: 15px;
+  display: flex;
+  justify-content: flex-end;
+}
+.pay-box {
+  font-size: 18px;
+  font-weight: bolder;
+  color: #495060;
+}
+.money {
+  font-size: 26px;
+  color: #f90013;
+}
+.pay-btn {
+  margin: 15px 0px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/components/DepositOrder.vue

@@ -0,0 +1,322 @@
+<template>
+  <div>
+    <Search></Search>
+    <GoodsListNav></GoodsListNav>
+    <div class="goods-list-container">
+      <Alert show-icon class="tips-box">
+        小提示
+        <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
+        <template slot="desc">请点击商品前的选择框，选择商品，点击付款即可。</template>
+      </Alert>
+      <Table border ref="selection" :columns="columns" :data="myOrder" size="large" @on-selection-change="select" no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买">
+      </Table>
+      <div class="remarks-container">
+        <h3>备注</h3>
+        <i-input v-model="remarks" size="large" placeholder="在这里填写备注信息" class="remarks-input"></i-input>
+      </div>
+      <div class="invoices-container">
+        <h3>发票信息</h3>
+        <p>该商品不支持开发票</p>
+      </div>
+      <div class="pay-container">
+        <div class="pay-box">
+          <p><span>提交订单应付总额：</span> <span class="money"><Icon type="social-yen"></Icon> {{totalPrice.toFixed(2)}}</span></p>
+          <span>选择支付方式：
+            <el-radio v-model="radio" label="1">钱包支付</el-radio>
+            <el-radio v-model="radio" label="2">支付宝支付</el-radio>
+          </span>
+          <div class="pay-btn">
+            <Button type="error" size="large" @click="tradePay()">支付保证金</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--钱包支付-->
+    <Modal v-model="modal" width="400">
+      <p slot="header">
+        <span>钱包支付</span>
+      </p>
+      <div>
+        <p>您的钱包余额为<font color="red">￥{{userPackageTb.money}}</font>,
+          <span v-if="userPackageTb.money >= totalPrice ">足够支付此次订单。</span>
+          <span v-if="userPackageTb.money < totalPrice">您的钱包余额不足，请充值。</span>
+        </p>
+        <p>请输入6位支付密码：</p>
+        <i-input type="password" v-model="passwd" clearable size="large" placeholder="密码">
+          <Icon type="ios-locked-outline" slot="prepend"></Icon>
+        </i-input>
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="packagePay()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel()" style="width: 30%">取消</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/Search';
+import GoodsListNav from '@/components/nav/GoodsListNav';
+import store from '@/vuex/store';
+import { mapState } from 'vuex';
+import crypto from 'crypto';
+export default {
+  name: 'DepositOrder',
+  beforeRouteEnter (to, from, next) {
+    window.scrollTo(0, 0);
+    next();
+  },
+  created () {
+    this.getUid();
+    this.addOrder();
+  },
+  data () {
+    return {
+      // goodsCheckList: [],
+      columns: [
+        {
+          type: 'selection',
+          width: 58,
+          align: 'center'
+        },
+        {
+          title: '图片',
+          key: 'image',
+          width: 100,
+          render: (h, params) => {
+            return h('div', [
+              h('img', {
+                attrs: {
+                  src: params.row.image,
+                  width: 60,
+                  height: 60
+                }
+              })
+            ]);
+          },
+          align: 'center'
+        },
+        {
+          title: '标题',
+          key: 'cname',
+          align: 'center'
+        },
+        {
+          title: '性质',
+          width: 198,
+          key: 'nature',
+          align: 'center'
+        },
+        {
+          title: '竞购价格',
+          width: 180,
+          key: 'bidprice',
+          align: 'center'
+        },
+        {
+          title: '保证金支付额',
+          width: 180,
+          key: 'deposit',
+          align: 'center'
+        }
+      ],
+      flag: false,
+      remarks: '',
+      htmls: '',
+      myOrder: [],
+      memberid: 0,
+      record: 1, // 用于记录下单类型，会放在订单前面做标记 （提交保证金）
+      totalPrice: 0,
+      radio: '1',
+      modal: false,
+      userPackageTb: {},
+      passwd: '',
+      uid: ''
+    };
+  },
+  computed: {
+    ...mapState(['shoppingCart'])
+  },
+  methods: {
+    select (selection, row) {
+      console.log(selection);
+      var price = 0;
+      selection.forEach(item => {
+        price += item.deposit;
+      });
+      this.totalPrice = price;
+      this.reload();
+    },
+    getUid () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      this.uid = (JSON.parse(loginInfo))['uid'];
+    },
+    addOrder () {
+      let cid = this.$route.query.cid;
+      let image = this.$route.query.image;
+      let cname = this.$route.query.cname;
+      let nature = this.$route.query.nature;
+      let bidprice = this.$route.query.bidprice;
+      let deposit = this.$route.query.deposit;
+      var data = [{
+        cid: cid,
+        cname: cname,
+        image: image,
+        nature: nature,
+        bidprice: bidprice,
+        deposit: deposit
+      }];
+      this.myOrder = data;
+    },
+    openModal () {
+      this.$axios({
+        url: '/getMoney',
+        method: 'post',
+        params: {
+          uid: this.uid
+        }
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.userPackageTb = successResponce.data.data;
+          this.modal = true;
+        }
+      });
+    },
+    getOrderInfo () {
+      var orderInfo = {
+        tradeNo: this.record + this.randomNumber(), // 商户订单号
+        cid: this.myOrder[0].cid,
+        uid: this.uid,
+        subject: this.$route.query.cname, // 订单名称
+        bidprice: this.myOrder[0].bidprice,
+
+        totalPrice: this.totalPrice, // 付款金额  totalPrice: this.totalPrice.toFixed(2)
+        nature: this.myOrder[0].nature, // 商品描述
+        remarks: this.remarks,
+        memberid: this.memberid
+      };
+      return orderInfo;
+    },
+    tradePay () { // 竞购 01
+      if (this.totalPrice === 0) {
+        alert('您未选择商品');
+        return;
+      }
+      if (this.radio === '1') {
+        // 钱包支付
+        this.openModal();
+      } else if (this.radio === '2') {
+        this.alipay();
+      }
+    },
+    alipay () {
+      var orderInfo = this.getOrderInfo();
+      this.$axios({
+        url: '/tradePay',
+        method: 'post',
+        data: orderInfo
+      }).then(successResponce => {
+        console.log(successResponce.data.code);
+        if (successResponce.data.code === 200) {
+          // 打开新页面
+          let routerData = this.$router.resolve({path: '/payGateWay', query: {htmlData: successResponce.data.data}});
+          window.open(routerData.href);
+        }
+      }).catch(failResponse => {
+      });
+    },
+    packagePay () {
+      if (this.userPackageTb.money < this.totalPrice) {
+        this.$message.info('余额不足，不能购买');
+        return;
+      }
+      const md5 = crypto.createHash('md5');
+      md5.update(this.passwd);
+      if (md5.digest('hex') === this.userPackageTb.passwd) {
+        var orderInfo = this.getOrderInfo();
+        this.$axios({
+          url: '/changePackageMoney',
+          method: 'post',
+          data: orderInfo
+        }).then(successResponce => {
+          if (successResponce.data.code === 200) {
+            this.modal = false;
+            this.$message.info('支付成功');
+            this.$router.push('index');
+          }
+        });
+      } else {
+        this.$message.info('密码不正确，请重新输入');
+      }
+    },
+    closeModel () {
+      this.modal = false;
+    },
+    setTimeDateFmt (s) { // 个位数补齐十位数
+      return s < 10 ? '0' + s : s;
+    },
+    randomNumber () {
+      const now = new Date();
+      let month = now.getMonth() + 1;
+      let day = now.getDate();
+      let hour = now.getHours();
+      let minutes = now.getMinutes();
+      let seconds = now.getSeconds();
+      month = this.setTimeDateFmt(month);
+      day = this.setTimeDateFmt(day);
+      hour = this.setTimeDateFmt(hour);
+      minutes = this.setTimeDateFmt(minutes);
+      seconds = this.setTimeDateFmt(seconds);
+      let orderCode = now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 1000000)).toString();
+      console.log(orderCode);
+      return orderCode;
+    }
+  },
+  components: {
+    Search,
+    GoodsListNav
+  },
+  store
+};
+</script>
+
+<style scoped>
+  .goods-list-container {
+    margin: 15px auto;
+    width: 80%;
+  }
+  .tips-box {
+    margin-bottom: 15px;
+  }
+  .remarks-container {
+    margin: 15px 0px;
+  }
+  .remarks-input {
+    margin-top: 15px;
+  }
+  .invoices-container p{
+    font-size: 12px;
+    line-height: 30px;
+    color: #999;
+  }
+  .pay-container {
+    margin: 15px;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .pay-box {
+    font-size: 18px;
+    font-weight: bolder;
+    color: #495060;
+  }
+  .money {
+    font-size: 26px;
+    color: #f90013;
+  }
+  .pay-btn {
+    margin: 15px 0px;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

src/components/Freeback.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="freeback-container">
+      <div class="freeback-img-box">
+        <img src="static/img/freeback.png">
+      </div>
+      <div class="freeback-box-border">
+        <div class="freeback-box">
+          <div class="freeback-title">
+            <h1>意见反馈</h1>
+            <h2>感谢你的反馈，我们会积极改善，做出更好的服务的</h2>
+          </div>
+          <div class="freeback-content">
+            <div class="freeback-form">
+              <Form :model="formItem" :label-width="80">
+                <FormItem label="标题">
+                  <i-input v-model="formItem.title" placeholder="请输入标题"></i-input>
+                </FormItem>
+                <FormItem label="反馈信息">
+                  <i-input v-model="formItem.content" type="textarea" :autosize="{minRows: 8,maxRows: 10}" placeholder="请输入反馈信息"></i-input>
+                </FormItem>
+                <FormItem>
+                  <Button type="primary">提交</Button>
+                  <Button type="ghost">清空信息</Button>
+                </FormItem>
+              </Form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Freeback',
+  data () {
+    return {
+      formItem: {
+        title: '',
+        content: ''
+      }
+    };
+  }
+};
+</script>
+
+<style scoped>
+.freeback-container {
+  margin: 15px auto;
+  width: 80%;
+  height: 600px;
+  display: flex;
+  align-items: center;
+  /* background-color: #ccc; */
+}
+.freeback-img-box {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.freeback-img-box img {
+  width: 80%;
+}
+.freeback-box-border {
+  width: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.freeback-box {
+  width: 480px;
+}
+.freeback-content {
+  margin: 15px auto;
+  border: 1px #ccc dotted;
+}
+.freeback-form {
+  margin: 30px auto;
+  width: 90%;
+}
+</style>

src/components/GoodsDetail.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <Search></Search>
+    <ShopHeader></ShopHeader>
+    <!--<GoodsDetailNav></GoodsDetailNav>-->
+    <div class="shop-item-path">
+      <div class="shop-nav-container">
+        <Breadcrumb>
+          <BreadcrumbItem to="/">首页</BreadcrumbItem>
+          <BreadcrumbItem v-for="(item,index) in goodsInfo.typeid" :key="index">
+          <router-link :to="'/goodsList?ctype='.concat(item)">
+            {{item}}
+          </router-link>
+          </BreadcrumbItem>
+        </Breadcrumb>
+      </div>
+    </div>
+    <!-- 商品信息展示 -->
+    <ShowGoods></ShowGoods>
+    <!-- 商品详细展示 -->
+    <ShowGoodsDetail></ShowGoodsDetail>
+    <Spin size="large" fix v-if="isLoading"></Spin>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/Search';
+import GoodsDetailNav from '@/components/nav/GoodsDetailNav';
+import ShopHeader from '@/components/header/ShopHeader';
+import ShowGoods from '@/components/goodsDetail/ShowGoods';
+import ShowGoodsDetail from '@/components/goodsDetail/ShowGoodsDetail';
+import store from '@/vuex/store';
+import { mapState, mapActions } from 'vuex';
+export default {
+  name: 'GoodsDetail',
+  beforeRouteEnter (to, from, next) {
+    window.scrollTo(0, 0);
+    next();
+  },
+  created () {
+    this.loadGoodsInfo(this.$route.query.cid);
+  },
+  data () {
+    return {
+      tagsColor: [ 'blue', 'green', 'red', 'yellow' ]
+    };
+  },
+  methods: {
+    ...mapActions(['loadGoodsInfo'])
+  },
+  computed: {
+    ...mapState(['goodsInfo', 'isLoading'])
+  },
+  components: {
+    Search,
+    ShopHeader,
+    GoodsDetailNav,
+    ShowGoods,
+    ShowGoodsDetail
+  },
+  store
+};
+</script>
+
+<style scoped>
+.shop-item-path {
+  height: 38px;
+  background-color: rgb(236, 235, 235);
+  line-height: 38px;
+  color: #2c2c2c;
+}
+.shop-nav-container {
+  margin: 0px auto;
+  width: 80%;
+}
+</style>

src/components/GoodsList.vue

@@ -0,0 +1,345 @@
+<template>
+  <div>
+    <Search></Search>
+    <GoodsListNav></GoodsListNav>
+    <div class="container">
+      <div class="bread-crumb">
+        <Breadcrumb>
+          <BreadcrumbItem to="/">
+            <Icon type="ios-home-outline"></Icon> 首页
+          </BreadcrumbItem>
+          <BreadcrumbItem to="/goodsList?sreachData=">
+            <Icon type="bag"></Icon> {{searchItem}}
+          </BreadcrumbItem>
+        </Breadcrumb>
+      </div>
+      <!-- 商品标签导航 -->
+      <GoodsClassNav></GoodsClassNav>
+      <!-- 商品展示容器 -->
+      <div class="goods-box">
+        <div class="as-box">
+          <div class="item-as-title">
+            <span>商品精选</span>
+            <span>广告</span>
+          </div>
+          <div class="item-as" v-for="(item,index) in asItems" :key="index">
+            <div class="item-as-img">
+              <img :src="item.image" alt="">
+            </div>
+            <div class="item-as-price">
+              <span>
+                <Icon type="social-yen text-danger"></Icon>
+                <span class="seckill-price text-danger">{{item.price}}</span>
+              </span>
+            </div>
+            <div class="item-as-intro">
+              <span>{{item.intro}}</span>
+            </div>
+            <div class="item-as-selled">
+              卖家信用<span>{{item.score}}</span>
+            </div>
+          </div>
+        </div>
+        <div class="goods-list-box">
+          <div class="goods-list-tool">
+            <ul>
+              <li v-for="(item,index) in goodsTool" :key="index" @click="orderBy(item.en, index)"><span :class="{ 'goods-list-tool-active': isAction[index]}">{{item.title}} <Icon :type="icon[index]"></Icon></span></li>
+            </ul>
+          </div>
+          <div class="goods-list">
+            <!--<div class="goods-show-info" v-for="(item, index) in orderGoodsList" :key="index">-->
+            <div class="goods-show-info" v-for="(item, index) in goodsData" :key="index">
+              <div class="goods-show-img">
+                <router-link :to="'/GoodsDetail?cid='.concat(item.cid)">
+                  <img :src="item.image" height="220px" width="220px"/>
+                </router-link>
+              </div>
+              <div class="goods-show-price">
+                <span>
+                  当前价格&nbsp;<Icon type="social-yen text-danger"></Icon>
+                  <span class="seckill-price text-danger">{{item.nowprice}}</span>
+                </span>
+              </div>
+              <div class="goods-show-price">
+                <span>
+                  每次加价&nbsp;<Icon type="social-yen text-danger"></Icon>
+                  <span class="seckill-price text-danger">{{item.addprice}}</span>
+                </span>
+              </div>
+              <div class="goods-show-statu">
+                 <span v-if="item.statu === '待付款' || item.statu === '已发货' || item.statu === '已收货'">
+                  商品状态：<span class=" ">交易中</span>
+                </span>
+                <span v-else>
+                  商品状态：<span class=" ">{{item.statu}}</span>
+                </span>
+              </div>
+              <div class="goods-show-detail">
+                <span>{{item.intro}}</span>
+              </div>
+              <div class="goods-show-num">
+                卖家信用&nbsp;<span>{{item.score}}</span>
+              </div>
+              <div class="goods-show-seller">
+                <span>{{item.userName}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="goods-page">
+        <Page :total="dataCount" :page-size="pageSize" show-total @on-change="changepage" @on-page-size-change="changepagesize"></Page>
+      </div>
+    </div>
+    <Spin size="large" fix v-if="isLoading"></Spin>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/Search';
+import GoodsListNav from '@/components/nav/GoodsListNav';
+import GoodsClassNav from '@/components/nav/GoodsClassNav';
+import store from '@/vuex/store';
+import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
+export default {
+  name: 'GoodsList',
+  beforeRouteEnter (to, from, next) {
+    window.scrollTo(0, 0);
+    next();
+  },
+  data () {
+    return {
+      searchItem: '',
+      isAction: [ true, false, false ],
+      icon: [ 'arrow-up-a', 'arrow-down-a', 'arrow-down-a' ],
+      goodsTool: [
+        {title: '价格', en: 'price'},
+        {title: '卖家信用', en: 'score'}
+      ],
+      ajaxHistoryData:[],
+      // 初始化信息总条数
+      dataCount:0,
+      // 每页显示多少条
+      pageSize:15,
+      goodsData:[],
+      orderGoodsList:[]
+    };
+  },
+  computed: {
+    ...mapState(['asItems', 'isLoading']),
+    // ...mapGetters(['orderGoodsList'])
+  },
+  methods: {
+    ...mapActions(['loadAsItemsList']),
+    ...mapMutations(['SET_GOODS_ORDER_BY']),
+    orderBy (data, index) {
+      this.icon = [ 'arrow-down-a', 'arrow-down-a', 'arrow-down-a' ];
+      this.isAction = [ false, false, false ];
+      this.isAction[index] = true;
+      this.icon[index] = 'arrow-up-a';
+      this.SET_GOODS_ORDER_BY(data);
+    },
+    handleListApproveHistory(){
+      // 保存取到的所有数据
+      console.log("1111"+this.orderGoodsList);
+      this.ajaxHistoryData = this.orderGoodsList;
+      this.dataCount = this.orderGoodsList.length;
+      // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
+      if(this.orderGoodsList.length < this.pageSize){
+        this.goodsData = this.ajaxHistoryData;
+      }else{
+        this.goodsData = this.ajaxHistoryData.slice(0,this.pageSize);
+      }
+    },
+    changepage(index){
+      var _start = ( index - 1 ) * this.pageSize;
+      var _end = index * this.pageSize;
+      this.goodsData = this.ajaxHistoryData.slice(_start,_end);
+    },
+    changepagesize(pageSize){
+      this.pageSize = pageSize;
+      this.handleListApproveHistory()
+    },
+    loadGoodsList(ctype) {
+      this.$axios({
+        url: 'getGoodsList',
+        methods: 'get',
+        params: {
+          ctype: ctype
+        }
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          this.orderGoodsList = successResponse.data.data;
+          console.log("2222"+this.orderGoodsList);
+        } else if (successResponse.data.code === 400) {
+          this.$Message.error('显示列表失败，原因400');
+        }
+      }).then(
+        val => {
+          this.handleListApproveHistory();
+          return Promise.resolve(/* 这里是需要返回的数据*/);
+        });
+    }
+  },
+  created () {
+    this.loadAsItemsList();
+
+  },
+  mounted () {
+    this.searchItem = this.$route.query.sreachData;
+    this.loadGoodsList(this.$route.query.ctype);
+
+  },
+  components: {
+    Search,
+    GoodsListNav,
+    GoodsClassNav
+  },
+  store
+};
+</script>
+
+<style scoped>
+.container {
+  margin: 15px auto;
+  width: 93%;
+  min-width: 1000px;
+}
+.text-danger {
+  color: #A94442;
+}
+.seckill-price{
+  margin-right: 5px;
+  font-size: 25px;
+  font-weight: bold;
+}
+.goods-box {
+  display: flex;
+}
+/* ---------------侧边广告栏开始------------------- */
+.as-box {
+  width: 200px;
+  border: 1px solid #ccc;
+}
+.item-as-title{
+  width: 100%;
+  height: 36px;
+  color: #B1191A;
+  line-height: 36px;
+  font-size: 18px;
+}
+.item-as-title span:first-child{
+  margin-left: 20px;
+}
+.item-as-title span:last-child{
+  float: right;
+  margin-right: 15px;
+  font-size: 10px;
+  color: #ccc;
+}
+.item-as{
+  width: 160px;
+  margin: 18px auto;
+}
+.item-as-img{
+  width: 160px;
+  height: 160px;
+  margin: 0px auto;
+}
+.item-as-price span{
+  font-size: 18px;
+}
+.item-as-intro{
+  margin-top: 5px;
+  font-size: 12px;
+}
+.item-as-selled{
+  margin-top: 5px;
+  font-size: 12px;
+}
+.item-as-selled span{
+  color: #005AA0;
+}
+/* ---------------侧边广告栏结束------------------- */
+
+/* ---------------商品栏开始------------------- */
+.goods-list-box {
+  margin-left: 15px;
+  width: calc(100% - 215px);
+}
+.goods-list-tool{
+  width: 100%;
+  height: 38px;
+  border: 1px solid #ccc;
+  background-color: #F1F1F1;
+}
+.goods-list-tool ul{
+  padding-left: 15px;
+  list-style: none;
+}
+.goods-list-tool li{
+  cursor: pointer;
+  float: left;
+}
+.goods-list-tool span{
+  padding: 5px 8px;
+  border: 1px solid #ccc;
+  border-left: none;
+  line-height: 36px;
+  background-color: #fff;
+}
+.goods-list-tool span:hover{
+  border: 1px solid #E4393C;
+}
+.goods-list-tool i:hover{
+  color: #E4393C;
+}
+.goods-list-tool-active {
+  color: #fff;
+  border-left: 1px solid #ccc;
+  background-color: #E4393C !important;
+}
+
+.goods-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.goods-show-info{
+  width: 240px;
+  padding: 10px;
+  margin: 15px 0px;
+  border: 1px solid #fff;
+  cursor: pointer;
+}
+.goods-show-info:hover{
+  border: 1px solid #ccc;
+  box-shadow: 0px 0px 15px #ccc;
+}
+.goods-show-price{
+  margin-top: 6px;
+}
+.goods-show-detail{
+  font-size: 12px;
+  margin: 6px 0px;
+}
+.goods-show-num{
+  font-size: 12px;
+  margin-bottom: 6px;
+  color: #009688;
+}
+.goods-show-num span{
+  color: #005AA0;
+  font-weight: bold;
+}
+.goods-show-seller{
+  font-size: 12px;
+  color:#E4393C;
+}
+.goods-page {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+/* ---------------商品栏结束------------------- */
+</style>

src/components/Home.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="container">
+    <Layout class="layout">
+      <Sider class="side-bar" :style="{height: 'calc(100vh - 35px)', background: '#fff', overflow: 'auto'}" ref="side" :collapsed-width="78">
+        <Menu active-name="1-2" theme="light" width="auto" @on-select="onSelect">
+          <div class="user-icon">
+            <div class="user-img">
+              <img src="static/img/head.png">
+            </div>
+            <p>{{userInfo.name}}</p>
+          </div>
+          <Submenu name="0">
+            <template slot="title">
+              <Icon type="address"></Icon>
+              <span>会员等级</span>
+            </template>
+            <MenuItem name="myMember">我的会员</MenuItem>
+            <MenuItem name="memberUpgrade">升级会员</MenuItem>
+          </Submenu>
+          <Submenu name="1">
+            <template slot="title">
+                <Icon type="address"></Icon>
+                <span>收货地址</span>
+            </template>
+            <MenuItem name="myAddress">我的收货地址</MenuItem>
+            <MenuItem name="addAddress">添加收货地址</MenuItem>
+          </Submenu>
+          <Submenu name="2">
+            <template slot="title">
+                <Icon type="order"></Icon>
+                <span>购物订单</span>
+            </template>
+            <MenuItem name="myOrder">我的订单</MenuItem>
+          </Submenu>
+          <Submenu name="3">
+            <template slot="title">
+              <Icon type="up-shop"></Icon>
+              <span>发布商品</span>
+            </template>
+            <MenuItem name="myShoppingCart">我的商品</MenuItem>
+            <MenuItem name="uploadShopCart">发布商品</MenuItem>
+          </Submenu>
+          <Submenu name="4">
+            <template slot="title">
+                <Icon type="my-bid"></Icon>
+                <span>竞拍</span>
+            </template>
+            <MenuItem name="myBidingCart">我的竞拍</MenuItem>
+          </Submenu>
+        </Menu>
+      </Sider>
+      <Layout class="layout">
+        <Header :style="{background: '#fff'}">
+          <h2>{{activeTitle}}</h2>
+        </Header>
+        <Content class="content">
+          <transition mode="out-in">
+            <router-view></router-view>
+          </transition>
+        </Content>
+        <Footer class="layout-footer-center">2019 &copy; xifujiang</Footer>
+      </Layout>
+    </Layout>
+  </div>
+</template>
+
+<script>
+import store from '@/vuex/store';
+import { mapState } from 'vuex';
+export default {
+  name: 'Home',
+  data () {
+    return {
+      activeTitle: '我的订单',
+      bar: {
+        'myMember': '我的会员',
+        'memberUpgrade': '升级会员',
+        'myAddress': '我的收货地址',
+        'addAddress': '添加收货地址',
+        'myOrder': '我的订单',
+        'myShoppingCart': '我的商品',
+        'uploadShopCart': '发布商品',
+        'myBidingCart': '我的竞拍'
+      }
+    };
+  },
+  computed: {
+    ...mapState(['userInfo', 'shoppingCart'])
+  },
+  methods: {
+    onSelect (name) {
+      this.activeTitle = this.bar[name];
+      this.$router.push(`/home/${name}`);
+    }
+  },
+  store
+};
+</script>
+
+<style scoped>
+.side-bar a{
+  color: #232323;
+}
+.user-icon {
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.user-icon span {
+  font-size: 96px;
+}
+.user-img {
+  margin-bottom: 15px;
+  width: 96px;
+  height: 96px;
+  border-radius: 48px;
+  overflow: hidden;
+}
+.user-img img{
+  width: 100%;
+}
+.content {
+  margin: 15px;
+  background-color: #fff;
+  padding: 15px;
+}
+.layout-footer-center {
+  padding: 0px 15px;
+  padding-bottom: 15px;
+  text-align: center;
+}
+</style>

src/components/Index.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="container">
+    <Search></Search>
+    <HomeNav></HomeNav>
+    <!-- 商品显示区域 -->
+    <div class="content">
+      <!-- 热拍商品 -->
+      <div class="item-class">
+        <div class="item-class-head">
+          <span class="item-class-title">{{hot.title}}</span>
+          <ul>
+            <li v-for="(item, index) in hot.link" :key="index">
+              <router-link to="/goodsList">{{item}}</router-link>
+            </li>
+          </ul>
+        </div>
+        <div class="item-class-content" v-for="(item, index) in hot.detail" :key="index">
+          <div class="item-content-top">
+            <div class="item-big-img">
+              <router-link to="/GoodDetail">
+                <img :src="item.bigImg" alt="">
+              </router-link>
+            </div>
+            <div class="item-four-img">
+              <div class="item-four-detail" v-for="(subItem, index) in item.itemFour" :key="index">
+                <div class="item-four-detail-text">
+                  <p class="pt_bi_tit">{{subItem.title}}</p>
+                  <p class="pt_bi_promo">{{subItem.intro}}</p>
+                </div>
+                <div class="item-four-detail-img">
+                  <router-link :to="'GoodDetail?cid='.concat(subItem.cid)">
+                    <img :src="subItem.img" alt="">
+                  </router-link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 猜你喜欢 -->
+      <div class="item-class">
+        <div class="item-class-head item-class-favorite-head">
+          <span class="item-class-title">{{favorite.title}}</span>
+          <ul>
+            <li v-for="(item, index) in favorite.link" :key="index">
+              <router-link to="/goodsList">{{item}}</router-link>
+            </li>
+          </ul>
+        </div>
+        <div class="item-class-content" v-for="(item, index) in favorite.detail" :key="index">
+          <div class="item-content-top">
+            <div class="item-big-img">
+              <img :src="item.bigImg" alt="">
+            </div>
+            <div class="item-four-img">
+              <div class="item-four-detail" v-for="(subItem, index) in item.itemFour" :key="index">
+                <div class="item-four-detail-text">
+                  <p class="pt_bi_tit pt_bi_tit-favorite">{{subItem.title}}</p>
+                  <p class="pt_bi_promo">{{subItem.intro}}</p>
+                </div>
+                <div class="item-four-detail-img">
+                  <router-link :to="'/GoodDetail?cid='.concat(subItem.cid)">
+                    <img :src="subItem.img" alt="">
+                  </router-link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/Search';
+import HomeNav from '@/components/nav/HomeNav';
+import store from '@/vuex/store';
+import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
+export default {
+  name: 'Index',
+  created () {
+    this.loadCarouselItems();
+    this.loadHot();
+    this.loadFavorite();
+    this.loadShoppingCart();
+  },
+  mounted () {
+    const father = this;
+    this.setIntervalObj = setInterval(function () {
+      father.REDUCE_SECKILLS_TIME();
+    }, 1000);
+  },
+  data () {
+    return {
+      setIntervalObj: null
+    };
+  },
+  methods: {
+    ...mapActions(['loadSeckillsInfo', 'loadCarouselItems', 'loadHot', 'loadFavorite', 'loadShoppingCart']),
+    ...mapMutations(['REDUCE_SECKILLS_TIME'])
+  },
+  computed: {
+    ...mapState([ 'seckills', 'hot', 'favorite' ]),
+    ...mapGetters([ 'seckillsDay', 'seckillsHours', 'seckillsMinutes', 'seckillsSeconds' ])
+  },
+  components: {
+    Search,
+    HomeNav
+  },
+  destroyed () {
+    clearInterval(this.setIntervalObj);
+  },
+  store
+};
+</script>
+
+<style scoped>
+.container {
+  background-color: #F6F6F6;
+}
+.content {
+  width: 1008px;
+  margin: 0px auto;
+}
+/*****************************秒杀专栏开始*****************************/
+/*秒杀专栏*/
+
+/*定义闹钟震动动画关键帧*/
+@keyframes shake-clock {
+  0% {
+    transform: rotate(-8deg);
+  }
+  50% {
+    transform: rotate(8deg);
+  }
+  100% {
+    transform: rotate(-8deg);
+  }
+}
+.seckill-text {
+  width: 300px;
+  height: 100%;
+  float: left;
+}
+.seckill-text .seckill-title {
+  font-size: 22px;
+  line-height: 50px;
+  color: #fff;
+}
+.seckill-text .seckill-remarks {
+  margin-left: 5px;
+  font-size: 10px;
+  color: #fff;
+}
+/*倒计时*/
+.count-down {
+  height: 100%;
+  margin-right: 30px;
+  line-height: 50px;
+  float: right;
+}
+.count-down-text {
+  color: #fff;
+}
+.count-down-num {
+  padding: 3px;
+  border-radius: 5px;
+  background-color: #440106;
+  font-size: 26px;
+  font-weight: bold;
+  color: #f90013;
+}
+.count-down-point {
+  font-size: 26px;
+  font-weight: bold;
+  color: #440106;
+}
+
+/*****************************商品专栏开始*****************************/
+.item-class {
+  width: 100%;
+  height: 320px;
+  margin-top: 15px;
+  background-color: #fff;
+}
+.item-class-head {
+  width: 100%;
+  height: 50px;
+  background-color: #4488a7;
+}
+.item-class-favorite-head {
+  background-color: #ecb226;
+}
+.item-class-head ul {
+  list-style: none;
+  float: right;
+  margin-right: 30px;
+  line-height: 50px;
+}
+.item-class-head a {
+  padding: 6px;
+  margin-left: 15px;
+  font-size: 12px;
+  background-color: #6da6be;
+  border: 1px solid #6da6be;
+  text-decoration: none;
+  color: #fff;
+}
+.item-class-favorite-head a {
+  background-color: #eeb955;
+  border: 1px solid #eeb955;
+}
+.item-class-head a:hover {
+  border: 1px solid #fff;
+}
+.item-class-head li {
+  float: left;
+}
+.item-class-title {
+  font-size: 25px;
+  line-height: 50px;
+  color: #fff;
+  margin-left: 15px;
+}
+.item-class-content {
+  width: 49%;
+  cursor: pointer;
+  border-right: 1px solid #ccc;
+  margin-left: 0.9%;
+  /*background-color: #cff;*/
+  float: left;
+}
+.item-class-content:nth-child(odd) {
+  border: none;
+}
+.item-content-top {
+  width: 100%;
+  height: 260px;
+}
+.item-big-img {
+  width: 180px;
+  height: 260px;
+  overflow: hidden;
+  float: left;
+}
+.item-big-img img {
+  margin-left: 0px;
+  transition: margin-left 0.3s;
+}
+.item-big-img:hover img {
+  margin-left: -15px;
+  transition: margin-left 0.3s;
+}
+.item-four-img {
+  width: 303px;
+  margin-left: 8px;
+  float: left;
+}
+.item-four-detail img {
+  margin-left: 0px;
+  transition: margin-left 0.3s;
+}
+.item-four-detail:hover img {
+  margin-left: -6px;
+  transition: margin-left 0.3s;
+}
+.item-four-detail {
+  width: 152px;
+  height: 130px;
+  margin-left: -1px;
+  float: left;
+}
+.item-four-detail:first-child {
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+}
+.item-four-detail:last-child {
+  border-top: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+}
+.item-four-detail-text {
+  width: 50px;
+  margin-left: 5px;
+  margin-top: 15px;
+  float: left;
+}
+.item-four-detail-img {
+  width: 96px;
+  margin-top: 15px;
+  overflow: hidden;
+  float: left;
+}
+.item-four-detail-img img {
+  margin-left: 5px;
+  width: 90px;
+}
+.pt_bi_tit {
+  font-weight: bold;
+  font-size: 12px;
+  color: #4488a7;
+}
+.pt_bi_tit-favorite {
+  color: #ecb127;
+}
+.pt_bi_promo {
+  color: #00695c;
+}
+.item-content-bottom {
+  width: 100%;
+  margin-top: 8px;
+}
+.item-content-bottom-img {
+  width: 156px;
+  margin-right: 8px;
+  overflow: hidden;
+  float: left;
+}
+.item-content-bottom-img img {
+  margin-left: 0px;
+  transition: margin-left 0.3s;
+}
+.item-content-bottom-img:hover img {
+  margin-left: -15px;
+  transition: margin-left 0.3s;
+}
+/*****************************商品专栏结束*****************************/
+</style>

src/components/Login.vue

@@ -0,0 +1,158 @@
+<template>
+<!-- 登录页面 -->
+  <div>
+    <Row class="container">
+      <i-col span="13" offset="2" class="login-img-box">
+        <img src="static/img/sale.jpg" alt="">
+      </i-col>
+      <i-col span="7" class="login-box">
+        <div class="login-container">
+          <div class="login-header">
+            <p>欢迎登录</p>
+          </div>
+          <div class="form-box">
+            <Form ref="formInline" :model="formData" :rules="ruleInline">
+              <FormItem prop="name">
+                  <i-input type="text" v-model="formData.name" clearable size="large" placeholder="用户名">
+                      <Icon type="person" slot="prepend"></Icon>
+                  </i-input>
+              </FormItem>
+              <FormItem prop="password">
+                  <i-input type="password" v-model="formData.password" clearable size="large" placeholder="密码">
+                      <Icon type="ios-locked-outline" slot="prepend"> </Icon>
+                  </i-input>
+              </FormItem>
+              <FormItem>
+                  <Button type="error" size="large" @click="handleSubmit('formInline')" long>登录</Button>
+              </FormItem>
+          </Form>
+          </div>
+        </div>
+      </i-col>
+    </Row>
+  </div>
+</template>
+
+<script>
+import store from '@/vuex/store';
+import { mapMutations, mapActions } from 'vuex';
+export default {
+  name: 'Login',
+  data () {
+    return {
+      formData: {
+        name: '',
+        password: ''
+      },
+      ruleInline: {
+        name: [
+          { required: true, message: '请输入用户名', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+          { type: 'string', min: 6, message: '密码不能少于6位', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  methods: {
+    ...mapMutations(['SET_USER_LOGIN_INFO']),
+    ...mapActions(['login']),
+    getUid () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      this.uid = (JSON.parse(loginInfo))['uid'];
+    },
+    handleSubmit (name) {
+      const father = this;
+      this.$refs[name].validate((valid) => {
+        if (valid) {
+          this.login(father.formData).then(result => {
+            if (result) {
+              this.$Message.success('登录成功');
+              // this.accessWebSocket();
+              father.$router.push('/');
+            } else {
+              this.$Message.error('用户名或密码错误');
+            }
+          });
+        } else {
+          this.$Message.error('请填写正确的用户名或密码');
+        }
+      });
+    },
+    // accessWebSocket () {
+    //   var socket;
+    //   if (typeof (WebSocket) === 'undefined') {
+    //     console.log('您的浏览器不支持WebSocket');
+    //   } else {
+    //     console.log('您的浏览器支持WebSocket');
+    //     // 实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
+    //     let uid = this.getUid();
+    //     socket = new WebSocket('ws://localhost:8443/websocket');
+    //     // 打开事件
+    //     socket.onopen = function () {
+    //       console.log('Socket 已打开');
+    //     };
+    //     // 获得消息事件
+    //     socket.onmessage = function (msg) {
+    //       console.log(msg.data);
+    //       // 发现消息进入    开始处理前端触发逻辑
+    //     };
+    //     // 关闭事件
+    //     socket.onclose = function () {
+    //       console.log('Socket已关闭');
+    //     };
+    //     // 发生了错误事件
+    //     socket.onerror = function () {
+    //       alert('Socket发生了错误');
+    //       // 此时可以尝试刷新页面
+    //     };
+    //   }
+    // }
+  },
+  store
+};
+</script>
+
+<style scoped>
+.container {
+  margin-top: 30px;
+  height: 485px;
+  background-color: #fff;
+}
+.login-img-box {
+  height: 485px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login-img-box>img {
+  width: 68%;
+}
+.login-box {
+  height: 485px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login-container {
+  width: 80%;
+  height: 280px;
+  border: #ED3F14 solid 1px;
+}
+.login-header {
+  height: 50px;
+  font-size: 20px;
+  text-align: center;
+  line-height: 50px;
+  letter-spacing: 5px;
+  color: #fff;
+  background-color: #ED3F14;
+}
+.form-box {
+  width: 80%;
+  margin: 30px auto;
+}
+</style>

src/components/MemberOrder.vue

@@ -0,0 +1,293 @@
+<template>
+  <div>
+    <Search></Search>
+    <GoodsListNav></GoodsListNav>
+    <div class="goods-list-container">
+      <Alert show-icon class="tips-box">
+        小提示
+        <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
+        <template slot="desc">请点击商品前的选择框，选择商品，点击付款即可。</template>
+      </Alert>
+      <Table border ref="selection" :columns="columns" :data="myOrder" size="large" @on-selection-change="select" no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买">
+      </Table>
+      <div class="remarks-container">
+        <h3>备注</h3>
+        <i-input v-model="remarks" size="large" placeholder="在这里填写备注信息" class="remarks-input"></i-input>
+      </div>
+      <div class="invoices-container">
+        <h3>发票信息</h3>
+        <p>该商品不支持开发票</p>
+      </div>
+      <div class="pay-container">
+        <div class="pay-box">
+          <p><span>提交订单应付总额：</span> <span class="money"><Icon type="social-yen"></Icon> {{totalPrice.toFixed(2)}}</span></p>
+          <span>选择支付方式：
+            <el-radio v-model="radio" label="1">钱包支付</el-radio>
+            <el-radio v-model="radio" label="2">支付宝支付</el-radio>
+          </span>
+          <div class="pay-btn">
+            <Button type="error" size="large" @click="tradePay()">支付订单</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--钱包支付升级会员-->
+    <Modal v-model="modal" width="400">
+      <p slot="header">
+        <span>钱包支付</span>
+      </p>
+      <div>
+        <p>您的钱包余额为<font color="red">￥{{userPackageTb.money}}</font>,
+          <span v-if="userPackageTb.money >= totalPrice ">足够支付此次订单。</span>
+          <span v-if="userPackageTb.money < totalPrice">您的钱包余额不足，请充值。</span>
+        </p>
+        <p>请输入6位支付密码：</p>
+        <i-input type="password" v-model="passwd" clearable size="large" placeholder="密码">
+          <Icon type="ios-locked-outline" slot="prepend"></Icon>
+        </i-input>
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="packagePay()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel()" style="width: 30%">取消</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/Search';
+import GoodsListNav from '@/components/nav/GoodsListNav';
+import store from '@/vuex/store';
+import { mapState } from 'vuex';
+export default {
+  name: 'MemberOrder',
+  beforeRouteEnter (to, from, next) {
+    window.scrollTo(0, 0);
+    next();
+  },
+  created () {
+    this.getUid();
+    this.addOrder();
+  },
+  data () {
+    return {
+      columns: [
+        {
+          type: 'selection',
+          width: 58,
+          align: 'center'
+        },
+        {
+          title: '标题',
+          key: 'cname',
+          align: 'center'
+        },
+        {
+          title: '性质',
+          width: 198,
+          key: 'nature',
+          align: 'center'
+        },
+        {
+          title: '价格',
+          width: 180,
+          key: 'price',
+          align: 'center'
+        }
+      ],
+      flag: false,
+      remarks: '',
+      htmls: '',
+      myOrder: [],
+      uid: '',
+      memberid: 0,
+      record: 3, // 用于记录下单类型，会放在订单前面做标记 （升级会员）
+      totalPrice: 0,
+      radio: '1',
+      modal: false,
+      userPackageTb: {}
+    };
+  },
+  computed: {
+    ...mapState(['shoppingCart'])
+  },
+  inject: ['reload'],
+  methods: {
+    select (selection, row) {
+      console.log(selection);
+      var price = 0;
+      selection.forEach(item => {
+        price += item.price;
+      });
+      this.totalPrice = price;
+      this.reload();
+    },
+    getUid () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      this.uid = (JSON.parse(loginInfo))['uid'];
+    },
+    addOrder () {
+      let cid = this.$route.query.cid;
+      let image = this.$route.query.image;
+      let cname = this.$route.query.cname;
+      let nature = this.$route.query.nature;
+      let price = this.$route.query.price;
+      var data = [{
+        cid: cid,
+        cname: cname,
+        image: image,
+        nature: nature,
+        price: price
+      }];
+      this.myOrder = data;
+      // this.totalPrice = price;
+    },
+    getOrderInfo () {
+      var orderInfo = {
+        tradeNo: this.record + '' + this.$route.query.memberid + '' + this.randomNumber(), // 商户订单号(记录号+memberid+随机号)
+        uid: this.uid,
+        subject: this.$route.query.cname, // 订单名称
+        totalPrice: this.totalPrice.toFixed(2), // 付款金额
+        nature: this.myOrder[0].nature, // 商品描述
+        remarks: this.remarks,
+        memberid: this.$route.query.memberid
+      };
+      return orderInfo;
+    },
+    openModal () {
+      this.$axios({
+        url: '/getMoney',
+        method: 'post',
+        params: {
+          uid: this.uid
+        }
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.userPackageTb = successResponce.data.data;
+          this.modal = true;
+        }
+      });
+    },
+    tradePay () { // 竞购 01
+      if (this.totalPrice === 0) {
+        alert('您未选择商品');
+        return;
+      }
+      if (this.radio === '1') {
+        this.openModal();
+        // 钱包支付
+      } else if (this.radio === '2') {
+        this.alipay();
+      }
+    },
+    alipay () {
+      var orderInfo = this.getOrderInfo();
+      this.$axios({
+        url: '/tradePay',
+        method: 'post',
+        data: orderInfo
+      }).then(successResponce => {
+        console.log(successResponce.data.code);
+        if (successResponce.data.code === 200) {
+          // 打开新页面
+          let routerData = this.$router.resolve({path: '/payGateWay', query: {htmlData: successResponce.data.data}});
+          window.open(routerData.href);
+        }
+      }).catch(failResponse => {
+      });
+    },
+    packagePay () {
+      if (this.userPackageTb.money < this.totalPrice) {
+        this.$message.info('余额不足，不能购买');
+        return;
+      }
+      const md5 = crypto.createHash('md5');
+      md5.update(this.passwd);
+      if (md5.digest('hex') === this.userPackageTb.passwd) {
+        var orderInfo = this.getOrderInfo();
+        // console.log(md5.digest('hex'));
+        this.$axios({
+          url: '/changePackageMoney',
+          method: 'post',
+          data: orderInfo
+        }).then(successResponce => {
+          if (successResponce.data.code === 200) {
+            this.modal = false;
+            this.$message.info('支付成功');
+            this.$router.push('index');
+          }
+        });
+      } else {
+        this.$message.info('密码不正确，请重新输入');
+      }
+    },
+    closeModel () {
+      this.modal = false;
+    },
+    setTimeDateFmt (s) { // 个位数补齐十位数
+      return s < 10 ? '0' + s : s;
+    },
+    randomNumber () {
+      const now = new Date();
+      let month = now.getMonth() + 1;
+      let day = now.getDate();
+      let hour = now.getHours();
+      let minutes = now.getMinutes();
+      let seconds = now.getSeconds();
+      month = this.setTimeDateFmt(month);
+      day = this.setTimeDateFmt(day);
+      hour = this.setTimeDateFmt(hour);
+      minutes = this.setTimeDateFmt(minutes);
+      seconds = this.setTimeDateFmt(seconds);
+      let orderCode = now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 1000000)).toString();
+      return orderCode;
+    }
+  },
+  components: {
+    Search,
+    GoodsListNav
+  },
+  store
+};
+</script>
+
+<style scoped>
+.goods-list-container {
+  margin: 15px auto;
+  width: 80%;
+}
+.tips-box {
+  margin-bottom: 15px;
+}
+.remarks-container {
+  margin: 15px 0px;
+}
+.remarks-input {
+  margin-top: 15px;
+}
+.invoices-container p{
+  font-size: 12px;
+  line-height: 30px;
+  color: #999;
+}
+.pay-container {
+  margin: 15px;
+  display: flex;
+  justify-content: flex-end;
+}
+.pay-box {
+  font-size: 18px;
+  font-weight: bolder;
+  color: #495060;
+}
+.money {
+  font-size: 26px;
+  color: #f90013;
+}
+.pay-btn {
+  margin: 15px 0px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/components/Merchant.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <ShopHeader></ShopHeader>
+    <div class="goods-container">
+      <div class="goods-list">
+        <div class="goods-show-info" v-for="(item, index) in orderGoodsList" :key="index">
+          <div class="goods-show-img">
+            <router-link to="/goodsDetail"><img :src="item.img"/></router-link>
+          </div>
+          <div class="goods-show-price">
+            <span>
+              <Icon type="social-yen text-danger"></Icon>
+              <span class="seckill-price text-danger">{{item.price}}</span>
+            </span>
+          </div>
+          <div class="goods-show-detail">
+            <span>{{item.intro}}</span>
+          </div>
+          <div class="goods-show-num">
+            已有<span>{{item.remarks}}</span>人评价
+          </div>
+        </div>
+      </div>
+      <div class="goods-page">
+        <Page :total="100" show-sizer></Page>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ShopHeader from '@/components/header/ShopHeader';
+import store from '@/vuex/store';
+import { mapGetters, mapActions } from 'vuex';
+export default {
+  name: 'Merchant',
+  created () {
+    this.loadGoodsList();
+  },
+  computed: {
+    ...mapGetters(['orderGoodsList'])
+  },
+  methods: {
+    ...mapActions(['loadGoodsList'])
+  },
+  components: {
+    ShopHeader
+  },
+  store
+};
+</script>
+
+<style scoped>
+.text-danger {
+  color: #A94442;
+}
+.seckill-price{
+  margin-right: 5px;
+  font-size: 25px;
+  font-weight: bold;
+}
+.goods-container {
+  margin: 15px auto;
+  width: 80%;
+}
+.goods-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.goods-show-info{
+  width: 240px;
+  padding: 10px;
+  margin: 15px 0px;
+  border: 1px solid #fff;
+  cursor: pointer;
+}
+.goods-show-info:hover{
+  border: 1px solid #ccc;
+  box-shadow: 0px 0px 15px #ccc;
+}
+.goods-show-price{
+  margin-top: 6px;
+}
+.goods-show-detail{
+  font-size: 12px;
+  margin: 6px 0px;
+}
+.goods-show-num{
+  font-size: 12px;
+  margin-bottom: 6px;
+  color: #009688;
+}
+.goods-show-num span{
+  color: #005AA0;
+  font-weight: bold;
+}
+.goods-show-seller{
+  font-size: 12px;
+  color:#E4393C;
+}
+.goods-page {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/components/Order.vue

@@ -0,0 +1,394 @@
+<template>
+  <div>
+    <Search></Search>
+    <GoodsListNav></GoodsListNav>
+    <div class="goods-list-container">
+      <Alert show-icon class="tips-box">
+        小提示
+        <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
+        <template slot="desc">请点击商品前的选择框，选择商品，点击付款即可。</template>
+      </Alert>
+      <Table border ref="selection" :columns="columns" :data="myOrder" size="large" @on-selection-change="select" no-data-text="您的购物车没有商品，请先添加商品到购物车再点击购买">
+      </Table>
+       <div class="address-container">
+        <h3>收货人信息</h3>
+        <div class="address-box">
+          <div class="address-check">
+            <div class="address-check-name">
+              <span><Icon type="ios-checkmark-outline"></Icon> {{checkAddress.name}}</span>
+            </div>
+            <div class="address-detail">
+              <p>{{checkAddress.address}}</p>
+            </div>
+          </div>
+          <Collapse>
+            <Panel>
+                选择地址 &nbsp;&nbsp;&nbsp;<router-link :to="{path:'/home/AddAddress'}" target="_blank">点击添加地址</router-link>
+                <p slot="content">
+                  <RadioGroup vertical size="large" @on-change="changeAddress">
+                    <Radio :label="item.addid" v-for="(item, index) in address" :key="index">
+                      <span>{{item.addressee}} {{item.province}} {{item.city}} {{item.part}} {{item.detail}} {{item.phone}} {{item.postalcode}}</span>
+                    </Radio>
+                  </RadioGroup>
+                </p>
+            </Panel>
+          </Collapse>
+        </div>
+      </div>
+      <div class="remarks-container">
+        <h3>备注</h3>
+        <i-input v-model="remarks" size="large" placeholder="在这里填写备注信息" class="remarks-input"></i-input>
+      </div>
+      <div class="invoices-container">
+        <h3>发票信息</h3>
+        <p>该商品不支持开发票</p>
+      </div>
+      <div class="pay-container">
+        <div class="pay-box">
+          <p><span>提交订单应付总额：</span> <span class="money"><Icon type="social-yen"></Icon> {{totalPrice.toFixed(2)}}</span></p>
+          <span>选择支付方式：
+              <el-radio v-model="radio" label="1">钱包支付</el-radio>
+              <el-radio v-model="radio" label="2">支付宝支付</el-radio>
+            </span>
+          <div class="pay-btn">
+            <Button type="error" size="large" @click="tradePay()">支付订单</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--钱包支付-->
+    <Modal v-model="modal" width="400">
+      <p slot="header">
+        <span>钱包支付</span>
+      </p>
+      <div>
+        <p>您的钱包余额为<font color="red">￥{{userPackageTb.money}}</font>,
+          <span v-if="userPackageTb.money >= totalPrice ">足够支付此次订单。</span>
+          <span v-if="userPackageTb.money < totalPrice">您的钱包余额不足，请充值。</span>
+        </p>
+        <p>请输入6位支付密码：</p>
+        <i-input type="password" v-model="passwd" clearable size="large" placeholder="密码">
+          <Icon type="ios-locked-outline" slot="prepend"></Icon>
+        </i-input>
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="packagePay()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel()" style="width: 30%">取消</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/Search';
+import GoodsListNav from '@/components/nav/GoodsListNav';
+import store from '@/vuex/store';
+import { mapState, mapActions } from 'vuex';
+import crypto from 'crypto';
+
+export default {
+  name: 'Order',
+  beforeRouteEnter (to, from, next) {
+    window.scrollTo(0, 0);
+    next();
+  },
+  created () {
+    this.getUid();
+    this.loadAddress();
+    this.addOrder();
+  },
+  data () {
+    return {
+      // goodsCheckList: [],
+      columns: [
+        {
+          type: 'selection',
+          width: 58,
+          align: 'center'
+        },
+        {
+          title: '图片',
+          key: 'image',
+          width: 100,
+          render: (h, params) => {
+            return h('div', [
+              h('img', {
+                attrs: {
+                  src: params.row.image,
+                  width: 60,
+                  height: 60
+                }
+              })
+            ]);
+          },
+          align: 'center'
+        },
+        {
+          title: '标题',
+          key: 'cname',
+          align: 'center'
+        },
+        {
+          title: '性质',
+          width: 198,
+          key: 'nature',
+          align: 'center'
+        },
+        {
+          title: '价格',
+          width: 180,
+          key: 'price',
+          align: 'center'
+        }
+      ],
+      checkAddress: {
+        name: '未选择',
+        address: '请选择地址'
+      },
+      remarks: '',
+      htmls: '',
+      myOrder: [],
+      addressStruts: 0,
+      addressid: '',
+      memberid: 0,
+      record: 2, // 用于记录下单类型，会放在订单前面做标记 （下单支付）
+      totalPrice: 0,
+      radio: '1',
+      modal: false,
+      uid: '',
+      userPackageTb: ''
+    };
+  },
+  computed: {
+    ...mapState(['address', 'shoppingCart'])
+  },
+  methods: {
+    ...mapActions(['loadAddress']),
+    select (selection, row) {
+      console.log(selection);
+      var price = 0;
+      selection.forEach(item => {
+        price += item.price;
+      })
+      this.totalPrice = price;
+      this.reload();
+    },
+    getUid () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      this.uid = (JSON.parse(loginInfo))['uid'];
+    },
+    addOrder () {
+      let cid = this.$route.query.cid;
+      let image = this.$route.query.image;
+      let cname = this.$route.query.cname;
+      let nature = this.$route.query.nature;
+      let price = this.$route.query.price;
+      var data = [{
+        cid: cid,
+        cname: cname,
+        image: image,
+        nature: nature,
+        price: price
+      }];
+      this.myOrder = data;
+    },
+    openModal () {
+      this.$axios({
+        url: '/getMoney',
+        method: 'post',
+        params: {
+          uid: this.uid
+        }
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.userPackageTb = successResponce.data.data;
+          this.modal = true;
+        }
+      });
+    },
+    changeAddress (data) {
+      const father = this;
+      this.address.forEach(item => {
+        if (item.addid === data) {
+          father.checkAddress.name = item.name;
+          father.checkAddress.address = `${item.addressee} ${item.province} ${item.city} ${item.part} ${item.detail} ${item.phone} ${item.postalcode}`;
+          this.addressid = item.addid;
+        }
+      });
+      this.addressStruts = 1;
+    },
+    getOrderInfo () {
+      var orderInfo = {
+        tradeNo: this.$route.query.oid, // 商户订单号
+        cid: this.myOrder[0].cid,
+        uid: this.uid,
+        subject: this.$route.query.cname, // 订单名称
+        totalPrice: this.totalPrice.toFixed(2), // 付款金额
+        nature: this.myOrder[0].nature, // 商品描述
+        remarks: this.remarks,
+        addressid: this.addressid
+      };
+      return orderInfo;
+    },
+    tradePay () { // 竞购 01
+      if (this.totalPrice === 0) {
+        alert('您未选择商品');
+        return;
+      }
+      if (this.addressStruts === 0) {
+        alert('您未选择地址,请选择地址');
+        return;
+      }
+      if (this.radio === '1') {
+        // 钱包支付
+        this.openModal();
+      } else if (this.radio === '2') {
+        this.alipay();
+      }
+    },
+    alipay () {
+      var orderInfo = this.getOrderInfo();
+      this.$axios({
+        url: '/tradePay',
+        method: 'post',
+        data: orderInfo
+      }).then(successResponce => {
+        console.log(successResponce.data.code);
+        if (successResponce.data.code === 200) {
+          // 打开新页面
+          let routerData = this.$router.resolve({path: '/payGateWay', query: {htmlData: successResponce.data.data}});
+          window.open(routerData.href);
+        }
+      }).catch(failResponse => {
+      });
+    },
+    packagePay () {
+      if (this.userPackageTb.money < this.totalPrice) {
+        this.$message.info('余额不足，不能购买');
+        return;
+      }
+      const md5 = crypto.createHash('md5');
+      md5.update(this.passwd);
+      if (md5.digest('hex') === this.userPackageTb.passwd) {
+        var orderInfo = this.getOrderInfo();
+        this.$axios({
+          url: '/changePackageMoney',
+          method: 'post',
+          data: orderInfo
+        }).then(successResponce => {
+          if (successResponce.data.code === 200) {
+            this.modal = false;
+            this.$message.info('支付成功');
+            this.$router.push('index');
+          }
+        });
+      } else {
+        this.$message.info('密码不正确，请重新输入');
+      }
+    },
+    closeModel () {
+      this.modal = false;
+    },
+    setTimeDateFmt (s) { // 个位数补齐十位数
+      return s < 10 ? '0' + s : s;
+    },
+    randomNumber () {
+      const now = new Date();
+      let month = now.getMonth() + 1;
+      let day = now.getDate();
+      let hour = now.getHours();
+      let minutes = now.getMinutes();
+      let seconds = now.getSeconds();
+      month = this.setTimeDateFmt(month);
+      day = this.setTimeDateFmt(day);
+      hour = this.setTimeDateFmt(hour);
+      minutes = this.setTimeDateFmt(minutes);
+      seconds = this.setTimeDateFmt(seconds);
+      let orderCode = now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 1000000)).toString();
+      console.log(orderCode);
+      return orderCode;
+    }
+  },
+  components: {
+    Search,
+    GoodsListNav
+  },
+  store
+};
+</script>
+
+<style scoped>
+.goods-list-container {
+  margin: 15px auto;
+  width: 80%;
+}
+.tips-box {
+  margin-bottom: 15px;
+}
+.address-container {
+  margin-top: 15px;
+}
+.address-box {
+  margin-top: 15px;
+  padding: 15px;
+  border: 1px #ccc dotted;
+}
+.address-check {
+  margin: 15px 0px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+}
+.address-check-name {
+  width: 120px;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  background-color: #ccc;
+}
+.address-check-name span {
+  width: 120px;
+  height: 36px;
+  font-size: 14px;
+  line-height: 36px;
+  text-align: center;
+  color: #fff;
+  background-color: #f90013;
+}
+.address-detail {
+  padding-left: 15px;
+  font-size: 14px;
+  color: #999999;
+}
+.remarks-container {
+  margin: 15px 0px;
+}
+.remarks-input {
+  margin-top: 15px;
+}
+.invoices-container p{
+  font-size: 12px;
+  line-height: 30px;
+  color: #999;
+}
+.pay-container {
+  margin: 15px;
+  display: flex;
+  justify-content: flex-end;
+}
+.pay-box {
+  font-size: 18px;
+  font-weight: bolder;
+  color: #495060;
+}
+.money {
+  font-size: 26px;
+  color: #f90013;
+}
+.pay-btn {
+  margin: 15px 0px;
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

src/components/Pay.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <div class="pay-container">
+      <Alert show-icon>
+        扫码支付
+        <Icon type="qr-scanner" slot="icon"></Icon>
+        <template slot="desc">请扫描右边二维码进行支付</template>
+      </Alert>
+      <div class="pay-box">
+        <div class="pay-demo">
+          <img src="static/img/pay/pay-demo.png">
+        </div>
+        <div class="pay-qr-scan">
+          <img src="static/img/pay/pay-qrscan.png">
+          <div class="pay-tips">
+            <router-link to="/payDone"><p>点击我, 完成支付</p></router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pay'
+};
+</script>
+
+<style scoped>
+.pay-container {
+  margin: 15px auto;
+  width: 80%;
+  min-width: 1000px;
+}
+.pay-box {
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.pay-demo {
+  width: 50%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pay-demo img{
+  height: 80%;
+}
+.pay-qr-scan {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.pay-tips {
+  width: 50%;
+  text-align: center;
+  font-size: 14px;
+  line-height: 30px;
+}
+.pay-tips a {
+  color: #999999;
+}
+</style>

src/components/PayDone.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div>
+      <br>
+      <br>
+      <div style="margin: 0 auto; width: 40%"><h2>订单详情</h2></div>
+      <table class="mailTable" :style="styleObject" v-if="s_showByRow">
+        <tr v-for="index in rowCount" :key="index">
+          <td class="column">{{tableData[index*2-2].key}}</td>
+          <td>{{tableData[index*2-2].value}}</td>
+          <td class="column">{{tableData[index*2-1] !== undefined ? tableData[index*2-1].key : ''}}</td>
+          <td>{{tableData[index*2-1] !== undefined ? tableData[index*2-1].value : ''}}</td>
+        </tr>
+      </table>
+    </div>
+    <div class="pay-done-box">
+      <img src="static/img/pay-success.png">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PayDone',
+  data () {
+    return {
+      styleObject: {},
+      s_showByRow: true,
+      tableData: []
+    };
+  },
+  computed: {
+    rowCount: function () {
+      return Math.ceil(this.tableData.length / 2);
+    }
+  },
+  created () {
+    this.styleObject = this.tableStyle;
+    if (this.showByRow !== undefined) {
+      this.s_showByRow = this.showByRow;
+    }
+    this.getRequest();
+  },
+  props: ['tableStyle', 'showByRow'],
+  methods: {
+    getRequest () {
+      let url = location.href.split('?')[1].split('&');
+      let query = {};
+      url.forEach(item => {
+        query[item.split('=')[0]] = decodeURIComponent(item.split('=')[1]);// 转码
+      });
+      var result = query.result.split('<br/>');
+      result.forEach(item => {
+        var list = item.split(':');
+        console.log(list);
+        if (list[0] === 'memberid') {
+          let localStorage = window.localStorage;
+          let loginInfo = JSON.parse(localStorage.getItem('loginInfo'));
+          console.log(loginInfo);
+          loginInfo.memberid = parseInt(list[1]);
+          localStorage.setItem('loginInfo', JSON.stringify(loginInfo));
+        }
+        var array = {key: list[0], value: list[1]};
+        this.tableData.push(array);
+      });
+    }
+  }
+};
+
+</script>
+
+<style scoped>
+.pay-done-box {
+  height: 600px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.mailTable, .mailTable tr, .mailTable tr td{ border:1px solid #E6EAEE; }
+.mailTable{ font-size: 12px; color: #71787E; margin: 0 auto; }
+.mailTable tr td{ border:1px solid #E6EAEE; width: 150px; height: 35px; line-height: 35px; box-sizing: border-box; padding: 0 10px; }
+.mailTable tr td.column { background-color: #EFF3F6; color: #393C3E; }
+</style>

src/components/Search.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+      <!--<i-col span="4" offset="2" class="signup-img-box">-->
+        <!--<img :src="logo" alt="" style="width: 240px; height: 60px">-->
+      <!--</i-col>-->
+      <!--<i-col span="10" class="box">-->
+        <div class="container">
+            <div>
+              <i-input v-model="sreachData" size="large" class="sreach" placeholder="输入你想查找的商品">
+                <Button slot="append" icon="ios-search" @click="sreach"></Button>
+              </i-input>
+              <Tag v-for="(item, index) in promotionTags" :key="index" closable  @on-close="closeTags(index)"><span @click="selectTags(index)">{{item}}</span></Tag>
+            </div>
+        </div>
+      <!--</i-col>-->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Search',
+  data () {
+    return {
+      logo: 'static/img/logo.png',
+      sreachData: '',
+      promotionTags: ['买2免1', '领200神券', '199减100', '母婴5折抢', '充100送20']
+    };
+  },
+  methods: {
+    closeTags (index) {
+      this.promotionTags.splice(index, 1);
+    },
+    selectTags (index) {
+      this.sreachData = this.promotionTags[index];
+    },
+    sreach () {
+      this.$router.push({path: '/goodsList', query: { ctype: this.sreachData }});
+    }
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  padding-top: 15px;
+  margin: 0px auto;
+  margin-bottom: 15px;
+  width: 460px;
+}
+.sreach {
+  margin: 5px 0px;
+}
+</style>

src/components/ShoppingCart.vue

@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <Search></Search>
+    <GoodsListNav></GoodsListNav>
+    <!-- 添加成功提示 -->
+    <div class="add-info-box-container">
+      <div class="add-info-box">
+        <div class="add-info-detail">
+          <div class="add-info-title">
+            <p>
+              <i class="fa fa-check-circle"></i> 商品已成功加入购物车！</p>
+          </div>
+          <div class="add-info-box-row">
+            <div class="add-info-img">
+              <img :src="newShoppingCart.package.img" alt="">
+            </div>
+            <div class="add-info-intro">
+              <p>{{newShoppingCart.title}} {{newShoppingCart.package.intro}}...</p>
+              <p class="add-info-intro-detail">颜色：{{newShoppingCart.package.intro}}/ 数量：{{newShoppingCart.count}}</p>
+            </div>
+          </div>
+        </div>
+        <div class="car-btn-group">
+          <div></div>
+          <div class="car-btn-row">
+            <router-link to="/goodsDetail">
+              <button class="btn-car btn-car-to-detail">查看商品详情</button>
+            </router-link>
+            <router-link to="/order">
+              <button class="btn-car btn-car-to-pay">去购物车结算 > </button>
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="other-user-buy-box">
+      <div class="other-user-buy-title">
+        <p>可以顺便看下其他商品哦 ~</p>
+      </div>
+      <div class="other-user-buy-row" v-for="(items,index1) in recommend" :key="index1">
+        <div class="other-user-buy-item-box" v-for="(item,index2) in items" :key="index2">
+          <div class="other-user-buy-item-img">
+            <a href="item_detail.html"><img :src="item.img" alt=""></a>
+          </div>
+          <div class="other-buy-detail-box">
+            <div class="other-buy-title">
+              <a href="item_detail.html">
+                <p>{{item.intro}}</p>
+              </a>
+            </div>
+            <div class="other-buy-price">
+              <p>￥{{item.price}}</p>
+            </div>
+            <div class="other-buy-btn-box">
+              <router-link to="/goodsDetail">
+                <button class="other-buy-btn"><Icon type="ios-cart"></Icon> 加入购物车</button>
+              </router-link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Search from '@/components/Search';
+import GoodsListNav from '@/components/nav/GoodsListNav';
+import store from '@/vuex/store';
+import { mapState, mapActions } from 'vuex';
+export default {
+  name: 'ShoppingCart',
+  beforeRouteEnter (to, from, next) {
+    window.scrollTo(0, 0);
+    next();
+  },
+  created () {
+    this.loadRecommend();
+  },
+  computed: {
+    ...mapState(['newShoppingCart', 'recommend'])
+  },
+  methods: {
+    ...mapActions(['loadRecommend'])
+  },
+  components: {
+    Search,
+    GoodsListNav
+  },
+  store
+};
+</script>
+
+<style scoped>
+/****************************加入购物车页面开始*****************************/
+.add-info-box-container{
+  width: 100%;
+  background-color: #F5F5F5;
+}
+.add-info-box{
+  width: 90%;
+  margin: 0px auto;
+  padding: 15px 0px;
+  display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.add-info-detail{
+  display: flex;
+    flex-direction: column;
+}
+.add-info-title{
+  font-size: 25px;
+  color: #71b247;
+}
+.add-info-box-row{
+  display: flex;
+    flex-direction: row;
+    margin-top: 15px;
+}
+.add-info-img{
+  width: 56px;
+  height: 56px;
+  margin-right: 15px;
+}
+.add-info-img img{
+  width: 100%;
+}
+.add-info-intro{
+  display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.add-info-intro-detail{
+  font-size: 12px;
+  color: #999999;
+}
+.car-btn-group{
+  display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+/*按钮*/
+.btn-car{
+  padding: 8px 10px;
+  font-size: 16px;
+  border-radius: 0px;
+  border:none;
+  margin-right: 15px;
+}
+.btn-car-to-detail{
+  background-color: #fff;
+  color: #e4393c;
+  border:1px solid #fff;
+}
+.btn-car-to-detail:hover{
+border:1px solid #e4393c;
+}
+.btn-car-to-pay{
+  background-color: #e4393c;
+  color: #fff;
+  border:1px solid #e4393c;
+}
+.btn-car-to-pay:hover{
+  background-color: #c91623;
+  border:1px solid #c91623;
+}
+/*其他用户购买*/
+.other-user-buy-box{
+  width: 90%;
+  margin: 0px auto;
+  display: flex;
+    flex-direction: column;
+}
+.other-user-buy-title{
+  margin-top: 25px;
+  font-size: 14px;
+  color: #666;
+  font-weight: bold;
+}
+.other-user-buy-row{
+  margin-top: 25px;
+  display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+.other-user-buy-item-box{
+  display: flex;
+    flex-direction: row;
+}
+.other-user-buy-item-img{
+  width: 96px;
+  height: 96px;
+}
+.other-user-buy-item-img img{
+  width: 100%;
+}
+.other-buy-detail-box{
+  width: 160px;
+  margin-left: 15px;
+  display: flex;
+    flex-direction: column;
+}
+.other-buy-title{
+  font-size: 12px;
+}
+.other-buy-title a{
+  color: #2c2c2c;
+  text-decoration: none;
+}
+.other-buy-price{
+  font-size: 12px;
+  font-weight: bold;
+  color: #E4393C;
+}
+.other-buy-btn{
+  padding: 3px 10px;
+  color: #E4393C;
+  font-size: 12px;
+  border: 1px solid #E4393C;
+  border-radius: 0px;
+  background-color: #fff;
+}
+.other-buy-btn:hover{
+  color: #c91623;
+  border: 1px solid #c91623;
+}
+/****************************加入购物车页面结束*****************************/
+</style>

src/components/SignUp.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <Row class="container">
+      <i-col span="12" offset="2" class="signup-img-box">
+        <img src="static/img/signup-sale.png" alt="">
+      </i-col>
+      <i-col span="8" class="box">
+        <div class="sign-up-title">
+          <h1>欢迎注册账号</h1>
+          <br>
+          <h2>Auc竞拍平台,给您提供最优质的竞拍体验。</h2>
+        </div>
+        <div class="sing-up-step-box">
+          <Steps :current="signUpStep">
+              <Step title="验证手机号" icon="iphone"></Step>
+              <Step title="填写账号信息" icon="person-add"></Step>
+              <Step title="注册成功" icon="ios-checkmark-outline"></Step>
+          </Steps>
+          <div class="sign-up-box">
+            <transition mode="out-in">
+              <router-view></router-view>
+            </transition>
+          </div>
+        </div>
+      </i-col>
+    </Row>
+    <Footer></Footer>
+  </div>
+</template>
+
+<script>
+import store from '@/vuex/store';
+import { mapState, mapMutations } from 'vuex';
+
+export default {
+  name: 'SignUp',
+  data () {
+    return {
+      index: 0
+    };
+  },
+  computed: {
+    ...mapState(['signUpStep'])
+  },
+  methods: {
+    ...mapMutations(['SET_SIGN_UP_SETP'])
+  },
+  store,
+  mounted () {
+    this.SET_SIGN_UP_SETP(0);
+  }
+};
+</script>
+
+<style scoped>
+.container {
+  margin: 15px auto;
+  height: 500px;
+  overflow: hidden;
+}
+.signup-img-box {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.signup-img-box>img {
+  height: 80%;
+}
+.sign-up-title {
+  width: 430px;
+  margin: 15px auto;
+  height: 80px;
+}
+.sing-up-step-box {
+  margin: 15px auto;
+  padding-left: 30px;
+  padding-top: 30px;
+  width: 430px;
+  height: 380px;
+  border: 1px solid #495060;
+}
+.sign-up-box {
+  margin: 30px 25px;
+  width: 350px;
+  display: flex;
+  align-items: center;
+}
+</style>

src/components/footer/Footer.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <footer class="footer">
+      <div class="clearfix"></div>
+      <div class="icon-row">
+        <div class="footer-icon">
+          <h5 class="footer-icon-child"></h5>
+          <span class="footer-icon-text">品类齐全，轻松购物</span>
+        </div>
+        <div class="footer-icon">
+          <h5 class="footer-icon-child footer-icon-child-2"></h5>
+          <span class="footer-icon-text">多仓直发，极速配送</span>
+        </div>
+        <div class="footer-icon">
+          <h5 class="footer-icon-child footer-icon-child-3"></h5>
+          <span class="footer-icon-text">正品行货，精致服务</span>
+        </div>
+        <div class="footer-icon">
+          <h5 class="footer-icon-child footer-icon-child-4"></h5>
+          <span class="footer-icon-text">天天低价，畅选无忧</span>
+        </div>
+      </div>
+      <div class="service-intro">
+        <div class="servece-type">
+          <div class="servece-type-info" v-for="(guide, index) in guideArr" :key="index">
+            <ul>
+              <li v-for="(item, index) in guide" :key="index">{{item}}</li>
+            </ul>
+          </div>
+        </div>
+        <div class="clearfix"></div>
+        <div class="friend-link">
+          <div class="friend-link-item">
+            <ul>
+              <li v-for="(link, index) in moreLink" :key="index">
+                <span :class="[linkItemClass, {'link-last-item': index === 9}]">{{link}}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="clearfix"></div>
+        <div class="copyright">
+          <p>Copyright © 2019 by xifujiang</p>
+        </div>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  data () {
+    return {
+      linkItemClass: 'link-item',
+      guideArr: [
+        [ '购物指南', '购物流程', '会员介绍', '生活旅行', '常见问题', '大家电', '联系客服' ],
+        [ '配送方式', '上门自提', '211限时达', '配送服务查询', '收取标准', '海外配送' ],
+        [ '支付方式', '货到付款', '在线支付', '分期付款', '邮局汇款', '公司转账' ],
+        [ '售后服务', '售后政策', '价格保护', '退款说明', '返修/退换货', '取消订单' ]
+      ],
+      moreLink: [
+        '关于我们', '联系我们', '联系客服', '合作招商', '商家帮助', '营销中心', '销售联盟', '校园社区', '风险监测', '隐私政策'
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+/*****************************底 部 开 始*****************************/
+.footer {
+  width: 100%;
+  height: 390px;
+  margin-top: 30px;
+  background-color: #eaeaea;
+}
+.icon-row {
+  margin: 15px auto;
+  padding-top: 8px;
+  width: 1000px;
+  height: 64px;
+}
+.footer-icon {
+  margin-left: 17px;
+  margin-right: 17px;
+  float: left;
+}
+.footer-icon-child {
+  margin-top: 10px;
+  overflow: hidden;
+  position: absolute;
+  width: 36px;
+  height: 42px;
+  background-image: url("../../../static/img/footer/ico_service.png");
+  text-indent: -999px;
+}
+.footer-icon-child-2 {
+  background-position: 0 -43px;
+}
+.footer-icon-child-3 {
+  background-position: 0 -86px;
+}
+.footer-icon-child-4 {
+  background-position: 0 -129px;
+}
+.footer-icon-text {
+  margin-left: 45px;
+  color: #444444;
+  font-size: 18px;
+  font-weight: bold;
+  line-height: 64px;
+}
+.service-intro {
+  width: 100%;
+  border-top: 1px solid #b2dfdb;
+}
+.servece-type {
+  margin: 15px auto;
+  height: 200px;
+  width: 800px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.servece-type-info {
+  color: #666666;
+}
+.servece-type-info ul {
+  list-style: none;
+}
+.servece-type-info li {
+  font-size: 14px;
+  cursor: pointer;
+  line-height: 26px;
+}
+.servece-type-info li:first-child {
+  font-size: 16px;
+  line-height: 28px;
+  font-weight: bold;
+}
+.friend-link {
+  display: flex;
+  align-items: center;
+  width: 908px;
+  height: 30px;
+  margin: 0px auto;
+  color: #666;
+  border-top: 1px solid #b2dfdb;
+}
+.friend-link-item {
+  margin: 0px auto;
+}
+.friend-link-item ul {
+  list-style: none;
+}
+.friend-link-item li {
+  padding: 5px 0px;
+  float: left;
+}
+.link-item {
+  padding: 0px 8px;
+  cursor: pointer;
+  border-right: 1px solid #ccc;
+}
+.link-last-item {
+  border: none;
+}
+.copyright {
+  width: 100%;
+  color: #666;
+  line-height: 30px;
+  text-align: center;
+}
+.copyright a{
+  color: #232323;
+  font-size: 20px;
+}
+/*****************************底 部 结 束*****************************/
+</style>

src/components/goodsDetail/ShowGoods.vue

@@ -0,0 +1,831 @@
+<template>
+  <div>
+    <div class="item-detail-show">
+      <div class="item-detail-left">
+        <div class="item-detail-big-img">
+          <img :src="goodsInfo.goodDetailResult.images[imgIndex]" alt="" width="380px" height="350px">
+        </div>
+        <div class="item-detail-img-row">
+          <div class="item-detail-img-small" v-for="(item, index) in goodsInfo.goodDetailResult.images" :key="index" @mouseover="showBigImg(index)">
+            <img :src="item" alt="" width="50px" height="50px">
+          </div>
+        </div>
+      </div>
+      <div class="item-detail-right">
+        <div class="item-detail-title">
+          <p>
+            <span class="item-detail-express">当前拍卖</span>{{goodsInfo.goodDetailResult.cname}}</p>
+        </div>
+        <div class="item-detail-tag">
+          <p>
+            <span v-for="(item,index) in goodsInfo.goodDetailResult.typeid" :key="index">【{{item}}】</span>
+          </p>
+        </div>
+        <div class="item-detail-price-row">
+          <div class="item-price-left">
+            <div class="item-price-row">
+              <p>
+                <span class="item-price-title">当前价格</span>
+                <span style="text-decoration:line-through;">￥{{goodsInfo.goodDetailResult.price.toFixed(2)}}</span>
+                <span class="item-price">￥{{goodsInfo.goodDetailResult.nowprice.toFixed(2)}}</span>
+              </p>
+            </div>
+            <div class="item-price-row">
+              <p>
+                <span class="item-price-title">加价单位</span>
+                <!--<span class="item-price-full-cut">{{goodsInfo.goodDetailResult.addprice}}</span>-->
+                <span class="item-price-full-cut">{{goodsInfo.goodDetailResult.addprice.toFixed(2)}}</span>
+              </p>
+            </div>
+            <div class="item-price-row">
+              <p>
+                <span class="item-price-title">卖&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家</span>
+                <span class="item-price-full-cut">{{goodsInfo.goodDetailResult.seller}}</span>
+              </p>
+            </div>
+            <div class="item-price-row">
+              <p>
+                <span class="item-price-title">出&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价</span>
+                <span class="" style="font-size: 18px; color: red">{{goodsInfo.goodDetailResult.count}}</span>&nbsp;次
+              </p>
+            </div>
+            <div class="item-price-row daojishi">
+                <span class="item-price-title">剩&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;余</span>
+                <font v-if="goodsInfo.goodDetailResult.status ===1" >
+                  <font color="red" size="3">竞拍未开始！</font>
+                </font>
+                <font v-else-if="goodsInfo.goodDetailResult.status ===2">
+                  <font color="red" size="3">竞拍已结束！</font>
+                </font>
+                <font v-else>
+                  <Icon type="clock"></Icon>
+                  <span class=" count-down-day">{{ seckillsDay }}</span>
+                  <span class="count-down-point">天</span>
+                  <span class=" count-down-hour">{{ seckillsHours }}</span>
+                  <span class="count-down-point">时</span>
+                  <span class=" count-down-minute">{{ seckillsMinutes }}</span>
+                  <span class="count-down-point">分</span>
+                  <span class=" count-down-seconds">{{ seckillsSeconds }}</span>
+                  <span class="count-down-point">秒</span>
+                </font>
+            </div>
+          </div>
+          <div class="item-price-right">
+            <div class="item-remarks-sum">
+              <p>&nbsp;卖家信用</p>
+              <p>
+                <span class="item-remarks-num">{{goodsInfo.goodDetailResult.score}} </span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="item-detail-commodity">
+          <dl>
+            <dd v-for="(item,index) in goodsInfo.goodDetailResult.param1" :key="index">{{item.title}}: {{item.content}}</dd>
+          </dl>
+          <dl>
+            <dd v-for="(item,index) in goodsInfo.goodDetailResult.param2" :key="index">{{item.title}}: {{item.content}}</dd>
+          </dl>
+        </div>
+        <br>
+        <div class="add-buy-car-box">
+          <div class="add-buy-car">
+            <Button type="info" size="large" @click="favorite()"><i class="el-icon-star-off"></i> 收藏</Button>
+            &nbsp;&nbsp;&nbsp;&nbsp;
+            <Button type="error" size="large" @click="alogin()">立即参拍</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--出价竞拍-->
+    <Modal v-model="modal1" width="400">
+      <p slot="header">
+        <span>出价竞拍</span>
+      </p>
+      <div>
+        <Form :model="formData" label-position="left" :label-width="100">
+          <div class="" style="height: 50px; width: 100%">
+            <span class="lt" style="width:100px;">本&nbsp;&nbsp;&nbsp;品&nbsp;&nbsp;&nbsp;现&nbsp;&nbsp;&nbsp;价&nbsp;&nbsp;：</span>
+            <span style="color:red">￥{{goodsInfo.goodDetailResult.nowprice.toFixed(2)}}</span>&nbsp;元（RMB）<br />
+            <span class="lt" style="width:100px;">本次加价至少为：</span><span style="color:red">￥{{goodsInfo.goodDetailResult.addprice.toFixed(2)}}</span>&nbsp;元<br />
+          </div>
+          <FormItem label="出 价 金 额" prop="price">
+            <Input-number v-model="num" @change="handleChange" :min="this.goodsInfo.goodDetailResult.addprice + this.goodsInfo.goodDetailResult.nowprice" :step="goodsInfo.goodDetailResult.addprice.toFixed(2)"></Input-number>
+            &nbsp;人&nbsp;民&nbsp;币
+          </FormItem>
+          <FormItem label="出 价 件 数" prop="amount">
+            <i-select :model.sync="model1" style="width:200px">
+              <i-option>1</i-option>
+            </i-select>
+          </FormItem>
+          <div style="padding-left: 10px;padding-right: 20px">
+            <p>您为<font color="red">{{myMember.rank}}</font>，可投标
+              <span v-if="myMember.amount == -1">
+                <font color="red">无限</font>
+              </span>
+              <span v-if="myMember.amount != -1">
+                <font color="red">{{myMember.amount}}</font>
+              </span>
+              件商品，单次投标
+              <span v-if="myMember.pricepremiss == -1">
+                <font color="red">不限制</font>
+              </span>
+              <span v-if="myMember.pricepremiss != -1">
+                限制<font color="red">{{myMember.pricepremiss}}</font>RMB
+              </span>
+              金额，您已投标<font color="red">{{bidcount}}</font>件商品</p>
+          </div>
+        </Form>
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="bidding()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel1()" style="width: 30%">取消</Button>
+      </div>
+      <div class="acontents">
+        <font class="red">温馨提示：</font>
+        本品商家好评为<font color="red">{{goodsInfo.goodDetailResult.score}}</font>，供参考使用，出价成功后不能弃标，弃标要扣除弃标费用。
+      </div>
+    </Modal>
+    <!--会员等级说明-->
+    <Modal v-model="modal2" width="1025">
+      <div slot="header">
+        <div class="bond_title">
+          <span>{{userInfo.name}} 普通会员</span>
+        </div>
+        <div class="bond_sm">
+          <h3>会员等级说明</h3>
+          <a href="http://www.ymi.cn/help/grade.html" target="_blank">查看详细&gt;&gt;</a>
+            <span>您需要升级保证金后方可出价竞拍</span>
+        </div>
+      </div>
+      <div>
+        <ul class="bond_sm_ul">
+          <li>
+            <span>会员等级</span>
+            <span v-for="item in member" :key="item.index">
+              {{item.rank}}
+            </span>
+          </li>
+          <li>
+            <span>保证金</span>
+            <span v-for="item in member" :key="item.index">
+              {{item.cautionmoney}}RMB
+            </span>
+          </li>
+          <li>
+            <span>可投标件数</span>
+            <span v-for="item in member" :key="item.index">
+              <span v-if="item.amount === -1">
+                无限制
+              </span>
+              <span v-else>
+                {{item.amount}}件
+              </span>
+            </span>
+          </li>
+          <li>
+            <span>单次金额限制</span>
+            <span v-for="item in member" :key="item.index">
+              <span v-if="item.pricepremiss === -1">
+                无限制
+              </span>
+              <span v-else>
+                {{item.pricepremiss}}RMB
+              </span>
+            </span>
+          </li>
+          <li>
+            <span>出价账号</span>
+            <span v-for="item in member" :key="item.index">
+              {{item.premiss}}
+            </span>
+          </li>
+        </ul>
+      </div>
+      <div slot="footer">
+        <Button type="Ghost" size="large" @click="closeModel2()" style="width: 20%;background-color: #FAA8C2;color: #333;">关闭</Button>
+        <Button type="primary" size="large" @click="upgradeVIP()" style="width: 20%;margin-right: 3%;background-color: #F2534D;color: #333; border: none">前去升级保证金</Button>
+      </div>
+    </Modal>
+    <!--确定竞拍-->
+    <Modal v-model="modal3" width="400">
+      <p slot="header">
+        <span>确定竞拍</span>
+      </p>
+      <div>
+        您当前的出价为<font color="red">￥{{num}}</font>，是否确定继续加价。
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="beSureBidding()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel3()" style="width: 30%">取消</Button>
+      </div>
+      <div class="acontents">
+        <font class="red">温馨提示：</font>
+        本品商家好评为<font color="red">{{goodsInfo.goodDetailResult.score}}</font>，供参考使用，出价成功后不能弃标，弃标要扣除弃标费用。
+      </div>
+    </Modal>
+    <Modal v-model="modal4" width="400">
+      <p slot="header">
+        <span>提示</span>
+      </p>
+      <div>
+        你已收藏过该商品，是否取消收藏？
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="deleteFavorite()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel4()" style="width: 30%">取消</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import store from '@/vuex/store';
+import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
+
+export default {
+  name: 'ShowGoods',
+  created () {
+    this.num = this.goodsInfo.goodDetailResult.addprice + this.goodsInfo.goodDetailResult.nowprice;
+    this.selectMemberRule();
+    this.getBidCount();
+    this.getUid();
+  },
+  data () {
+    return {
+      formData: {
+        price: '',
+        amount: ''
+      },
+      modal1: false,
+      modal2: false,
+      modal3: false,
+      modal4: false,
+      price: 0,
+      count: 1,
+      selectBoxIndex: 0,
+      imgIndex: 0,
+      setIntervalObj: null,
+      num: 1,
+      uid: '',
+      username: '',
+      member: [],
+      myMember: {},
+      ruleInline: {
+        num: [
+          { required: true, message: '请输入出价格', trigger: 'blur' },
+          { type: 'number',
+            message: '请输入两位小数点数字格式',
+            trigger: 'blur',
+            transform (value) {
+              return Number(value);
+            }
+          }
+        ]
+      },
+      bidcount: 0,
+      bidstatu: {}
+    };
+  },
+  computed: {
+    ...mapState(['userInfo', 'goodsInfo']),
+    ...mapGetters([ 'seckillsDay', 'seckillsHours', 'seckillsMinutes', 'seckillsSeconds' ])
+  },
+  methods: {
+    ...mapActions(['addShoppingCart', 'loadSeckillsInfo']),
+    ...mapMutations(['REDUCE_SECKILLS_TIME']),
+    select (index1, index2) {
+      this.selectBoxIndex = index1 * 3 + index2;
+      this.price = this.goodsInfo.goodDetailResult.setMeal[index1][index2].price;
+    },
+    getUid () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      this.uid = (JSON.parse(loginInfo))['uid'];
+    },
+    showBigImg (index) {
+      this.imgIndex = index;
+    },
+    alogin () {
+      // 先判断是否已经登录
+      let localStorage = window.localStorage;
+      this.username = localStorage.getItem('loginInfo');
+      if (this.username == null) {
+        // 如果未登录，跳转登录界面
+        this.$Message.error('账号过期，请重新登录');
+        this.$router.push('/login');
+        return;
+      }
+      if (this.goodsInfo.goodDetailResult.status === 2) {
+        this.$Message.info('该商品竞拍已结束！');
+        return;
+      }
+      let uid = (JSON.parse(this.username))['uid'];
+      let memberid = (JSON.parse(this.username))['memberid'];
+      // 根据后台返回的状态判断是否能竞拍这个商品。
+      // 请求后台，查看是否已竞拍过这个商品，且为当前出价最高价，如果是，则提示不能拍
+      this.$axios({
+        url: '/getBiddingStatus',
+        method: 'post',
+        params: {
+          cid: this.goodsInfo.goodDetailResult.cid,
+          uid: uid
+        }
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.bidstatu.flag = successResponce.data.data;
+          this.bidstatu.code = successResponce.data.message;
+          if (this.bidstatu.flag === 2) {
+            this.$Message.info(this.bidstatu.code);
+          } else {
+            // 查询我的会员
+            this.member.forEach(item => {
+              if (item.memberid === memberid) {
+                this.myMember = item;
+              }
+            });
+            // 如果登录，显示竞拍界面
+            this.modal1 = true;
+          }
+        }
+      });
+    },
+    deleteFavorite() {
+      this.$axios({
+        url: '/deleteFavorite',
+        method: 'get',
+        params: {
+          uid: this.uid,
+          cid: this.goodsInfo.goodDetailResult.cid
+        }
+      }).then(res =>{
+        if(res.data.code === 200) {
+          this.$Message.info("删除成功");
+        }
+      })
+    },
+    favorite() {
+      //判断是否是已收藏，若不是，则收藏，否则，提示是否要取消收藏
+      this.$axios({
+        url: '/addFavorite',
+        method: 'get',
+        params: {
+          uid: this.uid,
+          cid: this.goodsInfo.goodDetailResult.cid
+        }
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+            this.$Message.info("收藏成功");
+        } else {
+          this.$Message.info("你已收藏过");
+        }
+      });
+    },
+    handleChange (value) {
+      console.log(value);
+    },
+    bidding () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      let name = (JSON.parse(loginInfo))['name'];
+      let memberid = (JSON.parse(loginInfo))['memberid'];
+      if (name === this.goodsInfo.goodDetailResult.seller) { // 如果是自己发布的商品
+        this.$Message.error('不能竞拍自己发布的商品');
+        return;
+      }
+      if (this.num < (this.goodsInfo.goodDetailResult.addprice + this.goodsInfo.goodDetailResult.price) || isNaN(this.num)) {
+        this.$Message.error('出价不符合要求');
+        return;
+      }
+      // if() 如果商品已经过拍卖时间。
+      if (memberid === 1) {
+        // 根据用户uid查看是什么会员等级，如果是普通会员，则显示model2，否则，提示是什么等级，可以购买几个商品。
+        this.modal1 = false;
+        this.modal2 = true;
+      } else {
+        // 查看单次竞拍价格是否超过最高竞拍价格
+        if (this.myMember.pricepremiss != -1 && this.num > this.myMember.pricepremiss) {
+          this.$message.info('竞拍价格超过单次最高竞拍价格，不得竞拍');
+          return;
+        }
+        // 查看是否有竞拍次数
+        if (this.myMember.pricepremiss != -1 && this.myMember.cautionmoney <= this.bidcount) {
+          this.$message.info('已无竞拍次数,不得竞拍');
+          return;
+        }
+        // 查看是否是第一次竞拍
+        if (this.bidstatu.flag === 1) {
+          // 第一次竞拍该商品，支付押金。
+          this.$router.push({
+            path: '/DepositOrder',
+            query: {
+              cid: this.goodsInfo.goodDetailResult.cid,
+              image: this.goodsInfo.goodDetailResult.images[this.imgIndex],
+              cname: this.goodsInfo.goodDetailResult.cname,
+              nature: '支付竞拍保证金',
+              bidprice: this.num,
+              deposit: this.goodsInfo.goodDetailResult.price + this.goodsInfo.goodDetailResult.addprice
+            }
+          });
+        } else if (this.bidstatu.flag === 3) {
+          // 不是第一次竞拍该商品，可直接竞拍。
+          this.modal1 = false;
+          this.modal3 = true;
+        }
+      }
+    },
+    beSureBidding () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      let uid = (JSON.parse(loginInfo))['uid'];
+      var bidding = {
+        bidid: this.randomNumber(),
+        cid: this.goodsInfo.goodDetailResult.cid,
+        uid: uid,
+        bidprice: this.num
+      };
+      this.$axios({
+        url: '/addBidding',
+        method: 'post',
+        data: bidding
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.modal3 = false;
+          this.$message.info('竞价成功！请耐心等待');
+        }
+      });
+    },
+    closeModel1 () {
+      this.modal1 = false;
+    },
+    closeModel2 () {
+      this.modal2 = false;
+    },
+    closeModel3 () {
+      this.modal3 = false;
+    },
+    closeModel4 () {
+      this.modal4 = false;
+    },
+    upgradeVIP () {
+    },
+    selectMemberRule () { // 获取会员等级表
+      this.$axios({
+        url: 'selectMemberRule',
+        method: 'get'
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.member = successResponce.data.data;
+        } else {
+          this.$message.error('无法获取等级信息');
+        }
+      });
+    },
+    getBidCount () {
+      let localStorage = window.localStorage;
+      var count = localStorage.getItem('bidcount');
+      if (count === null || !isNaN(count)) { // 如果没有取到bidcount
+        let localStorage = window.localStorage;
+        this.username = localStorage.getItem('loginInfo');
+        let uid = (JSON.parse(this.username))['uid'];
+        this.$axios({
+          url: '/getUserBiddingCount',
+          method: 'get',
+          params: {
+            uid: uid
+          }
+        }).then(successResponce => {
+          if (successResponce.data.code === 200) {
+            this.bidcount = successResponce.data.data;
+            localStorage.setItem('bidcount', this.bidcount);
+          }
+        });
+      } else {
+        this.bidcount = count;
+      }
+    },
+    setTimeDateFmt (s) { // 个位数补齐十位数
+      return s < 10 ? '0' + s : s;
+    },
+    randomNumber () {
+      const now = new Date();
+      let month = now.getMonth() + 1;
+      let day = now.getDate();
+      let hour = now.getHours();
+      let minutes = now.getMinutes();
+      let seconds = now.getSeconds();
+      month = this.setTimeDateFmt(month);
+      day = this.setTimeDateFmt(day);
+      hour = this.setTimeDateFmt(hour);
+      minutes = this.setTimeDateFmt(minutes);
+      seconds = this.setTimeDateFmt(seconds);
+      let orderCode = now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds + (Math.round(Math.random() * 1000000)).toString();
+      console.log(orderCode);
+      return orderCode;
+    }
+  },
+  mounted () {
+    const father = this;
+    this.setIntervalObj = setInterval(function () {
+      father.REDUCE_SECKILLS_TIME();
+    }, 1000);
+    setTimeout(() => {
+      father.price = father.goodsInfo.goodDetailResult.setMeal[0][0].price || 0;
+    }, 300);
+  },
+  destroyed () {
+    clearInterval(this.setIntervalObj);
+  },
+  store
+};
+</script>
+
+<style scoped>
+/******************商品图片及购买详情开始******************/
+.item-detail-show {
+  width: 80%;
+  margin: 15px auto;
+  display: flex;
+  flex-direction: row;
+  background-color: #fff;
+}
+.item-detail-left {
+  width: 350px;
+  margin-right: 30px;
+}
+.item-detail-big-img {
+  width: 350px;
+  height: 350px;
+  box-shadow: 0px 0px 8px #ccc;
+  cursor: pointer;
+}
+.item-detail-big-img img {
+  width: 100%;
+}
+.item-detail-img-row {
+  margin-top: 15px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.item-detail-img-small {
+  width: 68px;
+  height: 68px;
+  box-shadow: 0px 0px 8px #ccc;
+  cursor: pointer;
+}
+.item-detail-img-small img {
+  width: 100%;
+}
+/*商品选购详情*/
+.item-detail-right {
+  display: flex;
+  flex-direction: column;
+}
+.item-detail-title p {
+  color: #666;
+  font-size: 20px;
+}
+.item-detail-express {
+  font-size: 14px;
+  padding: 2px 3px;
+  border-radius: 3px;
+  background-color: #e4393c;
+  color: #fff;
+}
+/*商品标签*/
+.item-detail-tag {
+  font-size: 12px;
+  color: #e4393c;
+}
+/*价格详情等*/
+.item-detail-price-row {
+  padding: 5px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: #f3f3f3;
+}
+.item-detail-commodity{
+  padding: 5px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.item-detail-commodity dd{
+  float: left;
+  width: 100%;
+  height: 30px;
+  font-size: 14px;
+  line-height: 30px;
+  color: #666;
+}
+.aloginBox,.bloginBox,.cloginBox{position: absolute; display: block; width:400px;padding:10px;z-index: 101;background: #FFF;}
+.alogin_colse,.blogin_colse,.clogin_colse{float: left;width: 100%;height:40px;line-height: 40px;background:#223066;color:#FFF;}
+.alogin_colse h3,.blogin_colse h3,.clogin_colse h3{float: left;font-size: 16px;font-weight: normal;width:370px;text-indent:10px;float:left;}
+.alogin_colse span,.blogin_colse span,.clogin_colse span{float: right;width:16px;height:16px;background:url(http://img.ymibuy.cn/public/close.png) no-repeat;cursor: pointer;margin:12px 10px 0 0;}
+.alogin_con,.blogin_con,.clogin_con{float: left;width:320px;padding:10px 40px 20px 40px;}
+.alogin_con .ausername,.blogin_con .ausername,.clogin_con .ausername{float: left;width: 100%;height:30px;line-height:30px;position: relative;margin:5px 0px;}
+.alogin_con .ausername input[type="text"],.blogin_con .ausername input[type="text"],.clogin_con .ausername input[type="text"]{width:173px;height:28px;border: 1px solid #CCCCCC;line-height:28px;padding: 0px 10px;color: #191818;float: left;}
+.alogin_con .ausername input[type="button"],.blogin_con .ausername input[type="button"],.clogin_con .ausername input[type="button"]{padding:10px 40px;background:#223066;color:#fff;border:none;}
+.alogin_con .acontents,.blogin_con .acontents,.clogin_con .acontents{float:left;line-height:20px;color:#333;padding:10px;background:#ebebeb;margin-top:20px;}
+.pricedescription{text-align: left;color: #333;font-size: 12px;font-family: 'Microsoft YaHei';height: auto;width:318px;float: left;padding:10px 0;line-height:24px;}
+
+.acontents{
+  float: left;
+  line-height: 20px;
+  color: #333;
+  padding: 10px;
+  background: #ebebeb;
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+.bond_title {
+  float: left;
+  height: 40px;
+  line-height: 40px;
+  width: 94%;
+  margin: 20px 3% 0px;
+  border: 1px solid #F55085;
+  background-color: #FDF5EE;
+  text-indent: 10px;
+  font-size: 18px;
+  font-weight: bold;
+}
+.bond_sm{
+  float: left;
+  width: 94%;
+  height: 40px;
+  line-height: 40px;
+  font-size: 18px;
+  margin: 10px 3% 0px;
+}
+.bond_sm h3{
+  float: left;
+  width: auto;
+}
+.bond_sm a {
+  float: left;
+  width: auto;
+  margin-left: 20px;
+  color: #009DDA;
+  font-size: 14px;
+}
+.bond_sm  span {
+  float: right;
+  width: auto;
+  padding: 0px 10px;
+  background-color: #F2534D;
+  font-size: 14px;
+  color: #FFF;
+  height: 30px;
+  line-height: 30px;
+  margin-top: 5px;
+}
+.bond_sm_ul{
+  float: left;
+  width: 94%;
+  height: auto;
+  margin: 0 3%;
+  margin-bottom: 10px;
+}
+ul, li {
+  list-style: none;
+}
+.bond_sm_ul li:first-child {
+  background-color: #5F21D9;
+  color: #FFF;
+  height: 40px;
+  line-height: 40px;
+}
+.bond_sm_ul li {
+  float: left;
+  width: 100%;
+  height: 40px;
+  background-color: #FAA8C2;
+  line-height: 40px;
+  text-align: center;
+  border-left: 1px solid #F5588A;
+}
+.bond_sm_ul li span {
+  float: left;
+  width: 155px;
+  border-bottom: 1px solid #F5588A;
+  border-right: 1px solid #F5588A;
+  height: 39px;
+}
+.item-price-left {
+  display: flex;
+  flex-direction: column;
+}
+.item-price-title {
+  color: #999999;
+  font-size: 14px;
+  margin-right: 15px;
+}
+.item-price-row {
+  margin: 5px 0px;
+}
+.item-price {
+  color: #e4393c;
+  font-size: 23px;
+  cursor: pointer;
+}
+.item-price-full-cut {
+  margin-right: 5px;
+  padding: 3px;
+  color: #e4393c;
+  font-size: 12px;
+  background-color: #ffdedf;
+  border: 1px dotted #e4393c;
+  cursor: pointer;
+}
+.item-remarks-sum {
+  padding-left: 8px;
+  border-left: 1px solid #ccc;
+}
+.item-remarks-sum p {
+  color: #999999;
+  font-size: 12px;
+  line-height: 10px;
+  text-align: center;
+}
+.item-remarks-num {
+  line-height: 18px;
+  color: #005eb7;
+}
+.item-select {
+  display: flex;
+  flex-direction: row;
+  margin-top: 15px;
+}
+.item-select-title {
+  color: #999999;
+  font-size: 14px;
+  margin-right: 15px;
+}
+.item-select-column {
+  display: flex;
+  flex-direction: column;
+}
+.item-select-row {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 8px;
+}
+.item-select-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.item-select-img {
+  width: 36px;
+}
+.item-select-box {
+  padding: 5px;
+  margin-right: 8px;
+  background-color: #f7f7f7;
+  border: 0.5px solid #ccc;
+  cursor: pointer;
+}
+.item-select-box:hover {
+  border: 0.5px solid #e3393c;
+}
+.item-select-box-active {
+  border: 0.5px solid #e3393c;
+}
+.item-select-img img {
+  width: 100%;
+}
+.item-select-intro p {
+  margin: 0px;
+  padding: 5px;
+}
+.item-select-class {
+  padding: 5px;
+  margin-right: 8px;
+  background-color: #f7f7f7;
+  border: 0.5px solid #ccc;
+  cursor: pointer;
+}
+.item-select-class:hover {
+  border: 0.5px solid #e3393c;
+}
+.add-buy-car-box {
+  width: 100%;
+  margin-top: 15px;
+  border-top: 1px dotted #ccc;
+}
+.add-buy-car {
+  margin-top: 15px;
+}
+.daojishi{
+  width: 400px;
+  height: 35px;
+  line-height: 35px;
+  font-size: 20px;
+  color: #777;
+  margin-top: 5px;
+}
+/******************商品图片及购买详情结束******************/
+</style>

src/components/goodsDetail/ShowGoodsDetail.vue

@@ -0,0 +1,313 @@
+<template>
+  <div>
+    <div class="item-intro-show">
+      <div class="item-intro-recommend">
+        <div class="item-recommend-title">
+          <p>历史出售</p>
+        </div>
+        <div class="item-intro-recommend-column">
+          <div class="item-recommend-column" v-for="(item, index) in goodsInfo.historyCommodityList" :key="index">
+            <div class="item-recommend-img">
+              <router-link :to="'/GoodsDetail?cid='.concat(item.cid)" target="_blank">
+                <img :src="item.image" alt="">
+              </router-link>
+            </div>
+            <div class="item-recommend-intro">
+              <span>
+                <span class="item-recommend-top-num">{{index + 1}}</span> 价格</span>
+              <span class="item-recommend-price">￥{{item.price.toFixed(2)}}</span>
+              <span class="item-recommend-price">￥{{item.addprice.toFixed(2)}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="item-intro-detail" ref="itemIntroDetail">
+        <div class="item-intro-nav item-tabs">
+          <Tabs>
+            <TabPane label="竞购记录">
+              <div class="remarks-title">
+                <span>竞购记录</span>
+                <div>
+                  <el-table :data="goodsInfo.historyBiddingList" style="width: 100%">
+                    <!--商品名-->
+                    <el-table-column prop="uname" label="出价者" sortable width="300" align='center'></el-table-column>
+                    <!--商品名-->
+                    <el-table-column prop="bidtime" label="出价时间" sortable align='center'></el-table-column>
+                    <!--出价者信用-->
+                    <el-table-column prop="score" label="出价者信用" width="200" align='center'></el-table-column>
+                    <!--出价金额-->
+                    <el-table-column prop="bidprice" label="出价金额" width="200" align='center'></el-table-column>
+                  </el-table>
+
+                  <!--<i-table :columns="columns1" :data="historyBid"></i-table>-->
+                </div>
+              </div>
+              <div class="item-param-container">
+                <!--<span class="item-param-box" v-for="(item,index) in goodsInfo.param" :key="index">-->
+                  <!--<span class="item-param-title">{{item.title}}: </span>-->
+                  <!--<span class="item-param-content">{{item.content}}</span>-->
+                <!--</span>-->
+              </div>
+            </TabPane>
+            <TabPane label="商品介绍">
+              <div class="remarks-title">
+                <span>商品介绍</span>
+              </div>
+              <div class="item-intro-img" ref="itemIntroGoods">
+                {{goodsInfo.des}}
+              </div>
+            </TabPane>
+            <TabPane label="售后保障">
+              <ShowProductWarranty></ShowProductWarranty>
+            </TabPane>
+            <TabPane label="商品评价">
+              <div class="remarks-container">
+                <div class="remarks-title">
+                  <span>商品评价</span>
+                </div>
+                <div v-for="item in goodsInfo.sellerCommentList">
+                  <el-row :gutter="20" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
+                    <el-col :span="2">
+                      <div class="commit-img" >
+                        <img src="static/img/commit.jpeg">
+                      </div>
+                      <div class="comment-name" style="margin-top: -10px">
+                        <span style="text-align: center;display: block;">{{item.name}}</span>
+                      </div>
+                    </el-col>
+                    <el-col :span="12">
+                      <span>商品名称：{{item.cname}}</span>
+                      <el-divider></el-divider>
+                      <span>质量：{{item.quality}}</span> &nbsp;&nbsp;
+                      <span>物流速度：{{item.speed}}</span> &nbsp;&nbsp;
+                      <span>卖家态度：{{item.attitude}}</span> &nbsp;&nbsp;
+                      <span>评论时间：{{item.time}}</span>
+                    </el-col>
+                  </el-row>
+                </div>
+              </div>
+            </TabPane>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ShowProductWarranty from '@/components/goodsDetail/ShowProductWarranty';
+import store from '@/vuex/store';
+import { mapState } from 'vuex';
+export default {
+  name: 'ShowGoodsDetail',
+  data () {
+    return {
+      tagsColor: [ 'blue', 'green', 'red', 'yellow' ],
+      historyCommodity: []
+    };
+  },
+  computed: {
+    ...mapState(['goodsInfo'])
+  },
+  created () {},
+  methods: {
+    changeHeight () {
+      let heightCss = window.getComputedStyle(this.$refs.itemIntroGoods).height;
+      heightCss = parseInt(heightCss.substr(0, heightCss.length - 2)) + 89;
+      this.$refs.itemIntroDetail.style.height = heightCss + 'px';
+    },
+    seeNewCommodity (cid) {
+      window.open('GoodsDetail?cid=' + cid, '_blank');
+    }
+  },
+  updated () {
+    this.$nextTick(() => {
+      setTimeout(this.changeHeight, 100);
+      setTimeout(this.changeHeight, 1000);
+      setTimeout(this.changeHeight, 3000);
+      setTimeout(this.changeHeight, 5000);
+      setTimeout(this.changeHeight, 10000);
+      setTimeout(this.changeHeight, 15000);
+      setTimeout(this.changeHeight, 20000);
+      setTimeout(this.changeHeight, 25000);
+      setTimeout(this.changeHeight, 30000);
+      setTimeout(this.changeHeight, 50000);
+    });
+  },
+  components: {
+    ShowProductWarranty
+  },
+  store
+};
+</script>
+
+<style scoped>
+/***************商品详情介绍和推荐侧边栏开始***************/
+.item-intro-show{
+  width: 80%;
+  margin: 15px auto;
+  display: flex;
+  flex-direction: row;
+  background-color: #fff;
+}
+.item-intro-recommend{
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+}
+.item-intro-recommend-column{
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0px 0px 5px #999;
+}
+.item-recommend-title{
+  width: 100%;
+  height: 38px;
+  font-size: 16px;
+  line-height: 38px;
+  color: #fff;
+  background-color: #E4393C;
+  box-shadow: 0px 0px 5px #E4393C;
+  text-align: center;
+}
+.item-recommend-column{
+  margin-top: 15px;
+}
+.item-recommend-intro{
+  padding: 5px 15px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #999;
+  cursor: pointer;
+}
+.item-recommend-img{
+  width: 80%;
+  margin: 0px auto;
+  cursor: pointer;
+}
+.item-recommend-img img{
+  width: 100%;
+}
+.item-recommend-top-num{
+  color: #fff;
+  margin: 0px 2px;
+  padding: 1px 5px;
+  border-radius: 12px;
+  background-color: #E4393C;
+}
+.item-recommend-price{
+  color: #E4393C;
+  font-weight: bolder;
+}
+.item-intro-detail{
+  margin-left: 30px;
+  width: calc(80vw - 300px);
+}
+.item-intro-nav{
+  width: 100%;
+  height: 38px;
+  background-color: #F7F7F7;
+  border-bottom: 1px solid #E4393C;
+}
+.item-intro-nav ul{
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}
+.item-intro-nav li{
+  float: left;
+  height: 100%;
+  width: 120px;
+  line-height: 38px;
+  text-align: center;
+  color: #E4393C;
+}
+.item-intro-nav li:first-child{
+  background-color: #E4393C;
+  color: #fff;
+}
+.item-intro-img{
+  width: 100%;
+}
+.item-intro-img img{
+  width: 100%;
+}
+/************* 商品参数 *************/
+.item-param-container {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.item-param-box {
+  padding: 5px;
+  padding-left: 30px;
+  width: 240px;
+  height: 36px;
+  font-size: 14px;
+  /* text-align: center; */
+  /* background-color: #ccc; */
+}
+.item-param-title {
+  color: #232323;
+}
+.item-param-content {
+  color: #999;
+}
+.remarks-title {
+  padding-left: 15px;
+  height: 36px;
+  font-size: 16px;
+  font-weight: bolder;
+  line-height: 36px;
+  color: #666666;
+  background-color: #F7F7F7;
+  margin-bottom: 10px;
+}
+.commit-img {
+  margin-bottom: 15px;
+  width: 100%;
+  height: 100%;
+  border-radius: 48px;
+  overflow: hidden;
+}
+.commit-img img{
+  width: 100%;
+}
+
+
+/***************商品详情介绍和推荐侧边栏结束***************/
+</style>
+
+<style>
+/* 改变便签页样式 */
+.ivu-tabs-ink-bar {
+  background-color: #E4393C !important;
+}
+.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab{
+  border-radius: 0px;
+  color: #999;
+  height: 38px;
+  background: #F7F7F7;
+}
+.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active{
+  color: #fff;
+  background-color: #E4393C;
+}
+.item-tabs > .ivu-tabs > .ivu-tabs-bar .ivu-tabs-tab-active:before{
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  color: #fff;
+  background: #F7F7F7;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.ivu-rate-star-full:before, .ivu-rate-star-half .ivu-rate-star-content:before {
+  color: #E4393C;
+}
+</style>

src/components/header/Header.vue

@@ -0,0 +1,322 @@
+<template>
+  <div class="box">
+    <div class="nav">
+      <ul class="location">
+        <li>
+          <Dropdown  placement="bottom-start">
+            <a href="javascript:void(0)">
+              <Icon type="ios-location" class="icon"></Icon> {{city}}
+            </a>
+            <DropdownMenu slot="list">
+              <div class="city">
+                <p v-for="(items, index) in cityArr" :key="index">
+                  <span v-for="(item, index) in items"  class="city-item" :key="index" @click="changeCity(item)">{{item}}</span>
+                </p>
+              </div>
+            </DropdownMenu>
+          </Dropdown>
+        </li>
+      </ul>
+      <ul class="detail">
+        <li class="first" v-show="!userInfo.name">
+          你好，请<router-link to="/login">登录 <Icon type="person"></Icon></router-link> |<span class="text-color-red"><router-link to="/SignUp">免费注册 <Icon type="person-add"></Icon></router-link></span>
+        </li>
+        <li v-show="!!userInfo.name">
+          <Dropdown>
+            <p class="name-p">
+              <Avatar class="person-icon" icon="person" size="small" /> <span class="name">{{userInfo.name}} </span>
+            </p>
+            <DropdownMenu slot="list">
+                <div class="my-page">
+                  <div class="my-info" @click="myInfo">
+                    <Icon type="home"></Icon>
+                    <p>我的主页</p>
+                  </div>
+                  <div class="sign-out" @click="signOutFun">
+                    <Icon type="log-out"></Icon>
+                    <p>退出登录</p>
+                  </div>
+                </div>
+            </DropdownMenu>
+          </Dropdown>
+        </li>
+        <li>
+          <Dropdown  placement="bottom-start">
+            <a href="javascript:void(0)">
+              <Icon type="ios-cart-outline"></Icon> 购物车
+            </a>
+            <DropdownMenu slot="list">
+              <div class="shopping-cart-null" v-show="shoppingCart.length <= 0">
+                <Icon type="ios-cart-outline" class="cart-null-icon"></Icon>
+                <span>你的购物车没有空空哦</span>
+                <span>赶快去添加商品吧~</span>
+              </div>
+              <div class="shopping-cart-list" v-show="shoppingCart.length > 0">
+                <!--<div class="shopping-cart-box" v-for="(item,index) in shoppingCart" :key="index">-->
+                  <!--<div class="shopping-cart-img">-->
+                    <!--<img :src="item.img">-->
+                  <!--</div>-->
+                  <!--<div class="shopping-cart-info">-->
+                    <!--<div class="shopping-cart-title">-->
+                      <!--<p>{{item.title.substring(0, 22)}}...</p>-->
+                    <!--</div>-->
+                    <!--<div class="shopping-cart-detail">-->
+                      <!--<p>-->
+                        <!--套餐:-->
+                        <!--<span class="shopping-cart-text">-->
+                          <!--{{item.package}}-->
+                        <!--</span>-->
+                        <!--数量:-->
+                        <!--<span class="shopping-cart-text">-->
+                          <!--{{item.count}}-->
+                        <!--</span>-->
+                        <!--价钱:-->
+                        <!--<span class="shopping-cart-text">-->
+                          <!--{{item.price}}-->
+                        <!--</span>-->
+                      <!--</p>-->
+                    <!--</div>-->
+                  <!--</div>-->
+                <!--</div>-->
+                <div class="go-to-buy">
+                  <Button type="error" size="small" @click="goToPay">
+                    去结账
+                  </Button>
+                </div>
+              </div>
+            </DropdownMenu>
+          </Dropdown>
+        </li>
+        <li><router-link to="/">网站导航</router-link></li>
+        <li><router-link to="/freeback">意见反馈</router-link></li>
+        <li><router-link to="/">商城首页</router-link></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import store from '@/vuex/store';
+import { mapState, mapActions } from 'vuex';
+export default {
+  name: 'Header',
+  created () {
+    this.isLogin();
+  },
+  data () {
+    return {
+      city: '珠海',
+      cityArr: [
+        ['北京', '上海', '天津', '重庆', '广州'],
+        ['深圳', '河南', '辽宁', '吉林', '江苏'],
+        ['江西', '四川', '海南', '贵州', '云南'],
+        ['西藏', '陕西', '甘肃', '青海', '珠海']
+      ]
+    };
+  },
+  computed: {
+    ...mapState(['userInfo', 'shoppingCart'])
+  },
+  methods: {
+    ...mapActions(['signOut', 'isLogin']),
+    changeCity (city) {
+      this.city = city;
+    },
+    goToPay () {
+      this.$router.push('/order');
+    },
+    myInfo () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      if (loginInfo == null) {
+        this.$Message.error('账号过期，请重新登录');
+        this.$router.push('/login');
+      } else {
+        this.$router.push('/home');
+      }
+    },
+    signOutFun () {
+      this.signOut();
+      // this.$router.go(0);
+    }
+  },
+  store
+};
+</script>
+
+<style scoped>
+.box {
+  width: 100%;
+  height: 35px;
+  background-color: #e3e4e5;
+}
+.nav {
+  margin: 0% auto;
+  width: 90%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.nav ul {
+  list-style: none;
+}
+.nav li {
+  float: left;
+  font-size: 14px;
+  line-height: 35px;
+  margin-right: 15px;
+  font-weight: bold;
+}
+.nav a {
+  text-decoration: none;
+  color: #999999;
+  padding-left: 15px;
+  border-left: 1px solid #ccc;
+  cursor: pointer;
+}
+.location a {
+  border-left: none;
+}
+.nav a:hover {
+  color: #d9534f;
+}
+.location {
+  color: #999999;
+}
+.icon {
+  color: #d9534f;
+}
+.first {
+  color: #999999;
+}
+.first a:first-child {
+  padding-left: 3px;
+  border-left: none;
+}
+.city {
+  padding: 10px 15px;
+}
+.city-item {
+  font-weight: bold;
+  cursor: pointer;
+  padding: 5px;
+}
+.city-item:hover {
+  color: #d9534f;
+}
+.person-icon {
+  color: #d9534f;
+  background-color:  #f0cdb2;
+}
+.name {
+  color: #999999;
+}
+.shopping-cart-list {
+  padding: 3px 15px;
+}
+.shopping-cart-box {
+  margin: 8px 0px;
+  margin-top: 15px;
+  padding-bottom: 15px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px #ccc dotted;
+}
+.shopping-cart-box:first-child {
+  margin-top: 8px;
+}
+.shopping-cart-img {
+  margin-right: 15px;
+  width: 40px;
+  height: 40px;
+}
+.shopping-cart-img img {
+  width: 100%;
+}
+.shopping-cart-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-content: space-between;
+  width: 200px;
+  overflow: hidden;
+  font-size: 12px;
+  line-height: 20px;
+  color: #999999;
+}
+.shopping-cart-detail {
+  color: #999999;
+}
+.shopping-cart-text {
+  color: #ccc;
+}
+.go-to-buy {
+  display: flex;
+  justify-content: flex-end;
+}
+.shopping-cart-null {
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.cart-null-icon {
+  font-size: 38px;
+  margin-bottom: 15px;
+}
+.shopping-cart-null span {
+  color: #999999;
+  font-size: 12px;
+  line-height: 16px;
+}
+.name-p {
+  cursor: pointer;
+}
+.my-page {
+  padding: 3px 5px;
+  width: 180px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.my-page a {
+  margin: 0px;
+  padding: 0px;
+  border: none;
+}
+.my-info {
+  padding: 5px;
+  width: 50%;
+  height: 100%;
+  text-align: center;
+  cursor: pointer;
+}
+.my-info:hover {
+  box-shadow: 0px 0px 5px #ccc;
+}
+.my-info i {
+  font-size: 28px;
+}
+.my-info p {
+  font-size: 12px;
+}
+.sign-out {
+  padding: 5px;
+  width: 50%;
+  height: 100%;
+  text-align: center;
+  cursor: pointer;
+}
+.sign-out:hover {
+  box-shadow: 0px 0px 5px #ccc;
+}
+.sign-out i {
+  font-size: 28px;
+}
+.sign-out p {
+  font-size: 12px;
+}
+</style>

src/components/header/ShopHeader.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="shop-box">
+    <div class="shop-container">
+      <div class="shop-title">
+        <div class="shop-title-icon">
+          <Icon type="fireball"></Icon>
+          <i class="fa fa-fire"></i>
+        </div>
+        <div class="shop-title-content">
+          <p><router-link to="/merchant">{{ shopIntro.shopName }}</router-link></p>
+          <p><router-link to="/merchant">{{ shopIntro.slogen }}</router-link></p>
+        </div>
+      </div>
+      <div class="shop-another-item">
+        <div class="shop-another-item-detail" v-for="(item, index) in shopIntro.showGoods" :key="index">
+          <div class="shop-another-item-img">
+            <img :src="item.img" alt="">
+          </div>
+          <div class="shop-anoter-item-intro">
+            <p>{{ item.intro[0] }}</p>
+            <p>{{ item.intro[1] }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ShopHeader',
+  data () {
+    return {
+      shopIntro: {
+        shopName: 'Gavin Shop',
+        slogen: 'The Best Thing For You',
+        showGoods: [
+          {
+            img: 'static/img/goodsList/item-show-1.jpg',
+            intro: [ '全身磨砂', '防指纹' ]
+          },
+          {
+            img: 'static/img/goodsList/item-show-2.jpg',
+            intro: [ '环保PP材质', '不发黄' ]
+          },
+          {
+            img: 'static/img/goodsList/item-show-3.jpg',
+            intro: [ '0.4mm纤细', '纤薄手感' ]
+          }
+        ]
+      }
+    };
+  }
+};
+</script>
+
+<style scoped>
+/* 店铺介绍 */
+.shop-box {
+  width: 100%;
+  height: 120px;
+  background-color: #484848;
+}
+
+.shop-container {
+  width: 80%;
+  height: 100%;
+  margin: 0px auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  color: #fff;
+}
+
+.shop-title {
+  display: flex;
+  flex-direction: row;
+}
+
+.shop-title-icon {
+  font-size: 46px;
+}
+
+.shop-title-content {
+  padding-top: 8px;
+  margin-left: 15px;
+}
+
+.shop-title-content p {
+  line-height: 26px;
+  font-size: 20px;
+}
+
+.shop-title-content a {
+  color: #fff;
+}
+
+.shop-another-item {
+  display: flex;
+  flex-direction: row;
+}
+
+.shop-another-item-detail {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 15px;
+}
+
+.shop-another-item-img {
+  height: 80px;
+  border-radius: 40px;
+  overflow: hidden;
+}
+
+.shop-another-item-img img {
+  width: 80px;
+}
+
+.shop-anoter-item-intro {
+  margin-left: 15px;
+}
+</style>

src/components/home/AddAddress.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <div class="add-container">
+      <div class="add-title">
+        <h1>添加收货地址</h1>
+      </div>
+      <div class="add-box">
+        <Form :model="formData" label-position="left" :label-width="100" :rules="ruleInline">
+          <FormItem label="收件人" prop="name">
+            <i-input v-model="formData.addressee" size="large"></i-input>
+          </FormItem>
+          <FormItem label="收件地区" prop="address">
+            <Distpicker @selected="sel"></Distpicker>
+          </FormItem>
+          <FormItem label="收件地址" prop="detail">
+            <i-input v-model="formData.detail" size="large"></i-input>
+          </FormItem>
+          <FormItem label="手机号码" prop="phone">
+            <i-input v-model="formData.phone" size="large"></i-input>
+          </FormItem>
+          <FormItem label="邮政编码" prop="postalcode">
+            <i-input v-model="formData.postalcode" size="large"></i-input>
+          </FormItem>
+        </Form>
+      </div>
+      <div class="add-submit">
+        <Button type="primary" @click="addAddress()">添加地址</Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Distpicker from 'v-distpicker';
+export default {
+  name: 'AddAddress',
+  data () {
+    return {
+      formData: {
+        addressee: '',
+        detail: '',
+        phone: '',
+        postalcode: '',
+        province: '广东省',
+        city: '广州市',
+        part: '天河区'
+      },
+      ruleInline: {
+        addressee: [
+          { required: true, message: '请输入姓名', trigger: 'blur' }
+        ],
+        detail: [
+          { required: true, message: '请输入地址', trigger: 'blur' }
+        ],
+        postalcode: [
+          { required: true, message: '请输入邮政编码', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, message: '手机号不能为空', trigger: 'blur' },
+          { type: 'string', pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '手机号格式出错', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  methods: {
+    getProvince (data) {
+      this.formData.province = data;
+    },
+    getCity (data) {
+      this.formData.city = data;
+    },
+    getPart (data) {
+      this.formData.part = data;
+    },
+    addAddress () {
+      const address = {
+        addressee: this.formData.addressee,
+        province: this.formData.province,
+        city: this.formData.city,
+        part: this.formData.part,
+        detail: this.formData.detail,
+        phone: this.formData.phone,
+        postalcode: this.formData.postalcode
+      };
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      let uid = (JSON.parse(loginInfo))['uid'];
+      this.$axios({
+        url: '/addAddress',
+        method: 'post',
+        params: {
+          userid: uid
+        },
+        data: address
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          this.$Message.success('添加地址成功');
+          this.$router.push({ path: '/home/addAddress' });
+        } else if (successResponse.data.code === 400) {
+          this.$Message.error('添加地址失败，原因400');
+        }
+      })
+        .catch(failResponse => {
+        });
+    },
+    sel (data) {
+      this.formData.province = data.province.value;
+      this.formData.city = data.city.value;
+      this.formData.part = data.area.value;
+    }
+  },
+  components: {
+    Distpicker
+  }
+};
+</script>
+
+<style scoped>
+.add-container {
+  margin: 15px auto;
+  width: 60%;
+  min-width: 600px;
+}
+.add-title {
+  margin-bottom: 15px;
+  text-align: center;
+}
+.add-submit {
+  display: flex;
+  justify-content: center;
+}
+</style>

src/components/home/EditShoppingCart.vue

@@ -0,0 +1,327 @@
+<template>
+  <!--编辑拍卖物-->
+  <div>
+    <div class="add-container">
+      <div class="add-title">
+        <h1>编辑拍卖物</h1>
+      </div>
+      <div class="add-box">
+        <Form :model="shopFormData" label-position="left" :label-width="100" :rules="rule">
+          <FormItem label="拍卖物名称" prop="cname">
+            <i-input v-model="shopFormData.cname" size="large"></i-input>
+          </FormItem>
+          <FormItem label="拍卖物图片集" prop="images"><font color="red" size="3">修改暂不支持修改图片!</font></FormItem>
+          <Row :gutter="16">
+            <i-col span="12">
+              <FormItem label="拍卖起始价格" prop="price">
+                <Input-number :max="10000" :min="0" :step="0.01" v-model="shopFormData.price"></Input-number>
+              </FormItem>
+            </i-col>
+            <i-col span="12">
+              <FormItem label="每次加价" prop="addprice">
+                <Input-number :max="200" :min="0" :step="0.01" v-model="shopFormData.addprice"></Input-number>
+              </FormItem>
+            </i-col>
+          </Row>
+          <FormItem label="竞拍时间区间" prop="part_time">
+            <Date-picker type="datetimerange"
+                         format="yyyy-MM-dd HH:mm"
+                         value-format="yyyy-MM-dd HH:mm"
+                         start-placeholder="开始时间"
+                         end-placeholder="结束时间"
+                         style="width: 300px" size="large"
+                         v-model="shopFormData.part_time"
+                         @onclick="datetimerange"
+            ></Date-picker>
+          </FormItem>
+          <FormItem label="拍卖物类型" prop="type_id">
+            <i-select :model.sync="model1" size="large" style="width:120px" v-model="name_1">
+              <i-option v-for="item in commodityOneList" :key='item.typeid' :value="item.name" :label="item.name">{{ item.name }}</i-option>
+            </i-select>
+            <i-select :model.sync="model2" size="large" style="width:120px" v-model="name_2">
+              <i-option v-for="item in commodityTwoList" :key='item.typeid' :value="item.name" :label="item.name">{{ item.name }}</i-option>
+            </i-select>
+            <i-select :model.sync="model3" size="large" style="width:120px" v-model="name_3">
+              <i-option v-for="item in commodityThreeList" :key='item.typeid' :value="item.name" :label="item.name">{{ item.name }}</i-option>
+            </i-select>
+          </FormItem>
+          <FormItem label="品牌名称" prop="brand_name">
+            <i-input v-model="shopFormData.brand_name" size="large"></i-input>
+          </FormItem>
+          <FormItem label="拍卖物描述" prop="desc">
+            <i-input type="textarea" :autosize="{minRows: 4,maxRows: 5}" placeholder="请输入..." v-model="shopFormData.desc" size="large"></i-input>
+          </FormItem>
+        </Form>
+      </div>
+      <div class="add-submit">
+        <Button type="primary"  @click="editCommodity()">修改拍卖物</Button>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'EditShoppingCart',
+  data () {
+    return {
+      shopFormData: {
+        cname: '',
+        price: 0,
+        addprice: 0,
+        image: '',
+        images: '',
+        desc: '',
+        part_time: '',
+        type_id: '',
+        brand_name: ''
+      },
+      startTime: '',
+      commodityOneList: [],
+      commodityTwoList: [],
+      commodityThreeList: [],
+      name_1: '',
+      name_2: '',
+      name_3: '',
+      model1: '',
+      model2: '',
+      model3: '',
+      listQuery: {},
+      rule: {
+        cname: [
+          { required: true, message: '请输入拍卖物名', trigger: 'blur' }
+        ],
+        price: [
+          { required: true, message: '请输入起始价格', trigger: 'blur' },
+          { type: 'number',
+            message: '请输入两位小数点数字格式',
+            trigger: 'blur',
+            transform (value) {
+              return Number(value);
+            }}
+        ],
+        addprice: [
+          { required: true, message: '请输入一次增加的价格', trigger: 'blur' },
+          { type: 'number',
+            message: '请输入两位小数点数字格式',
+            trigger: 'blur',
+            transform (value) {
+              return Number(value);
+            }}
+        ],
+        part_time: [
+          {required: true, message: '投放时间不能为空'},
+          {pattern: null, type: 'array', message: null}
+        ],
+        desc: [
+          { required: true, message: '请输入详细描述', trigger: 'blur' }
+        ],
+        brand_name: [
+          { required: true, message: '请输入品牌名', trigger: 'blur' }
+        ],
+        name_1: [
+          { required: true, message: '类型填写完整', trigger: 'blur' }
+        ],
+        name_2: [
+          { required: true, message: '类型填写完整', trigger: 'blur' }
+        ],
+        name_3: [
+          { required: true, message: '类型填写完整', trigger: 'blur' }
+        ]
+      },
+      defaultFileList: [
+        // {
+        //   name: '1.jpg',
+        //   percentage: 100,
+        //   status: 'finished',
+        //   uid: 1572693325062,
+        //   url: 'static/1.jpg'
+        // }
+      ],
+      imgName: '',
+      visible: false,
+      uploadList: []
+    };
+  },
+  methods: {
+    handleView (name) {
+      this.imgName = name;
+      this.visible = true;
+    },
+    handleRemove (file) {
+      const fileList = this.$refs.upload.fileList;
+      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
+      this.uploadList = this.$refs.upload.fileList;
+    },
+    handleSuccess (res, file) {
+      file.url = res.data.url;
+      file.name = res.data.name;
+      this.uploadList = this.$refs.upload.fileList;
+      alert(file.url);
+    },
+    handleFormatError (file) {
+      this.$Notice.warning({
+        title: 'The file format is incorrect',
+        desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
+      });
+    },
+    handleMaxSize (file) {
+      this.$Notice.warning({
+        title: 'Exceeding file size limit',
+        desc: 'File  ' + file.name + ' is too large, no more than 4M.'
+      });
+    },
+    handleBeforeUpload () {
+      const check = this.uploadList.length < 10;
+      if (!check) {
+        this.$Notice.warning({
+          title: 'Up to five pictures can be uploaded.'
+        });
+      }
+      return check;
+    },
+    editCommodity () {
+      var cid = this.$route.query.cid;
+      this.$axios({
+        method: 'post',
+        url: '/editCommodity',
+        data: this.shopFormData,
+        params: {
+          cid: cid
+        }
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          this.shopFormData = [];
+          this.$Message.success('修改拍卖物成功');
+        }
+      })
+        .catch(failResponse => {
+        });
+    },
+    getCommodityOneType () {
+      this.$axios.get('/oneType')
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            this.commodityOneList = successResponse.data.data;
+          }
+        })
+        .catch(failResponse => {
+        });
+    },
+    getOneCommodity () {
+      var cid = this.$route.query.cid;
+      this.$axios({
+        method: 'get',
+        url: '/getCommodity',
+        params: {
+          cid: cid
+        }
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          this.shopFormData = successResponse.data.data;
+          var typeName = this.shopFormData.type_id.split('_');
+          this.name_1 = typeName[0];
+          this.name_2 = typeName[1];
+          this.name_3 = typeName[2];
+          console.log(this.name_1, this.name_2, this.name_3);
+          var image = this.shopFormData.images.split('_');
+          console.log(image);
+        }
+      }).catch(failResponse => {
+      });
+    },
+    mounted () {
+      this.uploadList = this.$refs.upload.fileList;
+    }
+  },
+  created () {
+    this.getOneCommodity();
+    this.getCommodityOneType();
+  },
+  watch: {
+    name_1 () {
+      /* alert(typeof this.shopFormData.part_time);
+        alert(this.shopFormData.part_time); */
+      var name = this.name_1;
+      this.name_2 = '';
+      this.name_3 = '';
+      this.$axios.get('selectByParentid/' + name)
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            this.commodityTwoList = successResponse.data.data;
+          }
+        })
+        .catch(failResponse => {
+        });
+    },
+    name_2 () {
+      var name = this.name_2;
+      this.name_3 = '';
+      this.$axios.get('selectByParentid/' + name)
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            this.commodityThreeList = successResponse.data.data;
+          }
+        })
+        .catch(failResponse => {
+        });
+    },
+    name_3 () {
+      this.shopFormData.type_id = this.name_1 + '_' + this.name_2 + '_' + this.name_3;
+      /* alert(this.shopFormData.type_id); */
+    }
+  }
+};
+</script>
+<style scoped>
+  .add-container {
+    margin: 15px auto;
+    width: 60%;
+    min-width: 600px;
+  }
+  .add-title {
+    margin-bottom: 15px;
+    text-align: center;
+  }
+  .add-submit {
+    display: flex;
+    justify-content: center;
+  }
+  .demo-upload-list{
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    line-height: 60px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #fff;
+    position: relative;
+    box-shadow: 0 1px 1px rgba(0,0,0,.2);
+    margin-right: 4px;
+  }
+  .demo-upload-list img{
+    width: 100%;
+    height: 100%;
+  }
+  .demo-upload-list-cover{
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,.6);
+  }
+  .demo-upload-list:hover .demo-upload-list-cover{
+    display: block;
+  }
+  .demo-upload-list-cover i{
+    color: #fff;
+    font-size: 20px;
+    cursor: pointer;
+    margin: 0 2px;
+  }
+</style>

src/components/home/MemberUpgrade.vue

@@ -0,0 +1,191 @@
+<template>
+  <!--升级会员-->
+  <div>
+    <div style="margin: 0 auto; width: 60%"><h2>您当前的会员等级为：{{myMember.rank}}</h2></div>
+    <div class="upgrade">
+      <Form :model="formData" label-position="left">
+        <FormItem label="选择您要成为的等级" prop="rank">
+          <i-select :model.sync="model10" size="large" style="width:120px" v-model="upgradeRank">
+            <i-option v-for="item in rank" :key='item.index' :value="item" :label="item">{{ item }}</i-option>
+          </i-select>
+        </FormItem>
+        <p><span>您已支付过：</span> <span class="money"><Icon type="social-yen"></Icon> {{myMember.cautionmoney}}</span></p>
+        <p><span>提交订单应付总额：</span> <span class="money"><Icon type="social-yen"></Icon> {{payprice}}</span></p>
+        <div class="add-submit">
+          <Button type="primary"  @click="submitOrder()">确认升级</Button>
+        </div>
+      </Form>
+    </div>
+
+    <br><br>
+    <div class="member-role">
+      <div class="member-header">
+        <div style="margin: 0 auto; width: 70%"><h2>会员等级制度表</h2></div>
+      </div>
+      <ul class="bond_sm_ul" >
+        <li>
+          <span>会员等级</span>
+          <span v-for="item in member" :key="item.index">
+              {{item.rank}}
+            </span>
+        </li>
+        <li>
+          <span>保证金</span>
+          <span v-for="item in member" :key="item.index">
+              {{item.cautionmoney}}RMB
+            </span>
+        </li>
+        <li>
+          <span>可投标件数</span>
+          <span v-for="item in member" :key="item.index">
+              <span v-if="item.amount === -1">
+                无限制
+              </span>
+              <span v-else>
+                {{item.amount}}件
+              </span>
+            </span>
+        </li>
+        <li>
+          <span>单次金额限制</span>
+          <span v-for="item in member" :key="item.index">
+              <span v-if="item.pricepremiss === -1">
+                无限制
+              </span>
+              <span v-else>
+                {{item.pricepremiss}}RMB
+              </span>
+            </span>
+        </li>
+        <li>
+          <span>出价账号</span>
+          <span v-for="item in member" :key="item.index">
+              {{item.premiss}}
+            </span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MemberUpgrade',
+  data () {
+    return {
+      myMember: '',
+      newMemberid: 0,
+      formData: [],
+      member: [],
+      rank: [],
+      upgradeRank: [],
+      model: true,
+      payprice: 0,
+      model10: []
+    };
+  },
+  inject: ['reload'],
+  created () {
+    this.selectMemberRule();
+    // this.selectMyMember();
+  },
+  methods: {
+    selectMemberRule () { // 获取会员等级表
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      let memberid = (JSON.parse(loginInfo))['memberid'];
+      this.$axios({
+        url: 'selectMemberRule',
+        method: 'get'
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.member = successResponce.data.data;
+          this.member.forEach(item => {
+            this.rank.push(item.rank);
+            if (item.memberid === memberid) { // 获取当前用户的会员等级
+              this.myMember = item;
+            }
+          });
+        } else {
+          this.$message.error('无法获取等级信息');
+        }
+      });
+    },
+    submitOrder () {
+      this.$router.push({
+        path: '/memberOrder',
+        query: {
+          cname: '升级会员至' + this.upgradeRank,
+          nature: '升级会员',
+          price: this.payprice,
+          memberid: this.newMemberid
+        }
+      });
+    }
+
+  },
+  watch: {
+    upgradeRank () {
+      if (this.upgradeRank.substring(1, 2) <= this.myMember.rank.substring(1, 2)) {
+        alert('不能选择更低等级');
+        this.payprice = 0;
+        this.reload();
+      } else {
+        this.member.forEach(item => {
+          if (item.rank === this.upgradeRank) {
+            this.payprice = item.cautionmoney - this.myMember.cautionmoney;
+            this.newMemberid = item.memberid;
+            this.reload();
+          }
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+  .upgrade{
+    margin: 0 auto;
+    width: 60%;
+    padding: 15px;
+    margin-top: 15px;
+    padding-left: 60px;
+    border: 1px #ccc dotted;
+  }
+  .bond_sm_ul{
+    width: 70%;
+    height: auto;
+    margin: 0 auto;
+    margin-bottom: 10px;
+  }
+  ul, li {
+    list-style: none;
+  }
+  .bond_sm_ul li:first-child {
+    background-color: #5F21D9;
+    color: #FFF;
+    height: 40px;
+    line-height: 40px;
+  }
+  .bond_sm_ul li {
+    float: left;
+    width: 100%;
+    height: 40px;
+    background-color: #FAA8C2;
+    line-height: 40px;
+    text-align: center;
+    border-left: 1px solid #F5588A;
+  }
+  .bond_sm_ul li span {
+    float: left;
+    width: 155px;
+    border-bottom: 1px solid #F5588A;
+    border-right: 1px solid #F5588A;
+    height: 39px;
+  }
+  .money {
+    font-size: 26px;
+    color: #f90013;
+  }
+</style>

src/components/home/MyAddress.vue

@@ -0,0 +1,224 @@
+<template>
+  <div>
+    <div class="address-box" v-for="(item, index) in address" :key="index">
+      <div class="address-header">
+        <span>{{item.addressee}}</span>
+        <div class="address-action">
+          <span @click="edit(index)"><Icon type="edit"></Icon> 修改</span>
+          <span @click="del(index)"><Icon type="trash-a"></Icon> 删除</span>
+        </div>
+      </div>
+      <div class="address-content">
+        <p><span class="address-content-title"> 收 货 人 :</span> {{item.addressee}}</p>
+        <p><span class="address-content-title">收货地区:</span> {{item.province}} {{item.city}} {{item.part}}</p>
+        <p><span class="address-content-title">收货地址:</span> {{item.detail}}</p>
+        <p><span class="address-content-title">邮政编码:</span> {{item.postalcode}}</p>
+      </div>
+    </div>
+    <Modal v-model="modal" width="530">
+      <p slot="header">
+        <Icon type="edit"></Icon>
+        <span>修改地址</span>
+      </p>
+      <div>
+        <Form :model="formData" label-position="left" :label-width="100" :rules="ruleInline">
+          <FormItem label="收件人" prop="name">
+            <i-input v-model="formData.addressee" size="large"></i-input>
+          </FormItem>
+          <FormItem label="收件地区" prop="address">
+            <Distpicker :province="formData.province"
+                        :city="formData.city"
+                        :area="formData.part" @selected="sel"></Distpicker>
+          </FormItem>
+          <FormItem label="收件地址" prop="address">
+            <i-input v-model="formData.detail" size="large"></i-input>
+          </FormItem>
+          <FormItem label="手机号码" prop="phone">
+            <i-input v-model="formData.phone" size="large"></i-input>
+          </FormItem>
+          <FormItem label="邮政编码" prop="postalcode">
+            <i-input v-model="formData.postalcode" size="large"></i-input>
+          </FormItem>
+        </Form>
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="editAction">修改</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import store from '@/vuex/store';
+// import { mapState, mapActions } from 'vuex';
+import Distpicker from 'v-distpicker';
+export default {
+  name: 'MyAddress',
+  data () {
+    return {
+      modal: false,
+      address: [],
+      formData: {
+        addid: '',
+        addressee: '',
+        detail: '',
+        phone: '',
+        postalcode: '',
+        province: '广东省',
+        city: '广州市',
+        part: '白云区'
+      },
+      ruleInline: {
+        addressee: [
+          { required: true, message: '请输入姓名', trigger: 'blur' }
+        ],
+        detail: [
+          { required: true, message: '请输入地址', trigger: 'blur' }
+        ],
+        postalcode: [
+          { required: true, message: '请输入邮政编码', trigger: 'blur' }
+        ],
+        phone: [
+          { required: true, message: '手机号不能为空', trigger: 'blur' },
+          { type: 'string', pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '手机号格式出错', trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  created () {
+    this.getAddress();
+    // this.loadAddress();
+  },
+  // computed: {
+  //   ...mapState(['address'])
+  // },
+  methods: {
+    getProvince (value) {
+      console.log(value);
+      this.formData.province = value;
+    },
+    getCity (value) {
+      this.formData.city = value;
+    },
+    getPart (value) {
+      this.formData.part = value;
+    },
+    // ...mapActions(['loadAddress']),
+    edit (index) {
+      this.modal = true;
+      console.log(this.address[index]);
+      this.formData.addid = this.address[index].addid;
+      this.formData.province = this.address[index].province;
+      this.formData.city = this.address[index].city;
+      this.formData.part = this.address[index].part;
+      this.formData.detail = this.address[index].detail;
+      this.formData.addressee = this.address[index].addressee;
+      this.formData.phone = this.address[index].phone;
+      this.formData.postalcode = this.address[index].postalcode;
+    },
+    editAction () {
+      this.modal = false;
+      const data = this.formData;
+      this.$axios({
+        url: 'editAddress',
+        method: 'post',
+        data: data
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          this.$Message.success('修改成功');
+          this.$router.go(0);
+        } else if (successResponse.data.code === 400) {
+          this.$Message.error('修改失败，原因400');
+        }
+      })
+        .catch(failResponse => {
+        });
+    },
+    sel (data) {
+      this.formData.province = data.province.value;
+      this.formData.city = data.city.value;
+      this.formData.part = data.area.value;
+    },
+    del (index) {
+      this.$Modal.confirm({
+        title: '信息提醒',
+        content: '你确定删除这个收货地址',
+        onOk: () => {
+          const addid = this.address[index].addid;
+          this.$axios({
+            url: 'delAddress',
+            methods: 'get',
+            params: {
+              addid: addid
+            }
+          }).then(successResponse => {
+            if (successResponse.data.code === 200) {
+              this.$Message.success('删除成功');
+              this.$router.go(0);
+            }
+          })
+            .catch(failResponse => {
+            });
+        },
+        onCancel: () => {
+          this.$Message.info('取消删除');
+        }
+      });
+    },
+    getAddress: function () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      let userid = (JSON.parse(loginInfo))['uid'];
+      this.$axios({
+        url: 'getAddress',
+        methods: 'get',
+        params: {
+          userid: userid
+        }
+      })
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            // this.$Message.success('显示地址成功');
+            this.address = successResponse.data.data;
+          } else if (successResponse.data.code === 400) {
+            this.$Message.error('显示地址失败，原因400');
+          }
+        })
+        .catch(failResponse => {
+        });
+    }
+  },
+  components: {
+    Distpicker
+  },
+  store
+};
+</script>
+
+<style scoped>
+.address-box {
+  padding: 15px;
+  margin: 15px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 5px #ccc;
+}
+.address-header {
+  height: 35px;
+  display: flex;
+  justify-content: space-between;
+  color: #232323;
+  font-size: 18px;
+}
+.address-content {
+  font-size: 14px;
+}
+.address-content-title {
+  color: #999;
+}
+.address-action span{
+  margin-left: 15px;
+  font-size: 14px;
+  color: #2d8cf0;
+  cursor: pointer;
+}
+</style>

src/components/home/MyBidingCart.vue

@@ -0,0 +1,124 @@
+<template>
+<!--我的竞拍列表-->
+  <el-table
+    :data="bid"
+    style="width: 100%">
+    <!--竞拍订单号-->
+    <el-table-column
+      prop="bidid"
+      label="竞拍订单号"
+      sortable
+      width="160"
+      align='center'>
+    </el-table-column>
+    <!--图片-->
+    <el-table-column
+      label="图片"
+      width="100"
+      align='center'>
+      <template slot-scope="scope">
+        <img :src="scope.row.image" min-width="60" height="60" />
+      </template>
+    </el-table-column>
+    <!--商品名-->
+    <el-table-column
+      prop="cname"
+      label="商品名称"
+      sortable
+      align='center'>
+    </el-table-column>
+    <!--竞拍价格-->
+    <el-table-column
+      prop="bidprice"
+      label="竞拍价格"
+      width="80"
+      align='center'>
+    </el-table-column>
+    <!--当前价格-->
+    <el-table-column
+      prop="bidprice"
+      label="当前价格"
+      width="80"
+      align='center'>
+    </el-table-column>
+    <!--竞拍次数-->
+    <!--<el-table-column-->
+      <!--prop="bidcount"-->
+      <!--label="竞拍次数"-->
+      <!--width="80"-->
+      <!--align='center'>-->
+    <!--</el-table-column>-->
+    <!--竞拍时间-->
+    <el-table-column
+      prop="bidtime"
+      label="竞拍时间"
+      width="160"
+      align='center'>
+    </el-table-column>
+    <!--竞拍时间-->
+    <el-table-column
+      prop="endtime"
+      label="结束时间"
+      width="160"
+      align='center'>
+    </el-table-column>
+    <!--当前状态-->
+    <el-table-column
+      prop="nowstatus"
+      label="商品状态"
+      width="80"
+      align='center'>
+    </el-table-column>
+
+    <el-table-column label="操作" width="120" align='center'>
+      <template slot-scope="scope">
+        <el-button
+          size="mini"
+          @click="showCommodity(scope.$index, scope.row)">查看商品</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+export default {
+  name: 'MyBidingCart',
+  data () {
+    return {
+      bid: [],
+      uid: ''
+    };
+  },
+  created () {
+    this.getUid();
+    this.findMyBidding();
+  },
+  methods: {
+    getUid () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      this.uid = (JSON.parse(loginInfo))['uid'];
+    },
+    findMyBidding () {
+      this.$axios({
+        methods: 'get',
+        url: 'findMyBidding',
+        params: {
+          uid: this.uid
+        }
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.bid = successResponce.data.data;
+        }
+      });
+    },
+    showCommodity: function (index, row) {
+      // /GoodsDetail?cid='.concat(item.cid)
+      this.$router.push("/GoodsDetail?cid="+row.cid);
+    }
+  }
+};
+</script>
+
+<style scoped>
+</style>

src/components/home/MyMember.vue

@@ -0,0 +1,228 @@
+<template>
+  <!--我的会员等级-->
+  <div>
+    <br>
+    <Row class="base-info">
+      <Col span="3" offset="3">
+        <div class="user-img">
+          <img src="static/img/head.png" >
+        </div>
+      </Col>
+      <Col span="4">
+        <div class="user-info" style="float:left;">
+          <p>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：{{user.uname}}</p>
+          <p>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：{{user.age}}</p>
+          <p>手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机：{{user.phone}}</p>
+          <p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：{{user.mail}}</p>
+        </div>
+      </Col>
+      <Col span="4">
+        <p>会员等级：{{user.rank}} <router-link :to="{path:'/home/memberUpgrade'}">升级会员</router-link></p>
+        <p>信&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用：{{user.score}}</p>
+        <p>钱包余额：¥{{user.money}}&nbsp;&nbsp;<Button @click="openModal()" type="info">充值钱包</Button></p>
+      </Col>
+    </Row>
+    <br><br>
+    <div class="member-role">
+      <div class="member-header">
+        <div style="padding-left: 30px"><h2>会员等级制度表</h2></div>
+      </div>
+        <ul class="bond_sm_ul" >
+          <li>
+            <span>会员等级</span>
+            <span v-for="item in member" :key="item.index">
+              {{item.rank}}
+            </span>
+          </li>
+          <li>
+            <span>保证金</span>
+            <span v-for="item in member" :key="item.index">
+              {{item.cautionmoney}}RMB
+            </span>
+          </li>
+          <li>
+            <span>可投标件数</span>
+            <span v-for="item in member" :key="item.index">
+              <span v-if="item.amount === -1">
+                无限制
+              </span>
+              <span v-else>
+                {{item.amount}}件
+              </span>
+            </span>
+          </li>
+          <li>
+            <span>单次金额限制</span>
+            <span v-for="item in member" :key="item.index">
+              <span v-if="item.pricepremiss === -1">
+                无限制
+              </span>
+              <span v-else>
+                {{item.pricepremiss}}RMB
+              </span>
+            </span>
+          </li>
+          <li>
+            <span>出价账号</span>
+            <span v-for="item in member" :key="item.index">
+              {{item.premiss}}
+            </span>
+          </li>
+        </ul>
+    </div>
+    <!--充值钱包-->
+    <Modal v-model="modal" width="400">
+      <p slot="header">
+        <span>充值钱包</span>
+      </p>
+      <div>
+        您的钱包余额为<font color="red">￥{{user.money}}</font>
+        <br/><br>
+        <Form :model="addmoeny" label-position="left" :label-width="100">
+          <FormItem label="输入充值金额" prop="price">
+            <Input-number :max="10000" :min="0" :step="0.01" v-model="price"></Input-number>
+          </FormItem>
+        </Form>
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="addMoney()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel()" style="width: 30%">取消</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: 'MyMember',
+  data () {
+    return {
+      uid: '',
+      user: {},
+      member: [],
+      modal: false,
+      addmoeny: {},
+      price: 0
+    };
+  },
+  computed: {
+    ...mapState(['userInfo', 'shoppingCart'])
+  },
+  created () {
+    this.getUid();
+    this.getUserDetail();
+    this.selectMemberRule();
+  },
+  methods: {
+    getUid () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      this.uid = (JSON.parse(loginInfo))['uid'];
+    },
+    getUserDetail () {
+      this.$axios({
+        url: 'getUserDetail',
+        method: 'get',
+        params: {
+          uid: this.uid
+        }
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.user = successResponce.data.data;
+        }
+      });
+    },
+    selectMemberRule () { // 获取会员等级表
+      this.$axios({
+        url: 'selectMemberRule',
+        method: 'get'
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.member = successResponce.data.data;
+        } else {
+          this.$message.error('无法获取等级信息');
+        }
+      });
+    },
+    addMoney () {
+      this.$router.push({
+        path: '/AddMoneyOrder',
+        query: {
+          cname: this.user.uname + '充值钱包',
+          nature: '充值钱包',
+          price: this.price
+        }
+      });
+    },
+    openModal () {
+      this.modal = true;
+    },
+    closeModel () {
+      this.modal = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+  .base-info {
+    margin-top: 15px;
+    padding: 15px;
+    border: 1px #ccc dotted;
+  }
+  .base-info p {
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+  .user-icon span {
+    font-size: 96px;
+  }
+  .user-img {
+    margin-bottom: 15px;
+    width: 96px;
+    height: 96px;
+    border-radius: 48px;
+    float: left;
+    overflow: hidden;
+  }
+  .user-img img{
+    width: 100%;
+  }
+  .user-info {
+    float: left;
+  }
+  .bond_sm_ul{
+    float: left;
+    width: 76%;
+    height: auto;
+    margin: 0 3%;
+    margin-bottom: 10px;
+  }
+   ul, li {
+    list-style: none;
+  }
+  .bond_sm_ul li:first-child {
+    background-color: #5F21D9;
+    color: #FFF;
+    height: 40px;
+    line-height: 40px;
+  }
+  .bond_sm_ul li {
+    float: left;
+    width: 100%;
+    height: 40px;
+    background-color: #FAA8C2;
+    line-height: 40px;
+    text-align: center;
+    border-left: 1px solid #F5588A;
+  }
+  .bond_sm_ul li span {
+    float: left;
+    width: 155px;
+    border-bottom: 1px solid #F5588A;
+    border-right: 1px solid #F5588A;
+    height: 39px;
+  }
+
+</style>

src/components/home/MyOrder.vue

@@ -0,0 +1,337 @@
+<template>
+  <div>
+  <el-table
+    :data="order"
+    style="width: 100%">
+    <!--竞拍订单号-->
+    <el-table-column
+      prop="oid"
+      label="订单号"
+      sortable
+      width="190"
+      align='center'>
+    </el-table-column>
+    <!--图片-->
+    <el-table-column
+      label="图片"
+      width="100"
+      align='center'>
+      <template slot-scope="scope">
+        <img :src="scope.row.image" min-width="60" height="60" />
+      </template>
+    </el-table-column>
+    <!--商品名-->
+    <el-table-column
+      prop="cname"
+      label="商品名称"
+      sortable
+      align='center'>
+    </el-table-column>
+    <!--保证金额-->
+    <el-table-column
+      prop="deposit"
+      label="保证金额"
+      width="80"
+      align='center'>
+    </el-table-column>
+    <!--竞拍价格-->
+    <el-table-column
+      prop="price"
+      label="竞拍价格"
+      width="80"
+      align='center'>
+    </el-table-column>
+    <!--时间-->
+    <el-table-column
+      prop="time"
+      label="时间"
+      width="160"
+      align='center'>
+    </el-table-column>
+    <!--当前状态-->
+    <el-table-column
+      prop="statu"
+      label="商品状态"
+      width="80"
+      align='center'>
+    </el-table-column>
+    <el-table-column label="操作" width="300" align='center'>
+      <template slot-scope="scope">
+        <span v-if="scope.row.statu === '待付款'">
+            <el-button
+              size="mini"
+              @click="payOrder(scope.$index, scope.row)">付款</el-button>
+        </span>
+        <span v-if="scope.row.statu === '待发货'">
+            <el-button
+              size="mini"
+              @click="openModal2(scope.$index, scope.row)">退单</el-button>
+        </span>
+        <span v-if="scope.row.statu === '已发货'">
+           <el-button
+             size="mini"
+             @click="showTransport(scope.$index, scope.row)">查看物流</el-button>
+          <el-button
+            size="mini"
+            @click="beReceipt(scope.$index, scope.row)">确认收货</el-button>
+        </span>
+        <!--已收货-->
+        <span v-if="scope.row.statu === '已收货'">
+            <el-button
+              size="mini"
+              @click="openModal3(scope.$index, scope.row)">评论</el-button>
+        </span>
+        <!--交易成功-->
+        <span v-if="scope.row.statu === '交易成功'">
+            订单完成
+        </span>
+      </template>
+    </el-table-column>
+  </el-table>
+    <!--查看物流-->
+    <Modal v-model="modal" width="800">
+      <p slot="header">
+        <span>查看物流</span>
+      </p>
+      <el-table
+        :data="trans"
+        border
+        style="width: 100%">
+        <el-table-column prop="ftime" label="日期" width="180"></el-table-column>
+        <el-table-column prop="context" label="物流状态" width="300"></el-table-column>
+        <el-table-column prop="location" label="位置"></el-table-column>
+      </el-table>
+      <div slot="footer">
+        <Button type="Ghost" size="large" long @click="closeModel()" style="width: 30%">关闭</Button>
+      </div>
+    </Modal>
+    <!--&lt;!&ndash;退单提示&ndash;&gt;-->
+    <Modal v-model="modal2" width="400">
+      <p slot="header">
+        <span>确认取消订单</span>
+      </p>
+      <div>
+        提示：您若确认取消，您的信用值将会减少。
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="cannalOrder()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel2()" style="width: 30%">取消</Button>
+      </div>
+    </Modal>
+    <!--评论-->
+    <Modal v-model="modal3" width="500">
+      <p slot="header">
+        <span>评论订单</span>
+      </p>
+      <div>
+        <el-form :model="ccommit">
+          <el-form-item prop="cid" label=" 商 品 号:">
+          <el-input type="text" v-model="ccommit.cid" :disabled="true"></el-input>
+           </el-form-item>
+          <el-form-item prop="buyerid" label="购买用户:">
+            <el-input type="text" v-model="ccommit.buyerid" :disabled="true"></el-input>
+          </el-form-item>
+          <el-form-item prop="cquality" label="商品质量：">
+            <el-radio v-model="qualityradio" label="1">1星</el-radio>
+            <el-radio v-model="qualityradio" label="2">2星</el-radio>
+            <el-radio v-model="qualityradio" label="3">3星</el-radio>
+            <el-radio v-model="qualityradio" label="4">4星</el-radio>
+            <el-radio v-model="qualityradio" label="5">5星</el-radio>
+          </el-form-item>
+          <el-form-item prop="cspeed" label="快递速度：">
+            <el-radio v-model="speedradio" label="1">1星</el-radio>
+            <el-radio v-model="speedradio" label="2">2星</el-radio>
+            <el-radio v-model="speedradio" label="3">3星</el-radio>
+            <el-radio v-model="speedradio" label="4">4星</el-radio>
+            <el-radio v-model="speedradio" label="5">5星</el-radio>
+          </el-form-item>
+          <el-form-item prop="cattitude" label="卖家态度：">
+            <el-radio v-model="attituderadio" label="1">1星</el-radio>
+            <el-radio v-model="attituderadio" label="2">2星</el-radio>
+            <el-radio v-model="attituderadio" label="3">3星</el-radio>
+            <el-radio v-model="attituderadio" label="4">4星</el-radio>
+            <el-radio v-model="attituderadio" label="5">5星</el-radio>
+          </el-form-item>
+          <el-form-item prop="comment" label="评论：">
+            <el-input size="textarea" v-model="ccommit.comment"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="commit()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel3()" style="width: 30%">取消</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MyOrder',
+  data () {
+    return {
+      order: [],
+      uid: '',
+      payprice: '',
+      modal: false,
+      modal2: false,
+      modal3: false,
+      trans: [],
+      ccommit: {
+        cid: '',
+        buyerid: '',
+        cquality: '',
+        cspeed: '',
+        cattitude: '',
+        comment: ''
+      },
+      qualityradio: '0',
+      speedradio: '0',
+      attituderadio: '0'
+    };
+  },
+  created () {
+    this.getUid();
+    this.getMyOrder();
+  },
+  methods: {
+    getUid () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      this.uid = (JSON.parse(loginInfo))['uid'];
+    },
+    getMyOrder () {
+      this.$axios({
+        methods: 'get',
+        url: 'getMyOrder',
+        params: {
+          uid: this.uid
+        }
+      }).then(successResponce => {
+        if (successResponce.data.code === 200) {
+          this.order = successResponce.data.data;
+        }
+      });
+    },
+    openModal() {
+      this.modal = true;
+    },
+    closeModel(){
+      this.modal = false;
+    },
+    openModal2(index, row) {
+      this.modal2 = true;
+    },
+    closeModel2(){
+      this.modal2 = false;
+    },
+    openModal3(index, row) {
+      this.ccommit.buyerid = this.uid;
+      this.ccommit.cid = row.cid;
+      this.modal3 = true;
+    },
+    closeModel3(){
+      this.modal3 = false;
+    },
+    payOrder (index, row) {
+      if (row.statu === '已支付') {
+        alert('您已支付订单');
+        return;
+      } else if (row.statu === '支付过期') {
+        alert('您的订单支付已过期，信用已扣除');
+        return;
+      } else if (row.statu === '异常') {
+        alert('订单异常，请稍后再试');
+        return;
+      }
+      // alert(index + '   ' + row.price + '   ' + row.deposit + row.oid);
+      this.payprice = row.price - row.deposit;
+
+      this.$router.push({
+        path: '/Order',
+        query: {
+          oid: row.oid,
+          cid: row.cid,
+          image: row.image,
+          cname: row.cname,
+          nature: '订单支付',
+          price: this.payprice
+        }
+      });
+    },
+    cannalOrder(index, row) {
+      this.$axios({
+        method: 'get',
+        url: 'buyerCannalOrder',
+        params: {
+          cid: row.cid,
+          uid: this.uid
+        }
+      }).then(successResponce => {
+        if(successResponce.data.code === 200) {
+          this.$message.info("退单成功，您的信用值降低，当前信用值为" + successResponce.data.data+ "您的定金不允退回");
+        }
+      });
+    },
+    //查看物流
+    showTransport(index, row){
+      this.$axios({
+        method: 'get',
+        url: 'showTransport',
+        params: {
+          cid: row.cid
+        }
+      }).then(successResponce =>{
+        if(successResponce.data.code === 200) {
+          this.trans = JSON.parse(successResponce.data.data);
+        }
+      });
+      this.openModal();
+    },
+    //确认收货
+    beReceipt(index, row) {
+      this.$axios({
+        method: 'get',
+        url: 'beReceipt',
+        params: {
+          cid: row.cid
+        }
+      }).then(successResponce => {
+        if(successResponce.data.code === 200) {
+          this.$message.success("收货成功");
+          this.getMyOrder();
+        }
+      });
+    },
+    //评论
+    commit(index, row){
+
+      this.ccommit.cattitude = this.attituderadio;
+      this.ccommit.cquality = this.qualityradio;
+      this.ccommit.cspeed = this.speedradio;
+      console.log(this.ccommit);
+      this.$axios({
+        method: 'post',
+        url: 'commit',
+        data: this.ccommit
+      }).then(successResponce => {
+        if(successResponce.data.code === 200) {
+          this.$message.info("评论成功");
+          this.getMyOrder();
+
+        }
+      });
+      this.closeModel3();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.page-size {
+  margin: 15px 0px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+</style>

src/components/home/MyShoppingCart.vue

@@ -0,0 +1,327 @@
+<template>
+  <div>
+  <el-table :data="tableData" style="width: 100%">
+    <!--拍卖物标题-->
+    <el-table-column prop="cname" label="拍卖物标题" sortable width="250" align='center'></el-table-column>
+    <!--图片-->
+    <el-table-column label="图片" width="80" align='center'>
+      <template slot-scope="scope">
+        <img :src="scope.row.image" min-width="60" height="60" />
+      </template>
+    </el-table-column>
+    <!--价格-->
+    <el-table-column prop="price" label="初始价格" width="78" align='center'>
+    </el-table-column>
+    <!--每次加价-->
+    <el-table-column prop="addprice" label="每次加价" width="78" align='center'>
+    </el-table-column>
+    <!--当前价格-->
+    <el-table-column prop="nowprice" label="当前价格" width="78" align='center'>
+    </el-table-column>
+    <el-table-column label="开始时间" width="110" align='center'>
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.beginTime }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column label="结束时间" width="110" align='center'>
+      <template slot-scope="scope">
+        <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
+      </template>
+    </el-table-column>
+    <!--类型-->
+    <el-table-column prop="typeId" label="类型" width="150" align='center'>
+    </el-table-column>
+    <!--当前状态-->
+    <el-table-column prop="statu" label="当前状态" width="80" align='center'>
+    </el-table-column>
+    <!--操作-->
+    <el-table-column label="操作" width="250" align='center'>
+      <template slot-scope="scope">
+        <!--0 1-->
+        <span v-if="scope.row.statu === '展示阶段' || scope.row.statu === '开拍'">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+            <el-button
+              size="mini"
+              @click="handleTakeOff(scope.$index, scope.row)">下架</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+        </span>
+        <!--2-->
+        <span v-if="scope.row.statu === '在拍'">
+            商品锁定，已有用户开拍
+        </span>
+        <!--3-->
+        <span v-if="scope.row.statu === '待付款'">
+            等待买家付款
+        </span>
+        <!--4-->
+        <span v-if="scope.row.statu === '待发货'">
+            <el-button
+              size="mini"
+              @click="openModel(scope.$index, scope.row)">发货</el-button>
+          <el-button
+            size="mini"
+            @click="openModel2(scope.$index, scope.row)">取消订单</el-button>
+        </span>
+        <!--5-->
+        <span v-if="scope.row.statu === '已发货'">
+            等待买家收货
+        </span>
+        <!--6-->
+        <span v-if="scope.row.statu === '已收货'">
+            买家已收货
+        </span>
+        <!-- 7-->
+        <span v-if="scope.row.statu === '交易成功'">
+            买家已评论
+        </span>
+        <!--8 10-->
+        <span v-if="scope.row.statu === '下架' || scope.row.statu === '流拍'">
+          <el-button
+            size="mini"
+            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+          <el-button
+            size="mini"
+            @click="handleTakeOn(scope.$index, scope.row)">重新上架</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+        </span>
+      </template>
+    </el-table-column>
+  </el-table>
+    <Modal v-model="modal" width="400">
+      <p slot="header">
+        <span>商品发货</span>
+      </p>
+      <div>
+        <el-form :model="transInfo" :inline="true">
+          <el-form-item prop="cid" label=" 商 品 号:">
+            <el-input type="text" v-model="transInfo.cid" :disabled="true"></el-input>
+          </el-form-item>
+          <el-form-item prop="uid" label="购买用户">
+            <el-input type="text" v-model="transInfo.uid" :disabled="true"></el-input>
+          </el-form-item>
+          <el-form-item prop="logisticstype" label="快递类型">
+            <el-input size="text" v-model="transInfo.logisticstype"></el-input>
+          </el-form-item>
+          <el-form-item prop="logisticsid" label="物  流  号:">
+            <el-input size="text" v-model="transInfo.logisticsid"></el-input>
+          </el-form-item>
+          <el-form-item prop="info" label=" 备      注:">
+            <el-input size="text" v-model="transInfo.info"></el-input>
+          </el-form-item>
+            <div>
+              地址：{{transInfo.addDetail}}
+            </div>
+        </el-form>
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="transport()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel()" style="width: 30%">取消</Button>
+      </div>
+    </Modal>
+    <Modal v-model="modal2" width="400">
+      <p slot="header">
+        <span>确认取消订单</span>
+      </p>
+      <div>
+        提示：您若确认取消，您的信用值将会减少。
+      </div>
+      <div slot="footer">
+        <Button type="primary" size="large" long @click="cannalOrder()" style="width: 30%">确定</Button>
+        <Button type="Ghost" size="large" long @click="closeModel2()" style="width: 30%">取消</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tableData: [{
+        image: '',
+        cname: '',
+        price: '',
+        addprice: '',
+        bidprice: '',
+        beginTime: '',
+        endTime: '',
+        typeId: '',
+        statu: '',
+        brandName: '',
+      }],
+      modal: false,
+      modal2: false,
+      transInfo:{
+        cid: '',
+        logisticstype: '',
+        logisticsid: '',
+        info: '',
+        uid: '',
+        addid: '',
+        addDetail: ''
+      },
+      uid: ''
+    };
+  },
+  methods: {
+    getUid () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      this.uid = (JSON.parse(loginInfo))['uid'];
+    },
+    closeModel() {
+      this.modal = false;
+    },
+    closeModel2() {
+      this.modal2 = false;
+    },
+    openModel(index, row) {
+      this.transInfo.cid = row.cid;
+      // this.transInfo.logisticstype = row.oid; //加载物流公司
+      this.transInfo.uid = this.uid;
+      // this.transInfo.addid = ; //加载地址
+      this.$axios({
+        methods: 'get',
+        url: '/selectOrderAddress',
+        params: {
+          cid: row.cid,
+          uid: this.uid
+        }
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          var addData = successResponse.data.data;
+          this.transInfo.oid = addData.oid;
+          this.transInfo.addid = addData.addressid;
+          this.transInfo.addDetail = addData.addressee + ' ' + addData.phone + ' ' + addData.province
+            + ' ' + addData.city + ' ' + addData.part + ' ' + addData.detail;
+        }
+      });
+      this.modal=true;
+    },
+    openModel2(index, row) {
+      this.modal2 = true;
+    },
+    //编辑
+    handleEdit (index, row) {
+      console.log(index, row);
+      console.log(row.cid);
+      this.$router.push({
+        path: 'editShoppingCart',
+        query: {
+          cid: row.cid
+        }
+      });
+    },
+    //下架
+    handleTakeOff(index, row) {
+      this.$axios({
+          method: 'get',
+          url: '/takeOffCommodity',
+          params: {
+            cid: row.cid
+          }
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          this.$message.info('下架成功');
+          this.$router.go(0);
+        }
+      });
+    },
+    //删除
+    handleDelete (index, row) {
+      console.log(index, row);
+      this.$axios({
+        method: 'get',
+        url: '/delCommodity',
+        params: {
+          cid: row.cid
+        }
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          this.$message.info('删除成功');
+          this.$router.go(0);
+        }
+      });
+    },
+    //重新上架
+    handleTakeOn(index, row) {
+      this.$axios({
+        method: 'get',
+        url: '/takeOnCommodity',
+        params: {
+          cid: row.cid
+        }
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          this.$message.info('上架成功');
+          this.$router.go(0);
+        }
+      });
+    },
+    //发货
+    transport() {
+      this.$axios({
+        methods: 'get',
+        url: '/transportCommodity',
+        params:{
+          logisticsid: this.transInfo.logisticsid,
+          logisticstype: this.transInfo.logisticstype,
+          cid: this.transInfo.cid,
+          oid: this.transInfo.oid,
+          addid: this.transInfo.addid,
+          info: this.transInfo.info
+        }
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          this.$message.info('发货成功');
+          this.$router.go(0);
+        }
+      });
+    },
+    //商家取消订单，信用减少
+    cannalOrder(index, row) {
+      this.$axios({
+        method: 'get',
+        url: '/sellerCannalOrder',
+        params: {
+          cid: row.cid,
+          uid: this.uid
+        }
+      }).then(successResponse => {
+        if(successResponse.data.code === 200) {
+          this.$message.info('取消订单成功，您已减少5的信用额度，当前信用为'+successResponse.data.data);
+          this.$router.go(0);
+        }
+      })
+    },
+    //获取当前用户的商品
+    getUserCommodity () {
+      this.$axios({
+        method: 'get',
+        url: '/getUserCommodity',
+        params: {
+          uid: this.uid
+        }
+      }).then(successResponse => {
+        if (successResponse.data.code === 200) {
+          this.tableData = successResponse.data.data;
+          console.log(this.tableData[0].image);
+        }
+      });
+    }
+  },
+
+  created () {
+    this.getUid();
+    this.getUserCommodity();
+  }
+};
+</script>

src/components/home/UploadShopCart.vue

@@ -0,0 +1,355 @@
+<template>
+<!--发布拍卖物-->
+  <div>
+    <div class="add-container">
+      <div class="add-title">
+        <h1>发布拍卖物</h1>
+      </div>
+      <div class="add-box">
+        <Form :model="shopFormData" label-position="left" :label-width="100" :rules="rule">
+          <FormItem label="拍卖物名称" prop="cname">
+            <i-input v-model="shopFormData.cname" size="large"></i-input>
+          </FormItem>
+          <FormItem label="拍卖物图片集" prop="images">
+            <div class="demo-upload-list" v-for="item in uploadList" :key='item.index'>
+              <template v-if="item.status === 'finished'">
+                <img :src="item.url">
+                <div class="demo-upload-list-cover">
+                  <Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
+                  <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
+                </div>
+              </template>
+              <template v-else>
+                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
+              </template>
+            </div>
+            <!--action表示上传的路径-->
+            <Upload
+              ref="upload"
+              :show-upload-list="false"
+              :default-file-list="defaultFileList"
+              :on-success="handleSuccess"
+              :format="['jpg','jpeg','png']"
+              :max-size="4096"
+              :on-format-error="handleFormatError"
+              :on-exceeded-size="handleMaxSize"
+              :before-upload="handleBeforeUpload"
+              multiple
+              type="drag"
+              action="http://localhost:8443/api/uploadImage"
+              style="display: inline-block;width:58px;">
+              <div style="width:58px; height:58px; line-height:58px;">
+                <Icon type="camera" size="20"></Icon>
+              </div>
+            </Upload>
+            <Modal title="View Image" v-model="visible">
+              <!--路径-->
+              <img :src="imgName" v-if="visible" style="width: 100%">
+            </Modal>
+          </FormItem>
+          <Row :gutter="16">
+            <i-col span="12">
+              <FormItem label="拍卖起始价格" prop="price">
+                <Input-number :max="10000" :min="0" :step="0.01" v-model="shopFormData.price"></Input-number>
+              </FormItem>
+            </i-col>
+            <i-col span="12">
+              <FormItem label="每次加价" prop="addprice">
+                <Input-number :max="200" :min="0" :step="0.01" v-model="shopFormData.addprice"></Input-number>
+              </FormItem>
+            </i-col>
+          </Row>
+          <FormItem label="竞拍时间区间" prop="part_time">
+            <Date-picker type="datetimerange"
+                         format="yyyy-MM-dd HH:mm"
+                         value-format="yyyy-MM-dd HH:mm"
+                         start-placeholder="开始时间"
+                         end-placeholder="结束时间"
+                         style="width: 300px" size="large"
+                         v-model="shopFormData.part_time"
+                         :click="datetimerange"
+            ></Date-picker>
+          </FormItem>
+          <FormItem label="拍卖物类型" prop="type_id">
+            <i-select :model.sync="model1" size="large" style="width:120px" v-model="name_1">
+              <i-option v-for="item in commodityOneList" :key='item.typeid' :value="item.name" :label="item.name">{{ item.name }}</i-option>
+            </i-select>
+            <i-select :model.sync="model2" size="large" style="width:120px" v-model="name_2">
+              <i-option v-for="item in commodityTwoList" :key='item.typeid' :value="item.name" :label="item.name">{{ item.name }}</i-option>
+            </i-select>
+            <i-select :model.sync="model3" size="large" style="width:120px" v-model="name_3">
+              <i-option v-for="item in commodityThreeList" :key='item.typeid' :value="item.name" :label="item.name">{{ item.name }}</i-option>
+            </i-select>
+          </FormItem>
+          <FormItem label="品牌名称" prop="brand_name">
+            <i-input v-model="shopFormData.brand_name" size="large"></i-input>
+          </FormItem>
+          <FormItem label="拍卖物描述" prop="desc">
+            <i-input type="textarea" :autosize="{minRows: 4,maxRows: 5}" placeholder="请输入..." v-model="shopFormData.desc" size="large"></i-input>
+          </FormItem>
+        </Form>
+      </div>
+      <div class="add-submit">
+        <Button type="primary"  @click="addCommodity()">发布拍卖物</Button>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'UploadShopCart',
+  data () {
+    return {
+      shopFormData: {
+        cname: '',
+        price: 0,
+        addprice: 0,
+        image: '',
+        images: '',
+        desc: '',
+        part_time: '',
+        type_id: '',
+        brand_name: ''
+      },
+      startTime: '',
+      commodityOneList: [],
+      commodityTwoList: [],
+      commodityThreeList: [],
+      name_1: '',
+      name_2: '',
+      name_3: '',
+      model1: '',
+      model2: '',
+      model3: '',
+      listQuery: {},
+      rule: {
+        cname: [
+          { required: true, message: '请输入拍卖物名', trigger: 'blur' }
+        ],
+        price: [
+          { required: true, message: '请输入起始价格', trigger: 'blur' },
+          { type: 'number',
+            message: '请输入两位小数点数字格式',
+            trigger: 'blur',
+            transform (value) {
+              return Number(value);
+            }}
+        ],
+        addprice: [
+          { required: true, message: '请输入一次增加的价格', trigger: 'blur' },
+          { type: 'number',
+            message: '请输入两位小数点数字格式',
+            trigger: 'blur',
+            transform (value) {
+              return Number(value);
+            }}
+        ],
+        part_time: [
+          {required: true, message: '投放时间不能为空'},
+          {pattern: null, type: 'array', message: null}
+        ],
+        desc: [
+          { required: true, message: '请输入详细描述', trigger: 'blur' }
+        ],
+        brand_name: [
+          { required: true, message: '请输入品牌名', trigger: 'blur' }
+        ],
+        name_1: [
+          { required: true, message: '类型填写完整', trigger: 'blur' }
+        ],
+        name_2: [
+          { required: true, message: '类型填写完整', trigger: 'blur' }
+        ],
+        name_3: [
+          { required: true, message: '类型填写完整', trigger: 'blur' }
+        ]
+      },
+      defaultFileList: [
+        // {
+        //   name: '1.jpg',
+        //   percentage: 100,
+        //   status: 'finished',
+        //   uid: 1572693325062,
+        //   url: 'static/1.jpg'
+        // }
+      ],
+      imgName: '',
+      visible: false,
+      uploadList: []
+    };
+  },
+  methods: {
+    handleView (name) {
+      this.imgName = name;
+      this.visible = true;
+    },
+    handleRemove (file) {
+      const fileList = this.$refs.upload.fileList;
+      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
+      this.uploadList = this.$refs.upload.fileList;
+    },
+    handleSuccess (res, file) {
+      file.url = res.data.url;
+      file.name = res.data.name;
+      this.uploadList = this.$refs.upload.fileList;
+      // alert(file.url);
+    },
+    handleFormatError (file) {
+      this.$Notice.warning({
+        title: 'The file format is incorrect',
+        desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
+      });
+    },
+    handleMaxSize (file) {
+      this.$Notice.warning({
+        title: 'Exceeding file size limit',
+        desc: 'File  ' + file.name + ' is too large, no more than 4M.'
+      });
+    },
+    handleBeforeUpload () {
+      const check = this.uploadList.length < 10;
+      if (!check) {
+        this.$Notice.warning({
+          title: 'Up to five pictures can be uploaded.'
+        });
+      }
+      return check;
+    },
+    addCommodity () {
+      let localStorage = window.localStorage;
+      let loginInfo = localStorage.getItem('loginInfo');
+      let uid = (JSON.parse(loginInfo))['uid'];
+      this.$axios({
+        method: 'post',
+        url: '/addCommodity',
+        data: this.shopFormData,
+        params: {
+          uid: uid
+        }
+      })
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            this.shopFormData = [];
+            this.$Message.success('添加商品成功，等待审核');
+          }
+        })
+        .catch(failResponse => {
+        });
+    },
+    getCommodityOneType () {
+      this.$axios.get('/oneType')
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            this.commodityOneList = successResponse.data.data;
+          }
+        })
+        .catch(failResponse => {
+        });
+    },
+    mounted () {
+      this.uploadList = this.$refs.upload.fileList;
+    }
+  },
+  created () {
+    this.getCommodityOneType();
+  },
+  watch: {
+    name_1 () {
+      /* alert(typeof this.shopFormData.part_time);
+      alert(this.shopFormData.part_time); */
+      var name = this.name_1;
+      this.name_2 = '';
+      this.name_3 = '';
+      this.$axios.get('selectByParentid/' + name)
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            this.commodityTwoList = successResponse.data.data;
+          }
+        })
+        .catch(failResponse => {
+        });
+    },
+    name_2 () {
+      var name = this.name_2;
+      this.name_3 = '';
+      this.$axios.get('selectByParentid/' + name)
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            this.commodityThreeList = successResponse.data.data;
+          }
+        })
+        .catch(failResponse => {
+        });
+    },
+    name_3 () {
+      this.shopFormData.type_id = this.name_1 + '_' + this.name_2 + '_' + this.name_3;
+      /* alert(this.shopFormData.type_id); */
+    },
+    uploadList () {
+      // 添加
+      this.shopFormData.image = this.uploadList[0].name;
+      this.shopFormData.images = '';
+      for (var i = 0; i < this.uploadList.length; i++) {
+        if (i === 0) {
+          this.shopFormData.images = this.uploadList[i].name;
+        } else {
+          this.shopFormData.images = this.shopFormData.images + '_' + this.uploadList[i].name;
+        }
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+  .add-container {
+    margin: 15px auto;
+    width: 60%;
+    min-width: 600px;
+  }
+  .add-title {
+    margin-bottom: 15px;
+    text-align: center;
+  }
+  .add-submit {
+    display: flex;
+    justify-content: center;
+  }
+  .demo-upload-list{
+    display: inline-block;
+    width: 60px;
+    height: 60px;
+    text-align: center;
+    line-height: 60px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #fff;
+    position: relative;
+    box-shadow: 0 1px 1px rgba(0,0,0,.2);
+    margin-right: 4px;
+  }
+  .demo-upload-list img{
+    width: 100%;
+    height: 100%;
+  }
+  .demo-upload-list-cover{
+    display: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0,0,0,.6);
+  }
+  .demo-upload-list:hover .demo-upload-list-cover{
+    display: block;
+  }
+  .demo-upload-list-cover i{
+    color: #fff;
+    font-size: 20px;
+    cursor: pointer;
+    margin: 0 2px;
+  }
+</style>

src/components/nav/GoodsClassNav.vue

@@ -0,0 +1,77 @@
+/*
+ *
+ * @Date: 2018-06-11 11:27:10
+ * @Last Modified by: Gavin
+ * @Last Modified time: 2018-06-11 12:23:40
+ * @Describe: 搜索商品导航标签
+ */
+<template>
+  <div class="item-class-show">
+    <!--<Row class="item-class-group" v-for="(items, index) in tagsInfo" :key="index">-->
+      <!--<i-col class="item-class-name" span="3">{{ items.tagName }} : </i-col>-->
+      <!--<i-col class="item-class-select" span="21">-->
+        <!--<span v-for="(item, subIndex) in items.tags" :key="subIndex">{{ item }}</span>-->
+      <!--</i-col>-->
+    <!--</Row>-->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GoodsClassNav',
+  data () {
+    return {
+      tagsInfo: [
+        {
+          tagName: '品牌',
+          tags: [ '华为(HUAWEI)', '三星(SAMSUNG)', 'MATE', '摩斯维(msvii)', 'OPPO', '莫凡(Mofi)', '耐尔金(NILLKIN)', '洛克(ROCK)', '亿色(ESR)', 'Apple', '优加' ]
+        },
+        {
+          tagName: '手机配件',
+          tags: [ '手机保护套', '苹果周边', '手机贴膜', '移动电源', '创意配件', '手机耳机', '手机支架' ]
+        },
+        {
+          tagName: '款式',
+          tags: [ '软壳', '硬壳', '翻盖式', '边框', '运动臂包', '钱包式', '定制', '防水袋', '布袋', '其他' ]
+        },
+        {
+          tagName: '材质',
+          tags: [ '塑料/PC', '硅胶', '金属', '电镀', '真皮', '树脂', '木质', '镶钻', '液态硅胶', 'TPU' ]
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.item-class-show {
+  margin: 15px auto;
+  width: 100%;
+}
+.item-class-group {
+  margin-top: 1px;
+  height: 45px;
+  border-bottom: 1px solid #ccc;
+}
+.item-class-group:first-child {
+  border-top: 1px solid #ccc;
+}
+.item-class-name {
+  padding-left: 15px;
+  line-height: 44px;
+  color: #666;
+  font-weight: bold;
+  background-color: #f3f3f3;
+}
+.item-class-name:first-child {
+  line-height: 43px;
+}
+.item-class-select span {
+  margin-left: 15px;
+  width: 160px;
+  color: #005aa0;
+  line-height: 45px;
+  cursor: pointer;
+}
+</style>

src/components/nav/GoodsDetailNav.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="shop-nav-box">
+    <div class="shop-nav-container">
+      <ul>
+        <li v-for="(item, index) in shopNav" :key="index">
+          <router-link to="/merchant">{{item}}</router-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GoodsDetailNav',
+  data () {
+    return {
+      shopNav: [ '首页', 'iPhoneX', 'iPhone8', 'OnePlus', '坚果Pro', 'Note8' ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.shop-nav-box {
+  height: 38px;
+  background-color: #333333 !important;
+}
+
+.shop-nav-container {
+  width: 80%;
+  height: 100%;
+  margin: 0px auto;
+}
+
+.shop-nav-container ul {
+  padding: 0px;
+  margin: 0px;
+  list-style: none;
+}
+
+.shop-nav-container li {
+  float: left;
+  margin-right: 30px;
+  line-height: 35px;
+}
+
+.shop-nav-container a {
+  text-decoration: none;
+  color: rgb(233, 224, 224);
+  font-weight: bold;
+}
+</style>

src/components/nav/GoodsListNav.vue

@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div class="search-nav">
+      <div class="search-nav-container">
+        <ul>
+          <li>全部商品分类</li>
+          <li v-for="(item, index) in nav" :key="index">
+            <router-link :to="'/GoodsList?ctype='.concat(item.name)" @click.native="flushCom">
+              {{item.name}}</router-link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GoodsListNav',
+  data () {
+    return {
+      nav: []
+    };
+  },
+  created () {
+    this.getOneType();
+  },
+  methods: {
+    getOneType () {
+      this.$axios.get('/oneType')
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            this.nav = successResponse.data.data;
+          }
+        })
+        .catch(failResponse => {
+        });
+    },
+    flushCom () {
+      this.$router.go(0);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.search-nav{
+  width: 100%;
+  height: 64px;
+  border-bottom: 2px solid #B1191A;
+}
+.search-nav-container{
+  width: 80%;
+  min-width: 1000px;
+  height: 64px;
+  margin: 0px auto;
+}
+.search-nav-container-90{
+  width: 90%;
+}
+.search-nav-container ul{
+  margin: 0px;
+  padding-left: 0px;
+  list-style: none;
+}
+.search-nav-container li{
+  cursor: pointer;
+  margin-left: 30px;
+  line-height: 64px;
+  color: #C81623;
+  font-size: 18px;
+  /*font-weight: bold;*/
+  float: left;
+}
+.search-nav-container a{
+  color: #C81623;
+  text-decoration: none;
+}
+.search-nav-container li:first-child{
+  padding: 0px 38px;
+  background:#B1191A;
+  margin: 0px;
+  color: #fff;
+}
+</style>

src/components/nav/HomeNav.vue

@@ -0,0 +1,291 @@
+<template>
+  <div>
+    <div class="nav-item">
+      <ul>
+        <li v-for="(item,index) in nav" :key="index">
+          <router-link :to="'/GoodsList?ctype='.concat(item.name)">{{item.name}}</router-link>
+        </li>
+      </ul>
+    </div>
+    <div class="nav-body">
+      <!-- 侧边&导航 -->
+      <div class="nav-side" ref="navSide">
+        <ul>
+          <li v-for="(item,index) in nav" :key="index" @mouseenter="changeCurrent(item.typeid);showDetail(1)" @mouseleave="hideDetail(2);">
+            <router-link :to="'/GoodsList?ctype='.concat(item.name)">
+              <span class="nav-side-item">{{item.name}}<em class="rt"> ></em></span>
+            </router-link>
+          </li>
+        </ul>
+      </div>
+      <div class="nav-content">
+        <!-- 幻灯片 -->
+        <div>
+          <Carousel autoplay loop>
+              <CarouselItem  v-for="(item, index) in marketing.CarouselItems" :key="index">
+                <router-link to="/goodsList">
+                  <img :src="item">
+                </router-link>
+              </CarouselItem>
+          </Carousel>
+        </div>
+        <div class="nav-show">
+          <div class="nav-show-img" v-for="(item, index) in marketing.activity" :key="index">
+            <router-link to="/goodsList">
+              <img :src="item">
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
+    <transition name="fade">
+      <div class="detail-item-panel panel-1" :duration="{ enter: 100, leave: 100 }" v-show="panel1" @mouseenter="showDetail(2)" ref="itemPanel1" @mouseleave="hideDetail(1)">
+        <ul>
+          <li v-for="(items, index) in commodityType.twoNav" :key="index" class="detail-item-row">
+            <router-link :to="'/GoodsList?ctype='.concat(items.name_2)">
+            <span class="detail-item-title">{{items.name_2}}
+              <span class="glyphicon glyphicon-menu-right"></span>
+            </span>
+            </router-link>
+            <router-link :to="'/GoodsList?ctype='.concat(item)" v-for="(item, subIndex) in items.name_3" :key="subIndex">
+              <span class="detail-item">{{item}}</span>
+            </router-link>
+          </li>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+/* eslint-disable indent */
+
+  import store from '@/vuex/store';
+import { mapState } from 'vuex';
+export default {
+  name: 'HomeNav',
+  data () {
+    return {
+      panel1: false,
+      panel2: false,
+      step: 1,
+      currentTypeid: '',
+      // 一级标题
+      nav: [
+        // '中古名表',
+      ],
+      // 所有标题
+      commodityType: [
+        // {
+        //   name_1: {},
+        //   twoNav: [
+        //     {
+        //       name_2: "",
+        //       name_3: ["", ""]
+        //     }
+        //   ]
+        // }
+      ]
+    };
+  },
+  computed: {
+    ...mapState(['marketing'])
+  },
+  methods: {
+    changeCurrent (currentTypeid) {
+      this.currentTypeid = currentTypeid;
+    },
+    showMore (typeid) {
+      this.getOneAllType(typeid);
+    },
+    showDetail (index) {
+      this.showMore(this.currentTypeid);
+      index === 1 ? (this.panel1 = true) : (this.panel2 = true);
+    },
+    hideDetail (index) {
+      index === 1 ? (this.panel1 = false) : (this.panel2 = false);
+    },
+    getOneType () {
+      this.$axios.get('/oneType')
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            console.log('成功');
+            this.nav = successResponse.data.data;
+          }
+        })
+        .catch(failResponse => {
+        });
+    },
+    getOneAllType (index) {
+      this.$axios.get('ctype/' + index)
+        .then(successResponse => {
+          if (successResponse.data.code === 200) {
+            console.log('成功');
+            this.commodityType = successResponse.data.data;
+          }
+        })
+        .catch(failResponse => {
+        });
+    }
+  },
+  created () {
+    this.getOneType();
+  },
+  mounted () {
+    this.$refs.itemPanel1.style.left = this.$refs.navSide.offsetLeft + this.$refs.navSide.offsetWidth + 'px';
+    this.$refs.itemPanel2.style.left = this.$refs.navSide.offsetLeft + this.$refs.navSide.offsetWidth + 'px';
+    this.$refs.itemPanel1.style.top = this.$refs.navSide.offsetTop + 'px';
+    this.$refs.itemPanel2.style.top = this.$refs.navSide.offsetTop + 'px';
+  },
+  updated () {
+    this.$refs.itemPanel1.style.left = this.$refs.navSide.offsetLeft + this.$refs.navSide.offsetWidth + 'px';
+    this.$refs.itemPanel2.style.left = this.$refs.navSide.offsetLeft + this.$refs.navSide.offsetWidth + 'px';
+    this.$refs.itemPanel1.style.top = this.$refs.navSide.offsetTop + 'px';
+    this.$refs.itemPanel2.style.top = this.$refs.navSide.offsetTop + 'px';
+  },
+  store
+};
+</script>
+
+<style scoped>
+  .rt{
+    float: right;
+    padding-right: 20px;
+  }
+.nav-item {
+  width: 800px;
+  height: 36px;
+  margin: 0px auto;
+}
+.nav-item ul {
+  list-style: none;
+  margin-left: 5px;
+}
+.nav-item li {
+  float: left;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 20px;
+}
+.nav-item a {
+  text-decoration: none;
+  color: #555555;
+}
+.nav-item a:hover {
+  color: #d9534f;
+}
+/*大的导航信息，包含导航，幻灯片等*/
+.nav-body {
+  width: 1020px;
+  height: 485px;
+  margin: 0px auto;
+}
+.nav-side {
+  width: 200px;
+  height: 100%;
+  padding: 0px;
+  color: #fff;
+  float: left;
+  background-color: #6e6568;
+}
+.nav-side ul {
+  width: 100%;
+  padding: 0px;
+  padding-top: 15px;
+  list-style: none;
+}
+.nav-side li {
+  padding: 7.5px;
+  padding-left: 15px;
+  font-size: 14px;
+  line-height: 18px;
+}
+.nav-side li:hover {
+  background: #999395;
+}
+.nav-side-item {
+  color: #fff;
+}
+.nav-side-item:hover {
+  cursor: pointer;
+  color: #c81623;
+}
+
+/*导航内容*/
+.nav-content {
+  width: 792px;
+  margin-left: 15px;
+  overflow: hidden;
+  float: left;
+}
+/*导航图片*/
+.nav-show-img {
+  margin-top: 10px;
+  float: left;
+}
+.nav-show-img:nth-child(2) {
+  margin-left: 12px;
+}
+/*显示商品*/
+.content {
+  width: 100%;
+}
+/*显示商品详细信息*/
+.detail-item-panel {
+  width: 815px;
+  height: 485px;
+  background-color: #fff;
+  position: absolute;
+  top: 168px;
+  left: 389px;
+  z-index: 999;
+}
+.nav-detail-item {
+  margin-left: 26px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  cursor: pointer;
+  color: #eee;
+}
+.nav-detail-item span {
+  padding: 6px;
+  padding-left: 12px;
+  margin-left: 15px;
+  font-size: 12px;
+  background-color: #6e6568;
+}
+.nav-detail-item span:hover {
+  margin-left: 15px;
+  background-color: #f44336;
+}
+.detail-item-panel ul {
+  list-style: none;
+}
+.detail-item-panel li {
+  line-height: 38px;
+  margin-left: 40px;
+}
+.detail-item-title {
+  padding-right: 6px;
+  font-weight: bold;
+  font-size: 12px;
+  cursor: pointer;
+  color: #555555;
+}
+.detail-item-title:hover {
+  color: #d9534f;
+}
+.detail-item-row a {
+  color: #555555;
+}
+.detail-item{
+  font-size: 14px;
+  padding-left: 12px;
+  padding-right: 8px;
+  cursor: pointer;
+  border-left: 1px solid #ccc;
+}
+.detail-item:hover {
+  color: #d9534f;
+}
+</style>

src/components/pay/payGateWay.vue

@@ -0,0 +1,25 @@
+<template>
+  <div v-html = "payGateWay">{{payGateWay}}</div>
+</template>
+
+<script>
+export default {
+  name: 'payGateWay',
+  data () {
+    return {
+      payGateWay: ''
+    };
+  },
+  mounted () {
+    let form = this.$route.query.htmlData;
+    this.payGateWay = form;
+    this.$nextTick(() => {
+      document.forms[0].submit();
+    });
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/signUp/CheckPhone.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="info-form">
+    <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate">
+      <FormItem label="手机号" prop="phone">
+          <i-input v-model="formValidate.phone" clearable size="large"  placeholder="请输入手机号"></i-input>
+      </FormItem>
+      <FormItem label="验证码" prop="checkNum">
+          <i-input v-model="formValidate.checkNum" size="large"  placeholder="请输入验证码">
+            <Button slot="append" @click="getcheckNum">获取验证码</Button>
+          </i-input>
+      </FormItem>
+      <Button type="error" size="large" long @click="handleSubmit('formValidate')">验证手机号</Button>
+    </Form>
+  </div>
+</template>
+
+<script>
+import store from '@/vuex/store';
+import { mapMutations } from 'vuex';
+export default {
+  name: 'CheckPhone',
+  data () {
+    return {
+      formValidate: {
+        phone: '',
+        checkNum: ''
+      },
+      ruleValidate: {
+        phone: [
+          {required: true, message: '手机号不能为空', trigger: 'blur'},
+          {type: 'string', pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '手机号格式出错', trigger: 'blur'}
+        ],
+        checkNum: [
+          {required: true, message: '必须填写验证码', trigger: 'blur'},
+          {type: 'string', min: 4, max: 4, message: '验证码长度错误', trigger: 'blur'}
+        ]
+      }
+    };
+  },
+  methods: {
+    ...mapMutations(['SET_SIGN_UP_SETP']),
+    getcheckNum () {
+      if (this.formValidate.phone.length === 11) {
+        // this.$Message.success("验证码已成功发送您的手机，请查收");
+        this.$axios({
+          method: 'get',
+          url: '/sendCode',
+          params: {
+            phone: this.formValidate.phone
+          }
+        }).then(successResponce => {
+          if(successResponce.data.code === 400) {
+            this.$message.error(successResponce.data.message);
+          } else if (successResponce.data.code === 200) {
+            this.$message.success(successResponce.data.message);
+          }
+        });
+      } else {
+        this.$Message.error({
+          content: '请输入正确的手机号',
+          duration: 6,
+          closable: true
+        });
+      }
+    },
+    handleSubmit (name) { // 提交验证
+      this.$axios({
+        method: 'get',
+        url: '/judgeCode',
+        params: {
+          phone: this.formValidate.phone,
+          code:  this.formValidate.checkNum
+        }
+      }).then(successResponce => {
+        if(successResponce.data.code === 400) {
+          this.$message.error(successResponce.data.message);
+        } else if (successResponce.data.code === 200) {
+          this.$router.push({ path: '/SignUp/inputInfo', query: { phone: this.formValidate.phone } });
+          this.SET_SIGN_UP_SETP(1);
+        }
+      });
+
+      // this.$refs[name].validate((valid) => {
+      //   if (valid) {
+      //     this.$router.push({ path: '/SignUp/inputInfo', query: { phone: this.formValidate.phone } });
+      //     this.SET_SIGN_UP_SETP(1);
+      //   } else {
+      //     this.$Message.error({
+      //       content: '请填写正确的信息',
+      //       duration: 6,
+      //       closable: true
+      //     });
+      //   }
+      // });
+    },
+    // // 开始定时
+    // showTime () {
+    //   var but = $("input[type='button']");
+    //   but.attr('disabled', true);
+    //   but.val('' + time-- + '秒后重新发送');
+    // },
+    // // 停止计时
+    // stop () {
+    //   clearInterval(times);
+    //   var but = $("input[type='button']");
+    //   but.val('获取验证码');
+    //   but.attr('disabled', false);
+    // }
+  },
+  store
+};
+</script>
+
+<style scoped>
+.info-form {
+  width: 90% !important;
+}
+</style>

src/components/signUp/InputInfo.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="info-form">
+     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80" >
+        <FormItem label="用户名" prop="name">
+            <i-input v-model="formValidate.name" clearable size="large" placeholder="请输入你的姓名"></i-input>
+        </FormItem>
+        <FormItem label="邮箱" prop="mail">
+            <i-input v-model="formValidate.mail" clearable size="large" placeholder="请输入你的邮箱"></i-input>
+        </FormItem>
+        <FormItem label="密码" prop="password">
+            <i-input type="password" v-model="formValidate.password" clearable size="large" placeholder="请输入你的密码"></i-input>
+        </FormItem>
+        <FormItem label="确认密码" prop="repassword">
+            <i-input type="password" v-model="formValidate.repassword" clearable size="large" placeholder="请再次输入你的密码"></i-input>
+        </FormItem>
+        <Button type="error" size="large" long @click="handleSubmit('formValidate')">注册</Button>
+    </Form>
+  </div>
+</template>
+
+<script>
+import store from '@/vuex/store';
+import { mapMutations, mapActions } from 'vuex';
+export default {
+  name: 'InputInfo',
+  data () {
+    const validatePassCheck = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'));
+      } else if (value !== this.formValidate.password) {
+        callback(new Error('两次输入的密码不一样'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      formValidate: {
+        name: '',
+        mail: '',
+        password: '',
+        repassword: ''
+      },
+      ruleValidate: {
+        name: [
+          { required: true, message: '用户名不能为空', trigger: 'blur' }
+        ],
+        mail: [
+          { required: true, message: '邮箱不能为空', trigger: 'blur' },
+          { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: '密码不能为空', trigger: 'blur' },
+          { type: 'string', min: 6, message: '密码长度不能小于6', trigger: 'blur' }
+        ],
+        repassword: [
+          { validator: validatePassCheck, trigger: 'blur' }
+        ]
+      }
+    };
+  },
+  methods: {
+    ...mapMutations(['SET_SIGN_UP_SETP']),
+    ...mapActions(['addSignUpUser']),
+    handleSubmit (name) {
+      const father = this;
+      this.$refs[name].validate((valid) => {
+        // this.$Message.success('注册成功');
+        if (valid) {
+          const userinfo = {
+            name: this.formValidate.name,
+            password: this.formValidate.password,
+            mail: this.formValidate.mail,
+            phone: this.$route.query.phone
+          };
+          //  this.addSignUpUser(userinfo);
+          father.SET_SIGN_UP_SETP(2);
+          this.$axios.post('/regist', userinfo
+          ).then(successResponse => {
+            if (successResponse.data.code === 200) {
+              this.$Message.success('注册成功');
+
+              // this.$router.replace({path: '/index'})
+              this.$router.push({ path: '/SignUp/signUpDone' });
+            } else if (successResponse.data.code === 400) {
+              console.log('400失败');
+            }
+          })
+            .catch(failResponse => {
+            });
+        } else {
+          this.$Message.error('注册失败');
+        }
+      });
+    }
+  },
+  store
+};
+</script>
+
+<style scoped>
+.info-form {
+  width: 90% !important;
+}
+</style>

src/components/signUp/SignUpDone.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="container">
+    <p><Icon type="ios-checkmark-outline"></Icon></p>
+    <router-link to="/login"><Button type="success" size="large" long class="btn-success">注册成功</Button></router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SignUpDone'
+};
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+  text-align: center;
+}
+.container p {
+  font-size: 90px;
+  color: #2d8cf0;
+  text-align: center;
+}
+.btn-success {
+  margin-top: 30px;
+}
+</style>

src/components/test/socket.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="conWrap">
+    <button :onclick="accessWebSocket()">执行</button>
+    <div id="log-container" style="height: 450px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'socket',
+  data () {
+    return {
+      stompClient: ''
+    };
+  },
+  created () {
+    // this.accessWebSocket();
+  },
+  methods: {
+    accessWebSocket () {
+      var socket;
+      if (typeof (WebSocket) === 'undefined') {
+        console.log('您的浏览器不支持WebSocket');
+      } else {
+        console.log('您的浏览器支持WebSocket');
+        // 实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
+        // 等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
+        // socket = new WebSocket('/websocket/123'.replace('http', 'ws'));
+        // socket = new WebSocket('ws://localhost:9090/websocket/123');
+        // socket = new WebSocket('ws://192.168.248.90:8443/websocket/123');
+        socket = new WebSocket('ws://114.215.135.160:9090/websocket/shenyn');
+        // 打开事件
+        socket.onopen = function () {
+          console.log('Socket 已打开');
+        };
+        // 获得消息事件
+        socket.onmessage = function (msg) {
+          console.log(msg.data);
+          // 发现消息进入    开始处理前端触发逻辑
+        };
+        // 关闭事件
+        socket.onclose = function () {
+          console.log('Socket已关闭');
+        };
+        // 发生了错误事件
+        socket.onerror = function () {
+          alert('Socket发生了错误');
+          // 此时可以尝试刷新页面
+        };
+      }
+    }
+
+  }
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/test/test.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div v-html="h"></div>
+    12345
+    <button @click="goAlipay()">hello world</button>
+  </div>
+</template>
+<script>
+export default {
+  name: 'test',
+  data () {
+    return {
+      price: 11,
+      userParams: 20
+    };
+  },
+  mounted () {
+  },
+  methods: {
+    /**
+     * 支付宝支付
+     */
+    goAlipay () {
+      alert('1111');
+      this.$loading.show();
+      const data = {
+        /* 自身接口所需的一些参数 */
+        amount: this.price,
+        /* 支付后支付宝return的url */
+        // returnUrl: 'www.baidu.com'
+        returnUrl: window.location.origin + window.location.pathname + '?userParams=' + this.userParams
+      };
+      this.$http(
+        this.$apiSetting.alipay,
+        data
+      ).then(res => {
+        this.$loading.hide();
+        if (res.data.statusCode === '000000') {
+          const div = document.createElement('div');
+          /* 此处form就是后台返回接收到的数据 */
+          div.innerHTML = res.data.data.alipayInfo;
+          document.body.appendChild(div);
+          document.forms[0].submit();
+        }
+      }, error => {
+        this.$loading.hide();
+        console.log(error);
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/test/test2.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>1111</div>
+</template>
+
+<script>
+export default {
+  name: 'test2'
+};
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import App from './App';
+import router from './router';
+import iView from 'iview';
+import 'iview/dist/styles/iview.css';
+import axios from 'axios';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+axios.defaults.baseURL = 'http://localhost:8443/api';
+axios.defaults.headers.post['Content-Type'] = 'application/x-www-from-urlencoded';
+
+Vue.prototype.$axios = axios;
+Vue.config.productionTip = false;
+
+Vue.use(iView);
+Vue.use(ElementUI);
+
+router.beforeEach((to, from, next) => {
+  iView.LoadingBar.start();
+  next();
+});
+
+router.afterEach(route => {
+  iView.LoadingBar.finish();
+});
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+});

src/router/index.js

@@ -0,0 +1,203 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import Index from '@/components/Index';
+const Login = resolve => require(['@/components/Login'], resolve);
+const SignUp = resolve => require(['@/components/SignUp'], resolve);
+const CheckPhone = resolve => require(['@/components/signUp/CheckPhone'], resolve);
+const InputInfo = resolve => require(['@/components/signUp/InputInfo'], resolve);
+const SignUpDone = resolve => require(['@/components/signUp/SignUpDone'], resolve);
+const GoodsList = resolve => require(['@/components/GoodsList'], resolve);
+const GoodsDetail = resolve => require(['@/components/GoodsDetail'], resolve);
+const ShoppingCart = resolve => require(['@/components/ShoppingCart'], resolve);
+const Order = resolve => require(['@/components/Order'], resolve);
+const MemberOrder = resolve => require(['@/components/MemberOrder'], resolve);
+const DepositOrder = resolve => require(['@/components/DepositOrder'], resolve);
+const AddMoneyOrder = resolve => require(['@/components/AddMoneyOrder'], resolve);
+const Pay = resolve => require(['@/components/Pay'], resolve);
+const PayDone = resolve => require(['@/components/PayDone'], resolve);
+const Freeback = resolve => require(['@/components/Freeback'], resolve);
+const Home = resolve => require(['@/components/Home'], resolve);
+const MyAddress = resolve => require(['@/components/home/MyAddress'], resolve);
+const AddAddress = resolve => require(['@/components/home/AddAddress'], resolve);
+const MyOrder = resolve => require(['@/components/home/MyOrder'], resolve);
+const MyShoppingCart = resolve => require(['@/components/home/MyShoppingCart'], resolve);
+const MyBidingCart = resolve => require(['@/components/home/MyBidingCart'], resolve);
+const UploadShopCart = resolve => require(['@/components/home/UploadShopCart'], resolve);
+const EditShoppingCart = resolve => require(['@/components/home/EditShoppingCart'], resolve);
+const MyMember = resolve => require(['@/components/home/MyMember'], resolve);
+const MemberUpgrade = resolve => require(['@/components/home/MemberUpgrade'], resolve);
+const Merchant = resolve => require(['@/components/Merchant'], resolve);
+const PayGateWay = resolve => require(['@/components/pay/payGateWay'], resolve);
+const Test = resolve => require(['@/components/test/test'], resolve);
+const Socket = resolve => require(['@/components/test/socket'], resolve);
+
+Vue.use(Router);
+
+export default new Router({
+  routes: [
+    {
+      path: '/test',
+      name: 'Test',
+      component: Test
+    },
+    {
+      path: '/socket',
+      name: 'Socket',
+      component: Socket
+    },
+    {
+      path: '/payGateWay',
+      name: 'PayGateWay',
+      component: PayGateWay
+    },
+    {
+      path: '/', // 首页
+      name: 'Index',
+      component: Index
+    },
+    {
+      path: '/Login', // 登录
+      name: 'Login',
+      component: Login
+    },
+    {
+      path: '/SignUp', // 注册
+      name: 'SignUp',
+      component: SignUp,
+      children: [
+        {
+          path: '/',
+          name: 'index',
+          component: CheckPhone
+        },
+        {
+          path: 'checkPhone',
+          name: 'CheckPhone',
+          component: CheckPhone
+        },
+        {
+          path: 'inputInfo',
+          name: 'InputInfo',
+          component: InputInfo
+        },
+        {
+          path: 'signUpDone',
+          name: 'SignUpDone',
+          component: SignUpDone
+        }
+      ]
+    },
+    {
+      path: '/goodsList', // 商品列表
+      name: 'GoodsList',
+      component: GoodsList
+    },
+    {
+      path: '/goodsDetail', // 商品详情
+      name: 'GoodsDetail',
+      component: GoodsDetail
+    },
+    {
+      path: '/shoppingCart', // 商品详情
+      name: 'ShoppingCart',
+      component: ShoppingCart
+    },
+    {
+      path: '/order', // 订单页面
+      name: 'Order',
+      component: Order
+    },
+    {
+      path: '/memberOrder',
+      name: 'MemberOrder',
+      component: MemberOrder
+    },
+    {
+      path: '/depositOrder',
+      name: 'DepositOrder',
+      component: DepositOrder
+    },
+    {
+      path: '/addMoneyOrder',
+      name: 'AddMoneyOrder',
+      component: AddMoneyOrder
+    },
+    {
+      path: '/pay', // 支付页面
+      name: 'Pay',
+      component: Pay
+    },
+    {
+      path: '/payDone', // 支付成功页面
+      name: 'PayDone',
+      component: PayDone
+    },
+    {
+      path: '/freeback', // 反馈页面
+      name: 'Freeback',
+      component: Freeback
+    },
+    {
+      path: '/home', // 主页
+      name: 'Home',
+      component: Home,
+      children: [
+        {
+          path: '/',
+          name: 'HomeIndex',
+          component: MyOrder
+        },
+        {
+          path: 'myAddress',
+          name: 'MyAddress',
+          component: MyAddress
+        },
+        {
+          path: 'addAddress',
+          name: 'AddAddress',
+          component: AddAddress
+        },
+        {
+          path: 'myOrder',
+          name: 'MyOrder',
+          component: MyOrder
+        },
+        {
+          path: 'myShoppingCart',
+          name: 'MyShoppingCart',
+          component: MyShoppingCart
+        },
+        {
+          path: 'myBidingCart',
+          name: 'MyBidingCart',
+          component: MyBidingCart
+        },
+        {
+          path: 'uploadShopCart',
+          name: 'UploadShopCart',
+          component: UploadShopCart
+        },
+        {
+          path: 'editShoppingCart',
+          name: 'EditShoppingCart',
+          component: EditShoppingCart
+        },
+        {
+          path: 'myMember',
+          name: 'MyMember',
+          component: MyMember
+        },
+        {
+          path: 'memberUpgrade',
+          name: 'MemberUpgrade',
+          component: MemberUpgrade
+        }
+      ]
+    },
+    {
+      path: '/merchant',
+      name: 'Merchant',
+      component: Merchant
+    }
+  ]
+});

src/vuex/actions.js

@@ -0,0 +1,488 @@
+// 获取秒杀数据
+import axios from 'axios';
+
+// 获取轮播(营销)图片
+export const loadCarouselItems = ({ commit }) => {
+  return new Promise((resolve, reject) => {
+    const data = {
+      carouselItems: [
+        'static/img/nav/1.jpg',
+        'static/img/nav/2.jpg',
+        'static/img/nav/3.jpg',
+        'static/img/nav/4.jpg',
+        'static/img/nav/5.jpg'
+      ],
+      activity: [
+        'static/img/nav/nav_showimg1.jpg',
+        'static/img/nav/nav_showimg2.jpg'
+      ]
+    };
+    commit('SET_CAROUSELITEMS_INFO', data);
+  });
+};
+
+// 加载电脑专栏数据
+export const loadHot = ({ commit }) => {
+  return new Promise((resolve, reject) => {
+    var bimg = new Array('static/img/index/computer/item-computer-1.jpg', 'static/img/index/computer/item-computer-2-1.jpg');
+    var hot = {
+      title: '热拍商品',
+      link: [ '迪奥', '香奈儿', '阿玛尼', '三宅一生', '铁臂阿童木', '日本铁壶', '高达', '海贼王', '薇薇安' ],
+      detail: [
+        {
+          bigImg: '',
+          itemFour: [
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            }
+          ]
+        },
+        {
+          bigImg: '',
+          itemFour: [
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            }
+          ]
+        }
+      ]
+    };
+    hot.detail[0].bigImg = bimg[0];
+    hot.detail[1].bigImg = bimg[1];
+    axios({
+      url: 'queryHotCommodity',
+      method: 'get'
+    }).then(successReponce => {
+      if (successReponce.data.code === 200) {
+        var data = successReponce.data.data;
+        console.log(data);
+        for (var i = 0; i < 4; i++) {
+          hot.detail[0].itemFour[i].cid = data[i].cid;
+          hot.detail[0].itemFour[i].title = data[i].title.substring(0, 5);
+          hot.detail[0].itemFour[i].intro = data[i].intro;
+          hot.detail[0].itemFour[i].img = data[i].img;
+          hot.detail[1].itemFour[i].cid = data[i + 4].cid;
+          hot.detail[1].itemFour[i].title = data[i + 4].title.substring(0, 5);
+          hot.detail[1].itemFour[i].intro = data[i + 4].intro;
+          hot.detail[1].itemFour[i].img = data[i + 4].img;
+        }
+        console.log(hot);
+      }
+    });
+
+    commit('SET_HOT_INFO', hot);
+  });
+};
+
+// 加载爱吃专栏数据
+export const loadFavorite = ({ commit }) => {
+  return new Promise((resolve, reject) => {
+    var bimg = new Array('static/img/index/eat/item-eat-1-1.jpg', 'static/img/index/eat/item-eat-2-1.jpg');
+    var favorite = {
+      title: '猜你喜欢',
+      link: [ 'Fate', '漫画', '动画', '机器人', '高达', '圣斗士星矢', '龙珠', '初音未来', '塑料模型', 'BLEACH', '火影忍者' ],
+      detail: [
+        {
+          bigImg: '',
+          itemFour: [
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            }
+          ]
+        },
+        {
+          bigImg: '',
+          itemFour: [
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            },
+            {
+              cid: '',
+              title: '',
+              intro: '',
+              img: ''
+            }
+          ]
+        }
+      ]
+    };
+    favorite.detail[0].bigImg = bimg[0];
+    favorite.detail[1].bigImg = bimg[1];
+    axios({
+      url: 'queryRecommendCommodity',
+      method: 'get',
+      params: {
+        uid: this.uid
+      }
+    }).then(successReponce => {
+      if (successReponce.data.code === 200) {
+        var data = successReponce.data.data;
+        console.log(data);
+        for (var i = 0; i < 4; i++) {
+          favorite.detail[0].itemFour[i].cid = data[i].cid;
+          favorite.detail[0].itemFour[i].title = data[i].title.substring(0, 5);
+          favorite.detail[0].itemFour[i].intro = data[i].intro;
+          favorite.detail[0].itemFour[i].img = data[i].img;
+          favorite.detail[1].itemFour[i].cid = data[i + 4].cid;
+          favorite.detail[1].itemFour[i].title = data[i + 4].title.substring(0, 5);
+          favorite.detail[1].itemFour[i].intro = data[i + 4].intro;
+          favorite.detail[1].itemFour[i].img = data[i + 4].img;
+        }
+        console.log(favorite);
+      }
+    });
+    commit('SET_FAVORITE_INFO', favorite);
+  });
+};
+
+// 请求获得商品详细信息
+export const loadGoodsInfo = ({ commit }, cid) => {
+  commit('SET_LOAD_STATUS', true);
+  var data = {};
+  axios({
+    url: 'getGoodDetail',
+    method: 'get',
+    params: {
+      cid: cid
+    }
+  }).then(successResponce => {
+    console.log(successResponce);
+    if (successResponce.data.code === 200) {
+      data = successResponce.data.data;
+      commit('SET_GOODS_INFO', data);
+      commit('SET_LOAD_STATUS', false);
+      // 设置倒计时
+      var endtime = new Date(data.goodDetailResult.param2[1].content);
+      const nowtime = new Date();
+      var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
+      if (lefttime > 0) {
+        var day = parseInt(lefttime / 3600 / 24);
+        var hours = parseInt(lefttime / (60 * 60)) % 24;
+        var minute = parseInt(lefttime / (60)) % 60;
+        var seconds = parseInt(lefttime % 60);
+        console.log([day, hours, minute, seconds]);
+        // 剩余的竞购时间
+        const deadline = {
+          day: day,
+          hours: hours,
+          minute: minute,
+          seconds: seconds
+        };
+        commit('SET_SECKILLS_INFO', [null, deadline]);
+      }
+    } else if (successResponce.code === 400) {
+    }
+  });
+};
+
+// 获取商品列表
+export const loadAsItemsList = ({ commit }) => {
+  commit('SET_LOAD_STATUS', true);
+  var data = {
+    asItems: [
+      {
+        image: 'static/img/goodsList/item-as-img-1.jpg',
+        price: 39.9,
+        intro: 'SKSK 苹果7/7plus手机壳 iPhone 7 Plus保护套全包硬',
+        score: 9000
+      },
+      {
+        image: 'static/img/goodsList/item-as-img-2.jpg',
+        price: 36.6,
+        intro: '狮普 苹果7/7 Plus手机壳 电镀 超薄 全包 防摔 保护外',
+        score: 8900
+      },
+      {
+        image: 'static/img/goodsList/item-as-img-1.jpg',
+        price: 38.6,
+        intro: 'SKSK 苹果7/7plus手机壳 iPhone 7 Plus保护套全包硬',
+        score: 8800
+      },
+      {
+        image: 'static/img/goodsList/item-as-img-2.jpg',
+        price: 35.6,
+        intro: '狮普 苹果7/7 Plus手机壳 电镀 超薄 全包 防摔 保护外',
+        score: 7990
+      },
+      {
+        image: 'static/img/goodsList/item-as-img-1.jpg',
+        price: 38.6,
+        intro: 'SKSK 苹果7/7plus手机壳 iPhone 7 Plus保护套全包硬',
+        num: 9160,
+        score: 7600
+      },
+      {
+        image: 'static/img/goodsList/item-as-img-2.jpg',
+        price: 35.6,
+        intro: '狮普 苹果7/7 Plus手机壳 电镀 超薄 全包 防摔 保护外',
+        score: 6900
+      }
+    ]
+    // goodsList: []
+  };
+  commit('SET_GOODS_LIST', data);
+  commit('SET_LOAD_STATUS', false);
+  // axios({
+  //   url: 'getGoodsList',
+  //   methods: 'get',
+  //   params: {
+  //     ctype: ctype
+  //   }
+  // }).then(successResponse => {
+  //   if (successResponse.data.code === 200) {
+  //     data.goodsList = successResponse.data.data;
+
+  //   } else if (successResponse.data.code === 400) {
+  //     this.$Message.error('显示列表失败，原因400');
+  //   }
+  // });
+};
+
+// 添加购物车
+export const addShoppingCart = ({ commit }, data) => {
+  console.log(data);
+  commit('ADD_SHOPPING_CART', data);
+};
+
+// 获取用户推荐
+export const loadRecommend = ({ commit }) => {
+  return new Promise((resolve, reject) => {
+    const data = [
+      [
+        {
+          img: 'static/img/otherBuy/1.jpg',
+          intro: 'iPhone7/6s/8钢化膜苹果7Plus全屏全覆盖3D抗蓝',
+          price: 29.00
+        },
+        {
+          img: 'static/img/otherBuy/2.jpg',
+          intro: '苹果数据线 苹果iPhoneX/6s/7plus/8充电线',
+          price: 36.00
+        },
+        {
+          img: 'static/img/otherBuy/3.jpg',
+          intro: '苹果8/7/6/6s钢化膜 iphone8/7/6s/6钢化玻璃',
+          price: 19.00
+        },
+        {
+          img: 'static/img/otherBuy/4.jpg',
+          intro: 'iPhone6s/7钢化膜苹果8 Plus手机膜抗蓝光非全屏',
+          price: 28.00
+        }
+      ],
+      [
+        {
+          img: 'static/img/otherBuy/5.jpg',
+          intro: '苹果6s手机壳iPhone6s Plus保护壳防摔全',
+          price: 28.00
+        },
+        {
+          img: 'static/img/otherBuy/6.jpg',
+          intro: 'iPhone7/8手机壳手机套防摔磨砂保护壳星空黑☆全包保护',
+          price: 30.00
+        },
+        {
+          img: 'static/img/otherBuy/7.jpg',
+          intro: '数据线 适用于苹果iPhone 6s/6plus/7plus/8/X',
+          price: 18.00
+        },
+        {
+          img: 'static/img/otherBuy/8.jpg',
+          intro: 'iPhone8/7/6S/6钢化膜 苹果8/7/6s/6玻璃膜 手机高',
+          price: 15.00
+        }
+      ]
+    ];
+    commit('SET_RECOMMEND_INFO', data);
+  });
+};
+
+export const loadAddress = ({ commit }) => {
+  var address;
+  let localStorage = window.localStorage;
+  let loginInfo = localStorage.getItem('loginInfo');
+  let userid = (JSON.parse(loginInfo))['uid'];
+  axios({
+    url: 'getAddress',
+    methods: 'get',
+    params: {
+      userid: userid
+    }
+  }).then(successResponse => {
+    if (successResponse.data.code === 200) {
+      // this.$Message.success('显示地址成功');
+      address = successResponse.data.data;
+      console.log(address);
+      commit('SET_USER_ADDRESS', address);
+    } else if (successResponse.data.code === 400) {
+      this.$Message.error('显示地址失败，原因400');
+    }
+  }).catch(failResponse => {
+  });
+};
+
+export const loadShoppingCart = ({ commit }) => {
+  return new Promise((resolve, reject) => {
+    let localStorage = window.localStorage;
+    let loginInfo = localStorage.getItem('loginInfo');
+    let uid = (JSON.parse(loginInfo))['uid'];
+    let data = [];
+    axios({
+      method: 'get',
+      url: '/getUserCommodity',
+      params: {
+        uid: uid
+      }
+    }).then(response => {
+      data = response.data.data;
+      commit('SET_SHOPPING_CART', data);
+      resolve(response);
+    }).catch(function (error) {
+      reject(error);
+    });
+  });
+};
+
+// 添加注册用户
+export const addSignUpUser = ({ commit }, data) => {
+  return new Promise((resolve, reject) => {
+    const userArr = localStorage.getItem('users');
+    let users = [];
+    if (userArr) {
+      users = JSON.parse(userArr);
+    }
+    users.push(data);
+    localStorage.setItem('users', JSON.stringify(users));
+  });
+};
+// 用户登录
+export const login = ({ commit }, data) => {
+  return new Promise((resolve, reject) => {
+    axios.post('/login', data
+    ).then(successResponse => {
+      if (successResponse.data.code === 200) {
+        localStorage.setItem('loginInfo', JSON.stringify(successResponse.data.data), 60); // 设置半天的过期时间
+        commit('SET_USER_LOGIN_INFO', successResponse.data.data);
+        resolve(true);
+      } else if (successResponse.data.code === 400) {
+        resolve(false);
+      }
+    }).catch(failResponse => {
+    });
+  });
+};
+
+// 更新用户状态
+export const userUpgrade = ({ commit }) => {
+  alert(111);
+  let localStorage = window.localStorage;
+  let loginInfo = localStorage.getItem('loginInfo');
+  let uid = (JSON.parse(loginInfo))['uid'];
+  this.$axios({
+    method: 'post',
+    url: '/userUpgrade',
+    params: {
+      uid: uid
+    }
+  }).then(successResponse => {
+    if (successResponse.data.code === 200) {
+      localStorage.setItem('loginInfo', JSON.stringify(successResponse.data.data));
+      commit('SET_USER_LOGIN_INFO', successResponse.data.data);
+    } else if (successResponse.data.code === 400) {
+    }
+  }).catch(failResponse => {
+  });
+};
+
+// 退出登陆
+export const signOut = ({ commit }) => {
+  localStorage.removeItem('loginInfo');
+  localStorage.removeItem('bidcount');
+  commit('SET_USER_LOGIN_INFO', {});
+};
+
+// 判断是否登陆
+export const isLogin = ({ commit }) => {
+  const user = localStorage.getItem('loginInfo');
+  if (user) {
+    commit('SET_USER_LOGIN_INFO', JSON.parse(user));
+  }
+};

src/vuex/getters.js

@@ -0,0 +1,33 @@
+// 字段排序函数
+const compare = property => {
+  return function (a, b) {
+    var value1 = a[property];
+    var value2 = b[property];
+    return value1 - value2;
+  };
+};
+
+// 获取排序后的列表
+export const orderGoodsList = state => {
+  return state.goodsList.sort(compare(state.orderBy));
+};
+
+// 获取秒杀的天数
+export const seckillsDay = state => {
+  return state.seckills.deadline.day < 10 ? '0' + state.seckills.deadline.day : state.seckills.deadline.day;
+};
+
+// 获取秒杀的小时
+export const seckillsHours = state => {
+  return state.seckills.deadline.hours < 10 ? '0' + state.seckills.deadline.hours : state.seckills.deadline.hours;
+};
+
+// 获取秒杀的分钟
+export const seckillsMinutes = state => {
+  return state.seckills.deadline.minute < 10 ? '0' + state.seckills.deadline.minute : state.seckills.deadline.minute;
+};
+
+// 获取秒杀的秒
+export const seckillsSeconds = state => {
+  return state.seckills.deadline.seconds < 10 ? `0${state.seckills.deadline.seconds}` : state.seckills.deadline.seconds;
+};

src/vuex/mutations.js

@@ -0,0 +1,97 @@
+// 设置注册步骤
+export const SET_SIGN_UP_SETP = (state, step) => {
+  state.signUpStep = step;
+};
+
+// 设置用户登录信息
+export const SET_USER_LOGIN_INFO = (state, data) => {
+  state.userInfo = data;
+};
+
+// 设置加载状态
+export const SET_LOAD_STATUS = (state, status) => {
+  state.isLoading = status;
+};
+
+// 设置秒杀商品
+export const SET_SECKILLS_INFO = (state, seckills) => {
+  state.seckills.goodsList = seckills[0];
+  state.seckills.deadline = seckills[1];
+};
+
+// 设置轮播(营销)图
+export const SET_CAROUSELITEMS_INFO = (state, { carouselItems, activity }) => {
+  state.marketing.CarouselItems = carouselItems;
+  state.marketing.activity = activity;
+};
+
+// 设置电脑专栏数据
+export const SET_HOT_INFO = (state, hot) => {
+  state.hot = hot;
+};
+
+// 设置爱吃专栏数据
+export const SET_FAVORITE_INFO = (state, favorite) => {
+  state.favorite = favorite;
+};
+
+// 减少秒杀时间
+export const REDUCE_SECKILLS_TIME = state => {
+  state.seckills.deadline.seconds--;
+  if (state.seckills.deadline.seconds === -1) {
+    state.seckills.deadline.seconds = 59;
+    state.seckills.deadline.minute--;
+    if (state.seckills.deadline.minute === -1) {
+      state.seckills.deadline.minute = 59;
+      state.seckills.deadline.hour--;
+    }
+  }
+};
+
+// 设置商品列表(搜索)
+export const SET_GOODS_LIST = (state, data) => {
+  // state.goodsList = data.goodsList;
+  state.asItems = data.asItems;
+};
+
+// 设置商品列表排序
+export const SET_GOODS_ORDER_BY = (state, data) => {
+  state.orderBy = data;
+};
+
+// 设置商品详细信息
+export const SET_GOODS_INFO = (state, data) => {
+  state.goodsInfo = data;
+};
+
+// export const SET_Time_INFO = (state, data) => {
+//   state.time = data;
+// };
+
+// 添加购物车
+export const ADD_SHOPPING_CART = (state, data) => {
+  const item = {
+    cid: data.cid,
+    image: data.image,
+    cname: data.cname,
+    nature: data.nature,
+    price: data.price
+  };
+  state.shoppingCart.push(item);
+  state.newShoppingCart = data;
+};
+
+// 设置购物车信息
+export const SET_SHOPPING_CART = (state, data) => {
+  state.shoppingCart = data;
+};
+
+// 设置推荐信息
+export const SET_RECOMMEND_INFO = (state, data) => {
+  state.recommend = data;
+};
+
+// 设置收获地址
+export const SET_USER_ADDRESS = (state, data) => {
+  state.address = data;
+};

src/vuex/store.js

@@ -0,0 +1,76 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import * as mutations from './mutations';
+import * as getters from './getters';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    isLoading: false, // 是否展示loading动画
+    orderBy: 'score', // 根据什么字段排序
+    goodsInfo: { // 商品详情
+      goodDetailResult: {
+        cid: '', // id 存折里
+        price: 0.00,
+        addprice: 0.00,
+        images: [],
+        cname: '',
+        typeid: [],
+        seller: '',
+        count: 0,
+        score: 0,
+        history: {},
+        des: '',
+        param1: [],
+        param2: []
+      },
+      historyCommodityList: '',
+      historyBiddingList: '',
+      sellerCommentList: ''
+    },
+    time: {
+      day: 0,
+      hours: 0,
+      minute: 0,
+      seconds: 0
+    },
+    userInfo: { // 用户信息
+      username: ''
+    },
+    signUpStep: 0, // 登陆步骤
+    marketing: { // 营销
+      CarouselItems: [], // 轮播图
+      activity: [] // 活动
+    },
+    seckills: { // 秒杀
+      deadline: {
+        day: 0,
+        hours: 0,
+        minute: 0,
+        seconds: 0
+      },
+      goodsList: []
+    },
+    hot: {}, // 热销商品
+    favorite: {}, // 猜你喜欢
+    asItems: [], // 广告
+    goodsList: [], // 商品列表
+    shoppingCart: [
+      // {
+      //   cid: '123',
+      //   image: '1234',
+      //   cname: '12345',
+      //   nature: '升级会员',
+      //   price: 600.00
+      // }
+    ], // 购物车
+    address: [],
+    newShoppingCart: [], // 刚加入的购物车，作为展示
+    recommend: [] // 推荐购买
+  },
+  getters,
+  actions,
+  mutations
+});