瀏覽代碼

合并冲突

pansl 2 年之前
父節點
當前提交
2d45e82952

+ 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;
+}

+ 39 - 17
pages/client/components/pay/recharge.vue

@@ -9,25 +9,32 @@
 			<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;'">
+					<p style="height: 25px;"><text v-show="item.tip_text" class="ft14 top-lab">{{item.tip_text}}</text></p>
+					<text class="ft18 pirice-txt txt-other">
 						{{item.price}}元</text>
 					<p class="ft14 cz-desc-txt txt-other">{{item.price_text}} <text
 							class="ft14 pirice-txt">+{{item.given}}K币</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' :'' ">
+				<view @click="selectItem(item)" class="box mt16  options-item "
+					:class="item.id == select.id ?'select' :'' " v-else>
+					<p style="height: 25px;"><text  v-show="item.tip_text"   class="ft14 top-lab">{{item.tip_text}}</text></p>
+					<view class="vip-center">
+						<view class="">
+							<p class="ft18 pirice-txt txt-other"> {{item.price}}元 </p>
+							<p class="ft14 cz-desc-txt txt-other">{{item.price_text}}</text></p>
+						</view>
+						<image class="vip-level-icon" src="/static/icon/vip.png"></image> 
+					</view>
+					
+					<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>
 			</block>
 		</view>
 		<view v-if="is_player == false" @click="toPay" class="ft16 btn-cz box mt16 " >
-			确认充值{{select.price}}
+			确认充值{{select.price||0}}
 		</view>
 		<p class="ft14" style="margin: 10px 0;">付费须知</p>
 		<view class="ft14 textdesc">
@@ -37,7 +44,6 @@
 			<text class="ft12">4、购买成功后,“K币”仅在本小程序中使用</text>
 			<text class="ft12">5、购买成功后可在”我的”页面订单中心进行查看</text>
 		</view>
-
 	</view>
 </template>
 <script>
@@ -92,7 +98,10 @@
 				})
 			},
 			selectItem(item) {
-				this.select = item;
+				this.select = item;
+				if(this.is_player){
+					this.toPay();
+				}
 			},async toPay(){
 				if(this.select.lenght <  1){
 					uni.showToast({ title: '请选择要充值的项',icon:"none" });
@@ -100,17 +109,30 @@
 				}
 				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,
+					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);
-					return this.$emit();
+					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();
-				// console.log('getPayInfo',res);
+				return this.$emit('is_pay',result);
 			}
 		}
 	}

+ 11 - 0
pages/client/components/pay/style/recharge.css

@@ -86,4 +86,15 @@
 	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:{

+ 9 - 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>
@@ -149,6 +150,7 @@
 		delShelf,
 		storeshelf
 	} from '@/common/apis/zju.js'
+	import {getUserInfo} from "@/common/apis/my.js";
 	import configs from "@/common/config.js"
 	export default {
 		components: {
@@ -203,6 +205,8 @@
 				safeArea: 0,
 				ttuop: 0,
 				heightxw: 100,
+				userInfo:{},
+				payVideoInfo:{}
 			};
 		},
 		computed: {
@@ -497,6 +501,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 {

二進制
static/icon/vip.png