kailin_mp/pages/index/index.vue

<template>
  <view class="index">
    <view class="page-title" />
    <!-- 轮播图 -->
    <view class="banner_box">
      <view class="banner_list" v-if="bannerList.length">
        <swiper class="banner_swiper" :autoplay="true">
          <swiper-item v-for="(item, index) in bannerList" :key="index" style="border-radius: 8px">
            <image :src="item.thumb" class="image" @click="navLottery(item.link_url)"></image>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="icon-list">
      <icon-list mode="row8" :icons="icons" :gap="0" />
    </view>
    <!-- <view class="notice-list">
      <notice-list :noticeList="[{ text: '开邻智数新版本发布啦~' }, { text: '更多新功能敬请期待~' }]" gap="18" />
    </view> -->
    <view class="header-title">
      <components-header title="专区导航" />
    </view>
    <view class="banner-list">
      <banner-list :images="banners" mode="grid" :gap="16" />
    </view>
    <view class="header-title">
      <components-header title="推荐商品" />
    </view>
    <view class="product_box">
      <view class="to_bottom" v-if="!productList.length"> -----还没有产品啦-----</view>
      <!-- 产品列表 -->
      <view class="product_list">
        <!-- Vue3 项目部分小程序端事件延迟或调用失败 在执行事件的元素上添加 data-eventsync="true" 属性以解决此问题 -->
        <view @click="toDetail(item)" data-eventsync="true" class="product_item" v-for="(item, index) in productList" :key="index">
          <view class="product_item_content">
            <view class="product_image_content">
              <image class="product_image" :src="item.thumb" mode=""></image>
            </view>
            <view>
              <view class="product_name">
                <text v-if="item.promo_title" class="regiment_title">{{ item.promo_title }}</text>
                <text v-if="item.regiment_title" class="regiment_title">{{ item.regiment_title }}</text>
                <text>{{ item.name }}</text></view
              >
              <view class="product_spec"
                ><text>{{ item.spec }}</text></view
              ></view
            >
          </view>
          <view class="product_item_bottom">
            <view class="stock_price">
              <view class="product_price" v-if="isShowPrice">
                <text>￥{{ item.price }} </text>
              </view>
              <view class="product_stock">剩{{ item.stock }}个</view>
            </view>
            <view class="stock_button">立即抢购</view>
          </view>
        </view>
      </view>
    </view>
    <view class="search_fixed">
      <view class="search_box">
        <view class="city_name" v-if="!toSelectedCity">
          <navigator url="/pages/user/info" v-if="isManager">{{ cityName }}</navigator>
          <text v-if="!isManager">{{ cityName }}</text>
        </view>
        <navigator url="/pages/user/info" v-if="toSelectedCity" class="city_name uncheck">选城市</navigator>
        <input class="search_input" type="text" v-model="requestParam.name" @input="searchChange" placeholder="请输入产品名称搜索" />
        <button class="search_btn" @click.stop="searchOpen()" data-eventsync="true">搜索</button>
      </view>
    </view>
    <view class="to_bottom" v-if="isLast" style="display: flex; justify-content: center">
      -----
      <view :style="!productList.length && toSelectedCity ? 'font-weight:bold;font-size:36rpx' : ''">{{ !productList.length && toSelectedCity ? '请点击左上角选择你的城市' : '到底啦' }}</view> -----
    </view>
    <uni-popup ref="addFollow" type="center" class="center_popup">
      <FollowPopup :closePopup="closePopup" />
    </uni-popup>
    <cc-myTabbar :tabBarShow="0"></cc-myTabbar>
  </view>
</template>

<script>
import FollowPopup from '@/components/FollowPopup/FollowPopup.vue';
import IconList from '@/components/IconList';
import NoticeList from '@/components/Notice';
import BannerList from '@/components/Banner';
import ComponentsHeader from '@/components/ComponentsHeader';
const Icons = [
  { image: 'https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/c/1/s/92/up/20250521/682d3fed51fa2.ng', text: '全品', urlMap: { internal_url: '/pages/product/list' } },
  { image: 'https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/c/1/s/92/up/20250521/682d3ffdea775.ng', text: '医保价', urlMap: { internal_url: '/pages/wait/index?id=1&name=医保价' } },
  { image: 'https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/c/1/s/92/up/20250521/682d400fd5932.ng', text: '行业资讯', urlMap: { internal_url: '/pages/article/index' } },
  { image: 'https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/c/1/s/92/up/20250521/682d401d6a885.ng', text: '直播', urlMap: { internal_url: '/pages/wait/index?id=101&name=直播' } },
  { image: 'https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/c/1/s/92/up/20250521/682d402ddaeb6.ng', text: '促销活动', urlMap: { internal_url: '/pages/wait/index?id=2&name=促销活动' } },
  { image: 'https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/c/1/s/92/up/20250521/682d404366cf8.ng', text: '拼团包邮', urlMap: { internal_url: '/pages/wait/index?id=3&name=拼团包邮' } },
  { image: 'https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/c/1/s/92/up/20250521/682d404c65d9f.ng', text: '积分商城', urlMap: { internal_url: '/pages/score/index' } },
  { image: 'https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/c/1/s/92/up/20250521/682d40561a23b.ng', text: '领券中心', urlMap: { internal_url: '/pages/coupon/index' } },
];
const Banners = [
  { image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/index/active.png', text: '区域活动', urlMap: { internal_url: '/pages/wait/index?id=4&name=区域活动' } },
  { image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/index/b2b.png', text: 'B2B专供', urlMap: { internal_url: '/pages/wait/index?id=5&name=B2B专供' } },
  { image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/index/exp.png', text: '近效期', urlMap: { internal_url: '/pages/wait/index?id=6&name=近效期' } },
  { image: 'https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/index/heath.png', text: '大健康', urlMap: { internal_url: '/pages/wait/index?id=11&name=大健康' } },
];
export default {
  components: { FollowPopup, IconList, NoticeList, BannerList, ComponentsHeader },
  data() {
    return {
      // 轮播图
      bannerList: [],
      // 产品列表
      productList: [],
      // 请求参数
      requestParam: {
        name: '',
        page: 1,
        get_top: 1,
      },
      // 是否最后一页
      isLast: false,
      // 是否请求中
      isReqing: false,
      // 是否显示价格
      isShowPrice: false,
      // 城市名称
      cityName: '选城市',
      // 选择城市
      toSelectedCity: false,
      // 是否是管理员
      isManager: false,
      icons: Icons,
      banners: Banners,
    };
  },
  onLoad() {
    // #ifdef MP-WEIXIN
    uni.hideTabBar();
    //分享按钮
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline'],
    });
    // #endif
  },
  onShareAppMessage(obj) {
    // 获取分享信息
    let shareList = getApp().globalData.shareList;
    // 获取分享信息
    let shareObj = {
      title: '999智控终端平台\n药优惠 得积分 兑豪礼',
      path: '/pages/index/index',
      imageUrl: '',
    };
    // 循环列表
    for (let i in shareList) {
      if (shareList[i].pages == 'pages/index/index') {
        shareObj.path = shareList[i].path ? shareList[i].path : shareObj.path;
        shareObj.title = shareList[i].title ? `999智控终端平台\n${shareList[i].title}` : shareObj.title;
        shareObj.imageUrl = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl;
      }
    }
    // 返回分享信息
    return shareObj;
  },
  onShow() {
    // 是否显示价格
    this.isShowPrice = this.$checkAccess.checkShowPrice();
    // 城市名
    this.cityName = this.$checkAccess.getCity();
    // 选城市
    (this.cityName = this.cityName ? this.cityName : '选城市'),
      // 登录并且未选择城市，才可以选择城市
      (this.toSelectedCity = !this.$checkAccess.getCity() ? true : false);
    // 数据

    //未选城市先弹窗提醒选择城市
    if (!this.$checkAccess.getCity() && this.$checkAccess.checkLogin()) {
      uni.showModal({
        title: '',
        content: '请先选择城市',
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: '/pages/user/info',
            });
          }
        },
      });
    }

    //如果已选城市且没有添加客服每天弹窗一次
    if (this.$checkAccess.getCity() && this.$checkAccess.getFollowQrcode()) {
      // 获取弹出时间
      let followPopupTime = uni.getStorageSync('followPopupTime');
      // 现在的时候
      let nowTime = new Date().getTime();
      // 时间戳
      followPopupTime = followPopupTime ? followPopupTime : 0;
      // 弹出结果
      if (followPopupTime <= 0 || followPopupTime - nowTime > 86400000) {
        this.$refs.addFollow.open('center');
        uni.setStorageSync('followPopupTime', nowTime);
      }
    }
    this.isManager = this.$checkAccess.isManager();
    // 没有数据的话，或者请求中，不允许刷新
    if (this.isReqing) return;
    // 获取列表
    this.$http.request('/api/banner/get_list').then((re) => {
      if (re.code === 'success') {
        this.bannerList = re.data;
      }
    });
    // 请求参数
    this.requestParam.name = '';
    // 请求参数
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求
    this.$http.request('api/product/get_list', this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == 'success') {
        // 如果是最后一页
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        // 赋值
        this.productList = re.data.data;
        // 获取下一页
        this.getMore(re);
      }
    });
  },
  onPullDownRefresh() {
    // 如果请求中，不允许请求，
    if (this.isReqing) return false;
    // 初始化页码为1
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request('api/product/get_list', this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == 'success') {
        // 如果是最后一页
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        // 赋值
        this.productList = re.data.data;
        // 获取下一页
        this.getMore(re);
      }
    });
    uni.stopPullDownRefresh();
  },
  // onReachBottom() {
  //   // 如果页码是0，避免第一页重复
  //   if (this.requestParam.page < 1) return;
  //   // 最后一页不再请求
  //   if (this.isLast) return;
  //   // 请求中，不再请求
  //   if (this.isReqing) return;
  //   // 增加一页
  //   this.requestParam.page = this.requestParam.page + 1;
  //   // 设置请求中
  //   this.isReqing = true;
  //   // 请求列表
  //   this.$http.request('api/product/get_list', this.requestParam).then((re) => {
  //     // 设置非请求中
  //     this.isReqing = false;
  //     // 成功结果
  //     if (re.code == 'success') {
  //       // 最后一页
  //       if (re.data.last_page <= this.requestParam.page) this.isLast = true;
  //       // 追加数据
  //       this.productList.push(...re.data.data);
  //     }
  //   });
  // },
  methods: {
    // 请求加载下一页
    getMore(callback) {
      // 首页不足10个，并且下一页存在大于当前页
      if (this.productList.length < 10 && callback.data.last_page > this.requestParam.page) {
        // 最后一页不再请求
        if (this.isLast) return;
        // 增加一页
        this.requestParam.page = this.requestParam.page + 1;
        // 请求列表
        this.$http.request('api/product/get_list', this.requestParam).then((re) => {
          // 成功结果
          if (re.code == 'success') {
            // 最后一页
            if (re.data.last_page <= this.requestParam.page) this.isLast = true;
            // 追加数据
            this.productList.push(...re.data.data);
            // 获取下一页
            this.getMore(re);
          }
        });
      }
    },
    searchChange(e) {
      // 如果没有搜索词
      if (!this.requestParam.name) {
        this.searchOpen();
      }
    },
    searchOpen() {
      // 请求中，不再请求
      if (this.isReqing) return;
      // 是否是最后一页
      this.isLast = false;
      // 初始化页码为1
      this.requestParam.page = 1;
      // 设置请求中
      this.isReqing = true;
      // 请求列表
      this.$http.request('api/product/get_list', this.requestParam).then((re) => {
        // 设置非请求中
        this.isReqing = false;
        // 成功结果
        if (re.code == 'success') {
          this.productList = re.data.data;
          if (re.data.data.length && re.data.last_page >= this.requestParam.page) this.isLast = true;
        }
      });
    },
    toDetail(item) {
      uni.navigateTo({
        url: '/pages/product/index?product_id=' + item.id,
      });
    },
    navLottery(url) {
      // 没有路径，不跳转
      if (!url) return;
      // 判断是不是小程序链接
      if (url.includes('http')) {
        // 转码
        let link_url = encodeURIComponent(url);
        // 跳转到webview
        uni.redirectTo({
          url: `/pages/webview/index?link_url=${link_url}`,
        });
      } else {
        // 跳转到webview
        uni.navigateTo({
          url: url,
        });
      }
    },
    closePopup() {
      this.$refs.addFollow.close();
      //存key以及时间
      uni.setStorage({
        key: 'followPopupTime',
        data: new Date().getTime(),
      });
    },
  },
};
</script>

<style lang="less">
.index {
  // background-image: url(https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/index/index_header.png);
  // background-position: 0% 0%;
  // background-repeat: no-repeat;
  // background-size: 750rpx 588rpx;
}
.page-title {
  //渐变加透明;
  // background: linear-gradient(to bottom, rgba(245, 52, 29, 1) 0%, rgba(255, 255, 255, 0) 100%);
  // background: linear-gradient(180deg, #ea310f 0%, #f5f5f5 100%);
  // background: url() no-repeat 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 588rpx;
  z-index: -1;
}
.search_fixed {
  top: var(--window-top);
  left: 0rpx;
  width: 750rpx;
  display: block;
  position: fixed;
  margin: 0rpx auto;
  padding: 20rpx 0rpx;
  background-color: #ffffff;
  .search_box {
    width: 750rpx;
    height: 60rpx;
    display: block;
    position: relative;
    .city_name {
      float: left;
      width: 100rpx;
      height: 60rpx;
      display: block;
      font-size: 30rpx;
      overflow: hidden;
      margin-left: 35rpx;
      line-height: 60rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .city_name.uncheck {
      color: #f89c33;
    }
    .search_input {
      z-index: 0;
      float: left;
      width: 510rpx;
      height: 56rpx;
      display: block;
      font-size: 24rpx;
      padding-left: 20rpx;
      position: relative;
      border-top-left-radius: 40rpx;
      border-bottom-left-radius: 40rpx;
      border: 2rpx solid #dddddd;
      background-color: #ffffff;
    }
    .search_btn {
      top: 0rpx;
      z-index: 9;
      left: 610rpx;
      color: #ffffff;
      position: absolute;
      display: block;
      width: 120rpx;
      height: 60rpx;
      font-size: 24rpx;
      margin: 0rpx 0rpx;
      padding: 0rpx 0rpx;
      line-height: 60rpx;
      border-radius: 40rpx;
      background-color: #f89c33;
    }
  }
}
.banner_box {
  width: 680rpx;
  display: block;
  overflow: hidden;
  margin: 0rpx auto;
  margin-top: 120rpx;
  .banner_list {
    display: block;
    width: 680rpx;
    height: 382rpx;
    line-height: 382rpx;
    text-align: center;
    .banner_swiper {
      display: block;
      width: 680rpx;
      height: 382rpx;
      line-height: 382rpx;
      text-align: center;
      border-radius: 8px;
      .image {
        width: 680rpx;
        height: 382rpx;
        border-radius: 8px;
      }
    }
  }
}
.product_box {
  display: block;
  overflow: hidden;
  margin: -20rpx auto 20rpx;
  padding: 0rpx 35rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
  .product_list {
    display: block;
    overflow: hidden;
    margin: 0rpx auto;
    .product_item {
      // float: left;
      width: 100%;
      // height: 520rpx;
      display: block;
      overflow: hidden;
      margin: 20rpx 0rpx;
      margin-right: 40rpx;
      background-color: #ffffff;
      border-radius: 20rpx;
      padding: 16rpx;
      box-sizing: border-box;
      .product_item_content {
        display: flex;
        gap: 10rpx;
      }
      .product_item_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .product_image_content {
        width: 168rpx;
        height: 168rpx;
        background: #f5f5f5;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .product_image {
        width: 143rpx;
        height: 149rpx;
        flex-shrink: 0;
      }
      .product_name {
        // height: 80rpx;
        font-size: 30rpx;
        line-height: 40rpx;
        overflow: hidden;
        margin: 10rpx 0rpx;
        padding: 0rpx 10rpx;
        text-overflow: ellipsis;
        .regiment_title {
          background-color: red;
          color: #f9f9f9;
        }
      }
      .product_spec {
        height: 30rpx;
        color: #999999;
        font-size: 24rpx;
        line-height: 30rpx;
        padding: 0rpx 10rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .stock_price {
        color: #dddddd;
        font-size: 20rpx;
        overflow: hidden;
        line-height: 30rpx;
        padding: 0rpx 10rpx;
        display: flex;
        gap: 10rpx;
        align-items: baseline;
        padding-left: 185rpx;
        box-sizing: border-box;
        .product_price {
          color: red;
          font-size: 30rpx;
          line-height: 60rpx;
          .product_market {
            font-size: 24rpx;
            color: #999999;
            line-height: 30rpx;
            vertical-align: top;
            text-decoration: line-through;
          }
        }
        .product_stock {
          font-size: 20rpx;
          line-height: 60rpx;
        }
      }
      .stock_button {
        width: 152rpx;
        height: 60rpx;
        background: #f89c33;
        border-radius: 500rpx 500rpx 500rpx 500rpx;
        color: #ffffff;
        color: 26rpx;
        text-align: center;
        line-height: 60rpx;
        font-size: 24rpx;
      }
    }
    .product_item:nth-child(even) {
      margin-right: 0rpx;
    }
  }
}
.icon-list {
  margin-top: 24rpx;
  padding: 0 35rpx;
}
.notice-list {
  margin-top: 24rpx;
}
.header-title {
  padding: 0 35rpx;
}
</style>