|
|
@@ -88,11 +88,43 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 悬浮提现确认按钮 -->
|
|
|
+ <view
|
|
|
+ class="withdrawal-confirm"
|
|
|
+ :style="{
|
|
|
+ left: buttonPosition.left + 'px',
|
|
|
+ right: buttonPosition.right + 'px',
|
|
|
+ bottom: buttonPosition.bottom + 'px',
|
|
|
+ }"
|
|
|
+ @touchstart="touchStart"
|
|
|
+ @touchmove="touchMove"
|
|
|
+ @touchend="touchEnd"
|
|
|
+ @click="navigateToWithdrawal"
|
|
|
+ v-if="withdrawalOrder && withdrawalOrder.length > 0"
|
|
|
+ >
|
|
|
+ <view class="confirm-btn">
|
|
|
+ <text>提现</text>
|
|
|
+ <text>确认</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 提现进度弹窗 -->
|
|
|
+ <withdrawal-progress
|
|
|
+ :orderInfo="currentWithdrawalOrder"
|
|
|
+ @confirm="confirmWithdrawal"
|
|
|
+ ref="withdrawalRef"
|
|
|
+ />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import WithdrawalProgress from "./components/withdrawal-progress.vue";
|
|
|
+
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ WithdrawalProgress,
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
userInfo: {
|
|
|
@@ -203,9 +235,40 @@ export default {
|
|
|
path: "/pages-mine/pages/setting",
|
|
|
},
|
|
|
],
|
|
|
+ // 悬浮按钮位置
|
|
|
+ buttonPosition: {
|
|
|
+ left: "auto",
|
|
|
+ right: 0,
|
|
|
+ bottom: "20%",
|
|
|
+ },
|
|
|
+ // 触摸开始位置
|
|
|
+ startX: 0,
|
|
|
+ startY: 0,
|
|
|
+ // 屏幕宽度和高度
|
|
|
+ screenWidth: 0,
|
|
|
+ screenHeight: 0,
|
|
|
+ // 初始位置记录,用于计算拖动
|
|
|
+ initialLeft: 0,
|
|
|
+ initialBottom: 0,
|
|
|
+ // 是否正在更新位置,用于防止频繁更新
|
|
|
+ isUpdatingPosition: false,
|
|
|
+ withdrawalOrder: [],
|
|
|
+ // 提现进度弹窗相关
|
|
|
+ showWithdrawalModal: false,
|
|
|
+ currentWithdrawalOrder: {},
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ //获取是否存在待确认提现的订单
|
|
|
+ getWithdrawalOrder() {
|
|
|
+ uni.$u.http.get("/token/user/withdrawWindows").then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.withdrawalOrder = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
//用户信息
|
|
|
handleUpdateUserInfo() {
|
|
|
uni.navigateTo({
|
|
|
@@ -240,6 +303,19 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ // 导航到提现确认页面
|
|
|
+ navigateToWithdrawal() {
|
|
|
+ if (this.withdrawalOrder && this.withdrawalOrder.length > 0) {
|
|
|
+ // 显示提现进度弹窗,使用第一个提现订单
|
|
|
+ this.currentWithdrawalOrder = this.withdrawalOrder[0];
|
|
|
+ this.$refs.withdrawalRef.openModal();
|
|
|
+ } else {
|
|
|
+ // 如果没有待确认的提现订单,直接跳转到钱包页面
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pages-mine/pages/wallet",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
//获取用户信息
|
|
|
getUserInfo() {
|
|
|
uni.$u.http.get("/token/user/detail").then((res) => {
|
|
|
@@ -276,11 +352,167 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ // 触摸开始
|
|
|
+ touchStart(e) {
|
|
|
+ const touch = e.touches[0];
|
|
|
+ this.startX = touch.clientX;
|
|
|
+ this.startY = touch.clientY;
|
|
|
+
|
|
|
+ // 记录初始位置,用于计算移动距离
|
|
|
+ if (this.buttonPosition.right !== "auto") {
|
|
|
+ // 如果是靠右定位,记录当前位置但不立即改变显示位置
|
|
|
+ this.initialLeft = this.screenWidth - 120;
|
|
|
+ } else {
|
|
|
+ this.initialLeft = parseFloat(this.buttonPosition.left);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果bottom是百分比,转换为具体像素值
|
|
|
+ if (typeof this.buttonPosition.bottom === "string" && this.buttonPosition.bottom.includes("%")) {
|
|
|
+ const percentage = parseFloat(this.buttonPosition.bottom) / 100;
|
|
|
+ this.initialBottom = this.screenHeight * percentage;
|
|
|
+ } else {
|
|
|
+ this.initialBottom = parseFloat(this.buttonPosition.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 - 120) {
|
|
|
+ newLeft = this.screenWidth - 120;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 确保按钮不超出屏幕垂直边界
|
|
|
+ if (newBottom < 20) {
|
|
|
+ newBottom = 20;
|
|
|
+ } else if (newBottom > this.screenHeight - 120) {
|
|
|
+ newBottom = this.screenHeight - 120;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用节流方式更新位置,避免过于频繁的更新
|
|
|
+ if (!this.isUpdatingPosition) {
|
|
|
+ this.isUpdatingPosition = true;
|
|
|
+
|
|
|
+ // 更新位置 - 第一次移动时才真正改变right为auto
|
|
|
+ this.buttonPosition = {
|
|
|
+ left: newLeft,
|
|
|
+ right: "auto",
|
|
|
+ bottom: newBottom,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 使用setTimeout代替requestAnimationFrame,在微信小程序中更兼容
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isUpdatingPosition = false;
|
|
|
+ }, 16); // 约等于60fps的刷新率
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 触摸结束,实现吸附效果
|
|
|
+ touchEnd() {
|
|
|
+ // 确保不再有待处理的更新
|
|
|
+ this.isUpdatingPosition = false;
|
|
|
+
|
|
|
+ const buttonCenter = this.buttonPosition.left + 60; // 按钮中心位置
|
|
|
+ const halfScreen = this.screenWidth / 2;
|
|
|
+
|
|
|
+ // 判断是吸附到左边还是右边
|
|
|
+ if (buttonCenter < halfScreen) {
|
|
|
+ // 吸附到左边
|
|
|
+ this.buttonPosition = {
|
|
|
+ left: 0,
|
|
|
+ right: "auto",
|
|
|
+ bottom: this.buttonPosition.bottom,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ // 吸附到右边
|
|
|
+ this.buttonPosition = {
|
|
|
+ left: "auto",
|
|
|
+ right: 0,
|
|
|
+ bottom: this.buttonPosition.bottom,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭提现进度弹窗
|
|
|
+ closeWithdrawalModal() {
|
|
|
+ this.$refs.withdrawalRef.handleClose();
|
|
|
+ },
|
|
|
+
|
|
|
+ confirmWithdrawal(item) {
|
|
|
+ uni.$u.http
|
|
|
+ .post("/token/user/withdrawConfirm", {
|
|
|
+ orderNo: item.orderNo,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.handleConfirmReceipt(res.data);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ uni.showToast({
|
|
|
+ title: err.message || "确认失败",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //执行微信确认收款操作
|
|
|
+ handleConfirmReceipt(data) {
|
|
|
+ if (wx.canIUse("requestMerchantTransfer")) {
|
|
|
+ wx.requestMerchantTransfer({
|
|
|
+ mchId: data.mchId,
|
|
|
+ appId: data.appId,
|
|
|
+ package: data.packageStr,
|
|
|
+ success: (res) => {
|
|
|
+ // res.err_msg将在页面展示成功后返回应用时返回ok,并不代表付款成功
|
|
|
+ uni.showToast({
|
|
|
+ title: "确认收款成功",
|
|
|
+ icon: "none",
|
|
|
+ });
|
|
|
+ this.closeWithdrawalModal();
|
|
|
+ // 刷新列表
|
|
|
+ this.getWithdrawalOrder();
|
|
|
+ },
|
|
|
+ fail: (res) => {
|
|
|
+ console.log("fail:", res);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ wx.showModal({
|
|
|
+ content: "你的微信版本过低,请更新至最新版本。",
|
|
|
+ showCancel: false,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ // 获取屏幕宽度和高度
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ this.screenWidth = res.windowWidth;
|
|
|
+ this.screenHeight = res.windowHeight;
|
|
|
+ },
|
|
|
+ });
|
|
|
},
|
|
|
onShow() {
|
|
|
let token = uni.getStorageSync("token");
|
|
|
if (token) {
|
|
|
this.getUserInfo();
|
|
|
+ this.getWithdrawalOrder();
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
@@ -494,5 +726,37 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ // 悬浮提现确认按钮样式
|
|
|
+ .withdrawal-confirm {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10%;
|
|
|
+ z-index: 999;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ .confirm-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #4cd964;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border: 4rpx solid #fff;
|
|
|
+ box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 34rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|