zfc/bindbox-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat 上架抖音平台的各类调整

Browse Source
This commit is contained in:
tsui110 2026-01-06 13:02:51 +08:00
parent c1cf14b8fe
commit a083681697
8 changed files with 309 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
App.vue
View File

@ -1,3 +1,4 @@
<script>
import { getPublicConfig } from '@/api/appUser'
export default {
@ -18,6 +19,22 @@ export default {
}).catch(err => {
console.warn('Failed to load public config:', err)
})
// #ifdef MP-TOUTIAO
// 抖音平台：跳转到"我的"页面作为首页
// 检查是否已经登录，如果未登录则跳转到登录页
const token = uni.getStorageSync('token')
if (!token) {
uni.reLaunch({
url: '/pages/login/index'
})
} else {
// 已登录，跳转到我的页面
uni.reLaunch({
url: '/pages/mine/index'
})
}
// #endif
},
onShow: function() {
console.log('App Show')

93
components/custom-tab-bar-toutiao.vue Normal file
View File

@ -0,0 +1,93 @@
<template>
<view class="custom-tab-bar">
<view class="tab-bar-item" @tap="switchTab('pages/shop/index')">
<image class="tab-icon" :src="selected === 0 ? '/static/tab/shop_active.png' : '/static/tab/shop.png'" mode="aspectFit"></image>
<text class="tab-text" :class="{ active: selected === 0 }">商城</text>
</view>
<view class="tab-bar-item" @tap="switchTab('pages/cabinet/index')">
<image class="tab-icon" :src="selected === 1 ? '/static/tab/box_active.png' : '/static/tab/box.png'" mode="aspectFit"></image>
<text class="tab-text" :class="{ active: selected === 1 }">盒柜</text>
</view>
<view class="tab-bar-item" @tap="switchTab('pages/mine/index')">
<image class="tab-icon" :src="selected === 2 ? '/static/tab/profile_active.png' : '/static/tab/profile.png'" mode="aspectFit"></image>
<text class="tab-text" :class="{ active: selected === 2 }">我的</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
selected: 2 // 默认选中"我的"
}
},
mounted() {
this.updateSelected()
},
onShow() {
this.updateSelected()
},
methods: {
updateSelected() {
const pages = getCurrentPages()
if (pages.length > 0) {
const currentPage = pages[pages.length - 1]
const route = currentPage.route
if (route === 'pages/shop/index') this.selected = 0
else if (route === 'pages/cabinet/index') this.selected = 1
else if (route === 'pages/mine/index') this.selected = 2
}
},
switchTab(url) {
uni.switchTab({
url: '/' + url
})
}
}
}
</script>
<style lang="scss" scoped>
.custom-tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: #FFFFFF;
border-top: 1rpx solid #E5E5E5;
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: env(safe-area-inset-bottom);
z-index: 999;
}
.tab-bar-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.tab-icon {
width: 48rpx;
height: 48rpx;
margin-bottom: 4rpx;
}
.tab-text {
font-size: 22rpx;
color: #7A7E83;
&.active {
color: #007AFF;
}
}
</style>

105
components/custom-tab-bar.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<!-- #ifndef MP-TOUTIAO -->
<view class="custom-tab-bar">
<view class="tab-bar-item" @tap="switchTab('pages/index/index')">
<image class="tab-icon" :src="selected === 0 ? '/static/tab/home_active.png' : '/static/tab/home.png'" mode="aspectFit"></image>
<text class="tab-text" :class="{ active: selected === 0 }">首页</text>
</view>
<view class="tab-bar-item" @tap="switchTab('pages/shop/index')">
<image class="tab-icon" :src="selected === 1 ? '/static/tab/shop_active.png' : '/static/tab/shop.png'" mode="aspectFit"></image>
<text class="tab-text" :class="{ active: selected === 1 }">商城</text>
</view>
<view class="tab-bar-item" @tap="switchTab('pages/cabinet/index')">
<image class="tab-icon" :src="selected === 2 ? '/static/tab/box_active.png' : '/static/tab/box.png'" mode="aspectFit"></image>
<text class="tab-text" :class="{ active: selected === 2 }">盒柜</text>
</view>
<view class="tab-bar-item" @tap="switchTab('pages/mine/index')">
<image class="tab-icon" :src="selected === 3 ? '/static/tab/profile_active.png' : '/static/tab/profile.png'" mode="aspectFit"></image>
<text class="tab-text" :class="{ active: selected === 3 }">我的</text>
</view>
</view>
<!-- #endif -->
</template>
<script>
export default {
// #ifndef MP-TOUTIAO
data() {
return {
selected: 0 // 默认选中"首页"
}
},
mounted() {
this.updateSelected()
},
onShow() {
this.updateSelected()
},
methods: {
updateSelected() {
const pages = getCurrentPages()
if (pages.length > 0) {
const currentPage = pages[pages.length - 1]
const route = currentPage.route
if (route === 'pages/index/index') this.selected = 0
else if (route === 'pages/shop/index') this.selected = 1
else if (route === 'pages/cabinet/index') this.selected = 2
else if (route === 'pages/mine/index') this.selected = 3
}
},
switchTab(url) {
uni.switchTab({
url: '/' + url
})
}
}
// #endif
}
</script>
<style lang="scss" scoped>
/* #ifndef MP-TOUTIAO */
.custom-tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
background: #FFFFFF;
border-top: 1rpx solid #E5E5E5;
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: env(safe-area-inset-bottom);
z-index: 999;
}
.tab-bar-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.tab-icon {
width: 48rpx;
height: 48rpx;
margin-bottom: 4rpx;
}
.tab-text {
font-size: 22rpx;
color: #7A7E83;
&.active {
color: #007AFF;
}
}
/* #endif */
</style>

1
pages.json
View File

@ -219,6 +219,7 @@
}
],
"tabBar": {
"custom": true,
"color": "#7A7E83",
"selectedColor": "#007AFF",
"backgroundColor": "#FFFFFF",

15
pages/cabinet/index.vue
View File

@ -2,6 +2,15 @@
<view class="wrap">
<!-- 顶部装饰背景 - 漂浮光球 -->
<view class="bg-decoration"></view>
<!-- 自定义 tabBar -->
<!-- #ifdef MP-TOUTIAO -->
<custom-tab-bar-toutiao />
<!-- #endif -->
<!-- #ifndef MP-TOUTIAO -->
<custom-tab-bar />
<!-- #endif -->
<!-- 顶部 Tab -->
<view class="tabs glass-card">
<view class="tab-item" :class="{ active: currentTab === 0 }" @tap="switchTab(0)">
@ -166,6 +175,12 @@ import { onShow, onReachBottom, onShareAppMessage, onPullDownRefresh } from '@dc
import { getInventory, getProductDetail, redeemInventory, requestShipping, cancelShipping, listAddresses, getShipments, createAddressShare } from '@/api/appUser'
import { vibrateShort } from '@/utils/vibrate.js'
import { checkPhoneBound, checkPhoneBoundSync } from '@/utils/checkPhone.js'
// #ifdef MP-TOUTIAO
import customTabBarToutiao from '@/components/custom-tab-bar-toutiao.vue'
// #endif
// #ifndef MP-TOUTIAO
import customTabBar from '@/components/custom-tab-bar.vue'
// #endif
const currentTab = ref(0)
const aggregatedList = ref([])

22
pages/index/index.vue
View File

@ -6,6 +6,14 @@
<!-- 品牌级背景装饰系统 - 统一漂浮光球 -->
<view class="bg-decoration"></view>
<!-- 自定义 tabBar -->
<!-- #ifdef MP-TOUTIAO -->
<custom-tab-bar-toutiao />
<!-- #endif -->
<!-- #ifndef MP-TOUTIAO -->
<custom-tab-bar />
<!-- #endif -->
<!-- 顶部导航栏 (搜索) -->
<view class="nav-header">
<!-- 品牌标识已按需移除 -->
@ -54,6 +62,7 @@
</view>
<view class="gameplay-grid-v2">
<!-- 上排：两大核心 -->
<!-- #ifndef MP-TOUTIAO -->
<view class="grid-row-top">
<view class="game-card-large card-yifan" @tap="navigateTo('/pages-activity/activity/list/index?category=一番赏')">
<view class="card-bg-decoration"></view>
@ -71,6 +80,7 @@
</view>
</view>
</view>
<!-- #endif -->
<!-- 下排：三小功能 -->
<view class="grid-row-bottom">
@ -133,10 +143,22 @@
import { authRequest, request } from '../../utils/request.js'
import SplashScreen from '@/components/SplashScreen.vue'
import { checkPhoneBound, checkPhoneBoundSync } from '../../utils/checkPhone.js'
// #ifdef MP-TOUTIAO
import customTabBarToutiao from '@/components/custom-tab-bar-toutiao.vue'
// #endif
// #ifndef MP-TOUTIAO
import customTabBar from '@/components/custom-tab-bar.vue'
// #endif
export default {
components: {
SplashScreen
// #ifdef MP-TOUTIAO
, customTabBarToutiao
// #endif
// #ifndef MP-TOUTIAO
, customTabBar
// #endif
},
data() {
return {

44
pages/mine/index.vue
View File

@ -3,6 +3,14 @@
<!-- 顶部背景装饰 -->
<view class="bg-decoration"></view>
<!-- 自定义 tabBar -->
<!-- #ifdef MP-TOUTIAO -->
<custom-tab-bar-toutiao />
<!-- #endif -->
<!-- #ifndef MP-TOUTIAO -->
<custom-tab-bar />
<!-- #endif -->
<!-- 头部区域 -->
<view class="header-section">
<view class="user-info-card glass-card">
@ -187,6 +195,14 @@
</view>
<text class="menu-label">{{ douyinUserId ? '已绑定' : '绑定抖音' }}</text>
</view>
<!-- #ifdef MP-TOUTIAO -->
<view class="menu-item" @click="toMinesweeper">
<view class="menu-icon-box">
<image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMCAxNGwtNiA2Ii8+PHBhdGggZD0iTTE0IDEwbDYgLTYiLz48cGF0aCBkPSJNMTEuNSAxMmwzIDNsLTMgM2wtMy0zeiIvPjxwYXRoIGQ9Ik0xMCAxNGw2IDZtLTItMmwtNiA2bTYtNjYgNm0tMi0ybDItMiIvPjwvc3ZnPg==" mode="aspectFit"></image>
</view>
<text class="menu-label">扫雷</text>
</view>
<!-- #endif -->
</view>
</view>
@ -477,8 +493,22 @@ import {
getUserTasks, getTaskProgress, getInviteRecords, modifyUser, getUserProfile, bindDouyinID
} from '../../api/appUser.js'
import { checkPhoneBoundSync } from '../../utils/checkPhone.js'
// #ifdef MP-TOUTIAO
import customTabBarToutiao from '@/components/custom-tab-bar-toutiao.vue'
// #endif
// #ifndef MP-TOUTIAO
import customTabBar from '@/components/custom-tab-bar.vue'
// #endif
export default {
components: {
// #ifdef MP-TOUTIAO
customTabBarToutiao
// #endif
// #ifndef MP-TOUTIAO
customTabBar
// #endif
},
data() {
return {
userId: '',
@ -946,7 +976,7 @@ export default {
},
toBindDouyinOrder() {
if (!this.checkPhoneBound()) return
// 检查是否已绑定
if (this.douyinUserId) {
uni.showToast({
@ -955,7 +985,7 @@ export default {
})
return
}
uni.showModal({
title: '绑定抖音',
editable: true,
@ -967,17 +997,17 @@ export default {
uni.showToast({ title: '抖音号不能为空', icon: 'none' })
return
}
try {
uni.showLoading({ title: '绑定中...' })
const data = await bindDouyinID(douyinId)
this.douyinUserId = data.douyin_id
// 更新缓存
const userInfo = uni.getStorageSync('user_info') || {}
userInfo.douyin_user_id = data.douyin_id
uni.setStorageSync('user_info', userInfo)
uni.hideLoading()
uni.showToast({ title: '绑定成功', icon: 'success' })
} catch (err) {
@ -988,6 +1018,10 @@ export default {
}
})
},
toMinesweeper() {
if (!this.checkPhoneBound()) return
uni.navigateTo({ url: '/pages-game/game/minesweeper/index' })
},
handleInvite() {
const code = this.getInviteCode()
const path = this.getInviteSharePath()

18
pages/shop/index.vue
View File

@ -1,7 +1,15 @@
<template>
<view class="page">
<view class="bg-decoration"></view>
<!-- 自定义 tabBar -->
<!-- #ifdef MP-TOUTIAO -->
<custom-tab-bar-toutiao />
<!-- #endif -->
<!-- #ifndef MP-TOUTIAO -->
<custom-tab-bar />
<!-- #endif -->
<!-- 顶部固定区域 -->
<view class="header-section">
<view class="search-box">
@ -164,6 +172,14 @@ import { onShow, onReachBottom } from '@dcloudio/uni-app'
import { ref, watch, onUnmounted } from 'vue'
import { getStoreItems, redeemProductByPoints, redeemCouponByPoints, redeemItemCardByPoints } from '../../api/appUser'
import { checkPhoneBound, checkPhoneBoundSync } from '../../utils/checkPhone.js'
// #ifdef MP-TOUTIAO
import customTabBarToutiao from '@/components/custom-tab-bar-toutiao.vue'
// #endif
// #ifndef MP-TOUTIAO
import customTabBar from '@/components/custom-tab-bar.vue'
// #endif
// 由于是 setup 语法，组件会自动注册，无需手动声明
const loading = ref(false)
const keyword = ref('')