zqwang il y a 1 an
Parent
commit
c03aea1cd1
4 fichiers modifiés avec 257 ajouts et 2 suppressions
  1. 143 0
      components/pay/recharge.vue
  2. 100 0
      components/pay/style/recharge.css
  3. 1 2
      pages/client/pay/pay.vue
  4. 13 0
      pages/video/index.nvue

+ 143 - 0
components/pay/recharge.vue

@@ -0,0 +1,143 @@
+<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;
+				// #ifdef MP-WEIXIN  
+					let res = await getPayInfo(params);
+					if(res){
+						uni.requestPayment({
+						    "provider": "wxpay", 
+						    "orderInfo":res,
+						    success(res) {
+								result = true;
+								console.log('success:' + JSON.stringify(res));
+							},
+						    fail(e) {
+								return false;
+								console.log('success:' + JSON.stringify(e));
+							}
+						})
+					}
+					
+					return this.$emit('is_pay',result);
+				// #endif
+				return this.$emit('is_pay',result);
+			}
+		}
+	}
+</script>
+
+<style>
+	@import url("style/recharge.css");
+</style>

+ 100 - 0
components/pay/style/recharge.css

@@ -0,0 +1,100 @@
+.re-body {
+	background-color: #fff;
+}
+
+.textdesc {
+	margin-top: 5rpx;
+	display: flex;
+	flex-direction: column;
+}
+
+
+.kb-txt {
+	color: #FF9800;
+}
+
+.options-box {
+	display: flex;
+	overflow: hidden;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.options-item {
+	height: 230rpx;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	width: calc((100% - 20rpx) / 2);
+	min-width: calc((100% - 20rpx) / 2);
+	max-width: calc((100% - 20rpx) / 2);
+	background-color: #ececec;
+	margin: 10rpx 0px 10rpx 20rpx;
+	border-radius: 10rpx;
+	overflow: hidden;
+}
+
+.options-item:nth-child(2n+1) {
+	margin-left: 0rpx; 
+}
+
+.pirice-txt {
+	color: #FF9800;
+}
+
+.cz-desc-txt{
+	padding: 13rpx 0;
+	border-radius: 0 0 4px 4px;
+}
+.given-txt{
+	padding: 13rpx 10px;
+	border-top: solid 1rpx #9e9e9e1f;
+}
+.vip{
+	padding-top:  28px;
+	padding-bottom: 0px;
+}
+.select{
+	border: solid 1px #ff5722;
+}
+.txt-other{
+	padding-left:  20rpx; ;
+	padding-right:  20rpx; ; 
+}
+.select_text{
+	padding: 13rpx 10px;
+	background-color:  #ff5722;	
+	color: #fff;
+}
+.xz-hh{
+	float: right;
+	margin-right: 20rpx;
+}
+.top-lab{
+	padding: 2px 8px;
+	text-align: center;
+	background-color:  #ff5722;
+	color: #fff;
+	float: right;
+	border-top: none;
+	border-radius: 10rpx;
+}
+
+.btn-cz{
+	text-align: center;
+	padding: 10px;
+	background-color: #ff5722;
+	color: #fff;
+	border-radius: 40rpx;
+}
+.vip-center{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+.vip-level-icon{
+	margin-right: 10rpx;
+	width: 80px;
+	height: 30px;
+}

+ 1 - 2
pages/client/pay/pay.vue

@@ -1,12 +1,11 @@
 <template>
 	<view class="body">
-	
 		<recharge :user_info="user_info"> </recharge>
 	</view>
 </template>
 
 <script>
-	import recharge from '../components/pay/recharge.vue';
+	import recharge from '@/components/pay/recharge.vue';
 	import {getUserInfo} from "@/common/apis/my.js";
 	export default {
 		components:{

+ 13 - 0
pages/video/index.nvue

@@ -119,6 +119,7 @@
 							<text class="ji">本集:</text>
 							<text class="bi">{{videoInfo.charge_coin}}k币</text>
 						</view>
+						<recharge :user_info="userInfo" :is_player="true" :video_info="payVideoInfo" > </recharge>
 					</view>
 					<view class="bottom">
 						<text></text>
@@ -132,6 +133,7 @@
 
 
 <script>
+	import recharge from '@/components/pay/recharge.vue';
 	import {
 		getVideoInfo,
 		videoEpisodePlay,
@@ -141,8 +143,12 @@
 		delShelf,
 		storeshelf
 	} from '@/common/apis/zju.js'
+	import {getUserInfo} from "@/common/apis/my.js";
 	import configs from "@/common/config.js"
 	export default {
+		components:{
+			recharge
+		},
 		data() {
 			return {
 				limitPage: 15,
@@ -191,6 +197,8 @@
 				safeArea: 0,
 				ttuop: 0,
 				heightxw: 100,
+				userInfo:{},
+				payVideoInfo:{}
 			};
 		},
 		computed: {
@@ -485,6 +493,11 @@
 						this.isqp = true
 						this.videoContext.stop()
 						this.fenji = 2
+						this.userInfo  = getUserInfo();
+						this.payVideoInfo = {
+							video_id:this.video_id,
+							video_series_sequence:originIndex
+						};
 						this.$refs.select.open('bottom');
 						// this.currentVideoInfo = {}
 					} else {