<template>
	<view class="container">
		<view class="cont-top">
			<view class="top-left">充值金额:</view>
			<view class="top-right">
				<!-- @input="onInput" -->
				<input type="number" placeholder="请输入充值金额" v-model="inputValue">
			</view>
		</view>
		<view class="cont-box">
			<view :class="{'indexbox' : actindex == index}" class="box" v-for="(item,index) in num " :key="index"
				@click="getindex(index,item.text)">
				<text>{{item.text}}元</text>
			</view>
		</view>
		<view class="anniu" @click="getpayment">
			<text>点击充值</text>
		</view>
		<!-- 以下均为测试 -->
		<view class="page flex-col">
			<view class="box_2 flex-col">

				<view class="yicang">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" indicator-active-color="#704e17"
						@change="changeSwiper">
						<swiper-item>
							<view class="text-wrapper_1 flex-col"
								:style="{ backgroundImage: 'url(' + imagesUrl + 'baiyinbg.png'+ ')' }">
								<text class="text_2">升级会员，享受更高优惠</text>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="text-wrapper_1 flex-col"
								:style="{ backgroundImage: 'url(' + imagesUrl + 'huangjinbg.png'+ ')' }">
								<text class="text_2">升级会员，享受更高优惠</text>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="text-wrapper_1 flex-col"
								:style="{ backgroundImage: 'url(' + imagesUrl + 'bojinbg.png'+ ')' }">
								<text class="text_2">升级会员，享受更高优惠</text>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<u-transition :show="current == 0" mode="fade-up">
					<view class="transition">
						<view class="group_2 flex-row justify-between">
							<image class="image_2" :src="imagesUrl + 'bigline1.png'" />
							<text class="text_3">白银会员</text>
							<image class="image_3" :src="imagesUrl + 'bigline2.png'" />
						</view>
						<text class="text_4">升级会员，享受更高优惠</text>
						<view class="image-text_1 flex-row justify-between">
							<image class="label_1" :src="imagesUrl + 'wenhao.png'" />
							<text class="text-group_1">如何获得该卡</text>
						</view>
						<text class="text_5">{{ config.silverConditions }}</text>
						<view class="image-text_2 flex-row justify-between">
							<image class="label_2" :src="imagesUrl + 'zuanshi.png'" />
							<text class="text-group_2">特权说明</text>
						</view>
						<view class="text-wrapper_2">
							<rich-text :nodes="config.silverIntro" class="paragraph_1"></rich-text>
						</view>
					</view>
				</u-transition>
				<u-transition :show="current == 1" mode="fade-up">
					<view class="transition">
						<view class="group_2 flex-row justify-between">
							<image class="image_2" :src="imagesUrl + 'bigline1.png'" />
							<text class="text_3">黄金会员</text>
							<image class="image_3" :src="imagesUrl + 'bigline2.png'" />
						</view>
						<text class="text_4">升级会员，享受更高优惠</text>
						<view class="image-text_1 flex-row justify-between">
							<image class="label_1" :src="imagesUrl + 'wenhao.png'" />
							<text class="text-group_1">如何获得该卡</text>
						</view>
						<text class="text_5">{{ config.goldConditions }}</text>
						<view class="image-text_2 flex-row justify-between">
							<image class="label_2" :src="imagesUrl + 'zuanshi.png'" />
							<text class="text-group_2">特权说明</text>
						</view>
						<view class="text-wrapper_2">
							<rich-text :nodes="config.goldIntro" class="paragraph_1"></rich-text>
						</view>
					</view>
				</u-transition>
				<u-transition :show="current == 2" mode="fade-up">
					<view class="transition">
						<view class="group_2 flex-row justify-between">
							<image class="image_2" :src="imagesUrl + 'bigline1.png'" />
							<text class="text_3">铂金会员</text>
							<image class="image_3" :src="imagesUrl + 'bigline2.png'" />
						</view>
						<text class="text_4">升级会员，享受更高优惠</text>
						<view class="image-text_1 flex-row justify-between">
							<image class="label_1" :src="imagesUrl + 'wenhao.png'" />
							<text class="text-group_1">如何获得该卡</text>
						</view>
						<text class="text_5">{{ config.platinumConditions }}</text>
						<view class="image-text_2 flex-row justify-between">
							<image class="label_2" :src="imagesUrl + 'zuanshi.png'" />
							<text class="text-group_2">特权说明</text>
						</view>
						<view class="text-wrapper_2">
							<rich-text :nodes="config.platinumIntro" class="paragraph_1"></rich-text>
						</view>
					</view>
				</u-transition>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inputValue: '',
				actindex: '',
				num: [{
						text: '500'
					},
					{
						text: '1000'
					},
					{
						text: '1500'
					},
					{
						text: '2000'
					},
					{
						text: '2500'
					},
					{
						text: '3000'
					},
				],
				imagesUrl: getApp().globalData.config.imagesUrl,
				baseUrl: getApp().globalData.config.baseUrl,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				current: 0,
				config: {},
				constants: {},
			}
		},
		onLoad() {
			this.getConfig()
		},
		methods: {
			// 获取配置:电话与位置、坐标
			async getConfig() {
				const res = await this.$request({
					url: '/system/shopconfig/listWx'
				})
				this.config = res.rows[0]
				console.log(res.rows[0]);
			},

			// 切换轮播图 
			changeSwiper(e) {
				console.log(e.detail.current);
				this.current = e.detail.current
			},
			getindex(index, text) {
				this.actindex = index
				this.inputValue = text
			},
			onInput(event) {
				const regex = /^\d*$/; // 只允许输入数字
				if (!regex.test(event.target.value)) {
					this.inputValue = this.inputValue.replace(/\D/g, ''); // 移除非数字字符
				}
			},

			// 创建订单 吊起支付
			async getpayment() {
				if (this.inputValue == 0) {
					uni.showToast({
						title: '充值金额不能为0！',
						icon: 'none'

					})
					return
				}

				const res = await this.$request({
					method: 'post',
					url: '/orderApi/createOrder',
					data: {
						goodsId: 88888,
						goodsType: 'cz',
						balance: 0,
						balanceCz: this.inputValue * 100
					}
				})
				console.log(res);
				this.orderid = res.data
				const ress = await this.$request({
					url: '/payApi/prepayment?type=jsapi' + '&orderId=' + this.orderid,
				})
				console.log(ress);
				wx.requestPayment({
					timeStamp: ress.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
					nonceStr: ress.nonceStr, // 随机字符串，长度为32个字符以下。
					package: ress.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
					signType: ress.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
					paySign: ress.paySign, // 签名，详见签名生成算法
					success: function(res) {
						console.log('成功', res);
						if (res.errMsg = 'requestPayment:ok') {
							uni.showToast({
								title: '支付成功'
							})
							uni.navigateTo({
								url: '/subInspectionPages/Paymentsuccessful/Paymentsuccessful'
							})
						}
						// 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
					},
					fail: function(res) {

						const resx = this.$request({
							url: '/orderApi/cancelPay'
						})
						uni.showToast({
							title: '支付失败'
						})
						console.log(resx);
						// 支付失败或取消支付后的回调函数， res.errMsg = 'requestPayment:fail cancel' 取消支付；res.errMsg = 'requestPayment:fail (detail error message)'
					}
				})


				// wx.requestPayment(ress)

			},
		}
	}
</script>

<style scoped lang="scss">
	.yicang {}

	.container {
		width: 100%;
		height: calc(100vh);
		box-sizing: border-box;
		background-color: #242A38;
		padding-top: 40px;
	}

	.cont-top {
		width: 95%;
		margin: 0 auto;
		box-sizing: border-box;
		overflow: hidden;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #FFE3AD;

	}

	.top-right {
		width: 70%;

		input {
			width: 100%;
			color: white;
			font-size: 18px;
			font-weight: 600;
		}
	}

	.top-left {
		color: #FFE3AD;
		font-size: 18px;
		font-weight: 600;
		margin-right: 5px;
	}

	.cont-box {
		margin: 0 auto;
		margin-top: 20px;
		width: 95%;


		display: flex;
		flex-wrap: wrap;
	}

	.box {
		width: 30%;
		height: 40px;
		border-radius: 8px;
		border: 1px solid #FFE3AD;
		margin-top: 10px;
		margin-right: 11px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		color: white;
		font-weight: bold;

	}

	.anniu {
		width: 80%;
		height: 40px;
		border-radius: 6px;
		border: 1px solid #FFE3AD;
		background-color: #FFE3AD;
		margin: 0 auto;
		margin-top: 40px;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
		font-weight: bold;

	}

	.indexbox {
		background: #FFE3AD;
	}

	// 
	.swiper {
		height: 230rpx;
	}

	.btn {
		margin: 20rpx auto;
	}

	.page {
		background-color: rgba(36, 42, 56, 1);
		width: 750rpx;
		height: 100vh;
	}

	.box_1 {
		background-color: rgba(36, 42, 56, 1);
		width: 750rpx;
		height: 40rpx;
	}

	.box_2 {
		width: 750rpx;
		margin-bottom: 1rpx;
	}

	.group_1 {
		background-color: rgba(36, 42, 56, 1);
		width: 750rpx;
		height: 88rpx;
	}

	.image_1 {
		width: 15rpx;
		height: 27rpx;
		margin: 31rpx 0 0 33rpx;
	}

	.text_1 {
		width: 120rpx;
		height: 29rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 30rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin: 30rpx 315rpx 0 267rpx;
	}

	.text-wrapper_1 {
		height: 196rpx;
		background-size: 100% 100%;
		width: 700rpx;
		margin: 27rpx 0 0 25rpx;
	}

	.text_2 {
		width: 326rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(112, 78, 23, 1);
		font-size: 24rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
		margin: 130rpx 0 0 48rpx;
	}

	.group_2 {
		width: 605rpx;
		height: 38rpx;
		margin: 69rpx 0 0 72rpx;
	}

	.image_2 {
		width: 187rpx;
		height: 23rpx;
		margin-top: 15rpx;
	}

	.text_3 {
		width: 160rpx;
		height: 44rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 44rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 44rpx;
		margin-left: 35rpx;
	}

	.image_3 {
		width: 187rpx;
		height: 23rpx;
		margin: 15rpx 0 0 36rpx;
	}

	.text_4 {
		width: 263rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		font-family: MicrosoftYaHeiLight;
		font-weight: 300;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin: 18rpx 0 0 247rpx;
	}

	.image-text_1 {
		width: 204rpx;
		height: 30rpx;
		margin: 57rpx 0 0 43rpx;
	}

	.label_1 {
		width: 30rpx;
		height: 30rpx;
	}

	.text-group_1 {
		width: 156rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin-top: 2rpx;
	}

	.text_5 {
		width: 238rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 80rpx;
		margin: 52rpx 0 0 89rpx;
	}

	.image-text_2 {
		width: 150rpx;
		height: 28rpx;
		margin: 73rpx 0 0 43rpx;
	}

	.label_2 {
		width: 30rpx;
		height: 26rpx;
		margin-top: 2rpx;
	}

	.text-group_2 {
		width: 102rpx;
		height: 26rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
	}

	.text-wrapper_2 {
		width: 616rpx;
		height: 306rpx;
		overflow-wrap: break-word;
		font-size: 0;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		line-height: 80rpx;
		margin: 20rpx 0 20rpx 91rpx;
	}

	.paragraph_1 {
		width: 616rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		line-height: 50rpx;
	}

	.paragraph_2 {
		width: 616rpx;
		height: 306rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 26rpx;
		font-family: MicrosoftYaHei;
		font-weight: NaN;
		text-align: left;
		line-height: 26rpx;
	}
</style>