brand-arrival-wechat/src/pages/my/index.vue

<template>
  <view class="myContent">
    <!-- <image class="myBg" :src="imgObj.myBg" mode="scaleToFill" /> -->
    <view class="topTitle" :style="{ marginTop: navTop + 'rpx' }"
      >个人中心</view
    >
    <view class="userBox" :style="{ marginTop: navTop + 125 + 'rpx' }">
      <image class="avatar" :src="imgObj.user" mode="scaleToFill" />
      <view class="nickName">
        <text class="name">{{ phone || mobile || "用户昵称" }}</text>
        <text v-if="!phone && !mobile" class="login" @click="onLogin"
          >点击登录</text
        >
      </view>
    </view>
    <view class="dataBox" :style="{ marginTop: navTop + 290 + 'rpx' }">
      <view class="dataItem" v-for="(item, index) in list" :key="index">
        <view class="inside">
          <text class="label">{{ item.label }}</text
          ><br />
          <text>0</text>
        </view>
        <image :src="item.src" mode="scaleToFill" />
      </view>
    </view>
    <view class="content">
      <view style="margin: 26rpx 32rpx 0">
        <nearly-store-box></nearly-store-box>
      </view>
      <view class="toolBox">
        <view class="title"> 常用工具 </view>

        <view class="tools">
          <wd-cell is-link title="奖励记录" @click="toWinner">
            <template #icon>
              <image :src="imgObj.gift" mode="scaleToFill" />
            </template>
            <image
              style="width: 128rpx; height: 48rpx"
              :src="imgObj.with"
              mode="scaleToFill"
              class="custom-text"
            />
          </wd-cell>
          <wd-cell border is-link title="上传记录" @click="toUpLoad">
            <template #icon>
              <image :src="imgObj.page" mode="scaleToFill" />
            </template>
          </wd-cell>
        </view>
      </view>
    </view>

    <user-login-popup
      ref="loginRef"
      :path="path"
      @getPhone="getPhone"
    ></user-login-popup>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";

import { ref } from "vue";
import { getNavTop } from "@/utils/system";
import { paymentAPI } from "@/services/ams";
import { getActivityData, isGetPhone, getMobile } from "@/utils/system";
import UserLoginPopup from "@/components/userLoginPopup.vue";
import NearlyStoreBox from "./components/nearlyStoreBox.vue";
const imgObj = {
  user: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/user.png",
  int: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/int.png",
  coupon: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/coupon.png",
  gift: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/gift.png",
  page: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/page.png",
  with: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/with.png",
  myBg: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/myBg.png",
};

const list = [
  {
    label: "可用积分",
    src: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/int.png",
    num: 0,
  },
  {
    label: "优惠券",
    src: "https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/coupon.png",
    num: 0,
  },
];

const navTop = ref<number>(0);
const loginRef = <any>ref(null);
const path = ref<string>("");
const phone = uni.getStorageSync("phone");

const toWinner = () => {
  path.value = "/pagesOne/record/winnerList";
  if (!isGetPhone()) {
    loginRef.value.show = true;
  } else {
    uni.navigateTo({
      url: "/pagesOne/record/winnerList",
    });
  }
};

const toUpLoad = () => {
  path.value = "/pagesOne/record/uploadList";
  if (!isGetPhone()) {
    loginRef.value.show = true;
  } else {
    uni.navigateTo({
      url: "/pagesOne/record/uploadList",
    });
  }
};

const mobile = ref<string>("");
const onLogin = async (e: any) => {
  path.value = "";

  if (!isGetPhone()) {
    loginRef.value.show = true;
  }
  // setTimeout(() => {
  //   mobile.value = uni.getStorageSync("phone");
  //   console.log("--------------------", mobile.value);
  // }, 2000);
  // const data = await getMobile(e.detail.code, "");
  // console.log(data);
};
const getPhone = (res: string) => {
  mobile.value = res;
};
onLoad(() => {
  navTop.value = getNavTop();
});
onShow(() => {
  getActivityData();
});
// const onLogin = async () => {
//   let form = {
//     mobile: "18927563000",
//     password: "123456",
//   };
//   let res: any = await postLoginAPI(form);
//   if (res.code == 200) {
//   } else {
//     return uni.showToast({
//       title: res.msg,
//       icon: "none",
//     });
//   }
// };
</script>

<style lang="scss" scoped>
.myContent {
  font-family: PingFang SC;
  width: 100%;
  height: 100vh;
  background: url("https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/myBg.png")
    no-repeat top center;
  background-size: 100% 452rpx;
  //   no-repeat center center / 100% 100%;
  overflow: hidden;
  // position: relative;
  // .myBg {
  //   width: 100%;
  //   height: 450rpx;
  //   // position: absolute;
  //   // top: 0;
  //   // z-index: -1;
  // }
  view {
    box-sizing: border-box;
  }
  .content {
    background: #f7f8f9;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    // margin-top: -150rpx;
    // position: relative;
    // z-index: -1;
  }

  .topTitle {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
  }
  .userBox {
    padding: 0 50rpx;
    display: flex;
    color: #fff;
    align-items: center;
    position: absolute;
    top: 0;
    .avatar {
      width: 120rpx;
      height: 120rpx;
      margin-right: 32rpx;
    }
    .nickName {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      font-size: 28rpx;
    }
    .name {
      font-weight: 500;
      font-size: 36rpx;
      margin-bottom: 20rpx;
    }
  }
  .dataBox {
    // margin: 64rpx 32rpx 26rpx;
    height: 192rpx;
    padding: 0 24rpx;
    border-radius: 24rpx;
    background: linear-gradient(
      90deg,
      #ffd67a 0%,
      #ffedb0 45.92%,
      #fec669 100%
    );
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto 32rpx;
    // position: absolute;
    // left: 32rpx;
    // right: 32rpx;
    .dataItem {
      height: 144rpx;
      width: 49%;
      display: flex;
      justify-content: space-between;
      background: linear-gradient(180deg, #e5fff6 0%, #ffffff 100%);
      border-radius: 24rpx;
      padding: 26rpx 32rpx;
      color: #296041;
      font-size: 24rpx;
      font-weight: 500;
      .label {
        font-size: 32rpx;
        margin-bottom: 8rpx;
      }
      image {
        width: 92rpx;
        height: 92rpx;
      }
    }
  }
  .toolBox {
    margin: 26rpx 32rpx 0;
    background: #fff;
    border-radius: 16rpx;
    background: #fff;
    position: relative;
    .title {
      color: #000;
      font-weight: bold;
      font-size: 28rpx;
      padding: 24rpx 0 22rpx 24rpx;
    }
    image {
      height: 48rpx;
      width: 48rpx;
      margin-right: 24rpx;
    }
    ::v-deep .wd-cell__wrapper {
      display: flex;
      align-items: center;
    }
    ::v-deep .wd-cell__value {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    ::v-deep .wd-icon-arrow-right {
      margin-left: 0;
    }
    ::v-deep .wd-cell__title {
      color: #666;
      font-size: 28rpx;
    }
    .custom-text {
      // border: 2rpx solid;
      // margin-top: 5rpx;
    }
  }
}
</style>