orderDetail.vue 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <view class="order-pages">
  3. <u-cell-group>
  4. <u-cell-item title="订单状态" :arrow="false">
  5. <view slot="right-icon">
  6. <text class="order-finish">已完成</text>
  7. </view>
  8. </u-cell-item>
  9. <u-cell-item title="订单编号" :arrow="false" value="BD426464654646466"></u-cell-item>
  10. <u-cell-item title="创建时间" :arrow="false" value="2020-12-25 12:45:36"></u-cell-item>
  11. <u-cell-item title="服务网点" :arrow="false" value="西部大道点"></u-cell-item>
  12. <u-cell-item title="服务项目" :arrow="false" value="标准洗车"></u-cell-item>
  13. <u-cell-item title="手机号" :arrow="false" value="1370946191"></u-cell-item>
  14. <u-cell-item title="支付方式" :arrow="false" value="微信支付"></u-cell-item>
  15. <u-cell-item title="应付金额" :arrow="false" value="¥30"></u-cell-item>
  16. <u-cell-item title="优惠价" :arrow="false" value="5元代金卷"></u-cell-item>
  17. <u-cell-item title="实付金额" :arrow="false">
  18. <text class="order-price">¥25</text>
  19. </u-cell-item>
  20. </u-cell-group>
  21. <view class="order-photo">
  22. <view>洗车前</view>
  23. <u-image width="100%" height="400rpx" :src="src"></u-image>
  24. <view>洗车后</view>
  25. <u-image width="100%" height="400rpx" :src="src"></u-image>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. export default{
  31. data() {
  32. return {
  33. src: ''
  34. }
  35. },
  36. }
  37. </script>
  38. <style lang="scss">
  39. .order-pages{
  40. width: 100%;
  41. .u-cell{
  42. padding:10rpx 32rpx;
  43. }
  44. .order-photo{
  45. padding:0 30rpx;
  46. >view{
  47. text-align: center;
  48. padding: 20rpx;
  49. }
  50. }
  51. .order-finish{
  52. color: #00aa00;
  53. }
  54. .order-unPay{
  55. color: #ff0000;
  56. }
  57. .order-cansel{
  58. color: #7e7b88;
  59. }
  60. .order-price{
  61. font-size: 36rpx;
  62. color: red;
  63. }
  64. }
  65. </style>