原创 基于微信小程序毕业设计题目选题课题 图书馆图书借阅小程序的设计与实现(6)下单、填写地址、留言
作者:互联网
该页面主要确认要借阅的图书列表、选择地址、留言
效果图
wxml代码
<form bindsubmit='xiadan'>
<scroll-view scroll-y style='height: {{winHeight -40}}px' class='gwc'>
<!--地址列表-->
<view class='jiesuan-dizhi'>
<view class='jiesuan-dizhi-zuo'>
<view class='jiesuan-dizhi-list'>
<radio-group name="dizhiid">
<view wx:for="{{dizhis}}">
<radio value='{{item.dizhi_id}}' checked='{{item.yn_moren ==1 ? true :false}}'>{{item.xingming}}-{{item.shouji}}</radio>
<text class='jiesuan-dizhi-list-dizhi'>-{{item.diqu1}}{{item.diqu2}}{{item.diqu2}}{{item.dizhi}}</text>
</view>
</radio-group>
</view>
<!--新地址-->
<view class='jiesuan-dizhi-xin' wx:if="{{xindizhi_xianshi == true}}">
<view class='dizhi'>
<view class='dizhi-shouhuo'>
<view class='dizhi-shouhuo-ren0'>收货人</view>
<view class='dizhi-shouhuo-ren1'>
<input type='text' maxlength='10' placeholder='请输入姓名' name="xingming" />
</view>
</view>
<view class='dizhi-shouhuo'>
<view class='dizhi-shouhuo-ren0'>联系电话</view>
<view class='dizhi-shouhuo-ren1'>
<input type='text' maxlength='11' placeholder='请输入手机号码' name="shouji" />
</view>
</view>
<view class='dizhi-shouhuo'>
<view class='dizhi-shouhuo-ren0'>所在区域</view>
<view class='dizhi-shouhuo-ren1'>
<picker mode="region" value='{{quyu}}' bindchange='p1' name="diqu">
{{quyu[0]}} {{quyu[1]}} {{quyu[2]}}
</picker>
</view>
</view>
<view class='dizhi-xiangxi'>
<textarea maxlength='100' placeholder='请输入详细地址' style='height:50px;' name="xiangxi"></textarea>
</view>
<view class='dizhi-baocun'>
<button type='primary' form-type='submit' id='dizhitijiao' data-caozuo='dizhitijiao' style='width:90%;'>保存新地址并设为默认</button>
</view>
</view>
</view>
</view>
<view class='jiesuan-dizhi-you'>
<button size='mini' class='jiesuan-xin-anniu' bindtap='xindizhi'>新</button>
</view>
</view>
<!--购物车产品列表-->
<block wx:for="{{gwc}}" wx:key="*this">
<view class='sp'>
<view class='sp-tupian'>
<image class='sp-img' src='{{item.cp_tupian}}' mode="widthFix"></image>
</view>
<view class='sp-info'>
<view class="sp-mc">{{item.cp_mingcheng}}</view>
<view class="sp-xiaoshou">月售:{{item.cp_yixiaoshou}} 件 / 库存:{{item.cp_kucu}}件</view>
<view class="sp-jiage">¥:{{item.jiage}}</view>
</view>
<view class="sp-shuliang">
<view class="sp-shu">{{item.cp_shuliang}}件</view>
</view>
</view>
</block>
<view class='jiesuan-liuyan'>
留言
<input type='text' class='jiesuan-liuya-neirong' name="liuyan" />
</view>
<view class='jiesuan-liuyan2'>
备注:图书价格用作丢失赔偿参考
</view>
</scroll-view>
<view class='dibu'>
<view class='feiyong' style='width:60%;'>
<view class='feiyong-tupian'>
<image class='feiyong-img' src='/img/sp02.png'></image>
</view>
<view class='feiyong-shu'>¥:{{zongfeiyong}}</view>
</view>
<button class='caozuo' style='width:40%' form-type='submit' id='xiadan' data-caozuo='xiadan'>确认借书</button>
</view>
</form>
wxss代码
/*地址*/
.jiesuan-dizhi{
border-bottom: 1px solid gainsboro;
display: flex;
align-items: center;
}
.jiesuan-dizhi-zuo{
display: flex;
flex-direction: column;
width: 80%;
}
.jiesuan-dizhi-list{}
.jiesuan-dizhi-list-dizhi{
font-size: 12px;
color: gray;
}
.jiesuan-dizhi-you{
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.jiesuan-xin-anniu{
background: darkgreen;
color: white;
}
/*新地址*/
.dizhi{
padding: 5px;
}
.dizhi-shouhuo{
display: flex;
border-bottom: 1px dotted gainsboro;
padding: 5px 0;
}
.dizhi-shouhuo-ren0{
width: 5em;
}
.dizhi-shouhuo-ren1{}
.dizhi-xiangxi{
padding: 5px 0;
border-bottom: 1px dotted gainsboro;
}
.dizhi-moren{
border-bottom: 1px dotted gainsboro;
padding: 5px 0;
padding-bottom: 15px;
}
.dizhi-moren switch{
float: right;
}
.dizhi-baocun{
padding: 1px;
}
/*购物车产品列表*/
.gwc {
display: flex;
flex-direction: column;
}
.sp {
display: flex;
padding: 5px;
border-bottom: 1px dotted gainsboro;
}
.sp-tupian {
width: 20%;
}
.sp-img {
width: 100%;
border: 2px solid #f2f2f2;
border-radius: 5px;
box-shadow: 1px 2px 2px gainsboro;
}
.sp-info {
width: 60%;
padding-left: 7px;
display: flex;
flex-direction: column;
}
.sp-mc {
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sp-xiaoshou {
font-size: 12px;
color: gray;
padding: 3px 0;
}
.sp-jiage {
font-size: 13px;
color: red;
}
.sp-shuliang {
width: 20%;
display: flex;
align-items: center;
justify-content: center;
}
.sp-shu {
display: flex;
align-items: center;
justify-content: center;
}
.jiesuan-liuyan{
display: flex;
padding: 3px;
border-bottom: 1px solid gainsboro;
}
.jiesuan-liuyan2{
display: flex;
padding: 5px;
border-bottom: 1px solid gainsboro;
color: red;
}
.jiesuan-liuya-neirong{
border: 1px solid gainsboro; flex: 1;
}
/*底部菜单*/
.dibu {
position: absolute;
bottom: 0;
background-color: #f2f2f2;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
height: 40px;
}
.feiyong {
display: flex;
position: relative;
align-items: center;
justify-content: center;
}
.feiyong-tupian {
position: absolute;
top: -30px;
left: 10px;
background-color: antiquewhite;
padding: 5px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px dotted gainsboro;
}
.feiyong-img {
width: 30px;
height: 30px;
}
.feiyong-shu {
color: red;
}
.caozuo {
background-color: orangered;
border-radius: 0;
color: white;
height: 40px;
text-align: center;
line-height: 40px;
}
标签:flex,center,微信,程序,item,毕业设计,dizhi,border,display 来源: https://blog.csdn.net/u013818205/article/details/114690254