爱简收旧衣按件回收前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

989 lines
31 KiB

1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 weeks ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 weeks ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
  1. <template>
  2. <view class="order-detail-container">
  3. <!-- 顶部导航栏 -->
  4. <view class="nav-bar">
  5. <view class="back" @tap="goBack">
  6. <uni-icons type="left" size="20" color="#222" />
  7. </view>
  8. <text class="nav-title">订单详情</text>
  9. <view class="nav-icons">
  10. <!-- <uni-icons type="more" size="24" color="#222" /> -->
  11. </view>
  12. </view>
  13. <view class="main-content" >
  14. <!-- 回收信息卡片高保真参考流程卡片 -->
  15. <view class="info-card process-card">
  16. <view v-if="order.cancelReason" class="cancel-reason">{{ order.cancelReason }}</view>
  17. <view class="info-card-header">
  18. <view class="info-title-wrap">
  19. <text class="info-title">回收信息</text>
  20. <view v-if="order.statusText === '不包邮'" class="tag-nobaoyou">不包邮</view>
  21. </view>
  22. <view class="status-tag" :class="order.statusClass" style="margin-left:auto;">{{ order.statusLabel }}</view>
  23. </view>
  24. <!-- 步骤条横向卡片式 -->
  25. <view class="steps-bar">
  26. <view v-for="(step, idx) in steps" :key="step.text" :class="['step-item', {active: idx === currentStep}]">
  27. <image :src="step.icon" class="step-icon" />
  28. <view class="step-label" :class="{active: idx === currentStep}">
  29. <text class="step-text">{{ step.text }}</text>
  30. </view>
  31. </view>
  32. </view>
  33. <!-- 订单基础信息左对齐分隔线按钮箭头标签等细节 -->
  34. <view class="base-info">
  35. <view v-for="(item, i) in baseInfo" :key="item.label" class="base-info-row" :class="{'user-stat-trigger': item.label === '用户名'}" @tap="item.label === '用户名' ? onUserStatClick() : null">
  36. <view class="base-label-wrap">
  37. <text class="base-label">{{ item.label }}</text>
  38. </view>
  39. <view class="base-value-wrap">
  40. <text class="base-value">{{ item.value }}</text>
  41. <view class="base-actions">
  42. <text v-if="item.viewLogistics" class="view-logistics-btn" @tap="viewLogistics(item.value, item.expressCompany)">查看物流</text>
  43. <text v-if="item.copy" class="copy-btn" @tap="copyText(item.value)">复制</text>
  44. </view>
  45. <uni-icons v-if="item.arrow" type="right" size="18" color="#bbb" />
  46. </view>
  47. <view v-if="i < baseInfo.length-1" class="divider"></view>
  48. </view>
  49. </view>
  50. </view>
  51. <!-- 用户统计弹窗 -->
  52. <view v-if="showUserStatModal" class="user-stat-modal-mask">
  53. <view class="user-stat-modal-box">
  54. <view class="user-stat-modal-title">{{ userStatData.name }}</view>
  55. <view class="user-stat-modal-row">
  56. <text class="user-stat-label">回收总次数</text>
  57. <text class="user-stat-value">{{ userStatData.unit_num }}</text>
  58. </view>
  59. <view class="user-stat-modal-divider"></view>
  60. <view class="user-stat-modal-row">
  61. <text class="user-stat-label">总件数</text>
  62. <text class="user-stat-value">{{ userStatData.sum }}</text>
  63. </view>
  64. <view class="user-stat-modal-divider"></view>
  65. <view class="user-stat-modal-row">
  66. <text class="user-stat-label">回收总额</text>
  67. <text class="user-stat-value">{{ userStatData.order_money }}</text>
  68. </view>
  69. <button class="user-stat-modal-btn" @tap="showUserStatModal = false">我了解了</button>
  70. </view>
  71. </view>
  72. <!-- 订单明细卡片开始质检状态 -->
  73. <view v-if="order.status === 2 && order.state === 1" class="info-card detail-card custom-inspect-card">
  74. <view class="custom-header-bg">
  75. <view class="custom-card-title">订单详情</view>
  76. </view>
  77. <view class="custom-detail-content">
  78. <!-- 只显示商品明细 -->
  79. <view v-for="item in order.commonOrderList" :key="item.id" class="custom-goods-row">
  80. <image :src="item.image" class="custom-goods-img" />
  81. <view class="custom-goods-info">
  82. <text class="custom-goods-name">{{ item.title }}</text>
  83. <text class="custom-goods-desc">{{ item.pinName }}</text>
  84. <text class="custom-goods-desc">{{ item.details }}</text>
  85. <view class="custom-goods-meta">
  86. <text class="custom-goods-price" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ item.onePrice }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
  87. <text class="custom-goods-price" v-else>¥{{ getSinglePriceRange(item.estimatedPrice, item.num) }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
  88. <text class="custom-goods-count">x{{ item.num }}</text>
  89. </view>
  90. </view>
  91. <text class="custom-goods-total" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ parseFloat(item.estimatedPrice.split('-')[0]).toFixed(2) }}</text>
  92. <text class="custom-goods-total" v-else>¥{{ item.estimatedPrice.replace('-', '~') }}</text>
  93. </view>
  94. </view>
  95. </view>
  96. <!-- 现金打款时展示完整订单详情卡片 -->
  97. <view v-else-if="order.status === 3" class="info-card detail-card custom-inspect-card">
  98. <view class="custom-header-bg">
  99. <view class="custom-card-title">订单详情</view>
  100. </view>
  101. <view class="custom-detail-content">
  102. <view class="custom-detail-row">
  103. <text class="custom-detail-label" >订单编号</text>
  104. <text class="custom-detail-value">{{ order.ordeNo || order.id }}</text>
  105. </view>
  106. <view class="custom-detail-row">
  107. <text class="custom-detail-label">合格结算</text>
  108. <text class="custom-detail-value highlight">¥ {{ order.price || order.estimate }}</text>
  109. </view>
  110. <view class="custom-detail-row">
  111. <text class="custom-detail-label">运费扣除</text>
  112. <text class="custom-detail-value">¥ 0</text>
  113. </view>
  114. <view class="custom-detail-row total-row">
  115. <text class="custom-detail-label">结算金额</text>
  116. <text class="custom-detail-value total highlight">¥ {{ order.price || order.estimate }}</text>
  117. </view>
  118. <view class="custom-divider"></view>
  119. <!-- 商品明细 -->
  120. <view v-for="item in order.commonOrderList" :key="item.id" class="custom-goods-row">
  121. <image :src="item.image" class="custom-goods-img" />
  122. <view class="custom-goods-info">
  123. <text class="custom-goods-name">{{ item.title }}</text>
  124. <text class="custom-goods-desc">{{ item.pinName }}</text>
  125. <text class="custom-goods-desc">{{ item.details }}</text>
  126. <view class="custom-goods-meta">
  127. <text class="custom-goods-price" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ item.onePrice }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
  128. <text class="custom-goods-price" v-else>¥{{ getSinglePriceRange(item.estimatedPrice, item.num) }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
  129. <text class="custom-goods-count">x{{ item.num }}</text>
  130. </view>
  131. </view>
  132. <text class="custom-goods-total" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ parseFloat(item.estimatedPrice.split('-')[0]).toFixed(2) }}</text>
  133. <text class="custom-goods-total" v-else>¥{{ item.estimatedPrice.replace('-', '~') }}</text>
  134. </view>
  135. </view>
  136. </view>
  137. <!-- 质检结果卡片 -->
  138. <view v-if="order.status === 3" class="inspect-card">
  139. <view class="inspect-header">
  140. <text class="inspect-title">质检结果</text>
  141. </view>
  142. <view class="inspect-content">
  143. <view v-for="(item, i) in qcInfo" :key="item.label" class="inspect-row">
  144. <text class="inspect-label">{{ item.label }}</text>
  145. <text class="inspect-value">{{ item.value }}</text>
  146. <view v-if="i < qcInfo.length-1" class="inspect-divider"></view>
  147. </view>
  148. <view class="inspect-btn" @tap="goToInspection">点此查看质检报告详情</view>
  149. </view>
  150. </view>
  151. <!-- 已预约状态下订单详情卡片 -->
  152. <view v-else-if="order.status === 1||order.status === 0" class="info-card detail-card custom-inspect-card">
  153. <view class="custom-header-bg">
  154. <view class="custom-card-title">订单详情</view>
  155. </view>
  156. <view class="custom-detail-content">
  157. <view class="custom-detail-row">
  158. <text class="custom-detail-label">预估回收</text>
  159. <text class="custom-detail-value highlight">¥ {{ order.estimatedPrice }}</text>
  160. </view>
  161. <view class="custom-divider"></view>
  162. <!-- 商品明细 -->
  163. <view v-for="item in order.commonOrderList" :key="item.id" class="custom-goods-row">
  164. <image :src="item.image" class="custom-goods-img" />
  165. <view class="custom-goods-info">
  166. <text class="custom-goods-name">{{ item.title }}</text>
  167. <text class="custom-goods-desc">{{ item.pinName }}</text>
  168. <text class="custom-goods-desc">{{ item.details }}</text>
  169. <view class="custom-goods-meta">
  170. <text class="custom-goods-price" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ item.onePrice }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
  171. <text class="custom-goods-price" v-else>¥{{ getSinglePriceRange(item.estimatedPrice, item.num) }}<text class="custom-goods-unit"> /{{item.unit}}</text></text>
  172. <text class="custom-goods-count">x{{ item.num }}</text>
  173. </view>
  174. </view>
  175. <text class="custom-goods-total" v-if="shouldShowSinglePrice(item.estimatedPrice)">¥{{ parseFloat(item.estimatedPrice.split('-')[0]).toFixed(2) }}</text>
  176. <text class="custom-goods-total" v-else>¥{{ item.estimatedPrice.replace('-', '~') }}</text>
  177. </view>
  178. </view>
  179. </view>
  180. </view>
  181. <!-- 底部操作按钮 -->
  182. <view v-if="order.status === 0" class="footer-btns">
  183. <button class="btn-outline" @tap="rejectOrderAction">驳回</button>
  184. <button class="btn-main" @tap="passOrderAction">通过</button>
  185. </view>
  186. <view v-else-if="order.status === 2 && order.state === 1" class="footer-btns">
  187. <button class="btn-main" @tap="goToInspect">开始质检</button>
  188. </view>
  189. </view>
  190. </template>
  191. <script>
  192. import pullRefreshMixin from '../mixins/pullRefreshMixin.js'
  193. export default {
  194. mixins: [pullRefreshMixin],
  195. data() {
  196. return {
  197. statusBarHeight: 0,
  198. order: {},
  199. // 固定4步流程
  200. steps: [],
  201. currentStep: 0,
  202. baseInfo: [],
  203. qcInfo: [],
  204. showUserStatModal: false,
  205. userStatData: { name: '', unit_num: '', sum: '', order_money: '' }
  206. }
  207. },
  208. onLoad(options) {
  209. this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  210. this.getAreaList();
  211. if (options && options.id) {
  212. this.fetchOrderDetail(options.id)
  213. }
  214. },
  215. onShow() {
  216. this.getAreaList()
  217. },
  218. methods: {
  219. async fetchOrderDetail(orderId) {
  220. this.$api('getOrderDetail', { orderId }, res => {
  221. if (res && res.code === 200 && res.result) {
  222. const data = res.result
  223. this.order = data
  224. // 步骤条高亮
  225. this.currentStep = this.getCurrentStep(data.status, data.state)
  226. // 基础信息
  227. this.baseInfo = [
  228. { label: '订单编号', value: data.ordeNo || data.id, copy: true },
  229. ...(data.wliuNo && data.wliu ? [{ label: '快递单号', value: data.wliuNo, copy: true, viewLogistics: true, expressCompany: data.wliu }] : []),
  230. { label: '用户名', value: data.name, arrow: true },
  231. { label: '取件地址', value: (data.address || '') + (data.addressDetail || '') },
  232. { label: '预约时间', value: data.goTime || data.createTime }
  233. ]
  234. // 质检信息(如有)
  235. let sum = (data.qualifiedNum || 0) + (data.noQualifiedNum || 0) + (data.unrecyclable || 0)
  236. this.qcInfo = [
  237. { label: '质检数量', value: sum ? sum + ' 件' : '' },
  238. { label: '质检合格', value: data.qualifiedNum ? data.qualifiedNum + ' 件' : '' },
  239. { label: '质量问题', value: data.noQualifiedNum ? data.noQualifiedNum + ' 件' : '' },
  240. { label: '不可回收', value: data.unrecyclable ? data.unrecyclable + ' 件' : '' }
  241. ]
  242. }
  243. })
  244. },
  245. getCurrentStep(status, state) {
  246. // status: 0=在线预约, 1=快递上门, 2=透明质检, 3=现金打款
  247. // state: 0=待取件, 1=已取件, 2=已完成, 3=已取消
  248. if (state == 3) return -1; // 已取消,不高亮任何步骤
  249. if (status == 0) return 0; // 在线预约
  250. if (status == 1) return 1; // 快递上门
  251. if (status == 2) return 2; // 透明质检
  252. if (status == 3) return 3; // 现金打款
  253. return 0;
  254. },
  255. async onRefresh() {
  256. if (this.order.id) await this.fetchOrderDetail(this.order.id)
  257. },
  258. goBack() {
  259. uni.navigateBack()
  260. },
  261. copyText(text) {
  262. uni.setClipboardData({ data: text })
  263. },
  264. viewLogistics(expressNumber, expressCompany) {
  265. if (!expressNumber) {
  266. uni.showToast({ title: '暂无快递单号', icon: 'none' });
  267. return;
  268. }
  269. uni.navigateTo({
  270. url: `/pages/subcomponent/logistics?wliuNo=${expressNumber}&expressCompany=${expressCompany || ''}`
  271. });
  272. },
  273. maskPhone(phone) {
  274. if (!phone) return '';
  275. return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  276. },
  277. goToInspect() {
  278. const orderData = encodeURIComponent(JSON.stringify(this.order))
  279. uni.navigateTo({
  280. url: `/pages/manager/inspect?orderData=${orderData}`
  281. })
  282. },
  283. async onUserStatClick() {
  284. if (!this.order || !this.order.userId) return;
  285. this.$api('getUserOrderNum', { userId: this.order.userId }, res => {
  286. if (res && res.code === 200 && res.result) {
  287. this.userStatData = {
  288. name: this.order.name,
  289. unit_num: res.result.unit_num,
  290. sum: res.result.sum,
  291. order_money: res.result.order_money
  292. }
  293. this.showUserStatModal = true
  294. }
  295. })
  296. },
  297. getAreaList() {
  298. this.$api('getAreaList', {}, (res) => {
  299. console.log(res,'getAreaList');
  300. if (res.code == 200 && Array.isArray(res.result)) {
  301. // 按sort升序排序
  302. const sorted = res.result.slice().sort((a, b) => a.sort - b.sort)
  303. this.steps = sorted.map(item => ({
  304. // id: item.id,
  305. icon: item.image,
  306. text: item.title
  307. }))
  308. }
  309. })
  310. },
  311. passOrderAction() {
  312. if (!this.order.id) return;
  313. this.$api('passOrder', { orderId: this.order.id }, res => {
  314. if (res && res.code === 200) {
  315. uni.showToast({ title: '操作成功', icon: 'success' })
  316. this.fetchOrderDetail(this.order.id)
  317. } else {
  318. uni.showToast({ title: res.msg || '操作失败', icon: 'none' })
  319. }
  320. })
  321. },
  322. rejectOrderAction() {
  323. if (!this.order.id) return;
  324. this.$api('rejectOrder', { orderId: this.order.id }, res => {
  325. if (res && res.code === 200) {
  326. uni.showToast({ title: '操作成功', icon: 'success' })
  327. this.fetchOrderDetail(this.order.id)
  328. } else {
  329. uni.showToast({ title: res.msg || '操作失败', icon: 'none' })
  330. }
  331. })
  332. },
  333. goToInspection() {
  334. if (!this.order.id) return;
  335. uni.navigateTo({
  336. url: `/pages/subcomponent/inspection-report?orderId=${this.order.id}`
  337. })
  338. },
  339. // 判断是否显示单价格(根据estimatedPrice格式判断)
  340. shouldShowSinglePrice(estimatedPrice) {
  341. if (!estimatedPrice || typeof estimatedPrice !== 'string') return true;
  342. // 解析estimatedPrice,格式如"25-0"或"25-50"
  343. const parts = estimatedPrice.split('-');
  344. if (parts.length !== 2) return true;
  345. const maxPrice = parseFloat(parts[1]);
  346. return maxPrice === 0;
  347. },
  348. // 从总价反推单件价格区间
  349. getSinglePriceRange(estimatedPrice, quantity) {
  350. if (!estimatedPrice || typeof estimatedPrice !== 'string' || !quantity) return '';
  351. // 解析estimatedPrice,格式如"25-50"
  352. const parts = estimatedPrice.split('-');
  353. if (parts.length !== 2) return estimatedPrice;
  354. const minTotal = parseFloat(parts[0]);
  355. const maxTotal = parseFloat(parts[1]);
  356. // 反推单件价格
  357. const minPrice = (minTotal / quantity).toFixed(2);
  358. const maxPrice = (maxTotal / quantity).toFixed(2);
  359. return `${minPrice}~${maxPrice}`;
  360. },
  361. }
  362. }
  363. </script>
  364. <style lang="scss" scoped>
  365. $order-card-radius: 32px;
  366. $order-card-padding: 40px 28px;
  367. .order-detail-container {
  368. background: #f8f8f8;
  369. min-height: 100vh;
  370. font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  371. display: flex;
  372. flex-direction: column;
  373. align-items: center;
  374. }
  375. .nav-bar {
  376. display: flex;
  377. align-items: center;
  378. height: calc(150rpx + var(--status-bar-height));
  379. padding: 0 32rpx;
  380. padding-top: var(--status-bar-height);
  381. background: #fff;
  382. position: fixed;
  383. top: 0;
  384. left: 0;
  385. right: 0;
  386. z-index: 999;
  387. box-sizing: border-box;
  388. box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  389. .back {
  390. padding: 20rpx;
  391. margin-left: -20rpx;
  392. }
  393. .nav-title {
  394. flex: 1;
  395. text-align: center;
  396. font-size: 32rpx;
  397. font-weight: 500;
  398. color: #222;
  399. }
  400. .nav-icons {
  401. display: flex;
  402. align-items: center;
  403. gap: 30px;
  404. }
  405. }
  406. .main-content {
  407. margin-top: calc(200rpx + var(--status-bar-height));
  408. width: 100vw;
  409. min-width: 0;
  410. box-sizing: border-box;
  411. padding: 0 16px 60px 16px;
  412. display: flex;
  413. flex-direction: column;
  414. align-items: center;
  415. }
  416. .info-card {
  417. width: 100%;
  418. max-width: 375px;
  419. min-width: 0;
  420. box-sizing: border-box;
  421. margin: 0 auto 28px auto;
  422. padding: 16px 8px;
  423. background: #fff;
  424. border-radius: 20px;
  425. box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  426. // color: blue;
  427. &.process-card {
  428. position: relative;
  429. .status-tag {
  430. position: absolute;
  431. right: 18px;
  432. top: 18px;
  433. font-size: 13px;
  434. border-radius: 12px;
  435. padding: 2px 10px;
  436. font-weight: 500;
  437. background: #e6f9e6;
  438. color: #1ecb1e;
  439. height: 22px;
  440. line-height: 18px;
  441. display: flex;
  442. align-items: center;
  443. &.orange {
  444. background: #fff7e6;
  445. color: #ffb400;
  446. font-size: 14px;
  447. border-radius: 12px;
  448. padding: 2px 14px;
  449. font-weight: 400;
  450. height: 22px;
  451. display: flex;
  452. align-items: center;
  453. }
  454. &.gray {
  455. background: #f5f5f5;
  456. color: #444;
  457. font-size: 14px;
  458. border-radius: 12px;
  459. padding: 2px 14px;
  460. font-weight: 400;
  461. height: 22px;
  462. display: flex;
  463. align-items: center;
  464. }
  465. &.blue {
  466. background: #eaf6ff;
  467. color: #2a9cfb;
  468. font-size: 14px;
  469. border-radius: 12px;
  470. padding: 2px 14px;
  471. font-weight: 400;
  472. height: 22px;
  473. display: flex;
  474. align-items: center;
  475. }
  476. }
  477. .status-tag.red {
  478. background: #fff0f0;
  479. color: #ff4d4f;
  480. }
  481. }
  482. .info-card-header {
  483. display: flex; align-items: center; justify-content: flex-start;
  484. .info-title-wrap {
  485. display: flex;
  486. align-items: center;
  487. .info-title { font-size: 18px; font-weight: bold; color: #222; }
  488. .tag-nobaoyou {
  489. margin-left: 8px;
  490. background: #fff0f0;
  491. color: #ff4d4f;
  492. font-size: 14px;
  493. border-radius: 12px;
  494. padding: 2px 14px;
  495. font-weight: 400;
  496. height: 22px;
  497. display: flex;
  498. align-items: center;
  499. }
  500. }
  501. .status-tag { margin-left: auto; }
  502. }
  503. .steps-bar {
  504. display: flex;
  505. justify-content: space-between;
  506. align-items: flex-start;
  507. margin: 24px 0 24px 0;
  508. gap: 14px;
  509. .step-item {
  510. background: #fff8ea;
  511. border-radius: 16px;
  512. width: 76px;
  513. height: 76px;
  514. display: flex;
  515. flex-direction: column;
  516. align-items: center;
  517. box-shadow: 0 2px 8px rgba(255, 156, 0, 0.04);
  518. overflow: hidden;
  519. position: relative;
  520. transition: all 0.3s ease;
  521. .step-icon {
  522. width: 44px;
  523. height: 44px;
  524. margin: 6px 0 0 0;
  525. transition: transform 0.3s ease;
  526. }
  527. .step-label {
  528. width: 100%;
  529. height: 28px;
  530. background: transparent;
  531. position: absolute;
  532. left: 0;
  533. bottom: 0;
  534. border-radius: 0 0 12px 12px;
  535. display: flex;
  536. align-items: center;
  537. justify-content: center;
  538. transition: all 0.3s ease;
  539. overflow: hidden;
  540. line-height: 1;
  541. .step-num, .step-text {
  542. font-size: 11px;
  543. color: #9b9b9b;
  544. font-weight: 600;
  545. line-height: 1;
  546. vertical-align: middle;
  547. transition: color 0.3s ease;
  548. }
  549. .step-num {
  550. margin-right: 2px;
  551. }
  552. }
  553. &.active {
  554. transform: translateY(-2px);
  555. box-shadow: 0 4px 12px rgba(255, 156, 0, 0.08);
  556. .step-icon {
  557. transform: scale(1.05);
  558. }
  559. .step-label {
  560. background: linear-gradient(90deg, #ffd01e 0%, #ff8917 100%);
  561. }
  562. .step-num, .step-text {
  563. color: #fff;
  564. font-weight: bold;
  565. }
  566. }
  567. &:not(.active):hover {
  568. transform: translateY(-1px);
  569. box-shadow: 0 2px 12px rgba(255, 156, 0, 0.06);
  570. }
  571. }
  572. }
  573. .base-info {
  574. margin-top: 18px;
  575. .base-info-row {
  576. display: flex;
  577. align-items: flex-start;
  578. padding: 0 0 0 0;
  579. position: relative;
  580. min-height: 36px;
  581. justify-content: space-between;
  582. align-items: center;
  583. .base-label-wrap { min-width: 80px; text-align: left; color: #8b8b8b; font-size: 13px;}
  584. .base-value-wrap { display: flex; align-items: center; flex: 1; justify-content: flex-end; }
  585. .base-value { color: #222; font-size: 15px; font-weight: 600; word-break: break-all; text-align: right; }
  586. .base-actions { display: flex; align-items: center; gap: 8px; }
  587. .view-logistics-btn { color: #2a9cfb; font-size: 13px; font-weight: 400; padding: 1px 6px; border-radius: 6px; transition: background 0.2s; }
  588. .view-logistics-btn:active { background: #eaf6ff; }
  589. .copy-btn { color: #ffb400; font-size: 13px; font-weight: 400; padding: 1px 6px; border-radius: 6px; transition: background 0.2s; }
  590. .copy-btn:active { background: #fff7e6; }
  591. .divider { position: absolute; left: 16px; right: 16px; bottom: -1px; height: 1px; background: #f0f0f0; }
  592. uni-icons { margin-left: 6px; }
  593. }
  594. .base-info-row .base-value-wrap { flex-wrap: wrap; }
  595. .base-info-row .base-value { white-space: pre-line; line-height: 1.5; }
  596. }
  597. &.detail-card {
  598. position: relative;
  599. padding: 0;
  600. background: transparent;
  601. .card-header-bg {
  602. height: 56px;
  603. background: linear-gradient(180deg, #fff7e6 0%, #fff 100%);
  604. border-radius: 20px 20px 0 0;
  605. display: flex;
  606. align-items: flex-end;
  607. padding-left: 20px;
  608. padding-top: 12px;
  609. }
  610. .detail-content {
  611. background: #fff;
  612. border-radius: 0 0 20px 20px;
  613. padding: 20px 16px 16px 16px;
  614. }
  615. .detail-row {
  616. display: flex;
  617. align-items: center;
  618. min-height: 32px;
  619. .detail-label {
  620. color: #bcbcbc;
  621. font-size: 14px;
  622. width: 90px;
  623. flex-shrink: 0;
  624. }
  625. .detail-value {
  626. color: #222;
  627. font-size: 15px;
  628. font-weight: 500;
  629. text-align: left;
  630. margin-left: 0;
  631. flex: 1;
  632. }
  633. &.total-row .detail-value.total {
  634. color: #ffb400;
  635. font-size: 20px;
  636. font-weight: bold;
  637. text-align: right;
  638. flex: unset;
  639. margin-left: auto;
  640. min-width: 100px;
  641. }
  642. .orange { color: #ffb400; }
  643. }
  644. .divider { height: 1px; background: #f0f0f0; margin: 16px 0; }
  645. .goods-row { display: flex; align-items: flex-start; margin-bottom: 18px; }
  646. .goods-img { width: 48px; height: 48px; border-radius: 12px; margin-right: 12px; }
  647. .goods-info { flex: 1; }
  648. .goods-name { font-size: 15px; font-weight: bold; color: #222; margin-bottom: 2px; }
  649. .goods-desc { font-size: 13px; color: #bbb; margin-bottom: 8px; }
  650. .goods-price-row { display: flex; align-items: center; }
  651. .goods-price { color: #ffb400; font-size: 15px; font-weight: bold; margin-right: 8px; }
  652. .goods-unit { font-size: 13px; color: #bbb; }
  653. .goods-count { color: #bbb; font-size: 13px; margin-left: 8px; }
  654. .goods-total { color: #222; font-size: 15px; font-weight: bold; margin-left: auto; }
  655. }
  656. }
  657. .footer-btns {
  658. position: fixed; left: 0; right: 0; bottom: 0; background: #fff; display: flex; gap: 16px; padding: 16px 24px 32px 24px; z-index: 101;
  659. .btn-outline {
  660. flex: 1;
  661. height: 40px;
  662. border-radius: 16px;
  663. border: 1px solid #ffe09a;
  664. color: #ffb400;
  665. background: #fff0d2;
  666. font-size: 15px;
  667. font-weight: 500;
  668. box-shadow: none;
  669. padding: 0 18px;
  670. }
  671. .btn-main {
  672. flex: 1;
  673. height: 40px;
  674. border-radius: 16px;
  675. background: linear-gradient(90deg, #ffbe3d 0%, #ffac04 100%);
  676. color: #fff;
  677. border: none;
  678. font-size: 15px;
  679. font-weight: 500;
  680. box-shadow: none;
  681. padding: 0 18px;
  682. }
  683. }
  684. .cancel-reason {
  685. color: #bbb;
  686. font-size: 13px;
  687. margin-bottom: 10px;
  688. padding-left: 2px;
  689. }
  690. .inspect-card {
  691. max-width: 335px;
  692. width: 100%;
  693. margin: 0 auto 28px auto;
  694. border-radius: 24px;
  695. overflow: hidden;
  696. .inspect-header {
  697. height: 60px;
  698. background: linear-gradient(180deg, #fff7e6 0%, #fffbe6 100%);
  699. border-radius: 24px 24px 0 0;
  700. display: flex;
  701. align-items: flex-end;
  702. padding-left: 24px;
  703. }
  704. .inspect-title {
  705. font-size: 20px;
  706. font-weight: bold;
  707. color: #222;
  708. line-height: 60px;
  709. }
  710. .inspect-content {
  711. background: #fff;
  712. border-radius: 0 0 24px 24px;
  713. padding: 24px 24px 20px 24px;
  714. }
  715. .inspect-row {
  716. display: flex; align-items: center; justify-content: space-between;
  717. min-height: 40px;
  718. .inspect-label { color: #bcbcbc; font-size: 16px; }
  719. .inspect-value { color: #222; font-size: 16px; font-weight: 500; }
  720. .inspect-divider { height: 1px; background: #f0f0f0; margin: 0; width: 100%; position: absolute; left: 0; bottom: 0; }
  721. position: relative;
  722. }
  723. .inspect-btn {
  724. width: 100%;
  725. margin: 24px 0 0 0;
  726. height: 48px;
  727. border-radius: 24px;
  728. border: 1.5px solid #ffb400;
  729. color: #ffb400;
  730. background: #fff0d2;
  731. font-size: 18px;
  732. font-weight: 500;
  733. box-shadow: none;
  734. text-align: center;
  735. line-height: 48px;
  736. }
  737. }
  738. .card-title {
  739. font-size: 20px;
  740. font-weight: bold;
  741. color: #222;
  742. margin-bottom: 12px;
  743. }
  744. .custom-inspect-card {
  745. background: linear-gradient(180deg, #fffbe6 0%, #fff 90%);
  746. border-radius: 20px;
  747. box-shadow: 0 8px 24px rgba(255, 156, 0, 0.03);
  748. padding: 0;
  749. margin: 24rpx 0 0 0;
  750. overflow: hidden;
  751. }
  752. .custom-header-bg {
  753. height: 56px;
  754. background: linear-gradient(180deg, #fff7e6 0%, #fff 100%);
  755. border-radius: 20px 20px 0 0;
  756. display: flex;
  757. align-items: flex-end;
  758. padding-left: 24px;
  759. padding-top: 12px;
  760. }
  761. .custom-card-title {
  762. font-size: 20px;
  763. font-weight: bold;
  764. color: #222;
  765. margin-bottom: 12px;
  766. }
  767. .custom-detail-content {
  768. background: #fff;
  769. border-radius: 0 0 20px 20px;
  770. padding: 20px 16px 16px 16px;
  771. }
  772. .custom-detail-row {
  773. display: flex;
  774. align-items: center;
  775. min-height: 32px;
  776. font-size: 15px;
  777. .custom-detail-label {
  778. color: #bcbcbc;
  779. font-size: 14px;
  780. width: 90px;
  781. flex-shrink: 0;
  782. }
  783. .custom-detail-value {
  784. color: #222;
  785. font-size: 15px;
  786. font-weight: 500;
  787. text-align: left;
  788. margin-left: 0;
  789. flex: 1;
  790. }
  791. &.total-row .custom-detail-value.total {
  792. color: #ffb400;
  793. font-size: 20px;
  794. font-weight: bold;
  795. text-align: right;
  796. flex: unset;
  797. margin-left: auto;
  798. min-width: 100px;
  799. }
  800. .highlight {
  801. color: #ffb400;
  802. font-size: 18px;
  803. font-weight: bold;
  804. }
  805. }
  806. .custom-divider {
  807. width: 100%;
  808. height: 1px;
  809. background: #f0f0f0;
  810. margin: 16px 0;
  811. }
  812. .custom-goods-row {
  813. background: #fff;
  814. border-radius: 24px;
  815. display: flex;
  816. align-items: center;
  817. padding: 24px 16px;
  818. box-shadow: 0 2px 8px rgba(255, 156, 0, 0.04);
  819. position: relative;
  820. margin-bottom: 18px;
  821. min-width: 0;
  822. flex-wrap: nowrap;
  823. }
  824. .custom-goods-img {
  825. width: 48px;
  826. height: 48px;
  827. border-radius: 12px;
  828. margin-right: 12px;
  829. flex-shrink: 0;
  830. }
  831. .custom-goods-info {
  832. flex: 1;
  833. display: flex;
  834. flex-direction: column;
  835. justify-content: center;
  836. min-width: 0;
  837. margin-right: 16px;
  838. }
  839. .custom-goods-name {
  840. font-size: 15px;
  841. color: #222;
  842. font-weight: bold;
  843. margin-bottom: 2px;
  844. overflow: hidden;
  845. text-overflow: ellipsis;
  846. white-space: nowrap;
  847. }
  848. .custom-goods-desc {
  849. font-size: 13px;
  850. color: #bcbcbc;
  851. margin-bottom: 8px;
  852. overflow: hidden;
  853. text-overflow: ellipsis;
  854. white-space: nowrap;
  855. &:last-child {
  856. margin-bottom: 10px;
  857. }
  858. }
  859. .custom-goods-meta {
  860. display: flex;
  861. align-items: center;
  862. gap: 10px;
  863. flex-wrap: nowrap;
  864. white-space: nowrap;
  865. }
  866. .custom-goods-price {
  867. color: #ffb400;
  868. font-size: 15px;
  869. font-weight: bold;
  870. white-space: nowrap;
  871. flex-shrink: 0;
  872. }
  873. .custom-goods-unit {
  874. color: #bcbcbc;
  875. font-size: 13px;
  876. font-weight: normal;
  877. }
  878. .custom-goods-count {
  879. color: #bcbcbc;
  880. font-size: 13px;
  881. margin-left: 8px;
  882. white-space: nowrap;
  883. flex-shrink: 0;
  884. }
  885. .custom-goods-total {
  886. color: #222;
  887. font-size: 15px;
  888. font-weight: bold;
  889. margin-left: 12px;
  890. flex-shrink: 0;
  891. white-space: nowrap;
  892. min-width: 60px;
  893. text-align: right;
  894. }
  895. .user-stat-modal-mask {
  896. position: fixed;
  897. left: 0; right: 0; top: 0; bottom: 0;
  898. background: rgba(0,0,0,0.45);
  899. z-index: 9999;
  900. display: flex;
  901. align-items: center;
  902. justify-content: center;
  903. }
  904. .user-stat-modal-box {
  905. width: 80vw;
  906. max-width: 420px;
  907. background: linear-gradient(180deg, #fff7f2 0%, #fff 100%);
  908. border-radius: 32px;
  909. box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  910. padding: 38px 0 32px 0;
  911. display: flex;
  912. flex-direction: column;
  913. align-items: center;
  914. }
  915. .user-stat-modal-title {
  916. font-size: 24px;
  917. font-weight: bold;
  918. color: #222;
  919. text-align: center;
  920. margin-bottom: 32px;
  921. }
  922. .user-stat-modal-row {
  923. width: 80%;
  924. display: flex;
  925. align-items: center;
  926. justify-content: space-between;
  927. font-size: 18px;
  928. margin: 0 auto;
  929. padding: 12px 0;
  930. }
  931. .user-stat-label {
  932. color: #999;
  933. font-size: 16px;
  934. }
  935. .user-stat-value {
  936. color: #222;
  937. font-size: 18px;
  938. font-weight: 500;
  939. }
  940. .user-stat-modal-divider {
  941. width: 80%;
  942. height: 1px;
  943. background: #f0f0f0;
  944. margin: 0 auto;
  945. }
  946. .user-stat-modal-btn {
  947. width: 80%;
  948. margin: 32px auto 0 auto;
  949. height: 48px;
  950. border-radius: 24px;
  951. background: #fffbe6;
  952. color: #ffb400;
  953. font-size: 20px;
  954. font-weight: bold;
  955. border: 2px solid #ffd01e;
  956. text-align: center;
  957. line-height: 48px;
  958. }
  959. .user-stat-trigger {
  960. color: #222;
  961. font-weight: 500;
  962. cursor: pointer;
  963. }
  964. </style>