<template> <view> <!-- <u-navbar :customBack="customBack" back-icon-color="#fff" title="客户列表" :background="{ backgroundColor: '#2080f0' }" title-color="#fff" :border-bottom="false" ></u-navbar> --> <!-- 顶部筛选栏 --> <!-- <HM-filterDropdown :menuTop="menuTop" :filterData="filterData" :defaultSelected="filterDropdownValue" @confirm="confirmFilter"></HM-filterDropdown> --> <view class="customer-list-wrap"> <view v-if="customerList.length == 0" class="empty-wrap"><u-empty mode="list" text="暂无相关客户"></u-empty></view> <view v-for="(item, index) in customerList" class="customer-item" :key="index"> <view class="info"> <view class="customer"> <view class="relname"> {{ item.name }} <u-icon class="u-m-l-5" :name="item.sex == 'male' ? 'man' : 'woman'" size="22" :color="item.sex == 'male' ? '#2080f0' : '#f85f69'" ></u-icon> <u-icon name="attach" size="32" label="快速报备" label-size="24" class="u-m-l-20" color="#f00" label-color="#f00" @click="pageTo('/pages/agent/recommend/create', { info: item })" ></u-icon> </view> <view class="item"> <u-icon class="u-m-r-5" name="phone" size="22"></u-icon> {{ item.phone }} </view> <view class="item" v-if="item.demand"> {{ item.demand }} </view> </view> <view class="data-wrap"> <u-tag icon="edit-pen" :text="'编辑'" :type="'primary'" class="u-m-r-10" @click="pageTo('/pages/cust/create', { info: item })" > </u-tag> <view class="u-m-t-20"> <u-tag @click="delHandle(item)" plain :text="'删除'" :type="'error'" class="u-m-r-10" > </u-tag> </view> </view> </view> </view> </view> <view class="float-search2" @click="pageTo('/pages/cust/create')"><u-icon name="plus" size="42" color="#fff"></u-icon></view> <view class="float-search" @click="searchPopupShow = true"><u-icon name="search" size="42" color="#fff"></u-icon></view> <u-popup v-model="searchPopupShow" mode="center" width="80%" height="440rpx" border-radius="20"> <view class="bwin-popup"> <view class="popup-header">客户搜索</view> <view class="popup-body"> <u-input v-model="searchFormData.name" border placeholder="请输入客户姓名(支持模糊搜索)"></u-input> <u-divider marginTop="10" marginBottom="10">或</u-divider> <u-input v-model="searchFormData.phone" border placeholder="请输入客户手机号(可仅输入一部分)"></u-input> </view> <view class="popup-footer" style="position: absolute;"> <u-button size="medium" @click="searchPopupShow = false">取消</u-button> <u-button size="medium" type="primary" @click="searchHandle()">搜索</u-button> </view> </view> </u-popup> <u-loadmore v-if="customerList.length > 0" marginTop="32" :line="true" :status="loadmore.status" :loading-text="loadmore.loadingText" :loadmore-text="loadmore.defaultText" :nomore-text="loadmore.nomoreText" /> </view> </template> <script> var that; export default { data() { return { searchKeyword: null, searchPopupShow: false, searchFormData: { name: '', phone: '' }, // 搜索栏数据 customerList: [], loadmore: { status: 'loadmore', loadingText: '努力加载中', defaultText: '轻轻上拉 查看更多', nomoreText: '实在没有了', currnetPage: 1 } }; }, onLoad(params) { that = this; // 默认筛选项 if (params.filterStepStatus !== undefined) { that.filterStepStatus = parseInt(params.filterStepStatus); this.filterDropdownValue = [[],[],[],[that.filterStepStatus],[]] } this.getDataList() }, onReachBottom() { if (that.loadmore.status == 'nomore') return; that.loadmore.currnetPage++ this.getDataList() }, onPullDownRefresh() { // 防止频繁刷新 }, methods: { delHandle (item) { uni.$msgConfirm('确定删除吗?', () => { uni.api.cust.apicustomerdel({ id: item.id }).then(res => { uni.$msg('删除成功~') this.loadmore.currnetPage = 1 this.getDataList() }) }) }, getDataList (bc) { const that = this let params = { ...this.searchFormData } uni.api.cust.apicustomerlist({ page: that.loadmore.currnetPage, ...params, }).then(res => { const list = res.list || [] if (list.length < 10) { that.loadmore.status = 'nomore'; } if (res.page = 1) { if (list.length == 0) { uni.$msg('无搜索结果', 'none'); } that.customerList = [...list] } else { that.customerList = that.customerList.concat(list) } if (bc) bc() }) }, customBack() { uni.navigateBack(); }, // 带监听器跳转 pageTo(url, data) { /// xxxxx uni.navigateTo({ url: url, events: { // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据 update: function(data) { // 当B页面运行 eventChannel.emit('update', { a:1 }); 时,会运行这里的代码逻辑。 } }, success: function(res) { // 通过eventChannel向被打开页面传送数据 res.eventChannel.emit('data', data); } }); }, searchHandle() { that.loadmore.currnetPage = 1 this.getDataList(() => { this.searchPopupShow = false }) }, } }; </script> <style lang="scss"> .search-wrap { padding: 20rpx; } .filter-wrap { position: relative; } // 列表 .customer-list-wrap { width: 100%; .customer-item { display: flex; flex-direction: column; align-items: flex-start; font-size: $u-p2; color: $u-content-color; border-bottom: 1rpx solid $u-border-color; padding: 24rpx 32rpx; .info { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; margin-bottom: 10rpx; .customer { display: flex; flex-direction: column; align-items: flex-start; .relname { color: $u-main-color; font-size: $u-p; font-weight: bold; margin-bottom: 10rpx; } .item { margin-bottom: 10rpx; } } .data-wrap { text-align: right; .date { font-size: $u-sub; } } } .tool-wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; } } } .float-search { opacity: 0.9; position: fixed; right: 20rpx; bottom: 40rpx; padding: 20rpx; border-radius: 50%; background-color: $u-theme-color; } .float-search2 { opacity: 0.9; position: fixed; right: 20rpx; bottom: 150rpx; padding: 20rpx; border-radius: 50%; background-color: $u-theme-color; } </style>