orderDetail.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690
  1. <template>
  2. <!-- 订单详情页面 -->
  3. <view class="content">
  4. <!-- 菜品清单 -->
  5. <view class="card">
  6. <!-- 店铺信息 -->
  7. <view class="store-info">
  8. <view class="store-info-title">{{ orderDetail.storeName || '店铺名称' }}</view>
  9. <view class="store-info-address">{{ orderDetail.storeAddress || '—' }}</view>
  10. </view>
  11. <view class="card-header">
  12. <view class="card-header-title">菜品详情</view>
  13. </view>
  14. <view class="card-content">
  15. <view class="info-food">
  16. <view v-for="(item, index) in displayFoodList" :key="item.id || index" class="food-item">
  17. <image :src="getItemImage(item)" mode="aspectFill" class="food-item__image"></image>
  18. <!-- 菜品信息 -->
  19. <view class="food-item__info">
  20. <view class="food-item__name">{{ item.name }}</view>
  21. <view class="food-item__desc" v-if="item.tags && item.tags.length > 0">
  22. <text v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="food-item__tag"
  23. :class="tag.type">{{ tag.text }}<text v-if="tagIndex < item.tags.length - 1">,</text>
  24. </text>
  25. </view>
  26. </view>
  27. <!-- 价格和数量 -->
  28. <view class="food-item__right">
  29. <view class="food-item__price">
  30. <text class="price-main">¥{{ formatPrice(item.price) }}</text>
  31. </view>
  32. <view class="food-item__quantity">{{ item.quantity || 1 }}份</view>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="card-header">
  38. <view class="card-header-title">价格明细</view>
  39. </view>
  40. <view class="card-content">
  41. <view class="info-item">
  42. <view class="info-item-label">菜品总价</view>
  43. <view class="info-item-value">¥{{ priceDetail.dishTotal }}</view>
  44. </view>
  45. <!-- 本版本不参与服务费
  46. <view class="info-item">
  47. <view class="info-item-label">服务费</view>
  48. <view class="info-item-value">¥{{ priceDetail.serviceFee }}</view>
  49. </view>
  50. -->
  51. <view class="price-line">
  52. <view class="price-line-label">合计</view>
  53. <view class="price-line-value">¥{{ formatPrice(actualPayAmount) }}</view>
  54. </view>
  55. </view>
  56. </view>
  57. <!-- 已支付 / 已完成:支付信息(支付方式、支付时间) -->
  58. <view v-if="showPaidOrderPaymentCard" class="card">
  59. <view class="card-header">
  60. <view class="card-header-title">支付信息</view>
  61. </view>
  62. <view class="card-content">
  63. <view class="info-item">
  64. <view class="info-item-label">支付方式</view>
  65. <view class="info-item-value">微信支付</view>
  66. </view>
  67. <view class="info-item">
  68. <view class="info-item-label">支付时间</view>
  69. <view class="info-item-value">{{ payTimeDisplay }}</view>
  70. </view>
  71. </view>
  72. </view>
  73. <!-- 订单卡片 -->
  74. <view class="card">
  75. <view class="card-header">
  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">{{ orderDetail.orderNo || '—' }}</view>
  82. </view>
  83. <view class="info-item">
  84. <view class="info-item-label">就餐桌号</view>
  85. <view class="info-item-value">{{ orderDetail.tableNo || '—' }}</view>
  86. </view>
  87. <view class="info-item">
  88. <view class="info-item-label">用餐人数</view>
  89. <view class="info-item-value">{{ orderDetail.dinerCount != null && orderDetail.dinerCount !== '' ? orderDetail.dinerCount + '人' : '—' }}</view>
  90. </view>
  91. <view class="info-item">
  92. <view class="info-item-label">下单时间</view>
  93. <view class="info-item-value">{{ orderDetail.createTime || '—' }}</view>
  94. </view>
  95. <view class="info-item">
  96. <view class="info-item-label">联系电话</view>
  97. <view class="info-item-value">{{ orderDetail.contactPhone || '—' }}</view>
  98. </view>
  99. <view class="info-item">
  100. <view class="info-item-label">备注信息</view>
  101. <view class="info-item-value">{{ (orderDetail.remark || '').trim() || '无' }}</view>
  102. </view>
  103. </view>
  104. </view>
  105. <!-- 底部按钮:已完成(3)不显示 -->
  106. <view v-if="orderDetail.orderStatus !== 3" class="bottom-button">
  107. <view class="bottom-button-text1 " hover-class="hover-active" @click="handleConfirmOrder">去加餐</view>
  108. <view class="bottom-button-text" hover-class="hover-active" @click="handleConfirmPay">去结算</view>
  109. </view>
  110. </view>
  111. </template>
  112. <script setup>
  113. import { onLoad } from "@dcloudio/uni-app";
  114. import { ref, computed } from "vue";
  115. import { getFileUrl } from "@/utils/file.js";
  116. import { GetOrderInfo } from "@/api/dining.js";
  117. const payType = ref('confirmOrder'); // confirmOrder 确认下单 confirmPay 确认支付
  118. /** 当前订单ID,用于「去结算」传参 */
  119. const detailOrderId = ref('');
  120. // 订单详情(店铺、订单信息)
  121. // orderStatus:0 待支付,1 已支付,2 已取消,3 已完成
  122. const orderDetail = ref({
  123. storeName: '',
  124. storeAddress: '',
  125. storeId: '',
  126. orderNo: '',
  127. tableId: '', // 桌号ID,用于跳转加餐
  128. tableNo: '', // 桌号展示(tableNumber)
  129. dinerCount: '',
  130. createTime: '',
  131. contactPhone: '',
  132. remark: '',
  133. orderStatus: null,
  134. payType: '', // 支付方式编码,如 wechatPayMininProgram
  135. /** 支付完成时间 */
  136. payTime: ''
  137. });
  138. // 价格明细(两位小数)
  139. const priceDetail = ref({
  140. dishTotal: '0.00',
  141. serviceFee: '0.00',
  142. serviceFeeAmount: 0,
  143. couponDiscount: '0.00',
  144. discountAmount: 0,
  145. couponName: '',
  146. couponType: null,
  147. nominalValue: null,
  148. discountRate: null,
  149. total: '0.00',
  150. /** 接口实付(元),详情页「合计」以前端计算为准 */
  151. payAmount: 0
  152. });
  153. // 菜品列表(接口订单明细)
  154. const foodList = ref([]);
  155. // 菜品详情展示(排除特殊占位 id=-1)
  156. const displayFoodList = computed(() =>
  157. (foodList.value ?? []).filter((it) => Number(it?.id ?? it?.cuisineId) !== -1)
  158. );
  159. // 未支付订单:按明细行累计菜品总价(与 checkout 行小计口径一致)
  160. const calculatedDishTotalFromItems = computed(() => {
  161. const list = displayFoodList.value;
  162. let sum = 0;
  163. for (const it of list) {
  164. const ls = Number(it?.lineSubtotal);
  165. // 行小计为 0 时仍可能单价×数量>0(接口占位 0),不要用 0 覆盖真实金额
  166. if (Number.isFinite(ls) && ls > 0) {
  167. sum += ls;
  168. continue;
  169. }
  170. const q = Number(it?.quantity) || 1;
  171. const u = Number(it?.price) || 0;
  172. sum += u * q;
  173. }
  174. return Math.max(0, Math.round(sum * 100) / 100);
  175. });
  176. // 合计/优惠计算用菜品基数:有明细则按行累计,否则用接口菜品总价
  177. const dishTotalBaseForOrder = computed(() => {
  178. if (displayFoodList.value.length > 0) return calculatedDishTotalFromItems.value;
  179. const dish = Number(priceDetail.value?.dishTotal);
  180. return Number.isFinite(dish) ? Math.max(0, dish) : 0;
  181. });
  182. /** 已支付:orderStatus 1 已支付、3 已完成 */
  183. function isPaidOrderStatus(status) {
  184. const s = Number(status);
  185. return s === 1 || s === 3;
  186. }
  187. // 待支付(0) / 已支付(1) / 已完成(3) 优惠金额(仅用于合计计算,页面不展示优惠券行)
  188. const orderDiscountDisplay = computed(() => {
  189. const st = orderDetail.value.orderStatus;
  190. if (st !== 0 && st !== 1 && st !== 3) return 0;
  191. const p = priceDetail.value;
  192. const dishBase = dishTotalBaseForOrder.value;
  193. const type = Number(p.couponType);
  194. let raw = 0;
  195. if (type === 1) {
  196. if (p.nominalValue != null && p.nominalValue !== '') {
  197. const nv = Number(p.nominalValue);
  198. raw = Number.isNaN(nv) ? 0 : Math.max(0, nv);
  199. } else {
  200. // 无面额时不用裸 discountAmount,避免无券订单接口噪声把合计减成 0
  201. const name = (p.couponName && String(p.couponName).trim()) || '';
  202. if (name) raw = Math.max(0, Number(p.discountAmount) || 0);
  203. }
  204. } else if (type === 2) {
  205. if (p.discountRate != null && p.discountRate !== '' && dishBase > 0) {
  206. const rate = Number(p.discountRate) || 0;
  207. raw = Math.round(dishBase * (1 - rate / 10) * 100) / 100;
  208. }
  209. }
  210. const capped = Math.min(Math.max(0, raw), Math.max(0, dishBase));
  211. return Math.max(0, Math.round(capped * 100) / 100);
  212. });
  213. // 合计:未支付 / 已支付 / 已完成均按「菜品基数 − 优惠」计算,不直接绑定接口 payAmount
  214. const actualPayAmount = computed(() => {
  215. const base = dishTotalBaseForOrder.value;
  216. const d = orderDiscountDisplay.value;
  217. return Math.max(0, Math.round((base - d) * 100) / 100);
  218. });
  219. // 已支付(1) / 已完成(3) 展示支付信息卡片
  220. const showPaidOrderPaymentCard = computed(() => {
  221. const s = orderDetail.value?.orderStatus;
  222. return s === 1 || s === 3;
  223. });
  224. // 支付时间
  225. const payTimeDisplay = computed(() => {
  226. const t = orderDetail.value?.payTime;
  227. if (t != null && String(t).trim() !== '') return String(t).trim();
  228. return '—';
  229. });
  230. // 取第一张图:逗号分隔取首段,数组取首项,对象取 url/path/src(与 orderInfo/index、FoodCard 一致)
  231. function firstImage(val) {
  232. if (val == null || val === '') return '';
  233. if (Array.isArray(val)) {
  234. const first = val[0];
  235. if (first != null && first !== '') {
  236. if (typeof first === 'object' && first !== null) return first.url ?? first.path ?? first.src ?? first.link ?? '';
  237. return String(first).split(/[,,]/)[0].trim();
  238. }
  239. return '';
  240. }
  241. if (typeof val === 'object') return val.url ?? val.path ?? val.src ?? val.link ?? '';
  242. const str = String(val).trim();
  243. return str ? str.split(/[,,]/)[0].trim() : '';
  244. }
  245. function getItemImage(item) {
  246. const raw = item?.image ?? item?.cuisineImage ?? item?.imageUrl ?? item?.pic ?? item?.cover ?? item?.images ?? '';
  247. const url = firstImage(raw) || (typeof raw === 'string' ? raw.split(/[,,]/)[0]?.trim() : '');
  248. if (url && typeof url === 'string' && (url.startsWith('http') || url.startsWith('//'))) return url;
  249. return getFileUrl(url || 'img/icon/shop.png');
  250. }
  251. // 金额保留两位小数
  252. const formatPrice = (price) => {
  253. if (price === '' || price === null || price === undefined) return '0.00';
  254. const num = Number(price);
  255. return Number.isNaN(num) ? '0.00' : num.toFixed(2);
  256. };
  257. // 将 tags 统一为 [{ text, type }] 格式
  258. function normalizeTags(raw) {
  259. if (raw == null) return [];
  260. let arr = [];
  261. if (Array.isArray(raw)) arr = raw;
  262. else if (typeof raw === 'string') {
  263. const t = raw.trim();
  264. if (t.startsWith('[')) { try { arr = JSON.parse(t); if (!Array.isArray(arr)) arr = []; } catch { arr = t ? [t] : []; } }
  265. else arr = t ? t.split(/[,,、\s]+/).map(s => s.trim()).filter(Boolean) : [];
  266. } else if (raw && typeof raw === 'object') arr = Array.isArray(raw.list) ? raw.list : Array.isArray(raw.items) ? raw.items : [];
  267. return arr.map((it) => {
  268. if (it == null) return { text: '', type: '' };
  269. if (typeof it === 'string') return { text: it, type: '' };
  270. if (typeof it === 'number') return { text: String(it), type: '' };
  271. return { text: it.text ?? it.tagName ?? it.name ?? it.label ?? it.title ?? '', type: it.type ?? it.tagType ?? '' };
  272. }).filter((t) => t.text !== '' && t.text != null);
  273. }
  274. // 将接口订单项转为列表项(图片取首张;行小计与 checkout 一致,便于未支付订单合计按明细计算)
  275. function normalizeOrderItem(item) {
  276. const rawTags = item?.tags ?? item?.tagList ?? item?.tagNames ?? item?.labels ?? item?.tag;
  277. const rawImg = item?.images ?? item?.image ?? item?.cuisineImage ?? item?.imageUrl ?? item?.pic ?? item?.cover ?? '';
  278. const imageUrl = firstImage(rawImg) || (typeof rawImg === 'string' ? rawImg.split(/[,,]/)[0]?.trim() : '') || 'img/icon/shop.png';
  279. const qty = Number(item?.quantity ?? 1) || 1;
  280. let lineSubtotal = 0;
  281. if (item?.subtotalAmount != null && item.subtotalAmount !== '') {
  282. lineSubtotal = Number(item.subtotalAmount) || 0;
  283. } else if (item?.totalPrice != null && item.totalPrice !== '') {
  284. lineSubtotal = Number(item.totalPrice) || 0;
  285. } else {
  286. const unit = Number(item?.unitPrice ?? item?.price ?? item?.salePrice ?? 0) || 0;
  287. lineSubtotal = unit * qty;
  288. }
  289. // 接口可能把小计写成 0,但单价/数量有效,回退为单价×数量,与列表展示一致
  290. if (lineSubtotal <= 0) {
  291. const unit = Number(item?.unitPrice ?? item?.price ?? item?.salePrice ?? 0) || 0;
  292. const fallback = unit * qty;
  293. if (fallback > 0) lineSubtotal = fallback;
  294. }
  295. const unitForDisplay =
  296. Number(item?.unitPrice ?? item?.price ?? 0) ||
  297. (qty > 0 ? lineSubtotal / qty : 0);
  298. return {
  299. id: item?.id ?? item?.cuisineId ?? item?.orderItemId ?? item?.skuId,
  300. name:
  301. item?.cuisineName ??
  302. item?.name ??
  303. item?.goodsName ??
  304. item?.skuName ??
  305. item?.productName ??
  306. '',
  307. price: unitForDisplay,
  308. lineSubtotal,
  309. image: imageUrl,
  310. quantity: qty,
  311. tags: normalizeTags(rawTags)
  312. };
  313. }
  314. // 从接口数据填充 orderDetail、priceDetail、foodList
  315. function applyOrderData(data) {
  316. const raw = data?.data ?? data ?? {};
  317. const store = raw?.storeInfo ?? raw?.store ?? {};
  318. orderDetail.value = {
  319. storeName: store?.storeName ?? raw?.storeName ?? '',
  320. storeAddress: store?.storeAddress ?? store?.address ?? raw?.storeAddress ?? raw?.address ?? '',
  321. storeId: store?.storeId ?? store?.id ?? raw?.storeId ?? raw?.store_id ?? '',
  322. orderNo: raw?.orderNo ?? raw?.orderId ?? '',
  323. tableId: raw?.tableId ?? raw?.tableNumber ?? '', // 加餐跳转用
  324. tableNo: raw?.tableNumber ?? raw?.tableNo ?? raw?.tableName ?? '',
  325. dinerCount: raw?.dinerCount ?? '',
  326. createTime: raw?.createdTime ?? raw?.createTime ?? raw?.orderTime ?? '',
  327. contactPhone: raw?.contactPhone ?? raw?.phone ?? '',
  328. remark: raw?.remark ?? '',
  329. orderStatus: raw?.orderStatus ?? raw?.status ?? null,
  330. payType: raw?.payType ?? raw?.payMethod ?? '',
  331. payTime:
  332. raw?.payTime ??
  333. raw?.paymentTime ??
  334. raw?.paidTime ??
  335. raw?.payFinishTime ??
  336. raw?.paySuccessTime ??
  337. ''
  338. };
  339. const couponInfo = raw?.couponInfo ?? raw?.coupon ?? {};
  340. const dishTotal = raw?.totalAmount ?? raw?.dishTotal ?? raw?.orderAmount ?? raw?.foodAmount ?? 0;
  341. const couponDiscount = raw?.couponAmount ?? raw?.couponDiscount ?? 0;
  342. const discountAmountVal = Number(raw?.discountAmount ?? raw?.couponAmount ?? raw?.couponDiscount ?? 0) || 0;
  343. const totalFallback =
  344. Number(raw?.totalAmount ?? raw?.totalPrice ?? raw?.orderAmount ?? raw?.foodAmount ?? 0) || 0;
  345. const explicitPay = raw?.payAmount ?? raw?.realPayAmount ?? raw?.paidAmount;
  346. const payAmountNum =
  347. explicitPay != null && explicitPay !== ''
  348. ? Number(explicitPay) || 0
  349. : totalFallback;
  350. const serviceFeeRaw =
  351. Number(raw?.serviceFee ?? raw?.serviceCharge ?? raw?.tablewareFee ?? 0) || 0;
  352. const rawDiscountRate =
  353. raw?.discountRate ?? couponInfo?.discountRate ?? raw?.coupon?.discountRate;
  354. const discountRateVal = rawDiscountRate != null && rawDiscountRate !== '' ? (Number(rawDiscountRate) || 0) / 10 : null;
  355. priceDetail.value = {
  356. dishTotal: formatPrice(dishTotal),
  357. serviceFee: formatPrice(serviceFeeRaw),
  358. serviceFeeAmount: serviceFeeRaw,
  359. couponDiscount: formatPrice(couponDiscount),
  360. discountAmount: discountAmountVal,
  361. couponName: raw?.couponName ?? couponInfo?.couponName ?? couponInfo?.name ?? '',
  362. couponType: raw?.couponType ?? couponInfo?.couponType ?? null,
  363. nominalValue: raw?.nominalValue ?? couponInfo?.nominalValue ?? couponInfo?.amount ?? null,
  364. discountRate: discountRateVal,
  365. total: formatPrice(payAmountNum),
  366. payAmount: payAmountNum
  367. };
  368. const list =
  369. raw?.orderItemList ??
  370. raw?.orderItems ??
  371. raw?.orderLines ??
  372. raw?.orderLineList ??
  373. raw?.detailList ??
  374. raw?.order?.orderItemList ??
  375. raw?.order?.orderItems ??
  376. (Array.isArray(raw?.items) ? raw.items : []);
  377. foodList.value = (Array.isArray(list) ? list : []).map(normalizeOrderItem);
  378. }
  379. // 去加餐:跳转点餐页,携带桌号与就餐人数
  380. const handleConfirmOrder = () => {
  381. const tableid = uni.getStorageSync('currentTableId');
  382. const diners = orderDetail.value?.dinerCount ?? '';
  383. const storeId = orderDetail.value?.storeId ?? '';
  384. if (!tableid) {
  385. uni.showToast({ title: '订单缺少桌号信息,无法加餐', icon: 'none' });
  386. return;
  387. }
  388. const q = [];
  389. q.push(`tableid=${encodeURIComponent(String(tableid))}`);
  390. if (diners !== '' && diners != null) q.push(`diners=${encodeURIComponent(String(diners))}`);
  391. if (storeId !== '' && storeId != null) q.push(`storeId=${encodeURIComponent(String(storeId))}`);
  392. uni.navigateTo({ url: `/pages/orderFood/index?${q.join('&')}` });
  393. };
  394. // 去结算:跳转确认订单页,携带订单ID、订单号、桌号、就餐人数、订单金额(用于调起支付)
  395. const handleConfirmPay = () => {
  396. const orderId = detailOrderId.value || '';
  397. const orderNo = orderDetail.value?.orderNo ?? '';
  398. const tableId = orderDetail.value?.tableId || orderDetail.value?.tableNo || '';
  399. const tableNumber = orderDetail.value?.tableNo ?? orderDetail.value?.tableNumber ?? '';
  400. const diners = orderDetail.value?.dinerCount ?? '';
  401. const totalAmount = formatPrice(actualPayAmount.value);
  402. const remark = (orderDetail.value?.remark ?? '').trim().slice(0, 30);
  403. const q = [];
  404. if (orderId !== '') q.push(`orderId=${encodeURIComponent(String(orderId))}`);
  405. if (orderNo !== '') q.push(`orderNo=${encodeURIComponent(String(orderNo))}`);
  406. if (tableId !== '') q.push(`tableId=${encodeURIComponent(String(tableId))}`);
  407. if (tableNumber !== '') q.push(`tableNumber=${encodeURIComponent(String(tableNumber))}`);
  408. if (diners !== '') q.push(`diners=${encodeURIComponent(String(diners))}`);
  409. if (totalAmount !== '' && totalAmount != null) q.push(`totalAmount=${encodeURIComponent(String(totalAmount))}`);
  410. if (remark !== '') q.push(`remark=${encodeURIComponent(remark)}`);
  411. uni.navigateTo({ url: q.length ? `/pages/checkout/index?${q.join('&')}` : '/pages/checkout/index' });
  412. };
  413. onLoad(async (e) => {
  414. if (e.payType) payType.value = e.payType;
  415. const orderId = e?.orderId ?? e?.id ?? '';
  416. detailOrderId.value = orderId;
  417. if (!orderId) {
  418. uni.showToast({ title: '缺少订单ID', icon: 'none' });
  419. return;
  420. }
  421. try {
  422. const res = await GetOrderInfo(orderId);
  423. applyOrderData(res);
  424. } catch (err) {
  425. console.error('订单详情加载失败:', err);
  426. uni.showToast({ title: '加载失败', icon: 'none' });
  427. }
  428. });
  429. </script>
  430. <style lang="scss" scoped>
  431. .content {
  432. padding: 0 30rpx 300rpx;
  433. }
  434. .card {
  435. background-color: #fff;
  436. border-radius: 24rpx;
  437. padding: 30rpx 0;
  438. margin-top: 20rpx;
  439. .card-header {
  440. display: flex;
  441. justify-content: space-between;
  442. align-items: center;
  443. padding: 0 30rpx;
  444. height: 40rpx;
  445. position: relative;
  446. font-size: 27rpx;
  447. color: #151515;
  448. font-weight: bold;
  449. }
  450. .tag {
  451. width: 10rpx;
  452. height: 42rpx;
  453. background: linear-gradient(35deg, #FCB73F 0%, #FC733D 100%);
  454. border-radius: 0rpx 0rpx 0rpx 0rpx;
  455. position: absolute;
  456. left: 0;
  457. top: 0;
  458. }
  459. .card-content {
  460. padding: 0 30rpx;
  461. }
  462. .info-item {
  463. display: flex;
  464. justify-content: space-between;
  465. align-items: center;
  466. margin-top: 20rpx;
  467. font-size: 27rpx;
  468. .info-item-label {
  469. color: #666666;
  470. }
  471. .info-item-value {
  472. color: #151515;
  473. }
  474. }
  475. .info-item-textarea {
  476. width: 100%;
  477. height: 115rpx;
  478. border-radius: 8rpx;
  479. border: 1rpx solid #F2F2F2;
  480. margin-top: 20rpx;
  481. font-size: 23rpx;
  482. color: #AAAAAA;
  483. box-sizing: border-box;
  484. padding: 20rpx;
  485. }
  486. .info-food {
  487. margin-top: 20rpx;
  488. }
  489. .food-item {
  490. display: flex;
  491. align-items: center;
  492. padding: 20rpx 0;
  493. &:last-child {
  494. border-bottom: none;
  495. }
  496. &__image {
  497. width: 118rpx;
  498. height: 118rpx;
  499. border-radius: 8rpx;
  500. flex-shrink: 0;
  501. background-color: #f5f5f5;
  502. }
  503. &__info {
  504. flex: 1;
  505. margin-left: 20rpx;
  506. display: flex;
  507. flex-direction: column;
  508. justify-content: center;
  509. }
  510. &__name {
  511. font-size: 28rpx;
  512. font-weight: bold;
  513. color: #151515;
  514. margin-bottom: 8rpx;
  515. }
  516. &__desc {
  517. font-size: 24rpx;
  518. color: #666666;
  519. line-height: 1.5;
  520. }
  521. &__tag {
  522. font-size: 24rpx;
  523. color: #666666;
  524. &.signature {
  525. color: #FC793D;
  526. }
  527. &.spicy {
  528. color: #2E2E2E;
  529. }
  530. }
  531. &__right {
  532. display: flex;
  533. flex-direction: column;
  534. align-items: flex-end;
  535. justify-content: center;
  536. margin-left: 20rpx;
  537. }
  538. &__price {
  539. display: flex;
  540. align-items: baseline;
  541. color: #151515;
  542. font-weight: bold;
  543. margin-bottom: 8rpx;
  544. .price-symbol {
  545. font-size: 20rpx;
  546. margin-right: 2rpx;
  547. }
  548. .price-main {
  549. font-size: 28rpx;
  550. }
  551. .price-decimal {
  552. font-size: 24rpx;
  553. }
  554. }
  555. &__quantity {
  556. font-size: 24rpx;
  557. color: #797979;
  558. }
  559. }
  560. .price-line {
  561. display: flex;
  562. justify-content: space-between;
  563. align-items: center;
  564. margin-top: 20rpx;
  565. font-size: 27rpx;
  566. color: #151515;
  567. border-top: 1rpx solid rgba(170, 170, 170, 0.15);
  568. font-weight: bold;
  569. padding-top: 20rpx;
  570. }
  571. }
  572. .bottom-button {
  573. width: 100%;
  574. background-color: #fff;
  575. padding: 20rpx 30rpx;
  576. box-sizing: border-box;
  577. position: fixed;
  578. bottom: 0;
  579. left: 0;
  580. right: 0;
  581. z-index: 999;
  582. padding-bottom: env(safe-area-inset-bottom);
  583. box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(0, 0, 0, 0.05);
  584. display: flex;
  585. justify-content: space-between;
  586. align-items: center;
  587. .bottom-button-text1 {
  588. font-size: 32rpx;
  589. font-weight: bold;
  590. color: #fff;
  591. width: 324rpx;
  592. height: 80rpx;
  593. border-radius: 23rpx 23rpx 23rpx 23rpx;
  594. border: 2rpx solid #F47D1F;
  595. display: flex;
  596. align-items: center;
  597. color: #F47D1F;
  598. justify-content: center;
  599. }
  600. .bottom-button-text {
  601. font-size: 32rpx;
  602. font-weight: bold;
  603. color: #fff;
  604. background: linear-gradient(90deg, #FCB73F 0%, #FC743D 100%);
  605. border-radius: 23rpx 23rpx 23rpx 23rpx;
  606. display: flex;
  607. align-items: center;
  608. justify-content: center;
  609. width: 324rpx;
  610. height: 80rpx;
  611. }
  612. }
  613. .store-info {
  614. border-bottom: 1rpx solid rgba(170, 170, 170, 0.15);
  615. box-sizing: border-box;
  616. margin: 0 30rpx 30rpx;
  617. .store-info-title {
  618. font-size: 27rpx;
  619. color: #151515;
  620. font-weight: bold;
  621. margin-bottom: 10rpx;
  622. }
  623. .store-info-address {
  624. font-size: 23rpx;
  625. color: #AAAAAA;
  626. margin-bottom: 30rpx;
  627. }
  628. }
  629. </style>