charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat：抖音支付

Browse Source
This commit is contained in:
charles
2026-09-09 11:46:36 +08:00
parent 75060faa39
commit b350f1c07a
18 changed files with 2670 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/common/guide-popup.vue
+269
View File
@@ -0,0 +1,269 @@
<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,
};
},
mounted() {
this.checkGuideShow();
},
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;
this.resetScroll();
}
},
closeGuide() {
this.guideShow = false;
uni.setStorageSync("has_seen_home_guide", true);
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>