''

src/pages/contractCreate/sales-info.vue

 <!--
  * @Author: your name
  * @Date: 2019-09-29 10:02:11
- * @LastEditTime: 2019-12-19 16:06:34
+ * @LastEditTime: 2019-12-20 14:02:10
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  -->
@@ -17,12 +17,13 @@
       <list-item :item-height="44" class="second-part">
         <item :showArrow="true" @click.native="picker">
           <div slot="name" class="font-color">承租人</div>
-          <span slot="content">{{ '请选择' }}</span>
+          <input slot="content" v-model="lessee" placeholder="请选择">
         </item>
         <item :showArrow="true">
           <div slot="name" class="font-color">业务类型</div>
           <input
             slot="content"
+            v-model="business"
             type="text"
             readonly
             placeholder="请选择"
@@ -31,19 +32,40 @@
         </item>
         <item>
           <div slot="name" class="font-color">经销商</div>
-          <input slot="content" placeholder="上海汉得信息技术股份有限公司">
+          <input slot="content" v-model="bp_agent_name" readonly>
         </item>
         <item :showArrow="true">
           <div slot="name" class="font-color">销售人员</div>
-          <input slot="content" readonly placeholder="请选择">
+          <input
+            slot="content"
+            v-model="sales"
+            type="text"
+            readonly
+            placeholder="请选择"
+            @click="selectSales"
+          >
         </item>
         <item :showArrow="true">
           <div slot="name" class="font-color">办事处</div>
-          <input slot="content" readonly placeholder="请选择">
+          <input
+            slot="content"
+            v-model="office_name"
+            type="text"
+            readonly
+            placeholder="请选择"
+            @click="selectOffice"
+          >
         </item>
         <item :showArrow="true">
           <div slot="name" class="font-color">主机厂</div>
-          <input slot="content" readonly placeholder="请选择">
+          <input
+            slot="content"
+            v-model="factory_name"
+            type="text"
+            readonly
+            placeholder="请选择"
+            @click="selectFactory"
+          >
         </item>
         <item>
           <div slot="name" class="font-color">主机厂业务员</div>
@@ -51,7 +73,7 @@
         </item>
         <item @click.native="showTime('YYYY-MM-DD')">
           <div slot="name" class="font-color">签约日期</div>
-          <input slot="content" v-model="dates" readonly>
+          <input slot="content" v-model="salesInfo.dates" readonly>
           <img src="@/assets/contractCreate/date.png" alt="" class="date-pic">
         </item>
       </list-item>
@@ -99,7 +121,7 @@
         </item>
         <item @click.native="showTime('YYYY-MM-DD')">
           <div slot="name" class="font-color">签约日期</div>
-          <input slot="content" v-model="dates" readonly>
+          <input slot="content" v-model="salesInfo.dates" readonly>
           <img src="@/assets/contractCreate/date.png" alt="" class="date-pic">
         </item>
       </list-item>
@@ -109,6 +131,38 @@
         确认创建
       </tab-button>
     </bottom-tab>
+    <h-modal v-model="showModal" position="bottom" class="hmodal">
+      <h-view id="picker">
+        <h-header :proportion="[5,1,1]" class="bar-custom">
+          <div slot="left" class="h-header-btn">
+            <img src="@/assets/userBind/arrow.png" @click="hideModal">
+            <span>选择承租人</span>
+          </div>
+        </h-header>
+        <!-- 搜索 -->
+        <div class="search">
+          <input type="text" placeholder="请输入承租人名称/证件号码">
+        </div>
+        <scroll
+          ref="scroll"
+        >
+          <div class="wrap">
+            <div v-for="(item,index) in showLists" :key="index" class="contract-lists" >
+              <div class="box" @click="pickLessee(item.bp_name)">
+                <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
+                <div><p>承租人名称</p><p>{{ item.bp_name }}</p></div>
+                <div><p>证件号</p><p>{{ item.bp_id_card_no }}</p></div>
+              </div>
+            </div>
+          </div>
+        </scroll>
+        <!-- <bottom-tab>
+          <tab-button class="footer">
+            确认创建
+          </tab-button>
+        </bottom-tab> -->
+      </h-view>
+    </h-modal>
   </h-view>
 </template>
 
@@ -117,7 +171,22 @@
 export default {
   data () {
     return {
-      dates: '请选择',
+      lessee: '', // 承租人
+      sales: '', // 销售人员
+      office_name: '', // 办事处
+      factory_name: '',
+      business: '',
+      showModal: false,
+      showLists: [],
+      businessLists: [], // 业务人员查询结果
+      salesLists: [], // 销售人员查询结果
+      officeLists: [], // 办事处查询结果
+      factoryLists: [], // 主机厂
+      bp_agent_id: '', // 经销商id
+      bp_agent_name: '', // 经销商名称
+      salesInfo: {
+        dates: '请选择',
+      },
     }
   },
   watch: {
@@ -130,12 +199,17 @@ export default {
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
+      vm.showModal = false
+      vm.lessee = ''
+      vm.business = ''
+      vm.office_name = ''
+      vm.factory_name = ''
+      vm.bp_agent_id = ''
+      vm.bp_agent_name = ''
+      vm.sales = window.localStorage.bp_name
       vm.businessQuery()
       vm.agentQuery()
       vm.factoryQuery()
-      vm.salesQuery()
-      vm.officeQuery()
-      vm.creditQuery()
     })
   },
   methods: {
@@ -146,10 +220,26 @@ export default {
         nowDate: (new Date()).format('yyyy-MM-dd'),
         format: format,
         callback: (date) => {
-          vm.dates = date
+          vm.salesInfo.dates = date
         },
       })
     },
+    // 承租人查询
+    lesseeQuery () {
+      let vm = this
+      let url = process.env.basePath + 'prj_bp_master_query'
+      let param = {
+        bp_agent_id: vm.bp_agent_id,
+      }
+      vm.hlsPopup.showLoading('请稍候')
+      vm.hlsHttp.post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        console.log('承租人', res)
+        if (res.result === 'S') {
+          vm.showLists = res.lists
+        }
+      })
+    },
     // 业务类型查询
     businessQuery () {
       let vm = this
@@ -160,7 +250,12 @@ export default {
         vm.hlsPopup.hideLoading()
         console.log('业务类型', res)
         if (res.result === 'S') {
-          // vm.certification_status = res.info.certification_status
+          vm.businessLists = res.lists.map(item => {
+            return {
+              code: item.business_type,
+              code_name: item.business_type_n,
+            }
+          })
         }
       })
     },
@@ -168,14 +263,12 @@ export default {
     selectBusiness () {
       let vm = this
       vm.hlsPopup.selectList({
-        // list: vm.taxpayerList,
-        // code: 'bp_type',
-        // object: {},
-        // returnItem: function (index, obj) {
-        //   vm.invoiceInfo.taxpayer_type = obj.bp_type
-        //   vm.invoiceInfo.taxpayer_type_n = obj.bp_type_n
-        //   console.log('obj', vm.invoiceInfo)
-        // },
+        list: vm.businessLists,
+        code: 'business_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.business = obj.business_type_n
+        },
       })
     },
     // 经销商查询
@@ -190,7 +283,12 @@ export default {
         vm.hlsPopup.hideLoading()
         console.log('经销商', res)
         if (res.result === 'S') {
-          // vm.certification_status = res.info.certification_status
+          vm.bp_agent_name = res.info.bp_agent_name
+          vm.bp_agent_id = res.info.bp_agent_id
+          vm.lesseeQuery()
+          vm.salesQuery()
+          vm.officeQuery()
+          vm.creditQuery()
         }
       })
     },
@@ -204,48 +302,100 @@ export default {
         vm.hlsPopup.hideLoading()
         console.log('主机厂', res)
         if (res.result === 'S') {
-          // vm.certification_status = res.info.certification_status
+          vm.factoryLists = res.lists.map(item => {
+            return {
+              code: item.bp_factory_id,
+              code_name: item.bp_factory_name,
+            }
+          })
         }
       })
     },
+
+    // 主机厂选择
+    selectFactory () {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.factoryLists,
+        code: 'factory_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.factory_name = obj.factory_type_n
+        },
+      })
+    },
     // 销售人员查询
     salesQuery () {
       let vm = this
       let url = process.env.basePath + 'prj_bp_agent_user'
       let param = {
-        bp_agent_id: '7781',
+        bp_agent_id: vm.bp_agent_id,
       }
       vm.hlsPopup.showLoading('请稍候')
       vm.hlsHttp.post(url, param).then(function (res) {
         vm.hlsPopup.hideLoading()
         console.log('销售人员', res)
         if (res.result === 'S') {
-          // vm.certification_status = res.info.certification_status
+          vm.salesLists = res.lists.map(item => {
+            return {
+              code: item.user_id,
+              code_name: item.agent_username,
+            }
+          })
         }
       })
     },
+    selectSales () {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.salesLists,
+        code: 'agent_type',
+        object: {},
+        returnItem: function (index, obj) {
+          console.log(obj)
+          vm.sales = obj.agent_type_n
+        },
+      })
+    },
     // 办事处查询
     officeQuery () {
       let vm = this
       let url = process.env.basePath + 'prj_office_list'
       let param = {
-        bp_agent_id: '7781',
+        bp_agent_id: vm.bp_agent_id,
       }
       vm.hlsPopup.showLoading('请稍候')
       vm.hlsHttp.post(url, param).then(function (res) {
         vm.hlsPopup.hideLoading()
         console.log('办事处', res)
         if (res.result === 'S') {
-          // vm.certification_status = res.info.certification_status
+          vm.officeLists = res.lists.map(item => {
+            return {
+              code: item.office_id,
+              code_name: item.office_name,
+            }
+          })
         }
       })
     },
+    // 选择办事处
+    selectOffice () {
+      let vm = this
+      vm.hlsPopup.selectList({
+        list: vm.officeLists,
+        code: 'office_type',
+        object: {},
+        returnItem: function (index, obj) {
+          vm.office_name = obj.office_type_n
+        },
+      })
+    },
     // 授信额度查询
     creditQuery () {
       let vm = this
       let url = process.env.basePath + 'prj_agent_credit_query'
       let param = {
-        bp_agent_id: '7781',
+        bp_agent_id: vm.bp_agent_id,
       }
       vm.hlsPopup.showLoading('请稍候')
       vm.hlsHttp.post(url, param).then(function (res) {
@@ -256,10 +406,20 @@ export default {
         }
       })
     },
+    // 查询承租人
     picker () {
-      this.$router.push({
-        name: 'PickLessee',
-      })
+      // this.$router.push({
+      //   name: 'PickLessee',
+      // })
+      this.showModal = true
+    },
+    // 选择承租人
+    pickLessee (val) {
+      this.lessee = val
+      this.showModal = false
+    },
+    hideModal () {
+      this.showModal = false
     },
   },
 }
@@ -280,6 +440,135 @@ export default {
     height: 40px;
     margin: 4px 2% 0 2%;
   }
-}
+  .hmodal {
+    z-index: 99;
+    .search {
+      background-color: #fff;
+      padding: 8px 12px;
+      position: absolute;
+      width: 100%;
+      z-index: 100;
+      margin-bottom: 8px;
+      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;
+        position: relative;
+        .box {
+          height: 68px;
+          margin-left: 50px;
+          margin-right: 19px;
+          .file-icon {
+            width: 30px;
+            height: 30px;
+            position: absolute;
+            left: 10px;
+            top: 8px;
+          }
+          div {
+            width: 100%;
+            height: 32px;
+            position: relative;
+            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;
+            }
+          }
+        }
+      }
+    }
+    .content{
+      position: absolute;
+      top:0;
+    }
+    .scrollContent{
+     padding-top: 1.92rem;
+      padding-bottom: 20px;
+    }
+  }
+}
+  .platform-ios {
+    #picker {
+      .scrollContent {
+        padding-top: 2.32rem;
+      }
+    }
+  }
+  // iPhoneX适配
+  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
+    .platform-ios {
+      #picker {
+        .scrollContent {
+          padding-top: 2.72rem;
+        }
+      }
+    }
+  }
+  // iPhoneXR适配
+  @media (device-width: 414px) and (device-height: 896px) {
+    .platform-ios {
+      #picker {
+        .scrollContent {
+          padding-top: 2.72rem;
+        }
+        .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>