Merge branch 'master' into dev

litemall-admin/src/styles/index.scss

@@ -22,7 +22,7 @@ html {
   box-sizing: border-box;
 }
 
-#app{
+#app {
   height: 100%;
 }
 
@@ -53,9 +53,9 @@ a:hover {
   text-decoration: none;
 }
 
-div:focus{
+div:focus {
   outline: none;
- }
+}
 
 .fr {
   float: right;
@@ -96,36 +96,29 @@ div:focus{
   }
 }
 
-code {
+aside {
   background: #eef1f6;
-  padding: 15px 16px;
+  padding: 8px 24px;
   margin-bottom: 20px;
+  border-radius: 2px;
   display: block;
-  line-height: 36px;
-  font-size: 15px;
-  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
   a {
     color: #337ab7;
     cursor: pointer;
+
     &:hover {
       color: rgb(32, 160, 255);
     }
   }
 }
 
-.warn-content{
-  background: rgba(66,185,131,.1);
-  border-radius: 2px;
-  padding: 16px;
-  padding: 1rem;
-  line-height: 1.6rem;
-  word-spacing: .05rem;
-  a{
-    color: #42b983;
-    font-weight: 600;
-  }
-}
-
 //main-container全局样式
 .app-container {
   padding: 20px;
@@ -153,13 +146,16 @@ code {
   padding-right: 20px;
   transition: 600ms ease position;
   background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+
   .subtitle {
     font-size: 20px;
     color: #fff;
   }
+
   &.draft {
     background: #d0d0d0;
   }
+
   &.deleted {
     background: #d0d0d0;
   }
@@ -169,6 +165,7 @@ code {
 .link-type:focus {
   color: #337ab7;
   cursor: pointer;
+
   &:hover {
     color: rgb(32, 160, 255);
   }
@@ -176,6 +173,7 @@ code {
 
 .filter-container {
   padding-bottom: 10px;
+
   .filter-item {
     display: inline-block;
     vertical-align: middle;

litemall-admin/src/styles/mixin.scss

@@ -10,9 +10,11 @@
   &::-webkit-scrollbar-track-piece {
     background: #d3dce6;
   }
+
   &::-webkit-scrollbar {
     width: 6px;
   }
+
   &::-webkit-scrollbar-thumb {
     background: #99a9bf;
     border-radius: 20px;
@@ -37,21 +39,25 @@
   $transparent-border-style: $width solid transparent;
   height: 0;
   width: 0;
+
   @if $direction==up {
     border-bottom: $color-border-style;
     border-left: $transparent-border-style;
     border-right: $transparent-border-style;
   }
+
   @else if $direction==right {
     border-left: $color-border-style;
     border-top: $transparent-border-style;
     border-bottom: $transparent-border-style;
   }
+
   @else if $direction==down {
     border-top: $color-border-style;
     border-left: $transparent-border-style;
     border-right: $transparent-border-style;
   }
+
   @else if $direction==left {
     border-right: $color-border-style;
     border-top: $transparent-border-style;

litemall-admin/src/styles/sidebar.scss

 #app {
-  // 主体区域
+
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
-    margin-left: 180px;
+    margin-left: $sideBarWidth;
     position: relative;
   }
-  // 侧边栏
+
   .sidebar-container {
     transition: width 0.28s;
-    width: 180px !important;
+    width: $sideBarWidth !important;
+    background-color: $menuBg;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -18,62 +19,111 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    //reset element-ui css
+
+    // reset element-ui css
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
     }
+
     .scrollbar-wrapper {
-      overflow-x: hidden!important;
-      .el-scrollbar__view {
-        height: 100%;
-      }
+      overflow-x: hidden !important;
     }
-    .el-scrollbar__bar.is-vertical{
+
+    .el-scrollbar__bar.is-vertical {
       right: 0px;
     }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
     .is-horizontal {
       display: none;
     }
+
     a {
       display: inline-block;
       width: 100%;
       overflow: hidden;
     }
+
     .svg-icon {
       margin-right: 16px;
     }
+
     .el-menu {
       border: none;
       height: 100%;
       width: 100% !important;
     }
-    .is-active > .el-submenu__title{
-        color: #f4f4f5!important;
+
+    // menu hover
+    .submenu-title-noDropdown,
+    .el-submenu__title {
+      &:hover {
+        background-color: $menuHover !important;
+      }
+    }
+
+    .is-active>.el-submenu__title {
+      color: $subMenuActiveText !important;
+    }
+
+    & .nest-menu .el-submenu>.el-submenu__title,
+    & .el-submenu .el-menu-item {
+      min-width: $sideBarWidth !important;
+      background-color: $subMenuBg !important;
+
+      &:hover {
+        background-color: $subMenuHover !important;
+      }
     }
   }
+
   .hideSidebar {
     .sidebar-container {
-      width: 36px !important;
+      width: 54px !important;
     }
+
     .main-container {
-      margin-left: 36px;
+      margin-left: 54px;
     }
+
     .submenu-title-noDropdown {
-      padding-left: 10px !important;
+      padding: 0 !important;
       position: relative;
+
       .el-tooltip {
-        padding: 0 10px !important;
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
       }
     }
+
     .el-submenu {
       overflow: hidden;
+
       &>.el-submenu__title {
-        padding-left: 10px !important;
+        padding: 0 !important;
+
+        .svg-icon {
+          margin-left: 20px;
+        }
+
         .el-submenu__icon-arrow {
           display: none;
         }
       }
     }
+
     .el-menu--collapse {
       .el-submenu {
         &>.el-submenu__title {
@@ -88,35 +138,33 @@
       }
     }
   }
-  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
-  .sidebar-container .el-submenu .el-menu-item {
-    min-width: 180px !important;
-    background-color: $subMenuBg !important;
-    &:hover {
-      background-color: $menuHover !important;
-    }
-  }
+
   .el-menu--collapse .el-menu .el-submenu {
-    min-width: 180px !important;
+    min-width: $sideBarWidth !important;
   }
 
-  //适配移动端
+  // mobile responsive
   .mobile {
     .main-container {
       margin-left: 0px;
     }
+
     .sidebar-container {
       transition: transform .28s;
-      width: 180px !important;
+      width: $sideBarWidth !important;
     }
+
     &.hideSidebar {
       .sidebar-container {
+        pointer-events: none;
         transition-duration: 0.3s;
-        transform: translate3d(-180px, 0, 0);
+        transform: translate3d(-$sideBarWidth, 0, 0);
       }
     }
   }
+
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;
@@ -124,10 +172,38 @@
   }
 }
 
-.el-menu--vertical{
-  & >.el-menu{
-    .svg-icon{
+// when menu collapsed
+.el-menu--vertical {
+  &>.el-menu {
+    .svg-icon {
       margin-right: 16px;
     }
   }
+
+  .nest-menu .el-submenu>.el-submenu__title,
+  .el-menu-item {
+    &:hover {
+      // you can use $subMenuHover
+      background-color: $menuHover !important;
+    }
+  }
+
+  // the scroll bar appears when the subMenu is too long
+  >.el-menu--popup {
+    max-height: 100vh;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  }
 }

litemall-admin/src/styles/transition.scss

-//globl transition css
+// global transition css
 
-/*fade*/
+/* fade */
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.28s;
@@ -11,21 +11,23 @@
   opacity: 0;
 }
 
-/*fade-transform*/
+/* fade-transform */
 .fade-transform-leave-active,
 .fade-transform-enter-active {
   transition: all .5s;
 }
+
 .fade-transform-enter {
   opacity: 0;
   transform: translateX(-30px);
 }
+
 .fade-transform-leave-to {
   opacity: 0;
   transform: translateX(30px);
 }
 
-/*breadcrumb transition*/
+/* breadcrumb transition */
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
   transition: all .5s;
@@ -44,4 +46,3 @@
 .breadcrumb-leave-active {
   position: absolute;
 }
-

litemall-admin/src/styles/variables.scss

+// base color
 $blue:#324157;
 $light-blue:#3A71A8;
 $red:#C03639;
@@ -7,7 +8,28 @@ $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
 
-//sidebar
+// sidebar
+$menuText:#bfcbd9;
+$menuActiveText:#409EFF;
+$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
+
 $menuBg:#304156;
+$menuHover:#263445;
+
 $subMenuBg:#1f2d3d;
-$menuHover:#001528;
+$subMenuHover:#001528;
+
+$sideBarWidth: 210px;
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+  sideBarWidth: $sideBarWidth;
+}

litemall-admin/src/utils/createUniqueString.js

-/**
- * Created by jiachenpan on 17/3/8.
- */
-export default function createUniqueString() {
-  const timestamp = +new Date() + ''
-  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
-  return (+(randomNum + timestamp)).toString(32)
-}

litemall-admin/src/utils/print.js

+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function (dom, options) {
+  if (!(this instanceof Print)) return new Print(dom, options);
+
+  this.options = this.extend({
+    'noPrint': '.no-print'
+  }, options);
+
+  if ((typeof dom) === "string") {
+    this.dom = document.querySelector(dom);
+  } else {
+    this.isDOM(dom)
+    this.dom = this.isDOM(dom) ? dom : dom.$el;
+  }
+
+  this.init();
+};
+Print.prototype = {
+  init: function () {
+    var content = this.getStyle() + this.getHtml();
+    this.writeIframe(content);
+  },
+  extend: function (obj, obj2) {
+    for (var k in obj2) {
+      obj[k] = obj2[k];
+    }
+    return obj;
+  },
+
+  getStyle: function () {
+    var str = "",
+      styles = document.querySelectorAll('style,link');
+    for (var i = 0; i < styles.length; i++) {
+      str += styles[i].outerHTML;
+    }
+    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
+
+    return str;
+  },
+
+  getHtml: function () {
+    var inputs = document.querySelectorAll('input');
+    var textareas = document.querySelectorAll('textarea');
+    var selects = document.querySelectorAll('select');
+
+    for (var k = 0; k < inputs.length; k++) {
+      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+        if (inputs[k].checked == true) {
+          inputs[k].setAttribute('checked', "checked")
+        } else {
+          inputs[k].removeAttribute('checked')
+        }
+      } else if (inputs[k].type == "text") {
+        inputs[k].setAttribute('value', inputs[k].value)
+      } else {
+        inputs[k].setAttribute('value', inputs[k].value)
+      }
+    }
+
+    for (var k2 = 0; k2 < textareas.length; k2++) {
+      if (textareas[k2].type == 'textarea') {
+        textareas[k2].innerHTML = textareas[k2].value
+      }
+    }
+
+    for (var k3 = 0; k3 < selects.length; k3++) {
+      if (selects[k3].type == 'select-one') {
+        var child = selects[k3].children;
+        for (var i in child) {
+          if (child[i].tagName == 'OPTION') {
+            if (child[i].selected == true) {
+              child[i].setAttribute('selected', "selected")
+            } else {
+              child[i].removeAttribute('selected')
+            }
+          }
+        }
+      }
+    }
+
+    return this.dom.outerHTML;
+  },
+
+  writeIframe: function (content) {
+    var w, doc, iframe = document.createElement('iframe'),
+      f = document.body.appendChild(iframe);
+    iframe.id = "myIframe";
+    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
+    w = f.contentWindow || f.contentDocument;
+    doc = f.contentDocument || f.contentWindow.document;
+    doc.open();
+    doc.write(content);
+    doc.close();
+    var _this = this
+    iframe.onload = function(){
+      _this.toPrint(w);
+      setTimeout(function () {
+        document.body.removeChild(iframe)
+      }, 100)
+    }
+  },
+
+  toPrint: function (frameWindow) {
+    try {
+      setTimeout(function () {
+        frameWindow.focus();
+        try {
+          if (!frameWindow.document.execCommand('print', false, null)) {
+            frameWindow.print();
+          }
+        } catch (e) {
+          frameWindow.print();
+        }
+        frameWindow.close();
+      }, 10);
+    } catch (err) {
+      console.log('err', err);
+    }
+  },
+  isDOM: (typeof HTMLElement === 'object') ?
+    function (obj) {
+      return obj instanceof HTMLElement;
+    } :
+    function (obj) {
+      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+    }
+};
+const MyPlugin = {}
+MyPlugin.install = function (Vue, options) {
+  // 4. 添加实例方法
+  Vue.prototype.$print = Print
+}
+export default MyPlugin

litemall-admin/src/utils/request.js

@@ -5,7 +5,7 @@ import { getToken } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.BASE_API, // api 的 base_url
+  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
   timeout: 5000 // request timeout
 })
 

litemall-admin/src/utils/validate.js

 /**
- * Created by jiachenpan on 16/11/18.
+ * Created by PanJiaChen on 16/11/18.
  */
 
-export function isvalidUsername(str) {
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
   const valid_map = ['admin', 'editor']
   return valid_map.indexOf(str.trim()) >= 0
 }
 
-/* 合法uri*/
-export function validateURL(textval) {
-  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
-  return urlregex.test(textval)
+/**
+ * @param {string} url
+ * @returns {Boolean}
+ */
+export function validURL(url) {
+  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
+  return reg.test(url)
 }
 
-/* 小写字母*/
-export function validateLowerCase(str) {
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validLowerCase(str) {
   const reg = /^[a-z]+$/
   return reg.test(str)
 }
 
-/* 大写字母*/
-export function validateUpperCase(str) {
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUpperCase(str) {
   const reg = /^[A-Z]+$/
   return reg.test(str)
 }
 
-/* 大小写字母*/
-export function validateAlphabets(str) {
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validAlphabets(str) {
   const reg = /^[A-Za-z]+$/
   return reg.test(str)
 }
 
 /**
- * validate email
- * @param email
- * @returns {boolean}
+ * @param {string} email
+ * @returns {Boolean}
+ */
+export function validEmail(email) {
+  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  return reg.test(email)
+}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function isString(str) {
+  if (typeof str === 'string' || str instanceof String) {
+    return true
+  }
+  return false
+}
+
+/**
+ * @param {Array} arg
+ * @returns {Boolean}
  */
-export function validateEmail(email) {
-  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-  return re.test(email)
+export function isArray(arg) {
+  if (typeof Array.isArray === 'undefined') {
+    return Object.prototype.toString.call(arg) === '[object Array]'
+  }
+  return Array.isArray(arg)
 }

litemall-admin/src/views/config/express.vue

@@ -50,18 +50,21 @@ export default {
     update() {
       this.$refs['dataForm'].validate((valid) => {
         if (!valid) {
-          return
+          return false
         }
-        updateExpress(this.dataForm).then(response => {
-          this.$notify.success({
-            title: '成功',
-            message: '运费配置修改成功'
-          })
-        }).catch(response => {
-          this.$notify.error({
-            title: '失败',
-            message: response.data.errmsg
-          })
+        this.doUpdate()
+      })
+    },
+    doUpdate() {
+      updateExpress(this.dataForm).then(response => {
+        this.$notify.success({
+          title: '成功',
+          message: '运费配置修改成功'
+        })
+      }).catch(response => {
+        this.$notify.error({
+          title: '失败',
+          message: response.data.errmsg
         })
       })
     }

litemall-admin/src/views/config/mall.vue

@@ -7,6 +7,15 @@
       <el-form-item label="商场地址" prop="litemall_mall_address">
         <el-input v-model="dataForm.litemall_mall_address"/>
       </el-form-item>
+      <el-form-item label="地理坐标">
+        <el-col :span="11">
+          <el-input v-model="dataForm.litemall_mall_longitude" placeholder="经度"/>
+        </el-col>
+        <el-col :span="2" style="text-align: center;">-</el-col>
+        <el-col :span="11">
+          <el-input v-model="dataForm.litemall_mall_latitude" placeholder="纬度"/>
+        </el-col>
+      </el-form-item>
       <el-form-item label="联系电话" prop="litemall_mall_phone">
         <el-input v-model="dataForm.litemall_mall_phone"/>
       </el-form-item>
@@ -32,7 +41,23 @@ export default {
         litemall_mall_name: '',
         litemall_mall_address: '',
         litemall_mall_phone: '',
-        litemall_mall_qq: ''
+        litemall_mall_qq: '',
+        litemall_mall_longitude: '',
+        litemall_mall_latitude: ''
+      },
+      rules: {
+        litemall_mall_name: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        litemall_mall_address: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        litemall_mall_phone: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        litemall_mall_qq: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ]
       }
     }
   },
@@ -49,6 +74,14 @@ export default {
       this.init()
     },
     update() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.doUpdate()
+      })
+    },
+    doUpdate() {
       updateMall(this.dataForm)
         .then(response => {
           this.$notify.success({

litemall-admin/src/views/config/order.vue

@@ -34,7 +34,22 @@ export default {
   name: 'ConfigOrder',
   data() {
     return {
-      dataForm: {}
+      dataForm: {
+        litemall_order_unpaid: 0,
+        litemall_order_unconfirm: 0,
+        litemall_order_comment: 0
+      },
+      rules: {
+        litemall_order_unpaid: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        litemall_order_unconfirm: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        litemall_order_comment: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ]
+      }
     }
   },
   created() {
@@ -50,6 +65,14 @@ export default {
       this.init()
     },
     update() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.doUpdate()
+      })
+    },
+    doUpdate() {
       updateOrder(this.dataForm)
         .then(response => {
           this.$notify.success({

litemall-admin/src/views/config/wx.vue

@@ -5,9 +5,7 @@
       :rules="rules"
       :model="dataForm"
       status-icon
-      label-width="300px"
-
-    >
+      label-width="300px">
       <el-tabs tab-position="left" >
         <el-tab-pane label="首页配置">
           <el-form-item label="新品首发栏目商品显示数量" prop="litemall_wx_index_new">
@@ -51,7 +49,35 @@ export default {
   name: 'ConfigWx',
   data() {
     return {
-      dataForm: { }
+      dataForm: {
+        litemall_wx_index_new: 0,
+        litemall_wx_index_hot: 0,
+        litemall_wx_index_brand: 0,
+        litemall_wx_index_topic: 0,
+        litemall_wx_catlog_list: 0,
+        litemall_wx_catlog_goods: 0,
+        litemall_wx_share: false
+      },
+      rules: {
+        litemall_wx_index_new: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        litemall_wx_index_hot: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        litemall_wx_index_brand: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        litemall_wx_index_topic: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        litemall_wx_catlog_list: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ],
+        litemall_wx_catlog_goods: [
+          { required: true, message: '不能为空', trigger: 'blur' }
+        ]
+      }
     }
   },
   created() {
@@ -67,6 +93,14 @@ export default {
       this.init()
     },
     update() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.doUpdate()
+      })
+    },
+    doUpdate() {
       updateWx(this.dataForm)
         .then(response => {
           this.$notify.success({

litemall-admin/src/views/errorPage/401.vue

 <template>
   <div class="errPage-container">
-    <el-button icon="arrow-left" class="pan-back-btn" @click="back">返回</el-button>
+    <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">返回</el-button>
     <el-row>
       <el-col :span="12">
         <h1 class="text-jumbo text-ginormous">Oops!</h1>

litemall-admin/src/views/goods/comment.vue

@@ -22,7 +22,7 @@
 
       <el-table-column align="center" label="评论图片" prop="picUrls">
         <template slot-scope="scope">
-          <img v-for="item in scope.row.picUrls" :key="item" :src="item" width="40">
+          <el-image v-for="item in scope.row.picUrls" :key="item" :src="item" :preview-src-list="scope.row.picUrls" :lazy="true" style="width: 40px; height: 40px; margin-right: 5px;"/>
         </template>
       </el-table-column>
 
@@ -64,7 +64,7 @@ export default {
   components: { Pagination },
   data() {
     return {
-      list: undefined,
+      list: [],
       total: 0,
       listLoading: true,
       listQuery: {
@@ -90,7 +90,7 @@ export default {
     getList() {
       this.listLoading = true
       listComment(this.listQuery).then(response => {
-        this.list = response.data.data.items
+        this.list = response.data.data.list
         this.total = response.data.data.total
         this.listLoading = false
       }).catch(() => {

litemall-admin/src/views/goods/create.vue

@@ -5,21 +5,16 @@
       <h3>商品介绍</h3>
       <el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
         <el-form-item label="商品编号" prop="goodsSn">
-          <el-input v-model="goods.goodsSn"/>
+          <el-input v-model="goods.goodsSn" />
         </el-form-item>
         <el-form-item label="商品名称" prop="name">
-          <el-input v-model="goods.name"/>
+          <el-input v-model="goods.name" />
         </el-form-item>
-        <el-form-item label="专柜价格" prop="counterPrice">
+        <el-form-item label="市场售价" prop="counterPrice">
           <el-input v-model="goods.counterPrice" placeholder="0.00">
             <template slot="append">元</template>
           </el-input>
         </el-form-item>
-        <el-form-item label="当前价格" prop="retailPrice">
-          <el-input v-model="goods.retailPrice" placeholder="0.00">
-            <template slot="append">元</template>
-          </el-input>
-        </el-form-item>
         <el-form-item label="是否新品" prop="isNew">
           <el-radio-group v-model="goods.isNew">
             <el-radio :label="true">新品</el-radio>
@@ -46,9 +41,10 @@
             :headers="headers"
             :on-success="uploadPicUrl"
             class="avatar-uploader"
-            accept=".jpg,.jpeg,.png,.gif">
+            accept=".jpg,.jpeg,.png,.gif"
+          >
             <img v-if="goods.picUrl" :src="goods.picUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"/>
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
           </el-upload>
         </el-form-item>
 
@@ -62,13 +58,14 @@
             :on-remove="handleRemove"
             multiple
             accept=".jpg,.jpeg,.png,.gif"
-            list-type="picture-card">
-            <i class="el-icon-plus"/>
+            list-type="picture-card"
+          >
+            <i class="el-icon-plus" />
           </el-upload>
         </el-form-item>
 
         <el-form-item label="商品单位">
-          <el-input v-model="goods.unit" placeholder="件 / 个 / 盒"/>
+          <el-input v-model="goods.unit" placeholder="件 / 个 / 盒" />
         </el-form-item>
 
         <el-form-item label="关键字">
@@ -82,26 +79,27 @@
             class="input-new-keyword"
 
             @keyup.enter.native="handleInputConfirm"
-            @blur="handleInputConfirm"/>
+            @blur="handleInputConfirm"
+          />
           <el-button v-else class="button-new-keyword" type="primary" @click="showInput">+ 增加</el-button>
         </el-form-item>
 
         <el-form-item label="所属分类">
-          <el-cascader :options="categoryList" expand-trigger="hover" @change="handleCategoryChange"/>
+          <el-cascader :options="categoryList" expand-trigger="hover" clearable @change="handleCategoryChange" />
         </el-form-item>
 
         <el-form-item label="所属品牌商">
-          <el-select v-model="goods.brandId">
-            <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"/>
+          <el-select v-model="goods.brandId" clearable>
+            <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
 
         <el-form-item label="商品简介">
-          <el-input v-model="goods.brief"/>
+          <el-input v-model="goods.brief" />
         </el-form-item>
 
         <el-form-item label="商品详细介绍">
-          <editor :init="editorInit" v-model="goods.detail"/>
+          <editor v-model="goods.detail" :init="editorInit" />
         </el-form-item>
       </el-form>
     </el-card>
@@ -121,7 +119,7 @@
       </el-row>
 
       <el-table :data="specifications">
-        <el-table-column property="specification" label="规格名"/>
+        <el-table-column property="specification" label="规格名" />
         <el-table-column property="value" label="规格值">
           <template slot-scope="scope">
             <el-tag type="primary">
@@ -139,7 +137,8 @@
           align="center"
           label="操作"
           width="250"
-          class-name="small-padding fixed-width">
+          class-name="small-padding fixed-width"
+        >
           <template slot-scope="scope">
             <el-button type="danger" size="mini" @click="handleSpecificationDelete(scope.row)">删除</el-button>
           </template>
@@ -154,12 +153,13 @@
           status-icon
           label-position="left"
           label-width="100px"
-          style="width: 400px; margin-left:50px;">
+          style="width: 400px; margin-left:50px;"
+        >
           <el-form-item label="规格名" prop="specification">
-            <el-input v-model="specForm.specification"/>
+            <el-input v-model="specForm.specification" />
           </el-form-item>
           <el-form-item label="规格值" prop="value">
-            <el-input v-model="specForm.value"/>
+            <el-input v-model="specForm.value" />
           </el-form-item>
           <el-form-item label="规格图片" prop="picUrl">
             <el-upload
@@ -168,9 +168,10 @@
               :headers="headers"
               :on-success="uploadSpecPicUrl"
               class="avatar-uploader"
-              accept=".jpg,.jpeg,.png,.gif">
+              accept=".jpg,.jpeg,.png,.gif"
+            >
               <img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"/>
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
             </el-upload>
           </el-form-item>
         </el-form>
@@ -191,8 +192,8 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column property="price" width="100" label="货品售价"/>
-        <el-table-column property="number" width="100" label="货品数量"/>
+        <el-table-column property="price" width="100" label="货品售价" />
+        <el-table-column property="number" width="100" label="货品数量" />
         <el-table-column property="url" width="100" label="货品图片">
           <template slot-scope="scope">
             <img v-if="scope.row.url" :src="scope.row.url" width="40">
@@ -205,24 +206,25 @@
         </el-table-column>
       </el-table>
 
-      <el-dialog :visible.sync="productVisiable" title="设置货品">
+      <el-dialog :visible.sync="productVisiable" title="添加货品">
         <el-form
           ref="productForm"
           :model="productForm"
           status-icon
           label-position="left"
           label-width="100px"
-          style="width: 400px; margin-left:50px;">
+          style="width: 400px; margin-left:50px;"
+        >
           <el-form-item label="货品规格列" prop="specifications">
             <el-tag v-for="tag in productForm.specifications" :key="tag">
               {{ tag }}
             </el-tag>
           </el-form-item>
           <el-form-item label="货品售价" prop="price">
-            <el-input v-model="productForm.price"/>
+            <el-input v-model="productForm.price" />
           </el-form-item>
           <el-form-item label="货品数量" prop="number">
-            <el-input v-model="productForm.number"/>
+            <el-input v-model="productForm.number" />
           </el-form-item>
           <el-form-item label="货品图片" prop="url">
             <el-upload
@@ -231,9 +233,10 @@
               :headers="headers"
               :on-success="uploadProductUrl"
               class="avatar-uploader"
-              accept=".jpg,.jpeg,.png,.gif">
+              accept=".jpg,.jpeg,.png,.gif"
+            >
               <img v-if="productForm.url" :src="productForm.url" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"/>
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
             </el-upload>
           </el-form-item>
         </el-form>
@@ -246,10 +249,10 @@
 
     <el-card class="box-card">
       <h3>商品参数</h3>
-      <el-button :plain="true" type="primary" @click="handleAttributeShow">添加</el-button>
+      <el-button type="primary" @click="handleAttributeShow">添加</el-button>
       <el-table :data="attributes">
-        <el-table-column property="attribute" label="商品参数名称"/>
-        <el-table-column property="value" label="商品参数值"/>
+        <el-table-column property="attribute" label="商品参数名称" />
+        <el-table-column property="value" label="商品参数值" />
         <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">删除</el-button>
@@ -257,19 +260,20 @@
         </el-table-column>
       </el-table>
 
-      <el-dialog :visible.sync="attributeVisiable" title="设置商品参数">
+      <el-dialog :visible.sync="attributeVisiable" title="添加商品参数">
         <el-form
           ref="attributeForm"
           :model="attributeForm"
           status-icon
           label-position="left"
           label-width="100px"
-          style="width: 400px; margin-left:50px;">
+          style="width: 400px; margin-left:50px;"
+        >
           <el-form-item label="商品参数名称" prop="attribute">
-            <el-input v-model="attributeForm.attribute"/>
+            <el-input v-model="attributeForm.attribute" />
           </el-form-item>
           <el-form-item label="商品参数值" prop="value">
-            <el-input v-model="attributeForm.value"/>
+            <el-input v-model="attributeForm.value" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -351,7 +355,7 @@ export default {
       keywords: [],
       categoryList: [],
       brandList: [],
-      goods: { picUrl: '', gallery: [] },
+      goods: { picUrl: '', gallery: [], isHot: false, isNew: true, isOnSale: true },
       specVisiable: false,
       specForm: { specification: '', value: '', picUrl: '' },
       multipleSpec: false,
@@ -368,6 +372,7 @@ export default {
       },
       editorInit: {
         language: 'zh_CN',
+        height: 500,
         convert_urls: false,
         plugins: ['advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
         toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],

litemall-admin/src/views/goods/edit.vue

@@ -4,19 +4,17 @@
     <el-card class="box-card">
       <h3>商品介绍</h3>
       <el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
-        <el-form-item label="商品编号" prop="goodsSn">
-          <el-input v-model="goods.goodsSn"/>
+        <el-form-item label="商品ID" prop="id">
+          <el-input v-model="goods.id" disabled />
         </el-form-item>
         <el-form-item label="商品名称" prop="name">
-          <el-input v-model="goods.name"/>
+          <el-input v-model="goods.name" />
         </el-form-item>
-        <el-form-item label="专柜价格" prop="counterPrice">
-          <el-input v-model="goods.counterPrice" placeholder="0.00">
-            <template slot="append">元</template>
-          </el-input>
+        <el-form-item label="商品编号" prop="goodsSn">
+          <el-input v-model="goods.goodsSn" />
         </el-form-item>
-        <el-form-item label="当前价格" prop="retailPrice">
-          <el-input v-model="goods.retailPrice" placeholder="0.00">
+        <el-form-item label="市场售价" prop="counterPrice">
+          <el-input v-model="goods.counterPrice" placeholder="0.00">
             <template slot="append">元</template>
           </el-input>
         </el-form-item>
@@ -46,9 +44,10 @@
             :show-file-list="false"
             :on-success="uploadPicUrl"
             class="avatar-uploader"
-            accept=".jpg,.jpeg,.png,.gif">
+            accept=".jpg,.jpeg,.png,.gif"
+          >
             <img v-if="goods.picUrl" :src="goods.picUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"/>
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
           </el-upload>
         </el-form-item>
 
@@ -63,50 +62,49 @@
             :on-remove="handleRemove"
             multiple
             accept=".jpg,.jpeg,.png,.gif"
-            list-type="picture-card">
-            <i class="el-icon-plus"/>
+            list-type="picture-card"
+          >
+            <i class="el-icon-plus" />
           </el-upload>
         </el-form-item>
 
         <el-form-item label="商品单位">
-          <el-input v-model="goods.unit" placeholder="件 / 个 / 盒"/>
+          <el-input v-model="goods.unit" placeholder="件 / 个 / 盒" />
         </el-form-item>
 
         <el-form-item label="关键字">
           <el-tag v-for="tag in keywords" :key="tag" closable type="primary" @close="handleClose(tag)">
             {{ tag }}
           </el-tag>
-          <el-input v-if="newKeywordVisible" ref="newKeywordInput" v-model="newKeyword" class="input-new-keyword" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"/>
+          <el-input v-if="newKeywordVisible" ref="newKeywordInput" v-model="newKeyword" class="input-new-keyword" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
           <el-button v-else class="button-new-keyword" type="primary" @click="showInput">+ 增加</el-button>
         </el-form-item>
 
         <el-form-item label="所属分类">
-          <el-cascader :options="categoryList" v-model="categoryIds" expand-trigger="hover" @change="handleCategoryChange"/>
+          <el-cascader v-model="categoryIds" :options="categoryList" clearable expand-trigger="hover" @change="handleCategoryChange" />
         </el-form-item>
 
         <el-form-item label="所属品牌商">
-          <el-select v-model="goods.brandId">
-            <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"/>
+          <el-select v-model="goods.brandId" clearable>
+            <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
 
         <el-form-item label="商品简介">
-          <el-input v-model="goods.brief"/>
+          <el-input v-model="goods.brief" />
         </el-form-item>
 
         <el-form-item label="商品详细介绍">
-          <editor :init="editorInit" v-model="goods.detail"/>
+          <editor v-model="goods.detail" :init="editorInit" />
         </el-form-item>
       </el-form>
     </el-card>
 
     <el-card class="box-card">
       <h3>商品规格</h3>
-      <el-button :plain="true" type="primary" @click="handleSpecificationShow">添加</el-button>
-
       <el-table :data="specifications">
         <el-table-column property="specification" label="规格名" />
-        <el-table-column property="value" label="规格值" >
+        <el-table-column property="value" label="规格值">
           <template slot-scope="scope">
             <el-tag type="primary">
               {{ scope.row.value }}
@@ -118,9 +116,9 @@
             <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40">
           </template>
         </el-table-column>
-        <el-table-column align="center" label="操作" width="250" class-name="small-padding fixed-width">
+        <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
           <template slot-scope="scope">
-            <el-button type="danger" size="mini" @click="handleSpecificationDelete(scope.row)">删除</el-button>
+            <el-button type="primary" size="mini" @click="handleSpecificationShow(scope.row)">设置</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -128,10 +126,10 @@
       <el-dialog :visible.sync="specVisiable" title="设置规格">
         <el-form ref="specForm" :rules="rules" :model="specForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
           <el-form-item label="规格名" prop="specification">
-            <el-input v-model="specForm.specification"/>
+            <el-input v-model="specForm.specification" disabled />
           </el-form-item>
           <el-form-item label="规格值" prop="value">
-            <el-input v-model="specForm.value"/>
+            <el-input v-model="specForm.value" disabled />
           </el-form-item>
           <el-form-item label="规格图片" prop="picUrl">
             <el-upload
@@ -140,15 +138,16 @@
               :show-file-list="false"
               :on-success="uploadSpecPicUrl"
               class="avatar-uploader"
-              accept=".jpg,.jpeg,.png,.gif">
+              accept=".jpg,.jpeg,.png,.gif"
+            >
               <img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"/>
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
             </el-upload>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="specVisiable = false">取消</el-button>
-          <el-button type="primary" @click="handleSpecificationAdd">确定</el-button>
+          <el-button type="primary" @click="handleSpecificationEdit">确定</el-button>
         </div>
       </el-dialog>
     </el-card>
@@ -156,28 +155,28 @@
     <el-card class="box-card">
       <h3>商品库存</h3>
       <el-table :data="products">
-        <el-table-column property="value" label="货品规格" >
+        <el-table-column property="value" label="货品规格">
           <template slot-scope="scope">
             <el-tag v-for="tag in scope.row.specifications" :key="tag">
               {{ tag }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column property="price" width="100" label="货品售价"/>
-        <el-table-column property="number" width="100" label="货品数量"/>
-        <el-table-column property="url" width="100" label="货品图片">
+        <el-table-column property="price" label="货品售价" />
+        <el-table-column property="number" label="货品数量" />
+        <el-table-column property="url" label="货品图片">
           <template slot-scope="scope">
             <img v-if="scope.row.url" :src="scope.row.url" width="40">
           </template>
         </el-table-column>
-        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
+        <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <el-button type="primary" size="mini" @click="handleProductShow(scope.row)">设置</el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <el-dialog :visible.sync="productVisiable" title="设置货品">
+      <el-dialog :visible.sync="productVisiable" title="编辑货品">
         <el-form ref="productForm" :model="productForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
           <el-form-item label="货品规格列" prop="specifications">
             <el-tag v-for="tag in productForm.specifications" :key="tag">
@@ -185,10 +184,10 @@
             </el-tag>
           </el-form-item>
           <el-form-item label="货品售价" prop="price">
-            <el-input v-model="productForm.price"/>
+            <el-input v-model="productForm.price" />
           </el-form-item>
           <el-form-item label="货品数量" prop="number">
-            <el-input v-model="productForm.number"/>
+            <el-input v-model="productForm.number" />
           </el-form-item>
           <el-form-item label="货品图片" prop="url">
             <el-upload
@@ -197,9 +196,10 @@
               :show-file-list="false"
               :on-success="uploadProductUrl"
               class="avatar-uploader"
-              accept=".jpg,.jpeg,.png,.gif">
+              accept=".jpg,.jpeg,.png,.gif"
+            >
               <img v-if="productForm.url" :src="productForm.url" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"/>
+              <i v-else class="el-icon-plus avatar-uploader-icon" />
             </el-upload>
           </el-form-item>
         </el-form>
@@ -212,29 +212,31 @@
 
     <el-card class="box-card">
       <h3>商品参数</h3>
-      <el-button :plain="true" type="primary" @click="handleAttributeShow">添加</el-button>
-      <el-table :data="attributes">
-        <el-table-column property="attribute" label="商品参数名称"/>
-        <el-table-column property="value" label="商品参数值"/>
-        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
+      <el-button type="primary" @click="handleAttributeShow">添加</el-button>
+      <el-table :data="attributesData">
+        <el-table-column property="attribute" label="商品参数名称" />
+        <el-table-column property="value" label="商品参数值" />
+        <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
           <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="handleAttributeShow(scope.row)">设置</el-button>
             <el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <el-dialog :visible.sync="attributeVisiable" title="设置商品参数">
+      <el-dialog :visible.sync="attributeVisiable" :title="attributeAdd ? '添加商品参数' : '编辑商品参数'">
         <el-form ref="attributeForm" :model="attributeForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
           <el-form-item label="商品参数名称" prop="attribute">
-            <el-input v-model="attributeForm.attribute"/>
+            <el-input v-model="attributeForm.attribute" />
           </el-form-item>
           <el-form-item label="商品参数值" prop="value">
-            <el-input v-model="attributeForm.value"/>
+            <el-input v-model="attributeForm.value" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
           <el-button @click="attributeVisiable = false">取消</el-button>
-          <el-button type="primary" @click="handleAttributeAdd">确定</el-button>
+          <el-button v-if="attributeAdd" type="primary" @click="handleAttributeAdd">确定</el-button>
+          <el-button v-else type="primary" @click="handleAttributeEdit">确定</el-button>
         </div>
       </el-dialog>
     </el-card>
@@ -282,6 +284,10 @@
   height: 145px;
   display: block;
 }
+.op-container {
+  display: flex;
+  justify-content: center;
+}
 </style>
 
 <script>
@@ -320,16 +326,15 @@ export default {
         { id: 0, specifications: ['标准'], price: 0.0, number: 0, url: '' }
       ],
       attributeVisiable: false,
+      attributeAdd: true,
       attributeForm: { attribute: '', value: '' },
       attributes: [],
       rules: {
-        goodsSn: [
-          { required: true, message: '商品编号不能为空', trigger: 'blur' }
-        ],
         name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }]
       },
       editorInit: {
         language: 'zh_CN',
+        height: '400px',
         convert_urls: false,
         plugins: [
           'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
@@ -357,6 +362,16 @@ export default {
       return {
         'X-Litemall-Admin-Token': getToken()
       }
+    },
+    attributesData() {
+      var attributesData = []
+      for (var i = 0; i < this.attributes.length; i++) {
+        if (this.attributes[i].deleted) {
+          continue
+        }
+        attributesData.push(this.attributes[i])
+      }
+      return attributesData
     }
   },
   created() {
@@ -371,6 +386,13 @@ export default {
       const goodsId = this.$route.query.id
       detailGoods(goodsId).then(response => {
         this.goods = response.data.data.goods
+        // 稍微调整一下前后端不一致
+        if (this.goods.brandId === 0) {
+          this.goods.brandId = null
+        }
+        if (this.goods.keywords === '') {
+          this.goods.keywords = null
+        }
         this.specifications = response.data.data.specifications
         this.products = response.data.data.products
         this.attributes = response.data.data.attributes
@@ -488,99 +510,20 @@ export default {
     uploadSpecPicUrl: function(response) {
       this.specForm.picUrl = response.data.url
     },
-    handleSpecificationShow() {
-      this.specForm = { specification: '', value: '', picUrl: '' }
+    handleSpecificationShow(row) {
+      this.specForm = Object.assign({}, row)
       this.specVisiable = true
     },
-    handleSpecificationAdd() {
-      var index = this.specifications.length - 1
+    handleSpecificationEdit() {
+      this.specForm.updateTime = ''
       for (var i = 0; i < this.specifications.length; i++) {
         const v = this.specifications[i]
-        if (v.specification === this.specForm.specification) {
-          index = i
+        if (v.id === this.specForm.id) {
+          this.specifications.splice(i, 1, this.specForm)
+          break
         }
       }
-
-      this.specifications.splice(index + 1, 0, this.specForm)
       this.specVisiable = false
-
-      this.specToProduct()
-    },
-    handleSpecificationDelete(row) {
-      const index = this.specifications.indexOf(row)
-      this.specifications.splice(index, 1)
-      this.specToProduct()
-    },
-    specToProduct() {
-      if (this.specifications.length === 0) {
-        return
-      }
-      // 根据specifications创建临时规格列表
-      var specValues = []
-      var spec = this.specifications[0].specification
-      var values = []
-      values.push(0)
-
-      for (var i = 1; i < this.specifications.length; i++) {
-        const aspec = this.specifications[i].specification
-
-        if (aspec === spec) {
-          values.push(i)
-        } else {
-          specValues.push(values)
-          spec = aspec
-          values = []
-          values.push(i)
-        }
-      }
-      specValues.push(values)
-
-      // 根据临时规格列表生产货品规格
-      // 算法基于 https://blog.csdn.net/tyhj_sf/article/details/53893125
-      var productsIndex = 0
-      var products = []
-      var combination = []
-      var n = specValues.length
-      for (var s = 0; s < n; s++) {
-        combination[s] = 0
-      }
-      var index = 0
-      var isContinue = false
-      do {
-        var specifications = []
-        for (var x = 0; x < n; x++) {
-          var z = specValues[x][combination[x]]
-          specifications.push(this.specifications[z].value)
-        }
-        products[productsIndex] = {
-          id: productsIndex,
-          specifications: specifications,
-          price: 0.0,
-          number: 0,
-          url: ''
-        }
-        productsIndex++
-
-        index++
-        combination[n - 1] = index
-        for (var j = n - 1; j >= 0; j--) {
-          if (combination[j] >= specValues[j].length) {
-            combination[j] = 0
-            index = 0
-            if (j - 1 >= 0) {
-              combination[j - 1] = combination[j - 1] + 1
-            }
-          }
-        }
-        isContinue = false
-        for (var p = 0; p < n; p++) {
-          if (combination[p] !== 0) {
-            isContinue = true
-          }
-        }
-      } while (isContinue)
-
-      this.products = products
     },
     handleProductShow(row) {
       this.productForm = Object.assign({}, row)
@@ -590,6 +533,7 @@ export default {
       this.productForm.url = response.data.url
     },
     handleProductEdit() {
+      this.productForm.updateTime = ''
       for (var i = 0; i < this.products.length; i++) {
         const v = this.products[i]
         if (v.id === this.productForm.id) {
@@ -599,17 +543,34 @@ export default {
       }
       this.productVisiable = false
     },
-    handleAttributeShow() {
-      this.attributeForm = {}
+    handleAttributeShow(row) {
+      if (row.id) {
+        this.attributeForm = Object.assign({}, row)
+        this.attributeAdd = false
+      } else {
+        this.attributeForm = {}
+        this.attributeAdd = true
+      }
       this.attributeVisiable = true
     },
     handleAttributeAdd() {
       this.attributes.unshift(this.attributeForm)
       this.attributeVisiable = false
     },
+    handleAttributeEdit() {
+      // 这是一个trick，设置updateTime的值为空，告诉后端这个记录已编辑需要更新。
+      this.attributeForm.updateTime = ''
+      for (var i = 0; i < this.attributes.length; i++) {
+        const v = this.attributes[i]
+        if (v.id === this.attributeForm.id) {
+          this.attributes.splice(i, 1, this.attributeForm)
+          break
+        }
+      }
+      this.attributeVisiable = false
+    },
     handleAttributeDelete(row) {
-      const index = this.attributes.indexOf(row)
-      this.attributes.splice(index, 1)
+      row.deleted = true
     }
   }
 }

litemall-admin/src/views/goods/list.vue

@@ -3,8 +3,9 @@
 
     <!-- 查询和其他操作 -->
     <div class="filter-container">
-      <el-input v-model="listQuery.goodsSn" clearable class="filter-item" style="width: 200px;" placeholder="请输入商品编号"/>
-      <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入商品名称"/>
+      <el-input v-model="listQuery.goodsId" clearable class="filter-item" style="width: 160px;" placeholder="请输入商品ID" />
+      <el-input v-model="listQuery.goodsSn" clearable class="filter-item" style="width: 160px;" placeholder="请输入商品编号" />
+      <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 160px;" placeholder="请输入商品名称" />
       <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
       <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</el-button>
       <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
@@ -16,6 +17,9 @@
       <el-table-column type="expand">
         <template slot-scope="props">
           <el-form label-position="left" class="table-expand">
+            <el-form-item label="商品编号">
+              <span>{{ props.row.goodsSn }}</span>
+            </el-form-item>
             <el-form-item label="宣传画廊">
               <img v-for="pic in props.row.gallery" :key="pic" :src="pic" class="gallery">
             </el-form-item>
@@ -34,13 +38,14 @@
             <el-form-item label="品牌商ID">
               <span>{{ props.row.brandId }}</span>
             </el-form-item>
+
           </el-form>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="商品编号" prop="goodsSn"/>
+      <el-table-column align="center" label="商品ID" prop="id" />
 
-      <el-table-column align="center" min-width="100" label="名称" prop="name"/>
+      <el-table-column align="center" min-width="100" label="名称" prop="name" />
 
       <el-table-column align="center" property="iconUrl" label="图片">
         <template slot-scope="scope">
@@ -57,15 +62,15 @@
       <el-table-column align="center" label="详情" prop="detail">
         <template slot-scope="scope">
           <el-dialog :visible.sync="detailDialogVisible" title="商品详情">
-            <div v-html="goodsDetail"/>
+            <div class="goods-detail-box" v-html="goodsDetail" />
           </el-dialog>
           <el-button type="primary" size="mini" @click="showDetail(scope.row.detail)">查看</el-button>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="专柜价格" prop="counterPrice"/>
+      <el-table-column align="center" label="市场售价" prop="counterPrice" />
 
-      <el-table-column align="center" label="当前价格" prop="retailPrice"/>
+      <el-table-column align="center" label="当前价格" prop="retailPrice" />
 
       <el-table-column align="center" label="是否新品" prop="isNew">
         <template slot-scope="scope">
@@ -118,6 +123,9 @@
     width: 80px;
     margin-right: 10px;
   }
+  .goods-detail-box img {
+    width: 100%;
+  }
 </style>
 
 <script>
@@ -153,7 +161,7 @@ export default {
     getList() {
       this.listLoading = true
       listGoods(this.listQuery).then(response => {
-        this.list = response.data.data.items
+        this.list = response.data.data.list
         this.total = response.data.data.total
         this.listLoading = false
       }).catch(() => {

litemall-admin/src/views/layout/components/AppMain.vue

@@ -2,7 +2,7 @@
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
-        <router-view :key="key"/>
+        <router-view :key="key" />
       </keep-alive>
     </transition>
   </section>
@@ -22,13 +22,34 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .app-main {
-  /*84 = navbar + tags-view = 50 +34 */
-  min-height: calc(100vh - 84px);
+  /* 50= navbar  50  */
+  min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
   overflow: hidden;
 }
+.fixed-header+.app-main {
+  padding-top: 50px;
+}
+.hasTagsView {
+  .app-main {
+    /* 84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - 84px);
+  }
+  .fixed-header+.app-main {
+    padding-top: 84px;
+  }
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
 </style>
 

litemall-admin/src/views/layout/components/ScrollPane.vue

+<template>
+  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script>
+const tagAndTagSpacing = 4 // tagAndTagSpacing
+
+export default {
+  name: 'ScrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  computed: {
+    scrollWrapper() {
+      return this.$refs.scrollContainer.$refs.wrap
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 40
+      const $scrollWrapper = this.scrollWrapper
+      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
+    },
+    moveToTarget(currentTag) {
+      const $container = this.$refs.scrollContainer.$el
+      const $containerWidth = $container.offsetWidth
+      const $scrollWrapper = this.scrollWrapper
+      const tagList = this.$parent.$refs.tag
+
+      let firstTag = null
+      let lastTag = null
+
+      // find first tag and last tag
+      if (tagList.length > 0) {
+        firstTag = tagList[0]
+        lastTag = tagList[tagList.length - 1]
+      }
+
+      if (firstTag === currentTag) {
+        $scrollWrapper.scrollLeft = 0
+      } else if (lastTag === currentTag) {
+        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
+      } else {
+        // find preTag and nextTag
+        const currentIndex = tagList.findIndex(item => item === currentTag)
+        const prevTag = tagList[currentIndex - 1]
+        const nextTag = tagList[currentIndex + 1]
+
+        // the tag's offsetLeft after of nextTag
+        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+
+        // the tag's offsetLeft before of prevTag
+        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+
+        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  /deep/ {
+    .el-scrollbar__bar {
+      bottom: 0px;
+    }
+    .el-scrollbar__wrap {
+      height: 49px;
+    }
+  }
+}
+</style>