business_tms_program 0.0.0

package/src/pages/acceptance/list.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { installAcceptanceStatusEnum } from '@/dict/installtion'
+import { getInstalltionStatusOrderList } from '@/api/installtion'
+import { throttle } from 'lodash-es';
+import DeviceInfo from './DeviceInfo.vue';
+import Skeleton from '@/components/Skeleton.vue';
+import LoadingView from '@/components/Loading.vue';
+import Empty from '@/components/Empty.vue';
+defineOptions({
+  name: "orderList"
+});
+const acticveTab = ref(installAcceptanceStatusEnum.NO)
+const orderTabList = [
+  {
+    name: '安装待验收',
+    value: installAcceptanceStatusEnum.NO,
+  },
+  {
+    name: '安装已验收',
+    value: installAcceptanceStatusEnum.YES,
+  }
+]
+const state = reactive({
+  itemDatas: [],
+  current: 1,
+  size: 5,
+  loadMore: false,
+  hasMore: true,
+  screenHeight: uni.getSystemInfoSync().windowHeight,
+  triggerRatio: 0.3, // 设置触发比例为屏幕高度的30%
+  loadingTop: false, // 顶部下拉刷新
+  total: 0,
+  hasSearch: false, // 是否有搜索过
+});
+const completeState = reactive({
+  itemDatas: [],
+  current: 1,
+  size: 5,
+  loadMore: false,
+  screenHeight: uni.getSystemInfoSync().windowHeight,
+  triggerRatio: 0.3, // 设置触发比例为屏幕高度的30%
+  hasMore: true,
+  loadingTop: false, // 顶部下拉刷新
+  total: 0,
+  hasSearch: false, // 是否有搜索过
+});
+const handleTabChange = (value: number) => {
+  acticveTab.value = value
+}
+const loadData = async (page?: number) => {
+  if (state.loadMore) return;
+  state.loadMore = true;
+  try {
+    const { records, current, total } = await getInstalltionStatusOrderList({
+      size: state.size,
+      current: page || state.current,
+      status: installAcceptanceStatusEnum.NO,
+    });
+    const newData = records.map((item) => {
+      return { ...item, show: true };
+    });
+    if (page === 1) {
+      state.itemDatas = newData;
+    } else {
+      state.itemDatas = [...state.itemDatas,...newData];
+    }
+    state.current = current;
+    state.hasMore = records.length > 0;
+    state.total = total;
+    if (!state.hasSearch) {
+      state.hasSearch = true;
+    }
+  } catch (error) {
+    console.error('获取数据失败', error);
+  }
+  state.loadMore = false;
+}
+const loadCompleteData = async (page?: number) => {
+  if (completeState.loadMore) return;
+  completeState.loadMore = true;
+  try {
+    const { records, current, total } = await getInstalltionStatusOrderList({
+      size: completeState.size,
+      current: page || completeState.current,
+      status: installAcceptanceStatusEnum.YES,
+    });
+    const newData = records.map((item) => {
+      return { ...item, show: true };
+    });
+    if (page === 1) {
+      completeState.itemDatas = newData;
+    } else {
+      completeState.itemDatas = [...completeState.itemDatas, ...newData];
+    }
+    completeState.current = current;
+    completeState.hasMore = records.length > 0;
+    completeState.total = total;
+    if (!completeState.hasSearch) {
+      completeState.hasSearch = true;
+    }
+  } catch (error) {
+    console.error('获取数据失败', error);
+  }
+  completeState.loadMore = false;
+}
+// 滚动到底部加载更多
+const onScrollToLower = throttle(() => {
+    if (!state.loadMore && state.hasMore) {
+      state.current++;
+      nextTick(() => {
+        loadData(state.current);
+      })
+    }
+}, 500);
+const onCompleteScrollToLower = throttle(() => {
+  if (!completeState.loadMore && completeState.hasMore) {
+    completeState.current++;
+    nextTick(() => {
+      loadCompleteData(completeState.current);
+    })
+  }
+}, 500);
+// 跳转工单详情
+const toDetail = (item?: any) => {
+    uni.navigateTo({ url: `/pages/installtion/orderDetail?deviceId=${item.id}&workOrderCode=${item.workOrderCode}&type=toAcceptance` }) 
+}
+onMounted(async () => {
+  loadData(1);
+  loadCompleteData(1);
+  // uni.$on('orderList-updated', () => {
+  //   loadData(1); // 刷新数据
+  //   loadCompleteData(1); // 刷新数据
+  // });
+})
+onShow(() => {
+  loadData(1); // 刷新数据
+  loadCompleteData(1); // 刷新数据
+})
+</script>
+
+<template>
+  <view class="content">
+    <view class="header">
+      <view class="tabList">
+        <view v-for="item in orderTabList" :key="item.value" class="tabItem" @click="handleTabChange(item.value)"
+          :class="{ 'active': item.value === acticveTab }">
+          {{ `${item.name}(${item.value === installAcceptanceStatusEnum.NO ? state.total : completeState.total})` }}
+        </view>
+      </view>
+    </view>
+    <scroll-view v-if="acticveTab === installAcceptanceStatusEnum.NO" class="scroll-view" scroll-y style="height: 100vh;"
+      bounces show-scrollbar scroll-with-animation @scrolltolower="onScrollToLower"
+      :lower-threshold="`${state.screenHeight * state.triggerRatio}`">
+      <view class="skeleton-box" v-if="!state.hasSearch">
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+      </view>
+      <view class="scroll-box">
+        <view class="record-box" v-for="item in state.itemDatas" :key="item.id">
+          <DeviceInfo :data="item" @clickDevice="toDetail" />
+        </view>
+          <Empty v-if="state.itemDatas.length === 0 && state.hasSearch" />
+          <LoadingView v-if="state.loadMore" class="loading-indicator" :size="50"></LoadingView>
+          <view v-if="state.itemDatas.length > 0 && !state.hasMore" class="noMore">没有更多数据了</view>
+      </view>
+    </scroll-view>
+    <scroll-view v-else class="scroll-view" scroll-y style="height: 100vh;" bounces show-scrollbar scroll-with-animation
+      @scrolltolower="onCompleteScrollToLower"
+      :lower-threshold="`${completeState.screenHeight * completeState.triggerRatio}`">
+      <view class="skeleton-box" v-if="!completeState.hasSearch">
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+        <Skeleton class="skeleton-container"></Skeleton>
+      </view>
+      <view class="scroll-box">
+        <view class="record-box" v-for="item in completeState.itemDatas" :key="item.id">
+          <DeviceInfo :data="item" @clickDevice="toDetail" />
+        </view>
+          <Empty v-if="completeState.itemDatas.length === 0 && completeState.hasSearch" />
+          <LoadingView v-if="completeState.loadMore" class="loading-indicator" :size="50"></LoadingView>
+          <view v-if="completeState.itemDatas.length > 0 && !completeState.hasMore" class="noMore">没有更多数据了</view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<style scoped lang="less">
+.content {
+  background-color: #F5F5F5;
+  min-height: 100vh;
+}
+
+.header {
+  position: fixed;
+  width: 100%;
+  padding: 12rpx 32rpx;
+  background-color: #fff;
+  top: 0rpx;
+  left: 0;
+  z-index: 100;
+
+  .tabList {
+    display: flex;
+    border-radius: 16rpx;
+    border: 1rpx solid #1D6FE9; // 选中状态的边框颜色;
+    overflow: hidden;
+    font-size: 28rpx;
+    line-height: 40rpx;
+
+    .tabItem {
+      flex: 1; // 使两个tabItem平分宽度
+      text-align: center; // 文字居中
+      padding: 16rpx 0; // 添加一些内边距
+      border-bottom-color: #1D6FE9;
+      color: #1D6FE9; // 选中状态的文字颜色
+      padding: 12rpx 0;
+
+      &.active {
+        color: #fff;
+        background-color: #1D6FE9;
+      }
+    }
+  }
+}
+
+.scroll-box {
+  padding: 88rpx 32rpx 32rpx 32rpx;
+  box-sizing: border-box;
+}
+
+.record-box {
+  margin-top: 32rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 32rpx;
+position: relative;
+  .device-box {
+    padding: 16rpx 16rpx 24rpx 16rpx;
+    background-color: rgba(0, 0, 0, 0.05);
+
+    .deviceName {
+      margin-bottom: 16rpx;
+      font-size: 28rpx;
+      color: #000000;
+      line-height: 40rpx;
+    }
+
+    .deviceCode {
+      font-size: 28rpx;
+      color: rgba(0, 0, 0, 0.4);
+      line-height: 34px;
+    }
+
+    .addressInfo {
+      display: flex;
+    }
+
+    .address {
+      flex: 1;
+      width: 380rpx;
+      font-size: 28rpx;
+      color: #000000;
+      line-height: 40rpx;
+    }
+
+    .address-icon {
+      width: 48rpx;
+      height: 48rpx;
+      image-rendering: -webkit-optimize-contrast; /* 优化图片渲染 */
+      image-rendering: pixelated; /* 像素化渲染 */
+      transform: translateZ(0); /* 开启GPU加速 */
+    }
+  }
+}
+</style>

package/src/pages/afterSale/DeviceInfo.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { PLACEHOLDER } from '@/config/app'
+const props = defineProps({
+    data: {
+        type: Object,
+        default: {}
+    },
+})
+const toDetail = () => {
+    if (!props.data.id) {
+        return
+    }
+    uni.navigateTo({ url: `/pages/afterSale/orderDetail?orderId=${props.data.id}`})
+}
+const chooseAddress = () => {
+    const { latitude, longitude } = props.data;
+   uni.openLocation({
+        latitude: Number(latitude),
+        longitude: Number(longitude),
+        success: (res) => {
+            console.log(res);
+        },
+        fail: (err) => {
+            uni.showToast({ title: '获取位置失败', icon: 'error' })
+        }
+    }) 
+}
+</script>
+<template>
+    <view>
+    <view @click="toDetail">
+    <view class="urgency" v-if="data.isUrgency">紧急</view>
+     <view class="customerName">{{ data.customerName || PLACEHOLDER }}</view>
+        <view class="orderCode">{{ data.orderCode || PLACEHOLDER }}</view>
+        <view class="contact">
+          <view class="name">联系人姓名：{{ data.contactsName || PLACEHOLDER }}</view>
+          <view class="mobile">联系电话：{{ data.contactsMobile || PLACEHOLDER }}</view>
+        </view>
+        </view>
+    <view class="device-box" @click.stop ="chooseAddress">
+        <view class="deviceName">{{ data.deviceName || PLACEHOLDER }}</view>
+        <view class="deviceCode">{{ data.deviceCode || PLACEHOLDER }}</view>
+        <view class="addressInfo" >
+            设备地址：
+            <view class="address">{{ data.address || data.deviceAddress || PLACEHOLDER }}</view>
+            <image class="address-icon" src="/static/img/navigation.png" />
+        </view>
+    </view>
+    </view>
+</template>
+
+<style scoped>
+    .urgency {
+        position: absolute;
+        right: 32rpx;
+        top: 32rpx;
+        display: block;
+        padding: 6rpx 16rpx 8rpx 16rpx;
+        font-size: 24rpx;
+        color: #E34D59;
+        line-height: 34rpx;
+        background: rgba(227,77,89,0.1);
+        border-radius: 8rpx;
+        border: 1rpx solid #E34D59;
+    }
+  .customerName {
+    font-size: 32rpx;
+    color: #000000;
+    line-height: 48rpx;
+    margin-bottom: 16rpx;
+    font-weight: 600;
+  }
+
+  .orderCode {
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.4);
+    line-height: 34rpx;
+    margin-bottom: 16rpx;
+  }
+
+  .contact {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 32rpx;
+    font-size: 28rpx;
+    color: #000000;
+    line-height: 40rpx;
+  }
+.device-box {
+    padding: 24rpx 16rpx 24rpx 24rpx;
+    background-color: #F3F8FE;
+    border-radius: 8rpx;
+
+    .deviceName {
+        font-size: 28rpx;
+        color: #000000;
+        line-height: 40rpx;
+        font-weight: 500;
+    }
+
+    .deviceCode {
+        font-size: 28rpx;
+        color: rgba(0, 0, 0, 0.4);
+        line-height: 34px;
+    }
+
+    .addressInfo {
+        display: flex;
+        font-size: 28rpx;
+    }
+
+    .address {
+        flex: 1;
+        width: 380rpx;
+        font-size: 28rpx;
+        color: #000000;
+        line-height: 40rpx;
+    }
+
+    .address-icon {
+        width: 48rpx;
+        height: 48rpx;
+                image-rendering: -webkit-optimize-contrast; /* 优化图片渲染 */
+                image-rendering: pixelated; /* 像素化渲染 */
+                transform: translateZ(0); /* 开启GPU加速 */
+    }
+}
+</style>