feat: 非标按钮

src/pages/contractCreate/creat-rent-info.vue

@@ -132,7 +132,37 @@
           <input slot="content" v-model="saveInfo.product_num" :readonly="isReadOnly" placeholder="请输入产品数量">
         </item>
       </list-item>
-      <div class="userInfo">融资信息</div>
+      <div class="userInfo">
+        <span>融资信息</span>
+        <span class="fei-button" @click="showFeiInfo">非标报价商务信息</span>
+      </div>
+      <div v-if="showHideOnBlur">
+        <x-dialog v-model="showHideOnBlur" hide-on-blur :dialog-style="{'min-height': '100px', 'padding': '5px'}" >
+         <div class="feibox">
+            <p>非标报价商务信息</p>
+
+            <div>
+              <span>报价模式</span>
+              <span class="gray">非标业务-冬歇/雨歇</span>
+            </div>
+
+            <div>
+              <span>首X期-期数</span>
+              <span class="gray">3</span>
+            </div>
+
+            <div>
+              <span>起止月份</span> 
+            </div>
+          <div style="justify-content: space-around;">
+              <span class="gray">2021-11-02</span> 
+              <span>-</span>
+              <span class="gray">2021-11-02</span>
+            </div> 
+        </div>
+        </x-dialog>
+      </div>
+     
       <div class="hint-info">
         <img src="@/assets/contractCreate/hint.png">提示 以下为单个设备商务政策
       </div>
@@ -412,14 +442,19 @@
 import CurrencyInput from '../../components/currencyInput'
 import RateInput from '@/components/rateInput'
 import SelectProduct from './select-product'
+import {XDialog} from 'vux'
+
 export default {
   components: {
     CurrencyInput,
     RateInput,
     SelectProduct,
+    XDialog
   },
   data () {
     return {
+      showHideOnBlur: false,
+
       downNum: false,
       calculeFlag: false,
       salesEnter: '', // 页面进入标识，该字段作用：第一次创建时即从销售页面进入进本信息、租赁信息、附件信息。用于判断后面页面录入数据后未保存则点击上一步，再次进入该页面数据丢失问题
@@ -565,6 +600,11 @@ export default {
         this.vehicleImg = ''
       }
     },
+    'saveInfo.product_plan_name'(n, o) {
+      if(n) {
+
+      }
+    }
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
@@ -631,6 +671,11 @@ export default {
     })
   },
   methods: {
+    // 非标价商务信息
+    showFeiInfo() {
+      this.showHideOnBlur = true
+    },
+
     // 查看大图
     showBigPicture (pic) {
       let vm = this
@@ -1724,6 +1769,27 @@ export default {
 }
 </script>
 <style lang="less">
+  .feibox { 
+     color: #333;
+  }
+  .feibox > p {
+    color: #b3aeae; 
+    border-bottom: 1px solid #ccc;
+    width: 85%;
+    margin: 0 auto 10px; 
+    padding: 10px 0;
+    font-size: 15px;
+  }
+  .feibox > div {
+    display: flex; 
+    justify-content: space-between;
+    font-size: 14px;
+    margin: 15px 13px; 
+  }
+  .gray {
+    color: #b3aeae; 
+  }
+ 
   #create-rent-info {
     .swipeout-list .option-item .delete {
     background-color: rgba(249,98,104,0.5);
@@ -2116,6 +2182,19 @@ export default {
       }
     }
 
+    .userInfo > .fei-button {
+      float: right;   
+      margin-right: 10px;
+      margin-top: 7.5px;
+      background-color: #1D3FFF;
+      color: #fff; 
+      height: 25px;
+      line-height: 25px;
+      padding: 0 8px;
+      border-radius: 15px;
+      font-size: 13px;
+    }
+
     .userInfo::before {
       content: "";
       display: block;