feat: 添加商务审批首页多选以及高度下滑固定

pages/work/BusinessApproval/ListItem.vue

@@ -8,6 +8,20 @@
         style="margin: 0;margin-bottom: 20px"
         @click="handleDetail(item)"
     >
+        <template v-slot:title>
+            <view
+                style="display: flex;align-items: center;font-size: 15px;padding: 10px 0;border-bottom: 1px #EBEEF5 solid;">
+                <view style="flex: 1;display: flex;align-items: center;gap:12px">
+                    <table-checkbox :cell-data="item" @checkboxSelected="handleCheck"/>
+                    <text>{{ index + 1 }}</text>
+                    <text>{{ item.usernames }}</text>
+                </view>
+                <view>
+                    <text style="font-size:12px; color:#909399;">{{ item.contractcode }}</text>
+                </view>
+            </view>
+        </template>
+
         <view class="context">
             <view class="label">
                 <text>货主:</text>
@@ -25,24 +39,27 @@
                 <text>订单金额:</text>
                 <text>{{ item.contractmoney.toFixed(2) }}</text>
             </view>
-            <view class="label">
-                <text>区域:</text>
-                <text>{{ item.areaName }}</text>
-            </view>
+            <!--            <view class="label">-->
+            <!--                <text>区域:</text>-->
+            <!--                <text>{{ item.areaName }}</text>-->
+            <!--            </view>-->
         </view>
 
     </uni-card>
 </template>
 
 <script setup>
-import {defineOptions, defineProps, getCurrentInstance} from 'vue'
+import {defineEmits, defineOptions, defineProps, getCurrentInstance} from 'vue'
 import UniCard from "../../../uni_modules/uni-card/components/uni-card/uni-card.vue";
 import {formatDate} from "../../../uni_modules/uni-dateformat/components/uni-dateformat/date-format";
+import TableCheckbox from "../../../uni_modules/uni-table/components/uni-tr/table-checkbox.vue";
 
 defineOptions({
     name: 'ListItem'
 })
 
+const emit = defineEmits(['checkboxSelected'])
+
 const {proxy} = getCurrentInstance()
 
 const props = defineProps(['items'])
@@ -50,7 +67,17 @@ const props = defineProps(['items'])
 const handleDetail = (raw) => {
     proxy.$tab.navigateTo(`/pages/work/BusinessApproval/OrderDetail?id=${raw.saleid}`)
 }
+
+const handleCheck = (e) => {
+    emit('checkboxSelected', e)
+}
 </script>
 
 <style lang="scss" scoped>
+:deep() {
+    .uni-table-checkbox {
+        display: flex;
+        justify-content: flex-start;
+    }
+}
 </style>

pages/work/BusinessApproval/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <view class="container">
+    <view ref="targetRef" class="container">
         <MBCard>
             <uni-forms ref="baseForm" :modelValue="queryParams">
                 <uni-forms-item label="支付方式">
@@ -13,7 +13,37 @@
 
         <MBLoading v-if="loading"/>
         <view v-else>
-            <ListItem v-if="tableData.length > 0" :items="tableData"/>
+            <MBCard v-if="selected.length>0" :style="{
+                    position: 'fixed',
+                    zIndex : 10,
+                    width:'100%',
+                    left: 0,
+                    bottom: 0,
+                    height:'110px'
+                }
+            ">
+                <view class="context">
+                    <view class="label">
+                        <text>已选订单数量:</text>
+                        <text>{{ selected.length }}</text>
+                    </view>
+                    <view class="label">
+                        <text>已选订单总金额:</text>
+                        <text>{{ totalMoney.toFixed(2) }}</text>
+                    </view>
+                </view>
+<!--                <view :style="{-->
+<!--                    display:'flex',-->
+<!--                    marginTop:'15px',-->
+<!--                    justifyContent:'space-between',-->
+<!--                    alignItems:'center'-->
+
+<!--                }">-->
+<!--                    <button class="mini-btn" size="mini" type="success" @click="handleBack">回退</button>-->
+<!--                    <button class="mini-btn" size="mini" type="primary" @click="handleSubmit">审核</button>-->
+<!--                </view>-->
+            </MBCard>
+            <ListItem v-if="tableData.length > 0" :items="tableData" @checkboxSelected="handleSelect"/>
             <uni-load-more
                 v-else
                 :contentText="{
@@ -34,7 +64,7 @@
 
 <script setup>
 
-import {getCurrentInstance, onMounted, ref} from "vue"
+import {getCurrentInstance, onMounted, onUnmounted, ref, watch} from "vue"
 import UniForms from "../../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
 import UniFormsItem from "../../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
 import DictSelect from "../../../components/DictSelect/DictSelect.vue";
@@ -70,9 +100,51 @@ const handleQuery = async () => {
     loading.value = false
 }
 
+const selected = ref([])
+const totalMoney = ref(0)
+const handleSelect = (payload) => {
+    const {checked, data} = payload
+    const id = data.saleid
+
+    if (checked) {
+        if (!selected.value.includes(id)) {
+            selected.value.push(id)
+        }
+    } else {
+        selected.value = selected.value.filter(item => item !== id)
+    }
+
+    totalMoney.value = tableData.value.filter(item => selected.value.includes(item.saleid))
+            .map(i => i.contractmoney)
+            .reduce((a, b) => a + b, 0)
+        ?? 0
+
+}
+
+const targetRef = ref(null)
+const isFixed = ref(false)
+
+const handleScroll = () => {
+    if (!targetRef.value) return
+
+    const rect = targetRef.value.$el
+        ? targetRef.value.$el.getBoundingClientRect()
+        : targetRef.value.getBoundingClientRect()
+
+    isFixed.value = rect.top <= -140
+}
+
 onMounted(async () => {
     await handleQuery()
 })
 
+watch(targetRef, (el) => {
+    if (!el) return
+    window.addEventListener('scroll', handleScroll)
+})
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+})
 </script>