odd_job_applet/pages/my/myintegral.vue

<template>
	<view>
		
		<view class="padding bg-blue">
			<view class="text-center padding-top">
				<view class="text-sl padding-bottom-xs">{{userinfo.integral}}</view>
				<view>
					可用积分
					<text data-name="tomoney" @tap="goPage('/pages/my/getmoney')" v-if="userparam.inttomoney>0">（我要兑现）</text> 
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="margin-top-sm" v-if="userparam.intrecharge>0">
					<button class="cu-btn round" data-name="torecharge" @tap="showModal">积分充值</button>
				</view>
				<!-- #endif -->
			</view>
			<view class="flex solid-bottom padding-top justify-between">
				<view>上月获得：<text>{{monthintegral}}</text> 分</view>
				<view>累计已获：<text>{{userinfo.inttotal}}</text> 分</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.itype_text}}】
							{{item.title}}
							<block v-if="item.itype==3">（金额：￥{{item.intmoney}}元）</block>
						</view>
						<view class="text-gray text-sm">{{item.createtime}}</view>
						<view class="text-gray text-sm">
							<text class="padding-right-xs" v-if="item.itype==3 && item.status==1">[待处理]</text>
							<text class="padding-right-xs" v-if="item.itype==3 && item.status==2">[已成功]</text>
							
							<text class="padding-right-xs" v-if="item.itype==2 && item.status==1">[待支付]</text>
							<text class="padding-right-xs" v-if="item.itype==2 && item.status==2">[已成功]</text>
							{{item.remark}}
						</view>
					</view>
					<view class="action" v-if="item.intvalue>0">+{{item.intvalue}}</view>
					<view class="action" v-else>{{item.intvalue}}</view>
				</view>
			</block>
		</view>
		
		<uni-load-more :status="pstatus"></uni-load-more>
		
		<view class="cu-modal" :class="modalinfo.name=='tomoney'?'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="tomoneyvalue" @input="bindInput" :value="modalinfo.tomoneyvalue" />
					<view class="padding text-gray text-sm">{{userparam.inttomoney}}积分可兑现1元（最低提现积分额：{{userparam.minintegral}}积分）</view>
				</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="moneyModal">确定兑现</button>
					</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalinfo.name=='torecharge'?'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="torechargevalue" @input="bindInput" :value="modalinfo.torechargevalue" />
					<view class="padding-top padding-lr text-gray text-sm">当前充值金额可得：<text class="text-red padding-right-xs">{{userparam.intrecharge * parseFloat(modalinfo.torechargevalue)}}</text> 积分</view>
					<view class="padding text-gray text-sm">充值一元可得 {{userparam.intrecharge}} 积分（只支持整数金额）</view>
				</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="rechargeModal">确定支付</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 {
				userparam: {},
				userinfo: {},
				monthintegral: 0,
				
				modalinfo: {
					name: null,
					tomoneyvalue: "",
					torechargevalue: ""
				},
				
				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: []
			};
		},
		onLoad: function(){ 
			_this = this;
			_this.userinfo = _this.checkLogin("/pages/my/myintegral");
			if (_this.userinfo===false){
				return false;
			}
			_this.myIntegral();
		},
		onPullDownRefresh: function() {
			_this.ppage = 1;
			_this.pstatus = 'more';
			_this.plist = [];
			_this.getMore();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		methods: {
			// 填写字段
			hideModal: function() {
				_this.modalinfo.name = null;
			},
			showModal: function(e) {
				_this.modalinfo.name = e.currentTarget.dataset.name;
			},
			bindInput: function(e) {
				var name = e.currentTarget.dataset.name;
				_this.modalinfo[name] = e.detail.value;
			},
			moneyModal: function() {
				_this.$req.ajax({
					path: "my/getmoney",
					data: {
						intvalue: parseInt(_this.modalinfo.tomoneyvalue),  
						userid: _this.userinfo.id
					}
				}).then((data) => {
					_this.userinfo = data.user;
					uni.startPullDownRefresh();
					_this.hideModal();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			rechargeModal: function() {
				_this.$req.ajax({
					path: "my/getrecharge",
					data: {
						moneyvalue: _this.modalinfo.torechargevalue,
						userid: _this.userinfo.id
					}
				}).then((data) => {
					var payinfo = data.payinfo;
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: payinfo.timeStamp.toString(),
						nonceStr: payinfo.nonceStr,
						package: payinfo.package,
						signType: payinfo.signType,
						paySign: payinfo.paySign,
						success: function(res) {
							uni.showModal({
								title: '信息提示',
								content: '积分充值成功。',
								showCancel: false,
								success: function(res) {
									_this.ppage = 1;
									_this.pstatus = 'more';
									_this.plist = [];
									_this.myIntegral();
									_this.hideModal();
								}
							});
						},
						fail: function(err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
					_this.isRotate = false;
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.isRotate = false;
				});
			},
			
			getMore: function() {
				_this.$req.ajax({
					path: "my/getintegral",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						userid: _this.userinfo.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
					});
				});
			},
			
			myIntegral: function() {
				_this.$req.ajax({
					path: "my/myintegral",
					data: {
						userid: _this.userinfo.id 
					}
				}).then((data) => {
					_this.userparam = data.userparam;
					_this.userinfo = data.user;
					_this.monthintegral = data.monthintegral;
					_this.getMore();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			goPage: function(pageurl) {
				uni.navigateTo({
					url: pageurl,
					fail: function() {
						uni.switchTab({
							url: pageurl
						});
					}
				});
			},
		}
	}
</script>

<style>
</style>