master
parent
5775329fac
commit
b8d2118d6d
|
|
@ -39,28 +39,19 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {getInfo} from "@/api/product/info";
|
||||
import {getTemplateAttribute} from "@/api/product/category";
|
||||
import
|
||||
{getInfo, listInfo} from "@/api/product/info";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
good:{
|
||||
name:"商品1",
|
||||
num:999,
|
||||
id:44
|
||||
},
|
||||
test:{
|
||||
id:44,
|
||||
value:45
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
/*获取商品信息*/
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Router from 'vue-router'
|
|||
import Layout from '@/layout'
|
||||
import Layouttest from "@/layouttest";
|
||||
import DetailsComponent from '@/views/a/detailsComponent.vue';
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
/**
|
||||
|
|
@ -74,6 +75,7 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '',
|
||||
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',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
呵呵呵
|
||||
{{id}}
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -8,9 +10,13 @@
|
|||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
id:0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const id = this.$route.params.id;
|
||||
this.id=id
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,32 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <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-main>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-card v-for="good in goodList" style="width: 500px">
|
||||
<el-descriptions :data="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="销量">
|
||||
1000
|
||||
</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-button type="primary" size="small" @click="details1(good.id)">详情</el-button>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-main>
|
||||
<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>
|
||||
|
|
@ -101,21 +99,23 @@
|
|||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>{{combinedResults}}
|
||||
<h3 style="display: inline-block; color: red;">￥{{price}}</h3>
|
||||
<h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>{{ namess }}
|
||||
<h3 style="display: inline-block; color: red;">￥{{ price }}</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" @change="changeCheck(rule, $event)">
|
||||
<el-radio v-for="item in rule.value"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item.value"
|
||||
>{{ item }}</el-radio>
|
||||
<el-form-item v-for="(rule, index) in form.ruleList" :key="index" :label="rule.name">
|
||||
<el-radio-group v-model="form['rule'+index]" @change="changeRule">
|
||||
<el-radio v-for="value in rule.value"
|
||||
:key="value"
|
||||
:label="value" border>{{ value }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="购买数量">
|
||||
<el-input-number v-model="form.num" :min="1" :max="100" label="描述文字"></el-input-number>库存{{stock}}
|
||||
<h3 style="color: red;">总价{{sumPrice}}</h3>
|
||||
<el-input-number v-model="form.num" :min="1" :max="100" label="描述文字"></el-input-number>
|
||||
库存{{ stock }}
|
||||
<h3 style="color: red;">总价{{ sumPrice }}</h3>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">加入购物车</el-button>
|
||||
|
|
@ -142,17 +142,18 @@
|
|||
</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">
|
||||
<img style="width: 100%" height="500px">
|
||||
<img style="width: 100%" height="500px">
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import {getPro} from "@/api/product/info";
|
||||
import {getPro, listInfo} from "@/api/product/info";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
|
|
@ -163,10 +164,7 @@ export default {
|
|||
imageList: [],
|
||||
/*品牌信息*/
|
||||
brandName: "",
|
||||
good: {
|
||||
name: "",
|
||||
carouselImages: ""
|
||||
},
|
||||
good: {},
|
||||
like: true,
|
||||
value1: 999,
|
||||
value2: 999,
|
||||
|
|
@ -175,7 +173,7 @@ export default {
|
|||
//规格表单
|
||||
form: {
|
||||
ruleList: [],
|
||||
num:1
|
||||
num: 1
|
||||
},
|
||||
ruleValueList: [],
|
||||
/*国歌表单*/
|
||||
|
|
@ -186,63 +184,66 @@ export default {
|
|||
},
|
||||
/*商品详情*/
|
||||
goodDetail: [],
|
||||
/*监控选中的值*/
|
||||
names:"",
|
||||
// 用于存储前一个选中的 rule 和它的 value
|
||||
previousRule: null,
|
||||
previousValue: null,
|
||||
// 用于存储组合后的结果
|
||||
combinedResults: "",
|
||||
sku:[],
|
||||
price:0,
|
||||
stock:0,
|
||||
sumPrice:0,
|
||||
sku: [],
|
||||
price: 0,
|
||||
stock: 0,
|
||||
sumPrice: 0,
|
||||
a: "",
|
||||
namess: "",
|
||||
goodList: [],
|
||||
queryParams: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const id = this.$route.params.id;
|
||||
this.details(id)
|
||||
this.getList()
|
||||
},
|
||||
watch:{
|
||||
"form.num":{
|
||||
handler(val){
|
||||
this.stock=this.stock-1
|
||||
this.sumPrice=this.sumPrice+this.price
|
||||
watch: {
|
||||
"form.num": {
|
||||
handler(val) {
|
||||
this.stock = this.stock - 1
|
||||
this.sumPrice = this.sumPrice + this.price
|
||||
}
|
||||
},
|
||||
"stock": {
|
||||
handler(val) {
|
||||
if (val === 0) {
|
||||
this.$message.error("库存不够")
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeCheck(rule, value){
|
||||
//this.form.num=1
|
||||
//console.log(checkValue)
|
||||
console.log(rule.selectedValue)
|
||||
details1(id) {
|
||||
this.$router.push('/detailsComponent/' + id)
|
||||
},
|
||||
/*获取商品信息*/
|
||||
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(
|
||||
sku=>{
|
||||
if(this.combinedResults===sku.sku){
|
||||
this.price=sku.price
|
||||
this.sumPrice=sku.price
|
||||
this.stock=sku.stock
|
||||
sku => {
|
||||
if (selectedValues === sku.sku) {
|
||||
this.price = sku.price
|
||||
this.sumPrice = sku.price
|
||||
this.stock = sku.stock
|
||||
this.namess = selectedValues
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
},
|
||||
|
||||
/*立即购买按钮*/
|
||||
onSubmit() {
|
||||
|
||||
|
|
@ -250,24 +251,22 @@ export default {
|
|||
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)
|
||||
this.sku=res.data.projectSkuInfo
|
||||
let e1=[]
|
||||
this.good = res.data.product
|
||||
console.log(this.good)
|
||||
this.imageList = res.data.product.carouselImages.split(",")
|
||||
this.sku = res.data.projectSkuInfo
|
||||
let e1 = []
|
||||
|
||||
res.data.ruleList.forEach(
|
||||
rule=>{
|
||||
e1.push({id:rule.id,name:rule.name,value:rule.value})
|
||||
rule => {
|
||||
e1.push({id: rule.id, name: rule.name, value: rule.value})
|
||||
}
|
||||
)
|
||||
|
||||
console.log(e1)
|
||||
this.form.ruleList =e1
|
||||
this.categoryCommonElement = res.data.categoryCommonElementResp
|
||||
this.form.ruleList = e1
|
||||
this.categoryCommonElement = res.data.categoryCommonElementResp
|
||||
e = []
|
||||
let e = []
|
||||
this.categoryCommonElement.attributeList.forEach(
|
||||
|
|
@ -304,7 +303,6 @@ export default {
|
|||
|
||||
this.goodDetail = []
|
||||
this.goodDetail = e.filter(rule => rule.value !== null)
|
||||
console.log(this.goodDetail)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue