商品详情页面
parent
ac293f64d2
commit
bac059eaf4
|
|
@ -9,6 +9,13 @@ export function listInfo(query) {
|
|||
})
|
||||
}
|
||||
|
||||
// 查询商品信息详细
|
||||
export function getDetailInfo(id) {
|
||||
return request({
|
||||
url: '/product/info/detail/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 查询商品信息详细
|
||||
export function getInfo(id) {
|
||||
return request({
|
||||
|
|
@ -29,7 +36,7 @@ export function addInfo(data) {
|
|||
// 修改商品信息
|
||||
export function updateInfo(data) {
|
||||
return request({
|
||||
url: '/product/info/'+data.id,
|
||||
url: '/product/info/'+data.projectAddModel.id,
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
|
|
|
|||
|
|
@ -70,16 +70,29 @@ export default {
|
|||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
checkedList: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val.toString() !== this.attributeIdList.toString()){
|
||||
this.attributeIdList = val
|
||||
this.attributeIdList = val;
|
||||
this.checkedAttributeList = []
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
checkedList: {
|
||||
handler(val){
|
||||
if (val !== undefined && val.length > 0){
|
||||
this.checkedAttributeList = val;
|
||||
this.attributeIdList = this.checkedAttributeList.map(checked => checked.id);
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -67,17 +67,10 @@ export default {
|
|||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val.toString() !== this.attributeGroupIdList.toString()){
|
||||
this.attributeGroupIdList = val
|
||||
this.checkedAttributeGroupList = []
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
checkedList: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -93,6 +86,26 @@ export default {
|
|||
attributeGroupList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val.toString() !== this.attributeGroupIdList.toString()){
|
||||
this.attributeGroupIdList = val;
|
||||
this.checkedAttributeGroupList = []
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
checkedList: {
|
||||
handler(val){
|
||||
if (val !== undefined && val.length > 0){
|
||||
this.checkedAttributeGroupList = val;
|
||||
this.attributeGroupIdList = this.checkedAttributeGroupList.map(checked => checked.id);
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.queryAttributeGroup();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
<el-col :span="2" v-for="(brand, index) in checkedBrandList">
|
||||
<el-tag
|
||||
style="margin: 5px 10px"
|
||||
:key="brand.name"
|
||||
:key="brand.nam"
|
||||
closable @close="removeChecked(index)">
|
||||
{{ brand.name }}
|
||||
{{ brand.nam }}
|
||||
</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<el-row>
|
||||
<el-form :inline="true" :model="brandQuery" class="demo-form-inline">
|
||||
<el-form-item label="品牌名称">
|
||||
<el-input v-model="brandQuery.name" placeholder="品牌名称"></el-input>
|
||||
<el-input v-model="brandQuery.nam" placeholder="品牌名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="queryBrand">查询</el-button>
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
:value="brand.id"
|
||||
:label="brand.id"
|
||||
@change="checkedBrand(brand)"
|
||||
border>{{ brand.name }}
|
||||
border>{{ brand.nam }}
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -67,17 +67,10 @@ export default {
|
|||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
vlue: {
|
||||
handler(val) {
|
||||
if (val.toString() !== this.brandIdList.toString()){
|
||||
this.brandIdList = val
|
||||
this.checkedBrandList = []
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
checkedList: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -93,6 +86,26 @@ export default {
|
|||
brandList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
if (val.toString() !== this.brandIdList.toString()){
|
||||
this.brandIdList = val;
|
||||
this.checkedBrandList = []
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
checkedList: {
|
||||
handler(val){
|
||||
if (val !== undefined && val.length > 0){
|
||||
this.checkedBrandList = val;
|
||||
this.brandIdList = this.checkedBrandList.map(checked => checked.id);
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.queryBrand();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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') {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-menu
|
||||
default-active="1"
|
||||
class="el-menu-demo"
|
||||
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/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "layoutShop"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-header, el-footer {
|
||||
background-color: #E9EEF3;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
.el-main {
|
||||
background-color: #E9EEF3;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
body > .el-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside{
|
||||
line-height: 260;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7).el.el-aside{
|
||||
line-height: 320px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,4 +1,9 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
import Vue from 'vue';
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
|
||||
Vue.use(ElementUI);
|
||||
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ import Vue from 'vue'
|
|||
import Router from 'vue-router'
|
||||
/* Layout */
|
||||
import Layout from '@/layout'
|
||||
|
||||
import LayoutShop from "@/layout-shop/index.vue";
|
||||
import detail from "@/views/product/info/detail/index.vue";
|
||||
Vue.use(Router)
|
||||
|
||||
/**
|
||||
|
|
@ -73,6 +74,23 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: LayoutShop,
|
||||
redirect: 'product-detail',
|
||||
children: [
|
||||
{
|
||||
path: 'product-detail/:detailId(\\d+)',
|
||||
component: () => import('@/views/product/info/detail/index'),
|
||||
name: 'ShopProduct',
|
||||
meta: {title: '商品详情', icon: 'dashboard', affix: true}
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/gb',
|
||||
// component: detail
|
||||
// },
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,304 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-breadcrumb separator-class="el-icon-arrow-right">
|
||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item v-for="breadcrumb in receivedShop.categoryInfoList">{{breadcrumb.name}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="12">
|
||||
<el-carousel trigger="click" height="300px">
|
||||
<el-carousel-item v-for="item in Products" :key="item">
|
||||
<img :src="item" alt="坏了" width="100%" height="100%">
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div style="margin-top: 10px ">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div>
|
||||
<el-statistic
|
||||
group-separator=","
|
||||
:precision="2"
|
||||
:value="value2"
|
||||
:title="title"
|
||||
></el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>
|
||||
<el-statistic title="男女比">
|
||||
<template slot="formatter">
|
||||
456/2
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>
|
||||
<el-statistic
|
||||
group-separator=","
|
||||
:precision="2"
|
||||
decimal-separator="."
|
||||
:value="value1"
|
||||
:title="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="Feedback">
|
||||
<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>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
{{receivedShop.projectInfo.name}}
|
||||
商品规格 {{checkSkuInfo.sku}}
|
||||
<h2 style="color: red">{{ checkSkuInfo.price }}</h2>
|
||||
<el-card shadow="hover" style="width: 100%;">
|
||||
<div style="width: 100%; display: inline-block; ">
|
||||
<el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
|
||||
<template slot="suffix">
|
||||
抢购即将开始
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-form ref="form" :model="form" label-width="80" style="margin-top: 30px">
|
||||
<el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrAddModelList":label="ruleAttr.name">
|
||||
<!-- <el-radio-group v-model="form['rule'+index]" @change="selectRuleSku">-->
|
||||
<!-- <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>-->
|
||||
<!-- </el-radio-group>-->
|
||||
<el-radio v-model="form['rule'+index]" @change="selectRuleSku"
|
||||
v-for="value in ruleAttr.valueList"
|
||||
:label="value" :key="value" :value="value" border>{{value}}</el-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="数量">
|
||||
<el-input-number v-model="form.num" :min="1" :max="10" label="描述文字" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" >加入购物车</el-button>
|
||||
<el-button>立即购买</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
总价格{{num}}
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 50px">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span style="">商品详情</span>
|
||||
|
||||
<el-descriptions v-for="item in receivedShop.attributeGroupList" :title="attributeGroup.groupName" :column="1" >
|
||||
<el-descriptions-item v-for="attribute in item.attributeList" :label="attribute.name">
|
||||
{{attributeMap[attribute.id]}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
|
||||
<el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
|
||||
title="其他属性" :column="1" >
|
||||
<el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
|
||||
:label="attributeInfo.name">
|
||||
{{attributeMap[attributeInfo.id]}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
|
||||
title="其他属性" :column="1" >
|
||||
<el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
|
||||
:label="attributeInfo.name">
|
||||
{{attributeMap[attributeInfo.id]}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
|
||||
<editor v-model="editorValue" :read-only="true"></editor>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDetailInfo} from "@/api/product/info";
|
||||
|
||||
export default {
|
||||
name: "productDetail",
|
||||
data() {
|
||||
return {
|
||||
breadcrumbList: [
|
||||
"服装",
|
||||
"外衣",
|
||||
"女士移除"
|
||||
],
|
||||
like: true,
|
||||
value1: 4154.564,
|
||||
value2: 1314,
|
||||
title: "增长人数",
|
||||
form: {
|
||||
num: 1,
|
||||
price: 0
|
||||
},
|
||||
shopData: {},
|
||||
receivedShop: {
|
||||
projectInfo: {
|
||||
name: ""
|
||||
},
|
||||
brandInfo: {
|
||||
nam: ""
|
||||
},
|
||||
attributeInfoList: []
|
||||
},
|
||||
num: 1,
|
||||
editorValue: "阿萨德刚",
|
||||
attributeMap: [],
|
||||
// 商品轮播图
|
||||
Products: [],
|
||||
checkSkuInfo: {
|
||||
price : 0.00
|
||||
},
|
||||
price: 0.00,
|
||||
attributeGroup: [],
|
||||
deadline2 : Date.now() + 1 * 10000 // 10小时 * 60分钟/小时 * 60秒/分钟 * 1000毫秒/秒
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
const detailId=this.$route.params && this.$route.params.detailId
|
||||
this.initProjectDetailInfo(detailId)
|
||||
// this.parseShopFromRoute();
|
||||
// 设置定时器
|
||||
const timerId = setTimeout(() => {
|
||||
// 时间到了，调用 hilarity 函数
|
||||
this.hilarity();
|
||||
clearTimeout(timerId);
|
||||
}, this.deadline2 - Date.now());
|
||||
},
|
||||
watch: {
|
||||
'form.num':{
|
||||
handler:"updateNum",
|
||||
immediate:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
updateNum() {
|
||||
this.num = this.price * this.form.num
|
||||
console.log("qqqqq",this.num)
|
||||
},
|
||||
hilarity() {
|
||||
this.$notify({
|
||||
title: "提示",
|
||||
message: "时间已到",
|
||||
duration: 0,
|
||||
});
|
||||
},
|
||||
initSku(){
|
||||
let sku =this.receivedShop.projectSkuInfoList[0]['sku'];
|
||||
let skuArr =sku.split("-");
|
||||
skuArr.forEach((rule,index) => {
|
||||
this.form['rule'+index] = rule
|
||||
})
|
||||
this.selectRuleSku()
|
||||
|
||||
},
|
||||
selectRuleSku(){
|
||||
let ruleSize =this.receivedShop.ruleAttrAddModelList.length
|
||||
let sku = "";
|
||||
for (let index = 0 ; ;index++){
|
||||
sku +=this.form['rule'+index]
|
||||
if (index+1 === ruleSize){
|
||||
break
|
||||
}
|
||||
sku += "-";
|
||||
}
|
||||
this.checkSkuInfo= this.receivedShop.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
|
||||
console.log("sdf",this.checkSkuInfo)
|
||||
console.log("ppp",this.checkSkuInfo.price)
|
||||
this.price = this.checkSkuInfo.price
|
||||
this.updateNum()
|
||||
},
|
||||
initProjectDetailInfo(detailId){
|
||||
getDetailInfo(detailId).then(response => {
|
||||
this.receivedShop = response.data
|
||||
console.log("商品",this.receivedShop)
|
||||
let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
|
||||
this.Products.push(...ccc)
|
||||
this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
|
||||
let key =productAttributeInfo.attributeId;
|
||||
this.attributeMap[key] = productAttributeInfo["value"]
|
||||
})
|
||||
|
||||
let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
|
||||
console.log("hieng",ruleAttrLength)
|
||||
for (let index = 0 ;index < ruleAttrLength ;index++){
|
||||
this.form["rule"+index] = null
|
||||
}
|
||||
console.log("shjo",this.receivedShop.ruleAttrAddModelList)
|
||||
this.initSku()
|
||||
})
|
||||
},
|
||||
//商品列表
|
||||
// parseShopFromRoute() {
|
||||
// // 尝试解析shop查询参
|
||||
// this.receivedShop = this.$route.query.shop;
|
||||
// // 确保receivedShop和data属性都存在，并且data下有name属性
|
||||
// console.log("hhhh ",this.receivedShop); // 打印店铺名称
|
||||
// // 图片轮播图
|
||||
// let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
|
||||
// this.Products.push(...ccc)
|
||||
// this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
|
||||
// let key =productAttributeInfo.attributeId;
|
||||
// this.attributeMap[key] = productAttributeInfo["value"]
|
||||
// })
|
||||
//
|
||||
// let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
|
||||
// console.log("hieng",ruleAttrLength)
|
||||
// for (let index = 0 ;index < ruleAttrLength ;index++){
|
||||
// this.form["rule"+index] = null
|
||||
// }
|
||||
// console.log("shjo",this.receivedShop.ruleAttrAddModelList)
|
||||
// this.initSku()
|
||||
// },
|
||||
},
|
||||
beforeDestroy() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 14px;
|
||||
opacity: 0.75;
|
||||
line-height: 200px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -115,6 +115,9 @@
|
|||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button class="link-type" @click="toProjectDetail(scope.row.id)">
|
||||
商品詳情
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
|
|
@ -183,11 +186,11 @@
|
|||
<el-option
|
||||
v-for="brand in brandList"
|
||||
:key="brand.id"
|
||||
:label="brand.name"
|
||||
:label="brand.nam"
|
||||
:value="brand.id">
|
||||
<el-row>
|
||||
<image-preview :height="40" :width="40" :src="brand.logo" style="float: left;"/>
|
||||
<div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.name}}</div>
|
||||
<div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.nam}}</div>
|
||||
</el-row>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
|
@ -332,9 +335,11 @@
|
|||
<el-button type="primary" @click="oneSetting">一键设置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
{{skuList}}
|
||||
<el-table
|
||||
:data="skuList"
|
||||
border
|
||||
max-height="500"
|
||||
style="width: 100%">
|
||||
<el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -410,7 +415,15 @@ export default {
|
|||
brandId: null,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
form: {
|
||||
mianType: '',
|
||||
parentType: '',
|
||||
type:'',
|
||||
image: '',
|
||||
price: '',
|
||||
stock: ''
|
||||
},
|
||||
fufObj: [],
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
|
|
@ -476,7 +489,9 @@ export default {
|
|||
"image": null,
|
||||
"stock": null,
|
||||
"price": null
|
||||
}
|
||||
},
|
||||
respData:[],
|
||||
fifObj: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -495,17 +510,56 @@ export default {
|
|||
},
|
||||
"form.type": {
|
||||
handler(value) {
|
||||
console.log(value)
|
||||
if (value != null){
|
||||
getTemplateAttribute(value).then(response => {
|
||||
console.log("res",response)
|
||||
const {data} = response;
|
||||
const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
|
||||
this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
|
||||
this.categoryCommonElement.templateAttributeList = templateAttributeList;
|
||||
this.categoryCommonElement.attributeList = attributeList;
|
||||
})
|
||||
}
|
||||
|
||||
console.log("resData",this.respData);
|
||||
if (this.respData != null && this.respData.length !== 0){
|
||||
this.categoryCommonElement.templateAttributeGroupList.forEach(template => {
|
||||
template.attributeList.forEach(te => {
|
||||
this.respData.forEach(asPro => {
|
||||
if (te.id == asPro.attributeId){
|
||||
console.log("value",asPro.value)
|
||||
te.value = asPro.value;
|
||||
this.fufObj.push(asPro);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
this.categoryCommonElement.templateAttributeList.forEach(tem => {
|
||||
this.respData.forEach(asPro => {
|
||||
console.log(asPro)
|
||||
if (tem.id === asPro.attributeId){
|
||||
tem.value = asPro.value;
|
||||
this.fufObj.push(asPro);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.respData.forEach(asPro => {
|
||||
if (!this.fufObj.includes(asPro)){
|
||||
this.attributeCheckedList.push(asPro);
|
||||
}
|
||||
});
|
||||
|
||||
this.categoryCommonElement.attributeList.forEach(attr => {
|
||||
this.attributeCheckedList.forEach(attri => {
|
||||
if (attr.id == attri.attributeId){
|
||||
attri.name = attr.name;
|
||||
this.attributeIdCheckedList.push(Number(attr.id));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -513,8 +567,13 @@ export default {
|
|||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
toProjectDetail(detailId){
|
||||
let url = `${window.location.origin}/product-detail/${detailId}`;
|
||||
window.open(url)
|
||||
},
|
||||
oneSetting(){
|
||||
this.skuList.forEach(skuInfo => {
|
||||
console.log(skuInfo)
|
||||
skuInfo.image = this.oneSettingForm.image;
|
||||
skuInfo.stock = this.oneSettingForm.stock;
|
||||
skuInfo.price = this.oneSettingForm.price;
|
||||
|
|
@ -523,7 +582,11 @@ export default {
|
|||
changeRule(ruleId){
|
||||
this.titleList = []
|
||||
let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
|
||||
|
||||
const {ruleAttrList} = ruleInfo;
|
||||
|
||||
console.log(ruleInfo)
|
||||
console.log(ruleAttrList)
|
||||
let skuTotal = 1;
|
||||
for (let ruleAttrListKey in ruleAttrList) {
|
||||
let ruleAttrInfo = ruleAttrList[ruleAttrListKey];
|
||||
|
|
@ -534,7 +597,6 @@ export default {
|
|||
skuTotal = skuTotal * ruleAttrInfo.valueList.length;
|
||||
}
|
||||
this.titleList.push(...this.templateTitleList) ;
|
||||
console.log(this.titleList);
|
||||
this.skuList = [];
|
||||
for (let i = 0; i < skuTotal; i++) {
|
||||
this.skuList.push(
|
||||
|
|
@ -626,7 +688,6 @@ export default {
|
|||
listCategory().then(response => {
|
||||
this.categoryOptions = [];
|
||||
this.categoryOptions = this.handleTree(response.data, "id", "parentId");
|
||||
console.log(this.categoryOptions)
|
||||
});
|
||||
},
|
||||
remoteSearchBrandList(queryValue){
|
||||
|
|
@ -640,7 +701,7 @@ export default {
|
|||
next() {
|
||||
let isValidate = true;
|
||||
this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
|
||||
console.log(valid)
|
||||
|
||||
if (valid) {
|
||||
isValidate = false;
|
||||
}
|
||||
|
|
@ -675,13 +736,16 @@ export default {
|
|||
image: null,
|
||||
carouselImages: null,
|
||||
status: null,
|
||||
ruleId: null,
|
||||
brandId: null,
|
||||
remark: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
updateBy: null,
|
||||
updateTime: null
|
||||
updateTime: null,
|
||||
skuList: [],
|
||||
titleList: [],
|
||||
categoryCommonElement: [],
|
||||
oneSettingForm: {}
|
||||
};
|
||||
this.resetForm("form");
|
||||
this.initCategoryTree();
|
||||
|
|
@ -706,15 +770,36 @@ export default {
|
|||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.initCategoryTree()
|
||||
this.open = true;
|
||||
this.skuList=[]
|
||||
this.titleList= []
|
||||
this.oneSettingForm = {}
|
||||
this.title = "添加商品信息";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
|
||||
getInfo(id).then(response => {
|
||||
console.log("response",response)
|
||||
this.respData = response.data.asProductAttributeInfos
|
||||
this.form = response.data;
|
||||
console.log("sd",this.form.id)
|
||||
this.initCategoryTree()
|
||||
this.oneSettingForm = response.data.projectSkuInfos
|
||||
this.categoryOptionValue = [Number(response.data.mianType),Number(response.data.parentType),Number(response.data.type)]
|
||||
this.changeRule(response.data.ruleId)
|
||||
console.log("sku",this.skuList)
|
||||
console.log("skuu",response.data.projectSkuInfos)
|
||||
for (var i = 0; i < this.skuList.length; i++) {
|
||||
this.$set(this.skuList[i], 'image', response.data.projectSkuInfos[i].image);
|
||||
this.$set(this.skuList[i], 'price', response.data.projectSkuInfos[i].price);
|
||||
this.$set(this.skuList[i], 'stock', response.data.projectSkuInfos[i].stock);
|
||||
console.log(this.skuList[i].price, response.data.projectSkuInfos[i].price);
|
||||
}
|
||||
console.log("sfdf",this.skuList)
|
||||
this.open = true;
|
||||
this.title = "修改商品信息";
|
||||
});
|
||||
|
|
@ -723,14 +808,47 @@ export default {
|
|||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
let attrValueList = [];
|
||||
for (const templateAttributeGroup of this.categoryCommonElement.templateAttributeGroupList) {
|
||||
templateAttributeGroup.attributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
|
||||
}
|
||||
|
||||
this.categoryCommonElement.templateAttributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
|
||||
this.attributeCheckedList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
|
||||
let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === this.form.ruleId);
|
||||
const {ruleAttrList} = ruleInfo;
|
||||
let ruleAttrSize = ruleAttrList.length;
|
||||
let productSkuList = this.skuList.map(skuInfo => {
|
||||
let sku = "";
|
||||
for (let index = 0; ; index++) {
|
||||
sku += skuInfo["prop"+index];
|
||||
if (index+1 >= ruleAttrSize){
|
||||
break;
|
||||
}else {
|
||||
sku += "-";
|
||||
}
|
||||
}
|
||||
return {
|
||||
sku: sku,
|
||||
image: skuInfo.image,
|
||||
stock: skuInfo.stock,
|
||||
price: skuInfo.price
|
||||
}
|
||||
})
|
||||
let productAddReq = {
|
||||
projectAddModel: this.form,
|
||||
attrValueList: attrValueList,
|
||||
productSkuList: productSkuList
|
||||
};
|
||||
console.log("pto",productAddReq)
|
||||
if (this.form.id != null) {
|
||||
updateInfo(this.form).then(response => {
|
||||
updateInfo(productAddReq).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addInfo(this.form).then(response => {
|
||||
addInfo(productAddReq).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="title">选购商品</div>
|
||||
<table class="table" width="100%">
|
||||
<template v-for="(item, index) in goodsList" v-if="index%2==0">
|
||||
<tr>
|
||||
<td class="video-row" @click="goto(item.id)">
|
||||
<div class="row-line">
|
||||
<img :src="item.image" style="width: 400px; height: 400px"/>
|
||||
<div class="video-title">{{item.name}}</div>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<el-statistic
|
||||
group-separator=","
|
||||
:precision="2"
|
||||
:value="value2"
|
||||
:title="title"
|
||||
></el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<el-statistic title="好评比">
|
||||
<template slot="formatter">
|
||||
456/2
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<el-statistic :value="like ? 5 : 1" title="星级">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<!--添加td作为两行之间的间距，td中用 进行占位-->
|
||||
<td class="line-bg"> </td>
|
||||
<td v-if="index+1<goodsList.length" class="video-row" @click="goto(goodsList[index+1].id,goodsList[index+1].title)">
|
||||
<div class="row-line">
|
||||
<img :src="goodsList[index+1].image" style="width: 400px; height: 400px"/>
|
||||
<div class="video-title">{{goodsList[index+1].name}}</div>
|
||||
<div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<el-statistic
|
||||
group-separator=","
|
||||
:precision="2"
|
||||
:value="value2"
|
||||
:title="title"
|
||||
></el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<el-statistic title="好评比">
|
||||
<template slot="formatter">
|
||||
456/2
|
||||
</template>
|
||||
</el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div>
|
||||
<el-statistic :value="like ? 4 : 520" title="Feedback">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
//例如：import 《组件名称》 from '《组件路径》,
|
||||
|
||||
import {getDetailInfo, listInfo} from "@/api/product/info";
|
||||
|
||||
export default {
|
||||
name: "ShopProduct",
|
||||
//import引入的组件需要注入到对象中才能使用"
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
//这里存放数据"
|
||||
|
||||
return {
|
||||
like: true,
|
||||
value1: 4154.564,
|
||||
value2: 1314,
|
||||
title: "近期下单",
|
||||
goodsList: [],
|
||||
shop: {}
|
||||
};
|
||||
},
|
||||
//计算属性 类似于data概念",
|
||||
computed: {},
|
||||
//监控data中的数据变化",
|
||||
watch: {},
|
||||
//方法集合",
|
||||
methods: {
|
||||
getALlGoods(){
|
||||
listInfo().then(
|
||||
res => {
|
||||
console.log(res)
|
||||
this.goodsList = res.data.rows
|
||||
}
|
||||
)
|
||||
},
|
||||
goto(id){
|
||||
console.log(id)
|
||||
getDetailInfo(id).then(response => {
|
||||
console.log(response)
|
||||
this.shop = response.data;
|
||||
if (response && response.data){
|
||||
let routeData = this.$router.resolve({ path: '/gb', query: { shop: this.shop } });
|
||||
this.$router.push(routeData.route);
|
||||
}else {
|
||||
console.error("没有获取到表单数据")
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
this.getALlGoods()
|
||||
},
|
||||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||||
mounted() {
|
||||
},
|
||||
beforeCreate() {
|
||||
}, //生命周期 - 创建之前",
|
||||
beforeMount() {
|
||||
}, //生命周期 - 挂载之前",
|
||||
beforeUpdate() {
|
||||
}, //生命周期 - 更新之前",
|
||||
updated() {
|
||||
}, //生命周期 - 更新之后",
|
||||
beforeDestroy() {
|
||||
}, //生命周期 - 销毁之前",
|
||||
destroyed() {
|
||||
}, //生命周期 - 销毁完成",
|
||||
activated() {
|
||||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
padding: 20px 20px 20px 20px;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #2A333F;
|
||||
background-color: #f3f3f3;
|
||||
line-height: 22px;
|
||||
}
|
||||
.title {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color:#091222;;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.table{
|
||||
width:100%;
|
||||
}
|
||||
.video-row{
|
||||
width: 48%;
|
||||
height: 160px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
.row-line{
|
||||
background: #FFFFFF;
|
||||
}
|
||||
img {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin: 35px 0 14px 0;
|
||||
}
|
||||
}
|
||||
.line-bg{
|
||||
width: 4%; //两列布局之间增加间距，HTML中添加 占位
|
||||
background: #f3f3f3;
|
||||
}
|
||||
.video-title {
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 34px;
|
||||
}
|
||||
.like {
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue