frontend-app/components/common/guide-popup.vue

<template>
  <up-popup :show="guideShow" mode="bottom" :round="20" :closeOnClickOverlay="false" @close="closeGuide">
    <view class="guide_popup_container">
      <!-- 头部 -->
      <view class="guide_popup_header">
        <text class="guide_header_title">新手指引</text>
        <view class="guide_header_close" @click="closeGuide">
          <u-icon name="close" size="20" color="#333333"></u-icon>
        </view>
      </view>

      <!-- 内容主体 -->
      <scroll-view scroll-y class="guide_popup_body" :scroll-top="scrollTop" @scroll="onScroll">
        <!-- 图二：第1步 -->
        <view v-if="guideStep === 0" class="guide_step_content">
          <view class="guide_title">信任桥商城是一个怎样的平台</view>
          <view class="guide_desc">
            信任桥TB商城是一个采用 F2C（工厂直链消费者）模式的大消费电商平台，以严选可追溯的供应链机制保障【低价好物】的品质底线，通过削减中间渠道实现低价，并通过独创的权益共享机制，实现【消费即贡献、贡献即共享】的全民普惠。
          </view>
          <view class="guide_section_title">业务逻辑</view>
          <image src="https://static.tbmall.xin/static/home/guide_1.png" mode="widthFix" class="guide_img"></image>
        </view>

        <!-- 图三：第2步 -->
        <view v-if="guideStep === 1" class="guide_step_content">
          <view class="guide_title">什么是消费贡献值</view>
          <view class="guide_desc">
            消费贡献值是平台根据用户的真实消费自动记录生成的数值，是用户参与平台权益共享机制的确权依据。
          </view>
          <view class="guide_title" style="margin-top: 32rpx;">怎么获得贡献值</view>
          <view class="guide_desc">
            只需在平台按公允价格正常购买商品，<text class="guide_highlight">完成真实消费</text>后，系统会自动记录并生成对应消费贡献值，无需额外操作、无需额外缴费，也不用购买指定高价商品。
          </view>
          <image src="https://static.tbmall.xin/static/home/guide_2.png" mode="widthFix" class="guide_img"></image>
          <view class="guide_title" style="margin-top: 32rpx;">贡献值有什么用</view>
          <view class="guide_list">
            <view class="guide_list_item">1. 参与月度权益分配：平台会按你的贡献值占比核算对应权益，每月分配到账。</view>
            <view class="guide_list_item">2. 长期累计持续生效：贡献值按规则长期有效、可持续累计，消费越久、贡献越多，享受平台经营成果分享的基础越厚实。</view>
            <view class="guide_list_item">3. 明细随时可核对：你可随时查询自己的贡献值明细、对应权益占比与历次分配记录，每一笔消费与权益都有据可查。</view>
            <view class="guide_list_item">4.消费同时获赠平台积分，可全额兑换或抵扣兑换平台各类优质好物，规则公开透明，与消费贡献值一样长期有效、持续累计。</view>
          </view>
        </view>

        <!-- 图四：第3步 -->
        <view v-if="guideStep === 2" class="guide_step_content">
          <view class="guide_title">哪里查看贡献值及权益</view>
          <view class="guide_desc">
            登录信任桥商城平台后，在【我的-钱包】即可随时查看本人的消费贡献值明细，包含累计贡献值、各笔消费对应的贡献记录，同时可同步查看对应的消费共享占比、历次权益分配记录。
          </view>
          <view class="guide_title" style="margin-top: 32rpx;">贡献值</view>
          <view class="guide_desc">
            展示累积贡献值，点击可查看贡献值获得明细。是用户参与平台权益共享机制的确权依据。
          </view>
          <image src="https://static.tbmall.xin/static/home/guide_3.png" mode="widthFix" class="guide_img"></image>
          <view class="guide_title" style="margin-top: 32rpx;">数字积分</view>
          <view class="guide_desc">
            展示累积贡献值，点击可查看贡献值获得明细。是用户参与平台权益共享机制的确权依据。使用数字积分进行免费商品兑换
          </view>
          <image src="https://static.tbmall.xin/static/home/guide_4.png" mode="widthFix" class="guide_img"></image>
        </view>

        <!-- 五：第4步 -->
        <view v-if="guideStep === 3" class="guide_step_content">
          <view class="guide_title">消费者服务保障</view>
          <view class="guide_desc">
            在「低价好物 + 权益共享」的商业模式之外，信任桥TB商城将消费者服务保障视为平台长期运营的基础工程。平台按照制度化、公开化、可追溯的原则，建立覆盖售前、售中、售后全链路的消费者服务体系，让每一位用户在享受 F2C 低价与权益共享的同时，获得规范、便捷、可预期的购物保障
          </view>
          <image src="https://static.tbmall.xin/static/home/guide_5.png" mode="widthFix" class="guide_img"></image>
          <image src="https://static.tbmall.xin/static/home/guide_6.png" mode="widthFix" class="guide_img" style="margin-top: 16rpx;"></image>
        </view>
      </scroll-view>

      <!-- 底部按钮操作区 -->
      <view class="guide_popup_footer">
        <view class="guide_btn_skip" @click="closeGuide">跳过</view>
        <view class="guide_btn_next" @click="nextGuideStep">
          {{ guideStep === 3 ? '开启旅程' : '下一步' }}
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script>
export default {
  name: "GuidePopup",
  options: {
    styleIsolation: "shared",
  },
  data() {
    return {
      guideShow: false,
      guideStep: 0,
      scrollTop: 0,
    };
  },
  watch: {
    guideShow: {
      handler(val) {
        // #ifdef MP
        this.$nextTick(() => {
          if (val) {
            uni.hideTabBar({ animation: false, fail: () => {} });
          } else {
            uni.showTabBar({ animation: false, fail: () => {} });
          }
        });
        // #endif
      },
      immediate: true,
    },
  },
  mounted() {
    this.checkGuideShow();
  },
  beforeDestroy() {
    // #ifdef MP
    uni.showTabBar({ animation: false, fail: () => {} });
    // #endif
  },
  unmounted() {
    // #ifdef MP
    uni.showTabBar({ animation: false, fail: () => {} });
    // #endif
  },
  methods: {
    onScroll(e) {
      this.scrollTop = e.detail.scrollTop;
    },
    resetScroll() {
      this.scrollTop = 0;
      this.$nextTick(() => {
        this.scrollTop = 0;
      });
    },
    checkGuideShow() {
      const hasSeen = uni.getStorageSync("has_seen_home_guide");
      if (!hasSeen) {
        this.guideStep = 0;
        this.guideShow = true;
        // #ifdef MP
        uni.hideTabBar({ animation: false, fail: () => {} });
        // #endif
        this.resetScroll();
      }
    },
    closeGuide() {
      this.guideShow = false;
      uni.setStorageSync("has_seen_home_guide", true);
      // #ifdef MP
      uni.showTabBar({ animation: false, fail: () => {} });
      // #endif
      this.$emit("close");
    },
    nextGuideStep() {
      if (this.guideStep < 3) {
        this.guideStep++;
        this.resetScroll();
      } else {
        this.closeGuide();
      }
    },
    open() {
      this.guideStep = 0;
      this.guideShow = true;
      // #ifdef MP
      uni.hideTabBar({ animation: false, fail: () => {} });
      // #endif
      this.resetScroll();
    },
  },
};
</script>

<style lang="scss" scoped>
.guide_popup_container {
  background: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  box-sizing: border-box;

  .guide_popup_header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 32rpx 32rpx 20rpx;

    .guide_header_title {
      font-weight: 500;
      font-size: 32rpx;
      color: #71737c;
    }

    .guide_header_close {
      position: absolute;
      right: 32rpx;
      top: 28rpx;
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .guide_popup_body {
    height: 62vh;
    padding: 10rpx 36rpx 30rpx;
    box-sizing: border-box;

    .guide_step_content {
      display: flex;
      flex-direction: column;
    }

    .guide_title {
      font-size: 34rpx;
      font-weight: bold;
      color: #111111;
      margin-bottom: 20rpx;
      line-height: 1.4;
    }

    .guide_section_title {
      font-size: 32rpx;
      font-weight: bold;
      color: #111111;
      margin-top: 24rpx;
      margin-bottom: 20rpx;
    }

    .guide_desc {
      font-size: 26rpx;
      line-height: 1.75;
      color: #666666;
      margin-bottom: 24rpx;
    }

    .guide_highlight {
      color: #7934f6;
      font-weight: 500;
    }

    .guide_list {
      margin-bottom: 24rpx;

      .guide_list_item {
        font-size: 26rpx;
        line-height: 1.75;
        color: #666666;
        margin-bottom: 16rpx;
      }
    }

    .guide_img {
      width: 100%;
      display: block;
      margin: 10rpx 0 24rpx;
      border-radius: 12rpx;
    }
  }

  .guide_popup_footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24rpx;
    padding: 24rpx 36rpx;
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #ffffff;
    border-top: 1rpx solid #f5f5f5;

    .guide_btn_skip {
      width: 220rpx;
      height: 88rpx;
      background: #f5f5f5;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      color: #999999;
      font-weight: 500;
    }

    .guide_btn_next {
      flex: 1;
      height: 88rpx;
      background: linear-gradient(270deg, #b164fb 0%, #7934f6 100%);
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      color: #ffffff;
      font-weight: 500;
    }
  }
}
</style>