青蛙卖大米小程序2024-11-24
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.

552 lines
10 KiB

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