使用u-view框架做小程序的弹窗效果

 1 <view @click="openPrice">点击查看详情</view>
 2                 <!-- 弹窗 -->
 3                 <u-modal v-model="show1" title="维修费用明细">
 4 <view>
 5     <view>
 6         <view>检测费</view>
 7         <view>250元</view>
 8     </view>
 9     <view>
10         <view>上门费</view>
11         <view>260元</view>
12     </view>
13     <view>
14         <view>耗材费</view>
15         <view>240元</view>
16     </view>
17     <view>
18         <view>人工费</view>
19         <view>250元</view>
20     </view>
21     <view>
22         <view>总金额</view>
23         <view><u-icon name="rmb" color="#F77544" size="28"></u-icon>1000</view>
24     </view>
25 </view>
26                 </u-modal>

.priveInformation {
        position: relative;
        >.priceText {
            height: 40px;
            >.textTc {
                padding-left: 20px;
            }
            >.tcPrice {
                position: absolute;
                right: 20px;
            }
            >.textTc,.tcPrice {
                line-height: 40px;
                display: inline-block;
            }
            >.priceColor {
                color: #F77544;
            }
        }
        >.borderPrice {
            margin-top: 15px;
            border-top: 1px solid #F1F1F1;
        }
    }

<view @click="openConsumables">点击查看详情</view>
                <!-- 弹窗 -->
                <u-modal v-model="show2" title="消耗耗材">
<view>
    <view>耗材名称1</view>
    <view>机型型号</view>
    <view>耗材名称1</view>
    <view>耗材名称1</view>
    <view>机型型号</view>
    <view>耗材名称1</view>
</view>
                </u-modal>

　　　　return {      
                show1: false,
                show2: false,
            }
        },
        methods: {
            openPrice() {
                this.show1 = true;
            },
            openConsumables() {
                this.show2 = true;
            }
        }