Otsuka-APP/pages/work/BusinessApproval/ListItem.vue

<template>
    <uni-card
        v-for="(item,index) in items"
        :key="item.saleid"
        :class="index % 2 === 0 ? 'card-even' : 'card-odd'"
        :extra="item.contractcode"
        :title="`${index+1}、${item.usernames}`"
        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>
                <text>{{ item.companyName }}</text>
            </view>
            <view class="label">
                <text>状态:</text>
                <text>{{ item.stateText }}</text>
            </view>
            <view class="label">
                <text>制单日期:</text>
                <text>{{ formatDate(item.adddate) }}</text>
            </view>
            <view class="label">
                <text>订单金额:</text>
                <text>{{ item.contractmoney.toFixed(2) }}</text>
            </view>
            <!--            <view class="label">-->
            <!--                <text>区域:</text>-->
            <!--                <text>{{ item.areaName }}</text>-->
            <!--            </view>-->
        </view>

    </uni-card>
</template>

<script setup>
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'])

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>