目录
一、实现思路
二、实现步骤
案例一：
①view部分展示
②JavaScript 内容
④ 效果展示
案例二：
①view部分展示
②JavaScript 内容
④ 效果展示
编辑
一、实现思路
通过v-for循环获取数据并进行判断该条记录中status的状态
给不同的状态赋值，在div种去判断状态。
二、实现步骤
案例一：
①view部分展示
<template v-for="(item2, index2) in tarList">
<view class="itemtitle" :key="index2">
<view v-if="item2.statuse == 1" class="public-root" style="color: #5990F5;background: #E6EFFE;">
待审批</view>
<view v-if="item2.statuse == 2" class="public-root" style="color: #31BA3E;background: #E0F5E2;">
已通过</view>
<view v-if="item2.statuse == 3" class="public-root" style="color: #F94B30;background: #FEE4E0;">
未通过</view>
<view v-if="item2.statuse == 4" class="public-root" style="color: #F99830;background: #FEF0E0">
已取消</view>
<view class="flex-between" style="margin-top: 24rpx;">
<view style="color: #1A1A1A;font-size: 32rpx; font-weight: bold;letter-spacing: 2rpx;">
{{item2.totile}}
</view>
<view style="color: #5990F5; font-size: 32rpx;">{{item2.satly}}</view>
</view>
<view class="flex-colomn">
<view class="itemcom">工作时间：{{item2.atime}}</view>
<view class="itemcom">经验要求：{{item2.demand}}</view>
</view>
</view>
</template>②JavaScript 内容
//列表
statuse:1,
tarList: [{
statuse: 1,
totile: "办公室助理",
satly: "200/天",
atime: '周一',
demand: "经验好"
},
{
statuse: 2,
totile: "图书馆管理员",
satly: "200/天",
atime: '周一',
demand: "经验好"
},
{
statuse: 3,
totile: "图书馆管理员",
satly: "200/天",
atime: '周一',
demand: "经验好"
},
],④ 效果展示
案例二：
只是样式，布局不同，思路都是相同的。
①view部分展示
②JavaScript 内容
<template>
<view style="padding-bottom: 100px;">
<f-navbar title="留校记录" navbarType="3"></f-navbar>
<template v-for="(item,index) in funtcList">
<view style="padding: 32rpx; background-color: #fff;margin: 24rpx;border-radius: 16rpx;" :key="index" @click="destdetails">
<view class="flex-between">
<view class="flex">
<view v-if="item.statuse == 1" class="public-radius" style="background-color:#5990F5;">
</view>
<view v-if="item.statuse == 2" class="public-radius" style="background-color:#31BA3E;">
</view>
<view v-if="item.statuse == 3" class="public-radius" style="background-color: #F94B30;">
</view>
<view v-if="item.statuse == 4" class="public-radius" style="background-color: #F99830;">
</view>
<view class="flex">
<view style="color: #1A1A1A;font-size: 32rpx;">{{item.satime}}</view>
<text style="color: #999999; font-size: 32rpx;margin: 0 10rpx 0 ;">至</text>
<view style="color: #1A1A1A;font-size: 32rpx;">{{item.endtime}}</view>
</view>
</view>
<view v-if="item.statuse == 1" class="public-root"
style="color: #5990F5; background-color: #E6EFFE ; ">
待审批</view>
<view v-if="item.statuse == 2" class="public-root"
style="color: #31BA3E; background-color: #E0F5E2 ; ">
已通过</view>
<view v-if="item.statuse == 3" class="public-root"
style="color:#F94B30; background-color: #FEE4E0; ">
未通过</view>
<view v-if="item.statuse == 4" class="public-root"
style="color: #F99830; background-color:#FEF0E0; ">
已取消</view>
</view>
<view style="margin-top: 16rpx;margin-left: 30rpx;">
<u--text :text="item.caroot" :lines="1" :size="14" color="#999"/>
</view>
</view>
</template>
<view class="flex" style="position: fixed;left: 35%; color: #999999; font-size: 28rpx;">
暂无更多信息
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 请假记录
statuse: 1,
// 待审核
funtcList: [{
statuse: 2,
satime: "2020202002200",
endtime: "20200202",
caroot:"你好呀！噜啦啦，啦啦啦啦啦啦啦啦啦啦，来了来了了了了"
}, {
statuse: 1,
satime: "2020202002200",
endtime: "20200202",
caroot:"你好呀！噜啦啦，啦啦啦啦啦啦啦啦啦啦，来了来了了了了"
},{
statuse: 3,
satime: "2020202002200",
endtime: "20200202",
caroot:"你好呀！噜啦啦，啦啦啦啦啦啦啦啦啦啦，来了来了了了了"
}, {
statuse: 4,
satime: "2020202002200",
endtime: "20200202",
caroot:"你好呀！噜啦啦，啦啦啦啦啦啦啦啦啦啦，来了来了了了了"
}, ],
}
},
methods: {
destdetails(){
uni.navigateTo({
url: "/pagesLeave/everyday/destdetails"
})
}
}
}
</script>
<style lang="scss" scoped>
.public-root {
margin-left: 8rpx;
padding: 2rpx 4rpx;
}
.public-radius {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
margin-right: 16rpx;
}
</style>
