<!-- * @Description: 签约单列表 * @Author: your name * @Date: 2019-09-25 10:30:46/>: your name --> <template> <h-view id="distribute-sign" 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="tab-style has-header"> <div :class="{'done':num === 1,'undone':num !== 1}" @click="num = 1;"><img :src="num === 1?check1:uncheck1"><span>待签约</span></div> <div :class="{'done':num === 2,'undone':num !== 2}" @click="num = 2;"><img :src="num === 2?check2:uncheck2"><span>已签约</span></div> </div> <!-- 搜索 --> <div class="search"> <input v-model="searchInput" type="text" placeholder="请输入合同号/承租人名称"> </div> <scroll ref="scroll" :updateData="[showLists]" :pullUp="true" @pullingUp="loadMore" > <div class="wrap"> <div v-for="(item,index) in showLists" :key="index" class="contract-lists" > <div class="pro-code" @click="goDetails(item)"> <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon"> <p> <span>合同号</span> <span>{{ item.project_number }}</span> </p> <img src="@/assets/distributorSign/goDetails.png" alt="" class="arrow"> </div> <div class="box"> <div><p>承租人</p><p>{{ item.bp_name }}</p></div> <div><p>合同名称</p><p>{{ item.project_name }}</p></div> <div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div> <div><p>产品名称</p><p>{{ item.division_n }}</p></div> <div><p>申请时间</p><p>{{ dateConverse(item.confirm_start_date) }}</p></div> </div> </div> </div> </scroll> <div v-if="showLists.length === 0"> <div class="display"> <img src="@/assets/messageCenter/noMsg.png" alt=""> </div> </div> </h-view> </template> <script> import Check1 from '@/assets/constractSigning/no-done.png' import Check2 from '@/assets/constractSigning/yes-done.png' import unCheck1 from '@/assets/constractSigning/no-undone.png' import unCheck2 from '@/assets/constractSigning/yes-undone.png' export default { name: 'ContractList', data () { return { num: 1, submitPagenum: 1, // 待签约页码 approvedPagenum: 1, // 已签约页码 searchInput: '', // 搜索内容 check1: Check1, check2: Check2, uncheck1: unCheck1, uncheck2: unCheck2, lists: [], showLists: [], submitLists: [], // 待签约列表 approvedLists: [], // 已签约列表 approvedFlag: false, } }, watch: { 'num': { handler (newVal, oldVal) { // this.$refs.scroll.update(false) this.$refs.scroll.scrollToTop() if (newVal === 2) { if (!this.approvedFlag) { this.getLists() } this.$refs.scroll.scrollToTop() this.showLists = this.approvedLists } else if (newVal === 1) { this.showLists = this.submitLists this.$refs.scroll.scrollToTop() } }, // immediate: true, }, searchInput () { let vm = this if (vm.timeout) { clearTimeout(vm.timeout) } vm.timeout = setTimeout(() => { vm.search() }, 1000) }, }, created () { }, beforeRouteEnter (to, from, next) { next(vm => { if (from.name === 'MyInfo') { vm.num = 1 vm.submitPagenum = 1 vm.approvedPagenum = 1 vm.searchInput = '' vm.approvedFlag = false vm.submitLists = [] vm.approvedLists = [] // vm.$refs.scroll.update(false) vm.$refs.scroll.scrollToTop() vm.getLists() } else if (from.name === 'ContractDetails') { if (window.localStorage.backflag === 'true') { vm.searchInput = '' vm.submitPagenum = 1 vm.approvedPagenum = 1 vm.approvedFlag = false vm.getLists() } } }) }, methods: { // 查询签约列表 getLists () { let vm = this if (vm.num === 1) { let url = $config.basePath + 'prj_confirm_list_query' let param = { pagesize: 10, pagenum: vm.submitPagenum, searchInput: vm.searchInput, confirm_status: 'SUBMIT', user_phone: window.localStorage.user_phone, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { console.log(res.lists) vm.submitLists = res.lists vm.showLists = vm.submitLists if (res.lists.length > 0 && res.lists.length < 10) { vm.$refs.scroll.update(true) } else if (res.lists.length === 10) { vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) } else if (vm.num === 2) { let url = $config.basePath + 'prj_confirm_list_query' let param = { pagesize: 10, pagenum: vm.approvedPagenum, searchInput: vm.searchInput, confirm_status: 'APPROVED', user_phone: window.localStorage.user_phone, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { console.log(res.lists) vm.approvedLists = res.lists vm.approvedFlag = true vm.showLists = vm.approvedLists if (res.lists.length > 0 && res.lists.length < 10) { vm.$refs.scroll.update(true) } else if (res.lists.length === 10) { vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) } }, loadMore () { // debugger let vm = this if (vm.num === 1) { vm.submitPagenum++ let url = $config.basePath + 'prj_confirm_list_query' let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.submitPagenum, confirm_status: 'SUBMIT', searchInput: vm.searchInput, } vm.hlsPopup.showLoading('请稍后') vm.hlsHttp.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.submitLists.push(array[index]) }) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { returnData.forEach((data, index, array) => { vm.submitLists.push(array[index]) }) vm.$refs.scroll.update(false) } vm.showLists = vm.submitLists } else { hlsPopup.showLongCenter(res.message) } }) } else if (vm.num === 2) { vm.approvedPagenum++ let url = $config.basePath + 'prj_confirm_list_query' let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.approvedPagenum, confirm_status: 'APPROVED', searchInput: vm.searchInput, } vm.hlsPopup.showLoading('请稍后') vm.hlsHttp.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.approvedLists.push(array[index]) }) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { returnData.forEach((data, index, array) => { vm.approvedLists.push(array[index]) }) vm.$refs.scroll.update(false) } vm.showLists = vm.approvedLists } else { hlsPopup.showLongCenter(res.message) } }) } }, submitSearch () { let vm = this vm.submitPagenum = 1 let url = $config.basePath + 'prj_confirm_list_query' let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.submitPagenum, confirm_status: 'SUBMIT', searchInput: vm.searchInput, } vm.hlsPopup.showLoading('请稍后') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() vm.submitLists = res.lists if (vm.num === 1) { vm.showLists = vm.submitLists } if (res.lists.length >= 0 && res.lists.length < 10) { vm.$refs.scroll.update(true) } else if (res.lists.length === 10) { vm.$refs.scroll.update(false) } }) }, approvedearch () { let vm = this let url = $config.basePath + 'prj_confirm_list_query' vm.approvedPagenum = 1 let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.approvedPagenum, confirm_status: 'APPROVED', searchInput: vm.searchInput, } vm.hlsHttp.post(url, param).then(function (res) { vm.approvedLists = res.lists if (vm.num === 2) { vm.showLists = vm.approvedLists } if (res.lists.length >= 0 && res.lists.length < 10) { vm.$refs.scroll.update(true) } else if (res.lists.length === 10) { vm.$refs.scroll.update(false) } }) }, search () { this.submitSearch() setTimeout(this.approvedearch, 1000) }, goDetails (item) { this.$router.push({ name: 'ContractDetails', params: { item: item, check_id: item.check_id, }, }) }, dateConverse (date) { return date.replace(/\//g, '-') }, }, } </script> <style lang="less"> #distribute-sign { .display { position: fixed; // top: 0; img { width: 100%; height: 100%; // margin-top: -70px; } } .tab-style{ display:flex; width: 100%; justify-content: center; padding-top:12px; padding-bottom: 8px; align-items: center; background-color: #fff; box-shadow:0 2px 3px 0 rgba(220,220,221,0.50); position: absolute; z-index: 999; div{ position: relative; height: 32px; width: 172px; border-radius:16px; border-radius: 16px; font-family: PingFangSC-Semibold; font-size: 14px; letter-spacing: 0.43px; margin: 0 4px; line-height: 32px; } .undone{ background: rgba(220,220,221,0.26); color: #383F45; } .done{ background: rgba(0,70,156,0.10); color: #00469C; } img{ height: 20px; display: block; float: left; margin: 6px 0 0 43px; } span{ position: absolute; left:70px; } } .search { background-color: #fff; padding: 8px 12px; position: absolute; width: 100%; z-index: 100; margin-bottom: 8px; margin-top: 52px; input { padding-left: 12px; border-radius: 4px; height: 36px; width: 100%; font-family: PingFangSC-Regular; font-size: 14px; color: #888C8F; line-height: 36px; background: url("../../assets/contractStart/search1.png") 320px no-repeat; background-size: 16px 16px; background-color: rgba(239, 239, 239, 0.55); } input::placeholder { font-size: 14px; color: #888C8F; font-family: PingFangSC-Regular; 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; } } .wrap { width: 100%; padding: 8px; .contract-lists { width: 100%; background: #fff; margin-bottom: 8px; .pro-code { height: 44px; width: 100%; display: flex; flex-direction: row; align-items: center; .file-icon { width: 30px; height: 30px; margin-left: 10px; } p { height: 44px; line-height: 44px; margin-left: 10px; flex: 1; font-family: PingFangSC-Semibold; font-size: 15px; color: #4B4A4B; letter-spacing: 0; border-bottom: 1px solid #F3F3F7 } .arrow { height: 16px; width: 16px; margin-right: 10px; margin-left: -8px; } } .box { margin-left: 50px; margin-right: 19px; div { width: 100%; padding: 8px 0; line-height: 18px; display: flex; justify-content: space-between; position: relative; .money { font-family: Verdana-Bold; font-size: 14px; color: #4B4A4B; letter-spacing: 0; font-weight: 600; } p { font-family: PingFangSC-Regular; font-size: 14px; letter-spacing: 0; word-break: break-all; word-wrap: break-word; white-space: normal; } p:nth-of-type(1){ width: 32%; left: 0; color: rgba(75,74,75,0.60); } p:nth-of-type(2){ right: 0; color: #4B4A4B; } } } } } .content{ position: absolute; top:0; } .scrollContent{ padding-top: 2.88rem; padding-bottom: 20px; } } .platform-ios { #distribute-sign { .scrollContent { padding-top: 3.28rem; } } } // iPhoneX适配 @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #distribute-sign { .scrollContent { padding-top: 3.68rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #distribute-sign { .scrollContent { padding-top: 3.68rem; } .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>