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="handleDeleteBook"
			:bookList="bookList"
			ref="scanBookList"
			@upsell="handleUpsell"
			@refresh="getLastOrder"
		></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">{{ orderInfo.totalNum }}</text>
						件 预估回收价
						<text class="color-red">¥{{ orderInfo.totalRecycleMoney || 0 }}</text>
					</view>
					<text class="common-text tip">*旧书预估价格满 {{ orderInfo.minOrderMoney }} 元起收</text>
				</view>

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

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

		<InputIsbn ref="isbnPopup" @submit="(isbn) => checkBookISBN(isbn, 'input')" />
		<!-- 套装书说明弹窗 -->
		<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>

		<!-- 删除活动书籍弹窗 -->
		<common-dialog ref="deleteDialog" title="温馨提示" @confirm="confirmDelete">
			<text>{{ deleteBook.upsellMoney ? '此书为限时加价收图书，删除后再次添加将失去加价收资格，确定删除吗?' : '确定删除这本图书吗？' }}</text>
		</common-dialog>

		<!-- 此订单还有未加价的图书，提交订单后将失去加价资格，确定提交吗? -->
		<common-dialog ref="noUpsellDialog" title="温馨提示" @confirm="onNext">
			<text>此订单还有未加价的图书，提交订单后将失去加价资格，确定提交吗?</text>
		</common-dialog>

		<!-- 温馨提示弹窗 -->
		<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" />

		<!-- 加价分享弹窗 -->
		<UpsellShare ref="shareRef" @viewRules="handleViewSellRules" />
		<!-- 加价二维码弹窗 -->
		<UpsellQrcode ref="upsellQrcodeRef" />

		<!-- 加价规则弹窗 -->
		<UpsellRules ref="upsellRulesRef" />
	</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';
import { silentLogin } from '@/api/auth';
const app = getApp();

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,
			shareData: {},
			deleteBook: {}
		};
	},
	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) + book.currUpsellMoney || 0, 0).toFixed(2);
		},
		isDisabled() {
			return this.totalPrice < this.orderInfo.minOrderMoney;
		}
	},
	onPageScroll(e) {
		this.$nextTick(() => {
			this.scrollTop = e.scrollTop;
		});
	},
	// 分享配置
	onShareAppMessage() {
		let upsellCode = uni.getStorageSync('upsellCodeShare');
		console.log(upsellCode, '分享');
		// 调用分享接口
		uni.$u.http.get('/token/order/goToShare?upsellCode=' + upsellCode);
		return {
			title: '书嗨',
			path: '/pages/home/index?upsellCode=' + upsellCode,
			imageUrl: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/share.jpg'
		};
	},

	// 分享到朋友圈
	onShareTimeline() {
		let upsellCode = uni.getStorageSync('upsellCodeShare');
		// 调用分享接口
		uni.$u.http.get('/token/order/goToShare?upsellCode=' + upsellCode);
		return {
			title: '书嗨',
			path: '/pages/home/index?upsellCode=' + upsellCode,
			imageUrl: 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/share.jpg'
		};
	},
	onReady() {
		// 获取屏幕宽度和高度
		uni.getSystemInfo({
			success: (res) => {
				this.screenWidth = res.windowWidth;
				this.screenHeight = res.windowHeight;
			}
		});
		setTimeout(() => {
			let loginSuccess = uni.getStorageSync('loginSuccess');
			let upsellCode = app.globalData.upsellCode;

			if (loginSuccess && upsellCode) {
				console.log(loginSuccess, '登录成功loginSuccess');
				this.$refs.shareRef?.open(upsellCode);
				uni.removeStorageSync('loginSuccess');
				this.getLastOrder();
			}
		}, 1000);
	},

	methods: {
		//删除书籍
		handleDeleteBook(book) {
			this.deleteBook = book;
			this.$refs.deleteDialog.openPopup(book);
		},

		confirmDelete() {
			uni.$u.http
				.post('/token/order/removeBook', {
					orderId: this.deleteBook.orderId,
					isbn: this.deleteBook.isbn
				})
				.then((res) => {
					if (res.code == 200) {
						this.$u.toast('删除成功');
						this.getLastOrder();
					}
				});
		},

		//扫码助力
		handleScanCode(data = {}) {
			this.$refs.upsellQrcodeRef.open(data);
		},

		slientLogin() {
			let inviteCode = uni.getStorageSync('inviteCode') || '';
			let token = uni.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);
		},

		handleValidate() {
			if (this.bookList.some((v) => v.canInvite == 1)) {
				this.$refs.noUpsellDialog.openPopup();
			} else {
				this.onNext();
			}
		},

		//提交
		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, book) {
			this.bookList = data;
			// book.upsellMoney && this.getLastOrder();
			this.getLastOrder();
		},

		toggleCollapse(step) {
			this.$set(this.collapseState, step, !this.collapseState[step]);
		},
		handleScan() {
			uni.scanCode({
				scanType: ['barCode'],
				success: (res) => {
					this.checkBookISBN(res.result, 'scan');
				},
				fail: () => {
					uni.showToast({
						title: '扫码失败',
						icon: 'none'
					});
				}
			});
		},
		checkBookISBN(isbn, type) {
			let url = type == 'input' ? `/token/order/inputIsbn?isbn=${isbn}` : `/token/order/scanIsbn?isbn=${isbn}`;
			uni.$u.http.get(url).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;
						if (res.data.canInvite == 1) {
							this.$refs.upsellRef.open(res.data);
						}
					} 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(() => {
			let token = uni.getStorageSync('token');
			token && this.getLastOrder();
		}, 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;
}
.color-green {
	color: #276f1e;
}

.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>