完善茶室订单
This commit is contained in:
wangxiaowei
16
src/api/pay.ts
Normal file
16
src/api/pay.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { http } from '@/http/alova'
|
||||
|
||||
/**
|
||||
* 给茶艺师打赏
|
||||
*/
|
||||
interface ITipTeaSpecialistParams {
|
||||
id: number
|
||||
tip_price: number
|
||||
pay_type: number
|
||||
}
|
||||
|
||||
export function payTipTeaSpecialist(data: ITipTeaSpecialistParams) {
|
||||
return http.Post('/api/Teamaster/giveTeamasterTipAmount',
|
||||
data
|
||||
)
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
import { http } from '@/http/alova'
|
||||
import type { IHomeTeaRoomListResult, IOpenCityListResult, ITeaRoomDetailResult } from '@/api/types/tea-room'
|
||||
import type { IHomeTeaRoomListResult, IOpenCityListResult, ITeaRoomDetailResult, ITeaRoomBalanceResult, IOrderListResult } from '@/api/types/tea-room'
|
||||
import type { ITeaSpecialistFuture7DaysResult, ITeaSpecialistOrderDetailsResult } from '@/api/types/tea'
|
||||
|
||||
/**
|
||||
* 获取茶室列表
|
||||
* 获取门店列表
|
||||
*/
|
||||
export interface IHomeTeaRoomListParams {
|
||||
export interface IHomeTeaStoreListParams {
|
||||
page: number
|
||||
size: number
|
||||
search: string
|
||||
@ -12,7 +13,7 @@ export interface IHomeTeaRoomListParams {
|
||||
longitude: number
|
||||
}
|
||||
|
||||
export function getHomeTeaRoomList(data: any) {
|
||||
export function getHomeTeaStoreList(data: IHomeTeaStoreListParams) {
|
||||
return http.Post<IHomeTeaRoomListResult>('/api/teaStore/teaStoreLists',
|
||||
data,
|
||||
{
|
||||
@ -89,3 +90,116 @@ export function getCollectTeaRoomList(data: ICollectTeaRoomListParams) {
|
||||
data
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取门店下的茶室列表
|
||||
*/
|
||||
export interface IStoreTeaRoomListParams {
|
||||
id: number
|
||||
page: number
|
||||
size: number
|
||||
}
|
||||
|
||||
export function getStoreTeaRoomList(data: IStoreTeaRoomListParams) {
|
||||
return http.Post<IHomeTeaRoomListResult>('/api/teaStore/teaStoreRoomLists',
|
||||
data,
|
||||
{
|
||||
meta: { ignoreAuth: true }
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取未来7天时间
|
||||
*/
|
||||
export function getNext7Days() {
|
||||
return http.Post<ITeaSpecialistFuture7DaysResult>('/api/Common/get7Time')
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取门店余额
|
||||
*/
|
||||
export interface ITeaRoomBalanceParams {
|
||||
store_id: number
|
||||
}
|
||||
|
||||
export function getTeaRoomBalance(data: ITeaRoomBalanceParams) {
|
||||
return http.Post<ITeaRoomBalanceResult>('/api/user/userStoreMoney', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建门店包间订单
|
||||
*/
|
||||
export interface ICreateTeaRoomOrderParams {
|
||||
store_id: number
|
||||
room_id: number
|
||||
day_time: string
|
||||
start_time: string
|
||||
end_time: string
|
||||
hours: number
|
||||
user_coupon_id: number
|
||||
}
|
||||
|
||||
export function createTeaRoomOrder(data: ICreateTeaRoomOrderParams) {
|
||||
return http.Post<{id: number}>('/api/order/submitStoreOrder', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取门店包间订单详情
|
||||
*/
|
||||
export interface ITeaRoomOrderDetailParams {
|
||||
id: number
|
||||
latitude: number
|
||||
longitude: number
|
||||
}
|
||||
|
||||
export function getTeaRoomOrderDetail(data: ITeaRoomOrderDetailParams) {
|
||||
return http.Post<ITeaSpecialistOrderDetailsResult>('/api/order/orderStoreDetails', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 门店包间订单列表
|
||||
*/
|
||||
export interface ITeaRoomOrderListParams {
|
||||
page: number
|
||||
size: number
|
||||
order_status: string
|
||||
search: string
|
||||
}
|
||||
|
||||
export function getTeaRoomOrderList(data: ITeaRoomOrderListParams) {
|
||||
return http.Post<IOrderListResult>('/api/order/orderStoreList', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消包间订单
|
||||
*/
|
||||
export interface ICancelTeaRoomOrderParams {
|
||||
id: number
|
||||
}
|
||||
|
||||
export function cancelTeaRoomOrder(data: ICancelTeaRoomOrderParams) {
|
||||
return http.Post('/api/order/cancelOrderStore', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除包间订单
|
||||
*/
|
||||
export interface IDeleteTeaRoomOrderParams {
|
||||
id: number
|
||||
}
|
||||
|
||||
export function deleteTeaRoomOrder(data: IDeleteTeaRoomOrderParams) {
|
||||
return http.Post('/api/order/delOrderStore', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认包间订单
|
||||
*/
|
||||
export interface IConfirmTeaRoomOrderParams {
|
||||
id: number
|
||||
}
|
||||
|
||||
export function confirmTeaRoomOrder(data: IConfirmTeaRoomOrderParams) {
|
||||
return http.Post('/api/order/userConfirmOrderStore', data)
|
||||
}
|
||||
183
src/api/tea.ts
Normal file
183
src/api/tea.ts
Normal file
@ -0,0 +1,183 @@
|
||||
import { http } from '@/http/alova'
|
||||
import type {
|
||||
ITeaSpecialistDetailsResult,
|
||||
ITeaSpecialistFuture7DaysResult,
|
||||
ITeaTypeListResult,
|
||||
ICollectTeaSpecialistResult,
|
||||
ICreateTeaSpecialistOrderResult,
|
||||
ITeaSpecialistOrderDetailsResult,
|
||||
ITeaSpecialistPrepayResult } from '@/api/types/tea'
|
||||
|
||||
/**
|
||||
* 获取茶艺师详情
|
||||
*/
|
||||
export interface ITeaSpecialistDetailsParams {
|
||||
id: number
|
||||
longitude: number | ''
|
||||
latitude: number | ''
|
||||
user_id: number | ''
|
||||
}
|
||||
|
||||
export function getTeaSpecialistDetails(data: ITeaSpecialistDetailsParams) {
|
||||
return http.Post<ITeaSpecialistDetailsResult>('/api/Teamaster/teamasterDetails',
|
||||
data,
|
||||
{
|
||||
meta: { ignoreAuth: true }
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 收藏和取消收藏茶艺师
|
||||
*/
|
||||
export interface ICollectTeaSpecialistParams {
|
||||
id: number
|
||||
status: number
|
||||
}
|
||||
|
||||
export function collectTeaSpecialist(data: ICollectTeaSpecialistParams) {
|
||||
return http.Post('/api/Teamaster/teamasterCollect',
|
||||
data
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取打赏金额
|
||||
*/
|
||||
export function getTeaSpecialistRewardAmounts() {
|
||||
return http.Post('/api/Teamaster/teamasterTipAmount')
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取门店地址
|
||||
*/
|
||||
export interface ITeaHouseListParams {
|
||||
page: number
|
||||
size: number
|
||||
latitude: number
|
||||
longitude: number
|
||||
search: string
|
||||
}
|
||||
|
||||
export function getTeaHouseList(data: ITeaHouseListParams) {
|
||||
return http.Post('/api/Store/storeList',
|
||||
data
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取未来7天时间
|
||||
*/
|
||||
export function getNext7Days() {
|
||||
return http.Post<ITeaSpecialistFuture7DaysResult>('/api/Common/get7Time')
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取茶叶类型列表
|
||||
*/
|
||||
export function getTeaTypeList() {
|
||||
return http.Post('/api/Teamaster/teaType')
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取收藏列表
|
||||
*/
|
||||
export interface IGetCollectTeaSpecialistParams {
|
||||
page: number
|
||||
size: number
|
||||
}
|
||||
|
||||
export function getCollect(data: IGetCollectTeaSpecialistParams) {
|
||||
return http.Post<ICollectTeaSpecialistResult>('/api/Teamaster/teamasterCollectList', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 茶艺师邀约
|
||||
*/
|
||||
export interface ITeaSpecialistInviteParams {
|
||||
id: number
|
||||
}
|
||||
|
||||
export function teaSpecialistInvite(data: ITeaSpecialistInviteParams) {
|
||||
return http.Post('/api/Teamaster/invitation', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建预约茶艺师订单
|
||||
*/
|
||||
export interface ICreateTeaSpecialistOrderParams {
|
||||
teamaster_id: number
|
||||
address_id: number
|
||||
start_time: number
|
||||
end_time: number
|
||||
nums: number
|
||||
tea_id: string
|
||||
service_type: number
|
||||
store_id: number
|
||||
latitude: number
|
||||
longitude: number
|
||||
remark: string
|
||||
coupon_id: number
|
||||
hours: number
|
||||
}
|
||||
|
||||
export function createTeaSpecialistOrder(data: ICreateTeaSpecialistOrderParams) {
|
||||
return http.Post<ICreateTeaSpecialistOrderResult>('/api/order/submitOrder', data)
|
||||
}
|
||||
|
||||
/***
|
||||
* 获取订单详情
|
||||
*/
|
||||
export interface IGetTeaSpecialistOrderDetailsParams {
|
||||
id: number
|
||||
}
|
||||
|
||||
export function getTeaSpecialistOrderDetails(data: IGetTeaSpecialistOrderDetailsParams) {
|
||||
return http.Post<ITeaSpecialistOrderDetailsResult>('/api/order/orderDetails', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 预支付
|
||||
*/
|
||||
export interface ITeaSpecialistPrepayParams {
|
||||
order_id: number
|
||||
from: string
|
||||
pay_way: number
|
||||
order_source: number
|
||||
}
|
||||
|
||||
export function teaSpecialistPrepay(data: ITeaSpecialistPrepayParams) {
|
||||
return http.Post<ITeaSpecialistPrepayResult>('/api/pay/prepay', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 支付接口
|
||||
*/
|
||||
export interface ITeaSpecialistPayParams {
|
||||
id: number
|
||||
}
|
||||
|
||||
export function teaSpecialistPay(data: ITeaSpecialistPayParams) {
|
||||
return http.Post('/api/pay/yuePay', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 团体预约
|
||||
*/
|
||||
export interface ITeaSpecialistGroupReserveParams {
|
||||
numbers: string
|
||||
other_require: string
|
||||
res_time: string
|
||||
contact: string
|
||||
phone: string
|
||||
code: string
|
||||
province: string
|
||||
city: string
|
||||
district: string
|
||||
address: string
|
||||
content: string
|
||||
}
|
||||
|
||||
export function teaSpecialistGroupReserve(data: ITeaSpecialistGroupReserveParams) {
|
||||
return http.Post('/api/Teamaster/groupReservation', data)
|
||||
}
|
||||
@ -54,3 +54,29 @@ export interface ITeaRoomDetailResult {
|
||||
update_dtime: string
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 门店余额接口返回数据
|
||||
*/
|
||||
export interface ITeaRoomBalanceResult {
|
||||
data: {
|
||||
id: number
|
||||
dtime: string
|
||||
money: number
|
||||
status: number
|
||||
store_id: number
|
||||
update_dtime: string
|
||||
user_id: number
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 包间订单列表返回数据
|
||||
*/
|
||||
export interface IOrderListResult {
|
||||
count: number
|
||||
list: Array<any>
|
||||
more: number
|
||||
page: string
|
||||
size: string
|
||||
}
|
||||
|
||||
114
src/api/types/tea.ts
Normal file
114
src/api/types/tea.ts
Normal file
@ -0,0 +1,114 @@
|
||||
/**
|
||||
* 茶艺师详情返回结果
|
||||
*/
|
||||
export interface ITeaSpecialistDetailsResult {
|
||||
teamaster: Array<any>
|
||||
}
|
||||
|
||||
/**
|
||||
* 茶艺师详情字段
|
||||
*/
|
||||
export interface ITeaSpecialistDetailsFields {
|
||||
id: 0,
|
||||
name: string
|
||||
star: number
|
||||
image: string
|
||||
reservation_num: number
|
||||
distance: number
|
||||
speed: number
|
||||
real: {
|
||||
gender: number
|
||||
both: number
|
||||
height: number
|
||||
weight: number
|
||||
interests: string
|
||||
}
|
||||
teamasterlabel: Array<any>
|
||||
teamasterLevel: Array<any>
|
||||
price: number
|
||||
fare_price: number
|
||||
collect: number
|
||||
up_status: number
|
||||
textarea: Array<any>
|
||||
}
|
||||
|
||||
/**
|
||||
* 茶艺师打赏金额
|
||||
*/
|
||||
export interface ITeaSpecialistRewardAmountsResult {
|
||||
id: number
|
||||
status: number
|
||||
tip_price: number
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 茶艺师门店列表
|
||||
*/
|
||||
export interface ITeaHouseListResult {
|
||||
count: Number
|
||||
list: Array<any>
|
||||
more: Number
|
||||
page: string
|
||||
size: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取未来7天时间列表
|
||||
*/
|
||||
export interface ITeaSpecialistFuture7DaysResult {
|
||||
minimum_time: number
|
||||
time: Array<any>
|
||||
}
|
||||
|
||||
/**
|
||||
* 茶叶类型列表
|
||||
*/
|
||||
export interface ITeaTypeListResult {
|
||||
id: number
|
||||
name: string
|
||||
status: number
|
||||
tea_price: number
|
||||
dtime: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 首页列表数据返回
|
||||
*/
|
||||
export interface ICollectTeaSpecialistResult {
|
||||
count: Number
|
||||
list: Array<any>
|
||||
more: Number
|
||||
page: string
|
||||
size: string
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建订单返回id
|
||||
*/
|
||||
export interface ICreateTeaSpecialistOrderResult {
|
||||
id: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单详情返回结果
|
||||
*/
|
||||
export interface ITeaSpecialistOrderDetailsResult {
|
||||
details: {
|
||||
amount_price: string
|
||||
order_sn: string
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 预支付返回结果
|
||||
*/
|
||||
export interface ITeaSpecialistPrepayResult {
|
||||
pay_id: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 支付返回结果
|
||||
*/
|
||||
export interface ITeaSpecialistPayResult {
|
||||
}
|
||||
@ -82,6 +82,7 @@ export function userAddressDetails(data: IUserAddressDetailsParams) {
|
||||
export interface IGetCouponsParams {
|
||||
id: number
|
||||
numbers: number
|
||||
type_id: number
|
||||
}
|
||||
|
||||
export function getCoupons(data: IGetCouponsParams) {
|
||||
@ -93,6 +94,7 @@ export function getCoupons(data: IGetCouponsParams) {
|
||||
*/
|
||||
export interface IGetMyCouponsParams {
|
||||
status: number
|
||||
type_id: number
|
||||
}
|
||||
export function getMyCoupons(data: IGetMyCouponsParams) {
|
||||
return http.Post('/api/UserCoupon/orderCoupinList', data)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
// "needLogin": true,
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -20,19 +21,19 @@
|
||||
<view class="mx-30rpx">
|
||||
<view class="mx30rpx">
|
||||
<text class="text-[#303133] font-bold text-30rpx leading-42rpx">可用优惠券</text>
|
||||
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
|
||||
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">{{ couponList.no_use.length }}张</text>
|
||||
</view>
|
||||
<view class="mt-28rpx radio">
|
||||
<wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
|
||||
<coupon
|
||||
v-for="(item, index) in couponList"
|
||||
v-for="(item, index) in couponList.use"
|
||||
:key="item.id"
|
||||
:coupon="item"
|
||||
canUse
|
||||
showChecked
|
||||
:checked="item.id === checkedId"
|
||||
:onCheck="coupons.handleCheck"
|
||||
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
|
||||
:onCheck="Coupons.handleCheck"
|
||||
:class="index !== couponList.use.length - 1 ? 'mb-20rpx' : ''"
|
||||
></coupon>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
@ -40,19 +41,19 @@
|
||||
<view class="mx-30rpx">
|
||||
<view class="mx30rpx">
|
||||
<text class="text-[#303133] font-bold text-30rpx leading-42rpx">不可用优惠券</text>
|
||||
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">2张</text>
|
||||
<text class="text-[#606266] font-400 text-28rpx leading-40rpx ml-24rpx">{{ couponList.no_use.length }}张</text>
|
||||
</view>
|
||||
<view class="mt-28rpx radio">
|
||||
<wd-radio-group v-model="checkedId" size="large" checked-color="#4C9F44">
|
||||
<coupon
|
||||
v-for="(item, index) in unCouponList"
|
||||
v-for="(item, index) in couponList.no_use"
|
||||
:key="item.id"
|
||||
:coupon="item"
|
||||
:canUse="false"
|
||||
showChecked
|
||||
:checked="item.id === checkedId"
|
||||
:onCheck="coupons.handleCheck"
|
||||
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
|
||||
:onCheck="Coupons.handleCheck"
|
||||
:class="index !== couponList.no_use.length - 1 ? 'mb-20rpx' : ''"
|
||||
></coupon>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
@ -74,7 +75,7 @@
|
||||
:coupon="item"
|
||||
canUse
|
||||
:checked="item.id === checkedId"
|
||||
:onCheck="coupons.handleCheck"
|
||||
:onCheck="Coupons.handleCheck"
|
||||
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
|
||||
></group-coupon>
|
||||
</wd-radio-group>
|
||||
@ -93,7 +94,7 @@
|
||||
:coupon="item"
|
||||
:canUse="false"
|
||||
:checked="item.id === checkedId"
|
||||
:onCheck="coupons.handleCheck"
|
||||
:onCheck="Coupons.handleCheck"
|
||||
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
|
||||
></group-coupon>
|
||||
</wd-radio-group>
|
||||
@ -104,26 +105,27 @@
|
||||
</view>
|
||||
|
||||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex justify-between items-center" :style="{ height: '140rpx'}">
|
||||
<view class="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择1张</view>
|
||||
<view class="ml-60rpx text-[#121212] text-24rpx leading-34rpx">已选择{{ checkedId ? 1 : 0 }}张</view>
|
||||
<view class="mr-30rpx">
|
||||
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx'>确定</wd-button>
|
||||
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="Coupons.handleConfirmCoupon">确定</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue'
|
||||
import Coupon from '@/components/coupon/Coupon.vue'
|
||||
import GroupCoupon from '@/components/coupon/GroupCoupon.vue'
|
||||
import { getCoupons } from '@/api/user'
|
||||
import type { IUserCouponListResult } from '@/api/types/user'
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
const couponType = ref<number>(2) // couponType 1:优惠券 2:团购券
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const couponList = ref([
|
||||
{ id: 1, amount: 20, limit: 100, expire: '2024.08.20' },
|
||||
{ id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
|
||||
])
|
||||
const couponList = ref<IUserCouponListResult>({
|
||||
no_use: [],
|
||||
use: []
|
||||
})
|
||||
const checkedId = ref<number>(0)
|
||||
|
||||
const unCouponList = ref([
|
||||
@ -131,16 +133,46 @@
|
||||
{ id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
|
||||
])
|
||||
|
||||
const teaRoomId = ref<number>(0) // 包间ID
|
||||
|
||||
onLoad((args) => {
|
||||
if (args.type) {
|
||||
couponType.value = args.type
|
||||
teaRoomId.value = args.id
|
||||
|
||||
couponType.value = args.type // 1:优惠券 2:团购券
|
||||
|
||||
// 初始化优惠券数据
|
||||
if (args.id && args.numbers && args.type == 1) {
|
||||
// 获取到包间ID和预定了几个小时
|
||||
Coupons.handleInitCoupon(args.id, args.numbers)
|
||||
}
|
||||
})
|
||||
|
||||
const coupons = {
|
||||
const Coupons = {
|
||||
/**
|
||||
* 初始化优惠券列表
|
||||
* @param id 包间ID
|
||||
* @param numbers 预定时长
|
||||
*/
|
||||
handleInitCoupon: async (id: number, numbers: number) => {
|
||||
const res = await getCoupons({id, numbers, type_id: 2})
|
||||
couponList.value = res
|
||||
},
|
||||
|
||||
/**
|
||||
* 选择优惠券
|
||||
* @param id 优惠券ID
|
||||
*/
|
||||
handleCheck: (id: number) => {
|
||||
checkedId.value = id
|
||||
console.log("🚀 ~ checkedId.value :", checkedId.value )
|
||||
},
|
||||
|
||||
/**
|
||||
* 确认选择优惠券
|
||||
*/
|
||||
handleConfirmCoupon: () => {
|
||||
const coupon = couponList.value.use.find(item => item.user_coupon_id === checkedId.value)
|
||||
uni.$emit('chooseCoupon', { coupon })
|
||||
router.navigateBack()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
// "needLogin": true,
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -16,15 +16,15 @@
|
||||
|
||||
<view>
|
||||
<view class="coupon-tab">
|
||||
<wd-tabs v-model="tab" swipeable slidable="always" @click="myCoupon.handleChangeTab" :lazy="false">
|
||||
<wd-tabs v-model="tab" swipeable slidable="always" @click="MyCoupon.handleChangeTab" :lazy="false">
|
||||
<wd-tab title="茶室优惠券">
|
||||
<view class="mx-30rpx">
|
||||
<view class="flex">
|
||||
<view v-for="(item, index) in tag" :key="index"
|
||||
@click="myCoupon.handleChangeTag(item)"
|
||||
@click="MyCoupon.handleChangeTag(item.value)"
|
||||
class="font-400 text-28rpx leading-40rpx w-116rpx h-64rpx flex justify-center items-center border-2rpx border-solid rounded-12rpx mr-20rpx"
|
||||
:class="item === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
|
||||
{{ item }}
|
||||
:class="item.value === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
canUse
|
||||
:showChecked="false"
|
||||
:checked="item.id === checkedId"
|
||||
:onCheck="myCoupon.handleCouponCheck"
|
||||
:onCheck="MyCoupon.handleCouponCheck"
|
||||
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
|
||||
></coupon>
|
||||
</view>
|
||||
@ -46,10 +46,10 @@
|
||||
<view class="mx-30rpx">
|
||||
<view class="flex">
|
||||
<view v-for="(item, index) in tag" :key="index"
|
||||
@click="myCoupon.handleChangeTag(item)"
|
||||
@click="MyCoupon.handleChangeTag(item.value)"
|
||||
class="font-400 text-28rpx leading-40rpx w-116rpx h-64rpx flex justify-center items-center border-2rpx border-solid rounded-12rpx mr-20rpx"
|
||||
:class="item === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
|
||||
{{ item }}
|
||||
:class="item.value === currentTag ? ' border-[#4C9F44] bg-[#F0F6EF] text-[#4C9F44]' : 'border-[#fff] bg-[#fff]'">
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
canUse
|
||||
:showChecked="false"
|
||||
:checked="item.id === checkedId"
|
||||
:onCheck="myCoupon.handleCouponCheck"
|
||||
:onCheck="MyCoupon.handleCouponCheck"
|
||||
:class="index !== couponList.length - 1 ? 'mb-20rpx' : ''"
|
||||
></coupon>
|
||||
</view>
|
||||
@ -77,19 +77,22 @@
|
||||
import {ref} from 'vue'
|
||||
import Coupon from '@/components/coupon/Coupon.vue'
|
||||
import GroupCoupon from '@/components/coupon/GroupCoupon.vue'
|
||||
import { getMyCoupons } from '@/api/user'
|
||||
|
||||
//
|
||||
const tab = ref<number>(0)
|
||||
const tag = ref<Array<string>>(['全部', '快过期', '已使用'])
|
||||
const currentTag = ref<string>('全部')
|
||||
const tag = ref<Array<any>>([
|
||||
{label: '全部', value: 0 },
|
||||
{label: '已使用', value: 1 },
|
||||
{label: '快过期', value: 3 },
|
||||
])
|
||||
const currentTab = ref<number>(0)
|
||||
const currentTag = ref<number>(0)
|
||||
|
||||
const couponType = ref<number>(2) // couponType 1:优惠券 2:团购券
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const couponList = ref([
|
||||
{ id: 1, amount: 20, limit: 100, expire: '2024.08.20' },
|
||||
{ id: 2, amount: 10, limit: 50, expire: '2024.08.25' }
|
||||
])
|
||||
const couponList = ref<any[]>([])
|
||||
const checkedId = ref<number>(0)
|
||||
|
||||
const unCouponList = ref([
|
||||
@ -101,22 +104,57 @@
|
||||
if (args.type) {
|
||||
couponType.value = args.type
|
||||
}
|
||||
|
||||
MyCoupon.handleInit()
|
||||
})
|
||||
|
||||
const myCoupon = {
|
||||
// 切换tab
|
||||
handleChangeTab: (index: number) => {
|
||||
tab.value = index
|
||||
currentTag.value = '全部'
|
||||
const MyCoupon = {
|
||||
/**
|
||||
* 初始化优惠券列表
|
||||
*/
|
||||
handleInit: async () => {
|
||||
const res: any = await getMyCoupons({status: currentTag.value, type_id: currentTab.value == 0 ? 2 : 1})
|
||||
|
||||
if (Array.isArray(res)) {
|
||||
res.map((res) => {
|
||||
couponList.value.push({
|
||||
id: res.coupon_id,
|
||||
coupon_price: res.userCouponType[0].coupon_price,
|
||||
use_price: res.userCouponType[0].use_price,
|
||||
title: res.userCouponType[0].title,
|
||||
effect_time: res.userCouponType[0].effect_time,
|
||||
user_coupon_id: res.coupon_id,
|
||||
expire: res.expire
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 切换tag
|
||||
handleChangeTag: (item: string) => {
|
||||
/**
|
||||
* 切换tab
|
||||
* @param item 切换项
|
||||
*/
|
||||
handleChangeTab: (item: {index: number}) => {
|
||||
currentTab.value = item.index
|
||||
currentTag.value = 0
|
||||
couponList.value = []
|
||||
MyCoupon.handleInit()
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换tag
|
||||
* @param item 切换项
|
||||
*/
|
||||
handleChangeTag: (item: number) => {
|
||||
currentTag.value = item
|
||||
console.log("🚀 ~ currentTag.value :", currentTag.value )
|
||||
couponList.value = []
|
||||
MyCoupon.handleInit()
|
||||
},
|
||||
|
||||
// 选择优惠券-保留这个函数，暂时用不着
|
||||
/**
|
||||
* 选择优惠券-保留这个函数，暂时用不着
|
||||
* @param id 切换项
|
||||
*/
|
||||
handleCouponCheck: (id: number) => {
|
||||
checkedId.value = id
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="order-list sticky top-0 left-0 z-50 bg-[#F6F7F8] pb-10rpx">
|
||||
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder @click-left="OrderList.handleBack">
|
||||
<wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder @click-left="router.navigateBack">
|
||||
<template #left>
|
||||
<view class="h-48rpx flex items-center">
|
||||
<view class="mt-4rpx">
|
||||
@ -23,41 +23,18 @@
|
||||
</wd-navbar>
|
||||
<view class="tabs">
|
||||
<wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="OrderList.handleChangeTabs">
|
||||
<wd-tab title="全部" name="all"></wd-tab>
|
||||
<wd-tab title="待付款" :name="OrderStatus.Pending"></wd-tab>
|
||||
<wd-tab title="预约单" :name="OrderStatus.Reserved"></wd-tab>
|
||||
<wd-tab title="已完结" :name="OrderStatus.Finished"></wd-tab>
|
||||
<wd-tab title="全部" :name="TeaRoomOrderStatusText.All"></wd-tab>
|
||||
<wd-tab title="待付款" :name="TeaRoomOrderStatusText.Pending"></wd-tab>
|
||||
<wd-tab title="预约单" :name="TeaRoomOrderStatusText.Pay"></wd-tab>
|
||||
<wd-tab title="已完结" :name="TeaRoomOrderStatusText.Finished"></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tabs mt-18rpx mx-30rpx">
|
||||
<!-- 这里可以尝试下不重新刷新获取列表 -->
|
||||
<!-- 全部 -->
|
||||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === 'all'">
|
||||
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
|
||||
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
|
||||
<!-- 待付款 -->
|
||||
<mescroll-body ref="mescrollItem1" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === OrderStatus.Pending">
|
||||
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
|
||||
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
|
||||
<!-- 预约单 -->
|
||||
<mescroll-body ref="mescrollItem2" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === OrderStatus.Reserved">
|
||||
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
|
||||
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
|
||||
<!-- 已完结 -->
|
||||
<mescroll-body ref="mescrollItem3" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" v-if="tab === OrderStatus.Finished">
|
||||
<view class="mb-20rpx" v-for="(item, index) in 10" :key="index">
|
||||
<combo-card :type="OrderSource.TeaRoom" :order-status="OrderStatus.Pending"></combo-card>
|
||||
<mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="OrderList.upCallback" :down="downOption" :up="upOption">
|
||||
<view class="mb-20rpx" v-for="(item, index) in list" :key="index">
|
||||
<combo-card :type="OrderSource.TeaRoom" :order="item"></combo-card>
|
||||
</view>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
@ -66,83 +43,85 @@
|
||||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { OrderSource, OrderStatus } from '@/utils/order'
|
||||
import { OrderSource, OrderStatus, TeaRoomOrderStatusText, TeaRoomOrderStatusValue } from '@/utils/order'
|
||||
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 { getTeaRoomOrderList } from '@/api/tea-room'
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
/* mescroll */
|
||||
// mescroll
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
|
||||
// 店铺类型
|
||||
|
||||
// 搜索
|
||||
const keywords = ref<string>('')
|
||||
const downOption = {
|
||||
auto: true
|
||||
}
|
||||
const upOption = {
|
||||
auto: true,
|
||||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||
}
|
||||
const orderStatus = ref<string>('')
|
||||
const list = ref<Array<any>>([]) // 茶室列表
|
||||
const keywords = ref<string>('') // 搜索关键词
|
||||
|
||||
// tab
|
||||
const tab = ref<string>('all')
|
||||
|
||||
onLoad((args) => {
|
||||
uni.$on('refreshOrderList', () => {
|
||||
list.value = []
|
||||
getMescroll().resetUpScroll()
|
||||
})
|
||||
|
||||
// 根据传过来的参数决定显示哪个tab
|
||||
if (args.orderStatus) {
|
||||
tab.value = args.orderStatus
|
||||
}
|
||||
})
|
||||
|
||||
onUnload(() => {
|
||||
uni.$off('refreshOrderList')
|
||||
})
|
||||
|
||||
const OrderList = {
|
||||
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||||
/**
|
||||
* 分页加载
|
||||
* @param mescroll
|
||||
*/
|
||||
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(); // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
|
||||
// 切换tab
|
||||
handleChangeTabs: (e: {index: number, name: string}) => {
|
||||
tab.value = e.name
|
||||
},
|
||||
|
||||
|
||||
// 返回上一页
|
||||
handleBack: () => {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
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() // 请求失败, 结束加载
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 切换订单状态
|
||||
* @param e
|
||||
*/
|
||||
handleChangeTabs: (e: {index: number, name: string}) => {
|
||||
tab.value = e.name
|
||||
if (e.name === TeaRoomOrderStatusText.Pending) {
|
||||
orderStatus.value = '0'
|
||||
} else {
|
||||
orderStatus.value = TeaRoomOrderStatusValue[e.name] || ''
|
||||
}
|
||||
|
||||
// 切换tab时,重置当前的mescroll
|
||||
list.value = []
|
||||
getMescroll().resetUpScroll();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<view>
|
||||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent;" :height="navbarHeight">
|
||||
<template #left>
|
||||
<view class="h-48rpx flex items-center" @click="storeRecharge.back">
|
||||
<view class="h-48rpx flex items-center" @click="StoreRecharge.back">
|
||||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
|
||||
<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">充值</view>
|
||||
</view>
|
||||
@ -38,10 +38,10 @@
|
||||
|
||||
<view class="bg-white mt-28rpx rounded-16rpx px-38rpx mx-32rpx h-150rpx flex items-center">
|
||||
<view class="text-[#303133] text-30rpx font-bold leading-42rpx">门店推广</view>
|
||||
<view class="flex-1 bg-[#F8F9FA] text-[#9CA3AF] rounded-8rpx ml-28rpx h-80rpx leading-80rpx rounded-8rpx pl-28rpx">上海浦东新区茶室店铺</view>
|
||||
<view class="flex-1 bg-[#F8F9FA] text-[#9CA3AF] rounded-8rpx ml-28rpx h-80rpx leading-80rpx rounded-8rpx pl-28rpx">{{ storeName }}</view>
|
||||
</view>
|
||||
|
||||
<view @click="storeRecharge.handleRecharge" class="fixed left-0 right-0 bottom-0 z-50 mx-60rpx flex items-center justify-center bg-[#4C9F44] rounded-8rpx text-[#fff] text-30rpx font-bold" :style="{ height: '90rpx', bottom: 'calc(env(safe-area-inset-bottom) + 26rpx)', city: canRecharge ? 1 : 0.5 }">
|
||||
<view @click="StoreRecharge.handleRecharge" class="fixed left-0 right-0 bottom-0 z-50 mx-60rpx flex items-center justify-center bg-[#4C9F44] rounded-8rpx text-[#fff] text-30rpx font-bold" :style="{ height: '90rpx', bottom: 'calc(env(safe-area-inset-bottom) + 26rpx)', city: canRecharge ? 1 : 0.5 }">
|
||||
确定转入
|
||||
</view>
|
||||
</view>
|
||||
@ -49,31 +49,29 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { getNavBarHeight } from '@/utils/index'
|
||||
import { toast } from '@/utils/toast'
|
||||
import { router } from '@/utils/tools'
|
||||
import { wxpay } from '@/hooks/usePay'
|
||||
|
||||
let navbarHeight = ref<number>(0)
|
||||
let OSS = inject('OSS')
|
||||
let rechargeMoney = ref<string>('')
|
||||
let canRecharge = ref<boolean>(false)
|
||||
|
||||
onLoad(() => {
|
||||
const storeId = ref<number>(0)
|
||||
const storeName = ref<string>('')
|
||||
|
||||
onLoad((args) => {
|
||||
navbarHeight.value = getNavBarHeight()
|
||||
|
||||
storeId.value = args.id
|
||||
storeName.value = args.storeName
|
||||
})
|
||||
|
||||
const storeRecharge = {
|
||||
back: () => {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
})
|
||||
},
|
||||
|
||||
const StoreRecharge = {
|
||||
handleRecharge: () => {
|
||||
if (rechargeMoney.value) {
|
||||
// 这里可以添加充值逻辑
|
||||
uni.showToast({
|
||||
title: '充值成功',
|
||||
icon: 'success'
|
||||
})
|
||||
storeRecharge.back()
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请输入充值金额',
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||
<route lang="jsonc" type="page">{
|
||||
"needLogin": true,
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -7,220 +8,6 @@
|
||||
}</route>
|
||||
<template>
|
||||
<view class="pb-180rpx">
|
||||
<view>
|
||||
<navbar :title="isGroupBuying ? '团购套餐' : '预定'" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="mt-20rpx mx-30rpx swiper">
|
||||
<wd-swiper value-key="image" height="320rpx"
|
||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
||||
@click="detail.handleClick" mode="aspectFit">
|
||||
</wd-swiper>
|
||||
</view>
|
||||
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="font-bold text-36rpx text-[#303133] leading-50rpx">这里是茶室的名称茶室的名称</view>
|
||||
<view class="mt-14rpx flex" v-if="!isGroupBuying">
|
||||
<view class="mr-20rpx flex items-start">
|
||||
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
|
||||
</view>
|
||||
<view class="flex items-start">
|
||||
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center" :class="`${ isGroupBuying ? 'mt-24rpx' : ''}`">
|
||||
<view class="text-[#303133] text-26rpx leading-48rpx font-500" v-if="isGroupBuying">“环境幽静，谈商务放松好场所”</view>
|
||||
<view class="text-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view>
|
||||
</view>
|
||||
<view v-if="isGroupBuying">
|
||||
<view class="mt-20rpx mb-24rpx" >
|
||||
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
|
||||
</view>
|
||||
<view class="text-[#303133] text-28rpx leading-48rpx">
|
||||
<view>
|
||||
<text class="font-bold mr-26rpx">须知</text>
|
||||
<text class="font-500">需预约</text>
|
||||
</view>
|
||||
<view class="mt-22rpx">
|
||||
<text class="font-bold mr-26rpx">保障</text>
|
||||
<text class="font-500">随时退</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!isGroupBuying">
|
||||
<!-- 使用说明 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">使用说明</view>
|
||||
<view class="">
|
||||
<rich-text :nodes="html"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预定时间 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="showReservePopup = true">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">3小时起订</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx">
|
||||
{{ totalHour > 0 ? `${totalHour}小时` : '请选择' }}
|
||||
</view>
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="detail.handleToCoupon(1)">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">优惠券</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">优惠券</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx">无可用</view>
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<view class="bg-white rounded-16rpx py-40rpx px-30rpx mt-24rpx mx-30rpx pay">
|
||||
<view>
|
||||
<wd-radio-group v-model="pay" shape="dot" checked-color="#4C9F44">
|
||||
<view class="flex justify-between items-center mb-40rpx" v-for="(item, index) in payList" :key="index" @click="pay = item.id">
|
||||
<view class="flex items-center">
|
||||
<wd-img width="50rpx" height="50rpx" :src="item.icon"></wd-img>
|
||||
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
<wd-radio :value="item.value">
|
||||
<view class="text-[#303133] text-26rpx leading-36rpx mr-20rpx">可用202.22</view>
|
||||
</wd-radio>
|
||||
</view>
|
||||
</view>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
|
||||
<view class="mb-30rpx">
|
||||
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between items-center" @click="detail.handleToCoupon(2)">
|
||||
<view class="text-30rpx text-[#303133] leading-42rpx">更多支付（团购券）</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[#4C9F44] text-28rpx leading-40rpx mr-32rpx">1张可用</view>
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="isGroupBuying">
|
||||
<!-- 套餐详情 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">套餐详情</view>
|
||||
<view class="">
|
||||
<rich-text :nodes="html"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 购买须知 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">购买须知</view>
|
||||
<view class="">
|
||||
<rich-text :nodes="html"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
|
||||
:style="{ height: '140rpx' }">
|
||||
<view class="mt-12rpx w-full" v-if="!isGroupBuying">
|
||||
<wd-gap height="2rpx" bgColor="#ECECEC"></wd-gap>
|
||||
</view>
|
||||
<view class="mt-22rpx flex justify-between items-center">
|
||||
<view class="flex items-center ml-60rpx">
|
||||
<view class="text-24rpx text-[#303133] leading-34rpx w-72rpx" v-if="!isGroupBuying">合计：</view>
|
||||
<view class="flex items-center h-56rpx mr-16rpx">
|
||||
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="23.02"></price-format>
|
||||
<view class="ml-20rpx" v-if="isGroupBuying">
|
||||
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center text-[#4C9F44]" v-if="!isGroupBuying" @click="showCostPopup = true">
|
||||
<view class="text-24rpx mr-10rpx">费用明细</view>
|
||||
<wd-icon :name="showCostPopup ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#4C9F44"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mr-30rpx">
|
||||
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click='showPayPopup = true'>{{ isGroupBuying ? '立即购买' : '立即预定' }}</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预定时间 -->
|
||||
<wd-popup v-model="showReservePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
|
||||
<view class="relative">
|
||||
<view class="absolute top-18rpx right-30rpx" @click="showReservePopup = false">
|
||||
<wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</view>
|
||||
<view class="w-[100%] h-100rpx flex justify-between items-center">
|
||||
<view
|
||||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-l-[8rpx]"
|
||||
:class="`${currentTimePicker == 'start' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||||
@click="currentTimePicker = 'start'">
|
||||
<view class="text-28rpx leading-40rpx">开始时间</view>
|
||||
<view class="text-26rpx leading-36rpx mt-2rpx">{{ startTimeLayout }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="w-[50%] h-[100%] flex flex-col items-center justify-center rounded-r-[8rpx]"
|
||||
:class="`${currentTimePicker == 'end' ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F6F7F8] text-[#303133]'}`"
|
||||
@click="currentTimePicker = 'end'">
|
||||
<view class="text-28rpx leading-40rpx">结束时间</view>
|
||||
<view class="text-26rpx leading-36rpx mt-2rpx">{{ endTimeLayout }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="date-picker">
|
||||
<view class="" v-if="currentTimePicker == 'start'">
|
||||
<wd-datetime-picker-view
|
||||
:minDate='minTimestamp'
|
||||
:maxDate='maxTimestamp'
|
||||
type="datetime"
|
||||
v-model="startTimeValue"
|
||||
:formatter="detail.handleFormatTime"
|
||||
@change="detail.handleStartTimePicker"
|
||||
/>
|
||||
</view>
|
||||
<view class="" v-if="currentTimePicker == 'end'">
|
||||
<wd-datetime-picker-view
|
||||
:minDate='minTimestamp'
|
||||
:maxDate='maxTimestamp'
|
||||
type="datetime"
|
||||
v-model="endTimeValue"
|
||||
:formatter="detail.handleFormatTime"
|
||||
@change="detail.handleEndTimePicker"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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 w-[50%] mr-28rpx' @click="detail.handleResetTime">重置</view>
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx w-[50%]' @click="detail.handleConfirmHour">确定（{{ totalHour }}小时）</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 费用明细 -->
|
||||
<wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showCostPopup = false" position="bottom">
|
||||
<view class='bg-[#FBFBFB] py-40rpx realtive'>
|
||||
@ -231,26 +18,26 @@
|
||||
<view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>茶室费</view>
|
||||
<view>￥640.00</view>
|
||||
<view>￥{{ bill.service.total }}</view>
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>茶室费（￥160元/小时）</view>
|
||||
<view>x4</view>
|
||||
<view>茶室费（￥{{ teaRoomPrice }}元/小时）</view>
|
||||
<view>x{{ bill.service.num }}</view>
|
||||
</view>
|
||||
|
||||
<view class="mt-52rpx">
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>茶室费</view>
|
||||
<view class="text-[#4C9F44]">-￥640.00</view>
|
||||
<view>优惠</view>
|
||||
<view class="text-[#4C9F44]">-￥{{ bill.totalDiscount }}</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>优惠券</view>
|
||||
<view>-￥20</view>
|
||||
<view>-￥{{ bill.coupon }}</view>
|
||||
</view>
|
||||
<view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
|
||||
<view>优惠券</view>
|
||||
<view>-￥20</view>
|
||||
<view>会员八折</view>
|
||||
<view>-￥{{ bill.discount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -260,7 +47,7 @@
|
||||
|
||||
<view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
|
||||
<view>实付金额</view>
|
||||
<view>￥640.00</view>
|
||||
<view>￥{{ bill.total }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -291,24 +78,218 @@
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx mx-60rpx box-border text-center mt-170rpx' @click="detail.handlePay">确定付款</view>
|
||||
<view class='bg-[#4C9F44] text-[#fff] rounded-8rpx h-90rpx leading-90rpx mx-60rpx box-border text-center mt-170rpx' @click="Detail.handlePay">确定付款</view>
|
||||
</view>
|
||||
</wd-popup>
|
||||
|
||||
<!-- 选择预定时间 -->
|
||||
<booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="Detail.handleChooseReserveTime"></booking-time>
|
||||
|
||||
<view>
|
||||
<navbar :title="isGroupBuying ? '团购套餐' : '预定'" custom-class='!bg-[#F6F7F8]'></navbar>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view class="mt-20rpx mx-30rpx swiper">
|
||||
<wd-swiper value-key="image" height="320rpx"
|
||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit">
|
||||
</wd-swiper>
|
||||
</view>
|
||||
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="font-bold text-36rpx text-[#303133] leading-50rpx">{{ teaRoom.name }}</view>
|
||||
<view class="mt-14rpx flex" v-if="!isGroupBuying">
|
||||
<template v-for="(label, labelIndex) in teaRoom.label" :key="labelIndex">
|
||||
<view class="mr-20rpx flex items-start" v-if="label.category_id == 1">
|
||||
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
|
||||
</view>
|
||||
<view class="flex items-start" v-if="label.category_id == 2">
|
||||
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="flex justify-between items-center" :class="`${ isGroupBuying ? 'mt-24rpx' : ''}`">
|
||||
<view class="text-[#303133] text-26rpx leading-48rpx font-500" v-if="isGroupBuying">“环境幽静，谈商务放松好场所”</view>
|
||||
<!-- <view class="text-[#6A6363] flex-1 text-22rpx leading-32rpx text-right">已售 10+</view> -->
|
||||
</view>
|
||||
<view v-if="isGroupBuying">
|
||||
<view class="mt-20rpx mb-24rpx" >
|
||||
<wd-gap height="2rpx" bgColor="#F6F7F9"></wd-gap>
|
||||
</view>
|
||||
<view class="text-[#303133] text-28rpx leading-48rpx">
|
||||
<view>
|
||||
<text class="font-bold mr-26rpx">须知</text>
|
||||
<text class="font-500">需预约</text>
|
||||
</view>
|
||||
<view class="mt-22rpx">
|
||||
<text class="font-bold mr-26rpx">保障</text>
|
||||
<text class="font-500">随时退</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="!isGroupBuying">
|
||||
<!-- 使用说明 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">使用说明</view>
|
||||
<view class="">
|
||||
<rich-text :nodes="teaRoom.textarea1"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 预定时间 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="showBookTimePopup = true">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">{{ sevenDay.minimum_time }}小时起订</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
|
||||
<template v-if="reserveTime.length > 0">
|
||||
{{ reserveTime[0] }} {{ reserveTime[1].join(',') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
请选择
|
||||
</template>
|
||||
</view>
|
||||
<view>
|
||||
<wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 优惠券 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="Detail.handleToCoupon(CouponType.Discount)">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">优惠券</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">优惠券</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx">
|
||||
<template v-if="selectedCoupon?.id > 0">
|
||||
{{ selectedCoupon.name }}
|
||||
</template>
|
||||
<template v-else>
|
||||
请选择
|
||||
</template>
|
||||
</view>
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 团购券 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx" @click="Detail.handleToCoupon(CouponType.Discount)">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">团购券</view>
|
||||
<view class="flex items-center justify-between">
|
||||
<view class="text-[26rpx] text-[#606266] leading-36rpx">团购券</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[28rpx] text-[#909399] leading-40rpx">
|
||||
<template v-if="selectedCoupon?.id > 0">
|
||||
{{ selectedCoupon.name }}
|
||||
</template>
|
||||
<template v-else>
|
||||
请选择
|
||||
</template>
|
||||
</view>
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<!-- <view class="bg-white rounded-16rpx py-40rpx px-30rpx mt-24rpx mx-30rpx pay">
|
||||
<view>
|
||||
<pay @pay="Detail.handleGetPayValue" :storeMoney="storeMoney"></pay>
|
||||
</view>
|
||||
|
||||
<view class="mt-40rpx mb-30rpx">
|
||||
<wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
|
||||
</view>
|
||||
|
||||
<view class="flex justify-between items-center" @click="Detail.handleToCoupon(CouponType.GroupBuy)">
|
||||
<view class="text-30rpx text-[#303133] leading-42rpx">更多支付（团购券）</view>
|
||||
<view class="flex items-center">
|
||||
<view class="text-[#4C9F44] text-28rpx leading-40rpx mr-32rpx">1张可用</view>
|
||||
<view class="mt-4rpx">
|
||||
<wd-icon name="chevron-right" size="22px" color="#909399"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view v-if="isGroupBuying">
|
||||
<!-- 套餐详情 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">套餐详情</view>
|
||||
<view class="">
|
||||
<rich-text :nodes="html"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 购买须知 -->
|
||||
<view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
|
||||
<view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">购买须知</view>
|
||||
<view class="">
|
||||
<rich-text :nodes="html"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
|
||||
:style="{ height: '140rpx' }">
|
||||
<view class="mt-12rpx w-full" v-if="!isGroupBuying">
|
||||
<wd-gap height="2rpx" bgColor="#ECECEC"></wd-gap>
|
||||
</view>
|
||||
<view class="mt-22rpx flex justify-between items-center">
|
||||
<view class="flex items-center ml-60rpx">
|
||||
<view class="text-24rpx text-[#303133] leading-34rpx w-72rpx" v-if="!isGroupBuying">合计：</view>
|
||||
<view class="flex items-center h-56rpx mr-16rpx">
|
||||
<price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="bill.total"></price-format>
|
||||
<view class="ml-20rpx" v-if="isGroupBuying">
|
||||
<price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center text-[#4C9F44]" v-if="!isGroupBuying" @click="showCostPopup = true">
|
||||
<view class="text-24rpx mr-10rpx">费用明细</view>
|
||||
<wd-icon :name="showCostPopup ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#4C9F44"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mr-30rpx">
|
||||
<wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click='Detail.handleSubmitOrder'>{{ isGroupBuying ? '立即购买' : '立即预定' }}</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {toast} from '@/utils/toast'
|
||||
import { ReserveServiceCategory, OrderType } from '@/utils/order'
|
||||
import type { ITeaSpecialistDetailsFields, ITeaSpecialistFuture7DaysResult, ITeaTypeListResult } from '@/api/types/tea'
|
||||
import { getNext7Days, getTeaRoomBalance, createTeaRoomOrder } from '@/api/tea-room'
|
||||
import { CouponType } from '@/utils/coupon'
|
||||
import { router, toTimes, toPlus, toMinus } from '@/utils/tools'
|
||||
import type {IUserInfoVo } from '@/api/types/login'
|
||||
import { useUserStore } from '@/store'
|
||||
import { getTeaRoomDetail, collectTeaRoom, getStoreTeaRoomList } from '@/api/tea-room'
|
||||
import Pay from '@/components/Pay.vue'
|
||||
import PriceFormat from '@/components/PriceFormat.vue'
|
||||
import {ReserveServiceCategory} from '@/utils/order'
|
||||
import BookingTime from '@/components/BookingTime.vue'
|
||||
import { getUserInfo } from '@/api/user'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
const swiperList = ref<string[]>([
|
||||
`${OSS}images/banner1.png`,
|
||||
`${OSS}images/banner1.png`,
|
||||
`${OSS}images/banner1.png`
|
||||
])
|
||||
// 用户信息
|
||||
const userInfo = ref<IUserInfoVo>(null)
|
||||
|
||||
const swiperList = ref<string[]>([])
|
||||
const current = ref<number>(0)
|
||||
const html: string = '<p>这里是富文本内容，需要后台传递</p>'
|
||||
const isGroupBuying: boolean = false // 是否是团购套餐
|
||||
@ -337,98 +318,132 @@
|
||||
}
|
||||
])
|
||||
|
||||
// 选择预定时间
|
||||
const showBookTimePopup = ref<boolean>(false)
|
||||
const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
|
||||
minimum_time: 0,
|
||||
time: []
|
||||
})
|
||||
const reserveTime = ref<Array<any>>([])
|
||||
|
||||
// 计算费用明细 service(服务费) travel(车马费) teaServiceFee(茶艺服务) coupon(优惠券) discount(会员优惠) totalDiscount(总优惠) total(总费用)
|
||||
const bill = ref<{service: any, travel: any, teaService: any, discount:number, totalDiscount: number, coupon: number, total: number}>({
|
||||
service: {
|
||||
total: 0,
|
||||
unitPrice: 0,
|
||||
num: 0,
|
||||
startTime: 0,
|
||||
endTime: 0,
|
||||
dayTime: '',
|
||||
startHour: '',
|
||||
endHour: ''
|
||||
},
|
||||
travel: {
|
||||
total: 0,
|
||||
unitPrice: 0,
|
||||
num: 0
|
||||
},
|
||||
teaService: {
|
||||
total: 0,
|
||||
tea: '',
|
||||
teaTotal: 0,
|
||||
cup: 0,
|
||||
peopleNum: 0
|
||||
},
|
||||
discount: 0,
|
||||
totalDiscount: 0,
|
||||
coupon: 0,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 预定时间相关
|
||||
const showReservePopup = ref<boolean>(false) // 预定时间popup
|
||||
const currentTimePicker = ref<string>('start') // 当前选择的时间类型
|
||||
const startTimeValue = ref<string>('') // 开始时间
|
||||
const endTimeValue = ref<string>('') // 结束时间
|
||||
const now = new Date()
|
||||
const minTimestamp = Date.now()
|
||||
|
||||
// 允许选择未来两个月的日期
|
||||
const maxTimestamp = new Date(now.getFullYear(), now.getMonth() + 1, now.getDate()).getTime()
|
||||
const startTimeLayout = ref<string>('')
|
||||
const endTimeLayout = ref<string>('')
|
||||
const totalHour = ref<number>(0)
|
||||
|
||||
// 费用明细相关
|
||||
const showCostPopup = ref<boolean>(false) // 费用明细popup
|
||||
const showPayPopup = ref<boolean>(false) // 支付popup
|
||||
|
||||
// 包间内容
|
||||
const storeId = ref<number>(0) // 门店ID
|
||||
const teaRoomId = ref<number>(0) // 包间ID
|
||||
const teaRoom = ref<any>({})
|
||||
const teaRoomPrice = ref<number>(0)
|
||||
|
||||
// 门店余额
|
||||
const storeMoney = ref<number>(0)
|
||||
|
||||
// 选择的优惠券
|
||||
const selectedCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
|
||||
|
||||
// 用户信息
|
||||
const user = ref<any>(null)
|
||||
|
||||
onLoad((args) => {
|
||||
storeId.value = Number(args.storeId)
|
||||
teaRoomId.value = Number(args.roomId)
|
||||
teaRoomPrice.value = Number(args.price) || 0
|
||||
Detail.handleInit()
|
||||
|
||||
if (args.type == ReserveServiceCategory.GroupBuying) {
|
||||
// TODO 如果是团购套餐则直接微信支付？
|
||||
pay.value = 3
|
||||
console.log("🚀 ~ pay.value:", pay.value)
|
||||
// console.log("🚀 ~ pay.value:", pay.value)
|
||||
}
|
||||
|
||||
// 获取用户需求详
|
||||
getUserInfo().then(res => {
|
||||
user.value = res
|
||||
})
|
||||
})
|
||||
|
||||
const detail = {
|
||||
startTimeTimestamp: 0, // 记录开始时间戳
|
||||
endTimeTimestamp: 0, // 记录结束时间戳
|
||||
const Detail = {
|
||||
/**
|
||||
* 初始包间详情
|
||||
*/
|
||||
handleInit: async () => {
|
||||
// 包间详情
|
||||
const userStore = useUserStore()
|
||||
userInfo.value = userStore.userInfo
|
||||
|
||||
handleStartTimePicker: (e: {value: number}) => {
|
||||
detail.startTimeTimestamp = e.value
|
||||
startTimeLayout.value = detail.formatDate(e.value)
|
||||
detail.totalTimestamp()
|
||||
},
|
||||
const res = await getTeaRoomDetail({
|
||||
id: storeId.value,
|
||||
latitude: uni.getStorageSync('latitude'),
|
||||
longitude: uni.getStorageSync('longitude'),
|
||||
user_id: userInfo.value.id || 0
|
||||
})
|
||||
teaRoom.value = res.details
|
||||
swiperList.value = teaRoom.value.img_arr
|
||||
|
||||
handleEndTimePicker: (e: {value: number}) => {
|
||||
detail.endTimeTimestamp = e.value
|
||||
endTimeLayout.value = detail.formatDate(e.value)
|
||||
detail.totalTimestamp()
|
||||
},
|
||||
// 预定时间
|
||||
const next7 = await getNext7Days()
|
||||
Object.assign(sevenDay, next7)
|
||||
|
||||
handleFormatTime: (type: string, values: string) => {
|
||||
if (type === 'year') {
|
||||
return `${values}年`
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${values}月`
|
||||
}
|
||||
if (type === 'date') {
|
||||
return `${values}日`
|
||||
}
|
||||
if (type === 'hour') {
|
||||
return `${values}时`
|
||||
}
|
||||
if (type === 'minute') {
|
||||
return `${values}分`
|
||||
}
|
||||
return values
|
||||
},
|
||||
|
||||
handleClick: (item: any) => {
|
||||
// 处理点击事件
|
||||
console.log('Clicked item:', item)
|
||||
},
|
||||
|
||||
|
||||
// 重置预定时间
|
||||
handleResetTime: () => {
|
||||
startTimeValue.value = ''
|
||||
endTimeValue.value = ''
|
||||
startTimeLayout.value = ''
|
||||
endTimeLayout.value = ''
|
||||
detail.startTimeTimestamp = 0
|
||||
detail.endTimeTimestamp = 0
|
||||
totalHour.value = 0
|
||||
currentTimePicker.value = 'start'
|
||||
},
|
||||
|
||||
// 确定时间
|
||||
handleConfirmHour: () => {
|
||||
if (totalHour.value <= 0) {
|
||||
toast.info('至少起订N小时')
|
||||
return
|
||||
}
|
||||
showReservePopup.value = false
|
||||
// 获取门店余额
|
||||
const balance = await getTeaRoomBalance({ store_id: storeId.value })
|
||||
storeMoney.value = balance.data.money || 0
|
||||
},
|
||||
|
||||
// 跳转优惠券页面
|
||||
handleToCoupon(type) {
|
||||
// 1：优惠券 2：团购券
|
||||
uni.navigateTo({ url: `/bundle/coupon/coupon?type=${type}` })
|
||||
if (type === CouponType.Discount) {
|
||||
if (reserveTime.value.length == 0) {
|
||||
toast.info('请选择预定时间')
|
||||
return
|
||||
}
|
||||
|
||||
uni.$on('chooseCoupon', params => {
|
||||
uni.$off('chooseCoupon')
|
||||
selectedCoupon.value = {id: params.coupon.user_coupon_id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
|
||||
bill.value.coupon = params.coupon.coupon_price
|
||||
bill.value.totalDiscount = Number(toPlus(bill.value.discount, params.coupon.coupon_price))
|
||||
})
|
||||
|
||||
// 获取预定了几个小时
|
||||
const count = reserveTime.value[1].length
|
||||
router.navigateTo(`/bundle/coupon/coupon?id=${teaRoomId.value}&numbers=${count}&type=${type}`)
|
||||
}
|
||||
},
|
||||
|
||||
handlePay: () => {
|
||||
@ -437,34 +452,104 @@
|
||||
// uni.navigateTo({ url: '/bundle/reserve-room/result' })
|
||||
},
|
||||
|
||||
// 格式化时间
|
||||
formatDate: (timestamp: number) => {
|
||||
const date = new Date(timestamp)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hour = String(date.getHours()).padStart(2, '0')
|
||||
const minute = String(date.getMinutes()).padStart(2, '0')
|
||||
// 选中预定时间
|
||||
handleChooseReserveTime: (params: any) => {
|
||||
reserveTime.value = params
|
||||
|
||||
return `${year}-${month}-${day} ${hour}:${minute}`
|
||||
bill.value.service = {
|
||||
total: toTimes(teaRoomPrice.value, params[1].length),
|
||||
unitPrice: teaRoomPrice.value,
|
||||
num: params[1].length,
|
||||
startTime: params[2][0],
|
||||
endTime: params[2][params[2].length - 1],
|
||||
dayTime: params[0],
|
||||
startHour: params[1][0],
|
||||
endHour: params[1][params[1].length - 1]
|
||||
}
|
||||
|
||||
// TODO 这里需要判断是否开通VIP享受八折
|
||||
if (user.value.member == 1) {
|
||||
bill.value.discount = Number(toMinus(bill.value.service.total, (bill.value.service.total * 0.8).toFixed(2)))
|
||||
}
|
||||
},
|
||||
|
||||
// 计算起订时间时长
|
||||
totalTimestamp: () => {
|
||||
if (detail.startTimeTimestamp && detail.endTimeTimestamp) {
|
||||
const diffMs = detail.endTimeTimestamp - detail.startTimeTimestamp
|
||||
// 计算小时，保留一位小数
|
||||
const hours = (diffMs / 1000 / 60 / 60)
|
||||
const result = Math.round(hours * 10) / 10 // 保留一位小数
|
||||
if (result >= 0) {
|
||||
totalHour.value = result
|
||||
}
|
||||
return result
|
||||
}
|
||||
totalHour.value = 0
|
||||
return 0
|
||||
// 选择支付方式
|
||||
handleGetPayValue: (value: number) => {
|
||||
pay.value = value
|
||||
},
|
||||
|
||||
/**
|
||||
* 提交订单
|
||||
*/
|
||||
handleSubmitOrder: async () => {
|
||||
if (reserveTime.value.length == 0) {
|
||||
toast.info('请选择预定时间')
|
||||
return
|
||||
}
|
||||
|
||||
const params = {
|
||||
store_id: storeId.value,
|
||||
room_id: teaRoomId.value,
|
||||
day_time: bill.value.service.dayTime,
|
||||
start_time: bill.value.service.startHour,
|
||||
end_time: bill.value.service.endHour,
|
||||
user_coupon_id: selectedCoupon.value.id || 0,
|
||||
hours: bill.value.service.num
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '提交中...'
|
||||
})
|
||||
|
||||
try {
|
||||
const res = await createTeaRoomOrder(params)
|
||||
|
||||
uni.hideLoading()
|
||||
|
||||
uni.$on('payment', params => {
|
||||
console.log("🚀 ~ params:", params)
|
||||
setTimeout(() => {
|
||||
uni.$off("payment")
|
||||
if (params.result) {
|
||||
uni.redirectTo({
|
||||
url: `/pages/notice/reserve?type=room&orderId=${params.orderId}`
|
||||
})
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/bundle/order/tea-room/order-list?orderStatus=all'
|
||||
})
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
router.navigateTo(`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&orderId=${res.id}&teaRoomName=${teaRoom.value.name}&storeId=${storeId.value}`)
|
||||
}, 800)
|
||||
} catch (error) {
|
||||
uni.hideLoading()
|
||||
toast.info('订单提交失败，请稍后重试')
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const billTotal = computed(() => {
|
||||
const s = Number(bill.value.service.total) || 0
|
||||
const t = Number(bill.value.travel.total) || 0
|
||||
const ts = Number(bill.value.teaService.total) || 0
|
||||
|
||||
let total = Number(toPlus(s, t, ts))
|
||||
total = Number(toMinus(total, bill.value.discount))
|
||||
if (bill.value.coupon > 0 ) {
|
||||
total + bill.value.coupon
|
||||
return Number(toMinus(total, bill.value.coupon))
|
||||
}
|
||||
return total
|
||||
})
|
||||
|
||||
watch(billTotal, (val) => {
|
||||
bill.value.total = val
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -12,7 +12,6 @@
|
||||
<template #right>
|
||||
<view class="flex items-center ml-114rpx right-slot">
|
||||
<view class="mr-16rpx flex items-center" @click="Room.handleCollect">
|
||||
<!-- <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img> -->
|
||||
<template v-if="teaRoom.collect > 0">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img>
|
||||
</template>
|
||||
@ -20,7 +19,7 @@
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`"></wd-img>
|
||||
</template>
|
||||
</view>
|
||||
<view @click="Room.handleService" class="flex items-center">
|
||||
<view @click="showServicePopup = true" class="flex items-center">
|
||||
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_kefu.png`"></wd-img>
|
||||
</view>
|
||||
</view>
|
||||
@ -31,8 +30,7 @@
|
||||
<view class="mt-20rpx mx-30rpx swiper">
|
||||
<view>
|
||||
<wd-swiper value-key="image" height="320rpx"
|
||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current"
|
||||
@click="Room.handleClick" mode="aspectFit">
|
||||
:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit">
|
||||
</wd-swiper>
|
||||
</view>
|
||||
<view class="mt-38rpx flex justify-between">
|
||||
@ -50,7 +48,7 @@
|
||||
<view @click="Room.handleToRecharge">
|
||||
<recharge-btn name="充值"></recharge-btn>
|
||||
</view>
|
||||
<view class="text-24rpx text-[#818CA9] mt-18rpx">1分钟前有人充值</view>
|
||||
<view class="text-24rpx text-[#818CA9] mt-18rpx">{{ teaRoom.rechange_times }} 分钟前有人充值</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-26rpx">
|
||||
@ -64,7 +62,7 @@
|
||||
</view>
|
||||
<view class="ml-2rpx text-26rpx text-[#606266] line-2">{{ teaRoom.address }}</view>
|
||||
</view>
|
||||
<view class="text-[#92928C] text-24rpx ml-38rpx mt-14rpx">距您14km</view>
|
||||
<view class="text-[#92928C] text-24rpx ml-38rpx mt-14rpx">距您{{ teaRoom.distance }}km</view>
|
||||
</view>
|
||||
<view class="flex items-center mr-32rpx">
|
||||
<view class="text-center mr-20rpx" @click="Room.handleLocation">
|
||||
@ -84,27 +82,33 @@
|
||||
<view class="tabs">
|
||||
<wd-tabs v-model="tab" swipeable slidable="always" @change="Room.handleChangeTab" :lazy="false">
|
||||
<wd-tab title="茶室预定" v-if="storeType != 2">
|
||||
<view class="content mx-30rpx mt-34rpx">
|
||||
<!-- <view class="content mx-30rpx mt-34rpx">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Room.upCallback">
|
||||
<room-list :is-reserve="true" :store-type="storeType"></room-list>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view> -->
|
||||
</wd-tab>
|
||||
<wd-tab title="团购套餐">
|
||||
<view class="content mx-30rpx mt-34rpx">
|
||||
<!-- <view class="content mx-30rpx mt-34rpx">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Room.upCallback">
|
||||
<room-list :is-group-buying="true" :store-type="storeType"></room-list>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view> -->
|
||||
</wd-tab>
|
||||
</wd-tabs>
|
||||
|
||||
<view class="mx-30rpx mt-34rpx">
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" :down="downOption" :up="upOption" @up="Room.upCallback">
|
||||
<room-list :is-reserve="tabIndexs === 0" :is-group-buying="tabIndexs === 1" :store-type="storeType" :list="list"></room-list>
|
||||
</mescroll-body>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 客服弹窗 -->
|
||||
<wd-popup v-model="showServicePopup" lock-scroll custom-style="border-radius:30rpx;" @close="showServicePopup = false">
|
||||
<view class="text-center w-440rpx h-560rpx flex flex-col justify-center items-center">
|
||||
<view class="w-240rpx h-240rpx" @click="Room.handleOpenServiceSheet">
|
||||
<wd-img width='100%' height='100%' :src="`${OSS}images/reserve_room/reserve_room_image3.png`"></wd-img>
|
||||
<wd-img width='100%' height='100%' :src="teaRoom.customer_service"></wd-img>
|
||||
</view>
|
||||
<view class="text-36rpx text-[#303133] leading-50rpx mt-54rpx">门店客服</view>
|
||||
<view class="text-28rpx text-[#818CA9] leading-50rpx mt-22rpx">点击二维码添加客服</view>
|
||||
@ -121,10 +125,11 @@
|
||||
import RechargeBtn from '@/components/RechargeBtn.vue'
|
||||
import RoomList from '@/components/reserve/RoomList.vue'
|
||||
import {toast} from '@/utils/toast'
|
||||
import { getTeaRoomDetail, collectTeaRoom } from '@/api/tea-room'
|
||||
import { getTeaRoomDetail, collectTeaRoom, getStoreTeaRoomList } from '@/api/tea-room'
|
||||
import type { ITeaRoomDetailResult } from '@/api/types/tea-room'
|
||||
import type {IUserInfoVo } from '@/api/types/login'
|
||||
import { useUserStore } from '@/store'
|
||||
import { router } from '@/utils/tools'
|
||||
|
||||
const rightPadding = inject('capsuleOffset')
|
||||
const OSS = inject('OSS')
|
||||
@ -140,24 +145,31 @@
|
||||
const teaRoomId = ref<number>(0)
|
||||
const teaRoom = ref<any>({})
|
||||
|
||||
// 评分
|
||||
const rate = ref<number>(4)
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref<IUserInfoVo>(null)
|
||||
|
||||
// tab
|
||||
const tab = ref<number>(0)
|
||||
|
||||
const goods = ref<Array<any>[]>([])
|
||||
// 弹窗
|
||||
const showAction = ref<boolean>(false)
|
||||
const sheetMenu = ref([])
|
||||
const showServicePopup = ref<boolean>(false)
|
||||
|
||||
const storeType = ref<number>(1) // 1：直营 2：加盟
|
||||
// 店铺类型 1：直营 2：加盟
|
||||
const storeType = ref<number>(1)
|
||||
|
||||
/* mescroll */
|
||||
const { mescrollInit, downCallback } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
// 分页
|
||||
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
||||
const downOption = {
|
||||
auto: true
|
||||
}
|
||||
const upOption = {
|
||||
auto: true,
|
||||
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
||||
}
|
||||
const list = ref<Array<any>>([])
|
||||
const tabIndexs = ref<number>(0)
|
||||
|
||||
onLoad((args) => {
|
||||
console.log("🚀 ~ args:", uni.getStorageSync('latitude'), uni.getStorageSync('longitude'))
|
||||
@ -170,7 +182,36 @@
|
||||
const Room = {
|
||||
sheetMenuType: '', // 记录菜单类型
|
||||
|
||||
// 初始化
|
||||
/**
|
||||
* 获取茶室预定和团购套餐列表
|
||||
* @param mescroll
|
||||
*/
|
||||
upCallback: (mescroll) => {
|
||||
const filter = {
|
||||
page: mescroll.num,
|
||||
size: mescroll.size,
|
||||
id: teaRoomId.value
|
||||
}
|
||||
|
||||
if (tabIndexs.value === 0) {
|
||||
getStoreTeaRoomList(filter).then( res => {
|
||||
console.log("🚀 ~ res:", 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 {
|
||||
// 处理团购套餐列表
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化茶室详情
|
||||
*/
|
||||
handleInit: async () => {
|
||||
const userStore = useUserStore()
|
||||
userInfo.value = userStore.userInfo
|
||||
@ -182,51 +223,14 @@
|
||||
user_id: userInfo.value.id || 0
|
||||
})
|
||||
teaRoom.value = res.details
|
||||
console.log("🚀 ~ teaRoom.value:", teaRoom.value)
|
||||
storeType.value = teaRoom.value.operation_type
|
||||
|
||||
swiperList.value = teaRoom.value.img_arr
|
||||
},
|
||||
|
||||
// 上拉加载的回调: 其中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); //追加新数据
|
||||
|
||||
// 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(); // 请求失败, 结束加载
|
||||
// })
|
||||
},
|
||||
|
||||
// 处理收藏
|
||||
/**
|
||||
* 处理收藏
|
||||
*/
|
||||
handleCollect: async () => {
|
||||
let status = teaRoom.value.collect == 0 ? 1 : 0
|
||||
await collectTeaRoom({
|
||||
@ -237,12 +241,9 @@
|
||||
teaRoom.value.collect = teaRoom.value.collect == 0 ? 1 : 0
|
||||
},
|
||||
|
||||
// 打开客服弹窗
|
||||
handleService: () => {
|
||||
showServicePopup.value = true
|
||||
},
|
||||
|
||||
// 打开客服二维码弹窗
|
||||
/**
|
||||
* 打开客服二维码弹窗
|
||||
*/
|
||||
handleOpenServiceSheet: () => {
|
||||
Room.sheetMenuType = 'service'
|
||||
showAction.value = true
|
||||
@ -258,7 +259,9 @@
|
||||
]
|
||||
},
|
||||
|
||||
// 处理菜单选择
|
||||
/**
|
||||
* 处理菜单选择
|
||||
*/
|
||||
handleSelectMenu: (item: any) => {
|
||||
if (Room.sheetMenuType == 'service') {
|
||||
// 处理客服相关的菜单项
|
||||
@ -278,7 +281,9 @@
|
||||
showAction.value = false // 关闭菜单
|
||||
},
|
||||
|
||||
// 处理导航逻辑
|
||||
/**
|
||||
* 处理导航逻辑
|
||||
*/
|
||||
handleLocation: () => {
|
||||
uni.openLocation({
|
||||
latitude: Number(teaRoom.value.latitude),
|
||||
@ -288,7 +293,9 @@
|
||||
})
|
||||
},
|
||||
|
||||
// 处理拨打电话逻辑
|
||||
/**
|
||||
* 处理拨打电话逻辑
|
||||
*/
|
||||
handleCallPhone: () => {
|
||||
Room.sheetMenuType = 'call'
|
||||
showAction.value = true
|
||||
@ -304,21 +311,20 @@
|
||||
]
|
||||
},
|
||||
|
||||
// tab切换获取index
|
||||
/**
|
||||
* tab切换获取index
|
||||
*/
|
||||
handleChangeTab: (item: { index: number }) => {
|
||||
// tabIndexs.value = item.index
|
||||
// scrollToLastY()
|
||||
},
|
||||
|
||||
handleClick: (item: any) => {
|
||||
// 处理点击事件
|
||||
console.log('Clicked item:', item)
|
||||
tabIndexs.value = item.index
|
||||
list.value = []
|
||||
getMescroll().resetUpScroll()
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到门店充值页面
|
||||
*/
|
||||
handleToRecharge: () => {
|
||||
uni.navigateTo({
|
||||
url: '/bundle/store-recharge/store-recharge'
|
||||
})
|
||||
router.navigateTo(`/bundle/store-recharge/store-recharge?id=${teaRoom.value.id}&storeName=${teaRoom.value.name}`)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
// "needLogin": true,
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<route lang="jsonc" type="page">{
|
||||
// "needLogin": true,
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
|
||||
@ -7,24 +7,24 @@
|
||||
<view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">选择时间</view>
|
||||
|
||||
<view class="">
|
||||
<view class="booking-time ">
|
||||
<wd-tabs v-model="selectedDay" color="#4C9F44">
|
||||
<block v-for="item in days" :key="item">
|
||||
<view class="booking-time">
|
||||
<wd-tabs v-model="selectedDay" color="#4C9F44" @click="bookingTime.handleChangeTimeTab">
|
||||
<block v-for="item in day.time" :key="item">
|
||||
<scroll-view scroll-y>
|
||||
<wd-tab :title="`${item}`" :name="item">
|
||||
<wd-tab :title="`${item.display}`" :name="item.display">
|
||||
<view class="">
|
||||
<view class="!h-500rpx mt-30rpx">
|
||||
<view class="grid grid-cols-4 gap-x-20rpx gap-y-20rpx mx-30rpx">
|
||||
<view v-for="item in timeList" :key="item.time"
|
||||
<view v-for="item2 in item.time_slots" :key="item2.start_time"
|
||||
class="h-72rpx rounded-16rpx flex items-center justify-center text-28rpx leading-40rpx"
|
||||
:class="[
|
||||
item.disabled
|
||||
item2.disabled == 0
|
||||
? 'bg-[#F7F7F7] text-[#C9C9C9]' // 禁用高亮
|
||||
: selectedTime.includes(item.time)
|
||||
: selectedTime.includes(item2.start_time)
|
||||
? 'bg-[#F1F8F0] text-[#4C9F44]' // 选中高亮
|
||||
: 'bg-[#F7F7F7] text-[#303133]', // 可选高亮
|
||||
]" @click="!item.disabled && bookingTime.handleSelectTime(item.time)">
|
||||
{{ item.time }}
|
||||
]" @click="item2.disabled == 1 && bookingTime.handleSelectTime(item2.start_time, item2.timestamp)">
|
||||
{{ item2.start_time }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -55,6 +55,8 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="BookingTime">
|
||||
import {toast} from '@/utils/toast'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
/**
|
||||
@ -67,78 +69,88 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
day: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
// ...其它props
|
||||
})
|
||||
|
||||
|
||||
// 初始化时间
|
||||
onMounted(() => {
|
||||
bookingTime.handleInitTime()
|
||||
// bookingTime.handleInitTime()
|
||||
})
|
||||
|
||||
/** 日期相关 **/
|
||||
const timeList = [
|
||||
{ time: '09:00', disabled: true },
|
||||
{ time: '09:30', disabled: false },
|
||||
{ time: '10:00', disabled: false },
|
||||
{ time: '10:30', disabled: false },
|
||||
{ time: '11:00', disabled: false },
|
||||
{ time: '11:30', disabled: false },
|
||||
]
|
||||
const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
|
||||
|
||||
const days = ref<string[]>([])
|
||||
const selectedDay = ref<number>(0)
|
||||
const selectedTime = ref<string[]>([])
|
||||
const selectedTimeStamp = ref<number[]>([])
|
||||
const countSelectedTime = ref<number>(0)
|
||||
|
||||
const bookingTime = {
|
||||
// 初始化时间逻辑
|
||||
handleInitTime: () => {
|
||||
const today = new Date()
|
||||
const result: string[] = []
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const d = new Date(today)
|
||||
d.setDate(today.getDate() + i)
|
||||
const month = d.getMonth() + 1
|
||||
const date = d.getDate()
|
||||
const week = weekMap[d.getDay()]
|
||||
result.push(`${month}/${date}${week}`)
|
||||
}
|
||||
days.value = result
|
||||
},
|
||||
|
||||
// 选择的时间高亮显示
|
||||
handleSelectTime: (time: string) => {
|
||||
handleSelectTime: (time: string, timestamp: number) => {
|
||||
const idx = selectedTime.value.indexOf(time)
|
||||
if (idx > -1) {
|
||||
selectedTime.value.splice(idx, 1) // 取消选中
|
||||
selectedTimeStamp.value.splice(idx, 1)
|
||||
} else {
|
||||
selectedTime.value.push(time) // 选中
|
||||
selectedTimeStamp.value.push(timestamp)
|
||||
}
|
||||
|
||||
// 计算时长
|
||||
countSelectedTime.value = selectedTime.value.length * 0.5
|
||||
countSelectedTime.value = selectedTime.value.length * 1
|
||||
},
|
||||
|
||||
// 确认选择的时间
|
||||
handleConfirmSelectedTime: () => {
|
||||
console.log('确认选择的时间:', selectedDay.value, selectedTime.value)
|
||||
if (selectedTime.value.length === 0) {
|
||||
toast.info('请选择时间')
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedTime.value.length < props.day.minimum_time) {
|
||||
toast.info(props.day.minimum_time + '小时起订')
|
||||
return
|
||||
}
|
||||
|
||||
const data = [
|
||||
selectedDay.value,
|
||||
selectedTime.value.sort(),
|
||||
selectedTimeStamp.value.sort(),
|
||||
]
|
||||
emit('selectedTime', data)
|
||||
showPopup.value = false
|
||||
},
|
||||
|
||||
// 切换时间tab的时候把之前选中的时间重置
|
||||
handleChangeTimeTab: () => {
|
||||
selectedTime.value = []
|
||||
selectedTimeStamp.value = []
|
||||
countSelectedTime.value = 0
|
||||
},
|
||||
|
||||
// 重置选择的时间
|
||||
resetSelectedTime: () => {
|
||||
selectedTime.value = []
|
||||
selectedTimeStamp.value = []
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
const showPopup = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val: boolean) => emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const emit = defineEmits(['update:modelValue', 'selectedTime'])
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@ -12,14 +12,15 @@
|
||||
<view class="ml-20rpx text-30rpx text-[#303133] leading-42rpx">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="absolute right-0 top-6rpx right-60rpx" v-if="item.type !== PayCategory.WeChatPay">可用{{ userInfo.user_money }}</view>
|
||||
<view class="absolute right-0 top-6rpx right-60rpx" v-if="item.type == PayCategory.PlatformBalance">可用{{ userInfo.user_money }}</view>
|
||||
<view class="absolute right-0 top-6rpx right-60rpx" v-if="item.type == PayCategory.StoreBalance && storeMoney > 0">可用{{ storeMoney }}</view>
|
||||
</wd-radio>
|
||||
</block>
|
||||
</wd-radio-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="Pay">
|
||||
<script lang="ts" setup name="RechargeBtn">
|
||||
/**
|
||||
* Pay 支付组件
|
||||
* @description 用于展示支付
|
||||
@ -71,6 +72,11 @@
|
||||
hideWechat: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
storeMoney: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
<template>
|
||||
<view class="mb-20rpx" @click="onCheck(coupon.id)">
|
||||
<view class="mb-20rpx" @click="onCheck(coupon.user_coupon_id)">
|
||||
<view class="coupon h-210rpx flex items-center">
|
||||
<view class="w-260rpx h-[100%] rounded-l-16rpx rounded-tr-0 rounded-br-0 flex flex-col items-center justify-center" :class="canUse ? 'bg-[#4C9F44]' : 'bg-[#F2F2F2]'">
|
||||
<view class="flex" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">
|
||||
<view class="text-72rpx leading-100rpx">{{ coupon.amount }}</view>
|
||||
<view class="text-52rpx leading-100rpx">{{ coupon.coupon_price }}</view>
|
||||
<view class="text-32rpx leading-44rpx mt-40rpx ml-10rpx">元</view>
|
||||
</view>
|
||||
<view class="text-26rpx font-400 leading-36rpx text-center" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">满120元可用</view>
|
||||
<view class="text-26rpx font-400 leading-36rpx text-center" :class="canUse ? 'text-[#fff]' : 'text-[#BFC2CC]'">满{{ coupon.use_price }}元可用</view>
|
||||
</view>
|
||||
<view class="bg-[#fff] w-490rpx h-[100%] rounded-r-16rpx rounded-tl-0 rounded-bl-0 flex justify-between items-center">
|
||||
<view class="ml-30rpx line-1">
|
||||
<view class="text-34rpx leading-48rpx line-1" :class="canUse ? 'text-[#303133]' : 'text-[#909399]'">茶室优惠</view>
|
||||
<view class="mt-40rpx text-[#909399] text-24rpx leading-34rpx" :class="canUse ? 'text-[#909399]' : 'text-[#BFC2CC]'">有效期至 2022-08-12</view>
|
||||
<view class="text-34rpx leading-48rpx line-1" :class="canUse ? 'text-[#303133]' : 'text-[#909399]'">{{ coupon.title }}</view>
|
||||
<view class="mt-40rpx text-[#909399] text-24rpx leading-34rpx" :class="canUse ? 'text-[#909399]' : 'text-[#BFC2CC]'">有效期至 {{ coupon.effect_time }}</view>
|
||||
</view>
|
||||
<view class="h-100% mr-70rpx mt-58rpx" v-if="showChecked">
|
||||
<wd-radio :value="coupon.id" shape="dot" :disabled="!canUse"></wd-radio>
|
||||
<wd-radio :value="coupon.user_coupon_id" shape="dot" :disabled="!canUse"></wd-radio>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -30,9 +30,11 @@
|
||||
defineProps<{
|
||||
coupon: {
|
||||
id: number
|
||||
amount: number
|
||||
limit: number
|
||||
expire: string
|
||||
coupon_price: number
|
||||
use_price: number
|
||||
title: string
|
||||
effect_time: string
|
||||
user_coupon_id: number
|
||||
}
|
||||
canUse: boolean
|
||||
showChecked: boolean
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<view class="mr-10rpx flex items-center">
|
||||
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex items-center" @click="comboCard.handleToStore">
|
||||
<view class="flex items-center" @click="ComboCard.handleToStore">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
|
||||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||||
</view>
|
||||
@ -24,7 +24,7 @@
|
||||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view @click="comboCard.handleToOrderDetail">
|
||||
<view @click="ComboCard.handleToOrderDetail">
|
||||
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字</view>
|
||||
<view>
|
||||
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
|
||||
@ -51,7 +51,7 @@
|
||||
<view class="mr-10rpx flex items-center">
|
||||
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex items-center" @click="comboCard.handleToStore">
|
||||
<view class="flex items-center" @click="ComboCard.handleToStore">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
|
||||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||||
</view>
|
||||
@ -68,7 +68,7 @@
|
||||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view @click="comboCard.handleToOrderDetail">
|
||||
<view @click="ComboCard.handleToOrderDetail">
|
||||
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字这是套餐的名字</view>
|
||||
<view>
|
||||
<wd-tag bg-color="#F3F3F3" color="#606266" custom-class="!px-16rpx">3小时</wd-tag>
|
||||
@ -91,18 +91,17 @@
|
||||
<view class="mr-10rpx flex items-center">
|
||||
<wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex items-center" @click="comboCard.handleToStore">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx w-400rpx line-1">这是茶馆的名称这是茶馆的名称这是茶馆的名称</view>
|
||||
<view class="flex items-center w-400rpx" @click="ComboCard.handleToStore">
|
||||
<view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1">{{ order.store_name }}</view>
|
||||
<wd-icon name="chevron-right" size="32rpx"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="font-400 text-28rpx leading-40rpx mt-12rpx text-[#4C9F44]">
|
||||
<text v-if="orderStatus === OrderStatus.Consuming">消费中</text>
|
||||
<text v-if="orderStatus === OrderStatus.Reserved">已预约</text>
|
||||
<text v-if="orderStatus === OrderStatus.Serving">服务中</text>
|
||||
<text v-if="orderStatus === OrderStatus.Finished" class="text-[#606266]">完成</text>
|
||||
<text v-if="orderStatus === OrderStatus.Pending" class="text-[#FF5951]" >待付款</text>
|
||||
<text v-if="orderStatus === OrderStatus.Cancelled" class="text-[#C9C9C9]" >订单取消</text>
|
||||
<text v-if="order.order_status === TeaRoomOrderStatus.Pending" class="text-[#FF5951]" >待付款</text>
|
||||
<text v-if="order.order_status === TeaRoomOrderStatus.Consumption">消费中</text>
|
||||
<text v-if="order.order_status === TeaRoomOrderStatus.Pay">已预约</text>
|
||||
<text v-if="order.order_status === TeaRoomOrderStatus.Finished" class="text-[#606266]">完成</text>
|
||||
<text v-if="order.order_status === TeaRoomOrderStatus.Cancelled" class="text-[#C9C9C9]" >订单取消</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mt-22rpx">
|
||||
@ -111,31 +110,32 @@
|
||||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1">
|
||||
<view @click="comboCard.handleToOrderDetail">
|
||||
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">这是茶室包间的名称</view>
|
||||
<view @click="ComboCard.handleToOrderDetail">
|
||||
<view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">{{ order.room_name }}</view>
|
||||
<view class="font-400 leading-36rpx text-26rpx text-[#606266] mt-34rpx">
|
||||
<view>预约时间：03/18 08:00-12:00</view>
|
||||
<view class="mt-18rpx">预约时长：2小时</view>
|
||||
<view>预约时间：{{ order.day_time }} {{ order.start_time }}-{{ order.end_time }}</view>
|
||||
<view class="mt-18rpx">预约时长：{{ order.hours }}小时</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled">
|
||||
<!-- 操作按钮 -->
|
||||
<template v-if="order.order_status === OrderStatus.Finished || order.order_status === OrderStatus.Cancelled">
|
||||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end"
|
||||
@click="comboCard.handleDeleteOrder(OrderSource.TeaRoom)">
|
||||
@click="ComboCard.handleDeleteOrder(OrderSource.TeaRoom)">
|
||||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center">
|
||||
删除订单
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<template v-if="orderStatus === OrderStatus.Pending">
|
||||
<template v-if="order.order_status === TeaRoomOrderStatus.Pending">
|
||||
<view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
|
||||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
|
||||
@click="comboCard.handleCancelOrder(OrderSource.TeaRoom)">取消订单</view>
|
||||
@click="ComboCard.handleCancelOrder(OrderSource.TeaRoom)">取消订单</view>
|
||||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
|
||||
@click="comboCard.handleToPayOrder(OrderSource.TeaRoom)">去支付</view>
|
||||
@click="ComboCard.handleToPayOrder(OrderSource.TeaRoom)">去支付</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
@ -147,7 +147,7 @@
|
||||
<view class="mr-28rpx">
|
||||
<wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
|
||||
</view>
|
||||
<view class="flex-1" @click="comboCard.handleToOrderDetail">
|
||||
<view class="flex-1" @click="ComboCard.handleToOrderDetail">
|
||||
<view class="flex items-center relative">
|
||||
<view class="w-400rpx flex items-center">
|
||||
<view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">茶艺师</view>
|
||||
@ -187,7 +187,7 @@
|
||||
<view>
|
||||
<view v-if="orderStatus === OrderStatus.Finished || orderStatus === OrderStatus.Cancelled"
|
||||
class="flex items-center text-28rpx mt-28rpx justify-end"
|
||||
@click="comboCard.handleDeleteOrder(OrderSource.TeaSpecialist)">
|
||||
@click="ComboCard.handleDeleteOrder(OrderSource.TeaSpecialist)">
|
||||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] flex items-center justify-center">
|
||||
删除订单
|
||||
</view>
|
||||
@ -195,11 +195,11 @@
|
||||
<view v-if="orderStatus === OrderStatus.Pending"
|
||||
class="flex items-center text-28rpx mt-28rpx justify-end">
|
||||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
|
||||
@click="comboCard.handleCancelOrder(OrderSource.TeaSpecialist)">
|
||||
@click="ComboCard.handleCancelOrder(OrderSource.TeaSpecialist)">
|
||||
取消订单
|
||||
</view>
|
||||
<view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
|
||||
@click="comboCard.handleToPayOrder(OrderSource.TeaSpecialist)">去支付</view>
|
||||
@click="ComboCard.handleToPayOrder(OrderSource.TeaSpecialist)">去支付</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -210,9 +210,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ComboCard">
|
||||
import { OrderSource, OrderStatus } from '@/utils/order'
|
||||
import { OrderSource, OrderStatus, TeaRoomOrderStatus } from '@/utils/order'
|
||||
import { useMessage } from 'wot-design-uni'
|
||||
import { toast } from '@/utils/toast'
|
||||
import { handleTRCancelOrderHooks, handleTRDeleteOrderHooks, handleTRToPayHooks } from '@/hooks/useOrder'
|
||||
|
||||
/**
|
||||
* ComboCard 套餐卡片组件
|
||||
@ -236,14 +237,18 @@
|
||||
orderStatus: {
|
||||
type: String,
|
||||
default: OrderStatus.ToUse
|
||||
},
|
||||
|
||||
order: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
|
||||
// 取消订单弹窗
|
||||
const message = useMessage('wd-message-box-slot')
|
||||
|
||||
|
||||
const comboCard = {
|
||||
const ComboCard = {
|
||||
// 跳转到对饮茶室的详情页
|
||||
handleToStore: () => {
|
||||
uni.navigateTo({
|
||||
@ -276,7 +281,8 @@
|
||||
// TODO 这里调用删除抖音订单的接口
|
||||
break;
|
||||
case OrderSource.TeaRoom:
|
||||
// TODO 这里调用删除茶室订单的接口
|
||||
// 这里调用删除茶室订单的接口
|
||||
handleTRDeleteOrderHooks(props.order.id)
|
||||
break;
|
||||
case OrderSource.TeaSpecialist:
|
||||
// TODO 这里调用删除茶室订单的接口
|
||||
@ -306,6 +312,7 @@
|
||||
customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
|
||||
}
|
||||
}).then((res) => {
|
||||
if (res.action == 'confirm') {
|
||||
switch (source) {
|
||||
case OrderSource.Direct:
|
||||
// TODO 这里调用删除直营订单的接口
|
||||
@ -317,7 +324,8 @@
|
||||
// TODO 这里调用删除抖音订单的接口
|
||||
break;
|
||||
case OrderSource.TeaRoom:
|
||||
// TODO 这里调用删除茶室订单的接口
|
||||
// 这里调用删除茶室订单的接口
|
||||
handleTRCancelOrderHooks(props.order.id)
|
||||
break;
|
||||
case OrderSource.TeaSpecialist:
|
||||
// TODO 这里调用删除茶室订单的接口
|
||||
@ -325,8 +333,8 @@
|
||||
default:
|
||||
break;
|
||||
}
|
||||
// 点击确认按钮回调事件
|
||||
toast.info('订单取消成功')
|
||||
}
|
||||
|
||||
}).catch(() => {
|
||||
// 点击取消按钮回调事件
|
||||
})
|
||||
@ -385,9 +393,7 @@
|
||||
})
|
||||
break;
|
||||
case OrderSource.TeaRoom:
|
||||
uni.navigateTo({
|
||||
url: `/bundle/order/tea-room/order-detail?orderStatus=${props.orderStatus}&toPay=true`
|
||||
})
|
||||
handleTRToPayHooks(props.order.id, props.order.room_name, props.order.store_id)
|
||||
break;
|
||||
case OrderSource.TeaSpecialist:
|
||||
uni.navigateTo({
|
||||
|
||||
@ -1,26 +1,28 @@
|
||||
<template>
|
||||
<view v-for="(item, index) in 10" :key="index">
|
||||
<view v-for="(item, index) in list" :key="index">
|
||||
<view class="flex items-center">
|
||||
<view class="w-200rpx h-200rpx">
|
||||
<wd-img width="100%" height="100%" :src="`${OSS}images/reserve_room/reserve_room_image2.png`"
|
||||
radius="10rpx"/>
|
||||
</view>
|
||||
<view class="flex-1 ml-32rpx" v-if="!isGroupBuying">
|
||||
<view class="text-28rpx text-[#303133] leading-40rpx line-1 w-420rpx">双人包间这个是标题名双人包间这个是标题名双人包间这个是标题名</view>
|
||||
<view class="text-28rpx text-[#303133] leading-40rpx line-1 w-420rpx">{{ item.title }}</view>
|
||||
<view class="mt-22rpx flex">
|
||||
<view class="mr-20rpx flex items-start">
|
||||
<template v-for="(label, labelIndex) in item.label" :key="labelIndex">
|
||||
<view class="mr-20rpx flex items-start" v-if="label.category_id == 1">
|
||||
<wd-tag color="#40AE36" bg-color="#40AE36" plain custom-class="!rounded-4rpx">文艺小清新</wd-tag>
|
||||
</view>
|
||||
<view class="flex items-start">
|
||||
<view class="flex items-start" v-if="label.category_id == 2">
|
||||
<wd-tag color="#F55726" bg-color="#F55726" plain>全息投影</wd-tag>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="flex justify-between items-end">
|
||||
<price-format color="#FF5951" class="m-r-10" :first-size="34" :second-size="26"
|
||||
:subscript-size="26" :price="23.02" weight="500"></price-format>
|
||||
:subscript-size="26" :price="item.price" weight="500"></price-format>
|
||||
<view>
|
||||
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 10+</view>
|
||||
<view class="w-104rpx h-52rpx mt-16rpx text-26rpx font-400 text-[#4C9F44] leading-52rpx text-center border-[2rpx] border-[#4C9F44] rounded-10rpx" @click="roomList.toPage('detail', 1)">预定</view>
|
||||
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 {{ item.buy_nums > 10 ? item.buy_nums + '+' : item.buy_nums }}</view>
|
||||
<view class="w-104rpx h-52rpx mt-16rpx text-26rpx font-400 text-[#4C9F44] leading-52rpx text-center border-[2rpx] border-[#4C9F44] rounded-10rpx" @click="RoomList.toPage('detail', item.store_id, item.id, item.price)">预定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -49,14 +51,15 @@
|
||||
</view>
|
||||
<view class="absolute bottom-0 right-0">
|
||||
<view class="text-[#6A6363] text-22rpx leading-30rpx">已售 10+</view>
|
||||
<view class="w-104rpx h-52rpx mt-16rpx text-26rpx font-400 text-[#4C9F44] leading-52rpx text-center border-[2rpx] border-[#4C9F44] rounded-10rpx" @click="roomList.toPage('detail', 1)">预定</view>
|
||||
<view class="w-104rpx h-52rpx mt-16rpx text-26rpx font-400 text-[#4C9F44] leading-52rpx text-center border-[2rpx] border-[#4C9F44] rounded-10rpx" @click="RoomList.toPage('detail', item.store_id, item.id, item.price)">预定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex justify-around items-center ml-12rpx mt-18rpx" v-if="isReserve && !isGroupBuying">
|
||||
<view class="w-20rpx text-center" v-for="(item, index) in 24" :key="index">
|
||||
<view class="font-400 text-20rpx text-[#606266] leading-28rpx">{{ item }}</view>
|
||||
<view class="h-12rpx rounded-6rpx bg-[#4C9F44] mt-4rpx" :class="`${index === 1 || index === 11 ? 'bg-[#C9C9C9]' : ''}`"></view>
|
||||
<view class="flex justify-around items-center ml-12rpx mt-18rpx" v-if="isReserve">
|
||||
<view class="w-20rpx text-center" v-for="(timeItem, timeIndex) in item.room_time" :key="timeIndex">
|
||||
<view class="font-400 text-20rpx text-[#606266] leading-28rpx">{{ timeItem.value }}</view>
|
||||
<!-- timeItem.status: 1可选 2不可选 -->
|
||||
<view class="h-12rpx rounded-6rpx bg-[#4C9F44] mt-4rpx" :class="`${timeItem.status == 2 ? 'bg-[#C9C9C9]' : ''}`"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="my-24rpx gap" v-if="index !== props.list.length - 1">
|
||||
@ -73,6 +76,7 @@
|
||||
|
||||
import PriceFormat from '@/components/PriceFormat.vue'
|
||||
import {ReserveServiceCategory} from '@/utils/order'
|
||||
import { router } from '@/utils/tools';
|
||||
|
||||
const OSS = inject('OSS')
|
||||
|
||||
@ -80,7 +84,7 @@
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
type: Array as () => Array<any>,
|
||||
default: () => []
|
||||
},
|
||||
// 是否开启预定
|
||||
@ -100,13 +104,11 @@
|
||||
}
|
||||
})
|
||||
|
||||
const roomList = {
|
||||
toPage: (type: string, id: number) => {
|
||||
const RoomList = {
|
||||
toPage: (type: string, id: number, roomId: number, price: number) => {
|
||||
if (type === 'detail') {
|
||||
let type = props.isGroupBuying ? ReserveServiceCategory.GroupBuying : ReserveServiceCategory.ReserveRoom
|
||||
uni.navigateTo({
|
||||
url: `/bundle/tea-room/detail?id=${id}&type=${type}`
|
||||
})
|
||||
const type = props.isGroupBuying ? ReserveServiceCategory.GroupBuying : ReserveServiceCategory.ReserveRoom
|
||||
router.navigateTo(`/bundle/tea-room/detail?storeId=${id}&roomId=${roomId}&type=${type}&price=${price}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
102
src/hooks/useOrder.ts
Normal file
102
src/hooks/useOrder.ts
Normal file
@ -0,0 +1,102 @@
|
||||
import { router } from '@/utils/tools'
|
||||
import { toast } from '@/utils/toast'
|
||||
import {
|
||||
cancelTeaRoomOrder,
|
||||
deleteTeaRoomOrder,
|
||||
confirmTeaRoomOrder
|
||||
} from '@/api/tea-room'
|
||||
import { OrderType } from '@/utils/order'
|
||||
|
||||
|
||||
/**
|
||||
* 包间-取消订单
|
||||
* @param orderId 订单ID
|
||||
*/
|
||||
export async function handleTRCancelOrderHooks(orderId: number) {
|
||||
try {
|
||||
await cancelTeaRoomOrder({ id: orderId })
|
||||
uni.$emit('refreshOrderList')
|
||||
uni.$emit('refreshOrderDetail')
|
||||
} catch (error) {
|
||||
router.navigateBack()
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 重新支付
|
||||
* @param orderId 订单ID
|
||||
* @param teaSpecialistId 茶艺师ID
|
||||
* @returns
|
||||
*/
|
||||
export function handleTRToPayHooks(orderId: number, teaRoomName: string, storeId: number) {
|
||||
try {
|
||||
uni.$on('payment', params => {
|
||||
setTimeout(() => {
|
||||
uni.$off("payment")
|
||||
uni.$emit('refreshOrderList')
|
||||
uni.$emit('refreshOrderDetail')
|
||||
if (params.result) {
|
||||
uni.redirectTo({
|
||||
url: `/pages/notice/reserve?type=room&orderId=${orderId}`
|
||||
})
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/bundle/order/tea-room/order-list?orderStatus=all'
|
||||
})
|
||||
}
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
router.navigateTo(`/pages/cashier/cashier?from=${OrderType.TeaRoomOrder}&orderId=${orderId}&teaRoomName=${teaRoomName}&storeId=${storeId}`)
|
||||
}, 800)
|
||||
} catch (error) {
|
||||
toast.info('订单提交失败，请稍后重试')
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 包间-删除订单
|
||||
*/
|
||||
export async function handleTRDeleteOrderHooks(orderId: number) {
|
||||
try {
|
||||
await deleteTeaRoomOrder({ id: orderId })
|
||||
uni.$emit('refreshOrderList')
|
||||
uni.$emit('refreshOrderDetail')
|
||||
} catch (error) {
|
||||
router.navigateBack()
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认(完成)订单
|
||||
*/
|
||||
export async function handleTRConfirmOrderHooks(orderId: number) {
|
||||
try {
|
||||
await confirmTeaRoomOrder({ id: orderId })
|
||||
uni.$emit('refreshOrderList')
|
||||
uni.$emit('refreshOrderDetail')
|
||||
} catch (error) {
|
||||
router.navigateBack()
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 订单退款
|
||||
* @param orderId 订单ID
|
||||
* @param orderType 订单类型
|
||||
*/
|
||||
// export async function handleRefundOrderHooks(orderId: number, orderType: string) {
|
||||
// try {
|
||||
// const response = await refundTeaSpecialistOrder({ id: orderId, order_type: orderType })
|
||||
// uni.$emit('refreshOrderList')
|
||||
// uni.$emit('refreshOrderDetail')
|
||||
// } catch (error) {
|
||||
// router.navigateBack()
|
||||
// throw error
|
||||
// }
|
||||
// }
|
||||
37
src/hooks/usePay.ts
Normal file
37
src/hooks/usePay.ts
Normal file
@ -0,0 +1,37 @@
|
||||
export function wxpay(opt) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let params;
|
||||
// #ifdef MP-WEIXIN
|
||||
params = {
|
||||
timeStamp: opt.timeStamp,
|
||||
// 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
|
||||
nonceStr: opt.nonceStr,
|
||||
// 支付签名随机串，不长于 32 位
|
||||
package: opt.package,
|
||||
// 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
|
||||
signType: opt.signType,
|
||||
// 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
|
||||
paySign: opt.paySign,
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
params = {
|
||||
orderInfo: opt
|
||||
}
|
||||
// #endif
|
||||
console.log(params)
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
...params,
|
||||
success: res => {
|
||||
resolve('success');
|
||||
},
|
||||
cancel: res => {
|
||||
resolve('fail');
|
||||
},
|
||||
fail: res => {
|
||||
resolve('fail');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -79,6 +79,15 @@
|
||||
"navigationBarTitleText": "Vue Query 请求演示"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/cashier/cashier",
|
||||
"type": "page",
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/city/city",
|
||||
"type": "page",
|
||||
@ -167,6 +176,7 @@
|
||||
{
|
||||
"path": "collect/collect",
|
||||
"type": "page",
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -175,6 +185,7 @@
|
||||
{
|
||||
"path": "coupon/coupon",
|
||||
"type": "page",
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -183,6 +194,7 @@
|
||||
{
|
||||
"path": "coupon/my-coupon",
|
||||
"type": "page",
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -255,6 +267,7 @@
|
||||
{
|
||||
"path": "tea-room/detail",
|
||||
"type": "page",
|
||||
"needLogin": true,
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -280,6 +293,7 @@
|
||||
{
|
||||
"path": "vip/buy",
|
||||
"type": "page",
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -304,6 +318,7 @@
|
||||
{
|
||||
"path": "wallet/wallet",
|
||||
"type": "page",
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
@ -361,6 +376,7 @@
|
||||
{
|
||||
"path": "order/platform/order-list",
|
||||
"type": "page",
|
||||
"needLogin": true,
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
|
||||
223
src/pages/cashier/cashier.vue
Normal file
223
src/pages/cashier/cashier.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<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">
|
||||
<price-format color="#303133" :first-size="44" :second-size="44" :subscript-size="28" :price="money"></price-format>
|
||||
</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" :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, getTeaSpecialistOrderDetails, teaSpecialistPrepay, teaSpecialistPay } 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 { useUserStore } from '@/store'
|
||||
import type {IUserInfoVo } from '@/api/types/login'
|
||||
import { getTeaRoomBalance, getTeaRoomOrderDetail } from '@/api/tea-room'
|
||||
import { OrderType } from '@/utils/order'
|
||||
|
||||
// 用户信息
|
||||
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 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)
|
||||
|
||||
onLoad(async (args) => {
|
||||
// 获取门店余额
|
||||
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.teaRoomName) {
|
||||
title.value = `茶室预定-${args.teaRoomName}`
|
||||
} else {
|
||||
title.value = '茶室预定支付'
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
const userStore = useUserStore()
|
||||
userInfo.value = userStore.userInfo
|
||||
|
||||
// 获取订单详情
|
||||
if (args.from == OrderType.TeaRoomOrder && args.orderId) {
|
||||
// 获取订单详情
|
||||
orderId.value = Number(args.orderId)
|
||||
Cashier.handleGetOrderDetails()
|
||||
}
|
||||
|
||||
console.log('页面加载')
|
||||
})
|
||||
|
||||
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
|
||||
console.log("🚀 ~ order.value:", order.value)
|
||||
money.value = Number(res.details.amount_price)
|
||||
},
|
||||
|
||||
// 获取支付方式
|
||||
handleGetPayValue: (value: number) => {
|
||||
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') {
|
||||
try {
|
||||
// 预支付
|
||||
const res1 = await teaSpecialistPrepay({
|
||||
order_id: orderId.value,
|
||||
from: 'balance',
|
||||
pay_way: pay.value,
|
||||
order_source: 2 //订单来源：1-小程序;2-h5;3app
|
||||
})
|
||||
|
||||
// 支付
|
||||
const res2 = await teaSpecialistPay({
|
||||
id: res1.pay_id
|
||||
})
|
||||
result.value = 'success'
|
||||
} catch (error) {
|
||||
result.value = 'fail'
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
uni.navigateBack({delta: 1})
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: $cz-page-background;
|
||||
}
|
||||
</style>
|
||||
@ -31,8 +31,7 @@
|
||||
<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"
|
||||
@click="Index.handleClick" mode="aspectFit"></wd-swiper>
|
||||
: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">
|
||||
@ -113,7 +112,7 @@
|
||||
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
||||
import { LOCATION_DENY_TIME_KEY, handleEnsureLocationAuthHooks } from '@/hooks/useLocation'
|
||||
import { getHomeBannerList } from '@/api/home'
|
||||
import { getHomeTeaRoomList } from '@/api/tea-room'
|
||||
import { getHomeTeaStoreList } from '@/api/tea-room'
|
||||
import { useUserStore } from '@/store'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
@ -162,7 +161,10 @@
|
||||
})
|
||||
|
||||
const Index = {
|
||||
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
|
||||
/**
|
||||
* 茶室门店列表
|
||||
* @param mescroll
|
||||
*/
|
||||
upCallback: (mescroll) => {
|
||||
const userStore = useUserStore()
|
||||
const userId = userStore.userInfo?.id || 0
|
||||
@ -176,7 +178,7 @@
|
||||
user_id: userId
|
||||
}
|
||||
|
||||
getHomeTeaRoomList(filter).then( res => {
|
||||
getHomeTeaStoreList(filter).then( res => {
|
||||
console.log("🚀 ~ res:", res)
|
||||
const curPageData = res.list || [] // 当前页数据
|
||||
if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
|
||||
@ -187,18 +189,25 @@
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化首页数据
|
||||
*/
|
||||
handleInit: () => {
|
||||
// 初始化操作
|
||||
getHomeBannerList().then(res => {
|
||||
swiperList.value = res.list.map(item => item.address)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转城市选择
|
||||
*/
|
||||
handleToCity: () => {
|
||||
router.navigateTo(`/pages/city/city?lat=${latitude.value}&lng=${longitude.value}`)
|
||||
},
|
||||
|
||||
// 跳转茶室搜索
|
||||
/**
|
||||
* 跳转茶室搜索
|
||||
*/
|
||||
handleToSearch: () => {
|
||||
uni.$on('refreshTeaRoomList', params => {
|
||||
keywords.value = params.keywords
|
||||
@ -209,18 +218,18 @@
|
||||
router.navigateTo(`/pages/search/search?keywords=${keywords.value}`)
|
||||
},
|
||||
|
||||
handleClick: (item: any) => {
|
||||
// 处理点击事件
|
||||
console.log('Clicked item:', item)
|
||||
},
|
||||
|
||||
/**
|
||||
* 跳转到预约茶室页面
|
||||
*/
|
||||
handleToReserveRoom: (id: number = 0) => {
|
||||
// 跳转到预约茶室页面
|
||||
uni.navigateTo({
|
||||
url: `/bundle/tea-room/room?id=${id}`
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 重置搜索
|
||||
*/
|
||||
handleResetSearch: () => {
|
||||
list.value = []
|
||||
getMescroll().resetUpScroll()
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</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 ? '王大帅' : '立即登录' }}</view>
|
||||
<view class="text-[#303133] text-36rpx leading-50rpx ml-8rpx">{{ isLogin ? userInfo.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">
|
||||
@ -52,21 +52,21 @@
|
||||
<!-- 余额显示 -->
|
||||
<view class="mt-16rpx mx-30rpx flex justify-between">
|
||||
<view class="flex items-center">
|
||||
<view class="w-160rpx text-[#303133] text-center" @click="My.handleToCoupon">
|
||||
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? 51 : '- -' }}</view>
|
||||
<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="My.handleToCollect">
|
||||
<view class="font-bold text-36rpx leading-50rpx"> {{ isLogin ? 51 : '- -' }}</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="My.handleToWallet">
|
||||
<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 fon-bold">{{ isLogin ? '￥2106.3623' : '- -' }}</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>
|
||||
@ -82,7 +82,7 @@
|
||||
<view class="w-40rpx h-36rpx flex items-center">
|
||||
<wd-img width="100%" height="100%" :src="`${OSS}icon/icon_vip.png`" mode="aspectFill"></wd-img>
|
||||
</view>
|
||||
<view class="flex items-center leading-34rpx" @click="My.handleToVipBenefits">
|
||||
<view class="flex items-center leading-34rpx" @click="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>
|
||||
@ -104,16 +104,16 @@
|
||||
</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 10" :key="index">
|
||||
<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">20</text>
|
||||
<text class="text-30rpx">{{ item.coupon_price }}</text>
|
||||
</view>
|
||||
<view class="font-400 text-20rpx leading-28rpx text-[#1C1C1D]">满200可用</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="isClaimCoupon ? 'bg-[#E6E3DF]' : 'bg-[#FCCA84]'" @click="isClaimCoupon = true">
|
||||
{{ isClaimCoupon ? '已领取' : '立即领取' }}
|
||||
:class="item.use == 1 ? 'bg-[#E6E3DF]' : 'bg-[#FCCA84]'" @click="My.handleClaimCoupon(item.id)">
|
||||
{{ item.use == 1 ? '已领取' : '立即领取' }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -134,7 +134,7 @@
|
||||
|
||||
<!-- 团购 -->
|
||||
<view class="bg-white rounded-16rpx mx-30rpx mt-28rpx px-56rpx py-48rpx flex items-center justify-between">
|
||||
<view class="flex items-center" @click="My.handleToDouYinGroupBuying">
|
||||
<view class="flex items-center" @click="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>
|
||||
@ -146,7 +146,7 @@
|
||||
<view>
|
||||
<wd-divider vertical />
|
||||
</view>
|
||||
<view class="flex items-center" @click="My.handleToPlatformGroupBuying">
|
||||
<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>
|
||||
@ -244,6 +244,7 @@
|
||||
import { toast } from '@/utils/toast'
|
||||
import { router } from '@/utils/tools'
|
||||
import { useUserStore } from '@/store'
|
||||
import { getUserInfo, getMyCoupon, claimMyCoupon } from '@/api/user'
|
||||
|
||||
const OSS = inject('OSS')
|
||||
const navbarHeight = inject('navbarHeight')
|
||||
@ -251,6 +252,7 @@
|
||||
|
||||
// 登录信息相关
|
||||
const userInfo = ref<any>(null)
|
||||
const user = ref<any>(null)
|
||||
const isLogin = ref<boolean>(false)
|
||||
const isVip = ref<boolean>(true)
|
||||
|
||||
@ -286,22 +288,45 @@
|
||||
const sheetMenu = ref<{ name: string}[]>([])
|
||||
|
||||
// 领取优惠券
|
||||
const isClaimCoupon = ref<boolean>(false)
|
||||
const couponList = ref<any[]>([])
|
||||
|
||||
onShow(() => {
|
||||
const userStore = useUserStore()
|
||||
isLogin.value = userStore.isLoggedIn
|
||||
console.log("🚀 ~ isLogin.value:", isLogin.value)
|
||||
if (isLogin.value) {
|
||||
userInfo.value = userStore.userInfo
|
||||
|
||||
// 获取用户详情信息接口
|
||||
getUserInfo().then(res => {
|
||||
user.value = res
|
||||
})
|
||||
} else {
|
||||
userInfo.value = null
|
||||
user.value = null
|
||||
}
|
||||
})
|
||||
|
||||
onLoad(() => {
|
||||
|
||||
My.handleInit()
|
||||
})
|
||||
|
||||
const My = {
|
||||
// 跳转抖音团购
|
||||
handleToDouYinGroupBuying: () => {
|
||||
router.navigateTo('/bundle/order/douyin/order-list')
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
handleInit: () => {
|
||||
getMyCoupon().then(res => {
|
||||
couponList.value = Array.isArray(res) ? res : []
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 领取优惠券
|
||||
*/
|
||||
handleClaimCoupon: async (id: number) => {
|
||||
await claimMyCoupon({id})
|
||||
toast.info('领取成功')
|
||||
My.handleInit()
|
||||
},
|
||||
|
||||
// 跳转到个人信息
|
||||
@ -313,11 +338,6 @@
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转平台团购
|
||||
handleToPlatformGroupBuying: () => {
|
||||
router.navigateTo('/bundle/order/platform/order-list')
|
||||
},
|
||||
|
||||
// 点击显示客服电话
|
||||
handleShowService: () => {
|
||||
showServiceMobile.value = true
|
||||
@ -341,46 +361,6 @@
|
||||
toast.info('请先登录')
|
||||
router.navigateTo('/pages/login/login', 800)
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到会员权益
|
||||
handleToVipBenefits: () => {
|
||||
if (isLogin.value) {
|
||||
router.navigateTo('/bundle/vip/my-benefits')
|
||||
} else {
|
||||
toast.info('请先登录')
|
||||
router.navigateTo('/pages/login/login', 800)
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到优惠券
|
||||
handleToCoupon: () => {
|
||||
if (isLogin.value) {
|
||||
router.navigateTo('/bundle/coupon/my-coupon')
|
||||
} else {
|
||||
toast.info('请先登录')
|
||||
router.navigateTo('/pages/login/login', 800)
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到收藏
|
||||
handleToCollect: () => {
|
||||
if (isLogin.value) {
|
||||
router.navigateTo('/bundle/collect/collect')
|
||||
} else {
|
||||
toast.info('请先登录')
|
||||
router.navigateTo('/pages/login/login', 800)
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到我的钱包
|
||||
handleToWallet: () => {
|
||||
if (isLogin.value) {
|
||||
router.navigateTo('/bundle/wallet/wallet')
|
||||
} else {
|
||||
toast.info('请先登录')
|
||||
router.navigateTo('/pages/login/login', 800)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
4
src/utils/coupon.ts
Normal file
4
src/utils/coupon.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export const CouponType = {
|
||||
Discount: 1, // 优惠券
|
||||
GroupBuy: 2 // 团购券
|
||||
}
|
||||
@ -211,6 +211,7 @@ export const TeaSpecialistOrderStatusTextValue: Record<TeaSpecialistOrderStatus,
|
||||
},
|
||||
}
|
||||
|
||||
// 茶艺师订单状态文本对应值
|
||||
export const TeaSpecialistOrderStatusValue: Record<TeaSpecialistOrderStatusText, string | number> = {
|
||||
[TeaSpecialistOrderStatusText.All]: '',
|
||||
[TeaSpecialistOrderStatusText.Pending]: 0,
|
||||
@ -220,3 +221,56 @@ export const TeaSpecialistOrderStatusValue: Record<TeaSpecialistOrderStatusText,
|
||||
[TeaSpecialistOrderStatusText.Serving]: 4,
|
||||
[TeaSpecialistOrderStatusText.Finished]: 5,
|
||||
}
|
||||
|
||||
// 下单类型
|
||||
export const OrderType = {
|
||||
TeaRoomOrder: 'teaRoomOrder',
|
||||
}
|
||||
|
||||
// 包间订单状态数字(根据UI图还缺已退款、待接单、售后中、售后完成)
|
||||
export enum TeaRoomOrderStatus {
|
||||
Pending = 0, // 待付款
|
||||
Pay = 1, // 已支付(预约单)
|
||||
Consumption = 2, // 消费中
|
||||
Finished = 3, // 完成
|
||||
Cancelled = 4, // 订单取消
|
||||
}
|
||||
|
||||
// 包间订单状态文本
|
||||
export enum TeaRoomOrderStatusText {
|
||||
All = 'all', // 待付款
|
||||
Pending = 'pending', // 待付款
|
||||
Pay = 'pay', // 已支付(预约单)
|
||||
Consumption = 'consumption', // 消费中
|
||||
Finished = 'finished', // 已完成
|
||||
Cancelled = 'cancelled', // 已取消
|
||||
}
|
||||
|
||||
// 状态内容映射
|
||||
export const TeaRoomOrderStatusTextValue: Record<TeaRoomOrderStatus, any> = {
|
||||
[TeaRoomOrderStatus.Pending]: {
|
||||
title: '等待付款'
|
||||
},
|
||||
[TeaRoomOrderStatus.Pay]: {
|
||||
title: '已预约'
|
||||
},
|
||||
[TeaRoomOrderStatus.Consumption]: {
|
||||
title: '消费中'
|
||||
},
|
||||
[TeaRoomOrderStatus.Finished]: {
|
||||
title: '交易完成'
|
||||
},
|
||||
[TeaRoomOrderStatus.Cancelled]: {
|
||||
title: '订单取消'
|
||||
},
|
||||
}
|
||||
|
||||
// 包间订单状态文本对应值
|
||||
export const TeaRoomOrderStatusValue: Record<TeaRoomOrderStatusText, string | number> = {
|
||||
[TeaRoomOrderStatusText.All]: '',
|
||||
[TeaRoomOrderStatusText.Pending]: 0,
|
||||
[TeaRoomOrderStatusText.Pay]: 1,
|
||||
[TeaRoomOrderStatusText.Consumption]: 2,
|
||||
[TeaRoomOrderStatusText.Finished]: 3,
|
||||
[TeaRoomOrderStatusText.Cancelled]: 4,
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user