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',
        paddingTop: `${navbarHeight+topData.height}px`,
        backgroundColor: '#D6E1D0',
      }" class="header-box">
      <view>
        <view :height="'1080rpx'" class="banner-container">
          <u-swiper :autoplay="true" :current="current" :height="'1080rpx'" :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" :style="{top:0,left:'0rpx',paddingBottom:'20rpx',height:navbarHeight+topData.height+10+'px'}">
            <view class="centered-image" :style="{
                  marginTop:`${navbarHeight}px`
            }">
              <van-image
                  :src="logoImg"
                  fit="contain"
                  :height="topData.height"
                  width="83px"
              />
            </view>
            <view :style="{
                width: '50%',
                height:topData.height+'px',
                marginTop:`${navbarHeight}px`
             }" class="search-box" @click="toSearchList">
              <u-icon name="search" size="20"></u-icon>
              <text>请输入关键词</text>
            </view>
          </view>
        </view>
        <view style="background-color: #FFFFFF;">
          <view>
            <u-notice-bar @click="handleAdv" color="#EE7945" :text="advList.map((a) => a.remark)"></u-notice-bar>
          </view>
        </view>

        <!-- 商品分类 -->
        <view class="box-list">
          <view class="box-list-item" @click="jumpPage('haowu')">
            <van-image
                height="136rpx"
                src="/static/hd1.png"
                width="84rpx"
            />
            <view style=" margin-top: 14rpx">芳香好物</view>
          </view>
          <view class="box-list-item" @click="jumpPage('xueyuan')">
            <van-image
                height="136rpx"
                src="/static/hd2.png"
                width="84rpx"
            />
            <view style=" margin-top: 14rpx"> 芳香学院</view>
          </view>

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

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

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

            <view style=" margin-top: 14rpx">陪伴营</view>
          </view>
        </view>

        <view class="content-box">
          <view class="activity-list">
            <view class="biaoti" style="background: linear-gradient( 180deg, #C4D1BB 0%, #F7F9F6 84%);">
              <van-image
                  height="85.94rpx"
                  src="/static/biaoti1.png"
                  width="171.3rpx"
              />
            </view>
            <image src="/static/huodong-icon.png" mode="aspectFill" class="biaoti-icon"></image>
            <view v-for="(item, index) in activityList" :key="index"
                  @click="toHuodong(item)" class="activity-item">
              <van-image
                  height="670rpx"
                  :src="item.pic"
                  width="750rpx"
              />
              <view class="activity-init display-flex-between ">
                <view class="display-flex-content-center">
                  <view class="huodongText2">
                    <van-image
                        class="huodongText2-img"
                        height="28rpx"
                        src="/static/hdlist2.png" width="28rpx"
                    />
                    {{ item.hits }}
                  </view>
                  <view class="huodongText2">
                    <van-image
                        class="huodongText2-img"
                        height="28rpx"
                        src="/static/hdlist3.png" width="28rpx"
                    />
                    {{ item.entry_num }}
                  </view>
                </view>
                <view class="activity-btn display-flex-content-center" @click.stop="handleRegister(item)">
                  立即报名
                </view>
              </view>
            </view>
          </view>

          <view class="course-list">
            <view class="biaoti">
              <van-image
                  height="85.94rpx"
                  src="/static/biaoti2.png"
                  width="171.3rpx"
              />
            </view>
            <image src="/static/kecheng-icon.png" mode="aspectFill" class="biaoti-icon">
            </image>
            <view v-for="(item, index) in goods_class" :key="index" class="course-item" v-if="index < 2">
              <view style="margin-bottom: 24rpx" @click="toKecheng(item)">
                <van-image
                    :src="item.cover"
                    height="208rpx"
                    width="100%"
                />
              </view>
            </view>
          </view>
          <view  class="goods-list">
            <view class="biaoti">
              <van-image
                  height="85.94rpx"
                  src="/static/biaoti3.png"
                  width="171.3rpx"
              />
            </view>
            <image src="/static/shangpin-icon.png" style="width: 250rpx;height: 250rpx;right:  -43px;" mode="aspectFill" class="biaoti-icon">
            </image>
            <view
                :style="{width: '690rpx', 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>
    </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 {getActivityList} from "@/common/api/activity";
import Toast from "wxcomponents/vant/dist/toast/toast";
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
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: "",
      menuButtonInfo: menuButtonInfo,
      searchInputStyle: {
        backgroundColor: "transparent",
        color: "#1D161F",
      },
      prevData: [],
      advList: [],
      goods_class: [],
      sourceBanner: [],
      activityList: []
    };
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      console.log( uni.getMenuButtonBoundingClientRect())
      console.log(    uni.getSystemInfoSync().statusBarHeight)
      console.log(this.topData)
      console.log(systemInfo.statusBarHeight)
      console.log("+++++++++++++++++++++++++++++++=")
      return this.topData.top
    },
    token() {
      return this.$U.getStorage("token");
    },
    mpCommonClass() {
      return this.$C.mpCommonClass || ''
    }
  },
  watch: {
    titleTabCurrentIndex() {
      if (this.titleTabCurrentIndex == 0) {
        this.getCommonData(true);
      } else {
        this.getFlowData(true);
      }
    },
  },
  onLoad() {
  },
  onShow() {
    this.getBanner();
    this.getNewsList();
    this.getActivityList();
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight - 1; // 状态栏高度
    // 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') { // 来自页面内分享按钮
    }
    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') { // 来自页面内分享按钮
    }
    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.navigateTo({
          url: '/pages/productCenter/productCenter',
        })
      } else if (type === "xueyuan") {
        uni.navigateTo({url: `/subPages/course/course`,})
      } else if (type === "huodong") {
        uni.switchTab({
          url: '/pages/activity/activity',
        })
      } else if (type === "peiban") {
        uni.navigateTo({url: `/subPages/accompanyingCamp/accompanyingCamp`,})
      } else if (type === "shenghuo") {
        uni.navigateTo({url: `/subPages/fragrantLife/fragrantLife`,})
      } else {
        Toast('敬请期待');
      }
    },

    toHuodong(item) {
      uni.navigateTo({url: `/subPages/activityDetail/activityDetail?activityId=${item.id}`,})
    },
    toKecheng(item) {
      uni.navigateTo({url: `/subPages/courseDetail/courseDetail?goods_code=${item.code}`,})
    },
    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_home_logo,
          shop_share_img,
          shop_bgimg
        } = res.data;

        const configs = uni.getStorageSync("configs");
        if (configs) {
          this.logoImg = configs.shop_home_logo
          this.bgImg = configs.shop_bgimg
          this.shopName = configs.shop_share_title
          this.shopShareImg = configs.shop_share_img
        } else {
          this.logoImg = shop_home_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.slice(0, 4);;
        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",
      });
    },
    getActivityList() {
      getActivityList({page: 1, pageSize: 1}).then(({data}) => {
        this.activityList = data.list
      });
    },
    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: 1,
      }).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) {
      uni.setStorageSync('currentCateid', item.id)
      uni.switchTab({
        url: `/pages/productCenter/productCenter?cateid=${item.id}`,
      });
    },
    handleRegister(item2) {
      uni.navigateTo({url: `/subPages/activityDetail/activitySave?activityId=${item2.id}`,})
    },
    handleAdv(index = 0) {
      const activeAdv = this.advList[index];
      console.log("index==>", index)
      console.log("advList==>", this.advList)
      uni.navigateTo({
        url: "/subPages/accompanyingCamp/accompanyingCampDetail?id=" + activeAdv.id,
      });
    },
  },
};
</script>
w
<style lang="scss" scoped>
page {
  overflow-x: hidden;
}
.ps-wrapper {
  //background-color: $primary-bg-color;
  background-color:   #C4D1BB;
  overflow: hidden;
  .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;
    bottom: 29rpx;
    display: flex;
    margin: 0 0rpx 0 0rpx;
    flex-direction: row;
    justify-content: center;
    transform: translateX(-80rpx);

    .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;
    overflow: hidden;
    .activity-list{
      width: 750rpx;
      border-radius: 0;
      position: relative;
      overflow: hidden;
      .activity-item{
        width: 750rpx;
        height: 750rpx;
        background-color: #E1E3D5;
        opacity: 0.8;
        .activity-init {
          width: 750rpx;
          height: 80rpx;

          .huodongText2-img {
            margin-right: 30rpx;
            margin-left: 30rpx;
            display: flex; // 添加 flex 布局
            align-items: center; // 垂直居中
          }

          .huodongText2 {
            height: 80rpx;
            display: flex; // 添加 flex 布局
            align-items: center; // 垂直居中
            font-weight: 350;
            font-size: 24rpx;
            color: #4C644A;
            line-height: 34rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }

          .activity-btn {
            width: 144rpx;
            height: 48rpx;
            border-radius: 0rpx 0rpx 0rpx 0rpx;
            border: 1rpx solid #4C644A;
            font-weight: 350;
            font-size: 22rpx;
            color: #4C644A;
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-right: 20rpx;
          }
        }
      }
    }
    .biaoti-icon{
      width: 200rpx;
      height: 200rpx;
      position: absolute;
      top: 0;
      right: -22px;
    }
    .course-list {
      width: 750rpx;
      background: linear-gradient(180deg, #C4D1BB 0%, #F7F9F6 31%);
      border-radius: 0;
      padding-bottom: 22rpx;
      position: relative;
      .course-item {
        width: 690rpx;
        height: 208rpx;
        margin-bottom: 28rpx;
        padding: 0 30rpx;
      }
      overflow: hidden;
    }
    .goods-list{
      width: 750rpx;
      background: linear-gradient( 180deg, #C4D1BB 0%, #F7F9F6 31%);
      border-radius: 0;
      padding-bottom: 22rpx;
      position: relative;
      overflow: hidden;
    }
    .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: fixed;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        box-sizing: border-box;
        z-index: 9999;
        background-color: rgba(214, 225, 208,1);
        .search-box {
          margin: 0rpx 20rpx 0rpx 20rpx;
          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-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;
        }
      }
    }
  }

  .box-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: calc(750rpx - 40rpx);
    height: 292rpx;
    background: linear-gradient(180deg, #C4D1BB 0%, #F7F9F6 44%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    //background-color: #FFFFFF;;
    padding: 0 20rpx 0;
    &-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 20%;
      flex-shrink: 0;
      text-align: center;
      color: #1d161f;
      font-size: 26rpx;
    }
  }

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


}
</style>

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