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

商品

master
2812875475 2024-03-25 20:49:53 +08:00
parent 5775329fac
commit b8d2118d6d
4 changed files with 123 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/layouttest/index.vue
View File

@ -39,28 +39,19 @@
</div> </div>
</template> </template>
<script> <script>
import {getInfo} from "@/api/product/info"; import
import {getTemplateAttribute} from "@/api/product/category"; {getInfo, listInfo} from "@/api/product/info";
export default { export default {
name: 'Index', name: 'Index',
data() { data() {
return { return {
good:{
name:"商品1",
num:999,
id:44
},
test:{
id:44,
value:45
}
} }
}, },
created() { created() {
}, },
methods: { methods: {
/*获取商品信息*/
} }
} }

16
src/router/index.js
View File

@ -4,6 +4,7 @@ import Router from 'vue-router'
import Layout from '@/layout' import Layout from '@/layout'
import Layouttest from "@/layouttest"; import Layouttest from "@/layouttest";
import DetailsComponent from '@/views/a/detailsComponent.vue'; import DetailsComponent from '@/views/a/detailsComponent.vue';
Vue.use(Router) Vue.use(Router)
/** /**
@ -74,6 +75,7 @@ export const constantRoutes = [
} }
] ]
}, },
{ {
path: '', path: '',
component: Layouttest, component: Layouttest,
@ -87,6 +89,20 @@ export const constantRoutes = [
} }
] ]
}, },
{
path: '',
component: DetailsComponent,
redirect: 'test',
children: [
{
path: '/detailsComponent/:id',
component: () => import('@/views/a/detailsComponent'),
name: 'Test',
meta: {title: "商品详情", icon: 'dashboard', affix: true}
}
]
},
{ {
path: '/user', path: '/user',
component: Layout, component: Layout,

8
src/views/a/detailsComponent.vue
View File

@ -1,5 +1,7 @@
<template> <template>
<div> <div>
呵呵呵
{{id}}
</div> </div>
@ -8,9 +10,13 @@
export default { export default {
name: 'Index', name: 'Index',
data() { data() {
return {} return {
id:0,
}
}, },
created() { created() {
const id = this.$route.params.id;
this.id=id
}, },
methods: {} methods: {}
} }

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

@ -1,34 +1,32 @@
<template> <template>
<div> <div>
<!-- <el-main>--> <el-main>
<!-- <el-row :gutter="20">--> <el-row>
<!-- <el-col :span="6" :offset="6">--> <el-col :span="8">
<!-- <el-descriptions v-model="good" title="商品列表">--> <el-card v-for="good in goodList" style="width: 500px">
<!-- <el-descriptions-item label="商品图片">--> <el-descriptions :data="good" title="商品列表">
<!-- <img :src="good.image" style="width: 100px" height="100px">--> <el-descriptions-item label="商品图片">
<!-- </el-descriptions-item>--> <img :src="good.image" style="width: 100px" height="100px">
<!-- <el-descriptions-item label="商品名称">{{ good.name }}</el-descriptions-item>--> </el-descriptions-item>
<!-- <el-descriptions-item label="销量">--> <el-descriptions-item label="商品名称">{{ good.name }}</el-descriptions-item>
<!-- {{ good.num }}--> <el-descriptions-item label="销量">
<!-- </el-descriptions-item>--> 1000
<!-- <el-descriptions-item label="备注">--> </el-descriptions-item>
<!-- <el-tag size="small">食品</el-tag>--> <el-descriptions-item label="备注">
<!-- </el-descriptions-item>--> <el-tag size="small">电子产品</el-tag>
<!-- <el-descriptions-item label="产地">--> </el-descriptions-item>
<!-- 江苏省苏州市吴中区吴中大道 1188 号--> <el-descriptions-item label="产地">
<!-- </el-descriptions-item>--> 江苏省苏州市吴中区吴中大道 1188 号
<!-- <el-descriptions-item>--> </el-descriptions-item>
<el-descriptions-item>
<!-- </el-descriptions-item>--> <el-button type="primary" size="small" @click="details1(good.id)">详情</el-button>
<!-- </el-descriptions>--> </el-descriptions-item>
<!-- </el-col>--> </el-descriptions>
<!-- <el-col :span="6" :offset="6">--> </el-card>
<!-- <div class="grid-content bg-purple"></div>--> </el-col>
<!-- </el-col>--> </el-row>
<!-- </el-row>-->
<!-- </el-main>-->
<el-button type="primary" size="small" @click="details()">详情</el-button>
</el-main>
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="breadcrumb in breadcrumbList">{{ breadcrumb }}</el-breadcrumb-item> <el-breadcrumb-item v-for="breadcrumb in breadcrumbList">{{ breadcrumb }}</el-breadcrumb-item>
@ -101,21 +99,23 @@
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>{{combinedResults}} <h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>{{ namess }}
<h3 style="display: inline-block; color: red;">￥{{price}}</h3> <h3 style="display: inline-block; color: red;">￥{{ price }}</h3>
<el-form ref="form" :model="form" label-width="80px" style="margin-top: 80px"> <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-form-item v-for="(rule, index) in form.ruleList" :key="index" :label="rule.name">
<el-radio-group size="small" v-model="rule.selectedValue" @change="changeCheck(rule, $event)"> <el-radio-group v-model="form['rule'+index]" @change="changeRule">
<el-radio v-for="item in rule.value" <el-radio v-for="value in rule.value"
:key="item" :key="value"
:label="item" :label="value" border>{{ value }}
:value="item.value" </el-radio>
>{{ item }}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="购买数量"> <el-form-item label="购买数量">
<el-input-number v-model="form.num" :min="1" :max="100" label="描述文字"></el-input-number>库存{{stock}} <el-input-number v-model="form.num" :min="1" :max="100" label="描述文字"></el-input-number>
<h3 style="color: red;">总价{{sumPrice}}</h3> 库存{{ stock }}
<h3 style="color: red;">总价{{ sumPrice }}</h3>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">加入购物车</el-button> <el-button type="primary" @click="onSubmit">加入购物车</el-button>
@ -142,17 +142,18 @@
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<el-row> <el-row>
<img :src="good.carouselImages" style="width: 100%" height="500px"> <img style="width: 100%" height="500px">
<img :src="good.carouselImages" style="width: 100%" height="500px"> <img style="width: 100%" height="500px">
</el-row> </el-row>
</el-card> </el-card>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import {getPro} from "@/api/product/info"; import {getPro, listInfo} from "@/api/product/info";
export default { export default {
name: 'Index', name: 'Index',
@ -163,10 +164,7 @@ export default {
imageList: [], imageList: [],
/*品牌信息*/ /*品牌信息*/
brandName: "", brandName: "",
good: { good: {},
name: "",
carouselImages: ""
},
like: true, like: true,
value1: 999, value1: 999,
value2: 999, value2: 999,
@ -175,7 +173,7 @@ export default {
//规格表单 //规格表单
form: { form: {
ruleList: [], ruleList: [],
num:1 num: 1
}, },
ruleValueList: [], ruleValueList: [],
/*国歌表单*/ /*国歌表单*/
@ -186,63 +184,66 @@ export default {
}, },
/*商品详情*/ /*商品详情*/
goodDetail: [], goodDetail: [],
/*监控选中的值*/ sku: [],
names:"", price: 0,
// 用于存储前一个选中的 rule 和它的 value stock: 0,
previousRule: null, sumPrice: 0,
previousValue: null, a: "",
// 用于存储组合后的结果 namess: "",
combinedResults: "", goodList: [],
sku:[], queryParams: {},
price:0,
stock:0,
sumPrice:0,
} }
}, },
created() { created() {
const id = this.$route.params.id; const id = this.$route.params.id;
this.details(id) this.details(id)
this.getList()
}, },
watch:{ watch: {
"form.num":{ "form.num": {
handler(val){ handler(val) {
this.stock=this.stock-1 this.stock = this.stock - 1
this.sumPrice=this.sumPrice+this.price this.sumPrice = this.sumPrice + this.price
} }
}, },
"stock": {
handler(val) {
if (val === 0) {
this.$message.error("库存不够")
}
}
}
}, },
methods: { methods: {
changeCheck(rule, value){ details1(id) {
//this.form.num=1 this.$router.push('/detailsComponent/' + id)
//console.log(checkValue) },
console.log(rule.selectedValue) /*获取商品信息*/
getList() {
this.loading = true;
listInfo(this.queryParams).then(response => {
this.goodList = response.data.rows;
console.log(this.goodList)
});
},
changeRule() {
let selectedValues = this.sku.map((rule, index) => {
return this.form['rule' + index]; // 获取每个索引对应的值
}).filter(value => value !== '').join(''); // 过滤空值，然后拼接成字符串
this.combinedResults=""
if (this.previousValue !== null) {
// 组合前一个值和当前值，并添加到结果数组中
const combined = `${this.previousValue}${value}`;
this.combinedResults+=combined
console.log(this.combinedResults); // 打印组合后的结果
// 重置前一个选中的 rule 和 value
this.previousRule = null;
this.previousValue = null;
} else {
// 如果没有前一个值，只存储当前选中的 rule 和 value
this.previousRule = rule;
this.previousValue = value;
}
this.sku.forEach( this.sku.forEach(
sku=>{ sku => {
if(this.combinedResults===sku.sku){ if (selectedValues === sku.sku) {
this.price=sku.price this.price = sku.price
this.sumPrice=sku.price this.sumPrice = sku.price
this.stock=sku.stock this.stock = sku.stock
this.namess = selectedValues
} }
} }
) )
}, },
/*立即购买按钮*/ /*立即购买按钮*/
onSubmit() { onSubmit() {
@ -250,23 +251,21 @@ export default {
details: function (id) { details: function (id) {
getPro(id).then( getPro(id).then(
res => { res => {
console.log(res)
this.breadcrumbList = res.data.typeList this.breadcrumbList = res.data.typeList
this.brandName = res.data.brandName this.brandName = res.data.brandName
this.good.name = res.data.product.name this.good = res.data.product
this.good.carouselImages = res.data.product.carouselImages console.log(this.good)
this.imageList.push(res.data.product.carouselImages) this.imageList = res.data.product.carouselImages.split(",")
this.sku=res.data.projectSkuInfo this.sku = res.data.projectSkuInfo
let e1=[] let e1 = []
res.data.ruleList.forEach( res.data.ruleList.forEach(
rule=>{ rule => {
e1.push({id:rule.id,name:rule.name,value:rule.value}) e1.push({id: rule.id, name: rule.name, value: rule.value})
} }
) )
console.log(e1) this.form.ruleList = e1
this.form.ruleList =e1
this.categoryCommonElement = res.data.categoryCommonElementResp this.categoryCommonElement = res.data.categoryCommonElementResp
e = [] e = []
let e = [] let e = []
@ -304,7 +303,6 @@ export default {
this.goodDetail = [] this.goodDetail = []
this.goodDetail = e.filter(rule => rule.value !== null) this.goodDetail = e.filter(rule => rule.value !== null)
console.log(this.goodDetail)
} }
) )
} }