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>

    <!-- 悬浮提现确认按钮 -->
    <withdrawal-confirm
      :visible="withdrawalOrder && withdrawalOrder.length > 0"
      :initialPosition="buttonPosition"
      @click="navigateToWithdrawal"
      @position-change="onPositionChange"
    />

    <!-- 活动悬浮按钮 -->
    <floating-activity
      :visible="activityInfo.frequency && activityInfo.frequency == 3"
      :initialPosition="activityPosition"
      @click="contactCustomerService"
      @position-change="onActivityButtonPositionChange"
    />

    <!-- 提现进度弹窗 -->
    <withdrawal-progress
      :orderInfo="currentWithdrawalOrder"
      @confirm="confirmWithdrawal"
      ref="withdrawalRef"
    />
  </view>
</template>

<script>
import WithdrawalProgress from "./components/withdrawal-progress.vue";
import WithdrawalConfirm from "../../components/withdrawal-confirm.vue";
import floatingActivity from "../../components/floating-activity.vue";

export default {
  components: {
    WithdrawalProgress,
    WithdrawalConfirm,
    floatingActivity,
  },
  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: "10%",
      },
      // 客服按钮位置
      activityPosition: {
        left: "auto",
        right: 0,
        bottom: "25%",
      },
      withdrawalOrder: [],
      // 提现进度弹窗相关
      showWithdrawalModal: false,
      currentWithdrawalOrder: {},

      //活动弹窗信息
      activityInfo: {},
    };
  },
  methods: {
    //获取是否显示活动弹窗
    getActivityStatus() {
      uni.$u.http.post("/token/home/activity/dialog").then((res) => {
        if (res.code == 200) {
          this.activityInfo = res.data;
        }
      });
    },

    //获取是否存在待确认提现的订单
    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,
        });
      });
    },

    // 更新悬浮按钮位置
    onPositionChange(position) {
      this.buttonPosition = position;
    },

    // 更新活动按钮位置
    onActivityButtonPositionChange(position) {
      this.activityPosition = position;
    },

    // 联系客服
    contactCustomerService() {
      uni.navigateTo({
        url: this.activityInfo.jumpPage,
      });
    },

    // 关闭提现进度弹窗
    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;
      },
    });

    this.getActivityStatus();
  },
  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;
  position: relative;

  .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;
        }
      }
    }
  }
}
</style>