jszPhone/pages/shareholder/certificate/red.vue

<template>
	<view :style="colorStyle">
		<view class='commission-details'>
			<view class="nav">
				<view class="nav-item" :class="{'action': type == 1}" @click="getYjList(1)">
					原始股
				</view>
				<view class="nav-item" :class="{'action': type == 2}" @click="getYjList(2)">
					分红股
				</view>
			</view>
			<view class='sign-record'>
				<view class="top_num">
					分红股：{{bonus_share}} &nbsp;&nbsp;&nbsp; 原始股：{{initial_share}}
				</view>
				<view class="box">
					<block v-for="(item,index) in recordList" :key="index" v-if="recordList.length>0">
						<view class='list' @click="showDetail(item)">
							<view class='item'>
								<view class='listn'>
									<view class='itemn1 acea-row row-between-wrapper'>
										<view class="flex-g">
											<view class="mark">
												{{item.content}}
											</view>
											<view>{{item.create_time}}</view>
										</view>
										<template>
											<view class='num font-color' v-if="item.pm == 1">+{{item.shareholding}}
											</view>
											<view class='num' v-else>-{{item.shareholding}}</view>
										</template>
									</view>
								</view>
							</view>
						</view>
					</block>
					<view class='loadingicon acea-row row-center-wrapper' v-if="recordList.length > 0">
						<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
					</view>
					<view v-if="recordList.length == 0">
						<emptyPage title="暂无记录~"></emptyPage>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		lst
	} from '@/api/shareholder.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import emptyPage from '@/components/emptyPage.vue'
	import colors from '@/mixins/color.js';
	export default {
		components: {
			emptyPage,
		},
		mixins: [colors],
		data() {
			return {
				type: 1,
				page: 1,
				limit: 15,
				loading: false,
				loadend: false,
				loadTitle: '加载更多',
				recordList: [],
				initial_share: 0,
				bonus_share: 0,
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			this.type = options.type||1;
			if (!this.isLogin) {
				toLogin();
			}
		},
		onShow: function() {
			this.getRecordList();
		},
		methods: {
			getYjList(type) {
				let that = this;
				if (type == that.type) {
					return
				}
				that.type = type;
				that.page=1;
				that.loading = false
				that.loadend = false
				that.recordList = []
				that.getRecordList()
			},
			getRecordList: function() {
				let that = this;
				let page = that.page;
				let limit = that.limit;
				let recordType = that.recordType;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				lst({
					type: that.type,
					page: page,
					limit: limit
				}, recordType).then(res => {
					this.recordList = this.recordList.concat(res.data.list)
					let loadend = res.data.list.length < that.limit;
					that.bonus_share = +res.data.bonus_share;
					that.initial_share = +res.data.initial_share;
					that.loadend = loadend;
					that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
					that.page += 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				})
			},
			// 显示详细
			showDetail(item) {
				console.log(item);
				if (this.type == 6) {
					if (item.recharge) {
						uni.showModal({
							title: '充值订单',
							content: `用户ID：${item.recharge.uid},充值${item.recharge.price}获得销售业绩`,
							showCancel: false,
						});
					}
					if (item.subscribe) {
						const info = item.info[0];
						uni.showModal({
							title: '服务项目',
							content: `订单：${item.order_name},用户：${item.real_name},项目：${info.store_name},支付金额：${info.pay_price}`,
							showCancel: false,
						});
					}
					if (item.store) {
						uni.showModal({
							title: '普通商品',
							content: `订单：${item.order_id},用户：${item.store.real_name},支付金额：${item.store.pay_price}获得销售业绩`,
							showCancel: false,
						});
					}
				} else {
					if (item.mark) {
						uni.showModal({
							title: '详细说明',
							content: item.mark,
							showCancel: false,
						});
					} else if (item.content) {
						uni.showModal({
							title: '详细说明',
							content: item.content,
							showCancel: false,
						});
					}
				}
			},
			navto(url) {
				uni.navigateTo({
					url
				})
			},
			submitForm() {
				this.page = 1;
				this.limit = 20;
				this.loadend = false;
				this.status = false;
				this.$set(this, 'recordList', []);
				this.getRecordList();
			},
		},
		onReachBottom: function() {
			this.getRecordList();
		}
	}
</script>

<style scoped lang="scss">
	.box {
		border-radius: 14rpx;
		margin: 0 30rpx;
		overflow: hidden;
	}

	.sign-record {
		margin-top: 20rpx;
	}

	.top_num {
		padding: 10rpx 30rpx 30rpx 30rpx;
		font-size: 26rpx;
		color: #666;
	}


	.sign-record {
		.list {
			.item {
				.listn {
					.itemn1 {
						border-bottom: 1rpx solid #eee;
						padding: 22rpx 24rpx;
						flex-wrap: nowrap;

						.flex-g {
							flex-grow: 1;
							padding-right: 30rpx;

							.status {
								font-size: 28rpx;
							}
						}

						.name {
							font-size: 28rpx;
							color: #282828;
							margin-bottom: 10rpx;
						}

						.num {
							font-size: 36rpx;
							font-family: 'Guildford Pro';
							color: #16ac57;

							&.font-color {
								color: #e93323 !important;
							}
						}
					}
				}
			}
		}
	}

	.mark {
		margin-bottom: 10rpx;
	}

	.success {
		background: rgba(24, 144, 255, .1);
		color: #1890FF;
	}

	.default {
		background: #f5f5f5;
		color: #282828;
	}

	.error {
		background: rgba(233, 51, 35, .1);
		color: #E93323;
	}

	.nav {
		display: flex;
		justify-content: space-evenly;

		.nav-item {
			width: 50%;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			background-color: #fff;
		}

		.action {
			color: #1890FF;
			font-weight: bold;
			border-bottom: 2px solid #1890FF;
			font-size: 32rpx;
		}
	}
</style>