基于微信小程序毕业设计选题课题 疫苗预约小程序的设计与实现（4）我的疫苗预约列表

该页面主要显示已经预约的疫苗列表信息

效果图

wxml代码

<form bindsubmit="pinglun">
<!-- 遮罩层 -->
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>
<!-- 弹出层 -->
<view class="modalDlg" wx:if="{{showModal}}">
    <view class="Dlg_biaoti">评论填写</view>
    <view class="Dlg_xing">
        几星：
        <radio-group name="xing">
            <radio value="1">1星</radio>
            <radio value="2">2星</radio>
            <radio value="3">3星</radio>
            <radio value="4">4星</radio>
            <radio value="5">5星</radio>
        </radio-group>

    </view>
    <view  class="Dlg_neirong">
        内容：
        <input type="text" name="neirong" class="zhuce_zhong" placeholder="请输入评论" />
    </view>
    <view  class="Dlg_caozuo">
        <button class="Dlg_caozuo1" size="mini"   form-type="submit">提交</button>
        <button class="Dlg_caozuo2" size="mini"   bindtap="ok" >取消</button>
    </view>
</view>



<view class="qukuai">
    <view class="qukuai_zuo"></view>
    <view class="qukuai_zhong">我的疫苗预约列表</view>
    <navigator class="qukuai_you"></navigator>
</view> 

<view class="yuyue" wx:for="{{arr_yuyue}}">
    <view class="yuyue_biaoti">疫苗名称：{{item.dianying_mc}} </view>
    <view class="yuyue_neirong">
        <view class="neirong1">预约日期：{{item.yuyue_riqi}} </view>
        <view class="neirong2">预约时间：{{item.yuyue_changci}} </view>
        <view class="neirong3">疫苗费用：{{item.yuyue_feiyong}}</view>
        <view class="neirong5">
            <view class="neirong5_zuo daishenghe"> 
                <block wx:if="{{item.zt==1}}">
                     审核状态：待付款
                </block>
                <block wx:if="{{item.zt==2}}">
                     审核状态：已经付款
                </block>
               <block wx:if="{{item.zt==3}}">
                     完结
                </block>         
            </view>


            <block wx:if="{{item.zt==1}}">
                <view class="neirong5_you" data-yyid='{{item.yuyue_id}}'  bindtap='myfukuan'> 
                   去付款
                </view>
                <view class="neirong5_you" data-yyid='{{item.yuyue_id}}'  bindtap='mydel'> 
                   取消申请 
                </view>                
            </block>
 

        </view>
    </view>
</view>

</form>

wxss代码

/* pages/huiyuan/yuyue_list.wxss */
.yuyue{
    padding: 5px;
    border-bottom: 1px dotted gainsboro ;
    margin-bottom: 5px;
}
.yuyue_biaoti{
    padding: 5px;
    background-color: #f3f3f3;
}
.yuyue_neirong{
    padding: 5px;
    color: 12px;
    color: gray;
}
.neirong1{}
.neirong2{}
.neirong3{}
.neirong4{}
.neirong5{
    display: flex;
}
.neirong5_zuo{
    color: black;
    flex-grow: 1;
}
.neirong5_you{
    color: orangered;
    margin-right: 10px;
}
.daishenghe{color: red;}
.yishenghe{color: green;}

.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;}


/* 外面的按钮 */
.btn{
    width: 80px;
    height: 35px;
    background: #44b549;
    line-height: 35px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    border-radius: 100px;
  }
   
  /* 遮罩层 */
  .mask{
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      z-index: 9000;
      opacity: 0.5;
  }
    
  /* 弹出层 */
  .modalDlg{
      width: 90%;
      position: fixed;
      top: 150px;
      left: 0;
      right: 0;
      z-index: 9999;
      margin: 0 auto;
      background-color: #fff;
      border-radius:30px;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
   .Dlg_biaoti{background-color: #f3f3f3; width: 100%; text-align: center;padding: 10px; box-sizing: border-box;}
   .Dlg_xing{ width: 100%;display: flex;font-size: 12px; padding: 5px; box-sizing: border-box;}
   .Dlg_neirong{ width: 100%; display: flex; font-size: 15px;padding: 5px;box-sizing: border-box;}
   .Dlg_caozuo{ width: 100%; display: flex; font-size: 15px;}
   .Dlg_caozuo1{ width: 50%; text-align: center;background-color: orangered; color: white;box-sizing: border-box; border-radius: 0;}
   .Dlg_caozuo2{ width: 50%; text-align: center;background-color: orange; color: white;box-sizing: border-box;border-radius: 0;}

标签：box,flex,background,width,预约,color,疫苗,毕业设计,border
来源： https://blog.51cto.com/u_13898481/2890840