[JavaScript知识库]uni 单选框二选一支付

效果图

直接上代码
结构

<view class="pay_way">
				<view class="_row title">选择支付方式</view>
				<radio-group @change="radioChange" >
					<view class="_row way" v-for="(item, index) in paywayData" :key="item.value">
						<view class="left">
							<image :src="item.url" mode=""></image>
							<text>{{item.name}}</text>
						</view>
						<radio :value="item.value" :checked="index === current"/>
					</view>
				</radio-group>
			</view>

逻辑

<script>
	export default {
		data() {
			return {
				paywayData: [{
					value: 'wx',
					name: '微信支付',
					url: require('@/static/images/wxzf.png')
				},
				{
					value: 'zfb',
					name: '支付宝支付',
					checked: 'true',
					url: require('@/static/images/zfbzf.png')
				}
				],
				current: 0
			}
		},
		methods: {
			radioChange(e){
				for (let i = 0; i < this.paywayData.length; i++) {
					if (this.paywayData[i].value === e.detail.value) {
						this.current = i;
						break;
					}
				}
			}
		}
	}
</script>

样式

.pay_way{
	.title{
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		border-top: 1px solid #ddd;
	}
	._row{
		padding: 0 20rpx;
		height: 90rpx;
		border-bottom: 1px solid #ddd;
	}
	.way{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		.left{
			display: inline-flex;
			align-items: center;
			image{
				width: 46rpx;
				height: 46rpx;
				margin-right: 15rpx;
			}
		}
	}
}