添加店铺首页页面

components/store/CommodityList.vue

@@ -0,0 +1,437 @@
+<template>
+  <div id="goods-list-fragment">
+    <div class="container" style="width: 1190px; padding: 0;">
+      <div class="title-area">
+        <div class="category-title">
+          <span style="line-height: 34px;">产品分类</span>
+        </div>
+        <div class="category-content">
+          <el-tree :data="kinds" :props="defaultProps" accordion :highlight-current="true" @current-change="handlerCurrentNode"></el-tree>
+        </div>
+      </div>
+      <!-- 产品列表 -->
+      <div class="goods-area">
+        <div class="row" style="margin: 0;width: 970px;">
+          <div class="col-md-3 btn-group btn-group-sm" style="padding: 0;">
+            <a type="button" class="btn btn-default btn-line btn-info">产品列表</a>
+          </div>
+          <div class="col-md-4 col-md-offset-5" style="padding: 0;">
+            <div class="input-group">
+              <input type="search" class="form-control" id="search_input" title="code" placeholder="请输入要筛选的原厂型号"
+                     v-model="searchCode" @search="goodsSearch(searchCode)"/>
+              <span class="input-group-btn">
+							<button type="button" class="btn" id="search_btn" @click="goodsSearch(searchCode)">&nbsp;筛&nbsp;选&nbsp;</button>
+						</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 列表展示 -->
+        <table class="goodslist" style="width: 970px">
+          <thead>
+          <tr style="height: 40px;">
+            <th width="90"></th>
+            <th width="150">品牌/型号</th>
+            <th width="100">包装/生产日期</th>
+            <th width="90">库存</th>
+            <th width="90">数量</th>
+            <th width="90">香港交货<span style="font-size: 12px;">($)</span></th>
+            <th width="100">大陆交货<span style="font-size: 12px;">(￥)</span></th>
+            <th width="100">交期</th>
+            <th width="100">操作</th>
+          </tr>
+          </thead>
+          <tbody id="goodslist-content">
+          <tr v-for="commodity in commodities.content">
+            <td class="commodity-icon">
+              <a :href="'/store/' + commodity.storeid + '/' + commodity.batchCode" target="_blank">
+                <div class="img"><img :src="commodity.img || '/images/store/common/default.png'"/></div>
+              </a>
+            </td>
+            <td class="brand-code">
+              <div class="brand" v-text="commodity.brandNameEn"></div>
+              <div class="code" v-text="commodity.code"></div>
+            </td>
+            <td>
+              <div class="package" v-text="commodity.packaging || '暂无包装信息'"></div>
+              <div class="date" v-text="commodity.produceDate">2016-12-01</div>
+            </td>
+            <td style="text-align: left;vertical-align: middle;">
+              <div class="goods">
+                库存：<span v-text="commodity.reserve">31500</span>
+              </div>
+              <div class="from">
+                起拍：<span v-text="commodity.minBuyQty">300</span>
+              </div>
+              <div class="multiple">
+                倍数：<span>1</span>
+              </div>
+            </td>
+            <td>
+              <div v-for="price in commodity.prices" v-text="price.start + '+'"></div>
+            </td>
+            <td>
+              <div v-show="commodity.currencyName.indexOf('USD')==-1 || !commodity.prices">
+                <span>—</span>
+              </div>
+              <div v-for="price in commodity.prices" v-text="price.uSDPrice"></div>
+            </td>
+            <td>
+              <div v-show="commodity.currencyName.indexOf('RMB')==-1 || !commodity.prices">
+                <span>—</span>
+              </div>
+              <div v-for="price in commodity.prices" v-text="price.rMBPrice"></div>
+            </td>
+            <td>
+              <div v-if="commodity.b2cMinDelivery">交期：{{commodity.b2cMinDelivery || 0}}-{{commodity.b2cMaxDelivery || 0}}天</div>
+            </td>
+            <td>
+              <div>
+                <button class="btn btn-primary btn-buy-now" ng-click="addToCart(commodity, true, commodity.minBuyQty, commodity.currencyName)"><span class="watch">立即购买</span></button>
+              </div>
+              <div>
+                <button class="btn btn-add-cart" ng-click="addToCart(commodity, false, commodity.minBuyQty, commodity.currencyName)"><span class="watch">加入购物车</span></button>
+              </div>
+            </td>
+          </tr>
+          <tr v-if="!commodities.content || commodities.content.length == 0">
+            <td colspan="10">
+              <div class="text-center">
+                <div class="col-xs-offset-3 col-xs-2">
+                  <img src="/images/all/empty-cart.png">
+                </div>
+                <div class="col-xs-4 txt-info">
+                  <p class="grey f16">暂无器件信息</p>
+                  <i class="iconfont">&#xe610;</i>&nbsp;<a href="javascript:history.go(-1)">返回上一页</a>
+                </div>
+              </div>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+function getAllLeafIds (kind) {
+  if (!kind) {
+    return null
+  }
+  if (kind.isLeaf === 1) {
+    return kind.id
+  } else {
+    if (!kind.children || kind.children.length === 0) {
+      return null
+    }
+    let ids = []
+    for (let i = 0; i < kind.children.length; i++) {
+      ids.push(getAllLeafIds(kind.children[i]))
+    }
+    return ids.join('-')
+  }
+}
+
+export default {
+  name: 'commodity-list',
+  props: ['kinds'],
+  data () {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'nameCn'
+      },
+      pageParams: {
+        page: 1,
+        count: 6
+      },
+      searchCode: '',
+      parentKindId: 0,
+      ids: null
+    }
+  },
+  computed: {
+    commodities () {
+      return this.$store.state.shop.storeInfo.storeCommodity.data
+    }
+  },
+  methods: {
+    handlerCurrentNode (data, node) {
+      this.searchCode = ''
+      if (this.parentKindId === data.id) {
+        this.parentKindId = 0
+        this.ids = null
+        console.log('取消选中状态')
+      } else {
+        if (data.level === 1) {
+          this.parentKindId = data.id
+        }
+        this.ids = getAllLeafIds(data)
+      }
+      console.log('data', data.id + '-' + data.nameCn)
+      this.pageParams.page = 1
+
+      this.pageCommodity(this.pageParams, this.ids)
+    },
+    goodsSearch (keyword) {
+      console.log(keyword)
+      this.pageParams.page = 1
+
+      this.pageCommodity(this.pageParams, this.ids, keyword)
+    },
+    async pageCommodity (pageParams, kindId, keyword) {
+      let params = { storeid: this.$route.params.uuid, origin: 'store', kindUuid: kindId, code: keyword }
+      params.page = pageParams.page
+      params.count = pageParams.count
+
+      let { data } = await this.$http.get('/api/commodity/commodities', { params })
+      this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
+    }
+  }
+}
+</script>
+<style scoped>
+  #goods-list-fragment{
+		font-family: "Microsoft Yahei", "微软雅黑";
+	}
+	#goods-list-fragment .category-title {
+		height: 34px;
+		background-color: #5078cb;
+		font-size: 14px;
+		color: rgb(255,255,255);
+		font-weight: 600;
+		text-align: center;
+	}
+
+	#goods-list-fragment .category-content li {
+		line-height: 33px;
+		font-size: 14px;
+		color: #333;
+		float: left;
+		width: 100%;
+		padding-left: 10px;
+	}
+
+	#goods-list-fragment .category-content li a {
+		display: block;
+		padding-left: 15px;
+		text-decoration: none;
+		color: #333;
+		/* background:url("static/img/store/default/openblackR.png") no-repeat left; */
+	}
+
+	#goods-list-fragment .category-content li a:hover{
+		color: #5078cb;
+		cursor: pointer;
+	}
+
+	#goods-list-fragment .category-content ul.list-body {
+		display: none;
+		color: #666;
+	}
+
+	#goods-list-fragment .category-content ul.list-body.active {
+		display: block;
+	}
+
+	#goods-list-fragment .category-content ul.list-body li {
+		float: none;
+		background-image: none;
+		min-height: 26px;
+		line-height: 26px;
+		font-size: 12px;
+	}
+
+	#goods-list-fragment .category-content ul.list-body li a {
+		padding-left: 15px;
+		display: block;
+		color: rgb(50,50,50);
+		background: none;
+	}
+
+	#goods-list-fragment .category-content ul.list-body li a:hover {
+		color: #5078cb;
+		cursor: pointer;
+	}
+
+	#goods-list-fragment .category-content ul.list-body li a.cur {
+		text-decoration: none;
+		font-size: 14px;
+		/* background:url("static/img/store/default/openblackR.png") no-repeat left; */
+	}
+
+	#goods-list-fragment .title-area {
+		margin-bottom: 30px;
+		width: 200px;
+		float: left;
+	}
+	#goods-list-fragment .category-content{
+		border: 1px solid #e8e8e8;
+	}
+	/* goods-area */
+	#goods-list-fragment .goods-area {
+		margin-left: 20px;
+		float: left;
+		margin-bottom: 30px;
+	}
+
+	#goods-list-fragment .goods-area .btn-line {
+		border-radius: 0;
+	}
+
+
+	#goods-list-fragment .btn-info.btn-line {
+		background-color: #5078CB;
+		color: #fff;
+		font-weight: 600;
+	}
+
+	#goods-list-fragment .btn-line {
+		height: 34px;
+		width: 150px;
+		border: 1px solid #5078cb;
+		background-color: #fff;
+		color: rgb(80,120,203);
+		font-weight: 600;
+	}
+
+	#goods-list-fragment .btn-line:hover {
+		background-color: #5078CB;
+		color: #fff;
+	}
+
+	/* 物品列表 */
+	#goods-list-fragment .goodslist .brand-code {
+		font-size: 14px;
+		text-align: center;
+	}
+
+	#goods-list-fragment #search_btn {
+		background: #5078CB;
+		color: #FFFFFF;
+	}
+
+	#goods-list-fragment #search_input {
+		font-size: 14px;
+	}
+
+	#goods-list-fragment .brand-code .code {
+		font-weight: 600;
+	}
+
+	#goods-list-fragment .goodslist th {
+		color: rgb(50,50,50);
+		font-size: 14px;
+		font-weight: 600;
+		background-color: #f7f7f7;
+		text-align: center;
+	}
+
+	#goods-list-fragment .category-content a.selected-node,
+	#goods-list-fragment .category-content ul.list-body li a.selected-node {
+		color: #5078cb;
+	}
+
+	#goods-list-fragment .category-content a.selected-parent-node,
+	#goods-list-fragment .category-content ul.list-body li a.selected-parent-node {
+		/* background:url("static/img/store/default/openblack.png") no-repeat left; */
+	}
+
+	#goods-list-fragment .goodslist tbody>tr {
+		border: 1px solid #e8e8e8;
+	}
+	#goods-list-fragment .goodslist tbody>tr td.commodity-icon .img{
+		border: 1px solid #e8e8e8;
+		margin: 10px;
+		width: 80px;
+		height: 80px;
+		overflow: hidden;
+		line-height: 75px;
+	}
+	#goods-list-fragment .goodslist tbody>tr td.commodity-icon .img>img {
+		width: 80px;
+		height: 80px;
+	}
+	#goods-list-fragment .goodslist td {
+		font-size: 12px;
+		color: #333;
+		text-align: center;
+		line-height: 20px;
+	}
+
+	/* 物品列表按钮 */
+	#goods-list-fragment .btn-buy-now {
+		background-color: #5078CB;
+		color: #fff;
+		width: 80px;
+		height: 30px;
+		font-size: 12px;
+		border: 1px solid #5078cb;
+	}
+
+	#goods-list-fragment .btn-add-cart {
+		margin-top: 10px;
+		color: #214797;
+		width: 80px;
+		height: 30px;
+		font-size: 12px;
+		background-color: #fff;
+		border: 1px solid #e8e8e8;
+	}
+	#goods-list-fragment .btn-buy-now:hover{
+		background: #214797;
+	}
+	#goods-list-fragment .btn-add-cart:hover{
+		background-color: #5078CB;
+		color: #fff;
+	}
+	.category-content{
+		min-height: 243px;
+	}
+	.no-record{
+		font-size: 14px;
+		color: #999;
+		text-align: center;
+		line-height: 200px;
+	}
+	.no-record i{
+		margin-right: 5px;
+	}
+	.text-center{
+		text-align: center;
+		margin-top: 30px;
+	}
+	.text-center  .col-xs-2  img{
+		margin: 50px 0 50px 95px;
+		vertical-align: middle;
+	}
+	.text-center .txt-info{
+		font-size: 14px;
+		margin-top: 70px;
+	}
+	.text-center  .col-xs-4  p{
+		color: #999;
+		margin-top: 3px;
+		margin-bottom: 2px;
+	}
+	.text-center  .txt-info a{
+		font-size: 14px;
+	}
+	.text-center  .col-xs-4 i{
+		color: #5078cb;
+		font-size: 14px;
+	}
+	.goodslist{
+		margin-bottom: 16px;
+	}
+
+	@font-face {
+    font-family: 'iconfont';  /* project id 357960 */
+    src: url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.eot');
+    src: url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.eot?#iefix') format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.woff') format('woff'),
+    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.svg#iconfont') format('svg');
+  }
+</style>

components/store/RecommendProduct.vue

@@ -0,0 +1,209 @@
+<template>
+  <div id="recommend-fragment" v-if="commodities && commodities.length > 0">
+    <div class="recommend-list">
+      <ul>
+        <li ng-repeat="commodity in commodities">
+          <div class="img"><a href="javascript:void(0);"><img ng-src="commodity.comImg"/></a></div>
+          <div class="content">
+            <p ng-bind="commodity.comCode">MRFE6S9045NF001</p>
+            <p class="color666" ng-bind="commodity.brandNameCn">PANFAEFQ</p>
+            <p class="price" ng-if="commodity.minPriceRMB">¥ commodity.minPriceRMB</p>
+            <p class="price" ng-if="!commodity.minPriceRMB">$ commodity.minPriceUSD || 0</p>
+          </div>
+          <div class="hover-show" ng-href="commodity.batchCode ? 'store/' + storeInfo.uuid + '#/batchInfo/' + commodity.batchCode : ''">
+            <a ng-href="commodity.batchCode ? 'store/' + storeInfo.uuid + '#/batchInfo/' + commodity.batchCode : ''" class="href">
+              <div class="title" ng-bind="commodity.comCode">MRFE6S9045NF001</div>
+              <div class="type" ng-bind="commodity.brandNameCn">PANFAEFQ</div>
+              <div class="hr"><span>抢购价</span></div>
+              <div class="price" ng-if="commodity.minPriceRMB">¥ commodity.minPriceRMB</div>
+              <div class="price" ng-if="!commodity.minPriceRMB">$ commodity.minPriceUSD || 0</div>
+            </a>
+            <div class="by-cart"><button title="加入购物车" ng-click="addToCart(commodity, false, commodity.minBuyQty, commodity.currency)"><img src="static/img/icon/cart-blue.png"/></button></div>
+            <div class="buy-now"><button title="立即购买" ng-click="addToCart(commodity, true, commodity.minBuyQty, commodity.currency)">立即购买</button></div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'recommend-product',
+  computed: {
+    commodities () {
+      return this.$store.state.shop.recommend.products.data
+    }
+  }
+}
+</script>
+<style scoped>
+  #recommend-fragment{
+		width: 1190px;
+		margin: 0 auto;
+	}
+	.recommend-list{
+		width: 100%;
+		margin: 0 auto;
+		display: inline-block;
+	}
+	#recommend-fragment ul{
+		width: 100%;
+		margin: 0 auto;
+		display: inline-block;
+		-webkit-padding-start: 0;
+	}
+	#recommend-fragment ul li{
+		float: left;
+		width: 218px;
+		height: 260px;
+		border: #d2d2d2 1px solid;
+		position: relative;
+		overflow: hidden;
+		margin-right: 25px;
+		margin-bottom: 20px;
+	}
+	#recommend-fragment ul li:nth-child(5n){
+		margin-right: 0;
+	}
+	#recommend-fragment ul li .img{
+		height: 175px;
+		text-align: center;
+		line-height: 170px;
+	}
+	#recommend-fragment ul li .img img{
+		max-width: 120px;
+		max-height: 120px;
+	}
+	#recommend-fragment ul li .content{
+		width: 100%;
+		margin: 0 auto;
+	}
+	#recommend-fragment ul li .content p{
+		width: 90%;
+		display: inline-block;
+		line-height: 22px;
+		font-size: 14px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		margin-bottom: 0;
+		padding-left: 10px;
+	}
+	#recommend-fragment ul li .content p.price{
+		color: #ff9000;
+		font-size: 16px;
+		font-weight: bold;
+	}
+	.color666{
+		color: #666;
+	}
+	#recommend-fragment ul li .hover-show{
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 100%;
+		left: 0;
+		background: rgba(80,120,203,.85);
+		padding: 30px 10px;
+	}
+	#recommend-fragment ul li:hover .hover-show{
+		top: 0;
+		transition: top .5s ease-in;
+	}
+	#recommend-fragment ul li .hover-show div{
+		width: 100%;
+		margin: 0 auto;
+		text-align: left;
+		color: #fff;
+		line-height: 25px;
+	}
+	#recommend-fragment ul li .hover-show .title{
+		font-size: 18px;
+		margin-top: 8px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		margin-bottom: 0;
+	}
+	#recommend-fragment ul li .hover-show .type{
+		font-size: 14px;
+	}
+	#recommend-fragment ul li .hover-show .hr{
+		text-align: center;
+		margin-top: 5px;
+	}
+	#recommend-fragment ul li .hover-show .hr span{
+		font-size: 16px;
+		position: relative;
+	}
+	#recommend-fragment ul li .hover-show .hr span:before,#recommend-fragment ul li .hover-show .hr span:after{
+		content: '';
+		position: absolute;
+		display: inline-block;
+		width: 65px;
+		height: 1px;
+		background: #fff;
+		top: 10px;
+	}
+	#recommend-fragment ul li .hover-show .hr span:before{
+		left: 53px;
+	}
+	#recommend-fragment ul li .hover-show .hr span:after{
+		right: 53px;
+	}
+	#recommend-fragment ul li .hover-show .price{
+		font-size: 20px;
+		text-align: center;
+		line-height: 48px;
+	}
+	#recommend-fragment ul li .hover-show .by-cart,#recommend-fragment ul li .hover-show .buy-now{
+		text-align: center;
+		position: absolute;
+	}
+	#recommend-fragment ul li .hover-show .by-cart{
+		bottom: 50px;
+	}
+	#recommend-fragment ul li .hover-show .buy-now{
+		bottom: 15px;
+	}
+	#recommend-fragment ul li .hover-show .by-cart button{
+		display: inline-block;
+		width: 38px;
+		height: 38px;
+		border-radius: 100%;
+		background: #fff;
+		line-height: 38px;
+		margin-bottom: 5px;
+		cursor: pointer;
+		border: none;
+		z-index: 100;
+		position: relative;
+	}
+	#recommend-fragment ul li .hover-show .buy-now button{
+		display: inline-block;
+		width: 90px;
+		height: 34px;
+		text-align: center;
+		font-size: 14px;
+		border-radius: 4px;
+		background: #df1b0f;
+		line-height: 34px;
+		color: #fff;
+		cursor: pointer;
+		border: none;
+		z-index: 100;
+		position: relative;
+	}
+	#recommend-fragment ul li .hover-show .buy-now button:hover{
+		background: #f00;
+	}
+	#recommend-fragment ul li a.href{
+		display: inline-block;
+		position: relative;
+		z-index: 10;
+		width: 100%;
+		text-align: center;
+		height: 260px;
+	}
+</style>

components/store/index.js

@@ -3,5 +3,7 @@ import StoreTitle from './StoreTitle.vue'
 import BaseInfo from './BaseInfo.vue'
 import ComponentInfo from './ComponentInfo.vue'
 import CommodityInfo from './CommodityInfo.vue'
+import CommodityList from './CommodityList.vue'
+import RecommendProduct from './RecommendProduct.vue'
 
-export { StoreHeader, StoreTitle, BaseInfo, ComponentInfo, CommodityInfo }
+export { StoreHeader, StoreTitle, BaseInfo, ComponentInfo, CommodityInfo, CommodityList, RecommendProduct }

nuxt.config.js

@@ -94,8 +94,7 @@ module.exports = {
     src: '~plugins/vue-empty.js',
     ssr: false
   }, {
-    src: '~plugins/element-ui.js',
-    ssr: false
+    src: '~plugins/element-ui.js'
   }],
   proxyTable: ['/api/**', '/search/**', '/user/**', '/login/**', '/logout/**']
 }

pages/store/_uuid/_batchCode.vue

@@ -9,17 +9,6 @@ import { ComponentInfo, CommodityInfo } from '~components/store'
 
 export default {
   layout: 'shop',
-  data () {
-    return {
-      uuid: this.$route.params.uuid,
-      batchCode: this.$route.params.batchCode,
-      breadcrumbs: [
-        { name: '商城首页', to: {} },
-        { name: '商城首页', to: {} },
-        { name: '商城首页', to: {} }
-      ]
-    }
-  },
   fetch ({ store, route }) {
     return Promise.all([
       store.dispatch('shop/findStoreInfoFromUuid', route.params),

pages/store/_uuid/index.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="container">
-    <span style="font-size: 24px;">{{uuid}}</span>
+    <recommend-product/>
+    <commodity-list :kinds="kinds"/>
   </div>
 </template>
 <script>
+import axios from '~plugins/axios'
+import { CommodityList, RecommendProduct } from '~components/store'
 
 export default {
   layout: 'shop',
@@ -12,10 +15,20 @@ export default {
       uuid: this.$route.params.uuid
     }
   },
-  fetch ({ store, route }) {
+  fetch ({ store, params }) {
     return Promise.all([
-      store.dispatch('shop/findStoreInfoFromUuid', route.params)
+      store.dispatch('shop/findStoreInfoFromUuid', params),
+      store.dispatch('shop/findRecommendProducts', params),
+      store.dispatch('shop/pageCommoditiesOfStore', params.uuid, { page: 1, count: 6 })
     ])
+  },
+  async asyncData ({ params }) {
+    let { data } = await axios.get('/api/commodity/components/kinds', { params: { StoreUuid: params.uuid } })
+    return { kinds: data }
+  },
+  components: {
+    RecommendProduct,
+    CommodityList
   }
 }
 </script>

plugins/element-ui.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
-import { Breadcrumb, BreadcrumbItem } from 'element-ui'
+import { Breadcrumb, BreadcrumbItem, Tree } from 'element-ui'
 
 Vue.use(Breadcrumb)
 Vue.use(BreadcrumbItem)
+Vue.use(Tree)

store/shop.js

@@ -27,5 +27,28 @@ export const actions = {
       }, err => {
         commit('storeInfo/GET_COMMODITY_FAILURE', err)
       })
+  },
+  findRecommendProducts ({ commit }, params = {}) {
+    params.condition = 'store_uuid'
+    commit('recommend/REQUEST_PRODUCTS')
+    return axios.get('/api/recommend/products', { params })
+      .then(response => {
+        commit('recommend/GET_PRODUCTS_SUCCESS', response.data)
+      }, err => {
+        commit('recommend/GET_PRODUCTS_FAILURE', err)
+      })
+  },
+  pageCommoditiesOfStore ({ commit }, uuid = '', pageParams = { page: 1, count: 6 }, code) {
+    let params = { storeid: uuid, origin: 'store', code: code }
+    params.page = pageParams.page
+    params.count = pageParams.count
+    console.log(1)
+    commit('storeInfo/REQUEST_STORE_COMMODITY')
+    return axios.get('/api/commodity/commodities', { params })
+      .then(response => {
+        commit('storeInfo/GET_STORE_COMMODITY_SUCCESS', response.data)
+      }, err => {
+        commit('storeInfo/GET_STORE_COMMODITY_FAILURE', err)
+      })
   }
 }

store/shop/recommend.js

@@ -0,0 +1,22 @@
+/**
+ * 店铺推荐信息
+ */
+export const state = () => ({
+  products: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_PRODUCTS (state) {
+    state.products.fetching = true
+  },
+  GET_PRODUCTS_FAILURE (state) {
+    state.products.fetching = false
+  },
+  GET_PRODUCTS_SUCCESS (state, result = []) {
+    state.products.fetching = false
+    state.products.data = result
+  }
+}

store/shop/storeInfo.js

@@ -13,6 +13,10 @@ export const state = () => ({
   component: {
     fetching: false,
     data: {}
+  },
+  storeCommodity: {
+    fetching: false,
+    data: {}
   }
 })
 
@@ -46,5 +50,15 @@ export const mutations = {
   GET_COMPONENT_SUCCESS (state, result = {}) {
     state.component.fetching = false
     state.component.data = result
+  },
+  REQUEST_STORE_COMMODITY (state) {
+    state.storeCommodity.fetching = true
+  },
+  GET_STORE_COMMODITY_FAILURE (state) {
+    state.storeCommodity.fetching = false
+  },
+  GET_STORE_COMMODITY_SUCCESS (state, result = {}) {
+    state.storeCommodity.fetching = false
+    state.storeCommodity.data = result
   }
 }