Skip to content

S
sensorConsult
Commit a1f59403 authored by zhanglw's avatar zhanglw
Browse files
Options

产品详情页

parent ad9bc39c
Hide whitespace changes
Inline Side-by-side
Showing with 593 additions and 38 deletions
src/router/routers.js
View file @ a1f59403
......@@ -52,6 +52,14 @@ export const constantRouterMap = [
},
hidden: true
},
{
path: '/product/details/:id',
meta: { title: '供应商黄页', noCache: true },
component: (resolve) => {
return require(['@/views/homepage/product/details'], resolve)
},
hidden: true
},
{
path: '/supplier',
meta: { title: '优质供应商', noCache: true },
......
src/views/backstage/productMgt/productTabulate/add.vue
View file @ a1f59403
......@@ -60,10 +60,10 @@
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">产品名</div>
<div class="grid-label">批号</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeProductName" placeholder="产品名" />
<el-input v-model="formData.attributeBatchNumber" placeholder="批号" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">额定功率</div>
......@@ -132,15 +132,9 @@
<el-col :span="5" class="grid-content">
<div class="grid-label">适用场景</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-col :span="19" class="grid-content">
<el-input v-model="formData.attributeApplicableScenarios" placeholder="适用场景" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">批号</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeBatchNumber" placeholder="批号" />
</el-col>
</el-row>
</div>
</el-form-item>
......
src/views/backstage/productMgt/productTabulate/edit.vue
View file @ a1f59403
......@@ -60,10 +60,10 @@
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">产品名</div>
<div class="grid-label">批号</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeProductName" placeholder="产品名" />
<el-input v-model="formData.attributeBatchNumber" placeholder="批号" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">额定功率</div>
......@@ -132,15 +132,9 @@
<el-col :span="5" class="grid-content">
<div class="grid-label">适用场景</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-col :span="19" class="grid-content">
<el-input v-model="formData.attributeApplicableScenarios" placeholder="适用场景" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">批号</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeBatchNumber" placeholder="批号" />
</el-col>
</el-row>
</div>
</el-form-item>
......
src/views/backstage/productMgt/productTabulate/view.vue
View file @ a1f59403
......@@ -61,10 +61,10 @@
</el-row>
<el-row>
<el-col :span="5" class="grid-content">
<div class="grid-label">产品名</div>
<div class="grid-label">批号</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeProductName" disabled placeholder="产品名" />
<el-input v-model="formData.attributeBatchNumber" disabled placeholder="批号" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">额定功率</div>
......@@ -133,15 +133,9 @@
<el-col :span="5" class="grid-content">
<div class="grid-label">适用场景</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-col :span="19" class="grid-content">
<el-input v-model="formData.attributeApplicableScenarios" disabled placeholder="适用场景" />
</el-col>
<el-col :span="5" class="grid-content">
<div class="grid-label">批号</div>
</el-col>
<el-col :span="7" class="grid-content">
<el-input v-model="formData.attributeBatchNumber" disabled placeholder="批号" />
</el-col>
</el-row>
</div>
</el-form-item>
......@@ -294,7 +288,7 @@ export default {
attributeProducingArea: '', // 属性-产地
attributeNumber: '', // 属性-数量
attributeColor: '', // 属性-颜色
attributeApplicableScenarios: '', // 属性-品牌
attributeApplicableScenarios: '', // 属性-适用场景
attributeBatchNumber: '', // 属性-批号
rank: '1' // 产品品级
},
......
src/views/homepage/index.vue
View file @ a1f59403
......@@ -34,7 +34,7 @@
</el-image>
<el-row>
<el-col :span="21">
<div class="title touch" :title="item.title" @click="goToDetails(item, 'product')">{{ item.title }}</div>
<div class="title touch" :title="item.title" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
</el-col>
<el-col :span="3">
<img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" title="点击取消收藏" @click="storeShowcase(item, 'product')">
......@@ -121,7 +121,7 @@
<ul class="contact-list">
<li v-for="(item, index) in topSuppliers" :key="'ts_'+index" class="contact-item">
<img src="@/assets/home_images/to_like_b.png">
<span class="touch" @click="goToDetails(item, 'supplier')">{{ item.name }}</span>
<span class="touch" @click="goToDetails(item, '/supplier/details')">{{ item.name }}</span>
</li>
</ul>
</div></el-col>
......@@ -130,7 +130,7 @@
<ul class="contact-list">
<li v-for="(item, index) in topProducts" :key="'tp_'+index" class="contact-item">
<img src="@/assets/home_images/to_like_a.png">
<span class="touch" @click="goToDetails(item, 'product')">{{ item.name }}</span>
<span class="touch" @click="goToDetails(item, '/product/details')">{{ item.name }}</span>
</li>
</ul>
</div></el-col>
......
src/views/homepage/product/details.vue 0 → 100644
View file @ a1f59403
<template>
<div class="page-body">
<div class="head-box">
<div class="head-box-top">
<div class="top-call" />
<div class="top-call"><img src="@/assets/home_images/gemho_logo_b.png"></div>
<div class="top-call"><title-menus ref="titleMenus" menu-index="1" style="padding-top: 15px" /></div>
<div class="top-call"><user-login ref="userLogin" /></div>
<div class="top-call"><language-setting ref="languageSetting" /></div>
</div>
</div>
<div class="content-box">
<div style="width: 88%;padding-left: 9%;">
<div class="showcase">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: this.$store.state.app.currentMenu.url }">{{ this.$store.state.app.currentMenu.name||'' }}</el-breadcrumb-item>
<el-breadcrumb-item>{{ projectObj.productName }}</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="info-card" style="margin-top: 20px">
<el-row :gutter="50">
<el-col :span="12">
<el-carousel ref="carousel" :interval="5000" trigger="click" arrow="always" height="350px" @change="changeCarouselItem">
<el-carousel-item v-for="(item, index) in projectObj.productPicList" :key="'pic_'+index">
<el-image
fit="contain"
:src="item?imgSrcStart+'/img'+item:defaultImgProduct"
:preview-src-list="[item?imgSrcStart+'/img'+item:defaultImgProduct]"
style="width: 100%;height: 100%;padding: 5px"
/>
</el-carousel-item>
</el-carousel>
</el-col>
<el-col :span="12" style="padding: 10px 0">
<div class="info-card-title-s">{{ projectObj.productName }}</div>
<div class="info-card-row-flax"><div class="info-card-label">价格区间：</div><div class="info-card-label" style="color: #F00505">￥{{ projectObj.minPrice||'0' }} -- ￥{{ projectObj.maxPrice||'不限' }}</div></div>
<div class="info-card-row-flax">
<div class="info-card-label">产品特点：</div>
<div style="width: 600px;height: 84px;">
<div v-for="(item,index) in projectObj.productFeatureList" :key="'pf_'+index" class="info-card-tag">{{ item }}</div>
</div>
</div>
<div style="margin-top: 16px;padding:10px 0;color:#347BFE;"><span class="underline touch">该产品涉及到的解决方案与服务</span> ></div>
<div style="padding:10px 0;color:#347BFE;font-size:14px;"><span style="color:#999">供应商：</span><span class="underline touch" title="点击跳转至该供应商黄页..." @click="goToDetails({'id':projectObj.customerId}, '/supplier/details')">{{ projectObj.enterpriseName }}</span> ></div>
<div style="margin-top: 10px;padding:10px 0;color:#999;font-size:14px;">物流：需在下单后与卖家协商</div>
</el-col>
</el-row>
</div>
<el-row :gutter="50">
<el-col :span="12">
<div v-for="(item, index) in projectObj.productPicList" :key="'pic_m_'+index" class="img-cell">
<el-image
class="image touch"
:class="carouseIndex===index?'active':''"
:src="item?imgSrcStart+'/img'+item:defaultImgProduct"
@click="changeImage(index)"
/>
</div>
</el-col>
<el-col :span="12">
<div class="line-btn" style="padding-top: 45px;">
<div class="btn-o" style="padding: 10px;width: 74%" @click="inquiry(projectObj, 'product')">询 价</div>
</div>
</el-col>
</el-row>
<el-divider />
<div class="info-card-title" style="margin-bottom: 14px"><div class="title-li" /><span>产品属性</span></div>
<el-row :gutter="30">
<el-col :span="2"><div class="attribute-label">品牌</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeBrand||'-' }}</div></el-col>
<el-col :span="2"><div class="attribute-label">消耗电流</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeConsumptionCurrent||'-' }}</div></el-col>
<el-col :span="2"><div class="attribute-label">批号</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeBatchNumber||'-' }}</div></el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="2"><div class="attribute-label">额定功率</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeRatedPower||'-' }}</div></el-col>
<el-col :span="2"><div class="attribute-label">型号</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeModel||'-' }}</div></el-col>
<el-col :span="2"><div class="attribute-label">反应时间</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeReactionTime||'-' }}</div></el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="2"><div class="attribute-label">工作电压</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeWorkingVoltage||'-' }}</div></el-col>
<el-col :span="2"><div class="attribute-label">质量保证</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeQualityAssurance||'-' }}</div></el-col>
<el-col :span="2"><div class="attribute-label">封装</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeEncapsulation||'-' }}</div></el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="2"><div class="attribute-label">产地</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeProducingArea||'-' }}</div></el-col>
<el-col :span="2"><div class="attribute-label">数量</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeNumber||'-' }}</div></el-col>
<el-col :span="2"><div class="attribute-label">颜色</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeColor||'-' }}</div></el-col>
</el-row>
<el-row :gutter="30">
<el-col :span="2"><div class="attribute-label">适用场景</div></el-col>
<el-col :span="6"><div class="attribute-value">{{ projectObj.attributeApplicableScenarios||'-' }}</div></el-col>
<el-col :span="2"><div class="attribute-label" /></el-col>
<el-col :span="6"><div class="attribute-value" /></el-col>
<el-col :span="2"><div class="attribute-label" /></el-col>
<el-col :span="6"><div class="attribute-value" /></el-col>
</el-row>
<el-divider />
<div class="info-card-title"><div class="title-li" /><span>产品描述</span></div>
<div style="min-height: 30vh" v-html="projectObj.productDescribe" />
<div class="footnote-text">
<div class="footnote-title">价格说明：</div>
<p>价格:商品仅展示价格区间，具体的成交价格可能因商品参加活动等情况发生变化，也可能随着购买数量不同或所选规格不同而发生变化，如用户与商家线下达成协议，以线下协议的结算价格为准。特别提示:商品的具体价格以您与商家联系后协商达成的实际成交价格为准;建议购买前先咨询商家。</p>
</div>
<div class="line-btn" style="padding-top: 45px;">
<div class="btn-o" style="padding: 10px;width: 420px" @click="inquiry(projectObj, 'product')">询 价</div>
</div>
<div style="margin-bottom: 20px;padding:20px 0;color:#347BFE;font-size:14px;text-align: center;"><span style="color:#999">供应商：</span><span class="underline touch" title="点击跳转至该供应商黄页..." @click="goToDetails({'id':projectObj.customerId}, '/supplier/details')">{{ projectObj.enterpriseName }}</span> ></div>
</div>
</div>
<home-footer ref="homeFooter" />
<inquiry-view ref="inquiryView" />
<el-backtop />
</div>
</template>
<script>
import default_product from '@/assets/home_images/default_product.png'
import titleMenus from '../components/titleMenusV2'
import userLogin from '../components/userLoginV2'
import languageSetting from '../components/languageSettingV2'
import homeFooter from '../components/homeFooter'
import inquiryView from '../components/inquiryView'
export default {
components: { titleMenus, userLogin, languageSetting, homeFooter, inquiryView },
dicts: [],
data() {
return {
defaultImgProduct: default_product,
imgSrcStart: process.env.VUE_APP_BASE_API,
carouseIndex: 0,
projectObj: {
productId: null,
customerId: null, // 供应商id
enterpriseName: '佛山英沃传感科技有限公司 ', // 供应商名称
productName: 'VIVO1020热能工程压力变送器', // 产品名称
productType: '1', // 产品大类
productSubType: null, // 产品小类
minPrice: '100', // 价格区间-小
maxPrice: '400', // 价格区间-大
productFeature: null, // 产品特点
productFeatureList: ['精准选型', '操作简单', '测量精准', '性能可靠', '敬酒耐用', '成本低廉 '],
productPic: '', // 产品图片
productPicList: ['', '', '', '', ''],
productDescribe: '', // 产品描述（富文本）
notes: null, // 其他说明
letterOfCommitment: false, // 交易保障承诺
attributeBrand: '鸿捷', // 属性-品牌
attributeConsumptionCurrent: '消耗电流', // 属性-消耗电流
attributeProductName: '', // 属性-产品名称
attributeRatedPower: '额定功率', // 属性-额定功率
attributeModel: '型号', // 属性-型号
attributeReactionTime: '反应时间', // 属性-反应时间
attributeWorkingVoltage: '工作电压', // 属性-工作电压
attributeEncapsulation: '封装', // 属性-封装
attributeQualityAssurance: '质量保证', // 属性-质量保证
attributeProducingArea: '产地', // 属性-产地
attributeNumber: '数量', // 属性-数量
attributeColor: '颜色', // 属性-颜色
attributeApplicableScenarios: '适用场景', // 属性-适用场景
attributeBatchNumber: '批号', // 属性-批号
rank: '1' // 产品品级
},
throttle: null, // 节流器
throttleTime: 300
}
},
mounted() {
this.$nextTick(() => {
})
},
methods: {
onDictReady(dict) {},
changeCarouselItem(index) {
this.carouseIndex = index
},
changeImage(index) {
this.$refs.carousel.setActiveItem(index)
},
// 点击询价
inquiry(item, type) {
console.log(item, type)
this.$refs.inquiryView.initView(item.id, type)
},
// 跳转到详情
goToDetails(item, path) {
if (item) {
this.$router.push({ path: `${path}/${item.id || 123}` })
} else {
this.$router.push({ path: `${path}` })
}
},
goTop() {
document.body.scrollTop = 0
document.documentElement.scrollTop = 0
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-carousel__item:nth-child(n) {background-color: #eee;}
.el-divider {
background-color: #1961c5;
opacity: 0.2;
}
.touch {
cursor:pointer;
}
.underline {
text-decoration: underline;
text-underline-offset: 4px;
}
.clear {
clear: both
}
.ellipsis {
// 多行溢出省略号
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 6;
text-overflow: ellipsis;
}
.head-box {
width: 100vw;
top: 0;
position: fixed;
background: none repeat scroll 0 0 white;
z-index: 999;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
.head-box-top {
display: flex;
justify-content: space-evenly;
align-items: center;
.top-call {
height: 80px;
padding-top: 15px;
}
}
}
.content-box {
min-height: 70vh;
margin-top: 94px;
font-family: Source Han Sans CN;
user-select: none;
.box-block {
width: 100%;
margin: 12px 0;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 10px;
.box-title {
padding-top: 20px;
padding-left: 10px;
font-size: 22px;
font-weight: bold;
}
.box-title:hover {
color: #0457C7
}
.content {
height: 200px;
padding: 4px 30px 20px 10px;
font-size: 16px;
font-weight: 600;
line-height: 32px;
color: #666;
}
}
.box-card {
display: inline-block;
position: relative;
margin: 12px;
padding: 10px 0;
width: 350px;
background: #FFFFFF;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 10px;
.line-text {
width: 100%;
text-align: center;
padding: 5px;
font-size: 18px;
font-weight: bolder;
opacity: 0.85;
}
.line-text:hover {
opacity: 1;
}
.float-title {
width: 344px;
position: absolute;
padding: 5px;
top: 200px;
left: 2px;
text-align: center;
font-weight: 600;
color: #fff;
background: rgba(0,0,0,0.6);
opacity: 0.9;
}
.float-title:hover {
opacity: 1;
}
.title {
width: 305px;
padding: 2px 20px;
font-size: 18px;
color: #333333;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.title:hover {
font-weight: 600;
}
.subTitle {
width: 260px;
padding: 2px 20px;
font-size: 15px;
color: #1961C5;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
.area {
padding: 2px 0;
font-size: 17px;
color: #666666;
}
.date {
padding: 2px 10px;
font-size: 17px;
color: #999999;
}
.stamp {
border-style: none;
position: absolute;
z-index: 99;
}
}
.more {
font-size: 18px;
font-weight: 600;
color: #0457C7;
opacity: 0.7;
}
.more:hover {
opacity: 1;
}
.line-title {
padding: 6px 0;
position: relative;
border-bottom: 3px solid #0457C7;
font-size: 24px;
color: #333333;
.title-point {
width: 8px;
height: 21px;
position: absolute;
top: 9px;
background: #0457c7;
}
.title-text {
padding-left: 14px;
font-weight: 600;
}
.title-line{
width: 100%;
position: absolute;
bottom: -7px;
border-bottom: 2px solid #1961C5;
opacity: 0.35
}
}
.info-card {
display: inline-block;
position: relative;
width: 100%;
height: 352px;
border: 1px solid rgba(0,0,0,0.12);
box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.12);
border-radius: 10px;
.info-card-title-s {
padding: 10px 0;
font-size: 22px;
font-weight: bold;
}
.info-card-row-flax {
display: flex;
padding: 10px 0;
.info-card-label {
color: #999;
font-size: 22px;
}
.info-card-tag {
display: inline-block;
font-size: 16px;
background: #EFF6FF;
color: #1961C5;
padding: 7px 28px;
margin-right: 20px;
margin-bottom: 16px;
}
}
.info-card-line {
color: #666;
font-size: 20px;
padding: 10px 0;
}
.info-card-textarea {
color: #333;
font-size: 15px;
line-height: 28px;
height: 270px;
overflow: auto;
}
.map-box {
width: 100%;
height: 160px;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
border: 1px solid rgba(0, 0, 0, 0.12);
}
h3 {
font-size: 22px;
margin: 0;
color: #1961C5;
}
}
.info-card-title {
position: relative;
font-size: 22px;
font-weight: bold;
margin: 0;
color: #1961C5;
.title-li {
position: absolute;
width: 8px;
height: 20px;
top: 3px;
background: #0457C7
}
span {
padding-left: 14px;
}
}
.img-cell {
padding: 2px;
width: 20%;
height: 132px;
display: inline-block;
.image {
width: 100%;
height: 100%;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.active {
border: 1px solid rgba(25, 97, 197, 0.9);
}
}
.footnote-text {
color: #333;
.footnote-title {
font-size: 18px;
}
p {
font-size: 14px;
line-height: 26px;
color: #666;
}
}
.attribute-label {
padding: 10px;
font-size: 17px;
color: #999;
}
.attribute-value {
padding: 10px;
font-size: 17px;
color: #333;
}
}
.line-btn {
display: flex;
justify-content: center;
font-family: Source Han Sans CN;
font-weight: 400;
.btn-o {
margin: 0 25px;
width: 360px;
padding: 6px 10px;
background: #F7601A;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-o:hover {
border: 1px solid rgba(30, 144, 255, 0.8);
color: #1482f0;
}
.btn-l {
margin: 0 25px;
width: 360px;
padding: 10px;
background: #1961C5;
box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
text-align: center;
border: 1px solid transparent;
font-size: 22px;
color: #FFFFFF;
cursor:pointer;
user-select: none;
}
.btn-l:hover {
border: 1px solid rgba(0,0,0,0.3);
color: #F7601A;
}
.btn-b {
margin: 0 10px;
width: 168px;
padding: 6px;
background: #EFF6FF;
border: 1px solid transparent;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
text-align: center;
font-size: 20px;
color: #1961C5;
cursor:pointer;
user-select: none;
}
.btn-b:hover {
border: 1px solid rgba(30, 144, 255, 0.9);
}
.active {
color: #FFFFFF;
font-weight: 400;
background: #1961C5;
}
}
</style>
src/views/homepage/product/index.vue
View file @ a1f59403
......@@ -93,7 +93,7 @@
</el-image>
<el-row>
<el-col :span="21">
<div class="title touch" :title="item.title" @click="goToDetails(item, 'product')">{{ item.title }}</div>
<div class="title touch" :title="item.title" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
</el-col>
<el-col :span="3">
<img v-if="item.isStore" class="touch" src="@/assets/home_images/to_like_h.png" title="点击取消收藏" @click="storeShowcase(item, 'product')">
......@@ -132,7 +132,7 @@
</div>
</el-col>
<el-col :span="12">
<div class="box-title touch" @click="goToDetails(item, 'project')">{{ item.title }}</div>
<div class="box-title touch" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
<div class="content ellipsis">{{ item.content }}</div>
<div class="line-btn" style="margin-top: 4px;justify-content: flex-end;">
<div class="btn-o" style="width: 140px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'project')">咨 询</div>
......@@ -149,7 +149,7 @@
:src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgSoftware"
style="width:358px;height: 240px;left: -4px;top: -3px"
/>
<div class="float-title touch" @click="goToDetails(item, 'software')">{{ item.title }}</div>
<div class="float-title touch" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
<div class="line-btn" style="margin-top: 4px">
<div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'software')">免费获取方案</div>
</div>
......@@ -164,7 +164,7 @@
:src="item.imgSrc?imgSrcStart+'/img'+item.imgSrc:defaultImgSoftware"
style="width:358px;height: 240px;left: -4px;top: -3px"
/>
<div class="line-text touch" @click="goToDetails(item, 'course')">{{ item.title }}</div>
<div class="line-text touch" @click="goToDetails(item, '/product/details')">{{ item.title }}</div>
<div style="width: 100%;text-align: center;padding: 2px;color: #333">{{ item.subTitle }}</div>
<div class="line-btn" style="margin-top: 14px">
<div class="btn-o" style="width: 150px;border-radius: 10px;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);font-size:20px;" @click="inquiry(item, 'course')">课程定制</div>
......@@ -379,8 +379,12 @@ export default {
console.log(item, type)
},
// 跳转到详情
goToDetails(item, type) {
console.log(item, type)
goToDetails(item, path) {
if (item) {
this.$router.push({ path: `${path}/${item.id || 123}` })
} else {
this.$router.push({ path: `${path}` })
}
},
// 点击更多
moreTo(type) {
......
src/views/homepage/supplier/index.vue
View file @ a1f59403
......@@ -99,7 +99,7 @@
</div>
<div v-for="(p,i) in item.products" :key="'p_'+index+'_'+i" class="product_card">
<el-image :src="p.imgSrc?imgSrcStart+'/img'+p.imgSrc:defaultImgProduct" style="width:240px;height: 220px;border-radius: 10px;" />
<div class="product_title touch ellipsis" :title="p.name">{{ p.name }}</div>
<div class="product_title touch ellipsis" :title="p.name" @click="goToDetails(p, '/product/details')">{{ p.name }}</div>
</div>
</div>
<div class="pagination">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment