|
|
@@ -1,572 +1,683 @@
|
|
|
<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"></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" />
|
|
|
- </view>
|
|
|
+ <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" />
|
|
|
+ <!-- 加价规则弹窗 -->
|
|
|
+ <UpsellRules ref="upsellRulesRef" />
|
|
|
+ <!-- 加价分享弹窗 -->
|
|
|
+ <UpsellShare ref="shareRef" @viewRules="handleViewSellRules" />
|
|
|
+ </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";
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- notScanned,
|
|
|
- InputIsbn,
|
|
|
- ScanBookList,
|
|
|
- CommonDialog,
|
|
|
- KindReminder,
|
|
|
- ServiceInfo,
|
|
|
- ConfirmBooks,
|
|
|
- FirstOrderFreePopup,
|
|
|
- },
|
|
|
- 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;
|
|
|
- });
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- // 获取屏幕宽度和高度
|
|
|
- uni.getSystemInfo({
|
|
|
- success: (res) => {
|
|
|
- this.screenWidth = res.windowWidth;
|
|
|
- this.screenHeight = res.windowHeight;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- 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登录失败");
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 触摸开始
|
|
|
- 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,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- 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.push(res.data);
|
|
|
- if (res.data.suit == 1) {
|
|
|
- this.$refs.setBookDialog.openPopup();
|
|
|
- }
|
|
|
- } 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);
|
|
|
- },
|
|
|
- };
|
|
|
+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";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ notScanned,
|
|
|
+ InputIsbn,
|
|
|
+ ScanBookList,
|
|
|
+ CommonDialog,
|
|
|
+ KindReminder,
|
|
|
+ ServiceInfo,
|
|
|
+ ConfirmBooks,
|
|
|
+ FirstOrderFreePopup,
|
|
|
+ UpsellBook,
|
|
|
+ UpsellRules,
|
|
|
+ UpsellShare,
|
|
|
+ },
|
|
|
+ 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?inviteCode=" + userId,
|
|
|
+ imageUrl: "/static/img/activity/share.jpg",
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ // 分享到朋友圈
|
|
|
+ onShareTimeline() {
|
|
|
+ let userInfo = uni.getStorageSync("userInfo");
|
|
|
+ let userId = userInfo.userId;
|
|
|
+ return {
|
|
|
+ title: "书嗨",
|
|
|
+ path: "/pages/home/index?inviteCode=" + userId,
|
|
|
+ imageUrl: "/static/img/activity/share.jpg",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // 获取屏幕宽度和高度
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ this.screenWidth = res.windowWidth;
|
|
|
+ this.screenHeight = res.windowHeight;
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$refs.shareRef.open();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ 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>
|
|
|
+.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>
|
