You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
390 lines
9.7 KiB
390 lines
9.7 KiB
<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>所属区域<text style="color:red">*</text></view>
|
|
<view class="formRight">
|
|
<picker :value="rindex" @change="bindRegionChange" :range="arrRegion">
|
|
<view class="uni-input">{{arrRegion[rindex]}}</view>
|
|
</picker>
|
|
<input type="text" v-if="rindex!=0" v-model="info.address" style="margin-top: 10rpx;"
|
|
placeholder="请输入具体街道/地址">
|
|
</view>
|
|
</view>
|
|
<view class="formCol">
|
|
<view>建卡医院</view>
|
|
<view class="formRight">
|
|
<picker :value="hindex" @change="bindHospitalChange" :range="arrHospital">
|
|
<view class="uni-input">{{arrHospital[hindex]}}</view>
|
|
</picker>
|
|
|
|
<input type="text" v-if="arrHospital[hindex]=='其他'" v-model="info.hospital"
|
|
style="margin-top: 10rpx;" placeholder="请输入具体建卡医院">
|
|
</view>
|
|
</view>
|
|
<view class="formCol">
|
|
<view>备注信息</view>
|
|
<view class="formRight">
|
|
<u-input v-model="info.member_comment" border="true" type="textarea" placeholder="备注信息" />
|
|
</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>
|
|
|
|
<u-popup v-model="showUser" mode="center" closeable="true">
|
|
<view class="userBox" style="padding: 20rpx;">
|
|
<view class="userInfoContent" style="padding: 80rpx;font-size: 28rpx;">
|
|
<text class="">为了更好的提供服务请授权您的微信昵称</text>
|
|
</view>
|
|
<view class="userBoxBottom">
|
|
<button class="userBoxBottomCol btnuserBoxBottomCol" @click="getUserProfile"
|
|
style="border-radius:0;flex:1;">授权</button>
|
|
<button class="userBoxBottomCol" @click="touserInfoClose"
|
|
style="border-radius:0;flex:1;">关闭</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
weixin
|
|
} from '../../../../utils/weixin.js'
|
|
export default {
|
|
data() {
|
|
const currentDate = this.getDate({
|
|
format: true
|
|
})
|
|
return {
|
|
showUser: false,
|
|
info: {
|
|
due_date: currentDate,
|
|
token: '',
|
|
phone: '',
|
|
region: '',
|
|
address: '',
|
|
hospital: '',
|
|
product_id: '',
|
|
product_type: 'package',
|
|
member_comment: ""
|
|
},
|
|
token: '',
|
|
openid: '',
|
|
package_id: '',
|
|
arrHospital: ["请选择建卡医院", "市立医院", "苏大附一院", "苏大附二院", "中医院", "第五人民医院", "苏州市第七人民医院", "明基医院", "九龙医院", "娄葑医院",
|
|
"吴中人民医院", "甪直人民医院", "相城人民医院", "相城区第二人民医院", "吴江第一人民医院", "吴江第二人民医院", "盛泽医院", "其他"
|
|
],
|
|
arrRegion: ["请选择区域", "吴中区", "吴江区", "姑苏区", "工业园区", "高新区", "相城区", "昆山", "常熟", "张家港", "太仓"],
|
|
rindex: 0,
|
|
hindex: 0
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
let user_info = weixin.getUserInfoCache()
|
|
this.openid = user_info.openid
|
|
this.info.phone = user_info.phone
|
|
this.info.product_id = options.package_id;
|
|
this.info.promotion = uni.getStorageSync("base_promotion_id");
|
|
},
|
|
methods: {
|
|
getUserProfile() {
|
|
var that = this;
|
|
weixin.getUserProfile((res) => {
|
|
console.log(res)
|
|
weixin.request({
|
|
api: '/api/member/update-wechat-info',
|
|
method: 'POST',
|
|
data: {
|
|
nickname: res.nickName,
|
|
avatar: res.avatarUrl
|
|
},
|
|
utilSuccess: function(r) {
|
|
console.log(r)
|
|
if (r.status == 1) {
|
|
weixin.getOpenidInfo(openidInfo => {}, true)
|
|
that.showUser = false;
|
|
} else {
|
|
uni.showToast({
|
|
title: r.data.msg,
|
|
duration: 2000,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
|
|
})
|
|
})
|
|
},
|
|
|
|
bindRegionChange: function(e) {
|
|
this.rindex = e.target.value;
|
|
this.info.region = this.arrRegion[e.target.value];
|
|
},
|
|
bindHospitalChange: function(e) {
|
|
this.hindex = e.target.value;
|
|
if (this.arrHospital[e.target.value] != '其他') {
|
|
this.info.hospital = this.arrHospital[e.target.value];
|
|
}
|
|
},
|
|
pay() {
|
|
|
|
let user_info = weixin.getUserInfoCache();
|
|
|
|
if (weixin.isNull(user_info.user_info.wechat_nickname)||weixin.isNull(user_info.user_info.avatar)) {
|
|
this.showUser = true;
|
|
return false;
|
|
//this.getUserProfile();
|
|
}
|
|
|
|
|
|
if (!this.info.member_name) {
|
|
this.alert('请输入宝妈姓名')
|
|
return
|
|
}
|
|
if (!this.info.due_date) {
|
|
this.alert('请选择预产日期')
|
|
return
|
|
}
|
|
|
|
if (!this.info.phone) {
|
|
this.alert('请填写手机号')
|
|
return
|
|
}
|
|
|
|
|
|
if (!this.info.region || this.rindex == 0) {
|
|
this.alert('请填写所属区域')
|
|
return
|
|
}
|
|
|
|
|
|
if (weixin.isNull(this.info.address)) {
|
|
this.alert('请输入具体街道/地址')
|
|
return
|
|
}
|
|
|
|
weixin.request({
|
|
api: '/api/member/order-add',
|
|
method: 'POST',
|
|
data: this.info,
|
|
utilSuccess: r => {
|
|
if (parseFloat(r.data.total) == 0) {
|
|
uni.navigateTo({
|
|
url: '../buyMemberSuccess/buyMemberSuccess?id=' +
|
|
this.info.product_id
|
|
})
|
|
} else {
|
|
weixin.getOpenidInfo(() => {}, true);
|
|
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?id=' +
|
|
this.info.product_id
|
|
})
|
|
}
|
|
payParams.fail = result => {
|
|
console.log(result);
|
|
}
|
|
wx.requestPayment(payParams);
|
|
},
|
|
utilFail: res => {
|
|
console.log(res);
|
|
}
|
|
})
|
|
}
|
|
},
|
|
utilFail: r => {
|
|
weixin.alert(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>
|
|
.userBoxBottom {
|
|
.userBoxBottomCol {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.btnuserBoxBottomCol {
|
|
background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
|
|
border-radius: 36rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
text-align: center;
|
|
line-height: 72rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
button::after {
|
|
border: none
|
|
}
|
|
|
|
.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>
|