dl_uniapp/pages/mine/points/points.vue

<template>
	<view class="suggest-content">
		<navigation-bar-vue title="积分明细" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="card-detail">
			<view class="top-box">
				<view class="left-dom">
					<view class="left-dom-top">
						<image src="@/static/mine/points.png" mode="aspectFit">
						</image>可用积分
					</view>
					<view class="left-dom-bottom">{{pointsBalance}}</view>
				</view>
				<view>
					<view class="right-dom" @click="outData()">提现</view>
					<view class="tips">
						<uni-icons type="info" size="12"></uni-icons>
						1积分=0.1元
					</view>
				</view>

			</view>
			<view v-if="!ifMember" class="huiyuan-box">
				<view class="dl-member-box" @click="goMemberCard()">
					<view class="dl-left">
						<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
						<text>开通会员 解锁更多权益</text>
					</view>
					<view class="dl-right">
						<view class="dl-go-view">立即开通</view>
					</view>
				</view>
			</view>
			<view v-if="ifHasWaiting" class="daiban-box">
				<view class="daiban-dom" @click="repay()">
					<uni-icons type="chat-filled" size="18" style="padding-right: 10rpx;"></uni-icons>
          您有一笔<text>{{ wayOrder.points }}</text>积分的提现订单，请及时处理
					<uni-icons type="right" size="18" style="padding-left: 10rpx;"></uni-icons>
				</view>
			</view>
			<view class="data-list-box">
				<view class="content-box">
					<view class="dl-opt-box">
						<view class="dl-menu-box" v-for="(item,index) in menus">
							<view @click="itemClick(index,item)" class="dl-menu"
								:class="index==menuIndex?'dl-menu click':'dl-menu'">{{item}}</view>
						</view>
					</view>
					<view
						:class="['data-list',!ifMember?(ifHasWaiting?'no-member-and-wating':'no-member'):(ifHasWaiting?'member-and-wating':'member')]">
						<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus"
							refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
							<view class="item-dom" v-for="(item,index) in dataList">
								<view class="center-box">
									<view class="dl-notice-title">
										<view class="dl-text">{{item.title}}</view>
									</view>
									<view class="dl-bottom-text">{{item.createTime}}</view>
								</view>
								<view :class="['right-box','1'==item.type?'red-text':'']">
									{{'1'==item.type?'+':'-'}}{{item.points}}
								</view>
							</view>
							<view style="text-align: center" v-if="dataList.length==0">
								<image class="" src="@/static/images/nothing.png"></image>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog tixian="true" inputType="number" :money="money" ref="inputClose" mode="input" title="积分提现"
				placeholder="请输入提现积分" @confirm="dialogInputConfirm" @getEndMoney="getEndMoney"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import {
		formatNumberWithCommas
	} from '@/utils/common.js'
	import {
		pointList,
		payout,
		getOnWayOrder
	} from '@/api/business/member.js'
	import {
		toast
	} from '@/utils/common.js'
	import {
		entPay
	} from '@/api/wxApi.js'

	export default {
		components: {
			navigationBarVue,
		},
		data() {
			return {
				//是否是会员
				ifMember: true,
				//是否有待处理订单
				ifHasWaiting: true,
				menus: ['积分收支明细'],
				menuIndex: 0,
				wayOrder: {},
				//积分明细
				dataList: [{
					fromCode: "",
					fromCodeText: "签到送积分",
					title: "用户签到，增加10积分",
					type: "1",
					points: 20,
					createTime: "2024-02-03 12:20:20"
				}, {
					fromCode: "",
					fromCodeText: "签到送积分",
					title: "用户签到，增加10积分",
					type: "1",
					points: 20,
					createTime: "2024-02-03 12:20:20"
				}],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userId: null
				},
				total: 0,
				//下来刷新状态
				isTriggered: false,
				userId: null,
				pointsBalance: 0,
				money: ""
			}
		},

		onLoad(option) {
			this.userId = option.userId
			this.queryParams.userId = option.userId
			this.pointsBalance = option.pointsBalance
			this.initData()
		},
		onShow() {
			this.initWayOrder()
		},

		methods: {
			initWayOrder() {
				getOnWayOrder().then(res => {
					if (res.code == 200) {
						console.log(res, 'res')
						if (res.data) {
							this.wayOrder = res.data
							this.ifHasWaiting = true
						} else {
							this.wayOrder = null
							this.ifHasWaiting = false
						}
					} else {
						this.ifHasWaiting = false
					}
				})
			},

			/**
			 * 格式化数字
			 * @param {Object} number
			 */
			formatNumberWithCommas(number) {
				return formatNumberWithCommas(number)
			},

			/**初始化数据*/
			initData() {
				pointList(this.queryParams).then(res => {
					if (res.code == 200) {
						if (this.queryParams.pageNum == 1) {
							this.dataList = res.data.records
						} else {
							this.dataList = this.dataList.concat(res.data.records)
						}
						this.total = res.data.total
					}
				})
			},
			/**
			 * 计算提现的积分等于多少钱
			 * @param {Object} val
			 */
			getEndMoney(val) {
				if (!val) {
					this.money = "0"
				} else {
					this.money = (val / 10).toFixed(2) + ""
				}

			},
			/**
			 * 提现
			 */
			outData() {
				this.$refs.inputDialog.open()
			},

      repay(){
        // 关闭窗口后，恢复默认内容
        entPay(this.wayOrder.orderNo).then(payS => {
          uni.hideLoading()
          if (wx.canIUse('requestMerchantTransfer')) {
            wx.requestMerchantTransfer({
              mchId: payS.config.mchId,
              appId: payS.config.appId,
              package: payS.runData.packageInfo,
              success: (res) => {
                // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
                console.log('success:', res);
                this.initWayOrder()
                this.initData()
              },
              fail: (res) => {
                console.log('fail:', res);
              },
            });
          } else {
            wx.showModal({
              content: '你的微信版本过低，请更新至最新版本。',
              showCancel: false,
            });
          }
        })
      },

			dialogInputConfirm(val) {
				if (val) {
					uni.showLoading({
						title: '请稍等'
					})
					payout({
						points: val
					}).then(res => {
						if (res.code == 200) {
							// 关闭窗口后，恢复默认内容
							entPay(res.data.orderNo).then(payS => {
								uni.hideLoading()
								if (wx.canIUse('requestMerchantTransfer')) {
									wx.requestMerchantTransfer({
										mchId: payS.config.mchId,
										appId: payS.config.appId,
										package: payS.runData.packageInfo,
										success: (res) => {
											// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
											console.log('success:', res);
										},
										fail: (res) => {
											console.log('fail:', res);
										},
									});
								} else {
									wx.showModal({
										content: '你的微信版本过低，请更新至最新版本。',
										showCancel: false,
									});
								}
							})
							this.$refs.inputDialog.close()
						}
					}).catch((e) => {
						uni.hideLoading()
						toast(e)
					})
				} else {
					toast("请填写提现金额,单次提交金额小于200")
				}

			},
			/**
			 * 菜单点击
			 * @param {Object} index
			 * @param {Object} item
			 */
			itemClick(index, item) {
				this.menuIndex = index
				this.onRefresherrefresh()
			},
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
					toast("没有更多数据了")
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.queryParams.pageNum++
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.queryParams.pageNum = 1
				this.total = 0
			},
		}
	}
</script>

<style lang="scss">
	.suggest-content {
		padding-top: calc(90rpx + var(--status-bar-height));
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 32rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.card-detail {
			border-top: 1rpx solid #F2F2F2;
			background-color: #F2F2F2;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: center;
			position: relative;

			.top-box {
				padding: 20rpx 40rpx 0 40rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.left-dom {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: self-start;
					justify-content: center;

					.left-dom-top {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						justify-content: center;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}

					.left-dom-bottom {
						padding: 20rpx 0;
						font-size: 37rpx;
						font-weight: bold;
					}
				}

				.right-dom {
					text-align: center;
					width: 200rpx;
					padding: 10rpx 40rpx;
					background-color: #FC1F3E;
					color: white;
					border-radius: 40rpx;
				}

				.tips {
					color: #929292;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 22rpx;
				}
			}

			.daiban-box {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding-top: 10rpx;
				font-size: 28rpx;

				.daiban-dom {
					background-color: white;
					padding: 10rpx 20rpx;
					border-radius: 15rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						color: #FC1F3E;
					}
				}

			}

			.huiyuan-box {
				width: 100%;
				padding: 0 30rpx;

				.dl-member-box {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					border-radius: 35rpx;
					justify-content: center;
					height: 100rpx;
					width: 100%;
					background: url('/static/index/member-bg.png');
					background-size: 100% 100%;
					background-position: center;
					/* 图片居中显示 */
					background-repeat: no-repeat;
					/* 不重复背景图片 */

					.dl-left {
						display: flex;
						flex: 1;
						padding-left: 30rpx;
						align-items: center;
						font-size: 30rpx;
						color: #623109;
						justify-content: left;

						.dl-icon {
							width: 60rpx;
							height: 56rpx;

						}
					}

					.dl-right {
						padding-right: 20rpx;

						.dl-go-view {
							font-size: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #F5D8A5;
							color: #623109;
							padding: 10rpx 25rpx;
							float: right;
							border-radius: 30rpx;
						}
					}
				}
			}

			.data-list-box {
				width: 100%;
				padding: 20rpx 20rpx 0 20rpx;

				.content-box {
					width: 100%;
					background-color: white;
					border-radius: 30rpx;

					.dl-opt-box {
						background-color: white;
						width: 100%;
						border-radius: 30rpx 30rpx 0 0;
						display: flex;
						align-items: center;
						justify-content: center;
						border-bottom: 1rpx solid #F4F4F4;

						.dl-menu-box {
							color: #929292;
							display: flex;
							flex: 1;
							align-items: center;
							justify-content: center;
							width: 100%;
							padding-top: 20rpx;

							.dl-menu {
								font-size: 30rpx;
								margin: 0 20rpx;
								padding-bottom: 15rpx;
								text-align: center;
							}

							.click {
								color: #FF434E;
								font-weight: bold;
								border-bottom: 2px solid #FF434E;
							}
						}

						.seting {
							font-size: 30rpx;
							width: 180rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 30rpx;
								height: 30rpx;
								margin-right: 10rpx;
							}
						}
					}

					.no-member {
						height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 460rpx);
					}

					.member {
						height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 350rpx);
					}

					.no-member-and-wating {
						height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 535rpx);
					}

					.member-and-wating {
						height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 415rpx);
					}

					.data-list {
						width: 100%;
						padding: 20rpx;
						display: flex;
						flex-direction: column;
						align-items: self-start;
						justify-content: center;

						.item-dom {
							padding: 15rpx 0;
							border-bottom: 1rpx solid #F8F8F8;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;

							.left-img {
								width: 100rpx;

								image {
									width: 100rpx;
									height: 100rpx;
									border-radius: 20rpx;
								}
							}

							.center-box {
								flex: 1;
								padding-left: 10rpx;
								min-width: 0;
								display: flex;
								flex-direction: column;
								align-items: self-start;
								justify-content: center;

								.dl-notice-title {
									display: flex;
									width: 100%;
									padding-bottom: 10rpx;
									align-items: center;
									justify-content: center;

									.dl-image {
										flex: none;
										width: 50rpx;
										height: 50rpx;
									}

									.dl-text {
										margin-left: 10rpx;
										flex: 1;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										width: 100%;
										font-weight: bold;

									}
								}

								.dl-bottom-text {
									font-size: 25rpx;
									color: #929292;
								}
							}

							.right-box {
								width: 120rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.red-text {
								color: #FC1F3E;
							}
						}
					}
				}
			}
		}
	}
</style>