<!-- * @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> <!-- <div class="hinput has-header"> <div class="search-box"> <input v-model="searchInput" type="text" placeholder="请输入经销商/产品名称/参数项"> <img src="@/assets/distributorSign/search.png" alt=""> </div> </div> --> <!-- 搜索 --> <div class="search has-header"> <img src="@/assets/contractInquire/search.png" alt=""> <input v-model="searchInput" type="text" placeholder="请输入经销商/产品名称/参数项"> </div> <scroll ref="scroll" :updateData="[lists]" :pullUp="true" @pullingUp="loadMore" > <div class="division-box"> <list-item v-for="(item,index) in lists" :key="index"> <item :proportion="[1,4]" @click.native="goDetailed(item.product_id,item.collect_status,item.bp_id)"> <div slot="name" class="item-pic"> <img :src="item.url" alt=""> </div> <div slot="content" class="item-content"> <div class="pro-name"> <p>{{ item.product_name }}</p> <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" > </div> <div class="centers"> <p class="firsts1">{{ item.bp_type_n }}</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> </item> </list-item> </div> </scroll> </h-view> </template> <script> export default { name: 'ProductList', data () { return { lists: [], pagenum: 1, searchInput: '', } }, computed: {}, watch: { searchInput () { let vm = this if (vm.timeout) { clearTimeout(vm.timeout) } vm.timeout = setTimeout(() => { vm.search() }, 1000) }, }, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'QueryHome') { vm.pagenum = 1 vm.searchInput = '' vm.proQuery() } else if (from.name === 'ProDetailed') { vm.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, searchInput: vm.searchInput, pagenum: vm.pagenum, pagesize: 10, } vm.hlsPopup.showLoading('数据加载中') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.lists = res.lists if (vm.lists.length === 0) { vm.$refs.scroll.update(true) } else if (vm.lists.length > 0 && vm.lists.length < 10) { vm.lists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) vm.$refs.scroll.update(true) } else if (vm.lists.length === 10) { vm.lists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) }, loadMore () { let vm = this vm.pagenum = vm.pagenum + 1 let url = $config.basePath + 'prd_product_list' let param = { division: window.sessionStorage.division, user_phone: window.localStorage.user_phone, searchInput: vm.searchInput, pagenum: vm.pagenum, pagesize: 10, } vm.hlsPopup.showLoading('数据加载中') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() let returnData = [] if (res.result === 'S') { returnData = res.lists if (returnData.length === 0) { vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { returnData.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) returnData.forEach((data, index, array) => { vm.lists.push(array[index]) }) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { returnData.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) returnData.forEach((data, index, array) => { vm.lists.push(array[index]) }) vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) }, // 搜索 search () { let vm = this vm.pagenum = 1 // vm.bpList = [] let url = $config.basePath + 'prd_product_list' let param = { pagesize: 10, pagenum: 1, searchInput: vm.searchInput, division: window.sessionStorage.division, user_phone: window.localStorage.user_phone, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() console.log(res) vm.lists = res.lists vm.lists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) if (vm.lists.length >= 0 && vm.lists.length < 10) { vm.$refs.scroll.update(true) } else if (vm.lists.length === 10) { vm.$refs.scroll.update(false) } }) }, // val:产品id, status: 收藏状态 goDetailed (val, status, bp_id) { window.sessionStorage.setItem('collect_status', status) this.$router.push({ name: 'ProDetailed', params: { product_id: val, bp_id: bp_id, }, }) }, }, } </script> <style lang='less'> #prolist { .search { background-color: #fff; padding: 8px 12px; position: absolute; width: 100%; z-index: 100; margin-bottom: 8px; input { background: rgba(239, 239, 239, 0.55); padding-left: 12px; border-radius: 4px; height: 36px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888C8F; line-height: 36px; } input::placeholder { font-size: 14px; color: #888C8F; } img { position: absolute; height: 16px; right: 25px; top: 20px; } } .division-box { padding: 8px; } .hls-list-item { border-radius: 4px; } .item-pic { width: 100px; //height: 110px; img { width: 100%; height: 100%; } } .item-content { width: 100%; margin-left: 20px; .pro-name { height: 42px; width: 100%; position: relative; border-bottom: 1px solid #F3F3F7; .arrow { position: absolute; width: 16px; height: 16px; right: 0; top: 13px; } p { height: 42px; line-height: 42px; font-family: PingFangSC-Semibold; font-size: 15px; color: #4B4A4B; letter-spacing: 0; font-weight: 600; } } .centers { font-family: PingFangSC-Semibold; font-size: 13px; color: rgba(56,63,69,0.60); letter-spacing: 0.5px; display: flex; flex-direction: row; margin-top: 8px; .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: #4B4A4B; } } } .content{ position: absolute; top:0; } .scrollContent{ padding-top: 1.92rem; padding-bottom: 20px; } } .platform-ios { #prolist { .scrollContent { padding-top: 2.32rem; } } } // iPhoneX适配 @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #prolist { .scrollContent { padding-top: 2.72rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #prolist { .scrollContent { padding-top: 2.72rem; } } } } </style>