gc/pages/salary/mySalary.vue

<template>
	<view class="content">
		<view class="top"></view>
		<view class="main">
			<view class="main-title flex">
				<view class="title-font">发放时间</view>
				<view class="title-font">实际发放</view>
			</view>
			<view class=" " v-for="(item,index) in list" :key="index">
				<view class="main-list flex" @click="more(item)">
					<view class="list-left">{{item.time}}</view>
					<view class="list-right">
						<view class="list-font red">
							￥{{item.all}}
						</view>
						<image class="jt" v-if="item.more == 0" src="../../static/icon/downxia.png" mode=""></image>
						<image class="jt" v-if="item.more == 1" src="../../static/icon/downup.png" mode=""></image>
					</view>
				</view>
				<view class="child-list" v-if="item.more == 1">
					<view class="child-item">
						<view class="list-left">工资金额</view>
						<view class="list-right">
							<view class="list-font">
								￥{{item.all}}
							</view>
						</view>
					</view>
					<view class="child-item">
						<view class="list-left">基本工资</view>
						<view class="list-right">
							<view class="list-font">
								￥{{item.base}}
							</view>
						</view>
					</view>
					<view class="child-item" @click="navTo('/pages/salary/infoSalary?type=1')">
						<view class="list-left">扣款</view>
						<view class="list-right">
							<view class="list-font">
								￥{{item.deduct}}
							</view>
							<image class="jtr" src="../../static/img/jt.png" mode=""></image>
						</view>
					</view>
					<view class="child-item" @click="navTo('/pages/salary/infoSalary?type=2')">
						<view class="list-left">奖励</view>
						<view class="list-right">
							<view class="list-font">
								￥{{item.award}}
							</view>
							<image class="jtr" src="../../static/img/jt.png" mode=""></image>
						</view>
					</view>
					<view class="child-item" @click="navTo('/pages/salary/infoSalary?type=3')">
						<view class="list-left">其他</view>
						<view class="list-right">
							<view class="list-font">
								￥{{item.other}}
							</view>
							<image class="jtr" src="../../static/img/jt.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						time: '2022年11月15日',
						all: 5000,
						more: 0,
						base: 3000,
						deduct: 500,
						award: 500,
						other: 500
					},
					{
						time: '2022年11月15日',
						all: 5000,
						more: 0,
						base: 3000,
						deduct: 500,
						award: 500,
						other: 500
					},
					{
						time: '2022年11月15日',
						all: 5000,
						more: 0,
						base: 3000,
						deduct: 500,
						award: 500,
						other: 500
					},
					{
						time: '2022年11月15日',
						all: 5000,
						more: 0,
						base: 3000,
						deduct: 500,
						award: 500,
						other: 500
					},
					{
						time: '2022年11月15日',
						all: 5000,
						more: 0,
						base: 3000,
						deduct: 500,
						award: 500,
						other: 500
					},
					{
						time: '2022年11月15日',
						all: 5000,
						more: 0,
						base: 3000,
						deduct: 500,
						award: 500,
						other: 500
					},
					{
						time: '2022年11月15日',
						all: 5000,
						more: 0,
						base: 3000,
						deduct: 500,
						award: 500,
						other: 500
					},
					{
						time: '2022年11月15日',
						all: 5000,
						more: 0,
						base: 3000,
						deduct: 500,
						award: 500,
						other: 500
					},
					{
						time: '2022年11月15日',
						all: 5000,
						more: 0,
						base: 3000,
						deduct: 500,
						award: 500,
						other: 500
					}
				]
			};
		},
		onLoad() {},
		onShow() {},
		onReachBottom() {},
		onReady() {},
		methods: {
			more(item) {
				if (item.more == 0) {
					item.more = 1
				} else {
					item.more = 0
				}
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style lang="scss">
	page,
	.content {
		min-height: 100%;
		height: auto;
		background: #ffffff;
	}

	.top {
		height: 20rpx;
		width: 750rpx;
		background: #f8f8f8;
	}

	.main {
		padding-bottom: 50rpx;

		.main-title {
			padding: 32rpx 34rpx 28rpx 28rpx;
			border-bottom: 1px solid #F2F2F2;

			.title-font {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}
		}

		.child-list {
			background: #f8f8f8;
			padding: 0 34rpx 0 28rpx;
		}

		.child-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 0 28rpx 0;
			border-bottom: 1px solid #f2f2f2;
		}

		.main-list {
			padding: 32rpx 34rpx 28rpx 28rpx;
		}

		.list-left {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}

		.list-right {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.list-font {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-right: 10rpx;
			}

			.red {
				color: #FF4C4C;
			}

			.jt {
				width: 19rpx;
				height: 11rpx;
			}

			.jtr {
				width: 11rpx;
				height: 19rpx;
			}
		}
	}
</style>