book-hi/pages/mine/index.vue

<template>
    <view class="mine-page">
        <!-- <u-navbar title="我的" bgColor="transparent" titleBold></u-navbar> -->
        <!-- 顶部用户信息 -->
        <view class="user-info">
            <view class="user-header" @tap="handleUpdateUserInfo">
                <view class="user-avatar">
                    <image
                        class="avatar"
                        :src="userInfo.imgPath"
                        mode="aspectFill"
                        v-if="userInfo.imgPath"
                        style="width: 100%; height: 100%; display: block"
                    ></image>
                    <image
                        class="avatar"
                        src="https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/logo3.png"
                        mode="heightFix"
                        v-else
                        style="width: 100%; height: 116rpx; display: block; border-radius: 10%"
                    ></image>
                </view>
                <view class="user-detail">
                    <view class="nickname">{{ userInfo.nickName }}</view>
                    <view class="user-tag" v-for="(tag, index) in userInfo.tags" :key="index">{{ tag }}</view>
                </view>
            </view>

            <!-- 用户数据 -->
            <view class="user-data">
                <view class="data-item" @click="navigateToTool('/pages-mine/pages/wallet')">
                    <view class="amount">{{ userInfo.accountMoney || 0 }}</view>
                    <view class="label">我的钱包</view>
                </view>
                <view class="data-item">
                    <view class="amount">{{ userInfo.couponNum || 0 }}</view>
                    <view class="label">优惠券</view>
                    <view class="badge" v-if="userInfo.couponNum">{{ userInfo.couponNum }}张可领</view>
                </view>
                <view class="data-item">
                    <view class="amount">{{ userInfo.point || 0 }}</view>
                    <view class="label">我的积分</view>
                </view>
            </view>
        </view>

        <!-- 卖书订单 -->
        <view class="order-section">
            <view class="section-header">
                <text>卖书订单</text>
                <view class="view-all" @click="viewAllOrders">
                    <text>查看全部</text>
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                </view>
            </view>
            <view class="order-types" style="padding: 0 20rpx">
                <view
                    class="type-item flex-d flex-a-c"
                    v-for="(item, index) in orderTypes"
                    :key="index"
                    @click="navigateToOrder(item.path)"
                >
                    <image class="type-icon" :src="item.icon" mode="aspectFit"></image>
                    <text>{{ item.name }}</text>
                    <view class="badge" v-if="item.badge">{{ item.badge }}</view>
                </view>
            </view>
        </view>

        <!-- 实用工具 -->
        <view class="tools-section">
            <view class="section-title">实用工具</view>
            <view class="tools-grid">
                <view
                    class="tool-item flex-d flex-a-c"
                    v-for="(tool, index) in tools"
                    :key="index"
                    @click="navigateToTool(tool.path)"
                >
                    <button class="link-service flex-d flex-a-c" open-type="contact" v-if="tool.path == 'link-service'">
                        <image class="tool-icon" :src="tool.icon" mode="aspectFit"></image>
                        <text>联系客服</text>
                    </button>
                    <block v-else>
                        <image class="tool-icon" :src="tool.icon" mode="aspectFit"></image>
                        <text>{{ tool.name }}</text>
                    </block>
                </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: {
                userId: 0,
                openid: "",
                imgPath: "",
                nickName: "这里是微信昵称.",
                mobile: "",
                tags: [],
                accountMoney: 0,
                couponNum: 0,
                point: 0,
                firstAuditNum: 0,
                pickUpNum: 0,
                auditNum: 0,
                payNum: 0,
                refundNum: 0,
            },
            orderTypes: [
                {
                    name: "待初审",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/1.png",
                    badge: 0,
                    key: "firstAuditNum",
                    path: "/pages-mine/pages/order-page?status=2",
                },
                {
                    name: "待取件",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/2.png",
                    badge: 0,
                    key: "pickUpNum",
                    path: "/pages-mine/pages/order-page?status=3",
                },
                {
                    name: "待审核",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/3.png",
                    badge: 0,
                    key: "auditNum",
                    path: "/pages-mine/pages/order-page?status=8",
                },
                {
                    name: "待到款",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/4.png",
                    badge: 0,
                    key: "payNum",
                    path: "/pages-mine/pages/order-page?status=10",
                },
                {
                    name: "申请退回",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/5.png",
                    badge: 0,
                    key: "refundNum",
                    path: "/pages-mine/pages/apply-return",
                },
            ],
            tools: [
                {
                    name: "消息通知",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t1.png",
                    path: "/pages-mine/pages/notice",
                },
                { name: "我的收藏", icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t2.png", path: "" },
                { name: "我的足迹", icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t3.png", path: "" },
                {
                    name: "我的地址",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t4.png",
                    path: "/pages-mine/pages/address/list",
                },
                { name: "我的优惠券", icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t5.png", path: "" },
                {
                    name: "联系客服",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t6.png",
                    path: "link-service",
                },
                {
                    name: "意见反馈",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t7.png",
                    path: "/pages-mine/pages/feedback",
                },
                {
                    name: "到货提醒",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t8.png",
                    path: "/pages/tools/arrival-notice",
                },
                {
                    name: "合伙人计划",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t9.png",
                    path: "/pages-mine/pages/partner/partner-rule",
                },
                {
                    name: "买卖答疑",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t10.png",
                    path: "/pages-mine/pages/rules-for-sellbooks",
                },
                {
                    name: "关于书嗨",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t11.png",
                    path: "/pages-home/pages/about-us",
                },
                {
                    name: "我的余额",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t12.png",
                    path: "/pages-mine/pages/wallet",
                },
                {
                    name: "用户设置",
                    icon: "https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/t13.png",
                    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({
                url: "/pages-mine/pages/setting",
            });
        },
        //查看全部订单
        viewAllOrders() {
            uni.navigateTo({
                url: "/pages-mine/pages/order-page?status=-1",
            });
        },
        //跳转订单
        navigateToOrder(path) {
            uni.navigateTo({
                url: path,
            });
        },
        //跳转工具
        navigateToTool(path) {
            if (!path)
                return uni.showToast({
                    title: "开发中...",
                    icon: "none",
                });

            if (path == "/pages-mine/pages/partner/partner-rule") {
                this.getPartnerStatus();
            } else {
                uni.navigateTo({
                    url: path,
                });
            }
        },
        // 导航到提现确认页面
        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) => {
                console.log(res);
                if (res.code == 200) {
                    this.userInfo = res.data;
                    uni.setStorageSync("userInfo", this.userInfo);

                    this.orderTypes.forEach((item) => {
                        item.badge = this.userInfo[item.key];
                    });
                }
            });
        },
        //获取合伙人状态
        getPartnerStatus() {
            let item = this.tools.find((item) => item.name == "合伙人计划");
            uni.$u.get("/token/getUserPartnerInfo").then((res) => {
                if (res.code == 200) {
                    let { status } = res.data;
                    if (status == -1 || status == 4) {
                        item.path = "/pages-mine/pages/partner/partner-rule";
                    } else if (status == 1) {
                        item.path = "/pages-mine/pages/partner/partner-home";
                    } else {
                        item.path = "/pages-mine/pages/partner/partner-status";
                    }
                } else {
                    item.path = "/pages-mine/pages/partner/partner-status";
                }

                uni.navigateTo({
                    url: item.path,
                });
            });
        },
        // 触摸开始
        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();
        }
    },
};
</script>

<style lang="scss" scoped>
.mine-page {
    min-height: 100vh;
    background-color: #f5f5f5;

    .link-service {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        line-height: 36rpx;
    }

    .user-info {
        background: url("/static/img/bg.png") no-repeat center center;
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        left: 0;
        padding: 20rpx 50rpx 120rpx;
        color: #fff;
        position: relative;
        padding-top: 160rpx;

        &::after {
            width: 140%;
            position: absolute;
            left: -20%;
            top: 0;
            z-index: -1;
            content: "";
            border-radius: 0 0 50% 50%;
            background: #fd6954;
        }

        .user-header {
            display: flex;
            align-items: center;
            margin-bottom: 40rpx;

            .user-avatar {
                border-radius: 50%;
                margin-right: 20rpx;
                border: 4rpx solid #fff;
                width: 128rpx;
                height: 128rpx;
                overflow: hidden;
                flex-shrink: 0;
                background: #fff;

                .avatar {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    object-fit: cover;
                }
            }

            .user-detail {
                .nickname {
                    font-size: 32rpx;
                    font-weight: 500;
                    margin-bottom: 8rpx;
                }

                .user-tag {
                    display: inline-block;
                    font-size: 22rpx;
                    padding: 4rpx 12rpx;
                    background: linear-gradient(-90deg, #272321, #4b4542);
                    border-radius: 4rpx;
                    margin-top: 8rpx;
                    margin-right: 10rpx;
                }
            }
        }

        .user-data {
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 1;
            padding: 0 40rpx;

            .data-item {
                position: relative;
                text-align: center;

                .amount {
                    font-size: 38rpx;
                    font-weight: 500;
                    margin-bottom: 8rpx;
                }

                .label {
                    font-size: 24rpx;
                    font-weight: 400;
                    opacity: 0.9;
                }

                .badge {
                    position: absolute;
                    top: -15rpx;
                    right: -120%;
                    padding: 0 10rpx;
                    font-size: 20rpx;
                    line-height: 30rpx;
                    height: 30rpx;
                    background: #ff8400;
                    border-radius: 15rpx 15rpx 15rpx 0rpx;
                }
            }
        }
    }

    .order-section {
        margin: -90rpx 30rpx 20rpx;
        background: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        position: relative;
        z-index: 2;

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;

            .view-all {
                display: flex;
                align-items: center;
                color: #999;
                font-size: 26rpx;
            }
        }

        .order-types {
            display: flex;
            justify-content: space-between;

            .type-item {
                text-align: center;
                position: relative;
                .badge {
                    position: absolute;
                    top: -15rpx;
                    right: -6px;
                    padding: 0 10rpx;
                    font-size: 20rpx;
                    line-height: 30rpx;
                    height: 30rpx;
                    background: #f56c6c;
                    color: #fff;
                    border-radius: 15rpx 15rpx 15rpx 0rpx;
                }

                .type-icon {
                    width: 60rpx;
                    height: 60rpx;
                    margin-bottom: 12rpx;
                }

                text {
                    font-size: 26rpx;
                    color: #333;
                }
            }
        }
    }

    .tools-section {
        margin: 30rpx;
        background: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        position: relative;
        z-index: 2;

        .section-title {
            font-size: 30rpx;
            font-weight: 500;
            margin-bottom: 30rpx;
        }

        .tools-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30rpx;

            .tool-item {
                text-align: center;

                .tool-icon {
                    width: 60rpx;
                    height: 60rpx;
                    margin-bottom: 12rpx;
                }

                text {
                    font-size: 24rpx;
                    color: #333;
                }
            }
        }
    }

    // 悬浮提现确认按钮样式
    .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>