调价价格

@@ -2,34 +2,59 @@
   <LayoutApp :title="title">
     <div class="order-page">
       <div class="product">
-        <ImgSize class="pro-img" :src="goodsInfo.goodImg || ''" :width="200" :height="200"></ImgSize>
+        <ImgSize
+          class="pro-img"
+          :src="goodsInfo.goodImg || ''"
+          :width="200"
+          :height="200"
+        ></ImgSize>
         <div class="pro-info">
-          <p class="pro-name">{{goodsInfo.colorName}}, {{goodsInfo.sizeName}}码</p>
-          <p class="stock-info ufo-font">最低售价： ¥{{goodsInfo.leastPrice || '-'}}</p>
+          <p class="pro-name">
+            {{ goodsInfo.colorName }}, {{ goodsInfo.sizeName }}码
+          </p>
+          <p class="stock-info ufo-font">
+            最低售价： ¥{{ goodsInfo.leastPrice || "-" }}
+          </p>
         </div>
       </div>
       <div class="input-container">
-        <InputUfo type="number" placeholder="定价需以9结尾.例如1999"
-                  :maxlength="8" class="ipt-number ufo-font" v-model="chgPrice" @blur="onChange">
+        <InputUfo
+          type="number"
+          placeholder="定价需以9结尾.例如1999"
+          :maxlength="8"
+          class="ipt-number ufo-font"
+          v-model="chgPrice"
+          @blur="onChange"
+        >
           <span class="prepend" slot="prepend">¥</span>
         </InputUfo>
       </div>
       <div class="earnest-container">
-        <p>需支付保证金：</p><p class="earnest-money">{{earnestMoney}}</p><i class="iconfont iconquestion icon-earnest" @click="showEarnestQuestion"></i>
-        <p class="desc">所有商品必须为国内现货，且承诺36小时内发货，交易成功后将自动退还保证金</p>
+        <p>需支付保证金：</p>
+        <p class="earnest-money">{{ earnestMoney }}</p>
+        <i
+          class="iconfont iconquestion icon-earnest"
+          @click="showEarnestQuestion"
+        ></i>
+        <p class="desc">
+          所有商品必须为国内现货，且承诺36小时内发货，交易成功后将自动退还保证金
+        </p>
       </div>
       <div class="fee-container">
         <div class="fee-line">
-          <p class="fee-title">平台费用: <i class="iconfont iconquestion" @click="showFeeDetail"></i></p>
-          <p class="fee-price">{{platformFee.amount}}</p>
+          <p class="fee-title">
+            平台费用:
+            <i class="iconfont iconquestion" @click="showFeeDetail"></i>
+          </p>
+          <p class="fee-price">{{ platformFee.amount }}</p>
         </div>
         <div class="fee-line">
           <p class="fee-title">银行转账费(1%):</p>
-          <p class="fee-price">{{bankTransferFee}}</p>
+          <p class="fee-price">{{ bankTransferFee }}</p>
         </div>
         <div class="fee-line total">
           <p class="fee-title">实际收入:</p>
-          <p class="fee-price">{{income}}</p>
+          <p class="fee-price">{{ income }}</p>
         </div>
       </div>
       <div class="address-container">
@@ -37,12 +62,12 @@
           <i class="iconfont iconaddress"></i>
         </div>
         <div class="address-info">
-          <p class="user-name">{{userAddress.consignee}}</p>
+          <p class="user-name">{{ userAddress.consignee }}</p>
           <p class="user-address">
-            {{userAddress.area}} {{userAddress.address}}
+            {{ userAddress.area }} {{ userAddress.address }}
           </p>
           <p class="user-phone">
-            {{userAddress.mobile}}
+            {{ userAddress.mobile }}
           </p>
         </div>
       </div>
@@ -54,29 +79,39 @@
           <Checkbox :option="labelOption" shape="square" v-model="isAgree"></Checkbox>
         </div>
         <a @click="showAgreement">卖家协议</a>-->
-        <OrderCheck v-model="isAgree" :desc="`卖家协议`" :url="agreementURL"></OrderCheck>
+        <OrderCheck
+          v-model="isAgree"
+          :desc="`卖家协议`"
+          :url="agreementURL"
+        ></OrderCheck>
       </div>
 
-      <div :class="['submit-button', (isAgree && calced) ? 'active' : '']">
+      <div :class="['submit-button', isAgree && calced ? 'active' : '']">
         <button @click="changePrice">提交</button>
       </div>
     </div>
     <!--平台费用问号点击弹框-->
-    <Modal v-model="platformFeeModalVisible" :transfer="true" cancel-text="我知道了">
+    <Modal
+      v-model="platformFeeModalVisible"
+      :transfer="true"
+      cancel-text="我知道了"
+    >
       <div class="fee-dialog-container">
         <p class="modal-title">平台费用</p>
 
         <p class="fee-line">
           <span class="fee-title">商品鉴定费</span>
-          <span class="fee-price">{{platformFee.appraiseFee}}</span>
+          <span class="fee-price">{{ platformFee.appraiseFee }}</span>
         </p>
         <p class="fee-line">
           <span class="fee-title">商品包装费</span>
-          <span class="fee-price">{{platformFee.packageFee}}</span>
+          <span class="fee-price">{{ platformFee.packageFee }}</span>
         </p>
         <p class="fee-line total">
-          <span class="fee-title">平台服务费({{platformFee.goodsPaymentRatePercent}})</span>
-          <span class="fee-price">{{platformFee.serviceFee}}</span>
+          <span class="fee-title"
+            >平台服务费({{ platformFee.goodsPaymentRatePercent }})</span
+          >
+          <span class="fee-price">{{ platformFee.serviceFee }}</span>
         </p>
       </div>
     </Modal>
@@ -84,56 +119,69 @@
 </template>
 
 <script>
-import LayoutApp from '../../../components/layout/layout-app';
-import ScrollView from '../../../components/layout/scroll-view';
-import ImgSize from '../../../components/img-size';
-import {createNamespacedHelpers} from 'vuex';
-import InputUfo from './components/input-ufo';
-import {Checkbox} from 'cube-ui';
-import {get} from 'lodash';
-import Modal from './components/modal';
-import OrderCheck from '../components/confirm/agree';
-
-const {mapState, mapActions} = createNamespacedHelpers('order/priceChange');
+import LayoutApp from "../../../components/layout/layout-app";
+import ScrollView from "../../../components/layout/scroll-view";
+import ImgSize from "../../../components/img-size";
+import { createNamespacedHelpers } from "vuex";
+import InputUfo from "./components/input-ufo";
+import { Checkbox } from "cube-ui";
+import { get } from "lodash";
+import Modal from "./components/modal";
+import OrderCheck from "../components/confirm/agree";
+
+const { mapState, mapActions } = createNamespacedHelpers("order/priceChange");
 // orderCode = 1233499619151
 export default {
-  name: 'noEntryDetail',
-  components: {OrderCheck, Modal, InputUfo, ScrollView, LayoutApp, ImgSize, Checkbox},
+  name: "noEntryDetail",
+  components: {
+    OrderCheck,
+    Modal,
+    InputUfo,
+    ScrollView,
+    LayoutApp,
+    ImgSize,
+    Checkbox
+  },
   data() {
     return {
-      title: '调价',
-      agreementURL: 'https://activity.yoho.cn/feature/3187.html?share_id=5851&title=ufo-%E5%8D%96%E5%AE%B6%E5%8D%8F%E8%AE%AE',
+      title: "调价",
+      agreementURL:
+        "https://activity.yoho.cn/feature/3187.html?share_id=5851&title=ufo-%E5%8D%96%E5%AE%B6%E5%8D%8F%E8%AE%AE",
       platformFeeModalVisible: false,
       platformFee: {
-        amount: '-¥0',
-        appraiseFee: '¥0.00',
-        packageFee: '¥0.00',
-        serviceFee: '¥0.00',
-        goodsPaymentRatePercent: '0.00%',
-        payChannelPercentage: '0.00%'
+        amount: "-¥0",
+        appraiseFee: "¥0.00",
+        packageFee: "¥0.00",
+        serviceFee: "¥0.00",
+        goodsPaymentRatePercent: "0.00%",
+        payChannelPercentage: "0.00%"
       },
-      bankTransferFee: '-¥0',
-      income: '¥0',
-      errorTip: '',
-      chgPrice: '',
+      bankTransferFee: "-¥0",
+      income: "¥0",
+      errorTip: "",
+      chgPrice: "",
       calced: false,
-      earnestMoney: '¥0',
+      earnestMoney: "¥0",
+      // 保证金
+      earnestPrice: 0,
       isAgree: false,
       labelOption: {
-        label: '我已阅读并同意'
+        label: "我已阅读并同意"
       },
       time: 15000
     };
   },
-  asyncData({store, router}) {
-    return store.dispatch('order/priceChange/fetchOrder', {orderCode: router.params.orderCode});
+  asyncData({ store, router }) {
+    return store.dispatch("order/priceChange/fetchOrder", {
+      orderCode: router.params.orderCode
+    });
   },
   mounted() {
     // this.fetchOrder({orderCode: this.$route.params.orderCode});
     // this.inputChange = debounce(this.onChange.bind(this), 500);
   },
   computed: {
-    ...mapState(['noEntryOrderInfo']),
+    ...mapState(["noEntryOrderInfo"]),
     goodsInfo() {
       return this.noEntryOrderInfo.goodsInfo || {};
     },
@@ -145,60 +193,65 @@ export default {
     chgPrice() {
       this.calced = false;
       this.platformFee = {
-        amount: '-¥0',
-        appraiseFee: '¥0.00',
-        packageFee: '¥0.00',
-        serviceFee: '¥0.00',
-        goodsPaymentRatePercent: '0.00%',
-        payChannelPercentage: '0.00%'
+        amount: "-¥0",
+        appraiseFee: "¥0.00",
+        packageFee: "¥0.00",
+        serviceFee: "¥0.00",
+        goodsPaymentRatePercent: "0.00%",
+        payChannelPercentage: "0.00%"
       };
-      this.bankTransferFee = '-¥0';
-      this.income = '¥0';
-      this.earnestMoney = '¥0';
+      this.bankTransferFee = "-¥0";
+      this.income = "¥0";
+      this.earnestMoney = "¥0";
+      this.earnestPrice = 0;
     }
-
   },
   methods: {
-    ...mapActions(['fetchOrder', 'postNoEntryCalcPrice', 'postNoEntryChangePrice']),
+    ...mapActions([
+      "fetchOrder",
+      "postNoEntryCalcPrice",
+      "postNoEntryChangePrice"
+    ]),
     checkPrice(price) {
       let valid = false;
 
       if (!price) {
-        this.errorTip = '没有价格';
+        this.errorTip = "没有价格";
         return false;
       } else if (!/^\d+$/.test(price)) {
-        this.errorTip = '价格只能为正整数';
+        this.errorTip = "价格只能为正整数";
       } else if (!/9$/.test(price)) {
-        this.errorTip = '出售价格必须以9结尾';
+        this.errorTip = "出售价格必须以9结尾";
       } else {
-        this.errorTip = '';
+        this.errorTip = "";
         valid = true;
       }
       console.log(this.errorTip, valid);
       return valid;
     },
-    changePrice() { // 点击提交按钮
+    changePrice() {
+      // 点击提交按钮
       if (this.isAgree && this.calced) {
         this.$createDialog({
-          type: 'confirm',
-          content: '重新出售后本次出售保证金原路返回',
+          type: "confirm",
+          content: "重新出售后本次出售保证金原路返回",
           confirmBtn: {
-            text: '我再想想',
+            text: "我再想想",
             active: true,
-            disabled: false,
+            disabled: false
           },
           cancelBtn: {
-            text: '重新出售',
+            text: "重新出售",
             active: false,
             disabled: false
           },
           onCancel: () => {
             this.onPriceChangeConfirm({
               price: this.chgPrice,
+              earnestPrice: this.earnestPrice,
               skup: this.goodsInfo.skup
             });
           }
-
         }).show();
       }
     },
@@ -211,10 +264,11 @@ export default {
       console.log(result);
 
       if (result && result.code === 200) {
-        this.platformFee = get(result, 'data.platformFee', '');
-        this.bankTransferFee = get(result, 'data.bankTransferFee', '');
-        this.income = '¥' + get(result, 'data.income', '');
-        this.earnestMoney = '¥' + get(result, 'data.earnestMoney', '');
+        this.platformFee = get(result, "data.platformFee", "");
+        this.bankTransferFee = get(result, "data.bankTransferFee", "");
+        this.income = "¥" + get(result, "data.income", "");
+        this.earnestMoney = "¥" + get(result, "data.earnestMoney", "");
+        this.earnestPrice = get(result, "data.earnestMoney", 0);
         this.calced = true;
       } else {
         if (result.message) {
@@ -224,27 +278,30 @@ export default {
 
         this.$createToast({
           txt: this.errorTip,
-          type: 'txt'
+          type: "txt"
         }).show();
       }
     },
-    onChange(price) { // 价格改变时(文本框离开焦点)
+    onChange(price) {
+      // 价格改变时(文本框离开焦点)
       if (this.checkPrice(price)) {
         this.calcPrice(price);
       } else {
         this.$createToast({
           txt: this.errorTip,
-          type: 'txt'
+          type: "txt"
         }).show();
       }
     },
-    showFeeDetail() { // 显示平台费用详情
+    showFeeDetail() {
+      // 显示平台费用详情
       this.platformFeeModalVisible = true;
     },
 
-    showEarnestQuestion() { // 跳转保证金说明页
-      console.log('showEarnest');
-      this.$xianyu.goXianyuNewPage({url: this.agreementURL});
+    showEarnestQuestion() {
+      // 跳转保证金说明页
+      console.log("showEarnest");
+      this.$xianyu.goXianyuNewPage({ url: this.agreementURL });
     },
 
     /**
@@ -253,7 +310,7 @@ export default {
      * @param skup
      * @returns {Promise<void>}
      */
-    async onPriceChangeConfirm({price, skup}) {
+    async onPriceChangeConfirm({ price, earnestPrice, skup }) {
       const that = this;
       const result = await this.postNoEntryChangePrice({
         price,
@@ -264,15 +321,15 @@ export default {
         console.log(result);
         this.$createOrderPayType({
           orderCode: result.data.orderCode,
-          price: price,
-          desc: '保证金',
+          price: parseFloat(`${earnestPrice}`).toFixed(2),
+          desc: "保证金",
           extra: JSON.stringify({
-            type: 'sell',
+            type: "sell",
             back: {
-              name: 'InSaleOrderList'
+              name: "InSaleOrderList"
             },
             forward: {
-              name: 'SellPayOk',
+              name: "SellPayOk",
               query: {
                 orderCode: result.data.orderCode
               }
@@ -281,9 +338,9 @@ export default {
           onCloseAction() {
             that.clearData();
             that.$router.replace({
-              name: 'sellOrderDetail',
+              name: "sellOrderDetail",
               params: {
-                owner: 'sell',
+                owner: "sell",
                 code: result.data.orderCode
               }
             });
@@ -291,30 +348,31 @@ export default {
         }).show();
       } else {
         this.$createToast({
-          txt: result.message || '调价失败',
-          type: 'txt'
+          txt: result.message || "调价失败",
+          type: "txt"
         }).show();
       }
 
       // console.log(result);
     },
-    clearData() { // 清空数据状态
+    clearData() {
+      // 清空数据状态
       console.log(this.$router);
       this.platformFeeModalVisible = false;
       this.platformFee = {
-        amount: '-¥0',
-        appraiseFee: '¥0.00',
-        packageFee: '¥0.00',
-        serviceFee: '¥0.00',
-        goodsPaymentRatePercent: '0.00%',
-        payChannelPercentage: '0.00%'
+        amount: "-¥0",
+        appraiseFee: "¥0.00",
+        packageFee: "¥0.00",
+        serviceFee: "¥0.00",
+        goodsPaymentRatePercent: "0.00%",
+        payChannelPercentage: "0.00%"
       };
-      this.bankTransferFee = '-¥0';
-      this.income = '¥0';
-      this.errorTip = '';
-      this.chgPrice = '';
+      this.bankTransferFee = "-¥0";
+      this.income = "¥0";
+      this.errorTip = "";
+      this.chgPrice = "";
       this.calced = false;
-      this.earnestMoney = '¥0';
+      this.earnestMoney = "¥0";
       this.isAgree = false;
     }
   }
@@ -322,297 +380,297 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .order-page {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
-    -webkit-font-smoothing: antialiased;
-
-    .title {
-      line-height: 82px;
-      font-size: 68px;
-      font-weight: bold;
-      padding: 2px 40px 0 40px;
-    }
+.order-page {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  -webkit-font-smoothing: antialiased;
+
+  .title {
+    line-height: 82px;
+    font-size: 68px;
+    font-weight: bold;
+    padding: 2px 40px 0 40px;
+  }
+
+  .product {
+    margin: 20px auto;
+    padding: 0 30px;
+    height: 200px;
+    display: flex;
 
-    .product {
-      margin: 20px auto;
-      padding: 0 30px;
+    .pro-img {
+      width: 200px;
       height: 200px;
+      overflow: hidden;
       display: flex;
+      align-items: center;
+
+      img {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+    .pro-info {
+      padding: 64px 40px 0 40px;
+      line-height: 32px;
+      overflow: hidden;
 
-      .pro-img {
-        width: 200px;
-        height: 200px;
+      .pro-name {
+        font-size: 24px;
+        color: #444;
         overflow: hidden;
-        display: flex;
-        align-items: center;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
 
-        img {
-          width: 100%;
-          height: auto;
-        }
+      .stock-info {
+        position: relative;
+        color: #000;
+        margin-top: 24px;
+        font-size: 28px;
       }
 
-      .pro-info {
-        padding: 64px 40px 0 40px;
-        line-height: 32px;
-        overflow: hidden;
+      .stock-text {
+        text-indent: 128px;
+        font-size: 28px;
+        font-weight: 600;
+        line-height: 44px;
+      }
+    }
+  }
 
-        .pro-name {
-          font-size: 24px;
-          color: #444;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
+  .input-container {
+    position: relative;
+    display: block;
+    width: 690px;
+    margin: 0 auto;
+    overflow: hidden;
+  }
 
-        .stock-info {
-          position: relative;
-          color: #000;
-          margin-top: 24px;
-          font-size: 28px;
-        }
+  .ipt-number {
+    /deep/ .prepend {
+      width: 40px;
+      margin-left: 20px;
+      text-align: left;
+    }
+  }
 
-        .stock-text {
-          text-indent: 128px;
-          font-size: 28px;
-          font-weight: 600;
-          line-height: 44px;
-        }
-      }
+  .earnest-container {
+    width: 690px;
+    margin: 10px auto;
+    border-bottom: 1px solid #f0f0f0;
+
+    p {
+      display: inline-block;
+      font-size: 28px;
+      line-height: 60px;
     }
 
-    .input-container {
-      position: relative;
-      display: block;
-      width: 690px;
-      margin: 0 auto;
-      overflow: hidden;
+    .earnest-money {
+      color: #c94353;
     }
 
-    .ipt-number {
-      /deep/ .prepend {
-        width: 40px;
-        margin-left: 20px;
-        text-align: left;
-      }
+    .desc {
+      font-size: 24px;
+      color: #999;
+      line-height: 32px;
+      padding-bottom: 30px;
     }
 
-    .earnest-container {
-      width: 690px;
-      margin: 10px auto;
-      border-bottom: 1px solid #f0f0f0;
+    .icon-earnest {
+      font-size: 28px;
+      color: #999;
+      margin-left: 20px;
+    }
+  }
 
-      p {
-        display: inline-block;
-        font-size: 28px;
-        line-height: 60px;
-      }
+  .fee-container {
+    width: 690px;
+    margin: 40px auto 20px auto;
+    overflow: hidden;
+    border-bottom: 1px solid #f0f0f0;
 
-      .earnest-money {
-        color: #c94353;
-      }
+    .fee-line {
+      margin-bottom: 20px;
+      color: #999;
+      font-size: 28px;
+      display: flex;
 
-      .desc {
-        font-size: 24px;
-        color: #999;
-        line-height: 32px;
-        padding-bottom: 30px;
+      .fee-title {
+        width: 50%;
       }
 
-      .icon-earnest {
-        font-size: 28px;
-        color: #999;
-        margin-left: 20px;
+      .fee-price {
+        width: 50%;
+        text-align: right;
       }
-    }
-
-    .fee-container {
-      width: 690px;
-      margin: 40px auto 20px auto;
-      overflow: hidden;
-      border-bottom: 1px solid #f0f0f0;
 
-      .fee-line {
-        margin-bottom: 20px;
-        color: #999;
-        font-size: 28px;
-        display: flex;
+      &.total {
+        margin-bottom: 40px;
 
         .fee-title {
-          width: 50%;
+          color: #000;
         }
 
         .fee-price {
-          width: 50%;
-          text-align: right;
-        }
-
-        &.total {
-          margin-bottom: 40px;
-
-          .fee-title {
-            color: #000;
-          }
-
-          .fee-price {
-            color: #c94353;
-          }
+          color: #c94353;
         }
+      }
 
-        .iconquestion {
-          font-size: 28px;
-        }
+      .iconquestion {
+        font-size: 28px;
       }
     }
+  }
 
-    .white-space {
-      position: relative;
-      width: 100%;
-      height: 180px;
-    }
+  .white-space {
+    position: relative;
+    width: 100%;
+    height: 180px;
+  }
 
-    .address-container {
-      position: relative;
-      width: 690px;
-      margin: 40px auto 40px auto;
-      overflow: hidden;
+  .address-container {
+    position: relative;
+    width: 690px;
+    margin: 40px auto 40px auto;
+    overflow: hidden;
+
+    .icon-container {
+      position: absolute;
+      width: 100px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
-      .icon-container {
+      .iconfont {
         position: absolute;
-        width: 100px;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .iconfont {
-          position: absolute;
-          font-size: 40px;
-          font-weight: 500;
-          color: #000;
-        }
+        font-size: 40px;
+        font-weight: 500;
+        color: #000;
       }
+    }
 
-      .address-info {
-        overflow: hidden;
-        padding: 0 0 20px 100px;
+    .address-info {
+      overflow: hidden;
+      padding: 0 0 20px 100px;
 
-        .user-name {
-          font-size: 32px;
-          font-weight: 500;
-          line-height: 36px;
-          margin-bottom: 10px;
-        }
+      .user-name {
+        font-size: 32px;
+        font-weight: 500;
+        line-height: 36px;
+        margin-bottom: 10px;
+      }
 
-        .user-address {
-          font-size: 24px;
-          color: #999;
-          line-height: 30px;
-          margin-bottom: 10px;
-        }
+      .user-address {
+        font-size: 24px;
+        color: #999;
+        line-height: 30px;
+        margin-bottom: 10px;
+      }
 
-        .user-phone {
-          font-size: 28px;
-          font-weight: bold;
-          line-height: 32px;
-        }
+      .user-phone {
+        font-size: 28px;
+        font-weight: bold;
+        line-height: 32px;
       }
     }
   }
+}
 
-  /deep/ .modal-content {
-    width: 570px;
-  }
+/deep/ .modal-content {
+  width: 570px;
+}
 
-  .fee-dialog-container {
-    width: 100%;
+.fee-dialog-container {
+  width: 100%;
 
-    .modal-title {
-      line-height: 120px;
-      text-align: center;
-      font-size: 28px;
-    }
+  .modal-title {
+    line-height: 120px;
+    text-align: center;
+    font-size: 28px;
+  }
 
-    .fee-line {
-      margin-bottom: 20px;
-      color: #000;
-      font-size: 28px;
-      display: flex;
+  .fee-line {
+    margin-bottom: 20px;
+    color: #000;
+    font-size: 28px;
+    display: flex;
 
-      .fee-title {
-        width: 55%;
-      }
+    .fee-title {
+      width: 55%;
+    }
 
-      .fee-price {
-        width: 45%;
-        text-align: right;
-      }
+    .fee-price {
+      width: 45%;
+      text-align: right;
     }
   }
+}
+
+.submit-container {
+  width: 100%;
+  height: 180px;
+  position: fixed;
+  bottom: 0;
+  z-index: 9;
 
-  .submit-container {
+  .agree-container {
     width: 100%;
-    height: 180px;
-    position: fixed;
-    bottom: 0;
-    z-index: 9;
-
-    .agree-container {
-      width: 100%;
-      border-top: 1px solid #f0f0f0;
-      background-color: #fff;
-
-      a {
-        display: inline-block;
-        text-decoration: underline;
-        color: #64ad88;
-      }
+    border-top: 1px solid #f0f0f0;
+    background-color: #fff;
 
-      .checkbox {
-        display: inline-block;
-      }
+    a {
+      display: inline-block;
+      text-decoration: underline;
+      color: #64ad88;
+    }
 
-      /deep/ .cube-checkbox-wrap {
-        padding: 10px 0;
-        color: #999;
+    .checkbox {
+      display: inline-block;
+    }
 
-        .cube-checkbox-label {
-          font-size: 0.6rem;
-        }
-      }
+    /deep/ .cube-checkbox-wrap {
+      padding: 10px 0;
+      color: #999;
 
-      /deep/ .cube-checkbox_checked .cube-checkbox-ui i {
-        color: #0c2b48;
+      .cube-checkbox-label {
+        font-size: 0.6rem;
       }
     }
 
-    .submit-button {
-      position: relative;
-      width: 100%;
-      height: 100px;
-      background-color: #fff;
-
-      button {
-        display: block;
-        width: 670px;
-        height: 88px;
-        border-radius: 60px;
-        margin: 0 auto;
-        color: #fff;
-        background-color: #ccc;
-        border: none;
-      }
+    /deep/ .cube-checkbox_checked .cube-checkbox-ui i {
+      color: #0c2b48;
+    }
+  }
 
-      &.active button{
-        background-color: #0c2b48;
-      }
+  .submit-button {
+    position: relative;
+    width: 100%;
+    height: 100px;
+    background-color: #fff;
+
+    button {
+      display: block;
+      width: 670px;
+      height: 88px;
+      border-radius: 60px;
+      margin: 0 auto;
+      color: #fff;
+      background-color: #ccc;
+      border: none;
+    }
+
+    &.active button {
+      background-color: #0c2b48;
     }
   }
+}
 </style>