app-govern/pages/device/user.vue

<template>
    <Cn-page :loading="loading">
        <view slot="body" class="index">
            <uni-list>
                <uni-list-item
                    :title="renderData.masterUser.name"
                    :note="renderData.masterUser.phone"
                    :thumb="renderData.masterUser.avatar"
                    thumb-size="lg"
                    rightText="主用户"
                >
                </uni-list-item>
                <uni-list-item
                    :title="item.name"
                    :note="item.phone"
                    :thumb="item.avatar"
                    thumb-size="lg"
                    v-for="item in renderData.subUsers"
                    :key="item.id"
                >
                    <template v-slot:footer v-if="options.isPrimaryUser">
                        <view class="footer-btn mt20" style="background: #e47470" @click="del(item)">移除</view>
                    </template>
                </uni-list-item>
            </uni-list>
            <uni-load-more status="nomore"></uni-load-more>
        </view>
    </Cn-page>
</template>
<script>
import { queryDeviceUser, cancelShare } from '@/common/api/device'

export default {
    data() {
        return {
            loading: true,
            renderData: {
                masterUser: {},
                subUsers: [],
            },
            options: {},
        }
    },
    methods: {
        jump() {
            uni.navigateTo({
                url: '/pages/mine/userDetail',
            })
        },
        del(e) {
            console.log(e)
            uni.showModal({
                title: '提示',
                content: '确定要移除该成员吗？',
                success: (res) => {
                    if (res.confirm) {
                        cancelShare({ eid: this.renderData.devId, userId: e.id }).then((res) => {
                            console.log(res)
                            uni.showToast({
                                title: '移除成功',
                                icon: 'none',
                            })
                            this.init()
                        })
                        console.log('用户点击确定')
                    } else if (res.cancel) {
                        console.log('用户点击取消')
                    }
                },
            })
        },
        init() {
            queryDeviceUser(this.options.id).then((res) => {
                console.log(res)
                this.renderData = res.data
                this.renderData.masterUser.avatar = this.renderData.masterUser.headSculpture
                    ? this.$config.static + this.renderData.masterUser.headSculpture
                    : '/static/head.png'
                this.renderData.subUsers.forEach((item) => {
                    item.avatar = item.headSculpture ? this.$config.static + item.headSculpture : '/static/head.png'
                })
                console.log(this.renderData)
                this.loading = false
            })
        },
    },
    onLoad(options) {
        this.options = options
        console.log(this.loading)
        this.init()
    },
}
</script>
<style lang="scss">
.index {
    padding: 20rpx;

    .footer-btn {
        padding: 0 20rpx;
        height: 50rpx;
        background-color: #007aff;
        font-size: 24rpx;
        color: #fff;
        text-align: center;
        line-height: 50rpx;
        border-radius: 10rpx;
    }
}
</style>