ll
/
ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商品属性修改

master
2812875475 2024-03-24 19:29:40 +08:00
parent 6c5fbb6f0d
commit 82c0241ce0
7 changed files with 422 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/product/category.js
View File

@ -17,10 +17,11 @@ export function getCategory(id) {
})
}
export function getTemplateAttribute(id) {
export function getTemplateAttribute(data) {
return request({
url: '/product/category/getTemplateAttribute/' + id,
method: 'get'
url: '/product/category/getTemplateAttribute/',
method: 'post',
data
})
}

7
src/api/product/info.js
View File

@ -17,7 +17,12 @@ export function getInfo(id) {
})
}
export function getPro(id) {
return request({
url: '/product/info/getProductDetail?id=' + id,
method: 'get'
})
}
// 新增商品信息

84
src/layouttest/index.vue
View File

@ -1,19 +1,97 @@
<template>
<div>
<h1>hello 这是第一个路由视图</h1>
<el-container>
<el-header>
<el-menu
default-active="1"
class="el-menu-demo el-menu-right"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</el-header>
<el-main>
<el-row :gutter="20">
<el-col :span="12" :offset="6">
<router-view></router-view>
</el-col>
</el-row>
</el-main>
</el-container>
</div>
</template>
<script>
import {getInfo} from "@/api/product/info";
import {getTemplateAttribute} from "@/api/product/category";
export default {
name: 'Index',
data() {
return {}
return {
good:{
name:"商品1",
num:999,
id:44
},
test:{
id:44,
value:45
}
}
},
created() {
},
methods: {}
methods: {
/*获取商品信息*/
}
}
</script>
<style scoped>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-menu-demo {
display: flex;
justify-content: flex-end;
}
.el-main {
color: #333;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

13
src/router/index.js
View File

@ -3,7 +3,7 @@ import Router from 'vue-router'
/* Layout */
import Layout from '@/layout'
import Layouttest from "@/layouttest";
import DetailsComponent from '@/views/a/detailsComponent.vue';
Vue.use(Router)
/**
@ -80,10 +80,10 @@ export const constantRoutes = [
redirect: 'test',
children: [
{
path: 'test',
path: '/test/:id',
component: () => import('@/views/a/index'),
name: 'Test',
meta: {title: "测试", icon: 'dashboard', affix: true}
meta: {title: "商品商城", icon: 'dashboard', affix: true}
}
]
},
@ -100,6 +100,11 @@ export const constantRoutes = [
meta: {title: '个人中心', icon: 'user'}
}
]
},
{
path:'/details',
name:'/details',
component: DetailsComponent
}
]
@ -192,5 +197,5 @@ Router.prototype.replace = function push(location) {
export default new Router({
mode: 'history', // 去掉url中的#
scrollBehavior: () => ({y: 0}),
routes: constantRoutes
routes: constantRoutes,
})

19
src/views/a/detailsComponent.vue 100644
View File

@ -0,0 +1,19 @@
<template>
<div>
</div>
</template>
<script>
export default {
name: 'Index',
data() {
return {}
},
created() {
},
methods: {}
}
</script>
<style scoped>
</style>

276
src/views/a/index.vue
View File

@ -1,23 +1,289 @@
<template>
<div>
<h2>第二个</h2>
<!-- <el-main>-->
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="6" :offset="6">-->
<!-- <el-descriptions v-model="good" title="商品列表">-->
<!-- <el-descriptions-item label="商品图片">-->
<!-- <img :src="good.image" style="width: 100px" height="100px">-->
<!-- </el-descriptions-item>-->
<!-- <el-descriptions-item label="商品名称">{{ good.name }}</el-descriptions-item>-->
<!-- <el-descriptions-item label="销量">-->
<!-- {{ good.num }}-->
<!-- </el-descriptions-item>-->
<!-- <el-descriptions-item label="备注">-->
<!-- <el-tag size="small">食品</el-tag>-->
<!-- </el-descriptions-item>-->
<!-- <el-descriptions-item label="产地">-->
<!-- 江苏省苏州市吴中区吴中大道 1188 号-->
<!-- </el-descriptions-item>-->
<!-- <el-descriptions-item>-->
<!-- </el-descriptions-item>-->
<!-- </el-descriptions>-->
<!-- </el-col>-->
<!-- <el-col :span="6" :offset="6">-->
<!-- <div class="grid-content bg-purple"></div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-main>-->
<el-button type="primary" size="small" @click="details()">详情</el-button>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="breadcrumb in breadcrumbList">{{ breadcrumb }}</el-breadcrumb-item>
</el-breadcrumb>
<el-row>
<el-col :span="12">
<el-carousel indicator-position="outside" style="width: 350px">
<el-carousel-item v-for="item in imageList" :key="item">
<h3>
<img :src="item">
</h3>
</el-carousel-item>
</el-carousel>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="6">
<div>
<el-statistic
group-separator=","
:precision="2"
:value="value2"
title="销量人气"
></el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic title="商品评价">
<template slot="formatter">
999
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic
group-separator=","
:precision="2"
decimal-separator="."
:value="value1"
title="收藏人气"
>
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
<template slot="suffix">
<i class="el-icon-s-flag" style="color: blue"></i>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic :value="like ? 521 : 520" :title="brandName">
<template slot="suffix">
<span @click="like = !like" class="like">
<i
class="el-icon-star-on"
style="color:red"
v-show="!!like"
></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span>
</template>
</el-statistic>
</div>
</el-col>
</el-row>
</el-col>
<el-col :span="12">
<h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>
<h3 style="display: inline-block; color: red;">￥50</h3>
<el-form ref="form" :model="form" label-width="80px" style="margin-top: 80px">
<el-form-item :label="rule.name" v-for="(rule, index) in form.ruleList" :key="index">
<el-radio-group size="small" v-model="rule.selectedValue">
<el-radio v-for="item in rule.value" :key="item" :label="item">{{ item }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="规格2">
<el-input-number v-model="form.num" :min="1" :max="100" label="描述文字"></el-input-number>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">加入购物车</el-button>
<el-button type="danger">立即购买</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
<el-row>
<el-card class="box-card" style="margin-top: 20px">
<div slot="header" class="clearfix">
<span>商品详情</span>
</div>
<el-descriptions class="margin-top" :column="3" size="medium" border>
<template slot="extra">
<el-button type="primary" size="small">商品评论</el-button>
</template>
<el-descriptions-item v-for="detail in goodDetail">
<template slot="label">
<i class="el-icon-user"></i>
{{ detail.name }}
</template>
{{ detail.value }}
</el-descriptions-item>
</el-descriptions>
<el-row>
<img :src="good.carouselImages" style="width: 100%" height="500px">
<img :src="good.carouselImages" style="width: 100%" height="500px">
</el-row>
</el-card>
</el-row>
</div>
</template>
<script>
import {getPro} from "@/api/product/info";
export default {
name: 'Index',
computed: {},
data() {
return {}
return {
names:"",
/*图片*/
imageList: [],
/*品牌信息*/
brandName: "",
good: {
name: "",
carouselImages: ""
},
like: true,
value1: 999,
value2: 999,
title: "增长人数",
breadcrumbList: [],
//规格表单
form: {
ruleList: [],
selectedValue: 1
},
ruleValueList: [],
/*国歌表单*/
categoryCommonElement: {
templateAttributeGroupList: [],
templateAttributeList: [],
attributeList: []
},
/*商品详情*/
goodDetail: []
}
},
created() {
const id = this.$route.params.id;
this.details(id)
},
methods: {}
watch:{
"names":{
handler(val){
console.log(val)
}
}
},
methods: {
/*立即购买按钮*/
onSubmit() {
},
details: function (id) {
getPro(id).then(
res => {
console.log(res)
this.breadcrumbList = res.data.typeList
this.brandName = res.data.brandName
this.good.name = res.data.product.name
this.good.carouselImages = res.data.product.carouselImages
this.imageList.push(res.data.product.carouselImages)
let e1=[]
res.data.ruleList.forEach(
rule=>{
e1.push(
{id:rule.id,name:rule.name,value:rule.value}
)
}
)
console.log(e1)
this.form.ruleList =e1
this.categoryCommonElement = res.data.categoryCommonElementResp
e = []
let e = []
this.categoryCommonElement.attributeList.forEach(
attribute => {
e.push(
{name: attribute.name, value: attribute.value}
)
}
)
this.categoryCommonElement.templateAttributeList.forEach(
attribute => {
e.push(
{name: attribute.name, value: attribute.value}
)
}
)
let f = []
this.categoryCommonElement.templateAttributeGroupList.forEach(
group => {
f.push(group.attributeList)
}
)
f.forEach(
group => {
group.forEach(
group1 => {
e.push(
{name: group1.name, value: group1.value}
)
}
)
}
)
this.goodDetail = []
this.goodDetail = e.filter(rule => rule.value !== null)
console.log(this.goodDetail)
}
)
}
}
}
</script>
<style scoped>
.like {
cursor: pointer;
font-size: 12px;
display: inline-block;
}
.el-carousel__item h3 {
color: #475669;
font-size: 20px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>

51
src/views/product/productInfo/index.vue
View File

@ -108,6 +108,12 @@
v-hasPermi="['product:info:remove']"
>删除
</el-button>
<el-button
size="mini"
type="text"
@click="detail(scope.row.id)"
>详细
</el-button>
</template>
</el-table-column>
</el-table>
@ -278,7 +284,7 @@
<div slot="header" class="clearfix">
<el-tabs v-model="activeName">
<el-tab-pane label="商品属性组" name="first">
{{e}}
<el-row>
<el-col :span="6"
v-for="templateAttributeGroup in categoryCommonElement.templateAttributeGroupList">
@ -286,12 +292,10 @@
<div slot="header" class="clearfix">
<span>属性组名称【{{ templateAttributeGroup.groupName }}】</span>
</div>
<div style="width: 100px;height: 500px">
<el-form-item :label="attribute.id" v-for="attribute in templateAttributeGroup.attributeList">
<div style="width: 100px;height: 200px">
<el-form-item :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
<el-input style="width: 100px;" v-model="attribute.value"></el-input>
</el-form-item>
</div>
</el-card>
</el-col>
@ -299,7 +303,7 @@
</el-tab-pane>
<el-tab-pane label="商品属性" name="second">
商品属性{{e}}
商品属性
<el-row style="overflow-x: auto; height: 300px;">
<el-form label-width="80px">
<el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
@ -313,7 +317,7 @@
<el-tab-pane label="自有属性" name="third">
自有属性{{e}}
自有属性
<el-card class="box-card">
<el-row>
<el-form :inline="true" :model="customAttributeForm" class="demo-form-inline">
@ -524,6 +528,11 @@ export default {
"value":""
}
],
test:{
id:0,
value:0,
},
check:[]
};
},
watch: {
@ -540,11 +549,16 @@ export default {
}
}
},
"form.id":{
handler(val){
this.test.id=val
}
},
"form.type": {
handler(value) {
if (value != null) {
getTemplateAttribute(value).then(response => {
console.log(response)
this.test.value=value
getTemplateAttribute(this.test).then(response => {
const {data} = response;
const {templateAttributeGroupList, templateAttributeList, attributeList} = data;
this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
@ -554,6 +568,7 @@ export default {
}
}
},
},
created() {
this.getList();
@ -561,6 +576,10 @@ export default {
this.CategoryTree();
},
methods: {
detail(id){
console.log(id)
this.$router.push('/test/'+id)
},
onSubmit() {
this.skuList.forEach(skuInfo => {
skuInfo.image = this.oneSettingValue.image;
@ -761,19 +780,10 @@ export default {
this.reset();
const id = row.id || this.ids
getInfo(id).then(response => {
console.log(response)
console.log(this.categoryCommonElement)
this.test.id=id
this.form = response.data;
this.oneSettingValue=response.data.specification
this.e=[]
this.e1=[]
this.e2=[]
this.e3=[]
this.e = response.data.asProductAttributeInfo.map(item => {
return { attributeId: item.attributeId, value: item.value };
});
console.log(this.e)
this.changeRule(response.data.ruleId)
this.onSubmit()
this.form.type=parseInt(response.data.type)
@ -791,7 +801,6 @@ export default {
if (valid) {
if (this.form.id != null) {
this.selectAttribute()
console.log(this.form)
updateInfo(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;