paper-shopkeeper-app/pages/mine/index.vue

<template>
  <view class="content">
    <view class="top-area">
      <view class="reset">
        <image class="bg" src="/static/imgs/mine/mine-top-bg.png"></image>
        <view class="operation-area">
          <view class="user">
            <image class="avatar" :src="userInfo.avatar || '/static/imgs/mine/user-avatar.png'"></image>
            <view v-if="!hasLogin" @click="go2('login')">
              <view>
                <text style="font-size: 40rpx; color: #fff; font-weight: 600">点击登录</text>
              </view>
              <view style="margin-top: 10rpx">
                <text style="font-size: 26rpx; color: #fff; font-weight: 400">登录解锁更全功能</text>
              </view>
            </view>
            <view v-else>
              <view class="user__name">
                <text class="name">{{ userInfo.name }}</text>
                <image v-if="userInfo.fddEnterpriseStatus === fddStatus.UNCERTIFIED" class="image" src="/static/imgs/mine/certified-icon.png"></image>
                <image v-else class="image" src="/static/imgs/mine/non-certified-icon.png"></image>
              </view>
              <view style="margin-top: 10rpx">
                <text style="font-size: 26rpx; color: #fff; font-weight: 400">{{ userInfo.supplierName }}</text>
              </view>
            </view>
          </view>
          <view class="operation"></view>
        </view>
        <view class="vip-area">
          <view class="vip-content">
            <view class="left">
              <image class="icon" src="/static/imgs/mine/vip-icon.png"></image>
              <text class="text">VIP会员</text>
            </view>
            <text class="center">立即开通会员 尊享特权</text>
            <view class="right">
              <text class="text">开通会员</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view @click="logout">mine</view>
    <view @click="go2('client-credit')">client-credit</view>
  </view>
</template>

<script>
import { exit, go2 } from '@/utils/hook.js'
import { fddEnterpriseStatus } from '@/enums/index.js'
export default {
  data() {
    return {
      userInfo: {
        avatar: this.$store.state.userInfo.avatar,
        name: this.$store.state.userInfo.name,
        supplierName: this.$store.state.supplierInfo.name,
        fddEnterpriseStatus: this.$store.state.supplierInfo.fddEnterpriseStatus
      },
      fddStatus: Object.freeze(fddEnterpriseStatus)
    }
  },
  methods: {
    logout() {
      exit()
    },
    go2
  },
  computed: {
    hasLogin() {
      return this.$store.state.qnToken != ''
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.top-area {
  width: 750rpx;
  height: 380rpx;
  overflow: hidden;
  position: relative;
  border-radius: 0 0 350px 350px;
  transform: scaleX(2.5);
  .reset {
    width: 750rpx;
    height: 380rpx;
    transform: scaleX(0.4); // 将比例缩至正常
    position: relative;
    overflow: hidden;
  }
  .bg {
    width: 750rpx;
    height: 380rpx;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .operation-area {
    width: 750rpx;
    margin: 96rpx 0 36rpx;
    padding: 0 32rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    .user {
      z-index: 5;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      .avatar {
        width: 156rpx;
        height: 156rpx;
        border-radius: 50%;
        flex-grow: 0;
        flex-shrink: 0;
        overflow: hidden;
        background-color: #fff;
        margin-right: 16rpx;
      }
      .user__name {
        flex-grow: 1;
        flex-shrink: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        .name {
          font-size: 40rpx;
          color: #fff;
          font-weight: 600;
          margin-right: 16rpx;
        }
        .image {
          width: 100rpx;
          height: 32rpx;
          flex-grow: 0;
          flex-shrink: 0;
        }
      }
    }
    .operation {
    }
  }
  .vip-area {
    z-index: 5;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 686rpx;
    height: 90rpx;
    margin: 0 32rpx;
    background-image: linear-gradient(90deg, #333333 0%, #696c6b 99%);
    border-radius: 10rpx;
    .vip-content {
      width: 686rpx;
      padding: 18rpx 24rpx 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        .icon {
          width: 28rpx;
          height: 28rpx;
          flex-grow: 0;
          flex-shrink: 0;
        }
        .text {
          font-size: 26rpx;
          color: #dbc189;
          font-weight: 500;
        }
      }
      .center {
        font-size: 24rpx;
        color: #e7e1be;
        font-weight: 600;
      }
      .right {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 128rpx;
        height: 44rpx;
        border-radius: 14rpx;
        background-image: linear-gradient(90deg, #f4edce 1%, #f3d99e 98%);
        .text {
          font-size: 24rpx;
          color: #443015;
        }
      }
    }
  }
}
</style>