瑶都万能墙
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.

545 lines
10 KiB

7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
6 months ago
7 months ago
7 months ago
  1. <template>
  2. <view>
  3. <navbar
  4. title="订单详情"
  5. leftClick
  6. @leftClick="$utils.navigateBack"
  7. />
  8. <!-- 水洗店 -->
  9. <view class="">
  10. <!-- <view class="controls">
  11. <view class="title">
  12. <image src="../static/order/icon.png" mode=""></image>
  13. 服务完成
  14. </view>
  15. <view class="tips">
  16. 待送回
  17. </view>
  18. <view class="btns">
  19. <view class="btn1">
  20. 快递寄回
  21. </view>
  22. <view class="btn2">
  23. 线下配送
  24. </view>
  25. </view>
  26. </view> -->
  27. <view class="steps">
  28. <uv-steps
  29. activeColor="#FD5100"
  30. :current="stepsCurrent" dot>
  31. <uv-steps-item :title="item"
  32. :key="index"
  33. v-for="(item, index) in steps"></uv-steps-item>
  34. </uv-steps>
  35. </view>
  36. </view>
  37. <!-- 酒店和水洗店 -->
  38. <view class="info">
  39. <view class="flex"
  40. style="display: flex;">
  41. <view style="width: 8rpx;height: 30rpx;
  42. background: #FD5100;border-radius: 6rpx;" />
  43. <view class="head-title">服务项目</view>
  44. </view>
  45. <view class="flex">
  46. <view class="server-item">
  47. <view class="img-box">
  48. <image :src="order.image" mode="aspectFill"></image>
  49. </view>
  50. <view class="server-info">
  51. <view class="server-title">
  52. {{order.name}}
  53. <!-- <view class="coupon">领券立减</view> -->
  54. </view>
  55. <view class="current-price">
  56. 价格<text class="unit"></text>{{order.price}}
  57. </view>
  58. <view class="current-price">
  59. 积分{{order.points}}
  60. </view>
  61. <view class="time-coupon">
  62. <!-- <view class="flex">
  63. <image src="@/static/home/time-icon.png"></image>
  64. <view class="time">{{order.useTime}}分钟</view>
  65. </view> -->
  66. <!-- <view class="sales-volume">
  67. <image src="@/static/icons/icon1.png"></image>
  68. <view class="desc">已售出{{msgShop.payNum}}+</view>
  69. </view> -->
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. <view class="line address">
  75. <view class="address-top">
  76. <view class="">
  77. 收货地址
  78. </view>
  79. <view class="copy">
  80. <image @click="$utils.copyText(order.addressName + item.addressDetails + ' ' + order.addressPhone + ' ' + order.addressCity)" src="/static/order/copy.png"></image>
  81. </view>
  82. </view>
  83. <view class="addressDetail">
  84. <view class="">{{order.addressName}} {{order.addressPhone}}</view>
  85. <view class="">{{order.addressCity + item.addressDetails}}</view>
  86. </view>
  87. </view>
  88. <view class="line">
  89. <view class="t min_tips">
  90. <view class="">
  91. 实付款
  92. </view>
  93. <view class="current-price"
  94. v-if="order.type == 0">
  95. {{ order.points }}积分
  96. </view>
  97. <view class="current-price"
  98. v-if="order.type == 1">
  99. {{ order.price }}
  100. </view>
  101. </view>
  102. <view class="min_tips">
  103. <view class="">
  104. 支付方式
  105. </view>
  106. <view class="">
  107. {{ ['积分兑换', '微信支付'][order.type] }}
  108. </view>
  109. </view>
  110. </view>
  111. <!-- 订单信息 -->
  112. <view class="line">
  113. <view class="t min_tips">
  114. <view class="">
  115. 订单信息
  116. </view>
  117. </view>
  118. <view class="min_tips">
  119. <view class="">
  120. 订单编号
  121. </view>
  122. <view class="">
  123. {{order.id}}
  124. </view>
  125. </view>
  126. <view class="min_tips">
  127. <view class="">
  128. 下单时间
  129. </view>
  130. <view class="">
  131. {{order.createTime}}
  132. </view>
  133. </view>
  134. </view>
  135. <!-- 下单须知 -->
  136. <view class="line">
  137. <view class="t min_tips">
  138. <view class="">
  139. 下单须知
  140. </view>
  141. </view>
  142. <view class="min_tips" style="line-height: 40rpx;">
  143. {{msgShop.projectExplain}}
  144. </view>
  145. <view class="btns">
  146. <view @click="clickService" class="btn">
  147. 联系客服
  148. </view>
  149. </view>
  150. </view>
  151. </view>
  152. </view>
  153. </template>
  154. <script>
  155. export default {
  156. computed : {
  157. },
  158. data() {
  159. return {
  160. stepsCurrent : 0,
  161. steps : [
  162. '待支付',
  163. '待发货',
  164. '待收货',
  165. '已完成',
  166. ],
  167. // msgShop : {
  168. // money : 99.99,
  169. // image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
  170. // projectExplain : '1.xxxxxxxxxx xxxxxxxxxx。2.xxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxx xxxxxxxxxxxxxxxx。3.。',
  171. // },
  172. // order : {
  173. // money : 99.99,
  174. // address : '广东省广州市越秀区城南故事C3栋2802',
  175. // name : '李**',
  176. // phone : '150*****091',
  177. // unit : '120*40*75【桌子尺寸】',
  178. // state_dictText : '已完成',
  179. // price : 199.99,
  180. // id : '020644568964457',
  181. // createTime : '2024-01-18 15:39',
  182. // projectName : '桌布租赁'
  183. // },
  184. order : {},
  185. id : 0,
  186. }
  187. },
  188. onLoad(args) {
  189. this.id = args.id
  190. },
  191. onShow() {
  192. this.getDetail()
  193. },
  194. methods: {
  195. getDetail(){
  196. this.$api('getOrderDetail', {
  197. orderId : this.id
  198. }, res => {
  199. if(res.code == 200){
  200. this.order = res.result
  201. this.stepsCurrent= res.result.state
  202. }
  203. })
  204. },
  205. }
  206. }
  207. </script>
  208. <style scoped lang="scss">
  209. .order {
  210. background: linear-gradient(#4899a6, #6fc6ad, #6fc6ad);
  211. padding-bottom: 10px;
  212. }
  213. .controls{
  214. margin: 20rpx;
  215. background-color: #fff;
  216. height: 400rpx;
  217. display: flex;
  218. flex-direction: column;
  219. width: 710rpx;
  220. border-radius: 20rpx;
  221. justify-content: center;
  222. align-items: center;
  223. .title{
  224. display: flex;
  225. justify-content: center;
  226. align-items: center;
  227. font-size: 40rpx;
  228. image{
  229. width: 100rpx;
  230. height: 100rpx;
  231. margin-right: 20rpx;
  232. }
  233. }
  234. .tips{
  235. font-size: 26rpx;
  236. color: #FD5100;
  237. margin-top: 10rpx;
  238. }
  239. .btns{
  240. margin-top: 50rpx;
  241. display: flex;
  242. view{
  243. margin: 0 20rpx;
  244. display: flex;
  245. justify-content: center;
  246. align-items: center;
  247. color: #fff;
  248. background-color: $uni-color;
  249. padding: 15rpx 40rpx;
  250. border-radius: 40rpx;
  251. }
  252. .btn2{
  253. background-color: #FFFFFF;
  254. border: 1px solid #A7A7A7;
  255. color: #A7A7A7;
  256. }
  257. }
  258. }
  259. .steps{
  260. margin: 20rpx;
  261. background-color: #fff;
  262. display: flex;
  263. flex-direction: column;
  264. width: 710rpx;
  265. border-radius: 20rpx;
  266. padding: 70rpx 0;
  267. /deep/ .uv-text__value{
  268. font-size: 22rpx !important;
  269. }
  270. }
  271. .box {
  272. padding: 20px;
  273. .btns {
  274. display: flex;
  275. justify-content: center;
  276. align-items: center;
  277. margin-top: 10px;
  278. .btn {
  279. color: #fff;
  280. padding: 10rpx 50rpx;
  281. background-color: #ffb300;
  282. border-radius: 30rpx;
  283. font-size: 25rpx;
  284. margin-right: 10rpx;
  285. }
  286. .btc{
  287. background: #ccc;
  288. }
  289. }
  290. }
  291. .info {
  292. margin: 10px;
  293. padding: 20rpx;
  294. background-color: #fff;
  295. width: calc(100% - 40px);
  296. border-radius: 10px;
  297. .head-title {
  298. font-family: PingFang SC, PingFang SC-Bold;
  299. color: #2f2e2e;
  300. line-height: 30rpx;
  301. margin-left: 10rpx;
  302. }
  303. .server-item {
  304. display: flex;
  305. flex-wrap: wrap;
  306. align-items: center;
  307. justify-content: space-between;
  308. background: white;
  309. border-radius: 15rpx;
  310. box-sizing: border-box;
  311. margin: 20rpx 0rpx;
  312. width: 100%;
  313. .img-box {
  314. width: 150rpx;
  315. height: 150rpx;
  316. border-radius: 10rpx;
  317. overflow: hidden;
  318. image {
  319. width: 100%;
  320. height: 100%;
  321. }
  322. }
  323. .server-info {
  324. display: flex;
  325. flex-direction: column;
  326. justify-content: space-around;
  327. width: calc(100% - 180rpx);
  328. box-sizing: border-box;
  329. padding: 10rpx 15rpx;
  330. .server-title {
  331. display: flex;
  332. margin-bottom: 10rpx;
  333. }
  334. .coupon {
  335. display: flex;
  336. justify-content: center;
  337. align-items: center;
  338. background: #F29E45;
  339. color: white;
  340. width: 120rpx;
  341. height: 40rpx;
  342. border-radius: 10rpx;
  343. margin-left: 10rpx;
  344. font-size: 22rpx;
  345. }
  346. .time-coupon,
  347. .price {
  348. display: flex;
  349. flex-wrap: wrap;
  350. align-items: center;
  351. }
  352. .time-coupon {
  353. margin: 10rpx 0rpx;
  354. font-size: 26rpx;
  355. justify-content: space-between;
  356. width: 100%;
  357. .flex {
  358. justify-content: center;
  359. align-items: center;
  360. }
  361. image {
  362. width: 25rpx;
  363. height: 25rpx;
  364. }
  365. .time {
  366. color: #B8B8B8;
  367. margin-left: 6rpx;
  368. }
  369. }
  370. .sales-volume {
  371. display: flex;
  372. align-items: center;
  373. color: #B8B8B8;
  374. font-size: 24rpx;
  375. image {
  376. width: 25rpx;
  377. height: 25rpx;
  378. }
  379. }
  380. }
  381. }
  382. .address {
  383. .address-top{
  384. display: flex;
  385. justify-content: space-between;
  386. align-items: center;
  387. image{
  388. width: 30rpx;
  389. height: 30rpx;
  390. }
  391. }
  392. .addressDetail {
  393. color: #777;
  394. font-size: 22rpx;
  395. padding: 5px 0;
  396. }
  397. text {
  398. background-color: #F29E45;
  399. padding: 8rpx 10rpx;
  400. color: #fff;
  401. font-size: 20rpx;
  402. margin-left: 10px;
  403. border-radius: 5px;
  404. }
  405. }
  406. .min_tips {
  407. font-size: 22rpx;
  408. color: #777;
  409. display: flex;
  410. justify-content: space-between;
  411. padding: 5px 0;
  412. align-items: center;
  413. }
  414. .current-price {
  415. font-size: 30rpx;
  416. color: #FD5100;
  417. }
  418. .line {
  419. border-top: 2px dotted #00000011;
  420. padding: 20rpx 0;
  421. .t {
  422. padding: 5px 0;
  423. color: #000;
  424. font-size: 26rpx;
  425. }
  426. }
  427. .head-div {
  428. .nickname {
  429. font-size: 30rpx;
  430. font-weight: 600;
  431. text-align: left;
  432. line-height: 42rpx;
  433. display: flex;
  434. align-items: center;
  435. .tag {
  436. position: relative;
  437. display: flex;
  438. align-items: center;
  439. image {
  440. height: 45rpx;
  441. width: 90rpx;
  442. vertical-align: middle;
  443. }
  444. .auth {
  445. position: absolute;
  446. white-space: nowrap;
  447. color: #FF6200;
  448. left: 23rpx;
  449. font-size: 17rpx;
  450. }
  451. }
  452. }
  453. .days {
  454. font-size: 20rpx;
  455. font-weight: 400;
  456. text-align: left;
  457. line-height: 56rpx;
  458. display: flex;
  459. align-items: center;
  460. view {
  461. padding-left: 5px;
  462. }
  463. }
  464. }
  465. .btn-x {
  466. color: #6fc6ad;
  467. border: 1px solid #6fc6ad;
  468. padding: 10rpx 20rpx;
  469. border-radius: 30rpx;
  470. }
  471. .btns {
  472. display: flex;
  473. justify-content: center;
  474. .btn {
  475. color: #6fc6ad;
  476. border: 1px solid #6fc6ad;
  477. padding: 10rpx 20rpx;
  478. border-radius: 30rpx;
  479. }
  480. }
  481. }
  482. </style>