wx-yunyubang-miniprogram/packages/packageBuy/pages/buyMember/buyMember.vue

<template>
	<view class="content">
		<view class="memberBanner">
			<image mode="widthFix" src="../../static/memberBanner.jpg"></image>
		</view>
		<view class="buyBox">
			<view class="title">请输入您的联系方式</view>
			<view class="formCol">
				<view>宝妈姓名<text style="color:red">*</text></view>
				<view class="formRight"><input type="text" v-model="info.member_name" placeholder="宝妈姓名"></view>
			</view>
			<view class="formCol">
				<view>手机号码<text style="color:red">*</text></view>
				<view class="formRight"><input type="text" v-model="info.phone"  placeholder="请输入手机号码"></view>
			</view>
			<view class="formCol">
				<view>宝宝生日/预产期<text style="color:red">*</text></view>
				<view class="formRight">
					<picker mode="date" :value="info.due_date" :start="startDate" :end="endDate"
						@change="bindDateChange">
						<view class="uni-input">{{info.due_date}}</view>
					</picker>
				</view>
			</view>
			<!-- <view class="formCol" >
				<view>免费福利</view>
				<view class="formRight">
					<checkbox-group class="checkGroup">
						<label>
							<checkbox value="cb" checked="true" />孕产礼包
						</label>
						<label>
							<checkbox value="cb" />孕妈课堂
						</label>
					</checkbox-group>					
				</view>
			</view>			 -->
		</view>
		<view class="payBtn" @click="pay">立即支付</view>
	</view>
</template>

<script>
	import {
		weixin
	} from '../../../../utils/weixin.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				info: {
					due_date: currentDate,
					token: '',
					phone: '',
					product_id: '',
					product_type:'package'
				},
				token: '',
				openid: '',
				package_id: ''
			}
		},
		onLoad(options) {
			const phone_token = uni.getStorageSync('phone_token')
			this.info.phone = phone_token.phone
			let user_info = weixin.getUserInfoCache()
			this.openid = user_info.openid
			this.info.product_id = options.package_id;
			this.info.promotion = uni.getStorageSync("base_promotion_id");
		},
		methods: {
			pay() {
				if (!this.info.member_name) {
					this.alert('请输入宝妈姓名')
					return
				}
				if (!this.info.due_date) {
					this.alert('请选择预产日期')
					return
				}
				
				if (!this.info.phone) {
					this.alert('请填写手机号')
					return
				}
				

				weixin.request({
					api: '/api/member/order-add',
					method: 'POST',
					data: this.info,
					utilSuccess: r => {
						weixin.request({
							api: '/api/member/order-payment',
							method: 'GET',
							data: {
								order_id: r.data.id,
								openid: this.openid
							},
							utilSuccess: res => {
								setTimeout(function() {
									uni.hideLoading();
								}, 100);
								let payParams = JSON.parse(res.jsApiParameters)
								payParams.provider = 'wxpay'
								payParams.success = result => {
									uni.navigateTo({
										url: '../buyMemberSuccess/buyMemberSuccess'
									})
								}
								payParams.fail = result => {
									console.log(result);
								}
								wx.requestPayment(payParams);
							},
							utilFail: res => {
								console.log(res);
							}
						})

					},
					utilFail: r => {
						console.log(r);
					}

				})


			},
			bindDateChange: function(e) {
				this.info.due_date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.memberBanner {
		display: block;
		width: 100%;

		image {
			display: block;
			width: 100%;
		}
	}

	.buyBox {
		width: 690rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 30rpx auto;
		padding-bottom: 20rpx;

		.title {
			font-size: 30rpx;
			color: #333;
			padding: 30rpx;
		}

		.formCol {
			font-size: 28rpx;
			color: #666;
			padding: 0 30rpx;
			margin: 20rpx auto;

			.formRight {
				margin: 30rpx 0;

				input {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					border: 1rpx solid #dadada;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #666;
					padding: 0 20rpx;
					box-sizing: border-box;
				}

				.uni-input {
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					border: 1rpx solid #dadada;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #666;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
			}
		}
	}

	.checkGroup {
		display: flex;
		justify-content: flex-start;
		margin: 20rpx 0;

		label {
			width: 50%;
		}
	}

	.payBtn {
		width: 690rpx;
		height: 100rpx;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
		line-height: 100rpx;
		text-align: center;
		background: #FF578A;
		margin: 0 auto;
		border-radius: 20rpx;
	}
</style>