用uni-app写一个申请请假列表的页面

<template>
    <view class="leave-list">
        <view class="searchh-bar">
            <input type="text" name="" id="" placeholder="请输入搜索内容" />
            <button>一键清空</button>
        </view>
        <!-- 列表开始 -->
        <view class="list">
            <view class="item" v-for="(item, index) in leaveList" :key="index">
                <view class="top">
                    <view class="left">{{ item.startTiom }} {{ item.name }}</view>
                    <view class="right">
                        <uni-icons type="compose" size="24" color="#00aaff"></uni-icons>
                        <uni-icons type="trash" size="24" color="#ff0000" @tap="removeAll(item._id)"></uni-icons>
                    </view>
                </view>
                <view class="reson">
                    {{ item.reason }}
                </view>
                <view class="attachment">
                    <view class="title">附件</view>
                    <image v-for="(k,i) in item.imgs" :key="k" :src="k" mode=""></image>
                </view>
                <view class="time">时间：{{ item.createTime }}-{{ item.endTime }}</view>
                <view class="refuse" v-if="item.status == 2">
                    <view class="title">
                        驳回理由:
                    </view>
                    <view class="reason">
                        {{ item.refuseReason }}
                    </view>
                </view>
                <view v-if="item.status == 0" class="status primary-status">待审核</view>
                <view v-else-if="item.status == 1" class="status success-status">通过</view>
                <view v-else="item.status == 2" class="status error-status">不通过</view>
                </view>
            </view>
            <view class="garden" @tap="Toask">
                <text>+</text>
            </view>
        </view>

</template>

<script>
export default {
    data() {
        return {
            leaveList: [],
            userInfo:[]
        };
    },
    onShow() {
        this.getLeaveList();
    },
    methods: {
        //定义一个请求请假列表的方法 uniCloud.callFunction
        getLeaveList() {
            uniCloud.callFunction({
                name: 'get-leave-list',
                data:{
                    name:uni.getStorageSync("user").name
                },
                success: (res) => {
                    console.log(res);
                    this.leaveList = res.result.leaveList.data;
                }
            });
        },
        getuserInfo(){
            
        },
        Toask(){
            uni.navigateTo({
                url:"/pages/ask/ask"
            })
        },
        //删除请假记录
        removeAll(id){
            console.log(id)
            uni.showModal({
                title:"确定删除请假申请？",
                confirmText:"删除",
                confirmColor:"red",
                success: (res) => {
                    console.log(res)
                    if(res.confirm){
                        uniCloud.callFunction({
                            name:"del_leave",
                            data:{
                                delId:id
                            },
                            success: (res) => {
                                if(res.result.code==200){
                                    uni.showToast({
                                        title:"删除成功"
                                    })
                                    this.getLeaveList();
                                }
                            }
                        })
                        console.log("删除成功")
                    }
                }
            })
        }
    }
};
</script>
<!-- scoped 样式的作用域 只对这个页面样式有效 -->
<style scoped lang="scss">
.leave-list {
    .garden{
        position: fixed;
        bottom: 10px;
        right: 10px;
        width: 50px;
        height: 50px;
        background-color: #00aaff;
        border-radius: 50%;
        text-align: center;
        line-height:50px;
        text{
            font-size: 40px;
            color: #ffffff;
        }
    }
    background-color: #dfdfdf;
    //padding: 15px;
    .searchh-bar {
        display: flex;
        border-bottom: 1px solid gray;
        padding-bottom: 10px;
        padding: 15px 15px;
        input {
            border: 1px solid gray;
            background-color: white;
            border-radius: 5px;
            height: 35px;
            flex: 1;
            margin-right: 8px;
            margin-left: 5px;
        }
        button {
            background-color: #ff0000;
            color: white;
            height: 35px;
            line-height: 35px;
            width: 70px;
            padding: 0;
            font-size: 24rpx;
        }
    }
    .list {
        
        padding: 15px;
        .item {
            position: relative;
            background-color: white;
            border-radius: 10px;
            margin-bottom: 10px;
            padding: 10px;
        }
        .top {
            display: flex;
            justify-content: space-between;
            .left {
                font-size: 34rpx;
                font-weight: bold;
            }
        }
        .reson {
            color: #999;
            margin: 10px 0;
        }
        .attachment {
            .title {
                color: #999;
                margin-bottom: 6px;
            }
            image {
                width: 150rpx;
                height: 150rpx;
            }
        }
        .time {
            color: #00aaff;
        }
    }
    .refuse{
        .title{
            color: #ff5500;
            margin-top: 10px;
            font-weight: bold;
        }
        .reason{
            color: #999;
            }
        }
        .status{
            position: absolute;
            bottom: 20px;
            right: 10px;
            background-color: #00ff00;
            color: #ffffff;
            width: 120rpx;
            text-align: center;
            padding: 5px 0;
            //旋转
            transform: rotate(-45deg);
    }
    .primary-status{
        background-color: #00aaff;
    }
    .error-status{
        background-color: #ff0000;
    }
}
</style>