旅游预览报名开发日志

旅游预览报名开发日志

第一天主要设置了页面以及主题的框架

遇到的问题：图片的分辨率并不符合审美，后期进行加工，小程序没有完成跳转功能，不能实现具体信息的浏览，也没有实时的具体更新旅游的信息。

Page({/*** 页面的初始数据*/data: {imgUrls: [{id:1,tupian:	.jpg	,wangzhi:	.jpg	},{id:2,tupian:	.ginfowlink.w600.jpeg	,wangzhi:	.ginfowlink.w600.jpeg	},{id:,tupian:	.jpg	,wangzhi:	.jpg	}],contentitems:[{	images	:.jpg,name:天津欢乐谷},{	images	: =80855612,72792881&fm=27&gp=0.jpg,name: 北京乐多港},{	images	: =106442271,2414268&fm=27&gp=0.jpg,name: 北京欢乐谷},{	images	: =209254290,1859658&fm=27&gp=0.jpg,name: 天津方特}],erriyou:[{	images	: .jpeg,name: 宝泉秘境青龙峡三日游,jianjie:宝泉已成郁金香花海，百万株从荷兰引进的名贵郁金香竞相绽放，三月我在宝泉等你。},{	images	: /%E5%B9%B%E9%81%A5%E5%8F%A4%E5%9F%8EPPT%E8%8%8C%E6%99%AF%E5%9B%BE%E7%89%87.jpg,name: 平遥古城自由行两日游,jianjie: 住客栈  赏夜景  品小吃 论古今},{	images	: =405218629,64970487&fm=72,name: 开封,jianjie: 寻梦开封，清明上河图包公祠两日游。},{	images	: .jpg,name: 春节北京游,jianjie: 升旗 故宫 颐和园 鸟巢 水立方 长城}]},/*** 生命周期函数--监听页面加载*/onLoad: function (opti) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},on:function(event){cole.log(dataset.postid)}
})

<!--index.wxml-->
<view class=container><view class=container><swiper indicator-dots=true autoplay=true interval=000 duration=1000 catchtap=on><block wx:for={{imgUrls}}><swiper-item bindtap=	dianji1	><image src={{}} class=slide-image width=55 height=150 data-postId={{item.id}}/></swiper-item></block></swiper></view><view class=text1><view class=header><text>一日游</text><text class=text-all></text></view></view><view class=content><view class=	content-item	 wx:for={{contentitems}}><image src={{item.images}}></image><view class=	content-item-text	><text>{{}}</text></view></view></view><view class=text1><view class=header><text>多日游</text><text class=text-all>全部评测</text></view><view class=list-item  wx:for={{erriyou}}><view class=list-item-imges><image src={{item.images}} class=	abc	></image></view><view class=list-item-text><view class=list-item-text-title><text>{{}}</text></view><view class=list-item-text-content><text>{{item.jianjie}}</text></view></view></view></view>
</view>

.header{border-left-width: 2px;border-left-style: solid;border-left-color: limegreen;display: flex;justify-content: space-between;height: 80rpx;align-items: center;padding-left: 10rpx;padding-right: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;
}.text-all{
color: green;
font-size: 10px;}.content{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;margin-top: 5px;border-bottom: 2px solid #999;
}
.content-item{width:45%;height: 250rpx; background-color: goldenrod;margin: 5px;position: relative;
}
.content-item image{width:100%;height: 100%; 
}
.content-item-text{position: absolute;bottom: 0px;font-size: 10px;color: white;background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));height: 125rpx;width: 98%;display: flex;flex-direction: column;justify-content: flex-end;padding-left: %;padding-right: 1%;padding-bottom: 1%;
}
.list-item{height: 500rpx;width: 100%;
}
.list-item-imges
{height: 00rpx;width: 100%;position: relative;
}
.abc
{height: 100%;width: 100%;}
.aaaa{width: 100rpx;height: 100rpx;border-radius: 50%;position: absolute;bottom: -50rpx;right: 50rpx;
}
.list-item-text
{height: 200rpx;width: 96%;margin-top: 20rpx;padding-top: 20rpx;padding-left: 2%;padding-right: 2%;
}
.list-item-text-content
{font-size: 15px;color: #999;margin-top: 20rpx;
}

第二天：完成报名表单的制作

遇到的问题：由于没有与发布，所以只是使用，没有连接数据库

// pages/wallet/index.js
Page({data:{picUrls: [],inputValue: {num: 0,desc: },checkboxValue: [],actionText: 拍照/相册,btnBgc: ,itemsValue: [{checked: false,value: 男,color: #b9dd08},{checked: false,value: 女,color: #b9dd08},{checked: false,value: 1.2米以上,color: #b9dd08},{checked: false,value: 1.2米以下,color: #b9dd08}]},onLoad:function(opti){wx.setavigationBarTitle({title: 	报名表单	})},checkboxChange: function(e){let _values = e.detail.value;if(_values.length == 0){this.setData({btnBgc: })}else{this.setData({checkboxValue: _values,btnBgc: #b9dd08})}   },numberChange: function(e){this.setData({inputValue: {num: e.detail.value,desc: this.data.inputValue.desc}})},descChange: function(e){this.setData({inputValue: {num: this.data.,desc: e.detail.value}})},formSubmit: function(e){if(this.data.picUrls.length > 0 && this.length> 0){wx.request({url: 		,data: {// picUrls: this.data.picUrls,// inputValue: this.data.inputValue,// checkboxValue: this.
        },method: 	get	, // POST// header: {}, // 设置请求的 header
        success: function(res){wx.showToast({title: res.data.,icon: 	success	,duration: 2000})}})}else{wx.showModal({title: 请确认是否填完,content: 	亲，请全部填写呦	,confirmText: 确认,cancelText: 再看一下,success: (res) => {if(){// 继续填}else{cole.log(back)({delta: 1 // 回退前 delta(默认为1) 页面
            })}}})}},bindCamera: function(){({count: 4, sizeType: [	original	, 	compressed	],sourceType: [	album	, 	camera	], success: (res) => {let tfps = ;let _picUrls = this.data.picUrls;for(let item of tfps){_picUrls.push(item);this.setData({picUrls: _picUrls,actionText: });}}})},delPic: function(e){let index = dataset.index;let _picUrls = this.data.picUrls;_picUrls.splice(index,1);this.setData({picUrls: _picUrls})}
})

<!--pages/warn/index.wxml-->
<view class=container><view class=choose><view class=title>请选择报名地点：</view> <input placeholder=	景点名称	></input><input placeholder=	旅游时间	></input><input placeholder=	姓名	></input><input placeholder=		></input><input placeholder=	身份证号	></input><checkbox-group bindchange=checkboxChange class=choose-grids><block wx:for={{itemsValue}} wx:key={{item}}><view class=grid><checkbox value={{item.value}} checked={{}} color=#54a5a6 />{{item.value}}</view></block></checkbox-group>        </view><view class=action><view class=action-submit><button class=submit-btn type=default loading={{loading}} bindtap=formSubmit style=background-color: {{btnBgc}}>提交</button></view></view>
</view>

/* pages/wallet/index.wxss */
.choose{background-color: #fff;
}
.choose-grids{display: flex;flex-wrap: wrap;justify-content: space-around;padding: 50rpx;
}
.choose-grids .grid{width: 45%;height: 100rpx;margin-top: 6rpx;border-radius: 6rpx;line-height: 100rpx;text-align: center;border: 2rpx solid #54a5a6;
}
.choose-grids .grid:first-child,
.choose-grids .grid:nth-of-type(2){margin-top: 0;
}
.action .action-photo{background-color: #fff;padding: 40rpx 0px 40rpx 50rpx;
}
.action .action-photo image{position: relative;display: inline-block;width: 120rpx;height: 120rpx;overflow: visible;margin-left: 25rpx;
}
.action .action-photo image icon.del{display: block;position: absolute;top: -20rpx;right: -20rpx;
}
.action .action-photo text.add{display: inline-block;width: 120rpx;height: 120rpx;line-height: 120rpx;text-align: center;font-size: 24rpx;color: #ccc;border: 2rpx dotted #ccc;margin-left: 25rpx;vertical-align: top;
}
.action .action-input{padding-left: 50rpx;margin-top: 0rpx;background-color: #fff;
}
.action .action-input input{width: 90%;padding-top: 40rpx;padding-bottom: 40rpx;
}
.action .action-input input:first-child{border-bottom: 2rpx solid #ccc;padding-bottom: 20rpx;
}
.action .action-input input:last-child{padding-top: 20rpx;
}
.action .action-submit{padding: 40rpx 40rpx;background-color: #f2f2f2;
}

转载于:.html