product-list.vue 5.33 KB
Newer Older
786817560's avatar
786817560 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<!--
   * @Description: 产品展示列表
 * @Author: y/>e: 2019-10-16 14:39:07
 * @LastEditors: Please set LastEditors
 -->
<template>
  <h-view id="prolist" 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>
    <h-content>
      <div class="hinput">
        <div class="search-box">
          <input type="text" placeholder="请输入经销商/产品名称/参数项">
          <img src="@/assets/distributorSign/search.png" alt="">
        </div>
      </div>
786817560's avatar
786817560 committed
21
      <list-item v-for="item in lists" :key="item.product_id">
786817560's avatar
786817560 committed
22
        <item :proportion="[1,4]" @click.native="goDetailed(item.product_id,item.collect_status,item.bp_id)">
786817560's avatar
786817560 committed
23 24 25 26
          <div slot="name" class="item-pic">
            <img src="@/assets/homePage/WechatIMG2 Copy@2x.png" alt="">
          </div>
          <div slot="content" class="item-content">
786817560's avatar
786817560 committed
27
            <div class="centers">
786817560's avatar
786817560 committed
28
              <p class="firsts1">{{ item.bp_type_n }}</p>
786817560's avatar
786817560 committed
29 30 31 32 33 34 35 36 37 38
              <p class="seconds1">{{ item.bp_name }}</p>
            </div>
            <div class="centers">
              <p class="firsts1">参数项</p>
              <p class="seconds1">{{ item.product_code }}</p>
            </div>
            <div class="centers">
              <p class="firsts1">产品名称</p>
              <p class="seconds1">{{ item.product_name }}</p>
            </div>
786817560's avatar
786817560 committed
39 40
          </div>
          <div slot="right-icon">
李晓兵's avatar
李晓兵 committed
41
            <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" >
786817560's avatar
786817560 committed
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
          </div>
        </item>
      </list-item>
    </h-content>
  </h-view>
</template>
<script>
export default {
  name: 'ProductList',
  data () {
    return {
      lists: [],
    }
  },
  computed: {},
  watch: {},
786817560's avatar
786817560 committed
58
  activated () {
786817560's avatar
786817560 committed
59
    // debugger
786817560's avatar
786817560 committed
60 61
    this.proQuery()
  },
786817560's avatar
786817560 committed
62 63
  methods:
 {
786817560's avatar
786817560 committed
64
   // 根据产品线查询列表
786817560's avatar
786817560 committed
65 66 67 68
   proQuery () {
     let vm = this
     let url = $config.basePath + 'prd_product_list'
     let param = {
786817560's avatar
786817560 committed
69 70
       division: window.sessionStorage.division,
       user_phone: window.localStorage.user_phone,
786817560's avatar
786817560 committed
71
     }
786817560's avatar
786817560 committed
72
     vm.hlsPopup.showLoading('数据加载中')
786817560's avatar
786817560 committed
73
     vm.$post(url, param).then(function (res) {
786817560's avatar
786817560 committed
74
       vm.hlsPopup.hideLoading()
786817560's avatar
786817560 committed
75 76 77 78 79 80 81
       if (res.result === 'S') {
         vm.lists = res.lists
       } else {
         hlsPopup.showLongCenter(res.message)
       }
     })
   },
786817560's avatar
786817560 committed
82
   // val:产品id, status: 收藏状态
786817560's avatar
786817560 committed
83
   goDetailed (val, status, bp_id) {
786817560's avatar
786817560 committed
84
     window.sessionStorage.setItem('collect_status', status)
786817560's avatar
786817560 committed
85 86 87 88
     this.$router.push({
       name: 'ProDetailed',
       params: {
         product_id: val,
786817560's avatar
786817560 committed
89
         bp_id: bp_id,
786817560's avatar
786817560 committed
90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
       },
     })
   },
 },
}
</script>
<style lang='less' scoped>
#prolist {
    .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;
      }
    }
    .hinput {
      position: relative;
      z-index: 50;
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #cccccc70;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      .search-box {
        width: 93.6%;
        height: 36px;
        font-size: 14px;
        color: #B4B4B5;
        letter-spacing: 0;
        font-family: PingFangSC-Regular;
        border: 1px solid rgba(56, 63, 69, 0.60);
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        input {
          width: 90%;
          height: 100%;
          opacity: 0.4;
          border: none;
          line-height: 34px;
        }
      }
    }
    .arrow {
        width: 16px;
        height: 16px;
786817560's avatar
786817560 committed
149
       // margin-left: 30px;
786817560's avatar
786817560 committed
150 151
        margin-top: 16px;
    }
786817560's avatar
786817560 committed
152 153 154
    // .hls-item .contents .add-name {
    //   flex: none!important;
    // }
786817560's avatar
786817560 committed
155
    .item-pic {
786817560's avatar
786817560 committed
156
          width: 100px;
786817560's avatar
786817560 committed
157
          //height: 110px;
786817560's avatar
786817560 committed
158 159 160 161 162 163
          img {
              width: 100%;
              height: 100%;
          }
    }
    .item-content {
786817560's avatar
786817560 committed
164 165 166
         // height: 102px;
          width: 100%;
          margin-left: 20px;
786817560's avatar
786817560 committed
167
          .centers:nth-of-type(1) {
786817560's avatar
786817560 committed
168 169
              margin-top: 16px;
          }
786817560's avatar
786817560 committed
170
          .centers:nth-of-type(2) {
786817560's avatar
786817560 committed
171
              margin-top: 6px;
786817560's avatar
786817560 committed
172
          }
786817560's avatar
786817560 committed
173
          .centers:nth-of-type(3) {
786817560's avatar
786817560 committed
174
              margin-top: 6px;
786817560's avatar
786817560 committed
175
          }
786817560's avatar
786817560 committed
176
          .centers {
786817560's avatar
786817560 committed
177
            //   margin-top: 6px;
786817560's avatar
786817560 committed
178
            // white-space: nowrap;
786817560's avatar
786817560 committed
179
            // width: 100%;
786817560's avatar
786817560 committed
180 181 182 183
              font-family: PingFangSC-Semibold;
              font-size: 13px;
              color: rgba(56,63,69,0.60);
              letter-spacing: 0.5px;
786817560's avatar
786817560 committed
184 185 186 187 188
              display: flex;
              flex-direction: row;
              .firsts1 {
                  width: 60px;
                  height: 17px;
786817560's avatar
786817560 committed
189 190 191 192
                  font-family: PingFangSC-Regular;
                  font-size: 13px;
                  color: rgba(56,63,69,0.60);
              }
786817560's avatar
786817560 committed
193 194
              .seconds1 {
                width: 70%;
786817560's avatar
786817560 committed
195
                  margin-left: 16px;
786817560's avatar
786817560 committed
196
                  height: auto;
786817560's avatar
786817560 committed
197 198 199 200 201 202 203 204
                  font-family: PingFangSC-Regular;
                  font-size: 13px;
                  color: #383F45;
              }
          }
    }
}
</style>