parts_shop_ui_LT/pages/views/customerAnalysis/index.vue

<template>
	<view style="background-color: #f2f2f6;padding-bottom: 0.01rpx;" :class="mask ? 'tl-show': ''">
		<view style="background-color: #fff;position: fixed;top: var(--window-top);width: 100%;z-index: 8;">
			<view style="background-color: #fff;padding: 10rpx 20rpx;">
				<u-search placeholder="请输入客户名称" v-model="form.cname" @custom="custom" @search="custom"></u-search>
				<!--<view style="display: flex;align-items: center;margin-top: 4rpx;">
					<view style="font-size: 14px;color: #303133;margin-right: 4px;">
						未购买天数
					</view>
					<u-search placeholder="请输入天数" v-model="form.days" :showAction='false'></u-search>
					<view>
						<view style="padding:0 4px;" @tap="popupShow=true">
							<u-icon name="list" size="21" bold></u-icon>
						</view>
					</view>
				</view> -->
			</view>
			<sh-filter ref="shFilter" :list="list" @setData="shfilterChange" :defaultValue="defaultValue"></sh-filter>
			<!-- <u-tabs :list="tabsList" keyName="dictValue" itemStyle="height:88rpx;" lineColor="#FD4B09"
				@click="tabsClick" :current="current">
				<view slot="right" style="padding:0 4px;" @tap="popupShow=true">
					<u-icon name="list" size="21" bold></u-icon>
				</view>
			</u-tabs> -->
			<!-- <view class="tabFilter">
					<u-tag v-if='form.days' :text="form.days+'天'" plain size="mini" style="margin-left: 10px;"></u-tag>
					<u-tag v-if='form.notPurchased==1' text="未购买" plain size="mini" style="margin-left: 10px;"></u-tag>
					<u-tag v-if='form.sort==1' text="业务员" plain size="mini" style="margin-left: 10px;"></u-tag>
					<u-tag v-if='form.sort==2' text="客户" plain size="mini" style="margin-left: 10px;"></u-tag>
					<u-tag v-if='form.sort==3' text="地址" plain size="mini" style="margin-left: 10px;"></u-tag>
					<u-tag v-if='form.sort==4' text="日期" plain size="mini" style="margin-left: 10px;"></u-tag>
			</view> -->


		</view>
		<view class="content" style="margin-top:90px">
			<view class="contentBox" v-for="(item,index) in dataList" :key="index">
				<view style="width: 100%;margin: 0 auto;" @click="inPage(item)">
					<u-cell-group :border="false">
						<u-cell :border="false" center :title="item.cname" arrow-direction="down">
							<view slot="icon" style="width: 10rpx;height: 35rpx;background-color: #fd4b09;"></view>
						</u-cell>
					</u-cell-group>
					<!-- blade-system/dict-biz/dictionary?code=outbound_work_order_status -->
					<view class="textBox">
						<view>最后一次购买日期</view>
						<view>{{item.businesDate?item.businesDate:'-'}}</view>
					</view>
					<view class="textBox">
						<view>未购买天数</view>
						<view>{{item.days?item.days:'-'}}</view>
					</view>
					<view class="textBox">
						<view>业务员</view>
						<view style="max-width: 500rpx;">{{item.salesmanName?item.salesmanName:'-'}}</view>
					</view>
					<view class="textBox">
						<view>电话</view>
						<view>{{item.tel?item.tel:'-'}}</view>
					</view>
					<view class="textBox">
						<view>默认地址</view>
						<view style="max-width: 500rpx;">{{item.detailedAddress?item.detailedAddress:'-'}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="popupShow" :round="10" @close="popupClose" closeable>
			<view style="padding: 10px;">
				<view style="display: flex;justify-content: center;font-size: 36rpx;">
					<text>排序</text>
				</view>
				<u--form style="margin-bottom: 20px;" labelPosition="left" :model="form" ref="uForm">
					<!-- <u-form-item label="查询天数" borderBottom :labelWidth='66'>
						<u-input v-model="form.days" placeholder="请输入查询天数" border="none" type="number"></u-input>
					</u-form-item> -->
					<u-form-item label="排序" borderBottom :labelWidth='66'>
						<u-radio-group v-model='form.sort'>
							<u-radio :name="1">业务员</u-radio>
							<u-radio :name="2">客户</u-radio>
							<u-radio :name="3">地址</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="未购买" borderBottom :labelWidth='66'>
						<u-switch v-model="form.notPurchased" :activeValue='1' :inactiveValue='null'></u-switch>
					</u-form-item>
				</u--form>
				<view style="display: flex;">
					<u-button style="margin-right: 4px;" text="重置" @click='reset'></u-button>
					<u-button type="primary" text="检索" @click='submit'></u-button>
				</view>
			</view>
		</u-popup>
		<u-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="{backgroundColor:'#FD4B09'}"
			:iconStyle="{color:'#fff'}"></u-back-top>
	</view>
</template>

<script>
	import {
		getList
	} from '@/api/views/customerAnalysis/index.js'
	export default {
		data() {
			return {
				defaultValue: {
					"days": ["30"],
					"notPurchased": [],
					"sort": ["1"]
				},
				list: [{
						label: '未购买天数',
						type: 'select',
						mode: 'cell',
						min: 1,
						max: 1,
						field: 'days',
						child: [{
								label: '30天',
								value: '30',
							},
							{
								label: '60天',
								value: '60',
							},
							{
								label: '120天',
								value: '120',
							},
							{
								label: '365天',
								value: '365',
							},
						],
					},
					{
						label: '未购买',
						type: 'select',
						mode: 'cell', // button -按钮类型  cell-表格类型
						field: 'notPurchased',
						child: [{
							label: '未购买',
							value: '1',
						}, ],
					},
					{
						label: '排序',
						type: 'select',
						mode: 'cell',
						min: 1,
						max: 1,
						field: 'sort',
						child: [{
								label: '业务员',
								value: '1',
							},
							{
								label: '客户',
								value: '2',
							},
							{
								label: '地址',
								value: '3',
							},
							{
								label: '日期',
								value: '4',
							},
						],
					},
				],
				popupShow: false,
				// 列表的参数
				dataList: [],
				mask: false,
				total: 0,
				keyName: 'cname',
				status: 'loadmore',
				// 请求的参数
				form: {
					current: 1,
					size: 10,
					sort: 1,
					days: 30,
					endDays: 59,
					notPurchased:null
				},
				tabsList: [{
					dictKey: 1,
					dictValue: '业务员优先'

				}, {
					dictKey: 2,
					dictValue: '客户优先'

				}, {
					dictKey: 3,
					dictValue: '地址优先'
				}],
				current: 0,
				scrollTop: 0
			}
		},
		onLoad() {
			// this.form.sort = "S"
			this.dataList = []
			this.getList()
		},
		onReachBottom() {
			this.status = 'loading'
			if (this.dataList.length < this.total) {
				this.form.current++
				this.getList()
			} else {
				this.status = 'nomore'
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			shfilterChange(val) {
				console.log(val)
				if (val.days&&val.days.length) {
					if (val.days[0] == 30) {
						this.form.days = val.days[0]
						this.form.endDays = 59
					}
					if (val.days[0] == 60) {
						this.form.days = val.days[0]
						this.form.endDays = 119
					}
					if (val.days[0] == 120) {
						this.form.days = val.days[0]
						this.form.endDays = 364
					}
					if (val.days[0] == 365) {
						this.form.days = val.days[0]
						this.form.endDays = null
					}
				} else {
					this.form.days = 30
					this.form.endDays = 59
				}
				if (val.notPurchased&&val.notPurchased.length) {
					this.form.notPurchased = 1
				} else {
					this.form.notPurchased = null
				}
				if (val.sort&&val.sort.length) {
					this.form.sort = val.sort[0]
				} else {
					this.form.sort = 1
				}
				this.form.current = 1
				this.dataList = []
				this.getList()
			},
			inPage(row) {
				console.log(row)
				uni.$u.route('/pages/views/customerAnalysis/details', {
					id: row.id
				});
			},
			custom() {
				this.form.current = 1
				this.dataList = []
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getList(this.form).then(res => {
					if (res.data.length == 0) {
						this.dataList = []
						this.total = 0
					} else {
						this.total = res.data.total || 0
						this.dataList = this.dataList.concat(res.data.records)
					}
					uni.hideLoading();
					if (this.total < 10) {
						this.status = 'nomore'
					}
					// this.getViewHeight()
				})
			},
			// tabs切换
			tabsClick(item) {
				this.current = item.index
				this.form.sort = item.dictKey
				this.form.current = 1
				this.dataList = []
				this.getList()
			},
			popupClose() {
				this.popupShow = false
			},
			submit() {
				this.popupShow = false
				this.form.current = 1
				this.dataList = []
				this.getList()
			},
			reset() {
				this.form.sort = 1
				this.form.notPurchased = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabFilter {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		height: 36px;
		width: 100%;
		box-shadow: 0 0 4px 2px rgba($color: #000000, $alpha: 0.06);
	}

	.contentBox {
		width: 96%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding-top: 15rpx;
		padding-bottom: 10rpx;
	}

	.textBox {
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.textBox-text {
		width: 400rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.dropdown {
		position: absolute;
		z-index: 9;
		background: rgba(0, 0, 0, .3);
		width: 100%;
		left: 0;
		top: calc(var(--status-bar-height) + 90px);
		bottom: 0;
	}

	.tl-show {
		overflow: hidden;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.tabClass {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 20rpx 10rpx;
	}
</style>