sale.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <view>
  3. <u-tabs :list="tab" active-color="#c74547" :is-scroll="false" :current="current" @change="change"></u-tabs>
  4. <view class="list">
  5. <view class="item" v-for="(item, index) in list" :key="index" @click="detail(item)">
  6. <view class="order_title">
  7. <text>{{ item.shopName }}</text>
  8. <text class="icon">&#xe62d;</text>
  9. <view class="zhu">
  10. <text class="theme_bg" v-if="item.state == 0">待受理</text>
  11. <text v-if="item.state == 1" style="color:#4CAF50;">已受理</text>
  12. <text v-if="item.state == 2" style="color:orange;">订单取消</text>
  13. </view>
  14. </view>
  15. <view class="r_item">
  16. <image :src="ip + item.shopRoom.pic" mode="aspectFill" class="pic"></image>
  17. <view class="con">
  18. <view class="title omit">{{ item.shopRoom.title }}</view>
  19. <view class="ms">
  20. <text class="rmb">¥{{ item.shopRoom.price }}</text>
  21. <text>起</text>
  22. </view>
  23. <view class="ms"><view class="icon phone">&#xe619;</view></view>
  24. </view>
  25. <view class="clear"></view>
  26. </view>
  27. <view class="hj">{{ item.createTime }}</view>
  28. <view class="clear"></view>
  29. <view class="tk" v-if="item.state == 2">抱歉,由于酒店房间客满的原因,我们无法提供服务。</view>
  30. </view>
  31. <view class="loading"><u-loadmore :status="loadMore ? 'loading' : 'nomore'" /></view>
  32. </view>
  33. <!--预订订单信息-->
  34. <u-popup v-model="popup_show" :mask-close-able="false" mode="center" border-radius="14" width="90%" height="auto" :closeable="true">
  35. <view class="u-popup">
  36. <view class="tttt" style="font-weight: bolder;">预订房间</view>
  37. <u-steps :list="numList" mode="number" :current="0" active-color="#c74547" style="margin: 20px 0px 20px 0px;"></u-steps>
  38. <view class="form_group hr">
  39. <view class="lable">客户姓名</view>
  40. <input v-model="book.name" :disabled="true" style="margin-left: -9px;" />
  41. </view>
  42. <view class="form_group hr">
  43. <view class="lable">联系方式</view>
  44. <input type="number" v-model="book.phone" :disabled="true" />
  45. <text class="call" @click="call()">拨打</text>
  46. </view>
  47. <view class="form_group hr">
  48. <view class="lable">入住日期</view>
  49. <input v-model="book.day" :disabled="true" style="margin-left: -9px;flex: 0.67;" />
  50. </view>
  51. <view class="form_group">
  52. <view class="lable">入住天数</view>
  53. <input :value="book.days + '天'" :disabled="true" style="margin-left: -9px;" />
  54. </view>
  55. <u-divider style="padding-top: 10px;">订单处理</u-divider>
  56. <button class="btn" style="background-color:#607D8B;" @click="op(1)">受理</button>
  57. <button class="btn" @click="op(2)">取消</button>
  58. </view>
  59. </u-popup>
  60. </view>
  61. </template>
  62. <script>
  63. export default {
  64. data() {
  65. return {
  66. ip: this.$http.urls.ip,
  67. tab: [{ name: '所有预订', state: '' }, { name: '待受理', state: 0 }, { name: '已完成', state: 1 }],
  68. numList: [{ name: '客户资料' }, { name: '订单确认' }, { name: '登记入住' }],
  69. current: 0,
  70. list: [],
  71. param: { pageNum: 1, state: '', role: 'sale', orderByColumn: 'id', isAsc: 'desc' },
  72. loadMore: true,
  73. popup_show: false,
  74. book: {}
  75. };
  76. },
  77. onLoad() {
  78. this.getData();
  79. },
  80. methods: {
  81. //获取数据
  82. getData() {
  83. this.$http.request({
  84. url: this.$http.urls.order,
  85. data: this.param,
  86. loading: 'false',
  87. success: res => {
  88. this.loadMore = res.data.pages > this.param.pageNum ? true : false;
  89. res.data.rows.forEach(item => {
  90. item.createTime = this.$u.timeFrom(new Date(item.createTime.replace(/\-/g, '/')).getTime());
  91. this.list.push(item);
  92. });
  93. }
  94. });
  95. },
  96. change(index) {
  97. this.current = index;
  98. this.param.state = this.tab[index].state;
  99. this.refresh();
  100. },
  101. detail(item) {
  102. this.book = item;
  103. this.book.day = item.min + ' 至 ' + item.max;
  104. this.popup_show = true;
  105. },
  106. call() {},
  107. //处理订单
  108. op(index) {
  109. uni.showModal({
  110. title: '提示',
  111. content: '是否处理该订单?',
  112. success: res => {
  113. if (res.confirm) {
  114. this.$http.request({
  115. url: this.$http.urls.orderDeal,
  116. data: { id: this.book.id, state: index },
  117. method: 'POST',
  118. success: res => {
  119. uni.showToast({ title: '操作成功' });
  120. this.popup_show = false;
  121. this.refresh();
  122. }
  123. });
  124. }
  125. }
  126. });
  127. },
  128. //刷新数据
  129. refresh() {
  130. this.loadMore = true;
  131. this.param.pageNum = 1;
  132. this.list = [];
  133. this.getData();
  134. }
  135. },
  136. //下拉刷新
  137. onPullDownRefresh() {
  138. setTimeout(() => {
  139. uni.stopPullDownRefresh();
  140. this.refresh();
  141. }, 1000);
  142. },
  143. //上拉加载
  144. onReachBottom() {
  145. if (this.loadMore) {
  146. this.param.pageNum++;
  147. this.getData();
  148. }
  149. }
  150. };
  151. </script>
  152. <style lang="scss">
  153. page {
  154. background-color: $page;
  155. }
  156. .list {
  157. padding: 0px 10px 25px 10px;
  158. .item {
  159. background-color: white;
  160. padding: 5px 13px 13px 13px;
  161. margin-top: 10px;
  162. border-radius: 4px;
  163. .hj {
  164. text-align: right;
  165. padding-top: 13px;
  166. color: $dar2;
  167. }
  168. }
  169. }
  170. .call {
  171. color: #03a9f4;
  172. }
  173. .del {
  174. text-align: center;
  175. margin-top: 15px;
  176. color: $theme-color;
  177. }
  178. </style>