Skip to content

W
wxapp
Commit 96b41bc3 by ArronYR
Options

modify enroll & profile

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