<template>
	<ciy-header title="购买金币"></ciy-header>
	<view v-if="init.code != 1" class="px4 py4">
		<view style="height:4em;width:100%;" class="ciy-skeleton"></view>
		<view style="height:8em;width:100%;" class="ciy-skeleton"></view>
		<view style="height:8em;width:100%;" class="ciy-skeleton"></view>
	</view>
	<view v-else>
		<view class="ciy-grid">
			<view class="grid" style="width:50%" @tap="gourl" data-url="pnt_buylst">
				<view class="icon" :style="{backgroundImage:svg2bg(svg.buy)}"></view>
				<view class="name">购买记录</view>
			</view>
			<view class="grid" style="width:50%" @tap="gourl" data-url="pnt_lst">
				<view class="icon" :style="{backgroundImage:svg2bg(svg.record)}"></view>
				<view class="name">金币流水</view>
			</view>
		</view>
		<view class="ciy-card">
			<view class="content char4">
				<view class="flex flex-wrap" style="gap:1em;">
					<view class="fpay" v-for="(item,index) in init.buys" :key="item.id" @tap="currbuy=index"
						:class="{select:currbuy==index}">
						<view class="pnt">
							<text>{{tonumtho(item.buypnt)}}</text>金币
						</view>
						<view class="money">
							<text class="txt-wl">{{item.buymoney/100}}</text>元
						</view>
					</view>
				</view>
			</view>
			<view class="ciy-form-bottom">
				<button class="btn lg cc" @tap="paynow">立即支付</button>
			</view>
		</view>
	</view>
</template>

<style>
	.fpay {
		flex: 1 1 33.33%;
		text-align: center;
		background: var(--bg1);
		border-radius: 0.5em;
		border: 1px solid var(--bg5);
		transition: all 0.5s;
	}

	.fpay.select {
		border: 1px solid var(--man7);
	}

	.fpay .pnt {
		padding-top: 2em;
		font-size: 0.8em;
	}

	.fpay .pnt>text {
		font-size: 2em;
		padding: 0 0.3em;
		color: var(--man7);
		font-weight: bold;
	}

	.fpay .money {
		font-size: 0.7em;
		text-align: right;
		padding: 1em;
	}

	.fpay .money>text {
		font-size: 2em;
		padding: 0 0.3em;
	}
</style>

<script>
	export default {
		data() {
			return {
				svg: {
					buy: '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M821.5 982h-452C258.1 982 167 890.9 167 779.5v-284C167 384.1 258.1 293 369.5 293h452c111.4 0 202.5 91.1 202.5 202.5v284c0 111.4-91.1 202.5-202.5 202.5z" fill="#C5D8FC"></path><path d="M784 929.4H241c-105.1 0-191-85.9-191-191V287.6c0-105 85.9-191 191-191h543c105 0 191 86 191 191V738.4c0 105.1-85.9 191-191 191z" fill="#008DEF"></path><path d="M241 929.4c-105.1 0-191-85.9-191-191V287.6c0-105 85.9-191 191-191h543c105 0 191 86 191 191C934.1 712 655.2 890.5 241 929.4z" fill="#009BF4"></path><path d="M50 709.4V287.6c0-105 85.9-191 191-191h472C782 457 477 734 50 709.4z" fill="#00AFFA"></path><path d="M50 467.5V287.6c0-105 85.9-191 191-191h204.5C454.4 422.7 351 439 50 467.5z" fill="#00BBFF"></path><path d="M732.078125 308.62109375h-27.421875v45.87890625l-0.08789063 2.8125c-1.58203125 31.46484375-28.74023438 56.25-61.69921875 56.25l-2.90039062-0.08789063c-32.95898438-1.49414063-58.88671875-27.421875-58.88671875-58.97460937v-45.87890625H443.796875v45.87890625l-0.08789063 2.8125c-1.58203125 31.46484375-28.74023438 56.25-61.69921875 56.25l-2.90039062-0.08789063c-32.95898438-1.49414063-58.88671875-27.421875-58.88671875-58.97460937v-45.87890625h-27.421875c-45.43945313 0-82.35351563 35.24414063-82.35351563 78.75v314.82421875c0 43.50585938 36.9140625 78.75 82.35351563 78.75h439.18945313c45.43945313 0 82.35351563-35.24414063 82.35351562-78.75V387.37109375c0.08789063-43.50585938-36.82617188-78.75-82.265625-78.75z m-42.09960938 184.74609375l-1.58203125 1.84570313-176.66015624 178.94531249c-8.52539063 8.61328125-22.06054688 9.31640625-31.28906251 1.66992188l-1.7578125-1.66992187-110.39062499-111.88476563c-8.7890625-8.96484375-9.140625-23.29101563-0.79101563-32.60742187 8.34960938-9.31640625 22.41210938-10.45898438 32.08007813-2.54882813l1.7578125 1.66992188 93.8671875 95.09765625L655.26171875 461.63867187c8.7890625-8.87695313 22.93945313-9.22851563 32.16796875-0.79101562 9.31640625 8.4375 10.45898438 22.76367188 2.54882813 32.51953125z" fill="#FFFFFF"></path><path d="M382.00976562 374.27539062c11.33789063 0 20.56640625-8.7890625 20.56640626-19.68749999V262.7421875c0-5.18554688-2.19726563-10.1953125-6.06445313-13.88671875-3.8671875-3.69140625-9.140625-5.80078125-14.58984375-5.80078125-11.33789063 0-20.56640625 8.7890625-20.56640625 19.6875v91.84570313c0.08789063 10.81054688 9.31640625 19.6875 20.65429688 19.68749999zM642.86914063 374.27539062c11.33789063 0 20.56640625-8.7890625 20.56640624-19.68749999V262.7421875c0-5.18554688-2.19726563-10.1953125-6.06445312-13.88671875-3.8671875-3.69140625-9.140625-5.80078125-14.58984375-5.80078125-5.44921875 0-10.72265625 2.109375-14.58984375 5.80078125-3.8671875 3.69140625-6.06445313 8.70117188-6.06445313 13.88671875v91.84570313c0.08789063 10.81054688 9.31640625 19.6875 20.7421875 19.68749999z" fill="#FFFFFF"></path></svg>',
					record: '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M718.592 643.4816c-59.392 0-115.968-10.5984-166.2976-42.5472-61.7984-39.168-61.7984-97.28-0.3584-136.192 91.648-58.2656 248.8832-57.1904 339.8144 2.304 56.0128 36.6592 55.0912 96.768-1.9456 132.352-52.0704 32.512-109.8752 44.4416-171.2128 44.0832zM113.92 661.2992c93.4912 98.1504 210.688 118.784 335.3088 124.1088-3.7888 55.296 6.8096 100.352 50.7392 134.0416l-1.0752 7.936c-26.7776 0-44.544 0.768-71.2704-0.5632-89.7024-4.4544-175.9232-22.0672-251.2896-71.7824-48.6912-32.256-83.1488-73.7792-78.2336-134.3488 1.4848-18.3808 9.4208-36.096 15.8208-59.392z" fill="#f4ea2a"></path><path d="M517.7856 628.5312c92.7232 99.2768 320.3072 90.2656 401.7664 1.8432 21.2992 25.6 19.1488 60.416-7.0144 89.0368-34.4576 37.7344-81.2544 52.736-130.9184 60.5184-83.456 13.0048-163.2768 5.12-233.9328-43.4688-42.0864-29.0816-52.1728-68.7104-29.9008-107.9296zM517.4272 768.5632c89.9072 99.0208 316.6208 95.2832 402.3808 3.2256 20.992 27.1872 18.4832 61.44-7.2704 89.4464-37.9904 41.2672-89.6 55.7568-143.7184 62.6688-78.9504 10.24-154.624 1.024-220.8256-45.568-42.2912-29.7984-52.736-68.4032-30.5664-109.7728zM799.1808 298.1888c7.8848-44.2368-15.36-91.3408-63.488-123.5968-86.1696-57.9072-184.6272-73.6256-301.1584-76.0832-19.0464 1.8432-51.968 4.3008-84.6336 8.3968C282.4192 115.2512 219.4944 136.0896 163.84 174.08c-84.5824 57.0368-89.344 139.8784-10.24 203.4688a346.3168 346.3168 0 0 0 79.8208 46.08C293.4784 449.6384 358.4 457.6256 423.6288 461.824h13.2096a355.584 355.584 0 0 0 43.52-1.2288c4.096-8.192 21.0944-25.6 28.5184-32.8704 59.1872-48.4864 134.1952-60.9792 210.432-58.3168 0 0 24.7296 0.768 39.8336 2.5088 24.2176-16.128 35.072-52.6848 38.6048-67.584 0-0.7168 0.3584-1.4336 0.512-2.1504 0.4608-2.304 0.9216-3.9936 0.9216-3.9936zM472.3712 592.5888c-7.4752-11.4176-16.128-38.656-16.128-38.656l-30.72-0.7168c-115.712-6.4-222.8736-33.1264-306.5344-118.9376-34.2528 49.6128-27.4432 108.4416 17.5104 154.5216 59.3408 60.5184 137.472 84.8384 219.7504 99.0208 10.8032 1.8432 21.7088 3.0208 32.4608 3.8912a568.32 568.32 0 0 0 67.1744 4.4544 160.8192 160.8192 0 0 1 16.4864-103.5776z" fill="#f4ea2a"></path></svg>',
				},
				currbuy: 0
			}
		},
		onLoad() {
			this.getinit();
		},
		methods: {
			async getinit() {
				var retjson = await this.callfunc({
					func: 'me.pnt_buynow_init',
					data: this.pagepost
				});
				if (retjson.code != 1)
					return this.alert(retjson.errmsg);
				this.init = retjson;
			},
			async paynow(e) {
				if (this._loading)
					return;
				this._loading = true;
				var retjson = await this.callfunc({
					func: 'me.pnt_buynow_pay',
					data: {
						id: this.init.buys[this.currbuy].id
					}
				});
				this._loading = false;
				if (retjson.code != 1)
					return this.alert(retjson.errmsg);

				retjson.provider = 'wxpay';
				try {
					var retpay = await uni.requestPayment(retjson);
					await this.sleep(1000);
					var retjson2 = await this.callfunc({
						func: 'me.pnt_buynow_chk',
						data: {
							orderid: retjson.orderid
						}
					});
					if (retjson2.code != 1)
						return this.toast('支付提示: ' + retjson2.errmsg);
					var app = getApp();
					var page = app.getpage(1);
					if (page && page.getbalance)
						page.getbalance(1);
					this.toast('已购买' + this.init.buys[this.currbuy].buypnt + '金币');
				} catch (e) {}
			}
		}
	}
</script>