夜良king 2022-02-16 11:37:50 +08:00
commit 81297db7a8
3 changed files with 314 additions and 489 deletions

View File

@ -1,111 +1,96 @@
<template>
<div class="scroll-show">
<div class="content clearfix">
<!-- <cateNav class="cate" :hover="true" :showNavBar="false"></cateNav> -->
<img src="../../assets/images/logo2.png" alt="" class="images" />
<Search class="search-con" :hover="true" :showLogo="false" :showTag="false"></Search>
<div class="cart-content">
<Icon type="ios-cart-outline" @click="goCartList" class="cart-icon" @mouseenter.native="getCartList" />
<i class="cart-badge">{{cartNum < 100 ? cartNum : '99'}}</i>
</div>
<div class="hr"></div>
<cateNav class="cate" :hover="true" :showNavBar="false"></cateNav>
<Search
class="search-con"
:hover="true"
:showLogo="false"
:showTag="false"
></Search>
<Icon
type="ios-cart-outline"
@click="goCartList"
class="cart-icon"
@mouseenter.native="getCartList"
/>
<i class="cart-badge">{{ cartNum < 100 ? cartNum : "99" }}</i>
</div>
</div>
</template>
<script>
import {cartCount} from '@/api/cart.js'
import storage from '@/plugins/storage.js';
import { cartCount } from "@/api/cart.js";
import storage from "@/plugins/storage.js";
export default {
data () {
data() {
return {
userInfo: {} //
}
userInfo: {}, //
};
},
computed: {
cartNum () { //
return this.$store.state.cartNum
}
cartNum() {
//
return this.$store.state.cartNum;
},
},
methods: {
goCartList () { //
goCartList() {
//
let routerUrl = this.$router.resolve({
path: '/cart'
})
window.open(routerUrl.href, '_blank')
path: "/cart",
});
window.open(routerUrl.href, "_blank");
},
getCartList () { //
if (storage.getItem('userInfo')) {
cartCount().then(res => {
this.$store.commit('SET_CARTNUM', res.result)
this.Cookies.setItem('cartNum', res.result)
})
}
getCartList() {
//
if (storage.getItem("userInfo")) {
cartCount().then((res) => {
this.$store.commit("SET_CARTNUM", res.result);
this.Cookies.setItem("cartNum", res.result);
});
}
},
mounted () {
if (storage.getItem('userInfo')) {
this.userInfo = JSON.parse(storage.getItem('userInfo'));
},
mounted() {
if (storage.getItem("userInfo")) {
this.userInfo = JSON.parse(storage.getItem("userInfo"));
}
}
}
},
};
</script>
<style lang="scss" scoped>
.content{
.content {
width: 1200px;
height: 100%;
position: fixed;
top:0;
left:50%;
margin-left:-600px;
}
.hr{
width: 100%;
height: 2px;
background-color: #e4393c;
margin-top:60px;
}
.content>img{
width:180px;
height: 40px;
margin: 10px auto;
position: relative;
}
.cate {
float: left;
overflow: hidden;
height: 100%;
}
.cate {
float: left;
width: 200px!important;
}
.cart-content{
width: 100px;
height: 100%;
margin-left:55px;
float: left;
overflow: hidden;
line-height: 500%;
}
.search-con{
width: 200px !important;
}
.search-con {
float: left;
width: 800px;
height: 100%;
margin-left:20px;
// overflow: hidden;
line-height: 60px;
margin-top: -20px;
}
.cart-icon {
overflow: hidden;
margin-top: -27px;
}
.cart-icon {
width: 30px;
float: left;
font-size: 25px;
margin-top: 8px;
color: $theme_color;
z-index: 1;
position: relative;
&:hover{
&:hover {
cursor: pointer;
}
}
.cart-badge {
}
.cart-badge {
position: absolute;
font-style: normal;
// right: 165px;
right:108px;
right: 165px;
display: block;
background-color: $theme_color;
color: #fff;
@ -117,5 +102,5 @@ export default {
text-align: center;
z-index: 5;
top: 3px;
}
}
</style>

View File

@ -1,10 +1,16 @@
<template>
<div class="cate-nav">
<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">
<li
class ="nav-lis"
class="nav-lis"
v-for="(item, index) in navList.list"
:key="index"
@click="linkTo(item.url)"
@ -12,17 +18,37 @@
{{ item.name }}
</li>
</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>
<li v-for="(item, index) in cateList" :key="index" @mouseenter="showDetail(index)" >
<span class="nav-side-item" @click="goGoodsList(item.id)">{{item.name}}</span>
<li
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-if="secIndex < 2" > / </span>
<span @click="goGoodsList(second.id, second.parentId)" class="nav-side-item" v-if="secIndex < 2">{{second.name}}</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>
</li>
</ul>
@ -30,14 +56,19 @@
<!-- 展开分类 -->
<div
class="detail-item-panel"
:style="{'minHeight': large?'470px':'340px'}"
:style="{ minHeight: large ? '470px' : '340px' }"
v-show="panel"
@mouseenter="panel = true"
@mouseleave="panel = false"
>
<div class="nav-detail-item">
<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>
</div>
<ul>
@ -46,13 +77,21 @@
:key="index"
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" />
<span class="glyphicon glyphicon-menu-right"></span>
</span>
<div>
<span v-for="(item, subIndex) in items.children" @click="goGoodsList(item.id,items.id,items.parentId)"
:key="subIndex" class="detail-item">{{ item.name }}</span>
<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>
</li>
</ul>
@ -62,105 +101,116 @@
</template>
<script>
import { getCategory } from '@/api/goods';
import storage from '@/plugins/storage.js'
import { getCategory } from "@/api/goods";
import storage from "@/plugins/storage.js";
export default {
name: 'GoodsListNav',
name: "GoodsListNav",
props: {
showAlways: { //
showAlways: {
//
default: false,
type: Boolean
type: Boolean,
},
showNavBar: { //
showNavBar: {
//
default: true,
type: Boolean
type: Boolean,
},
hover: {
default: false,
type: Boolean
type: Boolean,
},
large: { //
large: {
//
default: false,
type: Boolean
type: Boolean,
},
opacity: { //
opacity: {
//
default: false,
type: Boolean
}
type: Boolean,
},
data () {
},
data() {
return {
panel: false, //
panelData: [], //
showFirstList: false, //
cateList: [] //
}
cateList: [], //
};
},
computed: {
navList () { //
if (storage.getItem('navList')) {
return JSON.parse(storage.getItem('navList'))
navList() {
//
if (storage.getItem("navList")) {
return JSON.parse(storage.getItem("navList"));
} else {
return []
}
return [];
}
},
},
methods: {
getCate () { //
getCate() {
//
if (this.hover) return false;
getCategory(0).then(res => {
getCategory(0).then((res) => {
if (res.success) {
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);
//
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) { //
this.panel = true
this.panelData = this.cateList[index].children
showDetail(index) {
//
this.panel = true;
this.panelData = this.cateList[index].children;
},
goGoodsList (id, secondId, firstId) { //
const arr = [firstId, secondId, id]
goGoodsList(id, secondId, firstId) {
//
const arr = [firstId, secondId, id];
if (!arr[1]) {
arr.splice(0, 2)
arr.splice(0, 2);
}
if (!arr[0]) {
arr.shift()
arr.shift();
}
let routerUrl = this.$router.resolve({
path: '/goodsList',
query: {categoryId: arr.toString()}
})
window.open(routerUrl.href, '_blank')
}
path: "/goodsList",
query: { categoryId: arr.toString() },
});
window.open(routerUrl.href, "_blank");
},
mounted () {
if (localStorage.getItem('category') && localStorage.getItem('category_expiration_time')) {
},
mounted() {
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();
return;
}
this.cateList = JSON.parse(localStorage.getItem('category'))
this.cateList = JSON.parse(localStorage.getItem("category"));
} else {
this.getCate()
}
this.getCate();
}
},
};
</script>
<style scoped lang="scss">
.nav-lis:hover{
color:$theme_color !important;
.nav-lis:hover {
color: $theme_color !important;
cursor: pointer;
}
.cate-nav{
.cate-nav {
width: 1200px;
position: relative;
margin: 0 auto;
@ -178,7 +228,7 @@ export default {
background-color: $theme_color;
text-align: center;
font-size: 16px;
border-bottom:none;
border-bottom: none;
}
.nav-item {
width: 1000px;
@ -201,7 +251,7 @@ export default {
}
}
//
.cate-list{
.cate-list {
margin: 0 auto;
position: absolute;
z-index: 1000;
@ -216,14 +266,14 @@ export default {
height: 335px;
overflow: hidden;
}
.large-nav{
.large-nav {
height: 470px;
ul>li{
ul > li {
line-height: 20px;
}
}
.opacity-nav{
background-color:rgba(0,0,0,.5);
.opacity-nav {
background-color: rgba(0, 0, 0, 0.5);
}
.nav-side ul {
width: 100%;
@ -236,7 +286,7 @@ export default {
padding-left: 12px;
font-size: 13px;
line-height: 18px;
&:hover{
&:hover {
background: #999395;
}
}
@ -290,7 +340,9 @@ export default {
}
.detail-item-row {
display: flex;
>div{flex: 1;}
> div {
flex: 1;
}
}
.detail-item {
font-size: 12px;
@ -298,7 +350,7 @@ export default {
padding-right: 8px;
cursor: pointer;
border-left: 1px solid #ccc;
&:first-child{
&:first-child {
border: none;
padding-left: 0;
}

View File

@ -183,11 +183,11 @@
<Button
type="primary"
slot="extra"
@click="handleCloseSkuItem(item, $index)"
@click="handleCloseSkuItem($index)"
>
删除规格
</Button>
<Form :model="item" class="flex">
<div>
<FormItem
label="规格名"
class="sku-item-content-val flex"
@ -199,11 +199,11 @@
placeholder="请输入规格项名称"
:filter-method="filterMethod"
:data="skuData"
@on-change="handleSkuTitle($event, $index)"
@on-change="editSkuItem"
>
</AutoComplete>
</FormItem>
</Form>
</div>
<div class="flex sku-val">
<Form :model="item" class="flex">
<!--规格值文本列表-->
@ -224,12 +224,7 @@
:data="skuVal"
@on-focus="changeSkuVals(item.name)"
@on-change="
handleSkuValue(
val.value,
$index,
val,
index
)
skuValueChange(val.value, $index, item)
"
>
</AutoComplete>
@ -265,97 +260,9 @@
规格详细
<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 此处有待优化 -->
<!-- <Table
<Table
class="mt_10"
:columns="skuTableColumn"
:data="skuTableData"
style="
@ -411,15 +318,6 @@
</template>
<template slot-scope="{ row }" slot="images">
<Button @click="editSkuPicture(row)"></Button>
</template>
</Table> -->
</div>
</div>
</Panel>
</Collapse>
</div>
<Modal
v-model="showSkuPicture"
:styles="{ top: '30px' }"
@ -430,7 +328,10 @@
cancel-text="取消"
>
<div class="preview-picture">
<img v-if="previewPicture !== ''" :src="previewPicture" />
<img
v-if="previewPicture !== ''"
:src="previewPicture"
/>
</div>
<Divider />
<vuedraggable
@ -478,6 +379,13 @@
</div>
</Upload>
</Modal>
</template>
</Table>
</div>
</div>
</Panel>
</Collapse>
</div>
</div>
<h4>商品详情描述</h4>
<div class="form-item-view">
@ -806,7 +714,6 @@ export default {
],
};
},
methods: {
/**
* 选择参数
@ -859,8 +766,7 @@ export default {
},
// sku
editSkuPicture(row) {
console.log(row);
if (row.images && row.images.length) {
if (row.images && row.images.length > 0) {
this.previewPicture = row.images[0].url;
}
this.selectedSku = row;
@ -916,6 +822,7 @@ export default {
},
//
handleSuccessGoodsPicture(res, file) {
console.log(res);
if (file.response) {
file.url = file.response.result;
this.baseInfoForm.goodsGalleryFiles.push(file);
@ -1058,18 +965,12 @@ export default {
cost: e.cost,
quantity: e.quantity,
weight: e.weight,
// ___keys: [],
};
e.specList.forEach((u) => {
if (u.specName === "images") {
sku.images = u.specImage;
} else {
sku[u.specName] = u.specValue;
// keys
// sku.___keys.push({
// key: u.specName,
// value: u.specValue,
// });
if (
!skusInfo.some((s) => s.name === u.specName) &&
!this.ignoreColumn.includes(u.specName)
@ -1082,7 +983,6 @@ export default {
id: u.specValueId,
name: u.specName,
value: u.specValue || "",
___key: u.specValue || "",
},
],
});
@ -1096,7 +996,6 @@ export default {
id: u.specValueId,
name: u.specName,
value: u.specValue || "",
___key: u.specValue || "",
});
}
if (!sk.spec_id && u.specName === "specId") {
@ -1111,7 +1010,6 @@ export default {
});
this.skuInfo = skusInfo;
this.renderTableData();
this.skuTableData = skus;
},
@ -1162,11 +1060,18 @@ export default {
//
this.$set(this.skuInfo, this.skuInfo.length, {
spec_values: [],
name: "规格名" + (this.skuInfo.length + 1),
name: "规格名",
});
// this.renderTableData();
this.renderTableData();
},
//
editSkuItem() {
this.renderTableData();
},
//
async skuValueChange(val, index, item) {
this.renderTableData();
},
//
changeSkuVals(name) {
if (name) {
@ -1179,7 +1084,14 @@ export default {
});
}
},
/** 移除当前规格项 进行数据变化*/
handleCloseSkuItem($index) {
this.skuInfo.splice($index, 1);
/**
* 渲染规格详细表格
*/
this.renderTableData();
},
//
validateEmpty(params) {
let flag = true;
@ -1205,7 +1117,6 @@ export default {
this.$set(item.spec_values, item.spec_values.length, {
name: item.name,
value: "",
___key: "",
});
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) {
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);
this.baseInfoForm.regeneratorSkuFlag = true;
},
/**
* 编辑规格值
* 根据当前___keys的索引指定需修改的值
* @param {*} change 返回input更改的值
* @param {*} index 修改规格名的索引
* @param {*} item 当前规格值
* 渲染规格详细表格
*/
async handleSkuValue(change, index, item) {
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;
this.renderTableData();
},
/**
* 渲染table所需要的column data
*/
renderTableData() {
this.skuTableColumn = [];
this.skuTableData = [];
let pushData = [];
//
this.skuInfo.forEach((sku) => {
// !sku.name ? (sku.name = "") : "";
//
let columnName = sku.name;
pushData.push({
@ -1348,20 +1187,14 @@ export default {
this.skuTableColumn = pushData;
//
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]) {
//
let result = [];
//
// sku
cloneTemp[0].spec_values.forEach((specItem) => {
result.push({
[cloneTemp[0].name]: specItem.value,
@ -1370,14 +1203,8 @@ export default {
});
cloneTemp.splice(0, 1);
result = this.specIterator(result, cloneTemp);
// skuTable
let oldData = cloneObj(this.skuTableData);
this.skuTableData = result;
// skuTable
this.skuTableData = Object.assign(this.skuTableData, oldData);
console.log(result, this.skuTableData);
console.log(this.skuTableData);
}
},
/**
@ -1389,25 +1216,16 @@ export default {
//
if (cloneTemp.length > 0) {
let table = [];
let newVal = []; //
result.forEach((resItem, i) => {
result.forEach((resItem) => {
cloneTemp[0].spec_values.forEach((valItem) => {
let obj = cloneObj(resItem);
obj[cloneTemp[0].name] = valItem.value;
if (valItem.value) {
table.push(obj);
} else {
newVal.push(obj);
}
});
});
result = [];
table.push(...newVal);
table.forEach((t) => {
console.log("t", t);
result.push(t);
});
//
@ -1417,7 +1235,6 @@ export default {
}
return this.specIterator(result, cloneTemp);
},
/** 根据分类id获取系统设置规格信息*/
Get_SkuInfoByCategory(categoryId) {
if (categoryId) {
@ -1437,7 +1254,8 @@ export default {
return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
},
/** 数据改变之后 抛出数据 */
updateSkuTable(row, item, index) {
updateSkuTable(row, item, type = "deafult") {
let index = row._index;
this.baseInfoForm.regeneratorSkuFlag = true;
/** 进行自定义校验 判断是否是数字(小数也能通过)重量 */
if (item === "weight") {
@ -1475,7 +1293,6 @@ export default {
}
}
this.$nextTick(() => {
console.log(index, item);
this.skuTableData[index][item] = row[item];
});
// this.$set(this.skuTableData,[index][item],row[item])
@ -1540,9 +1357,6 @@ export default {
delete sku.specValueId;
return sku;
});
if (this.firstData.tempId) {
delete submit.id;
}
if (submit.goodsGalleryFiles.length > 0) {
submit.goodsGalleryList = submit.goodsGalleryFiles.map(
@ -1679,32 +1493,6 @@ export default {
</script>
<style lang="scss" scoped>
@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>