front/pages/score/recharge.vue

<template>
	<view class="pos-r padding-lr-sm" v-if="fetch && fetch.info" @click="Dever.close()">
		<use-tabbar :tabbar="false" />
		<view class="border-radius bg-main padding margin-top-sm">
			
			<u-popover position="right" width="200px">
				<view class="fwbd fs">{{fetch.info.name}}充值
					<view style="margin-left:5px;display: inline-block;">
						<u-icon name="question-circle"></u-icon>
					</view>
				</view>
			
				<template v-slot:content>
					<view style="color: white;">
						<u-parse :content="fetch.info.exp_tip"></u-parse>
					</view>
			
				</template>
			</u-popover>

			<!-- 金额选项 -->
			<view class="dflex money-area flex-wrap">
				<view class="item dflex-c dflex-flow-c" :class="{ active: config === index }"
					v-for="(item, index) in fetch.config" :key="index" @click="setConfig(index)">
					<view class="price">{{ item.price }}</view>
					<text class="fs-xs">到账{{ item.value_text }}</text>
				</view>
			</view>

			<!-- 输入其他金额 -->
			<input class="w-full padding border-radius-sm bg-drak" type="number" placeholder="请输入其他数值" v-model="number"
				maxlength="140" @input="setConfig(-1)"/>

			<!-- 马上充值按钮 -->
			<view class="dflex-c w-full margin-tb" @click="act">
				<view class="dflex-c dflex-flow-c border-radius-lg padding-tb-sm fwb line-height-1 cur_bgcolor"
					style="width: 70vw;">
					<text>马上充值</text>
					<text class="fs-xxs margin-top-xs ft-dark-4">并同意积分服务协议</text>
				</view>
			</view>

			<!-- 协议提示 -->
			<view class="margin-top dflex-c" @click="Dever.location('tool/page?title=积分服务协议')">
				<text class="cur_color margin-left-xs fs-xs padding-tb">积分服务协议</text>
			</view>
		</view>

		<!-- 记录列表 -->

		<view class="record-list margin-top-sm" v-if="fetch">
			<view class="record-title fs fwbd ft-black margin-bottom-sm">充值记录</view>
			<view v-if="fetch['list_' + current] && fetch['list_' + current].length > 0">
				<view class="record-item" v-for="(item, index) in fetch['list_' + current]" :key="index">
					<view class="record-left">
						<view class="record-name">{{ item.action_name }}</view>
						<view class="record-desc" v-if="item.desc">{{ item.desc }}</view>
						<view class="record-time">{{ item.cdate }}</view>
					</view>
					<view class="record-amount" :class="{ income: item.amount > 0, expense: item.amount < 0 }">
						{{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
					</view>
				</view>
			</view>
			<view v-else class="empty-record">
				<u-empty mode="data"></u-empty>
			</view>
		</view>

		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	import Pay from '@/lib/dever/pay.js'
	export default {
		data() {
			return {
				config: 0, // 默认选中第一个
				fetch: {},
				id: 0,
				current: 0,
				number: '',
			};
		},
		onLoad(options) {
			if (options && options.id) {
				this.id = options.id;
			} else {
				this.Dever.location('source/home');
				return;
			}
		},
		onShow() {
			this.loadData();
			this.loadList(1);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadList(1);
		},
		//加载更多
		onReachBottom() {
			this.loadList(2);
		},
		methods: {
			setConfig(index) {
				if (this.config == index) {
					this.config = -1;
				} else {
					this.config = index;
				}
			},
			loadData() {
				this.DeverApi.get(this, 'score.recharge', {
					id: this.id
				});
			},
			loadList(page) {
				this.DeverApi.page([page, 'list_' + this.current], this, 'score.rechargeLog', {
					id: this.id
				});
			},
			act() {
				var number = this.number;
				if (number) {
					number = parseFloat(number);
				} else {
					number = 0;
				}
				if (this.config < 0 && number <= 0) {
					return this.Dever.alert('您没有要充值的金额？');
				}
				var recharge_id = 0;
				if (this.config >= 0) {
					recharge_id = this.fetch.config[this.config].id
				}
				
				this.DeverApi.post('score.rechargeAct', {id:this.id,recharge_id:recharge_id,number:number}, r => {
					if (typeof r.pay == 'boolean') {
						if (r.pay) {
							this.yes(r)
						} else {
							this.Dever.alert('充值失败');
						}
					} else {
						Pay.payment(r.order_num, r.pay, res => {
							this.Dever.success('充值成功', () => {
								this.yes(r)
							})
						}, err => {
							this.Dever.alert('充值失败', () => {
								this.yes(r)
							})
						})
					}
				});
			},
			yes(r) {
				console.info(r)
				this.Dever.location('score/info?id=' + this.id, 'go')
			},
		},
	};
</script>


<style lang="scss">
	.money-area {
		margin-top: 28rpx;
		margin-bottom: 18rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 18rpx;
		/* 加这个 */

		.item {
			width: calc((100% - 2 * 18rpx) / 3);
			/* 3个元素，间隔2个gap */
			height: 152rpx;
			background: #f5f5f5;
			border-radius: 12rpx;
			box-sizing: border-box;
			padding: 20rpx;
			text-align: center;

			.price {
				color: #333;
				margin-bottom: 8rpx;
			}

			text {
				color: #9a9a9a;
			}
		}

		.active {
			background: #ff696b;
			color: #fff;

			.price,
			text {
				color: #fff !important;
			}
		}
	}

	.record-list {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;

		.record-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}

		.record-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.record-left {
				display: flex;
				flex-direction: column;

				.record-name {
					font-size: 28rpx;
					color: #333;
				}

				.record-desc {
					font-size: 28rpx;
					color: #999;
				}

				.record-time {
					font-size: 24rpx;
					color: #999;
					margin-top: 6rpx;
				}
			}

			.record-amount {
				font-size: 28rpx;
				font-weight: bold;

				&.income {
					color: #4caf50;
				}

				&.expense {
					color: #f44336;
				}
			}
		}
	}

	.empty-record {
		text-align: center;
		padding: 60rpx 0;

		.empty-icon {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;
			opacity: 0.6;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.cur_bgcolor {
		background: #ff696b;
		color: #fff;
	}
	
	.cur_color {
		color: #ff696b;
	}
	
	.u-popover {
		width: 180rpx !important;
	}
</style>