第一次提交
This commit is contained in:
caolc
375
oilAccount/components/accountListItem.vue
Normal file
375
oilAccount/components/accountListItem.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<view class="listCard">
|
||||
<view class="listCard_header">
|
||||
<view class="flexOne textOverflow mr">
|
||||
<view class="listCard_header_Name textOverflow ">{{item.accountName ||'--'}}</view>
|
||||
<view class="listCard_header_Order textOverflow"> {{item.siteChannelAccountId||'--'}} </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_footer flex jb an">
|
||||
<view style="margin-right: 20rpx;" class=" flexOne ">
|
||||
<view>{{item.companyName||'--'}}</view>
|
||||
<text class="hui samlltext">{{item.createTime||'--'}}</text>
|
||||
</view>
|
||||
<view style="text-align: center;">
|
||||
<view style="width: 180rpx;display: flex;justify-content: flex-end;">
|
||||
<view :style="{color: transactionType(item.transactionType).color,background:transactionType(item.transactionType).bg}"
|
||||
class="genres">{{ transactionType(item.transactionType).text}}</view>
|
||||
</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() {},
|
||||
filters: {
|
||||
state: function(e) {
|
||||
switch (Number(e)) {
|
||||
case 0:
|
||||
return '即时'
|
||||
case 1:
|
||||
return '预约'
|
||||
default:
|
||||
return '---'
|
||||
}
|
||||
},
|
||||
typeText: function(e) {
|
||||
console.log(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: {
|
||||
transactionType(e) {
|
||||
switch (e) {
|
||||
case 'RECHARGE':
|
||||
return {
|
||||
text: '充值',
|
||||
color: '#666666',
|
||||
bg: 'rgba(102, 102, 102, 0.1)'
|
||||
}
|
||||
case 'RECHARGE_REBETE':
|
||||
return {
|
||||
text: '折返',
|
||||
color: '#9F43CC',
|
||||
bg: 'rgba(159, 67, 204, 0.1)'
|
||||
}
|
||||
case 'CONSUME_REBATE':
|
||||
return {
|
||||
text: '折返',
|
||||
color: '#9F43CC',
|
||||
bg: 'rgba(159, 67, 204, 0.1)'
|
||||
}
|
||||
case 'DISPATCH':
|
||||
return {
|
||||
text: '调拨',
|
||||
color: '#2866FF',
|
||||
bg: 'rgba(40, 102, 255, 0.1)'
|
||||
}
|
||||
case 'CALLBACK':
|
||||
return {
|
||||
text: '回拨',
|
||||
color: '#FF6700',
|
||||
bg: 'rgba(255, 103, 0, 0.1)'
|
||||
}
|
||||
case 'TURN':
|
||||
return {
|
||||
text: '圈回',
|
||||
color: '#EC4545',
|
||||
bg: 'rgba(236, 69, 69, 0.1)'
|
||||
}
|
||||
default:
|
||||
return {
|
||||
text: '---',
|
||||
color: '#666666',
|
||||
bg: 'rgba(102, 102, 102, 0.1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
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) {
|
||||
console.log(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>
|
||||
.genres {
|
||||
width: 88rpx;
|
||||
height: 40rpx;
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
width: 670rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user