敢为人鲜小程序前端代码仓库
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.

595 lines
11 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
  1. <template>
  2. <view>
  3. <navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" />
  4. <view class="info">
  5. <view class="flex" style="display: flex;">
  6. <view style="width: 8rpx;height: 30rpx;
  7. background: #E3441A;border-radius: 6rpx;" />
  8. <view class="head-title">订单详情</view>
  9. </view>
  10. <view class="flex">
  11. <view class="server-item" :key="index" v-for="(good, index) in order.commonOrderSkuList">
  12. <view class="img-box">
  13. <image :src="good.image && good.image.split(',')[0]" mode="aspectFill"></image>
  14. </view>
  15. <view class="server-info">
  16. <view class="server-title">
  17. {{good.title}}
  18. <!-- <view class="coupon">领券立减</view> -->
  19. </view>
  20. >
  21. <view class="texture">
  22. 产品材质{{ good.subText }}
  23. </view>
  24. <view class="num">
  25. 产品数量{{good.num}}
  26. </view>
  27. <view class="total-price">
  28. <div class="total-title">总价格</div>
  29. <view class="price">
  30. <text class="unit"></text>
  31. {{ good.price }}
  32. </view>
  33. </view>
  34. <!-- <view class="time-coupon">
  35. <view class="flex">
  36. <image src="@/static/home/time-icon.png"></image>
  37. <view class="time">{{order.useTime}}分钟</view>
  38. </view>
  39. <view class="sales-volume">
  40. <image src="@/static/icons/icon1.png"></image>
  41. <view class="desc">已售出{{msgShop.payNum}}+</view>
  42. </view>
  43. </view> -->
  44. </view>
  45. </view>
  46. </view>
  47. <!-- <view class="line min_tips">
  48. <view class="head-div flex">
  49. <view style="width: 118rpx;height: 118rpx;border-radius: 50%;overflow: hidden;">
  50. <image style="width: 118rpx;" :src="msgTechnician.image" mode="widthFix"></image>
  51. </view>
  52. <view style="padding: 10rpx 34rpx;display: flex;flex-direction: column;justify-content: space-around;">
  53. <view class="nickname">
  54. {{msgTechnician.title}}
  55. <view v-if="msgTechnician.isVip" class="tag">
  56. <image src="@/static/order/s.png" mode="aspectFit"></image>
  57. <view class="auth">官方认证</view>
  58. </view>
  59. </view>
  60. <view class="days">
  61. <van-rate v-model="msgTechnician.score" :size="10" readonly color="#ffb54c" void-icon="star"
  62. void-color="#eee" />
  63. <view class="">
  64. 好评{{msgTechnician.pinNum}}
  65. </view>
  66. </view>
  67. </view>
  68. </view>
  69. <view @tap="gototechnicianDetail(msgTechnician)" class="btn-x">
  70. 服务技师
  71. </view>
  72. </view> -->
  73. <view class="line address">
  74. <view class="addressDetail">
  75. <view class="address-line">
  76. <view class="main">{{order.name}} {{order.phone}}</view>
  77. <view @tap="copy(order.name + ' ' + order.phone)" class="copy">复制</view>
  78. </view>
  79. <view class="address-line">
  80. <view class="main">{{order.address}} {{order.addressDetails}}</view>
  81. <view @tap="copy(order.address + ' ' + order.addressDetails)" class="copy">复制</view>
  82. </view>
  83. </view>
  84. </view>
  85. <!-- <view class="line">
  86. <view class="t min_tips">
  87. <view class="">
  88. 实付款
  89. </view>
  90. <view class="current-price">
  91. {{ order.price }}
  92. </view>
  93. </view>
  94. </view> -->
  95. <!-- 订单信息 -->
  96. <view class="line">
  97. <view class="t min_tips">
  98. <view class="">
  99. 订单信息
  100. </view>
  101. </view>
  102. <view class="min_tips">
  103. <view class="">
  104. 订单编号
  105. </view>
  106. <view class="">
  107. {{order.id}}
  108. </view>
  109. </view>
  110. <view class="min_tips">
  111. <view class="">
  112. 下单时间
  113. </view>
  114. <view class="">
  115. {{order.createTime}}
  116. </view>
  117. </view>
  118. </view>
  119. <!-- 下单须知 -->
  120. <view class="line">
  121. <view class="t min_tips">
  122. <view class="">
  123. 下单须知
  124. </view>
  125. </view>
  126. <view class="min_tips" style="line-height: 40rpx;">
  127. {{ order.orderDetails }}
  128. </view>
  129. <view class="btns">
  130. <button open-type="contact" class="btn">
  131. 联系客服
  132. </button>
  133. </view>
  134. </view>
  135. </view>
  136. <customerServicePopup ref="customerServicePopup" />
  137. </view>
  138. </template>
  139. <script>
  140. import customerServicePopup from '@/components/config/customerServicePopup.vue'
  141. import {
  142. mapState
  143. } from 'vuex'
  144. export default {
  145. components: {
  146. customerServicePopup
  147. },
  148. computed: {},
  149. data() {
  150. return {
  151. stepsCurrent: 0,
  152. steps: [
  153. '接单',
  154. '检查',
  155. '开始清洗',
  156. '服务完成',
  157. ],
  158. order: {},
  159. id: 0,
  160. }
  161. },
  162. onLoad(args) {
  163. this.id = args.id
  164. },
  165. onShow() {
  166. this.getOrderDetail()
  167. },
  168. onPullDownRefresh() {
  169. this.getOrderDetail()
  170. },
  171. methods: {
  172. getOrderDetail() {
  173. this.$api('getOrderDetail', {
  174. id: this.id
  175. }, res => {
  176. uni.stopPullDownRefresh()
  177. if (res.code == 200) {
  178. this.order = res.result
  179. }
  180. })
  181. },
  182. //复制内容
  183. copy(content) {
  184. uni.setClipboardData({
  185. data: content,
  186. success: () => {
  187. uni.showToast({
  188. title: '复制成功',
  189. icon: 'none'
  190. })
  191. }
  192. })
  193. },
  194. }
  195. }
  196. </script>
  197. <style scoped lang="scss">
  198. .order {
  199. background: linear-gradient(#4899a6, #6fc6ad, #6fc6ad);
  200. padding-bottom: 10px;
  201. }
  202. .controls {
  203. margin: 20rpx;
  204. background-color: #fff;
  205. height: 400rpx;
  206. display: flex;
  207. flex-direction: column;
  208. width: 710rpx;
  209. border-radius: 20rpx;
  210. justify-content: center;
  211. align-items: center;
  212. .title {
  213. display: flex;
  214. justify-content: center;
  215. align-items: center;
  216. font-size: 40rpx;
  217. image {
  218. width: 100rpx;
  219. height: 100rpx;
  220. margin-right: 20rpx;
  221. }
  222. }
  223. .tips {
  224. font-size: 26rpx;
  225. color: #FD5100;
  226. margin-top: 10rpx;
  227. }
  228. .btns {
  229. margin-top: 50rpx;
  230. display: flex;
  231. view {
  232. margin: 0 20rpx;
  233. display: flex;
  234. justify-content: center;
  235. align-items: center;
  236. color: #fff;
  237. background-color: $uni-color;
  238. padding: 15rpx 40rpx;
  239. border-radius: 40rpx;
  240. }
  241. .btn2 {
  242. background-color: #FFFFFF;
  243. border: 1px solid #A7A7A7;
  244. color: #A7A7A7;
  245. }
  246. }
  247. }
  248. .steps {
  249. margin: 20rpx;
  250. background-color: #fff;
  251. display: flex;
  252. flex-direction: column;
  253. width: 710rpx;
  254. border-radius: 20rpx;
  255. padding: 70rpx 0;
  256. /deep/ .uv-text__value {
  257. font-size: 22rpx !important;
  258. }
  259. }
  260. .box {
  261. padding: 20px;
  262. .btns {
  263. display: flex;
  264. justify-content: center;
  265. align-items: center;
  266. margin-top: 10px;
  267. .btn {
  268. color: #fff;
  269. padding: 10rpx 50rpx;
  270. background-color: #ffb300;
  271. border-radius: 30rpx;
  272. font-size: 25rpx;
  273. margin-right: 10rpx;
  274. }
  275. .btc {
  276. background: #ccc;
  277. }
  278. }
  279. }
  280. .info {
  281. margin: 10px;
  282. padding: 20rpx;
  283. background-color: #fff;
  284. width: calc(100% - 40px);
  285. border-radius: 10px;
  286. .head-title {
  287. font-family: PingFang SC, PingFang SC-Bold;
  288. color: #2f2e2e;
  289. line-height: 30rpx;
  290. margin-left: 10rpx;
  291. }
  292. .server-item {
  293. display: flex;
  294. flex-wrap: wrap;
  295. align-items: center;
  296. justify-content: space-between;
  297. background: white;
  298. border-radius: 15rpx;
  299. box-sizing: border-box;
  300. margin: 20rpx 0rpx;
  301. width: 100%;
  302. .img-box {
  303. width: 180rpx;
  304. height: 180rpx;
  305. border-radius: 10rpx;
  306. overflow: hidden;
  307. box-sizing: border-box;
  308. image {
  309. width: 100%;
  310. height: 100%;
  311. border-radius: 10rpx;
  312. }
  313. }
  314. .server-info {
  315. display: flex;
  316. flex-direction: column;
  317. justify-content: space-around;
  318. width: calc(100% - 180rpx);
  319. box-sizing: border-box;
  320. padding: 20rpx 15rpx;
  321. .server-title {
  322. display: flex;
  323. font-weight: bold;
  324. }
  325. .texture,
  326. .num {
  327. font-size: 24rpx;
  328. color: #717171;
  329. }
  330. .total-price {
  331. display: flex;
  332. justify-content: space-between;
  333. .price {
  334. color: #F85023;
  335. }
  336. }
  337. .coupon {
  338. display: flex;
  339. justify-content: center;
  340. align-items: center;
  341. background: #F29E45;
  342. color: white;
  343. width: 120rpx;
  344. height: 40rpx;
  345. border-radius: 10rpx;
  346. margin-left: 10rpx;
  347. font-size: 22rpx;
  348. }
  349. .time-coupon,
  350. .price {
  351. display: flex;
  352. flex-wrap: wrap;
  353. align-items: center;
  354. }
  355. .time-coupon {
  356. margin: 10rpx 0rpx;
  357. font-size: 26rpx;
  358. justify-content: space-between;
  359. width: 100%;
  360. .flex {
  361. justify-content: center;
  362. align-items: center;
  363. }
  364. image {
  365. width: 25rpx;
  366. height: 25rpx;
  367. }
  368. .time {
  369. color: #B8B8B8;
  370. margin-left: 6rpx;
  371. }
  372. }
  373. .sales-volume {
  374. display: flex;
  375. align-items: center;
  376. color: #B8B8B8;
  377. font-size: 24rpx;
  378. image {
  379. width: 25rpx;
  380. height: 25rpx;
  381. }
  382. }
  383. }
  384. }
  385. .address {
  386. .address-top {
  387. display: flex;
  388. justify-content: space-between;
  389. align-items: center;
  390. image {
  391. width: 30rpx;
  392. height: 30rpx;
  393. }
  394. }
  395. .addressDetail {
  396. color: #777;
  397. font-size: 22rpx;
  398. padding: 5px 0;
  399. .address-line {
  400. display: flex;
  401. flex-wrap: wrap;
  402. align-items: center;
  403. .main {
  404. width: 88%;
  405. box-sizing: border-box;
  406. padding-right: 20rpx;
  407. overflow: hidden; // 超出的文本隐藏
  408. text-overflow: ellipsis; // 溢出用省略号显示
  409. display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
  410. -webkit-line-clamp: 2; // 这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。
  411. -webkit-box-orient: vertical; // 从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)
  412. }
  413. .copy {
  414. width: 12%;
  415. background: #FEBC3A;
  416. color: white;
  417. font-size: 20rpx;
  418. border-radius: 20rpx;
  419. display: flex;
  420. align-items: center;
  421. justify-content: center;
  422. height: 40rpx;
  423. }
  424. }
  425. }
  426. text {
  427. background-color: #F29E45;
  428. padding: 8rpx 10rpx;
  429. color: #fff;
  430. font-size: 20rpx;
  431. margin-left: 10px;
  432. border-radius: 5px;
  433. }
  434. }
  435. .min_tips {
  436. font-size: 22rpx;
  437. color: #777;
  438. display: flex;
  439. justify-content: space-between;
  440. padding: 5px 0;
  441. align-items: center;
  442. }
  443. .current-price {
  444. font-size: 30rpx;
  445. color: #FD5100;
  446. }
  447. .line {
  448. border-top: 2px dotted #00000011;
  449. padding: 20rpx 0;
  450. .t {
  451. padding: 5px 0;
  452. color: #000;
  453. font-size: 26rpx;
  454. }
  455. }
  456. .head-div {
  457. .nickname {
  458. font-size: 30rpx;
  459. font-weight: 600;
  460. text-align: left;
  461. line-height: 42rpx;
  462. display: flex;
  463. align-items: center;
  464. .tag {
  465. position: relative;
  466. display: flex;
  467. align-items: center;
  468. image {
  469. height: 45rpx;
  470. width: 90rpx;
  471. vertical-align: middle;
  472. }
  473. .auth {
  474. position: absolute;
  475. white-space: nowrap;
  476. color: #FF6200;
  477. left: 23rpx;
  478. font-size: 17rpx;
  479. }
  480. }
  481. }
  482. .days {
  483. font-size: 20rpx;
  484. font-weight: 400;
  485. text-align: left;
  486. line-height: 56rpx;
  487. display: flex;
  488. align-items: center;
  489. view {
  490. padding-left: 5px;
  491. }
  492. }
  493. }
  494. .btn-x {
  495. color: #6fc6ad;
  496. border: 1px solid #6fc6ad;
  497. padding: 10rpx 20rpx;
  498. border-radius: 30rpx;
  499. }
  500. .btns {
  501. display: flex;
  502. justify-content: center;
  503. margin-top: 100rpx;
  504. .btn {
  505. color: #A9A7A7;
  506. border: 1px solid #A9A7A7;
  507. padding: 10rpx 20rpx;
  508. border-radius: 30rpx;
  509. background-color: transparent;
  510. font-size: 24rpx;
  511. margin: 0;
  512. &::after{
  513. border: 0;
  514. }
  515. }
  516. }
  517. }
  518. </style>