68e41ca962
- 数据库：orders/activities 新增 latitude/longitude（含存量表 ALTER 迁移） - 服务端：Haversine 计算 distanceKm/distanceText，派单池支持 lat/lng/radius 过滤并按距离升序；历史无坐标订单用腾讯地理编码兜底并回写缓存 - 新增 /api/lbs/reverse 逆地址解析（Key 仅服务端持有，登录 + 限流） - 小程序：雷达/接单大厅改用真实定位与真实距离，删除全部写死演示距离；下单页新增地图选点，组局页保存选点经纬度 - 修复接单大厅点接单会新建订单的问题，改为真正 claimOrder 认领 - 新增 lbs-distance 护栏（110 套件/729 用例全绿）
1362 行
37 KiB
Vue
1362 行
37 KiB
Vue
<template>
|
||
<view class="create-order-container" :class="{ 'theme-warm': currentThemeKey === 'warm' }">
|
||
<!-- 服务大神与项目信息 -->
|
||
<view class="order-card">
|
||
<view class="expert-profile">
|
||
<image class="expert-avatar" :src="expert.avatar" mode="aspectFill" />
|
||
<view class="expert-meta">
|
||
<view class="name-row">
|
||
<text class="expert-name">{{ expert.nickname }}</text>
|
||
<text class="game-tag">{{ expert.game }}</text>
|
||
</view>
|
||
<text class="service-title">{{ serviceView.title }}</text>
|
||
</view>
|
||
<view class="price-single">
|
||
<text class="price-unit">¥{{ serviceView.price }}/{{ serviceView.unit }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 数量/时长步进器 -->
|
||
<view class="order-card">
|
||
<view class="stepper-row">
|
||
<view class="stepper-label">
|
||
<text class="label-main">购买时长</text>
|
||
<text class="label-sub">以{{ serviceView.unit }}为计费单位</text>
|
||
</view>
|
||
<view class="stepper-box">
|
||
<button class="step-btn btn-active" :disabled="hours <= 1" @click="changeHours(-1)">－</button>
|
||
<text class="step-val">{{ hours }} {{ serviceView.unit }}</text>
|
||
<button class="step-btn btn-active" :disabled="hours >= 10" @click="changeHours(1)">＋</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 开黑时段选择 (矢量SVG时段图标) -->
|
||
<view class="order-card">
|
||
<view class="section-title">服务时间</view>
|
||
<view class="time-tabs">
|
||
<view
|
||
class="time-tab btn-active"
|
||
:class="{ active: timeType === 'NOW' }"
|
||
@click="timeType = 'NOW'"
|
||
>
|
||
<view class="tab-title-wrap">
|
||
<image class="tab-svg" :src="ICONS.bolt" mode="aspectFit" />
|
||
<text class="tab-t">即刻出发</text>
|
||
</view>
|
||
<text class="tab-d">付款后立即开黑履约</text>
|
||
</view>
|
||
<view
|
||
class="time-tab btn-active"
|
||
:class="{ active: timeType === 'APPOINT' }"
|
||
@click="timeType = 'APPOINT'"
|
||
>
|
||
<view class="tab-title-wrap">
|
||
<image class="tab-svg" :src="ICONS.clock" mode="aspectFit" />
|
||
<text class="tab-t">预约时段</text>
|
||
</view>
|
||
<text class="tab-d">今晚 20:30 开打</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 优惠抵扣与履约约定 -->
|
||
<view class="order-card">
|
||
<view class="coupon-row btn-active" @click="selectCoupon">
|
||
<text class="cell-label">优惠券</text>
|
||
<view class="cell-right">
|
||
<text class="coupon-val">-¥{{ discount }} (新人首单立减)</text>
|
||
<text class="arrow">></text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 线下同城专属：商圈场所与消费约定 -->
|
||
<block v-if="isOffline">
|
||
<view class="remark-row">
|
||
<text class="cell-label">碰面场所</text>
|
||
<input class="remark-input" v-model="meetVenue" placeholder="正规场所，如：工体纯K量贩KTV/朝阳大悦城" placeholder-class="ph" />
|
||
<view class="pick-loc-btn btn-active" @click="pickVenue">地图选点</view>
|
||
</view>
|
||
<view class="expense-row">
|
||
<text class="cell-label">现场消费</text>
|
||
<view class="expense-pills">
|
||
<view
|
||
class="expense-pill btn-active"
|
||
:class="{ active: expenseBurden === 'AA' }"
|
||
@click="expenseBurden = 'AA'"
|
||
>
|
||
AA制各自付
|
||
</view>
|
||
<view
|
||
class="expense-pill btn-active"
|
||
:class="{ active: expenseBurden === 'TREAT' }"
|
||
@click="expenseBurden = 'TREAT'"
|
||
>
|
||
老板请客
|
||
</view>
|
||
<view
|
||
class="expense-pill btn-active"
|
||
:class="{ active: expenseBurden === 'SELF' }"
|
||
@click="expenseBurden = 'SELF'"
|
||
>
|
||
大神自理
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="safety-tip-card">
|
||
<image class="safety-icon-svg" :src="ICONS.shield" mode="aspectFit" />
|
||
<text class="safety-text">绿色阳光陪伴声明：服务仅限在正规公开商业场所进行。双方碰面后将出示 4 位数字核销码进行现场签到，保障双方人身与财产安全。</text>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 线上游戏专属：开黑区服与要求 -->
|
||
<view class="remark-row" v-else>
|
||
<text class="cell-label">开黑要求/游戏ID</text>
|
||
<input class="remark-input" v-model="remark" placeholder="如：微信区/王者星耀段位/包赢" placeholder-class="ph" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 费用明细清单 -->
|
||
<view class="order-card">
|
||
<view class="fee-row">
|
||
<text class="fee-k">服务小计</text>
|
||
<text class="fee-v">¥{{ rawTotal }}</text>
|
||
</view>
|
||
<view class="fee-row coupon-clickable btn-active" @click="openCouponModal">
|
||
<view class="fee-k-wrap">
|
||
<image class="coupon-icon-svg" :src="ICONS.ticket" mode="aspectFit" />
|
||
<text class="fee-k">优惠券抵扣</text>
|
||
</view>
|
||
<view class="fee-v-wrap">
|
||
<text class="fee-v green" v-if="discount > 0">-¥{{ discount }}</text>
|
||
<text class="fee-v muted" v-else>暂无使用优惠券</text>
|
||
<image class="arrow-svg" :src="ICONS.chevronRight" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<view class="fee-row total-row">
|
||
<text class="fee-k">实付金额</text>
|
||
<text class="fee-v pay-val">¥{{ finalTotal }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 支付方式人性化选择 (支持微信支付与钱包余额抵扣) -->
|
||
<view class="order-card payment-method-card">
|
||
<view class="section-title">支付方式</view>
|
||
<view class="pay-method-list">
|
||
<view
|
||
class="pay-method-item btn-active"
|
||
:class="{ active: payMethod === 'WECHAT' }"
|
||
@click="payMethod = 'WECHAT'"
|
||
>
|
||
<view class="method-left">
|
||
<image class="method-svg" :src="ICONS.wechat" mode="aspectFit" />
|
||
<view class="method-info">
|
||
<text class="method-title">微信支付</text>
|
||
<text class="method-desc">亿万用户的安全移动支付通道</text>
|
||
</view>
|
||
</view>
|
||
<view class="radio-circle" :class="{ checked: payMethod === 'WECHAT' }"></view>
|
||
</view>
|
||
|
||
<view
|
||
class="pay-method-item btn-active"
|
||
:class="{
|
||
active: payMethod === 'BALANCE',
|
||
disabled: Number(userBalance) < finalTotal
|
||
}"
|
||
@click="selectBalancePay"
|
||
>
|
||
<view class="method-left">
|
||
<image class="method-svg" :src="ICONS.wallet" mode="aspectFit" />
|
||
<view class="method-info">
|
||
<view class="title-with-badge">
|
||
<text class="method-title">钱包余额抵扣</text>
|
||
<text class="balance-tag" :class="{ 'low-balance': Number(userBalance) < finalTotal }">
|
||
可用: ¥{{ userBalance }}
|
||
</text>
|
||
</view>
|
||
<text class="method-desc" v-if="Number(userBalance) >= finalTotal">扣除钱包余额，秒级极速结算</text>
|
||
<text class="method-desc warn-tip" v-else>余额不足以支付整单 (差额 ¥{{ (finalTotal - Number(userBalance)).toFixed(2) }})</text>
|
||
</view>
|
||
</view>
|
||
<view class="radio-circle" :class="{ checked: payMethod === 'BALANCE' }"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部固定结算条 -->
|
||
<view class="bottom-bar">
|
||
<view class="amount-wrap">
|
||
<text class="amount-label">实付：</text>
|
||
<text class="amount-num">¥{{ finalTotal }}</text>
|
||
</view>
|
||
<button class="btn-pay btn-active" :class="{ 'btn-balance': payMethod === 'BALANCE' }" @click="handlePay">
|
||
{{ payMethod === 'BALANCE' ? '余额极速支付' : '微信安全支付' }}
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 优惠券选择弹窗 -->
|
||
<view class="coupon-modal-mask" v-if="couponModalVisible" @click="closeCouponModal">
|
||
<view class="coupon-modal-content" @click.stop="stopPropagation">
|
||
<view class="modal-header">
|
||
<text class="modal-title">选择优惠券</text>
|
||
<view class="modal-close" @click="closeCouponModal">
|
||
<image class="close-icon" :src="ICONS.close" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="coupons-list">
|
||
<view
|
||
v-for="item in availableCoupons"
|
||
:key="item.id"
|
||
class="coupon-card btn-active"
|
||
:class="{
|
||
active: currentCoupon && currentCoupon.id === item.id,
|
||
disabled: item.minAmount > 0 && rawTotal < item.minAmount
|
||
}"
|
||
@click="selectCouponItem(item)"
|
||
>
|
||
<view class="coupon-left">
|
||
<text class="coupon-amount-unit" v-if="item.amount > 0">¥</text>
|
||
<text class="coupon-amount-val">{{ item.amount > 0 ? item.amount : '无' }}</text>
|
||
</view>
|
||
<view class="coupon-mid">
|
||
<text class="coupon-card-title">{{ item.title }}</text>
|
||
<text class="coupon-card-desc">
|
||
{{ item.minAmount > 0 ? `满 ¥${item.minAmount} 可用` : (item.amount > 0 ? '无门槛使用' : '放弃使用优惠抵扣') }}
|
||
</text>
|
||
</view>
|
||
<view class="coupon-right">
|
||
<text class="coupon-tag">{{ item.tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
import { createOrder, payOrder as payOrderApi, requestWechatPayment, getCompanionDetail, getUserProfile, getMyCoupons } from '@/common/api.js';
|
||
import { preloadSubscribeTemplates, requestSubscribeFor } from '@/common/subscribe.js';
|
||
import { ICONS } from '@/common/icons.js';
|
||
import { getCurrentThemeKey, applyThemeToNativeUI } from '@/common/theme.js';
|
||
import { ensureLoginOrRedirect } from '@/common/role.js';
|
||
|
||
const currentThemeKey = ref(getCurrentThemeKey());
|
||
const currentUserId = ref(Number(uni.getStorageSync('userId') || 1001));
|
||
const currentUserName = ref((uni.getStorageSync('userInfo') && uni.getStorageSync('userInfo').nickname) || '超能电竞玩家');
|
||
const userBalance = ref('0.00');
|
||
const payMethod = ref('WECHAT'); // 'WECHAT' | 'BALANCE'
|
||
|
||
const onThemeChanged = (key) => {
|
||
currentThemeKey.value = key;
|
||
applyThemeToNativeUI(key);
|
||
};
|
||
|
||
onMounted(() => {
|
||
currentThemeKey.value = getCurrentThemeKey();
|
||
applyThemeToNativeUI(currentThemeKey.value);
|
||
uni.$on('theme-change', onThemeChanged);
|
||
loadUserWallet();
|
||
preloadSubscribeTemplates();
|
||
});
|
||
|
||
onShow(() => {
|
||
if (!ensureLoginOrRedirect('/pages/order/create')) {
|
||
return;
|
||
}
|
||
currentThemeKey.value = getCurrentThemeKey();
|
||
applyThemeToNativeUI(currentThemeKey.value);
|
||
loadUserWallet();
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
uni.$off('theme-change', onThemeChanged);
|
||
});
|
||
|
||
const stopPropagation = (e) => {
|
||
if (e && typeof e.stopPropagation === 'function') {
|
||
e.stopPropagation();
|
||
}
|
||
};
|
||
|
||
const loadUserWallet = async () => {
|
||
try {
|
||
const uid = Number(uni.getStorageSync('userId') || 1001);
|
||
currentUserId.value = uid;
|
||
const cachedInfo = uni.getStorageSync('userInfo');
|
||
if (cachedInfo && cachedInfo.nickname) {
|
||
currentUserName.value = cachedInfo.nickname;
|
||
}
|
||
const u = await getUserProfile(uid);
|
||
if (u) {
|
||
if (u.balance !== undefined) {
|
||
userBalance.value = String(u.balance);
|
||
}
|
||
if (u.nickname) {
|
||
currentUserName.value = u.nickname;
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.warn('[OrderCreate] 加载用户资产异常:', err);
|
||
}
|
||
};
|
||
|
||
const expert = ref({
|
||
id: '',
|
||
nickname: '同城陪伴师',
|
||
avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150',
|
||
game: '同城陪伴',
|
||
price: 68,
|
||
services: []
|
||
});
|
||
const selectedService = ref(null);
|
||
// 模板安全视图：即便服务包尚未加载完成，也不会出现 null.title 崩溃
|
||
const serviceView = computed(() => selectedService.value || {
|
||
id: 'base',
|
||
title: '同城陪伴基础服务',
|
||
price: Number(expert.value && expert.value.price) || 35,
|
||
unit: '小时'
|
||
});
|
||
const hours = ref(2);
|
||
const timeType = ref('NOW');
|
||
const discount = ref(0);
|
||
const remark = ref('');
|
||
const meetVenue = ref('朝阳大悦城海底捞');
|
||
const meetCoords = ref({ latitude: null, longitude: null });
|
||
|
||
const pickVenue = () => {
|
||
// #ifdef MP-WEIXIN || APP-PLUS
|
||
uni.chooseLocation({
|
||
success: (res) => {
|
||
if (!res) return;
|
||
const name = res.name ? `${res.address ? res.address + ' ' : ''}${res.name}` : res.address;
|
||
if (name) meetVenue.value = name;
|
||
meetCoords.value = {
|
||
latitude: Number.isFinite(Number(res.latitude)) ? Number(res.latitude) : null,
|
||
longitude: Number.isFinite(Number(res.longitude)) ? Number(res.longitude) : null
|
||
};
|
||
uni.showToast({ title: '已选择碰面地点', icon: 'success' });
|
||
},
|
||
fail: () => uni.showToast({ title: '未选择地点，可手动填写', icon: 'none' })
|
||
});
|
||
// #endif
|
||
// #ifndef MP-WEIXIN || APP-PLUS
|
||
uni.showToast({ title: '当前环境不支持地图选点，请手动填写', icon: 'none' });
|
||
// #endif
|
||
};
|
||
const expenseBurden = ref('AA');
|
||
|
||
const isOffline = computed(() => {
|
||
return expert.value && (
|
||
expert.value.track === 'OFFLINE_MEAL' ||
|
||
expert.value.track === 'OFFLINE_DRINK' ||
|
||
expert.value.track === 'OFFLINE_SING' ||
|
||
expert.value.track === 'OFFLINE_PLAY' ||
|
||
expert.value.game === '美食陪吃' ||
|
||
expert.value.game === '下午茶陪喝' ||
|
||
expert.value.game === '同城陪唱' ||
|
||
expert.value.game === '同城陪玩'
|
||
);
|
||
});
|
||
|
||
onLoad(async (query) => {
|
||
const targetId = (query && query.expertId) ? query.expertId : '1';
|
||
try {
|
||
const liveExpert = await getCompanionDetail(targetId);
|
||
if (liveExpert) {
|
||
expert.value = liveExpert;
|
||
const services = Array.isArray(liveExpert.services) ? liveExpert.services : [];
|
||
if (query && query.serviceId) {
|
||
const s = services.find(srv => String(srv.id) === String(query.serviceId));
|
||
if (s) {
|
||
selectedService.value = s;
|
||
}
|
||
}
|
||
if (!selectedService.value && services.length > 0) {
|
||
selectedService.value = services[0];
|
||
}
|
||
// 兜底：大神尚未配置服务包时，按其基础时薪提供"基础陪伴服务"，保证仍可下单
|
||
// （价格仍以服务端大神档案价为准，createOrder 会二次校验）
|
||
if (!selectedService.value) {
|
||
selectedService.value = {
|
||
id: 'base',
|
||
title: `${liveExpert.game || '同城陪伴'}基础陪伴服务`,
|
||
price: Number(liveExpert.price) || 35,
|
||
unit: '小时',
|
||
desc: '大神暂未配置服务包，按基础时薪计费'
|
||
};
|
||
}
|
||
}
|
||
} catch (err) {
|
||
console.warn('[OrderCreate] 获取线上大神详情异常:', err);
|
||
}
|
||
|
||
// 极端兜底：详情获取失败时也要保证不会因空服务崩溃
|
||
if (!selectedService.value) {
|
||
selectedService.value = {
|
||
id: 'base',
|
||
title: '同城陪伴基础服务',
|
||
price: Number(expert.value.price) || 35,
|
||
unit: '小时',
|
||
desc: ''
|
||
};
|
||
}
|
||
|
||
// 加载后台真实可用优惠券
|
||
await loadLiveCoupons();
|
||
});
|
||
|
||
const rawTotal = computed(() => {
|
||
return (selectedService.value ? selectedService.value.price : 35) * hours.value;
|
||
});
|
||
|
||
const finalTotal = computed(() => {
|
||
const total = rawTotal.value - discount.value;
|
||
return total > 0 ? total : 0;
|
||
});
|
||
|
||
const changeHours = (delta) => {
|
||
hours.value = Math.max(1, Math.min(10, hours.value + delta));
|
||
autoSelectBestCoupon();
|
||
};
|
||
|
||
const couponModalVisible = ref(false);
|
||
const availableCoupons = ref([
|
||
{ id: 'c_none', title: '不使用优惠券', amount: 0, minAmount: 0, tag: '不使用' }
|
||
]);
|
||
const currentCoupon = ref(availableCoupons.value[0]);
|
||
|
||
const loadLiveCoupons = async () => {
|
||
try {
|
||
const uid = uni.getStorageSync('userId') || 0;
|
||
const res = uid ? await getMyCoupons(uid, 'UNUSED') : null;
|
||
const mine = Array.isArray(res?.list) ? res.list : [];
|
||
const activeCoupons = mine.map(c => ({
|
||
id: String(c.id),
|
||
title: c.name,
|
||
amount: Number(c.discountAmount || 0),
|
||
minAmount: Number(c.minSpend || 0),
|
||
categoryLimit: c.categoryLimit || 'ALL',
|
||
tag: c.minSpend > 0 ? `满¥${c.minSpend}减¥${c.discountAmount}` : `立减¥${c.discountAmount}`
|
||
}));
|
||
activeCoupons.push({ id: 'c_none', title: '不使用优惠券', amount: 0, minAmount: 0, tag: '不使用', categoryLimit: 'ALL' });
|
||
availableCoupons.value = activeCoupons;
|
||
autoSelectBestCoupon();
|
||
} catch (e) {
|
||
console.warn('[OrderCreate] 加载优惠券异常:', e);
|
||
}
|
||
};
|
||
|
||
const autoSelectBestCoupon = () => {
|
||
const validList = availableCoupons.value.filter(c => c.amount > 0 && rawTotal.value >= c.minAmount);
|
||
if (validList.length > 0) {
|
||
// 选减免金额最大的一张
|
||
validList.sort((a, b) => b.amount - a.amount);
|
||
currentCoupon.value = validList[0];
|
||
discount.value = validList[0].amount;
|
||
} else {
|
||
currentCoupon.value = availableCoupons.value.find(c => c.id === 'c_none') || availableCoupons.value[0];
|
||
discount.value = 0;
|
||
}
|
||
};
|
||
|
||
const openCouponModal = () => {
|
||
couponModalVisible.value = true;
|
||
};
|
||
|
||
const closeCouponModal = () => {
|
||
couponModalVisible.value = false;
|
||
};
|
||
|
||
const selectCouponItem = (coupon) => {
|
||
if (coupon.minAmount > 0 && rawTotal.value < coupon.minAmount) {
|
||
uni.showToast({
|
||
title: `该券需订单满 ¥${coupon.minAmount} 可用`,
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
currentCoupon.value = coupon;
|
||
discount.value = coupon.amount;
|
||
closeCouponModal();
|
||
if (coupon.amount > 0) {
|
||
uni.showToast({ title: `已成功应用 -¥${coupon.amount} 优惠`, icon: 'success' });
|
||
} else {
|
||
uni.showToast({ title: '已取消使用优惠券', icon: 'none' });
|
||
}
|
||
};
|
||
|
||
const selectBalancePay = () => {
|
||
if (Number(userBalance.value) < finalTotal.value) {
|
||
uni.showModal({
|
||
title: '钱包余额不足',
|
||
content: `当前钱包余额为 ¥${userBalance.value}，实付需 ¥${finalTotal.value}。您可以前往「我的」-「我的钱包」充值后再使用余额支付，或切换为微信直接支付。`,
|
||
confirmText: '去充值',
|
||
cancelText: '微信支付',
|
||
confirmColor: 'var(--color-brand)',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.switchTab({ url: '/pages/user/index' });
|
||
} else {
|
||
payMethod.value = 'WECHAT';
|
||
}
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
payMethod.value = 'BALANCE';
|
||
};
|
||
|
||
const handlePay = async () => {
|
||
if (!ensureLoginOrRedirect('/pages/order/create')) {
|
||
return;
|
||
}
|
||
// 下单/支付前请求一次性订阅授权（订单状态 + 核销码通知）
|
||
requestSubscribeFor('order');
|
||
if (payMethod.value === 'BALANCE' && Number(userBalance.value) < finalTotal.value) {
|
||
selectBalancePay();
|
||
return;
|
||
}
|
||
|
||
const uid = Number(uni.getStorageSync('userId') || currentUserId.value || 1001);
|
||
const serviceTitle = selectedService.value ? selectedService.value.title : `${expert.value.game}专属服务`;
|
||
const usingUserCoupon = currentCoupon.value && currentCoupon.value.id && currentCoupon.value.id !== 'c_none';
|
||
const basePayload = {
|
||
buyerId: uid,
|
||
clientName: currentUserName.value || '超能电竞玩家',
|
||
expertId: expert.value.id,
|
||
companionName: expert.value.nickname,
|
||
expertAvatar: expert.value.avatar,
|
||
track: expert.value.game || (isOffline.value ? '同城生活' : '线上电竞'),
|
||
serviceTitle,
|
||
hourlyRate: selectedService.value ? selectedService.value.price : (expert.value.price || 35),
|
||
durationHours: hours.value,
|
||
amount: finalTotal.value,
|
||
couponDiscount: usingUserCoupon ? 0 : discount.value,
|
||
userCouponId: usingUserCoupon ? String(currentCoupon.value.id) : '',
|
||
payType: payMethod.value,
|
||
location: isOffline.value ? meetVenue.value : (remark.value || '线上语音开黑'),
|
||
latitude: isOffline.value ? meetCoords.value.latitude : null,
|
||
longitude: isOffline.value ? meetCoords.value.longitude : null,
|
||
expenseBurden: expenseBurden.value === 'AA' ? 'AA制各自付' : (expenseBurden.value === 'CLIENT' ? '客户全包' : '大神自理'),
|
||
remark: remark.value
|
||
};
|
||
|
||
if (payMethod.value === 'BALANCE') {
|
||
uni.showLoading({ title: '正在扣减钱包余额...' });
|
||
try {
|
||
await createOrder({
|
||
...basePayload,
|
||
status: '履约中'
|
||
});
|
||
uni.hideLoading();
|
||
const nextBal = Math.max(0, Number(userBalance.value) - finalTotal.value).toFixed(2);
|
||
userBalance.value = nextBal;
|
||
uni.showToast({
|
||
title: '钱包余额支付成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({ url: '/pages/order/list' });
|
||
}, 1000);
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err.message || '余额支付异常',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 微信支付标准两步式闭环：1. 创建待付款订单 -> 2. 调起收银台 -> 3. 支付成功流转履约中 / 取消则保留待付款
|
||
uni.showLoading({ title: '正在生成预付订单...' });
|
||
let createdOrder = null;
|
||
try {
|
||
createdOrder = await createOrder({
|
||
...basePayload,
|
||
status: '待付款'
|
||
});
|
||
uni.hideLoading();
|
||
} catch (err) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: err.message || '创建订单失败',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await requestWechatPayment({
|
||
amount: finalTotal.value,
|
||
title: serviceTitle,
|
||
orderId: createdOrder && createdOrder.id ? createdOrder.id : '',
|
||
scene: 'ORDER',
|
||
userId: uid
|
||
});
|
||
|
||
uni.showLoading({ title: '正在确认支付结果...' });
|
||
if (createdOrder && createdOrder.id) {
|
||
await payOrderApi(createdOrder.id, {
|
||
targetStatus: '履约中',
|
||
payType: 'WECHAT',
|
||
buyerId: uid
|
||
});
|
||
}
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '微信支付成功！订单已生效',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({ url: '/pages/order/list' });
|
||
}, 1000);
|
||
} catch (payErr) {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: payErr.cancelled ? '已取消支付，可在订单中心继续付款' : (payErr.message || '支付未完成'),
|
||
icon: 'none',
|
||
duration: 1800
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({ url: '/pages/order/list' });
|
||
}, 1200);
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.create-order-container {
|
||
min-height: 100vh;
|
||
background-color: var(--bg-primary);
|
||
padding: 24rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.order-card {
|
||
background-color: var(--bg-surface);
|
||
border-radius: 24rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 24rpx;
|
||
border: 1px solid var(--border-subtle);
|
||
|
||
.expert-profile {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.expert-avatar {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 48rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.expert-meta {
|
||
flex: 1;
|
||
|
||
.name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-bottom: 8rpx;
|
||
|
||
.expert-name {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
.game-tag {
|
||
font-size: 20rpx;
|
||
background: rgba(99, 102, 241, 0.2);
|
||
color: var(--color-brand-light);
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
|
||
.service-title {
|
||
font-size: 24rpx;
|
||
color: var(--text-secondary);
|
||
}
|
||
}
|
||
|
||
.price-single {
|
||
.price-unit {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: #10B981;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
}
|
||
|
||
.stepper-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.stepper-label {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.label-main {
|
||
font-size: 28rpx;
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
}
|
||
.label-sub {
|
||
font-size: 20rpx;
|
||
color: var(--text-muted);
|
||
margin-top: 4rpx;
|
||
}
|
||
}
|
||
|
||
.stepper-box {
|
||
display: flex;
|
||
align-items: center;
|
||
background: var(--bg-surface-elevated);
|
||
border-radius: 16rpx;
|
||
padding: 6rpx;
|
||
|
||
.step-btn {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
line-height: 68rpx;
|
||
padding: 0;
|
||
background: var(--bg-surface-elevated);
|
||
color: #FFF;
|
||
font-size: 32rpx;
|
||
border-radius: 14rpx;
|
||
border: none;
|
||
margin: 0;
|
||
transition: transform 0.1s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.92);
|
||
}
|
||
}
|
||
|
||
.step-val {
|
||
font-size: 30rpx;
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
margin: 0 24rpx;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.time-tabs {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
|
||
.time-tab {
|
||
flex: 1;
|
||
background: var(--bg-surface-elevated);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
|
||
&.active {
|
||
background: rgba(99, 102, 241, 0.15);
|
||
border-color: var(--color-brand);
|
||
|
||
.tab-t {
|
||
color: var(--color-brand-light);
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.tab-title-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
margin-bottom: 6rpx;
|
||
|
||
.tab-svg {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
.tab-t {
|
||
font-size: 26rpx;
|
||
color: var(--text-secondary);
|
||
}
|
||
}
|
||
|
||
.tab-d {
|
||
font-size: 20rpx;
|
||
color: var(--text-muted);
|
||
}
|
||
}
|
||
}
|
||
|
||
.coupon-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1px solid var(--border-subtle);
|
||
|
||
.cell-label {
|
||
font-size: 26rpx;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.cell-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.coupon-val {
|
||
font-size: 24rpx;
|
||
color: #10B981;
|
||
font-weight: 600;
|
||
}
|
||
.arrow {
|
||
font-size: 24rpx;
|
||
color: var(--text-muted);
|
||
}
|
||
}
|
||
}
|
||
|
||
.remark-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
|
||
.cell-label {
|
||
font-size: 24rpx;
|
||
color: var(--text-muted);
|
||
width: 220rpx;
|
||
}
|
||
|
||
.remark-input {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
color: var(--text-primary);
|
||
}
|
||
.ph {
|
||
color: var(--text-muted);
|
||
}
|
||
.pick-loc-btn {
|
||
flex-shrink: 0;
|
||
margin-left: 12rpx;
|
||
padding: 8rpx 18rpx;
|
||
border-radius: 24rpx;
|
||
font-size: 22rpx;
|
||
color: #FFFFFF;
|
||
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
|
||
}
|
||
}
|
||
|
||
.expense-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-top: 1px solid var(--border-subtle);
|
||
|
||
.cell-label {
|
||
font-size: 24rpx;
|
||
color: var(--text-muted);
|
||
width: 220rpx;
|
||
}
|
||
|
||
.expense-pills {
|
||
display: flex;
|
||
gap: 12rpx;
|
||
|
||
.expense-pill {
|
||
font-size: 22rpx;
|
||
color: var(--text-secondary);
|
||
background: var(--bg-surface-elevated);
|
||
border: 1px solid var(--border-subtle);
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
|
||
&.active {
|
||
color: #F59E0B;
|
||
background: rgba(245, 158, 11, 0.15);
|
||
border-color: #F59E0B;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.safety-tip-card {
|
||
margin-top: 20rpx;
|
||
background: rgba(16, 185, 129, 0.08);
|
||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||
border-radius: 16rpx;
|
||
padding: 16rpx 20rpx;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12rpx;
|
||
|
||
.safety-icon-svg {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
flex-shrink: 0;
|
||
margin-top: 4rpx;
|
||
}
|
||
.safety-text {
|
||
font-size: 20rpx;
|
||
color: #10B981;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
|
||
.fee-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
margin-bottom: 12rpx;
|
||
|
||
.fee-k {
|
||
color: var(--text-secondary);
|
||
}
|
||
.fee-v {
|
||
color: var(--text-primary);
|
||
font-weight: 500;
|
||
|
||
&.green {
|
||
color: #10B981;
|
||
}
|
||
}
|
||
|
||
&.coupon-clickable {
|
||
align-items: center;
|
||
padding: 12rpx 0;
|
||
cursor: pointer;
|
||
|
||
.fee-k-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
|
||
.coupon-icon-svg {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.fee-v-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.arrow-svg {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.muted {
|
||
color: var(--text-muted);
|
||
}
|
||
}
|
||
}
|
||
|
||
&.total-row {
|
||
border-top: 1px solid var(--border-subtle);
|
||
padding-top: 16rpx;
|
||
margin-top: 16rpx;
|
||
margin-bottom: 0;
|
||
|
||
.fee-k {
|
||
font-size: 26rpx;
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
}
|
||
.pay-val {
|
||
font-size: 34rpx;
|
||
color: #10B981;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bottom-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: calc(120rpx + env(safe-area-inset-bottom));
|
||
padding: 0 32rpx env(safe-area-inset-bottom);
|
||
box-sizing: border-box;
|
||
background-color: var(--bg-surface-glass, rgba(21, 29, 48, 0.95));
|
||
backdrop-filter: blur(12px);
|
||
border-top: 1px solid var(--border-subtle);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
z-index: 100;
|
||
max-width: 450px;
|
||
margin: 0 auto;
|
||
|
||
.amount-wrap {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
.amount-label {
|
||
font-size: 24rpx;
|
||
color: var(--text-secondary);
|
||
}
|
||
.amount-num {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
}
|
||
|
||
.btn-pay {
|
||
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
|
||
color: #FFF;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
border-radius: 44rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
padding: 0 60rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(16, 185, 129, 0.35);
|
||
margin: 0;
|
||
|
||
&.btn-balance {
|
||
background: var(--color-brand-gradient, linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%));
|
||
box-shadow: 0 4rpx 20rpx rgba(99, 102, 241, 0.35);
|
||
}
|
||
}
|
||
}
|
||
|
||
.payment-method-card {
|
||
.pay-method-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
margin-top: 12rpx;
|
||
|
||
.pay-method-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 24rpx;
|
||
background: var(--bg-surface-elevated);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 16rpx;
|
||
transition: all 0.2s ease;
|
||
|
||
.method-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
|
||
.method-svg {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.method-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4rpx;
|
||
|
||
.title-with-badge {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.method-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.balance-tag {
|
||
font-size: 20rpx;
|
||
color: #10B981;
|
||
background: rgba(16, 185, 129, 0.15);
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 6rpx;
|
||
font-weight: 600;
|
||
|
||
&.low-balance {
|
||
color: #EF4444;
|
||
background: rgba(239, 68, 68, 0.15);
|
||
}
|
||
}
|
||
|
||
.method-desc {
|
||
font-size: 22rpx;
|
||
color: var(--text-muted);
|
||
|
||
&.warn-tip {
|
||
color: #EF4444;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.radio-circle {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--text-muted);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s;
|
||
|
||
&.checked {
|
||
border-color: var(--color-brand);
|
||
background: var(--color-brand);
|
||
|
||
&::after {
|
||
content: '';
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
border-color: var(--color-brand);
|
||
background: rgba(99, 102, 241, 0.08);
|
||
}
|
||
|
||
&.disabled {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.coupon-modal-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
backdrop-filter: blur(8px);
|
||
z-index: 999;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
}
|
||
|
||
.coupon-modal-content {
|
||
width: 100%;
|
||
max-width: 600px;
|
||
background: var(--bg-surface);
|
||
border-top-left-radius: 36rpx;
|
||
border-top-right-radius: 36rpx;
|
||
padding: 36rpx 36rpx calc(36rpx + env(safe-area-inset-bottom));
|
||
border: 1px solid var(--border-subtle);
|
||
border-bottom: none;
|
||
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.5);
|
||
animation: slideUp 0.25s ease-out;
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.modal-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.modal-close {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.close-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.coupons-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20rpx;
|
||
|
||
.coupon-card {
|
||
display: flex;
|
||
align-items: center;
|
||
background: var(--bg-surface-elevated);
|
||
border: 1px solid var(--border-subtle);
|
||
border-radius: 20rpx;
|
||
padding: 24rpx;
|
||
transition: all 0.2s;
|
||
|
||
.coupon-left {
|
||
width: 120rpx;
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
color: #F59E0B;
|
||
|
||
.coupon-amount-unit {
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
}
|
||
.coupon-amount-val {
|
||
font-size: 44rpx;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.coupon-mid {
|
||
flex: 1;
|
||
padding: 0 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6rpx;
|
||
|
||
.coupon-card-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
.coupon-card-desc {
|
||
font-size: 22rpx;
|
||
color: var(--text-secondary);
|
||
}
|
||
}
|
||
|
||
.coupon-right {
|
||
.coupon-tag {
|
||
font-size: 22rpx;
|
||
color: var(--color-brand-light);
|
||
background: rgba(99, 102, 241, 0.15);
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
border-color: #F59E0B;
|
||
background: rgba(245, 158, 11, 0.1);
|
||
}
|
||
|
||
&.disabled {
|
||
opacity: 0.45;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.theme-warm {
|
||
.coupon-modal-content {
|
||
background: #FFFFFF;
|
||
border-color: #E7E5E4;
|
||
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.modal-header {
|
||
.modal-title {
|
||
color: #1C1917;
|
||
}
|
||
}
|
||
|
||
.coupons-list {
|
||
.coupon-card {
|
||
background: #FDFBF7;
|
||
border-color: #E7E5E4;
|
||
|
||
.coupon-left {
|
||
color: #EA580C;
|
||
}
|
||
|
||
.coupon-mid {
|
||
.coupon-card-title {
|
||
color: #1C1917;
|
||
}
|
||
.coupon-card-desc {
|
||
color: #78716C;
|
||
}
|
||
}
|
||
|
||
.coupon-right {
|
||
.coupon-tag {
|
||
color: #EA580C;
|
||
background: #FFF7ED;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
border-color: #EA580C;
|
||
background: #FFF7ED;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.payment-method-card {
|
||
background: #FFFFFF;
|
||
border-color: #E7E5E4;
|
||
|
||
.pay-method-item {
|
||
background: #FDFBF7;
|
||
border-color: #E7E5E4;
|
||
|
||
.method-info {
|
||
.method-title {
|
||
color: #1C1917;
|
||
}
|
||
.method-desc {
|
||
color: #78716C;
|
||
}
|
||
}
|
||
|
||
.radio-circle {
|
||
border-color: #D6D3D1;
|
||
|
||
&.checked {
|
||
border-color: #EA580C;
|
||
background: #EA580C;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
border-color: #EA580C;
|
||
background: #FFF7ED;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-pay.btn-balance {
|
||
background: linear-gradient(135deg, #EA580C 0%, #C2410C 100%);
|
||
box-shadow: 0 4rpx 20rpx rgba(234, 88, 12, 0.35);
|
||
}
|
||
}
|
||
</style>
|