index.js
const {
isEmpty
} = require("../../../utils/util");
Page({
/**
* 页面的初始数据
*/
data: {
//选择
optionList: ['博士及以上', '研究生', '本科','大专','高中及以下'],
value: '所有',
hideFlag: true, //true-隐藏 false-显示
animationData: {},
sexs: [
{ name: '男', value: '男' },
{ name: '女', value: '女', checked: 'true' }
],
color: "#F8EFFB",
titleInfo: "加入我们",
formData: {
realName: '',//项目
phone: '',
sex:'女',
age:'',
birth:'', //出生日期
work: '', //行业
mony:'',//月收入
marriage:'',//婚姻状况
education :'',//最高学历
require:'',//征婚要求
address: '',//居住地
relation: '', //关系
},
},
realName: function (e) {
let { formData } = this.data
formData.realName = e.detail.value
this.setData({
formData: formData
});
},
phone: function (e) {
let { formData } = this.data
formData.phone = e.detail.value
this.setData({
formData: formData
});
},
sex: function (e) {
let { formData } = this.data
formData.sex = e.detail.value
this.setData({
formData: formData
});
},
age: function (e) {
let { formData } = this.data
formData.age = e.detail.value
this.setData({
formData: formData
});
},
birth: function (e) {
let { formData } = this.data
formData.birth = e.detail.value
this.setData({
formData: formData
});
},
work: function (e) {
let { formData } = this.data
formData.work = e.detail.value
this.setData({
formData: formData
});
},
mony: function (e) {
let { formData } = this.data
formData.mony = e.detail.value
this.setData({
formData: formData
});
},
marriage: function (e) {
let { formData } = this.data
formData.marriage = e.detail.value
this.setData({
formData: formData
});
},
education: function (e) {
let { formData } = this.data
formData.education = e.detail.value
this.setData({
formData: formData
});
},
require: function (e) {
let { formData } = this.data
formData.require = e.detail.value
this.setData({
formData: formData
});
},
address: function (e) {
let { formData } = this.data
formData.address = e.detail.value
this.setData({
formData: formData
});
},
relation: function (e) {
let { formData } = this.data
formData.relation = e.detail.value
debugger
this.setData({
formData: formData
});
},
addUser: function () {
var that = this;
let { formData } = this.data
if (isEmpty(formData.realName)) {
wx.showModal({
title: '提示',
content: '请输入用户名',
success(res) {}
})
return
}
if (isEmpty(formData.phone)) {
wx.showModal({
title: '提示',
content: '请输入手机号',
success(res) {}
})
return
}
if (isEmpty(formData.age)) {
wx.showModal({
title: '提示',
content: '请输入年龄',
success(res) {}
})
return
}
if (isEmpty(formData.relation)) {
wx.showModal({
title: '提示',
content: '请输入和沂水关系',
success(res) {}
})
return
}
console.log('-------注册用户---------' + JSON.stringify(formData))
wx.cloud.init();
const db = wx.cloud.database({
env: 'cloud1-4gw00054c1481194'
})
db.collection('friend').add({ data: formData}).then(res => {
console.log('-------注册用户---------' + JSON.stringify(res))
//成功提示
if (res.errMsg == 'collection.add:ok') {
wx.showToast({
title: '操作成功',
icon: 'success',
duration: 3000
})
setTimeout(item => {
wx.navigateBack({
delta: 1,
})
}, 2000)
} else {
wx.showToast({
title: '' + res.errMsg,
icon: 'error',
duration: 3000
})
return
}
})
},
//选择
// 点击选项
getOption: function (e) {
let{formData}=this.data
formData.education=e.currentTarget.dataset.value
var that = this;
that.setData({
formData:formData,
value: e.currentTarget.dataset.value,
hideFlag: true
})
},
//取消
mCancel: function () {
var that = this;
that.hideModal();
},
// ----------------------------------------------------------------------modal
// 显示遮罩层
showModal: function () {
var that = this;
that.setData({
hideFlag: false
})
// 创建动画实例
var animation = wx.createAnimation({
duration: 400, //动画的持续时间
timingFunction: 'ease', //动画的效果 默认值是linear->匀速，ease->动画以低速开始，然后加快，在结束前变慢
})
this.animation = animation; //将animation变量赋值给当前动画
var time1 = setTimeout(function () {
that.slideIn(); //调用动画--滑入
clearTimeout(time1);
time1 = null;
}, 100)
},
// 隐藏遮罩层
hideModal: function () {
var that = this;
var animation = wx.createAnimation({
duration: 400, //动画的持续时间 默认400ms
timingFunction: 'ease', //动画的效果 默认值是linear
})
this.animation = animation
that.slideDown(); //调用动画--滑出
var time1 = setTimeout(function () {
that.setData({
hideFlag: true
})
clearTimeout(time1);
time1 = null;
}, 220) //先执行下滑动画，再隐藏模块
},
//动画 -- 滑入
slideIn: function () {
this.animation.translateY(0).step() // 在y轴偏移，然后用step()完成一个动画
this.setData({
//动画实例的export方法导出动画数据传递给组件的animation属性
animationData: this.animation.export()
})
},
//动画 -- 滑出
slideDown: function () {
this.animation.translateY(300).step()
this.setData({
animationData: this.animation.export(),
})
},
})2 index.wxml
<scroll-view scroll-y="true" style="height: 1100rpx;background-color: {{color}};">
<view style=" margin-top: 0.1rpx;">
<swiper autoplay interval="5000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
<swiper-item>
<image mode="widthFix" class="swiper" style="width: 100%;" src="https://img-blog.csdnimg.cn/85b227c4194742b1bf883ea1fa28b129.png">
</swiper-item>
</swiper>
<view class="titleCss">
<text class="titleTextCss">单身相亲活动</text>
</view>
<view class="weui-cells weui-cells_after-title" style="background-color:{{color}};">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label labelCss">
<!-- <image src="../../icon/user_red.png" class="iconCss"></image> -->
<text class="textCss"><text style="color: red;">*</text>真实姓名:</text>
</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入姓名"
value="{{formData.realName}}" bindinput="realName" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-label labelCss">
<!-- <image src="../../icon/phone.png" class="iconCss"></image> -->
<text class="textCss"><text style="color: red;">*</text>手机号:</text>
</view>
<view class="weui-cell__bd">
<input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入用户手机号" type="number"
bindinput="phone" value="{{formData.phone}}" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label labelCss">
<text class="textCss"><text style="color: red;">*</text>性别:</text>
</view>
</view>
<view class="weui-cell__bd">
<view class="weui-input inputCss">
<radio-group class="radio-group" bindchange="sex">
<label class="radio" wx:for="{{sexs}}">
<radio color="#007aff" value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
</label>
</radio-group>
<!-- <label class="radio">
<radio value="man" checked="true" />男
</label>
<label class="radio">
<radio value="woman" />女
</label> -->
</view>
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-label labelCss">
<text class="textCss"><text style="color: red;">*</text>年龄:</text>
</view>
<view class="weui-cell__bd">
<input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入年龄"
value="{{formData.age}}" bindinput="age" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-label labelCss">
<!-- <image src="../../icon/realName.png" class="iconCss"></image> -->
<text class="textCss">您的出生年:</text>
</view>
<view class="weui-cell__bd">
<input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入出生年"
value="{{formData.birth}}" bindinput="birth" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-label labelCss">
<!-- <image src="../../icon/phone.png" class="iconCss"></image> -->
<text class="textCss">从事领域:</text>
</view>
<view class="weui-cell__bd">
<input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入从事领域"
bindinput="work" value="{{formData.work}}" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-label labelCss">
<!-- <image src="../../icon/phone.png" class="iconCss"></image> -->
<text class="textCss">您的月收入:</text>
</view>
<view class="weui-cell__bd">
<input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入月收入"
value="{{formData.mony}}" bindinput="mony" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-label labelCss">
<!-- <image src="../../icon/phone.png" class="iconCss"></image> -->
<text class="textCss">您的婚姻状况:</text>
</view>
<view class="weui-cell__bd">
<input class="weui-input inputCss" placeholder-class="place-holder" placeholder="单身，离异，丧偶等"
value="{{formData.marriage}}" bindinput="marriage" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-label labelCss" bindtap="showModal">
<!-- <image src="../../icon/phone.png" class="iconCss"></image> -->
<text class="textCss">您的最高学历:</text>
</view>
<view class="weui-cell__bd">
<view class="weui-input inputCss">
<view bindtap="showModal">
<input disabled="true" class="weui-input inputCss" placeholder-class="place-holder"
value="{{formData.education}}" bindinput="education" />
</view>
</view>
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-label labelCss">
<!-- <image src="../../icon/phone.png" class="iconCss"></image> -->
<text class="textCss">您的征婚要求:</text>
</view>
<view class="weui-cell__bd">
<input class="weui-input inputCss" placeholder-class="place-holder" placeholder="填写在20字内"
value="{{formData.require}}" bindinput="require" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-label labelCss">
<!-- <image src="../../icon/phone.png" class="iconCss"></image> -->
<text class="textCss">现居住地:</text>
</view>
<view class="weui-cell__bd">
<input class="weui-input inputCss" placeholder-class="place-holder" placeholder="请输入现在居住地" type="text"
bindinput="address" value="{{formData.address}}" />
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-label labelCss">
<!-- <image src="../../icon/phone.png" class="iconCss"></image> -->
<text class="textCss"><text style="color: red;">*</text>与沂水关系:</text>
</view>
<view class="weui-cell__bd">
<input class="weui-input inputCss" placeholder-class="place-holder" placeholder="（家乡，丈人家，工作地等）"
bindinput="relation" value="{{formData.relation}}" />
</view>
</view>
<!-- <button class="weui-btn" style="background-color: #0089da;" type="primary" bindtap="addUser">提交</button> -->
</view>
</view>
<!-- modal -->
<view class="modal modal-bottom-dialog" hidden="{{hideFlag}}">
<view class="modal-cancel" bindtap="hideModal"></view>
<view class="bottom-dialog-body bottom-positon" animation="{{animationData}}">
<!-- -->
<view class='Mselect'>
<view wx:for="{{optionList}}" wx:key="unique" data-value='{{item}}' bindtap='getOption'>
{{item}}
</view>
</view>
<view></view>
<view class='Mcancel' bindtap='mCancel'>
<text>取消</text>
</view>
</view>
</view>
</scroll-view>
<button class="btn" style="background-color: #0089da;;" type="primary" bindtap="addUser">提交</button>3 index.wxss
@import '../../../lib/weui.wxss';
page{
background-color: #F8EFFB;
}
.swiper{
margin-top: -50rpx;
width: 100%;
}
.titleCss{
width: 100%;
height: 15vh;
text-align: center;
}
.titleTextCss{
color: #0089da;
font-weight: bold;
font-size: 40rpx;
line-height: 15vh;
}
.addBnCss{
margin-top:10vh;
}
.iconCss{
width: 3.5vh;
height: 3.5vh;
}
.labelCss{
display: flex;
}
.textCss{
font-size: 32rpx;
margin-left: 1vh;
line-height: 3.5vh;
}
.inputCss{
margin-left: 2vh;
}
.place-holder{
font-size: 28rpx;
}
.btn{
height: 100rpx;
margin-top: -25rpx;
}
/* 弹框 */
.arrow{
display:inline-block;
border:6px solid transparent;
border-top-color:#000;
margin-left:8px;
position:relative;
top:6rpx;
}
/* ---------------------------- */
/*模态框*/
.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}
.modal-cancel{position:absolute; z-index:2000; top:0; right:0; bottom: 0; left:0; background:rgba(0,0,0,0.3);}
.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}
/*动画前初始位置*/
.bottom-positon{-webkit-transform:translateY(100%);transform:translateY(100%);}
/* 底部弹出框 */
.bottom-positon{
text-align: center;
}
.Mselect{
margin-bottom: 20rpx;
}
.Mselect view{
padding: 26rpx 0;
background: #fff;
}
.Mselect view:not(:last-of-type){
border-bottom: 1px solid #dfdede;
}
.Mcancel{
background: #fff;
padding: 26rpx 0;
}
