agent-app/agentApp/pages/merchant-index/index.vue

<template>
	<view class="app-container">
		<view class="agent-content">
			<view class="avatar-information">
				<view class="avatar-container">
					<image class="avatar-img" v-if="accountInfo.logo" :src="accountInfo.logo" alt="" />
					<image class="avatar-img" v-else src="/static/index/head-sculpture.png" alt="" />
				</view>
				<view class="information-content">
					<view class="information-name">{{accountInfo.name}}</view>
					<view class="address-text">地址：{{accountInfo.address || '未填写地址'}}</view>
				</view>
			</view>
			<view class="information-id-content">
				<view class="content-id-item">
					<view class="id-text">
						商户ID：
					</view>
					<view class="id-value">
						{{accountInfo.id}}
					</view>
				</view>
				<view class="information-alipay-content" @click="toManagement()">
					<view>
						<text>支付宝余额：￥{{accountInfo.wallet_balance}}</text>
					</view>
					<view>
						<text>提现管理 >></text>
					</view>
				</view>

			</view>
			<view class="revenue-information" @click="handlerOrder">
				<view class="projected-revenue-content">
					<view class="projected-revenue-item">
						<view class="character-style">￥</view>
						<view class="character-price">{{accountInfo.waiting_revenue}}</view>
					</view>
					<view class="revenue-item-text">
						<view class="character-text">预计到账收益</view>
						<image class="help-icon"
							src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/help-icon.png" />
					</view>
				</view>
				<view class="segmentation"></view>
				<view class="projected-revenue-content">
					<view class="projected-revenue-item">
						<view class="character-style">￥</view>
						<view class="character-price">{{accountInfo.received_revenue}}</view>
					</view>
					<view class="revenue-item-text">
						<view class="character-text">总到账收益</view>
						<image class="help-icon"
							src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/help-icon.png" />
					</view>
				</view>
			</view>
			<view class="recent-orders-content">
				<view class="recent-orders-title">
					<image class="title-stlye" src="/static/index/merchant-title-style.png" alt="" />
					<view class="title-text">最近订单</view>
				</view>
				<view class="ordering-information" v-for="order in orderList" :key="order.out_trade_no">
					<view class="order-number">订单编号 {{order.out_trade_no}}</view>
					<view class="ordering-information-item">
						<view class="ordering-pic">
							<image v-if="accountInfo.logo" class="order-chart" :src="accountInfo.logo" alt="" />
							<image v-else class="order-chart" src="/static/index/order-chart.png" alt="" />
						</view>
						<view class="ordering-text">
							<view class="ordering-text-title">{{accountInfo.name}}</view>
							<view class="amount-list">
								<view class="amount-of-money">订单金额：<span class="price-style">￥{{order.amount}}</span></view>
								<view class="amount-of-money">分成金额：<span class="price-style">￥{{share_amount(order)}}</span></view>
							</view>
							<view class="amount-list">
								<view class="amount-of-money">扣手续费：<span class="price-style">￥{{order.merchant_fee}}</span></view>
								<view class="amount-of-money">实际收益：<span class="price-style">￥{{order.merchant_income}}</span></view>
							</view>
							<view class="order-time">订单时间：{{order.paid_at}}</view>
						</view>
					</view>
					<view class="order-status">
						<button class="refund-button" v-if="order.refund_status==0" @click="orderRefund(order)">退款</button>
						<button class="refunded-button-style" v-if="order.refund_status==1">退款中...</button>
						<text class="refunded-style-success" v-if="order.refund_status==2">退款成功</text>
						<text class="refunded-style-reject" v-if="order.refund_status==3">退款失败：{{order.refund_fail_reason}}</text>
					</view>
					<view class="divider-style"></view>
				</view>
			</view>

		<view class="load-more" @click="getOrderList">{{ hasMore ? '加载更多数据...' : '已加载完毕' }}</view>
		</view>
	</view>
</template>
<script>
	import {
		merchantAccountInfo,
		merchantOrderList,
		merchantOrderRefund
	} from '../../common/api.js'

	export default {
		data() {
			return {
				accountInfo: {},
				orderList: [],
				hasMore: true,
				page: 0,
			}
		},
		onLoad() {
			this.getAccountInfo()
			this.getOrderList()
		},
		onReachBottom() {
			this.getOrderList()
		},
		methods: {
			getAccountInfo() {
				merchantAccountInfo().then(data => this.accountInfo = data)
			},
			getOrderList() {
				if (!this.hasMore) {
					return
				}
				this.page++
				merchantOrderList({
					page: this.page,
					page_size: 15
				}).then(data => {
					this.orderList = [...this.orderList, ...data.list]
					this.hasMore = data.has_more
				})
			},
			orderRefund(item) {
				uni.showModal({
					content: '确认退款？',
					success: function (res) {
						if (res.confirm) {
							merchantOrderRefund({
								out_trade_no: item.out_trade_no
							}).then(data => {
								item = Object.assign(item, data.new_attr)
								uni.showModal({
									content: data.refund_msg,
									showCancel: false
								});
							})
						}
					}
				})
			},
			toManagement(){
				uni.navigateTo({
					url:'/pages/merchant-withdrawal-management/merchant-withdrawal-management'
				})
			},
			handlerOrder() {
				// uni.navigateTo({
				// 	url: '/pages/user-orders/user-orders'
				// });
			},
			share_amount: function(order) {
				return (parseFloat(order.merchant_income) + parseFloat(order.merchant_fee)).toFixed(2)
			}
		},
		onNavigationBarButtonTap(e) {
			uni.showModal({
				title: '提示',
				content: '确认注销登录吗？',
				success: function (res) {
					if (res.confirm) {
						uni.reLaunch({
							url: "/pages/merchant-login/index"
						});
						uni.removeStorageSync('merchant_token');
					}
				}
			});
		}
	}
</script>

<style lang="scss">
	.agent-content {
		position: relative;
		width: 100%;
		height: 1500rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background: url(../../static/index/merchant-index-bg.png) no-repeat top center;
		background-size: 100% 100%;
		box-sizing: border-box;

		.avatar-information {
			//display: flex;
			//justify-content: left;
			//align-items: center;
			padding: 30rpx 0;
			
			.avatar-container {
				display: inline-block;
				width: 120rpx;
				
				.avatar-img {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}
			}

			.information-content {
				display: inline-block;
				width: calc(100% - 120rpx - 30rpx);
				margin-left: 30rpx;

				.information-name {
					font-family: PingFangSC-Regular, sans-serif;
					font-size: 32rpx;
					color: #fff;
					font-weight: bold;
				}

				.address-text {
					font-family: PingFangSC-Regular, sans-serif;
					font-size: 24rpx;
					color: #fff;
					margin-top: 15rpx;
				}
			}
		}
		
		.information-alipay-content{
			font-size: 24rpx;
			color: #fff;
			display: flex;
			flex-direction: column;
		}

		.information-id-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 25rpx;
			padding-bottom: 30rpx;

			.content-id-item {
				display: flex;
				justify-content: left;
				align-items: center;

				.id-text {
					font-family: PingFangSC-Regular, sans-serif;
					font-size: 24rpx;
					color: #fff;
				}

				.id-value {
					font-family: PingFangSC-Regular, sans-serif;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}

		.revenue-information {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 200rpx;
			background: url(../../static/index/income-bg.png) no-repeat center center;
			background-size: cover;
			padding: 0 60rpx;

			.projected-revenue-content {
				text-align: center;

				.projected-revenue-item {
					display: flex;
					justify-content: left;
					align-items: baseline;

					.character-style {
						font-family: PingFangSC-Regular, sans-serif;
						font-size: 30rpx;
						color: #454545;
					}

					.character-price {
						font-family: "Din";
						font-size: 50rpx;
						color: #454545;
						font-weight: bold;
						margin-left: 10rpx;
					}
				}

				.revenue-item-text {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 10rpx;
				}

				.character-text {
					font-family: PingFangSC-Regular, sans-serif;
					font-size: 28rpx;
					color: #454545;
					font-weight: bold;
				}

				image.help-icon {
					width: 30rpx;
					height: 30rpx;
					background-size: cover;
					margin-left: 10rpx;
				}
			}

			.segmentation {
				width: 1rpx;
				height: 90rpx;
				background: #E6E3E3;
			}

		}

		.recent-orders-content {
			background: #fff;
			margin-top: -2rpx;

			.recent-orders-title {
				display: flex;
				justify-content: left;
				align-items: center;
				padding: 30rpx;

				image.title-stlye {
					width: 15rpx;
					height: 19rpx;
					background-size: cover;
					margin-right: 20rpx;
				}

				.title-text {
					font-family: PingFangSC-Regular, sans-serif;
					font-size: 30rpx;
					color: #454545;
					font-weight: bold;
				}

			}

			.ordering-information {
				padding-bottom: 30rpx;

				.order-number {
					font-family: PingFangSC-Regular, sans-serif;
					font-size: 26rpx;
					color: #454545;
					padding: 0 30rpx;
				}

				.ordering-information-item {
					display: flex;
					justify-content: left;
					align-items: center;
					padding: 30rpx;

					.ordering-pic {
						width: 120rpx;
						height: 120rpx;
						background-size: cover;
						border-radius: 15rpx;

						image.order-chart {
							width: 120rpx;
							height: 120rpx;
							background-size: cover;
							border-radius: 15rpx;
						}
					}

					.ordering-text {
						margin-left: 30rpx;
						width: 100%;
						line-height: 110%;

						.ordering-text-title {
							font-family: PingFangSC-Regular, sans-serif;
							font-size: 30rpx;
							color: #454545;
						}
						
						.amount-list {
							display: flex;
							justify-content: flex-start;
						}

						.amount-of-money {
							font-family: PingFangSC-Regular, sans-serif;
							font-size: 24rpx;
							color: #999;
							width: 50%;

							span.price-style {
								font-family: PingFangSC-Regular, sans-serif;
								font-size: 24rpx;
								color: #F52F3E;
							}
						}

						.order-time {
							font-family: PingFangSC-Regular, sans-serif;
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.order-status {
					display: flex;
					justify-content: right;
					align-items: center;
					padding: 30rpx 20rpx;
					border-top: 1rpx solid #eeeeee;

					button.refund-button {
						min-width: 120rpx;
						height: 48rpx;
						line-height: 44rpx;
						font-family: PingFangSC-Regular, sans-serif;
						font-size: 24rpx;
						color: #454545;
						border-color: #E5E5E5;
						background: #fff;
						border-radius: 100rpx;
						margin: 0;
						margin-left: 500rpx;
						border: 1rpx solid #E5E5E5;
					}

					button.refunded-button-style {
						min-width: 130rpx;
						height: 48rpx;
						line-height: 44rpx;
						font-family: PingFangSC-Regular, sans-serif;
						font-size: 24rpx;
						color: #999 !important;
						background: #fff;
						border-radius: 100rpx;
						margin: 0;
						margin-left: 500rpx;
						border: 1rpx solid #E5E5E5;
					}
					
					.refunded-style-success {
						height: 48rpx;
						line-height: 44rpx;
						font-family: PingFangSC-Regular, sans-serif;
						font-size: 24rpx;
						color: #38a800 !important;
						margin: 0;
					}
					
					.refunded-style-reject {
						height: 48rpx;
						line-height: 44rpx;
						font-family: PingFangSC-Regular, sans-serif;
						font-size: 24rpx;
						color: #e30000 !important;
						margin: 0;
					}
				}

				.divider-style {
					width: 690rpx;
					height: 10rpx;
					background: #f7f7f7;
				}
			}

		}
	}
	
	.load-more {
		text-align: center;
		font-size: 14px;
	}
</style>