usky-web-mobile/src/pages/common/customManage/index.vue

<template>
  <oa-scroll
    class="scroll-height"
    :pageSize="pageSize"
    :total="total"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
  >
    <template #default>
      <view class="customManage-container" :data-theme="'theme-' + proxy.$settingStore.themeColor.name">
        <view class="flex bg-white padding-10" style="position: relative">
          <u--input
            v-model="projectName"
            placeholder="搜索"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            customStyle="height:30px;background-color:#f5f6fa;"
            @confirm="selectListApi()"
            clearable
          ></u--input>
          <view class="margin-l-10" style="margin-top: auto; margin-bottom: auto" @click="dropdownShow = !dropdownShow">筛选</view>
        </view>

        <view class="dropdown" :class="dropdownShow ? 'show' : 'none'">
          <view class="padding-10">
            <u-radio-group v-model="radioValue" placement="column" iconPlacement="right" @change="radioChange">
              <u-radio v-for="ra in radioList" :key="ra" :activeColor="proxy.$settingStore.themeColor.color" :label="ra.label" :name="ra.value"></u-radio>
            </u-radio-group>
          </view>
        </view>
        <view class="dropdown" :class="dropdownShow ? 'mask' : 'none'" @click="dropdownShow = !dropdownShow"> </view>

        <view class="container-area menu-list margin-lr-0" v-for="data in dataList" :key="data">
          <view class="list-cell" style="color: #666666; line-height: 30px">
            <view class="menu-item-box" style="font-size: 16px; font-weight: 600">
              <view> {{ data.projectName }} </view>
            </view>
            <view class="menu-item-box" style="font-size: 13px">
              <view style="width: 50%"> 项目编号：{{ data.projectId }} </view>
              <view style="width: 50%"> 到期时间：{{ data.expireTime ? data.expireTime.split("T")[0] : "" }} </view>
            </view>
            <view class="menu-item-box" style="font-size: 13px">
              <view style="width: 50%"> 客户负责人：{{ data.customPerson }} </view>
              <view style="width: 50%"> 维保费：￥{{ data.maintainAmount }} </view>
            </view>
            <view class="menu-item-box" style="font-size: 13px">
              <view style="width: 50%; display: flex">
                客户电话：{{ data.phone }}
                <view class="iconfont ucicon-a-copy menu-icon" style="font-size: 14px; color: #909399; margin-left: 5px" @click="copy(data.phone)"> </view>
              </view>
              <view style="width: 50%"> 状态：{{ data.maintainStatus == 1 ? "使用中" : "已到期" }} </view>
            </view>
            <view class="menu-item-box" style="font-size: 13px">
              <view> 客户地址：{{ data.customAddress }} </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </oa-scroll>
</template>

<script setup>
import { onLoad, onShow, onReady, onHide, onLaunch, onNavigationBarButtonTap, onPageScroll } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance, toRefs, inject } from "vue";
import { publicStores, useStores } from "@/store/modules/index";

import { crmCustomInfo } from "@/api/common/customManage.js";

const { proxy } = getCurrentInstance();

const dataList = ref([]);
const pageSize = ref(20);
const current = ref(1);
const total = ref(0);

const data = reactive({
  radioList: [
    {
      label: "全部",
      value: "",
    },
    {
      label: "7天",
      value: 7,
    },
    {
      label: "30天",
      value: 30,
    },
    {
      label: "90天",
      value: 90,
    },
  ],
  radioValue: "",
  startTime: "",
  endTime: "",
  projectName: "",
  dropdownShow: false,
});

const { radioList, radioValue, startTime, endTime, projectName, dropdownShow } = toRefs(data);

/**
 * @初始化
 */
function init() {
  selectListApi();
}

/**
 * @列表查询
 * @api接口调用
 */
function selectListApi() {
  crmCustomInfo({
    projectName: projectName.value,
    current: current.value,
    size: pageSize.value,
    endTime: endTime.value,
    startTime: startTime.value,
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList.value = requset.data.rows;
      total.value = requset.data.total;
    }
  });
}

/**
 * @复制粘贴板
 */
function copy(value) {
  // 触发方法
  proxy.$common.uniCopy({
    content: value,
    success: (res) => {
      uni.showToast({
        title: res,
        icon: "none",
      });
    },
    error: (e) => {
      uni.showToast({
        title: e,
        icon: "none",
        duration: 3000,
      });
    },
  });
}

/**
 * @单选change事件
 */
function radioChange(e) {
  radioValue.value = e;
  if (e) {
    let getDays = proxy.$common.getDays(e);
    startTime.value = getDays.startTime;
    endTime.value = getDays.endTime;
  }
  selectListApi();
}

/**
 * @scrollView加载数据
 */
function load() {
  pageSize.value += 10;
  selectListApi();
}

/**
 * @scrollView刷新数据
 */
function refresh() {
  radioValue.value = "";
  startTime.value = "";
  endTime.value = "";
  pageSize.value = 20;
  total.value = 0;
  selectListApi();
}

onLoad((options) => {
  init();
});

onReady(() => {});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
  }
});
</script>

<style lang="scss" scoped>
:deep(.uni-page-head__title) {
  opacity: 1 !important;
}

.customManage-container {
  .container-area {
  }

  .dropdown {
    position: absolute;
    width: 100%;
    background-color: #fff;
    max-height: 0;
    overflow: hidden;
    z-index: 90;

    &.show {
      animation: dropdown 3s ease forwards;
    }

    &.mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: transparent;
      max-height: 100%;
      z-index: 50;
    }
  }

  @keyframes dropdown {
    from {
      max-height: 0;
    }
    to {
      max-height: 100%;
    }
  }
}
</style>