index.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. <template>
  2. <view class="homePage-container">
  3. <!-- 筛选弹框 -->
  4. <search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen = false"></search-modal>
  5. <view class="homePage-head">
  6. <view class="head-con">
  7. <text class="homePage-tit">套餐销售记录</text>
  8. <view class="total-con">
  9. <text class="goleNum">{{ totalObj.cnt || 0 }}</text> 单,
  10. <text class="goleNum">{{ totalObj.totalAmounts || 0 }}</text> 元
  11. </view>
  12. </view>
  13. <image class="filter-icon" src="@/static/filter.png" @tap="openScreen = true"></image>
  14. </view>
  15. <scroll-view class="scroll-con" scroll-y :scroll-top="scrollTop" @scrolltolower="onreachBottom">
  16. <!-- 列表数据 -->
  17. <view class="list-cont">
  18. <view class="list-item-con" v-for="(item, index) in listdata" :key="index">
  19. <view class="con-header">
  20. <text class="item-time">{{ item.orderDate }}</text>
  21. <text class="item-orderNo">{{ item.number }}</text>
  22. </view>
  23. <view class="con-main" @click="viewRow(item)">
  24. <view class="con-main-m">
  25. <view class="item-bundleName">{{ item.bundleName }}</view>
  26. <view class="item-bundleMain">
  27. <text class="item-cname">{{ item.custName }}</text>
  28. <view class="item-phone" @click.stop="goTel(item.custMobile)">
  29. <u-icon name="phone" size="28"></u-icon>
  30. {{ item.custMobile }}
  31. </view>
  32. </view>
  33. </view>
  34. <u-icon name="arrow-right" size="28"></u-icon>
  35. </view>
  36. <view class="con-footer">
  37. <view class="item-price">
  38. 实收:
  39. <text>¥{{ item.payedAmount }}</text>
  40. </view>
  41. <view class="item-type">
  42. 付款方式:
  43. <text>现金</text>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. <u-empty class="nodata" :text="noDataText" v-if="listdata.length == 0 && status != 'loading'" mode="list"></u-empty>
  49. <view class="loadmore"><u-loadmore v-if="total > pageSize || status == 'loading'" :status="status" /></view>
  50. </scroll-view>
  51. </view>
  52. </template>
  53. <script>
  54. import searchModal from './searchModal.vue';
  55. import { listCustomerBundle, countListBundle } from '@/api/customerBundle'
  56. export default {
  57. components: { searchModal },
  58. data() {
  59. return {
  60. listdata: [],
  61. pageNo: 1, // 当前页码
  62. pageSize: 10, // 每页条数
  63. total: 0, // 数据总条数
  64. noDataText: '暂无数据', // 列表请求状态提示语
  65. status: 'loadmore', // 加载中状态
  66. openScreen: false, // 是否打开筛选
  67. searchForm: {
  68. // 查询条件
  69. beginDate: '', // 创建时间默认筛选近7天
  70. endDate: '', // 创建时间默认筛选近7天
  71. bundleName: '', // 套餐名称
  72. custMobile: '', // 客户手机
  73. },
  74. scrollTop: 0, // 滚动条位置
  75. totalObj: null
  76. };
  77. },
  78. onLoad(option) {},
  79. onShow() {
  80. this.openScreen = false; // 关闭筛选框
  81. this.refresh({});
  82. },
  83. methods: {
  84. // 总计
  85. getGoldLogTotal() {
  86. countListBundle({
  87. beginDate: this.searchForm.beginDate,
  88. endDate: this.searchForm.endDate,
  89. bundleName: this.searchForm.bundleName,
  90. custMobile: this.searchForm.custMobile
  91. }).then(res => {
  92. if (res.status == 200) {
  93. this.totalObj = res.data
  94. } else {
  95. this.totalObj = null
  96. }
  97. });
  98. },
  99. // 获取查询参数 刷新列表
  100. refresh(params) {
  101. this.searchForm = params;
  102. this.listdata = [];
  103. this.total = 0;
  104. this.searchHandle(1);
  105. this.getGoldLogTotal();
  106. },
  107. // 搜索查询
  108. searchHandle(pageNo) {
  109. this.status = 'loading';
  110. pageNo ? (this.pageNo = pageNo) : null;
  111. listCustomerBundle({
  112. pageNo: this.pageNo,
  113. pageSize: this.pageSize,
  114. beginDate: this.searchForm.beginDate,
  115. endDate: this.searchForm.endDate,
  116. bundleName: this.searchForm.bundleName,
  117. custMobile: this.searchForm.custMobile
  118. }).then(res => {
  119. if (res.status == 200) {
  120. if (this.pageNo > 1) {
  121. this.listdata = this.listdata.concat(res.data.list || []);
  122. } else {
  123. this.listdata = res.data.list || [];
  124. this.scrollTop = 0;
  125. }
  126. this.total = res.data.count || 0;
  127. this.noDataText = '暂无数据';
  128. } else {
  129. this.noDataText = res.message;
  130. this.listdata = [];
  131. this.total = 0;
  132. }
  133. this.status = 'loadmore';
  134. });
  135. },
  136. // scroll-view到底部加载更多
  137. onreachBottom() {
  138. if (this.listdata.length < this.total) {
  139. this.pageNo += 1;
  140. this.searchHandle();
  141. } else {
  142. uni.showToast({ title: '已经到底了', icon: 'none' });
  143. this.status = 'nomore';
  144. }
  145. },
  146. // 详细页
  147. viewRow(item){
  148. // 已完成的
  149. uni.navigateTo({
  150. url: "/pages/workOrder/sellOrder/customBundleDetail?id="+item.id
  151. })
  152. },
  153. // 拨打电话
  154. goTel(phone){
  155. uni.makePhoneCall({
  156. phoneNumber: phone
  157. })
  158. }
  159. }
  160. };
  161. </script>
  162. <style lang="scss">
  163. page {
  164. height: 100%;
  165. }
  166. .homePage-container {
  167. width: 100%;
  168. height: 100%;
  169. display: flex;
  170. flex-direction: column;
  171. padding-top: 102rpx;
  172. // 筛选菜单
  173. .homePage-head {
  174. font-size: 30rpx;
  175. display: flex;
  176. justify-content: space-between;
  177. align-items: center;
  178. position: fixed;
  179. top: 0;
  180. left: 0;
  181. z-index: 9;
  182. padding: 26rpx 30rpx;
  183. background-color: #fff;
  184. box-shadow: 0rpx 0rpx 14rpx rgba(0, 0, 0, 0.05);
  185. width: 100%;
  186. border-top: 10rpx solid #f8f8f8;
  187. .head-con {
  188. flex-grow: 1;
  189. display: flex;
  190. align-items: center;
  191. justify-content: space-between;
  192. .homePage-tit {
  193. color: #040301;
  194. }
  195. .total-con {
  196. color: #040301;
  197. .goleNum {
  198. color: #eb0000;
  199. font-size: 30rpx;
  200. // font-weight: bold;
  201. }
  202. .ld-icon {
  203. width: 30rpx;
  204. height: 30rpx;
  205. margin: 0 0 0 10rpx;
  206. vertical-align: middle;
  207. }
  208. }
  209. }
  210. .filter-icon {
  211. flex-shrink: 0;
  212. width: 36rpx;
  213. height: 36rpx;
  214. padding-left: 30rpx;
  215. }
  216. }
  217. // 列表
  218. .scroll-con {
  219. flex: 1;
  220. // height: calc(100% - 40);
  221. overflow: auto;
  222. // 列表样式
  223. .list-cont{
  224. .list-item-con{
  225. background: #ffffff;
  226. padding: 10rpx 20rpx;
  227. margin: 24rpx;
  228. border-radius: 6rpx;
  229. box-shadow: 2rpx 2rpx 6rpx #EEEEEE;
  230. .con-header, .con-main, .con-footer{
  231. display: flex;
  232. justify-content: space-between;
  233. align-items: center;
  234. }
  235. .con-header{
  236. font-size: 24rpx;
  237. padding: 20rpx 10rpx;
  238. border-bottom: 1px dashed #F8F8F8;
  239. .item-time{
  240. color: #666;
  241. }
  242. .item-orderNo{
  243. color: #333;
  244. }
  245. }
  246. .con-main{
  247. font-size: 28rpx;
  248. color: #333;
  249. padding: 20rpx 10rpx;
  250. border-bottom: 1px dashed #F8F8F8;
  251. .con-main-m{
  252. .item-bundleName{
  253. margin-bottom: 14rpx;
  254. }
  255. .item-bundleMain{
  256. .item-cname{
  257. display: inline-block;
  258. margin-right: 10rpx;
  259. }
  260. .item-phone{
  261. display: inline-block;
  262. }
  263. }
  264. }
  265. }
  266. .con-footer{
  267. padding: 20rpx 10rpx;
  268. .item-price{
  269. text{
  270. font-size: 30rpx;
  271. color: red;
  272. }
  273. }
  274. }
  275. }
  276. }
  277. }
  278. }
  279. </style>