fix:bug修复

pages/wait/index.vue

@@ -1,7 +1,43 @@
 <template>
   <view class="page">
     <image :src="imgUrl" mode="widthFix" />
-    <view v-if="!imagePage">即将开放，敬请期待</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="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>
   </view>
 </template>
 
@@ -11,15 +47,266 @@ export default {
     return {
       imagePage: false,
       imgUrl: '',
+      // 轮播图
+      bannerList: [],
+      // 产品列表
+      productList: [],
+      // 请求参数
+      requestParam: {
+        name: '',
+        page: 1,
+      },
+      // 是否最后一页
+      isLast: false,
+      // 是否请求中
+      isReqing: false,
+      // 是否显示价格
+      isShowPrice: false,
+      // 城市名称
+      cityName: '选城市',
+      // 选择城市
+      toSelectedCity: false,
+      // 是否是管理员
+      isManager: false,
     };
   },
   onLoad(param) {
+    // #ifdef MP-WEIXIN
+    //分享按钮
+    uni.showShareMenu({
+      withShareTicket: true,
+      menus: ['shareAppMessage', 'shareTimeline'],
+    });
+    // #endif
+
     this.imgUrl = `https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/index/banner_${param.id}.png`;
     this.imagePage = ['3', '11'].includes(param.id);
     uni.setNavigationBarTitle({
       title: param.name,
     });
   },
+  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>
 
@@ -29,10 +316,11 @@ export default {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   > image {
-    height: 300rpx;
     width: 100%;
+    position: sticky;
+    margin-bottom: 20rpx;
+    flex-shrink: 0;
   }
   > view {
     flex: 1;
@@ -42,5 +330,116 @@ export default {
     justify-content: center;
     align-items: center;
   }
+  .product_box {
+    display: block;
+    margin: -20rpx auto 20rpx;
+    padding: 0rpx 35rpx;
+    .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;
+        }
+      }
+      .product_item:nth-child(even) {
+        margin-right: 0rpx;
+      }
+    }
+  }
 }
 </style>