xiaochengxu/components/WalletListItem/WalletListItem.vue

<!--作用与钱包界面，显示提现，手续费，收入等一行的显示-->
<template>
	<view class="dwrapper">
		<view class="title_box">
			<image class="icon" :src="getTargetImageOfThisType()"/>
			<text class="title">{{getTargetTitleOfThisType()}}</text>
			<text class="time">{{getTimeOfString()}}</text>
		</view>
		<text v-if="record.scorenum >= 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:{
			record : {
				type:Object,
				default:{}
			},
			index : {
				type:Number,
				default:0
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			/**
			 * 根据当前类型，返回使用的图片
			 */
			getTargetImageOfThisType(){
				var dType = this.record.amounttype;
				if(dType == 1 || dType == 2){
					return "../../static/images/wallet/zhichu.png";
				}
				if(dType == 3){
					return "../../static/images/wallet/shouru.png";
				}
				return "../../static/images/wallet/pingtai.png";
			},
			getTargetTitleOfThisType(){
				return this.record.recorddesc;
			},
			getTimeOfString(){
				var nt = this.record.inserttime;
				if(nt <= 0){
					nt = Date.parse(new Date()) / 1000;
				}
				return utils.formatTime(nt);
			},
			///格式化金额
			getMoneyFormatted(){
				var st = utils.formatMoney(this.record.scorenum / 100);
				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>