index.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  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. import { getLookUpDatas } from '@/api/data'
  57. export default {
  58. components: { searchModal },
  59. data() {
  60. return {
  61. listdata: [],
  62. pageNo: 1, // 当前页码
  63. pageSize: 10, // 每页条数
  64. total: 0, // 数据总条数
  65. noDataText: '暂无数据', // 列表请求状态提示语
  66. status: 'loadmore', // 加载中状态
  67. openScreen: false, // 是否打开筛选
  68. searchForm: {
  69. // 查询条件
  70. beginDate: '', // 创建时间默认筛选近7天
  71. endDate: '', // 创建时间默认筛选近7天
  72. bundleName: '', // 套餐名称
  73. custMobile: '', // 客户手机
  74. },
  75. scrollTop: 0, // 滚动条位置
  76. totalObj: null,
  77. payTypeList: [] // 支付方式 数据
  78. };
  79. },
  80. onLoad(option) {
  81. // 获取支付,收款方式
  82. this.getLookUpList('PAY_PROCUCT_TYPE');
  83. },
  84. onShow() {
  85. this.openScreen = false; // 关闭筛选框
  86. this.refresh({});
  87. },
  88. methods: {
  89. // 或某一项字典列表,参数code
  90. getLookUpList(code) {
  91. getLookUpDatas({ type: code }).then(res => {
  92. if (res.status == 200) {
  93. this.payTypeList = res.data || []
  94. }
  95. });
  96. },
  97. filterVal(val){
  98. let row = this.payTypeList.find(item => item.payType == val)
  99. },
  100. // 总计
  101. getGoldLogTotal() {
  102. countListBundle({
  103. beginDate: this.searchForm.beginDate,
  104. endDate: this.searchForm.endDate,
  105. bundleName: this.searchForm.bundleName,
  106. custMobile: this.searchForm.custMobile
  107. }).then(res => {
  108. if (res.status == 200) {
  109. this.totalObj = res.data
  110. } else {
  111. this.totalObj = null
  112. }
  113. });
  114. },
  115. // 获取查询参数 刷新列表
  116. refresh(params) {
  117. this.searchForm = params;
  118. this.listdata = [];
  119. this.total = 0;
  120. this.searchHandle(1);
  121. this.getGoldLogTotal();
  122. },
  123. // 搜索查询
  124. searchHandle(pageNo) {
  125. this.status = 'loading';
  126. pageNo ? (this.pageNo = pageNo) : null;
  127. listCustomerBundle({
  128. pageNo: this.pageNo,
  129. pageSize: this.pageSize,
  130. beginDate: this.searchForm.beginDate,
  131. endDate: this.searchForm.endDate,
  132. bundleName: this.searchForm.bundleName,
  133. custMobile: this.searchForm.custMobile
  134. }).then(res => {
  135. if (res.status == 200) {
  136. if (this.pageNo > 1) {
  137. this.listdata = this.listdata.concat(res.data.list || []);
  138. } else {
  139. this.listdata = res.data.list || [];
  140. this.scrollTop = 0;
  141. }
  142. this.total = res.data.count || 0;
  143. this.noDataText = '暂无数据';
  144. } else {
  145. this.noDataText = res.message;
  146. this.listdata = [];
  147. this.total = 0;
  148. }
  149. this.status = 'loadmore';
  150. });
  151. },
  152. // scroll-view到底部加载更多
  153. onreachBottom() {
  154. if (this.listdata.length < this.total) {
  155. this.pageNo += 1;
  156. this.searchHandle();
  157. } else {
  158. uni.showToast({ title: '已经到底了', icon: 'none' });
  159. this.status = 'nomore';
  160. }
  161. },
  162. // 详细页
  163. viewRow(item){
  164. // 已完成的
  165. uni.navigateTo({
  166. url: "/pages/workOrder/sellOrder/customBundleDetail?id="+item.id
  167. })
  168. },
  169. // 拨打电话
  170. goTel(phone){
  171. uni.makePhoneCall({
  172. phoneNumber: phone
  173. })
  174. }
  175. }
  176. };
  177. </script>
  178. <style lang="scss">
  179. page {
  180. height: 100%;
  181. }
  182. .homePage-container {
  183. width: 100%;
  184. height: 100%;
  185. display: flex;
  186. flex-direction: column;
  187. padding-top: 102rpx;
  188. // 筛选菜单
  189. .homePage-head {
  190. font-size: 30rpx;
  191. display: flex;
  192. justify-content: space-between;
  193. align-items: center;
  194. position: fixed;
  195. top: 0;
  196. left: 0;
  197. z-index: 9;
  198. padding: 26rpx 30rpx;
  199. background-color: #fff;
  200. box-shadow: 0rpx 0rpx 14rpx rgba(0, 0, 0, 0.05);
  201. width: 100%;
  202. border-top: 10rpx solid #f8f8f8;
  203. .head-con {
  204. flex-grow: 1;
  205. display: flex;
  206. align-items: center;
  207. justify-content: space-between;
  208. .homePage-tit {
  209. color: #040301;
  210. }
  211. .total-con {
  212. color: #040301;
  213. .goleNum {
  214. color: #eb0000;
  215. font-size: 30rpx;
  216. // font-weight: bold;
  217. }
  218. .ld-icon {
  219. width: 30rpx;
  220. height: 30rpx;
  221. margin: 0 0 0 10rpx;
  222. vertical-align: middle;
  223. }
  224. }
  225. }
  226. .filter-icon {
  227. flex-shrink: 0;
  228. width: 36rpx;
  229. height: 36rpx;
  230. padding-left: 30rpx;
  231. }
  232. }
  233. // 列表
  234. .scroll-con {
  235. flex: 1;
  236. // height: calc(100% - 40);
  237. overflow: auto;
  238. // 列表样式
  239. .list-cont{
  240. .list-item-con{
  241. background: #ffffff;
  242. padding: 10rpx 20rpx;
  243. margin: 24rpx;
  244. border-radius: 6rpx;
  245. box-shadow: 2rpx 2rpx 6rpx #EEEEEE;
  246. .con-header, .con-main, .con-footer{
  247. display: flex;
  248. justify-content: space-between;
  249. align-items: center;
  250. }
  251. .con-header{
  252. font-size: 24rpx;
  253. padding: 20rpx 10rpx;
  254. border-bottom: 1px dashed #F8F8F8;
  255. .item-time{
  256. color: #666;
  257. }
  258. .item-orderNo{
  259. color: #333;
  260. }
  261. }
  262. .con-main{
  263. font-size: 28rpx;
  264. color: #333;
  265. padding: 20rpx 10rpx;
  266. border-bottom: 1px dashed #F8F8F8;
  267. .con-main-m{
  268. .item-bundleName{
  269. margin-bottom: 14rpx;
  270. }
  271. .item-bundleMain{
  272. .item-cname{
  273. display: inline-block;
  274. margin-right: 10rpx;
  275. }
  276. .item-phone{
  277. display: inline-block;
  278. }
  279. }
  280. }
  281. }
  282. .con-footer{
  283. padding: 20rpx 10rpx;
  284. .item-price{
  285. text{
  286. font-size: 30rpx;
  287. color: red;
  288. }
  289. }
  290. }
  291. }
  292. }
  293. }
  294. }
  295. </style>