<!-- * @Author: your name * @Date: 2019-09-29 10:02:11 * @LastEditTime : 2019-12-27 10:28:37 * @LastEditors : Please set LastEditors * @Description: In User Settings Edit --> <template> <h-view id="contract-create-list"> <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="changeBase(item)"> <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon"> <p> <span>合同号</span> <span>{{ item.project_number }}</span> </p> <img src="@/assets/constractSigning/righticon.png" alt="" class="arrow"> </div> <div class="box"> <div><p>承租人</p><p>{{ item.bp_name }}</p></div> <div><p>合同租金</p><p class="money">{{ item.total_price|currency }}</p></div> <div><p>申请时间</p><p>{{ dateConverse(item.project_start_date) }}</p></div> </div> </div> </div> </scroll> <bottom-tab> <tab-button class="footer" @click.native="changePage"> <img class="add-img" src="@/assets/contractCreate/create-add.png" alt=""> 创建新合同 </tab-button> </bottom-tab> </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 { data () { return { num: 1, pagenum: 1, submitPagenum: 1, approvedPagenum: 1, check1: Check1, check2: Check2, uncheck1: unCheck1, uncheck2: unCheck2, user_bp_type: '', // 客户类型 searchInput: '', // 搜索内容 submitLists: [], // 待签约 approvedLists: [], // 已签约 showLists: [], approvedFlag: false, } }, watch: { 'num': { handler (newVal, oldVal) { this.$refs.scroll.scrollToTop() // this.$refs.scroll.update(false) if (newVal === 2) { if (!this.approvedFlag) { this.contractList() } // this.$refs.scroll.scrollToTop() this.showLists = this.approvedLists } else if (newVal === 1) { this.showLists = this.submitLists // this.$refs.scroll.scrollToTop() } }, }, 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 === 'MyInfo') { vm.searchInput = '' vm.pagenum = 1 vm.num = 1 vm.submitPagenum = 1 vm.approvedPagenum = 1 vm.user_bp_type = vm.$route.params.user_bp_type vm.approvedFlag = false vm.submitLists = [] vm.approvedLists = [] vm.$refs.scroll.update(false) vm.$refs.scroll.scrollToTop() vm.contractList() } }) }, methods: { dateConverse (date) { return date.replace(/\//g, '-') }, // 合同列表查询 contractList () { let vm = this if (vm.num === 1) { let url = $config.basePath + 'prj_submit_list' let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.submitPagenum, project_status: 'NEW', searchInput: vm.searchInput, } vm.hlsPopup.showLoading('数据加载中') vm.hlsHttp.post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { 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_submit_list' let param = { pagesize: 10, pagenum: vm.approvedPagenum, searchInput: vm.searchInput, project_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 () { let vm = this if (vm.num === 1) { vm.submitPagenum++ let url = $config.basePath + 'prj_submit_list' let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.submitPagenum, project_status: 'NEW', 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_submit_list' let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.approvedPagenum, project_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) } }) } }, async submitSearch () { let vm = this vm.submitPagenum = 1 let url = $config.basePath + 'prj_submit_list' let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.submitPagenum, project_status: 'NEW', searchInput: vm.searchInput, } vm.hlsPopup.showLoading('请稍后') let res = await vm.$post(url, param) if (res.result === 'S') { vm.hlsPopup.hideLoading() vm.submitLists = res.lists if (vm.num === 1) { vm.showLists = vm.submitLists } // 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) } return true } else { hlsPopup.showLongCenter(res.message) return false } }, approvedearch () { let vm = this let url = $config.basePath + 'prj_submit_list' vm.approvedPagenum = 1 let param = { user_phone: window.localStorage.user_phone, pagesize: 10, pagenum: vm.approvedPagenum, project_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 } // 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) } }) }, async search () { let res = await this.submitSearch() if (res) { this.approvedearch() } }, changePage () { window.localStorage.setItem('formPage', 'sale') this.$router.push({ name: 'SalesInfo', }) }, changeBase (item) { window.localStorage.setItem('bp_name_tenant', item.bp_name) if (this.num === 1) { window.localStorage.setItem('contractReadonly', false) window.localStorage.setItem('fromPage', 'list') window.localStorage.setItem('project_id', item.project_id) window.localStorage.setItem('bp_class_tenant', item.bp_class) window.localStorage.setItem('bp_id_tenant', item.bp_id) } else if (this.num === 2) { window.localStorage.setItem('contractReadonly', true) window.localStorage.setItem('fromPage', 'list') window.localStorage.setItem('project_id', item.project_id) window.localStorage.setItem('bp_class_tenant', item.bp_class) window.localStorage.setItem('bp_id_tenant', item.bp_id) } this.$router.push({ name: 'CreateBaseInfo', params: { bp_id: item.bp_id, }, }) }, goDetails () { this.$router.push({ name: 'SalesInfo', params: { user_bp_type: this.user_bp_type, }, }) }, }, } </script> <style lang="less" type="text/less"> #contract-create-list { .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-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; } } .wrap { width: 100%; padding: 8px; .contract-lists { width: 100%; background: #fff; margin-bottom: 8px; border-radius: 2px; .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 { height: 96px; margin-left: 50px; margin-right: 19px; div { width: 100%; height: 32px; position: relative; .money { font-family: Verdana-Bold; font-size: 14px; color: #4B4A4B; letter-spacing: 0; font-weight: 600; } p { height: 32px; line-height: 32px; position: absolute; font-family: PingFangSC-Regular; font-size: 14px; letter-spacing: 0; } p:nth-of-type(1){ left: 0; color: rgba(75,74,75,0.60); } p:nth-of-type(2){ right: 0; color: #4B4A4B; } } } } } .bottom-tab-button{ background: @headerColor; border-radius: 4px; color:white; height: 40px; margin: 4px 2% 0 2%; } .add-img { width: 16px; height: 16px; } .content { position: absolute; top: 0; } .scrollContent { padding-top: 3rem; padding-bottom: 20px; } } .platform-ios { #contract-create-list { .scrollContent { padding-top: 3.4rem; } } } // iPhoneX适配 @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #contract-create-list { .scrollContent { padding-top: 3.8rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #contract-create-list { .scrollContent { padding-top: 3.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>