yicangzongtai_app_240321/pages/nearbyShop/shopDetail.vue

<template>
  <view class="container-shop">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="header">
      <view class="banner" v-if="shopInfo.store_images">
        <image :src="shopInfo.store_images.split(',')[0]" mode="aspectFill"></image>
      </view>
      <view class="shop-name">
        <view class="title">
          <view class="title-label omit">
            {{shopInfo.shop_name}}
          </view>
          <view class="score">
            <rate :value="Math.round(shopInfo.average)"></rate>
            <view class="score-txt omit" v-if="shopInfo.average">{{shopInfo.average.toFixed(2)}}分</view>
          </view>
          <view class="tip">
            <text class="iconfont3 notice">&#xe623;</text>
            <text class="notice-text omit">{{shopInfo.special_offers || '暂无优惠信息'}}</text>
          </view>
        </view>
        <image class="shop-logo" :src="shopInfo.logo" mode="aspectFill"></image>

        <view class="help">
          <view class="btn" @click="callPhone">
            <view class="iconfont3 help-icon">&#xe679;</view>
            <view>打电话</view>
          </view>
          <view class="btn" @click="jumpNavigator">
            <view class="iconfont3 help-icon">&#xe613;</view>
            <view>导航去</view>
          </view>
        </view>
      </view>
    </view>
    <view class="tabs" :class="{'tabSticky': sticky}" :style="{'top': stickyHeight + 'px'}">
      <view class="tab" :class="{'activeTab': currentTab == index}" v-for="(item, index) in tabs" :key="item.i"
        @click="tabsChange(index)">
        <view class="label">
          {{item.label}}
        </view>
      </view>
    </view>
    <view v-if="sticky" :style="{'height': viewHeight + 'px'}"></view>
    <view class="mian" :style="{'height': mainHeight + 'px'}">
      <view class="body">
        <template v-if="currentTab == 0">
          <scroll-view class="scrollview" scroll-y="true">
            <view class="classifyTab" :class="{'classifyActiveTab': classifyCurrentTab == index}"
              v-for="(item, index) in classifyTabs" :key="item.id" @click="classifyChange(index, item)">
              <view class="class-name">
                {{item.name}}
              </view>
            </view>
          </scroll-view>
          <scroll-view class="scrollview" scroll-y="true">
            <view v-for="(item, index) in goodsList" :key="item.id" @click="jumpGoogsDetail(item)">
              <shop-goods :goodsDetail="item"></shop-goods>
            </view>
            <noData v-if="goodsList.length<=0"></noData>
          </scroll-view>
        </template>
        <template v-if="currentTab == 1">
          <view class="introduction">
            <view class="shop-text">
              <view class="label">
                <view class="iconfont3 text-icon">&#xe639;</view>
                门店简介：
              </view>
              <view class="text">
                {{shopInfo.remark}}
              </view>
            </view>
            <view class="shop-text">
              <view class="label">
                <view class="iconfont3 text-icon">&#xe639;</view>
                营业时间：
              </view>
              <view class="text">
                {{shopInfo.time_quantum}}
              </view>
            </view>
            <view class="shop-text">
              <view class="label">
                <view class="iconfont3 text-icon">&#xe639;</view>
                门店地址：
              </view>
              <view class="text">
                {{shopInfo.address}}
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  import rate from "@/components/rate.vue";
  import shopGoods from "@/components/shop-goods.vue";
  import noData from "@/components/noData/nodata.vue"
  export default {
    components: {
      rate,
      shopGoods,
      noData
    },
    data() {
      return {
        config: {
          back: true,
          title: '门店',
          color: '#1a1a1a',
          backgroundColor: [1, "#fff"],
          statusBarFontColor: '#FFFFFF',
          leftSlot: true
        },
        headerHeight: 0,
        stickyHeight: 0,
        viewHeight: 0,
        mainHeight: 0,
        sticky: false,
        shopId: '',
        shopInfo: {},
        tabs: [{
            label: '商品',
            i: 0
          },
          {
            label: '商家简介',
            i: 1
          }
        ],
        currentTab: 0,
        classifyTabs: [],
        classifyCurrentTab: 0,
        goodsList: []
      }
    },
    onLoad(options) {
      if (options && options.shopId) {
        this.shopId = options.shopId
        this.getShopInfo(options.shopId)
        this.getGoodsClassify(options.shopId)
      }
    },
    onShow() {
      this.$nextTick(() => {
        let sysInfo = uni.getSystemInfoSync()
        this.$u.getRect('.header').then(res => {
          this.headerHeight = res.height
          this.stickyHeight = sysInfo.statusBarHeight + 44
        })
        this.$u.getRect('.tabs').then(res => {
          this.viewHeight = res.height
          this.mainHeight = sysInfo.screenHeight - sysInfo.statusBarHeight - 44 - res.height
        })
      })
    },
    onReady() {},
    onPageScroll(e) {
      if (e.scrollTop >= this.headerHeight) {
        this.sticky = true
      } else {
        this.sticky = false
      }
    },
    methods: {
      // 获取店铺信息
      getShopInfo(shopId) {
        this.$http.get("/yxt/shop/info/" + shopId).then((res) => {
          // uni.stopPullDownRefresh();
          // this.loading = false;
          if (res.data && res.code == 200) {
            this.shopInfo = res.data;
          }
        });
      },
      // 获取商品分类
      getGoodsClassify(shopId) {
        this.$http.get("/offlinetype/goods/list", {
          shopId: shopId,
          isGoods: 0
        }).then(res => {
          if (res.code == 200) {
            if (res.list.length > 0) {
              this.classifyTabs = res.list
              this.getClassifyGoods(res.list[0].id, shopId)
            }
          }
        })
      },
      // 获取商品
      getClassifyGoods(classifyId, shopId) {
        this.$http.get("/offline/goods/page", {
          isUp: 1,
          typeId: classifyId,
          isGoods: 0,
          shopId: shopId,
        }).then(res => {
          if (res.code == 200) {
            this.goodsList = res.page.list
          }
        })
      },
      tabsChange(i) {
        if (this.currentTab == i) {
          return false
        }
        this.currentTab = i
      },
      classifyChange(i, item) {
        if (this.classifyCurrentTab == i) {
          return false
        }
        this.classifyCurrentTab = i
        this.getClassifyGoods(item.id, item.shop_id)
      },
      callPhone() {
        if (!this.shopInfo.mobile) {
          return this.$mUtil.toast('暂无客服热线')
        }
        this.$mUtil.callup(this.shopInfo.mobile)
      },
      jumpNavigator() {
        if (!this.shopInfo.tx_latitude || !this.shopInfo.tx_longitude) {
          return this.$mUtil.toast('暂无地址')
        }
        this.$mUtil.jumpLocation(this.shopInfo.tx_latitude, this.shopInfo.tx_longitude)
      },
      jumpGoogsDetail(item) {
        uni.navigateTo({
          url: `/pages/nearbyShop/goodsDetail?goodsId=${item.id}&shopId=${item.shop_id}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container-shop {
    .header {
      width: 100%;
      height: auto;
      background-color: #fff;

      .banner {
        width: 100%;
        height: 290rpx;

        image {
          width: 100%;
          height: 100% !important;
          vertical-align: middle;
        }
      }

      .shop-name {
        position: relative;
        width: 720rpx;
        height: 306rpx;
        margin: -84rpx auto 0;
        background-color: #fff;
        background: url('@/static/shop/shop-bg.png') no-repeat;
        background-size: 100% 100%;

        .title {
          max-width: 400rpx;
          margin-bottom: 30rpx;
          padding: 34rpx 0 0 45rpx;
          font-size: 30rpx;
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
        }

        .title-label {
          margin-bottom: 14rpx;
          color: #333333;
        }

        .shop-logo {
          position: absolute;
          top: -57rpx;
          right: 45rpx;
          width: 226rpx;
          height: 221rpx !important;
          flex-shrink: 0;
          border-radius: 20rpx;
        }

        .score {
          display: flex;
          align-items: center;
          margin-bottom: 15rpx;
          font-weight: 500;

          /deep/ .box {
            display: flex;
            align-items: center;
          }

          .score-txt {
            flex: 1;
            width: 0;
          }
        }

        .tip {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;

          .notice {
            font-size: 26rpx;
            color: #FA6138;
            margin-right: 4rpx;
          }
        }

        .omit {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .help {
          display: flex;
          width: 690rpx;
          margin: 0 auto;
          border-top: 1rpx solid #f2f2f2;

          .btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            padding: 30rpx 0 20rpx;
            text-align: center;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            color: #333333;

            .help-icon {
              margin-right: 7rpx;
              color: #ff6600;
              font-size: 36rpx;
            }
          }
        }
      }
    }

    .tabs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 202rpx 30rpx;
      background-color: #fff;

      .tab {
        position: relative;
        padding: 12rpx 0 9rpx;
        color: #1A1A1A;
        font-size: 30px;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
      }

      .activeTab {
        color: #FA6138;

        &::after {
          display: block;
          content: '';
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 4rpx;
          background: #FA6138;
          border-radius: 2rpx;
          z-index: 3;
        }
      }
    }

    .tabSticky {
      position: fixed;
      z-index: 9;
    }

    .mian {

      .body {
        height: 100%;
        display: flex;

        .scrollview {
          height: 100%;
        }

        .scrollview:first-child {
          width: 180rpx;
          flex-shrink: 0;
          background-color: #f6f6f6;
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          text-align: center;
          color: #666666;

          .classifyTab {
            position: relative;
            text-align: center;
            line-height: 120rpx;
            background-color: #f6f6f6;
            display: flex;
            justify-content: center;

            .class-name {
              width: 80%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .classifyActiveTab {
            background-color: #fff;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            color: #FA6138;

            &::before {
              display: block;
              content: '';
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 6rpx;
              height: 40rpx;
              background-color: #FA6138;
            }
          }
        }

        .scrollview:last-child {
          padding-left: 36rpx;
          padding-right: 30rpx;
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #181818;

          /deep/ .no-data-view {
            margin-top: 0 !important;
          }
        }

        .introduction {
          padding: 40rpx;

          .shop-text {
            margin-bottom: 17rpx;
          }

          .label {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
            font-size: 28rpx;
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            color: #1a1a1a;

            .text-icon {
              font-size: 40rpx;
              color: #FF6600;
              margin-right: 5rpx;
            }
          }

          .text {
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
            line-height: 40rpx;
          }
        }
      }
    }
  }
</style>