yshi/fuintUniapp/pages/category/index.vue

<template>
  <view class="container">
    <!--店铺切换-->
    <Location v-if="storeInfo" :storeInfo="storeInfo"/>
    
    <!-- 搜索框 -->
    <Search tips="请输入搜索关键字..." @event="$navTo('pages/search/index')" />

    <view class="cate-content dis-flex" v-if="list.length > 0">
      <!-- 左侧 分类 -->
      <scroll-view class="cate-left f-28" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
          <view v-for="(item, index) in list" :key="index">
              <text class="cart-badge" v-if="item.total">{{ item.total }}</text>
              <view class="type-nav" :class="{ selected: curIndex == index }" @click="handleSelectNav(index)">
                  <image class="logo" lazy-load :lazy-load-margin="0" v-if="item.logo" :src="item.logo"></image>
                  <view class="name">{{ item.name }}</view>
              </view>
          </view>
      </scroll-view>

      <!-- 右侧 商品 -->
      <scroll-view class="cate-right b-f" :scroll-top="scrollTop" :scroll-y="true" :style="{ height: `${scrollHeight}px` }">
        <view v-if="list[curIndex]">
          <view class="cate-right-cont">
            <view class="cate-two-box">
              <view v-if="list[curIndex].goodsList.length" class="cate-cont-box">
                <view class="flex-five item" v-for="(item, idx) in list[curIndex].goodsList" :key="idx">
                  <view class="cate-img">
                    <image v-if="item.logo" lazy-load :lazy-load-margin="0" :src="item.logo" @click="onTargetGoods(item.id)"></image>
                  </view>
                  <view class="cate-info">
                    <view class="base">
                       <text class="name text">{{ item.name }}</text>
                       <text class="stock text">库存:{{ item.stock ? item.stock : 0 }} 已售:{{ item.initSale ? item.initSale : 0 }}</text>
                    </view>
                    <view class="action">
                        <text class="price">￥{{ item.price ? item.price : 0 }}</text>
                        <view class="cart">
                            <view v-if="item.isSingleSpec === 'Y'" class="singleSpec">
                                <view class="ii do-minus" v-if="item.buyNum" @click="onSaveCart(item.id, '-')"></view>
                                <view class="ii num" v-if="item.buyNum">{{ (item.buyNum != undefined) ? item.buyNum : 0 }}</view>
                                <view class="ii do-add" v-if="item.stock > 0" @click="onSaveCart(item.id, '+')"></view>
                            </view>
                            <view v-if="item.isSingleSpec === 'N'" class="multiSpec">
                                <text class="num-badge" v-if="item.buyNum">{{ item.buyNum }}</text>
                                <view class="select-spec" @click="onShowSkuPopup(2, item.id)">选规格</view>
                            </view>
                        </view>
                    </view>
                  </view>
                </view>
              </view>
              <empty v-if="!list[curIndex].goodsList.length" :isLoading="isLoading" tips="暂无商品~"></empty>
            </view>
          </view>
        </view>
      </scroll-view>
    
    </view>
    
    <!-- 商品SKU弹窗 -->
    <SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart"/>
    
    <view class="flow-fixed-footer b-f m-top10">
      <view class="dis-flex chackout-box">
        <view class="chackout-left pl-12">
          <view class="col-amount-do">总金额：<text class="amount">￥{{ totalPrice.toFixed(2) }}</text></view>
          <view class="col-amount-view">共计：{{ totalNum }} 件</view>
        </view>
        <view class="chackout-right" @click="doSubmit()">
          <view class="flow-btn f-32">去结算</view>
        </view>
      </view>
    </view>
    
    <empty v-if="!list.length" :isLoading="isLoading" />
  </view>
</template>

<script>
  import { setCartTabBadge, setCartTotalNum } from '@/utils/app'
  import * as CartApi from '@/api/cart'
  import * as GoodsApi from '@/api/goods'
  import * as settingApi from '@/api/setting'
  import Search from '@/components/search'
  import Empty from '@/components/empty'
  import SkuPopup from './components/SkuPopup'
  import Location from '@/components/page/location'

  const App = getApp()

  export default {
    components: {
      Search,
      SkuPopup,
      Empty,
      Location
    },
    data() {
      return {
        goodsCart: [],
        totalNum: 0,
        totalPrice: 0.00,
        // 列表高度
        scrollHeight: 500,
        // 一级分类：指针
        curIndex: 0,
        // 内容区竖向滚动条位置
        scrollTop: 0,
        // 分类列表
        list: [],
        // 正在加载中
        isLoading: true,
        showSkuPopup: false,
        skuMode: 1,
        goods: {},
        storeInfo: null
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
      const app = this
      // 设置分类列表高度
      app.setListHeight()
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
      const app = this;
      // 获取页面数据
      app.getPageData();
      app.onGetStoreInfo();
      uni.getLocation({
          type: 'gcj02',
          success(res){
              uni.setStorageSync('latitude', res.latitude);
              uni.setStorageSync('longitude', res.longitude);
              app.onGetStoreInfo();
          },
          fail(e) {
            // empty
          }
      })
    },

    methods: {
      /**
       * 获取页面数据
       */
      getPageData() {
        const app = this
        app.isLoading = true
        Promise.all([
            // 获取分类列表
            GoodsApi.cateList(),
            // 获取购物车列表
            CartApi.list()
          ])
          .then(result => {
            // 初始化分类列表数据
            app.list = result[0].data;
            app.totalNum = result[1].data.totalNum;
            app.goodsCart = result[1].data.list;
            setCartTotalNum(app.totalNum);
            setCartTabBadge();
          })
          .finally(() => {
              app.isLoading = false
              app.totalPrice = 0
              app.list.forEach(function(item, index) {
                  let total = 0
                  item.goodsList.forEach(function(goods, key) {
                      let totalBuyNum = 0
                      app.goodsCart.forEach(function(cart){
                         if (goods.id == cart.goodsId) {
                             total = total + cart.num
                             totalBuyNum = totalBuyNum + cart.num
                             app.totalPrice = app.totalPrice + (cart.goodsInfo.price * cart.num)
                         } 
                      })
                      app.$set(app.list[index].goodsList[key], 'buyNum', totalBuyNum)
                  })
                  app.$set(app.list[index], 'total', total)
              })
          })
      },
      
      /**
       * 获取默认店铺
       * */
       onGetStoreInfo() {
         const app = this
         settingApi.systemConfig()
           .then(result => {
               app.storeInfo = result.data.storeInfo
           })
       },
      
      /**
       * 跳转商品详情
       */
      onTargetGoods(goodsId) {
        this.$navTo(`pages/goods/detail`, { goodsId })
      },

      /**
       * 设置分类列表高度
       */
      setListHeight() {
        const app = this
        uni.getSystemInfo({
          success(res) {
            app.scrollHeight = res.windowHeight - 120
          }
        })
      },

      // 一级分类：选中分类
      handleSelectNav(index) {
        const app = this;
        app.curIndex = index;
        app.scrollTop = 0;
      },
      
      // 更新购物车
      onSaveCart(goodsId, action) {
        const app = this
        return new Promise((resolve, reject) => {
          CartApi.save(goodsId, action)
            .then(result => {
                app.getPageData();
                resolve(result);
            })
            .catch(err => {
                console.log(err);
            })
        })
      },
      // 更新购物车数量
      onAddCart(total) {
        this.getPageData();
        this.$toast("添加购物车成功");
      },
      // 结算
      doSubmit() {
        if (this.totalPrice > 0) {
            this.$navTo('pages/cart/index')
        } else {
            this.$error("请先选择商品")
        }
      },
      onShowSkuPopup(skuMode, goodsId) {
        const app = this
        app.isLoading = true
        return new Promise((resolve, reject) => {
          GoodsApi.detail(goodsId)
            .then(result => {
              const goodsData = result.data
              
              if (goodsData.skuList) {
                  goodsData.skuList.forEach(function(sku, index) {
                    goodsData.skuList[index].specIds = sku.specIds.split('-')
                    goodsData.skuList[index].skuId = sku.id
                  })
              }
              
              app.goods = goodsData
              app.skuMode = skuMode
              app.showSkuPopup = !app.showSkuPopup
              
              console.log(app.skuMode)
              
              app.isLoading = false
              
              resolve(result)
            })
            .catch(err => reject(err))
        })
      },
    },

    /**
     * 设置分享内容
     */
    onShareAppMessage() {
      const app = this
      return {
        title: _this.templet.shareTitle,
        path: '/pages/category/index?' + app.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      return {
        title: _this.templet.shareTitle,
        path: '/pages/category/index?' + app.$getShareUrlParams()
      }
    }

  }
</script>

<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .cate-content {
    background: #fff;
    margin-top: 118rpx;
    /* #ifdef H5 */
    margin-top: 124rpx;
    /* #endif */
  }

  .cate-wrapper {
    padding: 0 20rpx 20rpx 20rpx;
    box-sizing: border-box;
  }

  /* 分类内容 */
  .cate-content {
    width: 100%;
  }

  .cate-left {
    flex-direction: column;
    display: flex;
    width: 200rpx;
    color: #444;
    height: 100%;
    background: #f8f8f8;
    margin-bottom: 120rpx;
    .cart-badge {
      position: absolute;
      right: 1rpx;
      margin-top: 10rpx;
      margin-right: 5rpx;
      font-size: 18rpx;
      background: #fa5151;
      z-index: 999;
      text-align: center;
      line-height: 28rpx;
      color: #ffffff;
      border-radius: 50%;
      min-width: 32rpx;
      padding: 5rpx 13rpx 5rpx 13rpx;
    }
  }

  .cate-right {
    display: flex;
    flex-direction: column;
    width: 550rpx;
    height: 100%;
    overflow: hidden;
    margin-bottom: 80rpx;
  }

  .cate-right-cont {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    padding-top: 10rpx;
  }

  .type-nav {
    position: relative;
    height: 140rpx;
    text-align: center;
    z-index: 10;
    display: block;
    font-size: 26rpx;
    padding: 20rpx 0rpx 126rpx 0rpx;
    .logo {
        width: 60rpx;
        height: 60rpx;
        border-radius: 60rpx;
        margin: 0rpx;
        padding: 0rpx;
    }
    .name {
        margin-top: 2rpx;
        width: 100%;
        overflow-x: hidden;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
    }
  }

  .type-nav.selected {
    color: #666666;
    background: #ffffff;
    border-right: none;
    border-left: solid 10rpx #f03c3c;
    font-weight: bold;
    font-size: 28rpx;
  }

  .cate-cont-box {
    margin-bottom: 10rpx;
    padding-bottom: 10rpx;
    overflow: hidden;
    height: auto;
    display: block;
    .item {
        height: 220rpx;
        display: block;
        padding-top: 5rpx;
        border-radius: 3rpx;
        margin-bottom: 5rpx;
    }
  }

  .cate-cont-box .cate-img {
    padding: 13rpx 10rpx 4rpx 10rpx;
    display: block;
  }

  .cate-cont-box .cate-img image {
    width: 160rpx;
    height: 150rpx;
    float: left;
    border-radius: 5rpx;
    display: block;
    border: #cccccc solid 1rpx;
    margin-top: 5rpx;
  }

  .cate-cont-box .cate-info {
    text-align: left;
    display: block;
    font-size: 26rpx;
    margin-left: 168rpx;
    padding-bottom: 14rpx;
    color: #444;
    padding: 0 15rpx 30rpx 15rpx;
    .base {
        height: 100%;
        display: block;
        .text {
            display: block;
            float: left;
            width: 100%;
        }
        .name {
            font-weight: bold;
            width: 100%;
            font-size: 26rpx;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .stock {
            margin-top: 10rpx;
            color: #999;
        }
    }
    .action {
        display: block;
        height: 50rpx;
        .price {
            margin-top: 20rpx;
            color: #f03c3c;
            float: left;
            font-size: 32rpx;
            font-weight: bold;
        }
        .cart {
            margin-top: 20rpx;
            float: right;
            font-size: 30rpx;
            height: 60rpx;
            .ii {
                float: left;
                text-align: center;
                width: 60rpx;
                cursor: pointer;
            }
            .do-add {
                background: url('~@/static/icon/add.png') no-repeat;
                background-size: 100% 100%;
                width: 45rpx;
                height: 45rpx;
            }
            .do-minus {
                background-image: url('~@/static/icon/minus.png');
                background-size: 100% 100%;
                width: 45rpx;
                height: 45rpx;
            }
            .multiSpec {
                .num-badge {
                    position: absolute;
                    margin-top: 10rpx;
                    margin-right: 25rpx;
                    font-size: 18rpx;
                    background: #f03c3c;
                    text-align: center;
                    line-height: 36rpx;
                    color: #ffffff;
                    border-radius: 50%;
                    min-width: 36rpx;
                    padding: 2rpx;
                }
                .select-spec {
                    border: solid 1rpx $fuint-theme;
                    padding: 10rpx 20rpx 10rpx 36rpx;
                    font-size: 25rpx;
                    border-radius: 5rpx;
                    color: #ffffff;
                    background: $fuint-theme;
                }
            }
        }
    }
  }
  .cate-two-box {
    width: 100%;
    padding: 0 2px;
  }
  
  // 底部操作栏
  .flow-fixed-footer {
    position: fixed;
    bottom: var(--window-bottom);
    width: 100%;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 11;
    padding-top: 8rpx;
    .chackout-left {
      font-size: 28rpx;
      height: 98rpx;
      color: #777;
      flex: 4;
      padding-left: 12px;
        text-align: right;
        padding-right: 40rpx;
        .col-amount-do {
          font-size: 35rpx;
          margin-top: 5rpx;
          margin-bottom:5rpx;
          .amount {
              color: #f03c3c;
              font-weight: bold;
          }
        }
    }
    
    .chackout-right {
      font-size: 34rpx;
      flex: 2;
    }
    
    // 提交按钮
    .flow-btn {
      background: linear-gradient(to right, $fuint-theme, $fuint-theme);
      color: #fff;
      text-align: center;
      line-height: 92rpx;
      display: block;
      font-size: 28rpx;
      border-radius: 5rpx;
      margin-right: 20rpx;
       // 禁用按钮
       &.disabled {
         background: #ff9779;
       }
    }
  }
</style>