搜索店铺代码和开店部分代码

components/searchStore/SearchTitle.vue

@@ -1,40 +1,44 @@
 <template>
   <div class="search-store-title">
     <span class="search-result">
-      搜索
-      <span>"华商龙"</span>
-      ，为您找到
-      <span>1000</span>
+      搜索"
+      <span>{{keyword}}</span>
+      "，为您找到
+      <span v-text="goodsCount">1000</span>
       家店铺：
     </span>
     <div class="tab-filter" >
-      <div class="fl">&nbsp;&nbsp;| 产品信息(<span class="text-num"></span><span class="text-num"></span>)</div>
       <div class="fr">
         <div class="active"><a >综合排序</a></div>
-        <div class=""><a >现货优选</a></div>
-        <div class=""><a >型号精确</a></div>
+        <div class=""><a >库存</a></div>
+        <div class=""><a >销量</a></div>
+        <div class=""><a >信用</a></div>
+        <div class=""><a >店铺类型</a></div>
+        <div class=""><a >所在地</a></div>
+    </div>
       <div class="off">
-        <a @click="list_open=!list_open">
-          <span v-text="list_open?'收起':'展开'"></span>
-          <i class="fa fa-angle-down" v-show="!list_open"></i>
-          <i class="fa fa-angle-up"v-show="list_open"></i>
+        <a>
+          <span>收起</span>
+          <!-- <i class="fa fa-angle-down"></i>-->
+          <i class="fa fa-angle-up"></i>
         </a>
       </div>
-    </div>
+  </div>
   </div>
 </template>
 <script>
   export default {
-    data () {
-      return {
-        keyword: this.$route.query.w
+    props: ['keyword'],
+    computed: {
+      goodsCount () {
+        return this.$store.state.searchStore.searchStoreDetail.detail.data.totalElements || 0
       }
     }
   }
 </script>
 <style>
   .search-store-title {
-    margin: 10px 0;
+    margin-top: 10px;
   }
   .search-store-title .search-result {
 
@@ -42,7 +46,7 @@
   .tab-filter{
     width: 1190px;
     height: 40px;
-    margin: 0 auto;
+    margin: 10px auto;
     line-height: 40px;
     margin-bottom: 10px;
     background: #f1efef;

components/searchStore/StoreContent.vue

@@ -0,0 +1,212 @@
+<template>
+  <div>
+  <ul class="store-list" v-if="storeData.content && storeData.content.length > 0">
+    <li v-for="store in storeData.content">
+      <div class="store-content-left">
+        <img :src="store.logoUrl?store.logoUrl:'/images/all/default.png'" class="storeImg" alt="">
+        <div class="store-detail">
+          <span>{{store.storeName}}</span>
+        </div>
+        <div class="btn-content">
+          <span style="position: relative;" class="call-seller">
+            <img src="static/img/common/songguo.png?_v=1503050008623">
+							<a name="21059" href="javascript:void(0)" class="contact_btn">联系卖家</a>
+          </span>
+          <a class="focus-store store-btn" @click="focusStore(store)">关注店铺</a>
+          <a :href="'/store/' + store.uuid" class="enter-store store-btn">进入店铺</a>
+        </div>
+      </div>
+      <ul class="store-component-list">
+        <li>
+          <img src="/images/all/default.png" alt="">
+          <span class="store-component-kind">asdadasdadas</span>
+          <span class="store-component-brand">sadasdasda</span>
+          <span class="store-component-name">sadasdada</span>
+        </li>
+        <li>
+          <img src="/images/all/default.png" alt="">
+          <span class="store-component-kind">asdadasdadas</span>
+          <span class="store-component-brand">sadasdasda</span>
+          <span class="store-component-name">sadasdada</span>
+        </li>
+        <li>
+          <img src="/images/all/default.png" alt="">
+          <span class="store-component-kind">asdadasdadas</span>
+          <span class="store-component-brand">sadasdasda</span>
+          <span class="store-component-name">sadasdada</span>
+        </li>
+        <li>
+          <img src="/images/all/default.png" alt="">
+          <span class="store-component-kind">asdadasdadas</span>
+          <span class="store-component-brand">sadasdasda</span>
+          <span class="store-component-name">sadasdada</span>
+        </li>
+      </ul>
+    </li>
+  </ul>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      size="tiny"
+    >
+      <h3 class="header-text">关注成功！</h3>
+      <div class="focus modal-body">
+        <button type="button" @click="dialogVisible = false" class="btn" style="margin-left:25px;">关&nbsp;&nbsp;闭</button>
+        <button type="button" @click="dialogVisible = false" class="focus-btn btn btn btn-info" style="margin-left:35px;">
+          <a href="/user#/storeFocus" target="_blank">查看我的店铺关注</a>
+        </button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        dialogVisible: false
+      }
+    },
+    computed: {
+      user () {
+        return this.$store.state.option.user
+      },
+      storeData () {
+        return this.$store.state.searchStore.searchStoreDetail.detail.data
+      }
+    },
+    methods: {
+      focusStore: function (store) {
+        if (!this.user.logged) {
+          this.$http.get('/login/page').then(response => {
+            if (response.data) {
+              this.$router.push('/auth/login')
+            }
+          })
+        } else {
+          this.$http.get('/trade/storeFocus/ifFocus', {params: {storeid: store.id}})
+            .then(response => {
+              if (response.data === 'true') {
+                // 已关注
+                this.$message.error('店铺已关注，不能重复关注')
+              } else {
+                // 未关注
+                this.$http.post('/trade/storeFocus/save', {storeName: store.storeName, storeid: store.id})
+                  .then(response => {
+                    if (response.data === 'success') {
+                      // 关注成功
+                      this.dialogVisible = true
+                    } else {
+                      // 关注失败
+                      this.$message.error('关注失败')
+                    }
+                  })
+              }
+            })
+        }
+      }
+    }
+  }
+</script>
+<style scoped>
+  .store-list {
+    border-right: 1px solid;
+  }
+  .store-list >li{
+    border-bottom: 1px solid;
+    padding: 20px 0;
+  }
+  .store-content-left {
+    width: 550px;
+    display: inline-block;
+  }
+  .store-content-left >div {
+    display: inline-block;
+  }
+  .store-content-left >img.storeImg {
+    border: 1px solid;
+    width: 250px;
+    height: 200px;
+  }
+  .btn-content {
+    position: relative;
+    top: 30px;
+    float: right;
+  }
+  .btn-content >span {
+    display: block;
+  }
+  .btn-content >span:hover {
+    cursor: pointer;
+  }
+  .store-detail {
+    margin-left: 20px;
+  }
+  .store-detail >span{
+    font-size: 14px;
+    font-weight: 700;
+  }
+  .btn-content .call-seller {
+    margin-bottom: 30px;
+  }
+  .btn-content .call-seller .contact_btn {
+    width: 62px;
+    height: 18px;
+    line-height: 18px;
+    background: #ef7f03;
+    display: inline-block;
+    text-align: center;
+    color: #fff;
+    font-size: 12px;
+    border-radius: 5px;
+  }
+  .btn-content .store-btn {
+    padding: 5px;
+    background: #169bd5;
+    text-align: center;
+    border-radius: 5px;
+    color: white;
+    display: block;
+  }
+  .btn-content .focus-store {
+    margin-bottom: 30px;
+  }
+  .btn-content .enter-store {
+
+  }
+  .store-component-list {
+    width: 639px;
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 20px;
+  }
+  .store-component-list >li {
+    display: inline-block;
+    text-align: center;
+    padding: 5px 15px;
+    border: 1px solid;
+    margin-left: 20px;
+  }
+  .store-component-list >li img {
+    width: 100px;
+    height:60px;
+  }
+  .store-component-list >li span {
+    display: block;
+    font-size: 12px;
+  }
+  .store-component-list .store-component-kind {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .header-text {
+    text-align: center;
+    font-size: 20px;
+    color: #008B00;
+    margin-top: 0;
+  }
+  .el-dialog__body{
+    padding: 20px !important;
+  }
+  .focus button.focus-btn a{
+    color: #fff;
+  }
+</style>

components/searchStore/index.js

@@ -1,3 +1,4 @@
 import SearchTitle from './SearchTitle.vue'
+import StoreContent from './StoreContent.vue'
 
-export { SearchTitle }
+export { SearchTitle, StoreContent }

pages/register-saler/index.vue

@@ -1,14 +1,684 @@
 <template>
-<div>
-  <h1>啊啊啊啊啊</h1>
-</div>
+  <div class="become-store">
+    <div class="content">
+      <reg-header></reg-header>
+      <register></register>
+    </div>
+  </div>
 </template>
-
 <script>
+  import { RegHeader, Register } from '~components/register-saler'
   export default {
+    name: 'index',
+    components: {
+      RegHeader,
+      Register
+    }
   }
 </script>
-
 <style>
+  /* 公共模块 */
+  body{
+    background: #F5F5F5;
+    font-family: "Microsoft Yahei", "微软雅黑";
+  }
+  .become-store{
+    width: 100%;
+    margin: 0 auto;
+  }
+  .become-store .content{
+    width: 1026px;
+    margin: 0 auto;
+    background: #fff;
+    padding-bottom: 40px;
+    border: #e8e8e8 1px solid;
+  }
+  .become-store .content .h3{
+    font-size: 24px;
+    line-height: 80px;
+    text-align: center;
+    font-weight: bold;
+  }
+  .become-store .content .title{
+    width: 70%;
+    margin: 0 auto;
+    margin-bottom: 40px;
+  }
+  .become-store .content .title .col-md-6{
+    padding: 0 45px;
+  }
+  .become-store .content .title h4{
+    font-size: 18px;
+    line-height: 30px;
+    text-align: center;
+  }
+  .become-store .content .title p{
+    font-size: 14px;
+    line-height: 25px;
+    color: #666;
+  }
+  .step-menu{
+    width: 96%;
+    margin: 0 auto;
+    height: 34px;
+    background: #e8e8e8;
+    line-height: 34px;
+  }
+  .step-menu ul{
+    width: 100%;
+    margin: 0 auto;
+  }
+  .step-menu ul li{
+    width: 33.33333333%;
+    float: left;
+    height: 34px;
+    line-height: 34px;
+    font-size: 14px;
+    color: #555;
+    text-align: center;
+  }
+  .step-menu ul li:hover{
+    cursor: pointer;
+    background: #0099ff;
+    color: #fff;
+  }
+  .step-menu ul li.active{
+    background: #0099ff;
+    color: #fff;
+  }
+  .become-store .section{
+    width: 100%;
+    margin: 0 auto;
+  }
+  .become-store .section .register{
+    width: 95%;
+    margin: 0 auto;
+    padding-top: 30px;
+  }
+  .become-store .section .register .row{
+    line-height: 34px;
+    padding-bottom: 10px;
+    width: 80%;
+    margin: 0 auto;
+  }
+  .become-store .section .register .row p{
+    margin-bottom: 0;
+  }
+  .become-store .section .register .row .form-control{
+    border-color: #ccc;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .x-form-set-header {
+    position: relative;
+    margin-bottom: 20px;
+  }
+  .x-form-set-header h4 {
+    font-size: 20px;
+    font-weight: 400;
+    color: #888;
+    margin-top: 0;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #ebebeb;
+  }
+  .x-form-set-header:after {
+    content: "";
+    width: 120px;
+    height: 2px;
+    background: #5078cb;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+  .x-required:before {
+    position: relative;
+    bottom: -5px;
+    content: "* ";
+    font-size: 18px;
+    color: #f4645f;
+  }
+  .register label{
+    font-size: 14px;
+    color: #555;
+    text-align: right;
+    padding-right: 10px;
+  }
+  .next-btn{
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+    padding-top: 30px !important;
+  }
+  .next-btn button{
+    width: 120px;
+    height: 34px;
+    background: #5078CB;
+    text-align: center;
+    border: none;
+    font-size: 14px;
+    color: #fff;
+    margin-top: 30px;
+    border-radius: 3px;
+    margin: 0 20px;
+  }
+  .no-apply{
+    width: 150px;
+    height: 34px;
+    line-height: 34px;
+    background: #0099ff;
+    text-align: center;
+    border: none;
+    font-size: 14px;
+    color: #fff;
+    margin-top: 30px;
+    margin: 0 20px;
+    float: right;
+    border-radius: 3px;
+  }
+  .next-btn button:hover{
+    background: #3765cb;
+    color: #fff;
+  }
+  .agreement{
+    width: 100%;
+    margin: 0 auto;
+  }
+  .step-last{
+    width: 92%;
+    margin: 0 auto;
+  }
+  .step-last .h4{
+    font-size: 18px;
+    line-height: 40px;
+    margin: 20px 0 0 0;
+  }
+  .step-last p.title{
+    font-size: 14px;
+    color: #666;
+    line-height: 30px;
+    text-align: left;
+    width: 100% !important;
+  }
+  .apply-include{
+    width: 100%;
+    margin: 0 auto;
+    height: 300px;
+    border: #e8e8e8 1px solid;
+    line-height: 300px;
+    font-size: 18px;
+    text-align: center;
+  }
+  /*服务协议*/
+  .join_xieyi{ width:92%; margin:0px auto; border-top:#eee 1px solid;border-bottom:#eee 1px solid; padding-top:50px; padding-bottom:50px; margin-bottom: 30px;}
+  .join_xieyi h3{ font-size:24px; color:#0099ff; text-align:center; padding-bottom:10px;}
+  .join_xieyi p{ font-size:14px; color:#666; line-height:35px; width:100%; margin:0px auto;}
+  .join_xieyi p span{ font-size:16px; font-weight:bold; color:#333; position:relative; margin-left:14px; height:30px; display:inline-block; margin-top:20px;}
+ /* .section{
+    display: none;
+  } */
+  .x-btn-blank{
+    border: 1px solid #ccc;
+    background: #fff;
+    color: #888;
+    position: relative;
+    overflow: hidden;
+    text-align: left;
+    display: block;
+    height: 34px;
+    line-height: 31px;
+  }
+  .file-input{
+    position: absolute;
+    font-size: 100px;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    opacity: 0;
+  }
+  .x-btn-blank i{
+    margin-left: 5px;
+    color: #888;
+    font-size: 16px;
+    position: relative;
+    top: 2px;
+  }
+  .register .col-sm-5 i.fa-info-circle{
+    font-size: 16px;
+    color: #888;
+    position: relative;
+    top: 2px;
+    margin-right: 5px;
+  }
+  .register .col-sm-5 p, .register .col-sm-5 p i{
+    color: red !important;
+  }
+  .register .col-sm-5 span.fa-map-marker, .register .col-sm-5 span.web{
+    position: absolute;
+    top: 1px;
+    z-index: 2;
+    display: block;
+    width: 34px;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+    color: #999;
+    font-size: 16px;
+    left: 12px;
+  }
+  .register .col-sm-5 span.web{
+    font-size:14px;
+    left:25px;
+  }
+  /* 开店申请模块 */
+  .com-input{
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    display: inline-block !important;
+  }
+  .el-upload-list--picture-card .el-upload-list__item{
+    width: 160px;
+    height: 120px;
+    top: 69px;
+  }
+  div.vendor_store_apply {
+    margin: 0 auto;
+    width: 1026px;
+    background-color: #FFFFFF;
+    margin-bottom: 20px;
+    margin-top: 20px;
+  }
+
+  div.vendor_store_apply .com_row {
+    padding: 0 40px;
+    min-height: 40px;
+  }
+
+  div.vendor_store_apply .title_row {
+    margin-bottom: 20px;
+    border-bottom: #e8e8e8 1px solid;
+  }
+
+  div.vendor_store_apply .custom_col {
+    margin: 0;
+    padding: 0;
+  }
+
+  div.vendor_store_apply .custom_col img.previewImage {
+    max-width: 160px;
+    max-height: 120px;
+    cursor: pointer;
+    /*padding: 0 30px;*/
+  }
+
+  div.vendor_store_apply .row h2 {
+    padding: 10px 0;
+    font-size: 16px;
+    font-weight: 500;
+    color: #000000;
+  }
+
+  div.vendor_store_apply .row span {
+    display: block;
+    padding: 10px 0;
+    font-size: 14px;
+    color: #000000;
+  }
+
+  div.vendor_store_apply #file_upload {
+    width: 100px;
+    height: 100px;
+    border:1px solid #CDCDCD;
+    /*background: url("static/img/vendor/images/upload.png");*/
+  }
+
+  div.vendor_store_apply #upload_qualification {
+    width: 100px;
+    height: 100px;
+    opacity: 0;
+  }
 
+  div.vendor_store_apply .custom_tab {
+    margin: 0 15px;
+    width: 90px;
+    text-align: center;
+  }
+
+  div.vendor_store_apply .nav li.custom_tab.active>a,
+  div.vendor_store_apply .nav li.custom_tab.active>a:focus,
+  div.vendor_store_apply .nav li.custom_tab.active>a:hover {
+    border: 1px solid #5078CB;
+    border-bottom-color: transparent;
+    color: #5078cb;
+  }
+
+  div.vendor_store_apply .uploadify-button {
+    display: block;
+  }
+
+  div.vendor_store_apply .custom_col .show_image_area {
+    height: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .nav-tabs{
+    height: 41px;
+    background: none;
+    padding: 0 40px;
+  }
+  .nav-tabs>li>a{
+    border-radius: 0;
+    color: #333;
+  }
+  div.vendor_store_apply .btn-primary{
+    background: #5078cb;
+    border-radius: 0;
+  }
+  div.vendor_store_apply .btn-primary:hover{
+    background: #3f7ae3;
+  }
+  div.vendor_store_apply .com_row .col-md-2{
+    width: 120px;
+  }
+  div.vendor_store_apply .com_row .col-md-10 span{
+    color: #666;
+  }
+
+  /*修改的样式*/
+  div.vendor_store_apply .custom_col .show_image_area{
+    position: relative;
+    overflow: hidden;
+  }
+  .hover-show{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 120px;
+    left: 0;
+    background: rgba(0,0,0,.5);
+  }
+  div.vendor_store_apply .custom_col .show_image_area .hover-show{
+    top: 0;
+  }
+  .hover-show .delete{
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    float: right;
+    text-align: center;
+  }
+  .hover-show .delete:hover{
+    cursor: pointer;
+  }
+  .hover-show .delete i{
+    color: #fff;
+    font-size: 18px;
+  }
+  .hover-show a{
+    display: inline-block;
+    width: 100%;
+    height: 60px;
+    font-size: 14px;
+    color: #fff;
+    text-align: center;
+    line-height: 60px;
+  }
+  .hover-show a i{
+    margin-right: 5px;
+    font-size: 16px;
+  }
+  .brand-type{
+    line-height: 34px;
+    font-size: 14px;
+    margin: 20px 20px 5px 20px;
+  }
+  .brand-type .brand-small-img{
+    position: relative;
+    width: 84px;
+    height: 84px;
+    overflow: hidden;
+    text-align: center;
+    border: #e8e8e8 1px solid;
+  }
+  .brand-type .brand-small-img .preview img{
+    max-width: 84px;
+    max-height: 84px;
+  }
+  .brand-type em{
+    color: #ff0000;
+  }
+  .brand-type .col-md-7,.brand-type .col-md-1{
+    margin-top: 25px;
+  }
+  .brand-small-upload .file-text,.brand-type .brand-small-img{
+    float: left;
+  }
+  .brand-small-upload .file-text{
+    width: 120px;
+    margin-left: 10px;
+    line-height: 20px;
+    margin-top: 6%;
+  }
+  .brand-small-upload .delete{
+    float: right;
+    text-align: center;
+    line-height: 84px;
+  }
+  .brand-small-upload .delete i{
+    font-size: 18px;
+    color: #5078cb;
+  }
+  .brand-small-upload .delete:hover{
+    cursor: pointer;
+  }
+  .brand-small-upload .delete:hover i{
+    color: #f00;
+  }
+  .brand-small-upload .brand-small-img .hover-show{
+    top: 0;
+  }
+  .brand-small-upload .brand-small-img .hover-show{
+  }
+  .brand-small-upload .brand-small-img .hover-show span i{
+    color: #fff;
+  }
+  .brand-small-upload .brand-small-img .hover-show span.delete{
+    line-height: 30px;
+    padding: 0;
+  }
+  .brand-small-upload .brand-small-img .hover-show a{
+    line-height: 30px;
+    height: 30px;
+  }
+  .tab-content .com_row{
+    margin:40px 0 0;
+    border-bottom: #ccc 1px dashed;
+    padding-bottom: 40px !important;
+  }
+  .tab-content .com_row .col-md-12{
+    color: #999;
+    margin-top: 20px;
+    font-size: 12px;
+    padding-left: 50px;
+  }
+  .brand-small-upload .col-md-12{
+    color: #999;
+    font-size: 12px;
+    padding-left: 0;
+  }
+  .tab-content .com_row .col-md-12 em,.brand-small-upload .col-md-12 em{
+    color: #f00;
+  }
+  .add-brand{
+    text-align: center;
+    border-bottom: #ccc 1px dashed;
+    margin: 0 0 20px 0;
+    height: 34px;
+  }
+  .add-brand a{
+    font-size: 14px;
+    color: #5078cb;
+    width: 200px;
+    height: 15px;
+    display: inline-block;
+    border: #ccc 1px dashed;
+    border-top: 0;
+    border-bottom-left-radius: 50px;
+    border-bottom-right-radius: 50px;
+    margin-top: 31px;
+    background: #fff;
+    line-height: 15px;
+    text-decoration: none;
+  }
+  .add-brand a i{
+    margin-right: 5px;
+    font-size: 20px;
+    vertical-align: middle;
+  }
+  .add-brand a em{
+    position: relative;
+    top: -10px;
+    font-weight: bold;
+    font-style: inherit;
+  }
+  .add-brand a:hover em, .add-brand a:active em, .add-brand a:focus em{
+    color: #d32526;
+    text-decoration: none;
+  }
+  .unpass-reason {
+    margin: 0 40px;
+    line-height: 34px;
+  }
+
+  /* 预览框 end */
+
+  .brand-type .dropdown-menu {
+    width: 95%;
+  }
+  .brand-type .dropdown-menu li {
+    font-size: 14px;
+  }
+  .com-del-box{
+    position: fixed;
+    z-index: 2;
+    height: 152px;
+    opacity: 1;
+    background-color: white;
+    width: 310px;
+    -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
+    box-shadow: 0 5px 15px rgba(0,0,0,.5);
+    margin: -155px 0 0 -75px;
+    top: 55%;
+    left: 50%;
+  }
+  .com-del-box .title{
+    height: 30px;
+    background-color: #5078cb;
+    text-align: right;
+    padding-right: 15px;
+    line-height: 30px;
+  }
+  .com-del-box .title a{
+    color: white;
+    font-size: 16px;
+  }
+  .com-del-box .content{
+    width: 100%;
+    text-align: center;
+    margin: 0 auto;
+  }
+  .com-del-box .content p{
+    line-height: 50px;
+    font-size: 14px;
+    padding-top: 10px;
+  }
+  .com-del-box .content p i{
+    color: #5078cb;
+    font-size: 16px;
+    margin-right: 10px;
+  }
+  .com-del-box .content div{
+    width: 100%;
+    text-align: center;
+    margin: 0 auto;
+  }
+  .com-del-box .content div a{
+    width: 55px;
+    height: 26px;
+    line-height: 26px;
+    display: inline-block;
+    text-align: center;
+    font-size: 14px;
+  }
+  .com-del-box .content div a:first-child{
+    background: #b4b5b9;
+    color: #333;
+    margin-right: 10px;
+  }
+  .com-del-box .content div a:last-child{
+    background: #5078cb;
+    color: #fff;
+  }
+  .com-del-box .content div a:hover{
+    background: #3f7ae3;
+    color: #fff;
+  }
+  div.vendor_store_apply .custom_col .show_image_area{
+    width: 160px;
+    border: #dcdcdc 1px solid;
+    margin: 0 10px 0 0;
+    padding: 0;
+  }
+  div.vendor_store_apply .tab-content .custom_col{
+    width: 280px;
+  }
+  div.vendor_store_apply .tab-content .custom_col:first-child{
+    margin-left: 50px;
+  }
+  div.vendor_store_apply .custom_col .row .col-md-5:last-child{
+    width: 110px;
+  }
+  div.vendor_store_apply .custom_col .row .col-md-5:last-child span{
+    margin-top: 85% !important;
+    padding-bottom: 0 !important;
+  }
+  .hoverShow{
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    top: 0px;
+    right: 0;
+    background: rgba(0,0,0,.4);
+    display: none;
+  }
+
+  div.vendor_store_apply .custom_col .show_image_area:hover .hoverShow{
+    display: block;
+  }
+  div.vendor_store_apply .custom_col .show_image_area .deleteImg{
+    position: absolute;
+    right: 7px;
+    top: 0;
+    display: inline-block;
+    padding: 0;
+    margin-top: 6px;
+    font-size: 18px;
+    color: #fff;
+  }
+  .hover-show a{
+    color: #fff;
+    text-decoration: none;
+  }
+  .hover-show a:hover, .hover-show a:active, .hover-show a:focus{
+    color: #fff;
+    text-decoration: none;
+  }
 </style>
+

pages/searchStore/_keyword.vue

@@ -1,14 +1,26 @@
 <template>
   <div class="container" id="searchResult">
-    <search-title></search-title>
+    <search-title :keyword="key"></search-title>
+    <store-content></store-content>
   </div>
 </template>
 <script>
-  import { SearchTitle } from '~components/searchStore'
+  import { SearchTitle, StoreContent } from '~components/searchStore'
   export default {
     layout: 'main',
     components: {
-      SearchTitle
+      SearchTitle,
+      StoreContent
+    },
+    data () {
+      return {
+        key: this.$route.query.w
+      }
+    },
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('searchStore/searchStoreDetail', {page: 1, count: 4, keyword: route.query.w, types: 'ORIGINAL_FACTORY', op: 'pageByType'})
+      ])
     }
   }
 </script>

store/searchStore.js

@@ -0,0 +1,15 @@
+import axios from '~plugins/axios'
+
+export const actions = {
+  // 获取搜索店铺数据
+  searchStoreDetail ({ commit }, params = {}) {
+    commit('searchStoreDetail/REQUEST_STORE', params)
+    return axios.get(`/api/store-service/stores`, {params})
+      .then(response => {
+        commit('searchStoreDetail/GET_STORE_SUCCESS', response.data)
+      }, err => {
+        commit('searchStoreDetail/GET_STORE_FAILURE', err)
+      })
+  }
+}
+

store/searchStore/searchStoreDetail.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  detail: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_STORE (state) {
+    state.detail.fetching = true
+  },
+  GET_STORE_FAILURE (state) {
+    state.detail.fetching = false
+  },
+  GET_STORE_SUCCESS (state, result) {
+    state.detail.fetching = false
+    state.detail.data = result
+  }
+}