first commit

历届学生/罗朝/项目练习/电商App/back-shop/app.js

@@ -0,0 +1,46 @@
+var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+
+var indexRouter = require('./routes/index');
+var userRouter = require('./routes/user');
+var cartRouter = require('./routes/cart.js');
+var orderRouter = require('./routes/order.js');
+
+var app = express();
+
+app.all('*', function (req, res, next) {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Headers', 'Content-Type');
+  res.header('Access-Control-Allow-Methods', '*');
+  res.header('Content-Type', 'application/json;charset=utf-8');
+  next();
+});
+
+app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+
+app.use('/json/2.0/', indexRouter);
+app.use('/json/2.0/user/', userRouter)
+app.use('/json/2.0/cart/', cartRouter)
+app.use('/json/2.0/order/', orderRouter)
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+  // render the error page
+  res.status(err.status || 500);
+});
+
+module.exports = app;

历届学生/罗朝/项目练习/电商App/back-shop/bin/www

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+var debug = require('debug')('back-shop:server');
+var http = require('http');
+
+/**
+ * Get port from environment and store in Express.
+ */
+
+var port = normalizePort(process.env.PORT || '4000');
+app.set('port', port);
+
+/**
+ * Create HTTP server.
+ */
+
+var server = http.createServer(app);
+
+/**
+ * Listen on provided port, on all network interfaces.
+ */
+
+server.listen(port);
+server.on('error', onError);
+server.on('listening', onListening);
+
+/**
+ * Normalize a port into a number, string, or false.
+ */
+
+function normalizePort(val) {
+  var port = parseInt(val, 10);
+
+  if (isNaN(port)) {
+    // named pipe
+    return val;
+  }
+
+  if (port >= 0) {
+    // port number
+    return port;
+  }
+
+  return false;
+}
+
+/**
+ * Event listener for HTTP server "error" event.
+ */
+
+function onError(error) {
+  if (error.syscall !== 'listen') {
+    throw error;
+  }
+
+  var bind = typeof port === 'string'
+    ? 'Pipe ' + port
+    : 'Port ' + port;
+
+  // handle specific listen errors with friendly messages
+  switch (error.code) {
+    case 'EACCES':
+      console.error(bind + ' requires elevated privileges');
+      process.exit(1);
+      break;
+    case 'EADDRINUSE':
+      console.error(bind + ' is already in use');
+      process.exit(1);
+      break;
+    default:
+      throw error;
+  }
+}
+
+/**
+ * Event listener for HTTP server "listening" event.
+ */
+
+function onListening() {
+  var addr = server.address();
+  var bind = typeof addr === 'string'
+    ? 'pipe ' + addr
+    : 'port ' + addr.port;
+    console.log("You App Is Run here: http://localhost:3000/")
+  debug('Listening on ' + bind);
+}

历届学生/罗朝/项目练习/电商App/back-shop/confg/index.js

@@ -0,0 +1,33 @@
+
+module.exports = {
+  MysqlConfig: {
+    host     : 'localhost',
+    user     : 'root',
+    password : 'lb714500',
+    database : 'shop'
+  },
+  SqlConfig: {
+    index: {
+      QueryIndex: 'SELECT * from shop_commodity',
+      QueryIndexInfo: `SELECT * from shop_commodity where id = ?`,
+      QueryClassShop: `SELECT * from shop_commodity where commodity_brand = ?`,
+      SearchShop: `SELECT * from shop_commodity  WHERE commodity_name or commodity_brand  LIKE "%?%"`
+    },
+    user: {
+      Querylogin: 'SELECT id, user_money,user_name,user_nicname,user_truename from shop_user where user_name = ? and user_pwd = ?',
+      InsertUser: 'INSERT INTO shop_user (user_name, user_pwd, user_nicname) VALUES (?, ?, ?)'
+    },
+    cart: {
+      InsertCart: 'INSERT INTO shop_cart (user_id, commodity_id, cart_nums) VALUES (?, ?, ?)',
+      QueryCart: 'SELECT * from shop_cart where user_id = ? and commodity_id = ?',
+      SelectCart: 'SELECT shop_cart.cart_nums, shop_cart.id AS cid, shop_commodity.* FROM shop_cart ,shop_commodity WHERE shop_cart.commodity_id = shop_commodity.id AND shop_cart.user_id = ?',
+      deleteCart: 'DELETE FROM shop_cart WHERE id = ?'
+    },
+    order: {
+      addOrder: 'INSERT INTO shop_order (user_id, commodity_id, order_number,order_status,order_total,order_size) VALUES (?, ?, ?, ?, ?, ?)',
+      SelectOrder: 'SELECT  shop_order.id AS oid,shop_order.order_number,shop_order.order_total,shop_order.order_size,shop_order.order_status, shop_commodity.* FROM shop_order ,shop_commodity WHERE shop_order.commodity_id = shop_commodity.id AND shop_order.user_id = ? and order_status = ?',
+      SelectAllOrder: 'SELECT  shop_order.id AS oid,shop_order.order_number,shop_order.order_total,shop_order.order_size,shop_order.order_status, shop_commodity.* FROM shop_order ,shop_commodity WHERE shop_order.commodity_id = shop_commodity.id AND shop_order.user_id = ?',
+      updateOrder: 'UPDATE shop_order set order_status= ? WHERE user_id = ? and id = ?'
+    }
+  }
+}

历届学生/罗朝/项目练习/电商App/back-shop/db/index.js

@@ -0,0 +1,23 @@
+var mysql = require('mysql');
+var config = require("../confg/index");
+
+var connection = mysql.createConnection(config.MysqlConfig);
+
+connection.connect();
+
+module.exports = {
+
+  query(sql, sqlParams = [], callback) {
+    console.log("sql", sql)
+    connection.query(sql, sqlParams, (error, results, fields) => {
+      if (error) throw error;
+      console.log("数据库查到的数据：", results)
+      results.length == 0 
+      ? callback({ status: 404, message: '数据库没有数据' })
+      : callback({ status: 200, message: '查询成功', data: results })
+      
+    });
+  } 
+
+}
+

历届学生/罗朝/项目练习/电商App/back-shop/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "back-shop",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "node-dev ./bin/www"
+  },
+  "dependencies": {
+    "cookie-parser": "~1.4.4",
+    "debug": "~2.6.9",
+    "express": "~4.16.1",
+    "http-errors": "~1.6.3",
+    "md5": "^2.2.1",
+    "morgan": "~1.9.1",
+    "mysql": "^2.17.1",
+    "pug": "2.0.0-beta11"
+  }
+}

历届学生/罗朝/项目练习/电商App/back-shop/routes/cart.js

@@ -0,0 +1,54 @@
+var express = require('express');
+var router = express.Router();
+var db = require("../db");
+var config = require("../confg")
+
+router.post('/addCart', function(req, res, next) {
+  var commodity_id = req.body.commodity_id;
+  var user_id = req.body.user_id;
+  db.query(config.SqlConfig.cart.InsertCart, [ user_id, commodity_id, 1], result => {
+    res.json(result)
+  })
+});
+
+router.post('/queryShopOrCart', function(req, res, next) {
+  var commodity_id = req.body.commodity_id;
+  var user_id = req.body.user_id;
+  db.query(config.SqlConfig.cart.QueryCart, [ user_id, commodity_id], result => {
+    if(result.hasOwnProperty("data")) {
+      result.data = "不可收藏"
+    }else{
+      result.status = 200
+      result.data = "可收藏"
+    }
+    console.log(result)
+    res.json(result)
+  })
+});
+
+
+
+
+router.post('/getAllCart', function(req, res, next) {
+  var user_id = req.body.user_id;
+  db.query(config.SqlConfig.cart.SelectCart, [ user_id ], result => {
+    res.json(result)
+  });
+});
+
+
+router.post('/deleteCart', function(req, res, next) {
+  var cartdata = req.body.cartdata;
+  let resd = ""
+  cartdata.forEach(val => {
+    db.query(config.SqlConfig.cart.deleteCart, [  val.cid ], result => {
+      resd = result
+    });
+  });
+  res.json({
+    status: 200,
+    message: '删除成功'
+  });
+});
+
+module.exports = router;

历届学生/罗朝/项目练习/电商App/back-shop/routes/index.js

@@ -0,0 +1,47 @@
+var express = require('express');
+var router = express.Router();
+var db = require("../db");
+var config = require("../confg")
+
+/**
+ * APP的首页接口
+ * 请求地址：http://127.0.0.1:3000/json/2.0/index
+ * 请求方式：GET
+ * 请求参数：无
+ */
+router.get('/index', function(req, res, next) {
+  db.query(config.SqlConfig.index.QueryIndex, {}, result => {
+    res.json(result)
+  })
+});
+
+router.get('/class', function(req, res, next) {
+  var brand = req.query.brand;
+  console.log(brand)
+  db.query(config.SqlConfig.index.QueryClassShop, [brand], result => {
+    res.json(result)
+  })
+});
+
+router.get('/search', function(req, res, next) {
+  var keyword = req.query.keyword;
+  db.query(`SELECT * from shop_commodity  WHERE commodity_name or commodity_brand  LIKE '%${keyword}%'`, [], result => {
+    res.json(result)
+  })
+});
+
+/**
+ * APP从首页点击商品进入详情的接口
+ * 请求地址：http://127.0.0.1:3000/json/2.0/index/info
+ * 请求方式：GET
+ * 请求参数：
+ *  id: string 需要请求的商品id，从首页接口获得
+ */
+router.get('/index/info', function(req, res, next) {
+  let id = req.query.id
+  db.query(config.SqlConfig.index.QueryIndexInfo, id, result => {
+    res.json(result)
+  })
+});
+
+module.exports = router;

历届学生/罗朝/项目练习/电商App/back-shop/routes/order.js

@@ -0,0 +1,48 @@
+var express = require('express');
+var router = express.Router();
+var db = require("../db");
+var config = require("../confg");
+
+router.post('/addOrder', function(req, res, next) {
+    var orderdata = req.body.orderdata;
+    let resd = ""
+    orderdata.forEach(val => {
+        db.query(config.SqlConfig.order.addOrder, [  val.userId,val.shopId,val.orderNumber,val.orderStatus,val.orderTotal,val.orderSize ], result => {
+            resd = result
+        });
+    });
+    res.json({
+        status: 200,
+        message: '订单增加成功'
+    });
+});
+
+router.post('/selectOrder', function(req, res, next) {
+    var status = req.body.status,
+        uid = req.body.userid,
+        sql = null;
+    console.log(typeof status);
+
+    status == -1 ? sql = config.SqlConfig.order.SelectAllOrder
+                 : sql = config.SqlConfig.order.SelectOrder;
+
+    db.query(sql, [ uid, status ], result => {
+        result.status = 200
+        res.json(result)
+
+    });
+});
+
+
+router.post('/updateOrder', function(req, res, next) {
+    var status = req.body.status,
+        uid = req.body.userid,
+        oid = req.body.oid;
+
+    db.query(config.SqlConfig.order.updateOrder, [ status, uid, oid ], result => {
+        res.json(result)
+    });
+});
+
+
+module.exports = router;

历届学生/罗朝/项目练习/电商App/back-shop/routes/user.js

@@ -0,0 +1,26 @@
+var express = require('express');
+var router = express.Router();
+var db = require("../db");
+var config = require("../confg")
+var md5 = require('md5');
+
+router.post('/reg', function(req, res, next) {
+  var username = req.body.username;
+  var userpwd = md5(req.body.password);
+  var usernicname = req.body.usernicname;
+
+  db.query(config.SqlConfig.user.InsertUser, [ username, userpwd, usernicname], result => {
+    res.json(result)
+  })
+});
+
+router.post('/login', function(req, res, next) {
+  var username = req.body.username;
+  var userpwd = md5(req.body.password); 
+  // md5 不可逆加密
+  db.query(config.SqlConfig.user.Querylogin, [ username, userpwd ], result => {
+    res.json(result)
+  })
+});
+
+module.exports = router;

历届学生/罗朝/项目练习/电商App/back-shop/test.http

@@ -0,0 +1,41 @@
+# POST http://127.0.0.1:3000/json/2.0/user/login HTTP/1.1
+# content-type: application/json
+
+# {
+#     "username": "15155145354",
+#     "password": "714500"
+# }
+
+# POST http://127.0.0.1:3000/json/2.0/user/reg HTTP/1.1
+# content-type: application/json
+
+# {
+#     "username": "13666062265",
+#     "password": "789456",
+#     "usernicname": "哈哈哈"
+# }
+
+#POST http://127.0.0.1:3000/json/2.0/cart/getAllCart HTTP/1.1
+#content-type: application/json
+#
+#{
+#    "user_id": "14"
+#}
+
+#POST http://127.0.0.1:3000/json/2.0/order/updateOrder HTTP/1.1
+#content-type: application/json
+#
+#{
+#  "userid": "14",
+#  "status": 0,
+#  "oid": 172
+#}
+
+###
+
+GET http://127.0.0.1:3000/json/2.0/search?keyword=小米
+content-type: application/json
+
+
+
+###

历届学生/罗朝/项目练习/电商App/font-shop/.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"]
+}

历届学生/罗朝/项目练习/电商App/font-shop/.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

历届学生/罗朝/项目练习/电商App/font-shop/.eslintignore

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

历届学生/罗朝/项目练习/电商App/font-shop/.eslintrc.js

@@ -0,0 +1,29 @@
+// 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: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/.gitignore

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

历届学生/罗朝/项目练习/电商App/font-shop/.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": {}
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/README.md

@@ -0,0 +1,21 @@
+# font-shop
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

历届学生/罗朝/项目练习/电商App/font-shop/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'
+    ))
+  })
+})

历届学生/罗朝/项目练习/电商App/font-shop/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)
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/build/utils.js

@@ -0,0 +1,101 @@
+'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'
+      })
+    } 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')
+    })
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/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'
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/build/webpack.base.conf.js

@@ -0,0 +1,102 @@
+'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: /\.pug$/,
+        loader: 'pug'
+      },
+      {
+
+        test: /\.less$/,
+        loader: "style-loader!css-loader!less-loader",
+        
+      },
+      {
+        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'
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/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)
+    }
+  })
+})

历届学生/罗朝/项目练习/电商App/font-shop/build/webpack.prod.conf.js

@@ -0,0 +1,149 @@
+'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: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // new webpack.DllReferencePlugin({
+    //   context: __dirname,
+    //   manifest: require('../dist/manifest.json')
+    // }),
+    // 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

历届学生/罗朝/项目练习/电商App/font-shop/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"'
+})

历届学生/罗朝/项目练习/电商App/font-shop/config/index.js

@@ -0,0 +1,76 @@
+'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: {},
+
+    // 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: false,
+    // 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: false,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css', 'png'],
+
+    // 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
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/config/prod.env.js

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

历届学生/罗朝/项目练习/电商App/font-shop/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
+    <meta content="yes" name="apple-mobile-web-app-capable"/>
+    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
+    <meta content="telephone=no" name="format-detection"/>
+    <!-- 引入自适应类库，不建议在main.js里引入 -->
+    <script src="http://unpkg.com/vue-ydui/dist/ydui.flexible.js"></script>
+    <script src="./static/lib/swiper/swiper.js"></script>
+    <link rel="stylesheet" href="./static/lib/swiper/swiper.css">
+    <title>font-shop</title>
+    <style>
+      #tabs-container {
+        margin-top: 88px;
+      }
+      .tabs {
+        background: #ffffff;
+        width: 100%;
+        height: 38px;
+        overflow: hidden;
+        position: fixed;
+        top: 50px;
+        z-index: 9;
+      }
+      .tabs a {
+        font-weight:normal;
+        text-align:center;
+        float:left;
+        width:64px;
+        height:38px;
+        line-height:38px;
+        color: #383838;
+        text-decoration:none;
+      }
+      .tabs a.active {
+        border-top:2px solid #2a70be;
+        margin-top:-2px;
+        color: red;
+      }
+      .news-list {
+        padding: 10px;
+      }
+      .news-list li {
+        border-bottom:1px solid #eceef0;
+        box-shadow:0 1px 1px #fff;
+        font-weight:normal;
+        font-size:80%;
+      }
+      .swiper-container{
+        overflow: inherit !important;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

历届学生/罗朝/项目练习/电商App/font-shop/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "font-shop",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "bmy <2271608011@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",
+    "dll": " webpack --config webpack.dll.config.js -p"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1",
+    "vue-ydui": "^1.2.6",
+    "vuex": "^3.1.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "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",
+    "compression-webpack-plugin": "^1.1.11",
+    "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",
+    "pug": "^2.0.3",
+    "pug-filters": "^3.1.0",
+    "pug-loader": "^2.4.0",
+    "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"
+  ]
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/App.vue

@@ -0,0 +1,58 @@
+<template lang="pug">
+  #app
+    yd-layout
+      div(v-if="changeHeader == 1")
+        shop-header(:titles="currentTttle" v-if="isClosedHeader")
+      div(v-if="changeHeader == 2")
+        shop-info-header
+      div(v-if="changeHeader == 3")
+        shop-order-header
+      div(:class="{ content: isHaveContent }")
+        router-view
+      shop-footer(v-if="isClosedFooter" @submitTitle="setTitle")
+     
+
+</template>
+
+<script>
+import Header from "./components/tpl/navbar"
+import InfoHeader from "./components/tpl/infoNavBar"
+import orderNavBar from "./components/tpl/orderNavBar"
+import Footer from "./components/tpl/tabbar"
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    ...mapActions({
+      changeTitle: 'SETACTION_CURRENTTITLE'
+    }),
+    setTitle(val) {
+      this.changeTitle(val)
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'isClosedHeader',
+      'isClosedFooter',
+      'isHaveContent',
+      'currentTttle',
+      'changeHeader'
+    ])
+  },
+  components: {
+    'shop-header': Header,
+    'shop-footer': Footer,
+    'shop-info-header': InfoHeader,
+    'shop-order-header': orderNavBar
+  }
+}
+</script>
+
+<style lang="less">
+@import "./assets/less/base.less";
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/api/index.js

@@ -0,0 +1,88 @@
+import axios from "axios";
+import { Toast, Loading } from 'vue-ydui/dist/lib.rem/dialog';
+import config from "../config"
+
+axios.defaults.baseURL = config.ApiUrl.BaseUrl;
+
+// 添加请求拦截器
+axios.interceptors.request.use(function (config) {
+  // 在发送请求之前做些什么
+  Loading.open('正在请求数据...')
+  return config;
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error);
+});
+
+// 添加响应拦截器
+axios.interceptors.response.use(function (response) {
+  // 对响应数据做点什么
+  Loading.close()
+  switch (response.data.status) {
+    case 200:
+      return response.data.data;
+      break;
+    case 404:
+      Toast({
+        mes: `没有请求到数据，错误信息: ${response.data.message}`,
+        timeout: 1500,
+        icon: 'error',
+      })
+      break;
+    default:
+      break;
+  }
+
+  
+}, function (error) {
+  // 对响应错误做点什么
+  Loading.close()
+  Toast({
+    mes: `当前网络不好，请检查2 ${error.message}`,
+    timeout: 1500,
+    icon: 'error',
+  })
+  return Promise.reject(error);
+});
+
+export default {
+  get (url,params) {
+   return new Promise(function(resolve,reject){
+    axios.get(url, {
+      params: params
+    })
+    .then(function (response) {
+      resolve(response);
+    })
+    .catch(function (error) {
+      
+      Loading.close()
+      Toast({
+        mes: `当前网络不好，请检查1 ${error.message}`,
+        timeout: 1500,
+        icon: 'error',
+      })
+      reject(error);
+    });
+   })
+  },
+
+  post (url,params) {
+    return new Promise(function(resolve,reject){
+     axios.post(url, params)
+     .then(function (response) {
+       resolve(response);
+     })
+     .catch(function (error) {
+       
+       Loading.close()
+       Toast({
+         mes: `当前网络不好，请检查1 ${error.message}`,
+         timeout: 1500,
+         icon: 'error',
+       })
+       reject(error);
+     });
+    })
+   }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/api/service.js

@@ -0,0 +1,55 @@
+import http from './index';
+import config from "../config"
+
+export default {
+  /**
+   * 获取首页商品列表
+   * @param {*object} params
+   */
+  async getIndexList(params) {
+    return await http.get(config.ApiUrl.index, params)
+  },
+
+  async getInfo(params) {
+    return await http.get(config.ApiUrl.info, params)
+  },
+
+  async userLogin(params) {
+    return await http.post(config.ApiUrl.login, params)
+  },
+
+  async userReg(params) {
+    return await http.post(config.ApiUrl.reg, params)
+  },
+
+  async addCart(params) {
+    return await http.post(config.ApiUrl.addCart, params)
+  },
+
+  async QueryCart(params) {
+    return await http.post(config.ApiUrl.QueryCart, params)
+  },
+
+  async getCartList(params) {
+    return await http.post(config.ApiUrl.SelectCart, params)
+  },
+
+  async deleteCartList(params) {
+    return await http.post(config.ApiUrl.deleteCartList, params)
+  },
+  async addOrder(params) {
+    return await http.post(config.ApiUrl.addOrder, params)
+  },
+  async selectOrder(params) {
+    return await http.post(config.ApiUrl.selectOrder, params)
+  },
+  async UpdateOrder(params) {
+    return await http.post(config.ApiUrl.UpdateOrder, params)
+  },
+  async getClassInfo(params) {
+    return await http.get(config.ApiUrl.classInfo, params)
+  },
+  async getSearch(params) {
+    return await http.get(config.ApiUrl.search, params)
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/base.less

@@ -0,0 +1,4 @@
+// 对外导出的入口
+@import "./lib/normalize.less";
+@import "./lib/colors.less";
+@import "./lib/mixins.less";

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/components/action.less

@@ -0,0 +1,43 @@
+@import "../import.less";
+
+.user-action {
+  .action-top {
+    .flex-one();
+    height: 4rem;
+    background: linear-gradient(315deg, #e20cd4 0%, #19d1f8 100%);
+    p {
+     color: @ColorWhite;
+     font-size: .32rem;
+     margin-top: .36rem;
+    }
+    .yd-icon-ucenter-outline {
+      color: @ColorWhite;
+    }
+  }
+  .action-login {
+    margin-top: 5%;
+    .action-list {}
+  }
+  .yd-btn-block, .yd-btn-mini {
+    width: 50%;
+    margin-left: 25%;
+    background-color: #FFFFFF !important;
+    font-size: .4rem;
+    font-weight: bolder;
+    color: #000000;
+    box-shadow: darkgrey 0px 0px 20px 5px;
+    margin-top: 10%;
+  }
+  .action-reg {
+    margin-top: 5%;
+  }
+  .tips {
+    position: fixed;
+    bottom: .2rem;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    width: 100%;
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/components/cart.less

@@ -0,0 +1,133 @@
+
+.cart {
+  background: #fff;
+  margin-bottom: 90px;
+  .yd-spinner {
+    margin-top: 5px;
+  }
+  .nodata {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    position: fixed;
+    width: 100%;
+    height: 81%;
+    p {
+      margin-top: 10px;
+      color: #8d8d8d;
+      a {
+        color: red;
+      }
+    }
+  }
+  .delshop {
+    margin-left: -33px;
+    color: red;
+    cursor: pointer;
+  }
+  .shop-item {
+    .items {
+      display: flex;
+      padding: 10px 10px;
+      .checkbox {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        input {
+          width: 23px;
+          height: 23px;
+        }
+      }
+      .content-info {
+        flex-grow: 11;
+        display: flex;
+        img {
+          width: 100px;
+          height: 100px;
+          margin-right: 8px;
+        }
+        .item-right {
+          h3 {
+            color: #505050;
+            font-size: 15px;
+            text-align: justify;
+            font-weight: 800;
+          }
+          p {
+            color: #999;
+            margin: 6px 0;
+          }
+          .price {
+            .now {
+              color: #eb5211;
+            }
+            .old {
+              color: #8c8c8c;
+              text-decoration: line-through;
+              margin-left: 10px;
+            }
+          }
+          .spinner {
+            display: flex;
+            width: 100%;
+            height: 33px;
+            align-items: center;
+            .add {
+
+            }
+            .totals {
+              width: 18%;
+              border: none;
+              border-top: 1px solid #efefef;
+              border-bottom: 1px solid #efefef;
+              height: 19px;
+              text-align: center;
+            }
+            .reduce {
+
+            }
+            .calculation {
+              width: 20px;
+              height: 20px;
+              line-height: 20px;
+              text-align: center;
+              font-size: 17px;
+              background: #efefef;
+            }
+          }
+        }
+      }
+    }
+  }
+  .Settlement {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 1rem;
+    position: fixed;
+    z-index: 50;
+    width: 100%;
+    bottom: 1.15rem;
+    background: #fff;
+    padding: 0 .2rem;
+    border-bottom: 1px #dedada solid;
+  .Settlement p {
+    padding-left: 1.5rem;
+    font-size: .3rem;
+  }
+  .Settlement span {
+    color: red;
+  }
+  .yd-btn-primary {
+      width: 2rem;
+      background: linear-gradient(315deg, #e60d5e 0%, #ec83be 100%);
+      font-size: .38rem;
+      font-weight: bold;
+      height: .85rem;
+  }
+  .yd-btn-block {
+    margin-top: 0;
+  }
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/components/index.less

@@ -0,0 +1,16 @@
+@import "../import.less";
+.index {
+  .banner_class {
+    width: 100%;
+    margin-top: 0.09rem;
+    img {
+      width: 100%;
+    }
+  }
+  .yd-grids-icon {
+    img {
+      width: .8rem;
+      height: .8rem;
+    }
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/components/info.less

@@ -0,0 +1,109 @@
+.m-top {
+  margin-top: .2rem;
+}
+.info {
+  background: #fff;
+  .info-content {
+    padding: 17px;
+    border-top: 1px solid #e0e0e0;
+    .info-title {
+      h2 {
+        font-size: 24px;
+      }
+    }
+    .info-jies {
+      .m-top();
+      color: rgba(0,0,0,.54);
+      font-size: 14px;
+    }
+    .info-price {
+      .m-top();
+      span {
+        font-size: 23px;
+        color: red;
+        em {
+          margin-left: 9px;
+          color: rgba(0, 0, 0, 0.54) !important;
+          font-size: 13px;
+          text-decoration: line-through;
+        }
+      }
+    }
+  }
+  .info-list {
+    font-size: 0;
+    img {
+      width: 100%;
+    }
+  }
+  .shop-action {
+    position: fixed;
+    z-index: 9;
+    bottom: .2rem;
+    left: .2rem;
+    width: 95%;
+    background: #fff;
+    border: .02rem solid #e5e5e5;
+    border-radius: .16rem;
+    overflow: hidden;
+    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.14), 0 1px 10px rgba(0,0,0,.12);
+    display: flex;
+    justify-content: space-between;
+    height: 1.08rem;
+    align-items: center;
+    .action-left {
+      width: 50%;
+      padding-left: 10px;
+      ul {
+        display: flex;
+        flex-direction: row;
+        
+        li {
+          padding: 0 10px;
+          text-align: center;
+          a {
+
+          }
+        }
+      }
+    }
+    .action-right {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding-right: 10px;
+      .addcart {
+        background-image: linear-gradient(to right, #FFC500, #FF9402);
+        color: #fff;
+        text-align: center;
+        width: 108px;
+        height: 33px;
+        line-height: 33px;
+        border-top-left-radius: 25px;
+        border-bottom-left-radius: 25px;
+      }
+      .noAddcart {
+        background-image: linear-gradient(to right, #cccbc8, #bbbab8);
+        color: #fff;
+        text-align: center;
+        width: 108px;
+        height: 33px;
+        line-height: 33px;
+        border-top-left-radius: 25px;
+        border-bottom-left-radius: 25px;
+      }
+      .byshop {
+        background-image: linear-gradient(to right, #FF7A00, #FE560A);
+        color: #fff;
+        text-align: center;
+        width: 108px;
+        height: 33px;
+        line-height: 33px;
+        border-top-right-radius: 25px;
+        border-bottom-right-radius: 25px;
+      }
+    }
+  }
+  
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/components/my.less

@@ -0,0 +1,96 @@
+.mycenter {
+  position: relative;
+  .header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    height: 171px;
+    width: 100%;
+    background-color: #FF5000;
+    background-image: linear-gradient(to right, #FD9126, #FF5000);
+
+    .top-left {
+      display: flex;
+      height: 50px;
+      align-items: center;
+      img {
+        width: 49px;
+        height: 49px;
+        border-radius: 25px
+      }
+      p {
+        font-size: 20px;
+        color: rgb(255, 255, 255);
+        font-weight: bolder;
+        margin-left: 11px;
+      }
+    }
+  }
+  .myorder {
+    position: relative;
+    width: 351px;
+    background: #fff;
+    height: 115px;
+    margin-left: 12px;
+    margin-right: 12px;
+    top: -41px;
+    padding: 11px;
+    border-radius: 12px;
+    .title{
+      overflow: hidden;
+      h2 {
+        font-size: 14px;
+        color: rgb(51, 51, 51);
+        font-weight: bold;
+        float: left;
+      }
+      span {
+        float: right;
+        top: 12px;
+        color: rgb(153, 153, 153);
+        .right-icon{
+          margin-top: 4px;
+          color: rgb(153, 153, 153) !important;
+          font-size: 12px;
+        }
+      }
+    }
+    .order-f {
+      display: flex;
+      justify-content: space-around;
+      margin-top: 17px;
+      li {
+        text-align: center;
+        img {
+          width: 29px;
+          height: 29px;
+        }
+        p {
+          color: rgb(102, 102, 102);
+          font-size: 12px;
+        }
+      }
+    }
+  }
+  .setting-list {
+    background: #fff;
+    position: relative;
+    top: -24px;
+    width: 94%;
+    margin: 0 auto;
+    border-radius: 12px;
+    .yd-flexbox {
+      padding: 10px;
+      .yd-flexbox-item {
+        margin-left: 10px;
+      }
+    }
+
+  }
+  .yd-btn-block {
+    margin-top: 0 !important;
+    background-color: #FF5000;
+    background-image: linear-gradient(to right, #FD9126, #FF5000);
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/components/order.less

@@ -0,0 +1,238 @@
+.order {
+  .Settlement {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    height: 1rem;
+    position: fixed;
+    z-index: 50;
+    width: 100%;
+    bottom: 0;
+    background: #fff;
+    padding: 0 .2rem;
+    border-bottom: 1px #dedada solid;
+
+    p {
+      padding-left: 1.5rem;
+      font-size: .3rem;
+      margin-right: 10px;
+    }
+
+    span {
+      color: red;
+    }
+    .yd-btn-primary {
+      width: 2rem;
+      background: linear-gradient(315deg, #e60d5e 0%, #ec83be 100%);
+      font-size: .38rem;
+      font-weight: bold;
+      height: .85rem;
+    }
+    .yd-btn-block {
+      margin-top: 0;
+    }
+  }
+  .address {
+    display: flex;
+    justify-content: space-between;
+    width: 92%;
+    margin: 10px auto;
+    height: 80px;
+    align-items: center;
+    background: #fff;
+    border-radius: 11px;
+    padding: 0 6px;
+    margin-top: 61px;
+    .location {
+      flex-grow: 1;
+      color: rgb(255, 128, 0);
+    }
+    .address-info {
+      flex-grow: 11;
+      margin-left: 10px;
+      h3 {
+        color: rgb(51, 51, 51);
+        font-size: 15px;
+        span {
+          color: rgb(153, 153, 153);
+          font-size: 13px;
+          margin-left: 5px;
+        }
+      }
+      p {
+        font-size: 13px;
+        color: rgb(51, 51, 51);
+      }
+    }
+    .moreinfo {
+      flex-grow: 1;
+      color: rgb(220, 220, 220);
+    }
+  }
+  .order-list{
+    width: 92%;
+    margin: 0 auto;
+  }
+  .yd-list-theme4 {
+    padding: 5px 9px;
+    background-color: #fff;
+    border-radius: 10px;
+  }
+  .demo-list-price {
+    color: red;
+    display: inline-block;
+    margin-top: 5px;
+  }
+  .nums {
+    margin-top: 5px;
+    float: right;
+  }
+  .demo-list-del-price {
+    margin-top: 5px;
+    display: inline-block;
+    color: rgb(156, 156, 156);
+    margin-left: 5px;
+  }
+  .wxpay {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.4);
+    top: 0;
+    left: 0;
+    .wxpay-pas {
+      position: absolute;
+      z-index: 9999;
+      background: #f8f8f8;
+      width: 88%;
+      height: 241px;
+      left: 50%;
+      margin-left: -44%;
+      top: 25px;
+      .top-one {
+        border-bottom: 1px solid #c9daca;
+        overflow: hidden;
+        .closed {
+          width: 10%;
+          padding: 10px 0;
+          float: left;
+        }
+        .pas-user{
+          img {
+            width: 10%;
+            padding: 10px 0;
+            float: left;
+          }
+          span {
+            padding: 15px 5px;
+            font-size: 16px;
+            float: left;
+          }
+        }
+      }
+      .price {
+        text-align: center;
+        font-size: 12px;
+        padding: 10px 0;
+        overflow: hidden;
+        p {
+          font-size: 14px;
+          float: left;
+          width: 100%;
+        }
+        span {
+          font-size: 24px;
+          float: left;
+          width: 100%;
+        }
+      }
+      .cart-list {
+        width: 89%;
+        margin: 0 auto;
+        line-height: 40px;
+        display: block;
+        color: #636363;
+        font-size: 16px;
+        padding: 5px 0;
+        overflow: hidden;
+        border-bottom: 1px solid #e6e6e6;
+        border-top: 1px solid #e6e6e6;
+        img {
+          height: 38px;
+        }
+        span {
+          margin-left: 5px;
+        }
+        .fr {
+          float: right;
+        }
+        .fl {
+          float: left;
+        }
+      }
+      .mm_box{
+        width: 89%;
+        margin: 10px auto;
+        height: 40px;
+        overflow: hidden;
+        border: 1px solid #bebebe;
+        li {
+          border-right: 1px solid #efefef;
+          height: 40px;
+          float: left;
+          width: 16.3%;
+          background: #fff;
+        }
+      }
+    }
+    .on {
+      background: #fff url("../../../../static/img/dd_03.jpg") center no-repeat !important;
+      background-size: 25% !important;
+    }
+    .nul {
+      background: #e0e0e0;
+    }
+    .del {
+      background: #e0e0e0 url("../../../../static/img/jftc_18.jpg")  center no-repeat;
+      background-size: 30%;
+    }
+    .wxpay-key {
+      position: absolute;
+      z-index: 10;
+      height: 230px;
+      background: #f5f5f5;
+      width: 100%;
+      bottom: 0;
+      .xiaq_tb {
+        padding: 5px 0;
+        text-align: center;
+        border-top: 1px solid #dadada;
+        img {
+          vertical-align: middle;
+          height: 10px;
+        }
+      }
+      .nub_ggg {
+        border: 1px solid #dadada;
+        overflow: hidden;
+        border-bottom: 0;
+        li {
+          width: 33.3333%;
+          border-bottom: 1px solid #dadada;
+          float: left;
+          text-align: center;
+          font-size: 22px;
+          color: #000;
+          height: 51px;
+          line-height: 51px;
+          overflow: hidden;
+          border-right: 1px solid #dadada;
+          &:nth-child(3){
+            border-right: none;
+          }
+        }
+      }
+    }
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/import.less

@@ -0,0 +1,2 @@
+@import './lib/colors.less';
+@import './lib/mixins.less';

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/lib/colors.less

@@ -0,0 +1,3 @@
+// css 全局颜色配置
+@ColorRed: green;
+@ColorWhite: #fff;

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/lib/mixins.less

@@ -0,0 +1,7 @@
+// css 公共函数
+.flex-one () {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/assets/less/lib/normalize.less

@@ -0,0 +1,431 @@
+/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ */
+
+ .content {
+   margin-top: 1.0rem;
+   margin-bottom: 1.0rem;
+ }
+ .router-link-exact-active {
+   color: red !important;
+ }
+
+ .index .yd-grids-txt {
+  margin-top: 10px;
+}
+
+ html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+article,
+aside,
+details, /* 1 */
+figcaption,
+figure,
+footer,
+header,
+main, /* 2 */
+menu,
+nav,
+section,
+summary { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Add the correct display in IE 10-.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+select,
+textarea {
+  font: inherit; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Restore the font weight unset by the previous rule.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/404.vue

@@ -0,0 +1,34 @@
+<template lang="pug">
+  .error
+    h2 404页面
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+export default {
+  created() {
+  },
+  methods: {
+    ...mapActions({
+      changeHeader: 'SETACTION_CLOSEDHEADER',
+      changeFooter: 'SETACTION_CLOSEDFOOTER',
+      changeContent: 'SETACTION_CONTENT'
+    })
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.changeFooter(false)
+      vm.changeHeader(false)
+    })
+  },
+  beforeRouteLeave (to, from, next) {
+    this.changeFooter(true)
+    this.changeHeader(true)
+    next()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/infoNavBar.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+  .InfoNavBar
+    yd-navbar-back-icon(@click.native="$utils.goBack()" class="back")
+    yd-icon(name='shopcart-outline', size='17px', color='#777'  class="cart" @click.native="goCart")
+</template>
+
+<script>
+export default {
+  methods: {
+    goCart() {
+      location.href = "#/cart"
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.InfoNavBar {
+  display: flex;
+  height: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 13px;
+  padding-top: .2rem;
+  position: fixed;
+  width: 100%;
+  top:0;
+  bottom: 0;
+  z-index: 9;
+  .back,
+  .cart {
+    width: .8rem;
+    height: .8rem;
+    line-height: .8rem;
+    text-align: center;
+    border-radius: 100%;
+    background: rgba(0, 0, 0, 0.16);
+  }
+}
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/navbar.vue

@@ -0,0 +1,22 @@
+<template lang="pug">
+  .shop-header
+    yd-navbar(slot='navbar', :title='titles' fixed)
+      router-link(to='/my', slot='left')
+        yd-icon(name='ucenter-outline', size='25px', color='#777')
+      router-link(to='/search', slot='right')
+        yd-icon(name='search', size='25px', color='#777')
+        
+</template>
+
+<script>
+export default {
+  props: {
+    titles: String
+  }
+}
+</script>
+
+
+<style lang="less" scoped>
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/orderItem.vue

@@ -0,0 +1,81 @@
+<template lang="pug">
+    .orderItem
+      div.error(v-if="listdata.length == 0")
+        yd-icon(name='shopcart-outline')
+        h2 没有数据
+      div(v-else)
+        li(v-for='(item, key) in listdata', :key='key' @click="enterInfo(item.id)")
+          yd-list(theme='4')
+            yd-list-item
+              img(slot='img', :src='item.commodity_thumbnail')
+              span(slot='title') {{item.commodity_name}}
+              yd-list-other(slot='other')
+                div
+                  span.demo-list-price
+                    em ¥
+                    | {{item.commodity_nowprice}}
+                  span.demo-list-del-price ¥{{item.commodity_oldprice}}
+                yd-button(type="primary" v-if="item.order_status == 0" @click.native="enterPay(item,key)") 去付款
+                yd-button(type="danger" v-else-if="item.order_status == 1" @click.native="confirmGoods(item,key)") 确认收货
+                div(v-if="item.order_status == 2") 已完成
+</template>
+
+<script>
+  export default {
+    props: {
+      listdata: Array,
+      showButton: Boolean
+    },
+    data () {
+      return {
+        isClick: true,
+        userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+      }
+    },
+    methods: {
+      enterInfo(id) {
+        if (this.isClick) {
+          this.$router.push({ name: 'info', params: { id: id } })
+        } else {
+          this.isClick = true
+        }
+      },
+      enterPay() {
+        this.isClick = false
+        this.$router.push({ name: 'cart'})
+
+      },
+      // 确认收货按钮被点击
+      async confirmGoods(item,index) {
+        this.isClick = false
+        this.$dialog.confirm({
+          title: '提示',
+          mes: '确认您已经收到货物并检查过货物无损坏，点击确定 [确认收货]',
+          opts: async () => {
+            await this.$http.UpdateOrder({
+              userid: this.userInfo.id,
+              status: Number(item.order_status) + 1,
+              oid: item.oid
+            });
+            this.listdata.splice(index,1)
+          }
+        });
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+.error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  h2 {
+    margin-top: 8px;
+    color: #8e8b8b;
+  }
+}
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/orderNavBar.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+  yd-navbar(title='确认订单' fixed)
+    router-link(to='', slot='left')
+      yd-navbar-back-icon(@click.native="goBack")
+
+</template>
+
+<script >
+  export default {
+    methods: {
+      goBack(){
+        this.$router.back()
+      }
+    },
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/swiper.vue

@@ -0,0 +1,19 @@
+<template lang="pug">
+  .swiper
+    yd-slider(autoplay='3000')
+      yd-slider-item(v-for="(item,index) in SwiperList" :key="index")
+        a(:href='item.href')
+          img(:src='item.path ? item.path : item.url')
+</template>
+
+<script>
+export default {
+  props: {
+    SwiperList: Array
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/tpl/tabbar.vue

@@ -0,0 +1,31 @@
+<template lang="pug">
+  .footer
+    yd-tabbar(slot='tabbar' fixed)
+      yd-tabbar-item(v-for="(item,index) in $conf.TabBar" 
+                     :title='item.title'
+                     :link='item.path' 
+                     :key="index"
+                     @click.native="submitClick(item.title)")
+        yd-icon(:name='item.icon', slot='icon')
+        
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    submitClick (title) {
+      this.$emit('submitTitle', title)
+    }
+  },
+}
+</script>
+
+
+<style lang="less" scoped>
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/Index.vue

@@ -0,0 +1,100 @@
+<template lang="pug">
+  .index
+    shop-swiper(:SwiperList="SwiperData")
+    yd-grids-group(:rows='3')
+      yd-grids-item(v-for="(item,index) in classInfo"
+                    :key="index"
+                    @click.native="enterClassInfo(item.title)")
+        img(slot="icon" :src="item.imgurl")
+        span(slot='text') {{ item.title }}
+
+    .banner_class
+      img(src='@/assets/img/banner_class.jpg')
+    yd-list(theme='2')
+      yd-list-item(v-for='item, key in HomeShopList', :key='key' :href=" '/info/' + item.id" type="link")
+        img(slot='img', :src='item.commodity_thumbnail')
+        span(slot='title') {{item.commodity_name}}
+        yd-list-other(slot='other')
+          div
+            div {{ item.commodity_content | sub }}...
+            span.demo-list-price
+              em ¥
+              | {{item.commodity_nowprice}}
+            span.demo-list-del-price ¥{{item.commodity_oldprice}}
+            
+
+</template>
+
+<script>
+import SwiperComponents from '../tpl/swiper';
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      classInfo: [
+        { title: '小米', imgurl: require('../../assets/img/mi.png') },
+        { title: '锤子', imgurl: require('../../assets/img/chuizi.png') },
+        { title: '华为', imgurl: require('../../assets/img/huawei.png') },
+        { title: '三星', imgurl: require('../../assets/img/sanxing.png') },
+        { title: '苹果', imgurl: require('../../assets/img/iphone.png') },
+        { title: '一加', imgurl: require('../../assets/img/yijia.png') }
+      ],
+      SwiperData: [
+        { href: '#', path: require('../../assets/img/banner_1.jpg') },
+        { href: '#', path: require('../../assets/img/banner_2.jpg') }
+      ]
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // 通过 `vm` 访问组件实例
+      vm.changeHeaderStyle(1)
+      vm.changeContent(true)
+    })
+  },
+  created() {
+    if(this.HomeShopList.length == 0) {
+      this.getIndex()
+    }
+
+  },
+  methods: {
+    enterClassInfo(title) {
+      this.$router.push({ name: 'classinfo', query: { id: title } })
+    },
+    ...mapActions({
+      getIndex: 'getIndex',
+      changeHeader: 'SETACTION_CLOSEDHEADER',
+      changeFooter: 'SETACTION_CLOSEDFOOTER',
+      changeContent: 'SETACTION_CONTENT',
+      changeHeaderStyle: 'CHANGE_HADER'
+    })
+  },
+  computed: {
+    ...mapGetters([
+      'HomeShopList'
+    ])
+  },
+  components: {
+    'shop-swiper': SwiperComponents
+  },
+  filters: {
+    sub(val) {
+      val == null ? val = "" : val
+      return val.substring(0,30)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="less" scoped>
+@import "../../assets/less/components/index.less";
+.yd-grids-3:before,
+.yd-grids-3 .yd-grids-item:not(:nth-child(3n)):before,
+.yd-grids-item:after {
+  content: none
+}
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/cart.vue

@@ -0,0 +1,199 @@
+<template lang="pug">
+  .cart
+    .shop-item
+      div(v-if="ListData.length != 0")
+        .items(v-for="(item,index) in ListData" :key="index")
+          .checkbox
+            input(type="checkbox" v-model="item.state" @click="SelectShop(item,index)")
+          .content-info
+            img(:src="item.commodity_thumbnail")
+            .item-right
+              h3 {{ item.commodity_name }}
+              p {{ item.commodity_content | SubContent }}
+              .price
+                span.now {{ item.commodity_nowprice }}
+                span.old {{ item.commodity_oldprice }}
+              .spinner
+                .reduce.calculation(@click="reduce(item)") -
+                input(class="totals" type="number" v-model="item.cart_nums")
+                .add.calculation(@click="add(item)") +
+      div.nodata(v-else)
+        yd-icon(name="shopcart-outline" size="40px")
+        p 空空如也，去
+         a(href="#/index") 首页
+         | 看看
+
+    //购物车价格合计  固定在底部
+    .Settlement
+      span
+        input(type="checkbox" v-model="isall" @click="allchioose")
+        |  全选
+      span.delshop(@click="DeleteShop") 删除
+      p 共计{{ TotalNums }}件 总计:
+        span ￥{{ TotalsMoney }}
+      yd-button(size='large', type='primary', shape='circle', @click.native="enterCart") 结算
+
+</template>
+
+<script>
+  import { mapGetters, mapActions } from 'vuex'
+export default {
+  data() {
+    return {
+      ListData: [],
+      NewsData: [],
+      deleteIndex: [],
+      isall: false,
+      userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+    }
+  },
+  created() {
+    this.getCartList();
+    this.fetchData()
+    console.log(this.HomeShopList)
+  },
+  computed: {
+    ...mapGetters([
+      'HomeShopList'
+    ]),
+    TotalsMoney () {
+      let price = 0;
+      this.NewsData.forEach(item => {
+        price += item.cart_nums * item.commodity_nowprice
+      });
+      return price;
+    },
+    TotalNums () {
+      let cart_nums = 0;
+      this.NewsData.forEach(item => {
+        cart_nums += Number(item.cart_nums)
+      });
+      return cart_nums;
+    }
+  },
+  methods: {
+    ...mapActions({
+      setCartData: 'SETACTION_CARTDATA',
+      changeHeader: 'SETACTION_CLOSEDHEADER',
+      changeFooter: 'SETACTION_CLOSEDFOOTER',
+      changeContent: 'SETACTION_CONTENT',
+      changeHeaderStyle: 'CHANGE_HADER'
+    }),
+    enterCart() {
+      if(this.NewsData.length == 0) {
+        this.$dialog.toast({
+          mes: '请先选择需要购买的商品',
+          timeout: 1500,
+          icon: 'error'
+        });
+      }else {
+        this.setCartData(this.NewsData)
+        this.$router.push({ name: 'order' })
+      }
+
+    },
+    fetchData () {
+      this.changeContent(false)
+      this.changeHeader(false)
+      this.changeHeaderStyle(1)
+    },
+
+    async DeleteShop(){
+      await this.$http.deleteCartList({ cartdata : this.NewsData });
+      for (let len = this.ListData.length -1; len>= 0; len--) {
+        for (let j = 0; j < this.deleteIndex.length; j++) {
+          if (len == this.deleteIndex[j]) {
+            this.ListData.splice(len, 1)
+            this.deleteIndex.splice(j, 1)
+            continue;
+          }
+        }
+      }
+      this.NewsData = []
+    },
+
+    allchioose() {
+      this.isall = !this.isall;
+      this.NewsData = []
+      if(this.isall) {
+        this.NewsData = this.ListData
+        this.NewsData.forEach( (val,index) => {
+          val.state = true
+          this.deleteIndex.push(index)
+        })
+      } else {
+        this.ListData.forEach( val => val.state = false)
+      }
+
+    },
+    SelectShop (shop,index) {
+      shop.state = !shop.state;
+      if(shop.state) {
+        if(this.NewsData.indexOf(shop) > -1) {
+
+        }else {
+          this.NewsData.push(shop)
+          this.deleteIndex.push(index)
+          console.log("需要删除的元素：", this.deleteIndex)
+        }
+      } else {
+
+        this.NewsData.splice(this.NewsData.indexOf(shop),1)
+        this.deleteIndex.forEach((value,key) => value == index ? this.deleteIndex.splice(key,1) : '')
+        console.log("需要删除的元素 false：", this.deleteIndex)
+      }
+    },
+    async getCartList () {
+      let list = await this.$http.getCartList({
+        user_id: this.userInfo.id
+      });
+      if (list != undefined) {
+        list.forEach(val => val.state = false);
+        this.ListData = list;
+      } else {
+        this.ListData = []
+      }
+    },
+    reduce (cart) {
+      if(cart.cart_nums <= 1) {
+        cart.cart_nums = 1
+      } else {
+        cart.cart_nums--
+      }
+    },
+    add(cart) {
+      if(cart.commodity_stock == 0) {
+        alert('该删除已经卖完了')
+      } else {
+        if(cart.cart_nums > cart.commodity_stock) {
+          cart.cart_nums = cart.commodity_stock
+        } else {
+          cart.cart_nums++
+        }
+      }
+    }
+  },
+  filters: {
+    SubContent(value) {
+      return value.substring(0,21) + '...'
+    }
+  },
+
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.changeContent(false)
+      vm.changeHeader(false)
+    })
+  },
+   beforeRouteLeave (to, from, next) {
+     this.changeContent(true)
+     this.changeHeader(true)
+    next()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/components/cart.less";
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/classInfo.vue

@@ -0,0 +1,69 @@
+<template lang="pug">
+    .classInfo
+      yd-navbar(title='分类')
+        router-link(to='#', slot='left')
+          yd-navbar-back-icon(@click.native="goBack")
+
+      yd-list(theme='3')
+        yd-list-item(v-for='(item, key) in listData', :key='key'
+                    @click.native="enterInfo(item)")
+          img(slot='img', :src='item.commodity_thumbnail')
+          span(slot='title') {{item.commodity_name}}
+          yd-list-other(slot='other')
+            div
+              span.demo-list-price
+                em ¥
+                | {{item.commodity_nowprice}}
+              span.demo-list-del-price ¥{{item.commodity_oldprice}}
+              div {{ item.commodity_content.substring(0,10) }}
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+  export default {
+    data () {
+      return {
+        id: this.$route.query.id,
+        listData: []
+      }
+    },
+    created () {
+      this.getClassInfo()
+    },
+    methods: {
+       goBack(){
+        this.$router.back()
+      },
+      ...mapActions({
+        changeHeader: 'SETACTION_CLOSEDHEADER',
+        changeFooter: 'SETACTION_CLOSEDFOOTER',
+        changeContent: 'SETACTION_CONTENT',
+        setSwiperIndex: 'SETACTION_SWIPERINDEX'
+      }),
+      enterInfo(item) {
+        this.$router.push({ name: 'info', params: { id: item.id } })
+      },
+      async getClassInfo() {
+        let data = await this.$http.getClassInfo({ brand : this.id })
+        this.listData = data
+      }
+    },
+    beforeRouteEnter (to, from, next) {
+      next(vm => {
+        vm.changeHeader(false)
+        vm.changeFooter(false)
+        vm.changeContent(false)
+      })
+    },
+    beforeRouteLeave (to, from, next) {
+      this.changeHeader(true)
+      this.changeFooter(true)
+      this.changeContent(false)
+      next()
+    },
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/info.vue

@@ -0,0 +1,127 @@
+<template lang="pug">
+  .info
+    shop-swiper(:SwiperList="SwiperList")
+    .info-content
+      .info-title
+        h2 {{ shopTitle }}
+      .info-jies {{ shopContent }}
+      .info-price
+        span
+         | ￥{{ shopNowPrice }}
+         em ￥{{ shopOldPrice }}
+
+    yd-lightbox(class="info-list")
+      yd-lightbox-img(v-for="(item, index) in ListImg" 
+          :src="item.url" :key="index")
+    .shop-action
+      .action-left
+        ul
+         li
+          yd-icon(size="23px" name="home-outline")
+          p 
+           a(href="#/index") 首页
+         li
+          yd-icon(size="23px" name='shopcart-outline')
+          p 
+           a(href="#/cart") 购物车
+         li
+          yd-icon(size="23px" name='star-outline')
+          p 
+           a 收藏   
+      .action-right
+        div(:class="isAddCart ? 'addcart' : 'noAddcart' " )(@click="isAddCart ? addCart(false) : '' ") {{ isAddCart ? "加入购物车" : "已添加"  }}
+        .byshop(@click="addCart(true)") 立即购买
+</template>
+
+<script>
+import Swiper from "../tpl/swiper"
+import { mapActions } from 'vuex'
+export default {
+  data() {
+    return {
+      shopTitle: null,
+      shopContent: null,
+      shopNowPrice: null,
+      shopOldPrice: null,
+      SwiperList: [],
+      ListImg: [],
+      isAddCart: true,
+      userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // 通过 `vm` 访问组件实例
+      vm.changeHeaderStyle(2)
+      vm.changeContent(false)
+      vm.changeFooter(false)
+    })
+  },
+  beforeRouteLeave (to, from, next) {
+    this.changeFooter(true)
+    this.changeHeaderStyle(1)
+    this.changeContent(true)
+    next()
+  },
+  created() {
+    
+    this.getInfo()
+    this.QueryCart()
+  },
+  methods: {
+    ...mapActions({
+      changeHeader: 'SETACTION_CLOSEDHEADER',
+      changeFooter: 'SETACTION_CLOSEDFOOTER',
+      changeHeaderStyle: 'CHANGE_HADER',
+      changeContent: 'SETACTION_CONTENT'
+    }),
+    async QueryCart() {
+      let queryStatus = await this.$http.QueryCart({
+        user_id: this.userInfo.id,
+        commodity_id: this.$route.params.id
+      });
+      console.log(queryStatus)
+      if(queryStatus == "不可收藏") {
+        this.isAddCart = false;
+      }
+    },
+    async addCart (sta) {
+      
+      if(localStorage.getItem("status") != null) {
+        if(this.userInfo.hasOwnProperty("user_money")) {
+          let addStatus = await this.$http.addCart({
+            user_id: this.userInfo.id,
+            commodity_id: this.$route.params.id
+          });
+          this.isAddCart = false;
+          sta ? this.$router.push({ name: 'cart' }) : ''
+          console.log(addStatus)
+        } else {
+          console.log("提示第三方破解者不要做非法尝试") 
+        }
+      }else {
+        this.$router.push({ name: 'action', query: { from: `/info/${this.$route.params.id}` } })
+      }
+      //await this.$http.addCart() 
+    },
+    async getInfo () {
+     let data = (await this.$http.getInfo({ id: this.$route.params.id }))[0]
+     console.log(data)
+     this.shopTitle = data.commodity_name
+     this.shopContent = data.commodity_content
+     this.shopNowPrice = data.commodity_nowprice
+     this.shopOldPrice = data.commodity_oldprice
+     this.SwiperList = JSON.parse(data.commodity_main)
+     this.ListImg = JSON.parse(data.commodity_attachimg)
+    }
+  },
+  components: {
+    'shop-swiper': Swiper
+  }
+}
+</script>
+
+<style lang="less" scope>
+@import "../../assets/less/components/info.less";
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/my.vue

@@ -0,0 +1,134 @@
+<template lang="pug">
+  .mycenter
+    .header-top
+      .top-left
+         img(src="../../../static/img/useravater.png")
+         p {{ userInfo != null ? `${userInfo.user_nicname} ￥${userInfo.user_money}`  : '没有登录' }}
+    .myorder
+      .title
+        h2 我的订单
+        span(@click="enterPage(-1)")
+         | 查看全部订单
+         yd-navbar-next-icon.right-icon
+      ul.order-f
+        li(v-for="(item,index) in order" :key="index" @click="enterPage(item.status + 1)")
+          img(:src="item.imgURL")
+          p {{ item.title }}
+
+    .setting-list
+      yd-flexbox(@click.native="contact()")
+        div
+          yd-icon(name='phone1' size="20px" color="#8d8d8d")
+        yd-flexbox-item 联系我们
+        div
+          yd-navbar-next-icon
+      yd-flexbox
+        div
+          yd-icon(name='ucenter-outline' size="20px" color="#8d8d8d")
+        yd-flexbox-item 关于我们
+        div
+          yd-navbar-next-icon
+      yd-flexbox(@click.native="clearData")
+        div
+          yd-icon(name='delete' size="20px" color="#8d8d8d")
+        yd-flexbox-item 清空缓存
+        div
+          yd-navbar-next-icon
+      yd-flexbox(@click.native="updateApp")
+        div
+          yd-icon(name='download' size="20px" color="#8d8d8d")
+        yd-flexbox-item 监测升级
+        div
+          yd-navbar-next-icon
+      yd-flexbox
+        div
+          yd-icon(name='feedback' size="20px" color="#8d8d8d")
+        yd-flexbox-item 使用协议
+        div
+          yd-navbar-next-icon
+      yd-flexbox
+        div
+          yd-icon(name='good' size="20px" color="#8d8d8d")
+        yd-flexbox-item 意见反馈
+        div
+          yd-navbar-next-icon
+
+    yd-button-group
+     yd-button(size='large', type='danger', shape="circle", @click.native="logout") 退出登录
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+  export default {
+    data () {
+      return {
+        order: [
+          { title: '待付款', imgURL: require("../../../static/img/waitpay.png"), status: 0 },
+          { title: '已发货', imgURL: require("../../../static/img/waitfa.png"), status: 1 },
+          { title: '已完成', imgURL: require("../../../static/img/success.png"), status: 2 }
+        ],
+        userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+      }
+    },
+    created () {
+    },
+    methods: {
+      clearData() {
+        this.$dialog.confirm({
+          title: '清空缓存',
+          mes: '清空缓存信息将丢失您的登录状态，确定清楚吗？',
+          opts: () => {
+            localStorage.clear();
+            this.$router.push({ name: 'index' })
+          }
+        });
+      },
+      contact() {
+        this.$dialog.confirm({
+          title: '联系我们',
+          mes: '亲，在使用过程中有任何问题都可以联系客服电话：15155145354！',
+          opts: () => {
+            location.href = "tel:15155145354"
+          }
+        });
+      },
+      updateApp() {
+        this.$dialog.toast({
+          mes: '当前已经是最新版！',
+          timeout: 1500
+        });
+      },
+      ...mapActions({
+        changeHeader: 'SETACTION_CLOSEDHEADER',
+        changeFooter: 'SETACTION_CLOSEDFOOTER',
+        changeContent: 'SETACTION_CONTENT',
+        setSwiperIndex: 'SETACTION_SWIPERINDEX'
+      }),
+      enterPage(status) {
+        this.setSwiperIndex(status)
+        this.$router.push({ name: 'orderStatus' })
+      },
+      // 退出登录
+      logout() {
+        localStorage.removeItem("status")
+        this.$router.push({ name: 'index' })
+      }
+    },
+    beforeRouteEnter (to, from, next) {
+      next(vm => {
+        // 通过 `vm` 访问组件实例
+        vm.changeContent(false)
+        vm.changeHeader(false)
+      })
+    },
+    beforeRouteLeave (to, from, next) {
+      this.changeContent(true)
+      this.changeHeader(true)
+      next()
+    },
+  }
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/components/my.less";
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/order.vue

@@ -0,0 +1,196 @@
+<template lang="pug">
+   .order
+     .wxpay(v-if="hiddenProp")
+       .wxpay-pas
+         .top-one
+           img(@click="closedProp" class="closed" src="../../../static/img/xx_03.jpg")
+           .pas-user
+             img(src="../../../static/img/jftc_03.jpg")
+             span 请输入支付密码
+         .price
+           p 创想网络科技有限公司
+           span ￥ 1199
+         .cart-list
+           img(class="fl" src="../../../static/img/ye.png")
+           span.fl 余额
+           img(class="fr" src="../../../static/img/jftc_09.jpg")
+         ul.mm_box
+           li(v-for="(item,index) in pas" :key="index" :class=" item ? 'on': '' ")
+       .wxpay-key
+         .xiaq_tb
+           img(src="../../../static/img/jftc_14.jpg" @click="hiddenKey")
+
+         ul.nub_ggg
+           li(v-for="(item,index) in keyList"
+              :key="index"
+              :class="index == 9 ? 'nul' :  index == 11 ? 'del' : '' "
+              @click="index == 11 ? deletePas() : index == 9 ? '' : addPas() " ) {{ item.title }}
+
+
+     .address
+       yd-icon(class="location" name='location' size="40px")
+       .address-info
+         h3
+          | 刘兵
+          span 15155145354
+         p 安徽省合肥市蜀山区少时诵诗书所安徽省合肥市蜀山区少时诵
+       yd-navbar-next-icon.moreinfo
+
+     .order-list
+       yd-list(theme='4')
+         yd-list-item(v-for='(item, key) in CartData', :key='key')
+           img(slot='img', :src='item.commodity_thumbnail')
+           span(slot='title') {{ item.commodity_name }}
+           yd-list-other(slot='other')
+             div
+               p {{ item.commodity_content | SubContent }}
+               span.demo-list-price ¥{{ item.commodity_nowprice }}
+               span.demo-list-del-price ¥{{ item.commodity_oldprice }}
+               p.nums x{{ item.cart_nums }}
+
+     .Settlement
+       p 共计 {{ TotalNums }} 件 总计:
+         span ￥ {{ TotalMoney }}
+       yd-button(size='large', type='primary', shape='circle' @click.native="submitOrder") 结算
+
+</template>
+
+<script>
+  import { mapActions, mapGetters } from 'vuex'
+  export default {
+    created() {
+      console.log(this.CartData)
+    },
+    data() {
+      return {
+        index: 0,
+        pas: [false,false,false,false,false,false],
+        keyList: [
+          { title: 1 },{ title: 2 },{ title: 3 },{ title: 4 },
+          { title: 5 },{ title: 6 },{ title: 7 },{ title: 8 },
+          { title: 9 },{ title: '' },{ title: 0 },{ title: '' }
+        ],
+        OrderList: [],
+        hiddenProp: false,
+        userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+      }
+    },
+    methods: {
+      hiddenKey () {
+        this.hiddenProp = !this.hiddenProp
+      },
+      closedProp() {
+        this.hiddenProp = !this.hiddenProp
+      },
+      addPas() {
+        this.index++;
+        if (this.index <6) {
+          this.pas[this.index - 1] = true;
+          this.$forceUpdate();
+        } else {
+          this.pas[this.index - 1] = true;
+          this.$forceUpdate();
+
+          setTimeout(async () => {
+            console.log("密码输入完成提交订单")
+            this.OrderList.forEach(val => {
+              val.orderStatus = 1
+            });
+
+            try {
+              await this.$http.addOrder({ orderdata : this.OrderList });
+              this.$dialog.toast({
+                mes: '购买成功',
+                timeout: 1500,
+                icon: 'success',
+                callback: async () => {
+                  await this.$http.deleteCartList({ cartdata : this.CartData });
+                  this.setCartData([]);
+                  this.$router.push({ name: 'orderStatus' })
+                }
+              });
+            } catch (e) {
+              this.$dialog.toast({
+                mes: `购买失败: ${e.message}`,
+                timeout: 1500,
+                icon: 'error'
+              });
+            }
+
+          }, 500);
+        }
+      },
+      deletePas() {
+        if (this.index > 0) {
+          this.index--;
+          this.pas[this.index] = false;
+          this.$forceUpdate();
+        }
+      },
+      submitOrder() {
+        this.CartData.forEach(val => {
+          this.OrderList.push({
+            userId: this.userInfo.id,
+            shopId: val.id,
+            orderNumber: Date.parse(new Date()),
+            orderStatus: 0,
+            orderTotal: val.cart_nums * val.commodity_nowprice,
+            orderSize: val.cart_nums,
+          });
+
+        });
+        this.hiddenProp = !this.hiddenProp;
+      },
+      ...mapActions({
+        setCartData: 'SETACTION_CARTDATA',
+        changeHeader: 'SETACTION_CLOSEDHEADER',
+        changeFooter: 'SETACTION_CLOSEDFOOTER',
+        changeContent: 'SETACTION_CONTENT',
+        changeHeaderStyle: 'CHANGE_HADER'
+      })
+    },
+    filters: {
+      SubContent(value) {
+        return value.substring(0,21) + '...'
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'CartData'
+      ]),
+      TotalMoney() {
+        let price = 0;
+        this.CartData.forEach(item => {
+          price += item.cart_nums * item.commodity_nowprice
+        });
+        return price;
+      },
+      TotalNums () {
+        let cart_nums = 0;
+        this.CartData.forEach(item => {
+          cart_nums += Number(item.cart_nums)
+        });
+        return cart_nums;
+      }
+    },
+    beforeRouteEnter (to, from, next) {
+      next(vm => {
+        vm.changeHeaderStyle(3)
+        vm.changeContent(true)
+        vm.changeFooter(false)
+        vm.changeHeader(false)
+      })
+    },
+    beforeRouteLeave (to, from, next) {
+      this.changeHeader(false)
+      this.changeContent(false)
+      this.changeFooter(true)
+
+      next()
+    }
+  }
+</script>
+
+<style scoped lang="less">
+@import "../../assets/less/components/order.less";
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/orderStatus.vue

@@ -0,0 +1,132 @@
+<template lang="pug">
+    .orderStatus
+      yd-navbar(title='订单状态' fixed)
+        router-link(to='', slot='left')
+          yd-navbar-back-icon(@click.native="goBack")
+      .tabs
+        a(v-for="(item,index) in TabsA"
+          :key="index"
+          @click="clickChange(index)"
+          :class="index == 0 ? 'active' : '' ") {{ item.title }}
+      #tabs-container.swiper-container
+        .swiper-wrapper
+          .swiper-slide
+            ul.news-list
+              order-item(:listdata="allData" :showButton="false")
+          .swiper-slide
+            ul.news-list
+              order-item(:listdata="waitPay" :showButton="false")
+          .swiper-slide
+            ul.news-list
+              order-item(:listdata="waitDeliverGoods" :showButton="true")
+          .swiper-slide
+            ul.news-list
+              order-item(:listdata="successData" :showButton="false")
+
+
+</template>
+
+<script>
+  import { mapActions, mapGetters } from 'vuex'
+  import OrderItem from './../tpl/orderItem'
+    export default {
+      data() {
+        return {
+          TabsA: [
+            { title: '全部' },
+            { title: '待付款' },
+            { title: '已发货' },
+            { title: '完成' }
+          ],
+          tabsSwiper: null,
+          allData: [],
+          waitPay: [],
+          waitDeliverGoods: [],
+          successData: [],
+          userInfo: localStorage.getItem("status") != null ? (JSON.parse(this.$utils.uncompile(localStorage.getItem("status")))) : null
+        }
+      },
+      created(){
+        this.getOrderStatus(this.swiperIndex)
+      },
+      mounted() {
+       this.initSwiper()
+       this.clickChange(this.swiperIndex == -1 ? 0 : this.swiperIndex)
+      },
+      computed: {
+        ...mapGetters({
+          swiperIndex: 'swiperIndex',
+        })
+      },
+      components: {
+        'order-item': OrderItem
+      },
+      beforeRouteEnter (to, from, next) {
+        next(vm => {
+          vm.changeContent(true)
+          vm.changeFooter(false)
+          vm.changeHeader(false)
+        })
+      },
+      beforeRouteLeave (to, from, next) {
+        this.changeHeader(false)
+        this.changeContent(false)
+        this.changeFooter(true)
+        next()
+      },
+      methods: {
+        goBack(){
+          this.$router.back()
+        },
+        ...mapActions({
+          changeHeader: 'SETACTION_CLOSEDHEADER',
+          changeFooter: 'SETACTION_CLOSEDFOOTER',
+          changeContent: 'SETACTION_CONTENT',
+          changeHeaderStyle: 'CHANGE_HADER'
+        }),
+        initSwiper() {
+          let _this = this;
+          this.tabsSwiper = new Swiper('#tabs-container', {
+            speed: 500,
+            on: {
+              slideChangeTransitionEnd: function() {
+                _this.getOrderStatus(this.activeIndex - 1)
+                document.querySelector(".tabs .active").className = "";
+                document.querySelectorAll(".tabs a")[this.activeIndex].className = 'active'
+              }
+            }
+          })
+        },
+        clickChange(index) {
+          document.querySelector(".tabs .active").className = "";
+          document.querySelectorAll(".tabs a")[index].className = "active"
+          this.tabsSwiper.slideTo(index)
+        },
+        async getOrderStatus(status) {
+          let order = await this.$http.selectOrder({
+            userid: this.userInfo.id,
+            status: status,
+          });
+          order == undefined ? order = [] : '';
+          switch (status) {
+            case -1:
+              this.allData = order;
+              break;
+            case 0:
+              this.waitPay = order;
+              break;
+            case 1:
+              this.waitDeliverGoods = order;
+              break;
+            case 2:
+              this.successData = order;
+              break;
+          }
+        }
+      }
+    }
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/search.vue

@@ -0,0 +1,77 @@
+<template lang="pug">
+    .search
+      yd-search(:result='result', fullpage='', v-model='value2', :item-click='itemClickHandler', :on-submit='submitHandler')
+      yd-list(theme='3')
+        yd-list-item(v-for='(item, key) in datas', :key='key'
+        @click.native="enterInfo(item)")
+          img(slot='img', :src='item.commodity_thumbnail')
+          span(slot='title') {{item.commodity_name}}
+          yd-list-other(slot='other')
+            div
+              span.demo-list-price
+                em ¥
+                | {{item.commodity_nowprice}}
+              span.demo-list-del-price ¥{{item.commodity_oldprice}}
+              div {{ item.commodity_content.substring(0,10) }}
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+  export default {
+    data() {
+      return {
+        value2: '',
+        result: [],
+        datas: []
+      }
+    },
+    methods: {
+      ...mapActions({
+        changeHeader: 'SETACTION_CLOSEDHEADER',
+        changeFooter: 'SETACTION_CLOSEDFOOTER',
+        changeContent: 'SETACTION_CONTENT',
+        setSwiperIndex: 'SETACTION_SWIPERINDEX'
+      }),
+      getResult(val) {
+        if (!val) return [];
+        return [
+          '小米','华为','锤子','一加','三星','苹果'
+        ].filter(value => new RegExp(val, 'i').test(value));
+      },
+      async itemClickHandler(item) {
+        this.datas = await this.getSearchKeyword(item)
+      },
+      async submitHandler(value) {
+        this.datas = await this.getSearchKeyword(value)
+      },
+      async getSearchKeyword(key) {
+        return await this.$http.getSearch({ keyword : key })
+      },
+      enterInfo(item) {
+        this.$router.push({ name: 'info', params: { id: item.id } })
+      },
+    },
+    beforeRouteEnter (to, from, next) {
+      next(vm => {
+        vm.changeContent(false)
+        vm.changeHeader(false)
+        vm.changeFooter(false)
+      })
+    },
+    beforeRouteLeave (to, from, next) {
+      this.changeContent(true)
+      this.changeFooter(true)
+      this.changeHeader(true)
+      next()
+    },
+    watch: {
+      value2(val) {
+        this.result = this.getResult(val);
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/components/view/user.vue

@@ -0,0 +1,140 @@
+<template lang="pug">
+  .user-action
+    .action-top
+        yd-icon(size="40px" name="ucenter-outline")
+        p {{ showPage ? '用户登录' : '用户注册' }}
+    .action-login(v-if="showPage")
+      .action-list
+        yd-cell-item
+          span(slot='left') 手机号：
+          yd-input(slot='right', ref="username" , required='', regex='mobile' , v-model='UserLogin.username', max='20', placeholder='请输入手机号')
+        yd-cell-item
+          span(slot='left') 密&#8195码：
+          yd-input(slot='right', ref="password" , type='password',max="20", min="6", v-model='UserLogin.password', placeholder='请输入登录密码')
+        yd-button(size='large', type='primary', shape='circle' @click.native="submitUserLogin") 登&#8195录
+    .action-reg(v-else)
+        yd-cell-item
+            span(slot='left') 手机号：
+            yd-input(slot='right', required='',ref="username" , v-model='UserReg.username', max='20', regex='mobile', placeholder='输入手机号')
+        yd-cell-item
+            span(slot='left') 密&#8195码：
+            yd-input(slot='right', type='password', min="6" , mac="20",ref="password" , v-model='UserReg.password', placeholder='输入密码')
+        yd-cell-item
+            span(slot='left') 再次输入：
+            yd-input(slot='right', type='password', min="6" , mac="20",ref="Twopassword" , v-model='UserReg.Twopassword', placeholder='再次输入密码')
+        yd-cell-item
+            span(slot='left') 昵称：
+            yd-input(slot='right',ref="usernicname" , v-model='UserReg.usernicname', required='', min="2" , mac="10", placeholder='请输入昵称')
+        yd-button(size='large', type='primary', shape='circle' @click.native="submitUserReg") 注&#8195册
+    .tips
+      span(@click="changePage") {{ showPage ? '注册' : '登录' }}
+      router-link(to="/index") 首页
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+export default {
+  data() {
+    return {
+      showPage: true,
+      UserLogin: {
+       username: null,
+       password: null
+      },
+      UserReg: {
+        username: null,
+        password: null,
+        usernicname: null,
+        Twopassword: null,
+      }
+    }
+  },
+  methods: {
+    ...mapActions({
+      changeHeader: 'SETACTION_CLOSEDHEADER',
+      changeFooter: 'SETACTION_CLOSEDFOOTER',
+      changeContent: 'SETACTION_CONTENT'
+    }),
+    async submitUserLogin() {
+      if(this.$refs.username.valid && this.$refs.password.valid) {
+        try {
+          let data = (await this.$http.userLogin(this.UserLogin))[0];
+          localStorage.setItem('status', this.$utils.compile(data))
+          this.$router.push({ path: this.$route.query.from })
+        } catch (error) {
+          
+        }
+      } else {
+        this.$dialog.toast({
+            mes: '账户名或密码有误',
+            timeout: 1500
+        });
+      }
+    },
+    async submitUserReg() {
+      if(this.$refs.username.valid && 
+         this.$refs.password.valid && 
+         this.$refs.usernicname.valid && 
+         this.$refs.Twopassword.valid) {
+           if(this.UserReg.password == this.UserReg.Twopassword) {
+            delete this.UserReg.Twopassword
+            let status = await this.$http.userReg(this.UserReg);
+             this.$dialog.confirm({
+                title: '提示',
+                mes: '账户注册成功，请登录',
+                opts:[
+                  {
+                    txt: '取消',
+                    color: false,
+                    callback: () => {
+                      this.changePage()
+                    }
+                  },
+                  {
+                    txt: '确定',
+                    color: true,
+                    callback: () => {
+                      this.changePage()
+                    }
+                  }
+                ]
+              });
+            
+           } else {
+             this.$dialog.toast({
+                mes: '两次密码不一致',
+                timeout: 1500
+             });
+           }
+        
+      } else {
+        this.$dialog.toast({
+            mes: '您填写的信息不正确请检查',
+            timeout: 1500
+        });
+      }
+    },
+    changePage () {
+      this.showPage = !this.showPage
+    }
+  },
+   beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // 通过 `vm` 访问组件实例
+      vm.changeFooter(false)
+      vm.changeHeader(false)
+      vm.changeContent(false)
+    })
+  },
+   beforeRouteLeave (to, from, next) {
+     this.changeFooter(true)
+     this.changeHeader(true)
+     this.changeContent(true)
+    next()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/components/action.less";
+</style>

历届学生/罗朝/项目练习/电商App/font-shop/src/config/index.js

@@ -0,0 +1,24 @@
+export default {
+  TabBar: [
+    { title: '首页', path: '/index', icon: 'home' },
+    { title: '购物车', path: '/cart', icon: 'shopcart-outline' },
+    { title: '我的', path: '/my', icon: 'ucenter-outline' }
+  ],
+  ApiUrl: {
+    BaseUrl: 'http://127.0.0.1:3000/json/2.0',
+    index: '/index',
+    info: '/index/info',
+    login: '/user/login',
+    reg: '/user/reg',
+    addCart: '/cart/addCart',
+    QueryCart: '/cart/queryShopOrCart',
+    SelectCart: '/cart/getAllCart',
+    deleteCartList: '/cart/deleteCart',
+    addOrder: '/order/addOrder',
+    selectOrder: '/order/selectOrder',
+    UpdateOrder: '/order/updateOrder',
+    classInfo: '/class',
+    search: '/search'
+
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/main.js

@@ -0,0 +1,28 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import store from './store'
+import service from "./api/service";
+import utils from "./utils"
+
+import YDUI from 'vue-ydui';
+import 'vue-ydui/dist/ydui.rem.css'
+import config from "./config"
+
+Vue.config.productionTip = false
+Vue.prototype.$http = service;
+Vue.prototype.$conf = config;
+Vue.prototype.$utils = utils;
+Vue.use(YDUI);
+
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  store,
+  components: { App },
+  template: '<App/>'
+})

历届学生/罗朝/项目练习/电商App/font-shop/src/router/index.js

@@ -0,0 +1,146 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+// 组件懒加载 + 分离打包
+// webpack dll
+const IndexComponents =  () => import(/* webpackChunkName: 'index' */ '@/components/view/index')
+const ErrorComponents =  () => import(/* webpackChunkName: '404' */ '@/components/tpl/404')
+const CartComponents =  () => import(/* webpackChunkName: 'cart' */ '@/components/view/cart')
+const MyComponents =  () => import(/* webpackChunkName: 'my' */ '@/components/view/my')
+const UserActionComponents =  () => import(/* webpackChunkName: 'user' */ '@/components/view/user')
+const InfoComponents =  () => import(/* webpackChunkName: 'info' */ '@/components/view/info')
+const OrderComponents =  () => import(/* webpackChunkName: 'order' */ '@/components/view/order')
+const OrderStatusComponents =  () => import(/* webpackChunkName: 'orderStatus' */ '@/components/view/orderStatus')
+const classInfoComponents =  () => import(/* webpackChunkName: 'classInfo' */ '@/components/view/classInfo')
+const SearchComponents =  () => import(/* webpackChunkName: 'search' */ '@/components/view/search')
+
+Vue.use(Router)
+
+
+const router = new Router({
+  routes: [
+    {
+      path: '*',
+      redirect: { 
+        name: 'error' 
+      }
+    },
+    {
+      path: '/error',
+      name: 'error',
+      component: ErrorComponents,
+      meta: {
+        isLogin: false,
+        title: '404错误页面'
+      }
+    },
+    {
+      path: '/',
+      redirect: { 
+        name: 'index' 
+      }
+    },
+    {
+      path: '/index',
+      name: 'index',
+      component: IndexComponents,
+      meta: {
+        isLogin: false,
+        title: '首页'
+      }
+    },
+    {
+      path: '/cart',
+      name: 'cart',
+      component: CartComponents,
+      meta: {
+        isLogin: true,
+        title: '购物车'
+      }
+    },
+    {
+      path: '/my',
+      name: 'my',
+      component: MyComponents,
+      meta: {
+        isLogin: true,
+        title: '我的'
+      }
+    },
+    {
+      path: '/action',
+      name: 'action',
+      component: UserActionComponents,
+      meta: {
+        isLogin: false,
+        title: '登录'
+      }
+    },
+    {
+      path: '/info/:id',
+      name: 'info',
+      component: InfoComponents,
+      meta: {
+        isLogin: false,
+        title: '商品详情'
+      }
+    },
+    {
+      path: '/order',
+      name: 'order',
+      component: OrderComponents,
+      meta: {
+        isLogin: true,
+        title: '确认订单'
+      }
+    },
+    {
+      path: '/orderStatus',
+      name: 'orderStatus',
+      component: OrderStatusComponents,
+      meta: {
+        isLogin: true,
+        title: '订单状态'
+      }
+    },
+    {
+      path: '/classinfo',
+      name: 'classinfo',
+      component: classInfoComponents,
+      meta: {
+        isLogin: false,
+        title: '分类详情'
+      }
+    },
+    {
+      path: '/search',
+      name: 'search',
+      component: SearchComponents,
+      meta: {
+        isLogin: false,
+        title: '搜索'
+      }
+    }
+  ]
+})
+
+router.beforeEach((to, from, next) => {
+  document.title = to.meta.title
+  if(to.meta.isLogin) {
+    if(localStorage.getItem('status') != null) {
+      next()
+    } else {
+      next({ 
+        name: 'action', 
+        query: { 
+          from: to.path
+        } 
+      })
+    }
+  } else {
+    next()
+  }
+  
+});
+
+export default router

历届学生/罗朝/项目练习/电商App/font-shop/src/store/getter.js

@@ -0,0 +1,12 @@
+export default {
+  HomeShopList: state => state.home.HomeData,
+  CartData: state => state.cart.CartData,
+
+  isClosedHeader: state => state.setting.isClosedHeader,
+  isClosedFooter: state => state.setting.isClosedFooter,
+  isHaveContent: state => state.setting.isHaveContent,
+  currentTttle: state => state.setting.currentTttle,
+  changeHeader: state => state.setting.changeHeader,
+
+  swiperIndex: state => state.setting.swiperIndex
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/store/index.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import index from './modules'
+import getter from './getter'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules: { ...index },
+  getters: getter
+})

历届学生/罗朝/项目练习/电商App/font-shop/src/store/modules/cart.js

@@ -0,0 +1,16 @@
+export default {
+  state: {
+    CartData: []
+  },
+  mutations: {
+    SET_CARTDATA(state, data) {
+      state.CartData = data
+      console.log("CartData: ", state.CartData)
+    }
+  },
+  actions: {
+    async SETACTION_CARTDATA({ commit }, data) {
+      commit('SET_CARTDATA', data)
+    }
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/store/modules/home.js

@@ -0,0 +1,18 @@
+import service from  '../../api/service'
+export default {
+  state: {
+    HomeData: []
+  },
+  mutations: {
+    SET_HOMEDATA(state, data) {
+      state.HomeData = data
+    }
+  },
+  actions: {
+    async getIndex({ commit }) {
+      let data = await service.getIndexList({});
+
+      commit('SET_HOMEDATA', data)
+    }
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/store/modules/index.js

@@ -0,0 +1,9 @@
+import home from  './home';
+import cart from './cart';
+import setting from './setting'
+
+export default {
+  home,
+  cart,
+  setting
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/store/modules/setting.js

@@ -0,0 +1,50 @@
+export default {
+  state: {
+    isClosedHeader: true,
+    isClosedFooter: true,
+    isHaveContent: true,
+    currentTttle: '首页',
+    changeHeader: 1,
+    swiperIndex: -1
+  },
+  mutations: {
+    SET_CLOSEDHEADER(state, status) {
+      state.isClosedHeader = status
+    },
+    SET_CLOSEDFOOTER(state, status) {
+      state.isClosedFooter = status
+    },
+    SET_CONTENT(state, status) {
+      state.isHaveContent = status
+    },
+    CHANGE_HEADERSTYLE(state, status) {
+      state.changeHeader = status
+    },
+    SET_CURRENTTITLE(state, status) {
+      state.currentTttle = status
+    },
+    SET_SWIPERINDEX(state, status) {
+      state.swiperIndex = status
+    }
+  },
+  actions: {
+    SETACTION_CLOSEDHEADER({ commit }, status) {
+      commit('SET_CLOSEDHEADER', status)
+    },
+    SETACTION_CLOSEDFOOTER({ commit }, status) {
+      commit('SET_CLOSEDFOOTER', status)
+    },
+    SETACTION_CONTENT({ commit }, status) {
+      commit('SET_CONTENT', status)
+    },
+    CHANGE_HADER({ commit }, status) {
+      commit('CHANGE_HEADERSTYLE', status)
+    },
+    SETACTION_CURRENTTITLE({ commit }, status) {
+      commit('SET_CURRENTTITLE', status)
+    },
+    SETACTION_SWIPERINDEX({ commit }, status) {
+      commit('SET_SWIPERINDEX', status)
+    }
+  }
+}

历届学生/罗朝/项目练习/电商App/font-shop/src/utils/index.js

@@ -0,0 +1,23 @@
+export default {
+  compile(code) {
+		code = JSON.stringify(code);
+		let c = String.fromCharCode(code.charCodeAt(0)+code.length);
+		for(let i = 1; i < code.length; i++){
+			c += String.fromCharCode(code.charCodeAt(i)+code.charCodeAt(i-1));
+		}
+		return (escape(c));
+  },
+
+  uncompile(code) {
+		code = unescape(code);
+		let c = String.fromCharCode(code.charCodeAt(0)-code.length);
+		for(let i = 1; i < code.length; i++){
+			c +=String.fromCharCode(code.charCodeAt(i)-c.charCodeAt(i-1));
+		}
+		return c;
+	},
+
+	goBack() {
+		history.back()
+	}
+}

历届学生/罗朝/项目练习/电商App/font-shop/static/lib/swiper/swiper.css

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

历届学生/罗朝/项目练习/电商App/font-shop/webpack.dll.config.js

@@ -0,0 +1,28 @@
+var path = require("path"),
+  fs = require('fs'),
+  webpack = require("webpack");
+
+var vendors = [
+  'vue',
+  'vue-router',
+  'vuex',
+  'vue-ydui'
+];
+
+module.exports = {
+  entry: {
+    vendor: vendors
+  },
+  output: {
+    path: path.join(__dirname, "dist"),
+    filename: "Dll.js",
+    library: "[name]_[hash]"
+  },
+  plugins: [
+    new webpack.DllPlugin({
+      path: path.join(__dirname, "dist", "manifest.json"),
+      name: "[name]_[hash]",
+      context: __dirname
+    })
+  ]
+};

历届学生/罗朝/项目练习/电商App/font-shop/任务.txt

@@ -0,0 +1,8 @@
+
+
+ 2：实习商品详情页面的 收藏按钮的点击，不能重复收藏
+
+ 3：确认订单的 收货地址
+
+ 4: 继续实现我的页面还剩下的一分部设置功能 关于我们 监测升级 ....
+/usr/local/src/node-v12.4.0

历届学生/罗朝/项目练习/电商App/shop.sql

@@ -0,0 +1,137 @@
+/*
+ Navicat Premium Data Transfer
+
+ Source Server         : 本地数据库
+ Source Server Type    : MySQL
+ Source Server Version : 80016
+ Source Host           : localhost:3306
+ Source Schema         : shop
+
+ Target Server Type    : MySQL
+ Target Server Version : 80016
+ File Encoding         : 65001
+
+ Date: 30/08/2019 09:46:17
+*/
+
+SET NAMES utf8mb4;
+SET FOREIGN_KEY_CHECKS = 0;
+
+-- ----------------------------
+-- Table structure for shop_cart
+-- ----------------------------
+DROP TABLE IF EXISTS `shop_cart`;
+CREATE TABLE `shop_cart` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `commodity_id` int(11) DEFAULT NULL COMMENT '关联商品表的id',
+  `user_id` int(11) DEFAULT NULL COMMENT '关联用户表的id',
+  `cart_nums` varchar(255) DEFAULT NULL COMMENT '收藏商品的数量',
+  PRIMARY KEY (`id`)
+) ENGINE=MyISAM AUTO_INCREMENT=71 DEFAULT CHARSET=utf8;
+
+-- ----------------------------
+-- Records of shop_cart
+-- ----------------------------
+BEGIN;
+INSERT INTO `shop_cart` VALUES (70, 2, 14, '1');
+COMMIT;
+
+-- ----------------------------
+-- Table structure for shop_commodity
+-- ----------------------------
+DROP TABLE IF EXISTS `shop_commodity`;
+CREATE TABLE `shop_commodity` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `commodity_name` varchar(255) DEFAULT NULL COMMENT '标题',
+  `commodity_nowprice` decimal(10,2) DEFAULT NULL COMMENT '现价',
+  `commodity_brand` varchar(255) DEFAULT NULL COMMENT '品牌',
+  `commodity_stock` varchar(255) DEFAULT NULL COMMENT '库存',
+  `commodity_oldprice` decimal(10,2) DEFAULT NULL COMMENT '原价',
+  `commodity_sales` varchar(255) DEFAULT NULL COMMENT '销量',
+  `commodity_main` varchar(500) DEFAULT NULL COMMENT '商品主题',
+  `commodity_thumbnail` varchar(255) DEFAULT NULL COMMENT '缩略图',
+  `commodity_attachimg` varchar(1000) DEFAULT NULL COMMENT '附图',
+  `commodity_content` varchar(255) DEFAULT NULL COMMENT '商品介绍',
+  PRIMARY KEY (`id`)
+) ENGINE=MyISAM AUTO_INCREMENT=23 DEFAULT CHARSET=utf8;
+
+-- ----------------------------
+-- Records of shop_commodity
+-- ----------------------------
+BEGIN;
+INSERT INTO `shop_commodity` VALUES (1, '小米6X', 1199.00, '小米', '1008', 1499.00, '9998', '[{\"id\":1, \"url\":\"https://i8.mifile.cn/a1/pms_1527144859.25489991!560x560.jpg\"}]', 'https://i8.mifile.cn/a1/pms_1527144859.25489991!560x560.jpg', '[{\"id\":\"1\",\"url\":\"https://img30.360buyimg.com/sku/jfs/t18211/69/1964940745/165270/f9c8b3b9/5adfff97N4785b207.jpg\"},{\"id\":\"2\",\"url\":\"https://img30.360buyimg.com/sku/jfs/t19510/342/1994937303/314169/2fa249c/5ae028acN08dbcfb2.jpg\"},{\"id\":\"3\",\"url\":\"https://img30.360buyimg.com/sku/jfs/t17221/337/1986295406/355489/33d4ab5a/5ae028acNbd82b1f1.jpg\"},{\"id\":\"4\",\"url\":\"https://img30.360buyimg.com/sku/jfs/t19600/182/1954269253/398563/8999bda1/5adfff9bN417b1519.jpg\"}]', '全系感恩回馈价「4GB+32GB最高省300元」「4GB+64GB／6GB+128GB立省250元」 「6GB+64GB立省200元」\r\n                      轻薄美观的拍照手机 / 前置2000万“治愈系”自拍 / 后置2000万 AI双摄 / 标配骁龙660 AIE处理器\r\n                  ');
+INSERT INTO `shop_commodity` VALUES (2, '小米8 青春版', 1399.00, '小米', '21213', 1399.00, '25452', '[{\"id\":\"1\",\"url\":\"https://i8.mifile.cn/a1/pms_1537323963.1278763!560x560.jpg\"},{\"id\":\"2\",\"url\":\"https://i8.mifile.cn/a1/pms_1537323963.2662931!560x560.jpg\"},{\"id\":\"3\",\"url\":\"https://i8.mifile.cn/a1/pms_1537323963.12643245!560x560.jpg\"},{\"id\":\"4\",\"url\":\"https://i8.mifile.cn/a1/pms_1537323963.40512928!560x560.jpg\"}]', 'https://i8.mifile.cn/a1/pms_1537323963.1278763!560x560.jpg', '[{\"id\":\"1\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t1/2360/20/7321/391271/5ba50f10E2e934060/874a9326f479b703.jpg\"},{\"id\":\"2\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t1/5111/35/6060/81691/5ba1c203Ef7d689f8/59c83f6ecfc702ff.jpg\"},{\"id\":\"3\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t1/4575/26/6038/55584/5ba1c203E0435b5c9/e76be408881deed2.jpg\"},{\"id\":\"4\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t1/4392/29/6077/46785/5ba1c203Eb0df0978/03aeceb8a7550d45.jpg\"}]', '潮流镜面渐变色 / 2400万自拍旗舰 / 7.5mm超薄机身 / 6.26\"小刘海全面屏 / AI裸妆美颜 / 骁龙660AIE处理器');
+INSERT INTO `shop_commodity` VALUES (3, '小米8', 2499.00, '小米', '278', 2699.00, '968', '[{\"id\":\"1\",\"url\":\"https://i8.mifile.cn/a1/pms_1527735134.03584233!560x560.jpg\"},{\"id\":\"2\",\"url\":\"https://i8.mifile.cn/a1/pms_1527735134.08232431!560x560.jpg\"},{\"id\":\"3\",\"url\":\"https://i8.mifile.cn/a1/pms_1527735134.24873718!560x560.jpg\"},{\"id\":\"4\",\"url\":\"https://i8.mifile.cn/a1/pms_1527735134.01919050!560x560.jpg\"}]', 'https://i8.mifile.cn/a1/pms_1527735134.03584233!560x560.jpg', '[{\"id\":\"1\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t1/3903/29/6990/200702/5ba4a273E0a717ba8/426981810b1a70f2.jpg\"},{\"id\":\"2\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t1/148/5/7346/197445/5ba4a273Ef7bc120c/a3c4b221fbe4bdaf.jpg\"},{\"id\":\"3\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t20002/136/948301962/365666/d8b24f90/5b0fdc0eN74a6459a.jpg\"},{\"id\":\"4\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t21811/173/751658295/118558/613c4bd7/5b17b42bNcad0e881.jpg\"}]', '全球首款双频GPS / 骁龙845处理器 / 红外人脸解锁 / AI变焦双摄 / 三星 AMOLED 屏');
+INSERT INTO `shop_commodity` VALUES (4, '小米MIX 2S', 2899.00, '小米', '4500', 3299.00, '3400', '[{\"id\":\"1\",\"url\":\"https://i8.mifile.cn/a1/pms_1522033929.93635904!560x560.jpg\"}]', 'https://i8.mifile.cn/a1/pms_1522033929.93635904!560x560.jpg', '[{\"id\":\"1\",\"url\":\"https://img30.360buyimg.com/sku/jfs/t17308/338/1036538395/399535/3a902940/5ab9c4c3Ncfe80705.jpg\"},{\"id\":\"2\",\"url\":\"https://img30.360buyimg.com/sku/jfs/t19651/26/1063887955/378736/dfa56086/5ab9c4c3N9bd0b1d4.jpg\"},{\"id\":\"3\",\"url\":\"https://img30.360buyimg.com/sku/jfs/t17074/286/1083295446/114994/6a7e3726/5ab9c4c3N32c17ba2.jpg\"},{\"id\":\"4\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t18889/152/2551012980/281585/6d04ab56/5afe41afN037f7543.jpg\"}]', '陶瓷机身 手机中的艺术品 / 搭载高通骁龙845 年度旗舰处理器 / AI超感光双摄，DxO百分相机 / 高效 Qi 无线充电');
+INSERT INTO `shop_commodity` VALUES (5, '小米8 SE', 1699.00, '小米', '3200', 1799.00, '1890', '[{\"id\":\"1\",\"url\":\"https://i8.mifile.cn/a1/pms_1527684986.69698543!560x560.jpg\"},\r\n[{\"id\":\"2\",\"url\":\"https://i8.mifile.cn/a1/pms_1527684986.76121192!560x560.jpg\"},\r\n[{\"id\":\"3\",\"url\":\"https://i8.mifile.cn/a1/pms_1527684986.6891825!560x560.jpg\"},\r\n[{\"id\":\"4\",\"url\":\"https://i8.mifile.cn/a1/pms_1527684986.69828101!560x560.jpg\"}]', 'https://i8.mifile.cn/a1/pms_1527684986.69698543!560x560.jpg', '[{\"id\":\"1\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t22078/170/541599639/358967/c32efee2/5b0fe150Nde455d01.jpg\"},{\"id\":\"2\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t19939/202/954779231/73556/a6ac196d/5b0fe14fN01e568a7.jpg\"},{\"id\":\"3\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t24028/322/2209114727/202874/bb51cbba/5b76e37bN50a1ea84.jpg\"},{\"id\":\"4\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t21715/229/509065122/361926/4bbb3602/5b0fb077N1b9f9fd2.jpg\"}]', '三星 AMOLED 全面屏 小屏旗舰 / 骁龙710处理器 / AI 超感光双摄 / 前置2000万柔光自拍');
+INSERT INTO `shop_commodity` VALUES (6, '黑鲨游戏手机', 3199.00, '小米', '5600', 3499.00, '3400', '[{\"id\":\"1\",\"url\":\"https://i8.mifile.cn/a1/pms_1524032283.82393376!560x560.jpg\"}]', 'https://i8.mifile.cn/a1/pms_1524032283.82393376!560x560.jpg', '[{\"id\":\"1\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t20926/151/101459644/91185/f3aae941/5afbf17cN49932153.jpg\"},{\"id\":\"2\",\"url\":\"https://img30.360buyimg.com/sku/jfs/t17434/70/1601997585/154130/d0d14b68/5acfef86N8a4eb14b.jpg\"},{\"id\":\"3\",\"url\":\"https://img30.360buyimg.com/sku/jfs/t19522/297/1561060203/167918/7b458deb/5acfef81Nb7596c54.jpg\"},{\"id\":\"4\",\"url\":\"https://img30.360buyimg.com/sku/jfs/t16723/121/1588941042/132508/1cf676f3/5acfef7cN70cf581b.jpg\"}]', '液冷散热 / 独立图像处理芯片 / 一键游戏模式 / 骁龙845处理器 / 18:9全面屏 / 前后2000万摄像头');
+INSERT INTO `shop_commodity` VALUES (7, '坚果 Pro 2S', 1798.00, '锤子', '20000', 1798.00, '32653', '[{\"id\":1,\"url\":\"https://resource.smartisan.com/resource/b07b9765e272f866da6acda4ee107d88.png?x-oss-process=image/resize,w_659/format,webp\"}]', 'https://resource.smartisan.com/resource/b07b9765e272f866da6acda4ee107d88.png?x-oss-process=image/resize,w_659/format,webp', '[{\"id\":\"1\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t23452/60/2334006160/312016/4cb7f3f2/5b7ab17dN36451ed7.jpg\"},{\"id\":\"2\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t23287/47/2242707882/288546/10927a08/5b7ab17dNf77653d3.jpg\"},{\"id\":\"3\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t25477/72/728758335/295415/fb343e40/5b7ac3eeNcbfbe4da.jpg\"},{\"id\":\"4\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t26077/252/754231002/212856/9a9aab4f/5b7ab17cNa843f62c.jpg\"}]', '双系统，无限屏，骁龙 ™ 710 处理器 · 前置 1600 万像素摄像头 · 6.01 英寸全高清全面屏 · AI 通话降噪 · 人脸解锁 + 指纹解锁');
+INSERT INTO `shop_commodity` VALUES (8, '坚果 R1', 2999.00, '锤子', '30000', 2999.00, '32102', '[{\"id\":1,\"url\":\"https://resource.smartisan.com/resource/06c2253354096f5e9ebf0616f1af2086.png?x-oss-process=image/resize,w_659/format,webp\"}]', 'https://resource.smartisan.com/resource/06c2253354096f5e9ebf0616f1af2086.png?x-oss-process=image/resize,w_659/format,webp', '[{\"id\":\"1\",\"url\":\"http://img10.360buyimg.com/imgzone/jfs/t20302/62/1083627061/1381702/4b7a64bb/5b1faf31Ncca17a93.jpg\"},{\"id\":\"2\",\"url\":\"http://img10.360buyimg.com/imgzone/jfs/t21586/53/1075307095/1276467/cd739f7c/5b1faf31N252fb392.jpg\"},{\"id\":\"3\",\"url\":\"http://img10.360buyimg.com/imgzone/jfs/t20434/207/1085850337/1418735/7f49caf8/5b1faf31N1cd60353.jpg\"},{\"id\":\"4\",\"url\":\"http://img10.360buyimg.com/imgzone/jfs/t20587/55/1080611148/201588/646cc095/5b1f8c50N9312eda1.jpg\"}]', '骁龙 845 处理器 · 光学防抖双摄像头 · 6.17 英寸压力感应屏幕 · 10W快速无线充电功能');
+INSERT INTO `shop_commodity` VALUES (9, '坚果 Pro 2', 1799.00, '锤子', '25266', 1799.00, '31516', '[{\"id\":1,\"url\":\"https://resource.smartisan.com/resource/c71ce2297b362f415f1e74d56d867aed.png?x-oss-process=image/resize,w_659/format,webp\"}]', 'https://resource.smartisan.com/resource/c71ce2297b362f415f1e74d56d867aed.png?x-oss-process=image/resize,w_659/format,webp', '[{\"id\":\"1\",\"url\":\"http://img20.360buyimg.com/vc/jfs/t7876/253/4061690954/2017476/3714f24/5a0319a7Nf6d88738.jpg\"}]', '骁龙 ™ 660 处理器 · 1200 万 + 500 万像素双摄像头 · 3500mAh 大电池 · 18W 快速充电 · 人脸解锁 + 指纹解锁');
+INSERT INTO `shop_commodity` VALUES (10, '坚果 3', 1599.00, '锤子', '15314', 1599.00, '26265', '[{\"id\":1,\"url\":\"https://resource.smartisan.com/resource/13e91511f6ba3227ca5378fd2e93c54b.png?x-oss-process=image/resize,w_659/format,webp\"}]', 'https://resource.smartisan.com/resource/13e91511f6ba3227ca5378fd2e93c54b.png?x-oss-process=image/resize,w_659/format,webp', '[{\"id\":\"1\",\"url\":\"http://img20.360buyimg.com/vc/jfs/t17368/340/1617561606/1069487/9676971/5ad014b1Nb8463c4e.jpg\"},{\"id\":\"2\",\"url\":\"http://img20.360buyimg.com/vc/jfs/t17278/52/1620296383/1157116/3d0f473/5ad014b8N32c9c183.jpg\"},{\"id\":\"3\",\"url\":\"http://img20.360buyimg.com/vc/jfs/t17278/52/1620296383/1157116/3d0f473/5ad014b8N32c9c183.jpg\"},{\"id\":\"4\",\"url\":\"//img20.360buyimg.com/vc/jfs/t22327/134/520556609/180777/b2499c7a/5b1005d9Nb92a9c1e.jpg\"}]', '三面无边框 Almost，4000mAh 超巨型电池，双 1300 万诚实双摄，双面玻璃 + 金属中框，人脸解锁 + 指纹支付');
+INSERT INTO `shop_commodity` VALUES (11, '荣耀畅玩8C', 1099.00, '华为', '999', 1099.00, '1005', '[{\"id\":\"1\",\"url\":\"https://res.vmallres.com/pimages//product/6901443259571/800_800_1538278169451mp.png\"},{\"id\":\"2\",\"url\":\"https://res.vmallres.com/pimages//product/6901443259571/group//800_800_1538299156732.png\"},{\"id\":\"3\",\"url\":\"https://res.vmallres.com/pimages//product/6901443259571/group//800_800_1538299163016.png\"}]', 'https://res0.vmallres.com/pimages//product/6901443259588/428_428_1538278298963mp.png', '[{\"id\":\"1\",\"url\":\"http://img12.360buyimg.com/cms/jfs/t26980/323/1033239624/192553/b488218f/5bc40860Nf1e54a0e.jpg\"},{\"id\":\"2\",\"url\":\"http://img13.360buyimg.com/cms/jfs/t26389/158/1199430727/280580/e1169ce2/5bc3fdd6N879fa196.jpg\"},{\"id\":\"3\",\"url\":\"http://img30.360buyimg.com/cms/jfs/t26209/336/1194816768/251239/6275777/5bc3fe03N099c9320.jpg\"},{\"id\":\"4\",\"url\":\"http://img13.360buyimg.com/cms/jfs/t25750/362/2095009928/112868/d41891b3/5bc3fe14N64b8fb61.jpg\"}]', '荣耀畅玩8C 全网通标配版 4GB+32GB（幻夜黑）');
+INSERT INTO `shop_commodity` VALUES (12, '荣耀10', 2299.00, '华为', '999', 2599.00, '999', '[{\"id\":\"1\",\"url\":\"https://res.vmallres.com/pimages//product/6901443232413/group//800_800_1535358140458.jpg\"},{\"id\":\"2\",\"url\":\"https://res.vmallres.com/pimages//product/6901443232413/group//800_800_1535358145378.jpg\"},{\"id\":\"3\",\"url\":\"https://res.vmallres.com/pimages//product/6901443232413/group//800_800_1535358149095.jpg\"}]', 'https://res0.vmallres.com/pimages//frontLocation/content/4520161/1539566459947.png', '[{\"id\":\"1\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t25990/322/528395471/66190/b1a80203/5b739cd1Nc944d39d.jpg\"},{\"id\":\"2\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t23206/242/2143252474/44524/bace4a0c/5b739cd1N0fa1adaa.jpg\"},{\"id\":\"3\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t24139/142/2081255188/92312/782dd0b9/5b739cd1Na0a08dce.jpg\"},{\"id\":\"4\",\"url\":\"http://img30.360buyimg.com/sku/jfs/t24235/146/2098373111/94726/535b2c17/5b739cd1N71b77868.jpg\"}]', '荣耀10 GT游戏加速 AIS手持夜景 AI摄影手机 6GB+64GB 幻影蓝 全网通 双卡双待 荣耀10GT');
+INSERT INTO `shop_commodity` VALUES (13, '荣耀Play', 1799.00, '华为', '899', 1999.00, '886', '[{\"id\":\"1\",\"url\":\"https://res.vmallres.com/pimages//product/6901443242641/group//800_800_1527925619010.jpg\"},{\"id\":\"2\",\"url\":\"https://res.vmallres.com/pimages//product/6901443242641/group//800_800_1527925620829.jpg\"},{\"id\":\"3\",\"url\":\"https://res.vmallres.com/pimages//product/6901443242641/group//800_800_1527925621679.jpg\"}]', 'https://res0.vmallres.com/pimages//frontLocation/content/1268791/1539427302857.png', '[{\"id\":\"1\",\"url\":\"http://img13.360buyimg.com/cms/jfs/t1/5940/33/9965/301258/5bc99f85E4bea2b6d/4bb70ef4804ee08e.jpg\"},{\"id\":\"2\",\"url\":\"http://img30.360buyimg.com/cms/jfs/t21151/211/1795336231/135686/4a61632a/5b35d130N7969ddc8.jpg\"},{\"id\":\"3\",\"url\":\"http://img30.360buyimg.com/cms/jfs/t20866/188/1820494858/93297/96d8e591/5b35d150Nfb881d7b.jpg\"},{\"id\":\"4\",\"url\":\"http://img30.360buyimg.com/cms/jfs/t20866/188/1820494858/93297/96d8e591/5b35d150Nfb881d7b.jpg\"}]', '荣耀Play 全网通 4GB+64GB 幻夜黑 GT游戏加速 AI芯片 全面屏游戏手机 双卡双待');
+INSERT INTO `shop_commodity` VALUES (14, 'Note9', 8999.00, '三星', '2101', 11210.00, '4512', '[{\"id\":2, \"url\":\"http://res.samsungeshop.com.cn/resources/2018/9/11/15366540528318522_570X570.jpg\"}]', 'http://res.samsungeshop.com.cn/resources/2018/9/11/15366540528318522_570X570.jpg', '[{\"id\":\"1\",\"url\":\"http://img20.360buyimg.com/vc/jfs/t27223/294/116831888/2337116/ed974433/5b8563fbN827f11d5.jpg\"}]', '智能 S Pen、海量存储8G+512G、4000mAh大容量电池');
+INSERT INTO `shop_commodity` VALUES (15, '盖乐世 A9 Star Lite', 1999.00, '三星', '9564', 2499.00, '8954', '[{\"id\":2, \"url\":\"http://res.samsungeshop.com.cn/resources/2018/6/2/15278704537512520_570X570.jpg\"}]', 'http://res.samsungeshop.com.cn/resources/2018/6/2/15278704537512520_570X570.jpg', '[{\"id\":\"1\",\"url\":\"http://img20.360buyimg.com/vc/jfs/t21721/319/841126132/3370264/e963421c/5b19478fN1a71d6f0.jpg\"}]', '身临其境 多彩世界、前置2400万像素 “亮”丽美颜、双摄再现 深邃之美');
+INSERT INTO `shop_commodity` VALUES (16, 'Note8', 6988.00, '三星', '3', 8599.00, '8957', '[{\"id\":2, \"url\":\"http://res.samsungeshop.com.cn/resources/2017/9/25/15063262024762790_570X570.jpg\"}]', 'http://res.samsungeshop.com.cn/resources/2017/9/25/15063262024762790_570X570.jpg', '[{\"id\":\"1\",\"url\":\"http://img20.360buyimg.com/vc/jfs/t27223/294/116831888/2337116/ed974433/5b8563fbN827f11d5.jpg\"}]', '6GB大运行内存、智能双摄、IP68级防尘防水、息屏提醒');
+INSERT INTO `shop_commodity` VALUES (18, 'iphone8', 5099.00, '苹果', '2123', 5099.00, '5566', '[{\"id\":1, \"url\":\"https://store.storeimages.cdn-apple.com/8755/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone8/plus/iphone8-plus-select-2017?wid=234&hei=330&fmt=png-alpha&.v=1503618522714\"}]', 'https://img10.360buyimg.com/n7/jfs/t8107/37/1359438185/72159/a6129e26/59b857f8N977f476c.jpg', '[{\"id\":\"1\",\"url\":\"http://img30.360buyimg.com/jgsq-productsoa/jfs/t9307/332/1187929069/366519/d59e5816/59b860b4N53f06414.jpg\"},{\"id\":\"2\",\"url\":\"http://img30.360buyimg.com/jgsq-productsoa/jfs/t7588/251/2988288263/387035/bd138c8e/59b860a6Nd4f9bfe9.jpg\"},{\"id\":\"3\",\"url\":\"http://img30.360buyimg.com/jgsq-productsoa/jfs/t8272/117/1357509823/961160/da713bae/59b860a6N27a4b1fc.jpg\"},{\"id\":\"4\",\"url\":\"http://img30.360buyimg.com/jgsq-productsoa/jfs/t8530/168/1400118121/589091/28a11eff/59b860b0N753797da.jpg\"}]', 'Apple iPhone 8 Plus 64GB 红色特别版 移动联通电信4G手机');
+INSERT INTO `shop_commodity` VALUES (19, 'iphonexs', 8699.00, '苹果', '8699', 12222.00, '212', '[{\"id\":1, \"url\":\"https://store.storeimages.cdn-apple.com/8755/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/xs/iphone-xs-max-select-2018-group?wid=289&hei=491&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1536616752354\"}]', 'https://store.storeimages.cdn-apple.com/8755/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/xs/iphone-xs-max-select-2018-group?wid=289&hei=491&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1536616752354', '[{\"id\":\"1\",\"url\":\"https://img30.360buyimg.com/cms/jfs/t1/4626/32/3475/220504/5b997365E80a1373f/279c244f12161cb3.jpg\"},{\"id\":\"2\",\"url\":\"https://img12.360buyimg.com/cms/jfs/t1/3397/21/3533/236322/5b99759aE73795787/f782e04a140c8f16.jpg\"},{\"id\":\"3\",\"url\":\"https://img11.360buyimg.com/cms/jfs/t1/5274/3/3465/245167/5b997365E16b81bc9/93e07e40f3af5e62.jpg\"},{\"id\":\"4\",\"url\":\"https://img30.360buyimg.com/cms/jfs/t1/2322/11/3524/269574/5b997365E26f81a7a/e01fc9486da9eda1.jpg\"}]', '\r\n突破性的双镜头系统。 这款在全世界广受欢迎的相机，正在将摄影领入新纪元。创新的感光元件、图像信号处理器和神经网络引擎默契协作，让你拍出的照片一张比一张出彩');
+INSERT INTO `shop_commodity` VALUES (20, 'iphonexr', 6499.00, '苹果', '6499', 1212.00, '331', '[{\"id\":1, \"url\":\"https://store.storeimages.cdn-apple.com/8755/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/xr/iphone-xr-select-static-201809_GEO_CN?wid=756&hei=472&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1536451409425\"}]', 'https://store.storeimages.cdn-apple.com/8755/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone/xr/iphone-xr-select-static-201809_GEO_CN?wid=756&hei=472&fmt=jpeg&qlt=95&op_usm=0.5,0.5&.v=1536451409425', '[{\"id\":\"1\",\"url\":\"https://img14.360buyimg.com/cms/jfs/t1/3232/17/3505/166696/5b997bf1E382f4a2c/b9854b5b9a9fc950.jpg\"},{\"id\":\"2\",\"url\":\"https://img14.360buyimg.com/cms/jfs/t1/367/12/3793/205864/5b997bf2E833e701a/0b7d6a51a5ff0781.jpg\"},{\"id\":\"3\",\"url\":\"https://img14.360buyimg.com/cms/jfs/t1/5501/9/3441/151755/5b997bf1E4ba7648e/3a3e32f714518dbd.jpg\"},{\"id\":\"4\",\"url\":\"https://img11.360buyimg.com/cms/jfs/t1/5544/7/3467/204032/5b997bf1Ef261a506/4d26ef3e87b3f2ea.jpg\"}]', '全新 Liquid 视网膜显示屏，是 iPhone 迄今最先进的 LCD 屏。此外，更有识别速度进一步提升的面容 ID、iPhone 史上最智能最强大的芯片，以及支持景深控制功能的突破性摄像头系统。iPhone XR，怎么看，都满是亮点。');
+INSERT INTO `shop_commodity` VALUES (21, 'OnePlus 6', 3199.00, '一加', '3200', 3199.00, '7897', '[{\"id\":1, \"url\":\"https://image01.oneplus.cn/shop/201807/05/1921/da71f98cd8531fbf83e1ec2b868c10d9.jpg\"}]', 'https://image01.oneplus.cn/shop/201807/05/1921/da71f98cd8531fbf83e1ec2b868c10d9.jpg', '[{\"id\":\"1\",\"url\":\"http://img20.360buyimg.com/vc/jfs/t23926/165/2350072663/4601771/78bc812b/5b7bc24cN68d8548c.jpg\"}]', '全新 OnePlus 6 搭载骁龙™ 845，性能比上一代提升 30%。最高 8GB 四通道 LPDDR4X 大内存+256GB UFS2.1 双通道超大闪存*，App 运行更流畅。令人羡慕的强悍配置之外，还对 50 余款热门游戏进行特别优化，让你的游戏体验，更畅快，更尽兴');
+INSERT INTO `shop_commodity` VALUES (22, '一加OnePlus 5', 2199.00, '一加', '21992', 2199.00, '12342', '[{\"id\":1,\"url\":\"https://image01.oneplus.cn/ebp/201706/17/1202/99221ac82845113af2d037955adcf04a.png\"}]', 'https://img14.360buyimg.com/n0/jfs/t26602/337/711702057/94056/24431f7b/5bb70e47N15590c4f.jpg', '[{\"id\":\"1\",\"url\":\"http://img20.360buyimg.com/vc/jfs/t15091/149/133428094/289315/8e1f10e3/5a24df5bN9a495e1d.jpg\"},{\"id\":\"2\",\"url\":\"http://img20.360buyimg.com/vc/jfs/t14416/127/1766210680/884298/ffb54d5d/5a56cae1N8a59a824.jpg\"}]', '用过，才知道什么叫流畅\r\n月岩灰搭载 64 GB /128GB 存储，薄荷金搭载 64GB 存储，星辰黑搭载 128 GB 存储，均为 UFS 2.1 双通道存储。相比 UFS2.0，UFS 2.1 的带宽速度快了将近一倍。');
+COMMIT;
+
+-- ----------------------------
+-- Table structure for shop_order
+-- ----------------------------
+DROP TABLE IF EXISTS `shop_order`;
+CREATE TABLE `shop_order` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `user_id` int(11) DEFAULT NULL COMMENT '关联用户表id',
+  `commodity_id` int(11) DEFAULT NULL COMMENT '关联商品表id',
+  `order_number` varchar(255) DEFAULT NULL COMMENT '订单号',
+  `order_status` varchar(255) DEFAULT NULL COMMENT '0: 未付款，1：付款发货中，2：订单完成',
+  `order_total` varchar(255) DEFAULT NULL COMMENT '订单总价',
+  `order_size` int(11) DEFAULT NULL COMMENT '订单商品的购买数量',
+  PRIMARY KEY (`id`)
+) ENGINE=MyISAM AUTO_INCREMENT=181 DEFAULT CHARSET=utf8;
+
+-- ----------------------------
+-- Records of shop_order
+-- ----------------------------
+BEGIN;
+INSERT INTO `shop_order` VALUES (180, 14, 2, '1561357029000', '2', '1399', 1);
+INSERT INTO `shop_order` VALUES (179, 14, 1, '1561357029000', '1', '1199', 1);
+INSERT INTO `shop_order` VALUES (178, 14, 8, '1561019716000', '0', '2999', 1);
+INSERT INTO `shop_order` VALUES (177, 14, 6, '1561019716000', '1', '3199', 1);
+INSERT INTO `shop_order` VALUES (176, 14, 11, '1561019716000', '2', '1099', 1);
+COMMIT;
+
+-- ----------------------------
+-- Table structure for shop_user
+-- ----------------------------
+DROP TABLE IF EXISTS `shop_user`;
+CREATE TABLE `shop_user` (
+  `id` int(11) NOT NULL AUTO_INCREMENT,
+  `user_name` varchar(11) DEFAULT NULL COMMENT '用户名',
+  `user_pwd` varchar(255) DEFAULT NULL COMMENT '用户密码',
+  `user_nicname` varchar(255) DEFAULT NULL COMMENT '用户昵称',
+  `user_addres` varchar(255) DEFAULT NULL COMMENT '收货地址',
+  `user_money` varchar(255) DEFAULT '9999999' COMMENT '账户余额',
+  `user_truename` varchar(255) DEFAULT NULL COMMENT '用户的真实姓名',
+  PRIMARY KEY (`id`)
+) ENGINE=MyISAM AUTO_INCREMENT=27 DEFAULT CHARSET=utf8;
+
+-- ----------------------------
+-- Records of shop_user
+-- ----------------------------
+BEGIN;
+INSERT INTO `shop_user` VALUES (14, '15155145354', 'fc51c4612ee06de1b3a9c9223f465434', 'bmy', '安徽 合肥市 蜀山区博奥丽苑', '9991212', '刘兵');
+INSERT INTO `shop_user` VALUES (25, '18305520337', 'fcea920f7412b5da7be0cf42b8c93759', '1234567', NULL, '9999999', NULL);
+INSERT INTO `shop_user` VALUES (24, '13666062265', '71b3b26aaa319e0cdf6fdb8429c112b0', '789456', NULL, '9999999', NULL);
+INSERT INTO `shop_user` VALUES (23, '13666062265', '71b3b26aaa319e0cdf6fdb8429c112b0', '789456', NULL, '9999999', NULL);
+INSERT INTO `shop_user` VALUES (26, '18305520337', 'fcea920f7412b5da7be0cf42b8c93759', '1234567', NULL, '9999999', NULL);
+COMMIT;
+
+SET FOREIGN_KEY_CHECKS = 1;