feat(guide): add withdrawal settlement flow

liujie

2026-08-14 d4470f1be3134cc219b6a529bc22567540d01255

 mingdaojingjiang_guide_app/components/guide-nav-bar/guide-nav-bar.vue

@@ -1,10 +1,13 @@
<template>
  <view class="guide-nav-bar" :style="navStyle">
  <view class="guide-nav-bar" :class="'is-' + theme" :style="navStyle">
    <view class="guide-nav-bar__row">
      <button v-if="showBack" class="guide-nav-bar__back" @tap="handleBack">
        <image class="guide-nav-bar__icon" src="/static/icons/chevron-left-white.svg" mode="aspectFit" />
      </button>
      <view v-if="showBack" class="guide-nav-bar__back" @tap="handleBack">
        <image class="guide-nav-bar__icon" :src="backIcon" mode="aspectFit" />
      </view>
      <text class="guide-nav-bar__title">{{ title }}</text>
      <view v-if="actionText" class="guide-nav-bar__action" @tap="handleAction">
        <text class="guide-nav-bar__action-text">{{ actionText }}</text>
      </view>
    </view>
  </view>
</template>
@@ -26,6 +29,14 @@
    backgroundColor: {
      type: String,
      default: '#4d8fe8'
    },
    actionText: {
      type: String,
      default: ''
    },
    theme: {
      type: String,
      default: 'brand'
    }
  },
  data() {
@@ -34,6 +45,18 @@
    }
  },
  computed: {
    isLight() {
      return this.theme === 'light'
    },
    backIcon() {
      return this.isLight ? '/static/icons/chevron-left.svg' : '/static/icons/chevron-left-white.svg'
    },
    barBackground() {
      if (this.isLight && this.backgroundColor === '#4d8fe8') {
        return '#f4f6f9'
      }
      return this.backgroundColor
    },
    navHeightPx() {
      return this.statusBarHeight + upxToPx(98)
    },
@@ -41,13 +64,16 @@
      return {
        paddingTop: `${this.statusBarHeight}px`,
        height: `${this.navHeightPx}px`,
        background: this.backgroundColor
        background: this.barBackground
      }
    }
  },
  methods: {
    handleBack() {
      this.$emit('back')
    },
    handleAction() {
      this.$emit('action')
    }
  }
}
@@ -82,13 +108,7 @@
  width: 88rpx;
  height: 64rpx;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
}

.guide-nav-bar__back::after {
  border: 0;
}

.guide-nav-bar__icon {
@@ -97,7 +117,7 @@
}

.guide-nav-bar__title {
  max-width: 460rpx;
  max-width: 360rpx;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 800;
@@ -105,4 +125,37 @@
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guide-nav-bar__action {
  position: absolute;
  right: 24rpx;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 104rpx;
  height: 52rpx;
  padding: 0 22rpx;
  border-radius: 10rpx;
  background: #ffffff;
  transform: translateY(-50%);
}

.guide-nav-bar__action-text {
  color: #4d8fe8;
  font-size: 26rpx;
  font-weight: 700;
  line-height: 1;
}

.guide-nav-bar.is-light .guide-nav-bar__title {
  color: #202b3e;
  font-size: 34rpx;
  font-weight: 700;
}

.guide-nav-bar.is-light .guide-nav-bar__icon {
  width: 38rpx;
  height: 38rpx;
}
</style>