feat: 相关商品交互调试
This commit is contained in:
@@ -11,10 +11,7 @@
|
|||||||
@touchcancel.stop="touchCancel(index)"
|
@touchcancel.stop="touchCancel(index)"
|
||||||
@transitionend="onTransitionEnd(index)"
|
@transitionend="onTransitionEnd(index)"
|
||||||
>
|
>
|
||||||
<view
|
<view class="inner-card bg-white">
|
||||||
class="inner-card bg-white"
|
|
||||||
@click.stop.prevent.capture="placeOrderHandle(card)"
|
|
||||||
>
|
|
||||||
<!-- 商品大图部分:自适应剩余空间 -->
|
<!-- 商品大图部分:自适应剩余空间 -->
|
||||||
<view class="goods-image-wrapper relative">
|
<view class="goods-image-wrapper relative">
|
||||||
<image class="w-full h-full" :src="card.commodityPhoto" />
|
<image class="w-full h-full" :src="card.commodityPhoto" />
|
||||||
@@ -65,6 +62,7 @@ const props = defineProps({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const DURATION = 300;
|
const DURATION = 300;
|
||||||
|
const CLICK_THRESHOLD = 8; // 点击判定的最大偏移阈值(像素)
|
||||||
const swipering = ref(false);
|
const swipering = ref(false);
|
||||||
const animatingOut = ref(false);
|
const animatingOut = ref(false);
|
||||||
let reorderTimer = null;
|
let reorderTimer = null;
|
||||||
@@ -100,7 +98,7 @@ watch(
|
|||||||
);
|
);
|
||||||
|
|
||||||
// 触摸状态
|
// 触摸状态
|
||||||
const touchState = ref({ startX: 0, startY: 0, moving: false });
|
const touchState = ref({ startX: 0, startY: 0, moving: false, isClickCandidate: false });
|
||||||
|
|
||||||
const touchStart = (e, index) => {
|
const touchStart = (e, index) => {
|
||||||
if (index !== 0 || animatingOut.value) return;
|
if (index !== 0 || animatingOut.value) return;
|
||||||
@@ -109,6 +107,8 @@ const touchStart = (e, index) => {
|
|||||||
touchState.value.startX = t.clientX;
|
touchState.value.startX = t.clientX;
|
||||||
touchState.value.startY = t.clientY;
|
touchState.value.startY = t.clientY;
|
||||||
touchState.value.moving = true;
|
touchState.value.moving = true;
|
||||||
|
// 初始认为可能是点击,移动过程中如果超过阈值则取消点击
|
||||||
|
touchState.value.isClickCandidate = true;
|
||||||
swipering.value = true;
|
swipering.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -118,6 +118,10 @@ const touchMove = (e, index) => {
|
|||||||
if (!t) return;
|
if (!t) return;
|
||||||
const dx = t.clientX - touchState.value.startX;
|
const dx = t.clientX - touchState.value.startX;
|
||||||
const dy = t.clientY - touchState.value.startY;
|
const dy = t.clientY - touchState.value.startY;
|
||||||
|
// 超过点击阈值则标记为不是点击
|
||||||
|
if (Math.abs(dx) > CLICK_THRESHOLD || Math.abs(dy) > CLICK_THRESHOLD) {
|
||||||
|
touchState.value.isClickCandidate = false;
|
||||||
|
}
|
||||||
const top = list.value[0];
|
const top = list.value[0];
|
||||||
if (!top) return;
|
if (!top) return;
|
||||||
top.x = dx;
|
top.x = dx;
|
||||||
@@ -143,6 +147,16 @@ const touchEnd = (index) => {
|
|||||||
swipering.value = false;
|
swipering.value = false;
|
||||||
const top = list.value[0];
|
const top = list.value[0];
|
||||||
if (!top) return;
|
if (!top) return;
|
||||||
|
// 若在有效点击范围内,则触发跳转,不进行滑动逻辑
|
||||||
|
if (touchState.value.isClickCandidate) {
|
||||||
|
top.x = 0;
|
||||||
|
top.y = 0;
|
||||||
|
top.opacity = 1;
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/goods/index?commodityId=${top.commodityId}`,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
const threshold = windowWidth / 4;
|
const threshold = windowWidth / 4;
|
||||||
if (Math.abs(top.x) > threshold) {
|
if (Math.abs(top.x) > threshold) {
|
||||||
const direction = top.x > 0 ? 1 : -1;
|
const direction = top.x > 0 ? 1 : -1;
|
||||||
@@ -203,7 +217,7 @@ const transformStyle = (index, card) => {
|
|||||||
}
|
}
|
||||||
// 预览层:轻微位移与缩放,确保连贯顶上
|
// 预览层:轻微位移与缩放,确保连贯顶上
|
||||||
const previewScales = [1, 0.98, 0.96];
|
const previewScales = [1, 0.98, 0.96];
|
||||||
const previewOffsets = [0, 8, 16];
|
const previewOffsets = [0, 16, 16];
|
||||||
const scale = previewScales[index] ?? 0.94;
|
const scale = previewScales[index] ?? 0.94;
|
||||||
const y = previewOffsets[index] ?? 24;
|
const y = previewOffsets[index] ?? 24;
|
||||||
return {
|
return {
|
||||||
@@ -213,11 +227,11 @@ const transformStyle = (index, card) => {
|
|||||||
|
|
||||||
// 去下单
|
// 去下单
|
||||||
const placeOrderHandle = (item) => {
|
const placeOrderHandle = (item) => {
|
||||||
checkToken().then(() => {
|
console.log("去下单", item);
|
||||||
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
url: `/pages/goods/index?commodityId=${item.commodityId}`,
|
||||||
});
|
});
|
||||||
});
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.card {
|
.card {
|
||||||
height: 320px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-item {
|
.card-item {
|
||||||
|
|||||||
Reference in New Issue
Block a user