1 <view class="details" @click="openPrice">点击查看详情</view> 2 <!-- 弹窗 --> 3 <u-modal v-model="show1" title="维修费用明细"> 4 <view class="priveInformation"> 5 <view class="priceText borderPrice"> 6 <view class="textTc">检测费</view> 7 <view class="tcPrice">250元</view> 8 </view> 9 <view class="priceText"> 10 <view class="textTc">上门费</view> 11 <view class="tcPrice">260元</view> 12 </view> 13 <view class="priceText"> 14 <view class="textTc">耗材费</view> 15 <view class="tcPrice">240元</view> 16 </view> 17 <view class="priceText"> 18 <view class="textTc">人工费</view> 19 <view class="tcPrice">250元</view> 20 </view> 21 <view class="priceText borderPrice"> 22 <view class="textTc">总金额</view> 23 <view class="tcPrice priceColor"><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 class="details" @click="openConsumables">点击查看详情</view> <!-- 弹窗 --> <u-modal v-model="show2" title="消耗耗材"> <view class="haocaiList"> <view class="item">耗材名称1</view> <view class="item">机型型号</view> <view class="item">耗材名称1</view> <view class="item">耗材名称1</view> <view class="item">机型型号</view> <view class="item">耗材名称1</view> </view> </u-modal>
效果:点击后弹出的效果
要写一个布尔值的变量还有一个弹窗的方法:show 来控制弹窗的出现和消失,方法触发点击事件
return { show1: false, show2: false, } }, methods: { openPrice() { this.show1 = true; }, openConsumables() { this.show2 = true; } }
第一次使用组件写小程序的一些小功能,以前没有写过,写的不好的地方,欢迎留言交流讨论