odd_job_applet/pages/broker/income.vue

<template>
	<view>
		
		<view class="padding bg-themeRed">
			<view class="text-center padding-top">
				<view class="text-sl padding-bottom-xs">{{brokerinfo.income}}</view>
				<view>
					当前{{income_title}}
				</view>
				<view class="margin-top-sm" v-if="brokerinfo.type == 1">
					<button class="cu-btn round" data-name="cash" @tap="showModal" v-if="agentinfo.is_settle == 2">提现申请</button>
				</view>
			</view>
			<view class="flex solid-bottom padding-top justify-between">
				<view>上月获得：<text>{{month_income}}</text> {{income_unit}}</view>
				<view>累计已获：<text>{{brokerinfo.income_total}}</text> {{income_unit}}</view>
			</view>
		</view>
		
		<view class="cu-list menu">
			<block v-for="(item,index) in plist" :key="index">
				<view class="cu-item">
					<view class="content padding-tb-sm padding-right-sm">
						<view>
							{{item.title}}
						</view>
						<view class="text-gray text-sm">{{item.createtime}}</view>
						<view class="text-gray text-sm">
							{{item.remark}}
						</view>
					</view>
					<view class="action text-red">
						<view :class="item.status == 2 ? 'text-blue' : 'text-red'">{{item.status_text}}</view>
						<view class="text-red">{{item.value > 0 ? '+' : ''}}{{item.value}}{{income_unit}}</view>
					</view>
				</view>
			</block>
		</view>
		
		<uni-load-more :status="pstatus"></uni-load-more>
		
		
		<view class="cu-modal" :class="modalinfo.name=='cash'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提现申请</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-grey"></text>
					</view>
				</view>
				<view class="padding-xl bg-white solid-top solid-bottom">
					<input type="number" placeholder="请输入提现金额..." data-name="value" @input="bindInput" :value="modalinfo.value" />
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-grey text-grey" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="cashModal">提交申请</button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				agentinfo: {},
				brokerinfo: {},
				month_income: 0,
				
				modalinfo: {
					name: null,
					value: "",
				},
				
				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: []
			};
		},
		onLoad: function(){
			_this = this;
			_this.brokerinfo = uni.getStorageSync('brokerinfo') || false;
			if (_this.brokerinfo===false){
				uni.reLaunch({
					url: "/pages/my/my"
				});
				return false;
			}
			_this.getAgent();
			_this.getIncome();
			_this.getMore();
		},
		onPullDownRefresh: function() {
			_this.ppage = 1;
			_this.pstatus = 'more';
			_this.plist = [];
			_this.getMore();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		methods: {
			showModal: function(e) {
				_this.modalinfo.name = e.currentTarget.dataset.name;
			},
			hideModal: function() {
				_this.modalinfo.name = null;
			},
			bindInput: function(e) {
				var name = e.currentTarget.dataset.name;
				_this.modalinfo[name] = e.detail.value;
			},
			cashModal: function() {
				_this.$req.ajax({
					path: "broker/cash",
					data: {
						value: _this.modalinfo.value,
						brokerid: _this.brokerinfo.id
					}
				}).then((data) => {
					_this.hideModal();
					uni.showModal({
						title: '信息提示',
						content: '申请成功，请等待审核',
						showCancel: false,
						success: function() {
							_this.ppage = 1;
							_this.pstatus = 'more';
							_this.plist = [];
							_this.getMore();
						},
					});
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			getAgent: function() {
				_this.$req.ajax({
					path: "broker/agent",
					data: {
						agentid: _this.brokerinfo.agentid
					}
				}).then((data) => {
					_this.agentinfo = data;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			getMore: function() {
				_this.$req.ajax({
					path: "broker/getIncome",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						brokerid: _this.brokerinfo.id
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			getIncome: function() {
				_this.$req.ajax({
					path: "broker/brokerIncome",
					data: {
						brokerid: _this.brokerinfo.id 
					}
				}).then((data) => {
					_this.brokerinfo = data.broker;
					_this.month_income = data.month_income;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			goLPage: function(pageurl) {
				_this.userinfo = _this.checkLogin("/pages/my/my");
				if (_this.userinfo===false){
					return false;
				}
				uni.navigateTo({
					url: pageurl,
					fail: function(){
						uni.switchTab({
						    url: pageurl
						});
					}
				});
			},
			
			goNavPage: function(pageurl) {
				_this.userinfo = _this.checkLogin("/pages/my/my");
				if (_this.userinfo===false){
					return false;
				}
				uni.redirectTo({
					url: pageurl
				});
			},
		},
		computed: {
			income_title() {
				return _this.brokerinfo.type == 1 ? '收益' : '积分';
			},
			income_unit() {
				return _this.brokerinfo.type == 1 ? '元' : '分';
			},
		},
	}
</script>

<style>
	.cu-list.menu-avatar .cu-item{ height: 170rpx !important; }
</style>