充值

common/apis/recharge.js

@@ -5,3 +5,9 @@ export const getOptions = () => {
 	return http.get('/api/pay/options');
 } 
 
+
+// 获取用户信息
+export const getPayInfo = params => {
+	return http.post('/api/weixin/miniprogram/pay',params);
+} 
+

pages/client/components/pay/recharge.vue

@@ -1,46 +1,71 @@
 <template>
-	<view class="re-body pd16_15">
+	<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 class="box mt16  options-item">
-					<text class="ft18 pirice-txt"> 50.9元</text>
-					<p class="ft14 cz-desc-txt">5000币 <text class="ft14">+888币</text></p>
-					<text></text>
-				</view>
-			</block>
-			
+		<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>
-		<view class="ft14 textdesc">
+		<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">3、未满18岁的未成年需要在监护人陪同下购买并观看短剧剧</text>
+			<text class="ft12">4、购买成功后，“K币”仅在本小程序中使用</text>
 			<text class="ft12">5、购买成功后可在”我的”页面订单中心进行查看</text>
 		</view>
 
 	</view>
-</template> 
-
+</template>
 <script>
 	import {
-		getOptions
+		getOptions,
+		getPayInfo
 	} from "@/common/apis/recharge.js"
 	export default {
-		props: ['user_info', "video_info"],
+		props: {
+			user_info:{}, // 用户信息
+			video_info: {}, // 视屏信息
+			is_player: {
+				type:Boolean,
+				default: false
+			}
+		},
 		data() {
 			return {
-				list: []
+				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为旧值
+				}
 			}
-		},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` 上
@@ -50,12 +75,32 @@
 		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);
 			}
 		}
 	}

pages/client/components/pay/style/recharge.css

@@ -8,27 +8,28 @@
 	flex-direction: column;
 }
 
-.textdesc text {}
 
 .kb-txt {
 	color: #FF9800;
 }
 
 .options-box {
-	display: flex;
+	display: flex;
+	overflow: hidden;
 	flex-direction: row;
 	flex-wrap: wrap;
 }
 
 .options-item {
-	padding: 20rpx 20rpx 0px 20rpx;
+	box-sizing: border-box;
+	height: 230rpx;
 	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: 20rpx 0px 20rpx 20rpx;
+	margin: 10rpx 0px 10rpx 20rpx;
 	border-radius: 10rpx;
 }
 
@@ -37,8 +38,49 @@
 }
 
 .pirice-txt {
-	color: #ff5722;
+	color: #FF9800;
 }
+
 .cz-desc-txt{
-	margin: 10rpx 0;
+	padding: 12rpx 0;
+	border-radius: 0 0 6px 6px;
+}
+.given-txt{
+	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{
+	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;
 }