weapp-v1/pages/exchange/detail.vue

<template>
	<view style="padding: 24rpx;">
		<view class="Detailbox" v-for="(item,index) in list" :key="index">
			<view class="Detailbox_top">
				<view class="left">
					<view class="title">
						{{ item.title }}
					</view>
					<text>{{ item.created_at }}</text>
					<view class="text">第{{ item.season }}季</view>
				</view>
				<view :class="item.type? 'right jia': 'right'">
					{{ item.bonus }}
				</view>
			</view>
			<view class="Detailbox_bottom">
				{{ item.remark }}
			</view>
		</view>
	</view>
</template>

<script>
import { GetBonusLog } from '../../api.js'
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad() {
			this.getBound()
		},
		methods: {
			getBound(){
				this.$ajax.get(GetBonusLog).then(([, { data: res }]) => {
					//获取奖学金明细
					if(res.data.list.length > 0) {
						this.list = res.data.list
						console.log(this.list)
						res.data.list.forEach(function(value,index,arr){
							if(value.bonus> 0) {
								value.bonus = '+' + value.bonus
								value.type = 1
							} else {
								value.type = 0
							}
						})
					} else {
						uni.showModal({
							content: '暂无明细',
							showCancel: false,
							success:function(){
								uni.navigateBack({
									delta:1
								})
							}
						})
					}
					
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
	.Detailbox {
		background-color: #fff;
		padding: 24rpx;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		&_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			.left {
				.title {
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 16rpx;
				}
				text{
					font-size: 28rpx;
					color: #999999;
				}
				.text {
					font-size: 28rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}
			.right {
				font-size: 40rpx;
				// font-weight: bold;
				font-weight: 500;
				color: #FB231F;
			}
			.jia {
				color: #00A54B;
			}
		}
		&_bottom {
			font-size: 30rpx;
			color: #333333;
			font-weight: 400;
			padding-top: 20rpx;
			border-top: 2rpx solid #EEEEEE;
		}
	}
</style>