143 lines
4.1 KiB
Vue
143 lines
4.1 KiB
Vue
<script lang="ts" setup>
|
|
import {useUserStore} from "@/store";
|
|
import {EventEnum} from "@/constant/enums";
|
|
import {appUserCardSelectDefaultPost} from "@/service";
|
|
|
|
const {t} = useI18n();
|
|
const userStore = useUserStore();
|
|
// 响应式数据
|
|
const selectedPayment = ref<1 | 2>(1)
|
|
|
|
function changePayment(payment: 1 | 2) {
|
|
payMethodOptions.value.payMethod = payment
|
|
}
|
|
|
|
onLoad(() => {
|
|
// 查询用户默认信用卡
|
|
appUserCardSelectDefault()
|
|
})
|
|
// 支付参数
|
|
const payMethodOptions = ref({
|
|
cardNumber: '',
|
|
cardId: '',
|
|
payMethod: 1, // 支付方式 1信用卡 2余额
|
|
})
|
|
|
|
function appUserCardSelectDefault() {
|
|
appUserCardSelectDefaultPost({}).then(res => {
|
|
console.log('查询用户默认信用卡', res)
|
|
payMethodOptions.value.cardId = res.data?.cardId || ''
|
|
payMethodOptions.value.cardNumber = res.data?.cardNumber || ''
|
|
})
|
|
}
|
|
|
|
const confirmPayment = () => {
|
|
if (payMethodOptions.value.payMethod === 1) {
|
|
if (!payMethodOptions.value.cardId) {
|
|
chooseCard()
|
|
} else {
|
|
uni.$emit(EventEnum.CHOOSE_PAYMENT_METHOD, payMethodOptions.value)
|
|
uni.navigateBack()
|
|
}
|
|
} else {
|
|
uni.$emit(EventEnum.CHOOSE_PAYMENT_METHOD, payMethodOptions.value)
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
|
|
function chooseCard() {
|
|
uni.navigateTo({
|
|
url: '/pages-user/pages/select-credit-card/index',
|
|
events: {
|
|
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
|
|
selectedCard: function (data) {
|
|
if (data) {
|
|
payMethodOptions.value.cardId = data.cardId
|
|
payMethodOptions.value.cardNumber = data.cardNumber
|
|
}
|
|
},
|
|
},
|
|
})
|
|
}
|
|
|
|
function navigateTo(url: string) {
|
|
uni.navigateTo({url})
|
|
}
|
|
</script>
|
|
<template>
|
|
<view class="">
|
|
<navbar/>
|
|
<!-- 页面标题 -->
|
|
<view class="px-30rpx pt-20rpx mb-88rpx">
|
|
<text class="text-46rpx font-bold text-#333 leading-46rpx">{{ t('pages-user.choosePaymethod.title') }}</text>
|
|
</view>
|
|
|
|
<view class="px-30rpx">
|
|
<view class="flex-center-sb mb-66rpx" @click="changePayment(2)">
|
|
<view class="flex items-center">
|
|
<image
|
|
class="w-44rpx h-44rpx shrink-0 mr-28rpx"
|
|
mode="aspectFill"
|
|
src="@img/chef/156.png"
|
|
/>
|
|
<text class="text-32rpx lh-32rpx text-#333 font-500">{{
|
|
t('pages-user.choosePaymethod.wallet')
|
|
}}(${{ userStore.currenMerchantInfo?.balance || 0 }})
|
|
</text>
|
|
</view>
|
|
<!-- 单选按钮 -->
|
|
<image
|
|
:src="
|
|
payMethodOptions.payMethod === 2
|
|
? '/static/images/chef/133.png'
|
|
: '/static/images/chef/134.png'
|
|
"
|
|
class="w-48rpx h-48rpx shrink-0"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
|
|
<view class="flex-center-sb" @click="changePayment(1)">
|
|
<view class="flex items-center">
|
|
<image
|
|
class="w-44rpx h-44rpx shrink-0 mr-28rpx"
|
|
mode="aspectFill"
|
|
src="@img/chef/138.png"
|
|
/>
|
|
<text class="text-32rpx lh-32rpx text-#333 font-500">{{ t('pages-user.member.creditCard') }}</text>
|
|
</view>
|
|
<!-- 单选按钮 -->
|
|
<image
|
|
:src="
|
|
payMethodOptions.payMethod === 1
|
|
? '/static/images/chef/133.png'
|
|
: '/static/images/chef/134.png'
|
|
"
|
|
class="w-48rpx h-48rpx shrink-0"
|
|
mode="aspectFit"
|
|
/>
|
|
</view>
|
|
|
|
<view v-if="payMethodOptions.cardId"
|
|
class="h-98rpx rounded-16rpx bg-#F2F2F2 ml-72rpx mt-30rpx flex-center-sb px-28rpx">
|
|
<text class="text-30rpx lh-30rpx text-#9E9E9E">{{ payMethodOptions.cardNumber }}</text>
|
|
<view class="h-50rpx rounded-25rpx bg-white center px-20rpx text-24rpx lh-24rpx text-#333" @click="chooseCard">
|
|
{{ t('pages-user.choosePaymethod.replace') }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部确认按钮 -->
|
|
<fixed-bottom-large-btn
|
|
:text="t('common.confirm')"
|
|
class="z-100"
|
|
fixed
|
|
@click="confirmPayment"
|
|
/>
|
|
</view>
|
|
</template>
|
|
<style>
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
</style> |