zhiyu_uni_duanju/components/pay/recharge.vue

<template>
	<view class="re-body pd16_15">
		<view v-if="is_player" class="ft14">账户余额<label class="ft14 kb-txt">{{user_info.total_coin}}</label>K币</view>
		<view v-if="is_player ==  false" style="margin: 10px 0;"> 
			<view  class="ft18">请选择充值金额 <label class="ft14" style="float: right;">账户余额<label class="ft14 kb-txt">{{user_info.total_coin}}</label>K币</label></view>
			<text class="ft14" style="font-weight: bold;padding-top: 10px;display: block;">1元=100K币</text>
		</view>
		<view class="box options-box">
			<block v-for="(item,key) in list" :key="key">
				<view @click="selectItem(item)" class="box mt16  options-item"
					:class="item.id == select.id ?'select' :'' " v-if="item.type =='COIN'">
					<view style="height: 25px;"><text v-show="item.tip_text" class="ft14 top-lab">{{item.tip_text}}</text></view>
					<text class="ft18 pirice-txt txt-other">
						{{item.price}}元</text> 
					<view class="ft14 cz-desc-txt txt-other">{{item.price_text}} <text
							class="ft14 pirice-txt">+{{item.given}}K币</text></view>
					<view class="ft14 cz-desc-txt txt-other" :class="item.id == select.id ?'select_text' :'given-txt' ">
						{{item.given_amount}} <text v-if="item.id == select.id" class="ft14 xz-hh">&#10003;️</text> </view>
				</view>
				<view @click="selectItem(item)" class="box mt16  options-item "
					:class="item.id == select.id ?'select' :'' " v-else>
					<view style="height: 25px;"><text  v-show="item.tip_text"   class="ft14 top-lab">{{item.tip_text}}</text></view>
					<view class="vip-center">
						<view class="">
							<view class="ft18 pirice-txt txt-other"> {{item.price}}元 </view>
							<view class="ft14 cz-desc-txt txt-other">{{item.price_text}}</text></view>
						</view>
						<image class="vip-level-icon" src="/static/icon/vip.png"></image> 
					</view>
					
					<view class="ft14 cz-desc-txt txt-other  " :class="item.id == select.id ?'select_text' :'given-txt' ">
						{{item.given_amount}} <text v-if="item.id == select.id" class="ft14 xz-hh">&#10003;️</text> </view>
				</view>
			</block>
		</view>
		<view v-if="is_player == false" @click="toPay" class="ft16 btn-cz box mt16 " >
			确认充值{{select.price||0}}
		</view>
		<view class="ft14" style="margin: 10px 0;">付费须知</view>
		<view class="ft14 textdesc">
			<text class="ft12">1、虚拟商品，一经购买不得退换</text>
			<text class="ft12">2、充值后K币可能有延迟，1小时未到账请在“我的”页面联系客服</text>
			<text class="ft12">3、未满18岁的未成年需要在监护人陪同下购买并观看短剧剧</text>
			<text class="ft12">4、购买成功后，“K币”仅在本小程序中使用</text>
			<text class="ft12">5、购买成功后可在”我的”页面订单中心进行查看</text>
		</view>
	</view>
</template>
<script>
	import {
		getOptions,
		getPayInfo
	} from "@/common/apis/recharge.js"
	export default {
		props: {
			user_info:{}, // 用户信息
			video_info: {}, // 视屏信息
			is_player: {
				type:Boolean,
				default: false
			}
		},
		data() {
			return {
				list: [],
				select: {},

			}
		},
		watch: {
			user_info: {
				// 此处监听variable变量，当期有变化时执行
				handler(item1, item2) {
					this.user_info = item1;
					// console.log('111111111111','item1',item1,'item2',item2,'this.user_info',this.user_info)
					// item1为新值，item2为旧值
				}
			}
		},
		created() {
			// props 会暴露到 `this` 上
			this.get_options();
			// console.log(this.user_info, 'getOptions', this.list)
		},
		methods: {
			loginAct() {
				this.$emit('loginAct');
			},
			showQrcodeAct() {
				this.$emit('qrcode');
			},
			async get_options() {
				this.list = await getOptions();
				this.list.forEach((item, index) => {
					if (item.is_default == 1) {
						this.select = item;
					}
				})
			},
			selectItem(item) {
				this.select = item;
				if(this.is_player){
					this.toPay();
				}
			},async toPay(){
				if(this.select.lenght <  1){
					uni.showToast({ title: '请选择要充值的项',icon:"none" });
					return false;
				}
				let params = {
					pay_proudct_id:this.select.id,
					video_id:this.video_info && this.video_info.video_id ? this.video_info.video_id :0,
					video_series_sequence:this.video_info && this.video_info.video_series_sequence  ? this.video_info.video_series_sequence :0,
				};
				let result = false;
		
					let res = await getPayInfo(params);
					console.log('00000000000000',res)
					if(res){
						console.log('1111111111111',res)
							
						try{
							uni.requestPayment({
							    "provider": "wxpay", 
							    "orderInfo":JSON.stringify(res),
							    success(res) {
									result = true;
									console.log('success:' + JSON.stringify(res));
								}, 
							    fail(e) {
									return false;
									console.log('fail:' + JSON.stringify(e));
								}
							})
						}catch(e){
							console.log('pay-error-:',e);
						}
						
					}
					
					return this.$emit('is_pay',result);
				
				return this.$emit('is_pay',result);
			}
		}
	}
</script>

<style>
	@import url("style/recharge.css");
</style>