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

246 lines
4.7 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
  1. <template>
  2. <view class="page">
  3. <navbar
  4. title="订单中心"
  5. leftClick
  6. @leftClick="$utils.navigateBack"
  7. />
  8. <uv-tabs :list="tabs"
  9. :activeStyle="{color : '#A3D250', fontWeight : 600}"
  10. lineColor="#A3D250"
  11. lineHeight="8rpx"
  12. lineWidth="50rpx"
  13. :current="current"
  14. @click="clickTabs"></uv-tabs>
  15. <view v-if="orderList.length > 0" class="list">
  16. <view class="item"
  17. v-for="(item, index) in orderList.records"
  18. @click="toOrderDetail(item.id)"
  19. :key="index">
  20. <view class="top">
  21. <view class="service">
  22. <text>{{item.projectId_dictText}}</text>
  23. <text>{{item.type_dictText}}</text>
  24. </view>
  25. <view class="status">
  26. <text> {{item.state_dictText}}</text>
  27. </view>
  28. </view>
  29. <view class="content">
  30. <view class="left">
  31. <image mode="aspectFill" :src="item.image"></image>
  32. </view>
  33. <view class="right">
  34. <view class="text-hidden-1">
  35. 客户姓名{{item.name}}
  36. </view>
  37. <view class="text-hidden-1">
  38. 产品规格{{item.unit}}
  39. </view>
  40. <view class="text-hidden-1">
  41. 租赁地址{{item.address}}
  42. </view>
  43. <!-- <view class="text-hidden-1">
  44. 总计时间{{item.useTime}}分钟
  45. </view> -->
  46. </view>
  47. </view>
  48. <view class="bottom">
  49. <view class="price">
  50. 总价格<text class="num">{{item.money}}</text>
  51. </view>
  52. <view class="b1">
  53. 查看物流
  54. </view>
  55. <!-- <view @click.stop="toPayOrder(item)" class="b2" v-if="item.state == 0">
  56. 立即付款
  57. </view>
  58. <view class="b1" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 3">
  59. 再来一单
  60. </view>
  61. <view class="b2" @click.stop="toEvaluate(item.id,item.projectId,item.technicianId)" v-if="item.state == 3">
  62. 立即评价
  63. </view>
  64. <view class="b2" @click.stop="moreOrder(item.projectId,toPlaceorder)" v-if="item.state == 4">
  65. 再来一单
  66. </view> -->
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. </template>
  72. <script>
  73. import { mapGetters } from 'vuex'
  74. export default {
  75. components : {
  76. },
  77. computed : {
  78. },
  79. data() {
  80. return {
  81. tabs: [{
  82. name: '全部'
  83. },
  84. {
  85. name: '待付款'
  86. },
  87. {
  88. name: '已付款'
  89. },
  90. {
  91. name: '待发货'
  92. },
  93. {
  94. name: '待收货'
  95. },
  96. {
  97. name: '已完成'
  98. }
  99. ],
  100. queryParams: {
  101. pageNo: 1,
  102. pageSize: 10
  103. },
  104. // orderList: [
  105. // {
  106. // money : 99.99,
  107. // address : '广东省广州市越秀区城南故事C3栋2802',
  108. // name : '李**',
  109. // phone : '150*****091',
  110. // unit : '120*40*75【桌子尺寸】',
  111. // image : 'https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg',
  112. // state_dictText : '已完成',
  113. // }
  114. // ], //订单列表数据
  115. orderList : {
  116. records : [],
  117. total : 0,
  118. },
  119. state : -1,
  120. current : 0,
  121. }
  122. },
  123. onLoad(args) {
  124. this.current = args.type || 0
  125. },
  126. onShow() {
  127. },
  128. methods: {
  129. //点击tab栏
  130. clickTabs(index) {
  131. if (index == 0) {
  132. delete this.queryParams.state
  133. } else {
  134. this.queryParams.state = index - 1
  135. }
  136. },
  137. //跳转订单详情页面
  138. toOrderDetail(id) {
  139. uni.navigateTo({
  140. url: '/pages_order/order/orderDetail?id=' + id
  141. })
  142. },
  143. getOrderList(){
  144. },
  145. }
  146. }
  147. </script>
  148. <style scoped lang="scss">
  149. .page{
  150. }
  151. .list {
  152. .item {
  153. width: calc(100% - 40rpx);
  154. background-color: #fff;
  155. margin: 20rpx;
  156. box-sizing: border-box;
  157. border-radius: 16rpx;
  158. padding: 30rpx;
  159. .top {
  160. display: flex;
  161. justify-content: space-between;
  162. align-items: center;
  163. font-size: 30rpx;
  164. .service {}
  165. .status {
  166. font-size: 26rpx;
  167. font-weight: 600;
  168. }
  169. }
  170. .content {
  171. display: flex;
  172. margin: 10rpx 0;
  173. .left {
  174. width: 150rpx;
  175. height: 150rpx;
  176. border-radius: 10rpx;
  177. image {
  178. width: 150rpx;
  179. height: 150rpx;
  180. border-radius: 10rpx;
  181. }
  182. }
  183. .right {
  184. width: calc(100% - 160rpx);
  185. color: #777;
  186. font-size: 24rpx;
  187. padding-left: 20rpx;
  188. line-height: 40rpx;
  189. background-color: #F8F8F8;
  190. }
  191. }
  192. .bottom {
  193. display: flex;
  194. justify-content: space-between;
  195. font-size: 25rpx;
  196. .price {
  197. font-weight: 900;
  198. text {
  199. color: #ff780099;
  200. font-size: 30rpx;
  201. }
  202. }
  203. .b1 {
  204. border: 1px solid #777;
  205. color: #777;
  206. box-sizing: border-box;
  207. }
  208. .b2 {
  209. background: linear-gradient(178deg, #4FD3BC, #60C285);
  210. color: #fff;
  211. }
  212. view {
  213. margin: 12rpx;
  214. border-radius: 28rpx;
  215. padding: 8rpx 28rpx;
  216. margin-bottom: 0;
  217. }
  218. }
  219. }
  220. }
  221. </style>