OfficeApp/components/task/taskItem.vue

149 lines
3.1 KiB
Vue
Raw Normal View History

2023-08-04 11:32:51 +08:00
<template>
2023-08-05 19:07:46 +08:00
<view class="c_task_item" @click="clickTask">
2023-08-04 11:32:51 +08:00
<view class="top">
<view class="left">
<view>任务名称:</view>
2023-08-05 19:07:46 +08:00
<view class="text">{{datas.title}}</view>
2023-08-04 11:32:51 +08:00
</view>
<view class="right">
<image class="icon" src="../../static/icons/ok_c.png"></image>
<!-- <image src="../../static/icons/err_c.png"></image> -->
</view>
</view>
2023-08-05 11:11:27 +08:00
<view class="bottom">
<image class="b_left" src="../../static/img/task/task.png"></image>
<view class="b_right">
<view class="item">
<view class="left">
<view>任务进度:</view>
<view class="text">30%</view>
</view>
2023-08-05 19:07:46 +08:00
<view class="right">{{datas.money||'0.00'}}<text class="price"></text></view>
2023-08-05 11:11:27 +08:00
</view>
<view class="item">
<view class="left">
<view>完成时间:</view>
2023-08-05 19:07:46 +08:00
<view class="text">{{datas.end_time}}</view>
2023-08-05 11:11:27 +08:00
</view>
<view class="right">
<view>进入任务<uni-icons type="right" color="#3175f9"></uni-icons></view>
</view>
</view>
2023-08-04 11:32:51 +08:00
</view>
</view>
</view>
</template>
<script>
export default {
name: "task",
2023-08-05 19:07:46 +08:00
props: {
datas: {
type: Object,
default: {}
}
},
2023-08-04 11:32:51 +08:00
data() {
return {
};
2023-08-05 19:07:46 +08:00
},
methods:{
naviTo(url) {
url ?
uni.navigateTo({
url: url,
}) : Toast('暂未开放')
},
clickTask(){
console.log('点击');
if(this.$props.datas.type==1){
this.naviTo('/subpkg/fileTask/fileTask?id=' + JSON.stringify(this.$props.datas?.extend?.informationg?.arr))
}else this.naviTo('');
}
2023-08-04 11:32:51 +08:00
}
}
</script>
<style lang="scss">
.c_task_item {
margin: 0 auto;
margin-bottom: 28rpx;
width: 694rpx;
background: #FFFFFF;
border-radius: 14rpx 14rpx 14rpx 14rpx;
opacity: 1;
font-size: 25rpx;
font-weight: 400;
color: #999999;
line-height: 39rpx;
.text {
font-size: 28rpx;
font-weight: 400;
color: #333333;
line-height: 39rpx;
margin-left: 18rpx;
}
.top {
display: flex;
justify-content: space-between;
padding: 28rpx;
border-bottom: 1rpx solid #F5F5F5FF;
.left {
display: flex;
justify-content: left;
align-items: center;
}
.right {
.icon {
width: 43rpx;
height: 43rpx;
}
}
}
2023-08-05 11:11:27 +08:00
.bottom{
padding: 28rpx;
display: flex;
.b_left{
width: 103.39rpx;
height: 94.63rpx;
margin-right: 18rpx;
}
.b_right{
flex: 1;
display: flex;
justify-content: space-around;
flex-direction: column;
2023-08-04 11:32:51 +08:00
.item {
display: flex;
justify-content: space-between;
2023-08-05 11:11:27 +08:00
// margin: 18rpx 28rpx 0 28rpx;
// &:last-child {
// padding-bottom: 18rpx;
// }
2023-08-04 11:32:51 +08:00
.left {
display: flex;
}
.right{
font-size: 32rpx;
font-weight: 400;
color: #3274F9;
line-height: 39rpx;
.price{
font-size: 25rpx;
}
}
}
}
2023-08-05 11:11:27 +08:00
}
}
2023-08-04 11:32:51 +08:00
</style>