报价框组件

components/mobile/MobileFooter.vue

@@ -10,7 +10,7 @@
         <i :class="activeType=='shops'?'iconfont icon-dianpu':'iconfont icon-dianpu1'"></i><p>店铺</p>
       </nuxt-link>
     </span>-->
-    <span class="seek">
+    <span class="seek" @click="showSayPriceBox = true">
       <a>
         <img src="/images/mobile/@2x/applyPurchase/home/seek-footer.png" alt="">
         <p>发布求购</p>
@@ -23,53 +23,25 @@
     </span>
     <a @click="toTop" v-show="!hideToTop"><i class="iconfont icon-arrow-up icon-xlg"></i></a>
     <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox"></login-box>
-    <div class="mobile-modal">
-      <div class="mobile-modal-box">
-        <div class="mobile-modal-header">发布求购<i class="icon-guanbi iconfont"></i></div>
-        <div class="publish-seek">
-          <div class="content-line">
-            <span><i>*</i>型号：</span>
-            <input type="text" placeholder="请勿填中文符号">
-          </div>
-          <div class="content-line">
-            <span><i>*</i>品牌：</span>
-            <input type="text" placeholder="请勿填中文符号">
-          </div>
-          <div class="content-line">
-            <span><i>*</i>截止日期：</span>
-            <input type="text" placeholder="请勿填中文符号">
-          </div>
-          <div class="content-line">
-            <span>币种：</span>
-            <a href="">RMB </a>
-          </div>
-          <div class="content-line">
-            <span>数量：</span>
-            <input type="text">
-          </div>
-          <div class="content-line">
-            <span>规格：</span>
-            <input type="text">
-          </div>
-          <a>确认发布</a>
-        </div>
-      </div>
-    </div>
+    <say-price :showSayPriceBox="showSayPriceBox" @cancelAction="showSayPriceBox = false"></say-price>
   </div>
 </template>
 <script>
   import { scrollTo } from '~utils/scroll'
   import {LoginBox} from '~components/mobile/common'
+  import SayPrice from './applyPurchase/SayPrice.vue'
   export default{
     name: 'MobileFooter',
     data () {
       return {
         hideToTop: true,
-        showLoginBox: false
+        showLoginBox: false,
+        showSayPriceBox: false
       }
     },
     components: {
-      LoginBox
+      LoginBox,
+      SayPrice
     },
     computed: {
       activeType () {
@@ -164,48 +136,4 @@
     top: -1.3rem;
     right: 1.1rem;
   }
-  .mobile-modal {
-    .mobile-modal-box {
-      .publish-seek {
-        background: #fff;
-        padding-top: .1rem;
-        padding-bottom: .4rem;
-        .content-line {
-          height: .8rem;
-          line-height: .8rem;
-          font-size: .26rem;
-          text-align: left;
-          border-bottom: .01rem solid #b7d5fe;
-          input {
-            width: 3.49rem;
-            height: .52rem;
-            padding-left: .19rem;
-            border: .01rem solid #7e7e7e;
-          }
-          span {
-            display: inline-block;
-            width: 1.76rem;
-            text-align: right;
-            i {
-              color: #ff0000;
-              margin-right: .05rem;
-              font-style: normal;
-            }
-          }
-        }
-        > a {
-          display: block;
-          width: 5.19rem;
-          height: .84rem;
-          text-align: center;
-          line-height: .84rem;
-          font-size: .38rem;
-          margin: .3rem auto 0;
-          background: #3f84f6;
-          color: #fff;
-          border-radius: .08rem;
-        }
-      }
-    }
-  }
 </style>

components/mobile/applyPurchase/SayPrice.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="mobile-modal" v-if="showSayPriceBox">
+    <div class="mobile-modal-box">
+      <div class="mobile-modal-header">发布求购<i class="icon-guanbi iconfont" @click="cancel"></i></div>
+      <div class="publish-seek">
+        <div class="content-line">
+          <span><i>*</i>型号：</span>
+          <input type="text" placeholder="请勿填中文符号">
+        </div>
+        <div class="content-line">
+          <span><i>*</i>品牌：</span>
+          <input type="text" placeholder="请勿填中文符号">
+        </div>
+        <div class="content-line">
+          <span><i>*</i>截止日期：</span>
+          <input type="text" placeholder="请勿填中文符号">
+        </div>
+        <div class="content-line">
+          <span>币种：</span>
+          <a href="">RMB </a>
+        </div>
+        <div class="content-line">
+          <span>数量：</span>
+          <input type="text">
+        </div>
+        <div class="content-line">
+          <span>规格：</span>
+          <input type="text">
+        </div>
+        <a>确认发布</a>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: ['showSayPriceBox'],
+    methods: {
+      cancel: function () {
+        this.$emit('cancelAction')
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .mobile-modal {
+    .mobile-modal-box {
+      .publish-seek {
+        background: #fff;
+        padding-top: .1rem;
+        padding-bottom: .4rem;
+        .content-line {
+          height: .8rem;
+          line-height: .8rem;
+          font-size: .26rem;
+          text-align: left;
+          border-bottom: .01rem solid #b7d5fe;
+          input {
+            width: 3.49rem;
+            height: .52rem;
+            padding-left: .19rem;
+            border: .01rem solid #7e7e7e;
+          }
+          span {
+            display: inline-block;
+            width: 1.76rem;
+            text-align: right;
+            i {
+              color: #ff0000;
+              margin-right: .05rem;
+              font-style: normal;
+            }
+          }
+        }
+        > a {
+          display: block;
+          width: 5.19rem;
+          height: .84rem;
+          text-align: center;
+          line-height: .84rem;
+          font-size: .38rem;
+          margin: .3rem auto 0;
+          background: #3f84f6;
+          color: #fff;
+          border-radius: .08rem;
+        }
+      }
+    }
+  }
+</style>