new-88live/pages/shop/index.vue

<template>
  <view class="wanlshop-shop-container">
    <view :style="{ height: sys.headHeight + 'px' }">
      <shop-head class="wanlshop-shop-container__head" :headHeight="sys.headHeight" :headTop="sys.headTop"
        :tabbarId="tabbarId" :headTabbarId="headTabbarId" :shopId="shopData.id" :shopDescription="shopData.description"
        :pagesNum="pagesNum" @headId="handleHeadTabbarId" />
    </view>
    <view class="wanlshop-shop-container__main">
      <swiper class="page" v-show="tabbarId === 'home'" :current-item-id="headTabbarId"
        :style="{ height: sys.mainHeight + 'px' }" @change="changeCurrent" @animationfinish="animationFinish">
        <swiper-item item-id="page">
          <shop-page :windowHeight="sys.mainHeight" :pageModules="shopData.page" :shopData="shopData"
            @handleFollow="handleFollow" />
        </swiper-item>
        <swiper-item item-id="news">
          <shop-product :windowHeight="sys.mainHeight" :tabbarHeight="sys.tabbarHeight" :tabId="headTabbarId"
            :option="{ shop_id: shopData.id }" />
        </swiper-item>
      </swiper>
      <shop-product v-if="tabbarId === 'goods'" class="goods" :windowHeight="sys.mainHeight"
        :tabbarHeight="sys.tabbarHeight" :tabId="tabbarId" :option="{ shop_id: shopData.id }" />
      <shop-find v-if="tabbarId === 'find'" class="find" :windowHeight="sys.mainHeight" :tabbarHeight="sys.tabbarHeight"
        :userNo="shopData.find_user && shopData.find_user.user_no" />
      <shop-classify v-if="tabbarId === 'classify'" class="classify" :shopId="shopData.id" :mainHeight="sys.mainHeight"
        :categoryStyle="shopData.categoryStyle === 0 ? 1 : shopData.categoryStyle" :categoryData="shopData.category" />
    </view>
    <view class="wanlshop-shop-container__tabbar"
      :style="{ height: sys.tabbarHeight + 'px', paddingBottom: sys.tabbarBottom + 'px' }">
      <view class="cu-bar tabbar">
        <view class="action" @tap="handleTabbar('home')">
          <view v-if="handleActive('home')">
            <view class="cu-avatar round" :style="{ backgroundImage: 'url(' + (shopData.avatar || '') + ')' }" />
          </view>
          <view v-else>
            <view class="wlIcon wlIcon-dianpu text-bold"></view>
            <view>{{ $t('mall.shop.home') }}</view>
          </view>
        </view>
        <view class="action" :class="{ active: handleActive('goods') }" @tap="handleTabbar('goods')">
          <view class="wlIcon wlIcon-baobei text-bold"></view>
          <view>{{ $t('mall.shop.allGoods') }}</view>
        </view>
        <view class="action" :class="{ active: handleActive('find') }" @tap="handleTabbar('find')">
          <view class="wlIcon wlIcon-guanzhu1 text-bold"></view>
          <view>{{ $t('mall.shop.discover') }}</view>
        </view>
        <view class="action" :class="{ active: handleActive('classify') }" @tap="handleTabbar('classify')">
          <view class="wlIcon wlIcon-fenlei1 text-bold"></view>
          <view>{{ $t('mall.shop.category') }}</view>
        </view>
        <view class="action">
          <view @tap="toChat">
            <view class="wlIcon wlIcon-kefu text-bold"></view>
            <view>{{ $t('mall.shop.customerService') }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { pullMallShopInfo, postShopFollow } from '@/features/mall/mall-gateway'
import ShopHead from '@/components/shop/shop-head.vue'
import ShopPage from '@/components/shop/shop-page.vue'
import ShopProduct from '@/components/shop/shop-product.vue'
import ShopFind from '@/components/shop/shop-find.vue'
import ShopClassify from '@/components/shop/shop-classify.vue'

export default {
  components: { ShopHead, ShopPage, ShopProduct, ShopFind, ShopClassify },
  data() {
    return {
      tabbarId: 'home',
      headTabbarId: 'page',
      pagesNum: 0,
      sys: { headTop: 0, headHeight: 0, mainHeight: 0, tabbarBottom: 0, tabbarHeight: 0 },
      shopData: {
        id: 0, avatar: '', shopname: '', state: 0, islive: 0, isself: 0, categoryStyle: 1,
        find_user: { user_no: '', fans: 0 },
        isFollow: 0
      }
    }
  },
  onReady() {
    const sys = uni.getSystemInfoSync()
    const headHeight = sys.statusBarHeight + uni.upx2px(88)
    const tabbarHeight = (sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0) + uni.upx2px(100)
    this.sys = {
      headTop: sys.statusBarHeight,
      headHeight: headHeight,
      mainHeight: sys.windowHeight - headHeight,
      tabbarBottom: sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0,
      tabbarHeight: tabbarHeight
    }
  },
  onLoad(query) {
    this.pagesNum = getCurrentPages().length
    const id = query.id || query.scene || 0
    this.loadData(id)
  },
  methods: {
    async loadData(id) {
      try {
        const data = await pullMallShopInfo(id)
        this.shopData = data
      } catch (e) {
        console.error('加載店鋪失敗', e)
      }
    },
    async handleFollow() {
      if (!this.$store.state.user.isLogin) {
        uni.navigateTo({ url: '/pages/user/auth/newpreLogin' })
        return
      }
      try {
        const user_no = this.shopData.find_user && this.shopData.find_user.user_no
        if (!user_no) return
        const result = await postShopFollow(user_no)
        // result 返回 {data: 1} 表示关注，{data: 0} 表示取消关注
        const followState = result.data
        this.shopData.isFollow = followState
        if (followState === 1) {
          this.shopData.find_user.fans += 1
        } else if (followState === 0) {
          this.shopData.find_user.fans -= 1
        }
        // 更新统计数据
        if (this.shopData.isself === 1) {
          const concern = this.$store.state.statistics.dynamic.concern
          this.$store.commit('statistics/dynamic', {
            concern: followState === 1 ? concern + 1 : concern - 1
          })
        }
      } catch (e) {
        console.error('关注操作失败', e)
      }
    },
    animationFinish(e) {
      this.changeCurrent(e)
    },
    changeCurrent(e) {
      this.headTabbarId = e.detail.currentItemId
    },
    handleTabbar(name) {
      this.tabbarId = name
    },
    handleActive(name) {
      return this.tabbarId === name
    },
    handleHeadTabbarId(name) {
      this.headTabbarId = name
    },
    toChat() {
      uni.navigateTo({ url: '/pages/notice/chat?shop_id=' + this.shopData.id })
    }
  }
}
</script>

<style lang="scss" scoped>
.wanlshop-shop-container {
  background-color: #ffffff;

  &__head {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    background-color: #ffffff;
  }

  &__main {
    .classify {
      background-color: #f9f9f9;
    }

    .find {
      background-color: #f9f9f9;
      border-radius: 30rpx 30rpx 0 0;
      overflow: hidden;
    }
  }

  &__tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.96);
    z-index: 999;

    .cu-bar {
      color: #555;

      .action {
        [class*="wlIcon-"] {
          font-size: 45rpx;
        }

        &.active {
          color: #f40;
        }

        .cu-avatar {
          background-color: #f1f1f1;
          height: 74rpx;
          width: 74rpx;
        }
      }
    }
  }
}
</style>