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

完善收藏

Browse Source
This commit is contained in:
wangxiaowei
2025-10-30 14:00:58 +08:00
parent 0abb527276
commit 3465804793
6 changed files with 143 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/api/tea.ts
View File

@ -1,5 +1,5 @@
import { http } from '@/http/alova'
import type { ITeaSpecialistDetailsResult, ITeaSpecialistFuture7DaysResult, ITeaTypeListResult } from '@/api/types/tea'
import type { ITeaSpecialistDetailsResult, ITeaSpecialistFuture7DaysResult, ITeaTypeListResult, ICollectTeaSpecialistResult } from '@/api/types/tea'
/**
* 获取茶艺师详情
@ -71,4 +71,16 @@ export function getNext7Days() {
*/
export function getTeaTypeList() {
return http.Post('/api/Teamaster/teaType')
}
}
/**
* 获取收藏列表
*/
export interface IGetCollectTeaSpecialistParams {
page: number
size: number
}
export function getCollect(data: IGetCollectTeaSpecialistParams) {
return http.Post<ICollectTeaSpecialistResult>('/api/Teamaster/teamasterCollectList', data)
}

11
src/api/types/tea.ts
View File

@ -67,4 +67,15 @@ export interface ITeaTypeListResult {
status: number
tea_price: number
dtime: string
}
/**
* 首页列表数据返回
*/
export interface ICollectTeaSpecialistResult {
count: Number
list: Array<any>
more: Number
page: string
size: string
}

181
src/bundle/collect/collect.vue
View File

@ -11,102 +11,66 @@
<template>
<view class="pb-180rpx">
<view>
<navbar title="收藏" custom-class='!bg-[#F6F7F8]'></navbar>
<navbar title="收藏" custom-class='!bg-[#F6F7F8]' :leftArrow="false"></navbar>
</view>
<view>
<view class="coupon-tab">
<wd-tabs v-model="tab" swipeable slidable="always" @click="collect.handleChangeTab" :lazy="false">
<wd-tab title="茶室">
<view class="relative p-20rp mb-24rpx" v-for="(item, index) in 100" :key="index" @click="collect.handleToTeaRoom(item)">
<view class="absolute top--28rpx left-0 z-1">
<wd-img width="110rpx" height="110rpx" :src="`${OSS}images/home/home_image4.png`"/>
</view>
<view class="mx-30rpx p-30rpx flex bg-white rounded-10rpx">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`" radius="10rpx" />
<view class="flex-1 ml-28rpx flex justify-between line-1 items-start relative">
<view class="line-1">
<view class="font-bold text-30rpx leading-42rpx flex justify-between items-center w-400rpx">
<view class="w-300rpx line-1">
凝香茶业
</view>
<view @click.stop="collect.handleCancelTeaRoom(item)">
<wd-icon name="heart-filled" size="22px" color="#F65353"></wd-icon>
</view>
</view>
<view class="font-400 text-[#F29747] text-24rpx leading-34rpx mt-10rpx">
100+收藏
</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#606266] text-24rpx mr-10rpx">
营业时间:00:00-23:59
</view>
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-4rpx border-[#F2E2E1]">
打烊了
</view>
</view>
<view class="flex items-center mt-20rpx">
<wd-img width="26rpx" height="26rpx" :src="`${OSS}icon/icon_location.png`"
mode="aspectFit" />
<view class="ml-4rpx line-1 font-400 text-22rpx text-[#606266] leading-32rpx">
青浦区仓路478号
</view>
</view>
</view>
</view>
</view>
</view>
</wd-tab>
<wd-tabs v-model="tab" swipeable slidable="always" :lazy="false">
<wd-tab title="茶艺师">
<view class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx">
<view class="mr-28rpx relative">
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
<view class="tea-specialist-time absolute top-6rpx left-0 text-[#fff] font-400 text-18rpx leading-26rpx flex items-center justify-center">
可约9:00
</view>
</view>
<view class="flex-1">
<view class="flex items-center justify-between">
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
凝香茶业
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Collect.upCallback" :up="upOption" fixed>
<view class="flex items-center bg-white p-20rpx rounded-10rpx mx-30rpx mb-20rpx" v-for="(item, index) in list" :key="index" @click="Collect.handleToTeaSpecialist(item.id)">
<view class="mr-28rpx relative">
<wd-img width="200rpx" height="200rpx" :src="item.image"></wd-img>
<view class="tea-specialist-time absolute top-6rpx left-0 text-[#fff] font-400 text-18rpx leading-26rpx flex items-center justify-center">
可约9:00
</view>
<view class="w-168rpx h-40rpx relative mr-44rpx">
<view class="absolute left-0 top-0 h-36rpx flex items-start">
<wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
</view>
<view class="flex-1">
<view class="flex items-center justify-between">
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
{{ item.name }}
</view>
<view>
<tea-specialist-level :level="TeaSpecialistLevelValue[item.teamasterLevel[0].level_name]"></tea-specialist-level>
</view>
<view @click.stop="Collect.handleCancelTeaSpecialist(1)">
<wd-icon name="heart-filled" size="22px" color="#F65353"></wd-icon>
</view>
<view class="bg-[#F0F6EF] text-[#006C2D] font-400 text-22rpx leading-32rpx rounded-4rpx text-center w-150rpx ml-18rpx pb-4rpx">金牌茶艺师</view>
</view>
<view @click.stop="collect.handleCancelTeaRoom(1)">
<wd-icon name="heart-filled" size="22px" color="#F65353"></wd-icon>
</view>
</view>
<view class="flex items-center">
<view class="mr-12rpx">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">上门服务</wd-tag>
</view>
<view class="mr-12rpx">
<wd-tag color="#F55726" bg-color="#F55726" plain>到点服务</wd-tag>
</view>
<view class="mr-12rpx">
<wd-tag color="#818CA9" bg-color="#F3F3F3">28岁</wd-tag>
</view>
<view class="flex items-center mt-8rpx">
<wd-img :src="`${OSS}icon/icon_woman.png`" width="28rpx" height="28rpx"></wd-img>
</view>
</view>
<view class="flex items-center">
<template v-for="(label, labelIndex) in item.teamasterlabel" :key="labelIndex">
<!-- 上门服务 -->
<view class="mr-12rpx" v-if="label.id == 1">
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">{{ label.label_name }}</wd-tag>
</view>
<view class="font-400 text-[#F29747] text-24rpx leading-34rpx mt-20rpx">
100+收藏
</view>
<!-- 到点服务 -->
<view class="mr-12rpx" v-if="label.id == 2">
<wd-tag color="#F55726" bg-color="#F55726" plain custom-class="!rounded-4rpx">{{ label.label_name }}</wd-tag>
</view>
</template>
<view class="mr-12rpx">
<wd-tag color="#818CA9" bg-color="#F3F3F3">{{ item.both }}</wd-tag>
</view>
<view class="flex items-center mt-8rpx">
<wd-img :src="item.sex == 1 ? `${OSS}icon/icon_man.png` : `${OSS}icon/icon_woman.png`" width="28rpx" height="28rpx"></wd-img>
</view>
</view>
<view class="font-400 text-[#FF5951] text-26rpx leading-40rpx">
<text class="text-32rpx">￥180</text>
<text class="text-24rpx">/小时</text>
<view class="font-400 text-[#F29747] text-24rpx leading-34rpx mt-20rpx">
{{item.count > 100 ? '100+' : item.count }} 收藏
</view>
<view class="font-400 text-[#FF5951] text-26rpx leading-40rpx">
<text class="text-32rpx">￥{{ item.price }}</text>
<text class="text-24rpx">/小时</text>
</view>
</view>
</view>
</view>
</mescroll-body>
</wd-tab>
</wd-tabs>
</view>
@ -115,38 +79,59 @@
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import {toast} from '@/utils/toast'
import { getCollect, collectTeaSpecialist } from '@/api/tea'
import type {ICollectTeaSpecialistResult} from '@/api/types/tea'
import {TeaSpecialistLevelValue} from '@/utils/teaSpecialist'
const tab = ref<number>(0)
const OSS = inject('OSS')
// 分页相关
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const list = ref<Array<any>>([]) // 茶艺师列表
const upOption = {
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
}
onLoad((args) => {
})
const collect = {
// 切换tab
handleChangeTab: (item: any) => {
tab.value = item.index
},
const Collect = {
upCallback: (mescroll) => {
const filter = {
page: mescroll.num,
size: mescroll.size,
}
getCollect(filter).then((res: ICollectTeaSpecialistResult) => {
const curPageData = res.list || [] // 当前页数据
if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
list.value = list.value.concat(curPageData) //追加新数据
mescroll.endSuccess(curPageData.length, Boolean(res.more))
}).catch(() => {
mescroll.endErr() // 请求失败, 结束加载
})
},
// 去茶室的详情
handleToTeaRoom: (item: any) => {
handleToTeaSpecialist: (id: number) => {
uni.navigateTo({
url: '/bundle/tea-room/room?id=1'
url: `/pages/index/detail?id=${id}`
})
},
// 取消收藏
handleCancelTeaRoom: (item: any) => {
toast.info('取消收藏成功')
},
// 取消收藏茶艺师
handleCancelTeaSpecialist: (item: any) => {
toast.info('取消收藏成功')
handleCancelTeaSpecialist: async (id: number) => {
await collectTeaSpecialist({
id: id,
status: 0
})
list.value = []
getMescroll().resetUpScroll()
}
}
</script>

2
src/hooks/useWeiXin.ts
View File

@ -27,7 +27,7 @@ export const getUrlCode = (): { [key: string]: string | undefined } => {
*/
export async function snsapiBaseAuthorize() {
// TODO 测试代码
wxSnsapiBaseLogin({code: '001PFd1w3oKNQ53W681w3U6h8O0PFd13'}).then((res: IUserInfoVo) => {
wxSnsapiBaseLogin({code: '011haFFa1oJbzK04a8Ha1qQHey0haFFJ'}).then((res: IUserInfoVo) => {
console.log("登录成功 ~ snsapiBaseAuthorize ~ res:", res)
// 映射 IUserLogin 到 IUserInfoVo
useUserStore().setUserInfo(res)

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

@ -182,7 +182,7 @@
import { toast } from '@/utils/toast'
import { useUserStore } from '@/store'
import { getUrlCode, snsapiBaseAuthorize } from '@/hooks/useWeiXin'
import { router, NAVIGATE_TO } from '@/utils/tools'
import { getUserInfo } from '@/api/user'
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
@ -219,6 +219,10 @@
if (userStore.userInfo.mobile) {
userInfo.value = userStore.userInfo
isLogin.value = true
const user = getUserInfo()
console.log("🚀 ~ user:", user)
} else if (code && !userStore.userInfo.token) {
// 这里是微信授权之后跳转回到本页面获取到code但是没有登录状态的话需要进行登录操作
snsapiBaseAuthorize()

60
src/pages/reserve/tea-room.vue
View File

@ -45,28 +45,23 @@
<view>
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx mt-52rpx">
<view>茶艺服务</view>
<view>{{ bill.serviceFee }}</view>
<view>￥{{ bill.teaService.total }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>车马费（￥160元/小时）</view>
<view>x4</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>车马费（￥160元/小时）</view>
<view>x4</view>
<view class='w-400rpx'>{{ selectedTeaTxt.join('/') }}</view>
<view>￥{{ bill.teaService.total }}</view>
</view>
</view>
<view class="mt-52rpx">
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>优惠</view>
<view class="text-[#4C9F44]">-￥640.00</view>
<view class="text-[#4C9F44]">-￥{{ bill.coupon }}</view>
</view>
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
<view>优惠券</view>
<view>-￥20</view>
<view>-￥{{ bill.coupon }}</view>
</view>
</view>
@ -76,7 +71,7 @@
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
<view>实付金额</view>
<view>￥640.00</view>
<view>￥{{ bill.total }}</view>
</view>
</view>
</view>
@ -158,7 +153,7 @@
<view class="flex items-center justify-between w-full">
<view class="text-28rpx leading-40rpx text-#303133">茶具需求</view>
<view>
<wd-radio-group v-model="teaUsageValue" shape="dot" checked-color="#4C9F44" inline @change="TeaRoom.handleChangeTeaUsage">
<wd-radio-group v-model="teaUsageValue" shape="dot" checked-color="#4C9F44" inline>
<block v-for="(item, index) in teaUsageList" :key="index">
<wd-radio :value="item.type">
<view class="text-[#303133] text-26rpx leading-36rpx mt-2rpx">{{item.name}}</view>
@ -195,7 +190,7 @@
<booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="TeaRoom.handleChooseReserveTime"></booking-time>
<view>
<navbar title="预约茶茶艺师" :leftArrow="false"></navbar>
<navbar title="预约茶艺师" :leftArrow="false"></navbar>
</view>
<view>
@ -342,7 +337,7 @@
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
:style="{ height: '140rpx' }">
<view class="mt-22rpx flex justify-between items-center">
<view class="flex items-center ml-60rpx">
<view class="flex items-center ml-60rpx" @click="showCostPopup = true">
<view class="text-24rpx text-[#303133] leading-34rpx w-72rpx">合计：</view>
<view class="flex items-center h-56rpx mr-16rpx">
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="bill.total"></price-format>
@ -350,7 +345,7 @@
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
</view>
</view>
<view class="flex items-center text-[#4C9F44]" @click="showCostPopup = true">
<view class="flex items-center text-[#4C9F44]">
<view class="text-24rpx mr-10rpx">费用明细</view>
<wd-icon :name="showCostPopup ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#4C9F44"></wd-icon>
</view>
@ -420,7 +415,7 @@
const selectedTea = ref<Array<any>>([]) // 选择的茶叶
const selectedTeaTxt = ref<Array<any>>([]) // 选择的茶叶文本
const selectedTeaPrice = ref<Array<any>>([]) // 选择的茶叶价格
const totalSelectedTeaPrice = ref<string>('')
const totalSelectedTeaPrice = ref<string>('') // 选择的茶叶总价
// 茶具使用
const teaUsageList = ref<Array<any>>([
@ -563,17 +558,7 @@
}
totalSelectedTeaPrice.value = toPlus(selectedTeaPrice.value)
},
// 切换茶具需求
handleChangeTeaUsage: () => {
// TODO 这边需要加上或减去茶具费用
// if (teaUsageValue.value == 2) {
// totalSelectedTeaPrice.value += toTimes(160, servicePeople.value)
// } else {
// totalSelectedTeaPrice.value = toMinus(selectedTeaPrice.value)
// }
console.log("🚀 ~ teaUsageValue:", teaUsageValue.value)
bill.value.teaService.total = totalSelectedTeaPrice.value
},
// 选择门店
@ -610,6 +595,7 @@
uni.$off('chooseCoupon')
console.log("🚀 ~ params:", params)
selectedCoupon.value = {id: params.coupon.user_coupon_id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
bill.value.coupon = params.coupon.coupon_price
})
if (reserveTime.value.length == 0) {
@ -634,10 +620,6 @@
toast.info('请选择预定茶叶')
return
}
console.log("🚀 ~ servicePeople:", servicePeople.value)
console.log("🚀 ~ servicePeople:", selectedTeaPrice.value)
console.log("🚀 ~ servicePeople:", teaUsageValue.value)
teaService.value = { id: 1, name: '茶艺服务' }
showTeaServicePopup.value = false
},
@ -648,6 +630,22 @@
uni.navigateTo({ url: '/pages/notice/reserve?type=teaSpecialist' })
}
}
const billTotal = computed(() => {
const s = Number(bill.value.service.total) || 0
const t = Number(bill.value.travel.total) || 0
const ts = Number(bill.value.teaService.total) || 0
let total = Number(toPlus(s, t, ts))
if (bill.value.coupon > 0 ) {
return total - bill.value.coupon
}
return total
})
watch(billTotal, (val) => {
bill.value.total = val
})
</script>
<style lang="scss">