shop-app/components/UiRadioPicker.vue

<!--
 * @Author: ch
 * @Date: 2022-04-12 10:37:24
 * @LastEditors: ch
 * @LastEditTime: 2022-04-22 18:13:08
 * @Description: file content
-->
<template>
	<u-popup :show="show" @close="close" round="16rpx" closeable>
		<view class="ui-select--title" v-if="title">{{title}}</view>
		<radio-group class="ui-select--cell">
			<UiCell :title="item.label" v-for="item in options" @click="change(item)" :key="item.value">
				<radio slot="right-icon" class="ui-select--radio" color="#FF875B"
					:value="item.value" :checked="item.value === selected.value"/>
			</UiCell>
		</radio-group>
		<view class="ui-select--footer">
			<UiButton type="gradual" size="max" :disable="!selected.value" @click="confirm">确认</UiButton>
		</view>
	</u-popup>
</template>
<script>
import UiCell from '@/components/UiCell.vue';
import UiButton from '@/components/UiButton.vue';
export default {
	components: { UiButton, UiCell },
	props : {
		options : {
			type : Array,
			default : []
		},
		title : {
			type : String,
			default : ''
		},
		value : {
			type : [Object, String, Number],
			default (){
				return {}
			}
		},
		show : {
			type : Boolean,
			default : false
		}
	},
	data(){
		return {
			selected : {}
		}
	},
	mounted(){
	},
	methods:{
		change(val){
			this.selected = this.options.find(item => val.value === item.value);
		},
		confirm(){
			if(!this.selected.value){
				return false;
			}
			this.$emit('input', this.selected);
			this.$emit('confirm', this.selected);
			this.close();
		},
		close(){
			this.$emit('close');
			this.$emit('update:show', false);
		}
	}
}
</script>
<style lang="scss" scoped>
.ui-select{
	&--title{
		text-align: center;
		font-size: 34rpx;
		margin: 40rpx 0 30rpx;
	}
	&--cell{
		padding: 0 40rpx;
	}
	&--radio{
		transform: scale(60%);
	}
	&--footer{
		padding: 68rpx 40rpx;
		display: flex;
		justify-content: space-between;
		.ui-btn{
			width: 690rpx;
		}
	}
}
</style>