<template> <h-view id="addCar"> <div v-show="downNum" class="modal-show"> <div class="down"> <div class="top"> 录入产品信息 <img src="@/assets/intoApproval/close.png" @click="downNum=false" > </div> <div class="down-content"> <span>请上传照片</span> <div class="photo"> <!-- <img src=""> --> </div> <list-item :item-height="44"> <item> <div slot="name">车架号</div> <input slot="content" readonly placeholder="自动识别车架号" > </item> <item> <div slot="name">发动机号</div> <input slot="content" readonly placeholder="自动识别发动机号" > </item> <item> <div slot="name">厂商型号</div> <input slot="content" readonly class="write" placeholder="请输入厂商型号" > </item> <item> <div slot="name">车牌号</div> <input slot="content" readonly placeholder="请输入车牌号" > </item> </list-item> </div> </div> </div> <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> <h-content> <div class="userInfo">承租人信息</div> <list-item :item-height="44"> <item> <div slot="name">合同号</div> <input slot="content" v-model="info.project_number" readonly placeholder="暂无数据" > </item> <item> <div slot="name">经销商</div> <input slot="content" v-model="info.bp_agent_name" readonly placeholder="暂无数据" > </item> <item> <div slot="name">承租人</div> <input slot="content" v-model="info.bp_name" readonly placeholder="暂无数据" > </item> <item> <div slot="name">产品线</div> <input slot="content" v-model="info.division_n" readonly placeholder="暂无数据" > </item> <item> <div slot="name">合同金额</div> <input slot="content" v-model="info.total_price" readonly placeholder="暂无数据" > </item> <item> <div slot="name">商务政策</div> <input slot="content" v-model="info.product_plan_id_n" readonly placeholder="暂无数据" > </item> <item> <div slot="name">租赁物数量</div> <input slot="content" v-model="info.product_num" readonly placeholder="请输入租赁物数量" > </item> </list-item> <div class="userInfo">设备清单</div> <div v-for="(item,index) in numInt" :key="index" class="equipment" @click="downNum=true"> <div class="left"> <span> <img src="@/assets/contractStart/list.png" > </span> </div> <div class="center"> <span>租赁物信息</span> <span class="status">已维护</span> <p> 参数项 <span>{{ item.product_code }}</span> </p> </div> <div class="right"> <img src="@/assets/contractStart/into.png" > </div> </div> </h-content> <bottom-tab> <tab-button class="approve" @click.native="goAdd">发车申请</tab-button> </bottom-tab> </h-view> </template> <script> export default { data () { return { num: null, downNum: false, show: false, info: { 'product_plan_id': '29', 'product_num': '1', 'first_pay': '102500', 'division_n': '平地机', 'gps_fee': '500', 'bp_name': '黄冲', 'project_number': 'PJ2019050043', 'bp_agent_name': '上海汉得信息技术股份有限公司 ', 'product_plan_id_n': 'PDJ', }, products: [], equip: [{ 'product_id': '3', 'product_code': 'GTC389', 'contract_id': '231', }], } }, computed: { numInt () { if (this.info.product_num !== null && this.info.product_num !== '') { return parseInt(this.info.product_num) } else { return 0 } }, }, beforeRouteEnter (to, from, next) { next(vm => { // vm.getDetail() // vm.getEquipment() }) }, methods: { getEquipment () { let vm = this let url = process.env.basePath + 'car_equip_list_query' let param = { project_id: this.$route.params.project_id, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.equip = res.lists } else { hlsPopup.showLongCenter(res.message) } }) }, getDetail () { let vm = this let url = process.env.basePath + 'con_contract_detial' let param = { project_id: this.$route.params.project_id, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { vm.info = res.info } else { hlsPopup.showLongCenter(res.message) } }) }, }, } </script> <style lang="less" scoped> #addCar { input::placeholder { color: #888c8f; } .hide{ display: flex; justify-content: flex-start; align-items: center; img{ width:30px; height:30px; margin-left:65%; } } .wrap{ padding-top:92px; } .modal-show { width: 100%; height: 100%; position: absolute; z-index: 900; background-color: rgba(56, 63, 69, 0.3); display: flex; justify-content: center; align-items: center; .down { position: relative; width: 314px; height: 436px; background-size: 301px 24.7px; background-color: #fff; } .top { width: 100%; height: 44px; font-family: PingFangSC-Semibold; font-size: 16px; letter-spacing: 0; text-align: center; line-height: 44px; color: #fff; background: #0041c4; img { width: 16px; height: 16px; float: right; margin-top: 13px; margin-right: 20px; } } .down-content { margin-top: 8px; span:first-child { font-family: PingFangSC-Regular; font-size: 13px; color: #656464; letter-spacing: 0; margin-left: 15px; } .photo { width: 172px; height: 120px; border: 1px solid #dcdcdd; border-radius: 2px; margin: 0 auto; margin-top: 12px; background: url("../../assets/contractStart/photo.png") 70px no-repeat; background-size: 24px 20px; img { width: 100%; height: 100%; } } } } .userInfo { height: 45px; line-height: 45px; color: #0041c4; font-size: 15px; margin-left: 16px; position: relative; } .userInfo::before { content: ""; display: block; width: 4px; height: 20px; background-color: #0041c4; position: absolute; left: -15px; top: 12px; } .equipment:not(:first-child) { margin-top: 2px; } .equipment { width: 359px; height: 72px; background-color: #fff; margin: 0 auto; display: flex; .left { flex: 1; span { display: block; width: 30px; height: 30px; background-color: #e8e9ed; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-left: 10px; margin-top: 8px; img { width: 11px; height: 14px; } } } .center { flex: 6; span:first-child { font-family: PingFangSC-Regular; font-size: 14px; color: #383f45; letter-spacing: 0.43px; margin-left: 10px; margin-top: 12px; } .status { display: inline-block; width: 46px; height: 16px; text-align: center; line-height: 16px; font-family: PingFangSC-Medium; font-size: 12px; color: #ffffff; letter-spacing: 0; background-color: #1d3fff; margin-left: 21px; margin-top: 12px; } p { font-family: PingFangSC-Regular; font-size: 13px; color: rgba(56, 63, 69, 0.6); letter-spacing: 0.4px; margin-left: 10px; margin-top: 10px; span { font-family: Helvetica; font-size: 13px; color: rgba(56, 63, 69, 0.6); } } } .right { flex: 1; display: flex; align-items: center; img { width: 13px; height: 13px; } } } .approve { color: #fff; background-color: #0041c4; } } </style>