<!-- * @Descrip: 产品明细 * @Author: your name * @Date: 2019-10-15 14:30:00 * @LastEditTime: 2019-10-23 20:06:47 * @LastEditors: Please set LastEditors --> <template> <h-view id="detailed" class="public-style" title="产品查询"> <h-header :proportion="[5,1,1]" class="bar-custom"> <div slot="left" class="h-header-btn"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <span>产品明细</span> </div> </h-header> <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.registered_place }} </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"> <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="table-wrap" v-html="confgInfo.product_properties"/> </list-item> </h-content> <bottom-tab class="footer-button"> <tab-button :class="{bgcolor: bgc_flag}" class="butt" @click.native="goTrial(baseInfo.plan_price,baseInfo.price_date_to)"><img src="@/assets/productQuery/trial.png" alt=""> 试算 </tab-button> <tab-button class="collect butt" @click.native="collect"><img :src="src" alt="">{{ text }}</tab-button> </bottom-tab> <div v-if="collect_flag" class="show-collect"> <img src="@/assets/productQuery/success.png" alt=""> <p>{{ show_text }}</p> </div> </h-view> </template> <script> import Tab from './tab' export default { name: 'ProDetailed', components: { Tab, }, data () { return { text: '', tabNum: 0, picLists: [], baseInfo: {}, show_text: '', confgInfo: {}, detailInfo: {}, bgc_flag: true, collect_flag: false, } }, computed: {}, watch: {}, beforeRouteEnter (to, from, next) { if (from.name === 'ProductList' || from.name === 'MyProductList') { next(vm => { vm.tabNum = 0 vm.product_id = vm.$route.params.product_id vm.baseMsg() vm.detailMsg() vm.confgMsg() }) } next() }, created () { }, activated () { console.log('collect........', window.sessionStorage.getItem('collect_status')) if (window.sessionStorage.getItem('collect_status') === 'Y') { this.src = require('@/assets/productQuery/coll-success.png') this.text = '取消收藏' } else { this.src = require('@/assets/productQuery/collect.png') this.text = '收藏' } }, methods: { getTabNum (i) { console.log(i) this.tabNum = i }, // 收藏 collect () { console.log('collect', window.sessionStorage.getItem('collect_status')) if (window.sessionStorage.getItem('collect_status') === 'Y') { let vm = this // this.hlsPopup.showConfirm({ // title: '提示', // content: '您确认取消收藏吗?', // onConfirm: data => { // console.log(data) // if (data) { let url = $config.basePath + 'delete_collection' let param = { master: { product_id: vm.product_id, user_phone: window.localStorage.user_phone, }, } vm.$post(url, param).then(function (res) { console.log('取消收藏。。。。。。。。', res) if (res.result === 'S') { window.sessionStorage.setItem('collect_status', 'N') vm.show_text = '取消成功' vm.collect_flag = true vm.src = require('@/assets/productQuery/collect.png') setTimeout(() => { vm.text = '收藏' vm.collect_flag = false }, 1500) // } // }) // } } }) } else { this.show_text = '收藏成功' this.collect_flag = true console.log(this.collect_flag) let vm = this let url = $config.basePath + 'save_collection' let param = { master: { product_id: vm.product_id, user_phone: window.localStorage.user_phone, }, } vm.$post(url, param).then(function (res) { console.log('收藏', res) if (res.result === 'S') { window.sessionStorage.setItem('collect_status', 'Y') vm.src = require('@/assets/productQuery/coll-success.png') setTimeout(() => { vm.text = '取消收藏' vm.collect_flag = false }, 1500) } else { hlsPopup.showLongCenter(res.message) } }) } }, // 基本信息查询 baseMsg () { let vm = this let url = $config.basePath + 'prd_product_info' let param = { product_id: vm.$route.params.product_id, } vm.$post(url, param).then(function (res) { console.log('基本信息', res) if (res.result === 'S') { vm.baseInfo = res.info } else { hlsPopup.showLongCenter(res.message) } }) }, // 详情查询 detailMsg () { let vm = this let url = $config.basePath + 'prd_product_detial' let param = { product_id: vm.$route.params.product_id, } vm.$post(url, param).then(function (res) { console.log('产品详情', res) if (res.result === 'S') { vm.detailInfo = res.info // vm.picLists = res.lists res.lists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) vm.picLists = res.lists console.log('。。。。。。。。。。。。。。。', res.lists) } else { hlsPopup.showLongCenter(res.message) } }) }, // 配置查询 confgMsg () { let vm = this let url = $config.basePath + 'prd_product_conf' let param = { product_id: vm.$route.params.product_id, } vm.$post(url, param).then(function (res) { console.log('配置信息', res) if (res.result === 'S') { vm.confgInfo = res.info } else { hlsPopup.showLongCenter(res.message) } }) }, // 试算price:产品参考价,date:有效日期 goTrial (price, date) { this.$router.push({ name: 'FinancingTrial', params: { plan_price: price, price_date_to: date, }, }) }, }, } </script> <style lang='less'> #detailed { .h-header-btn { img { width: 16px; height: 16px; margin-left: 4px; } span { font-family: PingFangSC-Semibold; margin-left: 16px; font-size: 17px; letter-spacing: 0.61px; line-height: 24px; } } .second-part { .font-color { font-family: PingFangSC-Regular; font-size: 14px; color: #656464; letter-spacing: 0; } span { font-family: PingFangSC-Regular; font-size: 14px; color: rgba(56, 63, 69, 0.60); letter-spacing: 0; } } .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; } .footer-button { .butt { width: 48%; margin-left: 3px; border: 1px solid #00469C; border-radius: 4px; } img { height: 19px; width: 19px; //margin-top: 2px; margin-right: 3px; } .collect { color: #00469C; } } .bgcolor { background: #00469C; border: 1px solid #00469C; border-radius: 4px; font-family: PingFangSC-Semibold; color: #FFFFFF; } .show-collect { width: 240px; height: 100px; opacity: 0.7; background: #383F45; border-radius: 4px; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; display: flex; flex-direction: row; align-items: center; justify-content: center; p { font-family: PingFangSC-Semibold; font-size: 16px; color: #FFFFFF; margin-left: 8px; } img { width: 16px; height: 16px; margin-left: -4px; } } .proPic { width: 100%; img { width: 94%; margin-left: 10px } } .table-wrap{ table { margin: 10px; background-color: #fff !important; td{ border:1px solid #ccc; text-align: center; vertical-align: middle; span{ color:#000 !important; } } } } } </style>