Skip to content
GitLab
"vscode:/vscode.git/clone" did not exist on "be3a882dba843937e82db08ff93d0662a4c9ec0e"
Unverified Commit 324c8da3 authored by linlinjava's avatar linlinjava Committed by GitHub
Browse files

Merge branch 'master' into dev

parents 693cf5cd 4c46da9b
Hide whitespace changes
Inline Side-by-side
litemall-admin/src/styles/index.scss
View file @ 324c8da3
...@@ -22,7 +22,7 @@ html { ...@@ -22,7 +22,7 @@ html {
box-sizing: border-box; box-sizing: border-box;
} }
#app{ #app {
height: 100%; height: 100%;
} }
...@@ -53,9 +53,9 @@ a:hover { ...@@ -53,9 +53,9 @@ a:hover {
text-decoration: none; text-decoration: none;
} }
div:focus{ div:focus {
outline: none; outline: none;
} }
.fr { .fr {
float: right; float: right;
...@@ -96,36 +96,29 @@ div:focus{ ...@@ -96,36 +96,29 @@ div:focus{
} }
} }
code { aside {
background: #eef1f6; background: #eef1f6;
padding: 15px 16px; padding: 8px 24px;
margin-bottom: 20px; margin-bottom: 20px;
border-radius: 2px;
display: block; display: block;
line-height: 36px; line-height: 32px;
font-size: 15px; font-size: 16px;
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; 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 { a {
color: #337ab7; color: #337ab7;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); 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全局样式 //main-container全局样式
.app-container { .app-container {
padding: 20px; padding: 20px;
...@@ -153,13 +146,16 @@ code { ...@@ -153,13 +146,16 @@ code {
padding-right: 20px; padding-right: 20px;
transition: 600ms ease position; 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%); 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 { .subtitle {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
} }
&.draft { &.draft {
background: #d0d0d0; background: #d0d0d0;
} }
&.deleted { &.deleted {
background: #d0d0d0; background: #d0d0d0;
} }
...@@ -169,6 +165,7 @@ code { ...@@ -169,6 +165,7 @@ code {
.link-type:focus { .link-type:focus {
color: #337ab7; color: #337ab7;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); color: rgb(32, 160, 255);
} }
...@@ -176,6 +173,7 @@ code { ...@@ -176,6 +173,7 @@ code {
.filter-container { .filter-container {
padding-bottom: 10px; padding-bottom: 10px;
.filter-item { .filter-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
......
litemall-admin/src/styles/mixin.scss
View file @ 324c8da3
...@@ -10,9 +10,11 @@ ...@@ -10,9 +10,11 @@
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
background: #d3dce6; background: #d3dce6;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 6px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #99a9bf; background: #99a9bf;
border-radius: 20px; border-radius: 20px;
...@@ -37,21 +39,25 @@ ...@@ -37,21 +39,25 @@
$transparent-border-style: $width solid transparent; $transparent-border-style: $width solid transparent;
height: 0; height: 0;
width: 0; width: 0;
@if $direction==up { @if $direction==up {
border-bottom: $color-border-style; border-bottom: $color-border-style;
border-left: $transparent-border-style; border-left: $transparent-border-style;
border-right: $transparent-border-style; border-right: $transparent-border-style;
} }
@else if $direction==right { @else if $direction==right {
border-left: $color-border-style; border-left: $color-border-style;
border-top: $transparent-border-style; border-top: $transparent-border-style;
border-bottom: $transparent-border-style; border-bottom: $transparent-border-style;
} }
@else if $direction==down { @else if $direction==down {
border-top: $color-border-style; border-top: $color-border-style;
border-left: $transparent-border-style; border-left: $transparent-border-style;
border-right: $transparent-border-style; border-right: $transparent-border-style;
} }
@else if $direction==left { @else if $direction==left {
border-right: $color-border-style; border-right: $color-border-style;
border-top: $transparent-border-style; border-top: $transparent-border-style;
......
litemall-admin/src/styles/sidebar.scss
View file @ 324c8da3
#app { #app {
// 主体区域
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left .28s;
margin-left: 180px; margin-left: $sideBarWidth;
position: relative; position: relative;
} }
// 侧边栏
.sidebar-container { .sidebar-container {
transition: width 0.28s; transition: width 0.28s;
width: 180px !important; width: $sideBarWidth !important;
background-color: $menuBg;
height: 100%; height: 100%;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
...@@ -18,62 +19,111 @@ ...@@ -18,62 +19,111 @@
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
//reset element-ui css
// reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
} }
.scrollbar-wrapper { .scrollbar-wrapper {
overflow-x: hidden!important; overflow-x: hidden !important;
.el-scrollbar__view {
height: 100%;
}
} }
.el-scrollbar__bar.is-vertical{
.el-scrollbar__bar.is-vertical {
right: 0px; right: 0px;
} }
.el-scrollbar {
height: 100%;
}
&.has-logo {
.el-scrollbar {
height: calc(100% - 50px);
}
}
.is-horizontal { .is-horizontal {
display: none; display: none;
} }
a { a {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
} }
.el-menu { .el-menu {
border: none; border: none;
height: 100%; height: 100%;
width: 100% !important; 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 { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 36px !important; width: 54px !important;
} }
.main-container { .main-container {
margin-left: 36px; margin-left: 54px;
} }
.submenu-title-noDropdown { .submenu-title-noDropdown {
padding-left: 10px !important; padding: 0 !important;
position: relative; position: relative;
.el-tooltip { .el-tooltip {
padding: 0 10px !important; padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
} }
} }
.el-submenu { .el-submenu {
overflow: hidden; overflow: hidden;
&>.el-submenu__title { &>.el-submenu__title {
padding-left: 10px !important; padding: 0 !important;
.svg-icon {
margin-left: 20px;
}
.el-submenu__icon-arrow { .el-submenu__icon-arrow {
display: none; display: none;
} }
} }
} }
.el-menu--collapse { .el-menu--collapse {
.el-submenu { .el-submenu {
&>.el-submenu__title { &>.el-submenu__title {
...@@ -88,35 +138,33 @@ ...@@ -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 { .el-menu--collapse .el-menu .el-submenu {
min-width: 180px !important; min-width: $sideBarWidth !important;
} }
//适配移动端 // mobile responsive
.mobile { .mobile {
.main-container { .main-container {
margin-left: 0px; margin-left: 0px;
} }
.sidebar-container { .sidebar-container {
transition: transform .28s; transition: transform .28s;
width: 180px !important; width: $sideBarWidth !important;
} }
&.hideSidebar { &.hideSidebar {
.sidebar-container { .sidebar-container {
pointer-events: none;
transition-duration: 0.3s; transition-duration: 0.3s;
transform: translate3d(-180px, 0, 0); transform: translate3d(-$sideBarWidth, 0, 0);
} }
} }
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {
transition: none; transition: none;
...@@ -124,10 +172,38 @@ ...@@ -124,10 +172,38 @@
} }
} }
.el-menu--vertical{ // when menu collapsed
& >.el-menu{ .el-menu--vertical {
.svg-icon{ &>.el-menu {
.svg-icon {
margin-right: 16px; 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
View file @ 324c8da3
//globl transition css // global transition css
/*fade*/ /* fade */
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity 0.28s; transition: opacity 0.28s;
...@@ -11,21 +11,23 @@ ...@@ -11,21 +11,23 @@
opacity: 0; opacity: 0;
} }
/*fade-transform*/ /* fade-transform */
.fade-transform-leave-active, .fade-transform-leave-active,
.fade-transform-enter-active { .fade-transform-enter-active {
transition: all .5s; transition: all .5s;
} }
.fade-transform-enter { .fade-transform-enter {
opacity: 0; opacity: 0;
transform: translateX(-30px); transform: translateX(-30px);
} }
.fade-transform-leave-to { .fade-transform-leave-to {
opacity: 0; opacity: 0;
transform: translateX(30px); transform: translateX(30px);
} }
/*breadcrumb transition*/ /* breadcrumb transition */
.breadcrumb-enter-active, .breadcrumb-enter-active,
.breadcrumb-leave-active { .breadcrumb-leave-active {
transition: all .5s; transition: all .5s;
...@@ -44,4 +46,3 @@ ...@@ -44,4 +46,3 @@
.breadcrumb-leave-active { .breadcrumb-leave-active {
position: absolute; position: absolute;
} }
litemall-admin/src/styles/variables.scss
View file @ 324c8da3
// base color
$blue:#324157; $blue:#324157;
$light-blue:#3A71A8; $light-blue:#3A71A8;
$red:#C03639; $red:#C03639;
...@@ -7,7 +8,28 @@ $tiffany: #4AB7BD; ...@@ -7,7 +8,28 @@ $tiffany: #4AB7BD;
$yellow:#FEC171; $yellow:#FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
//sidebar // sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156; $menuBg:#304156;
$menuHover:#263445;
$subMenuBg:#1f2d3d; $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 deleted 100644 → 0
View file @ 693cf5cd
/**
* 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 0 → 100644
View file @ 324c8da3
// 打印类属性、方法定义
/* 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
View file @ 324c8da3
...@@ -5,7 +5,7 @@ import { getToken } from '@/utils/auth' ...@@ -5,7 +5,7 @@ import { getToken } from '@/utils/auth'
// create an axios instance // create an axios instance
const service = axios.create({ 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 timeout: 5000 // request timeout
}) })
......
litemall-admin/src/utils/validate.js
View file @ 324c8da3
/** /**
* 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'] const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0 return valid_map.indexOf(str.trim()) >= 0
} }
/* 合法uri*/ /**
export function validateURL(textval) { * @param {string} url
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.,?'\\+&%$#=~_-]+))*$/ * @returns {Boolean}
return urlregex.test(textval) */
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]+$/ const reg = /^[a-z]+$/
return reg.test(str) return reg.test(str)
} }
/* 大写字母*/ /**
export function validateUpperCase(str) { * @param {string} str
* @returns {Boolean}
*/
export function validUpperCase(str) {
const reg = /^[A-Z]+$/ const reg = /^[A-Z]+$/
return reg.test(str) return reg.test(str)
} }
/* 大小写字母*/ /**
export function validateAlphabets(str) { * @param {string} str
* @returns {Boolean}
*/
export function validAlphabets(str) {
const reg = /^[A-Za-z]+$/ const reg = /^[A-Za-z]+$/
return reg.test(str) return reg.test(str)
} }
/** /**
* validate email * @param {string} email
* @param email * @returns {Boolean}
* @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) { export function isArray(arg) {
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,}))$/ if (typeof Array.isArray === 'undefined') {
return re.test(email) return Object.prototype.toString.call(arg) === '[object Array]'
}
return Array.isArray(arg)
} }
litemall-admin/src/views/config/express.vue
View file @ 324c8da3
...@@ -50,18 +50,21 @@ export default { ...@@ -50,18 +50,21 @@ export default {
update() { update() {
this.$refs['dataForm'].validate((valid) => { this.$refs['dataForm'].validate((valid) => {
if (!valid) { if (!valid) {
return return false
} }
updateExpress(this.dataForm).then(response => { this.doUpdate()
this.$notify.success({ })
title: '成功', },
message: '运费配置修改成功' doUpdate() {
}) updateExpress(this.dataForm).then(response => {
}).catch(response => { this.$notify.success({
this.$notify.error({ title: '成功',
title: '失败', message: '运费配置修改成功'
message: response.data.errmsg })
}) }).catch(response => {
this.$notify.error({
title: '失败',
message: response.data.errmsg
}) })
}) })
} }
......
litemall-admin/src/views/config/mall.vue
View file @ 324c8da3
...@@ -7,6 +7,15 @@ ...@@ -7,6 +7,15 @@
<el-form-item label="商场地址" prop="litemall_mall_address"> <el-form-item label="商场地址" prop="litemall_mall_address">
<el-input v-model="dataForm.litemall_mall_address"/> <el-input v-model="dataForm.litemall_mall_address"/>
</el-form-item> </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-form-item label="联系电话" prop="litemall_mall_phone">
<el-input v-model="dataForm.litemall_mall_phone"/> <el-input v-model="dataForm.litemall_mall_phone"/>
</el-form-item> </el-form-item>
...@@ -32,7 +41,23 @@ export default { ...@@ -32,7 +41,23 @@ export default {
litemall_mall_name: '', litemall_mall_name: '',
litemall_mall_address: '', litemall_mall_address: '',
litemall_mall_phone: '', 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 { ...@@ -49,6 +74,14 @@ export default {
this.init() this.init()
}, },
update() { update() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.doUpdate()
})
},
doUpdate() {
updateMall(this.dataForm) updateMall(this.dataForm)
.then(response => { .then(response => {
this.$notify.success({ this.$notify.success({
......
litemall-admin/src/views/config/order.vue
View file @ 324c8da3
...@@ -34,7 +34,22 @@ export default { ...@@ -34,7 +34,22 @@ export default {
name: 'ConfigOrder', name: 'ConfigOrder',
data() { data() {
return { 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() { created() {
...@@ -50,6 +65,14 @@ export default { ...@@ -50,6 +65,14 @@ export default {
this.init() this.init()
}, },
update() { update() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.doUpdate()
})
},
doUpdate() {
updateOrder(this.dataForm) updateOrder(this.dataForm)
.then(response => { .then(response => {
this.$notify.success({ this.$notify.success({
......
litemall-admin/src/views/config/wx.vue
View file @ 324c8da3
...@@ -5,9 +5,7 @@ ...@@ -5,9 +5,7 @@
:rules="rules" :rules="rules"
:model="dataForm" :model="dataForm"
status-icon status-icon
label-width="300px" label-width="300px">
>
<el-tabs tab-position="left" > <el-tabs tab-position="left" >
<el-tab-pane label="首页配置"> <el-tab-pane label="首页配置">
<el-form-item label="新品首发栏目商品显示数量" prop="litemall_wx_index_new"> <el-form-item label="新品首发栏目商品显示数量" prop="litemall_wx_index_new">
...@@ -51,7 +49,35 @@ export default { ...@@ -51,7 +49,35 @@ export default {
name: 'ConfigWx', name: 'ConfigWx',
data() { data() {
return { 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() { created() {
...@@ -67,6 +93,14 @@ export default { ...@@ -67,6 +93,14 @@ export default {
this.init() this.init()
}, },
update() { update() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.doUpdate()
})
},
doUpdate() {
updateWx(this.dataForm) updateWx(this.dataForm)
.then(response => { .then(response => {
this.$notify.success({ this.$notify.success({
......
litemall-admin/src/views/errorPage/401.vue
View file @ 324c8da3
<template> <template>
<div class="errPage-container"> <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-row>
<el-col :span="12"> <el-col :span="12">
<h1 class="text-jumbo text-ginormous">Oops!</h1> <h1 class="text-jumbo text-ginormous">Oops!</h1>
......
litemall-admin/src/views/goods/comment.vue
View file @ 324c8da3
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<el-table-column align="center" label="评论图片" prop="picUrls"> <el-table-column align="center" label="评论图片" prop="picUrls">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
...@@ -64,7 +64,7 @@ export default { ...@@ -64,7 +64,7 @@ export default {
components: { Pagination }, components: { Pagination },
data() { data() {
return { return {
list: undefined, list: [],
total: 0, total: 0,
listLoading: true, listLoading: true,
listQuery: { listQuery: {
...@@ -90,7 +90,7 @@ export default { ...@@ -90,7 +90,7 @@ export default {
getList() { getList() {
this.listLoading = true this.listLoading = true
listComment(this.listQuery).then(response => { listComment(this.listQuery).then(response => {
this.list = response.data.data.items this.list = response.data.data.list
this.total = response.data.data.total this.total = response.data.data.total
this.listLoading = false this.listLoading = false
}).catch(() => { }).catch(() => {
......
litemall-admin/src/views/goods/create.vue
View file @ 324c8da3
...@@ -5,21 +5,16 @@ ...@@ -5,21 +5,16 @@
<h3>商品介绍</h3> <h3>商品介绍</h3>
<el-form ref="goods" :rules="rules" :model="goods" label-width="150px"> <el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
<el-form-item label="商品编号" prop="goodsSn"> <el-form-item label="商品编号" prop="goodsSn">
<el-input v-model="goods.goodsSn"/> <el-input v-model="goods.goodsSn" />
</el-form-item> </el-form-item>
<el-form-item label="商品名称" prop="name"> <el-form-item label="商品名称" prop="name">
<el-input v-model="goods.name"/> <el-input v-model="goods.name" />
</el-form-item> </el-form-item>
<el-form-item label="专柜价格" prop="counterPrice"> <el-form-item label="市场售价" prop="counterPrice">
<el-input v-model="goods.counterPrice" placeholder="0.00"> <el-input v-model="goods.counterPrice" placeholder="0.00">
<template slot="append">元</template> <template slot="append">元</template>
</el-input> </el-input>
</el-form-item> </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-form-item label="是否新品" prop="isNew">
<el-radio-group v-model="goods.isNew"> <el-radio-group v-model="goods.isNew">
<el-radio :label="true">新品</el-radio> <el-radio :label="true">新品</el-radio>
...@@ -46,9 +41,10 @@ ...@@ -46,9 +41,10 @@
:headers="headers" :headers="headers"
:on-success="uploadPicUrl" :on-success="uploadPicUrl"
class="avatar-uploader" class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif"> accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="goods.picUrl" :src="goods.picUrl" class="avatar"> <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-upload>
</el-form-item> </el-form-item>
...@@ -62,13 +58,14 @@ ...@@ -62,13 +58,14 @@
:on-remove="handleRemove" :on-remove="handleRemove"
multiple multiple
accept=".jpg,.jpeg,.png,.gif" accept=".jpg,.jpeg,.png,.gif"
list-type="picture-card"> list-type="picture-card"
<i class="el-icon-plus"/> >
<i class="el-icon-plus" />
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="商品单位"> <el-form-item label="商品单位">
<el-input v-model="goods.unit" placeholder="件 / 个 / 盒"/> <el-input v-model="goods.unit" placeholder="件 / 个 / 盒" />
</el-form-item> </el-form-item>
<el-form-item label="关键字"> <el-form-item label="关键字">
...@@ -82,26 +79,27 @@ ...@@ -82,26 +79,27 @@
class="input-new-keyword" class="input-new-keyword"
@keyup.enter.native="handleInputConfirm" @keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"/> @blur="handleInputConfirm"
/>
<el-button v-else class="button-new-keyword" type="primary" @click="showInput">+ 增加</el-button> <el-button v-else class="button-new-keyword" type="primary" @click="showInput">+ 增加</el-button>
</el-form-item> </el-form-item>
<el-form-item label="所属分类"> <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>
<el-form-item label="所属品牌商"> <el-form-item label="所属品牌商">
<el-select v-model="goods.brandId"> <el-select v-model="goods.brandId" clearable>
<el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"/> <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商品简介"> <el-form-item label="商品简介">
<el-input v-model="goods.brief"/> <el-input v-model="goods.brief" />
</el-form-item> </el-form-item>
<el-form-item label="商品详细介绍"> <el-form-item label="商品详细介绍">
<editor :init="editorInit" v-model="goods.detail"/> <editor v-model="goods.detail" :init="editorInit" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </el-card>
...@@ -121,7 +119,7 @@ ...@@ -121,7 +119,7 @@
</el-row> </el-row>
<el-table :data="specifications"> <el-table :data="specifications">
<el-table-column property="specification" label="规格名"/> <el-table-column property="specification" label="规格名" />
<el-table-column property="value" label="规格值"> <el-table-column property="value" label="规格值">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag type="primary"> <el-tag type="primary">
...@@ -139,7 +137,8 @@ ...@@ -139,7 +137,8 @@
align="center" align="center"
label="操作" label="操作"
width="250" width="250"
class-name="small-padding fixed-width"> class-name="small-padding fixed-width"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="danger" size="mini" @click="handleSpecificationDelete(scope.row)">删除</el-button> <el-button type="danger" size="mini" @click="handleSpecificationDelete(scope.row)">删除</el-button>
</template> </template>
...@@ -154,12 +153,13 @@ ...@@ -154,12 +153,13 @@
status-icon status-icon
label-position="left" label-position="left"
label-width="100px" label-width="100px"
style="width: 400px; margin-left:50px;"> style="width: 400px; margin-left:50px;"
>
<el-form-item label="规格名" prop="specification"> <el-form-item label="规格名" prop="specification">
<el-input v-model="specForm.specification"/> <el-input v-model="specForm.specification" />
</el-form-item> </el-form-item>
<el-form-item label="规格值" prop="value"> <el-form-item label="规格值" prop="value">
<el-input v-model="specForm.value"/> <el-input v-model="specForm.value" />
</el-form-item> </el-form-item>
<el-form-item label="规格图片" prop="picUrl"> <el-form-item label="规格图片" prop="picUrl">
<el-upload <el-upload
...@@ -168,9 +168,10 @@ ...@@ -168,9 +168,10 @@
:headers="headers" :headers="headers"
:on-success="uploadSpecPicUrl" :on-success="uploadSpecPicUrl"
class="avatar-uploader" class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif"> accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar"> <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-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -191,8 +192,8 @@ ...@@ -191,8 +192,8 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="price" width="100" label="货品售价"/> <el-table-column property="price" width="100" label="货品售价" />
<el-table-column property="number" width="100" label="货品数量"/> <el-table-column property="number" width="100" label="货品数量" />
<el-table-column property="url" width="100" label="货品图片"> <el-table-column property="url" width="100" label="货品图片">
<template slot-scope="scope"> <template slot-scope="scope">
<img v-if="scope.row.url" :src="scope.row.url" width="40"> <img v-if="scope.row.url" :src="scope.row.url" width="40">
...@@ -205,24 +206,25 @@ ...@@ -205,24 +206,25 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-dialog :visible.sync="productVisiable" title="设置货品"> <el-dialog :visible.sync="productVisiable" title="添加货品">
<el-form <el-form
ref="productForm" ref="productForm"
:model="productForm" :model="productForm"
status-icon status-icon
label-position="left" label-position="left"
label-width="100px" label-width="100px"
style="width: 400px; margin-left:50px;"> style="width: 400px; margin-left:50px;"
>
<el-form-item label="货品规格列" prop="specifications"> <el-form-item label="货品规格列" prop="specifications">
<el-tag v-for="tag in productForm.specifications" :key="tag"> <el-tag v-for="tag in productForm.specifications" :key="tag">
{{ tag }} {{ tag }}
</el-tag> </el-tag>
</el-form-item> </el-form-item>
<el-form-item label="货品售价" prop="price"> <el-form-item label="货品售价" prop="price">
<el-input v-model="productForm.price"/> <el-input v-model="productForm.price" />
</el-form-item> </el-form-item>
<el-form-item label="货品数量" prop="number"> <el-form-item label="货品数量" prop="number">
<el-input v-model="productForm.number"/> <el-input v-model="productForm.number" />
</el-form-item> </el-form-item>
<el-form-item label="货品图片" prop="url"> <el-form-item label="货品图片" prop="url">
<el-upload <el-upload
...@@ -231,9 +233,10 @@ ...@@ -231,9 +233,10 @@
:headers="headers" :headers="headers"
:on-success="uploadProductUrl" :on-success="uploadProductUrl"
class="avatar-uploader" class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif"> accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="productForm.url" :src="productForm.url" class="avatar"> <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-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -246,10 +249,10 @@ ...@@ -246,10 +249,10 @@
<el-card class="box-card"> <el-card class="box-card">
<h3>商品参数</h3> <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 :data="attributes">
<el-table-column property="attribute" label="商品参数名称"/> <el-table-column property="attribute" label="商品参数名称" />
<el-table-column property="value" label="商品参数值"/> <el-table-column property="value" label="商品参数值" />
<el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width"> <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">删除</el-button> <el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">删除</el-button>
...@@ -257,19 +260,20 @@ ...@@ -257,19 +260,20 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-dialog :visible.sync="attributeVisiable" title="设置商品参数"> <el-dialog :visible.sync="attributeVisiable" title="添加商品参数">
<el-form <el-form
ref="attributeForm" ref="attributeForm"
:model="attributeForm" :model="attributeForm"
status-icon status-icon
label-position="left" label-position="left"
label-width="100px" label-width="100px"
style="width: 400px; margin-left:50px;"> style="width: 400px; margin-left:50px;"
>
<el-form-item label="商品参数名称" prop="attribute"> <el-form-item label="商品参数名称" prop="attribute">
<el-input v-model="attributeForm.attribute"/> <el-input v-model="attributeForm.attribute" />
</el-form-item> </el-form-item>
<el-form-item label="商品参数值" prop="value"> <el-form-item label="商品参数值" prop="value">
<el-input v-model="attributeForm.value"/> <el-input v-model="attributeForm.value" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
...@@ -351,7 +355,7 @@ export default { ...@@ -351,7 +355,7 @@ export default {
keywords: [], keywords: [],
categoryList: [], categoryList: [],
brandList: [], brandList: [],
goods: { picUrl: '', gallery: [] }, goods: { picUrl: '', gallery: [], isHot: false, isNew: true, isOnSale: true },
specVisiable: false, specVisiable: false,
specForm: { specification: '', value: '', picUrl: '' }, specForm: { specification: '', value: '', picUrl: '' },
multipleSpec: false, multipleSpec: false,
...@@ -368,6 +372,7 @@ export default { ...@@ -368,6 +372,7 @@ export default {
}, },
editorInit: { editorInit: {
language: 'zh_CN', language: 'zh_CN',
height: 500,
convert_urls: false, 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'], 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'], 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
View file @ 324c8da3
...@@ -4,19 +4,17 @@ ...@@ -4,19 +4,17 @@
<el-card class="box-card"> <el-card class="box-card">
<h3>商品介绍</h3> <h3>商品介绍</h3>
<el-form ref="goods" :rules="rules" :model="goods" label-width="150px"> <el-form ref="goods" :rules="rules" :model="goods" label-width="150px">
<el-form-item label="商品编号" prop="goodsSn"> <el-form-item label="商品ID" prop="id">
<el-input v-model="goods.goodsSn"/> <el-input v-model="goods.id" disabled />
</el-form-item> </el-form-item>
<el-form-item label="商品名称" prop="name"> <el-form-item label="商品名称" prop="name">
<el-input v-model="goods.name"/> <el-input v-model="goods.name" />
</el-form-item> </el-form-item>
<el-form-item label="专柜价格" prop="counterPrice"> <el-form-item label="商品编号" prop="goodsSn">
<el-input v-model="goods.counterPrice" placeholder="0.00"> <el-input v-model="goods.goodsSn" />
<template slot="append">元</template>
</el-input>
</el-form-item> </el-form-item>
<el-form-item label="当前价格" prop="retailPrice"> <el-form-item label="市场售价" prop="counterPrice">
<el-input v-model="goods.retailPrice" placeholder="0.00"> <el-input v-model="goods.counterPrice" placeholder="0.00">
<template slot="append">元</template> <template slot="append">元</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
...@@ -46,9 +44,10 @@ ...@@ -46,9 +44,10 @@
:show-file-list="false" :show-file-list="false"
:on-success="uploadPicUrl" :on-success="uploadPicUrl"
class="avatar-uploader" class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif"> accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="goods.picUrl" :src="goods.picUrl" class="avatar"> <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-upload>
</el-form-item> </el-form-item>
...@@ -63,50 +62,49 @@ ...@@ -63,50 +62,49 @@
:on-remove="handleRemove" :on-remove="handleRemove"
multiple multiple
accept=".jpg,.jpeg,.png,.gif" accept=".jpg,.jpeg,.png,.gif"
list-type="picture-card"> list-type="picture-card"
<i class="el-icon-plus"/> >
<i class="el-icon-plus" />
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="商品单位"> <el-form-item label="商品单位">
<el-input v-model="goods.unit" placeholder="件 / 个 / 盒"/> <el-input v-model="goods.unit" placeholder="件 / 个 / 盒" />
</el-form-item> </el-form-item>
<el-form-item label="关键字"> <el-form-item label="关键字">
<el-tag v-for="tag in keywords" :key="tag" closable type="primary" @close="handleClose(tag)"> <el-tag v-for="tag in keywords" :key="tag" closable type="primary" @close="handleClose(tag)">
{{ tag }} {{ tag }}
</el-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-button v-else class="button-new-keyword" type="primary" @click="showInput">+ 增加</el-button>
</el-form-item> </el-form-item>
<el-form-item label="所属分类"> <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>
<el-form-item label="所属品牌商"> <el-form-item label="所属品牌商">
<el-select v-model="goods.brandId"> <el-select v-model="goods.brandId" clearable>
<el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"/> <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="商品简介"> <el-form-item label="商品简介">
<el-input v-model="goods.brief"/> <el-input v-model="goods.brief" />
</el-form-item> </el-form-item>
<el-form-item label="商品详细介绍"> <el-form-item label="商品详细介绍">
<editor :init="editorInit" v-model="goods.detail"/> <editor v-model="goods.detail" :init="editorInit" />
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-card> </el-card>
<el-card class="box-card"> <el-card class="box-card">
<h3>商品规格</h3> <h3>商品规格</h3>
<el-button :plain="true" type="primary" @click="handleSpecificationShow">添加</el-button>
<el-table :data="specifications"> <el-table :data="specifications">
<el-table-column property="specification" label="规格名" /> <el-table-column property="specification" label="规格名" />
<el-table-column property="value" label="规格值" > <el-table-column property="value" label="规格值">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag type="primary"> <el-tag type="primary">
{{ scope.row.value }} {{ scope.row.value }}
...@@ -118,9 +116,9 @@ ...@@ -118,9 +116,9 @@
<img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40"> <img v-if="scope.row.picUrl" :src="scope.row.picUrl" width="40">
</template> </template>
</el-table-column> </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"> <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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -128,10 +126,10 @@ ...@@ -128,10 +126,10 @@
<el-dialog :visible.sync="specVisiable" title="设置规格"> <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 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-form-item label="规格名" prop="specification">
<el-input v-model="specForm.specification"/> <el-input v-model="specForm.specification" disabled />
</el-form-item> </el-form-item>
<el-form-item label="规格值" prop="value"> <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>
<el-form-item label="规格图片" prop="picUrl"> <el-form-item label="规格图片" prop="picUrl">
<el-upload <el-upload
...@@ -140,15 +138,16 @@ ...@@ -140,15 +138,16 @@
:show-file-list="false" :show-file-list="false"
:on-success="uploadSpecPicUrl" :on-success="uploadSpecPicUrl"
class="avatar-uploader" class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif"> accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="specForm.picUrl" :src="specForm.picUrl" class="avatar"> <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-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="specVisiable = false">取消</el-button> <el-button @click="specVisiable = false">取消</el-button>
<el-button type="primary" @click="handleSpecificationAdd">确定</el-button> <el-button type="primary" @click="handleSpecificationEdit">确定</el-button>
</div> </div>
</el-dialog> </el-dialog>
</el-card> </el-card>
...@@ -156,28 +155,28 @@ ...@@ -156,28 +155,28 @@
<el-card class="box-card"> <el-card class="box-card">
<h3>商品库存</h3> <h3>商品库存</h3>
<el-table :data="products"> <el-table :data="products">
<el-table-column property="value" label="货品规格" > <el-table-column property="value" label="货品规格">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-for="tag in scope.row.specifications" :key="tag"> <el-tag v-for="tag in scope.row.specifications" :key="tag">
{{ tag }} {{ tag }}
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column property="price" width="100" label="货品售价"/> <el-table-column property="price" label="货品售价" />
<el-table-column property="number" width="100" label="货品数量"/> <el-table-column property="number" label="货品数量" />
<el-table-column property="url" width="100" label="货品图片"> <el-table-column property="url" label="货品图片">
<template slot-scope="scope"> <template slot-scope="scope">
<img v-if="scope.row.url" :src="scope.row.url" width="40"> <img v-if="scope.row.url" :src="scope.row.url" width="40">
</template> </template>
</el-table-column> </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"> <template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleProductShow(scope.row)">设置</el-button> <el-button type="primary" size="mini" @click="handleProductShow(scope.row)">设置</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </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 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-form-item label="货品规格列" prop="specifications">
<el-tag v-for="tag in productForm.specifications" :key="tag"> <el-tag v-for="tag in productForm.specifications" :key="tag">
...@@ -185,10 +184,10 @@ ...@@ -185,10 +184,10 @@
</el-tag> </el-tag>
</el-form-item> </el-form-item>
<el-form-item label="货品售价" prop="price"> <el-form-item label="货品售价" prop="price">
<el-input v-model="productForm.price"/> <el-input v-model="productForm.price" />
</el-form-item> </el-form-item>
<el-form-item label="货品数量" prop="number"> <el-form-item label="货品数量" prop="number">
<el-input v-model="productForm.number"/> <el-input v-model="productForm.number" />
</el-form-item> </el-form-item>
<el-form-item label="货品图片" prop="url"> <el-form-item label="货品图片" prop="url">
<el-upload <el-upload
...@@ -197,9 +196,10 @@ ...@@ -197,9 +196,10 @@
:show-file-list="false" :show-file-list="false"
:on-success="uploadProductUrl" :on-success="uploadProductUrl"
class="avatar-uploader" class="avatar-uploader"
accept=".jpg,.jpeg,.png,.gif"> accept=".jpg,.jpeg,.png,.gif"
>
<img v-if="productForm.url" :src="productForm.url" class="avatar"> <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-upload>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -212,29 +212,31 @@ ...@@ -212,29 +212,31 @@
<el-card class="box-card"> <el-card class="box-card">
<h3>商品参数</h3> <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 :data="attributesData">
<el-table-column property="attribute" label="商品参数名称"/> <el-table-column property="attribute" label="商品参数名称" />
<el-table-column property="value" label="商品参数值"/> <el-table-column property="value" label="商品参数值" />
<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"> <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> <el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </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 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-form-item label="商品参数名称" prop="attribute">
<el-input v-model="attributeForm.attribute"/> <el-input v-model="attributeForm.attribute" />
</el-form-item> </el-form-item>
<el-form-item label="商品参数值" prop="value"> <el-form-item label="商品参数值" prop="value">
<el-input v-model="attributeForm.value"/> <el-input v-model="attributeForm.value" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="attributeVisiable = false">取消</el-button> <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> </div>
</el-dialog> </el-dialog>
</el-card> </el-card>
...@@ -282,6 +284,10 @@ ...@@ -282,6 +284,10 @@
height: 145px; height: 145px;
display: block; display: block;
} }
.op-container {
display: flex;
justify-content: center;
}
</style> </style>
<script> <script>
...@@ -320,16 +326,15 @@ export default { ...@@ -320,16 +326,15 @@ export default {
{ id: 0, specifications: ['标准'], price: 0.0, number: 0, url: '' } { id: 0, specifications: ['标准'], price: 0.0, number: 0, url: '' }
], ],
attributeVisiable: false, attributeVisiable: false,
attributeAdd: true,
attributeForm: { attribute: '', value: '' }, attributeForm: { attribute: '', value: '' },
attributes: [], attributes: [],
rules: { rules: {
goodsSn: [
{ required: true, message: '商品编号不能为空', trigger: 'blur' }
],
name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }] name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }]
}, },
editorInit: { editorInit: {
language: 'zh_CN', language: 'zh_CN',
height: '400px',
convert_urls: false, convert_urls: false,
plugins: [ 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' '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 { ...@@ -357,6 +362,16 @@ export default {
return { return {
'X-Litemall-Admin-Token': getToken() '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() { created() {
...@@ -371,6 +386,13 @@ export default { ...@@ -371,6 +386,13 @@ export default {
const goodsId = this.$route.query.id const goodsId = this.$route.query.id
detailGoods(goodsId).then(response => { detailGoods(goodsId).then(response => {
this.goods = response.data.data.goods 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.specifications = response.data.data.specifications
this.products = response.data.data.products this.products = response.data.data.products
this.attributes = response.data.data.attributes this.attributes = response.data.data.attributes
...@@ -488,99 +510,20 @@ export default { ...@@ -488,99 +510,20 @@ export default {
uploadSpecPicUrl: function(response) { uploadSpecPicUrl: function(response) {
this.specForm.picUrl = response.data.url this.specForm.picUrl = response.data.url
}, },
handleSpecificationShow() { handleSpecificationShow(row) {
this.specForm = { specification: '', value: '', picUrl: '' } this.specForm = Object.assign({}, row)
this.specVisiable = true this.specVisiable = true
}, },
handleSpecificationAdd() { handleSpecificationEdit() {
var index = this.specifications.length - 1 this.specForm.updateTime = ''
for (var i = 0; i < this.specifications.length; i++) { for (var i = 0; i < this.specifications.length; i++) {
const v = this.specifications[i] const v = this.specifications[i]
if (v.specification === this.specForm.specification) { if (v.id === this.specForm.id) {
index = i this.specifications.splice(i, 1, this.specForm)
break
} }
} }
this.specifications.splice(index + 1, 0, this.specForm)
this.specVisiable = false 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) { handleProductShow(row) {
this.productForm = Object.assign({}, row) this.productForm = Object.assign({}, row)
...@@ -590,6 +533,7 @@ export default { ...@@ -590,6 +533,7 @@ export default {
this.productForm.url = response.data.url this.productForm.url = response.data.url
}, },
handleProductEdit() { handleProductEdit() {
this.productForm.updateTime = ''
for (var i = 0; i < this.products.length; i++) { for (var i = 0; i < this.products.length; i++) {
const v = this.products[i] const v = this.products[i]
if (v.id === this.productForm.id) { if (v.id === this.productForm.id) {
...@@ -599,17 +543,34 @@ export default { ...@@ -599,17 +543,34 @@ export default {
} }
this.productVisiable = false this.productVisiable = false
}, },
handleAttributeShow() { handleAttributeShow(row) {
this.attributeForm = {} if (row.id) {
this.attributeForm = Object.assign({}, row)
this.attributeAdd = false
} else {
this.attributeForm = {}
this.attributeAdd = true
}
this.attributeVisiable = true this.attributeVisiable = true
}, },
handleAttributeAdd() { handleAttributeAdd() {
this.attributes.unshift(this.attributeForm) this.attributes.unshift(this.attributeForm)
this.attributeVisiable = false 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) { handleAttributeDelete(row) {
const index = this.attributes.indexOf(row) row.deleted = true
this.attributes.splice(index, 1)
} }
} }
} }
......
litemall-admin/src/views/goods/list.vue
View file @ 324c8da3
...@@ -3,8 +3,9 @@ ...@@ -3,8 +3,9 @@
<!-- 查询和其他操作 --> <!-- 查询和其他操作 -->
<div class="filter-container"> <div class="filter-container">
<el-input v-model="listQuery.goodsSn" 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.name" clearable class="filter-item" style="width: 200px;" placeholder="请输入商品名称"/> <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-search" @click="handleFilter">查找</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">添加</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> <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
...@@ -16,6 +17,9 @@ ...@@ -16,6 +17,9 @@
<el-table-column type="expand"> <el-table-column type="expand">
<template slot-scope="props"> <template slot-scope="props">
<el-form label-position="left" class="table-expand"> <el-form label-position="left" class="table-expand">
<el-form-item label="商品编号">
<span>{{ props.row.goodsSn }}</span>
</el-form-item>
<el-form-item label="宣传画廊"> <el-form-item label="宣传画廊">
<img v-for="pic in props.row.gallery" :key="pic" :src="pic" class="gallery"> <img v-for="pic in props.row.gallery" :key="pic" :src="pic" class="gallery">
</el-form-item> </el-form-item>
...@@ -34,13 +38,14 @@ ...@@ -34,13 +38,14 @@
<el-form-item label="品牌商ID"> <el-form-item label="品牌商ID">
<span>{{ props.row.brandId }}</span> <span>{{ props.row.brandId }}</span>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
</el-table-column> </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="图片"> <el-table-column align="center" property="iconUrl" label="图片">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -57,15 +62,15 @@ ...@@ -57,15 +62,15 @@
<el-table-column align="center" label="详情" prop="detail"> <el-table-column align="center" label="详情" prop="detail">
<template slot-scope="scope"> <template slot-scope="scope">
<el-dialog :visible.sync="detailDialogVisible" title="商品详情"> <el-dialog :visible.sync="detailDialogVisible" title="商品详情">
<div v-html="goodsDetail"/> <div class="goods-detail-box" v-html="goodsDetail" />
</el-dialog> </el-dialog>
<el-button type="primary" size="mini" @click="showDetail(scope.row.detail)">查看</el-button> <el-button type="primary" size="mini" @click="showDetail(scope.row.detail)">查看</el-button>
</template> </template>
</el-table-column> </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"> <el-table-column align="center" label="是否新品" prop="isNew">
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -118,6 +123,9 @@ ...@@ -118,6 +123,9 @@
width: 80px; width: 80px;
margin-right: 10px; margin-right: 10px;
} }
.goods-detail-box img {
width: 100%;
}
</style> </style>
<script> <script>
...@@ -153,7 +161,7 @@ export default { ...@@ -153,7 +161,7 @@ export default {
getList() { getList() {
this.listLoading = true this.listLoading = true
listGoods(this.listQuery).then(response => { listGoods(this.listQuery).then(response => {
this.list = response.data.data.items this.list = response.data.data.list
this.total = response.data.data.total this.total = response.data.data.total
this.listLoading = false this.listLoading = false
}).catch(() => { }).catch(() => {
......
litemall-admin/src/views/layout/components/AppMain.vue
View file @ 324c8da3
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<section class="app-main"> <section class="app-main">
<transition name="fade-transform" mode="out-in"> <transition name="fade-transform" mode="out-in">
<keep-alive :include="cachedViews"> <keep-alive :include="cachedViews">
<router-view :key="key"/> <router-view :key="key" />
</keep-alive> </keep-alive>
</transition> </transition>
</section> </section>
...@@ -22,13 +22,34 @@ export default { ...@@ -22,13 +22,34 @@ export default {
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.app-main { .app-main {
/*84 = navbar + tags-view = 50 +34 */ /* 50= navbar 50 */
min-height: calc(100vh - 84px); min-height: calc(100vh - 50px);
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; 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> </style>
litemall-admin/src/views/layout/components/ScrollPane.vue 0 → 100644
View file @ 324c8da3
<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>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment