orderDetail.vue 23 KB

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