MD_worker/pages/launchApplication/selectServiceProvider.vue

<template>
    <view class="search-box">
        <up-search placeholder="搜索关键词" v-model="keyword" height="35" @blur="onSearch" :clearabled="false"
            :showAction="false" />
        <view v-if="content.where.condition" class="clear" @click.stop="onSearch('')">
            <up-icon name="close-circle-fill" size="20" />
        </view>
    </view>
    <view style="height: 20rpx; " />
    <My_listbox ref="listBox" :empty="!list.length" @getlist="getList">
        <view class="item" hover-class="navigator-hover" v-for="item in list" :key="item.sys_enterpriseid"
            @click="selected(item)">
            <view class="content" >
                <view class="row" style="font-size: 30rpx;font-weight: bold;">
                    {{ item.enterprisename || ' --' }}
                </view>
                <view class="row" style="color: #276BF0;" @click.stop="callPhonenumber(item.phonenumber)">
                    <text class="label">
                        联系方式
                    </text>
                    {{ item.phonenumber || ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        服务商简称
                    </text>
                    {{ item.abbreviation || ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        服务区域
                    </text>
                    {{ item.salearea || ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        省市县
                    </text>
                    {{ item.province ? item.province + item.city + item.county : ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        地址
                    </text>
                    {{ item.address || ' --' }}
                </view>
                <view class="row">
                    <text class="label">
                        合作状态
                    </text>
                    {{ item.signingstate || ' --' }}
                </view>
            </view>
        </view>
        <view style="height: 30px;" />
    </My_listbox>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
const { $Http } = getCurrentInstance().proxy;
import { onLoad } from '@dcloudio/uni-app';

const keyword = ref('');
const listBox = ref(null);

const content = reactive({
    loading: false,
    "pageNumber": 1,
    "pageSize": 20,
    "where": {
        "condition": "",
        status: "1"
    }
});

function onSearch(e) {
    if (content.where.condition == e) return;
    content.where.condition = e;
    keyword.value = e;
    getList(true);
}
const list = ref([])

onLoad(() => {
    getList();
});

function getList(init = false) {
    if (content.loading) {
        listBox.value.refreshToComplete();
        listBox.value.setHeight();
        return
    };
    content.loading = true;
    if (init) content.pageNumber = 1;
    $Http.basic({
        "id": "20230427101304",
        content
    }).then(res => {
        content.loading = false;
        if (res.code != 1) return uni.showToast({
            title: res.msg,
            icon: 'none'
        });
        console.log("获取客户档案列表", res)
        listBox.value.refreshToComplete();
        listBox.value.setHeight();
        if (res.code == 1) {
            list.value = reactive(res.firstPage ? res.data : list.value.concat(res.data));
            content.pageTotal = res.pageTotal;
            content.pageNumber = res.pageNumber;
        } else {
            if (res.msg) uni.showToast({
                title: res.msg,
                icon: 'none'
            });
        }
    })
}

function callPhonenumber(item) {
    if (!item) return;
    uni.makePhoneCall({
        phoneNumber: item
    });
}

function selected(item) {
    $Http.onSelectServiceProvider && $Http.onSelectServiceProvider(item)
}
</script>

<style lang="scss" scoped>
.search-box {
    position: relative;
    padding: 20rpx;
    background: #fff;

    .clear {
        position: absolute;
        display: flex;
        align-items: center;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 80rpx;
        padding-left: 10rpx;
        height: 70rpx;
        z-index: 2;
    }
}


.item {
    position: relative;
    display: flex;
    width: 95%;
    box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 20rpx 30rpx;
    overflow: hidden;
    margin: 0 auto 20rpx;
    background: #fff;

    .content {
        margin-left: 20rpx;

        .row {
            display: flex;
            line-height: 32rpx;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-size: 26rpx;
            padding-bottom: 20rpx;

            .label {
                color: #666;
                flex-shrink: 0;
            }

            .label::after {
                content: '：';
            }
        }
    }
}
</style>