Skip to content

W
wxapp
Commit 96b41bc3 by ArronYR
Options

modify enroll & profile

parent 171ae531
Showing with 331 additions and 199 deletions
pages/detail/appoint/index.js
// pages/detail/appointment/index.js
import api from '../../../utils/Api.js'
import Schedule from '../../../utils/Schedule.js'
import Wx from '../../../utils/Wx.js'
const {
$Toast
} = require('../../../iview/base/index');
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
date: '2016-09-01',
},
detail: {},
bindDateChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
phone: '',
date: '',
remark: '',
loading: false,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
if (options.id) {
this.setData({
id: options.id
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
let that = this
wx.showNavigationBarLoading()
wx.showLoading({
title: '加载中...',
})
new Schedule().task(this.getDetailData).delay(1200).task(() => {
wx.hideNavigationBarLoading()
wx.hideLoading()
})
},
/**
......@@ -36,38 +54,96 @@ Page({
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
getDetailData: function() {
api.project.detail({
id: this.data.id
}).then(res => {
if (!res.code) {
this.setData({
detail: res.data
})
}
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
handlePhoneAuth: function(event) {
Wx.login().then(res => {
let encryptedData = event.detail.encryptedData
let iv = event.detail.iv
this.decodePhoneData(res.code, encryptedData, iv)
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
* 解密手机号数据
*/
onPullDownRefresh: function() {
decodePhoneData: function(code, encryptedData, iv) {
let that = this
api.getPhoneNumber({
code: code,
encryptedData: encryptedData,
iv: iv
}).then(res => {
if (!res.code) {
$Toast({
content: '手机号授权成功',
type: 'success'
});
this.setData({
phone: res.data.phone
})
} else {
$Toast({
content: '手机号授权失败',
type: 'error'
});
}
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
handleNickname: function(event) {
this.setData({
nickname: event.detail.value
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
handleDateChange: function(e) {
this.setData({
date: e.detail.value
})
},
handleRemark: function(event) {
this.setData({
remark: event.detail.value
})
},
handleSubmit: function() {
if (!this.data.nickname || !this.data.phone || !this.data.date) {
$Toast({
content: '请完善必要信息',
type: 'error'
});
return
}
if (this.data.phone.length == 0) {
$Toast({
content: '请授权手机号',
type: 'error'
});
return
}
api.project.reservate({
pid: this.data.id,
nickname: this.data.nickname,
phone: this.data.phone,
expectation_time: this.data.date,
remark: this.data.remark
}).then(res => {
$Toast({
content: res.msg,
type: !res.code ? 'success' : 'error'
});
})
}
})
\ No newline at end of file
pages/detail/appoint/index.json
......@@ -4,6 +4,9 @@
"i-input-number": "/iview/input-number/index",
"i-row": "/iview/row/index",
"i-col": "/iview/col/index",
"i-button": "/iview/button/index"
"i-cell-group": "/iview/cell-group/index",
"i-cell": "/iview/cell/index",
"i-button": "/iview/button/index",
"i-toast": "/iview/toast/index"
}
}
\ No newline at end of file
pages/detail/appoint/index.wxml
......@@ -7,19 +7,17 @@
<!-- 报名详情 -->
<view class='project_info-box'>
<view class='project_info'>
<image class='project_info_image' src='/images/personal_center/info_background.png'></image>
<image class='project_info_image' src='{{detail.poster}}'></image>
<view class='info-box'>
<text>亲子体验游泳</text>
<text>{{detail.title}}</text>
<view>
<text class='text-price'>￥980.00</text>
<text class='text-vip-price'>￥968.00</text>
<text class='text-price'>￥{{detail.price}}</text>
<text class='text-vip-price'>￥{{detail.vip_price}}</text>
<image class='vip-img' src='/images/icon_vip_price.png'></image>
</view>
</view>
</view>
</view>
<view class='project-title'>
......@@ -27,51 +25,35 @@
</view>
<!-- 报名信息 -->
<view class='project-input'>
<i-row i-class='border-bottom'>
<i-col span="6" i-class="col-class">
<text class='input-label'>姓名</text>
</i-col>
<i-col span="15" i-class="col-class">
<input class='input' type='text' value='张三' placeholder='请输入您的姓名'></input>
</i-col>
</i-row>
<i-row i-class='border-bottom'>
<i-col span="6" i-class="col-class">
<text class='input-label'>手机号</text>
</i-col>
<i-col span="15" i-class="col-class">
<input class='input' type='number' value='18685850590'></input>
</i-col>
</i-row>
<i-row i-class='border-bottom'>
<i-col span="6" i-class="col-class">
<text class='input-label'>期望活动时间</text>
</i-col>
<i-col span="15" i-class="col-class">
<picker class='input' mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
{{date}}
</view>
<i-cell-group>
<i-cell title="姓名" is-link i-class="cell-class">
<input slot="footer" class='input' type='text' placeholder='请输入您的姓名' bindinput='handleNickname'></input>
</i-cell>
<i-cell title="手机号" i-class="cell-class">
<block wx:if="{{phone.length == 0}}">
<button slot="footer" bindgetphonenumber="handlePhoneAuth" type="info" open-type="getPhoneNumber" class="btn-auth-phone">授权手机号</button>
</block>
<block wx:else>
<text slot="footer">{{phone}}</text>
</block>
</i-cell>
<i-cell title="期望活动时间" is-link i-class="cell-class">
<picker slot="footer" class='input' mode="date" value="{{date}}" bindchange="handleDateChange" class="picker">
<view class='picker-text'>{{date}}</view>
</picker>
</i-col>
</i-row>
<i-row i-class='border-bottom'>
<i-col span="6" i-class="col-class">
<text class='input-label'>备注</text>
</i-col>
<i-col span="15" i-class="col-class">
<input class='input' type='text' value='' placeholder='备注(可选)'></input>
</i-col>
</i-row>
</i-cell>
<i-cell title="备注" is-link i-class="cell-class">
<input slot="footer" class='input' type='text' placeholder='备注(可选)' bindinput='handleRemark'></input>
</i-cell>
</i-cell-group>
</view>
<i-row>
<i-row i-class="margin-top-20">
<i-col span="20" offset='2' i-class="col-class">
<i-button bind:click="handleClick" type="primary" shape="circle">支付</i-button>
<i-button bind:click="handleSubmit" type="info" shape="circle">提交预约</i-button>
</i-col>
</i-row>
</view>
\ No newline at end of file
</view>
<i-toast id="toast" />
\ No newline at end of file
pages/detail/appoint/index.wxss
......@@ -4,6 +4,10 @@ page {
background-color: #f7f7f7;
}
.page-wrapper {
margin-bottom: 20px;
}
/* 报名详情 */
.project-title {
......@@ -12,7 +16,7 @@ page {
}
.project-title > text {
margin-left: 30px;
margin-left: 15px;
font-size: 26rpx;
color: #9c9c9c;
}
......@@ -69,32 +73,41 @@ page {
background-color: #fff;
}
.input-label {
height: 90rpx;
line-height: 90rpx;
color: #7c7c7c;
font-size: 25rpx;
.cell-class {
position: relative;
}
.input {
height: 90rpx;
line-height: 90rpx;
text-align: right;
float: right;
color: #b2b2b2;
font-size: 25rpx;
.cell-class .title {
white-space: nowrap;
width: 200px;
}
.input-image-box {
height: 90rpx;
display: flex;
align-items: center;
justify-content: center;
.picker {
position: relative;
min-width: 200px;
height: 24px;
line-height: 24px;
}
.input-image-box>image {
width: 11rpx;
height: 18rpx;
.picker .picker-text {
height: 24px;
}
.btn-auth-phone {
display: inline-block;
border: 1px solid #eee;
background-color: transparent;
font-size: 14px;
line-height: 22px;
color: #767676;
}
.input {
text-align: right;
}
.input::-webkit-input-placeholder {
color: rgb(153, 153, 153);
}
.margin-bottom {
......
pages/detail/enroll/index.js
......@@ -168,6 +168,12 @@ Page({
children_age: this.data.childrenAge,
remark: this.data.remark
}).then(res => {
if (res.code) {
$Toast({
content: res.msg,
type: 'error'
});
}
console.log(res)
})
}
......
pages/detail/enroll/index.wxml
......@@ -8,7 +8,7 @@
<!-- 报名详情 -->
<view class='project_info-box'>
<view class='project_info'>
<image class='project_info_image' src='/images/personal_center/info_background.png'></image>
<image class='project_info_image' src='{{detail.poster}}'></image>
<view class='info-box'>
<text>{{detail.title}}</text>
<view>
......
pages/me/profile/index.js
// pages/me/profile/index.js
import api from '../../../utils/Api.js'
import Schedule from '../../../utils/Schedule.js'
import Wx from '../../../utils/Wx.js'
const {
$Toast
} = require('../../../iview/base/index');
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
array:["男","女"]
user: {},
nickname: '',
genders: ["未知", "男", "女"],
gender: 0,
phone: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
onReady: function() {
this.setData({
user: app.globalData.userInfo,
gender: app.globalData.userInfo.gender,
phone: app.globalData.userInfo.phone
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
handlePhoneAuth: function(event) {
Wx.login().then(res => {
let encryptedData = event.detail.encryptedData
let iv = event.detail.iv
this.decodePhoneData(res.code, encryptedData, iv)
})
},
/**
* 生命周期函数--监听页面隐藏
* 解密手机号数据
*/
onHide: function () {
decodePhoneData: function(code, encryptedData, iv) {
let that = this
api.getPhoneNumber({
code: code,
encryptedData: encryptedData,
iv: iv
}).then(res => {
if (!res.code) {
$Toast({
content: '手机号授权成功',
type: 'success'
});
this.setData({
phone: res.data.phone
})
} else {
$Toast({
content: '手机号授权失败',
type: 'error'
});
}
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
handleNickname: function(event) {
this.setData({
nickname: event.detail.value
})
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
handleGenderChange: function(event) {
this.setData({
gender: event.detail.value
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
handleSubmit: function() {
api.me.update({
nickname: this.data.nickname,
gender: parseInt(this.data.gender),
avatar: this.data.user.avatar
}).then(res => {
$Toast({
content: res.msg,
type: !res.code ? 'success' : 'error'
});
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
pages/me/profile/index.json
......@@ -6,6 +6,9 @@
"i-row": "/iview/row/index",
"i-col": "/iview/col/index",
"i-avatar": "/iview/avatar/index",
"i-button": "/iview/button/index"
"i-button": "/iview/button/index",
"i-toast": "/iview/toast/index",
"i-cell-group": "/iview/cell-group/index",
"i-cell": "/iview/cell/index"
}
}
\ No newline at end of file
pages/me/profile/index.wxml
<!--pages/me/profile/index.wxml-->
<view class='page-wrapper'>
<view class='plane'>
<i-row i-class='plane-item'>
<i-col span="8" i-class="col-class input ">头像</i-col>
<i-col span="16" i-class="col-class avatar-box">
<image class='avatar-image' src='https://i.loli.net/2017/08/21/599a521472424.jpg'></image>
</i-col>
</i-row>
<i-cell-group i-class='plane'>
<i-cell title="头像" i-class="cell-class">
<image slot="footer" class='avatar-image' src='{{user.avatar}}'></image>
</i-cell>
<i-cell title="姓名" is-link i-class="cell-class">
<input slot="footer" class='input' type='text' placeholder='请输入您的昵称' bindinput='handleNickname' value='{{user.nickname}}'></input>
</i-cell>
<i-cell title="性别" is-link i-class="cell-class">
<picker slot="footer" class='input' range="{{genders}}" value="{{user.gender}}" bindchange="handleGenderChange" class="picker">
<view class='picker-text'>{{genders[gender]}}</view>
</picker>
</i-cell>
</i-cell-group>
<i-row i-class='plane-item'>
<i-col span="8" i-class="col-class input ">名字</i-col>
<i-col span="16" i-class="col-class">
<input class='input input-text ' placeholder="请输入您的昵称"></input>
</i-col>
</i-row>
<i-cell-group i-class='plane'>
<i-cell title="手机号" i-class="cell-class">
<block wx:if="{{phone.length == 0}}">
<button slot="footer" bindgetphonenumber="handlePhoneAuth" type="info" open-type="getPhoneNumber" class="btn-auth-phone">授权手机号</button>
</block>
<block wx:else>
<text slot="footer">{{phone}}</text>
</block>
</i-cell>
</i-cell-group>
<i-row i-class='plane-item'>
<i-col span="8" i-class="col-class input ">性别</i-col>
<i-col span="16" i-class="col-class">
<picker bindchange="bindPickerChange" value="0" range="{{array}}">
<view class="picker input input-text">
{{array[0]}} >
</view>
</picker>
</i-col>
</i-row>
<view class='btn-save-wrapper'>
<i-button type="primary" bind:click="handleSubmit" shape="circle">保存</i-button>
</view>
</view>
<view class='plane'>
<i-row i-class='plane-item'>
<i-col span="8" i-class="col-class input ">手机号</i-col>
<i-col span="16" i-class="col-class">
<input class='input input-text ' placeholder="立即授权 >" disabled='false'></input>
</i-col>
</i-row>
<i-row i-class='plane-item'>
<i-col span="8" i-class="col-class input ">手机号</i-col>
<i-col span="16" i-class="col-class">
<input class='input input-text ' value='18685850590' disabled='false'></input>
</i-col>
</i-row>
</view>
<view class='saveBtn'>
<i-button type="primary" bind:click="handleClick" shape="circle">保存</i-button>
</view>
</view>
\ No newline at end of file
<i-toast id="toast" />
\ No newline at end of file
pages/me/profile/index.wxss
......@@ -3,41 +3,63 @@ page {
height: 100%;
}
.page-wrapper {
margin-bottom: 20px;
}
.plane {
background-color: #fff;
margin-top: 20rpx;
}
.plane-item {
width: 90%;
margin: auto;
border-bottom: 1px solid #f9f9f9;
.cell-class {
position: relative;
}
.input {
height: 100rpx;
line-height: 100rpx;
font-size: 28rpx;
.cell-class .title {
white-space: nowrap;
width: 200px;
}
.btn-auth-phone {
display: inline-block;
border: 1px solid #eee;
background-color: transparent;
font-size: 14px;
line-height: 22px;
color: #767676;
}
.btn-auth-phone::after {
display: none;
}
.input-text {
.input {
text-align: right;
color: #999;
}
.avatar-box {
padding: 5px 0;
height: 100rpx;
.input::-webkit-input-placeholder {
color: rgb(153, 153, 153);
}
.picker {
position: relative;
min-width: 200px;
height: 24px;
line-height: 24px;
}
.picker .picker-text {
height: 24px;
}
.avatar-image {
float: right;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
}
.saveBtn{
width:80%;
.btn-save-wrapper {
width: 80%;
margin: 40rpx auto;
}
project.config.json
......@@ -37,7 +37,7 @@
"list": []
},
"miniprogram": {
"current": 15,
"current": 16,
"list": [
{
"id": 0,
......@@ -134,6 +134,12 @@
"name": "立即报名",
"pathName": "pages/detail/enroll/index",
"query": "id=1"
},
{
"id": -1,
"name": "预约下次",
"pathName": "pages/detail/appoint/index",
"query": "id=1"
}
]
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment