jje_spread_uniapp/pages/specialistsDetail/specialistsDetail.vue

<template>
    <view>
        <!-- #ifdef H5-->
        <uni-nav-bar v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false"
                     left-icon="left" title="累计交友圈专员详情" @clickLeft="back"/>
        <!-- #endif -->


        <view class="flex-row justify-center">
            <u-tabs :list="tabList" lineWidth="50" :scrollable="false" @click="clickTabs" :current="current"></u-tabs>
        </view>

        <swiper class="swiper" :style="{height:height}" :current="current" @change="swiperChange">
            <swiper-item>
                <view class="msg bord" :style="{height:height}">
                    <view class="flex-row justify-between msgItem">
                        <view>
                            <text>头像</text>
                        </view>
                        <view>
                            <image :src="expandUser.selfPhotoUrl || '/static/ud4.png'" class="profilePhoto"></image>
                        </view>
                    </view>

                    <view class="flex-row justify-between msgItem">
                        <view>
                            <text>好友编号</text>
                        </view>
                        <view>
                            <text>{{expandUser.id}}</text>
                        </view>
                    </view>


                    <view class="flex-row justify-between msgItem">
                        <view>
                            <text>姓名</text>
                        </view>
                        <view>
                            <text>{{expandUser.name}}</text>
                        </view>
                    </view>

                    <view class="flex-row justify-between msgItem">
                        <view>
                            <text>电话号码</text>
                        </view>
                        <view>
                            <text>{{expandUser.phone}}</text>
                        </view>
                    </view>

                    <view class="flex-row justify-between msgItem">
                        <view>
                            <text>备注</text>
                        </view>
                        <view class="itemValue">
                            <text>{{expandUser.remake}}</text>
                        </view>
                    </view>

                    <view class="flex-row justify-between msgItem">
                        <view>
                            <text>备注地址</text>
                        </view>
                        <view class="itemValue">
                            <text>{{expandUser.remarkAddress}}</text>
                        </view>
                    </view>

                    <view class="flex-row justify-between msgItem">
                        <view>
                            <text>现场照片</text>
                        </view>
                        <view class="itemValue scenePhoto">
                            <image :src="item.url" class="photo" v-for="(item,index) in scenePhotoArr" :key="index" @click="amplifier(item.url)"></image>
                        </view>
                    </view>


                    <view class="flex-row justify-center">
                        <button class="jiechuBtn" type="warn" @click="unbind">解除绑定</button>
                    </view>


                </view>


            </swiper-item>

            <swiper-item>
                <mescroll-item ref="MescrollItem" :i="0" :index="0" :height="height" :expandUserId="expandUserId">
                </mescroll-item>
            </swiper-item>
        </swiper>


        <uni-popup ref="amplifierPopup" type="center">

            <view class="amplifierImg">
                <image mode="widthFix" :src="amplifierUrl"></image>
            </view>

        </uni-popup>


        <!--#ifdef H5-->
        <liu-drag-button v-if="$isWxBrowser()" @clickBtn="back">返回</liu-drag-button>
        <!--#endif-->
    </view>
</template>

<script>
    import MescrollItem from "./module/mescrollUni-item.vue";
    import {url} from "../../uni_modules/uv-ui-tools/libs/function/test";

    export default {
        components: {
            MescrollItem
        },
        data() {
            return {
                amplifierUrl:'',
                scenePhotoArr:[],
                expandUser: {},
                expandUserId: null,
                height: '',
                current: 0,
                tabList: [{
                    name: '详情备注',
                }, {
                    name: '交友记录',
                }]
            }
        },
        onLoad(e) {
            this.expandUserId = e.id
            let sysInfo = uni.getSystemInfoSync()
            this.height = sysInfo.windowHeight - 140 + 'px' //除标题栏栏外的屏幕可用高度
            this.expandUserDetail()
        },
        methods: {

            unbind(){
                let that = this
                uni.showModal({
                    title: '危险操作',
                    content: '解除绑定后不可恢复，请再次确认！',
                    success: function (res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            that.$api.service.unbind({
                                id:that.expandUserId
                            }).then(res=>{
                                uni.$u.toast("解除绑定成功")
                                console.log(res)

                                uni.navigateBack({
                                    delta: 1
                                });

                            })

                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });


            },

            amplifier(url){
                this.amplifierUrl = url
                this.$refs.amplifierPopup.open()
            },

            expandUserDetail(){
                this.$api.service.expandUserDetail({
                    expandUserId:this.expandUserId
                }).then(async res=>{
                    this.expandUser = res.data.data
                    if (this.expandUser.img){
                        let oss = await this.$commonUtils.getImgUrlByOssId(this.expandUser.img)
                        this.expandUser.selfPhotoUrl = oss[0].url
                    }

                    if (this.expandUser.scenePhoto){
                        if (this.expandUser.scenePhoto){
                            let arr =  this.expandUser.scenePhoto.split(',')
                            for (const imgId of arr) {
                                let oss = await this.$commonUtils.getImgUrlByOssId(imgId)
                                this.scenePhotoArr.push(oss[0])
                                this.$set(this.scenePhotoArr)
                            }
                        }

                    }
                    this.$set(this.expandUser)
                    console.log('人员详情',this.expandUser)
                })
            },

            swiperChange(e) {
                console.log(e)
                this.current = e.detail.current
            },
            clickTabs(e) {
                this.current = e.index
            },
            back() {
                let pages = getCurrentPages()
                if (pages.length > 1) {
                    uni.navigateBack({
                        delta: 1,
                        fail: err => {
                            console.log(err)
                        }
                    })
                } else {
                    uni.switchTab({
                        url: '/pages/index/index'
                    });
                }
            },



        }
    }
</script>

<style lang="scss" scoped>
    @import './index.rpx.css';
</style>