<!-- * @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> <list-item v-for="item in lists" :key="item.product_id"> <item :proportion="[1,4]" @click.native="goDetailed(item.product_id,item.collect_status)"> <div slot="name" class="item-pic"> <img src="@/assets/homePage/WechatIMG2 Copy@2x.png" alt=""> </div> <div slot="content" class="item-content"> <div class="centers"> <p class="firsts1">经销商</p> <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> </div> <div slot="right-icon"> <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" > </div> </item> </list-item> </h-content> </h-view> </template> <script> export default { name: 'ProductList', data () { return { lists: [], } }, computed: {}, watch: {}, // beforeRouteEnter (to, from, next) { // if (from.name === 'QueryHome') { // next(vm => { // // vm.proQuery() // // vm.division = vm.$route.params.division // }) // } // next() // }, activated () { // debugger this.proQuery() }, methods: { // 根据产品线查询列表 proQuery () { let vm = this let url = $config.basePath + 'prd_product_list' let param = { division: window.sessionStorage.division, user_phone: window.localStorage.user_phone, } vm.$post(url, param).then(function (res) { console.log(res) if (res.result === 'S') { vm.lists = res.lists } else { hlsPopup.showLongCenter(res.message) } }) }, // val:产品id, status: 收藏状态 goDetailed (val, status) { window.sessionStorage.setItem('collect_status', status) this.$router.push({ name: 'ProDetailed', params: { product_id: val, // collect_status: status, }, }) }, }, } </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; // margin-left: 30px; margin-top: 16px; } // .hls-item .contents .add-name { // flex: none!important; // } .item-pic { width: 100px; //height: 110px; img { width: 100%; height: 100%; } } .item-content { // height: 102px; width: 100%; margin-left: 20px; .centers:nth-of-type(1) { margin-top: 16px; } .centers:nth-of-type(2) { margin-top: 6px; } .centers:nth-of-type(3) { margin-top: 6px; } .centers { // margin-top: 6px; // white-space: nowrap; // width: 100%; font-family: PingFangSC-Semibold; font-size: 13px; color: rgba(56,63,69,0.60); letter-spacing: 0.5px; display: flex; flex-direction: row; .firsts1 { width: 60px; height: 17px; font-family: PingFangSC-Regular; font-size: 13px; color: rgba(56,63,69,0.60); } .seconds1 { width: 70%; margin-left: 16px; height: auto; font-family: PingFangSC-Regular; font-size: 13px; color: #383F45; } } } } </style>