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

初始化仓库

Browse Source
This commit is contained in:
wangxiaowei
2025-12-04 17:44:28 +08:00
commit 0ab8464612
302 changed files with 52014 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/pages/about/about.vue Normal file
View File

@ -0,0 +1,84 @@
<route lang="jsonc" type="page">
{
"layout": "tabbar",
"style": {
"navigationBarTitleText": "关于"
}
}
</route>
<script lang="ts" setup>
import RequestComp from './components/request.vue'
// 奇怪：同样的代码放在 vue 里面不会校验到错误，放在 .ts 文件里面会校验到错误
// const testOxlint = (name: string) => {
// console.log('oxlint')
// }
// testOxlint('oxlint')
console.log('about')
function gotoAlova() {
uni.navigateTo({
url: '/pages/about/alova',
})
}
function gotoVueQuery() {
uni.navigateTo({
url: '/pages/about/vue-query',
})
}
function gotoSubPage() {
uni.navigateTo({
url: '/bundle/demo/index',
})
}
// uniLayout里面的变量通过 expose 暴露出来后可以在 onReady 钩子获取到（onLoad 钩子不行）
const uniLayout = ref()
onLoad(() => {
console.log('onLoad:', uniLayout.value) // onLoad: undefined
})
onReady(() => {
console.log('onReady:', uniLayout.value) // onReady: Proxy(Object)
console.log('onReady:', uniLayout.value.testUniLayoutExposedData) // onReady: testUniLayoutExposedData
})
</script>
<template>
<view>
<view class="mt-8 text-center text-xl text-gray-400">
组件使用、请求调用、unocss
</view>
<RequestComp />
<view class="mb-6 h-1px bg-#eee" />
<view class="text-center">
<button type="primary" size="mini" class="w-160px" @click="gotoAlova">
前往 alova 示例页面
</button>
</view>
<view class="text-center">
<button type="primary" size="mini" class="w-160px" @click="gotoVueQuery">
vue-query 示例页面
</button>
</view>
<view class="text-center">
<button type="primary" size="mini" class="w-160px" @click="gotoSubPage">
前往分包页面
</button>
</view>
<view class="mt-6 text-center text-sm">
<view class="inline-block w-80% text-gray-400">
为了方便脚手架动态生成不同UI模板，本页的按钮统一使用UI库无关的原生button
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.test-css {
// 16rpx=>0.5rem
padding-bottom: 16rpx;
// mt-4=>1rem=>16px;
margin-top: 16px;
text-align: center;
}
</style>

56
src/pages/about/alova.vue Normal file
View File

@ -0,0 +1,56 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "Alova 请求演示"
}
}
</route>
<script lang="ts" setup>
import { useRequest } from 'alova/client'
import { foo } from '@/api/foo-alova'
const initialData = undefined
const { loading, data, send } = useRequest(foo, {
initialData,
immediate: true,
})
console.log(data)
function reset() {
data.value = initialData
}
</script>
<template>
<view class="p-6 text-center">
<button type="primary" size="mini" class="my-6 w-160px" @click="send">
发送请求
</button>
<view class="h-16">
<view v-if="loading">
loading...
</view>
<block v-else>
<view class="text-xl">
请求数据如下
</view>
<view class="text-green leading-8">
{{ JSON.stringify(data) }}
</view>
</block>
<view class="text-red">
{{ data?.id }}
</view>
</view>
<button type="default" size="mini" class="my-6 w-160px" @click="reset">
重置数据
</button>
</view>
</template>
<style lang="scss" scoped>
//
</style>

54
src/pages/about/components/request.vue Normal file
View File

@ -0,0 +1,54 @@
<script lang="ts" setup>
import type { IFooItem } from '@/api/foo'
import { getFooAPI } from '@/api/foo'
// const initialData = {
// name: 'initialData',
// id: '1234',
// }
const initialData = undefined
const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), {
immediate: true,
initialData,
})
function reset() {
data.value = initialData
}
</script>
<template>
<view class="p-6 text-center">
<view class="my-2">
pages 里面的 vue 文件会扫描成页面，将自动添加到 pages.json 里面。
</view>
<view class="my-2 text-green-400">
但是 pages/components 里面的 vue 不会。
</view>
<view class="my-4 text-center">
<button type="primary" size="mini" class="w-160px" @click="run">
发送请求
</button>
</view>
<view class="h-16">
<view v-if="loading">
loading...
</view>
<block v-else>
<view class="text-xl">
请求数据如下
</view>
<view class="text-green leading-8">
{{ JSON.stringify(data) }}
</view>
</block>
</view>
<view class="my-4 text-center">
<button type="warn" size="mini" class="w-160px" :disabled="!data" @click="reset">
重置数据
</button>
</view>
</view>
</template>

53
src/pages/about/vue-query.vue Normal file
View File

@ -0,0 +1,53 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationBarTitleText": "Vue Query 请求演示"
}
}
</route>
<script lang="ts" setup>
import { useQuery } from '@tanstack/vue-query'
import { foo } from '@/api/foo'
import { getFooQueryOptions } from '@/api/foo-vue-query'
// 简单使用
onShow(async () => {
const res = await foo()
console.log('res: ', res)
})
// vue-query 版
const {
data,
error,
isLoading: loading,
refetch: send,
} = useQuery(getFooQueryOptions('菲鸽-vue-query'))
</script>
<template>
<view class="p-6 text-center">
<button type="primary" size="mini" class="my-6 w-160px" @click="send">
发送请求
</button>
<view class="h-16">
<view v-if="loading">
loading...
</view>
<block v-else>
<view class="text-xl">
请求数据如下
</view>
<view class="text-green leading-8">
{{ JSON.stringify(data) }}
</view>
</block>
</view>
</view>
</template>
<style lang="scss" scoped>
//
</style>

276
src/pages/cashier/cashier.vue Normal file
View File

@ -0,0 +1,276 @@
<route lang="jsonc" type="page">
{
"needLogin": true,
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view>
<view>
<navbar title="收银台" custom-class='!bg-[#F6F7F8]' :leftArrow="false"></navbar>
</view>
<!-- 支付信息 -->
<view class="mt-56rpx text-center">
<view class="text-28rpx leading-40rpx text-#606266">{{ title }}</view>
<view class="mt-24rpx">
<!-- 是否是一键续订 -->
<template v-if="renew">
<price-format color="#303133" :first-size="44" :second-size="44" :subscript-size="28" :price="renewPrice"></price-format>
</template>
<!-- 正常订单金额 -->
<template v-if="!renew">
<price-format color="#303133" :first-size="44" :second-size="44" :subscript-size="28" :price="money"></price-format>
</template>
</view>
<view class="mt-12rpx flex items-center justify-center">
<view class="text-24rpx leading-34rpx text-#606266">
支付剩余时间
</view>
<wd-count-down :time="time" custom-class="!text-[#606266] !text-24rpx !leading-34rpx" />
</view>
</view>
<!-- 支付方式 -->
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-84rpx">
<view class="font-400 text-32rpx leading-44rpx text-#303133 border-b border-b-solid border-b-#F6F7F8 pb-16rpx mb-32rpx">支付方式</view>
<!-- pay 组件 -->
<pay @pay="Cashier.handleGetPayValue" :hidePlatformBalance="hidePlatformBalance" :hideStoreBalance="hideStoreBalance" :hideWechat="hideWechat" :storeMoney="storeMoney"></pay>
</view>
<view
class="fixed bottom-70rpx left-0 right-0 bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx"
@click="Cashier.handleToPay">立即支付
</view>
</view>
</template>
<script lang="ts" setup>
import Pay from '@/components/Pay.vue'
import { getTeaSpecialistDetails } from '@/api/tea'
import { ITeaSpecialistDetailsFields } from '@/api/types/tea'
import { toast } from '@/utils/toast'
import { router } from '@/utils/tools'
import { PayValue } from '@/utils/pay'
import { prePay, balancePay } from '@/api/pay'
import { useUserStore } from '@/store'
import type {IUserInfoVo } from '@/api/types/login'
import { getTeaRoomBalance, getTeaRoomOrderDetail, getTeaRoomPackageOrderDetail } from '@/api/tea-room'
import { OrderType } from '@/utils/order'
import { wxPay } from '@/hooks/usePay'
// 用户信息
const userInfo = ref<IUserInfoVo>(null)
// 支付倒计时取消
const time = ref<number>(30 * 60 * 60 * 1000)
// 支付金额
const money = ref<number>(0)
// 茶艺师详情
const id = ref<number>(0)
const info = reactive<ITeaSpecialistDetailsFields>({
id: 0,
name: '',
star: 0,
image: '',
reservation_num: 0,
distance: 0,
speed: 0,
real: { gender: 1, both: 18, height: 165, weight: 53, interests: '爱好茶艺，喜欢旅游，把爱好当工作' },
teamasterlabel: [],
teamasterLevel: [],
price: 0,
fare_price: 0,
collect: 0,
up_status: 0,
textarea: []
})
// 支付方式
const pay = ref<number>(0)
const hideWechat = ref<boolean>(false)
const hidePlatformBalance = ref<boolean>(false)
const hideStoreBalance = ref<boolean>(false)
// 订单
const orderId = ref<number>(0)
const order = ref<{}>(null)
const result = ref<string>('')
const from = ref<string>('')
// 支付标题
const title = ref<string>('')
// 门店ID
const storeId = ref<number>(0)
const storeMoney = ref<number>(0)
// 一键续订
const renew = ref<string>('')
const renewPrice = ref<number>(0)
// 是否是购买套餐
const isGroupBuying = ref<number>(0)
const groupCouponId = ref<number>(0)
onLoad(async (args) => {
// 一键续订
renew.value = args.renew || ''
isGroupBuying.value = Number(args.isGroupBuying)
groupCouponId.value = Number(args.groupCouponId) || 0
// 获取门店余额
if (args.storeId) {
storeId.value = Number(args.storeId)
const balance = await getTeaRoomBalance({ store_id: storeId.value })
storeMoney.value = Number(balance.data.money) || 0
}
// 设置支付来源标题
from.value = args.from || ''
if (from.value === OrderType.TeaRoomOrder) {
// 茶室订单：预定、套餐团购两种方式
if (args.name && isGroupBuying.value == 0) {
title.value = `茶室预定-${args.name}`
} else {
title.value = `茶室套餐购买-${args.name}`
hidePlatformBalance.value = true // 隐藏平台余额支付
hideStoreBalance.value = true // 隐藏门店余额支付
}
}
// 用户信息
const userStore = useUserStore()
userInfo.value = userStore.userInfo
// 获取订单详情
if (args.from == OrderType.TeaRoomOrder && args.orderId) {
// 获取订单详情
orderId.value = Number(args.orderId)
if (isGroupBuying.value == 0) {
Cashier.handleGetOrderDetails()
} else {
Cashier.handleGetRoomPackageDetails()
}
}
})
onUnload(() => {
switch(result.value) {
case 'success':
uni.$emit('payment', { result: true, orderId: orderId.value })
break;
case 'fail':
default: uni.$emit('payment', { result: false, orderId: orderId.value })
}
})
const Cashier = {
// 获取茶艺师详情
handleGetTeaSpecialistDetails: async (id: number, user_id: number) => {
const res = await getTeaSpecialistDetails({
id,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude'),
user_id
})
// 将返回的数据合并到 reactive 对象中
Object.assign(info, res.teamaster || {})
},
/**
* 获取预定茶室订单详情
*/
handleGetOrderDetails: async () => {
// 获取订单详情接口
const res = await getTeaRoomOrderDetail({
id: orderId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude')
})
order.value = res
money.value = Number(res.details.order_amount)
// 一键续订价格
renewPrice.value = Number(res.details?.renew_dtime?.renew_price) || 0
},
/**
* 获取茶室套餐订单详情
* @param value
*/
handleGetRoomPackageDetails: async () => {
// 获取订单详情接口
const res = await getTeaRoomPackageOrderDetail({
id: orderId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude')
})
order.value = res
money.value = Number(res.details.order_amount)
},
// 获取支付方式
handleGetPayValue: (value: number) => {
pay.value = value
},
/**
* 支付
*/
handleToPay: async () => {
if (pay.value == null || pay.value == undefined) {
toast.info('请选择支付方式')
return
}
if (from.value == OrderType.TeaRoomOrder) {
// 预支付-茶室订单
uni.showLoading({ title: '支付中...' })
try {
// 预支付
const res1 = await prePay({
from: isGroupBuying.value ? 'wx' : 'balance',
order_id: orderId.value,
pay_way: pay.value,
order_source: 1, //订单来源：1-小程序; 2-h5; 3app
order_type: 1 // 0为茶艺师 1为茶室包间
})
// 余额支付(平台余额、门店余额)
if (pay.value == PayValue.PlatformBalance || pay.value == PayValue.StoreBalance) {
await balancePay({
id: res1.pay_id
})
} else if (pay.value == PayValue.WeChatPay) {
// 微信支付
// await wxpay(res1.pay_params)
// wxPay()
}
uni.hideLoading()
result.value = 'success'
} catch (error) {
uni.hideLoading()
result.value = 'fail'
}
setTimeout(() => {
uni.navigateBack({delta: 1})
}, 500);
}
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
</style>

127
src/pages/city/city.vue Normal file
View File

@ -0,0 +1,127 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"needLogin": true,
"layout": "tabbar",
"style": {
// 'custom' 表示开启自定义导航栏，默认 'default'
"navigationStyle": "default",
"navigationBarTitleText": "选择城市"
}
}</route>
<template>
<view class="">
<view class="search-box mx-30rpx mt-30rpx">
<wd-search
placeholder="请输入城市名称"
placeholder-left></wd-search>
</view>
<view class="mt-52rpx mx-30rpx">
<view class="text-[#333] leading-42rpx text-30rpx font-bold">当前定位</view>
<view class="mt-40rpx">
<view class="bg-[#F8F9FA] rounded-28rpx w-162rpx h-56rpx text-[#606266] flex items-center justify-center">
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location2.png`"></wd-img>
<view class="text-26rpx text-[#606266] leading-36rpx">{{ city || LOCATION_DEFAULT_CITY }}</view>
</view>
</view>
</view>
<view class="mt-50rpx mx-30rpx">
<view class="text-[#333] leading-42rpx text-30rpx font-bold">已开通城市</view>
<view class="mt-40rpx grid grid-cols-4 gap-20rpx w-full">
<view class="bg-[#F8F9FA] rounded-28rpx h-56rpx text-[#606266] flex items-center justify-center"
v-for="(item, index) in openCityList" :key="index"
@click="City.handleChooseCity(item)"
>
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location2.png`"></wd-img>
<view class="text-26rpx text-[#606266] leading-36rpx">{{ item.name }}</view>
</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { router } from '@/utils/tools'
import { getOpenCityList } from '@/api/tea-room'
import { LOCATION_CITY_KEY, LOCATION_LAT_KEY, LOCATION_LNG_KEY } from '@/hooks/useLocation'
const OSS = inject('OSS')
// 经纬度
const latitude = ref<number>(0)
const longitude = ref<number>(0)
const city = ref<string>('')
// 已开通城市列表
const openCityList = ref<Array<any>>([])
onLoad((args) => {
if (args.lat && args.lng) {
latitude.value = Number(args.lat)
longitude.value = Number(args.lng)
}
City.handleInit()
})
const City = {
handleInit: async () => {
city.value = uni.getStorageSync(LOCATION_CITY_KEY)
const res = await getOpenCityList()
openCityList.value = res.list
},
/**
* 选择城市
*/
handleChooseCity: (item: any) => {
const params = {
latitude: item.latitude,
longitude: item.longitude,
city: item.name
}
uni.$emit('locationUpdate', params)
uni.setStorageSync(LOCATION_LAT_KEY, item.latitude)
uni.setStorageSync(LOCATION_LNG_KEY, item.longitude)
uni.setStorageSync(LOCATION_CITY_KEY, item.name)
router.navigateBack()
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.search-box {
display: flex;
height: 100%;
margin-right: 32px;
--wot-search-padding: 0;
--wot-search-side-padding: 0;
:deep() {
.wd-search {
background: transparent !important;
width: 100% !important;
}
.wd-search__block {
height: 72rpx;
background-color: #F8F9FA !important;
}
.wd-search__input {
// #ifndef MP
padding-right: 0 !important;
// #endif
}
}
}
</style>

352
src/pages/index/index.vue Normal file
View File

@ -0,0 +1,352 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">{
"layout": "tabbar",
"style": {
// 'custom' 表示开启自定义导航栏，默认 'default'
"navigationStyle": "custom",
"navigationBarTitleText": "首页"
}
}</route>
<template>
<view class="home-bg">
<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 #left>
<view class="flex items-center line-1 w-130rpx" @click="Index.handleToCity">
<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">{{ city || LOCATION_DEFAULT_CITY }}</view>
<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
</view>
</template>
<template #title>
<view class="search-box flex items-center ml-26rpx" @click="Index.handleToSearch">
<wd-search placeholder="搜索茶址名称" hide-cancel disabled :placeholder-left="true"
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
</wd-search>
</view>
</template>
</wd-navbar>
</view>
<view :style="{ paddingTop: navbarHeight + 'px' }">
<view class="mt-32rpx mx-30rpx">
<wd-swiper height="240rpx" indicatorPosition="bottom-left"
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit"></wd-swiper>
</view>
<view class="mt-40rpx flex items-center h-36rpx mx-30rpx">
<wd-img width="160rpx" height="36rpx" :src="`${OSS}images/home/home_image1.png`" mode="aspectFit" />
<text class="text-22rpx leading-32rpx text-[#818CA9] ml-36rpx">更多茶艺师点击预约</text>
</view>
<view class="mt-16rpx relative w-690rpx h-180rpx mx-30rpx" @click="Index.handleToWxOfficialAccount">
<wd-img width="690rpx" height="180rpx" :src="`${OSS}images/home/home_image2.png`" mode="scaleToFill" />
<view class="h-64rpx absolute bottom-0 right-0 bg-[#4C9F44] text-[#fff] flex items-center px-26rpx rounded">
<text class="mr-8rpx">一键约</text>
<wd-img width="22rpx" height="18.06rpx" :src="`${OSS}icon/icon_arrow_right.png`" mode="aspectFit" />
</view>
</view>
<view class="relative mt-40rpx h-44rpx mx-30rpx">
<view class="absolute ele-center" >
<wd-img width="252.04rpx" height="24.43rpx" :src="`${OSS}images/home/home_image3.png`" mode="aspectFit" />
</view>
<view class="text-32rpx text[#303133] font-500 absolute top-0 ele-center">预约茶室</view>
</view>
<view>
<mescroll-body @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="Index.upCallback" top="28rpx"
:fixed="true">
<view class="relative p-20rp mb-24rpx" v-for="(item, index) in list" :key="index" @click="Index.handleToReserveRoom(item.id, item.operation_type)">
<view class="absolute top--28rpx left-0 z-1" v-if="item.operation_type == 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="item.image" 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 line-1">
{{ item.name }}
</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#F29747] text-24rpx mr-18rpx">半年预约{{ item.half_year_nums > 10 ? item.half_year_nums + '+' : item.half_year_nums }}</view>
<view class="font-400 bg-[#F3F3F3] text-[#818CA9] text-22rpx px-8rpx rounded-4rpx">刚有人预约了</view>
</view>
<view class="flex items-center mt-12rpx leading-34rpx">
<view class="font-400 text-[#606266] text-24rpx mr-10rpx">
营业时间:{{ item.start_time }}-{{ item.end_time }}
</view>
<view class="font-400 bg-[#FFEEED] text-[#FF5951] text-22rpx px-4rpx rounded-4rpx border-[#F2E2E1]" v-if="item.shop_status == 0">
打烊了
</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">
{{ item.address }}
</view>
</view>
</view>
<view class="absolute bottom-0 right-0">
<view class="flex justify-end">
<view class="bg-[#4C9F44] w-72rpx h-40rpx rounded-18rpx flex items-center justify-center">
<wd-icon name="add" color="#fff" size="20rpx" custom-style="font-weight: bold;" />
</view>
</view>
<view class="text-24rpx text-[#92928C] font-400 mt-12rpx">距您{{ item.distance }}km</view>
</view>
</view>
</view>
</view>
</mescroll-body>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { router } from '@/utils/tools'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import { LOCATION_DENY_TIME_KEY, handleEnsureLocationAuthHooks, LOCATION_DEFAULT_CITY, handleGetLocationCity, LOCATION_CITY_KEY } from '@/hooks/useLocation'
import { getHomeBannerList } from '@/api/home'
import { getHomeTeaStoreList } from '@/api/tea-room'
import { useUserStore } from '@/store'
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
/** 轮播图 **/
const swiperList = ref<string[]>([])
const current = ref<number>(0)
// 分页
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const downOption = {
auto: true
}
const upOption = {
auto: true,
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
}
const latitude = ref<number>(0)
const longitude = ref<number>(0)
const city = ref<string>('')
const keywords = ref<string>('')
const list = ref<Array<any>>([])
let lastLocation = { lat: 0, lng: 0 }
onShow(async () => {
if (uni.getStorageSync(LOCATION_DENY_TIME_KEY)) {
const location = await checkLocationAuthWithModal()
if (location) {
// 只有经纬度变化时才刷新
if (location.lat !== lastLocation.lat || location.lng !== lastLocation.lng) {
const loc = await handleGetLocationCity(location.lat, location.lng)
city.value = loc.city
latitude.value = location.lat
longitude.value = location.lng
lastLocation.lat = location.lat
lastLocation.lng = location.lng
console.log("🚀 ~ city.value:", 'xxxxx', city.value)
Index.handleResetSearch()
}
}
}
})
onLoad(async() => {
// 初始化页面数据
Index.handleInit()
// 获取用户经纬度（带缓存和授权逻辑）
const { lat, lng } = await handleEnsureLocationAuthHooks()
latitude.value = lat
longitude.value = lng
const location = await handleGetLocationCity(lat, lng)
city.value = location.city
latitude.value = location.latitude
longitude.value = location.longitude
Index.handleResetSearch()
})
const Index = {
/**
* 茶室门店列表
* @param mescroll
*/
upCallback: (mescroll) => {
const userStore = useUserStore()
const userId = userStore.userInfo?.id || 0
const filter = {
page: mescroll.num,
size: mescroll.size,
latitude: latitude.value,
longitude: longitude.value,
search: keywords.value,
user_id: userId
}
uni.showLoading({ title: '加载中...' })
try {
getHomeTeaStoreList(filter).then( res => {
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() // 请求失败, 结束加载
})
uni.hideLoading()
} catch (error) {
uni.hideLoading()
}
},
/**
* 初始化首页数据
*/
handleInit: () => {
getHomeBannerList().then(res => {
swiperList.value = res.list.map(item => item.address)
})
},
/**
* 跳转城市选择
*/
handleToCity: () => {
uni.$on('locationUpdate', params => {
console.log("🚀 ~ params:", params)
uni.$off('locationUpdate')
city.value = params.city
latitude.value = params.latitude
longitude.value = params.longitude
Index.handleResetSearch()
})
router.navigateTo(`/pages/city/city?lat=${latitude.value}&lng=${longitude.value}`)
},
/**
* 跳转茶室搜索
*/
handleToSearch: () => {
uni.$on('refreshTeaRoomList', params => {
keywords.value = params.keywords
Index.handleResetSearch()
uni.$off('refreshTeaRoomList')
})
router.navigateTo(`/pages/search/search?keywords=${keywords.value}`)
},
/**
* 跳转到预约茶室页面
*/
handleToReserveRoom: (id: number = 0, type: number = 1) => {
router.navigateTo( `/bundle/tea-room/room?id=${id}&type=${type}`)
},
/**
* 重置搜索
*/
handleResetSearch: () => {
console.log("🚀 ~ location:", 456)
list.value = []
getMescroll().resetUpScroll()
},
/**
* 跳转公众号
*/
handleToWxOfficialAccount: () => {
wx.openOfficialAccountProfile({
username: '', // 此处填写公众号的原始 ID
success: res => {
},
fail: res => {
}
})
},
/**
* 更新定位信息
*/
handleLocationUpdate: (params: any) => {
console.log("🚀 ~ locationUpdate:")
if (
city.value !== params.city ||
latitude.value !== params.latitude ||
longitude.value !== params.longitude
) {
city.value = params.city
latitude.value = params.latitude
longitude.value = params.longitude
Index.handleResetSearch()
}
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
.home-bg {
background-color: $cz-page-background;
background-image: url(#{$OSS}images/home/home_bg.png);
background-size: 100%;
background-repeat: no-repeat;
}
.search-box {
display: flex;
height: 100%;
margin-right: 40px;
--wot-search-padding: 0;
--wot-search-side-padding: 0;
:deep() {
.wd-search {
background: transparent !important;
width: 100% !important;
}
.wd-search__block {
background-color: #fff !important;
}
.wd-search__input {
// #ifdef MP
padding-left: 32px !important;
padding-right: 32px !important;
// #endif
// #ifndef MP
padding-right: 0 !important;
// #endif
}
}
}
.rounded {
border-radius: 20rpx 0rpx 20rpx 0rpx;
}
.ele-center {
left: 50%;
transform: translateX(-50%);
}
</style>

112
src/pages/login/login.vue Normal file
View File

@ -0,0 +1,112 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#fff"
}
}</route>
<template>
<view>
<view class="mx-48rpx mt-50rpx">
<view class="text-[#303133] text-40rpx leading-56rpx">
<text class="font-400 mr-24rpx">欢迎使用</text>
<text class="font-700">茶址</text>
</view>
<view class="font-400 text-26rpx leading-36rpx text-[#606266] mt-20rpx">登录后可进行茶室预约，开启您的专属茶席</view>
</view>
<view class="mt-176rpx w-162rpx h-160rpx mx-auto">
<wd-img :src="`${OSS}images/logo.png`" width="100%" height="100%" mode="aspectFill"></wd-img>
</view>
<view class="mt-124rpx mx-60rpx box-border">
<wd-button custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border" @click="Login.handleLogin">立即登录</wd-button>
<wd-button custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border" @click="Login.handleMobileLogin">测试-账号登录</wd-button>
<!-- <wd-button open-type="getUserInfo" @getuserinfo="Login.handleWxLogin" custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border">立即登录</wd-button> -->
<!-- <view class="text-30rpx font-400 text-[#303133] leading-42rpx text-center mt-32rpx">其它手机号登录</view> -->
</view>
<view class="flex items-center mx-32rpx mt-64rpx">
<view class="w-32rpx h-32rpx">
<wd-checkbox v-model="agree" @change="Login.handleAgree" checked-color="#4C9F44" size="large"> </wd-checkbox>
</view>
<view class="font-400 text-26rpx leading-40rpx text-[#8F959E] ml-14rpx flex-1" @click="agree = !agree">
我已阅读并同意 <text class="text-[#4C9F44]" @click.stop="Login.handleToService">《服务协议》</text> 和<text class="text-[#4C9F44]" @click.stop="Login.handleToPrivacy">《隐私政策》</text>，未注册手机号登录后将自动你为您创建账号
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { toast } from '@/utils/toast'
import { getWxCode } from '@/api/login'
import { useUserStore } from '@/store'
import { router } from '@/utils/tools'
const OSS = inject('OSS')
// 服务协议条款
const agree = ref<boolean>(false)
const Login = {
// 获取手机号
handleLogin: async (e: object) => {
if (!agree.value) {
toast.info('请同意服务协议和隐私政策')
return
}
const userStore = useUserStore()
const res = await userStore.wxLogin()
if (res) {
toast.info('登录成功')
router.navigateBack(1, 500)
}
},
// 手机登录
handleMobileLogin: async () => {
const userStore = useUserStore()
console.log("🚀 ~ userStore:", userStore)
const res = await userStore.mobileLogin('18868040087', 1, 2)
if (res) {
uni.setStorageSync('latitude', '30.74744')
uni.setStorageSync('longitude', '120.78483')
toast.info('登录成功')
router.navigateBack(1, 500)
}
},
handleAgree: async (e: any) => {
},
// 跳转到服务协议页面
handleToService: () => {
},
// 跳转到隐私政策页面
handleToPrivacy: () => {
},
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.service {
:deep() {
.wd-checkbox {
display: flex;
align-content: flex-start;
}
.wd-checkbox__label {
margin-left: 6rpx;
}
}
}
</style>

239
src/pages/login/mobile.vue Normal file
View File

@ -0,0 +1,239 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#fff"
}
}</route>
<template>
<view>
<view class="mx-60rpx mt-20rpx">
<view class="text-[#303133] text-48rpx leading-80rpx font-600">
{{ page.title }}
</view>
<view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx"> {{ page.desc }}</view>
</view>
<view class="mt-106rpx mx-48rpx">
<wd-form ref="form" :model="model">
<view>
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">手机号</view>
<view class="mt-20rpx">
<wd-input
v-model="model.mobile"
type="text"
placeholder="请输入手机号码"
inputmode="numeric"
no-border
custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx"
custom-input-class="!px-32rpx !h-104rpx"
@input="mobile.handleInputMobile"
/>
</view>
</view>
<view class="mt-40rpx">
<view class="font-400 text-30rpx text-[#606266] leading-44rpx">验证码</view>
<view class="mt-20rpx">
<wd-input type="text" placeholder="请输入验证码" v-model="model.code" inputmode="numeric" no-border custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx" custom-input-class="!px-32rpx !h-104rpx">
<template #suffix>
<view class="flex items-center mr-34rpx">
<view class="flex items-center">
<wd-divider color="#C9C9C9" vertical />
</view>
<view class="flex items-center">
<view class="text-[#4C9F44] text-32rpx font-400 leading-44rpx" v-if="!startCountDown" @click="mobile.handleCountDown">发送验证码</view>
<view class="!text-[#C9C9C9] text-32rpx font-400 leading-44rpx flex items-center" v-if="startCountDown">
<wd-count-down ref="countDown" :time="countDownTime" millisecond :auto-start="false" format="ss" custom-class="!text-[#C9C9C9] !text-32rpx" @finish="mobile.handleFinishCountDown"></wd-count-down>
<view> S后重发</view>
</view>
</view>
</view>
</template>
</wd-input>
</view>
</view>
</wd-form>
</view>
<view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" :class="disabled ? 'opacity-40' : ''" @click="mobile.handleToLogin">登录</view>
<view class="flex items-center mx-52rpx mt-56rpx" v-if="pageType === 'login'">
<view class="w-32rpx h-32rpx">
<wd-checkbox v-model="agree" @change="mobile.handleAgree" checked-color="#4C9F44" size="large"> </wd-checkbox>
</view>
<view class="font-400 text-26rpx leading-40rpx text-[#8F959E] ml-14rpx flex-1" @click="agree = !agree">
我已阅读并同意 <text class="text-[#4C9F44]" @click.stop="mobile.handleToService">《服务协议》</text> 和<text class="text-[#4C9F44]" @click.stop="mobile.handleToPrivacy">《隐私政策》</text>
</view>
</view>
<!-- 手机号修改成功 -->
<wd-popup v-model="showEditSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pt-64rpx pb-74rpx">
<view class="flex justify-center items-center">
<view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
<wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
</view>
</view>
<view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">手机号修改成功</view>
<view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">{{ page.desc }}</view>
<view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="mobile.handleToBack">好的</view>
</view>
</wd-popup>
</view>
</template>
<script lang="ts" setup>
import {mobile as testMobile} from '@/utils/test'
import { useToast } from 'wot-design-uni'
const OSS = inject('OSS')
const toast = useToast()
const disabled = ref<boolean>(true)
/** 页面 **/
let pageType = 'login' // 页面类型 login:登录 edit:修改手机号
const page = ref<{title: string, desc: string}>({title: '其他手机号登录', desc: '请输入你要登录的手机号'})
const showEditSuccessPopup = ref<boolean>(false) // 显示手机号修改成功弹窗
const userId = ref<number>(0) // 用户ID，修改手机号时需要传
/** 验证码倒计时 **/
const countDownTime = ref<number>(1 * 60 * 1000) // 60s倒计时
const startCountDown = ref<boolean>(false) // 是否开始倒计时
const countDown = ref<any>(null) // 倒计时组件
/** 表单相关 **/
const model = reactive<{
mobile: string
code: string
}>({
mobile: '',
code: ''
})
/** 结束 **/
/** 服务协议和隐私政策 **/
const agree = ref<boolean>(false)
/** 结束 **/
onLoad((args) => {
// 从个人登录页面进入
if (args.type === 'edit') {
userId.value = Number(args.userId) || 0 // userId仅做测试使用，实际请传真实用户ID
page.value.title = '修改手机号'
page.value.desc = '手机号一年内可修改2次'
pageType = 'edit'
}
})
const mobile = {
// 验证手机号
handleInputMobile: (e: {value: string}) => {
model.mobile = e.value
disabled.value = !testMobile(model.mobile)
},
// 发送验证码
handleCountDown: () => {
if (disabled.value) {
toast.show({
iconClass: 'info-circle',
msg: '手机号码错误请重新输入',
direction: 'vertical'
})
return
}
startCountDown.value = true
nextTick(() => {
countDown.value?.start()
// 发送验证码请求
})
},
// 验证码倒计时结束
handleFinishCountDown: () => {
startCountDown.value = false
},
// 登录
handleToLogin: () => {
// TODO 如果是edit的话就是修改手机号
if (pageType === 'login' && !agree.value) {
toast.show({
iconClass: 'info-circle',
msg: '请同意服务协议和隐私政策',
direction: 'vertical'
})
return
}
if (!testMobile(model.mobile)) {
toast.show({
iconClass: 'info-circle',
msg: '手机号码错误请重新输入',
direction: 'vertical'
})
return
}
if (!model.code) {
toast.show({
iconClass: 'info-circle',
msg: '验证码错误',
direction: 'vertical'
})
return
}
},
// 获取手机号
handleGetPhoneNumber: (e: object) => {
console.log("🚀 ~ e:", e)
},
handleAgree: (e: any) => {
console.log('e', e)
},
// 跳转到服务协议页面
handleToService: () => {
disabled.value = !disabled.value
console.log("🚀 ~ disabled:", disabled)
},
// 跳转到隐私政策页面
handleToPrivacy: () => {
},
// 修改手机成功后返回
handleToBack: () => {
uni.navigateBack()
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.service {
:deep() {
.wd-checkbox {
display: flex;
align-content: flex-start;
}
.wd-checkbox__label {
margin-left: 6rpx;
}
}
}
</style>

438
src/pages/my/my.vue Normal file
View File

@ -0,0 +1,438 @@
<route lang="jsonc" type="page">
{
"layout": "tabbar",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view>
<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">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_service.png`"></wd-img>
</view>
</template>
</wd-navbar>
</view>
<view class="pb-74rpx" :style="{ paddingTop: navbarHeight + 'px' }">
<!-- 账号昵称显示 -->
<view class="ml-60rpx flex items-center">
<view>
<wd-img width="120rpx" height="120rpx" :src="isLogin ? user.avatar : `${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">{{ isLogin ? user.nickname : '立即登录' }}</view>
<view v-if="isLogin" class="flex justify-center items-center vip-bg mt-10rpx">
<!-- 会员显示图标 -->
<view v-if="isVip" 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 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="flex items-center mr-8rpx">
<wd-img width="32rpx" height="32rpx" mode="aspectFill" :src="`${OSS}icon/icon_ercode.png`"></wd-img>
</view>
<view class="font-bold text-[#fff] text-24rpx leading-34rpx mt--6rpx">推广码</view>
</view>
</view>
</view>
</view>
<!-- 余额显示 -->
<view class="mt-16rpx mx-30rpx flex justify-between">
<view class="flex items-center">
<view class="w-160rpx text-[#303133] text-center" @click="router.navigateTo('/bundle/coupon/my-coupon')">
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? user.coupon_count : '- -' }}</view>
<view class="text-24rpx leading-34rpx">优惠券</view>
</view>
<view class="w-160rpx text-[#303133] text-center" @click="router.navigateTo('/bundle/collect/collect')">
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? user.collect_count : '- -' }}</view>
<view class="text-24rpx leading-34rpx">收藏</view>
</view>
</view>
<view class="relative" @click="router.navigateTo('/bundle/wallet/wallet')">
<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 text-center">
<view class="text-30rpx leading-36rpx font-bold">{{ isLogin ? user.user_money : '- -' }}</view>
<view class="text-20rpx leading-28rpx ml-10rpx">平台余额</view>
</view>
</view>
</view>
<!-- 消费金额显示 -->
<view class="mx-30rpx">
<!-- 会员下的状态 -->
<view v-if="isVip" class="vip-level mt-32rpx pb-28rpx">
<view class="pt-32rpx mx-40rpx">
<view class="flex items-center justify-between">
<view class="flex items-center">
<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="router.navigateTo('/bundle/vip/benefits')">
<view class="font-400 text-24rpx ml-12rpx mr-20rpx text-[#EECC99]">{{ isLogin ? '会员到期时间' : '- -' }}</view>
<view class="flex items-center mt-4rpx">
<wd-icon name="arrow-right" size="24rpx" color="#EECC99"></wd-icon>
</view>
</view>
</view>
<view class="font-400 text-24rpx text-[#EECC99] leading-34rpx">会员预定茶室享受8折</view>
</view>
</view>
<view class="mx-40rpx">
<wd-progress :percentage="60" hide-text color="#EECC99" custom-class="!my-10rpx"></wd-progress>
</view>
<view class="flex items-center justify-between mx-40rpx">
<view class="flex item-center leading-34rpx text-[#EECC99]">
<view class="font-400 text-24rpx mr-18rpx">上月消费</view>
<view class="font-400 text-28rpx mr-18rpx">￥{{ isLogin ? '上月消费金额显示' : '- -' }}</view>
</view>
<view class="font-400 text-24rpx text-[#D2D0D0] leading-34rpx">请尽快领取会员权益</view>
</view>
<view class="mt-50rpx ml-24rpx">
<scroll-view class="w-[100%] whitespace-nowrap" :scroll-x="true" scroll-left="120">
<view class="scroll-item mr-20rpx" v-for="(item, index) in couponList" :key="index">
<view class="font-bold text-22rpx text-[#AF6400] leading-32rpx mt-6rpx">茶室券</view>
<view class="font-bold text-[#1C1C1D] leading-34rpx mt-8rpx">
<text class="text-24rpx">￥</text>
<text class="text-30rpx">{{ item.coupon_price }}</text>
</view>
<view class="font-400 text-20rpx leading-28rpx text-[#1C1C1D]">{{ item.name }}</view>
<view class="font-400 text-20rpx w-126rpx h-40rpx rounded-20rpx mt-18rpx leading-40rpx mx-auto"
:class="item.use == 1 ? 'bg-[#E6E3DF]' : 'bg-[#FCCA84]'" @click="My.handleClaimCoupon(item.id)">
{{ item.use == 1 ? '已领取' : '立即领取' }}
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 非会员下的状态 -->
<view v-if="!isVip" class="mt-16rpx flex justify-center">
<view class="w-690rpx h-228rpx relative">
<wd-img width="100%" height="100%" :src="`${OSS}images/my/my_image4.png`" mode="aspectFill"></wd-img>
<view class="absolute top-76rpx left-30rpx text-30rpx leading-42rpx">
<view class="text-[#EDCE91]">会员可以享受预定折扣</view>
<view class="vip-btn text-[#251C1C] font-bold text-center mt-20rpx">立即成为会员</view>
</view>
</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="router.navigateTo('/bundle/order/douyin/order-list')">
<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="router.navigateTo('/bundle/order/platform/order-list')">
<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">
<navigator :url="`/bundle/order/tea-room/order-list?orderStatus=${item.status}`" hover-class="none">
<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>
</navigator>
</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">
<navigator :url="`/bundle/order/tea-specialist/order-list?orderStatus=${item.status}`" hover-class="none">
<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>
</navigator>
</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">
<navigator :url="item.url" hover-class="none">
<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>
</navigator>
</view>
</view>
</view>
</view>
<!-- 推广码 -->
<wd-overlay :show="showPompoCodePopup" @click="showPompoCodePopup = false">
<view class="h-full relative">
<view class="absolute-center h-926rpx">
<wd-img width="600rpx" height="800rpx" :src="`${OSS}images/my/my_image7.png`"></wd-img>
<view class="absolute bottom-158rpx flex items-center w-full ml-110rpx">
<view class="mr-70rpx w-160rpx h-160rpx">
<wd-img width="160rpx" height="160rpx" :src="`${OSS}images/reserve_room/reserve_room_image3.png`" mode="scaleToFill"></wd-img>
</view>
<view class="">
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">我的推广码</view>
<view class="text-40rpx leading-56rpx text-[#4C9F44] mt-20rpx">3486</view>
</view>
</view>
<view class="absolute bottom-0 left-1/2 -translate-x-1/2" @click="showPompoCodePopup = false">
<wd-img width="72rpx" height="72rpx" :src="`${OSS}icon/icon_close2.png`"></wd-img>
</view>
</view>
</view>
</wd-overlay>
<!-- 客服电话 -->
<wd-action-sheet v-model="showServiceMobile" :actions="sheetMenu" cancel-text="取消" @close="showServiceMobile = false" @select="My.handleSelectMenu" />
</view>
</template>
<script lang="ts" setup>
import { OrderStatus } from '@/utils/order'
import { toast } from '@/utils/toast'
import { router } from '@/utils/tools'
import { useUserStore } from '@/store'
import { getUserInfo, getMyCoupon, claimMyCoupon } from '@/api/user'
import type { IUserResult } from '@/api/types/user'
const OSS = inject('OSS')
const navbarHeight = inject('navbarHeight')
const rightPadding = inject('capsuleOffset')
// 登录信息相关
const userInfo = ref<any>(null)
const user = ref<IUserResult>({
id: 0,
sn: 0,
sex: "未知",
account: "",
nickname: "",
real_name: "",
avatar: "",
collect_count: 0,
coupon_count: 0,
create_time: "",
has_auth: false,
has_password: false,
member: 0,
mobile: "",
user_money: "0.00",
version: ""
})
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: '', status: 'all' },
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_room_wait_pay_order.png`, badge: '', status: OrderStatus.Pending },
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_room_reserve_order.png`, badge: '', status: OrderStatus.Reserved },
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_room_finish_order.png`, badge: '', status: OrderStatus.Finished },
])
// 茶艺师订单
const teaReserveMenuList = reactive([
{ id: 1, title: '全部订单', icon: `${OSS}icon/icon_tea_all_order.png`, badge: '', status: 'all' },
{ id: 2, title: '待付款', icon: `${OSS}icon/icon_tea_wait_pay_order.png`, badge: '', status: OrderStatus.Pending },
{ id: 3, title: '预约单', icon: `${OSS}icon/icon_tea_reserve_order.png`, badge: '', status: OrderStatus.Reserved },
{ id: 4, title: '待确认', icon: `${OSS}icon/icon_tea_wait_confirm_order.png`, badge: '', status: OrderStatus.Confirm },
{ id: 4, title: '已完结', icon: `${OSS}icon/icon_tea_finish_order.png`, badge: '', status: OrderStatus.Finished },
])
// 更多服务
const serviceMenuList = reactive([
{ id: 1, title: '申请茶馆', icon: `${OSS}icon/icon_service_teahouse.png`, badge: '', url: '/bundle/settle-in/tea-room' },
{ id: 2, title: '申请茶艺师', icon: `${OSS}icon/icon_service_tea.png`, badge: '', url: '/bundle/settle-in/tea-specialist' },
{ id: 3, title: '合创合伙人', icon: `${OSS}icon/icon_service_partner.png`, badge: '赚佣金', url: '/bundle/settle-in/parten' },
])
// 推广码弹窗
const showPompoCodePopup = ref<boolean>(false)
// 客服电话
const showServiceMobile = ref<boolean>(false)
const sheetMenu = ref<{ name: string}[]>([])
// 领取优惠券
const couponList = ref<any[]>([])
onShow(() => {
const userStore = useUserStore()
isLogin.value = userStore.isLoggedIn
console.log("🚀 ~ isLogin.value:", 1)
if (isLogin.value) {
console.log("🚀 ~ isLogin.value:", 3)
// 获取用户详情信息接口
getUserInfo().then(res => {
user.value = res
})
} else {
console.log("🚀 ~ isLogin.value:", 4)
Object.keys(user.value).forEach(key => {
user.value[key] = ''
})
}
})
onLoad(() => {
uni.$on('clearUser', () => {
console.log("🚀 ~ isLogin.value:", 2)
const userStore = useUserStore()
isLogin.value = userStore.isLoggedIn
Object.keys(user.value).forEach(key => {
user.value[key] = ''
})
})
My.handleInit()
})
onUnload(() => {
uni.$off('clearUser')
})
const My = {
/**
* 初始化
*/
handleInit: () => {
getMyCoupon().then(res => {
couponList.value = Array.isArray(res) ? res : []
})
},
/**
* 领取优惠券
*/
handleClaimCoupon: async (id: number) => {
await claimMyCoupon({id})
toast.info('领取成功')
My.handleInit()
},
// 跳转到个人信息
handleToProfile: () => {
if (isLogin.value) {
router.navigateTo('/bundle/profile/profile')
} else {
router.navigateTo('/pages/login/login')
}
},
// 点击显示客服电话
handleShowService: () => {
showServiceMobile.value = true
sheetMenu.value = [
{ name: '400-800-8888' },
]
},
// 选择菜单-拨打客服电话
handleSelectMenu: (item: any) => {
uni.makePhoneCall({
phoneNumber: item.item.name
})
},
// 显示推广码
handleShowPromoCode: () => {
if (isLogin.value) {
showPompoCodePopup.value = true
} else {
toast.info('请先登录')
router.navigateTo('/pages/login/login', 800)
}
}
}
</script>
<style lang="scss">
page, home-bg{
background: $cz-page-background url(#{$OSS}images/my/my_image1.png) 0 0 no-repeat;
background-size: 100%;
}
.right-slot {
padding-right: v-bind(rightPadding);
}
.vip-bg {
width: 170rpx;
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;
}
.vip-level {
background: url(#{$OSS}images/my/my_image5.png) 0 0 no-repeat;
background-size: 100%;
}
.scroll-item {
display: inline-block;
width: 180rpx;
height: 180rpx;
text-align: center;
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>

26
src/pages/notice/bill.vue Normal file
View File

@ -0,0 +1,26 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#fff"
}
}</route>
<template>
<view class="mt-26rpx mx-30rpx">
<bill-notice :type="type" :money="10.00" :time="'2025-04-25 04:43'" :order="'42000028122025082279'"></bill-notice>
</view>
</template>
<script lang="ts" setup>
import BillNotice from '@/components/notice/Bill.vue'
const type = ref<string>('') // 购买类型 recharge: 充值; refund: 退款; cashback: 返现
onLoad((args) => {
type.value = args.type || ''
})
</script>
<style lang="scss" scoped>
</style>

87
src/pages/notice/pay.vue Normal file
View File

@ -0,0 +1,87 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#fff"
}
}</route>
<template>
<view class="mt-94rpx">
<view class="flex justify-center items-center" v-if="type === 'room'">
<pay-notice title="购买成功" desc="可以点击下方查看订单详情">
<template #layout>
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx mr-28rpx w-300rpx' @click="pay.handleRoomSeeOrder">查看订单</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-300rpx' @click="pay.handleRoomDone">完成</view>
</view>
</template>
</pay-notice>
</view>
<!-- 充值vip -->
<view v-if="type === 'vip'">
<pay-notice title="购买成功" desc="感谢您的信任，马上开启会员之旅！">
<template #layout>
<view class="font-500 mt-78rpx mx-60rpx flex justify-center items-center text-[30rpx] bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx" @click="pay.handleVipDone">
完成
</view>
</template>
</pay-notice>
</view>
<!-- recharge -->
<view v-if="type === 'recharge'">
<pay-notice title="充值成功" desc="感谢您的信任，我们一定会做的更好！">
<template #layout>
<view class="font-500 mt-78rpx mx-60rpx flex justify-center items-center text-[30rpx] bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx" @click="pay.handleRechargeDone">
完成
</view>
</template>
</pay-notice>
</view>
</view>
</template>
<script lang="ts" setup>
import PayNotice from '@/components/notice/Pay.vue'
const type = ref<string>('') // 购买类型 room: 预约茶室
onLoad((args) => {
type.value = args.type || ''
})
const pay = {
// 预约茶室 - 查看订单
handleRoomSeeOrder: () => {
uni.navigateTo({
url: '/bundle/tea-room/order'
})
},
// 预约茶室 - 完成
handleRoomDone: () => {
uni.switchTab({
url: '/pages/index/index'
})
},
// 购买会员 - 完成
handleVipDone: () => {
uni.switchTab({
url: '/pages/index/index'
})
},
// 我的钱包-充值
handleRechargeDone: () => {
uni.switchTab({
url: '/pages/index/index'
})
}
}
</script>
<style lang="scss" scoped>
</style>

62
src/pages/notice/reserve.vue Normal file
View File

@ -0,0 +1,62 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="mt-84rpx flex justify-center items-center">
<view v-if="type == OrderType.TeaRoomOrder">
<reserve-notice :title="isGroupBuying ? '套餐购买成功' : '茶室预约成功'" desc="可以点击下方查看订单详情">
<template #layout>
<view class="pb-22rpx mt-40rpx mx-30rpx flex justify-between items-center text-[32rpx] text-center">
<view class='bg-[#F6F7F8] text-[#303133] rounded-8rpx h-90rpx leading-90rpx mr-28rpx w-300rpx' @click="reserve.handleRoomSeeOrder">查看订单</view>
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-300rpx' @click="reserve.handleRoomDone">完成</view>
</view>
</template>
</reserve-notice>
</view>
</view>
</template>
<script lang="ts" setup>
import ReserveNotice from '@/components/notice/Reserve.vue'
import { ReserveServiceCategory, OrderType } from '@/utils/order'
import { router } from '@/utils/tools'
// 购买类型 room: 预约茶室
const type = ref<string>('')
// 是否是团购套餐
const isGroupBuying = ref<number>(0)
onLoad((args) => {
type.value = args.type || ''
isGroupBuying.value = Number(args.isGroupBuying) || 0
})
const reserve = {
/**
* 预约茶室 - 查看订单
*/
handleRoomSeeOrder: () => {
if (isGroupBuying.value) {
router.navigateTo('/bundle/order/platform/order-list')
} else {
router.navigateTo('/bundle/order/tea-room/order-list')
}
},
/**
* 预约茶室 - 完成
*/
handleRoomDone: () => {
router.switchTab('/pages/index/index')
}
}
</script>
<style lang="scss" scoped>
</style>

238
src/pages/reserve/reserve.vue Normal file
View File

@ -0,0 +1,238 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"layout": "tabbar",
"style": {
// 'custom' 表示开启自定义导航栏，默认 'default'
"navigationStyle": "custom",
"navigationBarTitleText": "首页"
}
}</route>
<template>
<view>
<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 #left>
<view class="search-box flex items-center ml-26rpx">
<wd-search v-model="keywords" placeholder="请输入内容" hide-cancel disabled placeholder-left
@search="Reserve.handleSearch()"
placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
</wd-search>
</view>
</template>
</wd-navbar>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" @change="Reserve.handleChangeTab" :lazy="false">
<wd-tab title="茶室预约"></wd-tab>
<wd-tab title="茶艺师预约"></wd-tab>
</wd-tabs>
</view>
</view>
<view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Reserve.upCallback" :down="downOption" :up="upOption">
<template v-if="tab === 0">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.TeaRoom" :order="item"></combo-card>
</view>
</template>
<template v-if="tab === 1">
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
<combo-card :type="OrderSource.TeaSpecialist" :order="item"></combo-card>
</view>
</template>
</mescroll-body>
</view>
<!-- <view class="mx-30rpx" :style="{ paddingTop: navbarHeight + 'px' }"> -->
<!-- 茶室预约 -->
<!-- <view v-if="tab === 0">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Reserve.upCallback" :up="upOption">
<view v-for="(item, index) in 5" :key="index" >
<view class="mb-20rpx" @click="Reserve.handleToReserveRoomOrder">
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Consuming"></combo-card>
</view>
</view>
</mescroll-body>
</view> -->
<!-- 茶艺师预约 -->
<!-- <view v-if="tab === 1">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Reserve.upCallback" :up="upOption">
<view v-for="(item, index) in 5" :key="index" >
<view class="mb-20rpx" @click="Reserve.handleToTeaSpecialistOrder">
<combo-card :type="OrderSource.TeaSpecialist" :order-status="OrderStatus.Consuming"></combo-card>
</view>
</view>
</mescroll-body>
</view> -->
<!-- </view> -->
</view>
</template>
<script lang="ts" setup>
import ComboCard from '@/components/order/ComboCard.vue'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
import { OrderSource, OrderStatus } from '@/utils/order'
import { router } from '@/utils/tools'
import { getTeaRoomOrderList } from '@/api/tea-room'
import { getTeaSpecialistOrderList } from '@/api/teaSpecialist-order'
const OSS = inject('OSS')
const navbarHeight = Number(inject('navbarHeight')) + 42 + 14 // 42为tabs的高度 14是边距值
// tab切换
const tab = ref<number>(0)
const reserveType = ref<number>(0) // 0:茶室预约 1:茶艺师预约
// mescroll
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const downOption = {
auto: true
}
const upOption = {
empty: {
icon : OSS + 'icon/icon_reserver_empty.png',
tip: '暂无预约信息',
},
auto: true,
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
}
const orderStatus = ref<string>('')
const list = ref<Array<any>>([]) // 茶室列表
const keywords = ref<string>('') // 搜索关键词
onLoad(() => {
})
const Reserve = {
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
const filter = {
page: mescroll.num,
size: mescroll.size,
order_status: orderStatus.value,
search: keywords.value
}
if (tab.value === 0) {
getTeaRoomOrderList(filter).then((res) => {
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() // 请求失败, 结束加载
})
} else if (tab.value === 1) {
// 茶艺师预约接口调用
getTeaSpecialistOrderList(filter).then((res) => {
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() // 请求失败, 结束加载
})
}
},
/**
* tab切换获取index
* @param item
*/
handleChangeTab: (item: { index: number }) => {
tab.value = item.index
// 切换tab时,重置当前的mescroll
list.value = []
getMescroll().resetUpScroll();
},
/**
* 搜索
*/
handleSearch: () => {
list.value = []
getMescroll().resetUpScroll();
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
.home-bg {
background-color: $cz-page-background;
background-image: url(#{$OSS}images/home/home_bg.png);
// background-size: 100% 300rpx;
background-size: cover;
background-repeat: no-repeat;
padding-bottom: 20rpx;
// background-position: top center;
}
.search-box {
display: flex;
height: 100%;
margin-right: 40px;
--wot-search-padding: 0;
--wot-search-side-padding: 0;
:deep() {
.wd-search {
background: transparent !important;
width: 100% !important;
}
.wd-search__block {
background-color: #fff !important;
}
.wd-search__input {
// #ifdef MP
padding-left: 32px !important;
padding-right: 32px !important;
// #endif
// #ifndef MP
padding-right: 0 !important;
// #endif
}
}
}
.tabs {
:deep() {
.wd-tabs,
.wd-tabs__nav {
background: transparent !important;
}
.wd-tabs__nav-item {
font-size: 32rpx !important;
color: #303133 !important;
line-height: 42rpx !important;
padding: 0 30rpx !important;
}
.wd-tabs__nav-item.is-active {
font-weight: 500 !important;
}
.wd-tabs__line {
bottom: 0 !important;
width: 60rpx !important;
height: 16rpx !important;
background-color: transparent !important;
background-image: url(#{$OSS}images/reserve_room/reserve_room_image1.png) !important;
background-size: cover !important;
}
}
}
</style>

171
src/pages/search/search.vue Normal file
View File

@ -0,0 +1,171 @@
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
"needLogin": true,
"layout": "tabbar",
"style": {
// 'custom' 表示开启自定义导航栏，默认 'default'
"navigationStyle": "custom"
}
}</route>
<template>
<view class="">
<view class="home-bg">
<view class="home-bg w-[100vw] fixed top-0 left-0 z-100">
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder>
<template #left>
<view class="h-48rpx flex items-center">
<view class="mt-4rpx" @click="router.navigateBack()">
<wd-icon name="thin-arrow-left" size="30rpx"></wd-icon>
</view>
<view class="search-box ml-20rpx">
<wd-search
v-model="keywords"
hide-cancel
placeholder-left
light
placeholder="搜索茶址名称"
placeholderStyle="text-align:left;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;"
@search="Search.handleSearch">
</wd-search>
</view>
</view>
</template>
</wd-navbar>
</view>
</view>
<view class="mx-30rpx mt-30rpx" :style="{ paddingTop: navbarHeight + 'px' }">
<view class="flex justify-between items-center" @click="Search.handleClearHistory">
<view class="text-30rpx leading-42rpx text-[#303133] font-bold">历史搜索</view>
<wd-icon name="delete-thin" size="22px" color="9D9D9D"></wd-icon>
</view>
<view class="mt-40rpx flex flex-wrap items-center">
<view class="bg-[#F8F9FA] rounded-28rpx w-112rpx h-56rpx text-center text-[#606266] text-26rpx leading-56rpx mr-20rpx mb-24rpx" v-for="(item, index) in searchHistory" :key="index">
{{ item.content }}
</view>
</view>
</view>
<!-- 删除历史 -->
<wd-message-box selector="wd-message-box-slot"></wd-message-box>
</view>
</template>
<script lang="ts" setup>
import { getNavBarHeight } from '@/utils/index'
import { getTeaRoomSearchHistory, clearTeaRoomSearchHistory } from '@/api/tea-room'
import { router } from '@/utils/tools'
import { useMessage } from 'wot-design-uni'
const navbarHeight = ref(0)
// 提示框
const message = useMessage('wd-message-box-slot')
// 搜索关键词
const keywords = ref<string>('')
// 搜索历史
const searchHistory = ref<Array<any>>([])
onShow(() => {
Search.handleInit()
})
onLoad((args) => {
navbarHeight.value = getNavBarHeight()
keywords.value = args.keywords || ''
})
const Search = {
// 初始化
handleInit: () => {
console.log("🚀 ~ Search.handleInit:")
getTeaRoomSearchHistory().then( res => {
searchHistory.value = res.list
console.log('搜索历史123', res.list)
})
},
// 搜索
handleSearch: () => {
const params = {
keywords: keywords.value
}
uni.$emit('refreshTeaRoomList', params)
router.navigateBack()
},
// 清除搜索历史
handleClearHistory: () => {
message.confirm({
title: '删除',
msg: '是否清空搜索历史',
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonProps: {
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
},
confirmButtonProps: {
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
}).then((res) => {
// 点击确认按钮回调事件
if (res.action === 'confirm') {
try {
uni.showLoading({
title: '删除中...',
mask: true
})
clearTeaRoomSearchHistory().then(() => {
searchHistory.value = []
uni.hideLoading()
})
} catch (e) {
uni.hideLoading()
}
}
}).catch(() => {
// 点击取消按钮回调事件
})
},
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.home-bg {
background-color: #F8F9FA;
}
.search-box {
display: flex;
height: 100%;
margin-right: 40px;
--wot-search-padding: 0;
--wot-search-side-padding: 0;
:deep() {
.wd-search {
background: transparent !important;
width: 100% !important;
}
.wd-search__block {
background-color: #fff !important;
}
.wd-search__input {
// #ifndef MP
padding-right: 0 !important;
// #endif
}
}
}
</style>

330
src/pages/share/tea-room/share-order-detail.vue Normal file
View File

@ -0,0 +1,330 @@
<route lang="jsonc" type="page">
{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}
</route>
<template>
<view class="pb-100rpx">
<view>
<wd-navbar safeAreaInsetTop :bordered="false" :fixed="true" :placeholder="true" :zIndex="10">
<template #left>
<view class="h-48rpx flex items-center" @click="ShareOrderDetail.handleToHome">
<view class="mt-4rpx">
<wd-icon name="home" size="22px" color="#121212"></wd-icon>
</view>
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">分享订单</view>
</view>
</template>
</wd-navbar>
</view>
<!-- 描述信息 -->
<view class="text-[#909399] text-26rpx leading-36rpx mb-40rpx mt-20rpx">
<view class="ml-80rpx" v-if="orderStatus === TeaRoomOrderStatus.Pay || orderStatus === TeaRoomOrderStatus.Consumption">使用过程中有任何问题，请联系客服</view>
<view class="flex items-center justify-center" v-if="orderStatus === TeaRoomOrderStatus.Pending">
<view class="flex items-center mr-6rpx">
<wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_time.png`"/>
</view>
<view class="flex items-center text-26rpx leading-36rpx text-[#909399]">
<view>还剩</view>
<view class="mx-6rpx">
<wd-count-down :time="order.time1" custom-class="!text-[#FF5951]" />
</view>
<view>订单自动取消</view>
</view>
</view>
<view class="ml-80rpx" v-if="orderStatus === TeaRoomOrderStatus.Finished">品一口香茗，让生活慢下来，从一杯好茶开始</view>
</view>
<view class="mx-30rpx coupon-bg" >
<view class="flex items-center px-30rpx pt-30rpx pb-40rpx">
<view class="mr-30rpx">
<wd-img width="190rpx" height="190rpx" :src="order.room_msg.img" mode="scaleToFill"></wd-img>
</view>
<view class="flex-1">
<view class="flex justify-between items-center">
<view class="flex items-center font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx">
<view class="line-1 w-300rpx">
{{ order.room_msg.title }}
</view>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
<view class="text-26rpx leading-36rpx text-[#909399]">￥{{ order.room_all_price }}</view>
</view>
<view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
￥{{ order.room_price }}/小时
</view>
<!-- 等待付款不显示实付金额 -->
<view class="text-[#606266] text-right mt-26rpx" v-if="orderStatus !== TeaRoomOrderStatus.Pending">
<text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
<text class="tetx-32rpx leading-36rpx">￥{{ order.order_amount }}</text>
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
</view>
</view>
</view>
<view class="mt-28rpx pb-36rpx">
<view class="text-30rpx leading-42rpx text-[#303133] px-30rpx">预约信息</view>
<view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx">
<view class="mb-20rpx px-30rpx">预约时间：{{ order.day_time }} {{ order.start_time }}-{{ order.end_time }}</view>
<view class="flex justify-between items-center pl-30rpx" >
<view>预约时长：{{ order.hours }}小时</view>
</view>
</view>
</view>
</view>
<!-- 已预约和消费中显示开门锁 -->
<view class="bg-white rounded-16rpx mx-30rpx mt-20rpx" v-if="orderStatus === TeaRoomOrderStatus.Pay || orderStatus === TeaRoomOrderStatus.Consumption">
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx px-30rpx">开门锁</view>
<view class="mt-20rpx">
<wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
</view>
<view class="">
<view class="flex justify-between items-center mt-18rpx pb-18rpx px-62rpx">
<view class="w-224rpx">
<view class="relative h-64rpx">
<wd-img width="224rpx" height="64rpx" :src="`${OSS}images/reserve_room/reserve_room_image5.png`"/>
<view class="text-[#4C9F44] font-bold text-32rpx leading-44rpx absolute top-[50%] transform translate-y-[-50%] right-22rpx">点击开锁</view>
</view>
<view class="text-[#303133] text-30rpx leading-42rpx mt-16rpx text-center">大门锁</view>
<view class="text-[#606266] text-26rpx leading-48rpx mt-4rpx text-center font-500">手动输入 1052 32#</view>
</view>
<view class="border-r-2rpx border-r-solid border-r-[#F6F7F9] h-224rpx"></view>
<view class="w-224rpx">
<view class="relative h-64rpx">
<wd-img width="224rpx" height="64rpx" :src="`${OSS}images/reserve_room/reserve_room_image6.png`"/>
<view class="text-[#4C9F44] font-bold text-32rpx leading-44rpx absolute top-[50%] transform translate-y-[-50%] right-22rpx">点击开锁</view>
</view>
<view class="text-[#303133] text-30rpx leading-42rpx mt-16rpx text-center">房间锁</view>
<view class="text-[#606266] text-26rpx leading-48rpx mt-4rpx text-center font-500">手动输入 1052 32#</view>
</view>
</view>
</view>
</view>
<!-- 适用门店 -->
<view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx">
<view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">适用门店</view>
<view class="mt-26rpx flex items-center">
<view class="mr-24rpx">
<wd-img width="170rpx" height="170rpx" :src="order.store_msg.image"></wd-img>
</view>
<view class="flex-1 flex justify-between items-center relative">
<view class="">
<view class="text-[#303133] text-30rpx leading-40rpx line-2">{{ order.store_msg.name }}</view>
<view class="mt-26rpx text-[#909399] text-24rpx leading-34rpx">距您{{ order.distance }}km</view>
<view class="flex items-center mt-14rpx">
<view class="mr-8rpx">
<wd-img width="28rpx" height="28rpx" :src="`${OSS}icon/icon_location.png`"/>
</view>
<view class="ml-2rpx text-26rpx text-[#606266] line-1 w-300rpx">{{ order.store_msg.address }}</view>
</view>
</view>
<view class="flex absolute top-1/2 right-0 -translate-y-1/2">
<view class="text-center mr-20rpx" >
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
</view>
<view class="text-center" >
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_phone.png`"/>
</view>
</view>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx">
<view class="text-[#303133] text-32rpx leading-44rpx">订单信息</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>订单编号</view>
<view>
<text>{{ order.order_sn }}</text>
<wd-divider vertical />
<text class="text-[#4C9F44]" @click="copy(order.order_sn)">复制</text>
</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderStatus != TeaRoomOrderStatus.Pending && order.pay_way">
<view>交易方式</view>
<view>{{ order.pay_way_title }}</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
<view>创建时间</view>
<view>{{ order.dtime }}</view>
</view>
<view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderStatus != TeaRoomOrderStatus.Pending && orderStatus != TeaRoomOrderStatus.Cancelled && order.pay_way_title">
<view>付款时间</view>
<view>{{ order.update_dtime }}</view>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { TeaRoomOrderStatusTextValue, TeaRoomOrderStatus } from '@/utils/order'
import { useMessage } from 'wot-design-uni'
import {toast} from '@/utils/toast'
import { PayList, PayCategory, PayValue } from '@/utils/pay'
import { getTeaRoomOrderDetail } from '@/api/tea-room'
import { handleTRCancelOrderHooks, handleTRToPayHooks } from '@/hooks/useOrder'
import type { ITeaSpecialistOrderDetailsResult } from '@/api/types/tea'
import { router, copy } from '@/utils/tools'
const OSS = inject('OSS')
const title = ref<string>('')
const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
// 取消订单弹窗
const message = useMessage('wd-message-box-slot')
// 订单
const orderId = ref<number>(0)
const order = ref<ITeaSpecialistOrderDetailsResult>({
order_amount: '',
order_sn: '',
store_id: 0,
room_msg: {
id: 0,
price: 0,
img: '',
title: '',
},
store_msg: {
id: 0,
address: '',
name: '',
operation_type: 1,
image: '',
latitude: '',
longitude: '',
contact_phone: ''
},
time1: 0,
order_status: 0,
room_all_price: 0,
room_price: 0,
day_time: '',
start_time: '',
end_time: '',
hours: 0,
distance: 0,
pay_way: 0,
pay_way_title: '',
dtime: '',
update_dtime: '',
renew_price: 0,
renew_dtime: {
start_time: '',
end_time: '',
renew_price: 0
}
})
onLoad(async (args) => {
orderId.value = args.orderId
// 获取订单详情
ShareOrderDetail.handleInit()
})
onUnload(() => {
uni.$off('refreshOrderDetail')
})
const ShareOrderDetail = {
/**
* 获取订单详情
*/
handleInit: async () => {
const res = await getTeaRoomOrderDetail({
id: orderId.value,
latitude: uni.getStorageSync('latitude'),
longitude: uni.getStorageSync('longitude')
})
order.value = res.details
console.log("🚀 ~ order.value :", order.value )
title.value = TeaRoomOrderStatusTextValue[order.value.order_status].title || '订单详情'
orderStatus.value = order.value.order_status
},
/**
* 支付订单
*/
handleToPay: () => {
uni.$on('refreshOrderDetail', () => {
ShareOrderDetail.handleInit()
uni.$off('refreshOrderDetail')
})
handleTRToPayHooks(orderId.value, order.value.store_msg.name, order.value.store_msg.id)
},
/**
* 获取订单详情
*/
handleCancelOrder: () => {
message.confirm({
title: '确定取消订单？',
msg: '取消订单后无法恢复，优惠券可退回',
confirmButtonText: '确定',
cancelButtonText: '取消',
cancelButtonProps: {
customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
},
confirmButtonProps: {
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
}
}).then((res) => {
if (res.action == 'confirm') {
// 点击确认按钮回调事件
uni.$on('refreshOrderDetail', () => {
ShareOrderDetail.handleInit()
uni.$off('refreshOrderDetail')
})
handleTRCancelOrderHooks(orderId.value)
}
toast.info('订单取消成功')
}).catch(() => {
// 点击取消按钮回调事件
})
},
/**
* 跳转到首页
*/
handleToHome: () => {
router.reLaunch('/pages/index/index')
}
}
</script>
<style lang="scss">
page {
background-color: $cz-page-background;
}
.coupon-bg {
background-image: url(#{$OSS}images/order/order_image2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.collapse {
:deep() {
.wd-collapse-item::after,
.wd-collapse-item__header.is-expanded::after {
background: none !important;
}
.wd-collapse-item__body {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
}
</style>