wxapp-guantong/uniapp/App.uvue

<script lang="uts">
  import { post } from './utils/api.uts'
  import { currentUser, demoUser, phoneFromUser, setUser } from './utils/user.uts'
  import { User } from './utils/types.uts'

  // #ifdef APP-ANDROID || APP-HARMONY
  let firstBackTime = 0
  // #endif
  export default {
    onLaunch() {
      this.login()
    },
    onShow() {},
    onHide() {},
    methods: {
      login() {
        uni.login({
          provider: 'weixin',
          success: (loginRes) => {
            const loginData = loginRes as any
            const code = loginData.code != null ? loginData.code as string : 'demo'
            post('/api/auth/wechat/session', { code }).then((session) => {
              const sessionUser = (session as any).user as any
              const storedUser = currentUser()
              const storedPhone = phoneFromUser(storedUser)
              if (storedPhone.length > 0 && phoneFromUser(sessionUser).length == 0) {
                sessionUser.phone = storedPhone
              }
              setUser(sessionUser as User)
            }).catch(() => {
              const stored = currentUser()
              setUser(stored == null ? demoUser() : stored)
            })
          },
          fail: () => {
            const stored = currentUser()
            if (stored == null) setUser(demoUser())
          }
        })
      }
    },
    // #ifdef APP-ANDROID || APP-HARMONY
    onLastPageBackPress() {
      if (firstBackTime == 0) {
        uni.showToast({
          title: '再按一次退出应用',
          position: 'bottom'
        })
        firstBackTime = Date.now()
        setTimeout(() => {
          firstBackTime = 0
        }, 2000)
      } else if (Date.now() - firstBackTime < 2000) {
        firstBackTime = Date.now()
        uni.exit()
      }
    },
    // #endif
    onExit() {}
  }
</script>

<style>
  page {
    min-height: 100%;
    color: #12201e;
    background: #f7f2ea;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  }

  view,
  text,
  button,
  image,
  scroll-view {
    box-sizing: border-box;
  }

  button {
    padding: 0;
    margin: 0;
    border-width: 0;
    border-radius: 0;
    background-color: transparent;
    line-height: 1;
  }

  .page {
    min-height: 100vh;
    padding: 42rpx 28rpx calc(42rpx + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.92), #f7f2ea 46%), #f7f2ea;
  }

  .sf-navbar {
    display: flex;
    position: relative;
    flex-shrink: 0;
    height: 92rpx;
    height: calc(var(--status-bar-height) + 92rpx);
    padding: 0 10rpx;
    padding: var(--status-bar-height) 10rpx 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 253, 248, 0.86);
  }

  .sf-navbar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
  }

  .nav-back {
    display: flex;
    position: absolute;
    left: 24rpx;
    top: 0;
    top: var(--status-bar-height);
    width: 78rpx;
    height: 92rpx;
    align-items: center;
    justify-content: center;
  }

  .nav-arrow {
    width: 22rpx;
    height: 22rpx;
    border-left: 4rpx solid #12201e;
    border-bottom: 4rpx solid #12201e;
    transform: rotate(45deg);
  }

  .nav-title {
    color: #12201e;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 38rpx;
  }

  .brand-wordmark {
    color: #153d37;
    font-size: 32rpx;
    font-weight: 600;
    font-family: Georgia, "Times New Roman", serif;
  }

  .section-title {
    color: #153d37;
    font-size: 30rpx;
    font-weight: 700;
    line-height: 39rpx;
  }

  .section-subtitle {
    color: #5a706b;
    font-size: 24rpx;
    line-height: 36rpx;
  }

  .surface,
  .sf-card {
    background-color: rgba(255, 253, 248, 0.94);
    border: 1rpx solid rgba(217, 229, 223, 0.92);
    box-shadow: 0 18rpx 46rpx rgba(21, 61, 55, 0.08);
    border-radius: 18rpx;
  }

  .muted {
    color: #5a706b;
  }

  .price {
    color: #aa573e;
    font-weight: 700;
  }

  .bottom-action {
    position: fixed;
    left: 28rpx;
    right: 28rpx;
    bottom: calc(26rpx + env(safe-area-inset-bottom));
    z-index: 20;
  }

  .bottom-spacer {
    height: 132rpx;
  }

  .sf-button {
    display: flex;
    width: 100%;
    height: 88rpx;
    border-radius: 14rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 30rpx;
    font-weight: 600;
    line-height: 88rpx;
  }

  .sf-button-primary {
    color: #ffffff;
    background-color: #006b5e;
    box-shadow: 0 16rpx 32rpx rgba(15, 111, 99, 0.18);
  }

  .sf-button-light {
    color: #0f6f63;
    background-color: #fffdf8;
    border: 1rpx solid #d9e5df;
  }

  .sf-button-text {
    color: #0f6f63;
    background-color: transparent;
    box-shadow: none;
  }

  .sf-button-danger-text {
    color: #aa573e;
    background-color: transparent;
    box-shadow: none;
  }

  .sf-button-disabled {
    color: rgba(255, 255, 255, 0.72);
    background-color: #b9c9c4;
    box-shadow: none;
  }

  .cell-group {
    overflow: hidden;
    border-radius: 18rpx;
    background-color: rgba(255, 253, 248, 0.94);
    border: 1rpx solid rgba(217, 229, 223, 0.86);
  }

  .cell-group-title {
    margin: 30rpx 0 14rpx;
    color: #153d37;
    font-size: 27rpx;
    font-weight: 700;
  }

  .cell {
    display: flex;
    min-height: 92rpx;
    padding: 24rpx 26rpx;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid rgba(217, 229, 223, 0.86);
  }

  .cell-last {
    border-bottom-width: 0;
  }

  .cell-title {
    color: #12201e;
    font-size: 28rpx;
    line-height: 38rpx;
  }

  .cell-description {
    margin-top: 6rpx;
    color: #5a706b;
    font-size: 23rpx;
    line-height: 32rpx;
  }

  .cell-note {
    color: #5a706b;
    font-size: 26rpx;
    line-height: 36rpx;
    text-align: right;
  }

  .check-dot {
    display: flex;
    width: 28rpx;
    height: 28rpx;
    border-radius: 999rpx;
    background-color: #0f6f63;
    align-items: center;
    justify-content: center;
  }

  .check-dot-inner {
    width: 10rpx;
    height: 16rpx;
    border-right: 4rpx solid #ffffff;
    border-bottom: 4rpx solid #ffffff;
    transform: rotate(45deg);
  }

  .empty-card {
    display: flex;
    margin-top: 40rpx;
    padding: 44rpx 28rpx;
    border-radius: 16rpx;
    background-color: rgba(255, 253, 248, 0.88);
    align-items: center;
    justify-content: center;
  }

  .empty-title {
    color: #5a706b;
    font-size: 26rpx;
    line-height: 38rpx;
  }
</style>