第一次提交
This commit is contained in:
caolc
294
oilAccount/components/listItem.vue
Normal file
294
oilAccount/components/listItem.vue
Normal file
@@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<view :style="{background:ifUrgent(item)}" class="card_bg">
|
||||
<view class="listCard">
|
||||
<view class="listCard_header">
|
||||
<view class="flexOne textOverflow mr">
|
||||
<view class="listCard_header_Name textOverflow ">{{item.companyName||'暂无'}}</view>
|
||||
<view class="listCard_header_Order textOverflow"> {{item.companyId||'暂无'}} </view>
|
||||
</view>
|
||||
<view :style="{background:typeBackground(item.auditMark),color:typeColor(item.auditMark)}" class="listCard_header_Type">
|
||||
<view :style="{background:typeColor(item.auditMark)}" class="garden"></view>
|
||||
<text>{{item.auditMark|typeText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="listCard_content flex ">
|
||||
<view class="hui">付款</view>
|
||||
<view class=" flexGrow textOverflow">{{item.paymentCompany?`${item.paymentCompany.split('/')[0]}(${item.paymentCompany.slice(-5,-1)})`:'暂无'}}</view>
|
||||
</view>
|
||||
<view class="listCard_footer flex jb an">
|
||||
<view style="margin-right: 20rpx;" class=" flex flexOne hui samlltext jb">
|
||||
<text>{{item.createTime}}</text>
|
||||
</view>
|
||||
<view class="price"> {{Number(item.transactionAmount).toFixed(2)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"listItem",
|
||||
props:{
|
||||
item:{
|
||||
type:Object,
|
||||
default:()=> null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// setTimeout(()=>{
|
||||
// console.log(this.item,'//')
|
||||
// },1000)
|
||||
},
|
||||
created() {
|
||||
// console.log(this.item.operationCode,this.item.createSource,'================================')
|
||||
},
|
||||
filters:{
|
||||
state:function(e){
|
||||
switch(Number(e)){
|
||||
case 0:
|
||||
return '即时'
|
||||
case 1:
|
||||
return '预约'
|
||||
default:
|
||||
return '---'
|
||||
}
|
||||
},
|
||||
typeText:function(e){
|
||||
switch(Number(e)){
|
||||
case 0:
|
||||
return '等待审核'
|
||||
case 1:
|
||||
return '审核通过'
|
||||
case -1:
|
||||
return '审核失败'
|
||||
case 2:
|
||||
return '等待付款'
|
||||
case 3:
|
||||
return '付款完成'
|
||||
case 4:
|
||||
return '取消充值'
|
||||
default:
|
||||
return '---'
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
methods:{
|
||||
ifUrgent(e){
|
||||
if(e.operationCode!==null&&e.operationCode!==undefined){
|
||||
return '#ff4949'
|
||||
}else{
|
||||
if(e.createSource=='WECHAT_COMPANY'){
|
||||
return 'rgba(0, 199, 119, 0.6)'
|
||||
}else{
|
||||
return '#ffffff'
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
icontype(a,b){
|
||||
return a > b?'icona-shangzhang1': a < b? 'icona-xiadie2':'iconchiping'
|
||||
},
|
||||
iconFn(a,b){
|
||||
return a > b?'#ff5555': a < b?'#2CE308':'#f9d06f'
|
||||
},
|
||||
stateColor(e){
|
||||
switch(Number(e)){
|
||||
case 0:
|
||||
return '#00AAFF'
|
||||
case 1:
|
||||
return '#9F43CC'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
},
|
||||
stateBackground(e){
|
||||
switch(Number(e)){
|
||||
case 0:
|
||||
return 'rgba(0, 170, 255, 0.1)'
|
||||
case 1:
|
||||
return 'rgba(159, 67, 204, 0.1)'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
},
|
||||
typeBackground:function(e){
|
||||
switch(Number(e)){
|
||||
case 0:
|
||||
return '#E8CD3026'
|
||||
case 1:
|
||||
return '#17A00E26'
|
||||
case -1:
|
||||
return '#EC454526'
|
||||
case 2:
|
||||
return '#ffba00'
|
||||
case 3:
|
||||
return '#13ce66'
|
||||
case 4:
|
||||
return '#ff4949'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
},
|
||||
typeColor:function(e){
|
||||
console.log(e,'-----')
|
||||
switch(Number(e)){
|
||||
case 0:
|
||||
return '#E8CD30'
|
||||
case 1:
|
||||
return '#17A00E'
|
||||
case -1:
|
||||
return '#EC4545'
|
||||
case 2:
|
||||
return '#ffffff'
|
||||
case 3:
|
||||
return '#ffffff'
|
||||
case 4:
|
||||
return '#ffffff'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
},
|
||||
scrolltolower(){
|
||||
this.$emit('scrolltolower')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flexGrow{
|
||||
flex: 1;
|
||||
}
|
||||
.price{
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.card_bg{
|
||||
width: 670rpx;
|
||||
margin: 0 auto;
|
||||
border-radius: 20rpx;
|
||||
padding-left: 10rpx;
|
||||
margin-top: 20rpx;
|
||||
color: #666666;
|
||||
}
|
||||
.listCard_footer_Type{
|
||||
background: rgba(0, 170, 255, 0.1);
|
||||
color: #00AAFF;
|
||||
Width:88rpx;
|
||||
Height:40rpx
|
||||
}
|
||||
.jb{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.listCard_footer{
|
||||
margin-top: 15rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.listCard_content_yz view {
|
||||
margin-right: 10rpx !important;
|
||||
}
|
||||
.listCard_content_fg view {
|
||||
margin-right: 10rpx !important;
|
||||
}
|
||||
.de{
|
||||
text-decoration: line-through;
|
||||
|
||||
}
|
||||
.samlltext{
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.hui{
|
||||
color: #BBBBBB;
|
||||
}
|
||||
.an{
|
||||
align-items: flex-end;
|
||||
}
|
||||
.listCard_content view{
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.listCard_content :last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
.listCard_content_code{
|
||||
width: 100rpx;
|
||||
height: 60rpx;
|
||||
background: #F0F0F0;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.jc{
|
||||
justify-content: center;
|
||||
}
|
||||
.ac{
|
||||
align-items: center;
|
||||
}
|
||||
.garden{
|
||||
background-color: #E8CD30;
|
||||
border-radius: 50%;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.listCard_header_Type{
|
||||
background: rgba(232, 205, 48, 0.15);
|
||||
border-radius: 40rpx;
|
||||
color: #E8CD30;
|
||||
/* padding: 10rpx 20rpx; */
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
Width :
|
||||
180rpx;
|
||||
Height:
|
||||
54rpx;
|
||||
}
|
||||
.listCard_header_Order{
|
||||
width: 100%;
|
||||
}
|
||||
.listCard_header_Name{
|
||||
width: 100%;
|
||||
}
|
||||
.mr{
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
.textOverflow{
|
||||
overflow: hidden;/*超出部分隐藏*/
|
||||
white-space: nowrap;/*不换行*/
|
||||
text-overflow:ellipsis;/*超出部分文字以...显示*/
|
||||
}
|
||||
.listCard_header_Order{
|
||||
color: #BBBBBB;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.flexOne{
|
||||
flex: 1;
|
||||
}
|
||||
.listCard_footer{}
|
||||
.listCard_content{
|
||||
margin-top: 15rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.listCard_header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.listCard{
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
/* margin: 10rpx auto; */
|
||||
padding: 28rpx 34rpx 28rpx 24rpx ;
|
||||
color: #666666;
|
||||
font-size: 28rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user