chooseCustomerBill.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. <template>
  2. <view class="content flex flex_column">
  3. <view id="tab">
  4. <view class="header u-flex">
  5. <view class="tab">
  6. <u-tabs :show-bar="false" :active-item-style="activeItemStyle" :list="tabsList" :is-scroll="false" :current="params.allCustomerFlag" @change="changeTabs"></u-tabs>
  7. </view>
  8. <view class="payType u-flex" @click="gatherShow = true">
  9. <view class="u-line-1" v-if="!payTypeWord" :style="{ color: wordColor }">收款方式</view>
  10. <view class="u-line-1" v-else :style="{ color: $config('primaryColor') }">{{payTypeWord}}</view>
  11. <u-icon name="shaixuan" custom-prefix="iscm-icon" size="30" :color="wordColor"></u-icon>
  12. </view>
  13. </view>
  14. <view class="scroll-con u-flex u-row-between" v-show="params.allCustomerFlag == 0">
  15. <scroll-view scroll-x class="scroll-date">
  16. <view class="u-flex" v-show="!showType">
  17. <view v-for="(item, i) in dayGatherArr" :key="i">
  18. <view class="scroll-box" :class="chooseNum == i ? 'activeBox' : ''" v-if="i < 2" @click="handleDate(i)">
  19. <view>{{item}}</view>
  20. <view>{{i==0?'今日':'昨日'}}</view>
  21. </view>
  22. <view class="scroll-box" v-else :class="chooseNum == i ? 'activeBox' : ''" @click="handleDate(i)">{{item.split('.')[1]}}</view>
  23. </view>
  24. </view>
  25. <view class="u-flex" v-show="showType">
  26. <view v-for="(con, j) in monthGatherArr" :key="j">
  27. <view class="scroll-box" :class="chooseNum == j ? 'activeBox' : ''" v-if="j < 2" @click="handleDate(j)">
  28. <view>{{con}}</view>
  29. <view>{{j==0?'本月':'上月'}}</view>
  30. </view>
  31. <view class="scroll-box" v-else :class="chooseNum == j ? 'activeBox' : ''" @click="handleDate(j)">{{con}}</view>
  32. </view>
  33. </view>
  34. </scroll-view>
  35. <u-image :src="`../../static/${theme}/navIcon/dayImg.png`" width="42" height="42" v-show="!showType" @click="chooseType"></u-image>
  36. <u-image :src="`../../static/${theme}/navIcon/monthImg.png`" width="42" height="42" v-show="showType" @click="chooseType"></u-image>
  37. </view>
  38. <view class="customer-search" v-show="params.allCustomerFlag == 1">
  39. <!-- <u-search
  40. v-model="keyword"
  41. @input="$u.debounce(getSearchCon, 800)"
  42. @search="getSearchCon"
  43. @custom="getSearchCon"
  44. @clear="clearSearch"
  45. :show-action="false"
  46. placeholder="请输入客户名称/拼音首字母查询"
  47. ></u-search> -->
  48. <view class="searchInput u-flex u-row-between">
  49. <icon type="search" color="#333" @click="getSearchCon" size="18"/>
  50. <input class="uni-input" placeholder="请输入客户名称/拼音首字母查询" :value="keyword" @input="clearInput"/>
  51. <icon type="clear" :style="{'opacity':isGobleSearch?1:0}" @click="$delayDel(clearSearch)" size="18"/>
  52. </view>
  53. </view>
  54. </view>
  55. <view class="customer-con">
  56. <customerList ref="customer" :height="listHeight" :params="params" ></customerList>
  57. </view>
  58. <!-- 收款方式弹窗 -->
  59. <search :showModal="gatherShow" @refresh="refreshList" @close="gatherShow=false"/>
  60. </view>
  61. </template>
  62. <script>
  63. import search from './gather.vue'
  64. import customerList from './customerList.vue'
  65. import { queryVerifySalesParams } from '@/api/dealerBizParam.js';
  66. import getDate from '@/libs/getDate.js';
  67. export default {
  68. components:{search,customerList},
  69. data() {
  70. return {
  71. tabsList: [
  72. {
  73. name: '最近开单'
  74. },
  75. {
  76. name: '全部客户'
  77. }
  78. ],
  79. isGobleSearch:false,
  80. payTypeWord:null,
  81. activeItemStyle: {
  82. color: this.$config('primaryColor'),
  83. borderBottom: '4rpx solid ' + this.$config('primaryColor')
  84. },
  85. wordColor: this.$config('infoColor'),
  86. theme: '',
  87. showType: false,
  88. chooseNum: 0,
  89. keyword:'',
  90. gatherShow:false,
  91. params:{
  92. allCustomerFlag:0 ,//1全部 0需要查询条件
  93. customer:{
  94. queryWord:undefined,
  95. settleStyleSn:undefined
  96. },
  97. bizBeginDate:undefined,
  98. bizEndDate:undefined
  99. },
  100. pageNo:1,
  101. pageSize:15,
  102. noDataText: '暂无数据',
  103. listHeight:200,
  104. dayGatherArr:[],
  105. monthGatherArr:[]
  106. };
  107. },
  108. onReady() {
  109. uni.setNavigationBarColor({
  110. frontColor: '#ffffff',
  111. backgroundColor: this.$config('primaryColor')
  112. });
  113. const query = uni.createSelectorQuery().in(this);
  114. query.select('#tab').boundingClientRect(data => {
  115. this.listHeight = Math.floor(data.height)
  116. }).exec();
  117. },
  118. onNavigationBarButtonTap() {
  119. uni.navigateTo({
  120. url: '/pages/sales/billHistory'
  121. });
  122. },
  123. onLoad() {
  124. this.theme = getApp({ allowDefault: true }).globalData.theme;
  125. this.getSetInfo();
  126. //获取日期集合
  127. this.dayGatherArr = getDate.getWeekGather();
  128. this.monthGatherArr = getDate.getMonthGather();
  129. },
  130. onBackPress() {
  131. if(this.gatherShow){
  132. this.gatherShow = false
  133. }else{
  134. uni.removeStorageSync('curTab')
  135. }
  136. },
  137. onUnload() {
  138. uni.removeStorageSync('curTab')
  139. },
  140. methods: {
  141. //获取系统参数
  142. getSetInfo(){
  143. // month day all
  144. queryVerifySalesParams({}).then(res => {
  145. let result = res.data;
  146. let obj=result.find(item=>{return item.remarks == 'verify_default_customer'})
  147. if(obj.paramValue == 'all'){
  148. this.params.allCustomerFlag = 1;
  149. this.refreshList();
  150. }else if(obj.paramValue == 'month'){
  151. this.showType = true
  152. }else{
  153. this.showType = false
  154. }
  155. if(this.params.allCustomerFlag != 1){
  156. this.momentTime(0)
  157. }
  158. //获取系统对账周期设置
  159. this.$store.state.vuex_systemSetList = result
  160. });
  161. },
  162. changeTabs(index) {
  163. this.params.allCustomerFlag = index;
  164. if(index==1){
  165. this.clearTime();
  166. this.$refs.customer.refash();
  167. }else{
  168. this.momentTime(this.chooseNum)
  169. this.keyword = ''
  170. this.params.customer.queryWord = ''
  171. }
  172. },
  173. handleDate(i) {
  174. this.chooseNum = i;
  175. this.momentTime(i)
  176. },
  177. chooseType() {
  178. this.chooseNum = 0;
  179. this.showType = !this.showType;
  180. this.momentTime(0)
  181. },
  182. momentTime(pos){
  183. var obj=null;
  184. if(!this.showType){//日
  185. obj =getDate.getFullToday(this.dayGatherArr[pos])
  186. }else{
  187. obj=getDate.getFullMonth(this.monthGatherArr[pos])
  188. }
  189. this.params.bizBeginDate = obj.starttime;
  190. this.params.bizEndDate = obj.endtime;
  191. this.refreshList();
  192. },
  193. clearInput(event) {
  194. this.keyword = event.detail.value;
  195. if (event.detail.value.length > 0) {
  196. this.isGobleSearch = true;
  197. } else {
  198. this.isGobleSearch = false;
  199. }
  200. this.getSearchCon()
  201. },
  202. getSearchCon(){
  203. this.params.customer.queryWord = this.keyword.trim();
  204. this.refreshList();
  205. },
  206. clearSearch(){
  207. this.keyword = ''
  208. this.isGobleSearch = false
  209. this.params.customer.queryWord = undefined
  210. this.refreshList();
  211. },
  212. refreshList(e){
  213. const _this= this
  214. if(e){
  215. _this.params.customer.settleStyleSn = e.code;
  216. _this.payTypeWord = e.dispName
  217. }
  218. if(e == 'reSet'){
  219. _this.params.customer.settleStyleSn= undefined;
  220. _this.payTypeWord = null
  221. }
  222. this.$nextTick(()=>{
  223. _this.$refs.customer.refash();
  224. })
  225. },
  226. clearTime(){
  227. this.params.bizBeginDate = undefined;
  228. this.params.bizEndDate = undefined;
  229. }
  230. }
  231. };
  232. </script>
  233. <style lang="scss" scoped>
  234. .content {
  235. width: 100%;
  236. height: 100vh;
  237. .header {
  238. position: relative;
  239. background: #fff;
  240. .tab {
  241. width: 50%;
  242. margin: 0 auto;
  243. }
  244. .payType {
  245. position: absolute;
  246. right: 18rpx;
  247. max-width: 160rpx;
  248. view {
  249. font-size: 26rpx;
  250. }
  251. }
  252. }
  253. .scroll-con {
  254. width: 100%;
  255. background: #fff;
  256. margin: 6rpx 0;
  257. padding: 10rpx 20rpx;
  258. .scroll-date {
  259. width: calc(100% - 62rpx);
  260. .scroll-box {
  261. margin-right: 28rpx;
  262. padding: 10rpx 20rpx;
  263. text-align: center;
  264. font-size: 26rpx;
  265. view {
  266. &:last-child {
  267. font-size: 24rpx;
  268. color: #666;
  269. }
  270. }
  271. }
  272. .activeBox {
  273. font-weight: bold;
  274. color: $uni-color-primary;
  275. view {
  276. &:last-child {
  277. font-size: 24rpx;
  278. color: $uni-color-primary;
  279. }
  280. }
  281. }
  282. }
  283. }
  284. .customer-con {
  285. flex-grow: 1;
  286. overflow: auto;
  287. background: #fff;
  288. }
  289. //选择客户
  290. .customer-search {
  291. padding: 10rpx 20rpx;
  292. background: #fff;
  293. margin: 6rpx 0;
  294. .searchInput{
  295. padding: 12rpx 20rpx;
  296. box-sizing: border-box;
  297. border-radius: 38rpx;
  298. background-color: rgb(242, 242, 242);
  299. input{
  300. width: 82%;
  301. font-size: 30rpx;
  302. }
  303. }
  304. }
  305. }
  306. </style>