<!-- 新建活动 --> <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; } |
模板简介:该模板名称为【微信小程序发起添加活动单页面模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。