第二步协议样式

components/register-saler/Register.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <div class="step-menu">
-      <ul>
-        <li :class="section == 1?'active':''" >第一步：完善企业信息</li>
-        <li :class="section == 2?'active':''" >第二步：阅读相关条例</li>
-        <li :class="section == 3?'active':''" >第三步：提交申请</li>
+      <ul class="x-step">
+        <li :class="section >= 1?'active':''" >第一步：完善企业信息
+          <i class="x-split"></i></li>
+        <li :class="section >= 2?'active':''" >第二步：阅读相关条例
+          <i class="x-split"></i></li>
+        <li :class="section >= 3?'active':''" >第三步：提交申请</li>
       </ul>
     </div>
     <div class="tab-list">
@@ -141,3 +143,55 @@
     }
   }
 </script>
+<style>
+  .x-step .x-split {
+    float: right;
+  }
+  .x-step li.active .x-split:before {
+    border-left-color: #5078cb;
+    right: -17px;
+    z-index: 4;
+  }
+
+  .x-step li .x-split:before {
+    border-left-color: #e8e8e8;
+    right: -16px;
+    z-index: 2;
+  }
+  .x-step .x-split:before {
+    border-left-color: #e8e8e8;
+    right: -20px;
+    z-index: 2;
+  }
+  .x-step li .x-split:after {
+    border-left-color: #fff;
+    right: -18px;
+    z-index: 1;
+  }
+  .x-step .x-split:after {
+    /*border-left-color: #e8e8e8;*/
+    right: -17px;
+    z-index: 1;
+  }
+  .x-step li.active:after {
+    border-left-color: #5078cb;
+    right: -17px;
+  }
+  .x-step li.active:before {
+    /*border-left-color: #e8e8e8;*/
+    left: -17px;
+    z-index: 3;
+  }
+  .x-step li:first-child:before, .x-step li:last-child:after {
+    border-width: 0;
+  }
+  .x-step li.active:before, .x-step li.active:after, .x-step .x-split:before, .x-step .x-split:after {
+    position: absolute;
+    top: 0;
+    display: inline-block;
+    border-top: 17px solid transparent;
+    border-bottom: 17px solid transparent;
+    border-left: 17px solid transparent;
+    content: '';
+  }
+</style>

components/register-saler/register/StepSecond.vue

@@ -3,11 +3,14 @@
   <div class="section">
     <div class="agreement">
       <div class="join_xieyi">
-        <div>
+        <div class="article-flag">
           <span @click="chooseTag=1" :class="chooseTag==1?'active':''">优软商城服务条款</span>
           <span @click="chooseTag=2" :class="chooseTag==2?'active':''">优软商城买卖条例</span>
         </div>
-        <textarea readonly></textarea>
+        <!--<textarea readonly></textarea>-->
+        <div class="text-area">
+          <div class="ql-container ql-snow" v-html="article"></div>
+        </div>
       </div>
     </div>
     <div class="row" style="margin-left: 30px; text-align: center;">
@@ -29,9 +32,18 @@
     props: ['checkData', 'loginData', 'cacheData'],
     data () {
       return {
-        chooseTag: 1
+        chooseTag: 1,
+        article: ''
+      }
+    },
+    watch: {
+      chooseTag: function (val) {
+        this.getArticle(val === 1 ? 21 : 16)
       }
     },
+    mounted () {
+      this.getArticle(21)
+    },
     methods: {
       sectionChange: function (type) {
         if (type === 3) {
@@ -52,15 +64,30 @@
         } else {
           this.$emit('sectionEvent', type)
         }
+      },
+      getArticle: function (num) {
+        this.$http.get('/api/help-service/issues/' + num).then(response => {
+          this.article = response.data.article
+        })
       }
     }
   }
 </script>
 
-<style scoped>
+<style>
+  @import '~assets/scss/help.css';
   .next-btn button:first-child{
     background: #fff;
     color: #5078cb;
     border: 1px solid #5078cb;
   }
+  .join_xieyi .ql-editor {
+    padding-left: 30px;
+  }
+  .join_xieyi .ql-editor span,.join_xieyi .ql-editor a {
+    font-size: 10px;
+  }
+  .join_xieyi .ql-editor br {
+    display: none;
+  }
 </style>

components/register-saler/register/StepThird.vue

@@ -441,6 +441,8 @@
         } else {
 //          this.brands.forEach(function (item) {
 //          })
+          this.brands.forEach(function (item) {
+          })
           if (this.brands[0].name === '') {
             validCode = 1
           } else if (this.brands[0].url === '') {

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://www.usoftmall.com/' : 'http://192.168.253.121:8080/platform-b2c/')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://www.usoftmall.com/' : 'http://192.168.253.123:8080/platform-b2c/')
 
 module.exports = {
   router: {

pages/register-saler/index.vue

@@ -82,6 +82,7 @@
     font-size: 14px;
     color: #555;
     text-align: center;
+    position: relative;
   }
   .step-menu ul li:hover{
     cursor: pointer;
@@ -89,7 +90,7 @@
     color: #fff;*/
   }
   .step-menu ul li.active{
-    background: #0099ff;
+    background: #5078cb;
     color: #fff;
   }
   .become-store .section{
@@ -222,11 +223,11 @@
     margin-top: 40px;
     margin-left: 190px;
   }
-  .join_xieyi div {
+  .join_xieyi div.article-flag {
     width: 26px;
     display: inline-block;
   }
-  .join_xieyi div span {
+  .join_xieyi div.article-flag span {
     display: block;
     height: 176px;
     border: 1px solid;
@@ -236,21 +237,21 @@
     background: #e5e5e5;
     color: #a0a0a0;
   }
-  .join_xieyi div span:first-child {
+  .join_xieyi div.article-flag span:first-child {
     border-bottom: none;
   }
-  .join_xieyi div span:hover {
+  /*.join_xieyi div.article-flag span:hover {
     color: #708ed2;
     border-color: #708ed2;
     background: #fff;
-  }
-  .join_xieyi div span.active {
+  }*/
+  .join_xieyi div.article-flag span.active {
     color: #708ed2;
     border-color: #708ed2;
     background: #fff;
   }
 
-  .join_xieyi textarea {
+  .join_xieyi div.text-area {
     display: inline-block;
     float: right;
     width: 592px;
@@ -258,6 +259,7 @@
     overflow: auto;
     word-break: break-all;
     outline: none;
+    border: 1px solid;
     border-left: none;
   }
   .x-btn-blank{

pages/store/_uuid/index.vue

@@ -9,6 +9,9 @@ import axios from '~plugins/axios'
 import { CommodityList, RecommendProduct } from '~components/store'
 
 export default {
+//  validate ({ params }) {
+//    return false
+//  },
   layout: 'shop',
   data () {
     return {