list.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261
  1. <template>
  2. <view class="orderList">
  3. <view class="nav">
  4. <navigation-bar-view ref="nav"></navigation-bar-view>
  5. <view class="header">
  6. <view class="search-box">
  7. <input placeholder="请输入手机号" @input="changeMobile"/>
  8. </view>
  9. <view class="search-btn" @click="search">搜索</view>
  10. </view>
  11. </view>
  12. <view style="height: 21.8vw"></view>
  13. <block v-for="(item, i) in list" :key="i">
  14. <view class="cell" @click="toDetail(item)">
  15. <view class="top">
  16. <view class="order-sn">订单号:{{item.orderSn}}</view>
  17. <view class="status">
  18. <text v-if="item.rentStatus == 1">租赁中</text>
  19. <text v-if="item.rentStatus == 2">已取出</text>
  20. <text v-if="item.rentStatus == 0">未开始</text>
  21. </view>
  22. </view>
  23. <view class="center">
  24. <view class="take-code" v-if="item.rentSn">
  25. <view class="label">取物码:</view>
  26. <view class="code">{{item.rentSn}}</view>
  27. </view>
  28. <view class="message">
  29. <text>格口类型:</text>
  30. <text v-if="item.cabinetType == 1">小格子</text>
  31. <text v-if="item.cabinetType == 2">中格子</text>
  32. <text v-if="item.cabinetType == 3">大格子</text>
  33. <text v-if="item.rentType == 1">(预存{{item.rentTimes / 60}}小时)</text>
  34. <text v-if="item.rentType == 2">(预存{{item.rentNums}}次)</text>
  35. </view>
  36. <view class="message">
  37. <text>存放箱号:</text>
  38. <text>{{item.caseSn}}</text>
  39. </view>
  40. <view class="message">存放时间:{{item.payTime}}</view>
  41. <view class="message">联系方式:{{item.mobile}}</view>
  42. </view>
  43. <!-- <view class="bottom"> -->
  44. <!-- <view class="btn">取消订单</view> -->
  45. <!-- <view class="btn">删除订单</view> -->
  46. <!-- </view> -->
  47. </view>
  48. </block>
  49. <view style="height: 3.3vw;"></view>
  50. </view>
  51. </template>
  52. <script>
  53. import navigationBarView from '../../components/navigationBarView.vue';
  54. export default {
  55. components: {
  56. navigationBarView
  57. },
  58. data() {
  59. return {
  60. list: [],
  61. page: 1,
  62. mobile: ''
  63. }
  64. },
  65. onLoad() {
  66. this.getData()
  67. },
  68. onPullDownRefresh() {
  69. this.page = 1;
  70. this.getData()
  71. },
  72. onReachBottom() {
  73. this.page++
  74. this.getData();
  75. },
  76. methods: {
  77. getData() {
  78. uni.showLoading({
  79. title: "加载中..."
  80. })
  81. let sn = uni.getStorageSync('sn');
  82. this.$api.managerDeviceList({
  83. deviceSn: sn,
  84. page: this.page,
  85. mobile: this.mobile
  86. }).then(res => {
  87. let list = this.list;
  88. if (this.page == 1) {
  89. list = []
  90. } else if (!res.page.data.length) {
  91. this.page--
  92. }
  93. for (let i = 0; i < res.page.data.length; i++) {
  94. list.push(res.page.data[i])
  95. }
  96. this.list = list;
  97. uni.stopPullDownRefresh()
  98. }, err => {
  99. })
  100. },
  101. changeMobile(e) {
  102. this.mobile = e.detail.value;
  103. },
  104. search() {
  105. this.page = 1;
  106. this.getData();
  107. },
  108. toDetail(e) {
  109. console.log(e);
  110. uni.navigateTo({
  111. url: '/pages/order/details?isAdmin=1&id=' + e.id
  112. })
  113. }
  114. }
  115. }
  116. </script>
  117. <style lang="scss">
  118. .orderList {
  119. min-height: 100vh;
  120. background-color: #eee;
  121. .nav {
  122. position: fixed;
  123. top: 0;
  124. left: 0;
  125. background-color: #FFFFFF;
  126. }
  127. .header {
  128. position: fixed;
  129. top: 11.3vw;
  130. display: flex;
  131. align-items: center;
  132. justify-content: space-around;
  133. width: 100vw;
  134. height: 10.5vw;
  135. background-color: #FFFFFF;
  136. .search-box {
  137. flex: 1;
  138. border-radius: 1vw;
  139. margin-left: 3.3vw;
  140. input {
  141. font-size: 3.2vw;
  142. }
  143. }
  144. .search-btn {
  145. display: flex;
  146. align-items: center;
  147. justify-content: center;
  148. margin-right: 3.3vw;
  149. width: 16vw;
  150. height: 6.6vw;
  151. border-radius: 6.6vw;
  152. background: linear-gradient(to right, #FEE704, #FDD001);
  153. font-size: 3.2vw;
  154. }
  155. // .title {
  156. // display: flex;
  157. // align-items: center;
  158. // font-size: 3.5vw;
  159. // color: #161920;
  160. // }
  161. }
  162. .cell {
  163. padding: 0 3.3vw;
  164. border-radius: 1.6vw;
  165. background-color: #FFFFFF;
  166. margin: 3.3vw 4vw 0;
  167. .top {
  168. display: flex;
  169. align-items: center;
  170. justify-content: space-between;
  171. height: 10.7vw;
  172. border-bottom: .3vw solid #eee;
  173. .order-sn {
  174. color: #999999;
  175. font-size: 3.5vw;
  176. }
  177. .status {
  178. display: flex;
  179. align-items: center;
  180. justify-content: center;
  181. width: 16vw;
  182. height: 5.6vw;
  183. border-radius: 5.6vw;
  184. background: linear-gradient(to right, #FEE704, #FDD001);
  185. font-size: 3.2vw;
  186. }
  187. }
  188. .center {
  189. padding-top: 4.5vw;
  190. padding-bottom: 4.5vw;
  191. .take-code {
  192. display: flex;
  193. align-items: center;
  194. margin-bottom: 4.4vw;
  195. font-weight: bold;
  196. line-height: 4vw;
  197. .label {
  198. font-size: 4vw;
  199. }
  200. .code {
  201. color: #FFB706;
  202. font-size: 4.8vw;
  203. }
  204. }
  205. .message {
  206. margin-bottom: 3.1vw;
  207. color: #666666;
  208. font-size: 3.5vw;
  209. line-height: 3.5vw;
  210. }
  211. }
  212. .bottom {
  213. display: flex;
  214. justify-content: flex-end;
  215. padding-bottom: 3.2vw;
  216. .btn {
  217. display: flex;
  218. align-items: center;
  219. justify-content: center;
  220. width: 22.7vw;
  221. height: 8.3vw;
  222. border-radius: 8.3vw;
  223. border: .3vw solid #CCCCCC;
  224. color: #222222;
  225. font-size: 3.5vw;
  226. }
  227. }
  228. }
  229. }
  230. </style>