前端工作总结299-uni-发布详情页样式修改

<template>
    <view>
        <view style="padding: 24rpx 0 0 30rpx;">
            <text style="
        font-size: 30rpx;color: #333333;">{{tableData.name}}</text>
        </view>
        <text style="margin-left:26rpx;margin-top: 20rpx;color: #666666;">
            {{tableData.message}}
        </text>
        <view v-for="(item,index) in plist">
            <u-image v-if="tableData[item]!=null" style="display: block;float: left;margin-left: 26rpx;margin-top: 26rpx;" width="120rpx"
             height="120rpx" :src="tableData[item]"></u-image>
        </view>
        <view style="clear: both;padding: 24rpx 0 0 30rpx;height: 46rpx;">
            <view style="float: left;line-height: 46rpx;">
                <u-icon name="clock" width="28.4rpx" height="28.4rpx"></u-icon>
            </view>
            <view style="float: left;line-height: 46rpx;margin-left: 5rpx;
color: #999999;font-size: 24rpx;">
                截至时间: {{tableData.endTime}}
            </view>
        </view>
        <view style="clear: both;padding: 24rpx 0 0 30rpx;height: 46rpx;">
            <view style="float: left;line-height: 46rpx;">
                <u-icon name="account" width="28.4rpx" height="28.4rpx"></u-icon>
            </view>
            <view style="float: left;line-height: 46rpx;margin-left: 5rpx;color: #999999;font-size: 24rpx;">
                创建人:{{tableData.createdBy}}
            </view>

        </view>
        <view style="clear: both;padding: 24rpx 0 0 30rpx;height: 46rpx;">
            <view style="float: left;line-height: 46rpx;">
                <u-icon name="clock" width="28.4rpx" height="28.4rpx"></u-icon>
            </view>
            <view style="float: left;line-height: 46rpx;margin-left: 5rpx;color: #999999;font-size: 24rpx;">
                指派给: {{tableData.assignName}}
            </view>
        </view>
        <view style="clear: both;padding: 24rpx 0 0 30rpx;height: 46rpx;">
            <view style="float: left;line-height: 46rpx;">
                <u-icon name="reload" width="28.4rpx" height="28.4rpx"></u-icon>
            </view>
            <view style="float: left;line-height: 46rpx;margin-left: 5rpx;color: #999999;font-size: 24rpx;">
                循环: {{tableData.patrolFor|toChangeLess}}
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        filters: {

            toChangeLess(e) {
                console.log(e)
                /* 过滤数据中的循环请求*/
                if (e == 0) {
                    return "不循环"
                } else if (e == 12345) {
                    return "周一到周五循环"
                } else if (e == 12345678) {
                    return "每日循环"
                }
            }
        },
        data() {

            return {
                plist: [],
                tableData: {}
            }
        },
        onLoad(e) {
            /* JSON.parse() */
            let obj = JSON.parse(decodeURIComponent(e.record));
            console.log(obj)
            this.tableData = obj
            this.allPrpos(obj)
        },
        methods: {
            allPrpos(obj) {
                // 用来保存所有的属性名称和值
                let list = []
                var props = "";
                // 开始遍历
                for (var p in obj) {
                    // 方法
                    if (typeof(obj[p]) == "function") {
                        obj[p]();
                    } else {
                        // p 为属性名称,obj[p]为对应属性的值
                        if (p.indexOf("apic") != -1) {
                            /*  props+= p + "=" + obj[p] + "\t"; */
                            list.push(p)
                            this.plist = list
                            console.log(list)
                        }
                    }
                }
                // 最后显示所有的属性
                /*  console.log(props); */
            },
        }
    }
</script>

<style>

</style>

 

 

posted @   前端导师歌谣  阅读(12)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示