Skip to content

C
center-shop
提交 d287bf9d authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

修改商品规格设置

上级 38e05341
隐藏空白字符变更
内嵌 并排
正在显示 包含 188 行增加 和 133 行删除
src/components/setting/skuGroup.vue 0 → 100644
浏览文件 @ d287bf9d
<template>
<div class="sku-group">
<div class="sku-group-row">
<div class="sku-group-row-left">
<label class="label">规格{{ index + 1 }}</label>
<el-input v-model="data.spec_name" placeholder="规格名" readonly />
</div>
<div class="sku-group-row-right is-right">
<el-button type="text" @click="removeSku(data, index)">删除规格</el-button>
</div>
</div>
<div class="sku-group-row" v-for="item in data.spec_values" :key="item.spec_value_id">
<div class="sku-group-row-left">
<el-input placeholder="规格值" v-model="item.spec_value" readonly />
</div>
<div class="sku-group-row-right">
<div class="tools">
<!-- <i class="el-icon-circle-plus-outline" @click="addSkuValue(item, index)"></i> -->
<i class="el-icon-delete" @click="removeSkuValue(item, index)"></i>
</div>
</div>
</div>
<div class="sku-group-row">
<div class="sku-group-row-left">
<el-input
placeholder="规格值"
v-model="inputValue"
ref="input"
@blur="onInputBlur"
@keyup.enter.native="onInputBlur"
v-if="inputVisible"
/>
<el-button type="text" @click="addSkuValue" v-if="!inputVisible">
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;添加规格值
</el-button>
</div>
</div>
</div>
</template>
<script>
import { addSkuValue } from '@/api/goods'
export default {
props: {
data: { type: Object, default: () => ({}) },
index: { type: Number, default: 0 }
},
data() {
return {
inputValue: '',
inputVisible: false
}
},
computed: {
shopId() {
return this.$store.state.shopId
}
},
methods: {
toggleInputVisible() {
this.inputVisible = !this.inputVisible
this.inputValue = ''
},
addSkuValue() {
this.toggleInputVisible()
this.$nextTick(() => {
this.$refs.input.focus()
})
},
onInputBlur() {
const value = this.inputValue.trim()
// 空内容
if (!value) {
this.toggleInputVisible()
return
}
const params = { shop_id: this.shopId, spec_id: this.data.spec_id, spec_value: value }
addSkuValue({ data: [params] }).then(res => {
this.toggleInputVisible()
this.$emit('update')
})
},
// 删除规格
removeSku(item) {},
// 删除规格值
removeSkuValue(item) {}
}
}
</script>
<style lang="scss" scoped>
.sku-group {
background-color: #f9f9f9;
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
}
.sku-group-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.sku-group-row + .sku-group-row {
margin-top: 10px;
}
.sku-group-row-left {
position: relative;
flex: 1;
padding-left: 60px;
.label {
position: absolute;
left: 0;
top: 50%;
font-size: 16px;
transform: translateY(-50%);
}
}
.sku-group-row-right {
flex: 1;
margin-left: 20px;
.tools {
float: left;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
i {
margin: 5px;
padding: 5px;
font-size: 20px;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: rgba(0, 0, 0, 0.03);
}
}
}
}
.is-right {
text-align: right;
}
</style>
src/pages/goods/goods/index.vue
浏览文件 @ d287bf9d
......@@ -69,10 +69,10 @@ export default {
],
columns: [
{ label: '商品名', prop: 'spu_name' },
{ label: '价格(元)', prop: 'price' },
{ label: '访问量', prop: 'view' },
{ label: '价格(元)', prop: 'price_zone' },
{ label: '访问量', prop: 'page_view' },
{ label: '库存', prop: 'stock' },
{ label: '销量', prop: 'goodSocialCount' },
{ label: '销量', prop: 'sales_volume' },
{ label: '创建时间', prop: 'create_time' },
{
label: '商品状态',
......
src/pages/goods/group/index.vue
浏览文件 @ d287bf9d
......@@ -61,7 +61,7 @@ export default {
filters: [{ type: 'input', prop: 'group_name', placeholder: '搜索分组' }],
columns: [
{ label: '分组名称', prop: 'group_name' },
{ label: '商品数', prop: 'count', width: 100 },
{ label: '商品数', prop: 'spu_sum', width: 100 },
{ label: '创建时间', prop: 'create_time', width: 200 },
{ label: '操作', slots: 'table-x', align: 'right' }
],
......
src/pages/setting/goods.vue
浏览文件 @ d287bf9d
<template>
<app-card title="商品规格">
<div class="sku-item" v-for="(item, index) in skuList" :key="index">
<div class="sku-item-row">
<div class="sku-item-row-left">
<label class="label">规格{{ index + 1 }}</label>
<el-input
v-model="item.spec_name"
placeholder="规格名"
:readonly="!!item.spec_id"
@blur="onNameBlur(item)"
@keyup.enter.native="onNameBlur(item)"
/>
</div>
<div class="sku-item-row-right is-right">
<el-button type="text" @click="removeSku(item, index)">删除规格</el-button>
</div>
</div>
<div class="sku-item-row" v-for="item in item.spec_values" :key="item.spec_value_id">
<div class="sku-item-row-left">
<el-input
placeholder="规格值"
v-model="item.spec_value"
:readonly="!!item.spec_value_id"
@blur="onNameBlur(item)"
/>
</div>
<div class="sku-item-row-right">
<div class="tools">
<!-- <i class="el-icon-circle-plus-outline" @click="addSkuValue(item, index)"></i> -->
<i class="el-icon-delete" @click="removeSkuValue(item, index)"></i>
</div>
</div>
</div>
<div class="sku-item-row">
<div class="sku-item-row-left">
<el-button type="text" @click="addSkuValue(item)">
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;添加规格值
</el-button>
</div>
</div>
</div>
<el-button type="text" @click="addSku">
<sku-group
v-for="(item, index) in skuList"
:data="item"
:index="index"
:key="index"
@update="getSkuNameList"
></sku-group>
<el-input
placeholder="规格名"
v-model="inputValue"
ref="input"
@blur="onInputBlur"
@keyup.enter.native="onInputBlur"
v-if="inputVisible"
/>
<el-button type="text" @click="addSku" v-if="!inputVisible">
<i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;创建新规格
</el-button>
</app-card>
......@@ -48,19 +23,15 @@
<script>
import AppCard from '@/components/base/card'
import { getSkuNameList, addSku, addSkuValue } from '@/api/goods'
import SkuGroup from '@/components/setting/skuGroup'
import { getSkuNameList, addSku } from '@/api/goods'
export default {
components: { AppCard },
components: { AppCard, SkuGroup },
data() {
return {
ruleForm: { shop_name: '', shop_logo: '', shop_desc: '', shop_tel: '', shop_type: '1' },
rules: {
shop_name: [{ required: true, message: '必填', trigger: 'blur' }],
shop_logo: [{ required: true, message: '请上传', trigger: 'change' }],
shop_desc: [{ required: true, message: '必填', trigger: 'blur' }],
shop_tel: [{ required: true, message: '必填', trigger: 'blur' }]
},
skuList: []
skuList: [],
inputVisible: false,
inputValue: ''
}
},
computed: {
......@@ -74,93 +45,32 @@ export default {
this.skuList = res.data
})
},
onNameBlur(item) {
if (item.spec_id) {
return
}
if (!item.spec_name) {
return
}
addSku({ shop_id: this.shopId, spec_name: item.spec_name }).then(res => {
this.getSkuNameList()
// 添加规格
addSku() {
this.toggleInputVisible()
this.$nextTick(() => {
this.$refs.input.focus()
})
},
onValueBlur(item) {
if (item.spec_value_id) {
toggleInputVisible() {
this.inputVisible = !this.inputVisible
this.inputValue = ''
},
onInputBlur(item) {
const value = this.inputValue.trim()
// 空内容
if (!value) {
this.toggleInputVisible()
return
}
addSkuValue({ shop_id: this.shopId, spec_value: item.spec_value }).then(res => {
addSku({ shop_id: this.shopId, spec_name: value }).then(res => {
this.toggleInputVisible()
this.getSkuNameList()
})
},
// 添加规格
addSku() {
this.skuList.push({ spec_name: '' })
},
// 删除规格
removeSku(item) {},
addSkuValue() {},
// 删除规格值
removeSkuValue(item) {}
}
},
beforeMount() {
this.getSkuNameList()
}
}
</script>
<style lang="scss" scoped>
.sku-item {
max-width: 800px;
background-color: #f9f9f9;
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
}
.sku-item-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.sku-item-row + .sku-item-row {
margin-top: 10px;
}
.sku-item-row-left {
position: relative;
flex: 1;
padding-left: 60px;
.label {
position: absolute;
left: 0;
top: 50%;
font-size: 16px;
transform: translateY(-50%);
}
}
.sku-item-row-right {
flex: 1;
margin-left: 20px;
.tools {
float: left;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
i {
margin: 5px;
padding: 5px;
font-size: 20px;
border-radius: 4px;
cursor: pointer;
&:hover {
background-color: rgba(0, 0, 0, 0.03);
}
}
}
}
.is-right {
text-align: right;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论