<!-- * @Descrip 融资试算 * @Author: your name * @Date: 2019-09-29 17:09:49 * @LastEditTime: 2019-11-22 09:15:25 * @LastEditors: Please set LastEditors --> <template> <h-view id="trial" class="public-style"> <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="search has-header"> <input v-model="searchInput" type="text" placeholder="请输入产品名称"> </div> <scroll ref="scroll" :updateData="[lists]" :pullUp="true" > <section v-for="(item,index) in lists" :key="index"> <div class="descript" @click="goDetails(item.product_plan_id)"> <img src="@/assets/trial/product.png" alt=""> <p class="produc">{{ item.product_plan_id_n }}</p> <img class="linkPic" src="@/assets/distributorSign/righticon.png" alt=""> </div> <div class="tario"> <div class="wrap"> <p class="ratio"> <span>保证金比例</span> <span>{{ item.deposit_ratio_n }}</span> </p> <p> <span>手续费比例</span> <span>{{ item.lease_charge_ratio_n }}</span> </p> </div> <div class="wrap"> <p> <span>年利率</span> <span>{{ item.int_rate_n }}</span> </p> <p> <span>期 限</span> <span>{{ item.lease_times }}期</span> </p> </div> </div> </section> </scroll> </h-view> </template> <script> export default { name: 'FinancingTrial', data () { return { lists: [], pagenum: 1, plan_price: '', searchInput: '', price_date_to: '', fromProduct: false, } }, computed: {}, watch: { searchInput () { let vm = this if (vm.timeout) { clearTimeout(vm.timeout) } vm.timeout = setTimeout(() => { if (vm.fromProduct) { vm.search(vm.fromProduct) } else { vm.search() } }, 1000) }, }, beforeRouteEnter (to, from, next) { next(vm => { vm.searchInput = '' vm.pagenum = 1 if (from.name === 'ProDetailed') { vm.price_date_to = vm.$route.params.price_date_to // 有效日期 vm.plan_price = vm.$route.params.plan_price // 参考价 vm.calculationQuery('collect') vm.fromProduct = true } else if (from.name === 'HomePage') { vm.fromProduct = false vm.calculationQuery() vm.price_date_to = '' // 清除缓存(从收藏带来的数据) vm.plan_price = '' } }) next() }, activated () { }, created () { }, methods: { goDetails (val) { this.$router.push({ name: 'FinancingDetails', params: { product_plan_id: val, plan_price: this.plan_price, price_date_to: this.price_date_to, }, }) }, // 初始试算查询 calculationQuery (val) { let vm = this if (val) { let url = $config.basePath + 'prd_product_calculation_query' let param = { pagesize: 10, searchInput: vm.searchInput, pagenum: vm.pagenum, division: window.localStorage.division, // 收藏到试算通过产品线查询 } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.lists = res.lists if (res.lists.length > 0 && res.lists.length < 10) { vm.$refs.scroll.update(true) } } else { hlsPopup.showLongCenter(res.message) } }) } else { let url = $config.basePath + 'prd_calculation_query' let param = {} vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.lists = res.lists if (res.lists.length > 0 && res.lists.length < 10) { vm.$refs.scroll.update(true) } } else { hlsPopup.showLongCenter(res.message) } }) } }, loadMore () { let vm = this if (vm.fromProduct) { vm.pagenum = vm.pagenum + 1 let url = $config.basePath + 'prd_product_calculation_query' let param = { division: window.localStorage.division, // 收藏到试算通过产品线查询 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((data, index, array) => { vm.lists.push(array[index]) }) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { returnData.forEach((data, index, array) => { vm.lists.push(array[index]) }) vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) } else { vm.pagenum = vm.pagenum + 1 let url = $config.basePath + 'prd_calculation_query' let param = { 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((data, index, array) => { vm.lists.push(array[index]) }) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { returnData.forEach((data, index, array) => { vm.lists.push(array[index]) }) vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) } }, search (val) { let vm = this if (val) { vm.pagenum = 1 let url = $config.basePath + 'prd_product_calculation_query' let param = { pagesize: 10, pagenum: 1, searchInput: vm.searchInput, division: window.localStorage.division, // 收藏到试算通过产品线查询 } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() vm.lists = res.lists 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) } }) } else { vm.pagenum = 1 let url = $config.basePath + 'prd_calculation_query' let param = { pagesize: 10, pagenum: 1, searchInput: vm.searchInput, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() vm.lists = res.lists 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) } }) } }, }, } </script> <style lang='less'> #trial { .search { background-color: #fff; padding: 8px 12px; position: absolute; width: 100%; 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; border-radius: 4px; height: 36px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888C8F; line-height: 36px; } 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; } } section { width: 95%; margin: 0 auto; margin-top: 8px; border-radius: 2px; } .descript { width: 100%; height: 44px; display: flex; flex-direction: row; background: #fff; img { width: 30px; height: 30px; margin-left: 10px; margin-top: 8px; // margin-right: 8px; } .linkPic { width: 16px; height: 16px; margin-top: 15px; margin-left: -7px; margin-right: 10px; } .produc { height: 44px; display: flex; flex: 1; font-size: 15px; color: #4B4A4B; line-height: 44px; font-weight: 500; letter-spacing: 0; margin-left: 10px; font-family: PingFangSC-Semibold; border-bottom: 1px solid #F3F3F7; } } .tario { width: 100%; height: 60px; position: relative; background: #fff; // margin-bottom: 8px; .wrap:nth-of-type(1) { height: 60px; position: absolute; left: 50px; } .wrap:nth-of-type(2) { height: 60px; position: absolute; right: 30px; } p { height: 30px; line-height: 30px; font-family: PingFangSC-Regular; font-size: 13px; color: rgba(56, 63, 69, 0.60); span:nth-of-type(2) { margin-left: 16px; color: rgb(56, 63, 69); } } } .content{ position: absolute; top:0; } .scrollContent{ padding-top: 1.92rem; padding-bottom: 20px; } } .platform-ios { #trial { .scrollContent { padding-top: 2.32rem; } } } // iPhoneX适配 @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #trial { .scrollContent { padding-top: 2.72rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #trial { .scrollContent { padding-top: 2.72rem; } } } } </style>