index.vue 33 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016
  1. <template>
  2. <!-- 确认支付页面:订单信息、菜品清单、价格明细、确认支付 -->
  3. <view class="content">
  4. <view class="card">
  5. <view class="card-header">
  6. <view class="tag"></view>
  7. <view class="card-header-title">订单信息</view>
  8. </view>
  9. <view class="card-content">
  10. <view class="info-item">
  11. <view class="info-item-label">就餐桌号</view>
  12. <view class="info-item-value">{{ orderInfo.tableNumber || orderInfo.tableId || '—' }}</view>
  13. </view>
  14. <view class="info-item info-item--diners">
  15. <view class="info-item-label">用餐人数</view>
  16. <view class="diner-stepper">
  17. <view
  18. class="diner-stepper__btn"
  19. :class="{ 'diner-stepper__btn--disabled': dinerCount <= 1 }"
  20. hover-class="diner-stepper__btn--active"
  21. @tap.stop="adjustDiners(-1)"
  22. >
  23. <view class="diner-stepper__icon diner-stepper__icon--minus" />
  24. </view>
  25. <text class="diner-stepper__value">{{ dinerCount }}</text>
  26. <view
  27. class="diner-stepper__btn"
  28. :class="{ 'diner-stepper__btn--disabled': dinerCount >= MAX_DINERS }"
  29. hover-class="diner-stepper__btn--active"
  30. @tap.stop="adjustDiners(1)"
  31. >
  32. <view class="diner-stepper__icon diner-stepper__icon--plus" />
  33. </view>
  34. </view>
  35. </view>
  36. <view class="info-item">
  37. <view class="info-item-label">联系电话</view>
  38. <view class="info-item-value">{{ orderInfo.contactPhone || '—' }}</view>
  39. </view>
  40. <view class="info-item">
  41. <view class="info-item-label">备注信息</view>
  42. <view class="info-item-value remark-text">{{ orderInfo.remark || '—' }}</view>
  43. </view>
  44. </view>
  45. </view>
  46. <view class="card" v-if="displayFoodList.length > 0">
  47. <view class="card-header">
  48. <view class="tag"></view>
  49. <view class="card-header-title">菜品清单</view>
  50. </view>
  51. <view class="card-content">
  52. <view class="info-food">
  53. <view v-for="(item, index) in displayFoodList" :key="item.id || index" class="food-item">
  54. <image :src="getItemImage(item)" mode="aspectFill" class="food-item__image"></image>
  55. <view class="food-item__info">
  56. <view class="food-item__name">{{ item.name }}</view>
  57. <view class="food-item__desc" v-if="item.tags && item.tags.length > 0">
  58. <text v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="food-item__tag"
  59. :class="tag.type">{{ tag.text }}<text v-if="tagIndex < item.tags.length - 1">,</text>
  60. </text>
  61. </view>
  62. </view>
  63. <view class="food-item__right">
  64. <view class="food-item__price">
  65. <text class="price-main">¥{{ formatPrice(item.price) }}</text>
  66. </view>
  67. <view class="food-item__quantity">{{ item.quantity || 1 }}份</view>
  68. </view>
  69. </view>
  70. </view>
  71. </view>
  72. </view>
  73. <view class="card">
  74. <view class="card-header">
  75. <view class="tag"></view>
  76. <view class="card-header-title">价格明细</view>
  77. </view>
  78. <view class="card-content">
  79. <view class="info-item">
  80. <view class="info-item-label">菜品总价</view>
  81. <view class="info-item-value">¥{{ formatPrice(foodSubtotalForDisplay) }}</view>
  82. </view>
  83. <!-- 本版本不参与服务费
  84. <view class="info-item">
  85. <view class="info-item-label">服务费</view>
  86. <view class="info-item-value">¥{{ formatPrice(orderInfo.serviceFee ?? 0) }}</view>
  87. </view>
  88. -->
  89. <view class="info-item info-item--coupon info-item--clickable" @click="onCouponRowClick">
  90. <view class="info-item-label">优惠券</view>
  91. <view class="info-item-value coupon-value">
  92. <text v-if="(orderInfo.discountAmount ?? 0) > 0" class="coupon-amount">{{ couponDisplayText }}</text>
  93. <text v-else class="coupon-placeholder">请选择</text>
  94. <text class="coupon-arrow">›</text>
  95. </view>
  96. </view>
  97. <view v-if="(orderInfo.discountAmount ?? 0) > 0" class="info-item info-item--coupon">
  98. <view class="info-item-label">优惠金额</view>
  99. <view class="info-item-value coupon-value">
  100. <text class="coupon-amount">-¥{{ formatPrice(orderInfo.discountAmount) }}</text>
  101. </view>
  102. </view>
  103. <view class="price-line">
  104. <view class="price-line-label">应付金额</view>
  105. <view class="price-line-value">¥{{ formatPrice(orderInfo.payAmount ?? 0) }}</view>
  106. </view>
  107. </view>
  108. </view>
  109. <view class="bottom-button">
  110. <view class="bottom-button-text" hover-class="hover-active" @click="handleConfirmPay">确认支付 ¥{{ formatPrice(orderInfo.payAmount ?? 0) }}</view>
  111. </view>
  112. <!-- 选择优惠券弹窗 -->
  113. <view class="coupon-modal-wrapper">
  114. <SelectCouponModal
  115. v-model:open="couponModalOpen"
  116. :coupon-list="couponList"
  117. :selected-coupon-id="selectedCouponId"
  118. :view-only="false"
  119. :list-loading="checkoutCouponLoading"
  120. :list-has-more="checkoutCouponHasMore"
  121. @load-more="handleCheckoutCouponLoadMore"
  122. @select="handleCouponSelect"
  123. @close="couponModalOpen = false"
  124. />
  125. </view>
  126. </view>
  127. </template>
  128. <script setup>
  129. import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
  130. import { ref, computed } from 'vue';
  131. import { go } from '@/utils/utils.js';
  132. import { getFileUrl } from '@/utils/file.js';
  133. import { useUserStore } from '@/store/user.js';
  134. import * as diningApi from '@/api/dining.js';
  135. import { normalizeUserCouponListItem, parseCouponListPage, mergeCouponListById } from '@/utils/couponNormalize.js';
  136. import SelectCouponModal from '@/pages/orderFood/components/SelectCouponModal.vue';
  137. const orderId = ref('');
  138. /** 用餐人数上限(与选人数页「查看更多」一致) */
  139. const MAX_DINERS = 16;
  140. const MIN_DINERS = 1;
  141. const orderInfo = ref({
  142. orderNo: '',
  143. storeId: '',
  144. tableId: '',
  145. tableNumber: '',
  146. diners: '',
  147. contactPhone: '',
  148. remark: '',
  149. totalAmount: 0,
  150. dishTotal: null,
  151. couponId: null,
  152. couponName: '',
  153. couponType: null, // 1 满减 2 折扣
  154. discountRate: null, // 折扣券力度,如 5.5 表示 5.5折
  155. nominalValue: null, // 满减券面额
  156. discountAmount: 0,
  157. payAmount: 0,
  158. serviceFee: 0
  159. });
  160. const foodList = ref([]);
  161. /** 服务费估算接口返回的 feeType;为 1 表示按人数计费,修改人数时需重新估算 */
  162. const estimateFeeType = ref(null);
  163. // 优惠券选择(结算页)
  164. const couponModalOpen = ref(false);
  165. const couponList = ref([]);
  166. const selectedCouponId = ref(null);
  167. const CHECKOUT_COUPON_PAGE_SIZE = 10;
  168. const checkoutCouponLoading = ref(false);
  169. const checkoutCouponHasMore = ref(true);
  170. const checkoutCouponLastPage = ref(0);
  171. // 菜品清单展示(排除特殊占位 id=-1)
  172. const displayFoodList = computed(() =>
  173. (foodList.value ?? []).filter((it) => Number(it?.id ?? it?.cuisineId) !== -1)
  174. );
  175. function parseDinerCount(val) {
  176. const n = Number(val);
  177. if (!Number.isFinite(n) || n < MIN_DINERS) return MIN_DINERS;
  178. return Math.min(MAX_DINERS, Math.floor(n));
  179. }
  180. /** 当前用餐人数(数字,用于步进器展示) */
  181. const dinerCount = computed(() => parseDinerCount(orderInfo.value.diners));
  182. function adjustDiners(delta) {
  183. const cur = parseDinerCount(orderInfo.value.diners);
  184. const next = cur + delta;
  185. if (next < MIN_DINERS || next > MAX_DINERS) return;
  186. orderInfo.value.diners = String(next);
  187. uni.setStorageSync('currentDiners', String(next));
  188. // 本版本不参与服务费(恢复按人数重算时取消注释)
  189. // if (Number(estimateFeeType.value) === 1) {
  190. // fetchServiceFeeEstimate().catch((err) => console.warn('按人数重算服务费失败:', err));
  191. // }
  192. }
  193. // 展示用菜品小计:有明细时与行成交价一致;否则用接口 dishTotal 或 totalAmount − 服务费
  194. const foodSubtotalForDisplay = computed(() => {
  195. const list = displayFoodList.value;
  196. if (list.length > 0) {
  197. const sum = list.reduce((s, it) => s + (Number(it.lineSubtotal) || 0), 0);
  198. return Math.max(0, Math.round(sum * 100) / 100);
  199. }
  200. const dt = orderInfo.value.dishTotal;
  201. if (dt != null && dt !== '') {
  202. const d = Number(dt);
  203. if (!Number.isNaN(d)) return Math.max(0, d);
  204. }
  205. const total = Number(orderInfo.value.totalAmount) || 0;
  206. const fee = Number(orderInfo.value.serviceFee) || 0;
  207. return Math.max(0, total - fee);
  208. });
  209. // 优惠券展示:满减券显示 nominalValue+元,折扣券显示 discountRate+折,否则显示 couponName 或 已使用优惠券
  210. const couponDisplayText = computed(() => {
  211. const o = orderInfo.value;
  212. if ((o.discountAmount ?? 0) <= 0) return '';
  213. const type = Number(o.couponType);
  214. if (type === 1 && (o.nominalValue != null && o.nominalValue !== '')) {
  215. const val = Number(o.nominalValue);
  216. return Number.isNaN(val) ? (o.couponName || '已使用优惠券') : val + '元';
  217. }
  218. if (type === 2 && (o.discountRate != null && o.discountRate !== '')) {
  219. const rate = Number(o.discountRate);
  220. return Number.isNaN(rate) ? (o.couponName || '已使用优惠券') : rate + '折';
  221. }
  222. return o.couponName || '已使用优惠券';
  223. });
  224. // 点击优惠券行:打开选择弹窗
  225. const onCouponRowClick = () => {
  226. openCouponModal();
  227. };
  228. /**
  229. * 拉取结算页可用优惠券(分页,每页 CHECKOUT_COUPON_PAGE_SIZE)
  230. * @param {{ reset?: boolean }} options
  231. */
  232. async function fetchCheckoutCouponList(options = { reset: true }) {
  233. const { reset = true } = options;
  234. const storeId = orderInfo.value.storeId || uni.getStorageSync('currentStoreId') || '';
  235. if (!storeId) {
  236. uni.showToast({ title: '暂无门店信息', icon: 'none' });
  237. return false;
  238. }
  239. if (reset) {
  240. if (checkoutCouponLoading.value) return false;
  241. checkoutCouponLoading.value = true;
  242. } else {
  243. if (
  244. checkoutCouponLoading.value ||
  245. !checkoutCouponHasMore.value
  246. ) {
  247. return true;
  248. }
  249. checkoutCouponLoading.value = true;
  250. }
  251. const page = reset ? 1 : checkoutCouponLastPage.value + 1;
  252. try {
  253. const res = await diningApi.GetUserCouponList({
  254. storeId,
  255. tabType: 0,
  256. page,
  257. size: CHECKOUT_COUPON_PAGE_SIZE
  258. });
  259. const { list: rawList, total } = parseCouponListPage(res);
  260. const arr = Array.isArray(rawList) ? rawList : [];
  261. const normalized = arr
  262. .map((item) => normalizeUserCouponListItem(item, 0))
  263. .filter(Boolean);
  264. if (reset) {
  265. couponList.value = normalized;
  266. } else {
  267. couponList.value = mergeCouponListById(couponList.value, normalized);
  268. }
  269. checkoutCouponLastPage.value = page;
  270. const mergedLen = couponList.value.length;
  271. if (total > 0) {
  272. checkoutCouponHasMore.value = mergedLen < total;
  273. } else {
  274. checkoutCouponHasMore.value = normalized.length >= CHECKOUT_COUPON_PAGE_SIZE;
  275. }
  276. return true;
  277. } catch (err) {
  278. console.error('获取优惠券失败:', err);
  279. if (reset) {
  280. uni.showToast({ title: '获取优惠券失败', icon: 'none' });
  281. couponList.value = [];
  282. checkoutCouponHasMore.value = false;
  283. } else {
  284. uni.showToast({ title: '加载更多失败', icon: 'none' });
  285. }
  286. return false;
  287. } finally {
  288. checkoutCouponLoading.value = false;
  289. }
  290. }
  291. function handleCheckoutCouponLoadMore() {
  292. if (!checkoutCouponLoading.value && checkoutCouponHasMore.value) {
  293. fetchCheckoutCouponList({ reset: false });
  294. }
  295. }
  296. // 打开优惠券弹窗并拉取用户可用券
  297. const openCouponModal = async () => {
  298. couponModalOpen.value = false;
  299. const ok = await fetchCheckoutCouponList({ reset: true });
  300. if (ok) {
  301. couponModalOpen.value = true;
  302. }
  303. };
  304. // 选择优惠券后更新订单优惠与应付金额
  305. const handleCouponSelect = ({ coupon, selectedId }) => {
  306. const hasSelected = selectedId != null && selectedId !== '';
  307. if (!hasSelected) {
  308. selectedCouponId.value = null;
  309. orderInfo.value.couponId = null;
  310. orderInfo.value.discountAmount = 0;
  311. orderInfo.value.couponName = '';
  312. orderInfo.value.couponType = null;
  313. orderInfo.value.discountRate = null;
  314. orderInfo.value.nominalValue = null;
  315. updateCheckoutPayAmount();
  316. couponModalOpen.value = false;
  317. return;
  318. }
  319. if (!coupon) {
  320. couponModalOpen.value = false;
  321. return;
  322. }
  323. const couponType = Number(coupon.couponType) || 0;
  324. const foodSubtotal = Number(foodSubtotalForDisplay.value) || 0;
  325. const threshold = Number(coupon.minAmount) || 0;
  326. // 满减券(couponType=1)且有门槛:菜品总价须 ≥ 门槛,否则不可选
  327. if (couponType === 1 && threshold > 0 && foodSubtotal < threshold) {
  328. uni.showToast({ title: '未到满减此券不可用', icon: 'none' });
  329. return;
  330. }
  331. selectedCouponId.value = String(selectedId);
  332. orderInfo.value.couponId = coupon?.couponId ?? coupon?.id ?? String(selectedId) ?? null;
  333. orderInfo.value.couponName = coupon.name ?? '';
  334. orderInfo.value.couponType = couponType || null;
  335. orderInfo.value.discountRate = coupon.discountRate != null ? coupon.discountRate : null;
  336. const nvRaw = coupon.nominalValue;
  337. if (nvRaw != null && nvRaw !== '') {
  338. const nv = Number(nvRaw);
  339. orderInfo.value.nominalValue = Number.isFinite(nv) ? nv : null;
  340. } else if (couponType === 1) {
  341. orderInfo.value.nominalValue = Number(coupon.amount) || null;
  342. } else {
  343. orderInfo.value.nominalValue = null;
  344. }
  345. const food = foodSubtotal;
  346. const fee = Number(orderInfo.value.serviceFee) || 0;
  347. const baseForDiscount = food + fee;
  348. if (couponType === 2 && coupon.discountRate != null && baseForDiscount > 0) {
  349. const rate = Number(coupon.discountRate) || 0;
  350. orderInfo.value.discountAmount = Math.round(baseForDiscount * (1 - rate / 10) * 100) / 100;
  351. } else {
  352. orderInfo.value.discountAmount =
  353. Number(coupon.nominalValue) || Number(coupon.amount) || 0;
  354. }
  355. updateCheckoutPayAmount();
  356. couponModalOpen.value = false;
  357. };
  358. // 应付金额 = 菜品总价 + 服务费 − 优惠金额
  359. const updateCheckoutPayAmount = () => {
  360. const food = Number(foodSubtotalForDisplay.value) || 0;
  361. const fee = Number(orderInfo.value.serviceFee) || 0;
  362. const discount = Number(orderInfo.value.discountAmount) || 0;
  363. orderInfo.value.payAmount = Math.max(0, Math.round((food + fee - discount) * 100) / 100);
  364. };
  365. /** 服务费变化后:折扣券(按菜品+服务费为基数)需重算优惠金额 */
  366. function recalcDiscountAfterServiceFeeChange() {
  367. const ct = Number(orderInfo.value.couponType) || 0;
  368. if (ct !== 2 || orderInfo.value.discountRate == null || !orderInfo.value.couponId) return;
  369. const food = Number(foodSubtotalForDisplay.value) || 0;
  370. const fee = Number(orderInfo.value.serviceFee) || 0;
  371. const base = food + fee;
  372. const rate = Number(orderInfo.value.discountRate) || 0;
  373. if (base <= 0) return;
  374. orderInfo.value.discountAmount = Math.round(base * (1 - rate / 10) * 100) / 100;
  375. }
  376. /**
  377. * 从估算接口 data 解析 feeType:后端可能放在顶层,也可能在 items[].feeType(如按人数规则)
  378. * 任一为 1 则视为按人数计费,修改人数需重新请求 estimate
  379. */
  380. function parseEstimateFeeType(res) {
  381. if (res == null || typeof res !== 'object') return null;
  382. const top = res.feeType != null && res.feeType !== '' ? Number(res.feeType) : NaN;
  383. if (top === 1) return 1;
  384. const items = Array.isArray(res.items) ? res.items : [];
  385. for (const it of items) {
  386. const ft = it?.feeType != null && it.feeType !== '' ? Number(it.feeType) : NaN;
  387. if (ft === 1) return 1;
  388. }
  389. if (!Number.isNaN(top)) return top;
  390. for (const it of items) {
  391. const ft = it?.feeType != null && it.feeType !== '' ? Number(it.feeType) : NaN;
  392. if (!Number.isNaN(ft)) return ft;
  393. }
  394. return null;
  395. }
  396. /**
  397. * 服务费估算(本版本关闭:不参与服务费)
  398. */
  399. async function fetchServiceFeeEstimate() {
  400. orderInfo.value.serviceFee = 0;
  401. estimateFeeType.value = null;
  402. recalcDiscountAfterServiceFeeChange();
  403. updateCheckoutPayAmount();
  404. /* 原 /store/dining/service-fee/estimate 逻辑(恢复时整段移出注释)
  405. const storeId = orderInfo.value.storeId || uni.getStorageSync('currentStoreId') || '';
  406. const tableId = getTableIdForServiceFeeEstimate();
  407. if (!storeId || !tableId) return;
  408. const dinerCount = parseDinerCount(orderInfo.value.diners);
  409. const goodsSubtotal = Math.max(0, Math.round((Number(foodSubtotalForDisplay.value) || 0) * 100) / 100);
  410. try {
  411. const res = await diningApi.GetServiceFeeEstimate({
  412. storeId: String(storeId),
  413. tableId,
  414. dinerCount,
  415. goodsSubtotal
  416. });
  417. estimateFeeType.value = parseEstimateFeeType(res);
  418. const fee =
  419. Number(
  420. res?.serviceFee ??
  421. res?.estimatedServiceFee ??
  422. res?.fee ??
  423. res?.amount ??
  424. (typeof res === 'number' ? res : 0)
  425. ) || 0;
  426. orderInfo.value.serviceFee = fee;
  427. recalcDiscountAfterServiceFeeChange();
  428. updateCheckoutPayAmount();
  429. } catch (e) {
  430. console.warn('结算页服务费估算失败:', e);
  431. }
  432. */
  433. }
  434. function formatPrice(price) {
  435. const num = Number(price);
  436. return Number.isNaN(num) ? '0.00' : num.toFixed(2);
  437. }
  438. // 取第一张图:逗号分隔取首段,数组取首项,对象取 url/path/src(与 orderDetail 一致)
  439. function firstImage(val) {
  440. if (val == null || val === '') return '';
  441. if (Array.isArray(val)) {
  442. const first = val[0];
  443. if (first != null && first !== '') {
  444. if (typeof first === 'object' && first !== null) return first.url ?? first.path ?? first.src ?? first.link ?? '';
  445. return String(first).split(/[,,]/)[0].trim();
  446. }
  447. return '';
  448. }
  449. if (typeof val === 'object') return val.url ?? val.path ?? val.src ?? val.link ?? '';
  450. const str = String(val).trim();
  451. return str ? str.split(/[,,]/)[0].trim() : '';
  452. }
  453. function getItemImage(item) {
  454. const raw = item?.image ?? item?.cuisineImage ?? item?.imageUrl ?? item?.images ?? item?.pic ?? item?.cover ?? '';
  455. const url = firstImage(raw) || (typeof raw === 'string' ? raw.split(/[,,]/)[0]?.trim() : '');
  456. if (url && typeof url === 'string' && (url.startsWith('http') || url.startsWith('//'))) return url;
  457. return getFileUrl(url || 'img/icon/shop.png');
  458. }
  459. // 将 tags 统一为 [{ text, type }] 格式
  460. function normalizeTags(raw) {
  461. if (raw == null) return [];
  462. let arr = [];
  463. if (Array.isArray(raw)) arr = raw;
  464. else if (typeof raw === 'string') {
  465. const t = raw.trim();
  466. if (t.startsWith('[')) { try { arr = JSON.parse(t); if (!Array.isArray(arr)) arr = []; } catch { arr = t ? [t] : []; } }
  467. else arr = t ? t.split(/[,,、\s]+/).map(s => s.trim()).filter(Boolean) : [];
  468. } else if (raw && typeof raw === 'object') arr = Array.isArray(raw.list) ? raw.list : Array.isArray(raw.items) ? raw.items : [];
  469. return arr.map((it) => {
  470. if (it == null) return { text: '', type: '' };
  471. if (typeof it === 'string') return { text: it, type: '' };
  472. if (typeof it === 'number') return { text: String(it), type: '' };
  473. return { text: it.text ?? it.tagName ?? it.name ?? it.label ?? it.title ?? '', type: it.type ?? it.tagType ?? '' };
  474. }).filter((t) => t.text !== '' && t.text != null);
  475. }
  476. // 接口订单项转列表项:图片取首张(逗号/数组/对象与 orderDetail 一致)
  477. function normalizeOrderItem(item) {
  478. const rawTags = item?.tags ?? item?.tagList ?? item?.tagNames ?? item?.labels ?? item?.tag;
  479. const rawImg = item?.images ?? item?.image ?? item?.cuisineImage ?? item?.imageUrl ?? item?.pic ?? item?.cover ?? '';
  480. const imageUrl = firstImage(rawImg) || (typeof rawImg === 'string' ? rawImg.split(/[,,]/)[0]?.trim() : '') || 'img/icon/shop.png';
  481. const qty = Number(item?.quantity ?? 1) || 1;
  482. /** 行成交价小计(元):与购物车/服务费估算 goodsSubtotal 一致 */
  483. let lineSubtotal = 0;
  484. if (item?.subtotalAmount != null && item.subtotalAmount !== '') {
  485. lineSubtotal = Number(item.subtotalAmount) || 0;
  486. } else if (item?.totalPrice != null && item.totalPrice !== '') {
  487. lineSubtotal = Number(item.totalPrice) || 0;
  488. } else {
  489. const unit = Number(item?.unitPrice ?? item?.price ?? 0) || 0;
  490. lineSubtotal = unit * qty;
  491. }
  492. const unitForDisplay =
  493. Number(item?.unitPrice ?? item?.price ?? 0) ||
  494. (qty > 0 ? lineSubtotal / qty : 0);
  495. return {
  496. id: item?.id ?? item?.cuisineId,
  497. name: item?.cuisineName ?? item?.name ?? '',
  498. price: unitForDisplay,
  499. lineSubtotal,
  500. image: imageUrl,
  501. quantity: qty,
  502. tags: normalizeTags(rawTags)
  503. };
  504. }
  505. /** 桌台主键:store_table.id,不可用桌号展示文案代替 */
  506. function getTableIdForServiceFeeEstimate() {
  507. const t = orderInfo.value.tableId;
  508. if (t != null && String(t).trim() !== '') return String(t).trim();
  509. return String(uni.getStorageSync('currentTableId') || '').trim();
  510. }
  511. const fetchOrderDetail = async () => {
  512. const id = orderId.value || '';
  513. if (!id) return;
  514. try {
  515. const res = await diningApi.GetOrderInfo(id);
  516. const raw = res?.data ?? res ?? {};
  517. orderInfo.value.orderNo = raw?.orderNo ?? raw?.orderId ?? '';
  518. orderInfo.value.storeId = raw?.storeId ?? raw?.store_id ?? '';
  519. // tableId 须为门店桌台表主键(store_table.id),勿用 tableNumber(展示用桌号)冒充
  520. orderInfo.value.tableId =
  521. raw?.tableId ??
  522. raw?.storeTableId ??
  523. raw?.store_table_id ??
  524. raw?.diningTableId ??
  525. '';
  526. orderInfo.value.tableNumber = raw?.tableNumber ?? raw?.tableNo ?? '';
  527. const dc = raw?.dinerCount ?? raw?.diners ?? '';
  528. orderInfo.value.diners =
  529. dc !== '' && dc != null ? String(parseDinerCount(dc)) : String(MIN_DINERS);
  530. orderInfo.value.contactPhone = raw?.contactPhone ?? raw?.phone ?? '';
  531. orderInfo.value.remark = raw?.remark ?? '';
  532. const total = Number(raw?.totalAmount ?? raw?.orderAmount ?? raw?.foodAmount ?? 0) || 0;
  533. orderInfo.value.totalAmount = total;
  534. orderInfo.value.dishTotal = raw?.dishTotal != null ? Number(raw.dishTotal) : null;
  535. orderInfo.value.couponId = raw?.couponId ?? null;
  536. orderInfo.value.couponName = raw?.couponName ?? '';
  537. orderInfo.value.couponType = raw?.couponType ?? null;
  538. const rawRate = raw?.discountRate;
  539. orderInfo.value.discountRate = rawRate != null && rawRate !== '' ? (Number(rawRate) || 0) / 10 : null;
  540. orderInfo.value.nominalValue = raw?.nominalValue ?? null;
  541. orderInfo.value.discountAmount = Number(raw?.discountAmount ?? raw?.couponAmount ?? raw?.couponDiscount ?? 0) || 0;
  542. orderInfo.value.payAmount = Number(raw?.payAmount ?? raw?.totalAmount ?? raw?.totalPrice ?? 0) || 0;
  543. // 本版本不参与服务费:不从订单拉取服务费
  544. // orderInfo.value.serviceFee =
  545. // Number(raw?.serviceFee ?? raw?.serviceCharge ?? raw?.tablewareFee ?? 0) || 0;
  546. orderInfo.value.serviceFee = 0;
  547. const list = raw?.orderItemList ?? raw?.orderItems ?? raw?.items ?? raw?.detailList ?? [];
  548. foodList.value = (Array.isArray(list) ? list : []).map(normalizeOrderItem);
  549. selectedCouponId.value = orderInfo.value.couponId != null && orderInfo.value.couponId !== '' ? String(orderInfo.value.couponId) : null;
  550. updateCheckoutPayAmount();
  551. await fetchServiceFeeEstimate(); // 本版为 no-op(不参与服务费)
  552. } catch (err) {
  553. console.error('获取订单详情失败:', err);
  554. uni.showToast({ title: '加载失败', icon: 'none' });
  555. }
  556. };
  557. const handleConfirmPay = async () => {
  558. const id = orderId.value || '';
  559. if (!id) {
  560. uni.showToast({ title: '缺少订单ID', icon: 'none' });
  561. return;
  562. }
  563. const userStore = useUserStore();
  564. const openid = userStore.getOpenId || '';
  565. if (!openid) {
  566. uni.showToast({ title: '请先登录', icon: 'none' });
  567. return;
  568. }
  569. const payAmountVal = Math.round((Number(orderInfo.value.payAmount ?? 0) || 0) * 100) / 100;
  570. if (payAmountVal <= 0) {
  571. uni.showToast({ title: '订单金额异常', icon: 'none' });
  572. return;
  573. }
  574. const orderNo = orderInfo.value.orderNo || '';
  575. if (!orderNo) {
  576. uni.showToast({ title: '缺少订单号', icon: 'none' });
  577. return;
  578. }
  579. const price = Math.round(payAmountVal * 100);
  580. uni.showLoading({ title: '拉起支付...' });
  581. try {
  582. const storeId = orderInfo.value.storeId || uni.getStorageSync('currentStoreId') || '';
  583. const u = userStore.getUserInfo || {};
  584. const payerId = u.id ?? u.userId ?? u.user_id ?? '';
  585. const couponIdVal =
  586. orderInfo.value.couponId != null && orderInfo.value.couponId !== ''
  587. ? String(orderInfo.value.couponId)
  588. : selectedCouponId.value != null && selectedCouponId.value !== ''
  589. ? String(selectedCouponId.value)
  590. : '';
  591. const discountAmountVal = Number(orderInfo.value.discountAmount) || 0;
  592. // const serviceFeeVal = Math.round((Number(orderInfo.value.serviceFee ?? 0) || 0) * 100) / 100;
  593. const res = await diningApi.PostOrderPay({
  594. orderNo,
  595. payer: openid,
  596. price,
  597. subject: '订单支付',
  598. storeId: storeId || undefined,
  599. couponId: couponIdVal || undefined,
  600. payerId: payerId ? String(payerId) : undefined,
  601. discountAmount: discountAmountVal,
  602. payAmount: payAmountVal
  603. // serviceFee: serviceFeeVal // 本版本不参与服务费
  604. });
  605. uni.hideLoading();
  606. uni.requestPayment({
  607. provider: 'wxpay',
  608. timeStamp: res.timestamp,
  609. nonceStr: res.nonce,
  610. package: res.prepayId,
  611. signType: res.signType,
  612. paySign: res.sign,
  613. success: () => {
  614. uni.showToast({ title: '支付成功', icon: 'success' });
  615. const oid = orderId.value || '';
  616. if (oid) {
  617. diningApi.PostOrderSettlementUnlock({ orderId: oid }).catch((e) => console.warn('解锁订单失败:', e));
  618. }
  619. const payType = 'wechatPayPartnerMininProgram';
  620. // 查询支付结果需用 prePay 返回的 transactionId,与订单号 orderNo 可能不同
  621. const prePayTid =
  622. res?.transactionId ??
  623. res?.transaction_id ??
  624. res?.outTradeNo ??
  625. orderNo;
  626. const sid = orderInfo.value.storeId || uni.getStorageSync('currentStoreId') || '';
  627. const q = [`id=${encodeURIComponent(oid)}`, `payType=${encodeURIComponent(payType)}`, `transactionId=${encodeURIComponent(String(prePayTid ?? ''))}`];
  628. if (sid) q.push(`storeId=${encodeURIComponent(sid)}`);
  629. setTimeout(() => go(`/pages/paymentSuccess/index?${q.join('&')}`), 1500);
  630. },
  631. fail: (err) => {
  632. const msg = err?.errMsg ?? err?.message ?? '支付失败';
  633. if (String(msg).includes('cancel')) {
  634. uni.showToast({ title: '已取消支付', icon: 'none' });
  635. } else {
  636. uni.showToast({ title: msg || '支付失败', icon: 'none' });
  637. }
  638. }
  639. });
  640. } catch (e) {
  641. uni.hideLoading();
  642. uni.showToast({ title: e?.message || '获取支付参数失败', icon: 'none' });
  643. }
  644. };
  645. onLoad(async (options) => {
  646. const id = options?.orderId ?? options?.id ?? '';
  647. orderId.value = id;
  648. if (options?.orderNo) orderInfo.value.orderNo = options.orderNo;
  649. if (options?.tableId) orderInfo.value.tableId = options.tableId;
  650. if (options?.tableNumber) orderInfo.value.tableNumber = options.tableNumber;
  651. if (options?.diners != null && options?.diners !== '') {
  652. orderInfo.value.diners = String(parseDinerCount(options.diners));
  653. uni.setStorageSync('currentDiners', orderInfo.value.diners);
  654. }
  655. if (options?.remark != null && options?.remark !== '') orderInfo.value.remark = decodeURIComponent(options.remark);
  656. if (options?.totalAmount != null && options?.totalAmount !== '') {
  657. orderInfo.value.payAmount = Number(options.totalAmount) || 0;
  658. }
  659. if (id) {
  660. await fetchOrderDetail();
  661. }
  662. });
  663. onShow(() => {
  664. const id = orderId.value || '';
  665. if (id) {
  666. diningApi.PostOrderSettlementLock({ orderId: id }).catch((e) => console.warn('锁定订单失败:', e));
  667. }
  668. });
  669. onUnload(() => {
  670. const id = orderId.value || '';
  671. if (id) {
  672. diningApi.PostOrderSettlementUnlock({ orderId: id }).catch((e) => console.warn('解锁订单失败:', e));
  673. }
  674. });
  675. </script>
  676. <style lang="scss" scoped>
  677. .content {
  678. padding: 0 30rpx 300rpx;
  679. }
  680. .card {
  681. background-color: #fff;
  682. border-radius: 24rpx;
  683. padding: 30rpx 0;
  684. margin-top: 20rpx;
  685. .card-header {
  686. display: flex;
  687. align-items: center;
  688. padding: 0 30rpx;
  689. height: 40rpx;
  690. position: relative;
  691. font-size: 27rpx;
  692. color: #151515;
  693. font-weight: bold;
  694. }
  695. .tag {
  696. width: 10rpx;
  697. height: 42rpx;
  698. background: linear-gradient(35deg, #FCB73F 0%, #FC733D 100%);
  699. border-radius: 0;
  700. position: absolute;
  701. left: 0;
  702. top: 0;
  703. }
  704. .card-content {
  705. padding: 0 30rpx;
  706. }
  707. .info-item {
  708. display: flex;
  709. justify-content: space-between;
  710. align-items: center;
  711. margin-top: 20rpx;
  712. font-size: 27rpx;
  713. .info-item-label {
  714. color: #666666;
  715. }
  716. .info-item-value {
  717. color: #151515;
  718. &.remark-text {
  719. flex: 1;
  720. text-align: right;
  721. word-break: break-all;
  722. }
  723. }
  724. &--coupon .coupon-value {
  725. display: flex;
  726. align-items: center;
  727. gap: 8rpx;
  728. }
  729. .coupon-amount {
  730. color: #E61F19;
  731. }
  732. .coupon-placeholder {
  733. color: #999999;
  734. }
  735. .coupon-arrow {
  736. color: #999;
  737. margin-left: 4rpx;
  738. }
  739. &--clickable {
  740. cursor: pointer;
  741. }
  742. &--diners {
  743. align-items: center;
  744. }
  745. }
  746. /* 用餐人数:胶囊步进器(与设计稿一致) */
  747. .diner-stepper {
  748. display: flex;
  749. flex-direction: row;
  750. align-items: center;
  751. justify-content: space-between;
  752. background: #f2f3f5;
  753. border-radius: 999rpx;
  754. padding: 3rpx 6rpx;
  755. min-width: 196rpx;
  756. box-sizing: border-box;
  757. }
  758. .diner-stepper__btn {
  759. width: 44rpx;
  760. height: 44rpx;
  761. border-radius: 50%;
  762. background: #ffffff;
  763. display: flex;
  764. align-items: center;
  765. justify-content: center;
  766. flex-shrink: 0;
  767. box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
  768. }
  769. .diner-stepper__btn--active:active {
  770. opacity: 0.88;
  771. }
  772. .diner-stepper__btn--disabled {
  773. opacity: 0.35;
  774. pointer-events: none;
  775. }
  776. .diner-stepper__value {
  777. flex: 1;
  778. text-align: center;
  779. font-size: 26rpx;
  780. font-weight: 500;
  781. color: #151515;
  782. line-height: 44rpx;
  783. min-width: 36rpx;
  784. }
  785. .diner-stepper__icon--minus {
  786. width: 20rpx;
  787. height: 2rpx;
  788. background: #c8c8c8;
  789. border-radius: 2rpx;
  790. }
  791. .diner-stepper__icon--plus {
  792. position: relative;
  793. width: 18rpx;
  794. height: 18rpx;
  795. }
  796. .diner-stepper__icon--plus::before,
  797. .diner-stepper__icon--plus::after {
  798. content: '';
  799. position: absolute;
  800. left: 50%;
  801. top: 50%;
  802. background: #fc743d;
  803. border-radius: 2rpx;
  804. }
  805. .diner-stepper__icon--plus::before {
  806. width: 18rpx;
  807. height: 2rpx;
  808. transform: translate(-50%, -50%);
  809. }
  810. .diner-stepper__icon--plus::after {
  811. width: 2rpx;
  812. height: 18rpx;
  813. transform: translate(-50%, -50%);
  814. }
  815. .price-line {
  816. display: flex;
  817. justify-content: space-between;
  818. align-items: center;
  819. margin-top: 24rpx;
  820. padding-top: 24rpx;
  821. border-top: 1rpx solid #f0f0f0;
  822. font-size: 28rpx;
  823. font-weight: bold;
  824. .price-line-label {
  825. color: #151515;
  826. }
  827. .price-line-value {
  828. color: #E61F19;
  829. }
  830. }
  831. .info-food {
  832. .food-item {
  833. display: flex;
  834. align-items: center;
  835. padding: 20rpx 0;
  836. border-bottom: 1rpx solid #f5f5f5;
  837. &:last-child {
  838. border-bottom: none;
  839. }
  840. &__image {
  841. width: 120rpx;
  842. height: 120rpx;
  843. border-radius: 12rpx;
  844. flex-shrink: 0;
  845. background: #f5f5f5;
  846. }
  847. &__info {
  848. flex: 1;
  849. margin-left: 24rpx;
  850. min-width: 0;
  851. }
  852. &__name {
  853. font-size: 28rpx;
  854. color: #151515;
  855. font-weight: 500;
  856. }
  857. &__desc {
  858. font-size: 22rpx;
  859. color: #999;
  860. margin-top: 6rpx;
  861. }
  862. &__tag {
  863. margin-right: 4rpx;
  864. &.signature {
  865. color: #FC793D;
  866. }
  867. &.spicy {
  868. color: #2E2E2E;
  869. }
  870. }
  871. &__right {
  872. flex-shrink: 0;
  873. text-align: right;
  874. }
  875. &__price .price-main {
  876. font-size: 28rpx;
  877. color: #151515;
  878. font-weight: 600;
  879. }
  880. &__quantity {
  881. font-size: 24rpx;
  882. color: #999;
  883. margin-top: 6rpx;
  884. }
  885. }
  886. }
  887. }
  888. .bottom-button {
  889. position: fixed;
  890. left: 0;
  891. right: 0;
  892. bottom: 0;
  893. padding: 20rpx 30rpx;
  894. padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  895. background: #fff;
  896. box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
  897. .bottom-button-text {
  898. height: 88rpx;
  899. line-height: 88rpx;
  900. text-align: center;
  901. background: linear-gradient(90deg, #FCB73F 0%, #FC733D 100%);
  902. color: #fff;
  903. font-size: 32rpx;
  904. font-weight: bold;
  905. border-radius: 44rpx;
  906. }
  907. .hover-active {
  908. opacity: 0.9;
  909. }
  910. }
  911. .coupon-modal-wrapper {
  912. position: relative;
  913. z-index: 99999;
  914. :deep(.uni-popup) {
  915. z-index: 99999 !important;
  916. top: 0 !important;
  917. left: 0 !important;
  918. right: 0 !important;
  919. bottom: 0 !important;
  920. }
  921. :deep(.uni-popup__wrapper) {
  922. z-index: 99999 !important;
  923. }
  924. :deep(.select-coupon-modal__list) {
  925. padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
  926. }
  927. :deep(.select-coupon-modal__empty) {
  928. margin-bottom: 60rpx;
  929. }
  930. }
  931. </style>