zhiyu_uni_duanju/pages/client/components/pay/recharge.vue

<template>
	<view class="re-body pd16_15">
		<p class="ft14">账户余额<span class="ft14 kb-txt">{{user_info.total_coin}}</span>K币</p>
		<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'">
					<p><text v-if="item.is_first_pay" class="ft14 top-lab">首冲</text></p>
					<text class="ft18 pirice-txt txt-other" :style="item.is_first_pay ==1 ? '': 'padding-top:  25px;'">
						{{item.price}}元</text>
					<p class="ft14 cz-desc-txt txt-other">{{item.price_text}} <text
							class="ft14 pirice-txt">+{{item.given}}币</text></p>
					<p 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> </p>
				</view>
				<view @click="selectItem(item)" class="box mt16  options-item vip"
					:class="item.id == select.id ?'select' :'' " v-else>
					<text class="ft18 pirice-txt txt-other"> {{item.price}}元</text>
					<p class="ft14 cz-desc-txt txt-other">{{item.price_text}}</text></p>
					<p class="ft14 cz-desc-txt txt-other  " :class="item.id == select.id ?'select_text' :'' ">
						{{item.given_amount}} <text v-if="item.id == select.id" class="ft14 xz-hh">&#10003;️</text> </p>
				</view>
			</block>
		</view>
		<view v-if="is_player == false" @click="toPay" class="ft16 btn-cz box mt16 " >
			确认充值{{select.price}}
		</view>
		<p class="ft14" style="margin: 10px 0;">付费须知</p>
		<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;
			},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 :1,
					video_series_sequence:this.video_info && this.video_info.video_series_sequence  ? this.video_info.video_series_sequence :1,
				};
				let res = await getPayInfo(params);
				console.log('getPayInfo',res);
			}
		}
	}
</script>

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