wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加页面

Browse Source
This commit is contained in:
wangxiaowei
2025-09-21 18:18:38 +08:00
parent be39bd6da8
commit 8ce688c697
7 changed files with 262 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/bundle/parten/components/Tabbar.vue
View File

@ -1,21 +1,20 @@
<template>
<view>
currentTab--{{ currentTab }}
<wd-tabbar v-model="tabbar" active-color="#4C9F44" fixed safeAreaInsetBottom @change="Tabbar.handleChange">
<wd-tabbar-item title="收益明细" icon="home">
<wd-tabbar v-model="tabbar" active-color="#4C9F44" inactive-color="#707070" fixed safeAreaInsetBottom @change="Tabbar.handleChange">
<wd-tabbar-item title="收益明细" name="bill">
<template #icon>
<wd-img height="40rpx" width="40rpx" :src="currentTab === 0 ? `${OSS}images/parten/parten_bill_s.png` : `${OSS}images/parten/parten_bill.png`"></wd-img>
<wd-img height="40rpx" width="40rpx" :src="tab === 'bill' ? `${OSS}images/parten/parten_bill_s.png` : `${OSS}images/parten/parten_bill.png`"></wd-img>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="下级用户" icon="cart">
<wd-tabbar-item title="下级用户" name="sub">
<template #icon>
<wd-img height="40rpx" width="40rpx" :src="currentTab === 1 ? `${OSS}images/parten/parten_sub_s.png` : `${OSS}images/parten/parten_sub.png`"></wd-img>
<wd-img height="40rpx" width="40rpx" :src="tab === 'sub' ? `${OSS}images/parten/parten_sub_s.png` : `${OSS}images/parten/parten_sub.png`"></wd-img>
</template>
</wd-tabbar-item>
<wd-tabbar-item title="我的" icon="user">
<wd-tabbar-item title="我的" name="my">
<template #icon>
<wd-img height="40rpx" width="40rpx" :src="currentTab === 2 ? `${OSS}images/parten/parten_my_s.png` : `${OSS}images/parten/parten_my.png`"></wd-img>
<wd-img height="40rpx" width="40rpx" :src="tab === 'my' ? `${OSS}images/parten/parten_my_s.png` : `${OSS}images/parten/parten_my.png`"></wd-img>
</template>
</wd-tabbar-item>
</wd-tabbar>
@ -23,24 +22,33 @@
</template>
<script lang="ts" setup name="Tabbar">
const tabbar = ref(0)
const currentTab = ref<number>(0)
const OSS = inject('OSS')
const props = defineProps({
tab: {
type: String,
default: 'bill'
}
})
const tabbar = ref<string>(props.tab)
const Tabbar = {
handleChange: ({ value }: { value: string }) => {
const index = Number(value)
currentTab.value = index
// console.log("🚀 ~ value:", value)
// tabbar.value = value
// console.log("🚀 ~ value:", tabbar.value)
if (index === 0) {
if (value === 'bill') {
uni.redirectTo({
url: '/bundle/parten/pages/bill/bill'
})
} else if (index === 1) {
} else if (value === 'sub') {
uni.redirectTo({
url: '/bundle/parten/pages/sub/sub'
})
} else if (index === 2) {
} else if (value === 'my') {
uni.redirectTo({
url: '/bundle/parten/pages/my/my'
})

2
src/bundle/parten/pages/bill/bill.vue
View File

@ -9,7 +9,7 @@
<template>
<view class="">
<tabbar class=""></tabbar>
<tabbar tab="bill"></tabbar>
</view>
</template>

145
src/bundle/parten/pages/my/my.vue
View File

@ -2,14 +2,114 @@
{
"layout": "default",
"style": {
"navigationBarTitleText": ""
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="">
<tabbar class=""></tabbar>
<view class="home-bg">
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
<view>
<navbar custom-class='!bg-[transparent]'></navbar>
</view>
</view>
<view class="" :style="{ paddingTop: navbarHeight + 'px' }">
<!-- 账号昵称显示 -->
<view class="ml-60rpx flex items-center">
<view>
<wd-img width="120rpx" height="120rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
</view>
<view class="flex-1 ml-22rpx flex justify-between items-center">
<view @click="My.handleToProfile">
<view class="text-[#303133] text-36rpx leading-50rpx ml-8rpx">昵称名称</view>
<view class="flex justify-center items-center vip-bg mt-10rpx">
<!-- 会员显示图标 -->
<view class="flex items-center mr-12rpx">
<wd-img width="36rpx" height="36rpx" mode="aspectFill" :src="`${OSS}icon/icon_crown.png`" round></wd-img>
</view>
<!-- 这里要根据用户身份显示不同的文字 -->
<view class="text-24rpx text-[#675649] leading-34rpx flex items-center">茶址合伙人</view>
</view>
</view>
</view>
</view>
<!-- 提醒 -->
<view class="bg-[#FFF8F8] rounded-6rpx px-30rpx py-12rpx mx-30rpx mt-16rpx flex items-center">
<view class="flex items-center mr-20rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_tips.png`" mode="aspectFill" round />
</view>
<view class="font-400 text-26rpx leading-36rpx text-#606266">
分佣提成每月月初提现，3日内到账
</view>
</view>
<!-- 余额显示 -->
<view class="mt-30rpx relative">
<wd-img width="750rpx" height="360rpx" :src="`${OSS}images/parten/parten_image2.png`" mode="aspectFill" />
<view class="absolute top-12rpx left-30rpx right-0 w-full">
<view class="mt-14rpx flex justify-end mr-100rpx mt-18rpx text-#fff font-400 text-32rpx leading-44rpx">
<navigator url="/bundle/parten/pages/withdraw/withdraw" hover-class="none" open-type="navigate">
提现
</navigator>
</view>
<view class="flex items-center ml-72rpx">
<view class="mr-68rpx">我的余额</view>
<view>
<price-format color="#251F1F" :first-size="40" :second-size="40" :subscript-size="26" :price="100000"></price-format>
</view>
</view>
<view class="flex items-center justify-between ml-40rpx mr-70rpx mt-40rpx text-#FDD6B7">
<view class="">
<view class="font-400 text-26rpx leading-36rpx">本月预计收益（元）</view>
<view class="font-400 text-36rpx leading-50rpx">5000.00</view>
</view>
<view class="w-2rpx h-100rpx border-r border-solid-r border-r-#FFD8B8 text-#FDD6B7 font-400 text-36rpx leading-50rpx"></view>
<view class="">
<view class="font-400 text-26rpx leading-36rpx">历史总收益（元）</view>
<view class="font-400 text-36rpx leading-50rpx">5000.00</view>
</view>
</view>
</view>
</view>
<!-- 功能列表 -->
<view class="mx-30rpx">
<view class="bg-white rounded-16rpx px-30rpx py-28rpx flex justify-between items-center" @click="My.handleToMyBank">
<view class="flex items-center">
<view class="flex items-center mr-28rpx">
<wd-img width="44rpx" height="44rpx" mode="aspectFill" :src="`${OSS}icon/icon_bank_card.png`"></wd-img>
</view>
<view class="font-400 text-28rpx leading-40rpx text-#303133">
管理我的银行卡
</view>
</view>
<view class="">
<wd-icon name='arrow-right' size="22rpx"></wd-icon>
</view>
</view>
<view class="bg-white rounded-16rpx px-30rpx py-28rpx flex justify-between items-center mt-20rpx" @click="My.handleToFundRecord">
<view class="flex items-center">
<view class="flex items-center mr-28rpx">
<wd-img width="44rpx" height="44rpx" mode="aspectFill" :src="`${OSS}icon/icon_wallet.png`"></wd-img>
</view>
<view class="font-400 text-28rpx leading-40rpx text-#303133">
资金记录
</view>
</view>
<view>
<wd-icon name='arrow-right' size="22rpx"></wd-icon>
</view>
</view>
</view>
</view>
<tabbar tab="my"></tabbar>
</view>
</template>
@ -17,8 +117,45 @@
import Tabbar from '@/bundle/parten/components/Tabbar.vue'
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
const My = {
handleToProfile: () => {
uni.navigateTo({
url: '/pages/profile/profile'
})
},
handleToMyBank: () => {
uni.navigateTo({
url: '/bundle/parten/pages/my-bank/my-bank'
})
},
handleToFundRecord: () => {
uni.navigateTo({
url: '/bundle/parten/pages/fund-record/fund-record'
})
},
}
</script>
<style lang="scss" scoped>
<style lang="scss">
page, home-bg{
background: $cz-page-background url(#{$OSS}images/parten/parten_image1.png) 0 0 no-repeat;
background-size: 100%;
}
.vip-bg {
width: 200rpx;
height: 46rpx;
background: linear-gradient( 315deg, #F2E6BC 0%, #FFF8E2 100%);
box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(0,0,0,0.04);
border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.balance-bg {
background: $cz-page-background url(#{$OSS}images/parten/parten_image2.png) 0 0 no-repeat;
background-size: 100% auto;
}
</style>

2
src/bundle/parten/pages/sub/sub.vue
View File

@ -9,7 +9,7 @@
<template>
<view class="">
<tabbar class=""></tabbar>
<tabbar tab="sub"></tabbar>
</view>
</template>

75
src/bundle/parten/pages/withdraw/withdraw.vue Normal file
View File

@ -0,0 +1,75 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarBackgroundColor": "#F6F7F9",
"navigationBarTitleText": "提现"
}
}
</route>
<template>
<!-- 用 calc(100vh - var(--window-top) - var(--window-bottom)) 精准占满，无滚动条 -->
<view class="flex flex-col bg-[#F6F7F9] overflow-hidden" :style="pageHeightStyle">
<!-- 顶部信息区 -->
<view class="flex justify-between items-center pl-60rpx pr-28rpx pt-64rpx pb-64rpx">
<view class="text-#303133 text-28rpx leading-40rpx">到账银行卡</view>
<view class="flex items-center">
<view class="flex items-center mr-16rpx">
<wd-img width="44rpx" height="44rpx" mode="aspectFill" :src="`${OSS}icon/icon_bank_card2.png`"></wd-img>
</view>
<view class="font-bold text-28rpx leading-40rpx text-#303133">招商银行（3265）</view>
<view class="flex items-center">
<wd-icon name="arrow-right" size="22rpx"></wd-icon>
</view>
</view>
</view>
<view class="flex-1 bg-white rounded-t-16rpx py-40rpx overflow-hidden">
<!-- 内容 -->
<view class="font-400 text-28rpx leading-40rpx text-#303133 mx-70rpx">提现金额</view>
<view class="bg-white rounded-16rpx px-38rpx mx-32rpx border-b border-b-solid border-b-#F6F7F9 pb-30rpx">
<view class="mt-44rpx flex items-center">
<view class="text-[#303133] text-36rpx font-400 leading-50rpx">￥</view>
<wd-input inputmode="decimal" size="large" placeholder="请输入金额" required no-border placeholderStyle="font-size: 48rpx; color: #c9c9c9;"></wd-input>
</view>
</view>
<view class="mt-26rpx text-26rpx leading-36rpx mx-70rpx">
<text class="text-#606266 mr-20rpx">可提现36542.3元</text>
<text class="text-#4C9F44">全部提现</text>
</view>
<view class="mx-48rpx h-90rpx leading-90rpx rounded-8rpx text-center mt-112rpx text-[#fff]" :class="withdrawMoney > 0 ? 'bg-[#4C9F44]' : 'bg-[#A5CFA1]'" @click="Withdraw.handleConfirmwithdrawMoney">确定</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { inject, computed } from 'vue'
const OSS = inject('OSS')
const withdrawMoney = ref<number>(0)
// 扣除原生导航栏/底部（tabbar、安全区）高度，避免 100vh 溢出产生滚动条
const pageHeightStyle = computed(() => ({
height: 'calc(100vh - var(--window-top) - var(--window-bottom))'
}))
const Withdraw = {
// 确定提现
handleConfirmwithdrawMoney: () => {
}
}
</script>
<style lang="scss" scoped>
page {
background: $cz-page-background;
}
</style>

11
src/pages.json
View File

@ -409,7 +409,7 @@
"type": "page",
"layout": "default",
"style": {
"navigationBarTitleText": ""
"navigationStyle": "custom"
}
},
{
@ -419,6 +419,15 @@
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "parten/pages/withdraw/withdraw",
"type": "page",
"layout": "default",
"style": {
"navigationBarBackgroundColor": "#F6F7F9",
"navigationBarTitleText": "提现"
}
}
]
}

22
src/pages/my/my.vue
View File

@ -12,7 +12,7 @@
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
<template #right>
<view class="mr-16rpx flex items-center right-slot" @click="my.handleShowService">
<view class="mr-16rpx flex items-center right-slot" @click="My.handleShowService">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_service.png`"></wd-img>
</view>
</template>
@ -26,7 +26,7 @@
<wd-img width="120rpx" height="120rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
</view>
<view class="flex-1 ml-22rpx flex justify-between items-center">
<view @click="my.handleToProfile">
<view @click="My.handleToProfile">
<view class="text-[#303133] text-36rpx leading-50rpx ml-8rpx">{{ isLogin ? '王大帅' : '立即登录' }}</view>
<view v-if="isLogin" class="flex justify-center items-center vip-bg mt-10rpx">
<!-- 会员显示图标 -->
@ -39,7 +39,7 @@
</view>
<view class="w-178rpx h-80rpx relative">
<wd-img width="100%" height="100%" mode="aspectFill" :src="`${OSS}images/my/my_image2.png`"></wd-img>
<view class="absolute left-36rpx top-28rpx flex items-center" @click="my.handleShowPromoCode">
<view class="absolute left-36rpx top-28rpx flex items-center" @click="My.handleShowPromoCode">
<view class="flex items-center mr-8rpx">
<wd-img width="32rpx" height="32rpx" mode="aspectFill" :src="`${OSS}icon/icon_ercode.png`"></wd-img>
</view>
@ -52,16 +52,16 @@
<!-- 余额显示 -->
<view class="mt-16rpx mx-30rpx flex justify-between">
<view class="flex items-center">
<view class="w-160rpx text-[#303133] text-center" @click="my.handleToCoupon">
<view class="w-160rpx text-[#303133] text-center" @click="My.handleToCoupon">
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? 51 : '- -' }}</view>
<view class="text-24rpx leading-34rpx">优惠券</view>
</view>
<view class="w-160rpx text-[#303133] text-center" @click="my.handleToCollect">
<view class="w-160rpx text-[#303133] text-center" @click="My.handleToCollect">
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? 51 : '- -' }}</view>
<view class="text-24rpx leading-34rpx">收藏</view>
</view>
</view>
<view class="relative" @click="my.handleToWallet">
<view class="relative" @click="My.handleToWallet">
<view class="w-300rpx h-148rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`" mode="aspectFill"></wd-img>
</view>
@ -82,7 +82,7 @@
<view class="w-40rpx h-36rpx flex items-center">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_vip.png`" mode="aspectFill"></wd-img>
</view>
<view class="flex items-center leading-34rpx" @click="my.handleToVipBenefits">
<view class="flex items-center leading-34rpx" @click="My.handleToVipBenefits">
<view class="font-400 text-24rpx ml-12rpx mr-20rpx text-[#EECC99]">2026.03.06到期</view>
<view class="flex items-center mt-4rpx">
<wd-icon name="arrow-right" size="24rpx" color="#EECC99"></wd-icon>
@ -134,7 +134,7 @@
<!-- 团购 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx px-56rpx py-48rpx flex items-center justify-between">
<view class="flex items-center" @click="my.handleToDouYinGroupBuying">
<view class="flex items-center" @click="My.handleToDouYinGroupBuying">
<view class="w-40rpx h-40rpx ">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_douyin.png`"></wd-img>
</view>
@ -146,7 +146,7 @@
<view>
<wd-divider vertical />
</view>
<view class="flex items-center" @click="my.handleToPlatformGroupBuying">
<view class="flex items-center" @click="My.handleToPlatformGroupBuying">
<view class="w-40rpx h-40rpx ">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_platform.png`"></wd-img>
</view>
@ -235,7 +235,7 @@
</wd-overlay>
<!-- 客服电话 -->
<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="my.handleSelectMenu" />
<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="My.handleSelectMenu" />
</view>
</template>
@ -291,7 +291,7 @@
})
const my = {
const My = {
// 跳转抖音团购
handleToDouYinGroupBuying: () => {
uni.navigateTo({