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 的步骤完成了颜色变化的功能，我就注释。