Skip to content

H
hls-xcmg-vue-app
Commit ad570da1 authored by 786817560's avatar 786817560
Browse files
Options

'产品查询新版本'

parent 5d713527
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 127 deletions
src/pages/productQuery/product-detailed.vue
View file @ ad570da1
......@@ -2,7 +2,7 @@
* @Descrip: 产品明细
* @Author: your name
* @Date: 2019-10-15 14:30:00
* @LastEditTime: 2019-10-29 09:40:27
* @LastEditTime: 2019-11-01 16:32:46
* @LastEditors: Please set LastEditors
-->
<template>
......@@ -13,88 +13,54 @@
<span>产品明细</span>
</div>
</h-header>
<Tab :tabNums="tabNum" @getTabNum="getTabNum"/>
<!-- <Tab :tabNums="tabNum" @getTabNum="getTabNum"/> -->
<!-- 基本信息 -->
<h-content v-if="tabNum === 0">
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">经销商</div>
<span slot="content"> {{ baseInfo.agent_bp_name }} </span>
</item>
<item>
<div slot="name" class="font-color">主机厂</div>
<span slot="content"> {{ baseInfo.factory_bp_name }} </span>
</item>
</list-item>
<div class="equipment-list">经销商信息</div>
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">经销商所在省份</div>
<span slot="content"> {{ baseInfo.province_name }} </span>
</item>
<item>
<div slot="name" class="font-color">经销商地址</div>
<span slot="content"> {{ baseInfo.business_address }} </span>
</item>
<item>
<div slot="name" class="font-color">电话号码</div>
<span slot="content"> {{ baseInfo.phone }} </span>
</item>
</list-item>
<div class="equipment-list">产品信息</div>
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">参数项</div>
<span slot="content"> {{ baseInfo.product_code }} </span>
</item>
<item>
<div slot="name" class="font-color">产品线</div>
<span slot="content"> {{ baseInfo.division_n }} </span>
</item>
<item>
<div slot="name" class="font-color">产品名称</div>
<span slot="content"> {{ baseInfo.product_name }} </span>
</item>
<item>
<div slot="name" class="font-color">产品参考价</div>
<span slot="content"> {{ baseInfo.plan_price }} </span>
</item>
<item>
<div slot="name" class="font-color">价格有效期</div>
<span slot="content"> {{ baseInfo.price_date_to | dateFormat }} </span>
</item>
</list-item>
</h-content>
<!-- 商品详情 -->
<h-content v-if="tabNum === 1">
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">经销商</div>
<span slot="content"> {{ detailInfo.agent_bp_name }} </span>
</item>
<item>
<div slot="name" class="font-color">主机厂</div>
<span slot="content"> {{ detailInfo.factory_bp_name }} </span>
</item>
</list-item>
<div v-for="item in picLists" :key="item.product_attachment_id" class="proPic">
<h-content @touchmove="moves" @mousemove="mousemove">
<img :src="picLists[0].url" alt="" class="detail-pic">
<div class="base-content">
<div class="top-code">
<div>参数项 &nbsp;{{ baseInfo.product_code }}</div>
<div>{{ baseInfo.division_n }}</div>
</div>
<div class="pro-name">{{ baseInfo.product_name }}</div>
<div class="pro-price">
<p>参考价 <span class="prices">￥{{ baseInfo.plan_price | currency }}</span></p>
<p class="dates">价格有效期 &nbsp;{{ baseInfo.price_date_to | dateFormat }}</p>
</div>
<div class="agent">
<div class="items">
<img src="@/assets/productQuery/agent.png" alt="">
<p>{{ baseInfo.agent_bp_name }}</p>
</div>
<div class="items">
<img src="@/assets/productQuery/address.png" alt="">
<p>{{ baseInfo.business_address }} .{{ baseInfo.province_name }}</p>
</div>
<div class="items">
<img src="@/assets/productQuery/call.png" alt="">
<p>{{ baseInfo.phone }}</p>
</div>
<div class="items">
<img src="@/assets/productQuery/house.png" alt="">
<p>{{ baseInfo.factory_bp_name }}</p>
</div>
</div>
</div>
<!-- 商品详情 -->
<div class="pro-details">
<div class="equipment-list">商品详情</div>
<div v-for="item in picLists" :key="item.product_attachment_id" class="proPic">
<img :src="item.url" alt="">
</div>
<img :src="item.url" alt="">
</div>
</h-content>
<!-- 产品配置 -->
<h-content v-if="tabNum === 2">
<list-item :item-height="44" class="second-part">
<item>
<div slot="name" class="font-color">经销商</div>
<span slot="content"> {{ confgInfo.agent_bp_name }} </span>
</item>
<item>
<div slot="name" class="font-color">主机厂</div>
<span slot="content"> {{ confgInfo.factory_bp_name }} </span>
</item>
<!-- 产品配置 -->
<div class="pro-details">
<div class="equipment-list">产品配置</div>
<div class="table-wrap" v-html="confgInfo.product_properties"/>
</list-item>
</div>
</h-content>
<bottom-tab class="footer-button">
<tab-button
......@@ -161,6 +127,12 @@ export default {
},
methods:
{
moves () {
console.log('moves')
},
mousemove () {
console.log('mousemove')
},
getTabNum (i) {
console.log(i)
this.tabNum = i
......@@ -290,60 +262,122 @@ export default {
</script>
<style lang='less'>
#detailed {
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
.detail-pic {
width: 100%;
}
.base-content {
width: 100%;
// height: 226px;
background: #fff;
padding: 10px 24px 0 24px;
margin-bottom: 10px;
position: relative;
.top-code {
display: flex;
flex-direction: row;
div {
font-family: PingFangSC-Semibold;
height: 24px;
line-height: 24px;
font-size: 13px;
color: #FDB62F;
background: rgba(253, 182, 47, 0.25);
border-radius: 2px;
text-align: center;
}
div:nth-of-type(1) {
width: 101px;
}
div:nth-of-type(2) {
margin-left: 16px;
width: 73px;
}
}
span {
.pro-name {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
font-size: 18px;
color: #232323;
letter-spacing: 0;
font-weight: 600;
margin-top: 8px;
}
}
.second-part {
.font-color {
.pro-price {
width: 100%;
height: 50px;
line-height: 50px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
letter-spacing: 0;
color: #4B4A4B;
position: relative;
border-bottom: 1px solid #f3f3f7;
p {
position: absolute;
height: 50px;
line-height: 50px;
}
p:nth-of-type(1) {
left: 0;
}
.prices {
font-family: Verdana-Bold;
font-size: 18px;
color: #1D3FFF;
font-weight: 600
}
.dates {
font-family: PingFangSC-Regular;
font-size: 12px;
color: rgba(74,75,74,0.60);
position: absolute;
right: 0;
}
}
span {
.agent {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(56, 63, 69, 0.60);
letter-spacing: 0;
color: #4A4B4A;
padding-bottom: 4px;
.items {
// height: 20px;
display: flex;
flex-direction: row;
margin-top: 7px;
p {
// height: 20px;
line-height: 20px;
margin-left: 8px;
}
}
img {
width: 20px;
height: 20px;
}
}
}
.equipment-list {
height: 40px;
line-height: 40px;
background-color: #fafafa;
color: #00469c;
font-size: 15px;
margin-left: 16px;
position: relative;
margin-top: -10px;
}
.equipment-list::before {
content: "";
display: block;
width: 4px;
height: 20px;
background-color: #00469c;
position: absolute;
left: -15px;
top: 10px;
}
.pro-details {
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
.equipment-list {
height: 40px;
line-height: 40px;
background-color: #fff;
color: #00469c;
font-size: 15px;
margin-left: 16px;
position: relative;
}
.equipment-list::before {
content: "";
display: block;
width: 4px;
height: 20px;
background-color: #00469c;
position: absolute;
left: -15px;
top: 10px;
}
}
.footer-button {
.butt {
width: 48%;
......@@ -405,15 +439,14 @@ export default {
.proPic {
width: 100%;
padding: 0 24px;
img {
width: 94%;
margin-left: 10px
width: 100%
}
}
.table-wrap{
padding: 0 24px;
table {
margin: 10px;
background-color: #fff !important;
td{
border:1px solid #ccc;
......
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