hfln_miniprogram/src/pagesA/shareCountList/shareCountList.vue

<template>
    <view class="box">
        <template v-if="shareList.length > 0">
            <view class="meauList" v-for="item in shareList" :key="item.devId">
                <view class="menu-item">
                    <view class="meanLeft">
                        <text>设备名称</text>
                    </view>
                    <view class="meanRight">
                        <text>{{ item.devName }}</text></view
                    >
                </view>
                <view class="menu-item">
                    <view class="meanLeft">
                        <text>设备序列号</text>
                    </view>
                    <view class="meanRight">
                        <text>{{ devInfo.clientId }}</text></view
                    >
                </view>
                <view class="menu-item">
                    <view class="meanLeft">
                        <text>分享人手机号</text>
                    </view>
                    <view class="meanRight">
                        <text>{{ item.sharerPhone }}</text></view
                    >
                </view>
                <view class="menu-item">
                    <view class="meanLeft">
                        <text>被分享人手机号</text>
                    </view>
                    <view class="meanRight">
                        <text>{{ item.sharedPhone }}</text></view
                    >
                </view>
                <view class="menu-item">
                    <view class="meanLeft">
                        <text>分享时间</text>
                    </view>
                    <view class="meanRight">
                        <text>{{ item.shareTime }}</text></view
                    >
                </view>
                <view class="menu-item">
                    <view class="meanLeft">
                        <text>分享状态</text>
                    </view>
                    <view class="meanRight">
                        <text v-show="item.state == 0"> 待确认 </text>
                        <text v-show="item.state == 1"> 已确认 </text>
                        <text v-show="item.state == 2"> 已拒绝 </text>
                    </view>
                </view>

                <view class="menu-item" @click="goShareDetail(item)">
                    <view class="meanLeft">
                        <text>查看详情</text>
                    </view>
                    <view class="meanRight">
                        <image
                            src="../../static/rightArrow.png"
                            style="width: 30rpx; height: 30rpx"
                        ></image>
                    </view>
                </view>
            </view>
        </template>
        <template v-else>
            <view class="noShare">暂无分享记录</view>
        </template>
    </view>
</template>

<script>
export default {
    data() {
        return {
            status: null,
            devInfo: "",
            shareList: [],
        };
    },
    methods: {
        getShareList() {
            this.$http
                .get(
                    "wap/share/queryByDevId",
                    {
                        userId: uni.getStorageSync("userId"),
                        devId: this.devInfo.devId,
                    },
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                            token: uni.getStorageSync("tokenValue") || "",
                        },
                    }
                )
                .then((res) => {
                    console.log(res, 9999);
                    if (res.data.data) {
                        this.shareList = res.data.data;
                    }
                });
        },
        goShareDetail(item) {
            uni.navigateTo({
                url:
                    "/pagesA/shareDetail/shareDetail?shareDetail=" +
                    JSON.stringify(item),
            });
        },
        searchShareList() {
            this.shareList = [];
            this.getShareList();
        },
    },
    onShow() {
        this.searchShareList();
    },
    onLoad(options) {
        this.devInfo = JSON.parse(options.devInfo);
    },
    onPullDownRefresh() {
        uni.showNavigationBarLoading();
        this.searchShareList();
        setTimeout(() => {
            uni.hideLoading();
            uni.hideNavigationBarLoading();
            uni.stopPullDownRefresh();
        }, 2000);
    },
};
</script>

<style lang="less" scoped>
// Main Styles
.box {
    padding: 10rpx 18rpx;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;
    .meauList {
        width: 710rpx;
        margin: 18rpx auto;
        background: #fff;
        border-radius: 16rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
        overflow: hidden;
        transition: all 0.3s ease;

        .menu-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 32rpx;
            padding: 32rpx 0;
            border-bottom: 1rpx solid #f0f0f0;

            &:last-of-type {
                border-bottom: none;
            }

            .meanLeft {
                flex: 1;
                color: #666;
                font-size: 28rpx;
                font-weight: 400;
            }

            .meanRight {
                flex: 1;
                text-align: right;
                color: #333;
                font-size: 28rpx;
                font-weight: 500;
                padding-left: 20rpx;
            }
        }

        .menu-bottom {
            display: flex;
            padding: 24rpx 32rpx;
            border-top: 1rpx solid #f0f0f0;

            .meanLeft,
            .meanRight {
                flex: 1;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 8rpx;
                font-size: 30rpx;
                font-weight: 500;
                transition: all 0.2s;

                &:active {
                    opacity: 0.8;
                }
            }

            .meanLeft {
                background: #7b5245;
                color: white;
                margin-right: 16rpx;
            }

            .meanRight {
                background: fade(#ff4d4f, 10%);
                color: #ff4d4f;
                border: 1rpx solid fade(#ff4d4f, 30%);
            }
        }
    }

    .noShare {
        margin: 20rpx 20rpx;
        color: #999;
        font-size: 28rpx;
        text-align: center;
    }
}
</style>