zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化店铺端代码，减少报错信息，动态cdn加载，优化速度30%+

master
lemon橪 2021-08-27 18:10:33 +08:00
parent 7caa2fd40d
commit e6d8d87c31
16 changed files with 455 additions and 568 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
seller/package.json
View File

@ -13,38 +13,20 @@
"@amap/amap-jsapi-loader": "0.0.7", "@amap/amap-jsapi-loader": "0.0.7",
"@antv/g2": "^4.1.14", "@antv/g2": "^4.1.14",
"axios": "^0.21.1", "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", "js-cookie": "^2.2.1",
"node-sass": "^4.14.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", "sass-loader": "^8.0.2",
"sockjs-client": "^1.4.0", "sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"swiper": "^6.3.5",
"uuid": "^8.3.2", "uuid": "^8.3.2",
"view-design": "^4.6.1",
"vue": "^2.6.10", "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-excel": "^0.3.0",
"vue-json-pretty": "^1.4.1",
"vue-lazyload": "^1.3.3", "vue-lazyload": "^1.3.3",
"vue-qr": "^2.3.0", "vue-qr": "^2.3.0",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vuedraggable": "^2.23.2", "vuedraggable": "^2.23.2",
"vuex": "^3.4.0", "vuex": "^3.4.0",
"wangeditor": "^4.6.13", "wangeditor": "^4.6.13",
"xlsx": "^0.16.2",
"xss": "^1.0.7" "xss": "^1.0.7"
}, },
"devDependencies": { "devDependencies": {

59
seller/public/index.html
View File

@ -1,40 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<link rel="icon" href="./logo.ico" type="image/x-icon"> <link rel="icon" href="./logo.ico" type="image/x-icon" />
<title>lili store</title> <title>lili store</title>
<meta name="keywords" <meta name="keywords" content="keywords" />
content="keywords"> <meta name="description" content="description" />
<meta name="description" <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
content="description"> <link rel="stylesheet" href="<%=css%>" />
<!-- 部署CDN优化 --> <% } %>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script> <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js"></script> <script src="<%=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> <style>
.page-loading-wrap { .page-loading-wrap {
padding: 120px; padding: 120px;
@ -78,7 +57,6 @@
@keyframes half-circle-spinner-animation { @keyframes half-circle-spinner-animation {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
@ -86,12 +64,14 @@
} }
} }
</style> </style>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but lili-admin doesn't work properly without JavaScript enabled. Please enable it to <strong
continue.</strong> >We're sorry but lili-admin doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript> </noscript>
<div id="app"> <div id="app">
<div class="page-loading-wrap"> <div class="page-loading-wrap">
@ -103,6 +83,5 @@
</div> </div>
</div> </div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

3
seller/src/api/shops.js
View File

@ -1,8 +1,7 @@
// 统一请求路径前缀在libs/axios.js中修改 // 统一请求路径前缀在libs/axios.js中修改
import {getRequest, postRequest, putRequest, deleteRequest, importRequest, getRequestWithNoToken} from '@/libs/axios'; import {getRequest, postRequest, putRequest, deleteRequest, importRequest, getRequestWithNoToken} from '@/libs/axios';
// Vaptcha ID
export const vaptchaID = "5dce36188713b71e70a41eb7"
// 获取数据字典 // 获取数据字典
export const getDictData = "/dictData/getByType/" export const getDictData = "/dictData/getByType/"
// Websocket // Websocket

2
seller/src/libs/util.js
View File

@ -77,7 +77,7 @@ util.getRouterObjByName = function (routers, name) {
util.handleTitle = function (vm, item) { util.handleTitle = function (vm, item) {
if (typeof item.title == 'object') { if (typeof item.title == 'object') {
return vm.$t(item.title.i18n); return item.title;
} else { } else {
return item.title; return item.title;
} }

28
seller/src/locale/index.js
View File

@ -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;

24
seller/src/locale/lang/en-US.js
View File

@ -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'
};

24
seller/src/locale/lang/zh-CN.js
View File

@ -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: '版权所有'
};

9
seller/src/main.js
View File

@ -11,7 +11,6 @@ import vueQr from "vue-qr";
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";
import i18n from "@/locale";
import { import {
getRequest, getRequest,
@ -27,7 +26,6 @@ import util from "@/libs/util";
import dictUtil from "@/libs/dictUtil"; import dictUtil from "@/libs/dictUtil";
import VueLazyload from "vue-lazyload"; import VueLazyload from "vue-lazyload";
import VueClipboard from "vue-clipboard2";
import * as filters from "@/utils/filters"; // global filter import * as filters from "@/utils/filters"; // global filter
@ -38,11 +36,9 @@ Vue.use(VueLazyload, {
error: require("./assets/img-error.png"), error: require("./assets/img-error.png"),
loading: require("./assets/loading2.gif") 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添加为全局组件 Vue.component("vue-qr", vueQr); //此处将vue-qr添加为全局组件
// 挂载全局使用的方法 // 挂载全局使用的方法
@ -84,7 +80,6 @@ new Vue({
el: "#app", el: "#app",
router, router,
store, store,
i18n,
render: h => h(App), render: h => h(App),
data: { data: {
currentPageName: "" currentPageName: ""

4
seller/src/router/router.js
View File

@ -19,7 +19,7 @@ export const otherRouter = {
children: [ children: [
{ {
path: "home", path: "home",
title: { i18n: "home" }, title: "首页",
name: "home_index", name: "home_index",
component: () => import("@/views/home/home.vue") component: () => import("@/views/home/home.vue")
}, },
@ -132,7 +132,7 @@ export const otherRouter = {
title: "订单详情", title: "订单详情",
name: "order-detail", name: "order-detail",
component: () => import("@/views/order/order/orderDetail.vue") component: () => import("@/views/order/order/orderDetail.vue")
}, }
// { // {
// path: "/*", // path: "/*",

4
seller/src/views/Main.vue
View File

@ -24,8 +24,8 @@
<Avatar :src="userInfo.storeLogo" style="background: #fff;margin-left: 10px;"></Avatar> <Avatar :src="userInfo.storeLogo" style="background: #fff;margin-left: 10px;"></Avatar>
</div> </div>
<DropdownMenu slot="list"> <DropdownMenu slot="list">
<DropdownItem name="changePass">{{ $t('changePass') }}</DropdownItem> <DropdownItem name="changePass">切换</DropdownItem>
<DropdownItem name="loginOut" divided>{{ $t('logout') }}</DropdownItem> <DropdownItem name="loginOut" divided>退出</DropdownItem>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
</Row> </Row>

447
seller/src/views/goods/goods-seller/goodsOperationSec.vue
View File

@ -12,11 +12,11 @@
</FormItem> </FormItem>
<FormItem label="商品名称" prop="goodsName"> <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>
<FormItem label="商品卖点" prop="sellingPoint"> <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>
<FormItem label="商品品牌" prop="brandId"> <FormItem label="商品品牌" prop="brandId">
<Select v-model="baseInfoForm.brandId" filterable style="width: 200px"> <Select v-model="baseInfoForm.brandId" filterable style="width: 200px">
@ -28,14 +28,12 @@
<div class="form-item-view"> <div class="form-item-view">
<FormItem class="form-item-view-el" label="计量单位" prop="goodsUnit"> <FormItem class="form-item-view-el" label="计量单位" prop="goodsUnit">
<Select v-model="baseInfoForm.goodsUnit" style="width: 100px"> <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> </Option>
</Select> </Select>
</FormItem> </FormItem>
<FormItem class="form-item-view-el" label="销售模式" prop="salesModel"> <FormItem class="form-item-view-el" label="销售模式" prop="salesModel">
<RadioGroup type="button" <RadioGroup type="button" v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'" button-style="solid"
v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'"
button-style="solid"
v-model="baseInfoForm.salesModel"> v-model="baseInfoForm.salesModel">
<Radio title="零售型" label="RETAIL">零售型</Radio> <Radio title="零售型" label="RETAIL">零售型</Radio>
<Radio title="批发型" label="WHOLESALE">批发型</Radio> <Radio title="批发型" label="WHOLESALE">批发型</Radio>
@ -50,23 +48,21 @@
<h4>商品规格及图片</h4> <h4>商品规格及图片</h4>
<div class="form-item-view"> <div class="form-item-view">
<FormItem label="商品编号" prop="sn"> <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>
<FormItem label="商品价格" prop="price"> <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>
<FormItem label="市场价格" prop="cost"> <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>
<FormItem class="form-item-view-el required" label="商品图片" prop="goodsGalleryFiles"> <FormItem class="form-item-view-el required" label="商品图片" prop="goodsGalleryFiles">
<div style="display:flex;flex-wrap:flex-start;"> <div style="display:flex;flex-wrap:flex-start;">
<vuedraggable <vuedraggable :list="baseInfoForm.goodsGalleryFiles" :animation="200">
:list="baseInfoForm.goodsGalleryFiles" <div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles"
:animation="200" :key="__index">
>
<div class="demo-upload-list" v-for="(item, __index) in baseInfoForm.goodsGalleryFiles" :key="__index">
<template> <template>
<img :src="item.url"/> <img :src="item.url" />
<div class="demo-upload-list-cover"> <div class="demo-upload-list-cover">
<div> <div>
<Icon type="md-search" size="30" @click.native="handleViewGoodsPicture(item.url)"></Icon> <Icon type="md-search" size="30" @click.native="handleViewGoodsPicture(item.url)"></Icon>
@ -76,18 +72,18 @@
</template> </template>
</div> </div>
</vuedraggable> </vuedraggable>
<Upload ref="upload" :show-upload-list="false"
:on-success="handleSuccessGoodsPicture" :format="['jpg', 'jpeg', 'png']" <Upload ref="upload" :show-upload-list="false" :on-success="handleSuccessGoodsPicture"
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :max-size="1024" :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
:before-upload="handleBeforeUploadGoodsPicture" multiple type="drag" :action="uploadFileUrl" :on-exceeded-size="handleMaxSize" :max-size="1024" :before-upload="handleBeforeUploadGoodsPicture"
:headers="accessToken" style="margin-left:10px"> multiple type="drag" :action="uploadFileUrl" :headers="{...accessToken}" style="margin-left:10px">
<div style="width: 148px; height: 148px; line-height: 148px"> <div style="width: 148px; height: 148px; line-height: 148px">
<Icon type="md-add" size="20"></Icon> <Icon type="md-add" size="20"></Icon>
</div> </div>
</Upload> </Upload>
</div> </div>
<Modal title="View Image" v-model="goodsPictureVisible"> <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> </Modal>
</FormItem> </FormItem>
<div class="layout" style="width: 100%"> <div class="layout" style="width: 100%">
@ -100,8 +96,7 @@
<Card :bordered="true"> <Card :bordered="true">
<FormItem label="规格名：" class="sku-item-content-name"> <FormItem label="规格名：" class="sku-item-content-name">
<AutoComplete style="width: 150px" v-model="item.name" :maxlength="30" <AutoComplete style="width: 150px" v-model="item.name" :maxlength="30"
placeholder="请输入规格项名称" placeholder="请输入规格项名称" :filter-method="filterMethod" :data="skuData"
:filter-method="filterMethod" :data="skuData"
@on-change="editSkuItem"> @on-change="editSkuItem">
</AutoComplete> </AutoComplete>
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuItem($index)">删除 <Button type="error" style="margin-left: 10px" @click="handleCloseSkuItem($index)">删除
@ -112,68 +107,69 @@
<div v-for="(val, index) in item.spec_values" :key="index" <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> <div>
<AutoComplete style="width: 150px; float: left" v-model="val.value" <AutoComplete style="width: 150px; float: left" v-model="val.value" :maxlength="30"
:maxlength="30" placeholder="请输入规格值名称" placeholder="请输入规格值名称" :filter-method="filterMethod" :data="skuVal"
:filter-method="filterMethod" :data="skuVal"
@on-focus="changeSkuVals(item.name)" @on-focus="changeSkuVals(item.name)"
@on-change="skuValueChange(val.value, $index, item)"> @on-change="skuValueChange(val.value, $index, item)">
</AutoComplete> </AutoComplete>
<Button type="error" style="margin-left: 10px" @click="handleCloseSkuValue(item, index)"> <Button type="error" style="margin-left: 10px"
@click="handleCloseSkuValue(item, index)">
删除 删除
</Button> </Button>
</div> </div>
</div> </div>
<div style="float: left"> <div style="float: left">
<Button type="primary" @click="addSpec($index, item)">添加规格值</Button> <Button @click="addSpec($index, item)">添加规格值</Button>
</div> </div>
</FormItem> </FormItem>
</Card> </Card>
</div> </div>
</Form> </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> </div>
</Panel> </Panel>
<Panel name="2"> <Panel name="2">
规格详细 规格详细
<div slot="content"> <div slot="content">
<div slot="content"> <div slot="content">
<!-- #TODO 此处有待优化 -->
<Table class="mt_10" :columns="skuTableColumn" :data="skuTableData" style=" <Table class="mt_10" :columns="skuTableColumn" :data="skuTableData" style="
width: 100%; width: 100%;
.ivu-table-overflowX { .ivu-table-overflowX {
overflow-x: hidden; overflow-x: hidden;
} }
" :span-method="handleSpan"> ">
<template slot-scope="{ row }" slot="sn"> <template slot-scope="{ row }" slot="sn">
<Input v-model="row.sn" placeholder="请输入货号" @on-change="updateSkuTable(row, 'sn')"/> <Input clearable v-model="row.sn" placeholder="请输入货号"
</template> @on-change="updateSkuTable(row, 'sn')" />
<template slot-scope="{ row }" slot="weight" v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'">
<Input v-model="row.weight" placeholder="请输入重量" @on-change="updateSkuTable(row, 'weight')"/>
</template> </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"> <template slot-scope="{ row }" slot="quantity">
<Input v-model="row.quantity" placeholder="请输入库存" @on-change="updateSkuTable(row, 'quantity')"/> <Input clearable v-model="row.quantity" placeholder="请输入库存"
</template> @on-change="updateSkuTable(row, 'quantity')" /> </template>
<template slot-scope="{ row }" slot="cost"> <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>
<template slot-scope="{ row }" slot="price"> <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>
<template slot-scope="{ row }" slot="images"> <template slot-scope="{ row }" slot="images">
<Button @click="editSkuPicture(row)">编辑图片</Button> <Button @click="editSkuPicture(row)">编辑图片</Button>
<Modal v-model="showSkuPicture" :styles="{ top: '30px' }" class-name="sku-preview-modal" <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"> <div class="preview-picture">
<img v-if="previewPicture !== ''" :src="previewPicture"/> <img v-if="previewPicture !== ''" :src="previewPicture" />
</div> </div>
<Divider/> <Divider />
<vuedraggable <vuedraggable :list="selectedSku.images" :animation="200" style="display:inline-block;">
:list="selectedSku.images"
:animation="200"
style="display:inline-block;"
>
<div class="sku-upload-list" v-for="(img, __index) in selectedSku.images" :key="__index"> <div class="sku-upload-list" v-for="(img, __index) in selectedSku.images" :key="__index">
<template> <template>
<img :src="img.url"/> <img :src="img.url" />
<div class="sku-upload-list-cover"> <div class="sku-upload-list-cover">
<Icon type="md-search" @click="handleView(img.url)"></Icon> <Icon type="md-search" @click="handleView(img.url)"></Icon>
<Icon type="md-trash" @click="handleRemove(img, __index)"></Icon> <Icon type="md-trash" @click="handleRemove(img, __index)"></Icon>
@ -181,11 +177,11 @@
</template> </template>
</div> </div>
</vuedraggable> </vuedraggable>
<Upload ref="uploadSku" :show-upload-list="false" <Upload ref="uploadSku" :show-upload-list="false" :on-success="handleSuccess"
:on-success="handleSuccess" :format="['jpg', 'jpeg', 'png']" :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError"
:on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :max-size="1024" :on-exceeded-size="handleMaxSize" :max-size="1024" :before-upload="handleBeforeUpload"
:before-upload="handleBeforeUpload" multiple type="drag" :action="uploadFileUrl" multiple type="drag" :action="uploadFileUrl" :headers="{...accessToken}"
:headers="accessToken" style="display: inline-block; width: 58px"> style="display: inline-block; width: 58px">
<div> <div>
<Icon type="ios-camera" size="55"></Icon> <Icon type="ios-camera" size="55"></Icon>
</div> </div>
@ -202,27 +198,16 @@
<h4>商品详情描述</h4> <h4>商品详情描述</h4>
<div class="form-item-view"> <div class="form-item-view">
<div class="tree-bar"> <div class="tree-bar">
<FormItem <FormItem class="form-item-view-el" label="店内分类" prop="shopCategory">
class="form-item-view-el" <Tree ref="tree" style="text-align:left;" :data="shopCategory" show-checkbox
label="店内分类" @on-select-change="selectTree" @on-check-change="changeSelect" :check-strictly="false"></Tree>
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> </FormItem>
</div> </div>
<FormItem class="form-item-view-el" label="商品描述" prop="intro"> <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>
<FormItem class="form-item-view-el" label="移动端描述" prop="skuList"> <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> </FormItem>
</div> </div>
<div v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'"> <div v-if="baseInfoForm.goodsType!='VIRTUAL_GOODS'">
@ -234,17 +219,9 @@
</Input> </Input>
</FormItem> </FormItem>
<FormItem <FormItem class="form-item-view-el" label="物流模板" prop="templateId">
class="form-item-view-el"
label="物流模板"
prop="templateId"
>
<Select v-model="baseInfoForm.templateId" style="width: 200px"> <Select v-model="baseInfoForm.templateId" style="width: 200px">
<Option <Option v-for="item in logisticsTemplate" :value="item.id" :key="item.id">{{ item.name }}
v-for="item in logisticsTemplate"
:value="item.id"
:key="item.id"
>{{ item.name }}
</Option> </Option>
</Select> </Select>
</FormItem> </FormItem>
@ -253,20 +230,20 @@
<div class="form-item-view"> <div class="form-item-view">
<FormItem class="form-item-view-el" label="商品发布" prop="release"> <FormItem class="form-item-view-el" label="商品发布" prop="release">
<RadioGroup type="button" button-style="solid" v-model="baseInfoForm.release"> <RadioGroup type="button" button-style="solid" v-model="baseInfoForm.release">
<Radio title="立即发布" :label="true"> <Radio title="立即发布" :label="1">
<span>立即发布</span> <span>立即发布</span>
</Radio> </Radio>
<Radio title="放入仓库" :label="false"> <Radio title="放入仓库" :label="0">
<span>放入仓库</span> <span>放入仓库</span>
</Radio> </Radio>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem class="form-item-view-el" label="商品推荐" prop="skuList"> <FormItem class="form-item-view-el" label="商品推荐" prop="skuList">
<RadioGroup type="button" button-style="solid" v-model="baseInfoForm.recommend"> <RadioGroup type="button" button-style="solid" v-model="baseInfoForm.recommend">
<Radio title="推荐" :label="true"> <Radio title="推荐" :label="1">
<span>推荐</span> <span>推荐</span>
</Radio> </Radio>
<Radio title="不推荐" :label="false"> <Radio title="不推荐" :label="0">
<span>不推荐</span> <span>不推荐</span>
</Radio> </Radio>
</RadioGroup> </RadioGroup>
@ -274,9 +251,7 @@
</div> </div>
<div class="form-item-view-bottom"> <div class="form-item-view-bottom">
<Collapse v-model="params_panel" v-for="(paramsGroup,groupIndex) in goodsParams" <Collapse v-model="params_panel" v-for="(paramsGroup,groupIndex) in goodsParams"
:title="paramsGroup.groupName" :title="paramsGroup.groupName" class="mb_10" style="text-align: left" :key="paramsGroup.groupName">
class="mb_10"
style="text-align: left" :key="paramsGroup.groupName">
<Panel :name="paramsGroup.groupName"> <Panel :name="paramsGroup.groupName">
{{paramsGroup.groupName}} {{paramsGroup.groupName}}
<p slot="content"> <p slot="content">
@ -284,8 +259,8 @@
:label="`${params.paramName}：`"> :label="`${params.paramName}：`">
<Select v-model="params.paramValue" placeholder="请选择" style="width: 200px" clearable <Select v-model="params.paramValue" placeholder="请选择" style="width: 200px" clearable
@on-change="selectParams(paramsGroup,groupIndex,params,paramsIndex,params.paramValue)"> @on-change="selectParams(paramsGroup,groupIndex,params,paramsIndex,params.paramValue)">
<Option v-for="option in params.options.split(',')" :label="option" <Option v-for="option in params.options.split(',')" :label="option" :value="option"
:value="option" :key="option"></Option> :key="option"></Option>
</Select> </Select>
</FormItem> </FormItem>
</p> </p>
@ -316,20 +291,20 @@ import cloneObj from "@/utils/index";
import vuedraggable from "vuedraggable"; import vuedraggable from "vuedraggable";
import editor from "@/views/my-components/lili/editor"; import editor from "@/views/my-components/lili/editor";
import { uploadFile } from "@/libs/axios"; import { uploadFile } from "@/libs/axios";
import {regular} from "@/utils"; import { regular } from "@/utils";
export default { export default {
components:{ components: {
editor, editor,
vuedraggable vuedraggable,
}, },
props: { props: {
firstData: { firstData: {
default: {}, default: {},
type: Object type: Object,
}
}, },
data () { },
data() {
// 表单验证项，商品价格 // 表单验证项，商品价格
const checkPrice = (rule, value, callback) => { const checkPrice = (rule, value, callback) => {
if (!value && value !== 0) { if (!value && value !== 0) {
@ -368,7 +343,9 @@ export default {
} }
}; };
return { return {
categoryId: '', // 商品分类第三级id accessToken: "", //令牌token
goodsParams: "",
categoryId: "", // 商品分类第三级id
//提交状态 //提交状态
submitLoading: false, submitLoading: false,
//上传图片路径 //上传图片路径
@ -393,9 +370,9 @@ export default {
/** 商品相册列表 */ /** 商品相册列表 */
goodsGalleryFiles: [], goodsGalleryFiles: [],
/** 是否立即发布 true 立即发布 false 放入仓库 */ /** 是否立即发布 true 立即发布 false 放入仓库 */
release: true, release: 1,
/** 是否为推荐商品 */ /** 是否为推荐商品 */
recommend: true, recommend: 1,
/** 店铺分类 */ /** 店铺分类 */
storeCategoryPath: "", storeCategoryPath: "",
brandId: 0, brandId: 0,
@ -414,11 +391,11 @@ export default {
/** 是否重新生成sku */ /** 是否重新生成sku */
regeneratorSkuFlag: false, regeneratorSkuFlag: false,
/** 物流模板id **/ /** 物流模板id **/
templateId: '', templateId: "",
/** 参数组*/ /** 参数组*/
goodsParamsDTOList: [], goodsParamsDTOList: [],
/** 商品分类中文名 */ /** 商品分类中文名 */
categoryName: [] categoryName: [],
}, },
/** 表格头 */ /** 表格头 */
skuTableColumn: [], skuTableColumn: [],
@ -445,7 +422,7 @@ export default {
validateError: [], validateError: [],
baseInfoFormRule: { baseInfoFormRule: {
goodsName: [ goodsName: [
{required: true, message: "请输入商品名称"}, { required: true, message: "请输入商品名称" },
{ {
whitespace: true, whitespace: true,
message: "商品名称不可为纯空格", message: "商品名称不可为纯空格",
@ -457,24 +434,24 @@ export default {
}, },
], ],
sn: [ sn: [
{required: true, message: "请输入商品编号"}, { required: true, message: "请输入商品编号" },
{validator: checkSn}, { validator: checkSn },
], ],
price: [ price: [
{required: true, message: "请输入商品价格"}, { required: true, message: "请输入商品价格" },
{validator: checkPrice}, { validator: checkPrice },
], ],
cost: [ cost: [
{required: true, message: "请输入市场价格"}, { required: true, message: "请输入市场价格" },
{validator: checkPrice}, { validator: checkPrice },
], ],
weight: [ weight: [
{required: true, message: "请输入商品重量"}, { required: true, message: "请输入商品重量" },
{validator: checkWeight}, { validator: checkWeight },
], ],
templateId: [{required: true, message: '请选择物流模板'}], templateId: [{ required: true, message: "请选择物流模板" }],
sellingPoint: [{required: true, message: "请输入商品卖点"}], sellingPoint: [{ required: true, message: "请输入商品卖点" }],
goodsUnit: [{required: true, message: "请选择计量单位"}], goodsUnit: [{ required: true, message: "请选择计量单位" }],
}, },
/** 品牌列表 */ /** 品牌列表 */
brandList: [], brandList: [],
@ -482,7 +459,8 @@ export default {
shopCategory: [], shopCategory: [],
/** 商品单位列表 */ /** 商品单位列表 */
goodsUnitList: [], goodsUnitList: [],
ignoreColumn: [ // 添加规格时需要忽略的参数 ignoreColumn: [
// 添加规格时需要忽略的参数
"_index", "_index",
"_rowKey", "_rowKey",
"sn", "sn",
@ -492,8 +470,8 @@ export default {
"quantity", "quantity",
"specId", "specId",
"specValueId", "specValueId",
] ],
} };
}, },
methods: { methods: {
/** /**
@ -507,32 +485,41 @@ export default {
selectParams(paramsGroup, groupIndex, params, paramsIndex, value) { selectParams(paramsGroup, groupIndex, params, paramsIndex, value) {
if (!this.baseInfoForm.goodsParamsDTOList[groupIndex]) { if (!this.baseInfoForm.goodsParamsDTOList[groupIndex]) {
this.baseInfoForm.goodsParamsDTOList[groupIndex] = { this.baseInfoForm.goodsParamsDTOList[groupIndex] = {
groupId: '', groupId: "",
groupName: '', groupName: "",
goodsParamsItemDTOList: [] goodsParamsItemDTOList: [],
} };
} }
//赋予分组id、分组名称 //赋予分组id、分组名称
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupId = paramsGroup.groupId this.baseInfoForm.goodsParamsDTOList[groupIndex].groupId =
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupName = paramsGroup.groupName paramsGroup.groupId;
this.baseInfoForm.goodsParamsDTOList[groupIndex].groupName =
paramsGroup.groupName;
//参数详细为空，则赋予 //参数详细为空，则赋予
if (!this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex]) { if (
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex]={ !this.baseInfoForm.goodsParamsDTOList[groupIndex]
paramName: '', .goodsParamsItemDTOList[paramsIndex]
paramValue: '', ) {
isIndex: '', this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
required: '', paramsIndex
paramId: '' ] = {
paramName: "",
paramValue: "",
isIndex: "",
required: "",
paramId: "",
};
} }
} this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[
this.baseInfoForm.goodsParamsDTOList[groupIndex].goodsParamsItemDTOList[paramsIndex]={ paramsIndex
] = {
paramName: params.paramName, paramName: params.paramName,
paramValue: value, paramValue: value,
isIndex: params.isIndex, isIndex: params.isIndex,
required: params.required, required: params.required,
paramId: params.id paramId: params.id,
} };
}, },
// 编辑sku图片 // 编辑sku图片
editSkuPicture(row) { editSkuPicture(row) {
@ -542,11 +529,12 @@ export default {
this.selectedSku = row; this.selectedSku = row;
this.showSkuPicture = true; this.showSkuPicture = true;
}, },
pre () { // 上一步 pre() {
// 上一步
this.$parent.activestep--; this.$parent.activestep--;
}, },
// 预览图片 // 预览图片
handleView (url) { handleView(url) {
this.previewPicture = url; this.previewPicture = url;
this.visible = true; this.visible = true;
}, },
@ -601,25 +589,24 @@ export default {
handleFormatError(file) { handleFormatError(file) {
this.$Notice.warning({ this.$Notice.warning({
title: "文件格式不正确", title: "文件格式不正确",
desc: "文件 " + file.name + " 的格式不正确" desc: "文件 " + file.name + " 的格式不正确",
}); });
}, },
// 图片大小不正确 // 图片大小不正确
handleMaxSize(file) { handleMaxSize(file) {
this.$Notice.warning({ this.$Notice.warning({
title: "超过文件大小限制", title: "超过文件大小限制",
desc: "图片大小不能超过1MB" desc: "图片大小不能超过1MB",
}); });
}, },
// 图片上传前钩子 // 图片上传前钩子
handleBeforeUploadGoodsPicture(file) { handleBeforeUploadGoodsPicture(file) {
const check = this.baseInfoForm.goodsGalleryFiles.length < 5; const check = this.baseInfoForm.goodsGalleryFiles.length < 5;
if (!check) { if (!check) {
this.$Notice.warning({ this.$Notice.warning({
title: "图片数量不能大于五张", title: "图片数量不能大于五张",
}); });
return false return false;
} }
}, },
// sku图片上传前钩子 // sku图片上传前钩子
@ -629,7 +616,7 @@ export default {
this.selectedSku.images.length > 5; this.selectedSku.images.length > 5;
if (check) { if (check) {
this.$Notice.warning({ title: "图片数量不能大于五张" }); this.$Notice.warning({ title: "图片数量不能大于五张" });
return false return false;
} }
}, },
@ -673,7 +660,7 @@ export default {
}); });
}, },
// 编辑时获取商品信息 // 编辑时获取商品信息
async GET_GoodData(id,draftId) { async GET_GoodData(id, draftId) {
let response = {}; let response = {};
if (draftId) { if (draftId) {
response = await API_GOODS.getDraftGoodsDetail(draftId); response = await API_GOODS.getDraftGoodsDetail(draftId);
@ -681,25 +668,26 @@ export default {
response = await API_GOODS.getGoods(id); response = await API_GOODS.getGoods(id);
this.goodsId = response.result.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]; this.categoryId = response.result.categoryPath.split(",")[2];
if ( if (
response.result.goodsGalleryList && response.result.goodsGalleryList &&
response.result.goodsGalleryList.length > 0 response.result.goodsGalleryList.length > 0
) { ) {
this.baseInfoForm.goodsGalleryFiles = this.baseInfoForm.goodsGalleryFiles =
response.result.goodsGalleryList.map((i) => { response.result.goodsGalleryList.map((i) => {
let files = {url: i}; let files = { url: i };
return files; return files;
}); });
} }
this.Get_SkuInfoByCategory(this.categoryId) this.Get_SkuInfoByCategory(this.categoryId);
this.renderGoodsDetailSku(response.result.skuList); this.renderGoodsDetailSku(response.result.skuList);
@ -781,32 +769,30 @@ export default {
this.goodsParams = response; this.goodsParams = response;
//展开选项卡 //展开选项卡
this.goodsParams.forEach(item => { this.goodsParams.forEach((item) => {
this.params_panel.push(item.groupName) this.params_panel.push(item.groupName);
} });
)
if (this.baseInfoForm.goodsParamsDTOList) { if (this.baseInfoForm.goodsParamsDTOList) {
// 已选值集合 // 已选值集合
const paramsArr = [] const paramsArr = [];
this.baseInfoForm.goodsParamsDTOList.forEach(group =>{ this.baseInfoForm.goodsParamsDTOList.forEach((group) => {
group.goodsParamsItemDTOList.forEach(param => { group.goodsParamsItemDTOList.forEach((param) => {
param.groupId = group.groupId param.groupId = group.groupId;
paramsArr.push(param) paramsArr.push(param);
}) });
}) });
// 循环参数分组 // 循环参数分组
this.goodsParams.forEach((parmsGroup) => { this.goodsParams.forEach((parmsGroup) => {
parmsGroup.params.forEach(param => { parmsGroup.params.forEach((param) => {
paramsArr.forEach((arr) => {
paramsArr.forEach(arr=>{ if (param.paramName == arr.paramName) {
if(param.paramName == arr.paramName){ param.paramValue = arr.paramValue;
param.paramValue = arr.paramValue
} }
}) });
}) });
}); });
} else { } else {
this.baseInfoForm.goodsParamsDTOList = [] this.baseInfoForm.goodsParamsDTOList = [];
} }
} }
); );
@ -837,10 +823,10 @@ export default {
this.skuData.forEach((e, index) => { this.skuData.forEach((e, index) => {
if (e === name) { if (e === name) {
if (this.skuVal.length != this.skuVals[index].length) { 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) { addSpec($index, item) {
if (this.validateEmpty(item.spec_values)) { if (this.validateEmpty(item.spec_values)) {
if (item.spec_values.length >= 10) { if (item.spec_values.length >= 10) {
this.$Message.error("规格值不能大于10个！"); this.$Message.error("规格值不能大于10个！");
return; return;
} }
this.$set( this.$set(item.spec_values, item.spec_values.length, {
item.spec_values,
item.spec_values.length,
{
name: item.name, name: item.name,
} });
);
this.baseInfoForm.regeneratorSkuFlag = true; this.baseInfoForm.regeneratorSkuFlag = true;
/** /**
* 渲染规格详细表格 * 渲染规格详细表格
@ -917,13 +898,13 @@ export default {
}); });
}); });
this.baseInfoForm.goodsType != "VIRTUAL_GOODS" this.baseInfoForm.goodsType != "VIRTUAL_GOODS";
? pushData.push({
pushData.push(
{
title: "重量", title: "重量",
slot: "weight", slot: "weight",
}) },
: "";
pushData.push(
{ {
title: "货号", title: "货号",
slot: "sn", slot: "sn",
@ -945,13 +926,14 @@ export default {
slot: "images", slot: "images",
} }
); );
this.baseInfoForm.goodsType != "VIRTUAL_GOODS" ? pushData.shift() : "";
this.skuTableColumn = pushData; this.skuTableColumn = pushData;
//克隆所有渲染的数据 //克隆所有渲染的数据
let cloneTemp = cloneObj(this.skuInfo); let cloneTemp = cloneObj(this.skuInfo);
//数据清空一次 //数据清空一次
this.skuTableData = []; this.$set(this, "skuTableData", []);
//判定 是否存在规格分组 //判定 是否存在规格分组
if (cloneTemp[0]) { if (cloneTemp[0]) {
//存放最终结果 //存放最终结果
@ -966,6 +948,7 @@ export default {
cloneTemp.splice(0, 1); cloneTemp.splice(0, 1);
result = this.specIterator(result, cloneTemp); result = this.specIterator(result, cloneTemp);
this.skuTableData = result; this.skuTableData = result;
console.log(this.skuTableData)
} }
}, },
/** /**
@ -990,7 +973,6 @@ export default {
}); });
//清除当前循环的分组 //清除当前循环的分组
cloneTemp.splice(0, 1); cloneTemp.splice(0, 1);
} else { } else {
return result; return result;
} }
@ -999,16 +981,15 @@ export default {
/** 根据分类id获取系统设置规格信息*/ /** 根据分类id获取系统设置规格信息*/
Get_SkuInfoByCategory(categoryId) { Get_SkuInfoByCategory(categoryId) {
if (categoryId) { if (categoryId) {
API_GOODS.getGoodsSpecInfoSeller(categoryId).then(res => { API_GOODS.getGoodsSpecInfoSeller(categoryId).then((res) => {
if (res.length) { if (res.length) {
res.forEach(e => { res.forEach((e) => {
this.skuData.push(e.specName) this.skuData.push(e.specName);
const vals = e.specValue ? e.specValue.split(',') : [] const vals = e.specValue ? e.specValue.split(",") : [];
this.skuVals.push(Array.from(new Set(vals))) this.skuVals.push(Array.from(new Set(vals)));
}) });
} }
} });
);
} }
}, },
/** 自动完成表单所需方法*/ /** 自动完成表单所需方法*/
@ -1016,7 +997,8 @@ export default {
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1; return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
}, },
/** 数据改变之后 抛出数据 */ /** 数据改变之后 抛出数据 */
updateSkuTable(row, item) { updateSkuTable(row, item, type = "deafult") {
let index = row._index; let index = row._index;
this.baseInfoForm.regeneratorSkuFlag = true; this.baseInfoForm.regeneratorSkuFlag = true;
/** 进行自定义校验 判断是否是数字（小数也能通过）重量 */ /** 进行自定义校验 判断是否是数字（小数也能通过）重量 */
@ -1054,7 +1036,10 @@ export default {
return; return;
} }
} }
this.$nextTick(() => {
this.skuTableData[index][item] = row[item]; this.skuTableData[index][item] = row[item];
});
// this.$set(this.skuTableData,[index][item],row[item])
}, },
// 店内分类选择 // 店内分类选择
selectTree(v) { selectTree(v) {
@ -1086,15 +1071,16 @@ export default {
this.submitLoading = true; this.submitLoading = true;
this.$refs["baseInfoForm"].validate((valid) => { this.$refs["baseInfoForm"].validate((valid) => {
if (valid) { if (valid) {
let submit = JSON.parse(JSON.stringify(this.baseInfoForm));
if ( if (
this.baseInfoForm.goodsGalleryFiles && submit.goodsGalleryFiles &&
this.baseInfoForm.goodsGalleryFiles.length <= 0 submit.goodsGalleryFiles.length <= 0
) { ) {
this.submitLoading = false; this.submitLoading = false;
this.$Message.error("请上传商品图片"); this.$Message.error("请上传商品图片");
return; return;
} }
if (this.baseInfoForm.templateId === '') this.baseInfoForm.templateId = 0; if (submit.templateId === "") submit.templateId = 0;
let flag = false; let flag = false;
let paramValue = ""; let paramValue = "";
@ -1103,25 +1089,34 @@ export default {
this.submitLoading = false; this.submitLoading = false;
return; return;
} }
let tips = ""
submit.skuList = this.skuTableData.map((sku) => {
// 非空判断
console.warn(sku);
this.baseInfoForm.skuList = this.skuTableData.map((sku) => { // delete sku._index;
delete sku._index; // delete sku._rowKey;
delete sku._rowKey; // delete sku.specNameId;
delete sku.specNameId; // delete sku.specValueId;
delete sku.specValueId; // return sku;
return sku;
}); });
if (this.baseInfoForm.goodsGalleryFiles.length > 0) { if (submit.goodsGalleryFiles.length > 0) {
this.baseInfoForm.goodsGalleryList = submit.goodsGalleryList = submit.goodsGalleryFiles.map(
this.baseInfoForm.goodsGalleryFiles.map((i) => i.url); (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) { if (this.goodsId) {
API_GOODS.editGoods(this.goodsId, this.baseInfoForm).then((res) => { API_GOODS.editGoods(this.goodsId, submit).then((res) => {
if (res.success) { if (res.success) {
this.submitLoading = false; this.submitLoading = false;
this.$router.go(-1); this.$router.go(-1);
@ -1130,7 +1125,7 @@ export default {
} }
}); });
} else { } else {
API_GOODS.createGoods(this.baseInfoForm).then((res) => { API_GOODS.createGoods(submit).then((res) => {
if (res.success) { if (res.success) {
this.submitLoading = false; this.submitLoading = false;
this.$parent.activestep = 2; this.$parent.activestep = 2;
@ -1153,7 +1148,7 @@ export default {
this.baseInfoForm.goodsGalleryFiles.map((i) => i.url); this.baseInfoForm.goodsGalleryFiles.map((i) => i.url);
} }
this.baseInfoForm.categoryName = []; this.baseInfoForm.categoryName = [];
this.baseInfoForm.saveType = 'TEMPLATE'; this.baseInfoForm.saveType = "TEMPLATE";
if (this.$route.query.draftId) { if (this.$route.query.draftId) {
this.baseInfoForm.id = 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) => { API_GOODS.saveDraftGoods(this.baseInfoForm).then((res) => {
if (res.success) { if (res.success) {
this.$Message.info("保存成功！"); this.$Message.info("保存成功！");
this.$router.push({name: 'template-goods'}); this.$router.push({ name: "template-goods" });
} }
}); });
}
}, },
mounted () { },
mounted() {
this.accessToken = { this.accessToken = {
accessToken: this.getStore("accessToken"), accessToken: this.getStore("accessToken"),
}; };
@ -1204,20 +1200,23 @@ export default {
if (res.success) { if (res.success) {
this.logisticsTemplate = res.result; this.logisticsTemplate = res.result;
} }
}) });
if (this.$route.query.id || this.$route.query.draftId) { // 编辑商品、模板 if (this.$route.query.id || this.$route.query.draftId) {
this.GET_GoodData(this.$route.query.id, this.$route.query.draftId) // 编辑商品、模板
} else { // 新增商品、模板 this.GET_GoodData(this.$route.query.id, this.$route.query.draftId);
if (this.firstData.tempId) { // 选择模板
this.GET_GoodData('', this.firstData.tempId)
} else { } else {
const cateId = [] // 新增商品、模板
this.firstData.category.forEach(cate => { if (this.firstData.tempId) {
this.baseInfoForm.categoryName.push(cate.name) // 选择模板
cateId.push(cate.id) this.GET_GoodData("", this.firstData.tempId);
}) } else {
this.categoryId = cateId[2] const cateId = [];
this.baseInfoForm.categoryPath = cateId.toString() 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.baseInfoForm.goodsType = this.firstData.goodsType;
/** 获取该商城分类下 商品参数信息 */ /** 获取该商城分类下 商品参数信息 */
this.GET_GoodsParams(); this.GET_GoodsParams();
@ -1230,12 +1229,10 @@ export default {
// 获取当前店铺分类 // 获取当前店铺分类
this.GET_ShopGoodsLabel(); this.GET_ShopGoodsLabel();
} }
} }
},
} };
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./addGoods.scss"; @import "./addGoods.scss";
</style> </style>

4
seller/src/views/login.vue
View File

@ -15,8 +15,8 @@
<Row> <Row>
<Button class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long> <Button class="login-btn" type="primary" size="large" :loading="loading" @click="submitLogin" long>
<span v-if="!loading">{{ $t("login") }}</span> <span v-if="!loading">登录</span>
<span v-else>{{ $t("logining") }}</span> <span v-else>登录中</span>
</Button> </Button>
</Row> </Row>

16
seller/src/views/main-components/footer.vue
View File

@ -1,17 +1,13 @@
<template> <template>
<div class="foot"> <div class="foot">
<Row type="flex" justify="space-around" class="help"> <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">帮助</a>
<a class="item" href="https://pickmall.cn/" target="_blank">{{ $t('privacy') }}</a> <a class="item" href="https://pickmall.cn/" target="_blank">隐私</a>
<a class="item" href="https://pickmall.cn/" target="_blank">{{ $t('terms') }}</a> <a class="item" href="https://pickmall.cn/" target="_blank">条款</a>
</Row> </Row>
<Row type="flex" justify="center" class="copyright"> <Row type="flex" justify="center" class="copyright">
Copyright © {{year}} - Present Copyright © {{year}} - Present
<a <a href="https://pickmall.cn/" target="_blank" style="margin:0 5px;">lili-shop</a>
href="https://pickmall.cn/"
target="_blank"
style="margin:0 5px;"
>lili-shop</a> {{ $t('rights') }}
</Row> </Row>
</div> </div>
</template> </template>
@ -21,8 +17,8 @@ export default {
name: "footer", name: "footer",
data() { data() {
return { return {
year: new Date().getFullYear() // 年 year: new Date().getFullYear(), // 年
} };
}, },
}; };
</script> </script>

2
seller/src/views/main-components/tags-page-opened.vue
View File

@ -71,7 +71,7 @@ export default {
// 格式化标签名 // 格式化标签名
itemTitle(item) { itemTitle(item) {
if (typeof item.title == "object") { if (typeof item.title == "object") {
return this.$t(item.title.i18n); return item.title;
} else { } else {
return item.title; return item.title;
} }

36
seller/src/views/my-components/lili/editor.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div style="position: relative"> <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 v-if="showExpand">
<div class="e-menu e-code" @click="editHTML"> <div class="e-menu e-code" @click="editHTML">
<Icon type="md-code-working" size="22" /> <Icon type="md-code-working" size="22" />
@ -15,29 +15,12 @@
</div> </div>
</div> </div>
<Modal <Modal title="编辑html代码" v-model="showHTMLModal" :mask-closable="false" :width="900" :fullscreen="full">
title="编辑html代码" <Input v-if="!full" v-model="dataEdit" :rows="15" type="textarea" style="max-height: 60vh; overflow: auto" />
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" /> <Input v-if="full" v-model="dataEdit" :rows="32" type="textarea" />
<div slot="footer"> <div slot="footer">
<Button @click="full = !full" icon="md-expand">全屏开/关</Button> <Button @click="full = !full" icon="md-expand">全屏开/关</Button>
<Button <Button @click="editHTMLOk" type="primary" icon="md-checkmark-circle-outline">确定保存</Button>
@click="editHTMLOk"
type="primary"
icon="md-checkmark-circle-outline"
>确定保存</Button
>
</div> </div>
</Modal> </Modal>
<Modal title="预览" v-model="fullscreenModal" fullscreen> <Modal title="预览" v-model="fullscreenModal" fullscreen>
@ -58,7 +41,7 @@ import { sina } from "@/libs/emoji";
export default { export default {
name: "editor", name: "editor",
props: { props: {
id: { eid: {
type: String, type: String,
default: "editor", default: "editor",
}, },
@ -78,7 +61,7 @@ export default {
}, },
data() { data() {
return { return {
editor: null, // 初始化富文本编辑器 editor: "", // 初始化富文本编辑器
data: this.value, // 富文本数据 data: this.value, // 富文本数据
dataEdit: "", // 编辑数据 dataEdit: "", // 编辑数据
showHTMLModal: false, // 显示html showHTMLModal: false, // 显示html
@ -90,7 +73,7 @@ export default {
// 初始化编辑器 // 初始化编辑器
initEditor() { initEditor() {
let that = this; let that = this;
this.editor = new E(`#${this.id}`); this.editor = new E(`#${this.eid}`);
// 编辑内容绑定数据 // 编辑内容绑定数据
this.editor.config.onchange = (html) => { this.editor.config.onchange = (html) => {
if (this.openXss) { if (this.openXss) {
@ -208,16 +191,17 @@ export default {
this.$emit("input", this.data); this.$emit("input", this.data);
this.$emit("on-change", this.data); this.$emit("on-change", this.data);
} }
} },
}, },
watch: { watch: {
value: { value: {
immediate: true,
handler: function (val) { handler: function (val) {
// 赋值给富文本
this.setData(val); this.setData(val);
}, },
}, },
}, },
mounted() { mounted() {
this.initEditor(); this.initEditor();
}, },

107
seller/vue.config.js
View File

@ -1,13 +1,60 @@
const path = require('path') const path = require("path");
const CompressionPlugin = require('compression-webpack-plugin'); const CompressionPlugin = require("compression-webpack-plugin");
const resolve = dir => { 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 = { module.exports = {
css: { css: {
loaderOptions: { // 向 CSS 相关的 loader 传递选项 loaderOptions: {
// 向 CSS 相关的 loader 传递选项
less: { less: {
lessOptions: { lessOptions: {
javascriptEnabled: true javascriptEnabled: true
@ -16,12 +63,7 @@ module.exports = {
} }
}, },
devServer: { devServer: {
port: 10002, port: 10002
},
chainWebpack: config => {
// @ 对应 src目录
config.resolve.alias.set('@', resolve('src'))
}, },
// 打包时不生成.map文件 避免看到源码 // 打包时不生成.map文件 避免看到源码
@ -29,29 +71,8 @@ module.exports = {
// 部署优化 // 部署优化
configureWebpack: { configureWebpack: {
// 使用CDN externals,
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压缩 // GZIP压缩
plugins: [ plugins: [
new CompressionPlugin({ new CompressionPlugin({
@ -79,10 +100,20 @@ module.exports = {
} }
} }
}, },
// 将cdn的资源挂载到插件上
chainWebpack(config) {
// @ 对应 src目录
config.resolve.alias.set("@", resolve("src"));
config.plugin("html").tap(args => {
args[0].cdn = cdn;
return args;
});
},
pluginOptions: { pluginOptions: {
'style-resources-loader': { "style-resources-loader": {
preProcessor: 'scss', preProcessor: "scss",
patterns: [path.resolve(__dirname, './src/styles/common.scss')] patterns: [path.resolve(__dirname, "./src/styles/common.scss")]
} }
} }
} };