lxp_Maxcess/components/projects/payment/payMethodGroup.vue

127 lines
3.9 KiB
Vue
Raw Normal View History

2025-04-09 18:55:14 +08:00
<template>
<view class="paymethod-content">
<text class="payment-header u-border-bottom">{{$t('payMethodGroup.paymentMode')}}</text>
<u-checkbox-group v-model="props.modelValue" class="payment-group" iconPlacement="right" size="32" @change="checkboxGroupChange" activeColor="#0129D3">
<u-checkbox shape="circle" class="item-radio radio0" :name="0" :value="0">
<view class="flex-row">
<image src="../../../static/icons/payment/integral.png" class="group-icon"></image>
<text class="u-font-28">{{$t('payMethodGroup.integral')}}{{ data.integral }}</text>
<text style="margin-left: 40rpx" class="u-font-24">({{$t('payMethodGroup.maximumDiscount')}}{{ props.max }})</text>
</view>
</u-checkbox>
<u-checkbox shape="circle" class="item-radio radio1" :name="1" :value="1">
<view class="flex-row">
<image src="../../../static/icons/payment/integral.png" class="group-icon"></image>
<text class="u-font-28">{{$t('payMethodGroup.balance')}}{{ data.balanceMoney }}</text>
</view>
</u-checkbox>
<u-checkbox shape="circle" class="item-radio radio1" :name="2" :value="2">
<view class="flex-row">
<image src="../../../static/icons/payment/alipay.png" class="group-icon"></image>
<text class="u-font-28">{{$t('AlipayPay')}}</text>
</view>
</u-checkbox>
<!-- <u-checkbox shape="circle" class="item-radio radio1" :name="2" :value="2">-->
<!-- <view class="flex-row">-->
<!-- <image src="../../../static/icons/payment/alipay.png" class="group-icon"></image>-->
<!-- <text class="u-font-28">{{$t('payMethodGroup.balance')}}{{ data.balanceMoney }}</text>-->
<!-- </view>-->
<!-- </u-checkbox>-->
<!-- <u-radio class="item-radio radio1" :name="1">-->
<!-- <view class="flex-row">-->
<!-- <image src="../../../static/icons/payment/payPay.png" class="group-icon"></image>-->
<!-- <text class="u-font-28">PayPay支付</text>-->
<!-- </view>-->
<!-- </u-radio>-->
<!-- <u-radio class="item-radio radio2" :name="2">-->
<!-- <view class="flex-row">-->
<!-- <image src="../../../static/icons/payment/wechat.png" class="group-icon"></image>-->
<!-- <text class="u-font-28">微信</text>-->
<!-- </view>-->
<!-- </u-radio>-->
<!-- <u-radio class="item-radio radio3" :name="3">
<view class="flex-row">
<image src="../../../static/icons/payment/alipay.png" class="group-icon"></image>
<text class="u-font-28">支付宝</text>
</view>
</u-radio> -->
</u-checkbox-group>
</view>
</template>
<script setup lang="ts">
import { defineProps, onMounted, reactive, defineEmits } from 'vue'
import { findUserWallet } from "../../../common/request/api/api";
const emits = defineEmits(['change'])
const props = defineProps({
modelValue: {
type: Array,
default: []
},
coursePrice: Number,
max: Number
})
const data = reactive({
modelValue: [],
balanceMoney: '',
integral: ''
})
onMounted(() => {
findUserWallet().then((res) => {
if (res.code === 200) {
data.balanceMoney = res.data.balanceMoney;
data.integral = res.data.integral;
}
})
})
const checkboxGroupChange = (e) => {
data.modelValue = e
emits('change', e)
// if()
}
</script>
<style lang="scss" scoped>
.paymethod-content {
display: flex;
flex-direction: column;
background-color: #fff;
.payment-header {
padding: 32rpx;
display: flex;
align-items: center;
justify-content: flex-start;
}
.payment-group {
padding: 32rpx;
.item-radio {
width: 100%;
margin-bottom: 48rpx;
@for $i from 0 through 3 {
&.radio#{$i} {
opacity: 0;
animation-name: slide-in-left;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-delay: calc($i/10) + s;
}
}
&:last-child {
margin-bottom: unset;
}
}
.group-icon {
width: 40rpx;
height: 40rpx;
margin-right: 16rpx;
}
}
}
</style>