原创基于微信小程序毕业设计题目选题课题自习室图书馆座位预约小程序的设计与实现（2）座位预约的实现

效果图

wxml代码

<form bindsubmit="yuyue">
<view class="qukuai"><view class="qukuai_zuo"></view><view class="qukuai_zhong">请选择预约日期</view><navigator class="qukuai_you" url=""></navigator>
</view>
<view class="riqi"><view class="riqi_list {{cur_riqiid==1 ? 'riqi_xuanzhong' : ''}}" data-riqiid="1" data-riqi="{{riqi1}}" bindtap="xuan_riqi"><view>{{riqi1_jianxie}}</view><view>星期{{riqi1_xingqiji}}</view></view><view class="riqi_list {{cur_riqiid==2 ? 'riqi_xuanzhong' : ''}}" data-riqiid="2" data-riqi="{{riqi2}}"  bindtap="xuan_riqi"><view>{{riqi2_jianxie}}</view><view>星期{{riqi2_xingqiji}}</view></view><view class="riqi_list {{cur_riqiid==3 ? 'riqi_xuanzhong' : ''}}" data-riqiid="3" data-riqi="{{riqi3}}"  bindtap="xuan_riqi"><view>{{riqi3_jianxie}}</view><view>星期{{riqi3_xingqiji}}</view></view><view class="riqi_list {{cur_riqiid==4 ? 'riqi_xuanzhong' : ''}}" data-riqiid="4"  data-riqi="{{riqi4}}" bindtap="xuan_riqi"><view>{{riqi4_jianxie}}</view><view>星期{{riqi4_xingqiji}}</view></view>
</view><view class="qukuai"><view class="qukuai_zuo"></view><view class="qukuai_zhong">请选择预约地方</view><navigator class="qukuai_you" url=""></navigator>
</view>
<view class="zuowei"><view class="zuowei_list  {{xuanzhong_flid==item.fenlei_id ? 'zuowei_xuanzhong' : ''}}" wx:for="{{arr_fenlei}}" wx:key="fenlei_id"data-flid="{{item.fenlei_id}}" data-flmc="{{item.fenlei_mc}}" bindtap="xuan_fenlei" >{{item.fenlei_mc}}</view>
</view><view class="qukuai"><view class="qukuai_zuo"></view><view class="qukuai_zhong">请选择座位(绿色表示已经被预约)</view><navigator class="qukuai_you" url=""></navigator>
</view>
<view class="zuowei"><block wx:for="{{arr_zuowei}}" wx:key="zuowei_id"><block wx:if="{{item.yuyue_zt=='yes'}}"><view class="zuowei_list  bggreen" >{{item.zuowei_mc}}</view></block><block wx:if="{{item.yuyue_zt=='no'}}"><view class="zuowei_list  {{cur_zuowei_id==item.zuowei_id ? 'zuowei_xuanzhong' : ''}}" data-zwid="{{item.zuowei_id}}" data-zwmc="{{item.zuowei_mc}}" bindtap="xuan_zuowei">{{item.zuowei_mc}}</view> </block>        </block>
</view><view class="qukuai"><view class="qukuai_zuo"></view><view class="qukuai_zhong myred">当前选择</view><navigator class="qukuai_you" url=""></navigator>
</view>
<view class="neirong">{{cur_riqi}} | {{cur_fenlei_mc}} | {{cur_zuowei_mc}}
</view>
<view class="xinxi"><view class="xinxi_xiangmu"><view class="xinxi_xiangmu1">我的姓名</view><view class="xinxi_xiangmu2"><input class="i1" type="text"  name="lianxiren" /></view></view>    <view class="xinxi_xiangmu"><view class="xinxi_xiangmu1">联系电话</view><view class="xinxi_xiangmu2"><input class="i1" type="text" name="dianhua"  /></view></view>    <view class="xinxi_xiangmu"><view class="xinxi_xiangmu1">备注说明</view><view class="xinxi_xiangmu2"><textarea class="t1" name="beizhu"  ></textarea></view></view>
</view>
<view class="tijiao"><block wx:if="{{user_id>0}}"><button class="tijiao_anniu" form-type="submit">提交座位预约</button></block><block wx:else><navigator class="denglu"  url="/pages/huiyuan/denglu" open-type="switchTab">请先登录</navigator></block>
</view>
</form>

wxss代码

.qukuai{display: flex;align-items:center; background-color:#f2f2f2;}
.qukuai_zuo{margin: 5px 10px; width:5px; height:20px; background-color: rgb(13, 163, 233);border-radius: 10px;}
.qukuai_zhong{font-size: 16px; flex-grow: 1;}
.qukuai_you{font-size: 14px; color: gray;padding-right: 10px;}.riqi{display: flex; flex-wrap: wrap;font-size: 13px;
}
.riqi_list{width: 25%;padding: 5px;box-sizing: border-box;text-align: center;background-color: gainsboro;border-radius: 5px;border:3px solid white;
}
.riqi_xuanzhong{background-color: orangered;color: white;
}.zuowei{display: flex; flex-wrap: wrap;font-size: 13px;
}
.zuowei_list{width: 25%;padding: 5px;box-sizing: border-box;text-align: center;background-color: gainsboro;border-radius: 5px;border:3px solid white;
}
.zuowei_xuanzhong{background-color: orangered;color: white;
}
.myred{color: red;}
.neirong{font-size: 15px; padding: 10px;color: green; border-bottom: 1px dotted gainsboro;}
.tijiao{padding: 5px;}
.tijiao_anniu{background-color:orangered;color: white;}.xinxi{padding: 5px;font-size: 15px;
}
.xinxi_xiangmu{padding: 5px;border-bottom: 1px solid gainsboro;display: flex;
}
.noborder{border: 0px;}
.xinxi_xiangmu1{width: 5em;
}
.xinxi_xiangmu2{flex-grow: 1;
}
.i1{border: 1px solid gainsboro;}
.t1{width: 100%;height: 2em;border: 1px solid gainsboro;
}.denglu{background-color: orangered; color: white; border-radius: 10px; text-align: center;}
.bggreen{background-color: green; color: white;}

原创基于微信小程序毕业设计题目选题课题自习室图书馆座位预约小程序的设计与实现（2）座位预约的实现相关推荐

原创基于微信小程序毕业设计题目选题课题羽毛球篮球足球乒乓球场地球馆预约小程序的设计与实现（1）首页
首页主要是最新的资讯.场地球馆说明效果图 wxml页面 <view><image class="ad01" src="/img/1.png" ...
原创基于微信小程序毕业设计题目选题课题羽毛球篮球足球乒乓球场地球馆预约小程序的设计与实现（3）我的预约列表
我的预约列表,效果图 wxml代码  <view class="yuyue" wx:for ...
原创基于微信小程序毕业设计题目选题课题图书馆图书借阅小程序的设计与实现（1）首页
首页主要显示:轮播图.菜单.最新资讯.最新上架的图书效果图 wxml代码  < ...
校园失物招领小程序开题报告和作品效果图（基于微信小程序毕业设计题目选题课题）
用户首次登陆系统需要注册一个用户或直接使用微信作为账号,用户在登录平台后,可以进行平台的操作.主要模块包括以下几点: (1)登录功能:注册普通账号登录:也可以直接使用微信登录:登录后可以修改用户的基本 ...
基于微信小程序的租车小程序毕业设计毕业论文开题报告和效果图（基于微信小程序毕业设计题目选题课题）
自习室图书馆座位预约小程序开题报告（基于微信小程序毕业设计题目选题课题）
开题报告效果图
校园、同城二手交易信息小程序毕业设计毕业论文开题报告和效果图参考（基于微信小程序毕业设计题目选题课题）
医院预约挂号小程序毕业设计毕业论文开题报告和效果图参考（基于微信小程序毕业设计题目选题课题）
基于微信运动场地预约小程序毕业设计毕业论文开题报告和效果图（基于微信小程序毕业设计题目选题课题）
房产中介预约看房小程序毕业设计毕业论文开题报告和效果图参考（基于微信小程序毕业设计题目选题课题）

原创基于微信小程序毕业设计题目选题课题自习室图书馆座位预约小程序的设计与实现（2）座位预约的实现

效果图

wxml代码

wxss代码

原创基于微信小程序毕业设计题目选题课题自习室图书馆座位预约小程序的设计与实现（2）座位预约的实现相关推荐

最新文章

热门文章

原创 基于微信小程序毕业设计题目选题课题 自习室图书馆座位预约小程序的设计与实现（2）座位预约的实现

效果图

wxml代码

wxss代码

原创 基于微信小程序毕业设计题目选题课题 自习室图书馆座位预约小程序的设计与实现（2）座位预约的实现相关推荐

最新文章

热门文章

原创基于微信小程序毕业设计题目选题课题自习室图书馆座位预约小程序的设计与实现（2）座位预约的实现

原创基于微信小程序毕业设计题目选题课题自习室图书馆座位预约小程序的设计与实现（2）座位预约的实现相关推荐