detail.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898
  1. <template>
  2. <view v-if="!isLoading" class="container">
  3. <view class="header">
  4. <!-- 订单状态 -->
  5. <view class="order-status">
  6. <view class="status-icon">
  7. <!-- 进行中的订单 -->
  8. <block>
  9. <!-- 待支付 -->
  10. <block>
  11. <image v-if="order.status == OrderStatusEnum.CREATED.value" class="image" src="/static/order/status/wait_pay.png" mode="aspectFit"></image>
  12. </block>
  13. <!-- 已支付 -->
  14. <block>
  15. <image v-if="order.status == OrderStatusEnum.PAID.value" class="image" src="/static/order/status/received.png" mode="aspectFit"></image>
  16. </block>
  17. <!-- 待发货 -->
  18. <block>
  19. <image v-if="order.status == OrderStatusEnum.DELIVERY.value" class="image" src="/static/order/status/wait_deliver.png" mode="aspectFit"></image>
  20. </block>
  21. <!-- 已发货 -->
  22. <block>
  23. <image v-if="order.status == OrderStatusEnum.DELIVERED.value" class="image" src="/static/order/status/wait_receipt.png" mode="aspectFit"></image>
  24. </block>
  25. <!-- 已收货-->
  26. <block>
  27. <image v-if="order.status == OrderStatusEnum.RECEIVED.value" class="image" src="/static/order/status/received.png" mode="aspectFit"></image>
  28. </block>
  29. <!-- 已取消-->
  30. <block>
  31. <image v-if="order.status == OrderStatusEnum.CANCEL.value || order.status == OrderStatusEnum.REFUND.value" class="image" src="/static/order/status/close.png" mode="aspectFit"></image>
  32. </block>
  33. </block>
  34. </view>
  35. <view class="status-text">
  36. <text v-if="order.status == OrderStatusEnum.CREATED.value">{{OrderStatusEnum.CREATED.name}}</text>
  37. <text v-else-if="order.status == OrderStatusEnum.PAID.value">{{OrderStatusEnum.PAID.name}}</text>
  38. <text v-else-if="order.status == OrderStatusEnum.DELIVERY.value">{{OrderStatusEnum.DELIVERY.name}}</text>
  39. <text v-else-if="order.status == OrderStatusEnum.DELIVERED.value">{{OrderStatusEnum.DELIVERED.name}}</text>
  40. <text v-else-if="order.status == OrderStatusEnum.RECEIVED.value">{{OrderStatusEnum.RECEIVED.name}}</text>
  41. <text v-else-if="order.status == OrderStatusEnum.CANCEL.value">{{OrderStatusEnum.CANCEL.name}}</text>
  42. <text v-else-if="order.status == OrderStatusEnum.REFUND.value">{{OrderStatusEnum.REFUND.name}}</text>
  43. </view>
  44. <view class="verify-code" v-if="order.orderMode == 'oneself' && order.type == 'goods' && order.verifyCode && order.payStatus == 'B' && !order.tableInfo && ( !['C', 'H', 'G'].includes(order.status))">
  45. <view>提取码:</view>
  46. <view class="code">{{ order.verifyCode }}</view>
  47. </view>
  48. </view>
  49. </view>
  50. <!--订单类型-->
  51. <view class="order-type">
  52. <text class="type">{{ order.typeName }}</text>
  53. </view>
  54. <!-- 快递配送:配送地址 -->
  55. <view v-if="order.address" class="delivery-address i-card">
  56. <view class="link-man">
  57. <text class="name">{{ order.address.name }}</text>
  58. <text class="phone">{{ order.address.mobile }}</text>
  59. </view>
  60. <view class="address">
  61. <text class="region">{{ order.address.provinceName }}{{ order.address.cityName }}{{ order.address.regionName }}</text>
  62. <text class="detail">{{ order.address.detail }}</text>
  63. </view>
  64. </view>
  65. <!-- 门店自提:自提地址 -->
  66. <view v-if="order.orderMode == 'oneself'" class="delivery-address i-card">
  67. <view class="link-man">
  68. <text class="type">[门店自提]</text>
  69. </view>
  70. <view class="link-man">
  71. <text class="name">{{ order.storeInfo.name }}</text>
  72. <text class="phone">{{ order.storeInfo.phone }}</text>
  73. </view>
  74. <view class="address">
  75. <text class="region">{{ order.storeInfo.address }}</text>
  76. </view>
  77. </view>
  78. <!-- 商品列表 -->
  79. <view class="goods-list i-card" v-if="order.goods.length > 0">
  80. <view class="goods-item" v-for="(goods, idx) in order.goods" :key="idx">
  81. <view class="goods-main" v-if="goods.num > 0" @click="handleTargetGoods(goods.goodsId, goods.type)">
  82. <!-- 商品图片 -->
  83. <view class="goods-image">
  84. <image class="image" :src="goods.image" mode="widthFix"></image>
  85. </view>
  86. <!-- 商品信息 -->
  87. <view class="goods-content">
  88. <view class="goods-title twolist-hidden"><text>{{goods.name}}</text></view>
  89. <view class="goods-props clearfix">
  90. <view class="goods-props-item" v-for="(props, idx) in goods.specList" :key="idx">
  91. <text>{{ props.specValue }}</text>
  92. </view>
  93. </view>
  94. </view>
  95. <!-- 交易信息 -->
  96. <view class="goods-trade">
  97. <view class="goods-price">
  98. <text class="unit">¥</text>
  99. <text class="value">{{ goods.price }}</text>
  100. </view>
  101. <view class="goods-num">
  102. <text>×{{goods.num}}</text>
  103. </view>
  104. </view>
  105. </view>
  106. </view>
  107. </view>
  108. <!-- 订单信息 -->
  109. <view class="order-info i-card">
  110. <view class="info-item">
  111. <view class="item-lable">订单编号</view>
  112. <view class="item-content">
  113. <text>{{order.orderSn}}</text>
  114. <view class="act-copy" @click="handleCopy(order.orderSn)">
  115. <text>复制</text>
  116. </view>
  117. </view>
  118. </view>
  119. <view class="info-item">
  120. <view class="item-lable">下单时间</view>
  121. <view class="item-content">
  122. <text>{{order.createTime}}</text>
  123. </view>
  124. </view>
  125. <view class="info-item">
  126. <view class="item-lable">支付时间</view>
  127. <view class="item-content">
  128. <text>{{order.payTime ? order.payTime : '--'}}</text>
  129. </view>
  130. </view>
  131. <view class="info-item">
  132. <view class="item-lable">备注信息</view>
  133. <view class="item-content">
  134. <text>{{order.remark ? order.remark : '--'}}</text>
  135. </view>
  136. </view>
  137. </view>
  138. <!-- 结算信息 -->
  139. <view class="trade-info i-card">
  140. <view class="info-item">
  141. <view class="item-lable">订单金额</view>
  142. <view class="item-content">
  143. <text>¥{{(order.amount.toFixed(2))}}</text>
  144. </view>
  145. </view>
  146. <view v-if="order.discount > 0" class="info-item">
  147. <view class="item-lable">优惠金额</view>
  148. <view class="item-content">
  149. <text>-¥{{ order.discount.toFixed(2) }}</text>
  150. </view>
  151. </view>
  152. <view v-if="order.deliveryFee > 0" class="info-item">
  153. <view class="item-lable">配送费用</view>
  154. <view class="item-content">
  155. <text>+¥{{ order.deliveryFee.toFixed(2) }}</text>
  156. </view>
  157. </view>
  158. <view v-if="order.pointAmount > 0" class="info-item">
  159. <view class="item-lable">积分抵扣</view>
  160. <view class="item-content">
  161. <text>-¥{{ order.pointAmount.toFixed(2) }}</text>
  162. </view>
  163. </view>
  164. <view class="info-item">
  165. <view class="item-lable">支付方式</view>
  166. <view class="item-content">
  167. <text>{{ PayTypeEnum.getNameByValue(order.payType) }}</text>
  168. </view>
  169. </view>
  170. <view class="divider"></view>
  171. <view class="trade-total">
  172. <text class="lable">实付款</text>
  173. <view class="goods-price">
  174. <text class="unit">¥</text>
  175. <text class="value">{{order.payAmount ? order.payAmount.toFixed(2) : '0.00'}}</text>
  176. </view>
  177. </view>
  178. </view>
  179. <!-- 底部操作按钮 -->
  180. <view class="footer-fixed" v-if="order.status == OrderStatusEnum.CREATED.value">
  181. <view class="btn-wrapper">
  182. <block v-if="!order.tableInfo">
  183. <view class="btn-item" @click="onCancel(order.id)">取消订单</view>
  184. </block>
  185. <block v-if="order.tableInfo">
  186. <view class="btn-item" @click="onContinue(order.id, order.tableInfo.id)">继续点单</view>
  187. </block>
  188. <block>
  189. <view class="btn-item active" @click="onPay(order.id)">去支付</view>
  190. </block>
  191. </view>
  192. </view>
  193. <!-- 已支付的订单 -->
  194. <view class="footer-fixed" v-if="(order.payStatus == OrderStatusEnum.PAID.value) && !order.tableInfo">
  195. <view class="btn-wrapper">
  196. <block v-if="!order.refundInfo">
  197. <view class="btn-item active" @click="handleApplyRefund(order.id)">申请售后</view>
  198. </block>
  199. <block v-if="order.refundInfo">
  200. <view class="btn-item common" @click="handleRefundDetail(order.refundInfo.id)">售后详情</view>
  201. </block>
  202. </view>
  203. </view>
  204. <view class="footer-fixed" v-if="order.status == OrderStatusEnum.DELIVERED.value">
  205. <view class="btn-wrapper">
  206. <block>
  207. <view class="btn-item active" @click="onReceipt(order.id)">确认收货</view>
  208. </block>
  209. </view>
  210. </view>
  211. <!-- 支付方式弹窗 -->
  212. <u-popup v-model="showPayPopup" mode="bottom" :closeable="true">
  213. <view class="pay-popup">
  214. <view class="title">请选择支付方式</view>
  215. <view class="pop-content">
  216. <!-- 微信支付 -->
  217. <view class="pay-item dis-flex flex-x-between" @click="onSelectPayType(PayTypeEnum.WECHAT.value)">
  218. <view class="item-left dis-flex flex-y-center">
  219. <view class="item-left_icon wechat">
  220. <text class="iconfont icon-weixinzhifu"></text>
  221. </view>
  222. <view class="item-left_text">
  223. <text>{{ PayTypeEnum.WECHAT.name }}</text>
  224. </view>
  225. </view>
  226. </view>
  227. <!-- 余额支付 -->
  228. <view v-if="order.type != 'recharge' && order.type != 'prestore'" class="pay-item dis-flex flex-x-between" @click="onSelectPayType(PayTypeEnum.BALANCE.value)">
  229. <view class="item-left dis-flex flex-y-center">
  230. <view class="item-left_icon balance">
  231. <text class="iconfont icon-qiandai"></text>
  232. </view>
  233. <view class="item-left_text">
  234. <text>{{ PayTypeEnum.BALANCE.name }}</text>
  235. </view>
  236. </view>
  237. </view>
  238. </view>
  239. </view>
  240. </u-popup>
  241. <!-- 快捷导航 -->
  242. <shortcut/>
  243. </view>
  244. </template>
  245. <script>
  246. import {
  247. DeliveryStatusEnum,
  248. DeliveryTypeEnum,
  249. OrderStatusEnum,
  250. PayStatusEnum,
  251. PayTypeEnum,
  252. ReceiptStatusEnum
  253. } from '@/common/enum/order'
  254. import * as OrderApi from '@/api/order'
  255. import { wxPayment } from '@/utils/app'
  256. import Shortcut from '@/components/shortcut'
  257. export default {
  258. components: {
  259. Shortcut
  260. },
  261. data() {
  262. return {
  263. // 枚举类
  264. DeliveryStatusEnum,
  265. DeliveryTypeEnum,
  266. OrderStatusEnum,
  267. PayStatusEnum,
  268. PayTypeEnum,
  269. ReceiptStatusEnum,
  270. // 当前订单ID
  271. orderId: null,
  272. // 桌码ID
  273. tableId: 0,
  274. // 加载中
  275. isLoading: true,
  276. // 当前订单详情
  277. order: {},
  278. // 当前设置
  279. setting: {},
  280. // 支付方式弹窗
  281. showPayPopup: false,
  282. // 刷新页面
  283. reflash: false
  284. }
  285. },
  286. /**
  287. * 生命周期函数--监听页面加载
  288. */
  289. onLoad({ orderId }) {
  290. // 当前订单ID
  291. this.orderId = orderId;
  292. this.tableId = uni.getStorageSync("tableId") ? uni.getStorageSync("tableId") : 0;
  293. },
  294. /**
  295. * 生命周期函数--监听页面显示
  296. */
  297. onShow() {
  298. // 获取当前订单信息
  299. this.getOrderDetail();
  300. },
  301. methods: {
  302. // 获取当前订单信息
  303. getOrderDetail() {
  304. const app = this
  305. app.isLoading = true
  306. OrderApi.detail(app.orderId)
  307. .then(result => {
  308. app.order = result.data
  309. app.setting = result.data
  310. app.isLoading = false
  311. })
  312. },
  313. // 复制指定内容
  314. handleCopy(value) {
  315. const app = this
  316. uni.setClipboardData({
  317. data: value,
  318. success() {
  319. app.$toast('复制成功')
  320. }
  321. })
  322. },
  323. // 跳转到商品详情页面
  324. handleTargetGoods(goodsId, type) {
  325. if (goodsId && parseInt(goodsId) > 0) {
  326. this.$navTo('pages/goods/detail', { goodsId })
  327. }
  328. },
  329. // 跳转到申请售后页面
  330. handleApplyRefund(orderId) {
  331. this.$navTo('pages/refund/apply', { orderId })
  332. },
  333. // 售后详情
  334. handleRefundDetail(refundId) {
  335. this.$navTo('pages/refund/detail', { refundId })
  336. },
  337. // 取消订单
  338. onCancel() {
  339. const app = this
  340. uni.showModal({
  341. title: '友情提示',
  342. content: '确认要取消该订单吗?',
  343. success(o) {
  344. if (o.confirm) {
  345. OrderApi.cancel(app.orderId)
  346. .then(result => {
  347. // 显示成功信息
  348. app.$success(result.message);
  349. // 刷新当前订单数据
  350. app.getOrderDetail();
  351. })
  352. }
  353. }
  354. });
  355. },
  356. // 继续点单
  357. onContinue(orderId, tableId) {
  358. this.$navTo('pages/category/index');
  359. uni.setStorageSync('orderId', orderId);
  360. uni.setStorageSync('tableId', tableId);
  361. },
  362. // 点击去支付
  363. onPay() {
  364. // 显示支付方式弹窗
  365. this.showPayPopup = true;
  366. },
  367. // 确认收货
  368. onReceipt(orderId) {
  369. const app = this
  370. uni.showModal({
  371. title: '友情提示',
  372. content: '确认收到商品了吗?',
  373. success(o) {
  374. if (o.confirm) {
  375. OrderApi.receipt(orderId)
  376. .then(result => {
  377. // 显示成功信息
  378. app.$success(result.message)
  379. // 刷新当前订单数据
  380. app.getOrderDetail()
  381. })
  382. }
  383. }
  384. });
  385. },
  386. // 选择支付方式
  387. onSelectPayType(payType) {
  388. const app = this
  389. // 隐藏支付方式弹窗
  390. this.showPayPopup = false
  391. // 发起支付请求
  392. OrderApi.pay(app.orderId, payType)
  393. .then(result => app.onSubmitCallback(result))
  394. .catch(err => err)
  395. },
  396. // 订单提交成功后回调
  397. onSubmitCallback(result) {
  398. const app = this;
  399. if (!result.data) {
  400. if (result.message) {
  401. app.$error(result.message);
  402. } else {
  403. app.$error('支付失败');
  404. }
  405. return false;
  406. }
  407. // 发起微信支付
  408. if (result.data.payType == PayTypeEnum.WECHAT.value) {
  409. wxPayment(result.data.payment)
  410. .then(() => {
  411. app.$success('支付成功');
  412. setTimeout(() => {
  413. app.getOrderDetail();
  414. }, 1500)
  415. })
  416. .catch(err => {
  417. app.$error('订单未支付');
  418. })
  419. .finally(() => {
  420. app.disabled = false;
  421. })
  422. }
  423. // 余额支付
  424. if (result.data.payType == PayTypeEnum.BALANCE.value) {
  425. if (result.data.orderInfo.payStatus == 'B') {
  426. app.$success('支付成功');
  427. app.disabled = false;
  428. setTimeout(() => {
  429. // 刷新当前订单数据
  430. app.getOrderDetail();
  431. }, 1500)
  432. } else {
  433. app.$error('支付失败');
  434. }
  435. }
  436. }
  437. }
  438. }
  439. </script>
  440. <style>
  441. page {
  442. background: #f4f4f4;
  443. }
  444. </style>
  445. <style lang="scss" scoped>
  446. .container {
  447. padding-bottom: 140rpx;
  448. }
  449. // 页面顶部
  450. .header {
  451. display: flex;
  452. justify-content: space-between;
  453. background-color: $fuint-theme;
  454. height: 280rpx;
  455. padding: 56rpx 30rpx 0 30rpx;
  456. .order-status {
  457. display: flex;
  458. align-items: center;
  459. height: 128rpx;
  460. .status-icon {
  461. width: 128rpx;
  462. height: 128rpx;
  463. .image {
  464. display: block;
  465. width: 100%;
  466. height: 100%;
  467. }
  468. }
  469. .status-text {
  470. padding-left: 20rpx;
  471. color: #fff;
  472. font-size: 38rpx;
  473. font-weight: bold;
  474. }
  475. .verify-code {
  476. color: #ffffff;
  477. margin-left: 60rpx;
  478. font-size: 30rpx;
  479. .code {
  480. font-size: 50rpx;
  481. color: #ffd700;
  482. font-weight: bold;
  483. }
  484. }
  485. }
  486. .next-action {
  487. display: flex;
  488. align-items: center;
  489. height: 128rpx;
  490. .action-btn {
  491. min-width: 150rpx;
  492. height: 60rpx;
  493. padding: 0 30rpx;
  494. line-height: 60rpx;
  495. text-align: center;
  496. border-radius: 30rpx;
  497. border-color: #ffffff;
  498. color: #ffffff;
  499. background: linear-gradient(to right, #f9211c, #ff6335);
  500. cursor: pointer;
  501. user-select: none;
  502. }
  503. }
  504. }
  505. // 通栏卡片
  506. .i-card {
  507. background: #fff;
  508. padding: 24rpx 24rpx;
  509. width: 94%;
  510. box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  511. margin: 0 auto 20rpx auto;
  512. border-radius: 20rpx;
  513. }
  514. // 订单类型
  515. .order-type {
  516. font-weight: bold;
  517. margin: 25rpx;
  518. }
  519. // 收货地址
  520. .delivery-address {
  521. margin-top: 20rpx;
  522. .link-man {
  523. line-height: 46rpx;
  524. color: #333;
  525. .type {
  526. margin-right: 10rpx;
  527. font-weight: bold;
  528. }
  529. .name {
  530. margin-right: 10rpx;
  531. color: #999;
  532. }
  533. .phone {
  534. margin-right: 10rpx;
  535. color: #999;
  536. }
  537. }
  538. .address {
  539. margin-top: 12rpx;
  540. color: #999;
  541. font-size: 24rpx;
  542. .detail {
  543. margin-left: 6rpx;
  544. }
  545. }
  546. }
  547. // 物流公司
  548. .express {
  549. display: flex;
  550. align-items: center;
  551. .main {
  552. flex: 1;
  553. }
  554. .info-item {
  555. display: flex;
  556. margin-bottom: 24rpx;
  557. &:last-child {
  558. margin-bottom: 0;
  559. }
  560. .item-lable {
  561. display: flex;
  562. align-items: center;
  563. font-size: 24rpx;
  564. color: #999;
  565. margin-right: 30rpx;
  566. }
  567. .item-content {
  568. flex: 1;
  569. display: flex;
  570. align-items: center;
  571. font-size: 26rpx;
  572. color: #333;
  573. .act-copy {
  574. margin-left: 20rpx;
  575. padding: 2rpx 20rpx;
  576. font-size: 22rpx;
  577. color: #666;
  578. border: 1rpx solid #c1c1c1;
  579. border-radius: 16rpx;
  580. }
  581. }
  582. }
  583. // 右侧箭头
  584. .right-arrow {
  585. margin-left: 16rpx;
  586. // color: #777;
  587. font-size: 26rpx;
  588. }
  589. }
  590. // 商品列表
  591. .goods-list {
  592. // 商品项
  593. .goods-item {
  594. margin-bottom: 40rpx;
  595. &:last-child {
  596. margin-bottom: 0;
  597. }
  598. // 商品信息
  599. .goods-main {
  600. display: flex;
  601. }
  602. // 商品图片
  603. .goods-image {
  604. width: 180rpx;
  605. height: 180rpx;
  606. .image {
  607. display: block;
  608. width: 100%;
  609. height: 100%;
  610. border-radius: 8rpx;
  611. }
  612. }
  613. // 商品内容
  614. .goods-content {
  615. flex: 1;
  616. padding-left: 16rpx;
  617. padding-top: 16rpx;
  618. .goods-title {
  619. font-size: 26rpx;
  620. max-height: 76rpx;
  621. }
  622. .goods-props {
  623. margin-top: 14rpx;
  624. height: 40rpx;
  625. color: #ababab;
  626. font-size: 24rpx;
  627. overflow: hidden;
  628. .goods-props-item {
  629. display: inline-block;
  630. margin-right: 14rpx;
  631. padding: 4rpx 16rpx;
  632. border-radius: 12rpx;
  633. background-color: #F5F5F5;
  634. width: auto;
  635. }
  636. }
  637. }
  638. // 交易信息
  639. .goods-trade {
  640. padding-top: 16rpx;
  641. width: 150rpx;
  642. text-align: right;
  643. color: $uni-text-color-grey;
  644. font-size: 26rpx;
  645. .goods-price {
  646. vertical-align: bottom;
  647. margin-bottom: 16rpx;
  648. .unit {
  649. margin-right: -2rpx;
  650. font-size: 24rpx;
  651. }
  652. }
  653. }
  654. // 商品售后
  655. .goods-refund {
  656. display: flex;
  657. justify-content: flex-end;
  658. .stata-text {
  659. font-size: 24rpx;
  660. color: #999;
  661. }
  662. .action-btn {
  663. border-radius: 28rpx;
  664. padding: 8rpx 26rpx;
  665. font-size: 24rpx;
  666. color: #383838;
  667. border: 1rpx solid #a8a8a8;
  668. }
  669. }
  670. }
  671. }
  672. // 订单信息
  673. .order-info {
  674. .info-item {
  675. display: flex;
  676. margin-bottom: 24rpx;
  677. &:last-child {
  678. margin-bottom: 0;
  679. }
  680. .item-lable {
  681. display: flex;
  682. align-items: center;
  683. font-size: 24rpx;
  684. color: #999;
  685. margin-right: 30rpx;
  686. }
  687. .item-content {
  688. flex: 1;
  689. display: flex;
  690. align-items: center;
  691. font-size: 26rpx;
  692. color: #333;
  693. .act-copy {
  694. margin-left: 20rpx;
  695. padding: 2rpx 20rpx;
  696. font-size: 22rpx;
  697. color: #666;
  698. border: 1rpx solid #c1c1c1;
  699. border-radius: 16rpx;
  700. }
  701. }
  702. }
  703. }
  704. // 交易信息
  705. .trade-info {
  706. margin-bottom: 80rpx;
  707. .info-item {
  708. display: flex;
  709. margin-bottom: 24rpx;
  710. .item-lable {
  711. font-size: 24rpx;
  712. color: #999;
  713. margin-right: 24rpx;
  714. }
  715. .item-content {
  716. flex: 1;
  717. font-size: 26rpx;
  718. color: #333;
  719. text-align: right;
  720. }
  721. }
  722. .divider {
  723. height: 1rpx;
  724. background: #f1f1f1;
  725. margin-bottom: 24rpx;
  726. }
  727. .trade-total {
  728. display: flex;
  729. justify-content: flex-end;
  730. .goods-price {
  731. margin-left: 12rpx;
  732. vertical-align: bottom;
  733. color: $uni-text-color-active;
  734. .unit {
  735. margin-right: -2rpx;
  736. font-size: 24rpx;
  737. }
  738. }
  739. }
  740. }
  741. /* 底部操作栏 */
  742. .footer-fixed {
  743. position: fixed;
  744. bottom: var(--window-bottom);
  745. left: 0;
  746. right: 0;
  747. height: 180rpx;
  748. padding-bottom: 30rpx;
  749. z-index: 11;
  750. box-shadow: 0 -4rpx 40rpx 0 rgba(97, 97, 97, 0.1);
  751. background: #fff;
  752. .btn-wrapper {
  753. height: 100%;
  754. display: flex;
  755. align-items: center;
  756. justify-content: flex-end;
  757. padding: 0 30rpx;
  758. }
  759. .btn-item {
  760. min-width: 164rpx;
  761. border-radius: 8rpx;
  762. padding: 20rpx 24rpx;
  763. font-size: 28rpx;
  764. color: #383838;
  765. text-align: center;
  766. border: 1rpx solid #a8a8a8;
  767. margin-left: 10rpx;
  768. &.common {
  769. color: #fff;
  770. border: none;
  771. background: linear-gradient(to right, $fuint-theme, $fuint-theme);
  772. }
  773. &.active {
  774. color: #fff;
  775. border: none;
  776. background: linear-gradient(to right, #f9211c, #ff6335);
  777. }
  778. }
  779. }
  780. // 弹出层-支付方式
  781. .pay-popup {
  782. padding: 25rpx 25rpx 70rpx 25rpx;
  783. .title {
  784. font-size: 30rpx;
  785. margin-bottom: 50rpx;
  786. font-weight: bold;
  787. text-align: center;
  788. }
  789. .pop-content {
  790. min-height: 120rpx;
  791. padding: 0 20rpx;
  792. .pay-item {
  793. padding: 30rpx;
  794. font-size: 30rpx;
  795. background: #fff;
  796. border: 1rpx solid $fuint-theme;
  797. border-radius: 8rpx;
  798. color: #888;
  799. margin-bottom: 12rpx;
  800. text-align: center;
  801. .item-left_icon {
  802. margin-right: 20rpx;
  803. font-size: 48rpx;
  804. &.wechat {
  805. color: #00c800;
  806. }
  807. &.balance {
  808. color: $fuint-theme;
  809. }
  810. }
  811. }
  812. }
  813. }
  814. </style>