wx-yunyubang-miniprogram/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.memberName" 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.dueDate" :start="startDate" :end="endDate" @change="bindDateChange">
                        <view class="uni-input">{{info.dueDate}}</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>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				info: {
					dueDate: currentDate,
					token: '',
					phone: '',
					productId: '',
				}
			}
		},
		onLoad() {
			const phone_token = uni.getStorageSync('phone_token')
			this.info.token = phone_token.token
			this.info.phone = phone_token.phone
		},
		methods: {
			pay() {
				if (!this.info.memberName) {
					this.alert('请输入宝妈姓名')
					return
				}
				if (!this.info.dueDate) {
					this.alert('请选择日期')
					return
				}
				
				this.sendReq('/api/order/order-add', this.info, (r) => {
					if (r.data.status === 1) {
						
					} else {
						this.alert(r.data.msg)
					}
				})
			},
			bindDateChange: function(e) {
				this.info.dueDate = 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>