uni单选radio（收货地址、支付）

耶啵奶膘

已于 2023-04-20 15:08:03 修改

阅读量530

点赞数

分类专栏： uni、vue 文章标签：前端

于 2022-11-22 14:07:21 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/127981702

版权

uni、vue 专栏收录该内容

137 篇文章 8 订阅

订阅专栏

案例演示

在这里插入图片描述

代码

<radio-group @change="radioChange">
	<!-- 循环体start -->
	<view class="item" v-for="(item,index) in list" :key="index">
		<label>
			<radio :value="index" :checked="index === current" color="#3B5EC7"
				style="transform:scale(0.6)" /> 设为默认地址
		</label>
	</view>
	<!-- 循环体end -->
</radio-group>

案例演示

在这里插入图片描述

代码：

<!-- 支付方式模块 -->
<view class="payBox">
	<view class="title">
		支付方式：
	</view>
	<view class="payList">
		<radio-group @change="radioChange">
			<label class="item">
				<view class="twoLeft">
					<image :src="$common.image('/static/weChat.png')" mode="aspectFill">
					</image>
					<text>微信支付</text>
				</view>
				<radio value="1" :checked="payment_type == 1" color="#3B5EC7" style="transform:scale(0.7)" />
			</label>
			<label class="item">
				<view class="twoLeft">
					<image :src="$common.image('/static/zfb.png')" mode="aspectFill">
					</image>
					<text>余额支付（￥580）</text>
				</view>
				<radio value="2" :checked="payment_type == 2" color="#3B5EC7" style="transform:scale(0.7)" />
			</label>
			<label class="item">
				<view class="twoLeft">
					<image :src="$common.image('/static/offline.png')" mode="aspectFill">
					</image>
					<text>线下支付</text>
				</view>
				<radio value="3" :checked="payment_type == 3" color="#3B5EC7" style="transform:scale(0.7)" />
			</label>
		</radio-group>
	</view>
</view>

<script>
	export default {
		data() {
			return {
				payment_type: 1, //支付方式:1=微信支付,2=余额支付，3=线下支付
			}
		},
		onLoad() {

		},
		methods: {
			// 单选切换
			radioChange(e) {
				console.log(e);
				this.payment_type = e.detail.value
			},
		}
	}
</script>

// 支付方式
.payBox {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 0 10rpx;
	margin: 22rpx;

	.title {
		height: 94rpx;
		line-height: 94rpx;
		font-size: 34rpx;
		font-weight: bold;
		padding-left: 32rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 108rpx;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #EBEBEB;

		.twoLeft {
			font-size: 28rpx;

			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 17rpx;
				vertical-align: middle;
			}
		}
	}

	.item:last-child {
		border-bottom: none;
	}
}

代码简化

<view class="payList">
	<radio-group @change="radioChange">
		<label class="item" v-for="(item,index) in payList" :key="item.value">
			<view class="twoLeft">
				<image :src="$common.image(item.image)" mode="aspectFill">
				</image>
				<text>{{item.name}}</text>
				<text v-if="item.yueMoney" class="yueMoney">（￥{{item.yueMoney}}）</text>
			</view>
			<radio :value="item.value" :checked="payment_type == item.value" color="#60B347" style="transform:scale(0.7)" />
		</label>
	</radio-group>
</view>

// 支付方式
payList: [{
	value: 1,
	name: '余额',
	image: '/static/images/mall/yue.png',
	yueMoney:200
}, {
	value: 2,
	name: '支付宝',
	image: '/static/images/mall/zfb.png'
}, {
	value: 3,
	name: '微信',
	image: '/static/images/mall/weChat.png'
}],
payment_type: 1, //支付方式:1=余额,2=支付宝，3=微信



// 单选切换
radioChange(e) {
	console.log(e);
	this.payment_type = e.detail.value
},