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-01 17:28:32 +08:00
parent 6ac45bef6b
commit d05eeebdb1
18 changed files with 695 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@
</wd-navbar>
</view>
<view :style="{ paddingTop: navbarHeight + 'px' }">
<view class="pb-74rpx" :style="{ paddingTop: navbarHeight + 'px' }">
<!-- 账号昵称显示 -->
<view class="ml-60rpx flex items-center">
<view class="">
@ -63,8 +63,8 @@
<view class="w-300rpx h-148rpx">
<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image3.png`" mode="aspectFill"></wd-img>
</view>
<view class="text-[#303133] absolute bottom-12rpx left-24rpx">
<view class="text-30rpx leading-36rpx fon-bold">￥2106.3623</view>
<view class="text-[#303133] absolute bottom-12rpx left-24rpx text-center">
<view class="text-30rpx leading-36rpx fon-bold">{{ isLogin ? '￥2106.3623' : '- -' }}</view>
<view class="text-20rpx leading-28rpx ml-10rpx">平台余额</view>
</view>
</view>
@ -128,6 +128,79 @@
</view>
</view>
</view>
<!-- 团购 -->
<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="w-40rpx h-40rpx ">
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_douyin.png`"></wd-img>
</view>
<view class="ml-20rpx">
<text class="font-bold text-30rpx text-[#303133] leading-42rpx mr-6rpx">抖音团购</text>
<wd-icon name="arrow-right" size="24rpx" color="#B3B3B3"></wd-icon>
</view>
</view>
<view>
<wd-divider vertical />
</view>
<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>
<view class="ml-20rpx">
<text class="font-bold text-30rpx text-[#303133] leading-42rpx mr-6rpx">平台团购</text>
<wd-icon name="arrow-right" size="24rpx" color="#B3B3B3"></wd-icon>
</view>
</view>
</view>
<!-- 茶室订单 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
<view class="px-30rpx pt-30rpx py-24rpx">茶室订单</view>
<view class="flex relative px-30rpx">
<view v-for="(item, index) in roomMenuList" :key="index">
<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
<view class="w-36rpx h-36rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
</view>
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
</view>
</view>
</view>
</view>
<!-- 茶艺师订单 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
<view class="px-30rpx pt-30rpx py-24rpx">茶艺室订单</view>
<view class="flex relative px-30rpx">
<view v-for="(item, index) in teaReserveMenuList" :key="index">
<view class="w-96rpx text-center flex flex-col items-center justify-center mr-30rpx">
<view class="w-36rpx h-36rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
</view>
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
</view>
</view>
</view>
</view>
<!-- 更多服务 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx pb-34rpx">
<view class="px-30rpx pt-30rpx py-24rpx">更多服务</view>
<view class="flex px-30rpx">
<view v-for="(item, index) in serviceMenuList" :key="index">
<view class="text-center flex flex-col items-center justify-center mr-30rpx relative" :class="item.badge ? 'w-180rpx ml-[-10rpx]' : 'w-120rpx'">
<view class="w-60rpx h-60rpx flex items-center justify-center">
<wd-img width="100%" height="100%" :src="item.icon"></wd-img>
</view>
<view class="font-400 text-24rpx text-[#303133] leading-34rpx mt-8rpx">{{ item.title }}</view>
<view class="service-badge rounded-18rpx text-[#63300E] text-16rpx leading-20rpx w-72rpx h-28rpx text-center leading-28rpx absolute top-0 right-0" v-if="item.badge">
{{item.badge}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
@ -142,17 +215,55 @@
const isLogin = ref<boolean>(false)
const isVip = ref<boolean>(true)
// 茶室订单
const roomMenuList = reactive([
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_room_all_order.png`, badge: '', url: '' },
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_room_wait_pay_order.png`, badge: '', url: '' },
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_room_reserve_order.png`, badge: '', url: '' },
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_room_finish_order.png`, badge: '', url: '' },
])
// 茶艺师订单
const teaReserveMenuList = reactive([
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_tea_all_order.png`, badge: '', url: '' },
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_tea_wait_pay_order.png`, badge: '', url: '' },
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_tea_reserve_order.png`, badge: '', url: '' },
{ id: 4, title: '待确认', icon: `${OSS}icon/icon_tea_wait_confirm_order.png`, badge: '', url: '' },
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_tea_finish_order.png`, badge: '', url: '' },
])
// 更多服务
const serviceMenuList = reactive([
{ id: 1, title: '申请茶馆', icon: `${OSS}icon/icon_service_teahouse.png`, badge: '', url: '' },
{ id: 2, title: '申请茶艺师', icon: `${OSS}icon/icon_service_tea.png`, badge: '', url: '' },
{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '' },
])
onLoad(() => {
})
const my = {
// 跳转抖音团购
handleToDouYinGroupBuying() {
},
// 跳转平台团购
handleToPlatformGroupBuying() {
uni.navigateTo({
url: '/bundle/group-buying/platform/order-list'
})
},
handleToService: () => {
uni.navigateTo({
url: '/src/pages/my/service/service'
})
}
}
onLoad(() => {
})
</script>
<style lang="scss">
@ -186,4 +297,8 @@
background: url(#{$OSS}images/my/my_image6.png) 0 0 no-repeat;
background-size: 180rpx;
}
.service-badge {
background: linear-gradient( 315deg, #F4C99A 0%, #FFE3BA 100%);
}
</style>