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>
|