jszPhone/pages/shareholder/certificate/init.vue

<template>
	<view :style="colorStyle">
		<view class='commission-details'>
			<view class='sign-record'>
				<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>
												发放{{item.month}}分红奖金
											</view>
											<view class="mark">{{item.type==2?'分红股':'原始股'}}: {{item.share}}股</view>
											<view>{{item.create_time}}</view>
										</view>
										<view class='num'>
											<view class="font-color">￥{{item.price}}</view>
										</view>
									</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 {
		userShareholderList
	} 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: [],
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			this.type = options.type || 1;
			if (!this.isLogin) {
				toLogin();
			}
		},
		onShow: function() {
			this.getRecordList();
		},
		methods: {
			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 = '';
				userShareholderList({
					page: page,
					limit: limit
				}, recordType).then(res => {
					let arr = res.data.list.map((rs) => {
						rs.month = rs.month.replace('-', '年') + '月'
						return rs
					})
					this.recordList = this.recordList.concat(arr)
					let loadend = arr.length < that.limit;
					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-top: 10rpx;
		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;
	}
</style>