当前位置：首页 > news >正文

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

news 来源：原创 2025/4/26 5:50:43

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