HaniBlindBox/honey_box/pages/user/recharge-page.vue

<template>
	<view class="content">

		<uni-nav-bar left-icon="left" title="钻石充值" color="#000000" backgroundColor="transparent" :fixed="true"
			:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar>


		<view class="center column" style="width: 100%; margin-top: 70rpx;">

			<image :src="$img1('my/ic_diamond.png')" style="width: 167.25rpx; height: 213rpx;" mode=""></image>

			<text style="color: black; font-size: 64rpx;">{{ userInfo.money }}</text>

			<text style="color: #A6A6A6; font-size: 24rpx;">我的钻石</text>
		</view>

		<view class="justify-center" style="width: 100%; margin-top: 86rpx;">

			<scroll-view scroll-y="true" style="width: 686rpx;">
				<view class="grid-container">
					<view class="grid-item" @click="goodsClick(index)" v-for="(item, index) in dataList" :key="index"
						style="">
						<image v-show="currentIndex == index" :src="item.select_image">
						</image>
						<image v-show="currentIndex != index" :src="item.image">
						</image>
					</view>
				</view>
			</scroll-view>

		</view>

		<view class="center"
			style="width: 686rpx; height: 92rpx; margin: 46rpx auto 0; background-color: #333333; border-radius: 16rpx;"
			@click="pay" :class="{ 'btn-active': isPaying }">
			<text style="color: #CDEF27; font-size: 24rpx;">{{ isPaying ? '支付中...' : '确认支付' }}</text>
		</view>
		<PayDialog ref="payDialog" />

	</view>
</template>

<script>
import { getUserInfo } from '@/common/server/user';
import { getDiamondList, createOrderProducts, getDiamondOrderLog } from '@/common/server/mall';
export default {
	data() {
		return {
			currentIndex: 0,
			dataList: [],
			userInfo: {
				money: 0
			},
			order_num: "",
			isPaying: false,
		}
	},
	onLoad(options) {
		this.load();
	},
	onShow() {
		this.$platform.getOrderNo(this).then(order_num => {
			console.log("order_num", order_num);
			if (order_num != null && order_num != "") {
				this.getPrizeLog(order_num);
			}
		});
	},
	methods: {
		/**
		 * 加载
		 */
		async load() {
			const res = await getUserInfo();
			if (res != null) {
				this.userInfo = res;
			}
			const diamondList = await getDiamondList();
			if (diamondList != null) {
				console.log(diamondList);

				this.dataList = diamondList;
			}

		},

		goodsClick(index) {
			this.currentIndex = index;
		},
		/**
		 * 支付
		 */
		async pay() {
			if (this.isPaying) {
				return;
			}
			try {
				this.isPaying = true;
				let pro = this.dataList[this.currentIndex];
				console.log(pro);
				const res = await createOrderProducts(pro.products_id);
				console.log(res);
				this.order_num = res.order_num;
				const status = await this.$platform.pay({ data: res.res }, this);
				if (status == 'success') {
					this.getPrizeLog(res.order_num);
				}
			} catch (e) {
				console.error(e);
			} finally {
				this.isPaying = false;
			}
		},
		/**
		 * 获取订单记录
		 * @param order_num 获取购买记录
		 */
		getPrizeLog(order_num) {
			if (!order_num) {
				return
			}
			let that = this;
			setTimeout(async () => {
				const res = await getDiamondOrderLog(order_num);
				console.log(res);
				if (res.status == 1) {
					//  that.$c.msg("购买成功！");
					//
					uni.showToast({
						title: "购买成功！"
					})
					await that.load();
				} else {
					that.getPrizeLog(order_num);
				}

			}, 500)
		},

	}
}
</script>

<style lang="scss">
.content {
	width: 100vw;
	min-height: 100vh;
	box-sizing: border-box;
	background: linear-gradient(to bottom, #E5F9D7, #FFFFFF);

}

.grid-container {
	margin: 0 auto 0;
	display: grid;
	grid-template-columns: repeat(3, 206rpx);
	gap: 34rpx;
}

.grid-item {
	width: 206rpx;
	height: 290rpx;
	position: relative;
	animation: scaleIn 0.5s ease-out;
	animation-fill-mode: both;
	transition: transform 0.3s ease, box-shadow 0.3s ease;

	&:active {
		transform: scale(0.95);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	>image {
		width: 100%;
		height: 100%;
		position: absolute;
		transition: all 0.3s ease;
	}


}

.btn-active {
	opacity: 0.8;
	transform: scale(0.98);
}
</style>