Merge branch 'master' of https://gitee.com/beijing_hongye_huicheng/lilishop-ui
commit
81297db7a8
|
@ -1,99 +1,85 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="scroll-show">
|
<div class="scroll-show">
|
||||||
<div class="content clearfix">
|
<div class="content clearfix">
|
||||||
<!-- <cateNav class="cate" :hover="true" :showNavBar="false"></cateNav> -->
|
<cateNav class="cate" :hover="true" :showNavBar="false"></cateNav>
|
||||||
<img src="../../assets/images/logo2.png" alt="" class="images" />
|
<Search
|
||||||
<Search class="search-con" :hover="true" :showLogo="false" :showTag="false"></Search>
|
class="search-con"
|
||||||
<div class="cart-content">
|
:hover="true"
|
||||||
<Icon type="ios-cart-outline" @click="goCartList" class="cart-icon" @mouseenter.native="getCartList" />
|
:showLogo="false"
|
||||||
<i class="cart-badge">{{cartNum < 100 ? cartNum : '99'}}</i>
|
:showTag="false"
|
||||||
</div>
|
></Search>
|
||||||
<div class="hr"></div>
|
<Icon
|
||||||
|
type="ios-cart-outline"
|
||||||
|
@click="goCartList"
|
||||||
|
class="cart-icon"
|
||||||
|
@mouseenter.native="getCartList"
|
||||||
|
/>
|
||||||
|
<i class="cart-badge">{{ cartNum < 100 ? cartNum : "99" }}</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import {cartCount} from '@/api/cart.js'
|
import { cartCount } from "@/api/cart.js";
|
||||||
import storage from '@/plugins/storage.js';
|
import storage from "@/plugins/storage.js";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
userInfo: {} // 用户信息
|
userInfo: {}, // 用户信息
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
cartNum () { // 购物车商品数量
|
cartNum() {
|
||||||
return this.$store.state.cartNum
|
// 购物车商品数量
|
||||||
}
|
return this.$store.state.cartNum;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
goCartList () { // 跳转购物车页面
|
goCartList() {
|
||||||
|
// 跳转购物车页面
|
||||||
let routerUrl = this.$router.resolve({
|
let routerUrl = this.$router.resolve({
|
||||||
path: '/cart'
|
path: "/cart",
|
||||||
})
|
});
|
||||||
window.open(routerUrl.href, '_blank')
|
window.open(routerUrl.href, "_blank");
|
||||||
},
|
},
|
||||||
getCartList () { // 获取购物车列表
|
getCartList() {
|
||||||
if (storage.getItem('userInfo')) {
|
// 获取购物车列表
|
||||||
cartCount().then(res => {
|
if (storage.getItem("userInfo")) {
|
||||||
this.$store.commit('SET_CARTNUM', res.result)
|
cartCount().then((res) => {
|
||||||
this.Cookies.setItem('cartNum', res.result)
|
this.$store.commit("SET_CARTNUM", res.result);
|
||||||
})
|
this.Cookies.setItem("cartNum", res.result);
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (storage.getItem('userInfo')) {
|
if (storage.getItem("userInfo")) {
|
||||||
this.userInfo = JSON.parse(storage.getItem('userInfo'));
|
this.userInfo = JSON.parse(storage.getItem("userInfo"));
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.content {
|
.content {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 100%;
|
height: 40px;
|
||||||
position: fixed;
|
margin: 10px auto;
|
||||||
top:0;
|
position: relative;
|
||||||
left:50%;
|
|
||||||
margin-left:-600px;
|
|
||||||
}
|
|
||||||
.hr{
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #e4393c;
|
|
||||||
margin-top:60px;
|
|
||||||
}
|
|
||||||
.content>img{
|
|
||||||
width:180px;
|
|
||||||
float: left;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
.cate {
|
.cate {
|
||||||
float: left;
|
float: left;
|
||||||
width: 200px !important;
|
width: 200px !important;
|
||||||
}
|
}
|
||||||
.cart-content{
|
|
||||||
width: 100px;
|
|
||||||
height: 100%;
|
|
||||||
margin-left:55px;
|
|
||||||
float: left;
|
|
||||||
overflow: hidden;
|
|
||||||
line-height: 500%;
|
|
||||||
}
|
|
||||||
.search-con {
|
.search-con {
|
||||||
float: left;
|
float: left;
|
||||||
width: 800px;
|
width: 800px;
|
||||||
height: 100%;
|
overflow: hidden;
|
||||||
margin-left:20px;
|
margin-top: -27px;
|
||||||
// overflow: hidden;
|
|
||||||
line-height: 60px;
|
|
||||||
margin-top: -20px;
|
|
||||||
}
|
}
|
||||||
.cart-icon {
|
.cart-icon {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
|
float: left;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
|
margin-top: 8px;
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -104,8 +90,7 @@ export default {
|
||||||
.cart-badge {
|
.cart-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
// right: 165px;
|
right: 165px;
|
||||||
right:108px;
|
|
||||||
display: block;
|
display: block;
|
||||||
background-color: $theme_color;
|
background-color: $theme_color;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
|
@ -1,7 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="cate-nav">
|
<div class="cate-nav">
|
||||||
<div class="nav-con">
|
<div class="nav-con">
|
||||||
<div class="all-categories hover-pointer" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">全部商品分类</div>
|
<div
|
||||||
|
class="all-categories hover-pointer"
|
||||||
|
@mouseenter="showFirstList = true"
|
||||||
|
@mouseleave="showFirstList = false"
|
||||||
|
>
|
||||||
|
全部商品分类
|
||||||
|
</div>
|
||||||
<ul class="nav-item" v-if="showNavBar">
|
<ul class="nav-item" v-if="showNavBar">
|
||||||
<li
|
<li
|
||||||
class="nav-lis"
|
class="nav-lis"
|
||||||
|
@ -12,17 +18,37 @@
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div> <hr style="width:1200px;height:2.5px;background:#e4393c;margin-top:-1px;margin-bottom:5px;border:none;"/>
|
</div>
|
||||||
<!-- 全部商品分类 -->
|
<!-- 全部商品分类 -->
|
||||||
<div class="cate-list" v-show="showAlways || showFirstList" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">
|
<div
|
||||||
|
class="cate-list"
|
||||||
|
v-show="showAlways || showFirstList"
|
||||||
|
@mouseenter="showFirstList = true"
|
||||||
|
@mouseleave="showFirstList = false"
|
||||||
|
>
|
||||||
<!-- 第一级分类 -->
|
<!-- 第一级分类 -->
|
||||||
<div class="nav-side" :class="{'large-nav': large, 'opacity-nav': opacity}" @mouseleave="panel = false">
|
<div
|
||||||
|
class="nav-side"
|
||||||
|
:class="{ 'large-nav': large, 'opacity-nav': opacity }"
|
||||||
|
@mouseleave="panel = false"
|
||||||
|
>
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(item, index) in cateList" :key="index" @mouseenter="showDetail(index)" >
|
<li
|
||||||
<span class="nav-side-item" @click="goGoodsList(item.id)">{{item.name}}</span>
|
v-for="(item, index) in cateList"
|
||||||
|
:key="index"
|
||||||
|
@mouseenter="showDetail(index)"
|
||||||
|
>
|
||||||
|
<span class="nav-side-item" @click="goGoodsList(item.id)">{{
|
||||||
|
item.name
|
||||||
|
}}</span>
|
||||||
<span v-for="(second, secIndex) in item.children" :key="secIndex">
|
<span v-for="(second, secIndex) in item.children" :key="secIndex">
|
||||||
<span v-if="secIndex < 2"> / </span>
|
<span v-if="secIndex < 2"> / </span>
|
||||||
<span @click="goGoodsList(second.id, second.parentId)" class="nav-side-item" v-if="secIndex < 2">{{second.name}}</span>
|
<span
|
||||||
|
@click="goGoodsList(second.id, second.parentId)"
|
||||||
|
class="nav-side-item"
|
||||||
|
v-if="secIndex < 2"
|
||||||
|
>{{ second.name }}</span
|
||||||
|
>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -30,14 +56,19 @@
|
||||||
<!-- 展开分类 -->
|
<!-- 展开分类 -->
|
||||||
<div
|
<div
|
||||||
class="detail-item-panel"
|
class="detail-item-panel"
|
||||||
:style="{'minHeight': large?'470px':'340px'}"
|
:style="{ minHeight: large ? '470px' : '340px' }"
|
||||||
v-show="panel"
|
v-show="panel"
|
||||||
@mouseenter="panel = true"
|
@mouseenter="panel = true"
|
||||||
@mouseleave="panel = false"
|
@mouseleave="panel = false"
|
||||||
>
|
>
|
||||||
<div class="nav-detail-item">
|
<div class="nav-detail-item">
|
||||||
<template v-for="(item, index) in panelData">
|
<template v-for="(item, index) in panelData">
|
||||||
<span @click="goGoodsList(item.id, item.parentId)" v-if="index < 8" :key="index">{{ item.name }}<Icon type="ios-arrow-forward" /></span>
|
<span
|
||||||
|
@click="goGoodsList(item.id, item.parentId)"
|
||||||
|
v-if="index < 8"
|
||||||
|
:key="index"
|
||||||
|
>{{ item.name }}<Icon type="ios-arrow-forward"
|
||||||
|
/></span>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
|
@ -46,13 +77,21 @@
|
||||||
:key="index"
|
:key="index"
|
||||||
class="detail-item-row"
|
class="detail-item-row"
|
||||||
>
|
>
|
||||||
<span class="detail-item-title" @click="goGoodsList(items.id,items.parentId)">
|
<span
|
||||||
|
class="detail-item-title"
|
||||||
|
@click="goGoodsList(items.id, items.parentId)"
|
||||||
|
>
|
||||||
{{ items.name }} <Icon type="ios-arrow-forward" />
|
{{ items.name }} <Icon type="ios-arrow-forward" />
|
||||||
<span class="glyphicon glyphicon-menu-right"></span>
|
<span class="glyphicon glyphicon-menu-right"></span>
|
||||||
</span>
|
</span>
|
||||||
<div>
|
<div>
|
||||||
<span v-for="(item, subIndex) in items.children" @click="goGoodsList(item.id,items.id,items.parentId)"
|
<span
|
||||||
:key="subIndex" class="detail-item">{{ item.name }}</span>
|
v-for="(item, subIndex) in items.children"
|
||||||
|
@click="goGoodsList(item.id, items.id, items.parentId)"
|
||||||
|
:key="subIndex"
|
||||||
|
class="detail-item"
|
||||||
|
>{{ item.name }}</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -62,96 +101,107 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getCategory } from '@/api/goods';
|
import { getCategory } from "@/api/goods";
|
||||||
import storage from '@/plugins/storage.js'
|
import storage from "@/plugins/storage.js";
|
||||||
export default {
|
export default {
|
||||||
name: 'GoodsListNav',
|
name: "GoodsListNav",
|
||||||
props: {
|
props: {
|
||||||
showAlways: { // 总是显示下拉分类
|
showAlways: {
|
||||||
|
// 总是显示下拉分类
|
||||||
default: false,
|
default: false,
|
||||||
type: Boolean
|
type: Boolean,
|
||||||
},
|
},
|
||||||
showNavBar: { // 显示全部商品分类右侧导航条
|
showNavBar: {
|
||||||
|
// 显示全部商品分类右侧导航条
|
||||||
default: true,
|
default: true,
|
||||||
type: Boolean
|
type: Boolean,
|
||||||
},
|
},
|
||||||
hover: {
|
hover: {
|
||||||
default: false,
|
default: false,
|
||||||
type: Boolean
|
type: Boolean,
|
||||||
},
|
},
|
||||||
large: { // 是否更高的高度
|
large: {
|
||||||
|
// 是否更高的高度
|
||||||
default: false,
|
default: false,
|
||||||
type: Boolean
|
type: Boolean,
|
||||||
},
|
},
|
||||||
opacity: { // 是否背景透明
|
opacity: {
|
||||||
|
// 是否背景透明
|
||||||
default: false,
|
default: false,
|
||||||
type: Boolean
|
type: Boolean,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
panel: false, // 二级分类展示
|
panel: false, // 二级分类展示
|
||||||
panelData: [], // 二级分类数据
|
panelData: [], // 二级分类数据
|
||||||
showFirstList: false, // 始终展示一级列表
|
showFirstList: false, // 始终展示一级列表
|
||||||
cateList: [] // 商品分类
|
cateList: [], // 商品分类
|
||||||
}
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
navList () { // 导航列表
|
navList() {
|
||||||
if (storage.getItem('navList')) {
|
// 导航列表
|
||||||
return JSON.parse(storage.getItem('navList'))
|
if (storage.getItem("navList")) {
|
||||||
|
return JSON.parse(storage.getItem("navList"));
|
||||||
} else {
|
} else {
|
||||||
return []
|
return [];
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getCate () { // 获取分类数据
|
getCate() {
|
||||||
|
// 获取分类数据
|
||||||
if (this.hover) return false;
|
if (this.hover) return false;
|
||||||
getCategory(0).then(res => {
|
getCategory(0).then((res) => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
this.cateList = res.result;
|
this.cateList = res.result;
|
||||||
this.$store.commit('SET_CATEGORY', res.result)
|
this.$store.commit("SET_CATEGORY", res.result);
|
||||||
// 过期时间
|
// 过期时间
|
||||||
var expirationTime = new Date().setHours(new Date().getHours() + 1);
|
var expirationTime = new Date().setHours(new Date().getHours() + 1);
|
||||||
// 存放过期时间
|
// 存放过期时间
|
||||||
localStorage.setItem('category_expiration_time', expirationTime);
|
localStorage.setItem("category_expiration_time", expirationTime);
|
||||||
// 存放分类信息
|
// 存放分类信息
|
||||||
localStorage.setItem('category', JSON.stringify(res.result))
|
localStorage.setItem("category", JSON.stringify(res.result));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
showDetail (index) { // 展示全部分类
|
showDetail(index) {
|
||||||
this.panel = true
|
// 展示全部分类
|
||||||
this.panelData = this.cateList[index].children
|
this.panel = true;
|
||||||
|
this.panelData = this.cateList[index].children;
|
||||||
},
|
},
|
||||||
goGoodsList (id, secondId, firstId) { // 分类共有三级,传全部分类过去
|
goGoodsList(id, secondId, firstId) {
|
||||||
const arr = [firstId, secondId, id]
|
// 分类共有三级,传全部分类过去
|
||||||
|
const arr = [firstId, secondId, id];
|
||||||
if (!arr[1]) {
|
if (!arr[1]) {
|
||||||
arr.splice(0, 2)
|
arr.splice(0, 2);
|
||||||
}
|
}
|
||||||
if (!arr[0]) {
|
if (!arr[0]) {
|
||||||
arr.shift()
|
arr.shift();
|
||||||
}
|
}
|
||||||
let routerUrl = this.$router.resolve({
|
let routerUrl = this.$router.resolve({
|
||||||
path: '/goodsList',
|
path: "/goodsList",
|
||||||
query: {categoryId: arr.toString()}
|
query: { categoryId: arr.toString() },
|
||||||
})
|
});
|
||||||
window.open(routerUrl.href, '_blank')
|
window.open(routerUrl.href, "_blank");
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (localStorage.getItem('category') && localStorage.getItem('category_expiration_time')) {
|
if (
|
||||||
|
localStorage.getItem("category") &&
|
||||||
|
localStorage.getItem("category_expiration_time")
|
||||||
|
) {
|
||||||
// 如果缓存过期,则获取最新的信息
|
// 如果缓存过期,则获取最新的信息
|
||||||
if (new Date() > localStorage.getItem('category_expiration_time')) {
|
if (new Date() > localStorage.getItem("category_expiration_time")) {
|
||||||
this.getCate();
|
this.getCate();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.cateList = JSON.parse(localStorage.getItem('category'))
|
this.cateList = JSON.parse(localStorage.getItem("category"));
|
||||||
} else {
|
} else {
|
||||||
this.getCate()
|
this.getCate();
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -223,7 +273,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.opacity-nav {
|
.opacity-nav {
|
||||||
background-color:rgba(0,0,0,.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
.nav-side ul {
|
.nav-side ul {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -290,7 +340,9 @@ export default {
|
||||||
}
|
}
|
||||||
.detail-item-row {
|
.detail-item-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
>div{flex: 1;}
|
> div {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.detail-item {
|
.detail-item {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
|
@ -183,11 +183,11 @@
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
slot="extra"
|
slot="extra"
|
||||||
@click="handleCloseSkuItem(item, $index)"
|
@click="handleCloseSkuItem($index)"
|
||||||
>
|
>
|
||||||
删除规格
|
删除规格
|
||||||
</Button>
|
</Button>
|
||||||
<Form :model="item" class="flex">
|
<div>
|
||||||
<FormItem
|
<FormItem
|
||||||
label="规格名"
|
label="规格名"
|
||||||
class="sku-item-content-val flex"
|
class="sku-item-content-val flex"
|
||||||
|
@ -199,11 +199,11 @@
|
||||||
placeholder="请输入规格项名称"
|
placeholder="请输入规格项名称"
|
||||||
:filter-method="filterMethod"
|
:filter-method="filterMethod"
|
||||||
:data="skuData"
|
:data="skuData"
|
||||||
@on-change="handleSkuTitle($event, $index)"
|
@on-change="editSkuItem"
|
||||||
>
|
>
|
||||||
</AutoComplete>
|
</AutoComplete>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</Form>
|
</div>
|
||||||
<div class="flex sku-val">
|
<div class="flex sku-val">
|
||||||
<Form :model="item" class="flex">
|
<Form :model="item" class="flex">
|
||||||
<!--规格值文本列表-->
|
<!--规格值文本列表-->
|
||||||
|
@ -224,12 +224,7 @@
|
||||||
:data="skuVal"
|
:data="skuVal"
|
||||||
@on-focus="changeSkuVals(item.name)"
|
@on-focus="changeSkuVals(item.name)"
|
||||||
@on-change="
|
@on-change="
|
||||||
handleSkuValue(
|
skuValueChange(val.value, $index, item)
|
||||||
val.value,
|
|
||||||
$index,
|
|
||||||
val,
|
|
||||||
index
|
|
||||||
)
|
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
</AutoComplete>
|
</AutoComplete>
|
||||||
|
@ -265,97 +260,9 @@
|
||||||
规格详细
|
规格详细
|
||||||
<div slot="content">
|
<div slot="content">
|
||||||
<div slot="content">
|
<div slot="content">
|
||||||
<ul class="flex sku-ul">
|
|
||||||
<li
|
|
||||||
v-for="(item, index) in skuTableColumn"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
{{ item.title }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="mt_10 flex sku-editor"
|
|
||||||
v-for="(item, index) in skuTableData"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-for="(spec, specIndex) in skuTableColumn.filter(
|
|
||||||
(val) => {
|
|
||||||
return val.key;
|
|
||||||
}
|
|
||||||
)"
|
|
||||||
:key="specIndex"
|
|
||||||
>
|
|
||||||
{{
|
|
||||||
skuTableData[index][
|
|
||||||
spec.title || spec.key || spec.___key
|
|
||||||
]
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="
|
|
||||||
skuTableColumn.find((val) => {
|
|
||||||
return val.slot == 'weight';
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<Input
|
|
||||||
clearable
|
|
||||||
:min="0"
|
|
||||||
v-model="item.weight"
|
|
||||||
placeholder="请输入重量"
|
|
||||||
@on-change="updateSkuTable(item, 'weight', index)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Input
|
|
||||||
clearable
|
|
||||||
v-model="item.sn"
|
|
||||||
placeholder="请输入货号"
|
|
||||||
@on-change="updateSkuTable(item, 'sn', index)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<InputNumber
|
|
||||||
clearable
|
|
||||||
class="input-number"
|
|
||||||
:min="0"
|
|
||||||
v-model="item.quantity"
|
|
||||||
placeholder="请输入库存"
|
|
||||||
@on-change="updateSkuTable(item, 'quantity', index)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<InputNumber
|
|
||||||
clearable
|
|
||||||
class="input-number"
|
|
||||||
:min="0"
|
|
||||||
v-model="item.cost"
|
|
||||||
placeholder="请输入成本价"
|
|
||||||
@on-change="updateSkuTable(item, 'cost', index)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<InputNumber
|
|
||||||
class="input-number"
|
|
||||||
clearable
|
|
||||||
:min="0"
|
|
||||||
v-model="item.price"
|
|
||||||
placeholder="请输入价格"
|
|
||||||
@on-change="updateSkuTable(item, 'price', index)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Button @click="editSkuPicture(item)"
|
|
||||||
>编辑图片</Button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- #TODO 此处有待优化 -->
|
<!-- #TODO 此处有待优化 -->
|
||||||
<!-- <Table
|
<Table
|
||||||
|
class="mt_10"
|
||||||
:columns="skuTableColumn"
|
:columns="skuTableColumn"
|
||||||
:data="skuTableData"
|
:data="skuTableData"
|
||||||
style="
|
style="
|
||||||
|
@ -411,15 +318,6 @@
|
||||||
</template>
|
</template>
|
||||||
<template slot-scope="{ row }" slot="images">
|
<template slot-scope="{ row }" slot="images">
|
||||||
<Button @click="editSkuPicture(row)">编辑图片</Button>
|
<Button @click="editSkuPicture(row)">编辑图片</Button>
|
||||||
|
|
||||||
</template>
|
|
||||||
</Table> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
</Collapse>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
v-model="showSkuPicture"
|
v-model="showSkuPicture"
|
||||||
:styles="{ top: '30px' }"
|
:styles="{ top: '30px' }"
|
||||||
|
@ -430,7 +328,10 @@
|
||||||
cancel-text="取消"
|
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
|
||||||
|
@ -478,6 +379,13 @@
|
||||||
</div>
|
</div>
|
||||||
</Upload>
|
</Upload>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
</template>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Panel>
|
||||||
|
</Collapse>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h4>商品详情描述</h4>
|
<h4>商品详情描述</h4>
|
||||||
<div class="form-item-view">
|
<div class="form-item-view">
|
||||||
|
@ -806,7 +714,6 @@ export default {
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
* 选择参数
|
* 选择参数
|
||||||
|
@ -859,8 +766,7 @@ export default {
|
||||||
},
|
},
|
||||||
// 编辑sku图片
|
// 编辑sku图片
|
||||||
editSkuPicture(row) {
|
editSkuPicture(row) {
|
||||||
console.log(row);
|
if (row.images && row.images.length > 0) {
|
||||||
if (row.images && row.images.length) {
|
|
||||||
this.previewPicture = row.images[0].url;
|
this.previewPicture = row.images[0].url;
|
||||||
}
|
}
|
||||||
this.selectedSku = row;
|
this.selectedSku = row;
|
||||||
|
@ -916,6 +822,7 @@ export default {
|
||||||
},
|
},
|
||||||
// 商品图片上传成功
|
// 商品图片上传成功
|
||||||
handleSuccessGoodsPicture(res, file) {
|
handleSuccessGoodsPicture(res, file) {
|
||||||
|
console.log(res);
|
||||||
if (file.response) {
|
if (file.response) {
|
||||||
file.url = file.response.result;
|
file.url = file.response.result;
|
||||||
this.baseInfoForm.goodsGalleryFiles.push(file);
|
this.baseInfoForm.goodsGalleryFiles.push(file);
|
||||||
|
@ -1058,18 +965,12 @@ export default {
|
||||||
cost: e.cost,
|
cost: e.cost,
|
||||||
quantity: e.quantity,
|
quantity: e.quantity,
|
||||||
weight: e.weight,
|
weight: e.weight,
|
||||||
// ___keys: [],
|
|
||||||
};
|
};
|
||||||
e.specList.forEach((u) => {
|
e.specList.forEach((u) => {
|
||||||
if (u.specName === "images") {
|
if (u.specName === "images") {
|
||||||
sku.images = u.specImage;
|
sku.images = u.specImage;
|
||||||
} else {
|
} else {
|
||||||
sku[u.specName] = u.specValue;
|
sku[u.specName] = u.specValue;
|
||||||
// 赋值keys标识符
|
|
||||||
// sku.___keys.push({
|
|
||||||
// key: u.specName,
|
|
||||||
// value: u.specValue,
|
|
||||||
// });
|
|
||||||
if (
|
if (
|
||||||
!skusInfo.some((s) => s.name === u.specName) &&
|
!skusInfo.some((s) => s.name === u.specName) &&
|
||||||
!this.ignoreColumn.includes(u.specName)
|
!this.ignoreColumn.includes(u.specName)
|
||||||
|
@ -1082,7 +983,6 @@ export default {
|
||||||
id: u.specValueId,
|
id: u.specValueId,
|
||||||
name: u.specName,
|
name: u.specName,
|
||||||
value: u.specValue || "",
|
value: u.specValue || "",
|
||||||
___key: u.specValue || "",
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
@ -1096,7 +996,6 @@ export default {
|
||||||
id: u.specValueId,
|
id: u.specValueId,
|
||||||
name: u.specName,
|
name: u.specName,
|
||||||
value: u.specValue || "",
|
value: u.specValue || "",
|
||||||
___key: u.specValue || "",
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (!sk.spec_id && u.specName === "specId") {
|
if (!sk.spec_id && u.specName === "specId") {
|
||||||
|
@ -1111,7 +1010,6 @@ export default {
|
||||||
});
|
});
|
||||||
this.skuInfo = skusInfo;
|
this.skuInfo = skusInfo;
|
||||||
this.renderTableData();
|
this.renderTableData();
|
||||||
|
|
||||||
this.skuTableData = skus;
|
this.skuTableData = skus;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -1162,11 +1060,18 @@ export default {
|
||||||
// 写入对象,下标,具体对象
|
// 写入对象,下标,具体对象
|
||||||
this.$set(this.skuInfo, this.skuInfo.length, {
|
this.$set(this.skuInfo, this.skuInfo.length, {
|
||||||
spec_values: [],
|
spec_values: [],
|
||||||
name: "规格名" + (this.skuInfo.length + 1),
|
name: "规格名",
|
||||||
});
|
});
|
||||||
// this.renderTableData();
|
this.renderTableData();
|
||||||
|
},
|
||||||
|
// 编辑规格名
|
||||||
|
editSkuItem() {
|
||||||
|
this.renderTableData();
|
||||||
|
},
|
||||||
|
// 编辑规格值
|
||||||
|
async skuValueChange(val, index, item) {
|
||||||
|
this.renderTableData();
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取焦点时,取得规格名对应的规格值
|
// 获取焦点时,取得规格名对应的规格值
|
||||||
changeSkuVals(name) {
|
changeSkuVals(name) {
|
||||||
if (name) {
|
if (name) {
|
||||||
|
@ -1179,7 +1084,14 @@ export default {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
/** 移除当前规格项 进行数据变化*/
|
||||||
|
handleCloseSkuItem($index) {
|
||||||
|
this.skuInfo.splice($index, 1);
|
||||||
|
/**
|
||||||
|
* 渲染规格详细表格
|
||||||
|
*/
|
||||||
|
this.renderTableData();
|
||||||
|
},
|
||||||
// 添加规格值的验证
|
// 添加规格值的验证
|
||||||
validateEmpty(params) {
|
validateEmpty(params) {
|
||||||
let flag = true;
|
let flag = true;
|
||||||
|
@ -1205,7 +1117,6 @@ export default {
|
||||||
this.$set(item.spec_values, item.spec_values.length, {
|
this.$set(item.spec_values, item.spec_values.length, {
|
||||||
name: item.name,
|
name: item.name,
|
||||||
value: "",
|
value: "",
|
||||||
___key: "",
|
|
||||||
});
|
});
|
||||||
this.baseInfoForm.regeneratorSkuFlag = true;
|
this.baseInfoForm.regeneratorSkuFlag = true;
|
||||||
/**
|
/**
|
||||||
|
@ -1215,99 +1126,27 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 移除当前规格项 进行数据变化*/
|
/** 移除当前规格值 */
|
||||||
handleCloseSkuItem(item, $index) {
|
|
||||||
console.log(item);
|
|
||||||
let oldsSkuTableData = cloneObj(this.skuTableData);
|
|
||||||
oldsSkuTableData.forEach((sku, i) => {
|
|
||||||
if (sku[item.name]) {
|
|
||||||
delete sku[item.name];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.skuTableData = oldsSkuTableData;
|
|
||||||
|
|
||||||
this.skuTableColumn.forEach((column, i) => {
|
|
||||||
if (column.key == item.name) {
|
|
||||||
this.skuTableColumn.splice(i, 1);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.skuInfo.splice($index, 1);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 移除当前规格值
|
|
||||||
* 找到一样规格的值进行移出
|
|
||||||
*/
|
|
||||||
handleCloseSkuValue(item, index) {
|
handleCloseSkuValue(item, index) {
|
||||||
let oldsSkuTableData = cloneObj(this.skuTableData);
|
|
||||||
console.log("oldsSkuTableData", oldsSkuTableData);
|
|
||||||
this.skuTableData = oldsSkuTableData.filter((sku, i) => {
|
|
||||||
if (
|
|
||||||
sku[item.spec_values[index].name] != item.spec_values[index].value
|
|
||||||
) {
|
|
||||||
return sku;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
item.spec_values.splice(index, 1);
|
item.spec_values.splice(index, 1);
|
||||||
|
|
||||||
this.baseInfoForm.regeneratorSkuFlag = true;
|
this.baseInfoForm.regeneratorSkuFlag = true;
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 编辑规格值
|
* 渲染规格详细表格
|
||||||
* 根据当前___keys的索引指定需修改的值
|
|
||||||
* @param {*} change 返回input更改的值
|
|
||||||
* @param {*} index 修改规格名的索引
|
|
||||||
* @param {*} item 当前规格值
|
|
||||||
*/
|
*/
|
||||||
async handleSkuValue(change, index, item) {
|
this.renderTableData();
|
||||||
this.skuTableData.map((sku, i) => {
|
|
||||||
// 指定key
|
|
||||||
if (sku[item.name] == item.___key) {
|
|
||||||
sku[item.name] = change;
|
|
||||||
console.log(1);
|
|
||||||
} else if (!item.___key && !sku[item.name]) {
|
|
||||||
// 如果为第一次没有值则进行赋值操作
|
|
||||||
|
|
||||||
sku[item.name] = change;
|
|
||||||
console.log("赋值", sku);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
item.___key = change;
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 编辑规格名
|
|
||||||
* 根据修改的规格名,将skuTableData的key(规格名)进行修改
|
|
||||||
* @param {*} change 返回input更改的值
|
|
||||||
* @param {*} index 修改规格名的索引
|
|
||||||
*/
|
|
||||||
handleSkuTitle(change, index) {
|
|
||||||
let oldSkuTableColumn = cloneObj(this.skuTableColumn);
|
|
||||||
this.skuTableData.forEach((sku, i) => {
|
|
||||||
Object.keys(sku).forEach((key) => {
|
|
||||||
if (oldSkuTableColumn[index].key == key) {
|
|
||||||
// 修改当前sku的规格名
|
|
||||||
sku = {
|
|
||||||
[change]: sku[key],
|
|
||||||
...sku,
|
|
||||||
};
|
|
||||||
delete sku[key];
|
|
||||||
|
|
||||||
this.skuTableData[i] = sku;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.skuTableColumn[index].key = change;
|
|
||||||
this.skuTableColumn[index].title = change;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 渲染table所需要的column 和 data
|
* 渲染table所需要的column 和 data
|
||||||
*/
|
*/
|
||||||
renderTableData() {
|
renderTableData() {
|
||||||
|
this.skuTableColumn = [];
|
||||||
|
this.skuTableData = [];
|
||||||
let pushData = [];
|
let pushData = [];
|
||||||
//渲染头部
|
//渲染头部
|
||||||
this.skuInfo.forEach((sku) => {
|
this.skuInfo.forEach((sku) => {
|
||||||
|
// !sku.name ? (sku.name = "规格名") : "";
|
||||||
//列名称
|
//列名称
|
||||||
let columnName = sku.name;
|
let columnName = sku.name;
|
||||||
pushData.push({
|
pushData.push({
|
||||||
|
@ -1348,20 +1187,14 @@ export default {
|
||||||
this.skuTableColumn = pushData;
|
this.skuTableColumn = pushData;
|
||||||
//克隆所有渲染的数据
|
//克隆所有渲染的数据
|
||||||
let cloneTemp = cloneObj(this.skuInfo);
|
let cloneTemp = cloneObj(this.skuInfo);
|
||||||
if (cloneTemp.length) {
|
|
||||||
cloneTemp.map((temp) => {
|
|
||||||
return {
|
|
||||||
[temp.name]: temp.value,
|
|
||||||
images: this.baseInfoForm.goodsGalleryFiles || [],
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
//数据清空一次
|
||||||
|
this.$set(this, "skuTableData", []);
|
||||||
//判定 是否存在规格分组
|
//判定 是否存在规格分组
|
||||||
if (cloneTemp[0]) {
|
if (cloneTemp[0]) {
|
||||||
//存放最终结果
|
//存放最终结果
|
||||||
let result = [];
|
let result = [];
|
||||||
// 循环出第一个规格名中的数据
|
//循环选中的 sku 数据
|
||||||
cloneTemp[0].spec_values.forEach((specItem) => {
|
cloneTemp[0].spec_values.forEach((specItem) => {
|
||||||
result.push({
|
result.push({
|
||||||
[cloneTemp[0].name]: specItem.value,
|
[cloneTemp[0].name]: specItem.value,
|
||||||
|
@ -1370,14 +1203,8 @@ export default {
|
||||||
});
|
});
|
||||||
cloneTemp.splice(0, 1);
|
cloneTemp.splice(0, 1);
|
||||||
result = this.specIterator(result, cloneTemp);
|
result = this.specIterator(result, cloneTemp);
|
||||||
// 保存以前skuTable值
|
|
||||||
let oldData = cloneObj(this.skuTableData);
|
|
||||||
|
|
||||||
this.skuTableData = result;
|
this.skuTableData = result;
|
||||||
// 赋值给最新的skuTable
|
console.log(this.skuTableData);
|
||||||
this.skuTableData = Object.assign(this.skuTableData, oldData);
|
|
||||||
|
|
||||||
console.log(result, this.skuTableData);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
@ -1389,25 +1216,16 @@ export default {
|
||||||
//是否还可以循环
|
//是否还可以循环
|
||||||
if (cloneTemp.length > 0) {
|
if (cloneTemp.length > 0) {
|
||||||
let table = [];
|
let table = [];
|
||||||
let newVal = []; // 用于存储新对象 并重置到最后一位
|
result.forEach((resItem) => {
|
||||||
result.forEach((resItem, i) => {
|
|
||||||
cloneTemp[0].spec_values.forEach((valItem) => {
|
cloneTemp[0].spec_values.forEach((valItem) => {
|
||||||
let obj = cloneObj(resItem);
|
let obj = cloneObj(resItem);
|
||||||
obj[cloneTemp[0].name] = valItem.value;
|
obj[cloneTemp[0].name] = valItem.value;
|
||||||
|
|
||||||
if (valItem.value) {
|
|
||||||
table.push(obj);
|
table.push(obj);
|
||||||
} else {
|
|
||||||
newVal.push(obj);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
result = [];
|
result = [];
|
||||||
table.push(...newVal);
|
|
||||||
|
|
||||||
table.forEach((t) => {
|
table.forEach((t) => {
|
||||||
console.log("t", t);
|
|
||||||
|
|
||||||
result.push(t);
|
result.push(t);
|
||||||
});
|
});
|
||||||
//清除当前循环的分组
|
//清除当前循环的分组
|
||||||
|
@ -1417,7 +1235,6 @@ export default {
|
||||||
}
|
}
|
||||||
return this.specIterator(result, cloneTemp);
|
return this.specIterator(result, cloneTemp);
|
||||||
},
|
},
|
||||||
|
|
||||||
/** 根据分类id获取系统设置规格信息*/
|
/** 根据分类id获取系统设置规格信息*/
|
||||||
Get_SkuInfoByCategory(categoryId) {
|
Get_SkuInfoByCategory(categoryId) {
|
||||||
if (categoryId) {
|
if (categoryId) {
|
||||||
|
@ -1437,7 +1254,8 @@ export default {
|
||||||
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
|
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
|
||||||
},
|
},
|
||||||
/** 数据改变之后 抛出数据 */
|
/** 数据改变之后 抛出数据 */
|
||||||
updateSkuTable(row, item, index) {
|
updateSkuTable(row, item, type = "deafult") {
|
||||||
|
let index = row._index;
|
||||||
this.baseInfoForm.regeneratorSkuFlag = true;
|
this.baseInfoForm.regeneratorSkuFlag = true;
|
||||||
/** 进行自定义校验 判断是否是数字(小数也能通过)重量 */
|
/** 进行自定义校验 判断是否是数字(小数也能通过)重量 */
|
||||||
if (item === "weight") {
|
if (item === "weight") {
|
||||||
|
@ -1475,7 +1293,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
console.log(index, item);
|
|
||||||
this.skuTableData[index][item] = row[item];
|
this.skuTableData[index][item] = row[item];
|
||||||
});
|
});
|
||||||
// this.$set(this.skuTableData,[index][item],row[item])
|
// this.$set(this.skuTableData,[index][item],row[item])
|
||||||
|
@ -1540,9 +1357,6 @@ export default {
|
||||||
delete sku.specValueId;
|
delete sku.specValueId;
|
||||||
return sku;
|
return sku;
|
||||||
});
|
});
|
||||||
if (this.firstData.tempId) {
|
|
||||||
delete submit.id;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (submit.goodsGalleryFiles.length > 0) {
|
if (submit.goodsGalleryFiles.length > 0) {
|
||||||
submit.goodsGalleryList = submit.goodsGalleryFiles.map(
|
submit.goodsGalleryList = submit.goodsGalleryFiles.map(
|
||||||
|
@ -1679,32 +1493,6 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "./addGoods.scss";
|
@import "./addGoods.scss";
|
||||||
|
|
||||||
.sku-ul {
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 0;
|
|
||||||
border-radius: 0.4em;
|
|
||||||
background: #f3f5f7;
|
|
||||||
> li {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sku-editor {
|
|
||||||
> div {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.input-number {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
Loading…
Reference in New Issue