jje_uniapp/orderPages/serviceObject/index.vue

<template>
    <view class="page" >
        <view v-for="(item,index) in serviceObjectList" @click="chooseServiceObject(item)" class="h-item-row">
            <view class="h-img">
                <image :src="item.facePhotoUrl || '/static/logo.png'" mode="aspectFill" @click.stop="magnify(item.facePhotoUrl)"></image>
            </view>
            <view class="h-item-content">
                <view class="h-title">
                    <view class="name">
                        <text>{{item.nickName || '未填写'}}</text>
                    </view>
                </view>
                <view class="h-desc">
                    <text>关系：{{item.blood}}</text>
                </view>
                <view class="h-content">
                    <view class="h-text">
                        备注：<text v-if="item.remark">{{item.remark}}</text>
                        <text v-else>无</text>
                    </view>
                </view>
            </view>
            <view v-if="item.haveEquityCard" class="flex-col justify-center">
                <text class="b">88卡</text>
            </view>
        </view>

        <uni-popup ref="popup">
            <view class="magnifyUrlView">
                <image :src="magnifyUrl" mode="widthFix"></image>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                magnifyUrl:'',
                serviceObjectList: [],
                reqParm: {
                    auth: true
                },
            }
        },
        onLoad(query){
            // 查询服务对象列表
            this.listServiceObject();
        },

        methods: {

            magnify(url){
                if (!url){
                    return
                }
                this.magnifyUrl = url
                this.$refs.popup.open()
            },
            // 查询服务对接信息列表
            listServiceObject(){
                this.$api.listServiceObject(this.reqParm).then((res)=>{
                    console.log('++++++++++listServiceObject+++++++++++',res)
                    this.getImgUrlByOssId(res.data.data);
                })
            },
            // 获取图片
             getImgUrlByOssId(data){
                for (let i = 0; i < data.length; i++) {
                    const item = data[i];
                    if (item.facePhoto){
                        this.$api.getImgUrlByOssId({ossId:item.facePhoto}).then(res=>{
                            console.log('+++++++++++++getImgUrlByOssId+++++++++++++++',res)
                            item.facePhotoUrl= res.data.data[0].url.replace(/^http:/, "https:")
                            this.$set(data,i,item)
                        })
                    }
                }
                this.serviceObjectList = data
            },

            // 选择服务老师
            chooseServiceObject(item){
                uni.navigateBack({
                    delta: 1,
                    success: function(res) {
                        uni.$emit('selectedServiceObject', item);
                    }
                });
            }

        },
    };
</script>

<style scoped lang="scss">
    @import '/common/css/common.css';
    .page{
        background: #F7F7F7;
    }
    .magnifyUrlView{
        border-radius: 20rpx;
        overflow: hidden;
    }
    .h-item-row{
        display: flex;
        font-family: PingFangSC-Medium, PingFang SC;
        margin: 12px;
        background: #fff;
        padding: 12px;
        .h-img{
            margin-right: 8px;
            display: flex;
            align-items: center;
            image{
                height: 80px;
                width: 80px;
            }
        }
        .h-item-content{
            width: 350rpx;
            .h-title{
                font-size: 16px;
                font-weight: 500;
                line-height: 30px;
                display: flex;
                .name{
                    padding-right: 6px;
                    color: #111111;
                }
                .btn text{
                    background: #fff5d0;
                    color: #333333;
                    font-size: 12px;
                    border: 1px solid #FFE05C;
                    padding-left: 10px;
                    padding-right: 10px;
                }
            }
            .h-desc{
                font-size: 12px;
                font-weight: 400;
                color: #999999;
                line-height: 25px;
            }
            .h-content{
                display: flex;
                align-items: center;
                font-size: 12px;
                font-weight: 400;
                line-height: 25px;
                .h-text{
                    width: 350rpx;
                    color: #999999;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .h-text1{
                    color: #ED569F;
                }
            }
        }
    }
    .a{
        font-size: 28rpx;
        line-height: 60rpx;
        padding: 0 20rpx;
        background: green;
    }
    .b{
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #9ed733;
        background: #e9f6d1;
        padding: 6rpx 16rpx;
        margin-left: 16rpx;
        border-radius: 12rpx;
    }
    .bord{
        border: 1px solid red;
    }
</style>