代码优化

vedio/manifest.json

 {
     "name" : "reader",
-    "appid" : "__UNI__1EF86FE",
+    "appid" : "__UNI__C390C5A",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : 1000,

vedio/pages.json

@@ -70,6 +70,14 @@
 					"navigationBarBackgroundColor": "#ffffff",
 					"navigationBarTextStyle": "black"
 				}
+			},{
+				"path": "vipAppPay/vipAppPay",
+				"style": {
+					"navigationBarTitleText": "会员中心",
+					"navigationStyle": "default",
+					"navigationBarBackgroundColor": "#ffffff",
+					"navigationBarTextStyle": "black"
+				}
 			}
 		]
 	}, {

vedio/pages/loading.vue

 <template>
-	<view class="body">
+	<view v-if="sourceType!='android'" class="body">
 		<image style="width: 170rpx;height: 170rpx;margin-top: 30%;" src="../static/images/logo.png" mode="widthFix" />
 		<view style="color: black;margin-top: 30rpx;font-size: 40rpx;font-size: 50rpx;">{{appName}}</view>
 		<view style="color: #FECF02;margin-top: 10rpx;font-size: 40rpx;font-size: 40rpx;">欢迎使用</view>
@@ -14,6 +14,12 @@
 				{{slotParam}}
 			</view>
 		</uni-popup>
+	</view>
+	
+	<view v-else class="show-mask flex-v" @click="getVipParams">
+		<view class="body2">
+			<text @click="getVipParams" style="font-size: 46rpx;color: black;">发起支付</text>
+		</view>
 	</view>
 </template>
 
@@ -38,12 +44,15 @@
 		data() {
 			return {
 				tips1: '',
+				sourceType: '',
 				slotParam: '',
+				vipList: [],
 				appName: '河狸小故事'
 			}
 		},
 		onLoad(options) {
-			this.tips1 = options.tips1
+			this.tips1 = options.tips1;
+
 		},
 		onShow(options) {
 			this.ttLoging()
@@ -52,6 +61,7 @@
 			ttLoging() {
 				var that = this;
 				var obj = wx.getLaunchOptionsSync()
+				this.sourceType = obj.query.source_type;
 
 				var tips2 = ''; // 投放测试
 				var thirdParam = "";
@@ -89,16 +99,98 @@
 							}) => {
 								app.globalData.userId = data.idcode;
 								saveToken(data.token)
-								setTimeout(() => {
-									redirectTo('home?activiteFlag='+data.activiteFlag+"&idcode="+data.idcode);									
-									// redirectTo('/pagesA/vipPay/vipPay');									
-								}, 1000);
+								// saveToken(
+								// 	'A5CFAE67AF32E71D10CA6127546E82C20A8DE7C0EAAA5697BEEC2AC2E333F9945F433703067DF5142735505C42F58997'
+								// )
+
+								
+								// that.handlePay()
+
+								if (data.activiteFlag == 101) {
+									that.handlePay()
+								} else {
+									setTimeout(() => {
+										redirectTo('home?activiteFlag=' + data
+											.activiteFlag + "&idcode=" + data.idcode);
+									}, 1000);
+								}
+
+
 							}
 						});
 					},
-					fail: function(err) {
+					fail: function(err) {}
+				});
+			},
+
+			handlePay() {
+				let that = this;
+				this.post({
+					url: '/vip/getVipProducts/cyc/forVApp',
+					showLoading: false,
+					success: ({
+						data
+					}) => {
+						that.vipList = data.list;
 					}
 				});
+			},
+			getVipParams() {
+				let that = this;
+				if (that.vipList != null && that.vipList.length > 0) {
+					let vipBean = that.vipList[0];
+					that.post({
+						url: '/vip/getVipPayParams/wechatForVApp',
+						data: {
+							pid: vipBean.pid,
+							payChannel: 'WEIXIN'
+						},
+						showLoading: true,
+						success: ({
+							data
+						}) => {
+							if (vipBean.firstPayPrice == 0) {
+								//签约
+								that.wxSign(data, vipBean.largeType);
+							} else {
+								//普通支付
+								that.wxPay(data, vipBean.largeType);
+							}
+						}
+					});
+				} else {
+					message.notify('网络加载中,请稍后')
+				}
+			},
+			wxSign(wxData, largeType) {
+				let that = this;
+				// 发起微信签约
+				wx.navigateToMiniProgram({
+					appId: "wxbd687630cd02ce1d",
+					path: 'pages/index/index',
+					extraData: wxData.params,
+					success(res) {},
+					fail(res) {
+						// 未成功跳转到签约小程序 
+						// console.log("wxSign fail=", res);
+					}
+				})
+			},
+			wxPay(wxData) {
+				let wxParams = wxData.params;
+				let that = this;
+				// 发起微信支付
+				wx.requestPayment({
+					timeStamp: wxParams.timeStamp,
+					nonceStr: wxParams.nonceStr,
+					package: wxParams.packageStr,
+					signType: wxParams.signType,
+					paySign: wxParams.paySign,
+					success(res) {},
+					fail(res) {
+						// message.notify('取消支付')
+					}
+				})
 			}
 		}
 	};
@@ -110,6 +202,16 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+	}
+	.body2 {
+		width: 90%;
+		height: 90%;
+		background-color: white;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin: 30rpx;
+		border-radius: 20rpx;
 	}
 
 	.text-box {
@@ -119,4 +221,70 @@
 		background-color: white;
 		color: black;
 	}
+
+	.loading {
+		text-align: center;
+
+		.logo {
+			position: absolute;
+			top: 40%;
+			width: 100%;
+			transform: translateY(-50%);
+
+			image {
+				width: 170rpx;
+				height: 170rpx;
+				margin-bottom: 52rpx;
+			}
+
+			.animation {
+				font-size: 72rpx;
+				margin-top: 200rpx;
+
+				text {
+					text-align: center;
+					display: inline-block;
+					animation: spring 1s ease-in-out infinite;
+				}
+			}
+		}
+	}
+
+	@keyframes spring {
+		0% {
+			transform: scaleX(1);
+		}
+
+		30% {
+			transform: scale3d(1.25, 0.75, 1);
+		}
+
+		40% {
+			transform: scale3d(0.75, 1.25, 1);
+		}
+
+		50% {
+			transform: scale3d(1.15, 0.85, 1);
+		}
+
+		65% {
+			transform: scale3d(0.95, 1.05, 1);
+		}
+
+		75% {
+			transform: scale3d(1.05, 0.95, 1);
+		}
+
+		to {
+			transform: scaleX(1);
+		}
+	}
+
+	.show-mask {
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.6);
+		color: white;
+		align-items: center;
+	}
 </style>
\ No newline at end of file

vedio/pagesA/vipAppPay/vipAppPay.vue

+<template>
+	<view class="body">
+
+		<image style="width: 100%;" src="https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_heli_vip.png"
+			mode="widthFix" />
+
+		<view class="section">
+			<view @click="handleUnsign" v-if="agreementDto"
+				style="margin-top: 12rpx;margin-left: 30rpx;color: black;font-size: 36rpx;font-weight: 700;">自动续费管理 >
+			</view>
+
+			<view class="pack-box">
+				<scroll-view scroll-x style="white-space: nowrap">
+					<view class="pack-item" v-for='(item, index) in vipList' :key='index'
+						@click="choosePack(item, index)">
+						<view class="pack-content" :class="[{active: index==selectedIndex}]">
+							<view class="label" v-if="item.topTitle">
+								{{ item.topTitle }}
+							</view>
+							<view class="name row" :class="[{active2: index==selectedIndex}]">
+								{{item.title}}
+							</view>
+							<view class="price row"
+								:class="[{active1: index==selectedIndex},{price2:item.firstPayPrice<=0}]">
+								<view style="font-size: 50rpx;">{{item.firstPayPrice<=0 ? '' : '￥'}}</view>
+								{{item.firstPayPrice<=0 ? '免费试用' : item.firstPayPrice}}
+							</view>
+							<view class="origin row" v-if='item.oldPrice'>
+								￥{{item.oldPrice}}
+							</view>
+
+							<view class="origin2 row" v-if='item.remarks'>
+								{{ getRemark1(item.remarks) + '\r\n' + getRemark2(item.remarks) }}
+							</view>
+
+							<view class="label2" v-if="index==selectedIndex&&item.firstPayPrice>0">
+								{{ '仅需'+amount(item.firstPayPrice / item.days)+'元/天' }}
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+
+		<view class="trialStyle">
+			<text v-if="hintText">
+				{{hintText}}
+			</text>
+		</view>
+
+		<view class="agreementWrp">
+			<checkbox-group @change="checkboxChange" style="width: 50rpx;margin-right: 10rpx;">
+				<checkbox :checked="checked" style="transform:scale(0.9)">
+				</checkbox>
+			</checkbox-group>
+			<text>您已阅读并同意
+				<text class="agreementText" @click="goAgreement(1)">《连续订阅服务协议》</text>
+				与<text class="agreementText" @click="goAgreement(2)">《支付协议》</text>
+				与<text class="agreementText" @click="goAgreement(3)">《隐私政策》</text>
+			</text>
+		</view>
+
+		<view class="section">
+			<button class="apply-button" @click="handlePay">立即试用</button>
+			<button class="apply-button" open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	import common from '@/mixins/common';
+
+	import {
+		message,
+		navigateBack,
+		navigateTo,
+		redirectTo
+	} from '@/utils/fun';
+
+	const app = getApp();
+
+	export default {
+		name: 'vipPay',
+		mixins: [common],
+		data() {
+			return {
+				vipList: [],
+				selectedIndex: 0,
+				os: 'android',
+				checked: false,
+				agreementDto: null,
+				hintText: ''
+			}
+		},
+		methods: {
+			launchAppError(e) {
+				console.log(e.detail.errMsg)
+			},
+			loadData() {
+				if (wx.getSystemInfoSync().platform === 'ios') {
+					this.os = 'ios';
+				}
+
+				this.post({
+					url: '/vip/getVipProducts/cyc/forVApp',
+					showLoading: false,
+					success: ({
+						data
+					}) => {
+						this.vipList = data.list
+						this.hintText = this.vipList[0].trailRemark;
+					}
+				});
+
+				this.post({
+					url: '/vip/getOrderList',
+					showLoading: false,
+					success: ({
+						data
+					}) => {
+						if (data.agreement == undefined) {
+							this.agreementDto = null;
+						} else {
+							this.agreementDto = data.agreement;
+						}
+
+					}
+				});
+			},
+			choosePack(item, index) {
+				this.selectedIndex = index;
+				this.hintText = this.vipList[this.selectedIndex].trailRemark;
+			},
+			handleUnsign() {
+				if (this.agreementDto) {
+					let params = JSON.stringify(this.agreementDto)
+					navigateTo(`/pagesA/unsign/unsign?params=` + params)
+				}
+			},
+			amount(value) {
+				return value.toFixed(2)
+			},
+			getRemark1(value) {
+				let data = value.split(',')
+				if (data.length > 0) {
+					return data[0]
+				}
+				return ''
+			},
+			getRemark2(value) {
+				let data = value.split(',')
+				if (data.length > 1) {
+					return data[1]
+				}
+				return ''
+			},
+			handlePay() {
+				if (!this.checked) {
+					message.notify("请阅读《支付协议》后勾选同意")
+					return
+				}
+
+				let that = this;
+				let vipBean = this.vipList[this.selectedIndex];
+
+				if (this.os == 'ios') {
+					message.notify('暂不支持ios系统~');
+				} else {
+					this.post({
+						url: '/vip/getVipPayParams/wechatForVApp',
+						data: {
+							pid: vipBean.pid,
+							payChannel: 'WEIXIN'
+						},
+						showLoading: true,
+						success: ({
+							data
+						}) => {
+							if (vipBean.firstPayPrice == 0) {
+								//签约
+								that.wxSign(data, vipBean.largeType);
+							} else {
+								//普通支付
+								that.wxPay(data, vipBean.largeType);
+							}
+
+						}
+					});
+				}
+			},
+			wxSign(wxData, largeType) {
+				let that = this;
+				// 发起微信签约
+				wx.navigateToMiniProgram({
+					appId: "wxbd687630cd02ce1d",
+					path: 'pages/index/index',
+					extraData: wxData.params,
+					success(res) {
+						// uni.navigateBack()
+						message.notify('支付查询中..')
+					},
+					fail(res) {
+						// 未成功跳转到签约小程序 
+						// console.log("wxSign fail=", res);
+					}
+				})
+			},
+			wxPay(wxData) {
+				let wxParams = wxData.params;
+				let that = this;
+				// 发起微信支付
+				wx.requestPayment({
+					timeStamp: wxParams.timeStamp,
+					nonceStr: wxParams.nonceStr,
+					package: wxParams.packageStr,
+					signType: wxParams.signType,
+					paySign: wxParams.paySign,
+					success(res) {
+						message.notify('支付查询中..')
+
+						// setTimeout(() => {
+						// 	uni.navigateBack({
+						// 		delta: 1,
+						// 	});
+						// }, 1000);
+					},
+					fail(res) {
+						// message.notify('取消支付')
+					}
+				})
+			},
+			checkboxChange(e) {
+				if (e.detail.value.length > 0) {
+					this.checked = true
+				} else {
+					this.checked = false
+				}
+			},
+			goAgreement(type) {
+				if (type == 1) {
+					navigateTo(`/pages/brower/brower?url=https://api.mints-tech.cn/camera-api/agreements/xxx/gmxy.html`)
+				} else if (type == 2) {
+					navigateTo(`/pages/brower/brower?url=https://api.mints-tech.cn/camera-api/agreements/xxx/syzc.html`)
+				} else if (type == 3) {
+					navigateTo(`/pages/brower/brower?url=https://api.mints-tech.cn/camera-api/agreements/xxx/yhxy.html`)
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.body {
+		background-color: white;
+		display: flex;
+		flex-direction: column;
+
+		.section {
+			margin-top: 30rpx;
+			display: flex;
+			flex-direction: column;
+
+			.title {
+				font-size: 32rpx;
+				font-weight: 700;
+				color: white;
+				margin-bottom: 30rpx;
+			}
+
+			.pack-box {
+				margin-top: 25rpx;
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				flex-wrap: wrap;
+				overflow-x: scroll;
+
+				.pack-item {
+					margin-left: 30rpx;
+					width: calc(32% - 30rpx);
+					display: inline-block;
+
+					.active {
+						background-color: #FEEDD0;
+						border: 4rpx solid #FDEADC !important;
+					}
+
+					.pack-content {
+						width: 100%;
+						height: 320rpx;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						background: white;
+						border: 2rpx solid #EAECEC;
+						border-radius: 20rpx;
+						position: relative;
+						padding-top: 60rpx;
+
+						.row {
+							display: flex;
+							align-items: center;
+							margin: 6rpx 15rpx;
+							marign-bottom: 0;
+						}
+
+						.row:last-child {
+							margin-bottom: 8rpx;
+						}
+
+						.name {
+							font-size: 30rpx;
+							font-weight: 700;
+							color: #000000;
+						}
+
+						.price {
+							font-size: 60rpx;
+							color: #000000;
+							font-weight: 700;
+						}
+
+						.price2 {
+							font-size: 40rpx;
+						}
+
+						.active1 {
+							color: #fd5350;
+						}
+
+						.active2 {
+							color: #6D301D;
+						}
+
+
+						.origin {
+							font-size: 26rpx;
+							margin: 0;
+							text-align: center;
+							color: #676666;
+							text-decoration: line-through;
+						}
+
+						.origin2 {
+							font-size: 26rpx;
+							text-align: center;
+							color: #676666;
+							word-wrap: break-word;
+							word-break: break-all;
+							white-space: pre-line;
+						}
+
+						.label {
+							margin-top: -4rpx;
+							margin-left: -4rpx;
+							border-radius: 20rpx 0 20rpx 0;
+							width: 80%;
+							background: linear-gradient(90deg, #FC4F3B, #FBCB7A);
+							color: white;
+							font-size: 24rpx;
+							height: 50rpx;
+							line-height: 50rpx;
+							margin-right: 20rpx;
+							text-align: center;
+							position: absolute;
+							top: 0;
+							left: 0;
+						}
+
+						.label2 {
+							margin-bottom: -4rpx;
+							margin-left: -4rpx;
+							margin-right: -4rpx;
+							width: 100%;
+							border-radius: 0 0 20rpx 20rpx;
+							background-color: #FC4F3B;
+							color: white;
+							font-size: 24rpx;
+							height: 50rpx;
+							line-height: 50rpx;
+							text-align: center;
+							position: absolute;
+							bottom: 0;
+						}
+
+					}
+				}
+
+				.pack-item:last-child {
+					margin-right: 30rpx;
+				}
+			}
+
+			.apply-button {
+				border-radius: 50rpx;
+				background: #e8c8ae;
+				color: #8d5a29;
+				width: 550rpx;
+				margin: 40rpx auto;
+			}
+		}
+
+		.agreementWrp {
+			display: flex;
+			align-items: center;
+			color: darkgray;
+			font-size: 26rpx;
+			margin-top: 30rpx;
+			padding-left: 30rpx;
+
+			.agreementText {
+				color: #387EF4;
+			}
+		}
+	}
+
+	.trialStyle {
+		height: 60rpx;
+		padding: 40rpx;
+		font-size: 22rpx;
+		color: darkgray;
+	}
+</style>
\ No newline at end of file