v4.2.5
|
@ -472,94 +472,6 @@
|
||||||
"webpack-chain": "^6.4.0",
|
"webpack-chain": "^6.4.0",
|
||||||
"webpack-dev-server": "^3.11.0",
|
"webpack-dev-server": "^3.11.0",
|
||||||
"webpack-merge": "^4.2.2"
|
"webpack-merge": "^4.2.2"
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"ansi-styles": {
|
|
||||||
"version": "4.3.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
|
||||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"color-convert": "^2.0.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"chalk": {
|
|
||||||
"version": "4.1.2",
|
|
||||||
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
|
||||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"ansi-styles": "^4.1.0",
|
|
||||||
"supports-color": "^7.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color-convert": {
|
|
||||||
"version": "2.0.1",
|
|
||||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
|
||||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"color-name": "~1.1.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color-name": {
|
|
||||||
"version": "1.1.4",
|
|
||||||
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
|
||||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"has-flag": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"json5": {
|
|
||||||
"version": "2.2.1",
|
|
||||||
"resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz",
|
|
||||||
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"loader-utils": {
|
|
||||||
"version": "2.0.2",
|
|
||||||
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz",
|
|
||||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"big.js": "^5.2.2",
|
|
||||||
"emojis-list": "^3.0.0",
|
|
||||||
"json5": "^2.1.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"supports-color": {
|
|
||||||
"version": "7.2.0",
|
|
||||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
|
||||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"has-flag": "^4.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"vue-loader-v16": {
|
|
||||||
"version": "npm:vue-loader@16.8.3",
|
|
||||||
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
|
|
||||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"chalk": "^4.1.0",
|
|
||||||
"hash-sum": "^2.0.0",
|
|
||||||
"loader-utils": "^2.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@vue/cli-shared-utils": {
|
"@vue/cli-shared-utils": {
|
||||||
|
@ -4394,12 +4306,12 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"globule": {
|
"globule": {
|
||||||
"version": "1.3.3",
|
"version": "1.3.4",
|
||||||
"resolved": "https://registry.npmmirror.com/globule/-/globule-1.3.3.tgz",
|
"resolved": "https://registry.npmmirror.com/globule/-/globule-1.3.4.tgz",
|
||||||
"integrity": "sha512-mb1aYtDbIjTu4ShMB85m3UzjX9BVKe9WCzsnfMSZk+K5GpIbBOexgg4PPCt5eHDEG5/ZQAUX2Kct02zfiPLsKg==",
|
"integrity": "sha512-OPTIfhMBh7JbBYDpa5b+Q5ptmMWKwcNcFSR/0c6t8V4f3ZAVBEsKNY37QdVqmLRYSMhOUGYrY0QhSoEpzGr/Eg==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"glob": "~7.1.1",
|
"glob": "~7.1.1",
|
||||||
"lodash": "~4.17.10",
|
"lodash": "^4.17.21",
|
||||||
"minimatch": "~3.0.2"
|
"minimatch": "~3.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -7783,9 +7695,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"qs": {
|
"qs": {
|
||||||
"version": "6.10.3",
|
"version": "6.11.0",
|
||||||
"resolved": "https://registry.npmmirror.com/qs/-/qs-6.10.3.tgz",
|
"resolved": "https://registry.npmmirror.com/qs/-/qs-6.11.0.tgz",
|
||||||
"integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
|
"integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"side-channel": "^1.0.4"
|
"side-channel": "^1.0.4"
|
||||||
}
|
}
|
||||||
|
@ -9767,9 +9679,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"uglify-js": {
|
"uglify-js": {
|
||||||
"version": "3.15.4",
|
"version": "3.17.0",
|
||||||
"resolved": "https://registry.npmmirror.com/uglify-js/-/uglify-js-3.15.4.tgz",
|
"resolved": "https://registry.npmmirror.com/uglify-js/-/uglify-js-3.17.0.tgz",
|
||||||
"integrity": "sha512-vMOPGDuvXecPs34V74qDKk4iJ/SN4vL3Ow/23ixafENYvtrNvtbcgUeugTcUGRGsOF/5fU8/NYSL5Hyb3l1OJA==",
|
"integrity": "sha512-aTeNPVmgIMPpm1cxXr2Q/nEbvkmV8yq66F3om7X3P/cvOXQ0TMQ64Wk63iyT1gPlmdmGzjGpyLh1f3y8MZWXGg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -10113,6 +10025,94 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"vue-loader-v16": {
|
||||||
|
"version": "npm:vue-loader@16.8.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||||
|
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"chalk": "^4.1.0",
|
||||||
|
"hash-sum": "^2.0.0",
|
||||||
|
"loader-utils": "^2.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"ansi-styles": {
|
||||||
|
"version": "4.3.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||||
|
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"color-convert": "^2.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chalk": {
|
||||||
|
"version": "4.1.2",
|
||||||
|
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
||||||
|
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"ansi-styles": "^4.1.0",
|
||||||
|
"supports-color": "^7.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-convert": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"color-name": "~1.1.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-name": {
|
||||||
|
"version": "1.1.4",
|
||||||
|
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
|
||||||
|
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"has-flag": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"json5": {
|
||||||
|
"version": "2.2.1",
|
||||||
|
"resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz",
|
||||||
|
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"loader-utils": {
|
||||||
|
"version": "2.0.3",
|
||||||
|
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.3.tgz",
|
||||||
|
"integrity": "sha512-THWqIsn8QRnvLl0shHYVBN9syumU8pYWEHPTmkiVGd+7K5eFNVSY6AJhRvgGF70gg1Dz+l/k8WicvFCxdEs60A==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"big.js": "^5.2.2",
|
||||||
|
"emojis-list": "^3.0.0",
|
||||||
|
"json5": "^2.1.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"supports-color": {
|
||||||
|
"version": "7.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
||||||
|
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"has-flag": "^4.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"vue-piczoom": {
|
"vue-piczoom": {
|
||||||
"version": "1.0.6",
|
"version": "1.0.6",
|
||||||
"resolved": "https://registry.npmmirror.com/vue-piczoom/-/vue-piczoom-1.0.6.tgz",
|
"resolved": "https://registry.npmmirror.com/vue-piczoom/-/vue-piczoom-1.0.6.tgz",
|
||||||
|
@ -10176,9 +10176,9 @@
|
||||||
"integrity": "sha512-lVCEqzZyhrZ49dr6n1C4dMNH/tvKJzRwJhCi9vxWYpiosYTWM0J5m5RsJ745S88XWwgTeOynKMGbyOLG9ZP20Q=="
|
"integrity": "sha512-lVCEqzZyhrZ49dr6n1C4dMNH/tvKJzRwJhCi9vxWYpiosYTWM0J5m5RsJ745S88XWwgTeOynKMGbyOLG9ZP20Q=="
|
||||||
},
|
},
|
||||||
"vue-router": {
|
"vue-router": {
|
||||||
"version": "3.5.3",
|
"version": "3.6.4",
|
||||||
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.5.3.tgz",
|
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.4.tgz",
|
||||||
"integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
|
"integrity": "sha512-QSJs5aKKPiwBH++gelVbnq0ZFbUZXjlsjAklUM+F8dtd49YY72QsD1uGpBk/cqLK1bkZ8HiqPjS8NkhaGtpqHw=="
|
||||||
},
|
},
|
||||||
"vue-style-loader": {
|
"vue-style-loader": {
|
||||||
"version": "4.1.3",
|
"version": "4.1.3",
|
||||||
|
|
|
@ -3,15 +3,15 @@ var BASE = {
|
||||||
* @description api请求基础路径
|
* @description api请求基础路径
|
||||||
*/
|
*/
|
||||||
API_DEV: {
|
API_DEV: {
|
||||||
common: "https://common-api.pickmall.cn",
|
common: "http://localhost:8890",
|
||||||
buyer: "https://buyer-api.pickmall.cn",
|
buyer: "http://localhost:8888",
|
||||||
seller: "https://store-api.pickmall.cn",
|
seller: "http://localhost:8889",
|
||||||
manager: "https://admin-api.pickmall.cn"
|
manager: "http://localhost:8887"
|
||||||
},
|
},
|
||||||
API_PROD: {
|
API_PROD: {
|
||||||
common: "https://common-api.pickmall.cn",
|
common: "http://192.168.2.110:8890",
|
||||||
buyer: "https://buyer-api.pickmall.cn",
|
buyer: "http://192.168.2.110:8888",
|
||||||
seller: "https://store-api.pickmall.cn",
|
seller: "http://192.168.2.110:8889",
|
||||||
manager: "https://admin-api.pickmall.cn"
|
manager: "http://192.168.2.110:8887"
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,13 +1,24 @@
|
||||||
import request, {Method} from '@/plugins/request.js'
|
import request, { Method } from "@/plugins/request.js";
|
||||||
|
|
||||||
// 获取首页楼层装修数据
|
// 获取首页楼层装修数据
|
||||||
export function indexData (params) {
|
export function indexData(params) {
|
||||||
return request({
|
return request({
|
||||||
url: '/buyer/other/pageData/getIndex',
|
url: "/buyer/other/pageData/getIndex",
|
||||||
method: Method.GET,
|
method: Method.GET,
|
||||||
needToken: false,
|
needToken: false,
|
||||||
params
|
params,
|
||||||
})
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取店铺楼层数据
|
||||||
|
*/
|
||||||
|
export function getFloorStoreData(params) {
|
||||||
|
return request({
|
||||||
|
url: `/buyer/other/pageData?pageClientType=PC`,
|
||||||
|
method: "get",
|
||||||
|
params,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -15,21 +26,33 @@ export function indexData (params) {
|
||||||
* @param pageClientType 客户端类型,可用值:PC,H5,WECHAT_MP,APP
|
* @param pageClientType 客户端类型,可用值:PC,H5,WECHAT_MP,APP
|
||||||
* @param pageType 页面类型,可用值:INDEX,STORE,SPECIAL
|
* @param pageType 页面类型,可用值:INDEX,STORE,SPECIAL
|
||||||
*/
|
*/
|
||||||
export function pageData (params) {
|
export function pageData(params) {
|
||||||
return request({
|
return request({
|
||||||
url: `/buyer/other/pageData`,
|
url: `/buyer/other/pageData`,
|
||||||
method: Method.GET,
|
method: Method.GET,
|
||||||
needToken: false,
|
needToken: false,
|
||||||
params
|
params,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 刷新token
|
* 刷新token
|
||||||
*/
|
*/
|
||||||
export function handleRefreshToken (token) {
|
export function handleRefreshToken(token) {
|
||||||
return request({
|
return request({
|
||||||
url: `/buyer/passport/member/refresh/${token}`,
|
url: `/buyer/passport/member/refresh/${token}`,
|
||||||
method: Method.GET,
|
method: Method.GET,
|
||||||
needToken: false
|
needToken: false,
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// /**
|
||||||
|
// * 获取店铺楼层数据
|
||||||
|
// */
|
||||||
|
// export function getFloorStoreData(params) {
|
||||||
|
// return request({
|
||||||
|
// url: `/buyer/other/pageData?pageClientType=PC`,
|
||||||
|
// method: "get",
|
||||||
|
// params,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="merchant">
|
<div class="merchant">
|
||||||
<BaseHeader />
|
<BaseHeader/>
|
||||||
<!-- 搜索栏 -->
|
<!-- 搜索栏 -->
|
||||||
<Search :store="true" @search="search"></Search>
|
<Search :store="true" @search="search"></Search>
|
||||||
<!-- 店铺logo -->
|
<!-- 店铺logo -->
|
||||||
<div class="shop-logo">
|
<div class="shop-logo">
|
||||||
<div>
|
|
||||||
<img :src="storeMsg.storeLogo" height="80" alt="">
|
|
||||||
<div>
|
<div>
|
||||||
<p>{{storeMsg.storeName || 'xx店铺'}}</p>
|
<p>{{storeMsg.storeName || 'xx店铺'}}</p>
|
||||||
<p class="ellipsis" :alt="storeMsg.storeDesc" v-html="storeMsg.storeDesc"></p>
|
<p class="ellipsis" :alt="storeMsg.storeDesc" v-html="storeMsg.storeDesc"></p>
|
||||||
|
@ -16,96 +14,170 @@
|
||||||
<span style="width:80px" class="hover-pointer ml_10" @click="IMService()"><Icon custom="icomoon icon-customer-service" />联系客服</span>
|
<span style="width:80px" class="hover-pointer ml_10" @click="IMService()"><Icon custom="icomoon icon-customer-service" />联系客服</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="store-category">
|
<div class="store-category">
|
||||||
<ul class="cate-list">
|
<ul class="cate-list">
|
||||||
<li class="cate-item" @click="searchByCate({id:'', labelName: '店铺推荐'})">首页</li>
|
<li
|
||||||
|
class="cate-item"
|
||||||
|
@click="searchByCate({ id: '', labelName: '店铺推荐' })"
|
||||||
|
>
|
||||||
|
首页
|
||||||
|
</li>
|
||||||
<li class="cate-item" v-for="(cate, index) in cateList" :key="index">
|
<li class="cate-item" v-for="(cate, index) in cateList" :key="index">
|
||||||
<Dropdown v-if="cate.children.length">
|
<Dropdown v-if="cate.children.length">
|
||||||
<div @click.self="searchByCate(cate)">{{cate.labelName}} <Icon type="ios-arrow-down"></Icon></div>
|
<div @click.self="searchByCate(cate)">
|
||||||
|
{{ cate.labelName }}
|
||||||
|
<Icon type="ios-arrow-down"></Icon>
|
||||||
|
</div>
|
||||||
<DropdownMenu slot="list">
|
<DropdownMenu slot="list">
|
||||||
<DropdownItem @click.native="searchByCate(sec)" :name="sec.id" v-for="sec in cate.children" :key="sec.id">{{sec.labelName}}</DropdownItem>
|
<DropdownItem
|
||||||
|
@click.native="searchByCate(sec)"
|
||||||
|
:name="sec.id"
|
||||||
|
v-for="sec in cate.children"
|
||||||
|
:key="sec.id"
|
||||||
|
>{{ sec.labelName }}
|
||||||
|
</DropdownItem
|
||||||
|
>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
<span v-else @click.self="searchByCate(cate)">{{cate.labelName}}</span>
|
<span v-else @click.self="searchByCate(cate)">{{
|
||||||
|
cate.labelName
|
||||||
|
}}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="promotion-decorate">{{cateName}}</div>
|
<div class="promotion-decorate">{{ cateName }}</div>
|
||||||
|
|
||||||
|
<!-- <div class="goods-list">-->
|
||||||
|
<!-- <empty v-if="goodsList.length === 0"/>-->
|
||||||
|
<!-- <div-->
|
||||||
|
<!-- v-else-->
|
||||||
|
<!-- class="goods-show-info"-->
|
||||||
|
<!-- v-for="(item, index) in goodsList"-->
|
||||||
|
<!-- :key="index"-->
|
||||||
|
<!-- @click="goGoodsDetail(item.content.id, item.content.goodsId)"-->
|
||||||
|
<!-- >-->
|
||||||
|
<!-- <div class="goods-show-img">-->
|
||||||
|
<!-- <img width="220" height="220" :src="item.content.thumbnail"/>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="goods-show-price">-->
|
||||||
|
<!-- <span>-->
|
||||||
|
<!-- <span class="seckill-price text-danger">{{-->
|
||||||
|
<!-- item.content.price | unitPrice("¥")-->
|
||||||
|
<!-- }}</span>-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="goods-show-detail">-->
|
||||||
|
<!-- <span>{{ item.content.goodsName }}</span>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="goods-show-num">-->
|
||||||
|
<!-- 已有<span>{{ item.content.commentNum || 0 }}</span-->
|
||||||
|
<!-- >人评价-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="goods-page">-->
|
||||||
|
<!-- <Page-->
|
||||||
|
<!-- show-sizer-->
|
||||||
|
<!-- @on-change="changePageNum"-->
|
||||||
|
<!-- @on-page-size-change="changePageSize"-->
|
||||||
|
<!-- :total="total"-->
|
||||||
|
<!-- :page-size="params.pageSize"-->
|
||||||
|
<!-- ></Page>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- -->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 楼层装修部分 -->
|
||||||
|
<model-form ref="modelForm" :data="modelForm"></model-form>
|
||||||
|
|
||||||
|
<BaseFooter/>
|
||||||
|
|
||||||
<div class="goods-list">
|
|
||||||
<empty v-if="goodsList.length === 0" />
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="goods-show-info"
|
|
||||||
v-for="(item, index) in goodsList"
|
|
||||||
:key="index"
|
|
||||||
@click="goGoodsDetail(item.content.id, item.content.goodsId)"
|
|
||||||
>
|
|
||||||
<div class="goods-show-img">
|
|
||||||
<img width="220" height="220" :src="item.content.thumbnail" />
|
|
||||||
</div>
|
|
||||||
<div class="goods-show-price">
|
|
||||||
<span>
|
|
||||||
<span class="seckill-price text-danger">{{
|
|
||||||
item.content.price | unitPrice("¥")
|
|
||||||
}}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="goods-show-detail">
|
|
||||||
<span>{{ item.content.goodsName }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="goods-show-num">
|
|
||||||
已有<span>{{ item.content.commentNum || 0 }}</span>人评价
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="goods-page">
|
|
||||||
<Page
|
|
||||||
show-sizer
|
|
||||||
@on-change="changePageNum"
|
|
||||||
@on-page-size-change="changePageSize"
|
|
||||||
:total="total"
|
|
||||||
:page-size="params.pageSize"
|
|
||||||
></Page>
|
|
||||||
</div>
|
|
||||||
<BaseFooter />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {getDetailById, getCateById} from '@/api/shopentry'
|
|
||||||
import { cancelCollect, collectGoods, isCollection } from '@/api/member';
|
|
||||||
import {goodsList} from '@/api/goods';
|
|
||||||
import { getIMDetail } from "@/api/common";
|
import { getIMDetail } from "@/api/common";
|
||||||
import Storage from "../plugins/storage";
|
import Storage from "../plugins/storage";
|
||||||
|
import {getDetailById, getCateById} from "@/api/shopentry";
|
||||||
|
import {cancelCollect, collectGoods, isCollection} from "@/api/member";
|
||||||
|
import {goodsList} from "@/api/goods";
|
||||||
|
import Search from "@/components/Search";
|
||||||
|
import ModelForm from "@/components/indexDecorate/ModelForm";
|
||||||
|
import HoverSearch from "@/components/header/hoverSearch";
|
||||||
|
import storage from "@/plugins/storage";
|
||||||
|
import {getFloorStoreData} from "@/api/index.js";
|
||||||
|
import {seckillByDay} from "@/api/promotion";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Merchant',
|
name: "Merchant",
|
||||||
data () {
|
components: {
|
||||||
|
Search,
|
||||||
|
ModelForm,
|
||||||
|
HoverSearch,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
return {
|
return {
|
||||||
|
// 店铺装修的内容
|
||||||
|
modelForm: {list: []}, // 楼层装修数据
|
||||||
|
topAdvert: {}, // 顶部广告
|
||||||
|
showNav: false, // 是否展示分类栏
|
||||||
|
topSearchShow: false, // 滚动后顶部搜索栏展示
|
||||||
|
carouselLarge: false, // 不同轮播分类尺寸
|
||||||
|
carouselOpacity: false, // 不同轮播分类样式,
|
||||||
|
enablePageData: false, //是否显示楼层装修内容
|
||||||
|
basePageData: false, //基础店铺信息
|
||||||
storeMsg: {}, // 店铺信息
|
storeMsg: {}, // 店铺信息
|
||||||
cateList: [], // 店铺分裂
|
cateList: [], // 店铺分裂
|
||||||
goodsList: [], // 商品列表
|
goodsList: [], // 商品列表
|
||||||
total: 0, // 商品数量
|
total: 0, // 商品数量
|
||||||
IMLink:"",
|
IMLink:"",
|
||||||
params: { // 请求参数
|
params: {
|
||||||
|
// 请求参数
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
keyword: '',
|
keyword: "",
|
||||||
storeId: this.$route.query.id,
|
storeId: this.$route.query.id,
|
||||||
storeCatId: ''
|
storeCatId: "",
|
||||||
},
|
},
|
||||||
cateName: '店铺推荐', // 分类名称
|
cateName: "店铺推荐", // 分类名称
|
||||||
storeCollected: false // 是否收藏
|
storeCollected: false, // 是否收藏
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
created () {
|
created() {
|
||||||
this.getStoreMsg()
|
this.getStoreMsg();
|
||||||
this.getCateList()
|
|
||||||
this.getGoodsList()
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getIndexData() {
|
||||||
|
// 获取首页装修数据
|
||||||
|
getFloorStoreData({clientType: "PC", num: this.$route.query.id, pageType: 'STORE'}).then(
|
||||||
|
(res) => {
|
||||||
|
if (res.success) {
|
||||||
|
let dataJson = JSON.parse(res.result.pageData);
|
||||||
|
// 秒杀活动不是装修的数据,需要调用接口判断是否有秒杀商品
|
||||||
|
// 轮播图根据不同轮播,样式不同
|
||||||
|
for (let i = 0; i < dataJson.list.length; i++) {
|
||||||
|
let type = dataJson.list[i].type;
|
||||||
|
if (type === "carousel2") {
|
||||||
|
this.carouselLarge = true;
|
||||||
|
} else if (type === "carousel1") {
|
||||||
|
this.carouselLarge = true;
|
||||||
|
this.carouselOpacity = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// else if (type === "seckill") {
|
||||||
|
// let seckill = this.getListByDay();
|
||||||
|
// dataJson.list[i].options.list = seckill;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
this.modelForm = dataJson;
|
||||||
|
storage.setItem("navList", dataJson.list[1]);
|
||||||
|
this.showNav = true;
|
||||||
|
this.topAdvert = dataJson.list[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
// 跳转im客服
|
// 跳转im客服
|
||||||
async IMService() {
|
async IMService() {
|
||||||
// 获取访问Token
|
// 获取访问Token
|
||||||
|
@ -145,100 +217,144 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getCateList () { // 店铺分类
|
// async getListByDay() {
|
||||||
getCateById(this.$route.query.id).then(res => {
|
// // 当天秒杀活动
|
||||||
|
// const res = await seckillByDay();
|
||||||
|
// if (res.success && res.result.length) {
|
||||||
|
// return res.result;
|
||||||
|
// } else {
|
||||||
|
// return [];
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
|
||||||
|
// getStoreMsg() {
|
||||||
|
// // 店铺信息
|
||||||
|
// getDetailById(this.$route.query.id).then((res) => {
|
||||||
|
// if (res.success) {
|
||||||
|
//
|
||||||
|
// this.storeMsg = res.result;
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// this.getIndexData();
|
||||||
|
// let that = this;
|
||||||
|
// window.onscroll = function () {
|
||||||
|
// let top =
|
||||||
|
// document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
// if (top > 300) {
|
||||||
|
// that.topSearchShow = true;
|
||||||
|
// } else {
|
||||||
|
// that.topSearchShow = false;
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
getCateList() {
|
||||||
|
// 店铺分类
|
||||||
|
getCateById(this.$route.query.id).then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.cateList = res.result
|
this.cateList = res.result;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
getGoodsList () { // 商品信息
|
getGoodsList() {
|
||||||
goodsList(this.params).then((res) => {
|
// 商品信息
|
||||||
|
goodsList(this.params)
|
||||||
|
.then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.goodsList = res.result.content;
|
this.goodsList = res.result.content;
|
||||||
this.total = res.result.totalElements;
|
this.total = res.result.totalElements;
|
||||||
}
|
}
|
||||||
}).catch(() => {
|
})
|
||||||
|
.catch(() => {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
goGoodsDetail (skuId, goodsId) {
|
goGoodsDetail(skuId, goodsId) {
|
||||||
// 跳转商品详情
|
// 跳转商品详情
|
||||||
let routeUrl = this.$router.resolve({
|
let routeUrl = this.$router.resolve({
|
||||||
path: '/goodsDetail',
|
path: "/goodsDetail",
|
||||||
query: { skuId, goodsId }
|
query: {skuId, goodsId},
|
||||||
});
|
});
|
||||||
window.open(routeUrl.href, '_blank');
|
window.open(routeUrl.href, "_blank");
|
||||||
},
|
},
|
||||||
search (val) { // 搜索本店商品
|
search(val) {
|
||||||
|
// 搜索本店商品
|
||||||
console.log(val);
|
console.log(val);
|
||||||
this.params.keyword = val
|
this.params.keyword = val;
|
||||||
this.getGoodsList()
|
this.getGoodsList();
|
||||||
},
|
},
|
||||||
searchByCate (cate) { // 搜索同分类下商品
|
searchByCate(cate) {
|
||||||
this.params.storeCatId = cate.id
|
// 搜索同分类下商品
|
||||||
this.cateName = cate.labelName
|
this.params.storeCatId = cate.id;
|
||||||
this.getGoodsList()
|
this.cateName = cate.labelName;
|
||||||
|
this.getGoodsList();
|
||||||
},
|
},
|
||||||
// 分页 修改页码
|
// 分页 修改页码
|
||||||
changePageNum (val) {
|
changePageNum(val) {
|
||||||
this.params.pageNumber = val;
|
this.params.pageNumber = val;
|
||||||
this.getGoodsList();
|
this.getGoodsList();
|
||||||
},
|
},
|
||||||
// 分页 修改页数
|
// 分页 修改页数
|
||||||
changePageSize (val) {
|
changePageSize(val) {
|
||||||
this.params.pageNumber = 1;
|
this.params.pageNumber = 1;
|
||||||
this.params.pageSize = val;
|
this.params.pageSize = val;
|
||||||
this.getGoodsList();
|
this.getGoodsList();
|
||||||
},
|
},
|
||||||
async collect () { // 收藏店铺
|
async collect() {
|
||||||
|
// 收藏店铺
|
||||||
if (this.storeCollected) {
|
if (this.storeCollected) {
|
||||||
let cancel = await cancelCollect('STORE', this.storeMsg.storeId)
|
let cancel = await cancelCollect("STORE", this.storeMsg.storeId);
|
||||||
if (cancel.success) {
|
if (cancel.success) {
|
||||||
this.$Message.success('已取消收藏')
|
this.$Message.success("已取消收藏");
|
||||||
this.storeCollected = false;
|
this.storeCollected = false;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
let collect = await collectGoods('STORE', this.storeMsg.storeId);
|
let collect = await collectGoods("STORE", this.storeMsg.storeId);
|
||||||
if (collect.code === 200) {
|
if (collect.code === 200) {
|
||||||
this.storeCollected = true;
|
this.storeCollected = true;
|
||||||
this.$Message.success('收藏店铺成功,可以前往个人中心我的收藏查看');
|
this.$Message.success("收藏店铺成功,可以前往个人中心我的收藏查看");
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import '../assets/styles/goodsList.scss';
|
@import "../assets/styles/goodsList.scss";
|
||||||
|
|
||||||
.merchant {
|
.merchant {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-logo {
|
.shop-logo {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #666;
|
background-color: #666;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
>div{
|
|
||||||
|
> div {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
>div:nth-child(2){
|
> div:nth-child(2) {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
>div:nth-child(3){
|
> div:nth-child(3) {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p:nth-child(1) {
|
p:nth-child(1) {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
p:nth-child(2){
|
|
||||||
|
p:nth-child(2) {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
max-height: 40px;
|
max-height: 40px;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
|
@ -248,22 +364,27 @@ export default {
|
||||||
.store-category {
|
.store-category {
|
||||||
background-color: #005aa0;
|
background-color: #005aa0;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
.cate-list{
|
|
||||||
|
.cate-list {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
margin: 0 auto ;
|
margin: 0 auto;
|
||||||
clear: left;
|
clear: left;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
|
|
||||||
.cate-item {
|
.cate-item {
|
||||||
margin-right: 25px;
|
margin-right: 25px;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.cate-item:hover{
|
|
||||||
|
.cate-item:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.promotion-decorate::before,.promotion-decorate::after{
|
|
||||||
background-image: url('/src/assets/images/sprite@2x.png');
|
.promotion-decorate::before,
|
||||||
|
.promotion-decorate::after {
|
||||||
|
background-image: url("/src/assets/images/sprite@2x.png");
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
1943
buyer/yarn.lock
|
@ -0,0 +1,9 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
|
<exclude-output />
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
|
@ -6,11 +6,7 @@ var BASE = {
|
||||||
common: "https://common-api.pickmall.cn",
|
common: "https://common-api.pickmall.cn",
|
||||||
buyer: "https://buyer-api.pickmall.cn",
|
buyer: "https://buyer-api.pickmall.cn",
|
||||||
seller: "https://store-api.pickmall.cn",
|
seller: "https://store-api.pickmall.cn",
|
||||||
manager: "https://admin-api.pickmall.cn",
|
manager: "https://admin-api.pickmall.cn"
|
||||||
// manager: "http://192.168.0.120:8887",
|
|
||||||
// common: "http://192.168.0.120:8890",
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
API_PROD: {
|
API_PROD: {
|
||||||
common: "https://common-api.pickmall.cn",
|
common: "https://common-api.pickmall.cn",
|
||||||
|
|
|
@ -4,19 +4,60 @@
|
||||||
<div class="query-wrapper">
|
<div class="query-wrapper">
|
||||||
<div class="query-item">
|
<div class="query-item">
|
||||||
<div>搜索范围</div>
|
<div>搜索范围</div>
|
||||||
<Input placeholder="商品名称" @on-clear="goodsData=[]; goodsParams.goodsName=''; goodsParams.pageNumber = 1; getQueryGoodsList()" @on-enter="()=>{goodsData=[];goodsParams.pageNumber =1; getQueryGoodsList();}" icon="ios-search" clearable
|
<Input
|
||||||
style="width: 150px" v-model="goodsParams.goodsName" />
|
placeholder="商品名称"
|
||||||
|
@on-clear="
|
||||||
|
goodsData = [];
|
||||||
|
goodsParams.goodsName = '';
|
||||||
|
goodsParams.pageNumber = 1;
|
||||||
|
getQueryGoodsList();
|
||||||
|
"
|
||||||
|
@on-enter="
|
||||||
|
() => {
|
||||||
|
goodsData = [];
|
||||||
|
goodsParams.pageNumber = 1;
|
||||||
|
getQueryGoodsList();
|
||||||
|
}
|
||||||
|
"
|
||||||
|
icon="ios-search"
|
||||||
|
clearable
|
||||||
|
style="width: 150px"
|
||||||
|
v-model="goodsParams.goodsName"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="query-item">
|
<div class="query-item">
|
||||||
<Cascader v-model="category" placeholder="请选择商品分类" style="width: 250px" :data="skuList"></Cascader>
|
<Cascader
|
||||||
|
v-model="category"
|
||||||
|
placeholder="请选择商品分类"
|
||||||
|
style="width: 250px"
|
||||||
|
:data="skuList"
|
||||||
|
></Cascader>
|
||||||
</div>
|
</div>
|
||||||
<div class="query-item">
|
<div class="query-item">
|
||||||
<Button type="primary" @click="goodsData=[]; getQueryGoodsList();" icon="ios-search">搜索</Button>
|
<Button
|
||||||
|
type="primary"
|
||||||
|
@click="
|
||||||
|
goodsData = [];
|
||||||
|
getQueryGoodsList();
|
||||||
|
"
|
||||||
|
icon="ios-search"
|
||||||
|
>搜索</Button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="positon:retavle;">
|
<div>
|
||||||
<Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="[3,3]">
|
<Scroll
|
||||||
<div class="wap-content-item" :class="{ active: item.selected }" @click="checkedGoods(item, index)" v-for="(item, index) in goodsData" :key="index">
|
class="wap-content-list"
|
||||||
|
:on-reach-bottom="handleReachBottom"
|
||||||
|
:distance-to-edge="[3, 3]"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="wap-content-item"
|
||||||
|
:class="{ active: item.selected }"
|
||||||
|
@click="checkedGoods(item, index)"
|
||||||
|
v-for="(item, index) in goodsData"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<img :src="item.thumbnail" alt="" />
|
<img :src="item.thumbnail" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
@ -33,7 +74,6 @@
|
||||||
|
|
||||||
<div v-if="empty" class="empty">暂无商品信息</div>
|
<div v-if="empty" class="empty">暂无商品信息</div>
|
||||||
</Scroll>
|
</Scroll>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -46,7 +86,8 @@ export default {
|
||||||
type: "multiple", //单选或者多选 single multiple
|
type: "multiple", //单选或者多选 single multiple
|
||||||
skuList: [], // 商品sku列表
|
skuList: [], // 商品sku列表
|
||||||
total: 0, // 商品总数
|
total: 0, // 商品总数
|
||||||
goodsParams: { // 商品请求参数
|
goodsParams: {
|
||||||
|
// 商品请求参数
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 18,
|
pageSize: 18,
|
||||||
order: "desc",
|
order: "desc",
|
||||||
|
@ -66,10 +107,10 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
selectedWay: {
|
selectedWay: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: function(){
|
default: function () {
|
||||||
return new Array()
|
return new Array();
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
category(val) {
|
category(val) {
|
||||||
|
@ -80,7 +121,7 @@ export default {
|
||||||
this.$emit("selected", this.selectedWay);
|
this.$emit("selected", this.selectedWay);
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true,
|
||||||
immediate: true
|
immediate: true,
|
||||||
},
|
},
|
||||||
"goodsParams.categoryPath": {
|
"goodsParams.categoryPath": {
|
||||||
handler: function () {
|
handler: function () {
|
||||||
|
@ -114,22 +155,21 @@ export default {
|
||||||
},
|
},
|
||||||
// 获取列表方法
|
// 获取列表方法
|
||||||
initGoods(res) {
|
initGoods(res) {
|
||||||
if (res.result.records.length !=0) {
|
if (res.result.records.length != 0) {
|
||||||
res.result.records.forEach((item) => {
|
res.result.records.forEach((item) => {
|
||||||
item.selected = false;
|
item.selected = false;
|
||||||
item.___type = "goods"; //设置为goods让pc wap知道标识
|
item.___type = "goods"; //设置为goods让pc wap知道标识
|
||||||
this.selectedWay.forEach(e => {
|
this.selectedWay.forEach((e) => {
|
||||||
if (e.id && e.id === item.id) {
|
if (e.id && e.id === item.id) {
|
||||||
item.selected = true
|
item.selected = true;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
/**
|
/**
|
||||||
* 解决数据请求中,滚动栏会一直上下跳动
|
* 解决数据请求中,滚动栏会一直上下跳动
|
||||||
*/
|
*/
|
||||||
this.total = res.result.total;
|
this.total = res.result.total;
|
||||||
this.goodsData.push(...res.result.records);
|
this.goodsData.push(...res.result.records);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
this.empty = true;
|
this.empty = true;
|
||||||
}
|
}
|
||||||
|
@ -140,12 +180,12 @@ export default {
|
||||||
// 商品
|
// 商品
|
||||||
this.initGoods(res);
|
this.initGoods(res);
|
||||||
});
|
});
|
||||||
if (localStorage.getItem('category')) {
|
if (localStorage.getItem("category")) {
|
||||||
this.deepGroup(JSON.parse(localStorage.getItem('category')))
|
this.deepGroup(JSON.parse(localStorage.getItem("category")));
|
||||||
} else {
|
} else {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.deepGroup(JSON.parse(localStorage.getItem('category')))
|
this.deepGroup(JSON.parse(localStorage.getItem("category")));
|
||||||
},3000)
|
}, 3000);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -205,9 +245,9 @@ export default {
|
||||||
this.selectedWay.push(val);
|
this.selectedWay.push(val);
|
||||||
} else {
|
} else {
|
||||||
val.selected = false;
|
val.selected = false;
|
||||||
for (let i = 0; i<this.selectedWay.length; i++ ) {
|
for (let i = 0; i < this.selectedWay.length; i++) {
|
||||||
if (this.selectedWay[i].id===val.id) {
|
if (this.selectedWay[i].id === val.id) {
|
||||||
this.selectedWay.splice(i,1)
|
this.selectedWay.splice(i, 1);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<Modal :styles="{ top: '120px' }" width="1160" :z-index="10000" @on-cancel="clickClose" @on-ok="clickOK" v-model="flag" :mask-closable="false" scrollable>
|
<Modal :styles="{ top: '120px' }" width="1160" :z-index="10000" @on-cancel="clickClose" @on-ok="clickOK" v-model="flag" :mask-closable="false" scrollable>
|
||||||
<template v-if="flag">
|
<template v-if="flag">
|
||||||
<goodsDialog @selected="(val) => {goodsData = val;}"
|
<goodsDialog
|
||||||
v-if="goodsFlag" ref="goodsDialog" :selectedWay='goodsData'/>
|
@selected="
|
||||||
<linkDialog @selectedLink="(val) => { linkData = val; }" v-else class="linkDialog" />
|
(val) => {
|
||||||
|
goodsData = val;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
v-if="goodsFlag"
|
||||||
|
ref="goodsDialog"
|
||||||
|
:selectedWay="goodsData"
|
||||||
|
/>
|
||||||
|
<linkDialog
|
||||||
|
@selectedLink="
|
||||||
|
(val) => {
|
||||||
|
linkData = val;
|
||||||
|
}
|
||||||
|
"
|
||||||
|
v-else
|
||||||
|
class="linkDialog"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
</Modal>
|
</Modal>
|
||||||
</template>
|
</template>
|
||||||
|
@ -13,7 +29,7 @@ import linkDialog from "./link-dialog";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
goodsDialog,
|
goodsDialog,
|
||||||
linkDialog
|
linkDialog,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -56,12 +72,11 @@ export default {
|
||||||
if (type == "goods") {
|
if (type == "goods") {
|
||||||
this.goodsFlag = true;
|
this.goodsFlag = true;
|
||||||
if (mutiple) {
|
if (mutiple) {
|
||||||
this.singleGoods()
|
this.singleGoods();
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.goodsFlag = false;
|
this.goodsFlag = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
// 关闭组件
|
// 关闭组件
|
||||||
close() {
|
close() {
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
|
<!-- </template> -->
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -27,7 +28,7 @@ import goodsDialog from "./goods-dialog";
|
||||||
import templateWay from "./template/index";
|
import templateWay from "./template/index";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
goodsDialog,
|
goodsDialog
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -43,8 +44,8 @@ export default {
|
||||||
handler(val) {
|
handler(val) {
|
||||||
this.$emit("selectedLink", val[0]); //因为是单选,所以直接返回第一个
|
this.$emit("selectedLink", val[0]); //因为是单选,所以直接返回第一个
|
||||||
},
|
},
|
||||||
deep: true,
|
deep: true
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
@ -57,7 +58,18 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
methods: {},
|
methods: {
|
||||||
|
// isVisible(item) {
|
||||||
|
// const type = this.$route.query.pagetype;
|
||||||
|
// if (type == "INDEX" && [ "discover"].includes(item.name)) {
|
||||||
|
// return false;
|
||||||
|
// }else if(type == "DISCOVER" && item.name == 'special'){
|
||||||
|
// return false;
|
||||||
|
// }else{
|
||||||
|
// return true
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
|
@ -36,7 +36,6 @@ import { getHomeList } from "@/api/other.js";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
loading: true, //表格请求数据为true
|
loading: true, //表格请求数据为true
|
||||||
promotionList: "", // 活动列表
|
promotionList: "", // 活动列表
|
||||||
selectedIndex: 0, //左侧菜单选择
|
selectedIndex: 0, //左侧菜单选择
|
||||||
|
|
|
@ -34,5 +34,10 @@ export default [
|
||||||
title: "其他",
|
title: "其他",
|
||||||
url: "3",
|
url: "3",
|
||||||
name: "other"
|
name: "other"
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
title: "专题",
|
||||||
|
url: "4",
|
||||||
|
name: "special"
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -108,10 +108,10 @@ export default {
|
||||||
type: "INDEX",
|
type: "INDEX",
|
||||||
title: "首页",
|
title: "首页",
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// type: "SPECIAL",
|
type: "SPECIAL",
|
||||||
// title: "专题",
|
title: "专题",
|
||||||
// },
|
}
|
||||||
],
|
],
|
||||||
list: [], // 模板列表
|
list: [], // 模板列表
|
||||||
};
|
};
|
||||||
|
@ -127,7 +127,8 @@ export default {
|
||||||
const data = this.formData;
|
const data = this.formData;
|
||||||
data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
|
data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
|
||||||
delete data.status;
|
delete data.status;
|
||||||
(data.pageType = "INDEX"), (data.pageClientType = "PC");
|
// (data.pageType = "INDEX"), (data.pageClientType = "PC");
|
||||||
|
(data.pageType = this.searchForm.pageType), (data.pageClientType = "PC");
|
||||||
if (data.id) {
|
if (data.id) {
|
||||||
API_floor.updateHome(data.id, data).then((res) => {
|
API_floor.updateHome(data.id, data).then((res) => {
|
||||||
this.$Message.success("编辑模板成功");
|
this.$Message.success("编辑模板成功");
|
||||||
|
@ -147,6 +148,13 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
clickType(type,index){
|
||||||
|
this.searchForm.pageNumber = 1
|
||||||
|
this.searchForm.pageType = type;
|
||||||
|
this.selectedIndex = index;
|
||||||
|
this.getTemplateList();
|
||||||
|
},
|
||||||
|
|
||||||
createTemp() {
|
createTemp() {
|
||||||
// 新建表单
|
// 新建表单
|
||||||
this.$refs.form.resetFields();
|
this.$refs.form.resetFields();
|
||||||
|
|
|
@ -11,7 +11,10 @@ import layout from "./index";
|
||||||
import navbar from "./navbar";
|
import navbar from "./navbar";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
navbar,
|
navbar
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.pagetype = this.$route.query.pagetype;
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -30,7 +33,8 @@ export default {
|
||||||
this.pagetype = this.$route.query.pagetype;
|
this.pagetype = this.$route.query.pagetype;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
selected(val) { // 顶部栏点击切换
|
selected(val) {
|
||||||
|
// 顶部栏点击切换
|
||||||
this.name = val;
|
this.name = val;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,9 +9,7 @@
|
||||||
v-for="(item, index) in way"
|
v-for="(item, index) in way"
|
||||||
:key="index"
|
:key="index"
|
||||||
:type="item.selected ? 'primary' : ''"
|
:type="item.selected ? 'primary' : ''"
|
||||||
>
|
>{{ item.title }}</Button>
|
||||||
{{ item.title }}
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="model-title-view-btn">
|
<div class="model-title-view-btn">
|
||||||
<!-- TODO 后期会补全 目前版本暂无 -->
|
<!-- TODO 后期会补全 目前版本暂无 -->
|
||||||
|
@ -21,7 +19,7 @@
|
||||||
<div>临时预览</div>
|
<div>临时预览</div>
|
||||||
<div ref="qrCodeUrl"></div>
|
<div ref="qrCodeUrl"></div>
|
||||||
</div>
|
</div>
|
||||||
</Poptip> -->
|
</Poptip>-->
|
||||||
<Button size="default" type="primary" @click="handleSpinShow">保存模板</Button>
|
<Button size="default" type="primary" @click="handleSpinShow">保存模板</Button>
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
|
@ -33,7 +31,8 @@
|
||||||
>
|
>
|
||||||
<div v-if="progress">
|
<div v-if="progress">
|
||||||
<div class="model-item">
|
<div class="model-item">
|
||||||
模板名称 <Input style="width: 200px" v-model="submitWay.name" />
|
模板名称
|
||||||
|
<Input style="width: 200px" v-model="submitWay.name"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="model-item">
|
<div class="model-item">
|
||||||
是否立即发布
|
是否立即发布
|
||||||
|
@ -45,7 +44,7 @@
|
||||||
|
|
||||||
<Button type="primary" @click="save()">保存</Button>
|
<Button type="primary" @click="save()">保存</Button>
|
||||||
</div>
|
</div>
|
||||||
<Progress v-else :percent="num" status="active" />
|
<Progress v-else :percent="num" status="active"/>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -54,6 +53,7 @@
|
||||||
import * as API_Other from "@/api/other.js";
|
import * as API_Other from "@/api/other.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
props: ["pagetype"],
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
progress: true, // 展示进度
|
progress: true, // 展示进度
|
||||||
|
@ -82,8 +82,8 @@ export default {
|
||||||
// 表单信息
|
// 表单信息
|
||||||
pageShow: this.$route.query.type || false,
|
pageShow: this.$route.query.type || false,
|
||||||
name: this.$route.query.name || "模板名称",
|
name: this.$route.query.name || "模板名称",
|
||||||
pageClientType: "H5",
|
pageClientType: "H5"
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -158,7 +158,7 @@ export default {
|
||||||
pageType: this.submitWay.pageType,
|
pageType: this.submitWay.pageType,
|
||||||
pageClientType: "H5",
|
pageClientType: "H5",
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then(res => {
|
||||||
this.num = 50;
|
this.num = 50;
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.num = 80;
|
this.num = 80;
|
||||||
|
@ -174,7 +174,7 @@ export default {
|
||||||
}
|
}
|
||||||
console.log(res);
|
console.log(res);
|
||||||
})
|
})
|
||||||
.catch((error) => {});
|
.catch(error => {});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
@ -237,7 +237,7 @@ export default {
|
||||||
submit(submitWay) {
|
submit(submitWay) {
|
||||||
this.progress = false;
|
this.progress = false;
|
||||||
API_Other.setHomeSetup(submitWay)
|
API_Other.setHomeSetup(submitWay)
|
||||||
.then((res) => {
|
.then(res => {
|
||||||
this.num = 50;
|
this.num = 50;
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.num = 80;
|
this.num = 80;
|
||||||
|
@ -254,9 +254,9 @@ export default {
|
||||||
}
|
}
|
||||||
console.log(res);
|
console.log(res);
|
||||||
})
|
})
|
||||||
.catch((error) => {});
|
.catch(error => {});
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
<Button type="primary" @click="handleAdd()">添加页面</Button>
|
<Button type="primary" @click="handleAdd()">添加页面</Button>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<Spin size="large" fix v-if="loading"></Spin>
|
<Spin size="large" fix v-if="loading"></Spin>
|
||||||
<div class="item item-title" >
|
<div class="item item-title">
|
||||||
<div>页面名称</div>
|
<div>页面名称</div>
|
||||||
<div class="item-config">
|
<div class="item-config">
|
||||||
<div>状态</div>
|
<div>状态</div>
|
||||||
|
@ -30,19 +30,25 @@
|
||||||
<span slot="close">关</span>
|
<span slot="close">关</span>
|
||||||
</i-switch>
|
</i-switch>
|
||||||
<Button type="info" placement="right" @click="handleEdit(item)" size="small">修改</Button>
|
<Button type="info" placement="right" @click="handleEdit(item)" size="small">修改</Button>
|
||||||
<Poptip confirm title="删除此模板?" @on-ok="handleDel(item)" >
|
<Poptip confirm title="删除此模板?" @on-ok="handleDel(item)">
|
||||||
<Button type="error" size="small">删除</Button>
|
<Button type="error" size="small">删除</Button>
|
||||||
</Poptip>
|
</Poptip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="no-more" v-if="list.length ==0">暂无更多模板</div>
|
<div class="no-more" v-if="list.length ==0">暂无更多模板</div>
|
||||||
</div>
|
</div>
|
||||||
<Page :total="total" size="small" @on-change="(val) => {params.pageNumber = val; } " :current="params.pageNumber" :page-size="params.pageSize" show-sizer :page-size-opts="[10, 20, 50]" @on-page-size-change="changePageSize"/>
|
<Page
|
||||||
|
:total="total"
|
||||||
|
size="small"
|
||||||
|
@on-change="(val) => {params.pageNumber = val; } "
|
||||||
|
:current="params.pageNumber"
|
||||||
|
:page-size="params.pageSize"
|
||||||
|
show-sizer
|
||||||
|
:page-size-opts="[10, 20, 50]"
|
||||||
|
@on-page-size-change="changePageSize"
|
||||||
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as API_Other from "@/api/other.js";
|
import * as API_Other from "@/api/other.js";
|
||||||
|
@ -51,25 +57,27 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selectedIndex: 0, // 装修那个页面的下标
|
selectedIndex: 0, // 装修那个页面的下标
|
||||||
columns: [ // 表头
|
columns: [
|
||||||
|
// 表头
|
||||||
{
|
{
|
||||||
title: "页面名称",
|
title: "页面名称",
|
||||||
key: "name",
|
key: "name"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "状态",
|
title: "状态"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
key: "action",
|
key: "action"
|
||||||
},
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
loading: false, // 加载状态
|
loading: false, // 加载状态
|
||||||
pageTypes: [ // 装修类型
|
pageTypes: [
|
||||||
|
// 装修类型
|
||||||
{
|
{
|
||||||
type: "INDEX",
|
type: "INDEX",
|
||||||
title: "首页",
|
title: "首页"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "SPECIAL",
|
type: "SPECIAL",
|
||||||
|
@ -84,26 +92,27 @@ export default {
|
||||||
// title: "app开屏页面",
|
// title: "app开屏页面",
|
||||||
// },
|
// },
|
||||||
],
|
],
|
||||||
params: { // 请求参数
|
params: {
|
||||||
|
// 请求参数
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
sort: "createTime",
|
sort: "createTime",
|
||||||
order: "desc",
|
order: "desc",
|
||||||
pageType: "INDEX",
|
pageType: "INDEX",
|
||||||
pageClientType: "H5",
|
pageClientType: "H5"
|
||||||
},
|
},
|
||||||
total: 0, // 页面数量
|
total: 0, // 页面数量
|
||||||
list: [], // 总数据
|
list: [] // 总数据
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
params: {
|
// params: {
|
||||||
handler(val) {
|
// handler(val) {
|
||||||
// this.pageNumber++;
|
// // this.pageNumber++;
|
||||||
this.init();
|
// this.init();
|
||||||
},
|
// },
|
||||||
deep: true,
|
// deep: true,
|
||||||
},
|
// },
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init();
|
this.init();
|
||||||
|
@ -133,7 +142,7 @@ export default {
|
||||||
// 是否发布
|
// 是否发布
|
||||||
changeSwitch(item) {
|
changeSwitch(item) {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
API_Other.releasePageHome(item.id).then((res) => {
|
API_Other.releasePageHome(item.id).then(res => {
|
||||||
if (res.result) {
|
if (res.result) {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
this.$Message.success("发布成功");
|
this.$Message.success("发布成功");
|
||||||
|
@ -148,10 +157,10 @@ export default {
|
||||||
// 初始化数据
|
// 初始化数据
|
||||||
init() {
|
init() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
API_Other.getHomeList(this.params).then((res) => {
|
API_Other.getHomeList(this.params).then(res => {
|
||||||
if (!res.result) return false;
|
if (!res.result) return false;
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
res.result.records.forEach((item) => {
|
res.result.records.forEach(item => {
|
||||||
if (item.pageShow == "OPEN") {
|
if (item.pageShow == "OPEN") {
|
||||||
item.pageShow = true;
|
item.pageShow = true;
|
||||||
} else {
|
} else {
|
||||||
|
@ -190,7 +199,7 @@ export default {
|
||||||
// 删除模板
|
// 删除模板
|
||||||
handleDel(val) {
|
handleDel(val) {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
API_Other.removePageHome(val.id).then((res) => {
|
API_Other.removePageHome(val.id).then(res => {
|
||||||
if (res.result) {
|
if (res.result) {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
this.init();
|
this.init();
|
||||||
|
@ -199,8 +208,8 @@ export default {
|
||||||
|
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@ -212,7 +221,7 @@ export default {
|
||||||
background: #ededed;
|
background: #ededed;
|
||||||
}
|
}
|
||||||
.item-title {
|
.item-title {
|
||||||
background: #d7e7f5!important;
|
background: #d7e7f5 !important;
|
||||||
height: 54px;
|
height: 54px;
|
||||||
}
|
}
|
||||||
.no-more {
|
.no-more {
|
||||||
|
@ -256,7 +265,7 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.item:nth-of-type(2n+1) {
|
.item:nth-of-type(2n + 1) {
|
||||||
background: #f5f7fa;
|
background: #f5f7fa;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -10,6 +10,9 @@
|
||||||
<FormItem label="reqURL" prop="reqURL">
|
<FormItem label="reqURL" prop="reqURL">
|
||||||
<Input v-model="formValidate.reqURL" />
|
<Input v-model="formValidate.reqURL" />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
<FormItem label="电子面单URL" prop="sheetReqURL">
|
||||||
|
<Input v-model="formValidate.sheetReqURL" />
|
||||||
|
</FormItem>
|
||||||
<div class="label-btns">
|
<div class="label-btns">
|
||||||
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
<Button type="primary" @click="submit('formValidate')">保存</Button>
|
||||||
|
|
||||||
|
@ -24,7 +27,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
ruleValidate: {}, // 验证规则
|
ruleValidate: {}, // 验证规则
|
||||||
formValidate: { ebusinessID: "", reqURL: "", appKey: "" }, // 表单数据
|
formValidate: { ebusinessID: "", reqURL: "", appKey: "" ,sheetReqURL: "" ,}, // 表单数据
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
props: ["res",'type'],
|
props: ["res",'type'],
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
/>
|
/>
|
||||||
</Form-item>
|
</Form-item>
|
||||||
<Form-item label="联系方式">
|
<Form-item label="联系方式">
|
||||||
<Input
|
<Inputuser-manage
|
||||||
type="text"
|
type="text"
|
||||||
v-model="searchForm.mobile"
|
v-model="searchForm.mobile"
|
||||||
placeholder="请输入联系方式"
|
placeholder="请输入联系方式"
|
||||||
|
|
|
@ -10,17 +10,22 @@
|
||||||
"dev": "vue-cli-service serve"
|
"dev": "vue-cli-service serve"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"-": "0.0.1",
|
||||||
"@amap/amap-jsapi-loader": "0.0.7",
|
"@amap/amap-jsapi-loader": "0.0.7",
|
||||||
"@antv/g2": "^4.1.14",
|
"@antv/g2": "^4.1.14",
|
||||||
"@tinymce/tinymce-vue": "^3.2.0",
|
"@tinymce/tinymce-vue": "^3.2.0",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
|
"dplayer": "^1.27.0",
|
||||||
"js-cookie": "^2.2.1",
|
"js-cookie": "^2.2.1",
|
||||||
"node-sass": "^4.14.1",
|
"node-sass": "^4.14.1",
|
||||||
|
"s": "^1.0.0",
|
||||||
"sass-loader": "^8.0.2",
|
"sass-loader": "^8.0.2",
|
||||||
"sockjs-client": "^1.4.0",
|
"sockjs-client": "^1.4.0",
|
||||||
|
"swiper": "^6.3.5",
|
||||||
"uuid": "^8.3.2",
|
"uuid": "^8.3.2",
|
||||||
"view-design": "^4.6.1",
|
"view-design": "^4.6.1",
|
||||||
"vue": "^2.6.10",
|
"vue": "^2.6.10",
|
||||||
|
"vue-awesome-swiper": "^4.1.1",
|
||||||
"vue-json-excel": "^0.3.0",
|
"vue-json-excel": "^0.3.0",
|
||||||
"vue-lazyload": "^1.3.3",
|
"vue-lazyload": "^1.3.3",
|
||||||
"vue-print-nb": "^1.7.5",
|
"vue-print-nb": "^1.7.5",
|
||||||
|
|
|
@ -5,8 +5,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,8 @@ import {
|
||||||
deleteRequest,
|
deleteRequest,
|
||||||
importRequest,
|
importRequest,
|
||||||
getRequestWithNoToken,
|
getRequestWithNoToken,
|
||||||
commonUrl
|
commonUrl,
|
||||||
|
postRequestWithNoForm
|
||||||
} from "@/libs/axios";
|
} from "@/libs/axios";
|
||||||
// 获取数据字典
|
// 获取数据字典
|
||||||
export const getDictData = "/dictData/getByType/";
|
export const getDictData = "/dictData/getByType/";
|
||||||
|
@ -355,3 +356,13 @@ export const refundStatistics = params => {
|
||||||
export const refundPriceStatistics = params => {
|
export const refundPriceStatistics = params => {
|
||||||
return getRequest(`/statistics/refund/order/getPrice`, params);
|
return getRequest(`/statistics/refund/order/getPrice`, params);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//下载结算单
|
||||||
|
export const downLoadGoods = () => {
|
||||||
|
return getRequest(`/goods/import/downLoad/`, {}, 'blob')
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传待发货的订单列表
|
||||||
|
export const uploadGoodsExcel = params => {
|
||||||
|
return postRequestWithNoForm(`/goods/import/import`, params );
|
||||||
|
};
|
||||||
|
|
|
@ -6,6 +6,9 @@ import {
|
||||||
deleteRequest,
|
deleteRequest,
|
||||||
getRequestWithNoToken,
|
getRequestWithNoToken,
|
||||||
postRequestWithNoTokenData,
|
postRequestWithNoTokenData,
|
||||||
|
putRequestWithNoForm,
|
||||||
|
postRequestWithNoToken,
|
||||||
|
postRequestWithNoForm,
|
||||||
commonUrl,
|
commonUrl,
|
||||||
} from "@/libs/axios";
|
} from "@/libs/axios";
|
||||||
|
|
||||||
|
@ -14,13 +17,15 @@ export const getAllCity = (params) => {
|
||||||
return getRequest(commonUrl+'/common/common/region/allCity', params)
|
return getRequest(commonUrl+'/common/common/region/allCity', params)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取全部权限数据
|
||||||
|
export const getCurrentPermissionList = (params) => {
|
||||||
|
return getRequest("/menu/memberMenu", params);
|
||||||
|
};
|
||||||
// 登陆
|
// 登陆
|
||||||
export const getHomeNotice = params => {
|
export const getHomeNotice = params => {
|
||||||
return getRequest("/other/article/getByPage?type=STORE_ARTICLE&pageSize=15");
|
return getRequest("/other/article/getByPage?type=STORE_ARTICLE&pageSize=15");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 登陆
|
// 登陆
|
||||||
export const getSellerHomeData = params => {
|
export const getSellerHomeData = params => {
|
||||||
return getRequest("/statistics/index", params);
|
return getRequest("/statistics/index", params);
|
||||||
|
@ -122,10 +127,9 @@ export const unRelate = params => {
|
||||||
export const getRelatedListData = params => {
|
export const getRelatedListData = params => {
|
||||||
return getRequest("/relate/findByCondition", params);
|
return getRequest("/relate/findByCondition", params);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 获取用户数据 多条件
|
// 获取用户数据 多条件
|
||||||
export const getUserListData = params => {
|
export const getUserListData = params => {
|
||||||
return getRequest("/user/getByCondition", params);
|
return getRequest("/clerk", params);
|
||||||
};
|
};
|
||||||
// 通过用户名搜索
|
// 通过用户名搜索
|
||||||
export const searchUserByName = (username, params) => {
|
export const searchUserByName = (username, params) => {
|
||||||
|
@ -138,7 +142,7 @@ export const getAllUserData = params => {
|
||||||
|
|
||||||
// 添加用户
|
// 添加用户
|
||||||
export const addUser = params => {
|
export const addUser = params => {
|
||||||
return postRequest("/user/admin/add", params);
|
return postRequest("/clerk", params);
|
||||||
};
|
};
|
||||||
// 编辑用户
|
// 编辑用户
|
||||||
export const editUser = params => {
|
export const editUser = params => {
|
||||||
|
@ -213,25 +217,25 @@ export const deleteMessageSend = (ids, params) => {
|
||||||
|
|
||||||
// 分页获取文件数据
|
// 分页获取文件数据
|
||||||
export const getFileListData = params => {
|
export const getFileListData = params => {
|
||||||
return getRequest("/file", params);
|
return getRequest(`${commonUrl}/common/common/file`, params);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
// 复制文件
|
// 复制文件
|
||||||
export const copyFile = params => {
|
export const copyFile = params => {
|
||||||
return postRequest("/file/copy", params);
|
return postRequest(`${commonUrl}/common/common/file/copy`, params);
|
||||||
};
|
};
|
||||||
// 重命名文件
|
// 重命名文件
|
||||||
export const renameFile = params => {
|
export const renameFile = params => {
|
||||||
return postRequest("/file/rename", params);
|
return postRequest(`${commonUrl}/common/common/file/rename`, params);
|
||||||
};
|
};
|
||||||
// 删除文件
|
// 删除文件
|
||||||
export const deleteFile = (ids, params) => {
|
export const deleteFile = (ids, params) => {
|
||||||
return deleteRequest(`/file/delete/${ids}`, params);
|
return deleteRequest(`${commonUrl}/common/common/file/delete/${ids}`, params);
|
||||||
};
|
};
|
||||||
// 下载文件
|
// 下载文件
|
||||||
export const aliDownloadFile = (fKey, params) => {
|
export const aliDownloadFile = (fKey, params) => {
|
||||||
return getRequest(`/file/ali/download/${fKey}`, params);
|
return getRequest(`${commonUrl}/common/common/file/ali/download/${fKey}`, params);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
@ -265,4 +269,100 @@ export const handleRefreshToken = (token) => {
|
||||||
return getRequestWithNoToken(`/passport/login/refresh/${token}`);
|
return getRequestWithNoToken(`/passport/login/refresh/${token}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 获取一级部门
|
||||||
|
export const initDepartment = (params) => {
|
||||||
|
return getRequest("/department", params);
|
||||||
|
};
|
||||||
|
// 添加部门
|
||||||
|
export const addDepartment = (params) => {
|
||||||
|
return postRequest("/department", params);
|
||||||
|
};
|
||||||
|
// 删除部门
|
||||||
|
export const deleteDepartment = (ids, params) => {
|
||||||
|
return deleteRequest(`/department/${ids}`, params);
|
||||||
|
};
|
||||||
|
// 编辑部门
|
||||||
|
export const editDepartment = (ids, params) => {
|
||||||
|
return putRequest(`/department/${ids} `, params);
|
||||||
|
};
|
||||||
|
// 加载部门子级数据
|
||||||
|
export const loadDepartment = (id) => {
|
||||||
|
return getRequest(`/department/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 通过部门获取全部角色数据
|
||||||
|
export const getUserByDepartmentId = (id, params) => {
|
||||||
|
return getRequest(`/departmentRole/${id}`, params);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分页获取角色数据
|
||||||
|
export const getRoleList = (params) => {
|
||||||
|
return getRequest("/role", params);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 通过部门修改绑定角色
|
||||||
|
export const updateDepartmentRole = (id, params) => {
|
||||||
|
return putRequestWithNoForm(`/departmentRole/${id}`, params);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取全部权限数据
|
||||||
|
export const getAllPermissionList = (params) => {
|
||||||
|
return getRequest("/menu/tree", params);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加角色
|
||||||
|
export const addRole = (params) => {
|
||||||
|
return postRequest("/role", params);
|
||||||
|
};
|
||||||
|
// 删除角色
|
||||||
|
export const deleteRole = (ids, params) => {
|
||||||
|
return deleteRequest(`/role/${ids}`, params);
|
||||||
|
};
|
||||||
|
// 编辑角色
|
||||||
|
export const editRole = (params) => {
|
||||||
|
return putRequest(`/role/${params.roleId}`, params);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 分配角色权限
|
||||||
|
export const editRolePerm = (params) => {
|
||||||
|
return postRequest("/role/editRolePerm", params);
|
||||||
|
};
|
||||||
|
// 查看某角色拥有的菜单
|
||||||
|
export const selectRoleMenu = (params) => {
|
||||||
|
return getRequest(`/roleMenu/${params}`);
|
||||||
|
};
|
||||||
|
// 保存角色菜单
|
||||||
|
export const saveRoleMenu = (id, params) => {
|
||||||
|
return postRequestWithNoForm(`/roleMenu/${id}`, params);
|
||||||
|
};
|
||||||
|
// 获取全部角色数据
|
||||||
|
export const getAllRoleList = (params) => {
|
||||||
|
return getRequest("/role", params);
|
||||||
|
};
|
||||||
|
export const checkClerk = (mobile) => {
|
||||||
|
return postRequest(`/clerk/${mobile}/check`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 重置用户密码
|
||||||
|
export const resetPassword = (params) => {
|
||||||
|
return postRequest(`/clerk/resetPassword/${params}`);
|
||||||
|
};
|
||||||
|
// 删除用户
|
||||||
|
export const deleteClerk = (ids) => {
|
||||||
|
return deleteRequest(`/clerk/delByIds/${ids}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 禁 启用用户
|
||||||
|
export const enableClerk = (id, params) => {
|
||||||
|
return putRequest(`/clerk/enable/${id}`, params);
|
||||||
|
};
|
||||||
|
// 获取店员详细
|
||||||
|
export const getClerk = (id) => {
|
||||||
|
return getRequest(`/clerk/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const editOtherUser = (id, params) => {
|
||||||
|
return putRequest(`/clerk/${id}`,params);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -31,4 +31,8 @@ export const updateLogistics = (id,params) => {
|
||||||
return putRequest(`/other/logistics/${id}`,params);
|
return putRequest(`/other/logistics/${id}`,params);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getCheckedOn = params =>{
|
||||||
|
return getRequest(`/other/logistics/getCheckedFaceSheet`,params);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -17,6 +17,10 @@ export const queryExportOrder = params => {
|
||||||
return getRequest(`/order/order/queryExportOrder`, params);
|
return getRequest(`/order/order/queryExportOrder`, params);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//获取电子面单
|
||||||
|
export const getOrderFaceSheet= (orderSn,params) =>{
|
||||||
|
return postRequest(`/order/order/${orderSn}/createElectronicsFaceSheet`,params)
|
||||||
|
}
|
||||||
|
|
||||||
// 上传待发货的订单列表
|
// 上传待发货的订单列表
|
||||||
export const uploadDeliverExcel = params => {
|
export const uploadDeliverExcel = params => {
|
||||||
|
|
|
@ -4,10 +4,6 @@ import {
|
||||||
postRequest,
|
postRequest,
|
||||||
putRequest,
|
putRequest,
|
||||||
deleteRequest,
|
deleteRequest,
|
||||||
importRequest,
|
|
||||||
getRequestWithNoToken,
|
|
||||||
putRequestWithNoForm,
|
|
||||||
postRequestWithNoForm,
|
|
||||||
} from "@/libs/axios";
|
} from "@/libs/axios";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -15,8 +11,7 @@ import {
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
export const setHomeSetup = params => {
|
export const setHomeSetup = params => {
|
||||||
|
return postRequest("/settings/pageData/save", params);
|
||||||
return postRequest("/other/pageData/add", params);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -25,7 +20,7 @@ export const setHomeSetup = params => {
|
||||||
*/
|
*/
|
||||||
export const getHomeData = params => {
|
export const getHomeData = params => {
|
||||||
|
|
||||||
return getRequest(`/other/pageData/${params}`);
|
return getRequest(`/settings/pageData/${params}`);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
@ -34,8 +29,8 @@ export const getHomeData = params => {
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
export const getHomeList = params => {
|
export const getHomeList = params => {
|
||||||
|
return getRequest(`/settings/pageData/${params.pageClientType}/pageDataList`, params);
|
||||||
|
|
||||||
return getRequest("/pageData/pageDataList", params);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
@ -43,9 +38,8 @@ export const getHomeList = params => {
|
||||||
* 修改楼层装修
|
* 修改楼层装修
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
export const updateHome = (id,params) => {
|
export const updateHome = (id, params) => {
|
||||||
|
return putRequest(`/settings/pageData/update/${id}`, params);
|
||||||
return putRequest(`/pageData/update/${id}`, params);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -53,8 +47,7 @@ export const updateHome = (id,params) => {
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
export const removePageHome = (id) => {
|
export const removePageHome = (id) => {
|
||||||
|
return deleteRequest(`/settings/pageData/removePageData/${id}`);
|
||||||
return deleteRequest(`/pageData/removePageData/${id}`);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
@ -63,7 +56,6 @@ export const removePageHome = (id) => {
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
export const releasePageHome = (id) => {
|
export const releasePageHome = (id) => {
|
||||||
|
return putRequest(`/settings/pageData/release/${id}`);
|
||||||
return putRequest(`/pageData/releasePageData`,id);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -41,10 +41,24 @@ export const getBillDetail = (id, params) => {
|
||||||
export const getLogistics = (id, params) => {
|
export const getLogistics = (id, params) => {
|
||||||
return getRequest(`/other/logistics`, params)
|
return getRequest(`/other/logistics`, params)
|
||||||
}
|
}
|
||||||
|
//返回信息
|
||||||
|
export const getIsCheck =(logisticsId) =>{
|
||||||
|
return getRequest(`other/logistics/${logisticsId}/getStoreLogistics`)
|
||||||
|
}
|
||||||
|
|
||||||
// 开启物流公司
|
// 开启物流公司
|
||||||
export const logisticsChecked = (id, params) => {
|
export const logisticsChecked = (id, params) => {
|
||||||
return postRequest(`/other/logistics/${id}`, params)
|
return postRequest(`/other/logistics/${id}`, params, {
|
||||||
|
"Content-type": "application/json"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
//获取发货地址
|
||||||
|
export const getDeliverAddress = () =>{
|
||||||
|
return getRequest(`/settings/storeSettings/storeDeliverGoodsAddress`)
|
||||||
|
}
|
||||||
|
//修改发货地址
|
||||||
|
export const editDeliverAddress = (params) =>{
|
||||||
|
return putRequest(`/settings/storeSettings/storeDeliverGoodsAddress`,params)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 关闭开启物流公司
|
// 关闭开启物流公司
|
||||||
|
@ -117,4 +131,9 @@ export const editShipTemplate = (id, params, headers) => {
|
||||||
return putRequest(`/setting/freightTemplate/${id}`, params, headers)
|
return putRequest(`/setting/freightTemplate/${id}`, params, headers)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//修改电子面单等信息
|
||||||
|
export const editChecked = (logisticsId,params) => {
|
||||||
|
return putRequest(`/other/logistics/${logisticsId}/updateStoreLogistics`,params)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
After Width: | Height: | Size: 42 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 6.4 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 6.8 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 8.9 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 8.4 KiB |
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 118 KiB |
Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 123 KiB |
After Width: | Height: | Size: 42 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 6.4 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 6.8 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 3.6 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 8.9 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 34 KiB |
After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 7.3 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 7.3 KiB |
After Width: | Height: | Size: 9.1 KiB |
After Width: | Height: | Size: 17 KiB |
|
@ -388,6 +388,42 @@ export const result = [{
|
||||||
component: "sys/user-manage/userManage",
|
component: "sys/user-manage/userManage",
|
||||||
children: []
|
children: []
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "clerk",
|
||||||
|
level: 1,
|
||||||
|
type: 0,
|
||||||
|
title: "店员设置",
|
||||||
|
path: "",
|
||||||
|
component: "Main",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "clerkManage",
|
||||||
|
level: 2,
|
||||||
|
type: 0,
|
||||||
|
title: "店员管理",
|
||||||
|
path: "clerkManage",
|
||||||
|
component: "shop/system/clerk/clerkManage",
|
||||||
|
children: null
|
||||||
|
},{
|
||||||
|
name: "storeDepartmentManage",
|
||||||
|
level: 2,
|
||||||
|
type: 0,
|
||||||
|
title: "部门管理",
|
||||||
|
path: "storeDepartmentManage",
|
||||||
|
component: "shop/system/department/storeDepartmentManage",
|
||||||
|
children: null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "storeRole",
|
||||||
|
level: 2,
|
||||||
|
type: 0,
|
||||||
|
title: "角色权限",
|
||||||
|
path: "storeRole",
|
||||||
|
component: "shop/system/role/storeRoleManage",
|
||||||
|
children: null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "ship",
|
name: "ship",
|
||||||
level: 1,
|
level: 1,
|
||||||
|
@ -415,6 +451,7 @@ export const result = [{
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "shop",
|
name: "shop",
|
||||||
level: 1,
|
level: 1,
|
||||||
|
@ -423,7 +460,8 @@ export const result = [{
|
||||||
path: "/shop",
|
path: "/shop",
|
||||||
component: "Main",
|
component: "Main",
|
||||||
description: "",
|
description: "",
|
||||||
children: [{
|
children: [
|
||||||
|
{
|
||||||
name: "shopSetting",
|
name: "shopSetting",
|
||||||
level: 2,
|
level: 2,
|
||||||
type: 0,
|
type: 0,
|
||||||
|
@ -432,6 +470,35 @@ export const result = [{
|
||||||
component: "shop/shopSetting",
|
component: "shop/shopSetting",
|
||||||
children: null,
|
children: null,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "wapList",
|
||||||
|
level: 2,
|
||||||
|
type: 0,
|
||||||
|
title: "移动楼层",
|
||||||
|
path: "wapList",
|
||||||
|
component: "shop/wap/wapList",
|
||||||
|
children: null
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "pcList",
|
||||||
|
level: 2,
|
||||||
|
type: 0,
|
||||||
|
title: "PC楼层",
|
||||||
|
path: "pcList",
|
||||||
|
component: "shop/floorList",
|
||||||
|
children: null
|
||||||
|
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: "shopAddress",
|
||||||
|
// level: 2,
|
||||||
|
// type: 0,
|
||||||
|
// title: "自提管理",
|
||||||
|
// path: "shopAddress",
|
||||||
|
// component: "shop/shopAddress",
|
||||||
|
// children: null,
|
||||||
|
// }
|
||||||
// {
|
// {
|
||||||
// name: "shopAddress",
|
// name: "shopAddress",
|
||||||
// level: 2,
|
// level: 2,
|
||||||
|
@ -469,5 +536,6 @@ export const result = [{
|
||||||
children: null
|
children: null
|
||||||
}]
|
}]
|
||||||
}]
|
}]
|
||||||
}
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import lazyLoading from './lazyLoading.js';
|
import lazyLoading from './lazyLoading.js';
|
||||||
import Cookies from "js-cookie";
|
import Cookies from "js-cookie";
|
||||||
|
|
||||||
import { result } from './routerJson.js';
|
import { result } from './routerJson.js';
|
||||||
|
import { getCurrentPermissionList } from "@/api/index";
|
||||||
|
|
||||||
const config = require('@/config/index')
|
const config = require('@/config/index')
|
||||||
|
|
||||||
|
@ -326,21 +328,27 @@ util.initRouter = function (vm) { // 初始化路由
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!vm.$store.state.app.added) {
|
|
||||||
// 加载菜单
|
// 加载菜单
|
||||||
let menuData = result;
|
|
||||||
|
getCurrentPermissionList().then(res => {
|
||||||
|
if (!res.success) return false;
|
||||||
|
let menuData = res.result;
|
||||||
// 格式化数据,设置 空children 为 null
|
// 格式化数据,设置 空children 为 null
|
||||||
for(let i =0;i<menuData.length;i++){
|
for (let i = 0; i < menuData.length; i++) {
|
||||||
let t = menuData[i].children
|
let t = menuData[i].children
|
||||||
for(let k = 0;k<t.length;k++){
|
for (let k = 0; k < t.length; k++) {
|
||||||
let tt = t[k].children;
|
let tt = t[k].children;
|
||||||
for(let z = 0;z<tt.length;z++){
|
for (let z = 0; z < tt.length; z++) {
|
||||||
tt[z].children = null
|
tt[z].children = null
|
||||||
// 给所有三级路由添加字段,显示一级菜单name,方便点击页签时的选中筛选
|
// 给所有三级路由添加字段,显示一级菜单name,方便点击页签时的选中筛选
|
||||||
tt[z].firstRouterName = menuData[i].name
|
tt[z].firstRouterName = menuData[i].name
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (!menuData) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
util.initAllMenuData(constRoutes, menuData);
|
util.initAllMenuData(constRoutes, menuData);
|
||||||
util.initRouterNode(otherRoutes, otherRouter);
|
util.initRouterNode(otherRoutes, otherRouter);
|
||||||
// 添加所有主界面路由
|
// 添加所有主界面路由
|
||||||
|
@ -352,17 +360,8 @@ util.initRouter = function (vm) { // 初始化路由
|
||||||
// 缓存数据 修改加载标识
|
// 缓存数据 修改加载标识
|
||||||
window.localStorage.setItem('menuData', JSON.stringify(menuData));
|
window.localStorage.setItem('menuData', JSON.stringify(menuData));
|
||||||
vm.$store.commit('setAdded', true);
|
vm.$store.commit('setAdded', true);
|
||||||
} else {
|
})
|
||||||
// 读取缓存数据
|
|
||||||
let data = window.localStorage.getItem('menuData');
|
|
||||||
if (!data) {
|
|
||||||
vm.$store.commit('setAdded', false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let menuData = JSON.parse(data);
|
|
||||||
// 添加菜单路由
|
|
||||||
util.initMenuData(vm, menuData);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 添加所有顶部导航栏下的菜单路由
|
// 添加所有顶部导航栏下的菜单路由
|
||||||
|
@ -370,7 +369,7 @@ util.initAllMenuData = function (constRoutes, data) {
|
||||||
|
|
||||||
let allMenuData = [];
|
let allMenuData = [];
|
||||||
data.forEach(e => {
|
data.forEach(e => {
|
||||||
if (e.type == -1) {
|
if (e.level == 0) {
|
||||||
e.children.forEach(item => {
|
e.children.forEach(item => {
|
||||||
allMenuData.push(item);
|
allMenuData.push(item);
|
||||||
})
|
})
|
||||||
|
@ -439,16 +438,15 @@ util.initRouterNode = function (routers, data) { // data为所有子菜单数
|
||||||
|
|
||||||
for (var item of data) {
|
for (var item of data) {
|
||||||
let menu = Object.assign({}, item);
|
let menu = Object.assign({}, item);
|
||||||
menu.component = lazyLoading(menu.component);
|
menu.component = lazyLoading(menu.frontRoute);
|
||||||
|
|
||||||
if (item.children && item.children.length > 0) {
|
if (item.children && item.children.length > 0) {
|
||||||
menu.children = [];
|
menu.children = [];
|
||||||
util.initRouterNode(menu.children, item.children);
|
util.initRouterNode(menu.children, item.children);
|
||||||
}
|
}
|
||||||
let meta = {};
|
let meta = {};
|
||||||
// 给页面添加标题
|
// 给页面添加标题
|
||||||
meta.title = menu.title ? menu.title + " - "+config.title+"商家后台" : null;
|
meta.title = menu.title ? menu.title + " - " + config.title + "商家后台" : null;
|
||||||
meta.firstRouterName = menu.firstRouterName
|
meta.firstRouterName = item.firstRouterName
|
||||||
meta.keepAlive = menu.keepAlive ? true : false
|
meta.keepAlive = menu.keepAlive ? true : false
|
||||||
menu.meta = meta;
|
menu.meta = meta;
|
||||||
|
|
||||||
|
|
|
@ -5,6 +5,7 @@ import "./styles/theme.less";
|
||||||
import "core-js/stable";
|
import "core-js/stable";
|
||||||
import vueQr from "vue-qr";
|
import vueQr from "vue-qr";
|
||||||
|
|
||||||
|
import liliDialog from '@/views/lili-dialog'
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import { router } from "./router/index";
|
import { router } from "./router/index";
|
||||||
import store from "./store";
|
import store from "./store";
|
||||||
|
@ -21,7 +22,6 @@ import { setStore, getStore, removeStore } from "@/libs/storage";
|
||||||
import i18nBox from '@/views/lili-components/i18n-translate'
|
import i18nBox from '@/views/lili-components/i18n-translate'
|
||||||
import util from "@/libs/util";
|
import util from "@/libs/util";
|
||||||
|
|
||||||
|
|
||||||
import VueLazyload from "vue-lazyload";
|
import VueLazyload from "vue-lazyload";
|
||||||
|
|
||||||
import * as filters from "@/utils/filters"; // global filter
|
import * as filters from "@/utils/filters"; // global filter
|
||||||
|
@ -45,7 +45,9 @@ Vue.use(VueLazyload, {
|
||||||
});
|
});
|
||||||
|
|
||||||
Vue.use(ViewUI);
|
Vue.use(ViewUI);
|
||||||
|
Vue.component('liliDialog',liliDialog)
|
||||||
Vue.component('i18nBox',i18nBox)
|
Vue.component('i18nBox',i18nBox)
|
||||||
|
Vue.component('liliDialog',liliDialog)
|
||||||
Vue.component("vue-qr", vueQr); //此处将vue-qr添加为全局组件
|
Vue.component("vue-qr", vueQr); //此处将vue-qr添加为全局组件
|
||||||
|
|
||||||
// 挂载全局使用的方法
|
// 挂载全局使用的方法
|
||||||
|
|
|
@ -102,6 +102,18 @@ export const otherRouter = {
|
||||||
name: "order-detail",
|
name: "order-detail",
|
||||||
component: () => import("@/views/order/order/orderDetail.vue")
|
component: () => import("@/views/order/order/orderDetail.vue")
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/floorList/main",
|
||||||
|
title: "编辑模板",
|
||||||
|
name: "main",
|
||||||
|
component: () => import("@/views/shop/wap/main.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/pcFloorList/main",
|
||||||
|
title: "编辑模板",
|
||||||
|
name: "renovation",
|
||||||
|
component: () => import("@/views/shop/renovation.vue")
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: "order-complaint-detail",
|
path: "order-complaint-detail",
|
||||||
title: "投诉详情",
|
title: "投诉详情",
|
||||||
|
@ -127,7 +139,25 @@ export const otherRouter = {
|
||||||
title: "发货",
|
title: "发货",
|
||||||
name: "export-order-deliver",
|
name: "export-order-deliver",
|
||||||
component: () => import("@/views/order/order/exportOrderDeliver.vue")
|
component: () => import("@/views/order/order/exportOrderDeliver.vue")
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: "order-detail",
|
||||||
|
title: "订单详情",
|
||||||
|
name: "order-detail",
|
||||||
|
component: () => import("@/views/order/order/orderDetail.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/floorList/main",
|
||||||
|
title: "编辑模板",
|
||||||
|
name: "main",
|
||||||
|
component: () => import("@/views/shop/wap/main.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/pcFloorList/main",
|
||||||
|
title: "编辑模板",
|
||||||
|
name: "renovation",
|
||||||
|
component: () => import("@/views/shop/renovation.vue")
|
||||||
|
},
|
||||||
// {
|
// {
|
||||||
// path: "/*",
|
// path: "/*",
|
||||||
// name: "error-404",
|
// name: "error-404",
|
||||||
|
|
|
@ -162,3 +162,60 @@ export function formatDate(date, fmt) {
|
||||||
}
|
}
|
||||||
return fmt;
|
return fmt;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 楼层装修,选择链接处理跳转方式
|
||||||
|
export function formatLinkType (item) {
|
||||||
|
const types = ['goods', 'category', 'shops', 'marketing', 'pages', 'other'] // 所有跳转的分类 依次为 商品、分类、店铺、活动、页面、其他
|
||||||
|
let url = '';
|
||||||
|
switch (item.___type) {
|
||||||
|
case 'goods':
|
||||||
|
url = `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'category':
|
||||||
|
url = `/goodsList?categoryId=${item.allId}`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'shops':
|
||||||
|
url = `/merchant?id=${item.id}`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'marketing': // 暂无数据,需要后续修改
|
||||||
|
url = `/seckill?id=${item.id}`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'pages': // 暂无数据,需要后续修改
|
||||||
|
url = `/article?id=${item.id}`;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'other':
|
||||||
|
switch (item.title) {
|
||||||
|
case '首页':
|
||||||
|
url = '/';
|
||||||
|
break;
|
||||||
|
case '购物车':
|
||||||
|
url = '/cart';
|
||||||
|
break;
|
||||||
|
case '我的订单':
|
||||||
|
url = '/home/MyOrder';
|
||||||
|
break;
|
||||||
|
case '收藏商品':
|
||||||
|
url = '/home/Favorites';
|
||||||
|
break;
|
||||||
|
case '个人中心':
|
||||||
|
url = '/home';
|
||||||
|
break;
|
||||||
|
case '外部链接':
|
||||||
|
url = item.url;
|
||||||
|
break;
|
||||||
|
case '秒杀频道':
|
||||||
|
url = '/seckill';
|
||||||
|
break;
|
||||||
|
case '领券中心':
|
||||||
|
url = '/coupon';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<Card>
|
<Card>
|
||||||
|
|
||||||
<Row @keydown.enter.native="handleSearch">
|
<Row @keydown.enter.native="handleSearch">
|
||||||
<Form
|
<Form
|
||||||
ref="searchForm"
|
ref="searchForm"
|
||||||
|
@ -66,6 +67,7 @@
|
||||||
</Row>
|
</Row>
|
||||||
<Row class="operation padding-row">
|
<Row class="operation padding-row">
|
||||||
<Button @click="addGoods" type="primary">添加商品</Button>
|
<Button @click="addGoods" type="primary">添加商品</Button>
|
||||||
|
<Button @click="openImportGoods" type="primary">导入商品</Button>
|
||||||
<Dropdown @on-click="handleDropdown">
|
<Dropdown @on-click="handleDropdown">
|
||||||
<Button type="default">
|
<Button type="default">
|
||||||
批量操作
|
批量操作
|
||||||
|
@ -189,6 +191,21 @@
|
||||||
<Button type="primary" @click="saveShipTemplate">更新</Button>
|
<Button type="primary" @click="saveShipTemplate">更新</Button>
|
||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
<Modal title="导入商品信息" v-model="importModal" :mask-closable="false">
|
||||||
|
<div style="text-align: center">
|
||||||
|
<Upload :before-upload="handleUpload" name="files" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
|
||||||
|
multiple type="drag" :action="action" :headers="accessToken">
|
||||||
|
<div style="padding: 50px 0">
|
||||||
|
<Icon type="ios-cloud-upload" size="102" style="color: #3399ff"></Icon>
|
||||||
|
<h2>选择或拖拽文件上传</h2>
|
||||||
|
</div>
|
||||||
|
</Upload>
|
||||||
|
<Button @click="exportGoods" type="text" style="color: red">下载导入模板</Button>
|
||||||
|
</div>
|
||||||
|
<div slot="footer">
|
||||||
|
<Button type="text" @click="importModal = false">确定</Button>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -201,13 +218,20 @@ import {
|
||||||
lowGoods,
|
lowGoods,
|
||||||
deleteGoods,
|
deleteGoods,
|
||||||
batchShipTemplate,
|
batchShipTemplate,
|
||||||
|
downLoadGoods
|
||||||
} from "@/api/goods";
|
} from "@/api/goods";
|
||||||
|
import { baseUrl } from "@/libs/axios.js";
|
||||||
import * as API_Shop from "@/api/shops";
|
import * as API_Shop from "@/api/shops";
|
||||||
|
import Cookies from "js-cookie";
|
||||||
|
import {uploadGoodsExcel} from "../../../api/goods";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "goods",
|
name: "goods",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
accessToken: {}, // 验证token
|
||||||
|
importModal: false,
|
||||||
|
action: baseUrl + "/goods/import/import", // 上传接口
|
||||||
id: "", //要操作的id
|
id: "", //要操作的id
|
||||||
loading: true, // 表单加载状态
|
loading: true, // 表单加载状态
|
||||||
shipTemplateForm: {}, // 物流模板
|
shipTemplateForm: {}, // 物流模板
|
||||||
|
@ -510,6 +534,59 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// 上传数据
|
||||||
|
handleUpload(file) {
|
||||||
|
this.file = file;
|
||||||
|
this.upload();
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 上传文件
|
||||||
|
*/
|
||||||
|
async upload() {
|
||||||
|
let fd = new FormData();
|
||||||
|
fd.append("files", this.file);
|
||||||
|
let res = await uploadGoodsExcel(fd);
|
||||||
|
if (res.success) {
|
||||||
|
this.stepList.map((item) => {
|
||||||
|
item.checked = false;
|
||||||
|
this.$Message.success("导入成功")
|
||||||
|
this.importModal = false
|
||||||
|
});
|
||||||
|
|
||||||
|
this.stepList[2].checked = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
openImportGoods(){
|
||||||
|
this.importModal = true
|
||||||
|
},
|
||||||
|
async exportGoods(){
|
||||||
|
downLoadGoods()
|
||||||
|
.then((res) => {
|
||||||
|
console.log(res)
|
||||||
|
const blob = new Blob([res], {
|
||||||
|
type: "application/vnd.ms-excel;charset=utf-8",
|
||||||
|
});
|
||||||
|
//对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
|
||||||
|
//IE10以上支持blob但是依然不支持download
|
||||||
|
if ("download" in document.createElement("a")) {
|
||||||
|
//支持a标签download的浏览器
|
||||||
|
const link = document.createElement("a"); //创建a标签
|
||||||
|
link.download = "商品批量导入模板.xls"; //a标签添加属性
|
||||||
|
link.style.display = "none";
|
||||||
|
link.href = URL.createObjectURL(blob);
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click(); //执行下载
|
||||||
|
URL.revokeObjectURL(link.href); //释放url
|
||||||
|
document.body.removeChild(link); //释放标签
|
||||||
|
} else {
|
||||||
|
navigator.msSaveBlob(blob, fileName);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
},
|
||||||
// 更新库存
|
// 更新库存
|
||||||
updateStock() {
|
updateStock() {
|
||||||
let updateStockList = this.stockList.map((i) => {
|
let updateStockList = this.stockList.map((i) => {
|
||||||
|
@ -751,9 +828,7 @@ export default {
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init();
|
this.init();
|
||||||
},
|
this.accessToken.accessToken = this.getStore("accessToken");
|
||||||
mounted() {
|
|
||||||
this.init();
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
<Button type="primary" @click="goodsData=[]; getQueryGoodsList();" icon="ios-search">搜索</Button>
|
<Button type="primary" @click="goodsData=[]; getQueryGoodsList();" icon="ios-search">搜索</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="positon:retavle;">
|
<div >
|
||||||
<Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="[3,3]">
|
<Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="[3,3]">
|
||||||
|
|
||||||
<div class="wap-content-item" :class="{ active: item.selected }" @click="checkedGoods(item, index)" v-for="(item, index) in goodsData" :key="index">
|
<div class="wap-content-item" :class="{ active: item.selected }" @click="checkedGoods(item, index)" v-for="(item, index) in goodsData" :key="index">
|
||||||
|
|
|
@ -1,85 +1,55 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="wap-list">
|
|
||||||
<div
|
|
||||||
class="wap-item"
|
|
||||||
@click="clickTag(item, i)"
|
|
||||||
v-for="(item, i) in wap"
|
|
||||||
:key="i"
|
|
||||||
:class="{ active: selected == i }"
|
|
||||||
>
|
|
||||||
{{ item.title }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wap-content"></div>
|
|
||||||
|
|
||||||
<!-- 弹出选择商品的modal -->
|
<Tabs :value="wap[0].title" class="tabs">
|
||||||
<Modal
|
|
||||||
title="选择"
|
<TabPane :label="item.title" :name="item.title" @click="clickTag(item, i)" v-for="(item, i) in wap" :key="i">
|
||||||
:styles="{ top: '120px' }"
|
<component ref="lili-component" :is="templateWay[item.name]" @selected="
|
||||||
width="750"
|
|
||||||
@on-cancel="clickClose"
|
|
||||||
@on-ok="clickClose"
|
|
||||||
v-model="flag"
|
|
||||||
:mask-closable="false"
|
|
||||||
scrollable
|
|
||||||
>
|
|
||||||
<goodsDialog
|
|
||||||
@selected="
|
|
||||||
(val) => {
|
(val) => {
|
||||||
goodsData = val;
|
changed = val;
|
||||||
}
|
}
|
||||||
"
|
" />
|
||||||
ref="goodsDialog"
|
</TabPane>
|
||||||
/>
|
</Tabs>
|
||||||
</Modal>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import wap from "./wap.js";
|
import wap from "./wap.js";
|
||||||
import goodsDialog from "./goods-dialog";
|
import goodsDialog from "./goods-dialog";
|
||||||
|
import templateWay from "./template/index";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
goodsDialog,
|
goodsDialog,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
goodsData: "", // 商品列表
|
templateWay, // 模板数据
|
||||||
flag: false, // 控制商品模块显隐
|
changed: "", // 变更模板
|
||||||
selected: 0, // 已选模块
|
selected: 0, // 已选数据
|
||||||
selectedLink: "", //选中的链接
|
selectedLink: "", //选中的链接
|
||||||
wap, // tab标签栏数据
|
wap // tab标签
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
selectedLink(val) {
|
changed: {
|
||||||
this.$emit("selectedLink", val);
|
handler(val) {
|
||||||
|
this.$emit("selectedLink", val[0]); //因为是单选,所以直接返回第一个
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
console.log( this.$refs["lili-component"])
|
||||||
|
this.$refs["lili-component"][0].type = "single"; //商品页面设置成为单选
|
||||||
|
});
|
||||||
|
|
||||||
this.wap.forEach((item) => {
|
this.wap.forEach((item) => {
|
||||||
item.selected = false;
|
item.selected = false;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {},
|
||||||
clickClose() {
|
|
||||||
this.flag = false;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 点击链接
|
|
||||||
clickTag(val, i) {
|
|
||||||
this.selected = i;
|
|
||||||
if (!val.openGoods) {
|
|
||||||
this.selectedLink = val;
|
|
||||||
}
|
|
||||||
// 打开选择商品
|
|
||||||
else {
|
|
||||||
this.$refs.goodsDialog.selectedWay = [];
|
|
||||||
this.$refs.goodsDialog.type = "single";
|
|
||||||
this.flag = true;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@ -91,6 +61,9 @@ export default {
|
||||||
.wap-flex {
|
.wap-flex {
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
}
|
}
|
||||||
|
.tabs {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/deep/ .ivu-modal {
|
/deep/ .ivu-modal {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
@ -0,0 +1,121 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrapper">
|
||||||
|
<!-- 一级分类 -->
|
||||||
|
<div class="list">
|
||||||
|
<div class="list-item" :class="{active:parentIndex === cateIndex}" @click="handleClickChild(cate,cateIndex)" v-for="(cate,cateIndex) in categoryList" :key="cateIndex">
|
||||||
|
{{cate.name}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 二级分类 -->
|
||||||
|
<div class="list">
|
||||||
|
<div class="list-item" :class="{active:secondIndex === secondI}" @click="handleClickSecondChild(second,secondI)" v-if="secondLevel.length != 0" v-for="(second,secondI) in secondLevel"
|
||||||
|
:key="secondI">
|
||||||
|
{{second.name}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--三级分类 -->
|
||||||
|
<div class="list">
|
||||||
|
<div class="list-item" :class="{active:thirdIndex === thirdI}" @click="handleClickthirdChild(third,thirdI)" v-if="thirdLevel.length != 0" v-for="(third,thirdI) in thirdLevel" :key="thirdI">
|
||||||
|
{{third.name}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
parentIndex: '', // 分类父级下标
|
||||||
|
secondIndex: '', // 分类二级下标
|
||||||
|
thirdIndex: '', // 分类三级下标
|
||||||
|
categoryList: [], // 分类列表一级数据
|
||||||
|
secondLevel: [], // 分类列表二级数据
|
||||||
|
thirdLevel: [], // 分类列表三级数据
|
||||||
|
selectedData: "", // 已选分类数据
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 点击一级
|
||||||
|
handleClickChild(item, index) {
|
||||||
|
this.parentIndex = index;
|
||||||
|
this.secondLevel = item.children;
|
||||||
|
item.___type = "category";
|
||||||
|
item.allId = item.id;
|
||||||
|
|
||||||
|
this.secondIndex = '';
|
||||||
|
this.thirdIndex = '';
|
||||||
|
this.thirdLevel = []
|
||||||
|
this.$emit("selected", [item]);
|
||||||
|
// 点击第一级的时候默认显示第二级第一个
|
||||||
|
// this.handleClickSecondChild(item.children, 0);
|
||||||
|
},
|
||||||
|
// 点击二级
|
||||||
|
handleClickSecondChild(second, index) {
|
||||||
|
second.___type = "category";
|
||||||
|
second.allId = `${second.parentId},${second.id}`
|
||||||
|
|
||||||
|
this.secondIndex = index;
|
||||||
|
this.thirdLevel = second.children;
|
||||||
|
this.thirdIndex = '';
|
||||||
|
this.$emit("selected", [second]);
|
||||||
|
// this.handleClickthirdChild(second.children[0], 0);
|
||||||
|
},
|
||||||
|
// 点击三级
|
||||||
|
handleClickthirdChild(item, index) {
|
||||||
|
item.___type = "category";
|
||||||
|
item.allId = `${this.categoryList[this.parentIndex].id},${item.parentId},${item.id}`
|
||||||
|
this.$emit("selected", [item]);
|
||||||
|
this.thirdIndex = index;
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
|
||||||
|
|
||||||
|
let category = JSON.parse(localStorage.getItem('category'))
|
||||||
|
if (category) {
|
||||||
|
category.forEach((item) => {
|
||||||
|
item.___type = "category";
|
||||||
|
});
|
||||||
|
this.categoryList = category;
|
||||||
|
// this.handleClickChild(category[0], 0);
|
||||||
|
} else {
|
||||||
|
setTimeout(() => {
|
||||||
|
category = JSON.parse(localStorage.getItem('category'))
|
||||||
|
category.forEach((item) => {
|
||||||
|
item.___type = "category";
|
||||||
|
});
|
||||||
|
this.categoryList = category;
|
||||||
|
// this.handleClickChild(category[0], 0);
|
||||||
|
},3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.list {
|
||||||
|
width: 30%;
|
||||||
|
margin: 0 1.5%;
|
||||||
|
height: 400px;
|
||||||
|
overflow: auto;
|
||||||
|
> .list-item {
|
||||||
|
padding: 10px;
|
||||||
|
transition: 0.35s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.list-item:hover {
|
||||||
|
background: #ededed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: #ededed;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,15 @@
|
||||||
|
|
||||||
|
import category from './category.vue'
|
||||||
|
import shops from './shops.vue'
|
||||||
|
|
||||||
|
import pages from './pages.vue'
|
||||||
|
import goods from '../goods-dialog.vue'
|
||||||
|
import other from './other.vue'
|
||||||
|
export default {
|
||||||
|
// pages,
|
||||||
|
|
||||||
|
// shops,
|
||||||
|
category,
|
||||||
|
goods,
|
||||||
|
other,
|
||||||
|
}
|
|
@ -0,0 +1,141 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Row :gutter="30">
|
||||||
|
<Col span="6" v-for="(item,index) in linkList" :key="index" v-if="(item.title !== '拼团频道' && item.title !== '签到') || $route.name !== 'renovation'">
|
||||||
|
<div class="card" :class="{'active':selectedIndex == index}" @click="handleLink(item,index)">
|
||||||
|
<Icon size="24" :type="item.icon" />
|
||||||
|
<p>{{item.title}}</p>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<!-- 外部链接,只有pc端跳转 -->
|
||||||
|
<Col span="6" v-if="$route.name === 'renovation'">
|
||||||
|
<div class="card" :class="{'active':selectedIndex == linkList.length}" @click="handleLink(linkItem,linkList.length)">
|
||||||
|
<Poptip v-model="linkVisible">
|
||||||
|
<Icon size="24" :type="linkItem.icon" />
|
||||||
|
<p>{{linkItem.title}}</p>
|
||||||
|
<div slot="title">链接地址</div>
|
||||||
|
<div slot="content">
|
||||||
|
<Input type="text" @keyup="handleLink(linkItem,linkList.length)" v-model="linkItem.url" placeholder="https://"></Input>
|
||||||
|
</div>
|
||||||
|
</Poptip>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
linkList: [ // 链接列表
|
||||||
|
{
|
||||||
|
title: "首页",
|
||||||
|
icon: "md-home",
|
||||||
|
___type: "home",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "购物车",
|
||||||
|
icon: "md-cart",
|
||||||
|
___type: "cart",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "收藏商品",
|
||||||
|
icon: "md-heart",
|
||||||
|
___type: "collection",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "我的订单",
|
||||||
|
icon: "md-document",
|
||||||
|
___type: "order",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "个人中心",
|
||||||
|
icon: "md-person",
|
||||||
|
___type: "user",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "拼团频道",
|
||||||
|
icon: "md-flame",
|
||||||
|
___type: "group",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "秒杀频道",
|
||||||
|
icon: "md-flame",
|
||||||
|
___type: "seckill",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "领券中心",
|
||||||
|
icon: "md-pricetag",
|
||||||
|
___type: "coupon",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "签到",
|
||||||
|
icon: "md-happy",
|
||||||
|
___type: "sign",
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// title: "小程序直播",
|
||||||
|
// icon: "ios-videocam",
|
||||||
|
// ___type: "live",
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
title: "砍价",
|
||||||
|
icon: "md-share-alt",
|
||||||
|
___type: "kanjia",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "积分商城",
|
||||||
|
icon: "ios-basket",
|
||||||
|
___type: "point",
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
linkItem: {
|
||||||
|
title: "外部链接",
|
||||||
|
icon: "ios-link",
|
||||||
|
___type: "link",
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
linkVisible: false, // 是否显示外部链接
|
||||||
|
selectedIndex: 9999999, // 已选index
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleLink(val, index) {
|
||||||
|
val = {...val,___type:'other'}
|
||||||
|
this.selectedIndex = index;
|
||||||
|
if (index === this.linkList.length) {
|
||||||
|
this.linkVisible = true
|
||||||
|
} else {
|
||||||
|
this.linkVisible = false
|
||||||
|
}
|
||||||
|
this.$emit("selected",[val])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "../style.scss";
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px 0;
|
||||||
|
margin: 10px 0;
|
||||||
|
text-align: center;
|
||||||
|
transition: 0.35s;
|
||||||
|
cursor: pointer;
|
||||||
|
/deep/ p {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
border: 1px solid #ededed;
|
||||||
|
}
|
||||||
|
.card:hover{
|
||||||
|
background: #ededed;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: #ededed;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,80 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrapper">
|
||||||
|
<!-- TODO 目前数据少暂且不用 -->
|
||||||
|
<!-- <div class="list">
|
||||||
|
<div class="list-item active">
|
||||||
|
文章页
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="content">
|
||||||
|
<!-- <Article @callbacked="callbackArticle" :selected="true" /> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// import Article from "@/views/page/article-manage/articleList.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
// Article,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
callbackArticle(val) {
|
||||||
|
val.___type = "pages";
|
||||||
|
|
||||||
|
val.___path = "/pages/passport/article";
|
||||||
|
|
||||||
|
this.$emit("selected", [val]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/deep/ .ivu-card-body {
|
||||||
|
height: 414px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.ivu-table-wrapper ivu-table-wrapper-with-border {
|
||||||
|
height: 300px !important;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
margin: 0 1.5%;
|
||||||
|
height: 400px;
|
||||||
|
overflow: auto;
|
||||||
|
> .list-item {
|
||||||
|
padding: 10px;
|
||||||
|
transition: 0.35s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.list-item:hover {
|
||||||
|
background: #ededed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
flex: 2;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 8;
|
||||||
|
height: 431px;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: #ededed;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
height: 416px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
/deep/ .ivu-table {
|
||||||
|
height: 300px !important;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
/deep/ .ivu-card-body {
|
||||||
|
padding: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,110 @@
|
||||||
|
<template>
|
||||||
|
<div class="shop">
|
||||||
|
<div class="wap-content">
|
||||||
|
<div class="query-wrapper">
|
||||||
|
<div class="query-item">
|
||||||
|
<div>店铺名称</div>
|
||||||
|
<Input placeholder="请输入店铺名称" @on-clear="shopsData=[]; params.storeName=''; params.pageNumber =1; init()" @on-enter="()=>{shopsData=[]; params.pageNumber =1; init();}" icon="ios-search" clearable style="width: 150px"
|
||||||
|
v-model="params.storeName" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="query-item">
|
||||||
|
<Button type="primary" @click="shopsData=[];params.pageNumber =1; init();" icon="ios-search">搜索</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="23">
|
||||||
|
<div class="wap-content-item" @click="clickShop(item,index)" :class="{ active:selected == index }" v-for="(item, index) in shopsData" :key="index">
|
||||||
|
<div>
|
||||||
|
<img class="shop-logo" :src="item.storeLogo" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="wap-content-desc">
|
||||||
|
<div class="wap-content-desc-title">{{ item.storeName }}</div>
|
||||||
|
|
||||||
|
<div class="self-operated" :class="{'theme_color':item.selfOperated }">{{ item.selfOperated ? '自营' : '非自营' }}</div>
|
||||||
|
<div class="wap-sku" :class="{'theme_color':(item.storeDisable === 'OPEN' ? true : false) }">{{ item.storeDisable === 'OPEN' ? '开启中' : '未开启' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Spin size="large" fix v-if="loading"></Spin>
|
||||||
|
</Scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { getShopListData } from "@/api/shops.js";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: false, // 加载状态
|
||||||
|
total: "", // 总数
|
||||||
|
params: { // 请求参数
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
storeDisable: "OPEN",
|
||||||
|
storeName: "",
|
||||||
|
},
|
||||||
|
shopsData: [], // 店铺数据
|
||||||
|
selected: 9999999999, //设置一个不可能选中的index
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleReachBottom() {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (this.params.pageNumber * this.params.pageSize <= this.total) {
|
||||||
|
this.params.pageNumber++;
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
}, 1500);
|
||||||
|
},
|
||||||
|
init() {
|
||||||
|
this.loading = true;
|
||||||
|
getShopListData(this.params).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
/**
|
||||||
|
* 解决数据请求中,滚动栏会一直上下跳动
|
||||||
|
*/
|
||||||
|
this.total = res.result.total;
|
||||||
|
|
||||||
|
this.shopsData.push(...res.result.records);
|
||||||
|
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
clickShop(val, i) {
|
||||||
|
this.selected = i;
|
||||||
|
val = { ...val, ___type: "shops" };
|
||||||
|
this.$emit("selected", [val]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "../style.scss";
|
||||||
|
.shop {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.self-operated {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.wap-content-list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.shop-logo {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.wap-content-item {
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: url("../../../assets/selected.png") no-repeat;
|
||||||
|
background-position: right;
|
||||||
|
background-size: 10%;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,25 +1,40 @@
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
title:"商品",
|
title: "商品",
|
||||||
url:"0",
|
url: "0",
|
||||||
openGoods:true
|
openGoods: true,
|
||||||
|
name: "goods"
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
title:"分类",
|
// title: "分类",
|
||||||
url:"1"
|
// url: "1",
|
||||||
},
|
// name: "category"
|
||||||
{
|
// },
|
||||||
title:"店铺",
|
|
||||||
url:"2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title:"活动",
|
|
||||||
url:"3",
|
|
||||||
|
|
||||||
},
|
// {
|
||||||
|
// title: "活动",
|
||||||
|
// url: "3",
|
||||||
|
// name: "marketing"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "页面",
|
||||||
|
// url: "3",
|
||||||
|
// name: "pages"
|
||||||
|
// },
|
||||||
|
|
||||||
|
// {
|
||||||
|
// title: "活动",
|
||||||
|
// url: "3",
|
||||||
|
// name: "marketing"
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// title: "页面",
|
||||||
|
// url: "3",
|
||||||
|
// name: "pages"
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
title:"其他",
|
title: "其他",
|
||||||
url:"4"
|
url: "3",
|
||||||
|
name: "other"
|
||||||
}
|
}
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
|
@ -3,37 +3,65 @@
|
||||||
<Row type="flex" @keydown.enter.native="submitLogin">
|
<Row type="flex" @keydown.enter.native="submitLogin">
|
||||||
<Col style="width: 368px">
|
<Col style="width: 368px">
|
||||||
<Header />
|
<Header />
|
||||||
<Row style="flex-direction: column;">
|
<Row style="flex-direction: column">
|
||||||
<Form ref="usernameLoginForm" :model="form" :rules="rules" class="form">
|
<Form
|
||||||
|
ref="usernameLoginForm"
|
||||||
|
:model="form"
|
||||||
|
:rules="rules"
|
||||||
|
class="form"
|
||||||
|
>
|
||||||
<FormItem prop="username">
|
<FormItem prop="username">
|
||||||
<Input v-model="form.username" prefix="ios-contact" size="large" clearable placeholder="请输入用户名"
|
<Input
|
||||||
autocomplete="off" />
|
v-model="form.username"
|
||||||
|
prefix="ios-contact"
|
||||||
|
size="large"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem prop="password">
|
<FormItem prop="password">
|
||||||
<Input type="password" v-model="form.password" prefix="ios-lock" size="large" password placeholder="请输入密码"
|
<Input
|
||||||
autocomplete="off" />
|
type="password"
|
||||||
|
v-model="form.password"
|
||||||
|
prefix="ios-lock"
|
||||||
|
size="large"
|
||||||
|
password
|
||||||
|
placeholder="请输入密码"
|
||||||
|
autocomplete="off"
|
||||||
|
/>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
||||||
<Row>
|
<Row>
|
||||||
<div class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
|
<div
|
||||||
|
class="login-btn"
|
||||||
|
type="primary"
|
||||||
|
size="large"
|
||||||
|
:loading="loading"
|
||||||
|
@click="submitLogin"
|
||||||
|
long
|
||||||
|
>
|
||||||
<span v-if="!loading">登录</span>
|
<span v-if="!loading">登录</span>
|
||||||
<span v-else>登录中</span>
|
<span v-else>登录中</span>
|
||||||
</div>
|
</div>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
<Footer />
|
<Footer />
|
||||||
<!-- 拼图验证码 -->
|
<!-- 拼图验证码 -->
|
||||||
<verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
|
<verify
|
||||||
|
ref="verify"
|
||||||
|
class="verify-con"
|
||||||
|
verifyType="LOGIN"
|
||||||
|
@change="verifyChange"
|
||||||
|
></verify>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { getCurrentPermissionList } from "@/api/index";
|
||||||
import { login, userMsg } from "@/api/index";
|
import { login, userMsg } from "@/api/index";
|
||||||
import Cookies from "js-cookie";
|
import Cookies from "js-cookie";
|
||||||
import Header from "@/views/main-components/header";
|
import Header from "@/views/main-components/header";
|
||||||
|
@ -76,6 +104,10 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
window.localStorage.setItem("menuData", "");
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
afterLogin(res) {
|
afterLogin(res) {
|
||||||
let accessToken = res.result.accessToken;
|
let accessToken = res.result.accessToken;
|
||||||
|
@ -85,6 +117,10 @@ export default {
|
||||||
// 获取用户信息
|
// 获取用户信息
|
||||||
userMsg().then((res) => {
|
userMsg().then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
|
// location.reload();
|
||||||
|
// this.$router.go(0);
|
||||||
|
|
||||||
|
console.log("Huoqu ");
|
||||||
this.setStore("saveLogin", this.saveLogin);
|
this.setStore("saveLogin", this.saveLogin);
|
||||||
if (this.saveLogin) {
|
if (this.saveLogin) {
|
||||||
// 保存7天
|
// 保存7天
|
||||||
|
@ -94,9 +130,10 @@ export default {
|
||||||
} else {
|
} else {
|
||||||
Cookies.set("userInfoSeller", JSON.stringify(res.result));
|
Cookies.set("userInfoSeller", JSON.stringify(res.result));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
util.initRouter(this);
|
||||||
this.$store.commit("setAvatarPath", res.result.storeLogo);
|
this.$store.commit("setAvatarPath", res.result.storeLogo);
|
||||||
// 加载菜单
|
// 加载菜单
|
||||||
util.initRouter(this);
|
|
||||||
this.$router.push({
|
this.$router.push({
|
||||||
name: "home_index",
|
name: "home_index",
|
||||||
});
|
});
|
||||||
|
@ -120,8 +157,8 @@ export default {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
|
|
||||||
let fd = new FormData();
|
let fd = new FormData();
|
||||||
fd.append('username',this.form.username)
|
fd.append("username", this.form.username);
|
||||||
fd.append('password',this.md5(this.form.password))
|
fd.append("password", this.md5(this.form.password));
|
||||||
login(fd)
|
login(fd)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
|
@ -138,7 +175,6 @@ export default {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.login {
|
.login {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: url("../assets/background.png") no-repeat;
|
background: url("../assets/background.png") no-repeat;
|
||||||
|
@ -148,8 +184,6 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
|
||||||
.verify-con {
|
.verify-con {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 126px;
|
top: 126px;
|
||||||
|
@ -175,9 +209,8 @@ export default {
|
||||||
transition: 0.35s;
|
transition: 0.35s;
|
||||||
}
|
}
|
||||||
.login-btn:hover {
|
.login-btn:hover {
|
||||||
opacity: .9;
|
opacity: 0.9;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -0,0 +1,72 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Cascader
|
||||||
|
v-model="selectDep"
|
||||||
|
:data="department"
|
||||||
|
@on-change="handleChangeDep"
|
||||||
|
change-on-select
|
||||||
|
filterable
|
||||||
|
clearable
|
||||||
|
placeholder="请选择"
|
||||||
|
></Cascader>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { initDepartment } from "@/api/index";
|
||||||
|
export default {
|
||||||
|
name: "departmentChoose",
|
||||||
|
props: {
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectDep: [], // 已选数据
|
||||||
|
department: [] // 列表
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取部门数据
|
||||||
|
initDepartmentData() {
|
||||||
|
initDepartment().then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
const arr = res.result;
|
||||||
|
this.filterData(arr)
|
||||||
|
this.department = arr
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleChangeDep(value, selectedData) {
|
||||||
|
let departmentId = "";
|
||||||
|
// 获取最后一个值
|
||||||
|
if (value && value.length > 0) {
|
||||||
|
departmentId = value[value.length - 1];
|
||||||
|
}
|
||||||
|
this.$emit("on-change", departmentId);
|
||||||
|
},
|
||||||
|
// 清空已选列表
|
||||||
|
clearSelect() {
|
||||||
|
this.selectDep = [];
|
||||||
|
},
|
||||||
|
// 处理部门数据
|
||||||
|
filterData (data) {
|
||||||
|
data.forEach(e => {
|
||||||
|
e.value = e.id;
|
||||||
|
e.label = e.title;
|
||||||
|
if (e.children) {
|
||||||
|
this.filterData(e.children)
|
||||||
|
} else {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initDepartmentData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
</style>
|
||||||
|
|
|
@ -0,0 +1,159 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="display:flex;">
|
||||||
|
<Input
|
||||||
|
v-model="departmentTitle"
|
||||||
|
readonly
|
||||||
|
style="margin-right:10px;"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:clearable="clearable"
|
||||||
|
@on-clear="clearSelect"
|
||||||
|
/>
|
||||||
|
<Poptip transfer trigger="click" placement="right" title="选择部门" width="250">
|
||||||
|
<Button icon="md-list">选择部门</Button>
|
||||||
|
<div slot="content">
|
||||||
|
<Input
|
||||||
|
v-model="searchKey"
|
||||||
|
suffix="ios-search"
|
||||||
|
@on-change="searchDep"
|
||||||
|
placeholder="输入部门名搜索"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
<div class="dep-tree-bar">
|
||||||
|
<Tree
|
||||||
|
:data="dataDep"
|
||||||
|
@on-select-change="selectTree"
|
||||||
|
></Tree>
|
||||||
|
<Spin size="large" fix v-if="depLoading"></Spin>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Poptip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {initDepartment, searchDepartment} from "@/api/index";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "departmentTreeChoose",
|
||||||
|
props: {
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
clearable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: "点击选择部门"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
depLoading: false, // 加载状态
|
||||||
|
departmentTitle: "", // modal标题
|
||||||
|
searchKey: "", // 搜索关键词
|
||||||
|
dataDep: [], // 部门列表
|
||||||
|
selectDep: [], // 已选部门
|
||||||
|
departmentId: [] // 部门id
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取部门数据
|
||||||
|
initDepartmentData() {
|
||||||
|
initDepartment().then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.dataDep = res.result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
searchDep() {
|
||||||
|
// 搜索部门
|
||||||
|
if (this.searchKey) {
|
||||||
|
this.depLoading = true;
|
||||||
|
searchDepartment({title: this.searchKey}).then(res => {
|
||||||
|
this.depLoading = false;
|
||||||
|
if (res.success) {
|
||||||
|
res.result.forEach(function (e) {
|
||||||
|
if (e.status == -1) {
|
||||||
|
e.title = "[已禁用] " + e.title;
|
||||||
|
e.disabled = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.dataDep = res.result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.initDepartmentData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择回调
|
||||||
|
selectTree(v) {
|
||||||
|
if (v.length === 0) {
|
||||||
|
this.$emit("on-change", null);
|
||||||
|
this.departmentId = "";
|
||||||
|
this.departmentTitle = "";
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.departmentId = v[0].id;
|
||||||
|
this.departmentTitle = v[0].title;
|
||||||
|
let department = {
|
||||||
|
departmentId: this.departmentId,
|
||||||
|
departmentTitle: this.departmentTitle
|
||||||
|
}
|
||||||
|
this.$emit("on-change", department);
|
||||||
|
},
|
||||||
|
// 清除选中方法
|
||||||
|
clearSelect() {
|
||||||
|
this.departmentId = [];
|
||||||
|
this.departmentTitle = "";
|
||||||
|
this.initDepartmentData();
|
||||||
|
if (this.multiple) {
|
||||||
|
this.$emit("on-change", []);
|
||||||
|
} else {
|
||||||
|
this.$emit("on-change", "");
|
||||||
|
}
|
||||||
|
this.$emit("on-clear");
|
||||||
|
},
|
||||||
|
// 设置数据 回显用
|
||||||
|
setData(ids, title) {
|
||||||
|
this.departmentTitle = title;
|
||||||
|
if (this.multiple) {
|
||||||
|
this.departmentId = ids;
|
||||||
|
} else {
|
||||||
|
this.departmentId = [];
|
||||||
|
this.departmentId.push(ids);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initDepartmentData();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dep-tree-bar {
|
||||||
|
position: relative;
|
||||||
|
min-height: 80px;
|
||||||
|
max-height: 500px;
|
||||||
|
overflow: auto;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dep-tree-bar::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dep-tree-bar::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 4px;
|
||||||
|
-webkit-box-shadow: inset 0 0 2px #d1d1d1;
|
||||||
|
background: #e4e4e4;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
|
@ -263,7 +263,6 @@
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.data = res.result.records;
|
this.data = res.result.records;
|
||||||
|
|
||||||
this.total = res.result.total;
|
this.total = res.result.total;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -28,6 +28,7 @@
|
||||||
<Button v-if="allowOperation.ship" @click="orderDeliver" type="primary"
|
<Button v-if="allowOperation.ship" @click="orderDeliver" type="primary"
|
||||||
>发货</Button
|
>发货</Button
|
||||||
>
|
>
|
||||||
|
<Button @click="Toprint" type="primary" ghost v-if="allowOperation.ship">打印电子面单</Button>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
@ -440,13 +441,31 @@
|
||||||
<span>订单发货</span>
|
<span>订单发货</span>
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<div>
|
||||||
|
<Form :model="faceSheetForm" ref="faceSheetForm" v-if="facesheetFlag" :rules="faceSheetFormValidate">
|
||||||
|
<FormItem label="物流公司" prop="logisticsId" style="position: relative" :label-width="90">
|
||||||
|
<Select
|
||||||
|
v-model="faceSheetForm.logisticsId"
|
||||||
|
placeholder="请选择"
|
||||||
|
style="width: 250px"
|
||||||
|
>
|
||||||
|
<Option
|
||||||
|
v-for="(item, i) in checkedLogistics"
|
||||||
|
:key="i"
|
||||||
|
:value="item.logisticsId"
|
||||||
|
>{{ item.name }}
|
||||||
|
</Option>
|
||||||
|
</Select>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
<Form
|
<Form
|
||||||
|
v-else
|
||||||
ref="orderDeliveryForm"
|
ref="orderDeliveryForm"
|
||||||
:model="orderDeliveryForm"
|
:model="orderDeliveryForm"
|
||||||
:label-width="90"
|
:label-width="90"
|
||||||
:rules="orderDeliverFormValidate"
|
:rules="orderDeliverFormValidate"
|
||||||
style="position: relative"
|
style="position: relative"
|
||||||
>
|
>
|
||||||
|
|
||||||
<FormItem label="物流公司" prop="logisticsId">
|
<FormItem label="物流公司" prop="logisticsId">
|
||||||
<Select
|
<Select
|
||||||
v-model="orderDeliveryForm.logisticsId"
|
v-model="orderDeliveryForm.logisticsId"
|
||||||
|
@ -456,12 +475,13 @@
|
||||||
<Option
|
<Option
|
||||||
v-for="(item, i) in checkedLogistics"
|
v-for="(item, i) in checkedLogistics"
|
||||||
:key="i"
|
:key="i"
|
||||||
:value="item.id"
|
:value="item.logisticsId"
|
||||||
>{{ item.name }}
|
>{{ item.name }}
|
||||||
</Option>
|
</Option>
|
||||||
</Select>
|
</Select>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
<FormItem label="物流单号" prop="logisticsNo">
|
<!-- v-if="showOrder" -->
|
||||||
|
<FormItem label="物流单号" prop="logisticsNo" >
|
||||||
<Input
|
<Input
|
||||||
v-model="orderDeliveryForm.logisticsNo"
|
v-model="orderDeliveryForm.logisticsNo"
|
||||||
style="width: 250px"
|
style="width: 250px"
|
||||||
|
@ -535,6 +555,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as API_Order from "@/api/order";
|
import * as API_Order from "@/api/order";
|
||||||
|
import * as API_Logistics from "@/api/logistics";
|
||||||
import liliMap from "@/views/my-components/map/index";
|
import liliMap from "@/views/my-components/map/index";
|
||||||
import * as RegExp from "@/libs/RegExp.js";
|
import * as RegExp from "@/libs/RegExp.js";
|
||||||
import region from "@/views/lili-components/region";
|
import region from "@/views/lili-components/region";
|
||||||
|
@ -557,6 +578,16 @@ export default {
|
||||||
region: [], //地区
|
region: [], //地区
|
||||||
regionId: [], //地区id
|
regionId: [], //地区id
|
||||||
showRegion: false,
|
showRegion: false,
|
||||||
|
someJSONdata: '',
|
||||||
|
faceSheetForm: {
|
||||||
|
logisticsId: '',
|
||||||
|
},
|
||||||
|
faceSheetFormValidate: {
|
||||||
|
logisticsId: [
|
||||||
|
{ required: true, message: "请选择物流公司"},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
facesheetFlag: false, //电子面单标识
|
||||||
orderLogModal: false, //弹出调整价格框
|
orderLogModal: false, //弹出调整价格框
|
||||||
logisticsModal: false, //弹出查询物流框
|
logisticsModal: false, //弹出查询物流框
|
||||||
orderDeliverModal: false, //订单发货弹出框
|
orderDeliverModal: false, //订单发货弹出框
|
||||||
|
@ -786,6 +817,15 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
Toprint(){
|
||||||
|
this.facesheetFlag = true;
|
||||||
|
API_Logistics.getCheckedOn().then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.checkedLogistics = res.result;
|
||||||
|
this.orderDeliverModal = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
// 修改订单金额
|
// 修改订单金额
|
||||||
modifyPrice() {
|
modifyPrice() {
|
||||||
//默认要修改的金额为订单总金额
|
//默认要修改的金额为订单总金额
|
||||||
|
@ -824,6 +864,7 @@ export default {
|
||||||
},
|
},
|
||||||
//订单发货
|
//订单发货
|
||||||
orderDeliver() {
|
orderDeliver() {
|
||||||
|
this.facesheetFlag = false
|
||||||
API_Order.getLogisticsChecked().then((res) => {
|
API_Order.getLogisticsChecked().then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.checkedLogistics = res.result;
|
this.checkedLogistics = res.result;
|
||||||
|
@ -831,11 +872,28 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
Toprints(){
|
||||||
|
if(this.form.logisticsId != null && this.form.logisticsId != ''){
|
||||||
|
this.orderDeliverModal = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
//订单发货提交
|
//订单发货提交
|
||||||
orderDeliverySubmit() {
|
orderDeliverySubmit() {
|
||||||
this.$refs.orderDeliveryForm.validate((valid) => {
|
if(this.facesheetFlag){
|
||||||
|
this.$refs['faceSheetForm'].validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
API_Order.orderDelivery(this.sn, this.orderDeliveryForm).then(
|
API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.someJSONdata = res.result;
|
||||||
|
this.Toprints();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
this.$refs['orderDeliveryForm'].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
API_Order.orderDelivery(this.sn,this.orderDeliveryForm).then(
|
||||||
(res) => {
|
(res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.$Message.success("订单发货成功");
|
this.$Message.success("订单发货成功");
|
||||||
|
@ -846,6 +904,7 @@ export default {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
//弹出修改收货地址框
|
//弹出修改收货地址框
|
||||||
editAddress() {
|
editAddress() {
|
||||||
|
|
|
@ -0,0 +1,286 @@
|
||||||
|
<template>
|
||||||
|
<div class="wrapper">
|
||||||
|
<!-- <Card class="category">
|
||||||
|
<div
|
||||||
|
:class="{ active: i == selectedIndex }"
|
||||||
|
class="category-item"
|
||||||
|
v-for="(typeItem, i) in pageTypes"
|
||||||
|
:key="typeItem.type"
|
||||||
|
>
|
||||||
|
<div @click="clickType(typeItem.type, i)">{{ typeItem.title }}</div>
|
||||||
|
</div>
|
||||||
|
</Card> -->
|
||||||
|
<Card class="content">
|
||||||
|
<Button type="primary" @click="createTemp">添加页面</Button>
|
||||||
|
<div class="list">
|
||||||
|
<Spin size="large" fix v-if="loading"></Spin>
|
||||||
|
<div class="item item-title">
|
||||||
|
<div>页面名称</div>
|
||||||
|
<div class="item-config">
|
||||||
|
<div>状态</div>
|
||||||
|
<div>操作</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item" v-for="(item, index) in list" :key="index">
|
||||||
|
<div>{{ item.name || "暂无模板昵称" }}</div>
|
||||||
|
<div class="item-config">
|
||||||
|
<i-switch v-model="item.pageShow" @on-change="releaseTemplate(item.id)">
|
||||||
|
<span slot="open">开</span>
|
||||||
|
<span slot="close">关</span>
|
||||||
|
</i-switch>
|
||||||
|
<Button type="info" placement="right" @click="Template(item)" size="small"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
<Button type="success" placement="right" @click="decorate(item)" size="small"
|
||||||
|
>装修</Button
|
||||||
|
>
|
||||||
|
<Poptip confirm title="删除此模板?" @on-ok="delTemplate(item.id)">
|
||||||
|
<Button type="error" size="small">删除</Button>
|
||||||
|
</Poptip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="no-more" v-if="list.length == 0">暂无更多模板</div>
|
||||||
|
</div>
|
||||||
|
<Page show-total :total="total" show-sizer :page-size-opts="[10, 20, 50]" show-elevator style="float:right;overflow:hidden;" @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size="searchForm.pageSize"/>
|
||||||
|
</Card>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="模板设置"
|
||||||
|
draggable
|
||||||
|
width="600"
|
||||||
|
:z-index="100"
|
||||||
|
:loading="loading"
|
||||||
|
:mask-closable="false"
|
||||||
|
@on-ok="newTemplate"
|
||||||
|
@on-cancel="showModal = false"
|
||||||
|
>
|
||||||
|
<Form ref="form" :model="formData" :label-width="80">
|
||||||
|
<FormItem label="模板名称" prop="name">
|
||||||
|
<Input v-model="formData.name" placeholder="请输入模板名称" />
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as API_floor from "@/api/other.js";
|
||||||
|
export default {
|
||||||
|
name: "floorList",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false, // 添加modal的显示
|
||||||
|
selectedIndex: 0, // 首页还是专题选择的index
|
||||||
|
total:0,
|
||||||
|
formData: {
|
||||||
|
// 新建模态框的数据
|
||||||
|
status: false, // 模板是否开启
|
||||||
|
name: "", // 模板名称
|
||||||
|
},
|
||||||
|
searchForm:{
|
||||||
|
pageNumber:1,
|
||||||
|
pageSize:10,
|
||||||
|
sort: 'createTime',
|
||||||
|
order: 'desc',
|
||||||
|
pageClientType:'PC'
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
// 列表展示的column
|
||||||
|
{
|
||||||
|
title: "页面名称",
|
||||||
|
key: "name",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "状态",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
key: "action",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
loading: false, // 加载状态
|
||||||
|
pageTypes: [
|
||||||
|
// 那种类别的模板
|
||||||
|
{
|
||||||
|
type: "INDEX",
|
||||||
|
title: "首页",
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// type: "SPECIAL",
|
||||||
|
// title: "专题",
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
list: [], // 模板列表
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getTemplateList();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
newTemplate() {
|
||||||
|
// 添加,编辑模板
|
||||||
|
this.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
const data = this.formData;
|
||||||
|
data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
|
||||||
|
delete data.status;
|
||||||
|
(data.pageType = "STORE"), (data.pageClientType = "PC");
|
||||||
|
if (data.id) {
|
||||||
|
API_floor.updateHome(data.id, data).then((res) => {
|
||||||
|
this.$Message.success("编辑模板成功");
|
||||||
|
this.showModal = false;
|
||||||
|
this.getTemplateList();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
API_floor.setHomeSetup(data).then((res) => {
|
||||||
|
this.$Message.success("新建模板成功");
|
||||||
|
this.showModal = false;
|
||||||
|
this.getTemplateList();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
createTemp() {
|
||||||
|
// 新建表单
|
||||||
|
this.$refs.form.resetFields();
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
Template(item) {
|
||||||
|
// 编辑表单
|
||||||
|
item.status = item.pageShow;
|
||||||
|
this.formData = item;
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
decorate(val) {
|
||||||
|
// 装修
|
||||||
|
this.$router.push({
|
||||||
|
name: "renovation",
|
||||||
|
query: { id: val.id, pageShow: val.pageShow },
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 分页 修改页码
|
||||||
|
changePageNum (val) {
|
||||||
|
this.searchForm.pageNumber = val;
|
||||||
|
this.getTemplateList();
|
||||||
|
},
|
||||||
|
// 分页 修改页数
|
||||||
|
changePageSize (val) {
|
||||||
|
this.searchForm.pageNumber = 1;
|
||||||
|
this.searchForm.pageSize = val;
|
||||||
|
this.getTemplateList();
|
||||||
|
},
|
||||||
|
getTemplateList() {
|
||||||
|
//模板列表
|
||||||
|
// let params = {
|
||||||
|
// pageNumber: 1,
|
||||||
|
// pageSize: 999,
|
||||||
|
// pageType: "INDEX",
|
||||||
|
// pageClientType: "PC",
|
||||||
|
// };
|
||||||
|
API_floor.getHomeList(this.searchForm).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
// this.total
|
||||||
|
this.total = res.result.total
|
||||||
|
this.list = res.result.records;
|
||||||
|
this.list.forEach((e) => {
|
||||||
|
if (e.pageShow === "OPEN") {
|
||||||
|
e.pageShow = true;
|
||||||
|
} else {
|
||||||
|
e.pageShow = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
releaseTemplate(id) {
|
||||||
|
//发布模板
|
||||||
|
API_floor.releasePageHome(id).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("发布模板成功");
|
||||||
|
this.getTemplateList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除模板
|
||||||
|
delTemplate(id) {
|
||||||
|
API_floor.removePageHome(id).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("删除模板成功");
|
||||||
|
this.getTemplateList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.category-item {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: #ededed;
|
||||||
|
}
|
||||||
|
.item-title {
|
||||||
|
background: #d7e7f5 !important;
|
||||||
|
height: 54px;
|
||||||
|
}
|
||||||
|
.no-more {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.wrapper {
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.category {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
flex: 8;
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
min-height: 600px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.item:nth-of-type(2) {
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
width: 100% !important;
|
||||||
|
padding: 0 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
> .item-config {
|
||||||
|
width: 250px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
div:nth-child(2) {
|
||||||
|
margin-right: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item:nth-of-type(2n + 1) {
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,862 @@
|
||||||
|
|
||||||
|
export const modelData = [
|
||||||
|
{
|
||||||
|
type: 'hotAdvert',
|
||||||
|
name: '热门广告',
|
||||||
|
icon: 'md-image',
|
||||||
|
showName: '',
|
||||||
|
options: {
|
||||||
|
list: [{
|
||||||
|
img: require('@/assets/nav/decorate1.png'),
|
||||||
|
url: '',
|
||||||
|
size: '1200*自定义'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/1.jpg'),
|
||||||
|
url: '',
|
||||||
|
size: '230*190'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/1.jpg'),
|
||||||
|
url: '',
|
||||||
|
size: '230*190'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/1.jpg'),
|
||||||
|
url: '',
|
||||||
|
size: '230*190'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/1.jpg'),
|
||||||
|
url: '',
|
||||||
|
size: '230*190'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/1.jpg'),
|
||||||
|
url: '',
|
||||||
|
size: '230*190'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'seckill',
|
||||||
|
name: '促销活动',
|
||||||
|
icon: 'md-image',
|
||||||
|
showName: '',
|
||||||
|
options: {
|
||||||
|
list: [{
|
||||||
|
time: 6,
|
||||||
|
goodsList: [{
|
||||||
|
img: require('@/assets/nav/1.jpg'),
|
||||||
|
price: 20,
|
||||||
|
originalPrice: 30,
|
||||||
|
name: '阿迪达斯三叶草asdasdafads123213a',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/2.jpg'),
|
||||||
|
price: 20,
|
||||||
|
originalPrice: 30,
|
||||||
|
name: '阿迪达斯三叶草asdasdafadsa',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/3.jpg'),
|
||||||
|
price: 20,
|
||||||
|
originalPrice: 30,
|
||||||
|
name: '阿迪达斯三叶草asdasdafadsa',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/4.jpg'),
|
||||||
|
price: 20,
|
||||||
|
originalPrice: 30,
|
||||||
|
name: '阿迪达斯三叶草asdasdafadsa',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/5.jpg'),
|
||||||
|
price: 20,
|
||||||
|
originalPrice: 30,
|
||||||
|
name: '阿迪达斯三叶草asdasdafadsa',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/1.jpg'),
|
||||||
|
price: 20,
|
||||||
|
originalPrice: 30,
|
||||||
|
name: '阿迪达斯三叶草asdasdafadsa',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/2.jpg'),
|
||||||
|
price: 20,
|
||||||
|
originalPrice: 30,
|
||||||
|
name: '阿迪达斯三叶草asdasdafadsa',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/3.jpg'),
|
||||||
|
price: 20,
|
||||||
|
originalPrice: 30,
|
||||||
|
name: '阿迪达斯三叶草asdasdafadsa',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/4.jpg'),
|
||||||
|
price: 20,
|
||||||
|
originalPrice: 30,
|
||||||
|
name: '阿迪达斯三叶草asdasdafadsa',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/5.jpg'),
|
||||||
|
price: 20,
|
||||||
|
originalPrice: 30,
|
||||||
|
name: '阿迪达斯三叶草asdasdafadsa',
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: 8,
|
||||||
|
goodsList: [{
|
||||||
|
img: require('@/assets/nav/1.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/2.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/3.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/4.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/5.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: 10,
|
||||||
|
goodsList: [{
|
||||||
|
img: require('@/assets/nav/1.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/2.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/3.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/4.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/5.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: 12,
|
||||||
|
goodsList: [{
|
||||||
|
img: require('@/assets/nav/1.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/2.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/3.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/4.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/5.jpg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: 14,
|
||||||
|
goodsList: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: 16,
|
||||||
|
goodsList: []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: 18,
|
||||||
|
goodsList: []
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'discountAdvert',
|
||||||
|
name: '折扣广告',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
bgImg: {
|
||||||
|
img: require('@/assets/nav/decorate.png'),
|
||||||
|
url: '',
|
||||||
|
size: "1300*586"
|
||||||
|
},
|
||||||
|
classification: [{
|
||||||
|
img: require('@/assets/nav/decorate2.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '190*210'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate2.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '190*210'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate2.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '190*210'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate2.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '190*210'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate2.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '190*210'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate2.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '190*210'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate2.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '190*210'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate2.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '190*210'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate2.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '190*210'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate2.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '190*210'
|
||||||
|
}, ],
|
||||||
|
brandList: [{
|
||||||
|
img: require('@/assets/nav/decorate11.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '240*105'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate11.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '240*105'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate11.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '240*105'
|
||||||
|
}, {
|
||||||
|
img: require('@/assets/nav/decorate11.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: '240*105'
|
||||||
|
}, ]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'recommend',
|
||||||
|
name: '好货推荐',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
contentLeft: {
|
||||||
|
title: '发现好货',
|
||||||
|
secondTitle: '更多好货',
|
||||||
|
bgColor: '#449dae',
|
||||||
|
url: '',
|
||||||
|
list: [{
|
||||||
|
img: require('@/assets/nav/decorate3.jpeg'),
|
||||||
|
name: '阿迪达斯三叶草',
|
||||||
|
describe: '也许是每一款经典系列都应该有一个独特的故事吧',
|
||||||
|
url: '',
|
||||||
|
size: '160*160'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate4.jpeg'),
|
||||||
|
name: '360行车记录',
|
||||||
|
describe: '夜行 监控 电子狗 蓝牙',
|
||||||
|
url: '',
|
||||||
|
size: '80*80'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate4.jpeg'),
|
||||||
|
name: '360行车记录',
|
||||||
|
describe: '夜行 监控 电子狗 蓝牙',
|
||||||
|
url: '',
|
||||||
|
size: '80*80'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate4.jpeg'),
|
||||||
|
name: '360行车记录',
|
||||||
|
describe: '夜行 监控 电子狗 蓝牙',
|
||||||
|
url: '',
|
||||||
|
size: '80*80'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate4.jpeg'),
|
||||||
|
name: '360行车记录',
|
||||||
|
describe: '夜行 监控 电子狗 蓝牙',
|
||||||
|
url: '',
|
||||||
|
size: '80*80'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate4.jpeg'),
|
||||||
|
name: '360行车记录',
|
||||||
|
describe: '夜行 监控 电子狗 蓝牙',
|
||||||
|
url: '',
|
||||||
|
size: '80*80'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate4.jpeg'),
|
||||||
|
name: '360行车记录',
|
||||||
|
describe: '夜行 监控 电子狗 蓝牙',
|
||||||
|
url: '',
|
||||||
|
size: '80*80'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
contentRight: {
|
||||||
|
title: '特色推荐',
|
||||||
|
secondTitle: '更多特色推荐',
|
||||||
|
bgColor: '#a25684',
|
||||||
|
url: '',
|
||||||
|
list: [{
|
||||||
|
img: require('@/assets/nav/decorate5.jpeg'),
|
||||||
|
name: '好心情喝出来',
|
||||||
|
describe: '遇见懂你的饮品',
|
||||||
|
url: '',
|
||||||
|
size: '100*100'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate5.jpeg'),
|
||||||
|
name: '好心情喝出来',
|
||||||
|
describe: '遇见懂你的饮品',
|
||||||
|
url: '',
|
||||||
|
size: '100*100'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate5.jpeg'),
|
||||||
|
name: '好心情喝出来',
|
||||||
|
describe: '遇见懂你的饮品',
|
||||||
|
url: '',
|
||||||
|
size: '100*100'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate5.jpeg'),
|
||||||
|
name: '好心情喝出来',
|
||||||
|
describe: '遇见懂你的饮品',
|
||||||
|
url: '',
|
||||||
|
size: '100*100'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'newGoodsSort',
|
||||||
|
name: '新品排行',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
left: {
|
||||||
|
title: '特卖',
|
||||||
|
secondTitle: "更多特卖",
|
||||||
|
bgColor: '#c43d7e',
|
||||||
|
url: '',
|
||||||
|
list: [{
|
||||||
|
name: '新年心愿单',
|
||||||
|
describe: '满269减50,满999减100',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "160*160"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Ms.Maggie 冬季时尚',
|
||||||
|
describe: '满269减50',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "90*90"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Ms.Maggie 冬季时尚',
|
||||||
|
describe: '满269减50',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "90*90"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Ms.Maggie 冬季时尚',
|
||||||
|
describe: '满269减50',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "90*90"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '阿迪达斯 领跑时尚',
|
||||||
|
describe: '满269减50',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "90*90"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
middle: {
|
||||||
|
title: '新品',
|
||||||
|
secondTitle: "更多新品",
|
||||||
|
bgColor: '#e66a07',
|
||||||
|
url: '',
|
||||||
|
list: [{
|
||||||
|
name: '阿迪达斯 领跑时尚',
|
||||||
|
describe: '满269减50',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "90*90"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '阿迪达斯 领跑时尚',
|
||||||
|
describe: '满269减50',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "90*90"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '阿迪达斯 领跑时尚',
|
||||||
|
describe: '满269减50',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "90*90"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '阿迪达斯 领跑时尚',
|
||||||
|
describe: '满269减50',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "90*90"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '阿迪达斯 领跑时尚',
|
||||||
|
describe: '满269减50',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "90*90"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '阿迪达斯 领跑时尚',
|
||||||
|
describe: '满269减50',
|
||||||
|
img: require('@/assets/nav/decorate6.jpeg'),
|
||||||
|
url: '',
|
||||||
|
size: "90*90"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
right: {
|
||||||
|
title: '排行榜',
|
||||||
|
secondTitle: "精品风向标",
|
||||||
|
bgColor: '#b62323',
|
||||||
|
url: '',
|
||||||
|
list: [{
|
||||||
|
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||||
|
price: 14.9,
|
||||||
|
img: require('@/assets/nav/decorate7.jpeg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||||
|
price: 14.9,
|
||||||
|
img: require('@/assets/nav/decorate7.jpeg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||||
|
price: 14.9,
|
||||||
|
img: require('@/assets/nav/decorate7.jpeg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||||
|
price: 14.9,
|
||||||
|
img: require('@/assets/nav/decorate7.jpeg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||||
|
price: 14.9,
|
||||||
|
img: require('@/assets/nav/decorate7.jpeg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||||
|
price: 14.9,
|
||||||
|
img: require('@/assets/nav/decorate7.jpeg'),
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'firstAdvert',
|
||||||
|
name: '首页广告',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
list: [{
|
||||||
|
name: '生鲜',
|
||||||
|
describe: "年货带回家 满199减60",
|
||||||
|
img: require('@/assets/nav/decorate8.png'),
|
||||||
|
url: '',
|
||||||
|
fromColor: '#e89621',
|
||||||
|
toColor: "#f5c568",
|
||||||
|
size: '170*170'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '众筹',
|
||||||
|
describe: "年货带回家",
|
||||||
|
img: require('@/assets/nav/decorate9.png'),
|
||||||
|
url: '',
|
||||||
|
fromColor: "#325bb4",
|
||||||
|
toColor: '#4c9afe',
|
||||||
|
size: '170*170'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '生鲜',
|
||||||
|
describe: "年货带回家 满199减60",
|
||||||
|
img: require('@/assets/nav/decorate8.png'),
|
||||||
|
url: '',
|
||||||
|
fromColor: "#1c9daf",
|
||||||
|
toColor: '#40cda7',
|
||||||
|
size: '170*170'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '众筹',
|
||||||
|
describe: "备孕有孕检测仪",
|
||||||
|
img: require('@/assets/nav/decorate9.png'),
|
||||||
|
url: '',
|
||||||
|
fromColor: "#d13837",
|
||||||
|
toColor: '#df6d4f',
|
||||||
|
size: '170*170'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '生鲜',
|
||||||
|
describe: "年货带回家 满199减60",
|
||||||
|
img: require('@/assets/nav/decorate8.png'),
|
||||||
|
url: '',
|
||||||
|
fromColor: "#ca4283",
|
||||||
|
toColor: '#eb75cf',
|
||||||
|
size: '170*170'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '众筹',
|
||||||
|
describe: "备孕有孕检测仪",
|
||||||
|
img: require('@/assets/nav/decorate9.png'),
|
||||||
|
url: '',
|
||||||
|
fromColor: "#5d40c1",
|
||||||
|
toColor: '#8c5fdb',
|
||||||
|
size: '170*170'
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'bannerAdvert',
|
||||||
|
name: '横幅广告',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
img: '',
|
||||||
|
url: '',
|
||||||
|
size: '1200*自定义'
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'notEnough',
|
||||||
|
name: '还没逛够',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
list: [
|
||||||
|
[{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate10.jpeg'),
|
||||||
|
name: 'Apple/苹果 13 英寸:MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||||
|
price: 6666,
|
||||||
|
url: ''
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
],
|
||||||
|
navList: [{
|
||||||
|
title: '精选',
|
||||||
|
desc: '猜你喜欢'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '智能先锋',
|
||||||
|
desc: '大电器城'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '居家优品',
|
||||||
|
desc: '品质生活'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '超市百货',
|
||||||
|
desc: '百货生鲜'
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
|
@ -0,0 +1,385 @@
|
||||||
|
<template>
|
||||||
|
<div class="model-form">
|
||||||
|
<div class="model-content">
|
||||||
|
<!-- 头部广告,登录信息,不需要拖拽 -->
|
||||||
|
<div class="top-fixed-advert" :style="{backgroundColor:topAdvert.bgColor}">
|
||||||
|
<img :src="topAdvert.img" width="1200" height="80" alt="">
|
||||||
|
<div class="setup-box">
|
||||||
|
<Button size="small" @click.stop="handleModel('topAdvert')">编辑</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-con">
|
||||||
|
<div></div>
|
||||||
|
<ul class="detail">
|
||||||
|
<li>立即注册</li>
|
||||||
|
<li>请登录</li>
|
||||||
|
<li>我的订单</li>
|
||||||
|
<li>我的足迹</li>
|
||||||
|
<li><Icon size="18" type="ios-cart-outline" ></Icon>购物车</li>
|
||||||
|
<li>店铺入驻</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="search-con">
|
||||||
|
<img :src="require('@/assets/logo.png')" class="logo" alt="">
|
||||||
|
<div class="search">
|
||||||
|
<i-input size="large" placeholder="输入你想查找的商品">
|
||||||
|
<Button slot="append">搜索</Button>
|
||||||
|
</i-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="nav-con">
|
||||||
|
<div class="all-categories">全部商品分类</div>
|
||||||
|
<ul class="nav-item">
|
||||||
|
<li v-for="(item,index) in navList.list" :key="index">
|
||||||
|
<a href="#">{{item.name}}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="setup-box">
|
||||||
|
<Button size="small" @click.stop="handleModel('quickNav')">编辑</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 装修主体 -->
|
||||||
|
<div>
|
||||||
|
<draggable class="model-form-list"
|
||||||
|
v-model="data.list"
|
||||||
|
v-bind="{group:'model', ghostClass: 'ghost'}"
|
||||||
|
@end="handleMoveEnd"
|
||||||
|
@add="handleModelAdd"
|
||||||
|
>
|
||||||
|
<template v-for="(element, index) in data.list">
|
||||||
|
<model-form-item v-if="element && element.key" :key="element.key" :element="element" :index="index" :data="data"></model-form-item>
|
||||||
|
</template>
|
||||||
|
</draggable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="顶部广告"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
|
||||||
|
|
||||||
|
>
|
||||||
|
<!-- 顶部广告 -->
|
||||||
|
<div class="modal-top-advert">
|
||||||
|
<div>
|
||||||
|
<img class="show-image" width="600" height="40" :src="topAdvert.img" alt />
|
||||||
|
</div>
|
||||||
|
<div class="tips">
|
||||||
|
建议尺寸:<span>{{ topAdvert.size }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
图片链接:<span>{{ topAdvert.url }}</span><Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
选择图片:<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
选择背景色:<ColorPicker v-model="topAdvert.bgColor" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<Modal
|
||||||
|
v-model="showModalNav"
|
||||||
|
title="快捷导航"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<!-- 分类tab栏 -->
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
|
||||||
|
<table cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th width="250">分类名称</th>
|
||||||
|
<th width="250">链接地址</th>
|
||||||
|
<!-- <th width="150">排序</th> -->
|
||||||
|
<th width="250">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(item, index) in navList.list" :key="index">
|
||||||
|
<td><Input v-model="item.name" /></td>
|
||||||
|
<td><Input v-model="item.url" disabled /></td>
|
||||||
|
<!-- <td><Input v-model="item.sort"/></td> -->
|
||||||
|
<td>
|
||||||
|
<Button type="primary" size="small" @click="handleSelectLink(item,index)">选择链接</Button>
|
||||||
|
<Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
|
||||||
|
></liliDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import Draggable from 'vuedraggable'
|
||||||
|
import ModelFormItem from './modelFormItem.vue'
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
export default {
|
||||||
|
name:'modelForm',
|
||||||
|
components:{
|
||||||
|
Draggable,
|
||||||
|
ModelFormItem,
|
||||||
|
ossManage
|
||||||
|
},
|
||||||
|
props:['data'],
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
picModelFlag: false, // 选择图片模态框
|
||||||
|
showModal: false, // 顶部广告模态框
|
||||||
|
showModalNav: false, // 分类nav模态框
|
||||||
|
selectedNav:null, //当前已选nav
|
||||||
|
// 模拟搜索框下方数据
|
||||||
|
promotionTags: [ "买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"], // 热词数据
|
||||||
|
topAdvert:{ // 头部广告图数据
|
||||||
|
type:'topAdvert',
|
||||||
|
img:'',
|
||||||
|
url:'',
|
||||||
|
bgColor:'#de000d',
|
||||||
|
size:'1200*80'
|
||||||
|
},
|
||||||
|
navList:{ // 分类nav数据
|
||||||
|
type:'navBar',
|
||||||
|
list:[
|
||||||
|
{name:'秒杀', url:''}, {name:'闪购', url:''}, {name:'优惠券', url:''}, {name:'拍卖', url:''}, {name:'服装城', url:''},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
document.body.ondrop = function (event) {
|
||||||
|
let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
|
||||||
|
if (isFirefox) {
|
||||||
|
event.preventDefault()
|
||||||
|
event.stopPropagation()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
handleSelectLink(item,index) { // 调起选择链接弹窗
|
||||||
|
if(item) this.selectedNav = item;
|
||||||
|
this.$refs.liliDialog.open('link')
|
||||||
|
},
|
||||||
|
// 已选链接
|
||||||
|
selectedLink(val) {
|
||||||
|
console.log(val);
|
||||||
|
if(this.showModalNav){
|
||||||
|
this.selectedNav.url = this.$options.filters.formatLinkType(val);
|
||||||
|
}else {
|
||||||
|
this.topAdvert.url = this.$options.filters.formatLinkType(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleDelNav(index){ // 删除导航
|
||||||
|
this.navList.list.splice(index,1)
|
||||||
|
},
|
||||||
|
handleAddNav(){ // 添加导航
|
||||||
|
this.navList.list.push(
|
||||||
|
{name:'',url:''}
|
||||||
|
)
|
||||||
|
console.log(this.navList.list)
|
||||||
|
},
|
||||||
|
// 拖动结束回调
|
||||||
|
handleMoveEnd ({newIndex, oldIndex}) {
|
||||||
|
console.log('index', newIndex, oldIndex)
|
||||||
|
},
|
||||||
|
// 修改顶部广告
|
||||||
|
handleModel (type) {
|
||||||
|
if(type == 'topAdvert'){
|
||||||
|
this.showModal = true;
|
||||||
|
} else {
|
||||||
|
this.showModalNav = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择图片
|
||||||
|
handleSelectImg() {
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
},
|
||||||
|
callbackSelected (item) { // 选择图片回调
|
||||||
|
this.picModelFlag = false;
|
||||||
|
this.topAdvert.img = item.url;
|
||||||
|
},
|
||||||
|
handleModelAdd (evt) { // 拖拽,添加模块
|
||||||
|
const newIndex = evt.newIndex
|
||||||
|
|
||||||
|
// 为拖拽到容器的元素添加唯一 key
|
||||||
|
this.data.list[newIndex] = JSON.parse(JSON.stringify(this.data.list[newIndex]))
|
||||||
|
const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
|
||||||
|
this.$set(this.data.list, newIndex, {
|
||||||
|
...this.data.list[newIndex],
|
||||||
|
options: {
|
||||||
|
...this.data.list[newIndex].options,
|
||||||
|
},
|
||||||
|
key,
|
||||||
|
// 绑定键值
|
||||||
|
model: this.data.list[newIndex].type + '_' + key
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './modelList/setup-box.scss';
|
||||||
|
.model-form {
|
||||||
|
width: 1500px;
|
||||||
|
}
|
||||||
|
.model-content {
|
||||||
|
width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: #fff;
|
||||||
|
min-height: 1200px;
|
||||||
|
}
|
||||||
|
.model-form-list{
|
||||||
|
min-height: 500px;
|
||||||
|
}
|
||||||
|
/** 顶部广告,头部,搜索框 start */
|
||||||
|
.top-fixed-advert{
|
||||||
|
display: flex;
|
||||||
|
width:1500px;
|
||||||
|
margin-left: -150px;
|
||||||
|
background: $theme_color;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-con {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 35px;
|
||||||
|
padding: 0 15px;
|
||||||
|
line-height: 35px;
|
||||||
|
color: #999;
|
||||||
|
font-weight: bold;
|
||||||
|
div,li{
|
||||||
|
&:hover{
|
||||||
|
color: $theme_color;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.detail{
|
||||||
|
display: flex;
|
||||||
|
>li{
|
||||||
|
margin-left: 10px;
|
||||||
|
&::after{
|
||||||
|
content: "|";
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
&:last-child::after{
|
||||||
|
content:'';
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
&:hover::after{
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 搜索框 */
|
||||||
|
.search-con {
|
||||||
|
padding-top: 15px;
|
||||||
|
margin: 0px auto;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 1200px;
|
||||||
|
position: relative;
|
||||||
|
.logo{
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
width: 150px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
width: 460px;
|
||||||
|
margin: 0 auto;
|
||||||
|
/deep/ .ivu-input.ivu-input-large {
|
||||||
|
border: 2px solid $theme_color;
|
||||||
|
font-size: 12px;
|
||||||
|
height: 34px;
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .ivu-input-group-append {
|
||||||
|
border: 1px solid $theme_color;
|
||||||
|
border-left: none;
|
||||||
|
height: 30px;
|
||||||
|
background-color: $theme_color;
|
||||||
|
color: #ffffff;
|
||||||
|
button {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 商品分类 */
|
||||||
|
.nav-con{
|
||||||
|
width:1200px;
|
||||||
|
height: 40px;
|
||||||
|
background: #eee;
|
||||||
|
display: flex;
|
||||||
|
.all-categories{
|
||||||
|
width: 200px;
|
||||||
|
line-height: 40px;
|
||||||
|
color: #fff;
|
||||||
|
background-color: $theme_color;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.nav-item {
|
||||||
|
width: 1000px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
list-style: none;
|
||||||
|
background-color: #eee;
|
||||||
|
display: flex;
|
||||||
|
li{
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 20px;
|
||||||
|
a{
|
||||||
|
color:rgb(89, 88, 88);
|
||||||
|
font-size: 15px;
|
||||||
|
&:hover{color:$theme_color}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 顶部广告,头部,搜索框 end */
|
||||||
|
|
||||||
|
.top-fixed-advert, .nav-con{
|
||||||
|
position: relative;
|
||||||
|
&:hover{
|
||||||
|
.setup-box{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 装修模态框 内部样式start */
|
||||||
|
.modal-top-advert{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
>*{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,491 @@
|
||||||
|
<template>
|
||||||
|
<div class="model-item" v-if="element && element.key">
|
||||||
|
<!-- 轮播图模块,包括个人信息,快捷导航模块 -->
|
||||||
|
<template v-if="element.type == 'carousel'">
|
||||||
|
<model-carousel :data="element"></model-carousel>
|
||||||
|
</template>
|
||||||
|
<!-- 轮播图模块,100%宽度,无个人信息栏 -->
|
||||||
|
<template v-if="element.type == 'carousel1'">
|
||||||
|
<model-carousel1 class="mb_20" :data="element"></model-carousel1>
|
||||||
|
</template>
|
||||||
|
<!-- 轮播图模块,包括个人信息,两个轮播模块 -->
|
||||||
|
<template v-if="element.type == 'carousel2'">
|
||||||
|
<model-carousel2 class="mb_20" :data="element"></model-carousel2>
|
||||||
|
</template>
|
||||||
|
<!-- 热门广告 -->
|
||||||
|
<template v-if="element.type == 'hotAdvert'">
|
||||||
|
<div class="setup-content">
|
||||||
|
<img
|
||||||
|
style="display: block"
|
||||||
|
:src="element.options.list[0].img"
|
||||||
|
@click="$router.push(element.options.list[0].url)"
|
||||||
|
width="1200"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
@click.stop="handleSelectModel(element.options.list[0])"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul class="advert-list">
|
||||||
|
<template v-for="(item, index) in element.options.list">
|
||||||
|
<li
|
||||||
|
v-if="index !== 0"
|
||||||
|
@click="$router.push(item.url)"
|
||||||
|
class="setup-content"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<img :src="item.img" width="230" height="190" alt="" />
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel(item)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
</template>
|
||||||
|
<!-- 限时秒杀 待完善 -->
|
||||||
|
<template v-if="element.type == 'seckill'">
|
||||||
|
<seckill :data="element"></seckill>
|
||||||
|
</template>
|
||||||
|
<!-- 折扣广告 -->
|
||||||
|
<template v-if="element.type == 'discountAdvert'">
|
||||||
|
<div
|
||||||
|
class="discountAdvert"
|
||||||
|
:style="{
|
||||||
|
'background-image':
|
||||||
|
'url(' + require('@/assets/nav/decorate.png') + ')',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in element.options.classification"
|
||||||
|
:key="index"
|
||||||
|
class="setup-content"
|
||||||
|
>
|
||||||
|
<img :src="item.img" width="190" height="210" alt="" />
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel(item)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in element.options.brandList"
|
||||||
|
:key="index"
|
||||||
|
class="setup-content"
|
||||||
|
>
|
||||||
|
<img :src="item.img" width="240" height="105" alt="" />
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel(item)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 好货推荐 -->
|
||||||
|
<template v-if="element.type == 'recommend'">
|
||||||
|
<recommend :data="element"></recommend>
|
||||||
|
</template>
|
||||||
|
<!-- 新品排行 -->
|
||||||
|
<template v-if="element.type == 'newGoodsSort'">
|
||||||
|
<new-goods-sort :data="element"></new-goods-sort>
|
||||||
|
</template>
|
||||||
|
<!-- 首页广告 -->
|
||||||
|
<template v-if="element.type == 'firstAdvert'">
|
||||||
|
<first-page-advert :data="element"></first-page-advert>
|
||||||
|
</template>
|
||||||
|
<!-- 横幅广告 -->
|
||||||
|
<template v-if="element.type == 'bannerAdvert'">
|
||||||
|
<div class="horizontal-advert setup-content">
|
||||||
|
<img
|
||||||
|
v-if="element.options.img"
|
||||||
|
width="1200"
|
||||||
|
:src="element.options.img"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<div v-else class="default-con">
|
||||||
|
<p>广告图片</p>
|
||||||
|
<p>1200*自定义</p>
|
||||||
|
</div>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
@click.stop="handleSelectModel(element.options)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-if="element.type == 'notEnough'">
|
||||||
|
<not-enough :data="element"></not-enough>
|
||||||
|
</template>
|
||||||
|
<div class="del-btn">
|
||||||
|
<Button size="small" type="error" @click="handleModelDelete">删除</Button>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<div class="modal-top-advert">
|
||||||
|
<div>
|
||||||
|
<!-- 热门广告两种图片尺寸 -->
|
||||||
|
<img
|
||||||
|
class="show-image"
|
||||||
|
width="600"
|
||||||
|
height="40"
|
||||||
|
v-if="selected.size && selected.size.indexOf('1200') >= 0"
|
||||||
|
:src="selected.img"
|
||||||
|
alt
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="show-image"
|
||||||
|
width="230"
|
||||||
|
height="190"
|
||||||
|
v-if="selected.size && selected.size.indexOf('230*190') >= 0"
|
||||||
|
:src="selected.img"
|
||||||
|
alt
|
||||||
|
/>
|
||||||
|
<!-- 折扣广告三种图片尺寸 -->
|
||||||
|
<img
|
||||||
|
class="show-image"
|
||||||
|
width="600"
|
||||||
|
height="300"
|
||||||
|
v-if="selected.size && selected.size.indexOf('1300') >= 0"
|
||||||
|
:src="selected.img"
|
||||||
|
alt
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="show-image"
|
||||||
|
width="190"
|
||||||
|
height="210"
|
||||||
|
v-if="selected.size && selected.size.indexOf('190*210') >= 0"
|
||||||
|
:src="selected.img"
|
||||||
|
alt
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="show-image"
|
||||||
|
width="240"
|
||||||
|
height="105"
|
||||||
|
v-if="selected.size && selected.size.indexOf('240*105') >= 0"
|
||||||
|
:src="selected.img"
|
||||||
|
alt
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="tips">
|
||||||
|
建议尺寸:<span>{{ selected.size }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
图片链接:<span>{{ selected.url }}</span>
|
||||||
|
<Button size="small" type="primary" @click="handleSelectLink"
|
||||||
|
>选择链接</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
选择图片:<Button size="small" type="primary" @click="handleSelectImg"
|
||||||
|
>选择图片</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
|
||||||
|
></liliDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage
|
||||||
|
@callback="callbackSelected"
|
||||||
|
:isComponent="true"
|
||||||
|
ref="ossManage"
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ModelCarousel from "./modelList/carousel.vue";
|
||||||
|
import ModelCarousel1 from './modelList/carousel1.vue';
|
||||||
|
import ModelCarousel2 from './modelList/carousel2.vue';
|
||||||
|
import FirstPageAdvert from "./modelList/firstPageAdvert.vue";
|
||||||
|
import NewGoodsSort from "./modelList/newGoodsSort.vue";
|
||||||
|
import Recommend from "./modelList/recommend.vue";
|
||||||
|
import NotEnough from "./modelList/notEnough.vue";
|
||||||
|
import Seckill from "./modelList/seckill.vue";
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "modelFormItem",
|
||||||
|
props: ["element", "select", "index", "data"],
|
||||||
|
components: {
|
||||||
|
ModelCarousel,
|
||||||
|
ModelCarousel1,
|
||||||
|
ModelCarousel2,
|
||||||
|
Recommend,
|
||||||
|
NewGoodsSort,
|
||||||
|
FirstPageAdvert,
|
||||||
|
NotEnough,
|
||||||
|
Seckill,
|
||||||
|
ossManage,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false, // modal显隐
|
||||||
|
selected: {}, // 已选数据
|
||||||
|
picModelFlag: false, // 图片选择器
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 编辑模块
|
||||||
|
handleSelectModel(item) {
|
||||||
|
this.selected = item;
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
// 删除模块
|
||||||
|
handleModelDelete() {
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: "提示",
|
||||||
|
content: "<p>确定删除当前模块吗?</p>",
|
||||||
|
onOk: () => {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.data.list.splice(this.index, 1);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSelectLink(item, index) {
|
||||||
|
// 调起选择链接弹窗
|
||||||
|
this.$refs.liliDialog.open("link");
|
||||||
|
},
|
||||||
|
// 确定选择链接
|
||||||
|
selectedLink(val) {
|
||||||
|
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectImg() {
|
||||||
|
// 选择图片
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
},
|
||||||
|
// 回显图片
|
||||||
|
callbackSelected(val) {
|
||||||
|
this.picModelFlag = false;
|
||||||
|
this.selected.img = val.url;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "./modelList/setup-box.scss";
|
||||||
|
.model-item {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
&:hover {
|
||||||
|
.del-btn {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.del-btn {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: -100px;
|
||||||
|
top: 0;
|
||||||
|
&:hover {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 横幅广告 */
|
||||||
|
.horizontal-advert {
|
||||||
|
width: 1200px;
|
||||||
|
height: auto;
|
||||||
|
.default-con {
|
||||||
|
height: 100px;
|
||||||
|
padding-top: 30px;
|
||||||
|
text-align: center;
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 热门广告 */
|
||||||
|
.advert-list {
|
||||||
|
background: $theme_color;
|
||||||
|
height: 200px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 3px 10px;
|
||||||
|
> li {
|
||||||
|
img {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: all 150ms ease-in-out;
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 20px 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 限时秒杀 */
|
||||||
|
.limit-img {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
img {
|
||||||
|
width: 300px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 折扣广告 */
|
||||||
|
.discountAdvert {
|
||||||
|
height: 566px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
margin-left: -97px;
|
||||||
|
position: relative;
|
||||||
|
> div {
|
||||||
|
padding-left: 295px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
&:nth-child(1) img {
|
||||||
|
margin: 10px 10px 0 0;
|
||||||
|
}
|
||||||
|
&:nth-child(2) img {
|
||||||
|
margin: 0 10px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/** 首页品牌 */
|
||||||
|
.brand {
|
||||||
|
.brand-view {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 10px;
|
||||||
|
.brand-view-content {
|
||||||
|
width: 470px;
|
||||||
|
margin-left: 10px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 316px;
|
||||||
|
}
|
||||||
|
.brand-view-title {
|
||||||
|
height: 50px;
|
||||||
|
padding: 0 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.brand-view-content:first-child {
|
||||||
|
width: 240px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.brand-list {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
li {
|
||||||
|
width: 121px;
|
||||||
|
height: 112px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid #f5f5f5;
|
||||||
|
margin: -1px -1px 0 0;
|
||||||
|
&:hover {
|
||||||
|
.brand-mash {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.brand-img {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 30px;
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.brand-mash {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
.ivu-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 10px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
div:last-child {
|
||||||
|
background-color: $theme_color;
|
||||||
|
border-radius: 9px;
|
||||||
|
padding: 0 10px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.refresh {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.ivu-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: $theme_color;
|
||||||
|
color: #fff;
|
||||||
|
.ivu-icon {
|
||||||
|
transform: rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 装修模态框 内部样式start */
|
||||||
|
.modal-top-advert {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
> * {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -0,0 +1,290 @@
|
||||||
|
<template>
|
||||||
|
<div class="model-carousel">
|
||||||
|
<div class="nav-body clearfix">
|
||||||
|
<!-- 侧边导航 -->
|
||||||
|
<div class="nav-side">分类占位区</div>
|
||||||
|
<div class="nav-content setup-content">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<Carousel autoplay>
|
||||||
|
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
|
||||||
|
<div style="overflow: hidden">
|
||||||
|
<img :src="item.img" width="790" height="340" />
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
</Carousel>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel">编辑</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="nav-right">
|
||||||
|
<div class="person-msg">
|
||||||
|
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||||
|
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||||
|
<div>Hi,{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
|
||||||
|
<div v-if="userInfo.id">
|
||||||
|
<Button type="error" shape="circle">会员中心</Button>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<Button type="error" shape="circle">请登录</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="shop-msg">
|
||||||
|
<div>
|
||||||
|
<span>常见问题</span>
|
||||||
|
<ul class="article-list">
|
||||||
|
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
|
||||||
|
{{article.title}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="快捷导航"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
|
||||||
|
|
||||||
|
>
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
|
||||||
|
|
||||||
|
<span class="ml_10">图片尺寸:{{ data.size }}</span>
|
||||||
|
<div style="color: #999" class="fz_12">点击缩略图替换图片</div>
|
||||||
|
<table cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th width="250">所选图片</th>
|
||||||
|
<th width="250">链接地址</th>
|
||||||
|
<!-- <th width="150">排序</th> -->
|
||||||
|
<th width="250">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(item, index) in data.options.list" :key="index">
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
style="cursor: pointer"
|
||||||
|
:src="item.img"
|
||||||
|
@click="handleSelectImg(item)"
|
||||||
|
width="200"
|
||||||
|
height="100"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td><Input v-model="item.url" disabled /></td>
|
||||||
|
<!-- <td><Input v-model="item.sort"/></td> -->
|
||||||
|
<td>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
@click="handleSelectImg(item)"
|
||||||
|
>选择图片</Button
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="info"
|
||||||
|
size="small"
|
||||||
|
@click="handleSelectLink(item)"
|
||||||
|
>选择链接</Button
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="error"
|
||||||
|
ghost
|
||||||
|
size="small"
|
||||||
|
@click="handleDel(index)"
|
||||||
|
>删除</Button
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
|
||||||
|
></liliDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
export default {
|
||||||
|
name: "modelCarousel",
|
||||||
|
props: ["data"],
|
||||||
|
components: {
|
||||||
|
ossManage
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false, // modal显隐
|
||||||
|
selected: null, // 已选数据
|
||||||
|
picModelFlag: false, // 选择图片modal
|
||||||
|
userInfo:{},
|
||||||
|
articleList:[
|
||||||
|
{title:'促销计算规则'},
|
||||||
|
{title:'商家申请开店'},
|
||||||
|
{title:'商家账号注册'},
|
||||||
|
{title:'促销计算规则'}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleSelectModel () {
|
||||||
|
// 编辑模块
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
// 添加轮播图
|
||||||
|
handleAdd () {
|
||||||
|
this.data.options.list.push({ img: "", url: "" });
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
handleSelectLink (item) {
|
||||||
|
// 选择链接
|
||||||
|
this.$refs.liliDialog.open('link')
|
||||||
|
this.selected = item;
|
||||||
|
},
|
||||||
|
callbackSelected (item) { // 选择图片回调
|
||||||
|
this.picModelFlag = false;
|
||||||
|
this.selected.img = item.url;
|
||||||
|
},
|
||||||
|
handleDel(index) {
|
||||||
|
// 删除图片
|
||||||
|
this.data.options.list.splice(index, 1);
|
||||||
|
},
|
||||||
|
selectedLink(val) { // 选择链接回调
|
||||||
|
console.log(val);
|
||||||
|
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||||
|
console.log(this.selected.url);
|
||||||
|
},
|
||||||
|
// 选择图片
|
||||||
|
handleSelectImg(item) {
|
||||||
|
this.selected = item;
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./setup-box.scss";
|
||||||
|
.model-carousel {
|
||||||
|
width: 1200px;
|
||||||
|
height: 340px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item li {
|
||||||
|
float: left;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.nav-item a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
.nav-item a:hover {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
/*大的导航信息,包含导航,幻灯片等*/
|
||||||
|
.nav-body {
|
||||||
|
width: 1200px;
|
||||||
|
height: 340px;
|
||||||
|
margin: 0px auto;
|
||||||
|
}
|
||||||
|
.nav-side {
|
||||||
|
height: 100%;
|
||||||
|
width: 200px;
|
||||||
|
padding: 0px;
|
||||||
|
color: #fff;
|
||||||
|
float: left;
|
||||||
|
background-color: #6e6568;
|
||||||
|
line-height: 340px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*导航内容*/
|
||||||
|
.nav-content {
|
||||||
|
width: 800px;
|
||||||
|
height: 340px;
|
||||||
|
overflow: hidden;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.nav-right {
|
||||||
|
float: left;
|
||||||
|
width: 200px;
|
||||||
|
.person-msg {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 20px auto;
|
||||||
|
|
||||||
|
button {
|
||||||
|
height: 25px !important;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ivu-btn-default {
|
||||||
|
color: $theme_color;
|
||||||
|
border-color: $theme_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop-msg {
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px 27px;
|
||||||
|
span {
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
span:nth-child(1) {
|
||||||
|
color: $theme_color;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
span:nth-child(2) {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
span:nth-child(3):hover {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0 30px;
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 5px 0;
|
||||||
|
color: #999395;
|
||||||
|
&:hover {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,188 @@
|
||||||
|
<template>
|
||||||
|
<div class="model-carousel1" :style="{background: bgColor}">
|
||||||
|
<div class="nav-body clearfix">
|
||||||
|
<!-- 侧边导航 -->
|
||||||
|
<div class="nav-side">分类占位区</div>
|
||||||
|
<div class="nav-content setup-content">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<Carousel autoplay @on-change="autoChange">
|
||||||
|
<CarouselItem v-for="(item, index) in data.options.list" :key="index" >
|
||||||
|
<div style="overflow: hidden">
|
||||||
|
<img :src="item.img" width="1200" height="470" />
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
</Carousel>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel">编辑</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="快捷导航"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
|
||||||
|
|
||||||
|
>
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
|
||||||
|
|
||||||
|
<span class="ml_10">图片尺寸:{{ data.size }}</span>
|
||||||
|
<span style="color: red" class="fz_12 ml_10">点击缩略图替换图片、点击颜色选择器选择背景色</span>
|
||||||
|
<table cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th width="250">所选图片</th>
|
||||||
|
<th width="250">链接地址</th>
|
||||||
|
<th width="250">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(item, index) in data.options.list" :key="index">
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
style="cursor: pointer"
|
||||||
|
:src="item.img"
|
||||||
|
@click="handleSelectImg(item)"
|
||||||
|
width="200"
|
||||||
|
height="100"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td><Input v-model="item.url" disabled /></td>
|
||||||
|
<td>
|
||||||
|
<Button
|
||||||
|
type="info"
|
||||||
|
size="small"
|
||||||
|
@click="handleSelectLink(item)"
|
||||||
|
>选择链接</Button
|
||||||
|
>
|
||||||
|
<ColorPicker size="small" v-model="item.bgColor" />
|
||||||
|
|
||||||
|
<Button
|
||||||
|
type="error"
|
||||||
|
ghost
|
||||||
|
size="small"
|
||||||
|
@click="handleDel(index)"
|
||||||
|
>删除</Button
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
|
||||||
|
></liliDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage @callback="callbackSelected" ref="ossManage" />
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
export default {
|
||||||
|
name: "modelCarousel",
|
||||||
|
props: ["data"],
|
||||||
|
components: {
|
||||||
|
ossManage
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false, // modal显隐
|
||||||
|
selected: null, // 已选数据
|
||||||
|
picModelFlag: false, // 选择图片modal
|
||||||
|
bgColor:'#fff' // 轮播背景色
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.bgColor = this.data.options.list[0].bgColor
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSelectModel () {
|
||||||
|
// 编辑模块
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
// 自动切换时改变背景色
|
||||||
|
autoChange (oVal,val) {
|
||||||
|
this.bgColor = this.data.options.list[val].bgColor
|
||||||
|
},
|
||||||
|
// 添加轮播图片和链接
|
||||||
|
handleAdd () {
|
||||||
|
this.data.options.list.push({ img: "", url: "", bgColor: '#fff' });
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
// 打开选择链接modal
|
||||||
|
handleSelectLink (item) {
|
||||||
|
this.$refs.liliDialog.open('link')
|
||||||
|
this.selected = item;
|
||||||
|
},
|
||||||
|
callbackSelected (item) { // 选择图片回调
|
||||||
|
this.picModelFlag = false;
|
||||||
|
this.selected.img = item.url;
|
||||||
|
},
|
||||||
|
// 删除图片
|
||||||
|
handleDel(index) {
|
||||||
|
this.data.options.list.splice(index, 1);
|
||||||
|
},
|
||||||
|
selectedLink(val) { // 选择链接回调
|
||||||
|
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||||
|
},
|
||||||
|
// 打开选择图片modal
|
||||||
|
handleSelectImg(item) {
|
||||||
|
this.selected = item;
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./setup-box.scss";
|
||||||
|
.model-carousel1 {
|
||||||
|
width: 1500px;
|
||||||
|
height: 470px;
|
||||||
|
margin-left: -150px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*大的导航信息,包含导航,幻灯片等*/
|
||||||
|
.nav-body {
|
||||||
|
width: 1200px;
|
||||||
|
height: 470px;
|
||||||
|
margin: 0px auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav-side {
|
||||||
|
height: 100%;
|
||||||
|
width: 200px;
|
||||||
|
padding: 0px;
|
||||||
|
color: #fff;
|
||||||
|
background-color:rgba(0,0,0,.5);
|
||||||
|
line-height: 470px;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*导航内容*/
|
||||||
|
.nav-content {
|
||||||
|
width: 1200px;
|
||||||
|
height: 470px;
|
||||||
|
overflow: hidden;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,368 @@
|
||||||
|
<template>
|
||||||
|
<div class="model-carousel2">
|
||||||
|
<div class="nav-body clearfix">
|
||||||
|
<!-- 侧边导航 -->
|
||||||
|
<div class="nav-side">分类占位区</div>
|
||||||
|
<div class="nav-content setup-content">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<Carousel autoplay>
|
||||||
|
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
|
||||||
|
<div style="overflow: hidden">
|
||||||
|
<img :src="item.img" width="590" height="470" />
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
</Carousel>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel">编辑</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="nav-content1 setup-content">
|
||||||
|
<!-- 轮播图 -->
|
||||||
|
<Carousel autoplay :autoplay-speed="5000">
|
||||||
|
<CarouselItem v-for="(item, index) in data.options.listRight" :key="index">
|
||||||
|
<div class="mb_10">
|
||||||
|
<img :src="item[0].img" width="190" height="150" />
|
||||||
|
</div>
|
||||||
|
<div class="mb_10">
|
||||||
|
<img :src="item[1].img" width="190" height="150" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img :src="item[2].img" width="190" height="150" />
|
||||||
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
</Carousel>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel">编辑</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="nav-right">
|
||||||
|
<div class="person-msg">
|
||||||
|
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||||
|
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||||
|
<div>Hi,{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
|
||||||
|
<div v-if="userInfo.id">
|
||||||
|
<Button type="error" shape="circle">会员中心</Button>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<Button type="error" shape="circle">请登录</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="shop-msg">
|
||||||
|
<div>
|
||||||
|
<span>常见问题</span>
|
||||||
|
<ul class="article-list">
|
||||||
|
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
|
||||||
|
{{article.title}}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>)
|
||||||
|
</div>
|
||||||
|
<!-- 左侧轮播装修 -->
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="快捷导航"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
|
||||||
|
|
||||||
|
<span class="ml_10">图片尺寸:{{ data.size }}</span>
|
||||||
|
<span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
|
||||||
|
<table cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th width="250">所选图片</th>
|
||||||
|
<th width="250">链接地址</th>
|
||||||
|
<th width="250">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(item, index) in data.options.list" :key="index">
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
style="cursor: pointer"
|
||||||
|
:src="item.img"
|
||||||
|
@click="handleSelectImg(item)"
|
||||||
|
width="200"
|
||||||
|
height="100"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td><Input v-model="item.url" disabled /></td>
|
||||||
|
<td>
|
||||||
|
<Button
|
||||||
|
type="info"
|
||||||
|
size="small"
|
||||||
|
@click="handleSelectLink(item)"
|
||||||
|
>选择链接</Button>
|
||||||
|
<Button
|
||||||
|
type="error"
|
||||||
|
ghost
|
||||||
|
size="small"
|
||||||
|
@click="handleDel(index)"
|
||||||
|
>删除</Button
|
||||||
|
>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 右侧轮播装修 -->
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="右侧装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<Button type="primary" size="small" @click="handleAddGroup">添加组</Button>
|
||||||
|
|
||||||
|
<span class="ml_10">图片尺寸:{{ data.size }}</span>
|
||||||
|
<span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
|
||||||
|
<Tabs type="card" closable @on-tab-remove="handleTabRemove" class="mt_10">
|
||||||
|
<TabPane :label="'图片组'+(gIndex+1)" v-for="(group, gIndex) in data.options.listRight" :key="gIndex">
|
||||||
|
<table cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th width="250">所选图片</th>
|
||||||
|
<th width="250">链接地址</th>
|
||||||
|
<th width="250">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(item, index) in group" :key="index">
|
||||||
|
<td>
|
||||||
|
<img
|
||||||
|
style="cursor: pointer"
|
||||||
|
:src="item.img"
|
||||||
|
@click="handleSelectImg(item)"
|
||||||
|
width="200"
|
||||||
|
height="100"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
<td><Input v-model="item.url" disabled /></td>
|
||||||
|
<td>
|
||||||
|
<Button
|
||||||
|
type="info"
|
||||||
|
size="small"
|
||||||
|
@click="handleSelectLink(item)"
|
||||||
|
>选择链接</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</TabPane>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
></liliDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage @callback="callbackSelected" ref="ossManage" />
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
export default {
|
||||||
|
name: "modelCarousel",
|
||||||
|
props: ["data"],
|
||||||
|
components: {
|
||||||
|
ossManage
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false, // modal显隐
|
||||||
|
selected: null, // 已选数据
|
||||||
|
picModelFlag: false, // 选择图片modal
|
||||||
|
userInfo:{},
|
||||||
|
articleList:[
|
||||||
|
{title:'促销计算规则'},
|
||||||
|
{title:'商家申请开店'},
|
||||||
|
{title:'商家账号注册'},
|
||||||
|
{title:'促销计算规则'}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleSelectModel () {
|
||||||
|
// 编辑模块
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
// 添加轮播
|
||||||
|
handleAdd () {
|
||||||
|
this.data.options.list.push({ img: "", url: "" });
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
// 添加图片组
|
||||||
|
handleAddGroup () {
|
||||||
|
this.data.options.listRight.push([
|
||||||
|
{img:'',url:''},
|
||||||
|
{img:'',url:''},
|
||||||
|
{img:'',url:''}
|
||||||
|
])
|
||||||
|
},
|
||||||
|
// 删除图片组
|
||||||
|
handleTabRemove (index) {
|
||||||
|
this.data.options.listRight.splice(index, 1)
|
||||||
|
},
|
||||||
|
// 打开图片链接
|
||||||
|
handleSelectLink (item) {
|
||||||
|
this.$refs.liliDialog.open('link')
|
||||||
|
this.selected = item;
|
||||||
|
},
|
||||||
|
callbackSelected (item) { // 选择图片回调
|
||||||
|
this.picModelFlag = false;
|
||||||
|
this.selected.img = item.url;
|
||||||
|
},
|
||||||
|
// 删除图片
|
||||||
|
handleDel(index) {
|
||||||
|
this.data.options.list.splice(index, 1);
|
||||||
|
},
|
||||||
|
selectedLink(val) { // 选择链接回调
|
||||||
|
console.log(val);
|
||||||
|
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||||
|
console.log(this.selected.url);
|
||||||
|
},
|
||||||
|
// 打开选择图片modal
|
||||||
|
handleSelectImg(item) {
|
||||||
|
this.selected = item;
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./setup-box.scss";
|
||||||
|
.model-carousel2 {
|
||||||
|
width: 1200px;
|
||||||
|
height: 470px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item li {
|
||||||
|
float: left;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.nav-item a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
.nav-item a:hover {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
/*大的导航信息,包含导航,幻灯片等*/
|
||||||
|
.nav-body {
|
||||||
|
width: 1200px;
|
||||||
|
height: 470px;
|
||||||
|
margin: 0px auto;
|
||||||
|
}
|
||||||
|
.nav-side {
|
||||||
|
height: 100%;
|
||||||
|
width: 200px;
|
||||||
|
padding: 0px;
|
||||||
|
color: #fff;
|
||||||
|
float: left;
|
||||||
|
background-color: #6e6568;
|
||||||
|
line-height: 470px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*导航内容*/
|
||||||
|
.nav-content,.nav-content1 {
|
||||||
|
width: 590px;
|
||||||
|
height: 470px;
|
||||||
|
overflow: hidden;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
.nav-content1{
|
||||||
|
width: 190px;
|
||||||
|
}
|
||||||
|
.nav-right {
|
||||||
|
float: left;
|
||||||
|
width: 190px;
|
||||||
|
margin-left: 10px;
|
||||||
|
.person-msg {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 20px auto;
|
||||||
|
|
||||||
|
button {
|
||||||
|
height: 25px !important;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ivu-btn-default {
|
||||||
|
color: $theme_color;
|
||||||
|
border-color: $theme_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop-msg {
|
||||||
|
div {
|
||||||
|
width: 100%;
|
||||||
|
margin: 10px 27px;
|
||||||
|
span {
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
span:nth-child(1) {
|
||||||
|
color: $theme_color;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
span:nth-child(2) {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
span:nth-child(3):hover {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 5px 0;
|
||||||
|
color: #999395;
|
||||||
|
width: 150px;
|
||||||
|
font-size: 12px;
|
||||||
|
&:hover {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,162 @@
|
||||||
|
<template>
|
||||||
|
<div class="first-page-advert">
|
||||||
|
<div class="item setup-content" :style="{backgroundImage:`linear-gradient(to right, ${item.fromColor}, ${item.toColor})`}" v-for="(item, index) in options.list" :key="index">
|
||||||
|
<div>
|
||||||
|
<span class="line top-line"></span>
|
||||||
|
<p>{{item.name}}</p>
|
||||||
|
<span class="line btm-line"></span>
|
||||||
|
<p>{{item.describe}}</p>
|
||||||
|
</div>
|
||||||
|
<img :src="item.img" width="170" height="170" alt="">
|
||||||
|
<div class="setup-box">
|
||||||
|
<div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
|
||||||
|
|
||||||
|
>
|
||||||
|
<div class="modal-top-advert">
|
||||||
|
<div>
|
||||||
|
<img class="show-image" width="170" height="170" :src="selected.img" alt />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>图片主标题:</span><Input v-model="selected.name" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>图片描述:</span><Input v-model="selected.describe" />
|
||||||
|
</div>
|
||||||
|
<div class="tips">
|
||||||
|
建议尺寸:<span>{{ selected.size }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
图片链接:<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>渐变背景色:</span><Input v-model="selected.fromColor" /> <ColorPicker v-if="selected.fromColor" v-model="selected.fromColor" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>渐变背景色:</span><Input v-model="selected.toColor" /> <ColorPicker v-if="selected.toColor" v-model="selected.toColor" />
|
||||||
|
</div>
|
||||||
|
<div :style="{backgroundImage:`linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`}" class="exhibition"></div>
|
||||||
|
<div>
|
||||||
|
选择图片:<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
|
||||||
|
></liliDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {ossManage},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: this.data.options, // 当前类型数据
|
||||||
|
showModal: false, // modal显隐
|
||||||
|
selected: {}, // 已选数据
|
||||||
|
picModelFlag: false // 图片选择器
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 打开装修modal
|
||||||
|
handleSelectModel (item,type) {
|
||||||
|
this.selected = item;
|
||||||
|
this.showModal = true
|
||||||
|
},
|
||||||
|
handleSelectLink(item,index) { // 调起选择链接弹窗
|
||||||
|
this.$refs.liliDialog.open('link')
|
||||||
|
},
|
||||||
|
// 选择链接回调
|
||||||
|
selectedLink(val) {
|
||||||
|
this.selected.url = this.$options.filters.formatLinkType(val);;
|
||||||
|
},
|
||||||
|
handleSelectImg(){ // 选择图片
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
},
|
||||||
|
// 选择图片回调
|
||||||
|
callbackSelected (val) {
|
||||||
|
this.picModelFlag = false;
|
||||||
|
this.selected.img = val.url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './setup-box.scss';
|
||||||
|
.first-page-advert{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
// margin-top: -10px;
|
||||||
|
.item{
|
||||||
|
width: 393px;
|
||||||
|
height: 170px;
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
img{margin-left: 20px;}
|
||||||
|
|
||||||
|
&:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){margin-top: 0;}
|
||||||
|
|
||||||
|
p:nth-of-type(1){
|
||||||
|
margin: 3px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
p:nth-of-type(2){
|
||||||
|
margin-top: 3px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.line{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
height: 2px;
|
||||||
|
background: url('../../../assets/festival_icon.png');
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.top-line{
|
||||||
|
width: 78px;
|
||||||
|
background-position: -1px -3px;
|
||||||
|
}
|
||||||
|
.btm-line{
|
||||||
|
background-position: 0 -11px;
|
||||||
|
width: 154px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.modal-top-advert{
|
||||||
|
align-items: start;
|
||||||
|
padding: 0 30px;
|
||||||
|
.exhibition{
|
||||||
|
width: 300px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,339 @@
|
||||||
|
<template>
|
||||||
|
<div class="new-goods">
|
||||||
|
|
||||||
|
<div class="left">
|
||||||
|
<div class="top-header setup-content" :style="{background:options.left.bgColor}">
|
||||||
|
<span>{{options.left.title}}</span>
|
||||||
|
<span>{{options.left.secondTitle}} ></span>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div><Button size="small" @click.stop="handleSelectModel(options.left,true)">编辑</Button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="con-item setup-content" v-for="(item, index) in options.left.list" :key="index">
|
||||||
|
<div>
|
||||||
|
<p>{{item.name}}</p>
|
||||||
|
<p class="describe">{{item.describe}}</p>
|
||||||
|
</div>
|
||||||
|
<img :src="item.img" alt="">
|
||||||
|
<div class="setup-box">
|
||||||
|
<div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="middle">
|
||||||
|
<div class="top-header setup-content" :style="{background:options.middle.bgColor}">
|
||||||
|
<span>{{options.middle.title}}</span>
|
||||||
|
<span>{{options.middle.secondTitle}} ></span>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div><Button size="small" @click.stop="handleSelectModel(options.middle,true)">编辑</Button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="con-item setup-content" v-for="(item, index) in options.middle.list" :key="index">
|
||||||
|
<div>
|
||||||
|
<p>{{item.name}}</p>
|
||||||
|
<p class="describe">{{item.describe}}</p>
|
||||||
|
</div>
|
||||||
|
<img :src="item.img" alt="">
|
||||||
|
<div class="setup-box">
|
||||||
|
<div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right">
|
||||||
|
<div class="top-header setup-content" :style="{background:options.right.bgColor}">
|
||||||
|
<span>{{options.right.title}}</span>
|
||||||
|
<span>{{options.right.secondTitle}} ></span>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div><Button size="small" @click.stop="handleSelectModel(options.right,true)">编辑</Button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="setup-content" v-for="(item, index) in options.right.list" :key="index">
|
||||||
|
<img :src="item.img" alt="">
|
||||||
|
<p>{{item.name}}</p>
|
||||||
|
<p>{{item.price | unitPrice('¥')}}</p>
|
||||||
|
<div class="jiaobiao" :class="'jiaobiao'+(index+1)">{{index+1}}</div>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div><Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 装修内容 -->
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
|
||||||
|
|
||||||
|
>
|
||||||
|
<div class="modal-top-advert">
|
||||||
|
<div>
|
||||||
|
<img class="show-image" width="160" height="160" v-if="selected.size && selected.size.indexOf('160*160')>=0" :src="selected.img" alt />
|
||||||
|
<img class="show-image" width="80" height="80" v-if="selected.size && selected.size.indexOf('90*90')>=0" :src="selected.img" alt />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>图片主标题:</span><Input v-model="selected.name" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>图片描述:</span><Input v-model="selected.describe" />
|
||||||
|
</div>
|
||||||
|
<div class="tips">
|
||||||
|
建议尺寸:<span>{{ selected.size }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
图片链接:<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>
|
||||||
|
|
||||||
|
<Button size="small" type="primary" @click="handleSelectGoods('')">选择商品</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 装修标题 -->
|
||||||
|
<Modal
|
||||||
|
v-model="showModal1"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
|
||||||
|
|
||||||
|
>
|
||||||
|
<div class="modal-top-advert">
|
||||||
|
<div>
|
||||||
|
<span>主标题:</span><Input v-model="selected.title" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>副标题:</span><Input v-model="selected.secondTitle" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>副标题链接:{{selected.url}}</span><Button size="small" class="ml_10" type="primary" @click="handleSelectLink">选择链接</Button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>背景色:</span><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
@selectedGoodsData="selectedGoodsData"
|
||||||
|
></liliDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
data:{
|
||||||
|
type:Object,
|
||||||
|
default:null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components:{
|
||||||
|
ossManage
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options:this.data.options, // 当前数据
|
||||||
|
showModal:false, // modal显隐
|
||||||
|
showModal1:false, // modal显隐
|
||||||
|
selected: {}, // 已选数据
|
||||||
|
picModelFlag: false // 选择图片modal
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 装修modal
|
||||||
|
handleSelectModel (item, type) {
|
||||||
|
this.selected = item;
|
||||||
|
console.warn(item);
|
||||||
|
if(type){
|
||||||
|
this.showModal1 = true
|
||||||
|
} else {
|
||||||
|
this.showModal = true
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
handleSelectLink() { // 调起选择链接弹窗
|
||||||
|
this.$refs.liliDialog.open('link')
|
||||||
|
},
|
||||||
|
handleSelectGoods(item) { // 调起选择商品
|
||||||
|
console.warn(item);
|
||||||
|
if (item) this.selected = item;
|
||||||
|
this.$refs.liliDialog.open('goods', 'single')
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$refs.liliDialog.goodsData = [this.selected]
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
// 选择链接回调
|
||||||
|
selectedLink (val) {
|
||||||
|
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||||
|
},
|
||||||
|
// 选择商品回调
|
||||||
|
selectedGoodsData (val) {
|
||||||
|
console.log(val);
|
||||||
|
let goods = val[0]
|
||||||
|
console.log(this.selected);
|
||||||
|
this.selected.img = goods.thumbnail
|
||||||
|
this.selected.price = goods.price
|
||||||
|
this.selected.name = goods.goodsName
|
||||||
|
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
|
||||||
|
},
|
||||||
|
handleSelectImg(){ // 选择图片
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
},
|
||||||
|
// 选择图片回显
|
||||||
|
callbackSelected (val) {
|
||||||
|
this.picModelFlag = false;
|
||||||
|
this.selected.img = val.url;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './setup-box.scss';
|
||||||
|
.new-goods{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
>div{
|
||||||
|
width: 393px;
|
||||||
|
height: 440px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left>.content{
|
||||||
|
>div:nth-child(1){
|
||||||
|
height: 240px;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-top: none;
|
||||||
|
border-left: none;
|
||||||
|
justify-content: space-between;
|
||||||
|
img{
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
}
|
||||||
|
.describe{margin-top: 10px;}
|
||||||
|
}
|
||||||
|
>div:nth-child(2){border-right: 1px solid #eee;}
|
||||||
|
>div:nth-child(3),>div:nth-child(4){border-bottom: 1px solid #eee;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle>.content{
|
||||||
|
>div{
|
||||||
|
border-style:solid;
|
||||||
|
border-color: #eee;
|
||||||
|
border-width: 0;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
}
|
||||||
|
>div:nth-child(1),>div:nth-child(2),>div:nth-child(3){border-right-width: 1px;}
|
||||||
|
>div:nth-child(6), >div:nth-child(3){border-bottom-width: 0;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right>.content{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
font-size: 12px;
|
||||||
|
>div{
|
||||||
|
position: relative;
|
||||||
|
width: 120px;
|
||||||
|
padding: 5px 10px 0 10px;
|
||||||
|
img{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
:nth-child(2){
|
||||||
|
height: 38px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
:nth-child(3){
|
||||||
|
color: $theme_color;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
.jiaobiao{
|
||||||
|
position: absolute;
|
||||||
|
width: 23px;
|
||||||
|
height: 23px;
|
||||||
|
top: 10px;
|
||||||
|
right: 16px;
|
||||||
|
background: url('../../../assets/festival_icon.png');
|
||||||
|
color: #FFF;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.jiaobiao1,.jiaobiao4{
|
||||||
|
background-position: -2px -30px;
|
||||||
|
}
|
||||||
|
.jiaobiao2,.jiaobiao5{
|
||||||
|
background-position: -31px -30px;
|
||||||
|
}
|
||||||
|
.jiaobiao3,.jiaobiao6{
|
||||||
|
background-position: -60px -30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>div:nth-child(4),>div:nth-child(5),>div:nth-child(6){border: none;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 50px;
|
||||||
|
padding: 0 10px;
|
||||||
|
background: #c43d7e;
|
||||||
|
color: #fff;
|
||||||
|
span:nth-child(1){
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
span:nth-child(2){
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
padding: 10px 12px 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 370px;
|
||||||
|
}
|
||||||
|
.con-item{
|
||||||
|
width: 185px;
|
||||||
|
height: 120px;
|
||||||
|
display: flex;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
img{
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.describe{
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal-top-advert{
|
||||||
|
align-items: start;
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,226 @@
|
||||||
|
<template>
|
||||||
|
<div class="not-enough">
|
||||||
|
<ul class="nav-bar setup-content">
|
||||||
|
<li v-for="(item, index) in conData.options.navList" :class="currentIndex===index?'curr':''" @click="changeCurr(index)" :key="index">
|
||||||
|
<p>{{item.title}}</p>
|
||||||
|
<p>{{item.desc}}</p>
|
||||||
|
</li>
|
||||||
|
<div class="setup-box" style="width:100px;left:1100px;">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel">编辑</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
<div class="content" v-if="showContent">
|
||||||
|
<div v-for="(item, index) in conData.options.list[currentIndex]" :key="index" class="setup-content">
|
||||||
|
<img :src="item.img" width="210" height="210" :alt="item.name">
|
||||||
|
<p>{{item.name}}</p>
|
||||||
|
<p>
|
||||||
|
<span>{{item.price | unitPrice('¥')}}</span>
|
||||||
|
<!-- <span>{{item.price | unitPrice('¥')}}</span> -->
|
||||||
|
</p>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
|
||||||
|
<table cellspacing="0">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th width="250">主标题</th>
|
||||||
|
<th width="250">描述</th>
|
||||||
|
<th width="250">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(item, index) in conData.options.navList" :key="index">
|
||||||
|
<td><Input v-model="item.title" /></td>
|
||||||
|
<td><Input v-model="item.desc" /></td>
|
||||||
|
<td v-if="index!=0">
|
||||||
|
<Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedGoodsData="selectedGoodsData"
|
||||||
|
></liliDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props:{
|
||||||
|
data:{
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex:0, // 当前商品index
|
||||||
|
conData:this.data, // 当前数据
|
||||||
|
selected:{}, // 已选数据
|
||||||
|
showModal:false, // modal显隐
|
||||||
|
showContent:true, // 选择后刷新数据用
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
data:function(val){
|
||||||
|
this.conData = val
|
||||||
|
},
|
||||||
|
conData:function(val){
|
||||||
|
this.$emit('content',val)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// tab点击切换
|
||||||
|
changeCurr(index){
|
||||||
|
this.currentIndex = index;
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
handleSelectModel (item,type) {
|
||||||
|
this.selected = item;
|
||||||
|
this.showModal = true
|
||||||
|
},
|
||||||
|
handleSelectGoods(item) { // 调起选择商品弹窗
|
||||||
|
if(item) this.selected = item;
|
||||||
|
this.$refs.liliDialog.open('goods', 'single')
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$refs.liliDialog.goodsData = [this.selected]
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
// 选择商品回调
|
||||||
|
selectedGoodsData(val){
|
||||||
|
console.log(val)
|
||||||
|
let goods = val[0]
|
||||||
|
this.selected.img = goods.thumbnail
|
||||||
|
this.selected.price = goods.price
|
||||||
|
this.selected.name = goods.goodsName
|
||||||
|
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
|
||||||
|
},
|
||||||
|
handleDelNav(index){ // 删除导航
|
||||||
|
this.conData.options.navList.splice(index,1)
|
||||||
|
this.conData.options.list.splice(index,1)
|
||||||
|
},
|
||||||
|
handleAddNav(){ // 添加导航
|
||||||
|
this.conData.options.navList.push(
|
||||||
|
{title:'',desc:''}
|
||||||
|
)
|
||||||
|
this.conData.options.list.push(
|
||||||
|
[{ img:'', name:'', price:0, url:'' },
|
||||||
|
{ img:'', name:'', price:0, url:'' },
|
||||||
|
{ img:'', name:'', price:0, url:'' },
|
||||||
|
{ img:'', name:'', price:0, url:'' },
|
||||||
|
{ img:'', name:'', price:0, url:'' },
|
||||||
|
{ img:'', name:'', price:0, url:'' },
|
||||||
|
{ img:'', name:'', price:0, url:'' },
|
||||||
|
{ img:'', name:'', price:0, url:'' },
|
||||||
|
{ img:'', name:'', price:0, url:'' },
|
||||||
|
{ img:'', name:'', price:0, url:'' },
|
||||||
|
],
|
||||||
|
)
|
||||||
|
this.showContent = false
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.showContent = true;
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import './setup-box.scss';
|
||||||
|
.nav-bar{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background-color: rgb(218, 217, 217);
|
||||||
|
height: 60px;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
li{
|
||||||
|
padding: 0 30px;
|
||||||
|
text-align: center;
|
||||||
|
p:nth-child(1){
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 50px;
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:nth-child(2){
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
p{
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
|
||||||
|
}
|
||||||
|
li:last-of-type{
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.curr{
|
||||||
|
p:nth-child(1){
|
||||||
|
background-color: $theme_color;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
p:nth-child(2){
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
>div{
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
p:nth-of-type(1){
|
||||||
|
overflow: hidden;
|
||||||
|
width: 210px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow:ellipsis;
|
||||||
|
margin: 10px 0 5px 0;
|
||||||
|
}
|
||||||
|
p:nth-of-type(2){
|
||||||
|
color: $theme_color;
|
||||||
|
font-size: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
span:nth-child(2){
|
||||||
|
text-decoration: line-through;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,418 @@
|
||||||
|
<template>
|
||||||
|
<div class="recommend">
|
||||||
|
<div class="recommend-left">
|
||||||
|
<div
|
||||||
|
class="head-recommend setup-content"
|
||||||
|
:style="{ background: msgLeft.bgColor }"
|
||||||
|
>
|
||||||
|
<span>{{ msgLeft.title }}</span>
|
||||||
|
<span>{{ msgLeft.secondTitle }}></span>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel(msgLeft, true)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-left">
|
||||||
|
<div class="setup-content">
|
||||||
|
<img :src="msgLeft.list[0].img" width="160" height="160" alt="" />
|
||||||
|
<div class="margin-left">{{ msgLeft.list[0].name }}</div>
|
||||||
|
<div class="margin-left">{{ msgLeft.list[0].describe }}</div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
:style="{ background: msgLeft.bgColor }"
|
||||||
|
class="fz_12 view-btn"
|
||||||
|
>点击查看</Button
|
||||||
|
>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
@click.stop="handleSelectModel(msgLeft.list[0])"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<template v-for="(item, index) in msgLeft.list">
|
||||||
|
<div v-if="index != 0" :key="index" class="setup-content">
|
||||||
|
<img :src="item.img" width="80" height="80" alt="" />
|
||||||
|
<div>
|
||||||
|
<div>{{ item.name }}</div>
|
||||||
|
<div>{{ item.describe }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel(item)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="recommend-right">
|
||||||
|
<div
|
||||||
|
class="head-recommend setup-content"
|
||||||
|
:style="{ background: msgRight.bgColor }"
|
||||||
|
>
|
||||||
|
<span>{{ msgRight.title }}</span>
|
||||||
|
<span>{{ msgRight.secondTitle }}></span>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel(msgRight, true)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-right">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in msgRight.list"
|
||||||
|
:key="index"
|
||||||
|
class="setup-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="right-item"
|
||||||
|
:style="{ border: index === 2 || index === 3 ? 'none' : '' }"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<span :style="{ background: msgRight.bgColor }">{{
|
||||||
|
item.name
|
||||||
|
}}</span>
|
||||||
|
<span>{{ item.describe }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="right-img">
|
||||||
|
<img :src="item.img" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel(item)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
|
||||||
|
|
||||||
|
>
|
||||||
|
<div class="modal-top-advert">
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
class="show-image"
|
||||||
|
width="160"
|
||||||
|
height="160"
|
||||||
|
v-if="selected.size && selected.size.indexOf('160*160') >= 0"
|
||||||
|
:src="selected.img"
|
||||||
|
alt
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="show-image"
|
||||||
|
width="80"
|
||||||
|
height="80"
|
||||||
|
v-if="selected.size && selected.size.indexOf('80*80') >= 0"
|
||||||
|
:src="selected.img"
|
||||||
|
alt
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
class="show-image"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
v-if="selected.size && selected.size.indexOf('100*100') >= 0"
|
||||||
|
:src="selected.img"
|
||||||
|
alt
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div><span>图片主标题:</span><Input v-model="selected.name" /></div>
|
||||||
|
<div><span>图片描述:</span><Input v-model="selected.describe" /></div>
|
||||||
|
<div class="tips">
|
||||||
|
建议尺寸:<span>{{ selected.size }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
图片链接:<span>{{ selected.url }}</span>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectLink"
|
||||||
|
>选择链接</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Button size="small" type="primary" @click="handleSelectImg"
|
||||||
|
>选择图片</Button
|
||||||
|
>
|
||||||
|
<Button size="small" type="primary" @click="handleSelectGoods"
|
||||||
|
>选择商品</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal1"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
|
||||||
|
|
||||||
|
>
|
||||||
|
<div class="modal-top-advert">
|
||||||
|
<div><span>主标题:</span><Input v-model="selected.title" /></div>
|
||||||
|
<div><span>副标题:</span><Input v-model="selected.secondTitle" /></div>
|
||||||
|
<div>
|
||||||
|
<span>副标题链接:{{ selected.url }}</span
|
||||||
|
><Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectLink"
|
||||||
|
>选择链接</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>背景色:</span><Input v-model="selected.bgColor" />
|
||||||
|
<ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
@selectedGoodsData="selectedGoodsData"
|
||||||
|
></liliDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
ossManage,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
msgLeft: this.data.options.contentLeft, // 左侧数据
|
||||||
|
msgRight: this.data.options.contentRight, // 右侧数据
|
||||||
|
showModal: false, // modal显隐
|
||||||
|
showModal1: false, // modal显隐
|
||||||
|
selected: {}, // 已选数据
|
||||||
|
picModelFlag: false, // 图片选择
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 编辑
|
||||||
|
handleSelectModel(item, type) {
|
||||||
|
this.selected = item;
|
||||||
|
if (type) {
|
||||||
|
this.showModal1 = true;
|
||||||
|
} else {
|
||||||
|
this.showModal = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSelectLink(item, index) {
|
||||||
|
// 调起选择链接弹窗
|
||||||
|
this.$refs.liliDialog.open("link");
|
||||||
|
},
|
||||||
|
handleSelectGoods(item) {
|
||||||
|
// 调起选择商品
|
||||||
|
this.$refs.liliDialog.open('goods', 'single')
|
||||||
|
},
|
||||||
|
// 选择链接回调
|
||||||
|
selectedLink(val) {
|
||||||
|
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||||
|
},
|
||||||
|
// 选择商品回调
|
||||||
|
selectedGoodsData(val) {
|
||||||
|
console.log(val);
|
||||||
|
let goods = val[0];
|
||||||
|
this.selected.img = goods.thumbnail;
|
||||||
|
this.selected.price = goods.price;
|
||||||
|
this.selected.name = goods.goodsName;
|
||||||
|
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
|
||||||
|
},
|
||||||
|
handleSelectImg() {
|
||||||
|
// 选择图片
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
},
|
||||||
|
// 选择图片回调
|
||||||
|
callbackSelected(val) {
|
||||||
|
this.picModelFlag = false;
|
||||||
|
this.selected.img = val.url;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "./setup-box.scss";
|
||||||
|
.recommend {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.recommend-left {
|
||||||
|
width: 595px;
|
||||||
|
.content-left {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
> div:nth-child(1) {
|
||||||
|
width: 189px;
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
height: 360px;
|
||||||
|
img {
|
||||||
|
margin: 40px 0 0 15px;
|
||||||
|
}
|
||||||
|
.margin-left {
|
||||||
|
margin-left: 15px;
|
||||||
|
width: 145px;
|
||||||
|
}
|
||||||
|
div:nth-of-type(1) {
|
||||||
|
font-weight: bold;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
div:nth-of-type(2) {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.view-btn {
|
||||||
|
margin-left: 15px;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> div:nth-child(2) {
|
||||||
|
width: 405px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 200px;
|
||||||
|
height: 120px;
|
||||||
|
img {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
> div:nth-child(2) {
|
||||||
|
// margin: 0 10px;
|
||||||
|
:nth-child(2) {
|
||||||
|
color: #449dae;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.recommend-right {
|
||||||
|
width: 595px;
|
||||||
|
height: 360px;
|
||||||
|
.head-recommend {
|
||||||
|
background: #a25684;
|
||||||
|
}
|
||||||
|
.content-right {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
> div {
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
height: 180px;
|
||||||
|
padding-top: 10px;
|
||||||
|
.right-item {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
height: 150px;
|
||||||
|
padding: 0 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
> div:nth-child(1) {
|
||||||
|
width: 130px;
|
||||||
|
margin-top: 30px;
|
||||||
|
span:nth-child(1) {
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0 5px;
|
||||||
|
background-color: #a25684;
|
||||||
|
display: block;
|
||||||
|
width: 120px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin: 0 10px 10px 0;
|
||||||
|
}
|
||||||
|
span:nth-child(2) {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right-img {
|
||||||
|
width: 100;
|
||||||
|
height: 100px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
img {
|
||||||
|
max-height: 100px;
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> div:nth-child(n + 1) {
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.head-recommend {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 50px;
|
||||||
|
padding: 0 10px;
|
||||||
|
background: #449dae;
|
||||||
|
color: #fff;
|
||||||
|
span:nth-child(1) {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
span:nth-child(2) {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-top-advert {
|
||||||
|
align-items: start;
|
||||||
|
padding: 0 30px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,291 @@
|
||||||
|
<template>
|
||||||
|
<div class="seckill">
|
||||||
|
<div class="desc">秒杀商品需要在促销活动中添加商品,有商品时才会在首页展示</div>
|
||||||
|
<div class="aside">
|
||||||
|
<div class="title">{{ actName }}</div>
|
||||||
|
<div class="hour">
|
||||||
|
<span>{{ currHour }}:00</span>点场 倒计时
|
||||||
|
</div>
|
||||||
|
<div class="count-down" v-if="actStatus === 1">
|
||||||
|
<span>{{ hours }}</span
|
||||||
|
><span>{{ minutes }}</span
|
||||||
|
><span>{{ seconds }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="act-status" v-else>
|
||||||
|
{{ actStatus == 0 ? "未开始" : "已结束" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<swiper ref="mySwiper" :options="swiperOptions">
|
||||||
|
<swiper-slide
|
||||||
|
v-for="(item, index) in options.list[0].goodsList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="content">
|
||||||
|
<img :src="item.img" width="140" height="140" :alt="item.name" />
|
||||||
|
<div class="ellipsis">{{ item.name }}</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ item.price | unitPrice("¥") }}</span>
|
||||||
|
<span>{{ item.originalPrice | unitPrice("¥") }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
|
||||||
|
import "swiper/swiper-bundle.css";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Swiper,
|
||||||
|
SwiperSlide,
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
swiper: directive,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: this.data.options, // 当前数据
|
||||||
|
actStatus: 0, // 0 未开始 1 进行中 2 已结束
|
||||||
|
actName: "限时秒杀",
|
||||||
|
currHour: "00", // 当前秒杀场
|
||||||
|
diffSeconds: 0, // 倒地时
|
||||||
|
hours: "00", // 小时
|
||||||
|
minutes: "00", // 分钟
|
||||||
|
seconds: "00", // 秒
|
||||||
|
interval: undefined, // 定时器
|
||||||
|
swiperOptions: {
|
||||||
|
// 轮播图参数
|
||||||
|
slidesPerView: 5,
|
||||||
|
autoplay: true,
|
||||||
|
loop: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
diffSeconds(val) {
|
||||||
|
const hours = Math.floor(val / 3600);
|
||||||
|
// 当前秒数 / 60,向下取整
|
||||||
|
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||||
|
// 对60取模,超过小时数的分钟数
|
||||||
|
const minutes = Math.floor(val / 60) % 60;
|
||||||
|
// 当前的秒数 % 60,获取到 超过小时数、分钟数的秒数(秒数)
|
||||||
|
const seconds = val % 60;
|
||||||
|
this.hours = hours < 10 ? "0" + hours : hours;
|
||||||
|
this.minutes = minutes < 10 ? "0" + minutes : minutes;
|
||||||
|
this.seconds = seconds < 10 ? "0" + seconds : seconds;
|
||||||
|
|
||||||
|
if (val === 0) {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
this.hours = 0;
|
||||||
|
this.minutes = 0;
|
||||||
|
this.seconds = 0;
|
||||||
|
this.countDown(this.options.list);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.countDown(this.options.list);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 倒计时
|
||||||
|
countDown(list) {
|
||||||
|
/**
|
||||||
|
* 默认倒计时两小时
|
||||||
|
* 如果没有开始,则显示未开始
|
||||||
|
* 进行中显示倒计时
|
||||||
|
* 今天的秒杀结束则显示已结束
|
||||||
|
*/
|
||||||
|
let nowHour = new Date().getHours();
|
||||||
|
if (nowHour < Number(list[0].time)) {
|
||||||
|
// 活动未开始
|
||||||
|
this.currHour = list[0].time;
|
||||||
|
this.actStatus = 0;
|
||||||
|
} else if (nowHour >= Number(list[list.length - 1].time + 2)) {
|
||||||
|
// 活动已结束
|
||||||
|
this.actStatus = 2;
|
||||||
|
this.currHour = list[list.length - 1].time;
|
||||||
|
} else {
|
||||||
|
// 活动进行中
|
||||||
|
this.actStatus = 1;
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
if (nowHour == Number(list[i].time)) {
|
||||||
|
this.currHour = list[i].time;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
nowHour > Number(list[i].time) &&
|
||||||
|
nowHour < Number(list[i].time + 2)
|
||||||
|
) {
|
||||||
|
this.currHour = list[i].time;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 当前0点时间戳
|
||||||
|
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
|
||||||
|
// 活动倒计时
|
||||||
|
this.diffSeconds = Math.floor(
|
||||||
|
(zeroTime +
|
||||||
|
3600 * 1000 * (this.currHour + 2) -
|
||||||
|
new Date().getTime()) /
|
||||||
|
1000
|
||||||
|
);
|
||||||
|
const that = this;
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
this.diffSeconds--;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.seckill {
|
||||||
|
width: 100%;
|
||||||
|
height: 260px;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
.desc{
|
||||||
|
position: absolute;
|
||||||
|
color: $theme_color;
|
||||||
|
left: 200px;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
.aside {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 190px;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
background-image: url("../../../assets/seckillBg.png");
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28px;
|
||||||
|
margin-top: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hour {
|
||||||
|
margin-top: 90px;
|
||||||
|
text-align: center;
|
||||||
|
span {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-down {
|
||||||
|
margin: 10px 0 0 30px;
|
||||||
|
> span {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #2f3430;
|
||||||
|
margin-right: 20px;
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
&::after {
|
||||||
|
content: ":";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: -20px;
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 18px;
|
||||||
|
width: 20px;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> span:last-child::after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.act-status {
|
||||||
|
margin: 10px 0 0 65px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
width: 1000px;
|
||||||
|
// background: #efefef;
|
||||||
|
.swiper-slide {
|
||||||
|
height: 260px;
|
||||||
|
.content {
|
||||||
|
width: 200px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 200px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
width: 160px;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
> div:nth-of-type(1):hover {
|
||||||
|
color: $theme_color;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
> div:nth-of-type(2) {
|
||||||
|
border: 1px solid $theme_color;
|
||||||
|
line-height: 24px;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
span:nth-child(1) {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 92px;
|
||||||
|
background-color: $theme_color;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
content: " ";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-color: transparent white transparent transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 24px 8px 0 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 84px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-child(2) {
|
||||||
|
color: #999;
|
||||||
|
width: 66px;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,62 @@
|
||||||
|
.setup-content{
|
||||||
|
position: relative;
|
||||||
|
&:hover{
|
||||||
|
.setup-box{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.setup-box{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: rgba(0, 0, 0, .2);
|
||||||
|
z-index: 99;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.ivu-btn{
|
||||||
|
float: right;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tab-bar{
|
||||||
|
margin-left: 20px;
|
||||||
|
table{
|
||||||
|
margin-top: 10px;
|
||||||
|
display:inline-block;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
max-height: 400px !important;
|
||||||
|
overflow: hidden auto;
|
||||||
|
}
|
||||||
|
thead{
|
||||||
|
background-color: #eee;
|
||||||
|
th{
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
td{
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
tbody>tr:hover{
|
||||||
|
background-color: aliceblue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-top-advert{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
>*{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.ivu-input-wrapper{
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,20 @@
|
||||||
|
### 楼层装修页面
|
||||||
|
|
||||||
|
#### floorList.vue 楼层列表
|
||||||
|
|
||||||
|
#### renovation.vue 楼层装修主页面
|
||||||
|
|
||||||
|
#### singleConfig.vue 右侧配置项
|
||||||
|
|
||||||
|
#### modelForm.vue 中间展示所选模块
|
||||||
|
|
||||||
|
#### modelFormItem.vue 单个模块样式
|
||||||
|
|
||||||
|
#### modelConfig.js 模块数据
|
||||||
|
|
||||||
|
#### modelList文件夹为添加的模块
|
||||||
|
|
||||||
|
### wap文件夹为移动端楼层装修
|
||||||
|
|
||||||
|
|
||||||
|
### draggable中文文档 (http://www.itxst.com/vue-draggable/tutorial.html)
|
|
@ -0,0 +1,175 @@
|
||||||
|
<template>
|
||||||
|
<div class="renovation">
|
||||||
|
<!-- 左侧模块列表 -->
|
||||||
|
<div class="model-list">
|
||||||
|
<div class="classification-title">基础模块</div>
|
||||||
|
<draggable tag="ul" :list="modelData" v-bind="{group:{ name:'model', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}" >
|
||||||
|
<li v-for="(model, index) in modelData" :key="index" class="model-item">
|
||||||
|
<Icon :type="model.icon" />
|
||||||
|
<span>{{model.name}}</span>
|
||||||
|
</li>
|
||||||
|
</draggable>
|
||||||
|
</div>
|
||||||
|
<!-- 中间展示模块 -->
|
||||||
|
<div class="show-content">
|
||||||
|
<model-form ref="modelForm" :data="modelForm"></model-form>
|
||||||
|
</div>
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<div class="btn-bar">
|
||||||
|
<Button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</Button>
|
||||||
|
<Button class="ml_10" @click="resetTemplate">还原模板</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { modelData } from "./modelConfig";
|
||||||
|
import Draggable from "vuedraggable";
|
||||||
|
import ModelForm from "./modelForm.vue";
|
||||||
|
import * as API_floor from "@/api/other.js";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Draggable,
|
||||||
|
ModelForm,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getTemplateItem(this.$route.query.id);
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
modelData, // 可选模块数据
|
||||||
|
modelForm: { list: [] }, // 模板数据
|
||||||
|
submitLoading: false, // 提交加载状态
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
saveTemplate() {
|
||||||
|
// 保存模板
|
||||||
|
this.submitTemplate(this.$route.query.pageShow ? 'OPEN' : 'CLOSE')
|
||||||
|
},
|
||||||
|
// 提交模板
|
||||||
|
submitTemplate(pageShow) {
|
||||||
|
this.submitLoading = true
|
||||||
|
const modelForm = JSON.parse(JSON.stringify(this.modelForm))
|
||||||
|
modelForm.list.unshift(this.$refs.modelForm.navList);
|
||||||
|
modelForm.list.unshift(this.$refs.modelForm.topAdvert);
|
||||||
|
const data = {
|
||||||
|
id: this.$route.query.id,
|
||||||
|
pageData: JSON.stringify(modelForm),
|
||||||
|
pageShow
|
||||||
|
};
|
||||||
|
API_floor.updateHome(this.$route.query.id, data).then((res) => {
|
||||||
|
this.submitLoading = false
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("保存模板成功");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetTemplate() {
|
||||||
|
// 还原模板
|
||||||
|
this.getTemplateItem(this.$route.query.id);
|
||||||
|
},
|
||||||
|
getTemplateItem(id) {
|
||||||
|
// 获取模板数据
|
||||||
|
API_floor.getHomeData(id).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
let pageData = res.result.pageData;
|
||||||
|
if (pageData) {
|
||||||
|
pageData = JSON.parse(pageData);
|
||||||
|
if (pageData.list[0].type === "topAdvert") {
|
||||||
|
// topAdvert 为顶部广告 navList为导航栏
|
||||||
|
this.$refs.modelForm.topAdvert = pageData.list[0];
|
||||||
|
this.$refs.modelForm.navList = pageData.list[1];
|
||||||
|
pageData.list.splice(0, 2);
|
||||||
|
this.modelForm = pageData;
|
||||||
|
} else {
|
||||||
|
this.modelForm = { list: [] };
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.modelForm = { list: [] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
modelForm: {
|
||||||
|
deep: true,
|
||||||
|
handler: function (val) {
|
||||||
|
console.log(val);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.renovation {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.model-list {
|
||||||
|
width: 120px;
|
||||||
|
height: auto;
|
||||||
|
padding: 10px;
|
||||||
|
background: #fff;
|
||||||
|
margin-top: 60px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 1px 1px 10px #999;
|
||||||
|
.classification-title {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
.model-item {
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
background: #eee;
|
||||||
|
margin-top: 10px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
&:hover {
|
||||||
|
border: 1px dashed #409eff;
|
||||||
|
color: #409eff;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ghost::after {
|
||||||
|
border: none;
|
||||||
|
height: 0;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.show-content {
|
||||||
|
margin-left: 150px;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
.ghost {
|
||||||
|
background: #fff;
|
||||||
|
height: 30px;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: "松开鼠标添加模块";
|
||||||
|
position: absolute;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px dashed #409eff;
|
||||||
|
color: #409eff;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-bar {
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
height: 50px;
|
||||||
|
padding: 10px;
|
||||||
|
box-shadow: 1px 1px 10px #999;
|
||||||
|
z-index: 99;
|
||||||
|
top: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -9,16 +9,94 @@
|
||||||
ref="table"
|
ref="table"
|
||||||
></Table>
|
></Table>
|
||||||
</Card>
|
</Card>
|
||||||
|
<Modal v-model="openModal" :title="openModalTitle" @on-ok="submit">
|
||||||
|
<h3 style="color: #ff3c2a; margin-bottom: 10px">是否需要电子面单</h3>
|
||||||
|
<RadioGroup
|
||||||
|
v-model="faceSheetForm.faceSheetFlag"
|
||||||
|
style="margin-bottom: 20px"
|
||||||
|
@on-change="getfaceSheetFlag($event)"
|
||||||
|
>
|
||||||
|
<Radio :label="true">
|
||||||
|
<span>需要</span>
|
||||||
|
</Radio>
|
||||||
|
<Radio :label="false">
|
||||||
|
<span>不需要</span>
|
||||||
|
</Radio>
|
||||||
|
</RadioGroup>
|
||||||
|
<Card v-if="onpenText" class="modalStyle">
|
||||||
|
<h3 style="color: #ff3c2a; margin-bottom: 10px">请输入详细信息</h3>
|
||||||
|
<Form ref="formValidate" :label-width="150" label-position="right" :model="faceSheetForm" :rules="ruleValidate">
|
||||||
|
<FormItem label="customerName" prop="customerName">
|
||||||
|
<Input
|
||||||
|
v-model="faceSheetForm.customerName"
|
||||||
|
type="text"
|
||||||
|
class="faceSheetInput"
|
||||||
|
></Input
|
||||||
|
></FormItem>
|
||||||
|
<FormItem label="customerPwd" prop="customerPwd">
|
||||||
|
<Input
|
||||||
|
v-model="faceSheetForm.customerPwd"
|
||||||
|
type="text"
|
||||||
|
class="faceSheetInput"
|
||||||
|
></Input>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="customerPwd" prop="monthCode">
|
||||||
|
<Input
|
||||||
|
v-model="faceSheetForm.monthCode"
|
||||||
|
type="text"
|
||||||
|
class="faceSheetInput"
|
||||||
|
></Input
|
||||||
|
></FormItem>
|
||||||
|
<FormItem label="customerPwd" prop="sendSite">
|
||||||
|
<Input
|
||||||
|
v-model="faceSheetForm.sendSite"
|
||||||
|
type="text"
|
||||||
|
class="faceSheetInput"
|
||||||
|
></Input
|
||||||
|
></FormItem>
|
||||||
|
<FormItem label="customerPwd" prop="sendStaff">
|
||||||
|
<Input
|
||||||
|
v-model="faceSheetForm.sendStaff"
|
||||||
|
type="text"
|
||||||
|
class="faceSheetInput"
|
||||||
|
></Input
|
||||||
|
></FormItem>
|
||||||
|
<FormItem label="支付方式" prop="payType">
|
||||||
|
<Select
|
||||||
|
v-model="faceSheetForm.payType"
|
||||||
|
class="faceSheetInput">
|
||||||
|
<Option value="1">现付</Option>
|
||||||
|
<Option value="2">到付</Option>
|
||||||
|
<Option value="3">月结</Option>
|
||||||
|
<Option value="4">第三方支付(仅SF支持)</Option>
|
||||||
|
</Select
|
||||||
|
></FormItem>
|
||||||
|
<FormItem label="快递类型" prop="expType">
|
||||||
|
<Input
|
||||||
|
v-model="faceSheetForm.expType"
|
||||||
|
type="text"
|
||||||
|
class="faceSheetInput"/>
|
||||||
|
</FormItem>
|
||||||
|
<div style="width:100%;text-align:center;">
|
||||||
|
<a style="padding-right: 20px" @click="frontDownload('use')">使用说明</a>
|
||||||
|
<a @click="frontDownload('type')">快递类型</a>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</Card>
|
||||||
|
<br/>
|
||||||
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as API_Shop from "@/api/shops";
|
import * as API_Shop from "@/api/shops";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "logistics",
|
name: "logistics",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
row: {},
|
||||||
|
openModal: false,
|
||||||
loading: true, // 表单加载状态
|
loading: true, // 表单加载状态
|
||||||
searchForm: {
|
searchForm: {
|
||||||
// 搜索框初始化对象
|
// 搜索框初始化对象
|
||||||
|
@ -27,6 +105,27 @@
|
||||||
sort: "createTime", // 默认排序字段
|
sort: "createTime", // 默认排序字段
|
||||||
order: "desc", // 默认排序方式
|
order: "desc", // 默认排序方式
|
||||||
},
|
},
|
||||||
|
openModalTitle: '开启信息',
|
||||||
|
ruleValidate: {
|
||||||
|
customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||||
|
payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }],
|
||||||
|
expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||||
|
customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||||
|
monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||||
|
sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||||
|
sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }],
|
||||||
|
|
||||||
|
},
|
||||||
|
faceSheetForm: {
|
||||||
|
faceSheetFlag: false,
|
||||||
|
customerName: "",
|
||||||
|
payType: '1',
|
||||||
|
expType: '1',
|
||||||
|
customerPwd: "",
|
||||||
|
monthCode: "",
|
||||||
|
sendSite: "",
|
||||||
|
sendStaff: "",
|
||||||
|
},
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
title: "物流公司",
|
title: "物流公司",
|
||||||
|
@ -40,9 +139,9 @@
|
||||||
minWidth: 120,
|
minWidth: 120,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: (h, params) => {
|
render: (h, params) => {
|
||||||
if(params.row.selected === null || params.row.selected === ""){
|
if (params.row.selected === null || params.row.selected === "") {
|
||||||
return h("div", [h("tag", {props: {color: "volcano"}}, "关闭")]);
|
return h("div", [h("tag", {props: {color: "volcano"}}, "关闭")]);
|
||||||
}else{
|
} else {
|
||||||
return h("div", [h("tag", {props: {color: "green"}}, "开启")]);
|
return h("div", [h("tag", {props: {color: "green"}}, "开启")]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -53,7 +152,7 @@
|
||||||
align: "center",
|
align: "center",
|
||||||
width: 200,
|
width: 200,
|
||||||
render: (h, params) => {
|
render: (h, params) => {
|
||||||
if(params.row.selected === null){
|
if (params.row.selected === null) {
|
||||||
return h("div", [
|
return h("div", [
|
||||||
h(
|
h(
|
||||||
"Button",
|
"Button",
|
||||||
|
@ -74,7 +173,7 @@
|
||||||
"开启"
|
"开启"
|
||||||
),
|
),
|
||||||
]);
|
]);
|
||||||
}else{
|
} else {
|
||||||
return h("div", [
|
return h("div", [
|
||||||
h(
|
h(
|
||||||
"Button",
|
"Button",
|
||||||
|
@ -94,6 +193,21 @@
|
||||||
},
|
},
|
||||||
"关闭"
|
"关闭"
|
||||||
),
|
),
|
||||||
|
h(
|
||||||
|
"Button",
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
type: "info",
|
||||||
|
size: "small",
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
click: () => {
|
||||||
|
this.getFaceSheetInfo(params.row);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"修改"
|
||||||
|
),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -101,9 +215,21 @@
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
data: [], // 表单数据
|
data: [], // 表单数据
|
||||||
|
onpenText: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
//获取状态
|
||||||
|
getfaceSheetFlag(e) {
|
||||||
|
console.log(e);
|
||||||
|
if (e === true) {
|
||||||
|
console.log("打开");
|
||||||
|
this.onpenText = true;
|
||||||
|
} else {
|
||||||
|
console.log("关闭");
|
||||||
|
this.onpenText = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
// 初始化数据
|
// 初始化数据
|
||||||
init() {
|
init() {
|
||||||
this.getDataList();
|
this.getDataList();
|
||||||
|
@ -121,24 +247,79 @@
|
||||||
},
|
},
|
||||||
// 开启
|
// 开启
|
||||||
open(v) {
|
open(v) {
|
||||||
this.$Modal.confirm({
|
this.row = v;
|
||||||
title: "确认开启",
|
this.openModal = true;
|
||||||
// 记得确认修改此处
|
this.searchForm.faceSheetFlag = "false"; //开弹框 等于v
|
||||||
content: "您确认开启此物流公司?",
|
if (this.searchForm.faceSheetFlag == "true") {
|
||||||
loading: true,
|
this.onpenText = true;
|
||||||
onOk: () => {
|
} else {
|
||||||
API_Shop.logisticsChecked(v.id).then((res) => {
|
this.onpenText = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//修改
|
||||||
|
getFaceSheetInfo(v) {
|
||||||
|
this.row = v;
|
||||||
|
this.logisticsId = v.logisticsId;
|
||||||
|
this.openModalTitle = '修改信息';
|
||||||
|
API_Shop.getIsCheck(this.logisticsId).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
// this.searchForm = res.result.recordes;
|
||||||
|
this.faceSheetForm.faceSheetFlag = res.result.faceSheetFlag; //开弹框 等于v
|
||||||
|
if (this.faceSheetForm.faceSheetFlag === true) {
|
||||||
|
this.onpenText = true;
|
||||||
|
} else {
|
||||||
|
this.faceSheetForm.faceSheetFlag = false
|
||||||
|
this.onpenText = false;
|
||||||
|
}
|
||||||
|
this.faceSheetForm.customerName = res.result.customerName;
|
||||||
|
this.faceSheetForm.customerPwd = res.result.customerPwd;
|
||||||
|
this.faceSheetForm.monthCode = res.result.monthCode;
|
||||||
|
this.faceSheetForm.sendSite = res.result.sendSite;
|
||||||
|
this.faceSheetForm.sendStaff = res.result.sendStaff;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.openModal = true;
|
||||||
|
},
|
||||||
|
frontDownload(val) {
|
||||||
|
var a = document.createElement("a"); //创建一个<a></a>标签
|
||||||
|
//根据点击按钮来下载不同文件
|
||||||
|
if (val === 'use') {
|
||||||
|
a.href = "static/open.xlsx"; // 给a标签的href属性值加上地址,注意,这里是绝对路径,不用加 点.
|
||||||
|
a.download = "使用说明.xlsx"; //设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
|
||||||
|
} else if (val === 'type') {
|
||||||
|
a.href = "static/logisticsType.xlsx"; // 给a标签的href属性值加上地址,注意,这里是绝对路径,不用加 点.
|
||||||
|
a.download = "快递类型.xlsx"; //设置下载文件文件名,这里加上.xlsx指定文件类型,pdf文件就指定.fpd即可
|
||||||
|
}
|
||||||
|
a.style.display = "none"; // 障眼法藏起来a标签
|
||||||
|
document.body.appendChild(a); // 将a标签追加到文档对象中
|
||||||
|
a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了
|
||||||
|
a.remove(); // 一次性的,用完就删除a标签
|
||||||
|
},
|
||||||
|
|
||||||
|
submit() {
|
||||||
|
if ( this.row.selected === null || this.row.selected === "") {
|
||||||
|
API_Shop.logisticsChecked(
|
||||||
|
this.row.logisticsId,
|
||||||
|
this.faceSheetForm
|
||||||
|
).then((res) => {
|
||||||
|
this.openModal = false;
|
||||||
this.$Modal.remove();
|
this.$Modal.remove();
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.$Message.success("物流公司开启成功");
|
this.$Message.success("物流公司开启成功");
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
API_Shop.editChecked(this.logisticsId, this.faceSheetForm).then((res) => {
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("修改成功");
|
||||||
|
this.init();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
// 关闭
|
// 关闭
|
||||||
close(v){
|
close(v) {
|
||||||
this.$Modal.confirm({
|
this.$Modal.confirm({
|
||||||
title: "确认关闭",
|
title: "确认关闭",
|
||||||
content: "您确认关闭此物流公司?",
|
content: "您确认关闭此物流公司?",
|
||||||
|
@ -158,5 +339,11 @@
|
||||||
mounted() {
|
mounted() {
|
||||||
this.init();
|
this.init();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.faceSheetInput{
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -47,6 +47,9 @@
|
||||||
style="width: 30%"
|
style="width: 30%"
|
||||||
></Input>
|
></Input>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
<FormItem label="店铺楼层" prop="content" class="wangEditor">
|
||||||
|
<i-switch v-model="form.pageShow" @on-change="pageShow"></i-switch>
|
||||||
|
</FormItem>
|
||||||
<Form-item>
|
<Form-item>
|
||||||
<Button
|
<Button
|
||||||
@click="handleSubmit"
|
@click="handleSubmit"
|
||||||
|
@ -58,6 +61,77 @@
|
||||||
</Form-item>
|
</Form-item>
|
||||||
</Form>
|
</Form>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
|
<TabPane label="发货地址">
|
||||||
|
<Form
|
||||||
|
ref="addressGoods"
|
||||||
|
:model="addressGoods"
|
||||||
|
:label-width="100"
|
||||||
|
:rules="addressGoodsValidate"
|
||||||
|
>
|
||||||
|
<FormItem label="发货人姓名" prop="salesConsignorName">
|
||||||
|
<Input
|
||||||
|
v-model="addressGoods.salesConsignorName"
|
||||||
|
maxlength="11"
|
||||||
|
clearable
|
||||||
|
style="width: 20%"
|
||||||
|
>
|
||||||
|
</Input>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="发货人手机号" prop="salesConsignorMobile">
|
||||||
|
<Input
|
||||||
|
v-model="addressGoods.salesConsignorMobile"
|
||||||
|
maxlength="11"
|
||||||
|
clearable
|
||||||
|
style="width: 20%"
|
||||||
|
>
|
||||||
|
</Input>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="地址" prop="salesConsignorAddressId">
|
||||||
|
<Input
|
||||||
|
v-model="regionGoods"
|
||||||
|
clearable
|
||||||
|
disabled
|
||||||
|
style="width: 20%"
|
||||||
|
v-if="showRegion == false"
|
||||||
|
>
|
||||||
|
</Input>
|
||||||
|
<regionMap
|
||||||
|
style="width: 20%"
|
||||||
|
@selected="selectedRegionGoods"
|
||||||
|
v-if="showRegion == true"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
v-if="showRegion == false"
|
||||||
|
@click="regionClicks"
|
||||||
|
type="primary"
|
||||||
|
style="margin-left: 8px"
|
||||||
|
>修改
|
||||||
|
</Button>
|
||||||
|
</FormItem>
|
||||||
|
<!-- <FormItem label="地址名称" prop="salesConsignorAddressPath">
|
||||||
|
<Input
|
||||||
|
v-model="addressGoods.salesConsignorAddressPath"
|
||||||
|
clearable
|
||||||
|
style="width: 20%"
|
||||||
|
>
|
||||||
|
</Input>
|
||||||
|
</FormItem> -->
|
||||||
|
<FormItem label="详细地址" prop="salesConsignorDetail">
|
||||||
|
<Input
|
||||||
|
v-model="addressGoods.salesConsignorDetail"
|
||||||
|
clearable
|
||||||
|
style="width: 20%"
|
||||||
|
>
|
||||||
|
</Input>
|
||||||
|
</FormItem>
|
||||||
|
<Button
|
||||||
|
@click="SetAddressGoods"
|
||||||
|
type="primary"
|
||||||
|
style="margin-left: 8px"
|
||||||
|
>确认
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
</TabPane>
|
||||||
<TabPane label="退货地址" name="REFUND_GOODS_ADDRESS">
|
<TabPane label="退货地址" name="REFUND_GOODS_ADDRESS">
|
||||||
<Form
|
<Form
|
||||||
ref="addressForm"
|
ref="addressForm"
|
||||||
|
@ -191,6 +265,7 @@ import liliMap from "@/views/my-components/map/index";
|
||||||
import regionMap from "@/views/lili-components/region";
|
import regionMap from "@/views/lili-components/region";
|
||||||
import * as RegExp from "@/libs/RegExp.js";
|
import * as RegExp from "@/libs/RegExp.js";
|
||||||
import Cookies from "js-cookie";
|
import Cookies from "js-cookie";
|
||||||
|
import {editDeliverAddress, getDeliverAddress} from "../../api/shops";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "shopSetting",
|
name: "shopSetting",
|
||||||
|
@ -257,6 +332,7 @@ export default {
|
||||||
storeAddressDetail: "", //详细地址
|
storeAddressDetail: "", //详细地址
|
||||||
storeAddressIdPath: "", //地址
|
storeAddressIdPath: "", //地址
|
||||||
storeDesc: "", // 店铺描述
|
storeDesc: "", // 店铺描述
|
||||||
|
pageShow:false,
|
||||||
},
|
},
|
||||||
|
|
||||||
// 表单验证规则
|
// 表单验证规则
|
||||||
|
@ -302,12 +378,64 @@ export default {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
submitLoading: false, // 添加或编辑提交状态
|
submitLoading: false, // 添加或编辑提交状态
|
||||||
|
//发货地址
|
||||||
|
addressGoods: {
|
||||||
|
salesConsignorName:" ",
|
||||||
|
salesConsignorMobile:" ",
|
||||||
|
salesConsignorAddressId: " ",
|
||||||
|
salesConsignorAddressPath: " ",
|
||||||
|
salesConsignorDetail: " ",
|
||||||
|
},
|
||||||
|
regionGoods:"",//发货地址
|
||||||
|
addressGoodsValidate: {
|
||||||
|
salesConsignorName: [
|
||||||
|
{ required: true, message: "请输入发货人姓名", trigger: "blur" },
|
||||||
|
],
|
||||||
|
salesConsignorMobile: [
|
||||||
|
{ required: true, message: "手机号不能为空", trigger: "blur" },
|
||||||
|
{
|
||||||
|
pattern: RegExp.mobile,
|
||||||
|
trigger: "blur",
|
||||||
|
message: "请输入正确的手机号",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
salesConsignorDetail: [
|
||||||
|
{ required: true, message: "请输入详细地址", trigger: "blur" },
|
||||||
|
],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 初始化数据
|
// 初始化数据
|
||||||
init() {
|
init() {
|
||||||
this.getShopInfo();
|
this.getShopInfo();
|
||||||
|
this.getDeliverAddress()
|
||||||
|
},
|
||||||
|
selectedRegionGoods(val){
|
||||||
|
this.regionGoods = val[1];
|
||||||
|
this.regionIdS = val[0];
|
||||||
|
},
|
||||||
|
regionClicks(){
|
||||||
|
this.showRegion = true;
|
||||||
|
this.regionIdS = "";
|
||||||
|
},
|
||||||
|
SetAddressGoods(){
|
||||||
|
console.log(this.$refs.addressGoods)
|
||||||
|
if (this.regionIdS == "") {
|
||||||
|
this.$Message.error("请选择地址");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$refs.addressGoods.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.addressGoods.salesConsignorAddressPath = this.regionGoods;
|
||||||
|
this.addressGoods.salesConsignorAddressId = this.regionIdS;
|
||||||
|
API_Shop.editDeliverAddress(this.addressGoods).then(res=>{
|
||||||
|
if(res.success){
|
||||||
|
this.$Message.success("修改成功")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
//获取店铺信息
|
//获取店铺信息
|
||||||
getShopInfo() {
|
getShopInfo() {
|
||||||
|
@ -331,6 +459,21 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
pageShow(type) {
|
||||||
|
this.form.pageShow = type
|
||||||
|
},
|
||||||
|
getDeliverAddress(){
|
||||||
|
API_Shop.getDeliverAddress().then(res=>{
|
||||||
|
if(res.success){
|
||||||
|
if(res.result!= '' && res.result != null){
|
||||||
|
console.log(89898999998)
|
||||||
|
this.addressGoods = res.result;
|
||||||
|
this.regionGoods = res.result.salesConsignorAddressPath;
|
||||||
|
this.regionIdS = res.result.salesConsignorAddressId;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
//修改售后地址
|
//修改售后地址
|
||||||
regionClick() {
|
regionClick() {
|
||||||
this.showRegion = true;
|
this.showRegion = true;
|
||||||
|
|
|
@ -0,0 +1,782 @@
|
||||||
|
<template>
|
||||||
|
<div class="search">
|
||||||
|
<Card>
|
||||||
|
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||||||
|
<Form-item label="店员名称">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
v-model="searchForm.clerkName"
|
||||||
|
placeholder="请输入店员名称"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
/>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="联系方式">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
v-model="searchForm.mobile"
|
||||||
|
placeholder="请输入联系方式"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
/>
|
||||||
|
</Form-item>
|
||||||
|
<Form-item label="部门">
|
||||||
|
<department-choose @on-change="handleSelectDep" style="width: 150px;" ref="dep"></department-choose>
|
||||||
|
</Form-item>
|
||||||
|
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||||
|
</Form>
|
||||||
|
<Row class="operation padding-row">
|
||||||
|
<Button @click="add" type="primary">添加</Button>
|
||||||
|
<Button @click="delAll">批量删除</Button>
|
||||||
|
<Button @click="resetPass">重置密码</Button>
|
||||||
|
</Row>
|
||||||
|
<br>
|
||||||
|
<Table
|
||||||
|
:loading="loading"
|
||||||
|
border
|
||||||
|
:columns="columns"
|
||||||
|
:data="data"
|
||||||
|
sortable="custom"
|
||||||
|
@on-sort-change="changeSort"
|
||||||
|
@on-selection-change="showSelect"
|
||||||
|
ref="table"
|
||||||
|
></Table>
|
||||||
|
<Row type="flex" justify="end" class="mt_10">
|
||||||
|
<Page
|
||||||
|
:current="searchForm.pageNumber"
|
||||||
|
:total="total"
|
||||||
|
:page-size="searchForm.pageSize"
|
||||||
|
@on-change="changePage"
|
||||||
|
@on-page-size-change="changePageSize"
|
||||||
|
:page-size-opts="[10,20,50]"
|
||||||
|
size="small"
|
||||||
|
show-total
|
||||||
|
show-elevator
|
||||||
|
show-sizer
|
||||||
|
></Page>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
:title="modalTitle"
|
||||||
|
v-model="userEditModalVisible"
|
||||||
|
:mask-closable="false"
|
||||||
|
:width="500"
|
||||||
|
:styles="{top: '30px'}"
|
||||||
|
>
|
||||||
|
<Form ref="form" :model="editForm" :label-width="80" :rules="formValidate">
|
||||||
|
<FormItem label="手机号">
|
||||||
|
<Input v-model="mobile" disabled/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="店员名称">
|
||||||
|
<Input v-model="clerkName" disabled/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="超级管理员" prop="isSuper">
|
||||||
|
<RadioGroup type="button" button-style="solid" v-model="editForm.isSuper">
|
||||||
|
<Radio :label="1">
|
||||||
|
<span>是</span>
|
||||||
|
</Radio>
|
||||||
|
<Radio :label="0">
|
||||||
|
<span>否</span>
|
||||||
|
</Radio>
|
||||||
|
</RadioGroup>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<FormItem label="角色" prop="roles" v-if="editForm.isSuper == 0">
|
||||||
|
<Select v-model="editForm.roles" multiple>
|
||||||
|
<Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
|
||||||
|
|
||||||
|
</Option>
|
||||||
|
</Select>
|
||||||
|
</FormItem>
|
||||||
|
<Form-item label="所属部门">
|
||||||
|
<department-tree-choose @on-change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
|
||||||
|
</Form-item>
|
||||||
|
|
||||||
|
</Form>
|
||||||
|
<div slot="footer">
|
||||||
|
<Button type="text" @click="userEditModalVisible = false">取消</Button>
|
||||||
|
<Button type="primary" :loading="submitLoading" @click="updateSubmit">提交</Button>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
:title="modalTitle"
|
||||||
|
v-model="userModalVisible"
|
||||||
|
:mask-closable="false"
|
||||||
|
:width="500"
|
||||||
|
:styles="{top: '30px'}"
|
||||||
|
>
|
||||||
|
<Form ref="form" :model="form" :label-width="80" :rules="formValidate">
|
||||||
|
<FormItem label="手机号" prop="mobile">
|
||||||
|
<Input placeholder="请输入要添加的会员手机号码" maxlength="11" style="width: 75%" v-model="form.mobile"
|
||||||
|
autocomplete="off" @on-change="checkClerks"/>
|
||||||
|
<Button v-if="!memberCheck" @click="checkClerk">校验</Button>
|
||||||
|
<Button v-if="memberCheck" @click="checkAgainClerk">重新校验</Button>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem v-if="newMember" label="用户名" prop="username">
|
||||||
|
<Input v-model="form.username" autocomplete="off"/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem v-if="oldMember" label="用户名" prop="username">
|
||||||
|
<Input v-model="form.username" autocomplete="off" disabled/>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<FormItem label="密码" prop="password" v-if="newMember" :error="errorPass">
|
||||||
|
<Input type="password" password v-model="form.password" autocomplete="off"/>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="超级管理员" prop="isSuper" v-if="newMember || oldMember">
|
||||||
|
<RadioGroup type="button" button-style="solid" v-model="form.isSuper">
|
||||||
|
<Radio :label="1">
|
||||||
|
<span>是</span>
|
||||||
|
</Radio>
|
||||||
|
<Radio :label="0">
|
||||||
|
<span>否</span>
|
||||||
|
</Radio>
|
||||||
|
</RadioGroup>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="角色" prop="roles" v-if="(oldMember || newMember) && form.isSuper == 0">
|
||||||
|
<Select v-model="form.roles" multiple>
|
||||||
|
<Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
|
||||||
|
|
||||||
|
</Option>
|
||||||
|
</Select>
|
||||||
|
</FormItem>
|
||||||
|
<Form-item label="所属部门" v-if="oldMember || newMember">
|
||||||
|
<department-tree-choose @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
|
||||||
|
</Form-item>
|
||||||
|
</Form>
|
||||||
|
|
||||||
|
<div slot="footer">
|
||||||
|
<Button type="text" @click="userModalVisible = false">取消</Button>
|
||||||
|
<Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
checkClerk,
|
||||||
|
getUserListData,
|
||||||
|
getAllRoleList,
|
||||||
|
addUser,
|
||||||
|
editOtherUser,
|
||||||
|
enableClerk,
|
||||||
|
deleteClerk,
|
||||||
|
resetPassword,
|
||||||
|
getClerk
|
||||||
|
} from "@/api/index";
|
||||||
|
import {validateMobile} from "@/libs/validate";
|
||||||
|
import departmentChoose from "@/views/my-components/lili/department-choose";
|
||||||
|
import departmentTreeChoose from "@/views/my-components/lili/department-tree-choose";
|
||||||
|
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "clerk-manage",
|
||||||
|
components: {
|
||||||
|
departmentChoose,
|
||||||
|
departmentTreeChoose,
|
||||||
|
uploadPicInput,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
open:0,
|
||||||
|
loading: true, // 加载状态
|
||||||
|
selectCount: 0, // 已选数量
|
||||||
|
selectList: [], // 已选数据列表
|
||||||
|
searchForm: { // 请求参数
|
||||||
|
clerkName: "",
|
||||||
|
departmentId: "",
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
sort: "createTime",
|
||||||
|
order: "desc"
|
||||||
|
},
|
||||||
|
modalType: 0, // 新增编辑标识
|
||||||
|
userModalVisible: false, // 用户modal显隐
|
||||||
|
userEditModalVisible:false,
|
||||||
|
modalTitle: "", // modal标题
|
||||||
|
form: { // 表单
|
||||||
|
username: "",
|
||||||
|
mobile: 0,
|
||||||
|
sex: "",
|
||||||
|
isSuper: 0,
|
||||||
|
roles: [],
|
||||||
|
departmentId: "",
|
||||||
|
departmentTitle: ""
|
||||||
|
},
|
||||||
|
|
||||||
|
editForm: { // 表单
|
||||||
|
isSuper: 0,
|
||||||
|
roles: [],
|
||||||
|
departmentId: "",
|
||||||
|
departmentTitle: ""
|
||||||
|
},
|
||||||
|
mobile: "",
|
||||||
|
clerkName: "",
|
||||||
|
|
||||||
|
newMember: false,
|
||||||
|
oldMember: false,
|
||||||
|
memberCheck: false,
|
||||||
|
roleList: [], // 角色列表
|
||||||
|
errorPass: "", // 错误提示
|
||||||
|
formValidate: { // 验证规则
|
||||||
|
username: [
|
||||||
|
{required: true, message: "用户名不能为空", trigger: "blur"}
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{required: true, message: "密码不能为空", trigger: "blur"}
|
||||||
|
],
|
||||||
|
mobile: [
|
||||||
|
{required: true, message: "手机号不能为空", trigger: "blur"},
|
||||||
|
{validator: validateMobile, trigger: "blur"}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
submitLoading: false, // 提交状态
|
||||||
|
columns: [ // 表头
|
||||||
|
{
|
||||||
|
type: "selection",
|
||||||
|
width: 60,
|
||||||
|
align: "center",
|
||||||
|
fixed: "left"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "店员名称",
|
||||||
|
key: "clerkName",
|
||||||
|
minWidth: 100,
|
||||||
|
sortable: true,
|
||||||
|
fixed: "left"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "手机号码",
|
||||||
|
key: "mobile",
|
||||||
|
minWidth: 100,
|
||||||
|
fixed: "left"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "店主",
|
||||||
|
key: "status",
|
||||||
|
align: "center",
|
||||||
|
width: 130,
|
||||||
|
render: (h, params) => {
|
||||||
|
if (params.row.shopkeeper == true) {
|
||||||
|
return h("div", [
|
||||||
|
h("Badge", {
|
||||||
|
props: {
|
||||||
|
status: "success",
|
||||||
|
text: "是"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
} else if (params.row.shopkeeper == false) {
|
||||||
|
return h("div", [
|
||||||
|
h("Badge", {
|
||||||
|
props: {
|
||||||
|
status: "error",
|
||||||
|
text: "否"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "超级管理员",
|
||||||
|
key: "status",
|
||||||
|
align: "center",
|
||||||
|
width: 130,
|
||||||
|
render: (h, params) => {
|
||||||
|
if (params.row.isSuper == true) {
|
||||||
|
return h("div", [
|
||||||
|
h("Badge", {
|
||||||
|
props: {
|
||||||
|
status: "success",
|
||||||
|
text: "是"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
} else if (params.row.isSuper == false) {
|
||||||
|
return h("div", [
|
||||||
|
h("Badge", {
|
||||||
|
props: {
|
||||||
|
status: "error",
|
||||||
|
text: "否"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "状态",
|
||||||
|
key: "status",
|
||||||
|
align: "center",
|
||||||
|
width: 130,
|
||||||
|
render: (h, params) => {
|
||||||
|
if (params.row.status == true) {
|
||||||
|
return h("div", [
|
||||||
|
h("Badge", {
|
||||||
|
props: {
|
||||||
|
status: "success",
|
||||||
|
text: "启用"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
} else if (params.row.status == false) {
|
||||||
|
return h("div", [
|
||||||
|
h("Badge", {
|
||||||
|
props: {
|
||||||
|
status: "error",
|
||||||
|
text: "禁用"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
filters: [
|
||||||
|
{
|
||||||
|
label: "启用",
|
||||||
|
value: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "禁用",
|
||||||
|
value: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
filterMultiple: false,
|
||||||
|
filterMethod(value, row) {
|
||||||
|
return row.status == value;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "创建时间",
|
||||||
|
key: "createTime",
|
||||||
|
sortable: true,
|
||||||
|
sortType: "desc",
|
||||||
|
width: 180
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
key: "action",
|
||||||
|
width: 200,
|
||||||
|
align: "center",
|
||||||
|
fixed: "right",
|
||||||
|
render: (h, params) => {
|
||||||
|
let enableOrDisable = "";
|
||||||
|
if (params.row.status == true) {
|
||||||
|
enableOrDisable = h(
|
||||||
|
"Button",
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
size: "small"
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
marginRight: "5px"
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
click: () => {
|
||||||
|
this.disable(params.row);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"禁用"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
enableOrDisable = h(
|
||||||
|
"Button",
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
type: "success",
|
||||||
|
size: "small"
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
marginRight: "5px"
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
click: () => {
|
||||||
|
this.enable(params.row);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"启用"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return h("div", [
|
||||||
|
h(
|
||||||
|
"Button",
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
type: "info",
|
||||||
|
size: "small"
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
marginRight: "5px"
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
click: () => {
|
||||||
|
this.edit(params.row);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"编辑"
|
||||||
|
),
|
||||||
|
enableOrDisable,
|
||||||
|
h(
|
||||||
|
"Button",
|
||||||
|
{
|
||||||
|
props: {
|
||||||
|
type: "error",
|
||||||
|
size: "small"
|
||||||
|
},
|
||||||
|
on: {
|
||||||
|
click: () => {
|
||||||
|
this.remove(params.row);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"删除"
|
||||||
|
)
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
data: [], // 用户数据
|
||||||
|
total: 0, // 总数
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 初始化数据
|
||||||
|
init() {
|
||||||
|
this.getUserList();
|
||||||
|
},
|
||||||
|
checkClerks() {
|
||||||
|
this.open = this.form.mobile.length;
|
||||||
|
console.log(this.open)
|
||||||
|
if(this.open == 11 ){
|
||||||
|
this.checkClerk();
|
||||||
|
}
|
||||||
|
if(this.open < 11){
|
||||||
|
this.checkAgainClerk()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择部门回调
|
||||||
|
handleSelectDepTree(v) {
|
||||||
|
if (v) {
|
||||||
|
this.form.departmentId = v.departmentId;
|
||||||
|
this.form.departmentTitle = v.departmentTitle;
|
||||||
|
} else {
|
||||||
|
this.form.departmentId = "";
|
||||||
|
this.form.departmentTitle = "";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择部门回调
|
||||||
|
handleEditSelectDepTree(v) {
|
||||||
|
if (v) {
|
||||||
|
this.editForm.departmentId = v.departmentId;
|
||||||
|
this.editForm.departmentTitle = v.departmentTitle;
|
||||||
|
} else {
|
||||||
|
this.editForm.departmentId = "";
|
||||||
|
this.editForm.departmentTitle = "";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//重新校验会员
|
||||||
|
checkAgainClerk() {
|
||||||
|
this.memberCheck = false
|
||||||
|
this.newMember = false
|
||||||
|
this.oldMember = false
|
||||||
|
},
|
||||||
|
//检测当前店员
|
||||||
|
checkClerk() {
|
||||||
|
if (this.form.mobile) {
|
||||||
|
this.newMember = false
|
||||||
|
this.oldMember = false
|
||||||
|
checkClerk(this.form.mobile).then(res => {
|
||||||
|
if (!res.result.id) {
|
||||||
|
this.newMember = true
|
||||||
|
} else {
|
||||||
|
this.oldMember = true
|
||||||
|
this.form.username = res.result.username
|
||||||
|
this.form.password = res.result.password
|
||||||
|
}
|
||||||
|
this.form.isSuper = 1
|
||||||
|
this.memberCheck = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
// 搜索项部门选择
|
||||||
|
handleSelectDep(v) {
|
||||||
|
this.searchForm.departmentId = v;
|
||||||
|
},
|
||||||
|
// 分页 修改页码
|
||||||
|
changePage(v) {
|
||||||
|
this.searchForm.pageNumber = v;
|
||||||
|
this.getUserList();
|
||||||
|
this.clearSelectAll();
|
||||||
|
},
|
||||||
|
// 分页 修改页数
|
||||||
|
changePageSize(v) {
|
||||||
|
this.searchForm.pageSize = v;
|
||||||
|
this.searchForm.pageNumber = 1;
|
||||||
|
this.getUserList();
|
||||||
|
},
|
||||||
|
getUserList() {
|
||||||
|
// 多条件搜索用户列表
|
||||||
|
this.loading = true;
|
||||||
|
getUserListData(this.searchForm).then(res => {
|
||||||
|
this.loading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.data = res.result.records;
|
||||||
|
this.total = res.result.total;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 搜索
|
||||||
|
handleSearch() {
|
||||||
|
this.searchForm.pageNumber = 1;
|
||||||
|
this.searchForm.pageSize = 10;
|
||||||
|
this.getUserList();
|
||||||
|
},
|
||||||
|
// 排序
|
||||||
|
changeSort(e) {
|
||||||
|
this.searchForm.sort = e.key;
|
||||||
|
this.searchForm.order = e.order;
|
||||||
|
if (e.order == "normal") {
|
||||||
|
this.searchForm.order = "";
|
||||||
|
}
|
||||||
|
this.getUserList();
|
||||||
|
},
|
||||||
|
// 获取角色列表
|
||||||
|
getRoleList() {
|
||||||
|
let params = {
|
||||||
|
pageSize: 100
|
||||||
|
}
|
||||||
|
getAllRoleList(params).then(res => {
|
||||||
|
if (res.success) {
|
||||||
|
this.roleList = res.result.records;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 重置密码
|
||||||
|
resetPass() {
|
||||||
|
if (this.selectCount == 0) {
|
||||||
|
this.$Message.warning('请选中数据后重试!');
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: "确认重置",
|
||||||
|
content:
|
||||||
|
"您确认要重置所选的 " +
|
||||||
|
this.selectCount +
|
||||||
|
" 条用户数据密码为【123456】?",
|
||||||
|
loading: true,
|
||||||
|
onOk: () => {
|
||||||
|
let ids = "";
|
||||||
|
this.selectList.forEach(function (e) {
|
||||||
|
ids += e.id + ",";
|
||||||
|
});
|
||||||
|
ids = ids.substring(0, ids.length - 1);
|
||||||
|
console.warn(ids)
|
||||||
|
resetPassword(ids).then(res => {
|
||||||
|
this.$Modal.remove();
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("操作成功");
|
||||||
|
this.clearSelectAll();
|
||||||
|
this.getUserList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updateSubmit(){
|
||||||
|
this.submitLoading = true;
|
||||||
|
console.warn(this.editForm)
|
||||||
|
editOtherUser(this.editForm.id,this.editForm).then(res => {
|
||||||
|
this.submitLoading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("操作成功");
|
||||||
|
this.getUserList();
|
||||||
|
this.userEditModalVisible = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 确认提交
|
||||||
|
submitUser() {
|
||||||
|
this.$refs.form.validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
// 添加用户 避免编辑后传入id
|
||||||
|
const params = JSON.parse(JSON.stringify(this.form))
|
||||||
|
console.warn(params)
|
||||||
|
delete params.id;
|
||||||
|
delete params.status;
|
||||||
|
if (this.newMember) {
|
||||||
|
if (params.password == "" || params.password == undefined) {
|
||||||
|
this.errorPass = "密码不能为空";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (params.password.length < 6) {
|
||||||
|
this.errorPass = "密码长度不得少于6位";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//todo
|
||||||
|
params.password = this.md5(params.password)
|
||||||
|
} else {
|
||||||
|
params.password = this.form.password
|
||||||
|
}
|
||||||
|
this.submitLoading = true;
|
||||||
|
addUser(params).then(res => {
|
||||||
|
this.submitLoading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("操作成功");
|
||||||
|
this.getUserList();
|
||||||
|
this.userModalVisible = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 添加用户
|
||||||
|
add() {
|
||||||
|
// this.checkClerks();
|
||||||
|
this.modalType = 0;
|
||||||
|
this.modalTitle = "添加店员";
|
||||||
|
this.$refs.form.resetFields();
|
||||||
|
this.form = { // 表单
|
||||||
|
username: "",
|
||||||
|
mobile: "",
|
||||||
|
isSuper: 0,
|
||||||
|
roles: [],
|
||||||
|
departmentId: "",
|
||||||
|
departmentTitle: ""
|
||||||
|
},
|
||||||
|
this.oldMember = false
|
||||||
|
this.newMember = false
|
||||||
|
this.userModalVisible = true;
|
||||||
|
},
|
||||||
|
// 编辑用户
|
||||||
|
edit(v) {
|
||||||
|
console.warn(v)
|
||||||
|
getClerk(v.id).then(res => {
|
||||||
|
console.warn(res)
|
||||||
|
this.mobile = res.result.mobile
|
||||||
|
this.clerkName = res.result.clerkName
|
||||||
|
this.editForm.isSuper = 0
|
||||||
|
this.editForm.id = res.result.id
|
||||||
|
if(res.result.isSuper){
|
||||||
|
this.editForm.isSuper = 1
|
||||||
|
}
|
||||||
|
this.editForm.departmentId = res.result.departmentId
|
||||||
|
this.$refs.depTree.setData(res.result.departmentId, res.result.departmentTitle);
|
||||||
|
let selectRolesId = [];
|
||||||
|
if (res.result.roles) {
|
||||||
|
res.result.roles.forEach(function (e) {
|
||||||
|
selectRolesId.push(e.id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.editForm.roles = selectRolesId;
|
||||||
|
|
||||||
|
this.modalTitle = "修改店员";
|
||||||
|
this.userEditModalVisible = true;
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
// 启用
|
||||||
|
enable(v) {
|
||||||
|
let params = {
|
||||||
|
status: true
|
||||||
|
}
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: "确认启用",
|
||||||
|
content: "您确认要启用用户 " + v.clerkName + " ?",
|
||||||
|
loading: true,
|
||||||
|
onOk: () => {
|
||||||
|
enableClerk(v.id, params).then(res => {
|
||||||
|
this.$Modal.remove();
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("操作成功");
|
||||||
|
this.getUserList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 禁用
|
||||||
|
disable(v) {
|
||||||
|
let params = {
|
||||||
|
status: false
|
||||||
|
}
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: "确认禁用",
|
||||||
|
content: "您确认要禁用用户 " + v.clerkName + " ?",
|
||||||
|
loading: true,
|
||||||
|
onOk: () => {
|
||||||
|
enableClerk(v.id, params).then(res => {
|
||||||
|
this.$Modal.remove();
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("操作成功");
|
||||||
|
this.getUserList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除用户
|
||||||
|
remove(v) {
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: "确认删除",
|
||||||
|
content: "您确认要删除用户 " + v.clerkName + " ?",
|
||||||
|
loading: true,
|
||||||
|
onOk: () => {
|
||||||
|
deleteClerk(v.id).then(res => {
|
||||||
|
this.$Modal.remove();
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("删除成功");
|
||||||
|
this.getUserList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 选中状态
|
||||||
|
showSelect(e) {
|
||||||
|
this.selectList = e;
|
||||||
|
this.selectCount = e.length;
|
||||||
|
},
|
||||||
|
// 清除选中状态
|
||||||
|
clearSelectAll() {
|
||||||
|
this.$refs.table.selectAll(false);
|
||||||
|
},
|
||||||
|
// 批量删除
|
||||||
|
delAll() {
|
||||||
|
if (this.selectCount <= 0) {
|
||||||
|
this.$Message.warning("您还未选择要删除的数据");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: "确认删除",
|
||||||
|
content: "您确认要删除所选的 " + this.selectCount + " 条店员?",
|
||||||
|
loading: true,
|
||||||
|
onOk: () => {
|
||||||
|
let ids = "";
|
||||||
|
this.selectList.forEach(function (e) {
|
||||||
|
ids += e.id + ",";
|
||||||
|
});
|
||||||
|
ids = ids.substring(0, ids.length - 1);
|
||||||
|
deleteClerk(ids).then(res => {
|
||||||
|
this.$Modal.remove();
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("删除成功");
|
||||||
|
this.clearSelectAll();
|
||||||
|
this.getUserList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init();
|
||||||
|
this.getRoleList();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
|
@ -0,0 +1,408 @@
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="search">
|
||||||
|
<Card>
|
||||||
|
<Row class="operation">
|
||||||
|
<i-switch v-model="strict" size="large" style="margin-right: 5px">
|
||||||
|
<span slot="open">级联</span>
|
||||||
|
<span slot="close">单选</span>
|
||||||
|
</i-switch>
|
||||||
|
<Button @click="addRoot">添加部门</Button>
|
||||||
|
<Button @click="add" type="primary">添加子部门</Button>
|
||||||
|
<Button @click="delAll">批量删除</Button>
|
||||||
|
<Button @click="getParentList">刷新</Button>
|
||||||
|
</Row>
|
||||||
|
<Row type="flex" justify="start">
|
||||||
|
<Col :md="8" :lg="8" :xl="6">
|
||||||
|
<Alert show-icon>
|
||||||
|
当前选择编辑:
|
||||||
|
<span class="select-title">{{ editTitle }}</span>
|
||||||
|
<a class="select-clear" v-if="form.id" @click="cancelSelect"
|
||||||
|
>取消选择</a
|
||||||
|
>
|
||||||
|
</Alert>
|
||||||
|
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||||
|
<Tree
|
||||||
|
ref="tree"
|
||||||
|
:data="data"
|
||||||
|
:load-data="loadData"
|
||||||
|
show-checkbox
|
||||||
|
@on-check-change="changeSelect"
|
||||||
|
@on-select-change="selectTree"
|
||||||
|
:check-strictly="!strict"
|
||||||
|
></Tree>
|
||||||
|
<Spin size="large" fix v-if="loading"></Spin>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||||
|
<Form
|
||||||
|
ref="form"
|
||||||
|
:model="form"
|
||||||
|
:label-width="100"
|
||||||
|
:rules="formValidate"
|
||||||
|
>
|
||||||
|
<FormItem label="部门名称" prop="title">
|
||||||
|
<Input v-model="form.title" />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="选择角色">
|
||||||
|
<Select
|
||||||
|
:loading="userLoading"
|
||||||
|
not-found-text="暂无角色"
|
||||||
|
v-model="selectedRole"
|
||||||
|
multiple
|
||||||
|
>
|
||||||
|
<Option v-for="item in users" :value="item.id" :key="item.id">{{
|
||||||
|
item.name
|
||||||
|
}}</Option>
|
||||||
|
</Select>
|
||||||
|
</FormItem>
|
||||||
|
|
||||||
|
<FormItem label="排序值" prop="sortOrder">
|
||||||
|
<Tooltip
|
||||||
|
trigger="hover"
|
||||||
|
placement="right"
|
||||||
|
content="值越小越靠前,支持小数"
|
||||||
|
>
|
||||||
|
<InputNumber
|
||||||
|
:max="1000"
|
||||||
|
:min="0"
|
||||||
|
v-model="form.sortOrder"
|
||||||
|
></InputNumber>
|
||||||
|
</Tooltip>
|
||||||
|
</FormItem>
|
||||||
|
<Form-item>
|
||||||
|
<Button
|
||||||
|
style="margin-right: 5px"
|
||||||
|
@click="submitEdit"
|
||||||
|
:loading="submitLoading"
|
||||||
|
type="primary"
|
||||||
|
>修改并保存</Button
|
||||||
|
>
|
||||||
|
<Button @click="handleReset">重置</Button>
|
||||||
|
</Form-item>
|
||||||
|
</Form>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
:title="modalTitle"
|
||||||
|
v-model="modalVisible"
|
||||||
|
:mask-closable="false"
|
||||||
|
:width="500"
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
ref="formAdd"
|
||||||
|
:model="formAdd"
|
||||||
|
:label-width="85"
|
||||||
|
:rules="formValidate"
|
||||||
|
>
|
||||||
|
<div v-if="showParent">
|
||||||
|
<FormItem label="上级部门:">{{ form.title }}</FormItem>
|
||||||
|
</div>
|
||||||
|
<FormItem label="部门名称" prop="title">
|
||||||
|
<Input v-model="formAdd.title" />
|
||||||
|
</FormItem>
|
||||||
|
<FormItem label="排序值" prop="sortOrder">
|
||||||
|
<Tooltip
|
||||||
|
trigger="hover"
|
||||||
|
placement="right"
|
||||||
|
content="值越小越靠前,支持小数"
|
||||||
|
>
|
||||||
|
<InputNumber
|
||||||
|
:max="1000"
|
||||||
|
:min="0"
|
||||||
|
v-model="formAdd.sortOrder"
|
||||||
|
></InputNumber>
|
||||||
|
</Tooltip>
|
||||||
|
</FormItem>
|
||||||
|
</Form>
|
||||||
|
<div slot="footer">
|
||||||
|
<Button type="text" @click="cancelAdd">取消</Button>
|
||||||
|
<Button type="primary" :loading="submitLoading" @click="submitAdd"
|
||||||
|
>提交</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
initDepartment,
|
||||||
|
loadDepartment,
|
||||||
|
addDepartment,
|
||||||
|
editDepartment,
|
||||||
|
deleteDepartment,
|
||||||
|
getUserByDepartmentId,
|
||||||
|
getRoleList,
|
||||||
|
updateDepartmentRole,
|
||||||
|
} from "@/api/index";
|
||||||
|
export default {
|
||||||
|
name: "store-department-manage",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading: true, // 加载状态
|
||||||
|
maxHeight: "500px", // 最大高度
|
||||||
|
strict: true, // 级联还是单选
|
||||||
|
userLoading: false, // 选择角色加载状态
|
||||||
|
loadingEdit: false, // 编辑加载状态
|
||||||
|
modalVisible: false, // modal显隐
|
||||||
|
selectList: [], // 已选列表
|
||||||
|
selectCount: 0, // 已选总数
|
||||||
|
showParent: false, // 展示父级
|
||||||
|
modalTitle: "", // modal标题
|
||||||
|
editTitle: "", // 编辑标题
|
||||||
|
selectedRole: [], //选择的角色
|
||||||
|
searchKey: "", // 搜索关键字
|
||||||
|
form: { // 提交表单
|
||||||
|
id: "",
|
||||||
|
title: "",
|
||||||
|
parentId: "",
|
||||||
|
parentTitle: "",
|
||||||
|
sortOrder: 0,
|
||||||
|
status: 0,
|
||||||
|
},
|
||||||
|
|
||||||
|
formAdd: {}, // 新增表单
|
||||||
|
formValidate: { // 验证规则
|
||||||
|
title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
||||||
|
sortOrder: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
type: "number",
|
||||||
|
message: "排序值不能为空",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
submitLoading: false, // 提交loading
|
||||||
|
data: [], // 部门数据
|
||||||
|
dataEdit: [], // 编辑时部门数据
|
||||||
|
users: [], // 用户
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
this.getParentList();
|
||||||
|
},
|
||||||
|
// 获取部门数据
|
||||||
|
getParentList() {
|
||||||
|
this.loading = true;
|
||||||
|
initDepartment().then((res) => {
|
||||||
|
this.loading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.data = res.result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 动态加载二级数据
|
||||||
|
loadData(item, callback) {
|
||||||
|
loadDepartment(item.id).then((res) => {
|
||||||
|
this.loadingEdit = false;
|
||||||
|
if (res.success) {
|
||||||
|
console.log(res.result);
|
||||||
|
callback(res.result);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 点击树
|
||||||
|
selectTree(v) {
|
||||||
|
if (v.length > 0) {
|
||||||
|
// 转换null为""
|
||||||
|
for (let attr in v[0]) {
|
||||||
|
if (v[0][attr] == null) {
|
||||||
|
v[0][attr] = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let str = JSON.stringify(v[0]);
|
||||||
|
let data = JSON.parse(str);
|
||||||
|
|
||||||
|
this.editTitle = data.title;
|
||||||
|
// 加载部门用户数据
|
||||||
|
this.userLoading = true;
|
||||||
|
|
||||||
|
getUserByDepartmentId(data.id).then((res) => {
|
||||||
|
let way =[]
|
||||||
|
res.result && res.result.forEach((item) => {
|
||||||
|
way.push(item.roleId)
|
||||||
|
})
|
||||||
|
this.$set(this,'selectedRole',way)
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
getRoleList({
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSize: 10000,
|
||||||
|
}).then((res) => {
|
||||||
|
this.userLoading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.users = res.result.records;
|
||||||
|
// 回显
|
||||||
|
this.form = data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.cancelSelect();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 取消选择
|
||||||
|
cancelSelect() {
|
||||||
|
let data = this.$refs.tree.getSelectedNodes()[0];
|
||||||
|
if (data) {
|
||||||
|
data.selected = false;
|
||||||
|
}
|
||||||
|
this.$refs.form.resetFields();
|
||||||
|
delete this.form.id;
|
||||||
|
this.editTitle = "";
|
||||||
|
},
|
||||||
|
// 选择上级部门
|
||||||
|
selectTreeEdit(v) {
|
||||||
|
|
||||||
|
if (v.length > 0) {
|
||||||
|
// 转换null为""
|
||||||
|
for (let attr in v[0]) {
|
||||||
|
if (v[0][attr] == null) {
|
||||||
|
v[0][attr] = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let str = JSON.stringify(v[0]);
|
||||||
|
let data = JSON.parse(str);
|
||||||
|
this.form.parentId = data.id;
|
||||||
|
this.form.parentTitle = data.title;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 取消添加部门
|
||||||
|
cancelAdd() {
|
||||||
|
this.modalVisible = false;
|
||||||
|
},
|
||||||
|
// 重置表单
|
||||||
|
handleReset() {
|
||||||
|
this.$refs.form.resetFields();
|
||||||
|
this.form.status = 0;
|
||||||
|
},
|
||||||
|
// 提交表单
|
||||||
|
submitEdit() {
|
||||||
|
this.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (!this.form.id) {
|
||||||
|
this.$Message.warning("请先点击选择要修改的部门");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let roleWay = [];
|
||||||
|
this.selectedRole.forEach((item) => {
|
||||||
|
let role = {
|
||||||
|
departmentId: this.form.id,
|
||||||
|
roleId: item,
|
||||||
|
};
|
||||||
|
roleWay.push(role);
|
||||||
|
});
|
||||||
|
|
||||||
|
Promise.all([
|
||||||
|
editDepartment(this.form.id, this.form),
|
||||||
|
updateDepartmentRole(this.form.id, roleWay)
|
||||||
|
]).then((res) => {
|
||||||
|
console.warn(res)
|
||||||
|
this.submitLoading = false;
|
||||||
|
if (res[0].success) {
|
||||||
|
this.$Message.success("编辑成功");
|
||||||
|
this.init();
|
||||||
|
this.modalVisible = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 确认添加部门
|
||||||
|
submitAdd() {
|
||||||
|
this.$refs.formAdd.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.submitLoading = true;
|
||||||
|
addDepartment(this.formAdd).then((res) => {
|
||||||
|
this.submitLoading = false;
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("添加成功");
|
||||||
|
this.init();
|
||||||
|
this.modalVisible = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 添加子部门
|
||||||
|
add() {
|
||||||
|
if (this.form.id == "" || this.form.id == null) {
|
||||||
|
this.$Message.warning("请先点击选择一个部门");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.modalTitle = "添加子部门";
|
||||||
|
this.showParent = true;
|
||||||
|
|
||||||
|
this.formAdd = {
|
||||||
|
parentId: this.form.id,
|
||||||
|
sortOrder: 0,
|
||||||
|
status: 0,
|
||||||
|
};
|
||||||
|
this.modalVisible = true;
|
||||||
|
},
|
||||||
|
// 添加一级部门
|
||||||
|
addRoot() {
|
||||||
|
this.modalTitle = "添加一级部门";
|
||||||
|
this.showParent = false;
|
||||||
|
this.formAdd = {
|
||||||
|
parentId: 0,
|
||||||
|
sortOrder: 0,
|
||||||
|
status: 0,
|
||||||
|
};
|
||||||
|
this.modalVisible = true;
|
||||||
|
},
|
||||||
|
// 选中回调
|
||||||
|
changeSelect(v) {
|
||||||
|
console.log(v);
|
||||||
|
this.selectCount = v.length;
|
||||||
|
this.selectList = v;
|
||||||
|
},
|
||||||
|
// 批量删除部门
|
||||||
|
delAll() {
|
||||||
|
if (this.selectCount <= 0) {
|
||||||
|
this.$Message.warning("您还未勾选要删除的数据");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$Modal.confirm({
|
||||||
|
title: "确认删除",
|
||||||
|
content:
|
||||||
|
"您确认要删除所选的 " + this.selectCount + " 条数据及其下级所有数据?",
|
||||||
|
loading: true,
|
||||||
|
onOk: () => {
|
||||||
|
let ids = "";
|
||||||
|
this.selectList.forEach(function (e) {
|
||||||
|
ids += e.id + ",";
|
||||||
|
});
|
||||||
|
ids = ids.substring(0, ids.length - 1);
|
||||||
|
deleteDepartment(ids).then((res) => {
|
||||||
|
this.$Modal.remove();
|
||||||
|
if (res.success) {
|
||||||
|
this.$Message.success("删除成功");
|
||||||
|
this.selectList = [];
|
||||||
|
this.selectCount = 0;
|
||||||
|
this.cancelSelect();
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 计算高度
|
||||||
|
let height = document.documentElement.clientHeight;
|
||||||
|
this.maxHeight = Number(height - 287) + "px";
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "@/styles/tree-common.scss";
|
||||||
|
|
||||||
|
</style>
|