

<!-- 新建活动 -->
<view class="add-page">
<form bindsubmit="submitForm">
<view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{TopTips}}</view>
<view class="mod-a">
<!-- 活动主题 -->
<view class="mod t-name">
<text class="key">活动名称</text>
<input name="title" class="input" maxlength="100" placeholder="请输入活动名称" value="{{title}}" />
<image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
</view>
</view>
<view class="mod-a mt20">
<!-- 活动类别 -->
<view class="mod t-sign-time">
<text class="key">活动类别</text>
<picker bindchange="bindTypeChange" value="{{typeIndex}}" range="{{types}}">
<view class="value" name="types">{{types[typeIndex]}}
<image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
</view>
</picker>
</view>
<!-- 活动地点 -->
<view class="mod t-address" bindtap="chooseLocation">
<text class="key">活动地点</text>
<text name="address" class="value" bindtap="addressChange" value="{{address}}">{{address}}</text>
<image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
</view>
<!-- 有效时间 -->
<view class="mod t-sign-time">
<text class="key">有效时间</text>
<picker mode="date" value="{{date}}" start="{{date}}" end="2020-09-01" bindchange="bindDateChange">
<view class="value" name="endtime">{{date}}
<image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
</view>
</picker>
</view>
<!-- 限制人数 -->
<view class="mod t-early">
<text class="key">限制人数</text>
<switch type="switch" bindchange="switch1Change" name="switchHide" />
</view>
<!-- 人数设置 -->
<view wx:if="{{peopleHide}}">
<view class="mod t-name">
<text class="key">人数设置</text>
<input name="peoplenum" type="number" class="input" maxlength="100" placeholder='请输入人数' value="{{peoplenum}}" />
<image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
</view>
</view>
</view>
<!-- 活动内容 -->
<view class="mod-a mt20">
<view class="mod-big my-nick">
<textarea name="content" class="weui-textarea" placeholder="请输入活动内容" value="{{content}}" style="height: 7em" bindinput="bindTextAreaChange" maxlength="{{noteMaxLen}}" />
<view class="chnumber">{{noteNowLen}}/{{noteMaxLen}}</view>
</view>
</view>
<view class="add_pic" bindtap="uploadPic" wx-if="{{!isSrc}}">
<view>添加图片(选)</view>
</view>
<view wx:if="{{isSrc}}" class="image_box">
<view class="picPre">
<image src="{{src}}" mode="aspectFit"></image>
<view bindtap="clearPic"></view>
</view>
</view>
<view class="mod-a mt20"></view>
<view class="mod-a mt20" wx:if="{{showInput}}">
<!-- 真实姓名 -->
<view class="mod t-name">
<text class="key">真实姓名</text>
<input name="realname" class="input" maxlength="100" placeholder="请输入真实姓名" value="{{realname}}"/>
<image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
</view>
<view class="mod-a"></view>
<view class="mod t-name">
<picker name="contactWay" bindchange="bindAccountChange" value="{{accountIndex}}" range="{{accounts}}">
<view class="select">{{accounts[accountIndex]}}</view>
</picker>
<input name="contactValue" class="input" placeholder="请输入号码" value="{{contactValue}}"/>
<image class="arrow-r" src="/static/images/arrow-r-0.png"></image>
</view>
<view class="add_pic t-code" bindtap="uploadCodePic" wx-if="{{!isCodeSrc}}">
<view class='code'>上传活动群二维码(选)</view>
</view>
<view wx:if="{{isCodeSrc}}" class="image_box">
<view class="picPre">
<image src="{{codeSrc}}" mode="aspectFit"></image>
<view bindtap="clearCodePic"></view>
</view>
</view>
</view>
<view class="mod-a mt20">
<checkbox-group bindchange="bindAgreeChange">
<label class="weui-agree" for="weuiAgree">
<view class="weui-agree__text">
<checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
<view class="weui-agree__checkbox-icon">
<icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
</view>
阅读并同意
<view bindtap="showNotice" class="weui-agree__link">
《发起须知》</view>
</view>
</label>
</checkbox-group>
<view class="submit-btn">
<button class='button' loading="{{isLoading}}" hover-start-time="200" disabled="{{isdisabled}}" formType="submit">发起</button>
</view>
</view>
</form>
</view>
<view class="notice" id="notice" wx:if="{{notice_status}}" bindtap="tapNotice">
<view class="box">
<view class="box-hd">
<text class="box-title">发起须知</text>
<image class="box-close" src="/static/images/more/close.png" bindtap="hideNotice"></image>
</view>
<view class="box-bd">
<view class="notice-q">1、为什么需要填写真实姓名与联系方式等信息?</view>
<view class="notice-a">
<text>线上报名,线下联系;填写真实有效的联系信息更加有利于活动的开展</text>
<text>联系方式有三种选择,分别是微信号,QQ号以及手机号,这三种联系方式在目前生活中是最为普遍的</text>
<text>当有用户报名您的发起时,即可查看您填写的联系信息,以便加入者与您联系,没有加入的用户无法查看您的联系信息</text>
<text>活动的群二维码主要用于活动的交流与联系,可以视活动的大小上传或者不上传</text>
</view>
<view class="notice-q">2、发起内容的有哪些限制?</view>
<view class="notice-a">
<text>发起内容应该在法律允许的范围内,如果发起内容违反了相关的法律法规,一经发现,本软件有权限对该发起进行删除操作</text>
</view>
</view>
</view>
</view>
|
@import '/style/weui.wxss';
@import '/style/zanui.wxss';
.select{
padding-right:20px;
height:2.58823529em;
min-height:2.58823529em;
line-height:2.58823529em;
color: #118fff;
}
.line-css {
height: 1px;
background: #b2b2b2;
margin: 0 10rpx;
}
.addressdetail{
margin-top:.77em;
padding-left:15px;
padding-right:15px;
color:#999;
font-size:14px;
}
.button {
width: 400rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 16px;
border: 0 none;
background: #118fff;
color: #fff;
margin: 30rpx auto;
border-radius: 50px;
}
.add_pic {
padding: 0 40rpx;
background: #fff;
}
.add_pic view {
display: inline-block;
margin-top: 20rpx;
width: 430rpx;
height: 200rpx;
line-height: 200rpx;
text-align: center;
background: url(http://bmob-cdn-14867.b0.upaiyun.com/2017/11/23/e93d28a14095af18801d3c1c68e08fe7.png) no-repeat left center;
background-size: 160rpx auto;
padding-left: 80rpx;
color: #b2b2b2;
}
.add_pic .code {
display: inline-block;
margin-top: 20rpx;
width: 430rpx;
height: 200rpx;
line-height: 200rpx;
text-align: center;
background: url(http://bmob-cdn-14867.b0.upaiyun.com/2017/11/23/e93d28a14095af18801d3c1c68e08fe7.png) no-repeat left center;
background-size: 160rpx auto;
padding-left: 130rpx;
color: #b2b2b2;
}
.image_box {
width: 100%;
background: #fff;
margin-top: 20rpx;
margin-bottom: 20rpx;
padding: 10px 0 10rpx;
}
.picPre {
width: 50%;
margin: 0 auto;
position: relative;
box-sizing: border-box;
}
.picPre image {
width: 100%;
height: 180rpx;
}
.picPre view {
position: absolute;
right: 0px;
top: -20rpx;
width: 15px;
height: 15px;
background: url(http://bmob-cdn-14867.b0.upaiyun.com/2017/11/23/b93323e440f4c3998034dbb9011a1e1d.png) no-repeat;
background-size: cover;
}
.hidden {
display: none;
}
/*最新样式*/
.mt20{
margin-top: 20rpx;
}
.add-page{
display: flex;
flex-direction: column;
font-size: 32rpx;
color: #676767;
padding: 30rpx 0;
}
.mod-a{
padding: 0 20rpx;
border: 1px solid #f0f0f0;
background-color: #fff;
}
.mod{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 90rpx;
padding: 0 20rpx;
}
.mod-big{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 250rpx;
padding: 0 20rpx;
position:relative;
}
.chnumber{
position:absolute;
right:0;
bottom:0;
color:#b2b2b2;
text-align:right;
}
.arrow-r{
width: 9rpx;
height: 17rpx;
margin-left: 10rpx;
}
.arrow-d{
width: 17rpx;
height: 9rpx;
margin-left: 10rpx;
}
.value{
color: #b2b2b2;
}
.t-sign-time .value{
display: flex;
flex-direction: row;
align-items: center;
}
.t-early .value{
padding-right: 20rpx;
}
.t-name .input, .t-address .value{
text-align: right;
width: 510rpx;
overflow: hidden;
color: #b2b2b2;
height: 44rpx;
}
.t-address, .t-sign-time, .t-time{
border-bottom: 1px solid #f0f0f0;
}
.t-code{
border-top: 1px solid #f0f0f0;
}
.t-time{
justify-content:space-around;
}
.start, .end{
display: flex;
flex-direction: row;
align-items: center;
}
.pipe{
height: 48rpx;
border-left: 1px solid #f0f0f0;
}
.date{
display: flex;
flex-direction: row;
align-items: center;
padding-left: 10rpx;
color: #2fcc85;
}
.week{
display: flex;
flex-direction: row;
justify-content:space-around;
align-items: center;
}
.week .d{
display: flex;
flex-direction: row;
justify-content: center;
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background-color: #b2b2b2;
text-align: center;
color: #fff;
margin: 0 15rpx;
}
.week .on{
background-color: #2fcc85;
}
.create{
margin-top: 80rpx;
padding: 0 26rpx;
}
.create .btn{
height: 80rpx;
line-height: 80rpx;
background-color: #2fcc85;
color: #fff;
}
.create .button-hover{
background-color: #2caf6d;
color: #aadfc4;
}
.create .disabled{
opacity: 0.4
}
.submit-btn {
background:#fff;
overflow:hidden;
}
.login-notice {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 30rpx;
font-size: 10pt;
color: #bbb;
}
.login-notice-img {
width: 11pt;
height: 11pt;
margin: 0 5rpx;
}
.confirm-btn {
font-size: 13pt;
line-height: 85rpx;
height: 85rpx;
background: #7acfa6;
color: #fff;
text-align: center;
border-radius: 5px;
margin: 50rpx 3%;
}
.confirm-btn:active {
opacity: .8;
}
.notice {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.box {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
width: 80%;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 50px rgba(22,22,22,.35);
transform: translate3d(0,0,0);
}
.box-hd {
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
border-bottom: 1px solid #eee;
}
.box-title {
font-size: 13pt;
}
.box-close {
position: absolute;
right: 20rpx;
width: 35rpx;
height: 35rpx;
padding: 15rpx;
}
.box-bd {
flex: 1;
display: flex;
flex-direction: column;
padding: 15rpx 40rpx 30rpx;
}
.notice-q {
color: #999;
font-size: 11pt;
line-height: 200%;
margin-top: 5rpx;
}
.notice-a {
text-indent: 1em;
line-height: 160%;
display: flex;
flex-direction: column;
}
.notice-a text{
word-break: break-all;
}
|
//获取应用实例
var app = getApp()
var Bmob = require("../../utils/bmob.js");
var common = require('../template/getCode.js')
var that;
var myDate = new Date();
//格式化日期
function formate_data(myDate) {
let month_add = myDate.getMonth() + 1;
var formate_result = myDate.getFullYear() + '-'
+ month_add + '-'
+ myDate.getDate()
return formate_result;
}
Page({
/**
* 页面的初始数据
*/
data: {
notice_status: false,
accounts: ["微信号", "QQ号", "手机号"],
accountIndex: 0,
peopleHide: false,
isAgree: false,
date: formate_data(myDate),
address: '点击选择位置',
longitude: 0, //经度
latitude: 0,//纬度
showTopTips: false,
TopTips: '',
noteMaxLen: 200,//备注最多字数
content: "",
noteNowLen: 0,//备注当前字数
types: ["运动", "游戏", "交友", "旅行", "读书", "竞赛", "电影", "音乐", "其他"],
typeIndex: "0",
showInput: false,//显示输入真实姓名,
},
tapNotice: function (e) {
if (e.target.id == 'notice') {
this.hideNotice();
}
},
showNotice: function (e) {
this.setData({
'notice_status': true
});
},
hideNotice: function (e) {
this.setData({
'notice_status': false
});
},
//字数改变触发事件
bindTextAreaChange: function (e) {
var that = this
var value = e.detail.value,
len = parseInt(value.length);
if (len > that.data.noteMaxLen)
return;
that.setData({
content: value, noteNowLen: len
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
that = this;
that.setData({//初始化数据
src: "",
isSrc: false,
ishide: "0",
autoFocus: true,
isLoading: false,
loading: true,
isdisabled: false
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
wx.hideToast()
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var myInterval = setInterval(getReturn, 500); ////半秒定时查询
function getReturn() {
wx.getStorage({
key: 'user_openid',
success: function (ress) {
if (ress.data) {
clearInterval(myInterval)
that.setData({
loading: true
})
}
}
})
}
},
//上传活动图片
uploadPic: function () {//选择图标
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], //压缩图
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
that.setData({
isSrc: true,
src: tempFilePaths
})
}
})
},
//删除图片
clearPic: function () {//删除图片
that.setData({
isSrc: false,
src: ""
})
},
//上传活动群二维码
uploadCodePic: function () {//选择图标
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'],//压缩图
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
that.setData({
isCodeSrc: true,
codeSrc: tempFilePaths
})
}
})
},
//删除活动群二维码
clearCodePic: function () {
that.setData({
isCodeSrc: false,
codeSrc: ""
})
},
//限制人数
switch1Change: function (e) {
if (e.detail.value == false) {
this.setData({
peopleHide: false
})
} else if (e.detail.value == true) {
this.setData({
peopleHide: true
})
}
},
//改变时间
bindDateChange: function (e) {
this.setData({
date: e.detail.value
})
},
//改变活动类别
bindTypeChange: function (e) {
this.setData({
typeIndex: e.detail.value
})
},
//选择地点
addressChange: function (e) {
this.addressChoose(e);
},
addressChoose: function (e) {
var that = this;
wx.chooseLocation({
success: function (res) {
that.setData({
address: res.name,
longitude: res.longitude, //经度
latitude: res.latitude,//纬度
})
if (e.detail && e.detail.value) {
this.data.address = e.detail.value;
}
},
fail: function (e) {
},
complete: function (e) {
}
})
},
//改变联系方式
bindAccountChange: function (e) {
this.setData({
accountIndex: e.detail.value
})
},
//同意相关条例
bindAgreeChange: function (e) {
this.setData({
isAgree: !!e.detail.value.length,
showInput: !this.data.showInput
});
},
//表单验证
showTopTips: function () {
var that = this;
this.setData({
showTopTips: true
});
setTimeout(function () {
that.setData({
showTopTips: false
});
}, 3000);
},
//提交表单
submitForm: function (e) {
var that = this;
if (that.data.showInput == false) {
wx.showModal({
title: '提示',
content: '请先阅读《发起须知》'
})
return;
}
var title = e.detail.value.title;
var endtime = this.data.date;
var typeIndex = this.data.typeIndex;
var acttype = 1 + parseInt(typeIndex);
var acttypename = getTypeName(acttype); //获得类型名称
var address = this.data.address;
var longitude = this.data.longitude; //经度
var latitude = this.data.latitude;//纬度
var switchHide = e.detail.value.switchHide;
var peoplenum = e.detail.value.peoplenum;
console.log(peoplenum);
var content = e.detail.value.content;
//------发布者真实信息------
var realname = e.detail.value.realname;
var contactindex = this.data.accountIndex;
if (contactindex == 0) {
var contactWay = "微信号";
} else if (contactindex == 1) {
var contactWay = "QQ号";
} else if (contactindex == 2) {
var contactWay = "手机号";
}
var contactValue = e.detail.value.contactValue;
var wxReg = new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$");
var qqReg = new RegExp("[1-9][0-9]{4,}");
var phReg = /^1[34578]d{9}$/;
var nameReg = new RegExp("^[u4e00-u9fa5]{2,4}$");
//先进行表单非空验证
if (title == "") {
this.setData({
showTopTips: true,
TopTips: '请输入主题'
});
} else if (address == '点击选择位置') {
this.setData({
showTopTips: true,
TopTips: '请选择地点'
});
} else if (switchHide == true && peoplenum == "") {
this.setData({
showTopTips: true,
TopTips: '请输入人数'
});
} else if (content == "") {
this.setData({
showTopTips: true,
TopTips: '请输入活动内容'
});
}else if (realname == "") {
this.setData({
showTopTips: true,
TopTips: '请输入真实姓名'
});
} else if (realname != "" && !nameReg.test(realname)) {
this.setData({
showTopTips: true,
TopTips: '真实姓名一般为2-4位汉字'
});
} else if (contactValue == "") {
this.setData({
showTopTips: true,
TopTips: '请输入联系方式'
});
} else if (contactWay == "微信号" && !wxReg.test(contactValue)) {
this.setData({
showTopTips: true,
TopTips: '微信号格式不正确'
});
} else if (contactWay == "手机号" && !phReg.test(contactValue)) {
this.setData({
showTopTips: true,
TopTips: '手机号格式不正确'
});
} else if (contactWay == "QQ号" && !qqReg.test(contactValue)) {
this.setData({
showTopTips: true,
TopTips: 'QQ号格式不正确'
});
} else {
console.log('校验完毕');
that.setData({
isLoading: true,
isdisabled: true
})
//向 Events 表中新增一条数据
wx.getStorage({
key: 'user_id',
success: function (ress) {
var Diary = Bmob.Object.extend("Events");
var diary = new Diary();
var me = new Bmob.User();
me.id = ress.data;
diary.set("title", title);
diary.set("endtime", endtime);
diary.set("acttype", acttype + "");
diary.set("isShow",1);
diary.set("address", address);
diary.set("longitude", longitude);//经度
diary.set("latitude", latitude);//纬度
if (that.data.peopleHide) { //如果设置了人数
diary.set("peoplenum", peoplenum);
} else if (!that.data.peopleHide) {
diary.set("peoplenum", "-1");
}
diary.set("content", content);
diary.set("publisher", me);
diary.set("likenum", 0);
diary.set("commentnum", 0);
diary.set("liker", []);
diary.set("joinnumber", 0); //发布后初始加入人数为0
diary.set("joinArray", []);
if (that.data.isSrc == true) {
var name = that.data.src; //上传图片的别名
var file = new Bmob.File(name, that.data.src);
file.save();
diary.set("actpic", file);
}
//新增操作
diary.save(null, {
success: function (result) {
//活动扩展表中添加一条记录
var Diary = Bmob.Object.extend("EventMore");
var query = new Diary();
var Events = Bmob.Object.extend("Events");
var event = new Events();
event.id = result.id;
query.set("Status", 0);
query.set("Statusname", "准备中");
query.set("event", event);
//如果上传了群二维码
if (that.data.isCodeSrc == true) {
var name = that.data.codeSrc; //上传图片的别名
var file = new Bmob.File(name, that.data.codeSrc);
file.save();
query.set("qrcode", file);
}
query.save();
//再将发布者的信息添加到联系表中
wx.getStorage({
key: 'user_id',
success: function (ress) {
var Contacts = Bmob.Object.extend("Contacts");
var contact = new Contacts();
var Events = Bmob.Object.extend("Events");
var event = new Events();
event.id = result.id;
var me = new Bmob.User();
me.id = ress.data;
contact.set("publisher", me); //发布人是自己
contact.set("currentUser", me); //参加的人也是自己
contact.set("event", event);
contact.set("realname", realname);
contact.set("contactWay", contactWay);
contact.set("contactValue", contactValue);
contact.save();
},
})
console.log("发布成功,objectId:" + result.id);
that.setData({
isLoading: false,
isdisabled: false,
eventId: result.id,
})
//添加成功,返回成功之后的objectId(注意,返回的属性名字是id,而不是objectId)
common.dataLoading("发起成功", "success", function () {
//重置表单
that.setData({
title: '',
typeIndex: 0,
address: '点击选择位置',
longitude: 0, //经度
latitude: 0,//纬度
data: formate_data(myDate),
isHide: true,
peoplenum: 0,
peopleHide: false,
isAgree: false,
accountIndex: 0,
realname: "",
content: "",
contactValue: '',
noteNowLen: 0,
showInput: false,
src: "",
isSrc: false,
codeSrc: "",
isCodeSrc: false
})
});
},
error: function (result, error) {
//添加失败
console.log("发布失败=" + error);
common.dataLoading("发起失败", "loading");
that.setData({
isLoading: false,
isdisabled: false
})
}
})
},
})
}
setTimeout(function () {
that.setData({
showTopTips: false
});
}, 1000);
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
//根据活动类型获取活动类型名称
function getTypeName(acttype) {
var acttypeName = "";
if (acttype == 1) acttypeName = "运动";
else if (acttype == 2) acttypeName = "游戏";
else if (acttype == 3) acttypeName = "交友";
else if (acttype == 4) acttypeName = "旅行";
else if (acttype == 5) acttypeName = "读书";
else if (acttype == 6) acttypeName = "竞赛";
else if (acttype == 7) acttypeName = "电影";
else if (acttype == 8) acttypeName = "音乐";
else if (acttype == 9) acttypeName = "其他";
return acttypeName;
}
|
模板简介:该模板名称为【微信小程序发起添加活动单页面模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。