shangfutong-ui/jeepay-ui-uapp-agent/pageWork/developerManagement/developerSearch.vue

<template>
  <view>
    <view class="search">
      <JeepaySearch
        ref="search"
        v-model:value="data.queryNameOrPhone"
        @searchHandle="searchHandle"
        :placeholder="data.placeholder"
        @focusHandle="focusHandle"
        :isFocus="data.isFocus"
      >
      </JeepaySearch>
    </view>
    <view class="list">
      <view
        class="list-item"
        v-for="(item, index) in useDataResult.dataList"
        @click="toDevDetail(item.sysUserId)"
        :key="index"
      >
        <view class="item-left">
          <view class="avatar">
            <image :src="item.avatarUrl" mode=""></image>
          </view>
          <view class="devinfo">
            <text style="font-weight: bold; font-size: 27rpx; color: #000">{{ item.realname }}</text>
            <text>{{ item.telphone }}</text>
          </view>
        </view>
        <view class="item-right">
          <view class="dealinfo">
            <text>拓展商户数：{{ item.mchCount }}</text>
            <text
              >商户交易额：￥{{
                typeof item.orderAmount === "undefined" ? "0.00" : (item.orderAmount / 100).toFixed(2)
              }}</text
            >
          </view>
          <view class="icon">
            <image src="../../static/indexImg/up.svg" mode=""></image>
          </view>
        </view>
      </view>
    </view>
    <jeepayListNull :list="useDataResult.dataList"></jeepayListNull>
  </view>
</template>

<script setup>
import JeepaySearch from "@/components/jeepaySearch/jeepaySearch.vue"
import jeepayListNull from "@/components/jeepayListNull/jeepayListNull.vue"
import { reactive, watch, ref } from "vue"
import { onLoad, onShow, onBackPress } from "@dcloudio/uni-app"
import { $getDev } from "@/http/apiManager.js"
import useGetList from "@/hooks/useGetList.js"
const { useDataResult, getList } = useGetList($getDev, undefined, {}, false)
const data = reactive({
  queryNameOrPhone: "",
  placeholder: "搜索拓展员姓名、手机号…",
  isA: false, //动画
  isPlus: false, //添加键的动画
  isFocus: false, //聚焦
  flag: false,
  startSearch: false,
})
onLoad(() => {
  data.isFocus = false // 每次都要初始化 focus 属性
  setTimeout(() => {
    data.isFocus = true
  }, 0)
  uni.hideTabBar()
})
// watch(() => data, (newValue, oldValue) => {
//   //监听这个数组，要是没内容就重新请求列表

// 	  if(newValue.flag){
// 		  if(newValue.queryNameOrPhone === ''){
// 				// getList({ queryNameOrPhone: newValue.queryNameOrPhone,loginType:'APP',userType:3 })
// 			}
// 	  }
//   }, {deep: true})
const searchHandle = () => {
  data.flag = true
  data.startSearch = true
  getList({
    queryNameOrPhone: data.queryNameOrPhone,
    loginType: "APP",
    userType: 3,
  })
}
const toDevDetail = (sysUserId) => {
  uni.navigateTo({
    url: "./developerDetail?sysUserId=" + sysUserId,
  })
}
const search = ref()
onBackPress(() => {
  if (data.startSearch || search.value.backPressHandel()) {
    if (data.queryNameOrPhone !== "" && data.startSearch === true) {
      // getList({ queryNameOrPhone: '',
      // 	loginType:'APP',
      // 	userType:3 })
    }
    data.startSearch = false
    data.queryNameOrPhone = ""
    return true
  } else {
    return false
  }
})
</script>
<style>
page {
  background-color: #f5f6fc;
}
</style>
<style lang="less" scoped>
.search {
  height: 93rpx;
}
.list-item {
  height: 138rpx;
  width: 100%;
  background-color: #fff;

  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f5f6fc;
  .item-left {
    box-sizing: border-box;
    height: 100%;
    width: 40%;
    //background-color: beige;

    padding: 33rpx 0 33rpx 30rpx;

    display: flex;
    justify-content: space-between;
    align-items: center;
    .avatar {
      height: 72rpx;
      width: 72rpx;
      //background-color: #345;
      image {
        height: 100%;
        width: 100%;
      }
    }
    .devinfo {
      height: 72rpx;
      width: 172rpx;
      //	background-color: aqua;

      display: flex;
      flex-direction: column;
      justify-content: space-between;

      font-weight: Medium;
      font-size: 22rpx;
      color: #8d95a6;
    }
  }
  .item-right {
    box-sizing: border-box;
    height: 100%;
    width: 45%;
    //background-color: #345;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 30rpx;
    .dealinfo {
      height: 72rpx;
      width: 292rpx;
      //background-color: #8d95a6;

      margin-right: 20rpx;

      font-weight: Medium;
      font-size: 22rpx;
      color: #8d95a6;

      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
    }
    .icon {
      height: 20rpx;
      width: 20rpx;
      //background-color: #5500ff;
      margin-bottom: 30rpx;
      //margin-left: 20rpx;
      image {
        height: 100%;
        width: 100%;
        transform: rotate(90deg);
      }
    }
  }
}
</style>