123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311 |
- <template>
- <view class="content flex flex_column">
- <view id="tab">
- <view class="header u-flex">
- <view class="tab">
- <u-tabs :show-bar="false" :active-item-style="activeItemStyle" :list="tabsList" :is-scroll="false" :current="params.allCustomerFlag" @change="changeTabs"></u-tabs>
- </view>
- <view class="payType u-flex" @click="gatherShow = true">
- <view class="u-line-1" v-if="!payTypeWord" :style="{ color: wordColor }">收款方式</view>
- <view class="u-line-1" v-else :style="{ color: $config('primaryColor') }">{{payTypeWord}}</view>
- <u-icon name="shaixuan" custom-prefix="iscm-icon" size="30" :color="wordColor"></u-icon>
- </view>
- </view>
- <view class="scroll-con u-flex u-row-between" v-show="params.allCustomerFlag == 0">
- <scroll-view scroll-x class="scroll-date">
- <view class="u-flex" v-show="!showType">
- <view v-for="(item, i) in dayGatherArr" :key="i">
- <view class="scroll-box" :class="chooseNum == i ? 'activeBox' : ''" v-if="i < 2" @click="handleDate(i)">
- <view>{{item}}</view>
- <view>{{i==0?'今日':'昨日'}}</view>
- </view>
- <view class="scroll-box" v-else :class="chooseNum == i ? 'activeBox' : ''" @click="handleDate(i)">{{item.split('.')[1]}}</view>
- </view>
- </view>
- <view class="u-flex" v-show="showType">
- <view v-for="(con, j) in monthGatherArr" :key="j">
- <view class="scroll-box" :class="chooseNum == j ? 'activeBox' : ''" v-if="j < 2" @click="handleDate(j)">
- <view>{{con}}</view>
- <view>{{j==0?'本月':'上月'}}</view>
- </view>
- <view class="scroll-box" v-else :class="chooseNum == j ? 'activeBox' : ''" @click="handleDate(j)">{{con}}</view>
- </view>
- </view>
- </scroll-view>
- <u-image :src="`../../static/${theme}/navIcon/dayImg.png`" width="42" height="42" v-show="!showType" @click="chooseType"></u-image>
- <u-image :src="`../../static/${theme}/navIcon/monthImg.png`" width="42" height="42" v-show="showType" @click="chooseType"></u-image>
- </view>
- <view class="customer-search" v-show="params.allCustomerFlag == 1">
- <!-- <u-search
- v-model="keyword"
- @input="$u.debounce(getSearchCon, 800)"
- @search="getSearchCon"
- @custom="getSearchCon"
- @clear="clearSearch"
- :show-action="false"
- placeholder="请输入客户名称/拼音首字母查询"
- ></u-search> -->
- <view class="searchInput u-flex u-row-between">
- <icon type="search" color="#333" @click="getSearchCon" size="18"/>
- <input class="uni-input" placeholder="请输入客户名称/拼音首字母查询" :value="keyword" @input="clearInput"/>
- <icon type="clear" :style="{'opacity':isGobleSearch?1:0}" @click="$delayDel(clearSearch)" size="18"/>
- </view>
- </view>
- </view>
- <view class="customer-con">
- <customerList ref="customer" :height="listHeight" :params="params" ></customerList>
- </view>
- <!-- 收款方式弹窗 -->
- <search :showModal="gatherShow" @refresh="refreshList" @close="gatherShow=false"/>
- </view>
-
- </template>
- <script>
- import search from './gather.vue'
- import customerList from './customerList.vue'
- import { queryVerifySalesParams } from '@/api/dealerBizParam.js';
- import getDate from '@/libs/getDate.js';
- export default {
- components:{search,customerList},
- data() {
- return {
- tabsList: [
- {
- name: '最近开单'
- },
- {
- name: '全部客户'
- }
- ],
- isGobleSearch:false,
- payTypeWord:null,
- activeItemStyle: {
- color: this.$config('primaryColor'),
- borderBottom: '4rpx solid ' + this.$config('primaryColor')
- },
- wordColor: this.$config('infoColor'),
- theme: '',
- showType: false,
-
- chooseNum: 0,
-
- keyword:'',
- gatherShow:false,
- params:{
- allCustomerFlag:0 ,//1全部 0需要查询条件
- customer:{
- queryWord:undefined,
- settleStyleSn:undefined
- },
- bizBeginDate:undefined,
- bizEndDate:undefined
- },
- pageNo:1,
- pageSize:15,
- noDataText: '暂无数据',
- listHeight:200,
- dayGatherArr:[],
- monthGatherArr:[]
- };
- },
- onReady() {
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: this.$config('primaryColor')
- });
- const query = uni.createSelectorQuery().in(this);
- query.select('#tab').boundingClientRect(data => {
- this.listHeight = Math.floor(data.height)
- }).exec();
- },
- onNavigationBarButtonTap() {
- uni.navigateTo({
- url: '/pages/sales/billHistory'
- });
- },
- onLoad() {
- this.theme = getApp({ allowDefault: true }).globalData.theme;
- this.getSetInfo();
- //获取日期集合
- this.dayGatherArr = getDate.getWeekGather();
- this.monthGatherArr = getDate.getMonthGather();
- },
- onBackPress() {
- if(this.gatherShow){
- this.gatherShow = false
- }else{
- uni.removeStorageSync('curTab')
- }
- },
- onUnload() {
- uni.removeStorageSync('curTab')
- },
- methods: {
- //获取系统参数
- getSetInfo(){
- // month day all
- queryVerifySalesParams({}).then(res => {
- let result = res.data;
- let obj=result.find(item=>{return item.remarks == 'verify_default_customer'})
- if(obj.paramValue == 'all'){
- this.params.allCustomerFlag = 1;
- this.refreshList();
- }else if(obj.paramValue == 'month'){
- this.showType = true
- }else{
- this.showType = false
- }
- if(this.params.allCustomerFlag != 1){
- this.momentTime(0)
- }
- //获取系统对账周期设置
- this.$store.state.vuex_systemSetList = result
- });
- },
- changeTabs(index) {
- this.params.allCustomerFlag = index;
- if(index==1){
- this.clearTime();
- this.$refs.customer.refash();
- }else{
- this.momentTime(this.chooseNum)
- this.keyword = ''
- this.params.customer.queryWord = ''
- }
- },
- handleDate(i) {
- this.chooseNum = i;
- this.momentTime(i)
- },
- chooseType() {
- this.chooseNum = 0;
- this.showType = !this.showType;
- this.momentTime(0)
- },
- momentTime(pos){
- var obj=null;
- if(!this.showType){//日
- obj =getDate.getFullToday(this.dayGatherArr[pos])
- }else{
- obj=getDate.getFullMonth(this.monthGatherArr[pos])
- }
- this.params.bizBeginDate = obj.starttime;
- this.params.bizEndDate = obj.endtime;
- this.refreshList();
- },
- clearInput(event) {
- this.keyword = event.detail.value;
- if (event.detail.value.length > 0) {
- this.isGobleSearch = true;
- } else {
- this.isGobleSearch = false;
- }
- this.getSearchCon()
- },
- getSearchCon(){
- this.params.customer.queryWord = this.keyword.trim();
- this.refreshList();
- },
- clearSearch(){
- this.keyword = ''
- this.isGobleSearch = false
- this.params.customer.queryWord = undefined
- this.refreshList();
- },
- refreshList(e){
- const _this= this
- if(e){
- _this.params.customer.settleStyleSn = e.code;
- _this.payTypeWord = e.dispName
- }
- if(e == 'reSet'){
- _this.params.customer.settleStyleSn= undefined;
- _this.payTypeWord = null
- }
- this.$nextTick(()=>{
- _this.$refs.customer.refash();
- })
- },
- clearTime(){
- this.params.bizBeginDate = undefined;
- this.params.bizEndDate = undefined;
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .content {
- width: 100%;
- height: 100vh;
- .header {
- position: relative;
- background: #fff;
- .tab {
- width: 50%;
- margin: 0 auto;
- }
- .payType {
- position: absolute;
- right: 18rpx;
- max-width: 160rpx;
- view {
- font-size: 26rpx;
- }
- }
- }
- .scroll-con {
- width: 100%;
- background: #fff;
- margin: 6rpx 0;
- padding: 10rpx 20rpx;
- .scroll-date {
- width: calc(100% - 62rpx);
- .scroll-box {
- margin-right: 28rpx;
- padding: 10rpx 20rpx;
- text-align: center;
- font-size: 26rpx;
- view {
- &:last-child {
- font-size: 24rpx;
- color: #666;
- }
- }
- }
- .activeBox {
- font-weight: bold;
- color: $uni-color-primary;
- view {
- &:last-child {
- font-size: 24rpx;
- color: $uni-color-primary;
- }
- }
- }
- }
- }
- .customer-con {
- flex-grow: 1;
- overflow: auto;
- background: #fff;
- }
- //选择客户
- .customer-search {
- padding: 10rpx 20rpx;
- background: #fff;
- margin: 6rpx 0;
- .searchInput{
- padding: 12rpx 20rpx;
- box-sizing: border-box;
- border-radius: 38rpx;
- background-color: rgb(242, 242, 242);
- input{
- width: 82%;
- font-size: 30rpx;
- }
- }
- }
- }
- </style>
|