uniapp-商城-37-shop 购物车 选好了 进行订单确认3 支付栏

支付栏 就是前面用的 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"
				})
			}
		}