支付栏 就是前面用的 car-Layout 在shop也用来这个组件
只是在那里用来的是购物车。
1、 样式
我们开始进入这个页面是点击的shop的购物篮
到这里就变成了支付栏 其实他们是同一个组件 只是做了样式区分
2、具体看看样式和代码
2.1 消失了购物车和改变了按钮名字
如何实现？
<view class="payTabbar"><car-Layout type="pay"></car-Layout></view>看看上面的代码 ，这是在订单支付页面上的。多了一个type=“pay”
在shop的页面上是没有这个值的：
2.2 购物车的处理
接受该值： 子级接受父级传入的值
处理该值： 传入值是一个字符串，页面处理就对该值的boor值进行处理。
传入值是任何值 都是真。只要传入 我们组件认为你就是要支付使用。
tag的作用，体现得淋漓尽致。
代码：
<view class="content"><view class="left"><view class="icon" hover-class="iconhover" hover-stay-time="50" hover-start-time="10" @click="onClickCar" v-if="!type"><!-- 鼠标点击就会 触发 iconhover 这个类名 --><!-- hover-stay-time 弹回 就很块了只有 50ms --><u-icon name="shopping-cart" size="50" color="#5ac725"></u-icon><view class="num">{{totalNumValue}}</view></view><view class="price" >合计<text class="text">￥{{totalPrice}}</text></view></view><view class="right"><view class="btn disable" v-if="!type" @click="goPaypage">选好了</view><view class="btn disable" v-else @click="confirmPay">支付</view></view></view>消失购物车： 对值取反就隐藏购物车
改变按钮名字：有值传来就支付，没有值就显示为选好了
支付按键处理，当然购物车的方法在shop页面也有用。
我们支付就用 confirmPay
其他接口都是shop页面使用。
methods:{...mapMutations(["setCarsList"]),//确认支付confirmPay(){console.log("确认支付");},//清空购物车clearCar(){this.setCarsList(0);},//点击购物车，改变carShow，进而改变显示状态onClickCar(){this.carShow=!this.carShow;},//点击选好了，跳转到支付页面goPaypage(){uni.navigateTo({url:"/pagesub/pageshop/paypage/paypage"})}}
