127 lines
3.9 KiB
Vue
127 lines
3.9 KiB
Vue
<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> |