|
|
@@ -0,0 +1,293 @@
|
|
|
+<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.remark">
|
|
|
+ {{ item.remark }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="data-wrap">
|
|
|
+ <u-tag
|
|
|
+ icon="edit-pen"
|
|
|
+ :text="'编辑'"
|
|
|
+ :type="'primary'"
|
|
|
+ class="u-m-r-10"
|
|
|
+ @click="pageTo('/pages/cust/mycreate', { 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/mycreate')"><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.apiprivatecustomerdel({
|
|
|
+ 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.apiprivatecustomerlist({
|
|
|
+ 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>
|