usky-web-mobile/src/pages/business/fireIot/customManage/index.vue

<template>
  <oa-scroll
    customClass="customManage-container scroll-height"
    :pageSize="pageSize"
    :total="total"
    :refresherLoad="true"
    :refresherEnabled="true"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    @load="load"
    @refresh="refresh"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <view class="search-area flex bg-white p10">
        <u--input
          style="width: 100%"
          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="search-area-buttom ml10" @click="dropdownShow = !dropdownShow">筛选</view>
      </view>

      <oa-dropdown :dropdownShow="dropdownShow" :closeOnClickOverlay="true" @close="dropdownShow = false">
        <template #content>
          <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>
        </template>
      </oa-dropdown>

      <view class="content-area menu-list mlr0" v-for="data in dataList" :key="data">
        <view class="list-cell" style="color: #666666; line-height: 30px">
          <view class="content-area-top menu-item">
            <view> {{ data.projectName }} </view>
          </view>
          <view class="content-area-row_wrap menu-item">
            <view class="content-area-row_wrap-view"> 项目编号：{{ data.projectId }} </view>
            <view class="content-area-row_wrap-view"> 到期时间：{{ data.expireTime ? data.expireTime.split("T")[0] : "" }} </view>
            <view class="content-area-row_wrap-view"> 客户负责人：{{ data.customPerson }} </view>
            <view class="content-area-row_wrap-view">
              维保费：<span style="color: red">￥{{ data.maintainAmount }}</span>
            </view>
            <view class="content-area-row_wrap-view">
              <view style="margin-right: 5px">客户电话：{{ data.phone }}</view>
              <view class="iconfont oaIcon-copy menu-item-icon" @click="copy(data.phone)"> </view>
              <view class="iconfont oaIcon-dial menu-item-icon" @click="proxy.$common.makePhoneCall(data.phone)"> </view>
            </view>
            <view class="content-area-row_wrap-view">
              <view>状态：</view>
              <view :style="`color: ${data.maintainStatus == 1 ? '#16bf00' : 'red'} `"> {{ data.maintainStatus == 1 ? "使用中" : "已到期" }}</view>
            </view>
            <view class="content-area-row_wrap-view"> 客户地址： {{ data.customAddress }} </view>
            <view class="content-area-row_wrap-view">销售负责人：{{ data.salePerson }}</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 { crmCustomInfo } from "@/api/business/fireIot/customManage.js";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
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: "30天内到期", value: 30 },
    { label: "60天内到期", value: 60 },
    { label: "90天内到期", value: 90 },
  ],
  radioValue: "",
  projectName: "",
  dropdownShow: false,
});

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

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

/**
 * @列表查询
 * @api接口调用
 */
function selectListApi() {
  crmCustomInfo({
    projectName: projectName.value,
    current: current.value,
    size: pageSize.value,
    endTime: radioValue.value ? proxy.$time.getDays(-radioValue.value)[0] + " 00:00:00" : "",
    startTime: radioValue.value ? proxy.$time.getDays(-radioValue.value)[1] + " 00:00:00" : "",
  }).then((requset) => {
    if (requset.status === "SUCCESS") {
      dataList.value = requset.data.records;
      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;
  selectListApi();
}

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

/**
 * @scrollView刷新数据
 */
function refresh() {
  radioValue.value = "";
  pageSize.value = 20;
  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 {
  .search-area {
    position: relative;

    &-buttom {
      margin-top: auto;
      margin-bottom: auto;
      white-space: nowrap;
    }
  }

  .content-area {
    &-top {
      font-size: 16px;
      font-weight: 600;
      color: #000000;
    }

    &-row_wrap {
      font-size: 13px;
      flex-flow: row wrap;

      &-view {
        display: flex;
        min-width: 50%;
        white-space: nowrap;
        > .iconfont {
          font-size: 16px;
          color: #909399;
          margin-left: 5px;
        }
      }
    }
  }
}
</style>