book-hi/pages/home/index.vue

<template>
  <view
    class="container"
    :style="{ background: containerBg }"
    :class="bookList.length ? 'book-list' : 'no-list'"
  >
    <u-navbar
      :is-back="false"
      :border-bottom="false"
      :background="{ background: navbarBackground }"
    >
      <text class="nav-title">卖书给书嗨</text>
    </u-navbar>

    <not-scanned v-if="!bookList.length"></not-scanned>
    <scan-book-list
      v-else
      @updateBooks="updateBooksList"
      @deleted="getLastOrder"
      :bookList="bookList"
      ref="scanBookList"
      @upsell="handleUpsell"
    ></scan-book-list>
    <!-- 底部固定按钮 -->
    <view class="bottom-fixed">
      <view class="btn-wrap mb-20">
        <button class="scan-btn flex-1" @click="handleScan">
          <u-icon name="scan" color="#FFFFFF" size="40"></u-icon>
          <text>扫码卖书</text>
        </button>
        <button class="isbn-btn flex-1" @click="goToInputISBN">
          <u-icon name="edit-pen" color="#4CD964" size="40"></u-icon>
          <text>输入ISBN</text>
        </button>
      </view>

      <view
        class="flex-a flex-j-b pad-20"
        style="padding-top: 0"
        v-if="bookList.length"
      >
        <view class="left-info" style="min-width: 194px">
          <view class="flex-a common-text">
            共<text class="color-red">{{ totalBooks }}</text
            >件 预估回收价 <text class="color-red">¥{{ totalPrice || 0 }}</text>
          </view>
          <text class="common-text tip"
            >*旧书预估价格满 {{ orderInfo.minOrderMoney }} 元起收</text
          >
        </view>

        <button
          class="scan-btn next-btn"
          @click="onNext"
          :disabled="isDisabled"
        >
          下一步
        </button>
      </view>

      <service-info
        v-if="bookList.length"
        :serviceList="serviceList"
        :firstOrder="orderInfo.firstOrder"
      ></service-info>
    </view>

    <InputIsbn ref="isbnPopup" @submit="checkBookISBN" />
    <!-- 套装书说明弹窗 -->
    <CommonDialog
      ref="setBookDialog"
      title="套装书说明"
      :showCancel="false"
      @confirm="handleSetBookConfirm"
    >
      <text
        >套装书(ISBN码相同的系列书箱)只需扫描其中一册，扫码价即套装价。打包时请把所有单册统在一起或放在一个袋子里寄出。</text
      >
    </CommonDialog>

    <!-- 暂不回收弹窗 -->
    <CommonDialog ref="notAcceptDialog" title="暂不回收" :showCancel="false">
      <text>这本书暂时不回收，请您过段时间再来试试~</text>
    </CommonDialog>

    <!-- 暂无信息弹窗 -->
    <CommonDialog ref="noInfoDialog" title="暂无信息" :showCancel="false">
      <text
        >抱歉，没有该书的信息，书嗨会定期补充图书信息，请您过段时间再来试试~</text
      >
    </CommonDialog>

    <!-- 扫累了弹窗 -->
    <CommonDialog ref="tiredDialog" title="温馨提示" :showCancel="false">
      <text>扫累了，休息休息吧~</text>
    </CommonDialog>

    <!-- 该书超出最大回收本数  maxAcceptDialog-->
    <CommonDialog ref="maxAcceptDialog" title="温馨提示" :showCancel="false">
      <text>该书超出最大回收本数</text>
    </CommonDialog>

    <!-- 单个订单最多40本书  orderMaxNumDialog-->
    <CommonDialog ref="orderMaxNumDialog" title="温馨提示" :showCancel="false">
      <text>单个订单最多40本书</text>
    </CommonDialog>

    <!-- 温馨提示弹窗 -->
    <KindReminder
      ref="kindReminder"
      @start="handleStartSelling"
      @viewRules="handleViewRules"
    />

    <view
      class="customer-service"
      :style="{
        left: servicePosition.left + 'px',
        right: servicePosition.right + 'px',
        bottom: servicePosition.bottom + 'px',
      }"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
    >
      <button class="service-btn" open-type="contact">
        <image
          src="/static/img/kf.png"
          mode="widthFix"
          style="width: 126rpx; height: 140rpx"
        ></image>
      </button>
    </view>

    <ConfirmBooks ref="confirmBooks" @incomplete="handleIncomplete" />
    <!-- 首单免费弹窗 -->
    <FirstOrderFreePopup ref="firstOrderFreePopup" />

    <!-- 图书加价弹窗 -->
    <UpsellBook ref="upsellRef" @scan="handleScanCode" />
    <!-- 加价规则弹窗 -->
    <UpsellRules ref="upsellRulesRef" />
    <!-- 加价分享弹窗 -->
    <UpsellShare ref="shareRef" @viewRules="handleViewSellRules" />
    <!-- 加价二维码弹窗 -->
    <UpsellQrcode ref="upsellQrcodeRef" />
  </view>
</template>

<script>
import notScanned from "./components/notScanned.vue";
import InputIsbn from "./components/InputIsbn.vue";
import ScanBookList from "./components/ScanBookList.vue";
import CommonDialog from "@/components/common-dialog.vue";
import KindReminder from "./components/KindReminder.vue";
import ServiceInfo from "./components/ServiceInfo.vue";
import ConfirmBooks from "./components/ConfirmBooks.vue";
import FirstOrderFreePopup from "./components/FirstOrderFreePopup.vue";
import UpsellBook from "./components/upsell-book.vue";
import UpsellRules from "./components/upsell-rules.vue";
import UpsellShare from "./components/upsell-share.vue";
import UpsellQrcode from "./components/upsell-qrcode.vue";

export default {
  components: {
    notScanned,
    InputIsbn,
    ScanBookList,
    CommonDialog,
    KindReminder,
    ServiceInfo,
    ConfirmBooks,
    FirstOrderFreePopup,
    UpsellBook,
    UpsellRules,
    UpsellShare,
    UpsellQrcode,
  },
  data() {
    return {
      orderInfo: {},
      collapseState: {
        step1: false,
        step3: false,
      },
      scrollTop: 0,
      bookList: [],
      serviceList: [],
      currentBook: {},
      // 客服按钮位置
      servicePosition: {
        left: "auto",
        right: 0,
        bottom: "20%",
      },
      // 触摸开始位置
      startX: 0,
      startY: 0,
      // 屏幕宽度和高度
      screenWidth: 0,
      screenHeight: 0,
      // 初始位置记录，用于计算拖动
      initialLeft: 0,
      initialBottom: 0,
      // 是否正在更新位置，用于防止频繁更新
      isUpdatingPosition: false,
    };
  },
  computed: {
    navbarBackground() {
      if (this.scrollTop > 0) {
        return "linear-gradient(180deg, #4CD964 0%, #5ff178 100%)";
      }
      return "transparent";
    },
    containerBg() {
      return this.bookList.length > 0
        ? "linear-gradient(180deg, #4CD964 0%, #F8F8F8 25%)"
        : "linear-gradient(180deg, #4CD964 0%, #ffffff 25%)";
    },
    containerPb() {
      return this.bookList.length > 0 ? "300rpx" : "110rpx";
    },
    totalBooks() {
      return this.bookList.reduce((sum, book) => sum + (book.num || 1), 0);
    },
    totalPrice() {
      return this.bookList
        .reduce((sum, book) => sum + book.recyclePrice * (book.num || 1), 0)
        .toFixed(2);
    },
    isDisabled() {
      return this.totalPrice < this.orderInfo.minOrderMoney;
    },
  },
  onPageScroll(e) {
    this.$nextTick(() => {
      this.scrollTop = e.scrollTop;
    });
  },
  // 分享配置
  onShareAppMessage() {
    let userInfo = uni.getStorageSync("userInfo");
    let userId = userInfo.userId;
    return {
      title: "书嗨",
      path: "/pages/home/index?inviteUserId=" + userId,
      imageUrl: "/static/img/activity/share.jpg",
    };
  },

  // 分享到朋友圈
  onShareTimeline() {
    let userInfo = uni.getStorageSync("userInfo");
    let userId = userInfo.userId;
    return {
      title: "书嗨",
      path: "/pages/home/index?inviteUserId=" + userId,
      imageUrl: "/static/img/activity/share.jpg",
    };
  },
  onReady() {
    // 获取屏幕宽度和高度
    uni.getSystemInfo({
      success: (res) => {
        this.screenWidth = res.windowWidth;
        this.screenHeight = res.windowHeight;
      },
    });
  },
  methods: {
    //扫码助力
    handleScanCode(data = {}) {
      this.$refs.upsellQrcodeRef.open(data);
    },

    slientLogin() {
      let inviteCode = wx.getStorageSync("inviteCode") || "";
      let token = wx.getStorageSync("token");
      if (token) return;
      uni.login({
        success(res) {
          uni.$u.http
            .post("/user/wxLogin", {
              code: res.code,
              inviteCode,
            })
            .then((response) => {
              if (response.code == 200) {
                uni.setStorageSync("token", response.data.token);
              }
            });
        },
        fail: (err) => {
          console.log(err, "wx.login登录失败");
        },
      });
    },

    //查看活动规则
    handleViewSellRules() {
      this.$refs.upsellRulesRef.open();
    },

    // 触摸开始
    touchStart(e) {
      const touch = e.touches[0];
      this.startX = touch.clientX;
      this.startY = touch.clientY;

      // 记录初始位置，用于计算移动距离
      if (this.servicePosition.right !== "auto") {
        // 如果是靠右定位，记录当前位置但不立即改变显示位置
        // 只在内部计算中使用，避免视觉上的位置跳动
        this.initialLeft = this.screenWidth - 126;
      } else {
        this.initialLeft = parseFloat(this.servicePosition.left);
      }

      // 如果bottom是百分比，转换为具体像素值，但不改变显示位置
      if (
        typeof this.servicePosition.bottom === "string" &&
        this.servicePosition.bottom.includes("%")
      ) {
        const percentage = parseFloat(this.servicePosition.bottom) / 100;
        this.initialBottom = this.screenHeight * percentage;
      } else {
        this.initialBottom = parseFloat(this.servicePosition.bottom);
      }
    },

    // 触摸移动
    touchMove(e) {
      // 阻止默认行为，防止页面滚动
      e.preventDefault && e.preventDefault();
      e.stopPropagation && e.stopPropagation();

      const touch = e.touches[0];

      // 计算移动距离
      const deltaX = touch.clientX - this.startX;
      const deltaY = touch.clientY - this.startY;

      // 使用初始位置计算新位置，避免累积误差
      let newLeft = this.initialLeft + deltaX;
      let newBottom = this.initialBottom - deltaY; // 注意：y轴方向是相反的

      // 确保按钮不超出屏幕边界
      if (newLeft < 0) {
        newLeft = 0;
      } else if (newLeft > this.screenWidth - 126) {
        newLeft = this.screenWidth - 126;
      }

      // 确保按钮不超出屏幕垂直边界
      if (newBottom < 20) {
        newBottom = 20;
      } else if (newBottom > this.screenHeight - 160) {
        newBottom = this.screenHeight - 160;
      }

      // 使用节流方式更新位置，避免过于频繁的更新
      if (!this.isUpdatingPosition) {
        this.isUpdatingPosition = true;

        // 更新位置 - 第一次移动时才真正改变right为auto
        this.servicePosition = {
          left: newLeft,
          right: "auto",
          bottom: newBottom,
        };

        // 使用setTimeout代替requestAnimationFrame，在微信小程序中更兼容
        setTimeout(() => {
          this.isUpdatingPosition = false;
        }, 16); // 约等于60fps的刷新率
      }

      // 不更新起始点，保持相对于初始触摸点的位移计算
      // 这样可以避免累积误差，使拖动更精确
    },

    // 触摸结束，实现吸附效果
    touchEnd() {
      // 确保不再有待处理的更新
      this.isUpdatingPosition = false;

      const buttonCenter = this.servicePosition.left + 63; // 按钮中心位置
      const halfScreen = this.screenWidth / 2;

      // 判断是吸附到左边还是右边
      if (buttonCenter < halfScreen) {
        // 吸附到左边
        this.servicePosition = {
          left: 0,
          right: "auto",
          bottom: this.servicePosition.bottom,
        };
      } else {
        // 吸附到右边
        this.servicePosition = {
          left: "auto",
          right: 0,
          bottom: this.servicePosition.bottom,
        };
      }
    },

    handleStart() {
      this.showPopup = true;
    },
    //套装书确认
    handleSetBookConfirm() {
      this.$refs.confirmBooks.openPopup(this.currentBook);
    },
    //书册补全
    handleIncomplete() {
      this.$refs.scanBookList.handleDeleteBook(this.currentBook);
    },

    //提交
    onNext() {
      let orderId = this.orderInfo.orderId;
      //预提交
      uni.$u.http
        .get("/token/order/preSubmit?orderId=" + orderId)
        .then((res) => {
          if (res.code == 200) {
            if (res.data.code == 1 || res.data.code == 2) {
              uni.navigateTo({
                url: "/pages-home/pages/book-order",
              });
              uni.setStorageSync("orderId", orderId);
            } else {
              uni.showToast({
                icon: "none",
                title: res.msg,
              });
            }
          } else {
            uni.showToast({
              icon: "none",
              title: res.msg,
            });
          }
        });
    },
    // 加价
    handleUpsell(book) {
      this.$refs.upsellRef.open(book);
    },

    updateBooksList(data) {
      this.bookList = data;
    },

    toggleCollapse(step) {
      this.$set(this.collapseState, step, !this.collapseState[step]);
    },
    handleScan() {
      uni.scanCode({
        scanType: ["barCode"],
        success: (res) => {
          this.checkBookISBN(res.result);
        },
        fail: () => {
          uni.showToast({
            title: "扫码失败",
            icon: "none",
          });
        },
      });
    },
    checkBookISBN(isbn) {
      uni.$u.http.get("/token/order/scanIsbn?isbn=" + isbn).then((res) => {
        if (res.code == 200) {
          let code = res.data.code;
          if (code == 1) {
            res.data.num = 1;
            res.data.status = 1;
            res.data.recyclePrice = res.data.recycleMoney;
            this.currentBook = res.data;
            this.bookList.unshift(res.data);
            if (res.data.suit == 1) {
              this.$refs.setBookDialog.openPopup();
            }
            if (res.data.canInvite == 1) {
              this.$refs.upsellRef.open(res.data);
            }
          } else if (code == 2) {
            let item = this.bookList.find((v) => v.isbn === isbn);
            item.num = item.num + 1;
          } else {
            this.handleBookCode(res.data.code);
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    //处理扫码之后不同的状态 0-扫码频繁 1-成功 2-本单已有该书，数量+1  3-没有该书 4-本书暂不回收 5-超过每单最大可卖数量  6-单个订单最多40本书
    handleBookCode(code) {
      if (code == 1) {
        this.bookList.push();
      }
      let tempKeys = [
        "tiredDialog",
        "",
        "",
        "noInfoDialog",
        "notAcceptDialog",
        "maxAcceptDialog",
        "orderMaxNumDialog",
      ];
      let key = tempKeys[code];
      if (key) {
        this.$refs[key].openPopup();
      }
    },
    //获取当前用户未提交订单 /api/token/order/lastOrder
    getLastOrder() {
      uni.$u.http.get("/token/order/lastOrder").then((res) => {
        if (res.code == 200) {
          this.orderInfo = res.data;
          if (res.data.showDialog == 1) {
            this.$refs.firstOrderFreePopup.openPopup();
          } else if (res.data.showDialog == 2) {
            this.$refs.kindReminder.openPopup();
          }

          this.bookList = res.data?.orderDetailList
            ? res.data.orderDetailList.map((v) => {
                v.orderId = res.data.orderId;
                return v;
              })
            : [];
          this.serviceList = res.data.serviceList || [];
        }
      });
    },

    goToScannedBooks() {
      uni.navigateTo({
        url: "/pages-home/pages/scaned-book",
      });
    },
    goToInputISBN() {
      this.$refs.isbnPopup.openPopup();
    },
    handleStartSelling() {
      // 标记已显示过温馨提示
      uni.setStorageSync("kindReminderShown", true);
    },
  },

  onShow() {
    // 获取上一个订单
    setTimeout(() => {
      this.getLastOrder();
      setTimeout(() => {
        this.slientLogin();
      }, 10);
    }, 300);
  },
};
</script>

<style lang="scss" scoped>
.customer-service {
  position: fixed;
  width: 126rpx;
  height: 140rpx;
  bottom: 20%;
  z-index: 999;
  transition: all 0.3s ease;

  /* 添加过渡效果使吸附更平滑 */
  button {
    height: max-content;
    background-color: transparent;
    padding: 0;
  }
}

.container {
  height: 100%;
  position: relative;
  overflow: auto;
  z-index: 1;
  /* #ifdef MP-WEIXIN */
  min-height: 100vh;
  /* #endif */
  /* #ifndef MP-WEIXIN */
  min-height: calc(100vh - 120rpx);

  /* #endif */
  &.book-list {
    padding-bottom: 300rpx;
  }

  padding-bottom: 130rpx;

  .nav-title {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 34rpx;
    color: #ffffff;
    padding-left: 40rpx;
  }
}

.common-text {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #999999;

  &.tip {
    color: #ff8a4b;
  }
}

.color-red {
  color: #ff0000;
  margin: 0 10rpx;
}

.bottom-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  background-color: #ffffff;
  /* #ifdef H5 */
  padding-bottom: 120rpx;
  /* #endif */

  .btn-wrap {
    display: flex;
    gap: 20rpx;
    padding: 20rpx;
    padding-bottom: 0;

    button {
      flex: 1;
      height: 88rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10rpx;
      border: none;

      text {
        font-size: 32rpx;
      }

      &::after {
        border: none;
      }
    }

    .isbn-btn {
      background-color: #ffffff;
      color: #4cd964;
      border: 3rpx solid #4cd964;
    }
  }

  .scan-btn {
    background-color: #4cd964;
    color: #ffffff;
  }

  .next-btn {
    margin: 0;
    margin-left: 20rpx;

    &[aria-disabled="true"] {
      background-color: #cccccc;
      color: #ffffff;
      opacity: 0.7;
      cursor: not-allowed;
    }
  }
}
</style>