微信小程序开发指南

基于ColorUI的组件化页面开发


理赔主页

理赔主页

  • 样式图例

  • 示例代码

js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    TabCur: 0,
    scrollLeft:0,
    tabList:[
      {status:'0',name:'待审核'},
      {status:'1',name:'初审商议'},
      {status:'2',name:'初审通过'},
      {status:'3',name:'待终审'},
      {status:'4',name:'终审商议'},
      {status:'5',name:'待邮寄'},
      {status:'6',name:'已邮寄'},
      {status:'7',name:'已支付'},
      {status:'8',name:'已拒赔'},
      {status:'9',name:'已撤销'},
    ]
  },
  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id-1)*60
    })
  }
})

wxml代码

<cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
    <view slot="backText">返回</view>
    <view slot="content">理赔主页</view>
</cu-custom>

<!-- 顶部操作条 -->
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
    <view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{tabList}}" wx:key bindtap="tabSelect" data-id="{{item.status}}">
        {{item.name}}
    </view>
</scroll-view>

<!-- 列表 -->
<view class="cu-list menu sm-border card-menu margin-top">
    <view class="cu-item">
      <view class="content">
        <text class="text-grey">车架号</text>
      </view>
      <view class="action">
        <text class="text-grey text-sm">JTHB31B13K2025511</text>
      </view>
    </view>
    <view class="cu-item">
      <view class="content">
        <text class="text-grey">保单号</text>
      </view>
      <view class="action">
        <text class="text-grey text-sm">PUAF20214402B000000001</text>
      </view>
    </view>
    <view class="cu-item">
      <view class="content">
        <text class="text-grey">报案日期</text>
      </view>
      <view class="action">
        <text class="text-grey text-sm">2022-09-30</text>
      </view>
    </view>
    <view class="cu-item">
      <view class="content">
        <text class="text-grey">车损金额</text>
      </view>
      <view class="action">
        <text class="text-grey text-sm">200000</text>
      </view>
    </view>
    <view class="cu-item">
      <view class="content">
        <text class="text-grey">发票金额</text>
      </view>
      <view class="action">
        <text class="text-grey text-sm">429800</text>
      </view>
    </view>
    <view class="bg-white">
        <view class="flex solid-bottom padding justify-end">
            <button class="cu-btn line-blue margin-left-sm">修改申请</button>
            <button class="cu-btn line-grey margin-left-sm">更多详情</button>
            <button class="cu-btn line-red margin-left-sm">撤销</button>
        </view>
    </view>
  </view>

<!-- 底部 -->
<view class="cu-bar tabbar margin-bottom-xl bg-white pos-b">
    <view class="action text-green">
        <view class="cuIcon-text"></view> 报案单
    </view>
    <view class="action text-gray">
        <view class="cuIcon-comment"> <view class="cu-tag badge">99</view></view> 消息
    </view>
    <view class="action text-gray add-action">
        <button class="cu-btn cuIcon-add bg-green shadow"></button>
        新建
    </view>
    <view class="action text-gray">
        <view class="cuIcon-rank"></view>
        统计
    </view>
    <view class="action text-gray">
        <view class="cuIcon-my"></view>
        联系人
    </view>
</view>

wxss代码

.pos-b{
    width: 100%;
    position: fixed;
    bottom: 0px;
}

页面列表

ITEM_HTML