teamDetail/pages/companyRewards/index.vue

<template>
	<view>
		<view class="showErr" v-show="showErr">
			<image src="../../static/img/no_record.png" mode="widthFix"></image>
		</view>
		<view v-show="!showErr" class="nav">
			<view class="nav_top">
				<view class="title">
					代理公司月进货业绩奖励
				</view>
			</view>
			<view class="nav_middle">
				<view class="yuan" />
				<view class="mingxi">
					<view class="mingxi_ying" />
					<view class="mingxi_title">
						{{ data.year }}年{{ data.month }}月
					</view>
					<view class="list">
						<view class="list_title">
							进货明细及金额
						</view>
						<view class="list_table">
							<view class="top flexS">
								<text style="margin-right: 10rpx;">款式</text>
								<text>数量</text>
								<text>单价</text>
								<text style="margin-left: 20rpx;">总金额</text>
							</view>
							<view class="item flexS" v-for="(item, index) in data.detail" :key="index">
								<text>{{ item.good_name.substring(item.good_name.length - 3, item.good_name.length) }}</text>
								<text>{{ item.num }}</text>
								<text>￥{{ Number(item.price) }}</text>
								<text>￥{{ Number(item.money) }}</text>
							</view>
						</view>
						<view class="list_right">
							<text class="text1">共{{ allNum }}套/件，</text>
							<text>合计；</text>
							<text class="red">￥{{ allMoney }}</text>
						</view>
					</view>
				</view>
				<view class="tip flexC">
					<view class="flexS">
						<text class="bold">满足区间</text>
						<text>{{ data.money_between }}</text>
					</view>
					<view class="flexS">
						<text class="bold">奖励比例</text>
						<text>{{ data.scale }}</text>
					</view>
					<view class="flexS">
						<text class="bold">奖励金额</text>
						<text class="red">￥{{ Number(data.reward_money) }}</text>
					</view>
				</view>
				<view class="zhanghu flexC">
					<view class="zhanghu_title">
						收款账户信息
					</view>
					<view class="flexS">
						<text class="left">姓名</text>
						<text>{{ data.account_name }}</text>
					</view>
					<view class="flexS">
						<text class="left">账户</text>
						<text>{{ NewCar(data.account_number) }}</text>
					</view>
					<view class="flexS">
						<text class="left">银行</text>
						<text>{{ data.account_bank }}</text>
					</view>
					<view class="flexS">
						<text class="red left" style="font-weight: bold;">奖励是否发放完毕</text>
						<text class="red">{{ Number(data.reward_money)  >=  Number(data.real_money) ? '是' : '否' }}</text>
						<!-- <text class="left">奖励是否发放完毕</text>
						<text :class="Number(data.reward_money)  >=  Number(data.real_money) ? 'green' : 'red'">{{ Number(data.reward_money)  >=  Number(data.real_money) ? '是' : '否' }}</text> -->
					</view>
				</view>
				<view class="jiangliTittle">
					奖励发放详情
				</view>
				<view class="jiangli" :class="index == 0?'border1': 'border2'" v-for="(item, index) in moneyList" :key="index">
					<view class="flexS">
						<text class="left">发放金额</text>
						<text>￥{{ item.money }}</text>
					</view>
					<view class="flexS">
						<text class="left">发放时间</text>
						<text>{{ item.time }}</text>
					</view>
					<view class="flexS">
						<text class="left">发放方式</text>
						<text>{{ item.send_way }}</text>
					</view>
					<view class="flexS">
						<text class="left">备注</text>
						<text class="remark">{{ item.remark }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { GetRewardCrown } from '../../api/index.js';
	export default {
		data() {
			return {
				showErr: false,
				id: '',
				token: '',
				data: {},
				allNum: 0,
				allMoney: 0,
				status: '',
				moneyList: []
			}
		},
		onLoad(){
			this.id = this.$route.query.id
			this.token = this.$route.query.token
			this.getInfo()
		},
		methods: {
			NewCar(v) {
				if (v) {
					// v = "6217853600008665059"
					return v.replace(/^(\d{4})\d+(\d{4})$/,'$1********$2')
				}
			},
			getInfo() {
				GetRewardCrown({ id: this.id, token: this.token }).then(res => {
					if (res.code == 200) {
						this.showErr = false
						this.data = res.data
						let that = this
						this.data.detail.forEach(e => {
							that.allNum += e.num
							that.allMoney += Number(e.money)
						})
						const { log } = res.data
						this.moneyList = JSON.parse(log)
					} else {
						this.showErr = true
					}
				}).catch(err => {
					this.showErr = true
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
		color: #333;
		font-size: 28rpx;
	}
	.flexS {
		display: flex;
		// align-items: center;
		justify-content: space-between;
	}
	.flexC {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	.red {
		color: #FB231F;
		// font-weight: bold;
	}
	.green {
		color: #67C23A;
		font-weight: bold;
	}
	.showErr {
		height: 100vh;
		background-color: #fff;
		text-align: center;
		image {
			width: 70%;
			margin-top: 200rpx;
		}
	}
	.nav {
		padding-bottom: 52rpx;
		&_top {
			height: 244rpx;
			background: linear-gradient(90deg, #5FBC23 0%, #85CE52 100%);
			.title {
				font-size: 38rpx;
				text-align: center;
				font-weight: bold;
				color: #fff;
				padding-top: 20rpx;
			}
		}
		&_middle {
			margin-top: -132rpx;
			.yuan {
				width: 100%;
				height: 28rpx;
				background: #419F05;
				border-radius: 490rpx 490rpx 490rpx 490rpx;
			}
			.mingxi {
				background-color: #fff;
				margin: -14rpx 24rpx 0 24rpx;
				border-radius: 0px 0px 16rpx 16rpx;
				&_ying {
					height: 24rpx;
					background: linear-gradient(180deg, #419F05 0%, rgba(65,159,5,0) 100%);
					opacity: 0.49;
				}
				&_title {
					font-size: 48rpx;
					font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
					font-weight: bold;
					color: #419F05;
					margin: 8rpx 0 36rpx 0;
					text-align: center;
				}
				.list {
					padding: 0 24rpx 36rpx 24rpx;
					&_title {
						font-size: 34rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}
					&_table {
						margin-top: 24rpx;
						padding: 24rpx 0 32rpx 0;
						background: #F9F9FB;
						.top {
							padding-bottom: 20rpx;
							border-bottom: 2rpx solid #EEEEEE;
							text {
								text-align: center;
								display: inline-block;
								width: 25%;
								font-size: 30rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
							}
						}
						.item {
							margin-top: 30rpx;
							text {
								width: 25%;
								text-align: center;
								display: inline-block;
								font-size: 30rpx;
								font-family: PingFang SC-Bold, PingFang SC;
							}
						}
					}
					&_right {
						text-align: right;
						margin-top: 24rpx;
						text {
							font-size: 28rpx;
							font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
							font-weight: bold;
						}
						.text1 {
							color: #999999;
						}
					}
				}
			}
			.tip {
				border-top: 2rpx dashed #CCCCCC;
				margin: 0 24rpx;
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				height: 180rpx;
				font-size: 30rpx;
				.bold {
					font-weight: bold;
					font-size: 32rpx;
				}
			}
			.zhanghu {
				margin: 24rpx;
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				height: 328rpx;
				border-top: 20rpx #D3EDC0 solid;
				&_title {
					font-size: 34rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				text {
					font-size: 30rpx;
				}
				.left {
					font-size: 32rpx;
				}
			}
			.jiangliTittle {
				padding: 24rpx 24rpx 0 24rpx;
				margin: 24rpx 24rpx 0 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 0 0;
				border-top: 20rpx #D3EDC0 solid;
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				padding-top: 24rpx;
			}
			.border1 {
				border-radius: 0 0 16rpx 16rpx;
			}
			.border2 {
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border-top: 2rpx dashed #CCCCCC;
			}
			.jiangli {
				padding: 24rpx 24rpx 0 24rpx;
				margin: 0 24rpx;
				background: #FFFFFF;
				&_title {
					font-size: 34rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				text {
					font-size: 30rpx;
					display: inline-block;
					margin-bottom: 24rpx;
				}
				.left {
					font-size: 32rpx;
				}
				.remark {
					width: 360rpx;
					text-align: right;
				}
			}
		}
	}
</style>