优化店铺端代码，减少报错信息，动态cdn加载，优化速度30%+
lemon橪
parent
7caa2fd40d
commit
e6d8d87c31
|
|
@ -13,38 +13,20 @@
|
|||
"@amap/amap-jsapi-loader": "0.0.7",
|
||||
"@antv/g2": "^4.1.14",
|
||||
"axios": "^0.21.1",
|
||||
"core-js": "^3.6.5",
|
||||
"countup.js": "^2.0.4",
|
||||
"date-fns": "^1.30.1",
|
||||
"dplayer": "^1.26.0",
|
||||
"gitalk": "^1.6.2",
|
||||
"html2canvas": "^1.0.0-rc.5",
|
||||
"js-cookie": "^2.2.1",
|
||||
"node-sass": "^4.14.1",
|
||||
"pinyin": "^2.9.0",
|
||||
"print-js": "^1.0.63",
|
||||
"qrcodejs2": "0.0.2",
|
||||
"quill": "^1.3.7",
|
||||
"sass-loader": "^8.0.2",
|
||||
"sockjs-client": "^1.4.0",
|
||||
"stompjs": "^2.3.3",
|
||||
"swiper": "^6.3.5",
|
||||
"uuid": "^8.3.2",
|
||||
"view-design": "^4.6.1",
|
||||
"vue": "^2.6.10",
|
||||
"vue-awesome": "^4.0.2",
|
||||
"vue-awesome-swiper": "^4.1.1",
|
||||
"vue-clipboard2": "^0.3.0",
|
||||
"vue-cropper": "^0.4.9",
|
||||
"vue-i18n": "^8.15.1",
|
||||
"vue-json-excel": "^0.3.0",
|
||||
"vue-json-pretty": "^1.4.1",
|
||||
"vue-lazyload": "^1.3.3",
|
||||
"vue-qr": "^2.3.0",
|
||||
"vue-router": "^3.1.3",
|
||||
"vuedraggable": "^2.23.2",
|
||||
"vuex": "^3.4.0",
|
||||
"wangeditor": "^4.6.13",
|
||||
"xlsx": "^0.16.2",
|
||||
"xss": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,108 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
|
||||
<link rel="icon" href="./logo.ico" type="image/x-icon">
|
||||
<title>lili store</title>
|
||||
<meta name="keywords"
|
||||
content="keywords">
|
||||
<meta name="description"
|
||||
content="description">
|
||||
<!-- 部署CDN优化 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-i18n@8.15.1/dist/vue-i18n.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/view-design@4.1.1/dist/styles/iview.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/view-design@4.1.1/dist/iview.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-lazyload@1.3.3/vue-lazyload.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.15.3/dist/xlsx.full.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.25.0/dist/DPlayer.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/print-js@1.0.63/dist/print.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue-json-pretty@1.6.2/vue-json-pretty.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/gitalk@1.5.0/dist/gitalk.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/wangeditor@3.1.1/release/wangEditor.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vuedraggable@2.23.2/dist/vuedraggable.umd.min.js"></script>
|
||||
<script src="https://v.vaptcha.com/v3.js"></script>
|
||||
<style>
|
||||
.page-loading-wrap {
|
||||
padding: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.half-circle-spinner,
|
||||
.half-circle-spinner * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.half-circle-spinner {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.half-circle-spinner .circle {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
border: calc(35px / 10) solid transparent;
|
||||
}
|
||||
|
||||
.half-circle-spinner .circle.circle-1 {
|
||||
border-top-color: #5cadff;
|
||||
animation: half-circle-spinner-animation 1s infinite;
|
||||
}
|
||||
|
||||
.half-circle-spinner .circle.circle-2 {
|
||||
border-bottom-color: #5cadff;
|
||||
animation: half-circle-spinner-animation 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes half-circle-spinner-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
|
||||
<link rel="icon" href="./logo.ico" type="image/x-icon" />
|
||||
<title>lili store</title>
|
||||
<meta name="keywords" content="keywords" />
|
||||
<meta name="description" content="description" />
|
||||
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
|
||||
<link rel="stylesheet" href="<%=css%>" />
|
||||
<% } %>
|
||||
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
|
||||
<script src="<%=js%>"></script>
|
||||
<% } %>
|
||||
<style>
|
||||
.page-loading-wrap {
|
||||
padding: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
.half-circle-spinner,
|
||||
.half-circle-spinner * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but lili-admin doesn't work properly without JavaScript enabled. Please enable it to
|
||||
continue.</strong>
|
||||
</noscript>
|
||||
<div id="app">
|
||||
<div class="page-loading-wrap">
|
||||
<div class="half-circle-spinner">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
.half-circle-spinner {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.half-circle-spinner .circle {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
border: calc(35px / 10) solid transparent;
|
||||
}
|
||||
|
||||
.half-circle-spinner .circle.circle-1 {
|
||||
border-top-color: #5cadff;
|
||||
animation: half-circle-spinner-animation 1s infinite;
|
||||
}
|
||||
|
||||
.half-circle-spinner .circle.circle-2 {
|
||||
border-bottom-color: #5cadff;
|
||||
animation: half-circle-spinner-animation 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes half-circle-spinner-animation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong
|
||||
>We're sorry but lili-admin doesn't work properly without JavaScript
|
||||
enabled. Please enable it to continue.</strong
|
||||
>
|
||||
</noscript>
|
||||
<div id="app">
|
||||
<div class="page-loading-wrap">
|
||||
<div class="half-circle-spinner">
|
||||
<div class="circle circle-1"></div>
|
||||
<div class="circle circle-2"></div>
|
||||
</div>
|
||||
<h4 style="margin-top:20px;">正在加载资源...</h4>
|
||||
</div>
|
||||
<h4 style="margin-top:20px;">正在加载资源...</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
// 统一请求路径前缀在libs/axios.js中修改
|
||||
import {getRequest, postRequest, putRequest, deleteRequest, importRequest, getRequestWithNoToken} from '@/libs/axios';
|
||||
|
||||
// Vaptcha ID
|
||||
export const vaptchaID = "5dce36188713b71e70a41eb7"
|
||||
|
||||
// 获取数据字典
|
||||
export const getDictData = "/dictData/getByType/"
|
||||
// Websocket
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ util.getRouterObjByName = function (routers, name) {
|
|||
|
||||
util.handleTitle = function (vm, item) {
|
||||
if (typeof item.title == 'object') {
|
||||
return vm.$t(item.title.i18n);
|
||||
return item.title;
|
||||
} else {
|
||||
return item.title;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import VueI18n from 'vue-i18n';
|
||||
import zhLocale from './lang/zh-CN';
|
||||
import enLocale from './lang/en-US';
|
||||
import zhCnLocale from 'view-design/src/locale/lang/zh-CN';
|
||||
import enUsLocale from 'view-design/src/locale/lang/en-US';
|
||||
|
||||
Vue.use(VueI18n);
|
||||
|
||||
// 根据浏览器信息自动设置语言
|
||||
const navLang = navigator.language;
|
||||
const localLang = (navLang == 'zh-CN' || navLang == 'en-US') ? navLang : false;
|
||||
const lang = window.localStorage.lang || localLang || 'zh-CN';
|
||||
|
||||
Vue.config.lang = lang;
|
||||
|
||||
// 多语言配置 vue-i18n 6.x+
|
||||
Vue.locale = () => { };
|
||||
const messages = {
|
||||
'zh-CN': Object.assign(zhCnLocale, zhLocale),
|
||||
'en-US': Object.assign(enUsLocale, enLocale)
|
||||
};
|
||||
const i18n = new VueI18n({
|
||||
locale: lang,
|
||||
messages
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
export default {
|
||||
lili: 'lili',
|
||||
usernameLogin: 'UsernameLogin',
|
||||
mobileLogin: 'MobileLogin',
|
||||
autoLogin: 'Auto Login',
|
||||
forgetPass: 'Forget Password',
|
||||
otherLogin: 'Sign in with',
|
||||
regist: 'Register',
|
||||
login: 'Login',
|
||||
logining: 'Logining...',
|
||||
home: 'home',
|
||||
switchLangTitle: 'Switch Lang',
|
||||
international: 'Switch Lang',
|
||||
userCenter: 'Account Center',
|
||||
changePass: 'Account Pass',
|
||||
logout: 'Logout',
|
||||
tagOption: 'Label Options',
|
||||
closeAll: 'Close All',
|
||||
closeOthers: 'Close Others',
|
||||
help: 'Help',
|
||||
privacy: 'Privacy',
|
||||
terms: 'Terms',
|
||||
rights: 'All Rights Reserved'
|
||||
};
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
export default {
|
||||
lili: 'lili',
|
||||
usernameLogin: '账户密码登录',
|
||||
mobileLogin: '手机号登录',
|
||||
autoLogin: '自动登录',
|
||||
forgetPass: '忘记密码',
|
||||
otherLogin: '其他方式登录',
|
||||
regist: '注册账户',
|
||||
login: '登录',
|
||||
logining: '登录中...',
|
||||
home: '首页',
|
||||
switchLangTitle: '切换语言',
|
||||
international: '多语言切换',
|
||||
userCenter: '个人中心',
|
||||
changePass: '修改密码',
|
||||
logout: '退出登录',
|
||||
tagOption: '标签选项',
|
||||
closeAll: '关闭全部',
|
||||
closeOthers: '关闭其他',
|
||||
help: '帮助',
|
||||
privacy: '隐私',
|
||||
terms: '条款',
|
||||
rights: '版权所有'
|
||||
};
|
||||
|
|
@ -11,7 +11,6 @@ import vueQr from "vue-qr";
|
|||
import App from "./App";
|
||||
import { router } from "./router/index";
|
||||
import store from "./store";
|
||||
import i18n from "@/locale";
|
||||
|
||||
import {
|
||||
getRequest,
|
||||
|
|
@ -27,7 +26,6 @@ import util from "@/libs/util";
|
|||
import dictUtil from "@/libs/dictUtil";
|
||||
|
||||
import VueLazyload from "vue-lazyload";
|
||||
import VueClipboard from "vue-clipboard2";
|
||||
|
||||
import * as filters from "@/utils/filters"; // global filter
|
||||
|
||||
|
|
@ -38,11 +36,9 @@ Vue.use(VueLazyload, {
|
|||
error: require("./assets/img-error.png"),
|
||||
loading: require("./assets/loading2.gif")
|
||||
});
|
||||
Vue.use(ViewUI, {
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
});
|
||||
|
||||
Vue.use(VueClipboard);
|
||||
Vue.use(ViewUI);
|
||||
|
||||
Vue.component("vue-qr", vueQr); //此处将vue-qr添加为全局组件
|
||||
|
||||
// 挂载全局使用的方法
|
||||
|
|
@ -84,7 +80,6 @@ new Vue({
|
|||
el: "#app",
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
render: h => h(App),
|
||||
data: {
|
||||
currentPageName: ""
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export const otherRouter = {
|
|||
children: [
|
||||
{
|
||||
path: "home",
|
||||
title: { i18n: "home" },
|
||||
title: "首页",
|
||||
name: "home_index",
|
||||
component: () => import("@/views/home/home.vue")
|
||||
},
|
||||
|
|
@ -132,7 +132,7 @@ export const otherRouter = {
|
|||
title: "订单详情",
|
||||
name: "order-detail",
|
||||
component: () => import("@/views/order/order/orderDetail.vue")
|
||||
},
|
||||
}
|
||||
|
||||
// {
|
||||
// path: "/*",
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
<Avatar :src="userInfo.storeLogo" style="background: #fff;margin-left: 10px;"></Avatar>
|
||||
</div>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem name="changePass">{{ $t('changePass') }}</DropdownItem>
|
||||
<DropdownItem name="loginOut" divided>{{ $t('logout') }}</DropdownItem>
|
||||
<DropdownItem name="changePass">切换</DropdownItem>
|
||||
<DropdownItem name="loginOut" divided>退出</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
<span class="goods-category-name">{{ this.baseInfoForm.categoryName[0] }}</span>
|
||||
<span> > {{ this.baseInfoForm.categoryName[1] }}</span>
|
||||
<span> > {{ this.baseInfoForm.categoryName[2] }}</span>
|
||||
|
||||
|
||||
</FormItem>
|
||||
<FormItem label="商品名称" prop="goodsName">
|
||||
<Input type="text" v-model="baseInfoForm.goodsName" placeholder="商品名称" clearable style="width: 260px"/>
|
||||
<Input type="text" v-model="baseInfoForm.goodsName" placeholder="商品名称" clearable style="width: 260px" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="商品卖点" prop="sellingPoint">
|
||||
<Input v-model="baseInfoForm.sellingPoint" type="textarea" :rows="4" style="width: 260px"/>
|
||||
<Input v-model="baseInfoForm.sellingPoint" type="textarea" :rows="4" style="width: 260px" />
|
||||
</FormItem>
|
||||
<FormItem label="商品品牌" prop="brandId">
|
||||
<Select v-model="baseInfoForm.brandId" filterable style="width: 200px">
|
||||
|
|
@ -28,14 +28,12 @@
|
|||
<div class="form-item-view">
|
||||
<FormItem class="form-item-view-el" label="计量单位" prop="goodsUnit">
|
||||
<Select v-model="baseInfoForm.goodsUnit" style="width: 100px">
|
||||
<Option v-for="unit in goodsUnitList" :key="unit" :value="unit">{{ unit }}
|
||||
<Option v-for="(unit,i) in goodsUnitList" :key="i" :value="unit">{{ unit }}
|
||||
</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem class="form-item-view-el" label="销售模式" prop="salesModel">
|
||||
<RadioGroup type="button"
|
||||
v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'"
|
||||
button-style="solid"
|
||||
<RadioGroup type="button" v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'" button-style="solid"
|
||||
v-model="baseInfoForm.salesModel">
|
||||
<Radio title="零售型" label="RETAIL">零售型</Radio>
|
||||
<Radio title="批发型" label="WHOLESALE">批发型</Radio>
|
||||
|
|
@ -50,23 +48,21 @@
|
|||
<h4>商品规格及图片</h4>
|
||||
<div class="form-item-view">
|
||||
<FormItem label="商品编号" prop="sn">
|
||||
<Input type="text" v-model="baseInfoForm.sn" placeholder="商品编号" clearable style="width: 260px"/>
|
||||
<Input type="text" v-model="baseInfoForm.sn" placeholder="商品编号" clearable style="width: 260px" />
|
||||
</FormItem>
|
||||
<FormItem label="商品价格" prop="price">
|
||||
<Input type="text" v-model="baseInfoForm.price" placeholder="商品价格" clearable style="width: 260px"/>
|
||||
<Input type="text" v-model="baseInfoForm.price" placeholder="商品价格" clearable style="width: 260px" />
|
||||
</FormItem>
|
||||
<FormItem label="市场价格" prop="cost">
|
||||
<Input type="text" v-model="baseInfoForm.cost" placeholder="市场价格" clearable style="width: 260px"/>
|
||||
<Input type="text" v-model="baseInfoForm.cost" placeholder="市场价格" clearable style="width: 260px" />
|
||||
</FormItem>
|
||||
<FormItem class="form-item-view-el required" label="商品图片" prop="goodsGalleryFiles">
|
||||
<div style="display:flex;flex-wrap:flex-start;">
|
||||
<vuedraggable
|
||||
:list="baseInfoForm.goodsGalleryFiles"
|
||||
:animation="200"
|
||||
>
|
||||
<div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index">
|
||||
<vuedraggable :list="baseInfoForm.goodsGalleryFiles" :animation="200">
|
||||
<div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles"
|
||||
:key="__index">
|
||||
<template>
|
||||
<img :src="item.url"/>
|
||||
<img :src="item.url" />
|
||||
<div class="demo-upload-list-cover">
|
||||
<div>
|
||||
<Icon type="md-search" size="30" @click.native="handleViewGoodsPicture(item.url)"></Icon>
|
||||
|
|
@ -76,18 +72,18 @@
|
|||
</template>
|
||||
</div>
|
||||
</vuedraggable>
|
||||
<Upload ref="upload" :show-upload-list="false"
|
||||
:on-success="handleSuccessGoodsPicture" :format="['jpg', 'jpeg', 'png']"
|
||||
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :max-size="1024"
|
||||
:before-upload="handleBeforeUploadGoodsPicture" multiple type="drag" :action="uploadFileUrl"
|
||||
:headers="accessToken" style="margin-left:10px">
|
||||
|
||||
<Upload ref="upload" :show-upload-list="false" :on-success="handleSuccessGoodsPicture"
|
||||
:format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
|
||||
:on-exceeded-size="handleMaxSize" :max-size="1024" :before-upload="handleBeforeUploadGoodsPicture"
|
||||
multiple type="drag" :action="uploadFileUrl" :headers="{...accessToken}" style="margin-left:10px">
|
||||
<div style="width: 148px; height: 148px; line-height: 148px">
|
||||
<Icon type="md-add" size="20"></Icon>
|
||||
</div>
|
||||
</Upload>
|
||||
</div>
|
||||
<Modal title="View Image" v-model="goodsPictureVisible">
|
||||
<img :src="previewGoodsPicture" v-if="goodsPictureVisible" style="width: 100%"/>
|
||||
<img :src="previewGoodsPicture" v-if="goodsPictureVisible" style="width: 100%" />
|
||||
</Modal>
|
||||
</FormItem>
|
||||
<div class="layout" style="width: 100%">
|
||||
|
|
@ -100,8 +96,7 @@
|
|||
<Card :bordered="true">
|
||||
<FormItem label="规格名：" class="sku-item-content-name">
|
||||
<AutoComplete style="width: 150px" v-model="item.name" :maxlength="30"
|
||||
placeholder="请输入规格项名称"
|
||||
:filter-method="filterMethod" :data="skuData"
|
||||
placeholder="请输入规格项名称" :filter-method="filterMethod" :data="skuData"
|
||||
@on-change="editSkuItem">
|
||||
</AutoComplete>
|
||||
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuItem($index)">删除
|
||||
|
|
@ -110,70 +105,71 @@
|
|||
<FormItem label="规格值：" prop="sku">
|
||||
<!--规格值文本列表-->
|
||||
<div v-for="(val, index) in item.spec_values" :key="index"
|
||||
style="padding: 0px 20px 10px 0px; float: left">
|
||||
style="padding: 0px 20px 10px 0px; float: left">
|
||||
<div>
|
||||
<AutoComplete style="width: 150px; float: left" v-model="val.value"
|
||||
:maxlength="30" placeholder="请输入规格值名称"
|
||||
:filter-method="filterMethod" :data="skuVal"
|
||||
<AutoComplete style="width: 150px; float: left" v-model="val.value" :maxlength="30"
|
||||
placeholder="请输入规格值名称" :filter-method="filterMethod" :data="skuVal"
|
||||
@on-focus="changeSkuVals(item.name)"
|
||||
@on-change="skuValueChange(val.value, $index, item)">
|
||||
</AutoComplete>
|
||||
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuValue(item, index)">
|
||||
<Button type="error" style="margin-left: 10px"
|
||||
@click="handleCloseSkuValue(item, index)">
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left">
|
||||
<Button type="primary" @click="addSpec($index, item)">添加规格值</Button>
|
||||
<Button @click="addSpec($index, item)">添加规格值</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
</Card>
|
||||
</div>
|
||||
</Form>
|
||||
<Button class="add-sku-btn" type="primary" size="mini" @click="addSkuItem">添加规格项目</Button>
|
||||
<Button class="add-sku-btn" type="primary" size="small" @click="addSkuItem">添加规格项目</Button>
|
||||
</div>
|
||||
</Panel>
|
||||
<Panel name="2">
|
||||
规格详细
|
||||
<div slot="content">
|
||||
<div slot="content">
|
||||
<!-- #TODO 此处有待优化 -->
|
||||
<Table class="mt_10" :columns="skuTableColumn" :data="skuTableData" style="
|
||||
width: 100%;
|
||||
.ivu-table-overflowX {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
" :span-method="handleSpan">
|
||||
">
|
||||
<template slot-scope="{ row }" slot="sn">
|
||||
<Input v-model="row.sn" placeholder="请输入货号" @on-change="updateSkuTable(row, 'sn')"/>
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="weight" v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'">
|
||||
<Input v-model="row.weight" placeholder="请输入重量" @on-change="updateSkuTable(row, 'weight')"/>
|
||||
<Input clearable v-model="row.sn" placeholder="请输入货号"
|
||||
@on-change="updateSkuTable(row, 'sn')" />
|
||||
</template>
|
||||
<div slot-scope="{ row }" slot="weight" v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'">
|
||||
<Input clearable v-model="row.weight" placeholder="请输入重量"
|
||||
@on-change="updateSkuTable(row, 'weight')" />
|
||||
</div>
|
||||
<template slot-scope="{ row }" slot="quantity">
|
||||
<Input v-model="row.quantity" placeholder="请输入库存" @on-change="updateSkuTable(row, 'quantity')"/>
|
||||
</template>
|
||||
<Input clearable v-model="row.quantity" placeholder="请输入库存"
|
||||
@on-change="updateSkuTable(row, 'quantity')" /> </template>
|
||||
<template slot-scope="{ row }" slot="cost">
|
||||
<Input v-model="row.cost" placeholder="请输入成本价" @on-change="updateSkuTable(row, 'cost')"/>
|
||||
<Input clearable v-model="row.cost" placeholder="请输入成本价"
|
||||
@on-change="updateSkuTable(row, 'cost')" />
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="price">
|
||||
<Input v-model="row.price" placeholder="请输入价格" @on-change="updateSkuTable(row, 'price')"/>
|
||||
<Input clearable v-model="row.price" placeholder="请输入价格"
|
||||
@on-change="updateSkuTable(row, 'price')" />
|
||||
</template>
|
||||
<template slot-scope="{ row }" slot="images">
|
||||
<Button @click="editSkuPicture(row)">编辑图片</Button>
|
||||
<Modal v-model="showSkuPicture" :styles="{ top: '30px' }" class-name="sku-preview-modal"
|
||||
title="编辑图片" ok-text="结束编辑" @on-ok="updateSkuPicture()" cancel-text="取消">
|
||||
title="编辑图片" ok-text="结束编辑" @on-ok="updateSkuPicture()" cancel-text="取消">
|
||||
<div class="preview-picture">
|
||||
<img v-if="previewPicture !== ''" :src="previewPicture"/>
|
||||
<img v-if="previewPicture !== ''" :src="previewPicture" />
|
||||
</div>
|
||||
<Divider/>
|
||||
<vuedraggable
|
||||
:list="selectedSku.images"
|
||||
:animation="200"
|
||||
style="display:inline-block;"
|
||||
>
|
||||
<Divider />
|
||||
<vuedraggable :list="selectedSku.images" :animation="200" style="display:inline-block;">
|
||||
<div class="sku-upload-list" v-for="(img, __index) in selectedSku.images" :key="__index">
|
||||
<template>
|
||||
<img :src="img.url"/>
|
||||
<img :src="img.url" />
|
||||
<div class="sku-upload-list-cover">
|
||||
<Icon type="md-search" @click="handleView(img.url)"></Icon>
|
||||
<Icon type="md-trash" @click="handleRemove(img, __index)"></Icon>
|
||||
|
|
@ -181,11 +177,11 @@
|
|||
</template>
|
||||
</div>
|
||||
</vuedraggable>
|
||||
<Upload ref="uploadSku" :show-upload-list="false"
|
||||
:on-success="handleSuccess" :format="['jpg', 'jpeg', 'png']"
|
||||
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :max-size="1024"
|
||||
:before-upload="handleBeforeUpload" multiple type="drag" :action="uploadFileUrl"
|
||||
:headers="accessToken" style="display: inline-block; width: 58px">
|
||||
<Upload ref="uploadSku" :show-upload-list="false" :on-success="handleSuccess"
|
||||
:format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
|
||||
:on-exceeded-size="handleMaxSize" :max-size="1024" :before-upload="handleBeforeUpload"
|
||||
multiple type="drag" :action="uploadFileUrl" :headers="{...accessToken}"
|
||||
style="display: inline-block; width: 58px">
|
||||
<div>
|
||||
<Icon type="ios-camera" size="55"></Icon>
|
||||
</div>
|
||||
|
|
@ -202,27 +198,16 @@
|
|||
<h4>商品详情描述</h4>
|
||||
<div class="form-item-view">
|
||||
<div class="tree-bar">
|
||||
<FormItem
|
||||
class="form-item-view-el"
|
||||
label="店内分类"
|
||||
prop="shopCategory"
|
||||
>
|
||||
<Tree
|
||||
ref="tree"
|
||||
style="text-align:left;"
|
||||
:data="shopCategory"
|
||||
show-checkbox
|
||||
@on-select-change="selectTree"
|
||||
@on-check-change="changeSelect"
|
||||
:check-strictly="false"
|
||||
></Tree>
|
||||
<FormItem class="form-item-view-el" label="店内分类" prop="shopCategory">
|
||||
<Tree ref="tree" style="text-align:left;" :data="shopCategory" show-checkbox
|
||||
@on-select-change="selectTree" @on-check-change="changeSelect" :check-strictly="false"></Tree>
|
||||
</FormItem>
|
||||
</div>
|
||||
<FormItem class="form-item-view-el" label="商品描述" prop="intro">
|
||||
<editor id="intro" v-model="baseInfoForm.intro"></editor>
|
||||
<editor eid="intro" v-model="baseInfoForm.intro"></editor>
|
||||
</FormItem>
|
||||
<FormItem class="form-item-view-el" label="移动端描述" prop="skuList">
|
||||
<editor id="mobileIntr" v-model="baseInfoForm.mobileIntro"></editor>
|
||||
<editor eid="mobileIntro" v-model="baseInfoForm.mobileIntro"></editor>
|
||||
</FormItem>
|
||||
</div>
|
||||
<div v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'">
|
||||
|
|
@ -230,21 +215,13 @@
|
|||
<div class="form-item-view">
|
||||
<FormItem class="form-item-view-el" label="商品重量" prop="weight">
|
||||
<Input v-model="baseInfoForm.weight">
|
||||
<span slot="append">kg</span>
|
||||
<span slot="append">kg</span>
|
||||
</Input>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
class="form-item-view-el"
|
||||
label="物流模板"
|
||||
prop="templateId"
|
||||
>
|
||||
<FormItem class="form-item-view-el" label="物流模板" prop="templateId">
|
||||
<Select v-model="baseInfoForm.templateId" style="width: 200px">
|
||||
<Option
|
||||
v-for="item in logisticsTemplate"
|
||||
:value="item.id"
|
||||
:key="item.id"
|
||||
>{{ item.name }}
|
||||
<Option v-for="item in logisticsTemplate" :value="item.id" :key="item.id">{{ item.name }}
|
||||
</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
|
|
@ -253,20 +230,20 @@
|
|||
<div class="form-item-view">
|
||||
<FormItem class="form-item-view-el" label="商品发布" prop="release">
|
||||
<RadioGroup type="button" button-style="solid" v-model="baseInfoForm.release">
|
||||
<Radio title="立即发布" :label="true">
|
||||
<Radio title="立即发布" :label="1">
|
||||
<span>立即发布</span>
|
||||
</Radio>
|
||||
<Radio title="放入仓库" :label="false">
|
||||
<Radio title="放入仓库" :label="0">
|
||||
<span>放入仓库</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem class="form-item-view-el" label="商品推荐" prop="skuList">
|
||||
<RadioGroup type="button" button-style="solid" v-model="baseInfoForm.recommend">
|
||||
<Radio title="推荐" :label="true">
|
||||
<Radio title="推荐" :label="1">
|
||||
<span>推荐</span>
|
||||
</Radio>
|
||||
<Radio title="不推荐" :label="false">
|
||||
<Radio title="不推荐" :label="0">
|
||||
<span>不推荐</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
|
|
@ -274,18 +251,16 @@
|
|||
</div>
|
||||
<div class="form-item-view-bottom">
|
||||
<Collapse v-model="params_panel" v-for="(paramsGroup,groupIndex) in goodsParams"
|
||||
:title="paramsGroup.groupName"
|
||||
class="mb_10"
|
||||
style="text-align: left" :key="paramsGroup.groupName">
|
||||
:title="paramsGroup.groupName" class="mb_10" style="text-align: left" :key="paramsGroup.groupName">
|
||||
<Panel :name="paramsGroup.groupName">
|
||||
{{paramsGroup.groupName}}
|
||||
<p slot="content">
|
||||
<FormItem v-for="( params, paramsIndex) in paramsGroup.params" :key="paramsIndex"
|
||||
:label="`${params.paramName}：`">
|
||||
:label="`${params.paramName}：`">
|
||||
<Select v-model="params.paramValue" placeholder="请选择" style="width: 200px" clearable
|
||||
@on-change="selectParams(paramsGroup,groupIndex,params,paramsIndex,params.paramValue)">
|
||||
<Option v-for="option in params.options.split(',')" :label="option"
|
||||
:value="option" :key="option"></Option>
|
||||
@on-change="selectParams(paramsGroup,groupIndex,params,paramsIndex,params.paramValue)">
|
||||
<Option v-for="option in params.options.split(',')" :label="option" :value="option"
|
||||
:key="option"></Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</p>
|
||||
|
|
@ -316,20 +291,20 @@ import cloneObj from "@/utils/index";
|
|||
import vuedraggable from "vuedraggable";
|
||||
import editor from "@/views/my-components/lili/editor";
|
||||
import { uploadFile } from "@/libs/axios";
|
||||
import {regular} from "@/utils";
|
||||
import { regular } from "@/utils";
|
||||
|
||||
export default {
|
||||
components:{
|
||||
components: {
|
||||
editor,
|
||||
vuedraggable
|
||||
vuedraggable,
|
||||
},
|
||||
props: {
|
||||
firstData: {
|
||||
default: {},
|
||||
type: Object
|
||||
}
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
// 表单验证项，商品价格
|
||||
const checkPrice = (rule, value, callback) => {
|
||||
if (!value && value !== 0) {
|
||||
|
|
@ -368,7 +343,9 @@ export default {
|
|||
}
|
||||
};
|
||||
return {
|
||||
categoryId: '', // 商品分类第三级id
|
||||
accessToken: "", //令牌token
|
||||
goodsParams: "",
|
||||
categoryId: "", // 商品分类第三级id
|
||||
//提交状态
|
||||
submitLoading: false,
|
||||
//上传图片路径
|
||||
|
|
@ -393,9 +370,9 @@ export default {
|
|||
/** 商品相册列表 */
|
||||
goodsGalleryFiles: [],
|
||||
/** 是否立即发布 true 立即发布 false 放入仓库 */
|
||||
release: true,
|
||||
release: 1,
|
||||
/** 是否为推荐商品 */
|
||||
recommend: true,
|
||||
recommend: 1,
|
||||
/** 店铺分类 */
|
||||
storeCategoryPath: "",
|
||||
brandId: 0,
|
||||
|
|
@ -414,11 +391,11 @@ export default {
|
|||
/** 是否重新生成sku */
|
||||
regeneratorSkuFlag: false,
|
||||
/** 物流模板id **/
|
||||
templateId: '',
|
||||
templateId: "",
|
||||
/** 参数组*/
|
||||
goodsParamsDTOList: [],
|
||||
/** 商品分类中文名 */
|
||||
categoryName: []
|
||||
categoryName: [],
|
||||
},
|
||||
/** 表格头 */
|
||||
skuTableColumn: [],
|
||||
|
|
@ -445,7 +422,7 @@ export default {
|
|||
validateError: [],
|
||||
baseInfoFormRule: {
|
||||
goodsName: [
|
||||
{required: true, message: "请输入商品名称"},
|
||||
{ required: true, message: "请输入商品名称" },
|
||||
{
|
||||
whitespace: true,
|
||||
message: "商品名称不可为纯空格",
|
||||
|
|
@ -457,24 +434,24 @@ export default {
|
|||
},
|
||||
],
|
||||
sn: [
|
||||
{required: true, message: "请输入商品编号"},
|
||||
{validator: checkSn},
|
||||
{ required: true, message: "请输入商品编号" },
|
||||
{ validator: checkSn },
|
||||
],
|
||||
price: [
|
||||
{required: true, message: "请输入商品价格"},
|
||||
{validator: checkPrice},
|
||||
{ required: true, message: "请输入商品价格" },
|
||||
{ validator: checkPrice },
|
||||
],
|
||||
cost: [
|
||||
{required: true, message: "请输入市场价格"},
|
||||
{validator: checkPrice},
|
||||
{ required: true, message: "请输入市场价格" },
|
||||
{ validator: checkPrice },
|
||||
],
|
||||
weight: [
|
||||
{required: true, message: "请输入商品重量"},
|
||||
{validator: checkWeight},
|
||||
{ required: true, message: "请输入商品重量" },
|
||||
{ validator: checkWeight },
|
||||
],
|
||||
templateId: [{required: true, message: '请选择物流模板'}],
|
||||
sellingPoint: [{required: true, message: "请输入商品卖点"}],
|
||||
goodsUnit: [{required: true, message: "请选择计量单位"}],
|
||||
templateId: [{ required: true, message: "请选择物流模板" }],
|
||||
sellingPoint: [{ required: true, message: "请输入商品卖点" }],
|
||||
goodsUnit: [{ required: true, message: "请选择计量单位" }],
|
||||
},
|
||||
/** 品牌列表 */
|
||||
brandList: [],
|
||||
|
|
@ -482,7 +459,8 @@ export default {
|
|||
shopCategory: [],
|
||||
/** 商品单位列表 */
|
||||
goodsUnitList: [],
|
||||
ignoreColumn: [ // 添加规格时需要忽略的参数
|
||||
ignoreColumn: [
|
||||
// 添加规格时需要忽略的参数
|
||||
"_index",
|
||||
"_rowKey",
|
||||
"sn",
|
||||
|
|
@ -492,8 +470,8 @@ export default {
|
|||
"quantity",
|
||||
"specId",
|
||||
"specValueId",
|
||||
]
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
|
|
@ -507,32 +485,41 @@ export default {
|
|||
selectParams(paramsGroup, groupIndex, params, paramsIndex, value) {
|
||||
if (!this.baseInfoForm.goodsParamsDTOList[groupIndex]) {
|
||||
this.baseInfoForm.goodsParamsDTOList[groupIndex] = {
|
||||
groupId: '',
|
||||
groupName: '',
|
||||
goodsParamsItemDTOList: []
|
||||
}
|
||||
groupId: "",
|
||||
groupName: "",
|
||||
goodsParamsItemDTOList: [],
|
||||
};
|
||||
}
|
||||
//赋予分组id、分组名称
|
||||
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupId = paramsGroup.groupId
|
||||
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupName = paramsGroup.groupName
|
||||
|
||||
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupId =
|
||||
paramsGroup.groupId;
|
||||
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupName =
|
||||
paramsGroup.groupName;
|
||||
|
||||
//参数详细为空，则赋予
|
||||
if (!this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex]) {
|
||||
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex]={
|
||||
paramName: '',
|
||||
paramValue: '',
|
||||
isIndex: '',
|
||||
required: '',
|
||||
paramId: ''
|
||||
}
|
||||
if (
|
||||
!this.baseInfoForm.goodsParamsDTOList[groupIndex]
|
||||
.goodsParamsItemDTOList[paramsIndex]
|
||||
) {
|
||||
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
|
||||
paramsIndex
|
||||
] = {
|
||||
paramName: "",
|
||||
paramValue: "",
|
||||
isIndex: "",
|
||||
required: "",
|
||||
paramId: "",
|
||||
};
|
||||
}
|
||||
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex]={
|
||||
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
|
||||
paramsIndex
|
||||
] = {
|
||||
paramName: params.paramName,
|
||||
paramValue: value,
|
||||
isIndex: params.isIndex,
|
||||
required: params.required,
|
||||
paramId: params.id
|
||||
}
|
||||
paramId: params.id,
|
||||
};
|
||||
},
|
||||
// 编辑sku图片
|
||||
editSkuPicture(row) {
|
||||
|
|
@ -542,11 +529,12 @@ export default {
|
|||
this.selectedSku = row;
|
||||
this.showSkuPicture = true;
|
||||
},
|
||||
pre () { // 上一步
|
||||
pre() {
|
||||
// 上一步
|
||||
this.$parent.activestep--;
|
||||
},
|
||||
// 预览图片
|
||||
handleView (url) {
|
||||
handleView(url) {
|
||||
this.previewPicture = url;
|
||||
this.visible = true;
|
||||
},
|
||||
|
|
@ -601,25 +589,24 @@ export default {
|
|||
handleFormatError(file) {
|
||||
this.$Notice.warning({
|
||||
title: "文件格式不正确",
|
||||
desc: "文件 " + file.name + " 的格式不正确"
|
||||
desc: "文件 " + file.name + " 的格式不正确",
|
||||
});
|
||||
},
|
||||
// 图片大小不正确
|
||||
handleMaxSize(file) {
|
||||
this.$Notice.warning({
|
||||
title: "超过文件大小限制",
|
||||
desc: "图片大小不能超过1MB"
|
||||
desc: "图片大小不能超过1MB",
|
||||
});
|
||||
},
|
||||
// 图片上传前钩子
|
||||
handleBeforeUploadGoodsPicture(file) {
|
||||
|
||||
const check = this.baseInfoForm.goodsGalleryFiles.length < 5;
|
||||
if (!check) {
|
||||
this.$Notice.warning({
|
||||
title: "图片数量不能大于五张",
|
||||
});
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
},
|
||||
// sku图片上传前钩子
|
||||
|
|
@ -629,10 +616,10 @@ export default {
|
|||
this.selectedSku.images.length > 5;
|
||||
if (check) {
|
||||
this.$Notice.warning({ title: "图片数量不能大于五张" });
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/** 查询商品品牌列表 */
|
||||
getGoodsBrandList() {
|
||||
API_GOODS.getCategoryBrandListDataSeller(this.categoryId).then(
|
||||
|
|
@ -673,7 +660,7 @@ export default {
|
|||
});
|
||||
},
|
||||
// 编辑时获取商品信息
|
||||
async GET_GoodData(id,draftId) {
|
||||
async GET_GoodData(id, draftId) {
|
||||
let response = {};
|
||||
if (draftId) {
|
||||
response = await API_GOODS.getDraftGoodsDetail(draftId);
|
||||
|
|
@ -681,25 +668,26 @@ export default {
|
|||
response = await API_GOODS.getGoods(id);
|
||||
this.goodsId = response.result.id;
|
||||
}
|
||||
this.baseInfoForm = {...this.baseInfoForm,...response.result};
|
||||
|
||||
this.baseInfoForm.release = true;
|
||||
|
||||
response.result.recommend
|
||||
? (response.result.recommend = 1)
|
||||
: (response.result.recommend = 0);
|
||||
this.baseInfoForm = { ...this.baseInfoForm, ...response.result };
|
||||
this.baseInfoForm.release = 1; //即使是被放入仓库，修改的时候也会显示会立即发布
|
||||
this.categoryId = response.result.categoryPath.split(",")[2];
|
||||
|
||||
|
||||
if (
|
||||
response.result.goodsGalleryList &&
|
||||
response.result.goodsGalleryList.length > 0
|
||||
) {
|
||||
this.baseInfoForm.goodsGalleryFiles =
|
||||
response.result.goodsGalleryList.map((i) => {
|
||||
let files = {url: i};
|
||||
let files = { url: i };
|
||||
return files;
|
||||
});
|
||||
}
|
||||
|
||||
this.Get_SkuInfoByCategory(this.categoryId)
|
||||
this.Get_SkuInfoByCategory(this.categoryId);
|
||||
|
||||
this.renderGoodsDetailSku(response.result.skuList);
|
||||
|
||||
|
|
@ -781,32 +769,30 @@ export default {
|
|||
this.goodsParams = response;
|
||||
|
||||
//展开选项卡
|
||||
this.goodsParams.forEach(item => {
|
||||
this.params_panel.push(item.groupName)
|
||||
}
|
||||
)
|
||||
this.goodsParams.forEach((item) => {
|
||||
this.params_panel.push(item.groupName);
|
||||
});
|
||||
if (this.baseInfoForm.goodsParamsDTOList) {
|
||||
// 已选值集合
|
||||
const paramsArr = []
|
||||
this.baseInfoForm.goodsParamsDTOList.forEach(group =>{
|
||||
group.goodsParamsItemDTOList.forEach(param => {
|
||||
param.groupId = group.groupId
|
||||
paramsArr.push(param)
|
||||
})
|
||||
})
|
||||
const paramsArr = [];
|
||||
this.baseInfoForm.goodsParamsDTOList.forEach((group) => {
|
||||
group.goodsParamsItemDTOList.forEach((param) => {
|
||||
param.groupId = group.groupId;
|
||||
paramsArr.push(param);
|
||||
});
|
||||
});
|
||||
// 循环参数分组
|
||||
this.goodsParams.forEach((parmsGroup) => {
|
||||
parmsGroup.params.forEach(param => {
|
||||
|
||||
paramsArr.forEach(arr=>{
|
||||
if(param.paramName == arr.paramName){
|
||||
param.paramValue = arr.paramValue
|
||||
parmsGroup.params.forEach((param) => {
|
||||
paramsArr.forEach((arr) => {
|
||||
if (param.paramName == arr.paramName) {
|
||||
param.paramValue = arr.paramValue;
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.baseInfoForm.goodsParamsDTOList = []
|
||||
this.baseInfoForm.goodsParamsDTOList = [];
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -837,10 +823,10 @@ export default {
|
|||
this.skuData.forEach((e, index) => {
|
||||
if (e === name) {
|
||||
if (this.skuVal.length != this.skuVals[index].length) {
|
||||
this.skuVal = this.skuVals[index]
|
||||
this.skuVal = this.skuVals[index];
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 移除当前规格项 进行数据变化*/
|
||||
|
|
@ -868,19 +854,14 @@ export default {
|
|||
},
|
||||
/** 添加当前规格项的规格值*/
|
||||
addSpec($index, item) {
|
||||
|
||||
if (this.validateEmpty(item.spec_values)) {
|
||||
if (item.spec_values.length >= 10) {
|
||||
this.$Message.error("规格值不能大于10个！");
|
||||
return;
|
||||
}
|
||||
this.$set(
|
||||
item.spec_values,
|
||||
item.spec_values.length,
|
||||
{
|
||||
name: item.name,
|
||||
}
|
||||
);
|
||||
this.$set(item.spec_values, item.spec_values.length, {
|
||||
name: item.name,
|
||||
});
|
||||
this.baseInfoForm.regeneratorSkuFlag = true;
|
||||
/**
|
||||
* 渲染规格详细表格
|
||||
|
|
@ -916,14 +897,14 @@ export default {
|
|||
key: columnName,
|
||||
});
|
||||
});
|
||||
|
||||
this.baseInfoForm.goodsType != "VIRTUAL_GOODS"
|
||||
? pushData.push({
|
||||
|
||||
this.baseInfoForm.goodsType != "VIRTUAL_GOODS";
|
||||
|
||||
pushData.push(
|
||||
{
|
||||
title: "重量",
|
||||
slot: "weight",
|
||||
})
|
||||
: "";
|
||||
pushData.push(
|
||||
},
|
||||
{
|
||||
title: "货号",
|
||||
slot: "sn",
|
||||
|
|
@ -945,13 +926,14 @@ export default {
|
|||
slot: "images",
|
||||
}
|
||||
);
|
||||
this.baseInfoForm.goodsType != "VIRTUAL_GOODS" ? pushData.shift() : "";
|
||||
|
||||
this.skuTableColumn = pushData;
|
||||
//克隆所有渲染的数据
|
||||
let cloneTemp = cloneObj(this.skuInfo);
|
||||
|
||||
//数据清空一次
|
||||
this.skuTableData = [];
|
||||
this.$set(this, "skuTableData", []);
|
||||
//判定 是否存在规格分组
|
||||
if (cloneTemp[0]) {
|
||||
//存放最终结果
|
||||
|
|
@ -966,9 +948,10 @@ export default {
|
|||
cloneTemp.splice(0, 1);
|
||||
result = this.specIterator(result, cloneTemp);
|
||||
this.skuTableData = result;
|
||||
console.log(this.skuTableData)
|
||||
}
|
||||
},
|
||||
/**
|
||||
/**
|
||||
* 迭代属性，形成表格
|
||||
* result 渲染的数据
|
||||
* array spec数据
|
||||
|
|
@ -990,7 +973,6 @@ export default {
|
|||
});
|
||||
//清除当前循环的分组
|
||||
cloneTemp.splice(0, 1);
|
||||
|
||||
} else {
|
||||
return result;
|
||||
}
|
||||
|
|
@ -999,16 +981,15 @@ export default {
|
|||
/** 根据分类id获取系统设置规格信息*/
|
||||
Get_SkuInfoByCategory(categoryId) {
|
||||
if (categoryId) {
|
||||
API_GOODS.getGoodsSpecInfoSeller(categoryId).then(res => {
|
||||
if (res.length) {
|
||||
res.forEach(e => {
|
||||
this.skuData.push(e.specName)
|
||||
const vals = e.specValue ? e.specValue.split(',') : []
|
||||
this.skuVals.push(Array.from(new Set(vals)))
|
||||
})
|
||||
}
|
||||
API_GOODS.getGoodsSpecInfoSeller(categoryId).then((res) => {
|
||||
if (res.length) {
|
||||
res.forEach((e) => {
|
||||
this.skuData.push(e.specName);
|
||||
const vals = e.specValue ? e.specValue.split(",") : [];
|
||||
this.skuVals.push(Array.from(new Set(vals)));
|
||||
});
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
},
|
||||
/** 自动完成表单所需方法*/
|
||||
|
|
@ -1016,7 +997,8 @@ export default {
|
|||
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
|
||||
},
|
||||
/** 数据改变之后 抛出数据 */
|
||||
updateSkuTable(row, item) {
|
||||
updateSkuTable(row, item, type = "deafult") {
|
||||
|
||||
let index = row._index;
|
||||
this.baseInfoForm.regeneratorSkuFlag = true;
|
||||
/** 进行自定义校验 判断是否是数字（小数也能通过）重量 */
|
||||
|
|
@ -1054,7 +1036,10 @@ export default {
|
|||
return;
|
||||
}
|
||||
}
|
||||
this.skuTableData[index][item] = row[item];
|
||||
this.$nextTick(() => {
|
||||
this.skuTableData[index][item] = row[item];
|
||||
});
|
||||
// this.$set(this.skuTableData,[index][item],row[item])
|
||||
},
|
||||
// 店内分类选择
|
||||
selectTree(v) {
|
||||
|
|
@ -1086,42 +1071,52 @@ export default {
|
|||
this.submitLoading = true;
|
||||
this.$refs["baseInfoForm"].validate((valid) => {
|
||||
if (valid) {
|
||||
let submit = JSON.parse(JSON.stringify(this.baseInfoForm));
|
||||
if (
|
||||
this.baseInfoForm.goodsGalleryFiles &&
|
||||
this.baseInfoForm.goodsGalleryFiles.length <= 0
|
||||
submit.goodsGalleryFiles &&
|
||||
submit.goodsGalleryFiles.length <= 0
|
||||
) {
|
||||
this.submitLoading = false;
|
||||
this.$Message.error("请上传商品图片");
|
||||
return;
|
||||
}
|
||||
if (this.baseInfoForm.templateId === '') this.baseInfoForm.templateId = 0;
|
||||
if (submit.templateId === "") submit.templateId = 0;
|
||||
let flag = false;
|
||||
let paramValue = "";
|
||||
|
||||
|
||||
if (flag) {
|
||||
this.$Message.error(paramValue + " 参数值不能为空");
|
||||
this.submitLoading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.baseInfoForm.skuList = this.skuTableData.map((sku) => {
|
||||
delete sku._index;
|
||||
delete sku._rowKey;
|
||||
delete sku.specNameId;
|
||||
delete sku.specValueId;
|
||||
return sku;
|
||||
let tips = ""
|
||||
submit.skuList = this.skuTableData.map((sku) => {
|
||||
// 非空判断
|
||||
console.warn(sku);
|
||||
|
||||
// delete sku._index;
|
||||
// delete sku._rowKey;
|
||||
// delete sku.specNameId;
|
||||
// delete sku.specValueId;
|
||||
// return sku;
|
||||
});
|
||||
|
||||
if (this.baseInfoForm.goodsGalleryFiles.length > 0) {
|
||||
this.baseInfoForm.goodsGalleryList =
|
||||
this.baseInfoForm.goodsGalleryFiles.map((i) => i.url);
|
||||
if (submit.goodsGalleryFiles.length > 0) {
|
||||
submit.goodsGalleryList = submit.goodsGalleryFiles.map(
|
||||
(i) => i.url
|
||||
);
|
||||
}
|
||||
/** 参数校验 **/
|
||||
/* Object.keys(this.baseInfoForm.goodsParamsList).forEach((item) => {
|
||||
/* Object.keys(submit.goodsParamsList).forEach((item) => {
|
||||
});*/
|
||||
submit.release ? (submit.release = true) : (submit.release = false);
|
||||
submit.recommend
|
||||
? (submit.recommend = true)
|
||||
: (submit.recommend = false);
|
||||
|
||||
return;
|
||||
if (this.goodsId) {
|
||||
API_GOODS.editGoods(this.goodsId, this.baseInfoForm).then((res) => {
|
||||
API_GOODS.editGoods(this.goodsId, submit).then((res) => {
|
||||
if (res.success) {
|
||||
this.submitLoading = false;
|
||||
this.$router.go(-1);
|
||||
|
|
@ -1130,7 +1125,7 @@ export default {
|
|||
}
|
||||
});
|
||||
} else {
|
||||
API_GOODS.createGoods(this.baseInfoForm).then((res) => {
|
||||
API_GOODS.createGoods(submit).then((res) => {
|
||||
if (res.success) {
|
||||
this.submitLoading = false;
|
||||
this.$parent.activestep = 2;
|
||||
|
|
@ -1153,7 +1148,7 @@ export default {
|
|||
this.baseInfoForm.goodsGalleryFiles.map((i) => i.url);
|
||||
}
|
||||
this.baseInfoForm.categoryName = [];
|
||||
this.baseInfoForm.saveType = 'TEMPLATE';
|
||||
this.baseInfoForm.saveType = "TEMPLATE";
|
||||
|
||||
if (this.$route.query.draftId) {
|
||||
this.baseInfoForm.id = this.$route.query.draftId;
|
||||
|
|
@ -1186,16 +1181,17 @@ export default {
|
|||
},
|
||||
});
|
||||
},
|
||||
SAVE_DRAFT_GOODS() { // 保存模板
|
||||
SAVE_DRAFT_GOODS() {
|
||||
// 保存模板
|
||||
API_GOODS.saveDraftGoods(this.baseInfoForm).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.info("保存成功！");
|
||||
this.$router.push({name: 'template-goods'});
|
||||
this.$router.push({ name: "template-goods" });
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.accessToken = {
|
||||
accessToken: this.getStore("accessToken"),
|
||||
};
|
||||
|
|
@ -1204,20 +1200,23 @@ export default {
|
|||
if (res.success) {
|
||||
this.logisticsTemplate = res.result;
|
||||
}
|
||||
})
|
||||
if (this.$route.query.id || this.$route.query.draftId) { // 编辑商品、模板
|
||||
this.GET_GoodData(this.$route.query.id, this.$route.query.draftId)
|
||||
} else { // 新增商品、模板
|
||||
if (this.firstData.tempId) { // 选择模板
|
||||
this.GET_GoodData('', this.firstData.tempId)
|
||||
});
|
||||
if (this.$route.query.id || this.$route.query.draftId) {
|
||||
// 编辑商品、模板
|
||||
this.GET_GoodData(this.$route.query.id, this.$route.query.draftId);
|
||||
} else {
|
||||
// 新增商品、模板
|
||||
if (this.firstData.tempId) {
|
||||
// 选择模板
|
||||
this.GET_GoodData("", this.firstData.tempId);
|
||||
} else {
|
||||
const cateId = []
|
||||
this.firstData.category.forEach(cate => {
|
||||
this.baseInfoForm.categoryName.push(cate.name)
|
||||
cateId.push(cate.id)
|
||||
})
|
||||
this.categoryId = cateId[2]
|
||||
this.baseInfoForm.categoryPath = cateId.toString()
|
||||
const cateId = [];
|
||||
this.firstData.category.forEach((cate) => {
|
||||
this.baseInfoForm.categoryName.push(cate.name);
|
||||
cateId.push(cate.id);
|
||||
});
|
||||
this.categoryId = cateId[2];
|
||||
this.baseInfoForm.categoryPath = cateId.toString();
|
||||
this.baseInfoForm.goodsType = this.firstData.goodsType;
|
||||
/** 获取该商城分类下 商品参数信息 */
|
||||
this.GET_GoodsParams();
|
||||
|
|
@ -1230,12 +1229,10 @@ export default {
|
|||
// 获取当前店铺分类
|
||||
this.GET_ShopGoodsLabel();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./addGoods.scss";
|
||||
@import "./addGoods.scss";
|
||||
</style>
|
||||
|
|
@ -15,8 +15,8 @@
|
|||
|
||||
<Row>
|
||||
<Button class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
|
||||
<span v-if="!loading">{{ $t("login") }}</span>
|
||||
<span v-else>{{ $t("logining") }}</span>
|
||||
<span v-if="!loading">登录</span>
|
||||
<span v-else>登录中</span>
|
||||
</Button>
|
||||
</Row>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,13 @@
|
|||
<template>
|
||||
<div class="foot">
|
||||
<Row type="flex" justify="space-around" class="help">
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">{{ $t('help') }}</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">{{ $t('privacy') }}</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">{{ $t('terms') }}</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">帮助</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">隐私</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">条款</a>
|
||||
</Row>
|
||||
<Row type="flex" justify="center" class="copyright">
|
||||
Copyright © {{year}} - Present
|
||||
<a
|
||||
href="https://pickmall.cn/"
|
||||
target="_blank"
|
||||
style="margin:0 5px;"
|
||||
>lili-shop</a> {{ $t('rights') }}
|
||||
<a href="https://pickmall.cn/" target="_blank" style="margin:0 5px;">lili-shop</a>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -21,8 +17,8 @@ export default {
|
|||
name: "footer",
|
||||
data() {
|
||||
return {
|
||||
year: new Date().getFullYear() // 年
|
||||
}
|
||||
year: new Date().getFullYear(), // 年
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default {
|
|||
// 格式化标签名
|
||||
itemTitle(item) {
|
||||
if (typeof item.title == "object") {
|
||||
return this.$t(item.title.i18n);
|
||||
return item.title;
|
||||
} else {
|
||||
return item.title;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="position: relative">
|
||||
<div :id="id" style="text-align: left; min-width: 1080px"></div>
|
||||
<div :id="eid" style="text-align: left; min-width: 1080px"></div>
|
||||
<div v-if="showExpand">
|
||||
<div class="e-menu e-code" @click="editHTML">
|
||||
<Icon type="md-code-working" size="22" />
|
||||
|
|
@ -15,29 +15,12 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
title="编辑html代码"
|
||||
v-model="showHTMLModal"
|
||||
:mask-closable="false"
|
||||
:width="900"
|
||||
:fullscreen="full"
|
||||
>
|
||||
<Input
|
||||
v-if="!full"
|
||||
v-model="dataEdit"
|
||||
:rows="15"
|
||||
type="textarea"
|
||||
style="max-height: 60vh; overflow: auto"
|
||||
/>
|
||||
<Modal title="编辑html代码" v-model="showHTMLModal" :mask-closable="false" :width="900" :fullscreen="full">
|
||||
<Input v-if="!full" v-model="dataEdit" :rows="15" type="textarea" style="max-height: 60vh; overflow: auto" />
|
||||
<Input v-if="full" v-model="dataEdit" :rows="32" type="textarea" />
|
||||
<div slot="footer">
|
||||
<Button @click="full = !full" icon="md-expand">全屏开/关</Button>
|
||||
<Button
|
||||
@click="editHTMLOk"
|
||||
type="primary"
|
||||
icon="md-checkmark-circle-outline"
|
||||
>确定保存</Button
|
||||
>
|
||||
<Button @click="editHTMLOk" type="primary" icon="md-checkmark-circle-outline">确定保存</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal title="预览" v-model="fullscreenModal" fullscreen>
|
||||
|
|
@ -58,7 +41,7 @@ import { sina } from "@/libs/emoji";
|
|||
export default {
|
||||
name: "editor",
|
||||
props: {
|
||||
id: {
|
||||
eid: {
|
||||
type: String,
|
||||
default: "editor",
|
||||
},
|
||||
|
|
@ -78,7 +61,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
editor: null, // 初始化富文本编辑器
|
||||
editor: "", // 初始化富文本编辑器
|
||||
data: this.value, // 富文本数据
|
||||
dataEdit: "", // 编辑数据
|
||||
showHTMLModal: false, // 显示html
|
||||
|
|
@ -90,7 +73,7 @@ export default {
|
|||
// 初始化编辑器
|
||||
initEditor() {
|
||||
let that = this;
|
||||
this.editor = new E(`#${this.id}`);
|
||||
this.editor = new E(`#${this.eid}`);
|
||||
// 编辑内容绑定数据
|
||||
this.editor.config.onchange = (html) => {
|
||||
if (this.openXss) {
|
||||
|
|
@ -208,16 +191,17 @@ export default {
|
|||
this.$emit("input", this.data);
|
||||
this.$emit("on-change", this.data);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
immediate: true,
|
||||
handler: function (val) {
|
||||
// 赋值给富文本
|
||||
this.setData(val);
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initEditor();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,88 +1,119 @@
|
|||
const path = require('path')
|
||||
const CompressionPlugin = require('compression-webpack-plugin');
|
||||
const path = require("path");
|
||||
const CompressionPlugin = require("compression-webpack-plugin");
|
||||
|
||||
const resolve = dir => {
|
||||
return path.join(__dirname, dir)
|
||||
}
|
||||
return path.join(__dirname, dir);
|
||||
};
|
||||
/**
|
||||
* 在项目开发的时候将生产环境以及开发环境进行判断
|
||||
* 将生产环境中的路径用cdn来进行优化处理
|
||||
* 将开发环境中替换为本地的内容，方便处理bug以及开启vueDev
|
||||
* 我们可以根据环境变量进行相应的处理，只有在产品的时候，才让插件去自动注入相应的资源文件到html页面
|
||||
*/
|
||||
const enableCDN = process.env.NODE_ENV === "production"; // 是否生产环境
|
||||
|
||||
let externals = {
|
||||
vue: "Vue",
|
||||
axios: "axios",
|
||||
"vue-router": "VueRouter",
|
||||
vuex: "Vuex",
|
||||
"view-design": "iview",
|
||||
"vue-lazyload": "VueLazyload",
|
||||
"js-cookie": "Cookies",
|
||||
wangeditor: "wangEditor",
|
||||
"sockjs-client": "SockJS",
|
||||
vuedraggable: "vuedraggable",
|
||||
"@antv/g2": "G2",
|
||||
"vue-qr": "vue-qr"
|
||||
};
|
||||
|
||||
// 使用CDN的内容
|
||||
let cdn = {
|
||||
css: ["https://cdn.jsdelivr.net/npm/view-design@4.1.1/dist/styles/iview.css"],
|
||||
js: [
|
||||
// vue must at first!
|
||||
"https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/vue-router@3.1.3/dist/vue-router.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/view-design@4.1.1/dist/iview.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/vue-lazyload@1.3.3/vue-lazyload.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/vuedraggable@2.23.2/dist/vuedraggable.umd.min.js",
|
||||
"https://gw.alipayobjects.com/os/lib/antv/g2/4.1.24/dist/g2.min.js",
|
||||
"https://cdn.jsdelivr.net/npm/vue-qr@2.5.0/dist/vue-qr.min.js"
|
||||
]
|
||||
};
|
||||
|
||||
// 判断是否需要加载CDN
|
||||
cdn = enableCDN ? cdn : { css: [], js: [] };
|
||||
externals = enableCDN ? externals : {};
|
||||
|
||||
module.exports = {
|
||||
css: {
|
||||
loaderOptions: { // 向 CSS 相关的 loader 传递选项
|
||||
less: {
|
||||
lessOptions: {
|
||||
javascriptEnabled: true
|
||||
}
|
||||
}
|
||||
css: {
|
||||
loaderOptions: {
|
||||
// 向 CSS 相关的 loader 传递选项
|
||||
less: {
|
||||
lessOptions: {
|
||||
javascriptEnabled: true
|
||||
}
|
||||
},
|
||||
devServer: {
|
||||
port: 10002,
|
||||
},
|
||||
|
||||
chainWebpack: config => {
|
||||
// @ 对应 src目录
|
||||
config.resolve.alias.set('@', resolve('src'))
|
||||
},
|
||||
|
||||
// 打包时不生成.map文件 避免看到源码
|
||||
productionSourceMap: false,
|
||||
|
||||
// 部署优化
|
||||
configureWebpack: {
|
||||
// 使用CDN
|
||||
externals: {
|
||||
vue: 'Vue',
|
||||
'vue-i18n': 'VueI18n',
|
||||
axios: 'axios',
|
||||
'vue-router': 'VueRouter',
|
||||
vuex: 'Vuex',
|
||||
'view-design': 'iview',
|
||||
'vue-apexcharts': 'VueApexCharts',
|
||||
xlsx: 'XLSX',
|
||||
dplayer: 'DPlayer',
|
||||
'print-js': 'printJS',
|
||||
html2canvas: 'html2canvas',
|
||||
'vue-json-pretty': 'VueJsonPretty',
|
||||
'vue-lazyload': 'VueLazyload',
|
||||
gitalk: 'Gitalk',
|
||||
'js-cookie': 'Cookies',
|
||||
wangEditor: 'wangEditor',
|
||||
quill: 'Quill',
|
||||
stompjs: 'Stomp',
|
||||
'sockjs-client': 'SockJS',
|
||||
vuedraggable: 'vuedraggable'
|
||||
},
|
||||
// GZIP压缩
|
||||
plugins: [
|
||||
new CompressionPlugin({
|
||||
test: /\.js$|\.html$|\.css/, // 匹配文件
|
||||
threshold: 10240 // 对超过10k文件压缩
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
runtimeChunk: "single",
|
||||
splitChunks: {
|
||||
chunks: "all",
|
||||
maxInitialRequests: Infinity,
|
||||
minSize: 20000,
|
||||
cacheGroups: {
|
||||
vendor: {
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
name(module) {
|
||||
const packageName = module.context.match(
|
||||
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
|
||||
)[1];
|
||||
return `npm.${packageName.replace("@", "")}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
pluginOptions: {
|
||||
'style-resources-loader': {
|
||||
preProcessor: 'scss',
|
||||
patterns: [path.resolve(__dirname, './src/styles/common.scss')]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
devServer: {
|
||||
port: 10002
|
||||
},
|
||||
|
||||
// 打包时不生成.map文件 避免看到源码
|
||||
productionSourceMap: false,
|
||||
|
||||
// 部署优化
|
||||
configureWebpack: {
|
||||
externals,
|
||||
|
||||
// GZIP压缩
|
||||
plugins: [
|
||||
new CompressionPlugin({
|
||||
test: /\.js$|\.html$|\.css/, // 匹配文件
|
||||
threshold: 10240 // 对超过10k文件压缩
|
||||
})
|
||||
],
|
||||
optimization: {
|
||||
runtimeChunk: "single",
|
||||
splitChunks: {
|
||||
chunks: "all",
|
||||
maxInitialRequests: Infinity,
|
||||
minSize: 20000,
|
||||
cacheGroups: {
|
||||
vendor: {
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
name(module) {
|
||||
const packageName = module.context.match(
|
||||
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
|
||||
)[1];
|
||||
return `npm.${packageName.replace("@", "")}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 将cdn的资源挂载到插件上
|
||||
chainWebpack(config) {
|
||||
// @ 对应 src目录
|
||||
config.resolve.alias.set("@", resolve("src"));
|
||||
config.plugin("html").tap(args => {
|
||||
args[0].cdn = cdn;
|
||||
return args;
|
||||
});
|
||||
},
|
||||
pluginOptions: {
|
||||
"style-resources-loader": {
|
||||
preProcessor: "scss",
|
||||
patterns: [path.resolve(__dirname, "./src/styles/common.scss")]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue