shop-uniapp-240426/components/selectPayment/selectPayment.vue

<template>
	<view class="select-payment">
		<u-action-sheet :actions="payMethodList" :round="10" @select="selectPayMethod" @close="close"
			:title="$t('page.payOrder.pay-method-title')" :show="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payMethodList: [{
					id: 1,
					name: this.$t('page.payOrder.balance-payment')
				}],
				method: '',
			}
		},
		computed : {
			show : {
				get(){
					return this.open;
				},
				set(val){
					this.$emit('update:open', val)
				}
			}
		},
		props: {
			open : {		//是否打开选择框
				type : Boolean,
				default : false
			}
		},
		created() {
			this.getPayMethodList()
			this.method = this.payMethodList[0].name
		},
		methods: {
			getPayMethodList() { //获取支付方式列表(暂无接口)

			},
			selectPayMethod(currentPayMethod) { //用户选择了支付方式
				this.method = currentPayMethod.name
				this.$emit('selectPayMethod', currentPayMethod); //把选择的值给外面组件
			},

			close() { //用户关闭选择弹框
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-payment {
		.celi {
			background-color: #F8F8F8;
			border-radius: 10px;
			margin: 10px 0;
		}
	}
</style>