opms_wechat/pages/customer/index.vue

<!--
 * @Author: liuzhenlin 461480418@qq.ocm
 * @Date: 2023-01-12 11:57:48
 * @LastEditors: liuzhenlin
 * @LastEditTime: 2023-02-15 09:43:14
 * @Description: file content
 * @FilePath: \oms\pages\customer\index.vue
-->
<template>
  <view class="home">
    <view class="nav">
      <view :style="{ paddingTop }">
        <view class="title" :style="[{ height }, { lineHeight: height }]">
          <view class="back" @click="goBack()">
            <u-icon name="arrow-left" color="#ffffff" size="22"></u-icon>
          </view>
          <text>储备客户</text>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="query-wrap">
        <view class="search-container">
          <view class="search-input">
            <u-input
              clearable
              placeholderStyle="font-size:26rpx"
              :customStyle="{ height: '66rpx' }"
              v-model="custName"
              prefixIcon="search"
              prefixIconStyle="font-size: 22px;color: #909399"
              placeholder="请输入客户名称"
              shape="circle"
              border="surround"></u-input>
          </view>
          <view class="search-btn" @click="openFilter">筛选</view>
          <view class="search-btn" @click="searchList">搜索</view>
        </view>
        <!-- 筛选 -->
        <view class="filter-popup" v-if="filterVisible">
          <view class="filter-wrap">
            <view class="filter-item">
              <view class="tit">客户行业</view>
              <view class="menu-list">
                <view class="menu-item" v-for="(item, index) in industryOptions" :key="index">
                  <u-tag
                    shape="circle"
                    :text="item.value"
                    :plain="industryChecked != item.key"
                    :name="item.key"
                    @click="radioClick(item, 'industryChecked')"></u-tag>
                </view>
              </view>
            </view>
            <view class="filter-item">
              <view class="tit">最后跟进时间</view>
              <view class="menu-list">
                <u-button v-if="!followUpDate" type="primary" text="选择时间" @click="$refs.calendar.open()"></u-button>
                <view style="width: 100%" v-else @click="$refs.calendar.open()">
                  {{ followUpDate }}
                </view>
              </view>
            </view>
            <view class="btn-box">
              <view class="reset" @click="reset()">重置</view>
              <view class="submit" @click="confirmFilter()">确定</view>
            </view>
          </view>
        </view>
      </view>
      <u-empty v-if="customerData.length == 0" mode="list" text="暂无数据"></u-empty>
      <scroll-view :scroll-y="true" class="data-list" @scrolltolower="lower" v-else>
        <view>
          <view class="data-item" v-for="(v, i) in customerData" :key="i" @click="toDetails(v)">
            <view class="customer-name flex">
              <text class="name">{{ v.custName }}</text>
              <view class="user-code">
                <text>{{ v.custCode }}</text>
              </view>
            </view>
            <view class="customer-info flex">
              <view class="info-left flex_1">
                <view class="info-row flex_l">
                  <text class="info-label">所在省市：</text>
                  <u-text color="#323232" size="24rpx" :text="v.custProvince + '' + v.custCity"></u-text>
                </view>
                <view class="info-row flex_l">
                  <text class="info-label">客户类别：</text>
                  <u-text
                    color="#323232"
                    size="24rpx"
                    :text="selectDictLabel(industryOptions, v.custIndustry)"></u-text>
                </view>
                <view class="info-row flex_l">
                  <text class="info-label">最后跟进时间：</text>
                  <u-text color="#323232" size="24rpx" :text="parseTime(v.followUpDate, '{y}-{m}-{d}') || '-'"></u-text>
                </view>
                <view class="flex_l">
                  <view class="transfer-btn mr20" @click.stop="linkToTransfer(v.id)">
                    <u-button type="primary" size="small" text="转移客户"></u-button>
                  </view>
                  <view class="transfer-btn mr20" @click.stop="$refs.moveCust.open(v.id)">
                    <u-button type="primary" size="small" text="移入公海"></u-button>
                  </view>
                </view>
              </view>
              <view class="info-right flex_l flex-column">
                <!-- <image class="user-img" src="@/static/images/user.jpg" mode="scaleToFill" /> -->
                <u-text color="#646464" size="20rpx" :text="v.salesName"></u-text>
              </view>
            </view>
          </view>
          <u-loadmore :status="loadStatus" />
        </view>
      </scroll-view>
    </view>
    <!-- 新增按钮 -->
    <view class="fixed-btn center" @click="openAdd()">
      <u-icon name="plus" color="#fff" size="20"></u-icon>
    </view>
    <!-- 选择最后跟进日期 -->
    <uni-calendar ref="calendar" :insert="false" @confirm="pickDate" :clearDate="true" />
    <!-- 消息提示 -->
    <u-toast ref="uToast"></u-toast>
    <!-- 移入公海 -->
    <move-in-open-sea ref="moveCust" @fetchList="searchList()"></move-in-open-sea>
  </view>
</template>
<script>
  import customerApi from '../../api/customer'
  import to from 'await-to-js'
  import MoveInOpenSea from './components/moveInOpenSea'
  export default {
    name: 'omsIndex',
    components: { MoveInOpenSea },
    data() {
      return {
        custStatus: {
          10: '正常',
          20: '异常',
        },
        height: '',
        paddingTop: '',
        pageNum: 0,
        pageSize: 10,
        customerData: [], //客户列表
        customerDataTotal: 0, //列表元素数量
        loadStatus: '', //加载状态
        filterVisible: false, //筛选组件状态
        custName: '', //客户名称
        followUpDate: '', //最后跟进时间
        industryChecked: null, //选择的行业id
        industryOptions: [],
        // levelChecked: 0, //选择的级别id
        // levelOptions: [],
      }
    },
    created() {
      const navData = uni.getMenuButtonBoundingClientRect()
      this.height = navData.height + 'px'
      this.paddingTop = navData.top + 'px'
    },
    onShow() {
      this.getOptions()
      this.searchList()
    },
    methods: {
      getOptions() {
        Promise.all([this.getDicts('cust_idy')])
          .then(([industry]) => {
            this.industryOptions = industry.data.values || []
          })
          .catch((err) => console.log(err))
      },
      // 筛选下的单选
      radioClick(item, target) {
        this[target] = item.key
      },
      // 选择日期
      async pickDate(e) {
        this.followUpDate = e.fulldate
      },
      // 重置
      reset() {
        this.followUpDate = ''
        this.industryChecked = null
      },
      // 确认
      confirmFilter() {
        this.filterVisible = false
        this.searchList()
      },
      // 上拉滚动
      lower() {
        if (this.customerData.length < this.customerDataTotal && this.loadStatus != 'loading') {
          this.$u.throttle(this.getCustomerData(), 2000, false)
        }
      },
      // 查询列表
      searchList() {
        this.pageNum = 0
        this.getCustomerData(true)
      },
      async getCustomerData(reset) {
        this.loadStatus = 'loading'
        this.pageNum++
        let params = {
          custName: this.custName,
          followUpDate: this.followUpDate,
          custIndustry: this.industryChecked,
          isPublic: false,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
        const [err, res] = await to(customerApi.getList(params))
        if (err) {
          this.loadStatus = 'nomore'
          return
        }
        if (res && res.code == 200) {
          if (reset) {
            this.customerData = res.data.list || []
          } else {
            this.customerData = [...this.customerData, ...(res.data.list || [])]
          }
          this.customerDataTotal = res.data.total
          this.loadStatus = this.customerData.length == this.customerDataTotal ? 'nomore' : 'loadmore'
        } else {
          this.loadStatus = 'nomore'
        }
      },
      openFilter() {
        if (this.filterVisible) {
          this.reset()
          this.filterVisible = false
        } else {
          this.filterVisible = true
        }
      },
      // 移入公海
      moveInOpenSea(item) {
        this.openSeaObj.ids = [item.id]
        this.showMoveInModel = true
      },
      // 跳转到转移客户
      linkToTransfer(id) {
        uni.navigateTo({
          //保留当前页面，跳转到应用内的某个页面
          url: '/pages/customer/transfer?id=' + id,
        })
      },
      goBack() {
        uni.navigateBack({
          //关闭当前页面，返回上一页面或多级页面。
          delta: 1,
        })
      },
      openAdd() {
        uni.navigateTo({
          //保留当前页面，跳转到应用内的某个页面
          url: '/pages/customer/add',
        })
      },
      toDetails(v) {
        uni.navigateTo({
          //保留当前页面，跳转到应用内的某个页面
          url: '/pages/customer/details?id=' + v.id + '&type=private',
        })
      },
    },
  }
</script>
<style>
  page {
    background: #f2f3f5;
  }
</style>
<style lang="scss" scoped>
  .home {
    padding-top: 188rpx;

    .nav {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 284rpx;
      background: #3e7ef8;
      .title {
        position: relative;
        text-align: center;
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
        .back {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          left: 70rpx;
          display: flex;
        }
      }
    }

    .main {
      position: absolute;
      width: 100%;
      height: calc(100vh - 188rpx);
      background: #ffffff;
      box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
      border-radius: 31rpx 31rpx 0 0;
      padding: 0 32rpx;
      overflow: auto;
      padding-bottom: 64rpx;
      .query-wrap {
        padding-top: 20rpx;
        .search-container {
          display: flex;
          align-items: center;
          .search-input {
            flex: 1;
          }
          .search-btn {
            text-align: center;
            line-height: 60rpx;
            border-radius: 12rpx;
            width: 100rpx;
            height: 60rpx;
            font-size: 26rpx;
            margin: 0 0 0 12rpx;
            background: $u-primary;
            color: #ffffff;
          }
        }
      }
      .data-list {
        width: 100%;
        height: calc(100vh - 372rpx);
        overflow: auto;
        .data-item {
          background: rgba(242, 243, 245, 0.5);
          border-radius: 15rpx;
          padding: 28rpx 40rpx 28rpx 38rpx;
          margin-top: 32rpx;
          .customer-name {
            .name {
              flex: 1;
              color: #323232;
              font-weight: bold;
              font-size: 28rpx;
              margin-right: 12rpx;
            }
            .user-code {
              width: 180rpx;
              height: 32rpx;
              font-size: 24rpx;
              color: #323232;
              line-height: 32rpx;
            }
          }
          .customer-info {
            .info-left {
              .transfer-btn {
                margin-top: 20rpx;
                width: 150rpx;
              }
              .info-row {
                margin-top: 12rpx;
                .info-label {
                  color: #646464;
                  font-size: 24rpx;
                }
              }
            }
            .info-right {
              padding-top: 30rpx;
              .user-img {
                border-radius: 50%;
                width: 46rpx;
                height: 46rpx;
              }
            }
          }
        }
      }
    }

    .filter-popup {
      background: rgba(0, 0, 0, 0.8);
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      z-index: 1;
      .filter-wrap {
        width: 100%;
        padding: 20rpx;
        background: #ffffff;
        .filter-item {
          padding-bottom: 30rpx;
          .tit {
            font-size: 26rpx;
            color: #323232;
            font-weight: bold;
            padding-bottom: 20rpx;
          }
          .menu-list {
            display: flex;
            flex-wrap: wrap;
            .menu-item {
              margin-right: 40rpx;
              margin-bottom: 20rpx;
            }
          }
        }
      }
      .btn-box {
        width: 698rpx;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > view {
          width: 320rpx;
          height: 40px;
          border-radius: 40px;
          border: solid 1rpx #ec652b;
          align-items: center;
          justify-content: center;
          text-align: center;
          line-height: 40px;
        }
        .reset {
          color: #ec652b;
        }
        .submit {
          color: #fff;
          background-color: #ec652b;
        }
      }
    }
  }
</style>