物业详情数据渲染

Lou

2023-12-11 5b42cbce101b021c518e003049353f007f1cdb77

物业详情数据渲染

 api/tenement/tenement.js

New file
@@ -0,0 +1,12 @@
import http from '@/http/api.js'

//获取物业详情
export const getDetail = (params) => {
    return http.request({
        url: 'blade-propertyCompany/propertyCompany/getDetail',
        method: 'GET',
        params: {
            ...params
        }
    })
}

 pages/home/index.vue

@@ -21,13 +21,13 @@
                </u-grid>



                <view class="section flex j-c-s-a a-i-c mt-40" v-if="isShowContact && curSelectSite.addressType == 1">

                    <view class="section-item" v-for="(i,k) in contactList" :key="k" v-if="i.name" >

                    <view class="section-item" v-for="(i,k) in contactList" :key="k" v-if="i.name">

                        <image class="section-item-bg" :src="i.bgImg" mode="aspectFill"></image>

                        <view class="item-box">

                            <view class="f-28">{{i.title}}</view>

                            <view class="flex j-c-s-b">

                                <text class="f-22">{{i.name}}</text>

                                <u-icon :name="i.icon" @click="callPhone(i.phone)"></u-icon>

                                <u-icon :name="i.icon" @click.stop="callPhone(i.phone)"></u-icon>

                            </view>

                        </view>

                    </view>

@@ -384,17 +384,20 @@
                    if (data.wg) {

                        this.contactList[1].name = data.wg.name;

                        this.contactList[1].phone = data.wg.phone

                        this.contactList[1].path = ""

                        this.contactList[1].path = "";

                        this.contactList[1].id = data.wg.code;

                    }

                    if (data.wy) {

                        this.contactList[0].name = data.wy.name;

                        this.contactList[0].phone = data.wy.phone;

                        this.contactList[0].path = "/subPackage/grid/tenement"

                        this.contactList[0].path = "/subPackage/grid/tenement";

                        this.contactList[0].id = data.wy.code;

                    }

                    if (data.ga) {

                        this.contactList[2].name = data.ga.name;

                        this.contactList[2].phone = data.ga.phone;

                        this.contactList[2].path = ""

                        this.contactList[2].path = "";

                        this.contactList[2].id = data.ga.code;

                    }

                })

            },


 subPackage/grid/tenement.vue

@@ -1,12 +1,12 @@
<template>
    <view class="container">
        <view class="">
            <u-avatar size="78"></u-avatar>
            <view class="flex f-d-c">
                <text class="f-30 fw"></text>
                <view class="">
                    <text class="c-99 f-26"></text>
                    <view class="f-22">
        <view class="hander flex ">
            <u-avatar size="70"></u-avatar>
            <view class="flex f-d-c ml-20">
                <text class="f-30 fw mb-30">{{detailInfo.name}}</text>
                <view class="flex a-i-c">
                    <text class="c-99 f-28">{{detailInfo.principalPhone}}</text>
                    <view class="call-tag f-22 c-main ml-20"  @click="callPhone(detailInfo.principalPhone)">
                        拨打电话
                    </view>
                </view>
@@ -14,32 +14,32 @@
        </view>

        <view class="mb-30">
            <caption-row text="物业简介" />
            <view class="intro bgc-ff">
            <caption-row title="物业简介" />
            <view class="intro bgc-ff mt-20">
                <u-read-more ref="uReadMore">
                    <rich-text :nodes="content"></rich-text>
                    <rich-text :nodes="detailInfo.remark"></rich-text>
                </u-read-more>
            </view>
        </view>
        <view class="mb-30">
            <caption-row text="人员信息" />
            <view class="person-list bgc-ff">
                <view class="person-list flex j-c-s-b a-i-c">
                    <view class="flex">
                        <u-avatar size="50"></u-avatar>
                        <text class="ml-10 mr-10"></text>
            <caption-row title="人员信息" />
            <view class="person-list bgc-ff mt-20"  >
                <view class="person-list-item flex j-c-s-b a-i-c"   v-for="(item,index)  in detailInfo.districtUserVOS">
                    <view class="flex a-i-c">
                        <u-avatar size="40"></u-avatar>
                        <text class="ml-10 mr-10">{{item.name}}</text>
                        <text class="f-26 c-99"></text>
                    </view>
                    <view class="flex a-i-c">
                        <u-icon   name="phone-fill"></u-icon>
                        <text class="f-26 c-99"></text>
                    <view class="flex a-i-c"  v-if="item.phone">
                        <u-icon name="phone-fill"   color="#017BFC"></u-icon>
                        <text class="f-26 c-99"  @click="callPhone(item.phone)">{{item.phone}}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="">
            <caption-row text="留言" />
            <view class="comment-list bgc-ff">
            <caption-row title="留言" />
            <view class="comment-list bgc-ff mt-20">
                <view class="comment-item flex " v-for="(item,index) in commentList" :key="index">
                    <u-avatar size="45" src="/static/icon/user-01.png"></u-avatar>
                    <view class="comment-item-content">
@@ -54,7 +54,7 @@
                </view>
            </view>
        </view>
		


    </view>

@@ -63,16 +63,41 @@

<script>
    import captionRow from "@/components/caption/caption.vue"
    import {
        getDetail
    } from "@/api/tenement/tenement.js"
    export default {
        components: {
            captionRow
        },
        data() {
            return {
                commentList:[]
                commentList: [],
                detailInfo: {}
            }
        },
        methods:{

        onLoad(option) {
            this.getDetailInfo(option.id)
        },

        methods: {

            getDetailInfo(id) {
                getDetail({
                    id
                }).then(res => {
                    console.log(res)
                    this.detailInfo = res.data;
                })
            },
			
            callPhone(phone){
                uni.makePhoneCall({
                    phoneNumber:phone
                })
            },
			
            navToComment() {
                uni.navigateTo({
                    url: `comment?id=${this.params.id}`
@@ -90,33 +115,46 @@
    .container {
        padding: 0 30rpx;
    }
    .intro{
        border-radius: 10rpx;
        padding:10rpx;
    }
    .person-list{
        padding:0 10rpx;
        border-radius: 10rpx;
        .person-list-item{
            padding:20rpx 0;
            border-bottom:1px solid #f5f5f5;
    .hander{
        padding:30rpx 0;
        .call-tag{
            padding:3rpx 8rpx;
            background-color: #017BFC;
            color: rgb(236,244,255);
            border-radius: 20rpx;
        }
    }

    .intro {
        border-radius: 10rpx;
        padding: 10rpx;
    }

    .person-list {
        padding: 0 10rpx;
        border-radius: 10rpx;
         
        .person-list-item {
            padding: 20rpx 0;
            border-bottom: 1px solid #f5f5f5;
        }
    }

    .comment-list {
        width: 100%;
        padding-top: 20rpx;
	

        .comment-item {
            width: 100%;
            padding: 20rpx 0;
        }
	

        .comment-item-content {
            flex: 1;
            margin-left: 20rpx;
        }
    }
	

    .footer {
        width: 100%;
        padding: 20rpx 30rpx;

 subPackage/workbench/views/rental.vue

@@ -206,7 +206,9 @@
        methods: {

            

            showStatus(status){

                for(let i of this.tabsList){

                let data = this.tabsList;

                // data.splice(0,1);	
                for(let i of data){

                    if(i.value == status){

                        return i.name

                    }