fangliaoxiaochengxv/pages/home/index.vue

<template>
  <view class="ps-wrapper">
    <view id="headerBox" ref="headerBox" :class="[mpCommonClass]" :style="{
        background: `url(${bgImg}) no-repeat center top`,
        backgroundSize: '100% 400rpx',
        backgroundColor: '#F7F7F7',
      }" class="header-box">
      <view>
        <view :height=" '1225rpx'" class="banner-container">
          <u-swiper :autoplay="true" :current="current" :height=" '1225rpx'" :list="bannerList" circular
                    duration="1000" interval="5000" @change="(data) => (current = data.current)" @click="bannerClick">
            <template #indicator>
              <view class="custom-indicator">
                <text v-for="item in bannerList.length" v-show="bannerList.length > 0" :key="item"
                      :class="{ 'banner-active': item === current }" class="custom-indicator-item"></text>
              </view>
            </template>
          </u-swiper>
          <view class="logo-search-container">
            <view class="centered-image">
              <van-image
                  :src="logoImg"
                  fit="contain"
                  height="20px"
                  width="83px"
              />
            </view>
            <view :style="{
                width: '75%',
                height: '100%',
             }" class="search-box" @click="toSearchList">
              <u-icon name="search" size="20"></u-icon>
              <text>请输入关键词</text>
            </view>
          </view>
        </view>
        <!-- 商品分类 -->
        <view class="goods-list">
          <view class="goods-list-item" @click="jumpPage('haowu')">
            <van-image
                height="136rpx"
                src="/static/hd1.png"
                width="84rpx"
            />
            <view style=" margin-top: 14rpx">芳香好物</view>
          </view>
          <view class="goods-list-item" @click="jumpPage()">
            <van-image
                height="136rpx"
                src="/static/hd2.png"
                width="84rpx"
            />
            <view style=" margin-top: 14rpx"> 芳香学院</view>
          </view>

          <view class="goods-list-item" @click="jumpPage()">
            <van-image
                height="136rpx"
                src="/static/hd3.png"
                width="84rpx"
            />
            <view style=" margin-top: 14rpx"> 芳香活动</view>
          </view>

          <view class="goods-list-item" @click="jumpPage()">
            <van-image
                height="136rpx"
                src="/static/hd5.png"
                width="84rpx"
            />
            <view style=" margin-top: 14rpx"> 芳香生活
            </view>
          </view>

          <view class="goods-list-item" @click="jumpPage()">
            <van-image
                height="136rpx"
                src="/static/hd4.png"
                width="84rpx"
            />

            <view style=" margin-top: 14rpx">陪伴营</view>
          </view>
        </view>
        <view class="biaoti">
          <van-image
              height="85.94rpx"
              src="/static/biaoti1.png"
              width="171.3rpx"
          />
        </view>
        <view class="content-box">
          <view :style="{width: '95%', margin: '0rpx auto', height: '378rpx' ,borderRadius: '24rpx 24rpx 24rpx 24rpx',backgroundColor: '#F2FAF2'}"
                @click="toHuodong()">
            <van-image
                height="280rpx"
                src="/static/hdlist1.png"
                width="100%"
            />
            <view>
              <van-row>
                <van-col span="16">
                  <view class="huodongText">
                    芬芳小溪-健康生活态游园会
                  </view>
                </van-col>
                <van-col span="8">
                  <van-row>
                    <van-col span="12">
                      <view class="huodongText2">
                        <van-image
                            class="huodongText2-img"
                            height="28rpx"
                            src="/static/hdlist2.png" width="28rpx"
                        />
                        500
                      </view>
                    </van-col>
                    <van-col span="12">
                      <view class="huodongText2">
                        <van-image
                            class="huodongText2-img"
                            height="28rpx"
                            src="/static/hdlist3.png" width="28rpx"
                        />
                        160
                      </view>
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>

            </view>
          </view>
          <view class="biaoti">
            <van-image
                height="85.94rpx"
                src="/static/biaoti2.png"
                width="171.3rpx"
            />
          </view>
          <view
              :style="{width: '95%', margin: '0rpx auto'}">
            <view style="width: 100%;">

              <view v-for="(item, index) in goods_class" :key="index">
                <view style="margin-bottom: 24rpx" @click="toKecheng(item)">
                  <van-image
                      :src="item.cover"
                      height="200rpx"
                      width="100%"
                  />
                </view>
              </view>
            </view>
          </view>
          <view class="biaoti">
            <van-image
                height="85.94rpx"
                src="/static/biaoti3.png"
                width="171.3rpx"
            />
          </view>
          <view
              :style="{width: '95%', margin: '0rpx auto'}">
            <CommercePart :data="commonDataList"></CommercePart>
            <!-- 赠品专区 -->
            <image v-if="giftBanner.pic" :src="giftBanner.pic" mode="aspectFill"
                   style="width: 100%; height: 206rpx" @click="toSubpages('giftZone')">
            </image>
          </view>
        </view>
      </view>
    </view>
    <tabbarCom current="0"></tabbarCom>
    <van-toast id="van-toast"/>
  </view>

</template>

<script>
import tabbarCom from "@/components/tabbar/tabbar.vue"
import CommercePart from "@/components/CommercePart.vue";
// import FlowPart from "@/components/FlowPart.vue";
import {
  goodsList
} from "./config";
import {
  getBanner
} from "@/common/api/home.js";
import {
  getNewsList
} from "@/common/api/news.js";
import Toast from "wxcomponents/vant/dist/toast/toast";
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
export default {
  components: {
    tabbarCom,
    CommercePart
  },
  data() {
    return {
      bgImg: '',
      logoImg: '',
      shopName: '',
      shopShareImg: '',
      ponitsBanner: {}, // 积分兑换
      giftBanner: {}, // 赠品
      partGoodsList: [],
      msGoodsList: [],
      bannerList: [],
      topData: {
        top: 0,
        height: 0,
      },
      current: 0,
      titleTabCurrentIndex: 0,
      goodsList: goodsList,
      imageUrl: this.$C.imageUrl,
      userInfo: {},
      keyword: "",
      commonPage: {
        pageNum: 1,
        pageSize: 4,
        total: 0,
      },
      flowPage: {
        pageNum: 1,
        pageSize: 4,
        total: 0,
      },
      status: "loadmore",
      filterData: {},
      loadText: {
        loadmore: "点击加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      selectedType: "",
      activeTabStyle: {
        fontSize: "36rpx",
        fontWeight: "600",
      },
      mainHeightStyle: {},
      mainHeight: "",
      commonDataList: [],
      flowDataList: [],
      statusBarHeight: systemInfo.statusBarHeight,
      menuButtonInfo: menuButtonInfo,
      searchInputStyle: {
        backgroundColor: "transparent",
        color: "#1D161F",
      },
      prevData: [],
      advList: [],
      goods_class: [],
      sourceBanner: []
    };
  },
  computed: {
    // 导航栏内部盒子的样式
    navbarInnerStyle() {
      let style = {};
      // 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
      style.height = this.navbarHeight + "px";
      // // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
      // #ifdef MP
      let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
      style.marginRight = rightButtonWidth + "px";
      // #endif
      return style;
    },
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 44;
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == "ios" ? 44 : 48;
      return this.height ? this.height : height;
      // #endif
    },
    token() {
      return this.$U.getStorage("token");
    },
    mpCommonClass() {
      console.log(this.$C)
      return this.$C.mpCommonClass || ''
    }
  },
  watch: {
    titleTabCurrentIndex() {
      if (this.titleTabCurrentIndex == 0) {
        this.getCommonData(true);
      } else {
        this.getFlowData(true);
      }
    },
  },
  onLoad() {
    this.getBanner();
    this.getNewsList();
  },
  onShow() {
    uni
        .createSelectorQuery()
        .in(this)
        .select("#headerBox")
        .boundingClientRect((data) => {
          let height = (data.height + 20) * 2 + "rpx";
          this.mainHeight = `calc(100vh - ${height})`;
        })
        .exec();
    const topData = uni.getMenuButtonBoundingClientRect();
    this.topData.top = topData.top;
    this.topData.height = topData.height;
    if (this.token) {
      this.userInfo = this.$U.getStorage("userInfo");
    }

    // this.getMsData()
    // this.getCommonData(true);
  },
  onReachBottom() {
    this.getCommonData();
  },
  onShareAppMessage(res) {
    if (res.from === 'button') { // 来自页面内分享按钮
      console.log(res.target)
    }
    let userInfo = uni.getStorageSync('userInfo')
    userInfo = userInfo && JSON.parse(userInfo) || {}
    let params = {}
    if (userInfo.id) {
      params = {
        id: userInfo.id
      }
    }
    return {
      title: this.shopName,
      path: `/pages/home/index${this.$stringPageOptions(params)}`,
      imageUrl: this.shopShareImg,
    }
  },
  onShareTimeline(res) {
    if (res.from === 'button') { // 来自页面内分享按钮
      console.log(res.target)
    }
    let userInfo = uni.getStorageSync('userInfo')
    userInfo = userInfo && JSON.parse(userInfo) || {}
    let params = {}
    if (userInfo.id) {
      params = {
        id: userInfo.id
      }
    }
    return {
      title: this.shopName,
      imageUrl: this.shopShareImg,
      path: `/pages/home/index${this.$stringPageOptions(params)}`
    }
  },
  methods: {
    toMsList() {
      uni.navigateTo({
        url: `/subPages/msGoodsList/msGoodsList`,
      });
    },
    toMsDetail(item) {
      // 秒杀详情
      uni.navigateTo({
        url: `/subPages/goodsDetail/goodsDetail?code=${item.id}&type=msGoods`,
      });
    },

    toDetails(item) {
      // 秒杀详情
      uni.navigateTo({
        url: `/subPages/goodsDetail/goodsDetail?code=${item.code}&type=common`,
      });
    },
    toSubpages(type) {
      if (type == "pointsZone") {
        uni.navigateTo({
          url: `/subPages/pointsZone/pointsZone?id=${this.ponitsBanner.pstn_id}`,
        });
      } else {
        uni.navigateTo({
          url: `/subPages/giftZone/giftZone?id=${this.giftBanner.pstn_id}`,
        });
      }
    },

    jumpPage(type) {
      if (type == "haowu") {
        uni.switchTab({
          url: '/pages/productCenter/productCenter',
        })
      } else {
        Toast('敬请期待');
      }
    },

    toHuodong(type) {
      Toast('敬请期待');
    },
    toKecheng(type) {
      Toast('敬请期待');
    },
    bannerClick(index) {
      const currentUrl = this.sourceBanner[index].pic_url
      if (currentUrl != '#') {
        uni.navigateTo({
          url: currentUrl
        })
      }
    },
    getBanner() {
      getBanner().then((res) => {
        const {
          slider = [],
          goods_class = [],
          goods_cate = [],
          goods_online = [],
          seckill_goods = [],
          integral_page = [],
          gifts_page = [],
          shop_name,
          shop_logo,
          shop_share_img,
          shop_bgimg
        } = res.data;

        const configs = uni.getStorageSync("configs");
        if (configs) {
          this.logoImg = configs.shop_logo
          this.bgImg = configs.shop_bgimg
          this.shopName = configs.shop_share_title
          this.shopShareImg = configs.shop_share_img
        } else {
          this.logoImg = shop_logo
          this.bgImg = shop_bgimg
          this.shopName = shop_name
          this.shopShareImg = shop_share_img
        }
        this.bannerList = slider.map(item => item.pic);
        this.sourceBanner = slider
        this.goodsList = goods_cate;
        this.commonDataList = goods_online;
        this.msGoodsList = seckill_goods;
        this.goods_class = goods_class;
        this.ponitsBanner = integral_page.length && integral_page[0];
        this.giftBanner = gifts_page.length && gifts_page[0];
        uni.setStorageSync('mpInfo', {
          shopName: this.shopName,
          shareImg: this.shopShareImg
        })
      });
      // const data = {
      // 	name: 'sliderread'
      // };
      // this.$api.getData(data)
      // 	.then((res) => {
      // 		uni.hideLoading();
      // 		console.log("getBanner==>", res.data)
      // 		if (res.data) {
      // 			this.bannerList = res.data;
      // 		} else {}
      // 	})
      // 	.catch(() => {
      // 		uni.hideLoading();
      // 	});
    },
    toSearchList() {
      uni.navigateTo({
        url: "/subPages/searchList/searchList",
      });
    },
    getMsData() {
      uni.showLoading({
        title: "加载中",
      });
      this.$api
          .getPSMsList()
          .then((res) => {
            uni.hideLoading();
            // this.msGoodsList = res.data && res.data.list || []
          })
          .catch(() => {
            uni.hideLoading();
          });
    },
    getNewsList() {
      getNewsList({
        cid: 1,
        page: 1,
        pageSize: 100,
      }).then(({
                 data = {}
               }) => {
        this.advList = data.list || [];
      });
    },
    getCommonData(initFlag) {
      if (!initFlag) {
        if (
            this.commonPage.pageNum * this.commonPage.pageSize <
            this.commonPage.total
        ) {
          this.commonPage.pageNum++;
        } else {
          return;
        }
      } else {
        this.commonPage.pageNum = 1;
        this.commonPage.total = 0;
        this.commonDataList = [];
      }
      let sendData = {
        limit: this.commonPage.pageSize,
        page: this.commonPage.pageNum,
      };
      uni.showLoading({
        title: "加载中",
      });
      this.$api
          .getPSGoodsList(sendData)
          .then((res) => {
            uni.hideLoading();
            if (res.code == 1) {
              const {
                list = [], page = {}
              } = res.data;
              this.commonDataList = this.commonDataList.concat(list);
              this.commonPage.total = page.total;
            }
          })
          .catch((err) => {
            uni.hideLoading();
          });
    },
    getFlowData(initFlag) {
      if (!initFlag) {
        if (
            this.flowPage.pageNum * this.flowPage.pageSize <
            this.flowPage.total
        ) {
          this.flowPage.pageNum++;
        } else {
          return;
        }
      } else {
        this.flowPage.pageNum = 1;
        this.flowPage.total = 0;
        this.flowDataList = [];
      }
      let sendData = {
        limit: this.flowPage.pageSize,
        page: this.flowPage.pageNum,
      };
      uni.showLoading({
        title: "加载中",
      });
      this.$api
          .getFlowData(sendData)
          .then((res) => {
            uni.hideLoading();
            if (res.code == 1) {
              const {
                list = [], page = {}
              } = res.data;
              this.flowDataList = this.flowDataList.concat(list);
              this.flowPage.total = page.total;
            }
          })
          .catch((err) => {
            uni.hideLoading();
          });
    },
    searchChange() {
    },

    toDetail(item) {
      uni.navigateTo({
        url: "../../subPages/commerceDetail/commerceDetail?id=" + item.id,
      });
    },
    toList(item) {
      console.log("cateid=====>", item);
      uni.setStorageSync('currentCateid', item.id)
      uni.switchTab({
        url: `/pages/productCenter/productCenter?cateid=${item.id}`,
      });
    },
    handleAdv(index) {
      const activeAdv = this.advList[index];
      uni.navigateTo({
        url: `/pages/article/article?id=${activeAdv.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ps-wrapper {
  background-color: $primary-bg-color;

  .adv-box {
    position: relative;
    // padding: 0 33rpx 20rpx;
    height: 64rpx;
    background-color: white;
    padding: 0 20rpx 0;
    border-radius: 16rpx;
    margin: 40rpx 0 20rpx;
    font-weight: 500;

    .adv-icon {
      position: absolute;
      left: 6rpx;
      top: 50%;
      transform: translateY(-50%);
    }

    ::v-deep {
      .u-notice__left-icon {
        width: 19px;

        .u-icon__icon {
          display: none;
        }
      }
    }
  }

  .custom-indicator {
    position: absolute;
    left: 0rpx;
    right: 0rpx;
    bottom: 29rpx;
    width: 712rpx;
    display: flex;
    margin: 0 20rpx 0 20rpx;
    flex-direction: row;
    justify-content: center;
    transform: translateX(-48rpx);

    .custom-indicator-item {
      width: 16rpx;
      height: 16rpx;
      margin: 0 6rpx;
      border-radius: 12rpx;
      background-color: #666666;
    }

    .banner-active {
      width: 48rpx;
      background-color: #222222;
    }
  }


  .slot-wrap {
    background-color: red;
  }

  .content-box {
    // overflow-y: auto;
    background-color: $primary-bg-color;
    padding: 20rpx 0 0;

    .part-box {
      background: linear-gradient(180deg, #fdd118 0%, #f7f7f7 100%);
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      padding: 18rpx 14rpx;

      .part-list {
        display: flex !important;
        flex-direction: row !important;
        // justify-content: space-between;
        background-color: #fff;
        border-radius: 10rpx;
        padding: 15rpx 15rpx 30rpx;
        font-size: 24rpx;
        color: #1d161f;
        margin-top: 15rpx;

        &-item {
          width: calc(33% - 10rpx);
          margin-right: 10rpx;
        }
      }
    }
  }

  .header-box {
    width: 100%;

    .banner-container {
      position: relative;
      width: 100%;

      .logo-search-container {
        position: absolute;
        top: 12%;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20rpx;
        box-sizing: border-box;

        .search-box {
          margin: 0 auto 0rpx;
          height: 61rpx;
          background: rgba(255, 255, 255, 0.3);
          border-radius: 30rpx;
          opacity: 1;
          display: flex;
          align-items: center;
          flex-direction: row;

          text {
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #9D9D9D;
            line-height: 61rpx;
            margin-left: 11rpx;
          }
        }
      }

      .centered-image {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 61rpx;
      }
    }

    .content {
      width: 100%;
      z-index: 50;
      // margin-top: -60rpx;s
      .title-tab {
        font-size: 34rpx;
        color: #aca9af;
        font-style: italic;
        font-weight: 700;
        margin-bottom: 26rpx;
        padding: 0 20rpx;

        &-item {
          margin-right: 30rpx;
        }

        &-actived {
          color: #000;
        }
      }
    }
  }


  .goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: #FFFFFF;;
    padding: 0 20rpx;
    padding-top: 40rpx;

    &-item {
      width: 20%;
      flex-shrink: 0;
      text-align: center;
      margin-bottom: 30rpx;
      color: #1d161f;
      font-size: 26rpx;
    }
  }

  .biaoti {
    width: 100%;
    height: 180rpx;
    display: flex;
    justify-content: center;
    align-items: center
  }

  .huodongText {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #333333;
    line-height: 36rpx; // 修正拼写错误
    text-align: left; // 如果需要水平居中，可以改为 'center'
    font-style: normal;
    text-transform: none;
    height: 98rpx;
    display: flex; // 添加 flex 布局
    align-items: center; // 垂直居中
    margin-left: 30rpx; // 添加左边距
  }

  .huodongText2 {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20rpx;
    color: #666666;
    height: 98rpx;
    line-height: 28rpx;
    text-align: left;
    font-style: normal;
    display: flex; // 添加 flex 布局
    align-items: center; // 垂直居中
    text-transform: none;

    .huodongText2-img {
      margin-right: 15rpx;
      margin-left: 15rpx
    }
  }

}
</style>

<style lang="scss">
page {
  height: 100vh;
}
</style>