uniapp-商城-36-shop 购物车 选好了 进行订单确认2 支付方式颜色变化和颜色滤镜filter
颜色滤镜，在好多网页都这样使用，滤掉彩色，显示黑白，这在一些关键的日子中都这样使用。
1、依然回到订单确认页面
看到支付的颜色了嘛？
<view class="payType"><view class="box" :class="item.value==payDefValue ? 'active' : ''" v-for="item,index in payType":key="index" @click="clickBtn(item.value)"><u-icon :name="item.icon" size="26" class="icon":color="item.value==payDefValue ? item.color :''"></u-icon><text class="font">{{item.name}}</text><!-- <u-icon name="weixin-fill" size="26" class="font"></u-icon><text class="font">微信</text>--></view></view>很明显这里的颜色是 color 来决定
读取到什么支付就是什么颜色，支付宝 蓝色 ，微信 绿色
这里的color 控制的是图形的颜色，哪还有边框和字体？
2、整体颜色变化
通过active 这个class 在样式中来控制
2.1 如果读取到系统是微信 就是 微信支付 为默认， 那么 图像就是绿色的微信支付，
然后 字体和边框 就会根据class 来决定 谁是active
class="item.value==payDefValue ? 'active' : ''"
然后样式中也会识别到底是哪一个active被调用。
<style lang="scss">page {background-color: $page-bg-color; //页面背景色}.paypage {padding: 30rpx;.goodsList {margin-top: 30rpx;}.payType {@include flex-box();.box {//box 就两个支付方式 width: 45%; //一个支付方式站49 剩下中间的2的空格height: 75rpx;background: #fff;border-radius: 10rpx;@include flex-box-set();// filter: grayscale(100%); //滤镜效果 100%把颜色全滤掉 我们已经用了 :color="item.value==payDefValue ? item.color :''" 就不用滤镜了border: 1rpx solid #fff;.font {padding-left: 10rpx;}}//可以这样 当用text时，若用view + style 就不用下面的方式.box:first-child.active {border-color: #1578ff; //边框颜色color: #1578ff;}.box:last-child.active {border-color: #04c15f;color: #04c15f;}}.payTabbar {position: fixed;width: 100%;bottom: 0;left: 0}}
</style>2.2 如果不是默认，用户想要选择
在刚刚的页面view 中，有一个按钮 @click="clickBtn(item.value)
方法中，就实现了 点击按钮 就选择该支付，
那么相应改变了支付方式
methods: {//切换支付方式clickBtn(type) {this.payDefValue = type}}，支付方式改变，就显示哪一个图像选中，边框和字体的class 就active
颜色都随之变化。
3、filter 颜色滤镜
讲到上面，其实颜色都可以实现变化了，但是还有一个主要的工具 filter
这里还有一个全局filter 颜色滤镜
filter: grayscale(100%);
//滤镜效果 100%把颜色全滤掉 我们已经用了 :color="item.value==payDefValue ? item.color :''" 就不用滤镜了
通过他就可以全局改变了颜色，变成黑白 filter: grayscale(100%);
改回原来的颜色： filter: grayscale(0%);
如果你要使用这个也可以实现：我们上面颜色的变化。
<style lang="scss">page {background-color: $page-bg-color; //页面背景色}.paypage {padding: 30rpx;.goodsList {margin-top: 30rpx;}.payType {@include flex-box();.box {//box 就两个支付方式 width: 45%; //一个支付方式站49 剩下中间的2的空格height: 75rpx;background: #fff;border-radius: 10rpx;@include flex-box-set();//filter: grayscale(100%); //滤镜效果 100%把颜色全滤掉 我们已经用了 :color="item.value==payDefValue ? item.color :''" 就不用滤镜了border: 1rpx solid #fff;.font {padding-left: 10rpx;}}//可以这样 当用text时，若用view + style 就不用下面的方式.box:first-child.active {border-color: #1578ff; //边框颜色color: #1578ff;//filter: grayscale(0%)}.box:last-child.active {border-color: #04c15f;color: #04c15f;//filter: grayscale(0%)}}.payTabbar {position: fixed;width: 100%;bottom: 0;left: 0}}
</style>上面的样式里，也就写了 filter 但是我用1-2 的步骤完成了颜色变化的功能，我就注释。