Skip to content

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

Merge branch 'ren' into develop

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