350 lines
11 KiB
Vue
350 lines
11 KiB
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,
|
||
hideTimer: null,
|
||
showTimer: null,
|
||
};
|
||
},
|
||
watch: {
|
||
guideShow(val) {
|
||
if (val) {
|
||
this.hideTabBarSafe();
|
||
} else {
|
||
this.showTabBarSafe();
|
||
}
|
||
},
|
||
},
|
||
created() {
|
||
// #ifdef MP
|
||
// 尽早检测，如果是首次进入直接先隐藏tabBar，避免界面抖动或首屏遮挡
|
||
const hasSeen = uni.getStorageSync("has_seen_home_guide");
|
||
if (!hasSeen) {
|
||
this.hideTabBarSafe();
|
||
}
|
||
// #endif
|
||
},
|
||
mounted() {
|
||
this.checkGuideShow();
|
||
},
|
||
beforeDestroy() {
|
||
this.cleanupAndShowTabBar();
|
||
},
|
||
beforeUnmount() {
|
||
this.cleanupAndShowTabBar();
|
||
},
|
||
unmounted() {
|
||
this.cleanupAndShowTabBar();
|
||
},
|
||
methods: {
|
||
hideTabBarSafe() {
|
||
// #ifdef MP
|
||
clearTimeout(this.hideTimer);
|
||
const tryHide = (retryCount = 0) => {
|
||
uni.hideTabBar({
|
||
animation: false,
|
||
fail: (err) => {
|
||
if (retryCount < 5 && this.guideShow) {
|
||
this.hideTimer = setTimeout(() => {
|
||
tryHide(retryCount + 1);
|
||
}, 120 * (retryCount + 1));
|
||
}
|
||
},
|
||
});
|
||
};
|
||
this.$nextTick(() => {
|
||
tryHide(0);
|
||
});
|
||
// #endif
|
||
},
|
||
showTabBarSafe() {
|
||
// #ifdef MP
|
||
clearTimeout(this.hideTimer);
|
||
clearTimeout(this.showTimer);
|
||
const tryShow = (retryCount = 0) => {
|
||
uni.showTabBar({
|
||
animation: false,
|
||
fail: (err) => {
|
||
if (retryCount < 3) {
|
||
this.showTimer = setTimeout(() => {
|
||
tryShow(retryCount + 1);
|
||
}, 100);
|
||
}
|
||
},
|
||
});
|
||
};
|
||
this.$nextTick(() => {
|
||
tryShow(0);
|
||
});
|
||
// #endif
|
||
},
|
||
cleanupAndShowTabBar() {
|
||
// #ifdef MP
|
||
clearTimeout(this.hideTimer);
|
||
clearTimeout(this.showTimer);
|
||
if (this.guideShow) {
|
||
this.showTabBarSafe();
|
||
}
|
||
// #endif
|
||
},
|
||
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;
|
||
this.resetScroll();
|
||
}
|
||
},
|
||
closeGuide() {
|
||
this.guideShow = false;
|
||
uni.setStorageSync("has_seen_home_guide", true);
|
||
this.showTabBarSafe();
|
||
this.$emit("close");
|
||
},
|
||
nextGuideStep() {
|
||
if (this.guideStep < 3) {
|
||
this.guideStep++;
|
||
this.resetScroll();
|
||
} else {
|
||
this.closeGuide();
|
||
}
|
||
},
|
||
open() {
|
||
this.guideStep = 0;
|
||
this.guideShow = true;
|
||
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>
|