product-detailed.vue

<!--
 * @Descrip: 产品明细
 * @Author: your name
 * @Date: 2019-10-15 14:30:00
 * @LastEditTime: 2019-12-16 18:33:42
 * @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>
    <div v-if="slide" class="tab-style">
      <div :class="{'done':num === 0,'undone':num !== 0}" @click="tabCheck(0)"><img :src="num === 0?baseInfoImg:unBaseInfo"><span>基本信息</span></div>
      <div :class="{'done':num === 1,'undone':num !== 1}" @click="tabCheck(1)"><img :src="num === 1?detail:unDetail"><span>商品详情</span></div>
      <div :class="{'done':num === 2,'undone':num !== 2}" @click="tabCheck(2)"><img :src="num === 2?config:unConfig"><span>产品配置</span></div>
    </div>

    <!-- 基本信息 -->
    <!-- <h-content v-swipeup="(e)=>vueTouch('上滑',e)" v-swipedown="(e)=>vueTouch('下滑',e)" class="hcontent"> -->
    <scroll
      v-swipeup="(e)=>vueTouch('上滑',e)" v-swipedown="(e)=>vueTouch('下滑',e)" ref="scrolls" :listenScroll="true"
      class="scrolls" @scroll="startScroll">
      <!-- 基本信息 -->
      <div id="baseInfo" class="base">
        <swipe :interval="5000" class="hls-swipe">
          <swipe-item v-for="(item,index) in picLists" :key="index" class="hls-swipe">
            <img :src="item.url" alt="">
          </swipe-item>
        </swipe>
        <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>

      <!-- 商品详情 -->
      <div id="prodetail" ref="detail" class="pro-details prodetail">
        <div class="equipment-list">商品详情</div>

        <div v-for="item in picLists" :key="item.product_attachment_id" class="proPic">
          <img :src="item.url" alt="">
        </div>

      </div>
      <!-- 产品配置 -->
      <div id="procfg" class="pro-details procnf">
        <div class="equipment-list">产品配置</div>
        <div class="table-wrap" v-html="confgInfo.product_properties"/>
      </div>
    </scroll>
    <!-- </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="">收藏</tab-button>
    </bottom-tab>
    <div v-if="collect_flag" class="show-collect">
      <img src="@/assets/productQuery/collectImg.png" alt="">
      <p>{{ show_text }}</p>
    </div>
  </h-view>
</template>

<script>
import Tab from './tab'
import baseInfoImg from '@/assets/productQuery/baseInfo.png'
import unBaseInfo from '@/assets/productQuery/unBaseInfo.png'
import detail from '@/assets/productQuery/detail.png'
import unDetail from '@/assets/productQuery/unDetail.png'
import config from '@/assets/productQuery/config.png'
import unConfig from '@/assets/productQuery/unConfig.png'
export default {
  name: 'ProDetailed',
  components: {
    Tab,
  },
  data () {
    return {
      num: 0,
      picLists: [], // 图片列表
      baseInfo: {}, // 基本信息
      show_text: '',
      confgInfo: {}, // 配置信息
      detailInfo: {}, // 详情
      bgc_flag: true, // 背景图切换
      collect_flag: false,
      slide: false,
      baseInfoImg: baseInfoImg,
      unBaseInfo: unBaseInfo,
      detail: detail,
      unDetail: unDetail,
      config: config,
      unConfig: unConfig,
      height: 0,
      src: '',
    }
  },
  computed: {},
  watch: {

  },
  beforeRouteEnter (to, from, next) {
    // debugger
    if (from.name === 'ProductList' || from.name === 'MyProductList' || from.name === 'HomePage' || from.name === 'EntityList') {
      next(vm => {
        vm.baseInfo = {}
        vm.confgInfo = {}
        vm.detailInfo = {}
        vm.picLists = []
        vm.num = 0
        vm.slide = false
        vm.product_id = vm.$route.params.product_id
        vm.bp_id = vm.$route.params.bp_id
        vm.baseMsg()
        vm.detailMsg()
        vm.confgMsg()
      })
    }
    next()
  },
  created () {

  },
  activated () {
    if (window.localStorage.getItem('collect_status') === 'Y') {
      this.src = require('@/assets/productQuery/coll-success.png')
    } else {
      this.src = require('@/assets/productQuery/collect.png')
    }
  },
  methods: {
    startScroll () {
      this.slide = true
    },
    // tab切换
    tabCheck (num) {
      let scrollContent = document.getElementsByClassName('scrollContent')[0]
      if (num === 0) {
        this.num = 0
        this.$refs.scrolls.scrollToElement(document.getElementsByClassName('base')[0])
      } else if (num === 1) {
        this.num = 1
        this.$refs.scrolls.scrollToElement(document.getElementsByClassName('prodetail')[0])
      } else {
        this.num = 2
        this.$refs.scrolls.scrollToElement(document.getElementsByClassName('procnf')[0])
      }
    },
    vueTouch: function (s, e) {
      let clientHeight = document.body.clientHeight // 屏幕可视高度
      let procnfGather = document.getElementsByClassName('procnf')[0].getBoundingClientRect() // 配置信息元素集合
      let detailGather = document.getElementsByClassName('prodetail')[0].getBoundingClientRect() // 详情信息元素集合
      let baseGather = document.getElementsByClassName('base')[0].getBoundingClientRect() // 基本信息元素集合
      if (clientHeight - procnfGather.top >= procnfGather.height) {
        this.num = 2
      } else if (detailGather.top <= clientHeight / 2) {
        this.num = 1
      } else if (-(baseGather.top) <= baseGather.height / 2 || detailGather.top > clientHeight / 2) {
        this.num = 0
      }
    },
    // 收藏
    collect () {
      if (window.localStorage.getItem('collect_status') === 'Y') {
        let vm = this
        let url = $config.basePath + 'delete_collection'
        let param = {
          master: {
            product_id: vm.product_id,
            user_phone: window.localStorage.user_phone,
            bp_id: vm.bp_id,
          },
        }
        vm.hlsPopup.showLoading('请稍候')
        vm.$post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            window.localStorage.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
        let vm = this
        let url = $config.basePath + 'save_collection'
        let param = {
          master: {
            product_id: vm.product_id,
            user_phone: window.localStorage.user_phone,
            bp_id: vm.bp_id,
          },
        }
        vm.hlsPopup.showLoading('请稍候')
        vm.$post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          if (res.result === 'S') {
            window.localStorage.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,
        bp_id: vm.bp_id,
        user_phone: window.localStorage.user_phone,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        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.hlsPopup.showLoading('数据加载中')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.detailInfo = res.info
          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
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // 配置查询
    confgMsg () {
      let vm = this
      let url = $config.basePath + 'prd_product_conf'
      let param = {
        bp_id: vm.bp_id,
        product_id: vm.$route.params.product_id,
      }
      vm.hlsPopup.showLoading('数据加载中')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        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,
          division: this.baseInfo.division,
          bp_id: this.baseInfo.bp_id,
        },
      })
    },
  },
}
</script>
<style lang='less' scoped>
  #detailed {
    .scrollContent {
      padding-bottom: 90px;
    }
    .hls-swipe {
      background: #fff;
      img {
        width: 100%;
      }
    }
  .tab-style{
    display:flex;
    justify-content: center;
    padding-top:12px;
    padding-bottom: 8px;
    align-items: center;
    background-color: #fff;
    box-shadow:0 2px 3px 0  rgba(220,220,221,0.50);

    div{
      position: relative;
      height: 32px;
      width: 172px;
      border-radius:16px;
      border-radius: 16px;
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      letter-spacing: 0.43px;
      margin:  0 4px;
      line-height: 32px;
      display: flex;
      flex-direction: row;
      justify-content: center
    }
    .undone{
      background: rgba(220,220,221,0.26);
      color: #383F45;
    }
    .done{
      background: rgba(0,70,156,0.10);
      color: #00469C;
    }

    img{
      height: 16px;
      width: 16px;
      // display: block;
      // float: left;
       // margin: 6px 0 0 43px;
       margin-top: 8px;
       margin-right: 4px;
    }

    span{
      // position: absolute;
      left:70px;
    }
  }
    .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;
          padding:0px 4px;
          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;
         padding: 0 4px;
        }
      }
      .pro-name {
        font-family: PingFangSC-Semibold;
        font-size: 18px;
        color: #232323;
        letter-spacing: 0;
        font-weight: 600;
        margin-top: 25px;
      }
      .pro-price {
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        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;
        }
      }
      .agent {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        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;
        }
      }
    }
    .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;
      }
}
.procnf {
        margin-bottom: 70px
      }
    .footer-button {
      .butt {
        width: 48%;
        margin-left: 3px;

        border-radius: 4px;
      }
      .butt:nth-of-type(2) {
        border: 1px solid #FDB62F;
      }

      img {
        height: 19px;
        width: 19px;
        //margin-top: 2px;
        margin-right: 3px;
      }

      .collect {
        color: #FDB62F;
      }
    }

    .bgcolor {
      background: @headerColor;
      border: 1px solid @headerColor;
      border-radius: 4px;
      font-family: PingFangSC-Semibold;
      color: #FFFFFF;
    }

    .show-collect {
      width: 260px;
      height: 109px;
      opacity: 0.7;
      background: #383F45;
      border-radius: 4px;
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      // justify-content: center;

      p {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #FFFFFF;
        height: 22px;
        line-height: 22px;
        margin-top: 12px;
      }

      img {
        width: 35px;
        height: 35px;
        margin-top: 20px;
      }
    }

    .proPic {
      width: 100%;
      padding: 0 24px;
      img {
        width: 100%
      }
    }
    .table-wrap{
      padding: 0 24px;
      table {
        background-color: #fff !important;
        td{
          border:1px solid #ccc;
          text-align: center;
          vertical-align: middle;
          span{
            color:#000 !important;
          }
        }
      }
    }
  }
</style>