frontend-app/pages/mine/mine.vue

<template>
  <view class="mine_warp" :class="platformType ? '' : 'iosplatformType'">
    <view class="mine_header">
      <view class="mine_login_data" v-if="currentUserData && Object.keys(currentUserData).length !== 0">
        <view class="mine_data">
          <up-image :src="currentUserData.avatarUrl
            ? currentUserData.avatarUrl
            : 'https://static.tbmall.xin/static/mine/avatar.png'
            " shape="circle" width="54" height="54" bgColor="#f1f6ff00"></up-image>
          <view class="mine_info">
            <view class="mine_info_name">
              <text style="margin-right: 20rpx">{{
                currentUserData.nickname || "信任桥用户"
              }}</text>

              <view class="level level-grade" @click="jumpToTrustBridge" v-if="currentUserData.agentName">
                <up-image src="https://static.tbmall.xin/static/mine/rz.png"
                  style="margin-right: 8rpx; margin-top: 6rpx" shape="circle" width="13" height="13"
                  bgColor="#f1f6ff00"></up-image>
                <view>{{ currentUserData.agentName }}</view>
              </view>

              <view :class="['level', currentUserData.grade? 'level-name' : 'level-grade']" v-if="!currentUserData.agentName && currentUserData.gradeName">
                <view style="display: flex; align-items: center;">
                  <up-image :src="currentUserData.grade? '/static/common/level.png' : 'https://static.tbmall.xin/static/mine/rz.png'" style="margin-right: 8rpx; margin-top: 6rpx" shape="circle"
                    width="14" height="14" bgColor="#f1f6ff00"></up-image>
                  <view>{{ currentUserData.gradeName }}</view>
                </view>
              </view>

              <!--   <view class="grade_warp" v-if="currentUserData && Object.keys(currentUserData).length !== 0">
                                <up-image
                                    :src="
                                        currentUserData.gradeLevel || currentUserData.gradeLevel === 0
                                            ? 'https://static.tbmall.xin/static/grade/V' + currentUserData.gradeLevel + '.png'
                                            : 'https://static.tbmall.xin/static/grade/V0.png'
                                    "
                                    width="96"
                                    height="26"
                                    bgColor="#f1f6ff00"
                                ></up-image>
                                <view :class="currentUserData.gradeName.length > 3 ? 'grade_key_warp grade_key_warp3' : 'grade_key_warp grade_key_warp1'">
                                    {{ currentUserData.gradeName }}
                                </view>
                            </view> -->
            </view>
            <view class="mine_info_id">
              <text style="margin-right: 20rpx">邀请码:{{ currentUserData.inviteCode }}</text>
              <up-image src="/static/common/copy.png" width="14" height="14" bgColor="#f1f6ff00"
                @click="copyData(currentUserData.inviteCode)"></up-image>
            </view>
          </view>
        </view>
        <view @click="jumpSetting">
          <up-image src="https://static.tbmall.xin/static/mine/icon_arrow_black_off.png" width="22" height="22"
            bgColor="#f1f6ff00"></up-image>
        </view>
      </view>
      <view class="mine_no_login_data" v-else>
        <view class="mine_data">
          <up-image src="https://static.tbmall.xin/static/avater_not.png" shape="circle" width="80" height="80"
            bgColor="#f1f6ff00"></up-image>
          <view class="mine_info_not_login">未登录</view>
        </view>
        <view @click="jumpLogin" class="login_warp">
          <text style="margin-right: 10rpx">立即登录</text>
          <up-image src="/static/common/right_y_st.png" width="18" height="18" bgColor="#f1f6ff00"></up-image>
        </view>
      </view>
    </view>
    <view class="mine_content_warp">
      <!-- 我的订单 -->
      <view class="mine_content_comm_warp">
        <view class="mine_order_title">
          <view>我的订单</view>
          <view class="mine_order_title_all" @click="jumpOrder({})">
            <view style="margin-right: 10rpx; font-size: 28rpx; font-weight: normal">全部</view>
            <up-image style="margin-top: 10rpx" src="/static/common/right.png" width="15" height="15"
              bgColor="#f1f6ff00"></up-image>
          </view>
        </view>
        <view class="mine_order_list">
          <view class="mine_fontsize_comm_warp order_list_item" v-for="item in orderTemplList" :key="item.id"
            @click="jumpOrder(item)">
            <up-image :src="item.url" width="28" height="28" bgColor="#f1f6ff00"></up-image>
            <view>{{ item.title }}</view>
            <up-badge :absolute="true" :offset="[0, 8]" max="99" :value="statisticsObj[item.note]"></up-badge>
          </view>
        </view>
      </view>
      <!-- 应用 -->
      <view class="mine_content_comm_warp mine_top_comm_warp apply_list">
        <view class="apply_item mine_fontsize_comm_warp" v-for="item in applyList" :key="item.id"
          @click="jumpTool(item)">
          <up-image :src="item.url" width="36" height="36" bgColor="#f1f6ff00"></up-image>
          <view>{{ item.title }}</view>
        </view>
      </view>
      <!-- 入驻 -->
      <!--  #ifndef MP-WEIXIN -->
      <!-- <view class="mine_content_comm_warp mine_top_comm_warp mine_tool_warp">
        <view class="mine_tool_title">入驻信任桥</view>
        <view class="settled_list">
          <view class="enter_item" @click="jumpEnter('merchant')">
            <view class="enter_item_cell">
              <up-image
                src="https://static.tbmall.xin/static/mine/enter_sj.png"
                width="36"
                height="36"
                bgColor="#f1f6ff00"
              ></up-image>
              <view class="enter_item_text">
                <view class="enter_title">商家入驻</view>
                <view class="enter_remark">获取更多客户与订单机会</view>
              </view>
            </view>
            <view class="enter_apply">
              <text class="enter_apply_title">申请</text>
              <view style="margin-top: 10rpx">
                <up-image
                  src="/static/common/right.png"
                  width="14"
                  height="14"
                  bgColor="#f1f6ff00"
                ></up-image>
              </view>
            </view>
          </view>

          <view class="enter_item" @click="jumpEnter('brand')">
            <view class="enter_item_cell">
              <up-image
                src="https://static.tbmall.xin/static/mine/enter_pp.png"
                width="36"
                height="36"
                bgColor="#f1f6ff00"
              ></up-image>
              <view class="enter_item_text">
                <view class="enter_title">企业/品牌入驻</view>
                <view class="enter_remark">助您打造专属品牌馆</view>
              </view>
            </view>

            <view class="enter_apply">
              <text class="enter_apply_title">申请</text>
              <view style="margin-top: 10rpx">
                <up-image
                  src="/static/common/right.png"
                  width="14"
                  height="14"
                  bgColor="#f1f6ff00"
                ></up-image>
              </view>
            </view>
          </view>
        </view>
      </view> -->
      <!-- #endif -->

      <!-- 服务工具 -->
      <view class="mine_content_comm_warp mine_top_comm_warp mine_tool_warp">
        <view class="mine_tool_title">服务工具</view>
        <view class="tool_list">
          <view class="tool_item" v-for="item in toolList" :key="item.id" @click="jumpTool(item)">
            <up-image :src="item.url" width="28" height="28" bgColor="#f1f6ff00"></up-image>
            <text class="mine_fontsize_comm_warp">{{ item.title }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- #ifndef H5 || MP-WEIXIN-->
    <CustomTabBar :tabIndex="4" />
    <!-- #endif -->
    <!-- 品牌入驻弹框 -->
    <up-modal :show="brandShow" :showConfirmButton="false">
      <view class="slot-content">
        <view class="close_warp" @click="brandShow = false">
          <up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
        </view>
        <view class="content_">
          <view class="content_1">企业入驻</view>
          <view class="content_2">请联系负责人</view>
          <view class="content_3">{{ CUSTOMER_SERVICE_PHONE_NUMBER }}</view>
        </view>
        <view class="but_">
          <view class="but_copy" @click="copyMobile(CUSTOMER_SERVICE_PHONE_NUMBER)">复制号码</view>
          <view class="but_close" @click="brandShow = false">取消</view>
        </view>
      </view>
    </up-modal>
    <!-- 我的客服 -->
    <up-modal :show="serviceShow" :showConfirmButton="false">
      <view class="slot-content">
        <view class="close_warp" @click="serviceShow = false">
          <up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
        </view>
        <view class="content_">
          <view class="content_1">联系客服</view>
          <view class="content_3">{{ CUSTOMER_SERVICE_PHONE_NUMBER }}</view>
        </view>
        <view class="but_">
          <view class="but_copy" @click="copyMobile(CUSTOMER_SERVICE_PHONE_NUMBER)">复制号码</view>
          <view class="but_close" @click="serviceShow = false">取消</view>
        </view>
      </view>
    </up-modal>
    <!-- 暂未开放 -->
    <up-modal :show="openShow" :showConfirmButton="false">
      <view class="slot-content">
        <view class="close_warp" @click="openShow = false">
          <up-image src="/static/common/close.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
        </view>
        <view class="content_">
          <view class="content_1">温馨提示</view>
          <view class="content_2">暂未开放</view>
        </view>
        <view class="but_">
          <view class="but_copy" @click="openShow = false">确定</view>
        </view>
      </view>
    </up-modal>
  </view>
</template>

<script>
import { getStorageFun, USER_DATA, clear } from "@/utils/auth.js";
import { ORDER_TYPE, MINE_ORDER_TYPE } from "@/utils/enumUtils.js";
import { copyData } from "@/utils/index.js";
import CustomTabBar from "@/components/custom-tab-bar.vue";
import { getStatistics } from "@/api/order.js";
import { getUserInfo } from "@/api/auth.js";
import { CUSTOMER_SERVICE_PHONE_NUMBER } from "@/utils/config.js";

export default {
  computed: {
    CUSTOMER_SERVICE_PHONE_NUMBER() {
      return CUSTOMER_SERVICE_PHONE_NUMBER;
    },
  },
  components: { CustomTabBar },
  data() {
    return {
      userData: {}, // 当前登录对象
      currentUserData: {}, // 当前登录对象
      orderTemplList: [
        {
          id: ORDER_TYPE.UNPAID,
          title: "待支付",
          url: "https://static.tbmall.xin/static/mine/order_unpaid.png",
          path:
            "/pages/mine_package/mine_order/mine_order?type=" +
            MINE_ORDER_TYPE.UNPAID,
          note: "unPayNum",
        },
        {
          id: ORDER_TYPE.UNSHIPPED,
          title: "待发货",
          url: "https://static.tbmall.xin/static/mine/order_unshipped.png",
          path:
            "/pages/mine_package/mine_order/mine_order?type=" +
            MINE_ORDER_TYPE.UNSHIPPED,
          note: "unSentNum",
        },
        {
          id: ORDER_TYPE.NOT_RECEIVE,
          title: "待收货",
          url: "https://static.tbmall.xin/static/mine/order_notReceive.png",
          path:
            "/pages/mine_package/mine_order/mine_order?type=" +
            MINE_ORDER_TYPE.NOT_RECEIVE,
          note: "unTakeNum",
        },
        {
          id: ORDER_TYPE.SUCCEED,
          title: "已完成",
          url: "https://static.tbmall.xin/static/mine/order_afterSale.png",
          path:
            "/pages/mine_package/mine_order/mine_order?type=" +
            MINE_ORDER_TYPE.SUCCEED,
          note: "unCommentNum",
        },
        {
          id: ORDER_TYPE.AFTER_SALE,
          title: "售后",
          url: "https://static.tbmall.xin/static/new/shouhou.png",
          path:
            "/pages/mine_package/mine_order/mine_order?type=" +
            MINE_ORDER_TYPE.AFTER_SALE,
          note: "unCommentNum",
        },
      ],
      applyList: [
        {
          id: 1,
          title: "钱包",
          url: "https://static.tbmall.xin/static/mine/apply_purse.png",
          path: "/pages/mine_package/mine_purse/mine_purse",
        },
         {
          id: 6,
          title: "优惠券",
          url: "https://static.tbmall.xin/static/mine/apply_prize.png",
          path: "/pages/other_package/coupon/coupon",
        },
        {
          id: 2,
          title: "抽奖",
          url: "https://static.tbmall.xin/static/mine/apply_prize.png",
          path: "/pages/other_package/nine-grid/nine-grid",
        },
        {
          id: 4,
          title: "我的推广",
          url: "https://static.tbmall.xin/static/mine/tool_team.png",
          path: "/pages/mine_package/mine_my_team/mine_my_team",
        },
        {
          id: 5,
          title: "数字积分",
          url: "https://static.tbmall.xin/static/mine/tool_js.png",
          path: "/pages/rwa_package/dongjian/jia",
        },
        // {
        // 	id: 3,
        // 	title: "交易",
        // 	url: 'https://static.tbmall.xin/static/apply_hm.png'
        // },
        // {
        // 	id:4,
        // 	title:"贡献值",
        // 	url:'https://static.tbmall.xin/static/mine/apply_gx.png'
        // },{
        // 	id:5,
        // 	title:"数据",
        // 	url:'https://static.tbmall.xin/static/mine/apply_sj.png'
        // },
      ], // 应用模版
      toolList: [
        {
          id: 5,
          title: "地址管理",
          url: "https://static.tbmall.xin/static/mine/tool_dz.png",
          path: "/pages/mine_package/mine_address/mine_address",
        },
        {
          id: 9,
          title: "实名认证",
          url: "https://static.tbmall.xin/static/mine/tool_sm.png",
        },
        {
          id: 10,
          title: "账户管理",
          url: "https://static.tbmall.xin/static/mine/tool_card.png",
          path: "/pages/rwa_package/account/index",
        },
        {
          id: 3,
          title: "邀请好友",
          url: "https://static.tbmall.xin/static/mine/tool_invite.png",
          path: "/pages/other_package/invite_friends/invite_friends",
        },
        // {
        // 	id:2,
        // 	title:"我的团队",
        // 	url:'https://static.tbmall.xin/static/tool_team.png',
        // 	path:"/pages/mine_package/mine_my_team/mine_my_team",
        // },
        // {
        // 	id:6,
        // 	title:"卡券",
        // 	url:'https://static.tbmall.xin/static/mine/tool_kj.png',
        // 	// path:"/pages/mine_package/mine_coupon/mine_coupon",
        // },
        {
          id: 7,
          title: "联系客服",
          url: "https://static.tbmall.xin/static/mine/xlkf.png",
        },
        // {
        // 	id:4,
        // 	title:"加速次数",
        // 	url:'https://static.tbmall.xin/static/tool_js.png',
        // 	path:"/pages/login_package/accelerate/accelerate"
        // },
        {
          id: 8,
          title: "商学院资讯",
          url: "https://static.tbmall.xin/static/mine/tool_sxy.png",
          path: "/pages/login_package/news/news",
        },
        {
          id: 12,
          title: "财务",
          url: "https://static.tbmall.xin/static/mine/tool_cw.png",
          path: "/pages/rwa_package/dongjian/finance",
        },
        // {
        //   id: 11,
        //   title: "股东行权",
        //   url: "https://static.tbmall.xin/static/mine/tool_gdxq.png",
        //   path: "/pages/rwa_package/rwa/rwa",
        // },
        // {
        // 	id:1,
        // 	title:"IM聊天",
        // 	url:'https://static.tbmall.xin/static/mine/tool_im.png'
        // },
      ], // 工具
      brandShow: false, // 品牌入驻弹框
      statisticsObj: {
        unPayNum: 0, //待支付数量
        unSentNum: 0, //待发货数量
        unTakeNum: 0, //待收货数量
        unCommentNum: 0, //待评价数量
      }, // 角标统计
      serviceShow: false, // 我的客服弹框
      openShow: false, // 暂未开放
      platformType: true,
    };
  },
  onShow() {
    this.userData = getStorageFun(USER_DATA);
    /*#ifdef APP-PLUS*/
    uni.hideTabBar({
      animation: false,
    });
    const appUpdate = uni.getStorageSync("platform");
    this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
    /*#endif*/
    this.getStatistics();

    this.getUserInfo();
  },
  mounted() { },
  methods: {
    copyData,
    // 查询用户等级
    async getUserInfo() {
      const result = await getUserInfo();
      if (result && result.bizcode === 100) {
        const data = result.data;
        this.currentUserData = result.data || {};
        if (!this.currentUserData?.isNewUser) {
          this.applyList = this.applyList.filter((item) => item.id !== 5);
        }
      }
    },
    jumpToTrustBridge() {
      // 跳转到指定的信任桥地址
      const isAgentLogin = this.currentUserData?.isAgentLogin
        ? Number(this.currentUserData?.isAgentLogin)
        : 0;
      if (isAgentLogin) {
        uni.navigateTo({
          url: "/pages/mine_package/mild-shopping/mild-shopping",
        });
      }
    },
    /**
     * 跳转到工具
     * @param {Object} item
     */
    jumpTool(item) {
      // 优惠券
      if (item.id === 6) {
        uni.navigateTo({
          url: item.path,
        });
      }
      // 客服
      if (item.id === 7) {
        uni.navigateTo({
          url: "/pages/rwa_package/setting/kefu?type=5257",
        });
      } else if (item.id === 9) {
        // 实名认证
        const currentUserData = this.currentUserData;
        console.log("currentUserData", this.currentUserData);
        let path =
          "/pages/mine_package/mine_authentication/mine_authentication";
        if (
          currentUserData &&
          Object.keys(currentUserData).length !== 0 &&
          currentUserData.certStatus &&
          currentUserData.certStatus !== 0
        ) {
          path =
            "/pages/mine_package/mine_authentication_ok/mine_authentication_ok";
        }
        uni.navigateTo({
          url: path,
        });
      } else if (item.path) {
        uni.navigateTo({
          url: item.path,
        });
      } else {
        this.openShow = true;
      }
    },
    jumpOrder(item) {
      let path = "/pages/mine_package/mine_order/mine_order";
      if (item && Object.keys(item).length !== 0) {
        path = item.path;
      }
      uni.navigateTo({
        url: path,
      });
    },
    jumpLogin() {
      uni.navigateTo({
        url: "/pages/login_package/login/login",
      });
    },
    // 跳转到入驻页面
    jumpEnter(type) {
      // 商家入驻
      if (type === "merchant") {
        // uni.navigateTo({
        // 	url: '/pages/rwa_package/merchant_settlement/merchant_settlement.vue',
        // })
        this.openShow = true;
      } else if (type === "brand") {
        // 企业/品牌入驻
        // uni.navigateTo({
        // 	url: '/pages/brand_settlement/brand_settlement',
        // })
        // this.brandShow = true;
        this.openShow = true;
      }
    },
    copyMobile(mobile) {
      copyData(mobile);
      this.brandShow = false;
      this.serviceShow = false;
    },
    // 查询统计
    async getStatistics() {
      const result = await getStatistics();
      if (result && result.bizcode === 100 && result.data) {
        this.statisticsObj = {
          ...result.data,
          unCommentNum: 0, //待评价数量
        };
      } else {
        this.statisticsObj = {
          unPayNum: 0, //待支付数量
          unSentNum: 0, //待发货数量
          unTakeNum: 0, //待收货数量
          unCommentNum: 0, //待评价数量
        };
      }
    },
    jumpSetting() {
      uni.navigateTo({
        url: "/pages/rwa_package/setting/setting",
      });
    },
  },
  beforeDestroy() {
    this.statisticsObj = {
      unPayNum: 0, //待支付数量
      unSentNum: 0, //待发货数量
      unTakeNum: 0, //待收货数量
      unCommentNum: 0, //待评价数量
    }; // 角标统计
  },
};
</script>

<style lang="scss">
.mine_warp {
  height: calc(100vh - env(safe-area-inset-bottom));
  overflow: auto;
  position: relative;
  background-color: $app-bj;

  &.iosplatformType {
    height: 100vh;

    .mine_content_warp {
      padding-bottom: 100rpx !important;
    }
  }
}

.mine_header {
  // height: 300rpx;
  background: linear-gradient(180deg,
      #f2ebff 0%,
      rgba(245, 245, 247, 0) 100%,
      #ffffff 100%);
  /* 将图片居中显示 */
  padding: 90rpx 20rpx 0;

  .mine_login_data {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.mine_content_warp {
  margin-top: 20rpx;
  margin-left: 30rpx;
  width: 690rpx;
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

.mine_no_login_data {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .login_warp {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 26rpx;
    color: #111111;
  }
}

.mine_data {
  display: flex;
  align-items: center;
}

.mine_info_not_login {
  font-weight: bold;
  font-size: 40rpx;
  color: #111111;
}

.mine_info {
  margin-left: 20rpx;
}

.mine_info_name {
  font-weight: bold;
  font-size: 40rpx;
  color: #111111;
  display: flex;
  justify-content: start;
  align-items: center;

  .grade_warp {
    position: relative;
  }

  .level {
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0rpx 16rpx;
    font-size: 24rpx;
    height: 44rpx;

    &.level-name {
      background: rgba(248, 185, 75, 0.15);
      color: #613700;
      margin-left: 10rpx;
    }

    &.level-grade {
      background: rgba(122, 53, 246, 0.1);
      color: #7a35f6;
    }
  }

  .grade_key_warp {
    position: absolute;
    top: 0rpx;
    left: 30%;
    font-size: 24rpx;
    color: #ffffff;
    width: 100rpx;
    height: 44rpx;
    line-height: 50rpx;
    text-align: center;
  }

  .grade_key_warp1 {
    font-size: 24rpx;
    line-height: 48rpx;
  }

  .grade_key_warp3 {
    font-size: 20rpx;
  }
}

.mine_info_id {
  font-weight: 500;
  font-size: 24rpx;
  color: #666666;
  display: flex;
  margin-top: 10rpx;
}

/* 内容公共 start */
.mine_content_comm_warp {
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx #eeeeee;
  border-radius: 30rpx;
  padding: 30rpx;
}

.mine_fontsize_comm_warp {
  font-weight: 500;
  font-size: 24rpx;
  color: #222222;
}

.mine_top_comm_warp {
  margin-top: 30rpx;

  .settled_list {
    width: 100%;
    box-sizing: border-box;

    .enter_item {
      width: 100%;
      margin-top: 10rpx;
      padding: 12rpx 0;
      box-sizing: border-box;

      .enter_item_cell {
        display: flex;

        .u-transition {
          margin-top: 5rpx;
        }

        .enter_item_text {
          margin-left: 10rpx;

          .enter_remark {
            font-size: 24rpx;
            color: #999999;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}

/* 内容公共 end */

.mine_order_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
}

.mine_order_title_all {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
  color: #bbbbbb;
}

.mine_order_list {
  display: flex;
  justify-content: space-between;
  margin: 40rpx 0 10rpx 0;
}

.order_list_item {
  width: 25%;
  text-align: center;
  position: relative;
}

.apply_list {
  display: flex;
  justify-content: space-between;
}

.apply_item {
  width: 20%;
  text-align: center;
}

.enter_list {
  display: flex;
  justify-content: space-between;
}

.enter_item {
  width: 40%;
  background: #ffffff;
  border-radius: 30rpx;
  display: flex;
  justify-content: space-between;
  padding: 12rpx 30rpx;
  align-items: center;
}

.enter_title {
  font-weight: bold;
  font-size: 26rpx;
  color: #333333;
}

.enter_apply {
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.enter_apply_title {
  margin-right: 10rpx;
}

.mine_tool_title {
  font-weight: bold;
  font-size: 30rpx;
  color: #333333;
}

.tool_list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10rpx;
}

.tool_item {
  width: 25%;
  text-align: center;
  margin-top: 20rpx;
}

::v-deep .u-modal__content {
  padding: 40rpx !important;
}
</style>