discounts-minapp/pages/my/index.vue

<template>
  <view class="content">
    <view :style="{ paddingTop: navBarHeight }" class="profile-box">
      <view class="header">
        <view @click="init" class="avatar">
          <image
            :src="userInfo.imgPath || defaultImg"
            mode="aspectFill"
            class="avatar-img"
          />
        </view>

        <view @click="edit" class="info">
          <view class="name">
            <text>{{ userInfo.nickname || "用户" }}</text>
          </view>
          <view class="desc">
            <text>{{ userInfo.phoneNum || "请先登录" }}</text>
          </view>
        </view>
      </view>

      <view class="vip-card">
        <!-- <view class="vip-title">会员专属</view> -->
        <view class="vip-btn" @click="jump('../../my/memberCenter/index')"
          >开通</view
        >
      </view>
    </view>
    <view
      style="font-size: 34rpx; font-weight: bold; margin: 30rpx 0 20rpx 30rpx"
      >我的订单</view
    >
    <u-grid :border="false" col="5" @click="click">
      <u-grid-item
        v-for="(baseListItem, baseListIndex) in baseList"
        :key="baseListIndex"
        @click="jump(baseListItem.path)"
      >
        <!-- <u-icon
          :customStyle="{ paddingTop: 20 + 'rpx' }"
          :name="baseListItem.name"
          :size="50"
        ></u-icon> -->
        <image
          style="height: 50rpx; width: 50rpx; padding-top: 20rpx"
          :src="baseListItem.src"
        >
        </image>
        <text class="grid-text">{{ baseListItem.title }}</text>
      </u-grid-item>
    </u-grid>
    <view style="font-size: 34rpx; font-weight: bold; margin: 30rpx 0 0 30rpx">
      常用功能
    </view>
    <view class="setting">
      <u-cell-group :border="false">
        <u-cell
          @click="jump(item.path)"
          class="setting-cell"
          v-for="item in settingList"
          :rightIconStyle="{ fontSize: '15px' }"
          :isLink="true"
          :border="false"
          :title="item.title"
        >
        </u-cell>
      </u-cell-group>
    </view>
    <!-- <view class="btn-box"> 退出 </view> -->
    <zs-tab-bar :value="3"></zs-tab-bar>
  </view>
</template>

<script>
import { getUserDetail } from "@/api/common.js";
export default {
  data() {
    return {
      navBarHeight: 0,
      inOpter: false,
      defaultImg:
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fc34b7b74-ba38-0456-982a-43c0f97522fe%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693532127&t=a2e186c12aecaab7723611cb52a6778f",
      userInfo: {
        nickName: "用户12332111",
        type: "尊享会员",
      },
      baseList: [
        {
          name: "order",
          title: "全部",
          src: "/static/icon/my/all.png",
          path: "../../my/order/index",
        },
        {
          name: "red-packet",
          title: "待付款",
          src: "/static/icon/my/obligations.png",
          path: "../../my/order/index?type=WAIT_PAYMENT",
        },
        {
          name: "car",
          title: "待发货",
          src: "/static/icon/my/shipments.png",
        },
        {
          name: "bag",
          title: "待收货",
          src: "/static/icon/my/receiving.png",
        },
        {
          name: "rmb-circle",
          title: "退款",
          src: "/static/icon/my/refund.png",
          path: "../../my/order/index?type=APPLY_REFUND",
        },
      ],
      settingList: [
        // 会员码 、 收获地址 、 我的收藏 、 我的优惠券
        {
          name: "vip",
          title: "会员码",
          path: "../../my/memberCenter/index",
        },
        {
          name: "location",
          title: "收货地址",
        },
        {
          name: "heart",
          title: "我的收藏",
        },
        {
          name: "coupon",
          title: "我的优惠券",
          path: "../../pay/coupon",
        },
      ],
    };
  },
  created() {
    this.navBarHeight = this.$navHight();
  },
  onShow() {
    this.init();
  },
  methods: {
    edit() {
      if (uni.getStorageSync("token")) {
        uni.navigateTo({
          url: "../../my/edit/edit",
        });
      } else {
        uni.showModal({
          title: "请登录",
          confirmText: "去登录",
          success(res) {
            console.log(res);
            if (res.confirm) {
              uni.navigateTo({
                url: "../../login/login/login?redirect=/pages/my/index",
              });
            }
          },
        });
      }
    },
    init() {
      if (uni.getStorageSync("token")) {
        this.getUserDetail();
      } else {
        (this.userInfo = {
          imgPath: null,
          lastLogin: "",
          level: null,
          nickname: null,
          openId: "",
          phoneNum: "",
          sex: 0,
          userId: "",
          valid: 0,
        }),
          uni.showModal({
            title: "请登录",
            confirmText: "去登录",
            success(res) {
              console.log(res);
              if (res.confirm) {
                uni.navigateTo({
                  url: "../../login/login/login",
                });
              }
            },
          });
      }
    },
    // 获取用户详情
    getUserDetail() {
      getUserDetail().then((res) => {
        if (res.state == "Success") {
          this.userInfo = res.content;
          uni.setStorageSync("userInfo", JSON.stringify(this.userInfo));
        }
      });
    },
    jump(url) {
      if (!uni.getStorageSync("token")) {
        return uni.showModal({
          title: "请登录",
          confirmText: "去登录",
          success(res) {
            console.log(res);
            if (res.confirm) {
              uni.navigateTo({
                url: "../../login/login/login?redirect=/pages/my/index",
              });
            }
          },
        });
      }
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>
<style>
page {
  background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.content {
  .profile-box {
    background: url("https://oss.dev.zonelife.cn/static/guida/img/my/background.png") no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    border-bottom-left-radius: 40% 5%;
    border-bottom-right-radius: 40% 5%;
    .header {
      display: flex;
      align-items: center;
      padding: 40rpx;
      height: 300rpx;
      .avatar {
        width: 150rpx;
        height: 150rpx;

        margin-top: -40rpx;
        .avatar-img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }

    .info {
      margin-left: 20rpx;
      display: flex;
      margin-top: -40rpx;
      flex-direction: column;
      justify-content: center;

      .name {
        font-size: 35rpx;
        font-weight: bold;
      }

      .desc {
        margin-top: 20rpx;
        min-width: 85rpx;
        background: #8b8b8b;
        font-size: 20rpx;
        color: white;
        padding: 5rpx 10rpx;
        border-radius: 12px;
      }
    }
  }

  .vip-card {
    display: flex;
    justify-content: flex-end;
    margin: -88rpx 20rpx 0 20rpx;
    padding: 20rpx;
    height: 80rpx;
    color: white;
    background: url("https://oss.dev.zonelife.cn/static/guida/img/my/vip.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 10px 10px 0 0;

    .vip-btn {
      background: #fde9c7;
      padding: 20rpx 40rpx;
      line-height: 20rpx;
      height: 21rpx;
      color: #d6a873;
      border-radius: 17px;
      font-size: 30rpx;
    }
  }

  .grid-text {
    font-size: 14px;
    color: #909399;
    padding: 10rpx 0 20rpx 0rpx;
    /* #ifndef APP-PLUS */
    box-sizing: border-box;
    /* #endif */
  }

  .setting:not(:nth-child(1)) {
    font-size: 30rpx;
    font-weight: bold;
    // margin-top: 40rpx;
    background-color: white;
    border-radius: 20px;

    .setting-cell {
      margin-top: 40rpx;
    }
  }

  .btn-box {
    position: fixed;
    bottom: 15%;
    margin-left: 20rpx;
    width: 90%;
    height: 80rpx;
    background-color: rgba(#000000, 0.2);
    color: black;
    padding-left: 30rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    border-radius: 5px;
  }
}
</style>