lmm45037/wagoo-douy3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
初心
2026-03-20 16:40:16 +08:00
parent deb949600b
commit 230bb76f63
23 changed files with 9306 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/pages/client/order/list.vue
View File

@ -42,15 +42,8 @@
<view v-if="elasticLayer" class="elastic-layer" />
</view>
<!-- 右侧浮动联系客服按钮 -->
<view class="contact-float-btn" :style="{ right: contactBtnRight + 'rpx', bottom: contactBtnBottom + 'rpx' }"
@touchstart="onContactBtnTouchStart" @touchmove="onContactBtnTouchMove" @touchend="onContactBtnTouchEnd"
@click="handleContactBtnClick">
<image class="contact-icon" :src="`${imgPrefix}supportStaff.png`" />
<view class="contact-btn fs-20">
联系客服
</view>
</view>
<!-- 可拖动联系客服组件 -->
<DraggableContact ref="draggableContact" :onClick="handleContactBtnClick" />
<view class="additional-bottom" v-if="additionalBom">
<view class="recharge-method">
@ -84,7 +77,8 @@
<pop-up-modal v-if="showCancelModal" content="确定要取消该订单吗？" @confirm="orderCancel"
@cancel="showCancelModal = false" />
<contact-modal v-if="showConcact" @close="showConcact = false" />
<contact-modal v-if="showConcact" @close="showConcact = false" />
<WeChatCopyModal ref="wechatCopyModal" />
<pop-up-modal v-if="showSliverModal" content="是否要确认收货？" @confirm="confirmReceiveOrder"
@cancel="showSliverModal = false" />
@ -105,6 +99,8 @@ import PopUpModal from "@/components/PopUpModal.vue";
import SuccessModal from "@/components/SuccessModal.vue";
import ContactModal from "@/components/ContactModal.vue";
import SliverInfo from "./components/SliverInfo.vue";
import WeChatCopyModal from "@/components/WeChatCopyModal.vue";
import DraggableContact from "@/components/DraggableContact.vue";
import { walletTransaction, cancelPetOrderRefund, cancelPetOrderMall } from "../../../api/login";
@ -134,6 +130,8 @@ export default {
ContactModal,
SuccessModal,
SliverInfo,
WeChatCopyModal,
DraggableContact,
},
data() {
return {
@ -163,14 +161,6 @@ export default {
p: 1,
num: 10,
imgPrefix,
// 联系客服按钮拖拽相关
contactBtnRight: 0, // 默认右侧距离，始终为0
contactBtnBottom: 0, // 默认底部距离，需要计算
isDragging: false, // 是否正在拖拽
touchStartX: 0, // 触摸开始X坐标
touchStartY: 0, // 触摸开始Y坐标
initialRight: 0, // 初始右侧距离
initialBottom: 0, // 初始底部距离
};
},
computed: {
@ -208,14 +198,6 @@ export default {
},
onLoad() {
this.reloadData();
// 初始化联系客服按钮位置
const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;
// 计算底部距离：calc(35vh - 130rpx - 48rpx) 转换为rpx
// 35vh = windowHeight * 0.35，转换为rpx (750rpx = windowHeight px)
const vh35InRpx = (windowHeight * 0.35 / windowHeight) * 750;
this.contactBtnBottom = vh35InRpx - 130 - 48;
},
methods: {
jumpToWeChat,
@ -416,10 +398,6 @@ export default {
},
// 申请售后
afterSale() {
// 如果正在拖拽，不触发点击事件
if (this.isDragging) {
return;
}
this.jumpToWeChat();
},
// afterSale(data) {
@ -471,61 +449,40 @@ export default {
this.showCancelModal = true;
this.orderInfo = data;
},
// 联系客服按钮触摸开始
onContactBtnTouchStart(e) {
this.isDragging = false;
const touch = e.touches[0];
this.touchStartX = touch.clientX;
this.touchStartY = touch.clientY;
this.initialRight = this.contactBtnRight;
this.initialBottom = this.contactBtnBottom;
},
// 联系客服按钮触摸移动
onContactBtnTouchMove(e) {
const touch = e.touches[0];
const deltaX = touch.clientX - this.touchStartX;
const deltaY = touch.clientY - this.touchStartY;
// 如果移动距离超过10px，认为是拖拽
if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
this.isDragging = true;
}
if (this.isDragging) {
const systemInfo = uni.getSystemInfoSync();
const windowHeight = systemInfo.windowHeight;
// 只处理上下移动，将px转换为rpx
const deltaYRpx = (deltaY / windowHeight) * 750;
// 计算新位置（只改变bottom，right始终保持为0）
// 向上移动时deltaY为负，但bottom值应该减小
let newBottom = this.initialBottom - deltaYRpx;
// 限制在屏幕范围内
// 按钮高度约120rpx
const btnHeight = 120;
newBottom = Math.max(0, Math.min(newBottom, windowHeight * 2 - btnHeight));
// right始终保持为0
this.contactBtnRight = 0;
this.contactBtnBottom = newBottom;
}
},
// 联系客服按钮触摸结束
onContactBtnTouchEnd(e) {
// 松手后，right重置为0
this.contactBtnRight = 0;
this.isDragging = false;
},
// 联系客服按钮点击
// 联系客服按钮点击 - 使用自定义弹窗（与首页在线客服功能一致）
handleContactBtnClick() {
// 如果正在拖拽，不触发点击事件
if (this.isDragging) {
return;
console.log('[list.vue] handleContactBtnClick called')
console.log('[list.vue] wechatCopyModal ref:', this.$refs.wechatCopyModal)
if (this.$refs.wechatCopyModal) {
this.$refs.wechatCopyModal.show({
title: '请添加客服号',
weChatCode: 'Wagoo2025'
});
console.log('[list.vue] wechatCopyModal.show called')
} else {
console.error('[list.vue] wechatCopyModal ref is null')
// 降级方案：直接显示系统弹窗
uni.showModal({
title: '提示',
content: '请添加客服号：Wagoo2025',
confirmText: '复制微信号',
showCancel: true,
cancelText: '取消',
success: (res) => {
if (res.confirm) {
uni.setClipboardData({
data: 'Wagoo2025',
success: () => {
uni.showToast({
title: '已复制微信号',
icon: 'success'
})
}
})
}
}
})
}
this.jumpToWeChat();
},
},
};
@ -673,24 +630,6 @@ export default {
}
}
.contact-float-btn {
position: fixed;
text-align: center;
z-index: 100;
.contact-icon {
width: 66rpx;
height: 66rpx;
margin: auto;
}
.contact-btn {
color: #FFFFFF;
background-color: #FF19A0;
border-radius: 257px;
padding: 6rpx 8rpx;
transform: translateY(-8px);
}
}
/* 可拖动联系客服组件无需额外样式 */
}
</style>