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 height="340" border-radius="0" :list="bannerList"></u-swiper> mpCommonClass=='mp-common3' ? '46vw':-->
          <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="16px"
                  width="83px"
              />
            </view>
            <view :style="{
                width: '100%',
                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="">
            <van-image
                height="136rpx"
                src="/static/hd1.png"
                width="84rpx"
            />
            <view style=" margin-top: 14rpx">芳香好物</view>
          </view>
          <view class="goods-list-item" @click="">
            <van-image
                height="136rpx"
                src="/static/hd2.png"
                width="84rpx"
            />
            <view style=" margin-top: 14rpx"> 芳香学院</view>
          </view>

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

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

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

            <view style=" margin-top: 14rpx">陪伴营</view>
          </view>
        </view>
        <view :style=" {width: '100%',
    height: '180rpx',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center' }">
          <van-image
              height="85.94rpx"
              src="/static/biaoti1.png"
              width="171.3rpx"
          />
        </view>
        <view
            :style="{width: '100%', height: '378rpx' ,borderRadius: '24rpx 24rpx 0rpx 0rpx',backgroundColor: '#F2FAF2'}">
        </view>
        <view class="content-box">

          <!-- 爆款推荐 -->
          <view class="mb10 mt10">
            <image :src="`${imageUrl}/zx_icon.png`" mode="heightFix" style="width: 133rpx; height: 48rpx">
            </image>
          </view>
          <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>
    <tabbarCom :current="1"></tabbarCom>
  </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";
// 获取系统状态栏的高度
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_hot: [],
      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}`,
        });
      }
    },
    bannerClick(index) {
      const currentUrl = this.sourceBanner[index].pic_url
      if (currentUrl != '#') {
        uni.navigateTo({
          url: currentUrl
        })
      }
    },
    getBanner() {
      getBanner().then((res) => {
        const {
          slider = [],
          goods_hot = [],
          goods_cate = [],
          goods_new = [],
          seckill_goods = [],
          integral_page = [],
          gifts_page = [],
          shop_name,
          shop_logo,
          shop_share_img,
          shop_bgimg
        } = res.data;
        const configs = uni.getStorageSync("configs");
        console.log("getConfigzj=>", 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
        console.log(23333, this.bannerList)
        this.goodsList = goods_cate;
        this.commonDataList = goods_new;
        this.msGoodsList = seckill_goods;
        this.goods_hot = goods_hot;
        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: 64 rpx;
    background-color: white;
    padding: 0 20 rpx 0;
    border-radius: 16 rpx;
    margin: 40 rpx 0 20 rpx;
    font-weight: 500;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .newset-box {
      background: transparent;
    }

    .rmsp {
      width: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 16 rpx;
      background: #FFFFFF;

      .rmsp-title-box {
        display: flex;
        width: 100%;
        margin-top: 20 rpx;
        flex-direction: row;
        align-items: center;

        .red-tag {
          margin-left: 16 rpx;
          background: linear-gradient(285deg, #FF424F -1%, #FF6973 100%);
          color: #FFFFFF;
          padding: 2 rpx 6 rpx;
          font-size: 20 rpx;
          white-space: nowrap;
          border-radius: 4 rpx;
          overflow: hidden;
        }

        .more-btn {
          padding-right: 32 rpx;
          font-size: 24 rpx;
          color: #6C6970;
        }
      }

      .rm-sv {
        white-space: nowrap;
        margin-top: 22 rpx;
        width: calc(100% - 50rpx);
        margin-left: 15 rpx;

        .sp-box {
          display: inline-block;
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;

          .rm-sp-item {
            margin-left: 25 rpx;
            width: 196 rpx;
            display: flex;
            flex-direction: column;

            &:active {
              opacity: 0.7;
            }

            .rm-title {
              margin-top: 16 rpx;
              font-size: 24 rpx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              white-space: pre-wrap;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              /* 这里的数字表示你想显示的行数 */
              // line-height: 1.2;
              /* 调整行高以匹配你的字体和设计 */
              height: calc(1.2em * 2);
              /* 行高乘以行数 */
            }


            .rm-price {
              margin-top: 10 rpx;
              margin-bottom: 30 rpx;
              width: 196 rpx;
              font-size: 32 rpx;
              color: #FF424F;
            }
          }
        }
      }

    }

    .tjsp {
      width: 100%;
      display: flex;
      flex-direction: column;

      .tjsp-item {
        width: 100%;
        border-radius: 16 rpx;
        background: #FFFFFF;
        margin-top: 20 rpx;
        position: relative;
        display: flex;
        flex-direction: row;

        &:active {
          opacity: 0.7;
        }
      }

      .tjsp-item-content {
        display: flex;
        margin-right: 20 rpx;
        flex: 1;
        flex-direction: column;

        .tjsp-title {
          margin-top: 20 rpx;
          font-size: 28 rpx;
          color: #3E3D44;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          white-space: pre-wrap;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
        }

        .tjsp-remark {
          width: fit-content;
          margin-top: 20 rpx;
          font-size: 20 rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          border-radius: 8 rpx;
          overflow: hidden;
          white-space: pre-wrap;
          padding: 0 10 rpx;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
        }

        .tjsp-remark1 {
          color: #1AC77F;
          background: #E7FCF3;
        }

        .tjsp-remark2 {
          color: #D18D3F;
          background: #FFF8EF;
        }
      }

      .tjsp-price {
        font-size: 32 rpx;
        position: absolute;
        left: 200 rpx;
        bottom: 20 rpx;
      }
    }

  }

  .header-box {
    width: 100%;

    .qr-code {
      padding: 0 20 rpx;
      font-size: 34 rpx;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-style: italic;
    }

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

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

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

  .mp-common3 {
  }

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

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

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

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

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