yizhizan-h5/my/wallet/wallet.vue

<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="top" style="position: fixed;top: 0;width: 100%;">
		<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="top" style="position: fixed;top: 0;width: 100%;">
			<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="top" style="position: fixed;top: 0rpx;width: 100%;">
				<!-- #endif -->
					<view class="headbg">
						<view class="flex align-end justify-between" style="padding:60rpx 60rpx 0rpx 60rpx">
							<view>
								<view class="text-lg ">当前钻石</view>
								<view class="margin-top">
									<text class="text-bold margin-right-xs"
										style="font-size: 68upx;">{{money?money:'0'}}</text>
									<image src="../static/jifen.png" style="width: 32upx;height: 34upx;"></image>
								</view>
							</view>
							<view class="">
								<view class="btns" @click="gotoChat()">申请退款 <u-icon
										style="margin-left: 10rpx;padding-top: 5rpx;" name="play-right-fill"
										color="#ffffff" size="24"></u-icon></view>
								<view class="btn" @click="chongzhi()">钻石充值</view>
							</view>

						</view>
						<view class="btns justify-between" style="font-size: 28rpx;padding:20rpx 60rpx 20rpx 60rpx">
							<view class="">
								<!-- 	定制化抵扣积分：{{customizationMoney}}
						<u-icon @click.native="show = true" style="margin-left: 10rpx;padding-top: 5rpx;" name="question-circle-fill" color="#ffffff" size="34"></u-icon> -->
							</view>
							<view class="" v-if="weekMember!=1">
								<view class="btn" @click="gotoZhouka">开通会员</view>
							</view>
						</view>
					</view>

					<view class="flex align-center padding" style="background-color: #ffffff;">
						<view style="width: 6upx;height: 32upx;background: #00DD9A;"></view>
						<view class="margin-left-xs">钻石明细</view>
					</view>
					<view style="width: 100%;height: 1upx;background: #F2F2F2;"></view>
				</view>
				<!-- #ifdef H5 -->
				<view class="" style="width: 100%;margin-top: 450rpx;">
				<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="" style="width: 100%;margin-top: 450rpx;">
					<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<view class="" style="width: 100%;margin-top: 450rpx;">
						<!-- #endif -->
							<view class="margin-lr margin-top" v-for="(item,index) in list" :key="index"
								style="border-bottom: 1rpx solid #F2F2F2;padding-bottom: 10rpx;">
								<view class="flex align-center justify-between">
									<view>
										<view class="" style="color: #000;">{{item.title}}</view>
										<view style="color: #999999;" class="text-sm margin-top-sm">{{item.createTime}}
										</view>
									</view>
									<view class="flex align-center">
										<view style="font-size: 44upx;" v-if="item.type == 2">-</view>
										<view style="font-size: 44upx;" v-else>+</view>
										<view class="text-bold" style="font-size: 38upx;">{{item.money}}</view>
									</view>
								</view>
							</view>
							<empty v-if="list.length==0" />
						</view>



						<u-modal v-model="show" :content="content"></u-modal>
					</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				content: '定制化抵扣积分可用于抵扣发布项目',
				show: false,
				money: '',
				page: 1,
				limit: 10,
				list: [],
				count: 0,
				customizationMoney: 0,
				weekMember: '',
			}
		},
		onLoad() {
			this.getMyMoney()
			this.getmoneyList()
			this.weekMember = uni.getStorageSync('weekMember')
		},
		onShow() {
			this.page = 1
			this.getMyMoney()
			this.getmoneyList();
		},
		methods: {
			gotoZhouka() {
				uni.navigateTo({
					url: '/my/vip/index'
				})
			},
			gotoChat() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '联系客服后1-7个工作日内退回',
					confirmText: '联系客服',
					complete(ret) {
						if (ret.confirm) {
							// #ifdef MP-WEIXIN
							wx.openCustomerServiceChat({
								extInfo: {
									url: that.$queue.getData('kefuq')
								},
								corpId: that.$queue.getData('kefuAppidq'),
								success(res) {
									console.log(res)
								},
							})
							// #endif
							// #ifdef H5
							window.location.href = that.$queue.getData('kefuq');
							// #endif
							// #ifdef APP
							let kefu = that.$queue.getData('kefuq')
							console.log(kefu)
							plus.runtime.openURL(kefu, function(res) {});
							// #endif
							// uni.navigateTo({
							// 	url:'/my/setting/chat'
							// })
						}
					}

				})

			},
			getMyMoney() {
				this.$Request.get("/app/userMoney/selectMyMoney").then(res => {
					if (res.code == 0) {
						this.money = res.data.money
						this.customizationMoney = res.data.customizationMoney
					}
				})
			},
			chongzhi() {
				uni.navigateTo({
					url: '/my/wallet/index'
				})
			},
			getmoneyList() {
				let data = {
					page: this.page,
					limit: this.limit,
					classify: 1
				}
				this.$Request.get("/app/userMoney/balanceDetailed", data).then(res => {
					if (res.code == 0) {
						if (this.page == 1) {
							this.list = res.data.records
						} else {
							res.data.records.forEach(d => {
								this.list.push(d);
							});
						}
						this.count = res.data.totalCount
					} else {
						console.log(res.msg)
					}
					uni.stopPullDownRefresh();
				})
			}

		},
		onReachBottom: function() {
			if (this.list.length == this.count) {
				uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				})
			} else {
				this.page = this.page + 1;
				this.getmoneyList()
			}

		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getmoneyList()
		},
	}
</script>

<style lang="less">
	page {
		background: #ffffff;
	}

	.headbg {
		background: #00DD9A;
		color: #ffffff;
	}

	.btn {
		width: 180rpx;
		height: 70rpx;
		background: #FFFFFF;
		border-radius: 35rpx;
		color: #00B88F;
		font-size: 28rpx;
		font-weight: 500;
		display: flex;
		justify-content: center;
		align-items: center;
		float: right;
	}

	.btns {
		padding-left: 70rpx;
		padding-bottom: 30rpx;
		padding-top: 30rpx;
		display: flex;
		align-items: center;
	}
</style>