xiaochengxu/components/WalletListItem/WalletListItem.vue

<!--作用与钱包界面，显示提现，手续费，收入等一行的显示-->
<template>
	<view class="dwrapper">
		<view class="title_box">
			<image class="icon" :src="getTargetImageOfThisType()"/>
			<text class="title">{{this.getTargetTitleOfThisType()}}</text>
			<text class="time">{{this.getTimeOfString()}}</text>
		</view>
		<text v-if="cashNumber >= 0" class="money_earn">{{this.getMoneyFormatted()}}</text>
		<text v-else class="money_used">{{this.getMoneyFormatted()}}</text>
	</view>
</template>

<script>
	import utils from "@/common/utils.js"
	export default {
		name:"WalletListItem",
		props:{
			/**
			 * 类型：0->提现，1->提现手续费，2->收入，3->平台维护费
			 */
			dType : {
				type:Number,
				default:0,
			},
			/**
			 * 产生当前数据的时间，如果不传，默认为-1，会显示‘无具体记录’
			 */
			time : {
				type:Number,
				default:-1,
			},
			/**
			 * 产生的具体金额，可能为负数，表示扣除
			 */
			cashNumber : {
				type:Number,
				default:0,
			},	
		},
		data() {
			return {
				
			};
		},
		methods:{
			/**
			 * 根据当前类型，返回使用的图片
			 */
			getTargetImageOfThisType(){
				if(this.dType == 0 || this.dType == 1){
					return "../../static/images/wallet/zhichu.png";
				}
				if(this.dType == 2){
					return "../../static/images/wallet/shouru.png";
				}
				return "../../static/images/wallet/pingtai.png";
			},
			getTargetTitleOfThisType(){
				switch(this.dType){
					case 0:
						return "提现";
					case 1:
						return "提现手续费";
					case 2:
						return "收入";
					case 3:
						return "平台维护费";
					default :
						return "未知";
				}
			},
			getTimeOfString(){
				var nt = this.time;
				if(this.time == -1){
					nt = Date.parse(new Date()) / 1000;
				}
				return utils.formatTime(nt);
			},
			///格式化金额
			getMoneyFormatted(){
				var st = utils.formatMoney(this.cashNumber);
				st = "￥" + st;
				return st;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.dwrapper{
		width: 702rpx;
		height: 110rpx;
		//background-color: #0081FF;
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.title_box{
		width: 300rpx;
		height: 100%;
		//background-color: #9000FF;
		position: relative;
		margin-left: 20rpx;
	}
	.icon{
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		left: 0;
		top: 37rpx;
	}
	.title{
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		position: absolute;
		left: 38rpx;
		top: 28rpx;
	}
	.time{
		height: 30rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		position: absolute;
		left: 38rpx;
		top: 70rpx;
	}
	///扣费
	.money_used{
		height: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
		text-align: right;
		padding-right: 20rpx;
	}
	///挣钱
	.money_earn{
		height: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #D49B4B;
		opacity: 1;
		text-align: right;
		padding-right: 20rpx;
	}
	
</style>