master
parent
b8d2118d6d
commit
5d3d7e6cc1
|
|
@ -124,6 +124,9 @@ export default {
|
|||
methods: {
|
||||
init() {
|
||||
const editor = this.$refs.editor;
|
||||
if (this.readOnly){
|
||||
this.options.modules.toolbar = {};
|
||||
}
|
||||
this.Quill = new Quill(editor, this.options);
|
||||
// 如果设置了上传地址则自定义图片上传事件
|
||||
if (this.type == 'url') {
|
||||
|
|
@ -176,7 +179,7 @@ export default {
|
|||
},
|
||||
handleUploadSuccess(res, file) {
|
||||
// 如果上传成功
|
||||
if (res.data.code == 200) {
|
||||
if (res.code == 200) {
|
||||
// 获取富文本组件实例
|
||||
let quill = this.Quill;
|
||||
// 获取光标所在位置
|
||||
|
|
|
|||
|
|
@ -1,25 +1,347 @@
|
|||
<template>
|
||||
<div>
|
||||
呵呵呵
|
||||
{{id}}
|
||||
|
||||
<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">
|
||||
<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>{{
|
||||
namess
|
||||
}}
|
||||
<h3 style="display: inline-block; color: red;">￥{{ price }}</h3>
|
||||
<el-form ref="form" :model="form" label-width="80px" style="margin-top: 50px">
|
||||
<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-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 style="width: 100%" height="500px">
|
||||
<img style="width: 100%" height="500px">
|
||||
|
||||
<editor v-model="good.introduction" :read-only="true"></editor>
|
||||
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
||||
|
||||
</el-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {getPro} from "@/api/product/info";
|
||||
import rule from "@/views/product/rule/index.vue";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
id:0,
|
||||
id: 0,
|
||||
/*图片*/
|
||||
imageList: [],
|
||||
/*品牌信息*/
|
||||
brandName: "",
|
||||
good: {},
|
||||
like: true,
|
||||
value1: 999,
|
||||
value2: 999,
|
||||
title: "增长人数",
|
||||
breadcrumbList: [],
|
||||
//规格表单
|
||||
form: {
|
||||
ruleList: [],
|
||||
num: 1
|
||||
},
|
||||
ruleValueList: [],
|
||||
/*国歌表单*/
|
||||
categoryCommonElement: {
|
||||
templateAttributeGroupList: [],
|
||||
templateAttributeList: [],
|
||||
attributeList: []
|
||||
},
|
||||
/*商品详情*/
|
||||
goodDetail: [],
|
||||
sku: [],
|
||||
price: 0,
|
||||
stock: 0,
|
||||
sumPrice: 0,
|
||||
a: "",
|
||||
namess: "",
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
const id = this.$route.params.id;
|
||||
this.id=id
|
||||
this.id = id
|
||||
this.details(id)
|
||||
},
|
||||
methods: {}
|
||||
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: {
|
||||
|
||||
changeRule() {
|
||||
let selectedValues = this.sku.map((rule, index) => {
|
||||
return this.form['rule' + index]; // 获取每个索引对应的值
|
||||
}).filter(value => value !== '').join(''); // 过滤空值，然后拼接成字符串
|
||||
|
||||
|
||||
this.sku.forEach(
|
||||
sku => {
|
||||
if (selectedValues === sku.sku) {
|
||||
this.price = sku.price
|
||||
this.sumPrice = sku.price
|
||||
this.stock = sku.stock
|
||||
this.namess = selectedValues
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
/*立即购买按钮*/
|
||||
onSubmit() {
|
||||
|
||||
},
|
||||
details: function (id) {
|
||||
getPro(id).then(
|
||||
res => {
|
||||
this.breadcrumbList = res.data.typeList
|
||||
this.brandName = res.data.brandName
|
||||
this.good = res.data.product
|
||||
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})
|
||||
}
|
||||
)
|
||||
|
||||
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)
|
||||
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -25,128 +25,15 @@
|
|||
</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>
|
||||
</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>{{ 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 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-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 style="width: 100%" height="500px">
|
||||
<img style="width: 100%" height="500px">
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-row>
|
||||
<el-main>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6">
|
||||
<router-view></router-view>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -160,60 +47,14 @@ export default {
|
|||
computed: {},
|
||||
data() {
|
||||
return {
|
||||
/*图片*/
|
||||
imageList: [],
|
||||
/*品牌信息*/
|
||||
brandName: "",
|
||||
good: {},
|
||||
like: true,
|
||||
value1: 999,
|
||||
value2: 999,
|
||||
title: "增长人数",
|
||||
breadcrumbList: [],
|
||||
//规格表单
|
||||
form: {
|
||||
ruleList: [],
|
||||
num: 1
|
||||
},
|
||||
ruleValueList: [],
|
||||
/*国歌表单*/
|
||||
categoryCommonElement: {
|
||||
templateAttributeGroupList: [],
|
||||
templateAttributeList: [],
|
||||
attributeList: []
|
||||
},
|
||||
/*商品详情*/
|
||||
goodDetail: [],
|
||||
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
|
||||
}
|
||||
},
|
||||
"stock": {
|
||||
handler(val) {
|
||||
if (val === 0) {
|
||||
this.$message.error("库存不够")
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
details1(id) {
|
||||
this.$router.push('/detailsComponent/' + id)
|
||||
|
|
@ -226,87 +67,6 @@ export default {
|
|||
console.log(this.goodList)
|
||||
});
|
||||
},
|
||||
changeRule() {
|
||||
let selectedValues = this.sku.map((rule, index) => {
|
||||
return this.form['rule' + index]; // 获取每个索引对应的值
|
||||
}).filter(value => value !== '').join(''); // 过滤空值，然后拼接成字符串
|
||||
|
||||
this.sku.forEach(
|
||||
sku => {
|
||||
if (selectedValues === sku.sku) {
|
||||
this.price = sku.price
|
||||
this.sumPrice = sku.price
|
||||
this.stock = sku.stock
|
||||
this.namess = selectedValues
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
},
|
||||
|
||||
/*立即购买按钮*/
|
||||
onSubmit() {
|
||||
|
||||
},
|
||||
details: function (id) {
|
||||
getPro(id).then(
|
||||
res => {
|
||||
this.breadcrumbList = res.data.typeList
|
||||
this.brandName = res.data.brandName
|
||||
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})
|
||||
}
|
||||
)
|
||||
|
||||
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)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue