|
@@ -1,8 +1,232 @@
|
|
|
<template>
|
|
|
+ <view class="content flex flex_column">
|
|
|
+ <view class="header u-flex">
|
|
|
+ <view class="tab">
|
|
|
+ <u-tabs :show-bar="false" :active-item-style="activeItemStyle" :list="tabsList" :is-scroll="false" :current="current" @change="changeTabs"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="payType" @click="gatherShow = true">
|
|
|
+ <text :style="{ color: wordColor }">收款方式</text>
|
|
|
+ <u-icon name="shaixuan" custom-prefix="iscm-icon" size="30" :color="wordColor"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tabCon flex flex_column" v-show="current == 0">
|
|
|
+ <view class="scroll-con u-flex u-row-between">
|
|
|
+ <scroll-view scroll-x class="scroll-date">
|
|
|
+ <view class="u-flex" v-show="!showType">
|
|
|
+ <view v-for="(item, i) in 10" :key="i">
|
|
|
+ <view class="scroll-box" :class="chooseNum == i ? 'activeBox' : ''" v-if="i < 2" @click="handleDate(i)">
|
|
|
+ <view>11.{{ i + 1 }}</view>
|
|
|
+ <view>今日</view>
|
|
|
+ </view>
|
|
|
+ <view class="scroll-box" v-else :class="chooseNum == i ? 'activeBox' : ''" @click="handleDate(i)">{{ i + 1 }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="u-flex" v-show="showType">
|
|
|
+ <view v-for="(item, i) in 10" :key="i">
|
|
|
+ <view class="scroll-box" :class="chooseNum == i ? 'activeBox' : ''" v-if="i < 2" @click="handleDate(i)">
|
|
|
+ <view>2022.{{ i + 1 }}</view>
|
|
|
+ <view>本月</view>
|
|
|
+ </view>
|
|
|
+ <view class="scroll-box" v-else :class="chooseNum == i ? 'activeBox' : ''" @click="handleDate(i)">2022.{{ i + 1 }}</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-con">
|
|
|
+ <view class="customer-list">
|
|
|
+ <view class="u-line-1">按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配</view>
|
|
|
+ <view class="customer-b u-flex">
|
|
|
+ <view class="customer-box">
|
|
|
+ <text>欠款:</text>
|
|
|
+ <text>¥582222.00</text>
|
|
|
+ </view>
|
|
|
+ <view class="customer-box">收款方式:现金</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tabCon flex flex_column" v-show="current == 1">
|
|
|
+ <view class="customer-search">
|
|
|
+ <u-search
|
|
|
+ v-model="keyword"
|
|
|
+ @input="$u.debounce(getSearchCon, 800)"
|
|
|
+ @search="getSearchCon"
|
|
|
+ @custom="getSearchCon"
|
|
|
+ @clear="clearSearch"
|
|
|
+ :show-action="false"
|
|
|
+ placeholder="请输入客户名称拼音首字母查询"
|
|
|
+ ></u-search>
|
|
|
+ </view>
|
|
|
+ <view class="customer-con">
|
|
|
+ <u-index-list :scrollTop="scrollTop">
|
|
|
+ <view v-for="(item, index) in indexList" :key="index">
|
|
|
+ <u-index-anchor :index="item" />
|
|
|
+ <view class="customer-list">
|
|
|
+ <view class="u-line-1">按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配</view>
|
|
|
+ <view class="customer-b u-flex">
|
|
|
+ <view class="customer-box">
|
|
|
+ <text>欠款:</text>
|
|
|
+ <text>¥582222.00</text>
|
|
|
+ </view>
|
|
|
+ <view class="customer-box">收款方式:现金</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-index-list>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 收款方式弹窗 -->
|
|
|
+ <search :showModal="gatherShow" @refresh="refreshList" @close="gatherShow=false"/>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import search from './gather.vue'
|
|
|
+export default {
|
|
|
+ components:{search},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabsList: [
|
|
|
+ {
|
|
|
+ name: '最近开单'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '全部用户'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ current: 0,
|
|
|
+ activeItemStyle: {
|
|
|
+ color: this.$config('primaryColor'),
|
|
|
+ borderBottom: '4rpx solid ' + this.$config('primaryColor')
|
|
|
+ },
|
|
|
+ wordColor: this.$config('infoColor'),
|
|
|
+ theme: '',
|
|
|
+ chooseNum: 0,
|
|
|
+ showType: false,
|
|
|
+ indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
|
|
|
+ scrollTop: 0,
|
|
|
+ keyword:'',
|
|
|
+ gatherShow:false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ uni.setNavigationBarColor({
|
|
|
+ frontColor: '#ffffff',
|
|
|
+ backgroundColor: this.$config('primaryColor')
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.theme = getApp().globalData.theme;
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ this.scrollTop = e.scrollTop;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeTabs(index) {
|
|
|
+ this.current = index;
|
|
|
+ },
|
|
|
+ handleDate(i) {
|
|
|
+ this.chooseNum = i;
|
|
|
+ },
|
|
|
+ chooseType() {
|
|
|
+ this.showType = !this.showType;
|
|
|
+ },
|
|
|
+ getSearchCon(){
|
|
|
+
|
|
|
+ },
|
|
|
+ clearSearch(){
|
|
|
+
|
|
|
+ },
|
|
|
+ refreshList(){
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ .header {
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+ .tab {
|
|
|
+ width: 60%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .payType {
|
|
|
+ position: absolute;
|
|
|
+ right: 20rpx;
|
|
|
+ text {
|
|
|
+ vertical-align: top;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabCon {
|
|
|
+ flex-grow: 1;
|
|
|
+ .scroll-con {
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ margin: 6rpx 0;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ .scroll-date {
|
|
|
+ width: calc(100% - 62rpx);
|
|
|
+ .scroll-box {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ 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-list {
|
|
|
+ padding: 20rpx;
|
|
|
+ border-bottom: 1rpx solid #f8f8f8;
|
|
|
+ }
|
|
|
+ .customer-b {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ color: #666;
|
|
|
+ font-size: 26rpx;
|
|
|
+ .customer-box {
|
|
|
+ width: 46%;
|
|
|
+ text {
|
|
|
+ &:last-child {
|
|
|
+ color: $uni-color-warning;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //选择客户
|
|
|
+ .customer-search {
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin: 6rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|