微信小程序开发指南

基于ColorUI的组件化页面开发


理赔主页

<h1>理赔主页</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=cc89ab5b1b78c766223c55ffd9313694&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <h4>js代码</h4> <pre><code class="language-html">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 }) } })</code></pre> <h4>wxml代码</h4> <pre><code class="language-html">&lt;cu-custom bgColor="bg-gradual-blue" isBack="{{true}}"&gt; &lt;view slot="backText"&gt;返回&lt;/view&gt; &lt;view slot="content"&gt;理赔主页&lt;/view&gt; &lt;/cu-custom&gt; &lt;!-- 顶部操作条 --&gt; &lt;scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}"&gt; &lt;view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{tabList}}" wx:key bindtap="tabSelect" data-id="{{item.status}}"&gt; {{item.name}} &lt;/view&gt; &lt;/scroll-view&gt; &lt;!-- 列表 --&gt; &lt;view class="cu-list menu sm-border card-menu margin-top"&gt; &lt;view class="cu-item"&gt; &lt;view class="content"&gt; &lt;text class="text-grey"&gt;车架号&lt;/text&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;text class="text-grey text-sm"&gt;JTHB31B13K2025511&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item"&gt; &lt;view class="content"&gt; &lt;text class="text-grey"&gt;保单号&lt;/text&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;text class="text-grey text-sm"&gt;PUAF20214402B000000001&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item"&gt; &lt;view class="content"&gt; &lt;text class="text-grey"&gt;报案日期&lt;/text&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;text class="text-grey text-sm"&gt;2022-09-30&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item"&gt; &lt;view class="content"&gt; &lt;text class="text-grey"&gt;车损金额&lt;/text&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;text class="text-grey text-sm"&gt;200000&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="cu-item"&gt; &lt;view class="content"&gt; &lt;text class="text-grey"&gt;发票金额&lt;/text&gt; &lt;/view&gt; &lt;view class="action"&gt; &lt;text class="text-grey text-sm"&gt;429800&lt;/text&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="bg-white"&gt; &lt;view class="flex solid-bottom padding justify-end"&gt; &lt;button class="cu-btn line-blue margin-left-sm"&gt;修改申请&lt;/button&gt; &lt;button class="cu-btn line-grey margin-left-sm"&gt;更多详情&lt;/button&gt; &lt;button class="cu-btn line-red margin-left-sm"&gt;撤销&lt;/button&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;!-- 底部 --&gt; &lt;view class="cu-bar tabbar margin-bottom-xl bg-white pos-b"&gt; &lt;view class="action text-green"&gt; &lt;view class="cuIcon-text"&gt;&lt;/view&gt; 报案单 &lt;/view&gt; &lt;view class="action text-gray"&gt; &lt;view class="cuIcon-comment"&gt; &lt;view class="cu-tag badge"&gt;99&lt;/view&gt;&lt;/view&gt; 消息 &lt;/view&gt; &lt;view class="action text-gray add-action"&gt; &lt;button class="cu-btn cuIcon-add bg-green shadow"&gt;&lt;/button&gt; 新建 &lt;/view&gt; &lt;view class="action text-gray"&gt; &lt;view class="cuIcon-rank"&gt;&lt;/view&gt; 统计 &lt;/view&gt; &lt;view class="action text-gray"&gt; &lt;view class="cuIcon-my"&gt;&lt;/view&gt; 联系人 &lt;/view&gt; &lt;/view&gt;</code></pre> <h4>wxss代码</h4> <pre><code class="language-html">.pos-b{ width: 100%; position: fixed; bottom: 0px; }</code></pre>

页面列表

ITEM_HTML