zhywpt-sp/pages/user/user - back.vue

<template>
  <view class="wrapper">
    <image
      :src="`${$imgUrl}user/bg-user.png`"
      class="bg-head"
      mode="widthFix"
    ></image>
    <view class="bar" :style="{ top: top, height: height, lineHeight: height }"
      >九州ETC</view
    >
    <view class="content" :style="{ top: margin + 'px' }">
      <view class="head" :style="{ marinTop: margin + 'px' }">
        <view class="avatar">
          <image
            :src="`${$imgUrl}user/icon-avatar.png`"
            :class="!state.data.opId ? 'unlogin' : ''"
			mode="aspectFill"
          ></image>

          <view
            v-if="!state.data.opId"
            class="name"
            @click="$util.navTo('/login/login')"
          >
            <view class="nickname">登录/注册</view>
          </view>
          <view v-else class="name">
            <!-- <view class="nickname">林晨曦</view> -->
            <view class="user-id">
              <view class="phone">{{ mobile }}</view>
              <view
                @click="
                  $util.navTo('/subpackage/personal-center/setting/change-phone', true)
                "
                class="btn-change" style="display: none;"
              >
                更换</view
              >
            </view>
          </view>
        </view>
        <view
          class="setting"
          @click="$util.navTo('/subpackage/personal-center/setting/setting', true)"
        >
          <image :src="`${$imgUrl}user/icon-setting.png`" mode="aspectFill"></image>
          <text>设置</text>
        </view>
      </view>
      <view class="menu">
        <view class="item" style="display: none">
          <view class="item-tit">
            <image
              :src="`${$imgUrl}user/icon-cny.png`"
              class="icon icon-1"
			  mode="aspectFill"
            ></image>
            <text>账户余额</text>
          </view>
          <view class="amount">
            <text class="cny">￥</text>
            <text class="value">0.00</text>
            <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow" mode="aspectFill"></image>
          </view>
        </view>
        <view
          class="item"
          @click="navTo('/subpackage/personal-center/change-password', true)"
        >
          <view class="item-tit">
            <image
              :src="`${$imgUrl}user/icon-lock.png`"
              class="icon icon-1"
            ></image>
            <text>修改密码</text>
          </view>
          <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow" mode="aspectFill"></image>
        </view>
        <view
          class="item"
          @click="navTo('/subpackage/personal-center/progress-query/my-etc', true)"
          style="display: none"
        >
          <view class="item-tit">
            <image
              :src="`${$imgUrl}user/icon-ETC.png`"
              class="icon icon-2"
			  mode="aspectFill"
            ></image>
            <text>我的ETC</text>
          </view>

          <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow" mode="aspectFill"></image>
        </view>
        <view
          class="item"
          @click="
            navTo(
              '/subpackage/personal-center/setting/personal-information/corrections',
              true
            )
          "
        >
          <view class="item-tit">
            <image
              :src="`${$imgUrl}user/icon-user.png`"
              class="icon icon-2"
			  mode="aspectFill"
            ></image>
            <text>用户信息管理</text>
          </view>
          <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
        </view>
        <view
          class="item"
          @click="
            navTo('/subpackage/personal-center/setting/car-information/corrections', true)
          "
        >
          <view class="item-tit">
            <image
              :src="`${$imgUrl}user/icon-car.png`"
              class="icon icon-2"
			  mode="aspectFill"
            ></image>
            <text>车辆信息管理</text>
          </view>
          <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow" mode="aspectFill"></image>
        </view>
        <view
          class="item"
          @click="navTo('/subpackage/personal-center/setting/addressManager', true)"
        >
          <view class="item-tit">
            <image
              :src="`${$imgUrl}user/icon-address.png`"
              class="icon icon-2"
			  mode="aspectFill"
            ></image>
            <text>收货地址管理</text>
          </view>
          <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
        </view>

        <view
          class="item"
          @click="navTo('/subpackage/personal-center/setting/bank-card/bank-card', true)"
          style="display: none"
        >
          <view class="item-tit">
            <image
              :src="`${$imgUrl}user/icon-card.png`"
              class="icon icon-2"
			  mode="aspectFill"
            ></image>
            <text>绑定银行卡</text>
          </view>
          <image :src="`${$imgUrl}user/icon-arrow.png`" class="arrow"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { msg, navTo } from "@/utils/utils";
import { onMounted, ref } from "vue";
import { getItem, StorageKeys } from "@/utils/storage";

import { onLoad, onShow } from "@dcloudio/uni-app";
const height = ref(null);
const top = ref(null);
const margin = ref(null);
const mobile = ref(null);

const state = reactive({
  data: {
    opId: "",
  },
});
onMounted(() => {
  const res = uni.getMenuButtonBoundingClientRect();
  height.value = res.height + "px";
  top.value = res.top + "px";
  margin.value = res.height + res.top;
});

onLoad((option: any) => {
  state.data.opId = getItem(StorageKeys.OpenId);
  mobile.value = getItem("mobile");
});
onShow((option: any) => {
  state.data.opId = getItem(StorageKeys.OpenId);
});
</script>

<style scoped>
.unlogin {
  filter: grayscale(100%);
  opacity: 0.7;
}

page {
  background: #ffffff;
}

.wrapper {
  position: relative;
  background: #fff;
}

.bar {
  width: 100%;
  position: fixed;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}

.bg-head {
  width: 100%;
  position: absolute;
  z-index: -99;
  top: 0;
  left: 0;
}

.content {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 40rpx 0 46rpx;
}

.head .avatar {
  display: flex;
  align-items: center;
}

.head .avatar image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 80rpx;
  border: 12rpx solid rgba(255, 255, 255, 0.5);
  margin: 0 20rpx 0 30rpx;
}

.head .setting {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  height: 60rpx;
  border-radius: 30rpx 0 0 30rpx;
  padding: 0 30rpx 0 20rpx;
  color: #00b38b;
}

.head .setting image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 6rpx;
}

.head .nickname {
  font-size: 42rpx;
  color: #ffffff;
}

.head .user-id {
  font-size: 26rpx;
  color: #ffffff;
  padding-top: 30rpx;
  display: flex;
  align-items: center;
}

.head .btn-change {
  font-size: 22rpx;
  height: 40rpx;
  padding: 0 20rpx;
  border: 1px solid #fff;
  box-sizing: border-box;
  border-radius: 20rpx;
  margin-left: 16rpx;
  line-height:40rpx;
}

.menu {
  background: #ffffff;
  border-radius: 30rpx 30rpx 0 0;
  padding: 0 30rpx;
}

.menu .arrow {
  width: 18rpx;
  height: 32rpx;
}

.menu .icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}

.menu .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dcdcdc;
  padding: 20rpx 0;
}

.menu .item:first-child {
  margin-top: 10rpx;
}

.menu .item-tit {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

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

.amount .cny {
  font-size: 28rpx;
}

.amount .value {
  font-size: 32rpx;
  color: #333;
  padding-right: 24rpx;
}
</style>