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-11-28 19:19:54 +08:00
parent 58211f2430
commit 67c8e8e016
43 changed files with 2722 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/pages/cashier/cashier.vue
View File

@ -17,7 +17,14 @@
<view class="mt-56rpx text-center">
<view class="text-28rpx leading-40rpx text-#606266">{{ title }}</view>
<view class="mt-24rpx">
<price-format color="#303133" :first-size="44" :second-size="44" :subscript-size="28" :price="money"></price-format>
<!-- 是否是一键续订 -->
<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">
@ -31,7 +38,7 @@
<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" :storeMoney="storeMoney"></pay>
<pay @pay="Cashier.handleGetPayValue" :hidePlatformBalance="hidePlatformBalance" :hideStoreBalance="hideStoreBalance" :hideWechat="hideWechat" :storeMoney="storeMoney"></pay>
</view>
<view
@ -43,15 +50,17 @@
<script lang="ts" setup>
import Pay from '@/components/Pay.vue'
import { getTeaSpecialistDetails, getTeaSpecialistOrderDetails, teaSpecialistPrepay, teaSpecialistPay } from '@/api/tea'
import { getTeaSpecialistDetails } from '@/api/tea'
import { ITeaSpecialistDetailsFields } from '@/api/types/tea'
import { toast } from '@/utils/toast'
import { router } from '@/utils/tools'
import { payTipTeaSpecialist } from '@/api/pay'
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 } from '@/api/tea-room'
import { getTeaRoomBalance, getTeaRoomOrderDetail, getTeaRoomPackageOrderDetail } from '@/api/tea-room'
import { OrderType } from '@/utils/order'
import { wxPay } from '@/hooks/usePay'
// 用户信息
const userInfo = ref<IUserInfoVo>(null)
@ -84,6 +93,9 @@
// 支付方式
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)
@ -98,7 +110,20 @@
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)
@ -109,10 +134,13 @@
// 设置支付来源标题
from.value = args.from || ''
if (from.value === OrderType.TeaRoomOrder) {
if (args.teaRoomName) {
title.value = `茶室预定-${args.teaRoomName}`
// 茶室订单：预定、套餐团购两种方式
if (args.name && isGroupBuying.value == 0) {
title.value = `茶室预定-${args.name}`
} else {
title.value = '茶室预定支付'
title.value = `茶室套餐购买-${args.name}`
hidePlatformBalance.value = true // 隐藏平台余额支付
hideStoreBalance.value = true // 隐藏门店余额支付
}
}
@ -124,10 +152,12 @@
if (args.from == OrderType.TeaRoomOrder && args.orderId) {
// 获取订单详情
orderId.value = Number(args.orderId)
Cashier.handleGetOrderDetails()
if (isGroupBuying.value == 0) {
Cashier.handleGetOrderDetails()
} else {
Cashier.handleGetRoomPackageDetails()
}
}
console.log('页面加载')
})
onUnload(() => {
@ -153,7 +183,9 @@
Object.assign(info, res.teamaster || {})
},
// 获取订单详情
/**
* 获取预定茶室订单详情
*/
handleGetOrderDetails: async () => {
// 获取订单详情接口
const res = await getTeaRoomOrderDetail({
@ -162,8 +194,25 @@
longitude: uni.getStorageSync('longitude')
})
order.value = res
console.log("🚀 ~ order.value:", order.value)
money.value = Number(res.details.amount_price)
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)
},
// 获取支付方式
@ -171,39 +220,43 @@
pay.value = value
},
// 去支付
/**
* 支付
*/
handleToPay: async () => {
console.log("🚀 ~ pay.value :", pay.value )
if (pay.value == null || pay.value == undefined) {
toast.info('请选择支付方式')
return
}
if (from.value == 'tip') {
payTipTeaSpecialist({
id: id.value,
tip_price: money.value,
pay_type: pay.value
}).then(res => {
router.navigateTo('/pages/notice/reserve?type=tipSuccess')
console.log("🚀 ~ res:", res)
})
} else if (from.value == 'order') {
if (from.value == OrderType.TeaRoomOrder) {
// 预支付-茶室订单
uni.showLoading({ title: '支付中...' })
try {
// 预支付
const res1 = await teaSpecialistPrepay({
const res1 = await prePay({
from: isGroupBuying.value ? 'wx' : 'balance',
order_id: orderId.value,
from: 'balance',
pay_way: pay.value,
order_source: 2 //订单来源：1-小程序;2-h5;3app
pay_way: pay.value,
order_source: 1, //订单来源：1-小程序; 2-h5; 3app
order_type: 1 // 0为茶艺师 1为茶室包间
})
// 支付
const res2 = await teaSpecialistPay({
id: res1.pay_id
})
// 余额支付(平台余额、门店余额)
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'
}
@ -216,7 +269,7 @@
</script>
<style lang="scss" scoped>
<style lang="scss">
page {
background-color: $cz-page-background;
}

25
src/pages/index/index.vue
View File

@ -39,7 +39,7 @@
<text class="text-22rpx leading-32rpx text-[#818CA9] ml-36rpx">更多茶艺师点击预约</text>
</view>
<view class="mt-16rpx relative w-690rpx h-180rpx mx-30rpx">
<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>
@ -57,8 +57,8 @@
<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)">
<view class="absolute top--28rpx left-0 z-1">
<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>
@ -221,10 +221,8 @@
/**
* 跳转到预约茶室页面
*/
handleToReserveRoom: (id: number = 0) => {
uni.navigateTo({
url: `/bundle/tea-room/room?id=${id}`
})
handleToReserveRoom: (id: number = 0, type: number = 1) => {
router.navigateTo( `/bundle/tea-room/room?id=${id}&type=${type}`)
},
/**
@ -233,6 +231,19 @@
handleResetSearch: () => {
list.value = []
getMescroll().resetUpScroll()
},
/**
* 跳转公众号
*/
handleToWxOfficialAccount: () => {
wx.openOfficialAccountProfile({
username: '', // 此处填写公众号的原始 ID
success: res => {
},
fail: res => {
}
})
}
}
</script>

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

@ -23,11 +23,11 @@
<!-- 账号昵称显示 -->
<view class="ml-60rpx flex items-center">
<view>
<wd-img width="120rpx" height="120rpx" :src="`${OSS}icon/icon_avatar.png`" mode="aspectFill" round />
<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 ? userInfo.nickname : '立即登录' }}</view>
<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">
@ -53,11 +53,11 @@
<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="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="font-bold text-36rpx leading-50rpx"> {{ isLogin ? user.collect_count : '- -' }}</view>
<view class="text-24rpx leading-34rpx">收藏</view>
</view>
</view>
@ -66,7 +66,7 @@
<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-30rpx leading-36rpx font-bold">{{ isLogin ? user.user_money : '- -' }}</view>
<view class="text-20rpx leading-28rpx ml-10rpx">平台余额</view>
</view>
</view>
@ -245,6 +245,7 @@
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')
@ -252,7 +253,24 @@
// 登录信息相关
const userInfo = ref<any>(null)
const user = 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)
@ -293,23 +311,40 @@
onShow(() => {
const userStore = useUserStore()
isLogin.value = userStore.isLoggedIn
console.log("🚀 ~ isLogin.value:", 1)
if (isLogin.value) {
userInfo.value = userStore.userInfo
console.log("🚀 ~ isLogin.value:", 3)
// 获取用户详情信息接口
getUserInfo().then(res => {
user.value = res
})
} else {
userInfo.value = null
user.value = null
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 = {
/**
* 初始化

37
src/pages/notice/reserve.vue
View File

@ -1,15 +1,14 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#fff"
"navigationStyle": "custom"
}
}</route>
<template>
<view class="mt-84rpx flex justify-center items-center">
<view v-if="type == 'room'">
<reserve-notice title="茶室预约成功" desc="可以点击下方查看预约单具体信息">
<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>
@ -24,25 +23,37 @@
<script lang="ts" setup>
import ReserveNotice from '@/components/notice/Reserve.vue'
const type = ref<string>('') // 购买类型 room: 预约茶室
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: () => {
uni.navigateTo({
url: '/bundle/tea-room/order'
})
if (isGroupBuying.value) {
router.navigateTo('/bundle/order/platform/order-list')
} else {
router.navigateTo('/bundle/order/tea-room/order-list')
}
},
// 预约茶室 - 完成
/**
* 预约茶室 - 完成
*/
handleRoomDone: () => {
uni.switchTab({
url: '/pages/index/index'
})
router.switchTab('/pages/index/index')
}
}
</script>

177
src/pages/reserve/reserve.vue
View File

@ -13,8 +13,9 @@
<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" @click="reserve.toSearch">
<wd-search placeholder="搜索茶址名称" hide-cancel disabled :placeholder-left="true"
<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>
@ -22,7 +23,7 @@
</wd-navbar>
<view class="tabs">
<wd-tabs v-model="tab" swipeable slidable="always" @change="reserve.handleChangeTab" :lazy="false">
<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>
@ -30,28 +31,44 @@
</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-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">
<view class="mb-20rpx" @click="Reserve.handleToReserveRoomOrder">
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Consuming"></combo-card>
</view>
</view>
</mescroll-body>
</view>
</view> -->
<!-- 茶艺师预约 -->
<view v-if="tab === 1">
<mescroll-body @init="mescrollInit" @down="downCallback" @up="reserve.upCallback" :up="upOption">
<!-- <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">
<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> -->
<!-- </view> -->
</view>
</template>
@ -60,101 +77,89 @@
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 **/
// tab切换
const tab = ref<number>(0)
const reserveType = ref<number>(0) // 0:茶室预约 1:茶艺师预约
/** 结束 **/
/** mescroll **/
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
const upOption = reactive({
empty: {
// 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 = {
const Reserve = {
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
upCallback: (mescroll) => {
// 需要留一下数据为空的时候显示的空数据图标内容
// list({
// page: mescroll.num,
// size: mescroll.size
// }).then((res: { list: Array<any>, totalPages: Number }) => {
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
const filter = {
page: mescroll.num,
size: mescroll.size,
order_status: orderStatus.value,
search: keywords.value
}
// console.log("🚀 ~ goods:", goods)
// mescroll.endByPage(curPageData.length, res.totalPages); //必传参数(当前页的数据个数, 总页数)
// }).catch(() => {
// mescroll.endErr(); // 请求失败, 结束加载
// })
// apiGoods(mescroll.num, mescroll.size).then(res=>{
// const curPageData = res.list || [] // 当前页数据
// if(mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
// goods.value = goods.value.concat(curPageData); //追加新数据
// //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
// //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
// //方法一(推荐): 后台接口有返回列表的总页数 totalPage
// //mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
// //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
// //mescroll.endBySize(curPageData.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
// //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
// //mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
// //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
// }).catch(()=>{
mescroll.endErr(); // 请求失败, 结束加载
// })
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() // 请求失败, 结束加载
})
}
},
// 搜索
toSearch: () => {
uni.navigateTo({
url: '/pages/search/search'
})
},
// 茶室预约-跳转到对应的订单页
handleToReserveRoomOrder: () => {
uni.navigateTo({
url: `/bundle/order/tea-room/order-detail?orderStatus=${OrderStatus.Consuming}`
})
},
// 茶艺师预约-跳转到对应的订单页
handleToTeaSpecialistOrder: () => {
uni.navigateTo({
url: `/bundle/order/tea-specialist/order-detail?orderStatus=${OrderStatus.Serving}`
})
},
// tab切换获取index
/**
* tab切换获取index
* @param item
*/
handleChangeTab: (item: { index: number }) => {
// tabIndexs.value = item.index
// scrollToLastY()
tab.value = item.index
// 切换tab时,重置当前的mescroll
list.value = []
getMescroll().resetUpScroll();
},
// 处理点击事件
handleClick: (item: any) => {
console.log('Clicked item:', item)
},
/**
* 搜索
*/
handleSearch: () => {
list.value = []
getMescroll().resetUpScroll();
}
}
</script>

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>