原创 基于微信小程序毕业设计题目选题课题 图书馆图书借阅小程序的设计与实现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;
}

原文地址：https://blog.csdn.net/u013818205/article/details/114690254