商品详情页面 2.0
parent
49e12e5f3a
commit
75dfd973ba
|
|
@ -80,17 +80,17 @@ export const constantRoutes = [
|
|||
redirect: 'product-detail',
|
||||
children: [
|
||||
{
|
||||
path: 'product-detail',
|
||||
component: () => import('@/views/product/shop/index'),
|
||||
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: '/gb',
|
||||
// component: detail
|
||||
// },
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -92,47 +92,57 @@
|
|||
: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-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>
|
||||
</div>
|
||||
<el-descriptions title="分组1" :column="1">
|
||||
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions title="其他属性" :column="1">
|
||||
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="备注">
|
||||
<el-tag size="small">学校</el-tag>
|
||||
|
||||
<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-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</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 {getInfo} from "@/api/product/info";
|
||||
import {getDetailInfo} from "@/api/product/info";
|
||||
|
||||
export default {
|
||||
name: "Detailindex",
|
||||
name: "productDetail",
|
||||
data() {
|
||||
return {
|
||||
breadcrumbList: [
|
||||
|
|
@ -149,29 +159,51 @@ export default {
|
|||
price: 0
|
||||
},
|
||||
shopData: {},
|
||||
receivedShop: {},
|
||||
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() {
|
||||
this.parseShopFromRoute();
|
||||
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: "提示",
|
||||
|
|
@ -186,6 +218,7 @@ export default {
|
|||
this.form['rule'+index] = rule
|
||||
})
|
||||
this.selectRuleSku()
|
||||
|
||||
},
|
||||
selectRuleSku(){
|
||||
let ruleSize =this.receivedShop.ruleAttrAddModelList.length
|
||||
|
|
@ -199,24 +232,52 @@ export default {
|
|||
}
|
||||
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()
|
||||
},
|
||||
parseShopFromRoute() {
|
||||
// 尝试解析shop查询参
|
||||
this.receivedShop = this.$route.query.shop;
|
||||
// 确保receivedShop和data属性都存在，并且data下有name属性
|
||||
console.log("hhhh ",this.receivedShop); // 打印店铺名称
|
||||
// 图片轮播图
|
||||
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() {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -564,6 +567,10 @@ 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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue