店铺关注

components/default/Footer.vue

@@ -5,17 +5,17 @@
         <div class="item">
           <h5>用户指南</h5>
           <ul class="list-unstyled">
-            <li><a href="/help#/issue/50" target="_blank">服务条款</a></li>
-            <li><a href="/help#/issue/16" target="_blank">买卖条例</a></li>
-            <li><a href="/help#/issue/51" target="_blank">代收代付协议</a></li>
+            <li><a href="http://www.usoftmall.com/help#/issue/50" target="_blank">服务条款</a></li>
+            <li><a href="http://www.usoftmall.com/help#/issue/16" target="_blank">买卖条例</a></li>
+            <li><a href="http://www.usoftmall.com/help#/issue/51" target="_blank">代收代付协议</a></li>
           </ul>
         </div>
         <div class="item">
           <h5>关于我们</h5>
           <ul class="list-unstyled">
-            <li><a href="/help#/issue/1" target="_blank">公司简介</a></li>
-            <li><a href="/help#/issue/28" target="_blank">公司地址</a></li>
-            <li><a href="/help#/issue/1" target="_blank">联系我们</a></li>
+            <li><a href="http://www.usoftmall.com/help#/issue/1" target="_blank">公司简介</a></li>
+            <li><a href="http://www.usoftmall.com/help#/issue/28" target="_blank">公司地址</a></li>
+            <li><a href="http://www.usoftmall.com/help#/issue/1" target="_blank">联系我们</a></li>
           </ul>
         </div>
         <div class="item">

components/store/common/StoreHeader.vue

@@ -14,8 +14,9 @@
                   </a>
                 </div>
                 <div class="icon-style">
-                  <button class="btn btn-xs btn-danger btn-nav" v-if="!isFocus"><span class="watch">关注</span></button>
-                  <button class="btn btn-xs btn-default btn-nav" v-if="isFocus" style="width:50px"><span>已关注</span></button>
+                  <!--<button class="btn btn-xs btn-danger btn-nav" v-if="!isFocus"><span class="watch">关注</span></button>-->
+                  <div v-if="!isFocus"></div><el-button type="text" @click="dialogVisible = true,focus(storeInfo.id, storeInfo.storeName)" class="btn btn-xs btn-danger btn-nav"><span class="watch">关注</span></el-button>
+                  <div v-if="isFocus" ><button class="btn btn-xs btn-default btn-nav" style="width:50px"><span>已关注</span></button></div>
                   <span v-if="storeInfo.type == 'ORIGINAL_FACTORY'">&nbsp;<img src="/images/store/icon/icon-factory.png"/></span>
                   <span v-else-if="storeInfo.type == 'AGENCY'">&nbsp;<img src="/images/store/icon/icon-agent.png"/></span>
                   <span v-else-if="storeInfo.type == 'DISTRIBUTION'">&nbsp;<img src="/images/store/icon/icon-distribution.png"/></span>
@@ -49,6 +50,19 @@
         </div>
       </div>
     </div>
+    <!--关注-->
+    <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="http://www.usoftmall.com/user#/browsingHistory" target="_blank">查看我的店铺关注</a>
+        </button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -59,23 +73,35 @@ export default {
   data () {
     return {
       isFocus: false,
-      isOpen: false
+      isOpen: false,
+      dialogVisible: false
     }
   },
+  components: {
+    SearchBox
+  },
   computed: {
     storeInfo () {
       return this.$store.state.shop.storeInfo.store.data
     }
   },
-  components: {
-    SearchBox
+  mounted () {
+    this.$nextTick(() => {
+      this.loadFocusList()
+    })
   },
   methods: {
+    loadFocusList () {
+      this.$store.dispatch('shop/StoreFocusList', {id: this.storeInfo.id})
+    },
     closeDropDown () {
       this.isOpen = false
     },
     openDropDown () {
       this.isOpen = true
+    },
+    focus (id, name) {
+      this.$store.dispatch('shop/StoreFocus', {storeName: name, storeid: id})
     }
   }
 }
@@ -84,6 +110,18 @@ export default {
   body{
 		font-family: "Microsoft Yahei", "微软雅黑";
 	}
+  .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;
+  }
 	#nav_fragment {
 		margin-bottom: 20px;
 	}

plugins/element-ui.js

@@ -1,7 +1,8 @@
 import Vue from 'vue'
-import { Breadcrumb, BreadcrumbItem, Tree, Pagination } from 'element-ui'
+import { Breadcrumb, BreadcrumbItem, Tree, Pagination, Dialog } from 'element-ui'
 
 Vue.use(Breadcrumb)
 Vue.use(BreadcrumbItem)
 Vue.use(Tree)
 Vue.use(Pagination)
+Vue.use(Dialog)

store/shop.js

@@ -59,5 +59,24 @@ export const actions = {
       }, err => {
         commit('storeInfo/GET_SAVEHISOTRY_FAILURE', err)
       })
+  },
+  // 载入历史记录
+  StoreFocusList ({ commit }, params = {}) {
+    commit('storeInfo/REQUEST_FOCUSLIST')
+    return axios.get(`/trade/storeFocus/ifFocus?storeid=${params.id}`)
+      .then(response => {
+        commit('storeInfo/GET_FOCUSLIST_SUCCESS', response.data)
+      }, err => {
+        commit('storeInfo/GET_FOCUSLIST_FAILURE', err)
+      })
+  },
+  StoreFocus ({ commit }, storeName) {
+    commit('storeInfo/REQUEST_FOCUS')
+    return axios.post(`/trade/storeFocus/save`, storeName)
+      .then(response => {
+        commit('storeInfo/GET_FOCUS_SUCCESS', response.data)
+      }, err => {
+        commit('storeInfo/GET_FOCUS_FAILURE', err)
+      })
   }
 }

store/shop/storeInfo.js

@@ -21,6 +21,14 @@ export const state = () => ({
   saveHistory: {
     fetching: false,
     data: {}
+  },
+  focus: {
+    fetching: false,
+    data: {}
+  },
+  focusList: {
+    fetching: false,
+    data: {}
   }
 })
 
@@ -74,5 +82,25 @@ export const mutations = {
   GET_SAVEHISOTRY_SUCCESS (state, result) {
     state.saveHistory.fetching = false
     state.saveHistory.data = result
+  },
+  REQUEST_FOCUS (state) {
+    state.focus.fetching = true
+  },
+  GET_FOCUS_FAILURE (state) {
+    state.focus.fetching = false
+  },
+  GET_FOCUS_SUCCESS (state, result) {
+    state.focus.fetching = false
+    state.focus.data = result
+  },
+  REQUEST_FOCUSLIST (state) {
+    state.focusList.fetching = true
+  },
+  GET_FOCUSLIST_FAILURE (state) {
+    state.focusList.fetching = false
+  },
+  GET_FOCUSLIST_SUCCESS (state, result) {
+    state.focusList.fetching = false
+    state.focusList.data = result
   }
 }