weapp-online/pages/my_bill/my_bill.vue

<template>
	<view class="bill">
		<view class="bill_list flexB" v-for="item in list" :key="item.id">
			<view class="list_left flexS">
				<image src="../../static/imgs/billIcon.png" mode=""></image>
				<view>
					<view :style="{ color: item.is_refund == 1 ? '#4CD964' : '' }">{{ item.is_refund == 0 ? '付款成功' : '退款成功' }}</view>
					<text>第{{ item.season}}届大卫博士创业{{ item.type == 1 ? '密训' : '实战' }}营</text>
				</view>
			</view>
			<view class="list_right">
				<text v-if="item.is_refund == 0">-{{ item.money }}</text>
				<text v-else style="color:#4CD964">+{{ item.money }}</text>
			</view>
		</view>
		<view class="noBill" v-if="list.length == 0">--暂无账单--</view>
	</view>
</template>

<script>
import { signList } from '../../api/sign.js';
export default {
	data() {
		return {
			list: [] //账单列表
		};
	},
	onLoad() {
		this.getBill();
	},
	methods: {
		//获取账单列表
		getBill() {
			signList().then(res => {
				if (res.code == 200) {
					this.list = res.data.list;
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.noBill {
	width: 100%;
	text-align: center;
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #666;
}
.bill_list {
	height: 128rpx;
	width: 100%;
	background-color: #fff;
	border-bottom: 1rpx solid #f9f9f9;
	padding: 0 30rpx;
	box-sizing: border-box;
	.list_left {
		image {
			height: 88rpx;
			width: 88rpx;
			margin-right: 16rpx;
		}
		> view {
			color: #656565;
			view {
				font-size: 32rpx;
			}
			text {
				font-size: 24rpx;
			}
		}
	}
	.list_right {
		color: #ea4a41;
		text {
			font-size: 40rpx;
		}
	}
}
</style>