<template> <h-view v-if="showFlag" id="product-list"> <h-header :proportion="[1,4,1]" class="bar-custom"> <span slot="center" style="color:#fff">选择产品</span> <span slot="right" style="color:#fff" @click="showFlag=false">取消</span> </h-header> <div class="search has-header"> <input v-model="keyword" placeholder="请输入产品名称"> </div> <scroll ref="scroll" :updateData="[showList]" :pullUp="true" @pullingUp="loadMoreProduct"> <list-item v-for="(item,index) in showList" :key="index"> <item :proportion="[1,4]" @click.native="getSelectProduct(item)" > <div slot="name" class="item-pic"> <img :src="item.url"> </div> <div slot="content" class="item-content"> <div class="pro-name"> <p>{{ item.product_name }}</p> </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> </scroll> </h-view> </template> <script> export default { props: { bp_agent_id: { type: String, default: '', }, division: { type: String, default: '', }, }, data () { return { showFlag: false, divisionLists: [], searchList: [], showList: [], selectedProduct: { product_id_n: '', product_id: '', }, pagenumSearch: 1, pagenum: 1, keyword: '', } }, watch: { keyword (newVal, oldVal) { if (newVal) { this.searchProduct() } else { this.getProduct() } }, }, methods: { init () { this.divisionLists = [] this.selectedProduct = [] this.pagenum = 1 this.keyword = '' }, show () { this.showFlag = true }, getSelectProduct (e) { let vm = this this.selectedProduct.product_id_n = e.product_name this.selectedProduct.product_id = e.product_id this.$emit('selectedProduct', this.selectedProduct) setTimeout(() => { vm.showFlag = false }, 100) }, getProduct () { let vm = this vm.pagenum = 1 vm.divisionLists = [] let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'prj_product_list' + '&index' + `'${randomString}'` let param = { bp_agent_id: vm.bp_agent_id, division: vm.division, user_phone: window.localStorage.getItem('user_phone'), pagesize: 10, pagenum: vm.pagenum, searchInput: vm.keyword, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.$refs.scroll.scrollToTop() vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vum.forEach(returnData, function (data, index, array) { vm.divisionLists.push(array[index]) }) vm.pagenum++ console.log(vm.pagenum) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.divisionLists.push(array[index]) }) vm.pagenum++ console.log(vm.pagenum) vm.$refs.scroll.update(false) } vm.divisionLists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) vm.showList = vm.divisionLists } else { hlsPopup.showLongCenter(res.message) } }) }, getLoad () { let vm = this let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'prj_product_list' + '&index' + `'${randomString}'` let param = { bp_agent_id: vm.bp_agent_id, division: vm.division, user_phone: window.localStorage.getItem('user_phone'), pagesize: 10, pagenum: vm.pagenum, searchInput: vm.keyword, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vum.forEach(returnData, function (data, index, array) { vm.divisionLists.push(array[index]) }) vm.pagenum++ console.log(vm.pagenum) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.divisionLists.push(array[index]) }) vm.pagenum++ console.log(vm.pagenum) vm.$refs.scroll.update(false) } vm.divisionLists.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) vm.showList = vm.divisionLists } else { hlsPopup.showLongCenter(res.message) } }) }, loadMoreProduct () { if (this.keyword) { this.searchLoad() } else { this.getLoad() } }, searchLoad () { let vm = this let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'prj_product_list' + '&index' + `'${randomString}'` let param = { bp_agent_id: vm.bp_agent_id, division: vm.division, user_phone: window.localStorage.getItem('user_phone'), pagesize: 10, pagenum: vm.pagenumSearch, searchInput: vm.keyword, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { if (vm.searchList) { } else { vm.searchList = returnData } vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vm.searchList = returnData vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.searchList.push(array[index]) }) vm.pagenumSearch++ vm.$refs.scroll.update(false) } vm.searchList.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) vm.showList = vm.searchList } else { hlsPopup.showLongCenter(res.message) } }) }, searchProduct () { let vm = this vm.pagenumSearch = 1 vm.searchList = [] let randomString = Math.floor(Math.random() * 21) let url = process.env.basePath + 'prj_product_list' + '&index' + `'${randomString}'` let param = { bp_agent_id: vm.bp_agent_id, division: vm.division, user_phone: window.localStorage.getItem('user_phone'), pagesize: 10, pagenum: vm.pagenumSearch, searchInput: vm.keyword, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.$refs.scroll.scrollToTop() vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { if (vm.searchList) { } else { vm.searchList = returnData } vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vm.searchList = returnData vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.searchList.push(array[index]) }) vm.pagenumSearch++ vm.$refs.scroll.update(false) } vm.searchList.forEach(item => { item['url'] = process.env.filePath + 'attachment_id=' + item.product_attachment_id + '&access_token=' + window.localStorage.access_token }) vm.showList = vm.searchList } else { hlsPopup.showLongCenter(res.message) } }) }, }, } </script> <style lang="less"> #product-list { position: absolute; top:0; z-index:999; background: #fff; .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.6); 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.6); } .seconds1 { width: 70%; margin-left: 16px; height: auto; font-family: PingFangSC-Regular; font-size: 13px; color: #4b4a4b; } } } .item { width: 359px; margin: 0 auto; } .search { background-color: #fff; padding: 8px 12px; width: 100%; height: 1.02rem; z-index: 100; margin-bottom: 8px; input { background: url("../../assets/contractStart/search1.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); padding-left: 12px; height: 36px; line-height: 36px; border-radius: 4px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; } input::placeholder { font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; letter-spacing: 0; } input:focus { background: url("../../assets/contractStart/search2.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); border: 2px solid #bcc6ff; } } } .platform-ios { #product-list { .scrollContent { padding-top: 1.4rem; } } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #product-list { .scrollContent { padding-top: 1.8rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #product-list { .scrollContent { padding-top: 1.8rem; } .search { input { background: url("../../assets/contractStart/search1.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); padding: 8px 12px; border-radius: 4px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888c8f; } } } } } </style>