jarvanzx/spinz777
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add customer service recharge type

Browse Source
This commit is contained in:
Eudemon 2025-03-18 18:19:44 +08:00
parent 797660f0bc
commit 62f18ed924
13 changed files with 770 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/layout/CommonLayout.vue
View File

@ -27,13 +27,9 @@
</el-container>
</el-container> -->
<slot></slot>
<view v-if="showCustomer"
class="service-icon"
style="width: 50px; height: 50px;"
<view v-if="showCustomer" class="service-icon" style="width: 50px; height: 50px;"
:style="{ 'bottom': serviceIconXY.bottom + 'px', 'left': serviceIconXY.x + 'px' }"
@click.stop="handleServiceClick"
@touchmove.prevent="handleTouchMove"
>
@click.stop="handleServiceClick" @touchmove.prevent="handleTouchMove">
<theme-image src="@/static/icon-service-top.png" style="width: 50px; height: 50px;"></theme-image>
</view>
<DepositClosePopup />
@ -114,7 +110,10 @@
}
const handleServiceClick = async () => {
openUrl(appStore.FAQ)
// openUrl(appStore.FAQ)
uni.navigateTo({
url: '/pages/account/CustomService'
})
}
</script>

4
src/components/popup/ConDepositPop.vue
View File

@ -52,7 +52,7 @@ import { usePromoStore } from '@/store/usePromoStore';
import { formatNum } from '@/module/utils/util';
import toast from '@/module/toast/toast';
import { createRechargeApi } from '@/api/promo';
import { openWeb } from '@/module/utils/openUrl';
import { openUrl } from '@/module/utils/openUrl';
const popup = ref(null)
const themeStore = useThemeStore()
@ -70,7 +70,7 @@ const handleDeposit = async () => {
const amount = content.value[activeIndex.value].rechargeAmount
const { data } = await createRechargeApi({ amount })
uni.setStorageSync('rechargeAmount', amount)
openWeb(data.url)
openUrl(data.url)
toast.hideLoading()
} catch (error) {
console.log("deposit error: ", error);

4
src/components/popup/GreatRebet.vue
View File

@ -2,7 +2,7 @@
import { ref, computed } from 'vue'
import { useThemeStore } from '@/store/useThemeStore.js'
import { createBankruptRechargeApi } from '@/api/home'
import { openWeb } from '@/module/utils/openUrl'
import { openUrl } from '@/module/utils/openUrl'
const props = defineProps({
detail: {
@ -29,7 +29,7 @@ const createOrder = async (recharge) => {
const { data } = await createBankruptRechargeApi(recharge);
console.log('createOrder', data);
if (data?.isSuccess) {
openWeb(data?.url);
openUrl(data?.url);
}
} catch (error) {
console.log('createOrder error', error);

8
src/pages/account/Account.vue
View File

@ -124,7 +124,7 @@
{{ $t("account.button.switchAccount") }}
</view>
</view>
<button @click="handleService">Self-Service</button>
<!-- <button @click="handleService">Self-Service</button> -->
<view class="w-full" style="height: 240rpx;"></view>
</view>
</view>
@ -202,7 +202,11 @@ const menuNavigator = (router) => {
*/
const helpMenuNavigator = (item) => {
if (item.routerType === 'FAQ') {
openUrl(appStore.FAQ)
// openUrl(appStore.FAQ)
uni.navigateTo({
url: '/pages/account/CustomService'
})
return
}
if (item.name == "Phone Binding") {
if (!userStore.userInfo.mobile) {

59
src/pages/account/CustomService.vue
View File

@ -3,7 +3,7 @@ import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useThemeStore } from "@/store/useThemeStore";
import { useAppStore } from '@/store/useAppStore'
import { getQuestionsApi, questionIndexApi } from '@/api/account'
import { questionIndexApi, questionSuccessApi, questionFailApi } from '@/api/account'
import { openUrl } from '@/module/utils/openUrl'
const themeStore = useThemeStore()
@ -67,7 +67,27 @@ const getQustionList = async () => {
const _data = JSON.parse(data?.data)
questions.value = _data
}
const onNoZan = (id) => {
questionFailApi({questionId: id})
newMsg('I\'m sorry that I can\'t help you.', 1,'msg')
}
const onZan = (id) => {
questionSuccessApi({questionId: id})
newMsg('I\'m glad that I could help you.!', 1,'msg')
}
const onSend = () => {
if (!inputVal.value) {
return
}
newMsg(inputVal.value, 1, 'msg')
inputVal.value = ''
setTimeout(() => {
newMsg('Sorry, I\'m unable to answer your question. Please click the online customer service at the top right corner.', 2, 'msg')
}, 1000);
}
const toOnlineService = () => {
openUrl(appStore.FAQ)
}
onLoad(() => {
getQustionList()
})
@ -76,7 +96,7 @@ onLoad(() => {
<mobile-custom-layout title="Self-service Customer" bgColor="#2F0101" :headBgColor="themeStore.theme.bgColor"
:paddingTop="appStore.headerStyle.height" :show-customer="false">
<template #head-right>
<view>
<view @click="toOnlineService">
<theme-image src="@/static/account/customer_head.png" class="icon-kf-head"></theme-image>
</view>
</template>
@ -94,7 +114,7 @@ onLoad(() => {
{{ item.display }}
</view>
</view>
<view class="flex items-center justify-center online-service">
<view class="flex items-center justify-center online-service" @click="toOnlineService">
<theme-image src="@/static/account/customer.png" class="icon-kf"></theme-image>
<view class="btn-txt">{{ $t('account.contact') }}</view>
</view>
@ -106,13 +126,14 @@ onLoad(() => {
style="margin-left: 10rpx;"></theme-image>
<theme-image v-else src="@/static/account/customer.png" class="icon-avatar"
style="margin-right: 10rpx;"></theme-image>
<view class="msg-text" :class="[item.type === 1 ? 'mr-10' : 'ml-10']">
<view class="relative msg-text" :class="[item.type === 1 ? 'mr-10' : 'ml-10']">
<template v-if="item.mtype === 'msg'">
{{ item.msg }}
</template>
<template v-else>
<view v-for="child in item.msg" :key="child.id" @click="questionClick(child)"
class="flex items-center question-item" :style="{paddingLeft: child.type === 2 ? '24rpx' : '0px'}">
class="flex items-center question-item"
:style="{ paddingLeft: child.type === 2 ? '24rpx' : '0px' }">
<view class="dot" v-if="child.type === 2"></view>
<view class="question-text" v-if="child.type === 1">
<rich-text :nodes="child.text"></rich-text>
@ -120,8 +141,16 @@ onLoad(() => {
<view class="question-text" v-else>
{{ child.display }}
</view>
<view class="is-usefull pos-absolute"
v-if="item.type === 2 && child.type === 1 && child.solveType === 2">
<theme-image src="@/static/account/dianzan.png" class="icon-use"
style="margin-right: 10rpx;" @click="onZan(child.id)"></theme-image>
<theme-image src="@/static/account/daozan.png" class="icon-use zan-reverse"
style="margin-right: 10rpx;" @click="onNoZan(child.id)"></theme-image>
</view>
</view>
</template>
</view>
</view>
<empty-hold height="120rpx"></empty-hold>
@ -132,7 +161,7 @@ onLoad(() => {
<input type="text" v-model="inputVal" class="w-full ft12"
placeholder="Please enter your question" />
</view>
<view class="submit-btn ml-2 ft13 flex-center">Send</view>
<view class="submit-btn ml-2 ft13 flex-center" @click="onSend">Send</view>
</view>
</view>
</mobile-custom-layout>
@ -148,6 +177,7 @@ onLoad(() => {
.question-list {
padding: 20rpx 100rpx;
margin-bottom: 40rpx;
.question-content {
padding: 18rpx 24rpx;
@ -196,13 +226,26 @@ onLoad(() => {
.msg-item {
align-items: start;
margin-top: 60rpx;
margin-bottom: 80rpx;
justify-content: flex-start;
.icon-avatar {
width: 54rpx;
height: 54rpx;
}
.is-usefull {
bottom: -60rpx;
right: 10rpx;
}
.icon-use {
width: 40rpx;
height: 40rpx;
}
.zan-reverse{
margin-left: 30rpx;
}
}
.req-right {

1
src/pages/earn/Earn.vue
View File

@ -11,6 +11,7 @@
import { onMounted } from 'vue'
import EarnOld from './components/EarnOld.vue'
import EarnV2 from './components/EarnV2.vue'
import EarnV3 from './components/EarnV3.vue'
import { useAppStore } from '@/store/useAppStore'
import { useThemeStore } from '@/store/useThemeStore'

15
src/pages/earn/components/EarnV3.vue Normal file
View File

@ -0,0 +1,15 @@
<script setup>
import { ref, computed } from "vue";
import { useThemeStore } from "@/store/useThemeStore";
import { useAppStore } from '@/store/useAppStore'
const appStore = useAppStore()
const themeStore = useThemeStore()
const earnTheme = computed(() => themeStore.theme.earn)
</script>
<template>
<mobile-custom-layout bgColor="#79000C" paddingTop="0px">
<view>12</view>
</mobile-custom-layout>
</template>
<style lang="scss scoped"></style>

4
src/pages/vip/Vip.vue
View File

@ -254,7 +254,7 @@ import { requestAppEventUpload } from "@/api/app.js";
import { useAppStore } from "@/store/useAppStore";
import { useThemeStore } from "@/store/useThemeStore";
import { useUserStore } from "@/store/useUserStore";
import { openWeb } from '@/module/utils/openUrl.js'
import { openUrl } from '@/module/utils/openUrl.js'
import HomeUserInfo from "@/pages/home/components/HomeUserInfo.vue";
import VipItem from "../account/components/VipItem/VipItem.vue";
@ -333,7 +333,7 @@ const deposit = () => {
}
const openCustomer = () => {
openWeb(userStore.serviceUrl)
openUrl(userStore.serviceUrl)
}
</script>

2
src/pages/wallet/DepositHistory.vue
View File

@ -46,7 +46,7 @@
<theme-image v-if="item.status === 1" src="@/static/icon-succeed.png" style="width: 50rpx; height: 50rpx;"></theme-image>
<!-- <theme-image v-else-if="item.status === 0" src="@/static/wallet/icon-fail.png" style="width: 50rpx; height: 50rpx;"></theme-image> -->
<theme-image v-else src="@/static/icon-pending.png" style="width: 50rpx; height: 50rpx;"></theme-image>
<view v-if="item.manualRechargeStatus === 0 || item.manualRechargeStatus === 3" class="list-item-utr-conner">
<view v-if="(item.manualRechargeStatus === 0 || item.manualRechargeStatus === 3) && item.status === 0" class="list-item-utr-conner">
<view>Self</view>
</view>
</view>

110
src/pages/wallet/components/OnlineDeposit.vue
View File

@ -43,19 +43,29 @@
</view>
</view>
</view>
<view class="plr30 ptb24 ft15 flex justify-between items-center" :style="{ 'color': themeStore.theme.text.light, marginTop: '38rpx' }">
<view class="plr30 ptb24 ft15 flex justify-between items-center"
:style="{ 'color': themeStore.theme.text.light, marginTop: '38rpx' }">
<text>{{ $t('deposit.depositEvent') }}:</text>
<text v-if="depositStore.activeType == 2" @click="toPoster" class="change-account-text" :style="{ color: themeStore.theme.text.theme }">
<text v-if="depositStore.activeType == 2" @click="toPoster" class="change-account-text"
:style="{ color: themeStore.theme.text.theme }">
{{ $t('withdraw.posterText') }}
</text>
<text v-else @click="handleHistoryClick" class="change-history-text" :style="{ color: themeStore.theme.text.theme }">
<text v-else @click="handleHistoryClick" class="change-history-text"
:style="{ color: themeStore.theme.text.theme }">
{{ $t('deposit.historyNot') }}
</text>
</view>
<view class="pt24 plr16 flex-wrap pay-method">
<view class="select-btn-container" v-for="(item, index) in payMethod" :key="index"
@click.stop="handlePayMethodSelect(item)">
<view class="select-btn"
<view class="relative select-btn-container" v-for="(item, index) in payMethod" :key="index"
@click.stop="handlePayMethodSelect(item, index)">
<view class="flex-center select-btn"
:style="{ background: activeMethod === index ? themeStore.theme.wallet.payBg : themeStore.theme.wallet.payBg1 }">
<theme-image :src="`@/static/${item.icon}`" style="width: 40rpx; height: 40rpx;"></theme-image>
<view class="pay-name" :style="{ color: themeStore.theme.light }">{{ item.name }}</view>
</view>
<theme-image v-if="activeMethod === index" src="@/static/wallet/icon-btn-select-m.png"
class="select-btn-check-img pos-absolute" mode="aspectFill" />
<view v-if="false" class="select-btn"
:style="{ 'background': item.disable ? themeStore.theme.corner.disabledBg : item.name == depositStore.onlinePaymentData.rechargeName ? themeStore.theme.corner.selectBtnBg : themeStore.theme.corner.selectBtnColor }">
<view class="nice-icon" v-if="item.isRecommend"
:style="{ 'color': themeStore.theme.corner.text, 'background': themeStore.theme.corner.selectBtnColor }">
@ -183,9 +193,33 @@ const tabStyle = computed(() => {
color: depositType.value === 'bank' ? themeStore.theme.wallet.light : themeStore.theme.wallet.textColor
}
})
const payMethod = computed(() => {
return depositStore.onlinePaymentData.depositMethodList.filter(item => item.type == depositStore.activeType)
})
// const payMethod = computed(() => {
// return depositStore.onlinePaymentData.depositMethodList.filter(item => item.type == depositStore.activeType)
// })
const activeMethod = ref(0)
const payMethod = ref([
{
name: 'PayTM',
icon: 'wallet/pay_PayTM.png'
},
{
name: 'PhonePe',
icon: 'wallet/pay_PhonePe.png'
},
{
name: 'GooglePay',
icon: 'wallet/pay_GooglePay.png'
},
{
name: 'UPI',
icon: 'wallet/pay_UPI.png'
},
{
name: 'QRcode',
icon: 'wallet/pay_QRcode.png'
},
])
depositStore.onlinePaymentData.payMethod = payMethod.value[0].name
const handleHistoryClick = () => {
uni.navigateTo({
url: '/pages/wallet/DepositHistory'
@ -203,16 +237,17 @@ const handleChannelChange = (channel) => {
depositStore.onlinePaymentData.payType = channel
}
const handlePayMethodSelect = (item) => {
const handlePayMethodSelect = (item, idx) => {
console.log(item);
if (item.disable) { return }
depositStore.onlinePaymentData.depositMethod = item.type
depositStore.onlinePaymentData.depositMethodName = item.name
depositStore.onlinePaymentData.depositMethodSelectItem = item
depositStore.onlinePaymentData.rechargeName = item.name
depositStore.onlinePaymentData.payType = item.payType?.split(',')[0]
depositStore.payType = item.payType
activeMethod.value = idx
// if (item.disable) { return }
depositStore.onlinePaymentData.payMethod = item.name
// depositStore.onlinePaymentData.depositMethod = item.type
// depositStore.onlinePaymentData.depositMethodName = item.name
// depositStore.onlinePaymentData.depositMethodSelectItem = item
// depositStore.onlinePaymentData.rechargeName = item.name
// depositStore.onlinePaymentData.payType = item.payType?.split(',')[0]
// depositStore.payType = item.payType
}
const handleAmountSelect = (item) => {
@ -254,8 +289,9 @@ const handleConfirmClick = async () => {
channelId: depositStore.onlinePaymentData.depositChannel,
rechargeType: depositStore.onlinePaymentData.depositMethod === 5 ? 'H' : depositStore.onlineDepositType.rechargeType,
accountType: depositStore.onlinePaymentData.depositMethod,
rechargeName: depositStore.onlinePaymentData.rechargeName,
// rechargeName: depositStore.onlinePaymentData.rechargeName,
payType: depositStore.onlinePaymentData.payType,
payMethod: depositStore.onlinePaymentData.payMethod,
}
} else {
params = {
@ -263,8 +299,9 @@ const handleConfirmClick = async () => {
channelId: depositStore.onlinePaymentData.depositChannel,
rechargeType: depositStore.onlinePaymentData.depositMethod === 5 ? 'H' : depositStore.onlineDepositType.rechargeType,
accountType: depositStore.onlinePaymentData.depositMethodName,
rechargeName: depositStore.onlinePaymentData.rechargeName,
// rechargeName: depositStore.onlinePaymentData.rechargeName,
payType: depositStore.onlinePaymentData.payType,
payMethod: depositStore.onlinePaymentData.payMethod,
}
}
console.log(params);
@ -283,14 +320,17 @@ const handleConfirmClick = async () => {
<style lang="scss" scoped>
.online-deposit-container {
padding-bottom: 220rpx;
.change-account-text {
font-size: 24rpx;
text-decoration-line: underline;
}
.change-history-text {
font-size: 26rpx;
text-decoration-line: underline;
}
.pay-type-box {
height: 88rpx;
@ -304,13 +344,28 @@ const handleConfirmClick = async () => {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 20rpx;
grid-gap: 16rpx;
padding: 0 28rpx;
}
.select-btn-container {
position: relative;
flex: 1;
width: 222rpx;
height: 100rpx;
.select-btn-check-img {
width: 222rpx;
height: 100rpx;
position: absolute;
top: 0rpx;
left: 0rpx;
z-index: 110;
}
}
.pay-name {
font-size: 26rpx;
margin-left: 10rpx;
}
.label {
@ -332,7 +387,7 @@ const handleConfirmClick = async () => {
.select-btn {
width: 100%;
height: 85rpx;
height: 100rpx;
position: relative;
overflow: hidden;
border-radius: 16rpx;
@ -379,15 +434,6 @@ const handleConfirmClick = async () => {
color: #999999;
filter: grayscale(100%);
}
.select-btn-check-img {
position: absolute;
top: 0rpx;
left: 0rpx;
right: 0rpx;
bottom: 0rpx;
z-index: 1;
}
}
.check-radio {

458
src/pages/wallet/components/OnlineDepositOld1.vue Normal file
View File

@ -0,0 +1,458 @@
<template>
<view class="online-deposit-container">
<!-- <view class="pay-type-box w-full flex justify-between items-center">
<view v-for="(item, index) in walletTab" :key="index" class="pay-type-item flex-1 flex-center"
:style="{ background: depositType === 'bank' ? themeStore.theme.wallet.normal : '', color: depositType === 'bank' ? themeStore.theme.wallet.button.textColor : 'red' }"
@click="handleSelect('bank')">{{ item.value }}</view>
</view> -->
<view class="plr30 ptb24 ft15 flex justify-between items-center"
:style="{ 'color': themeStore.theme.text.light }">
{{ $t('deposit.depositAmount') }}:
<view class="flex items-center">
<view class="ft12 ml32 label label-min" :style="{ background: themeStore.theme.wallet.min }">Min: {{
$formatThousandDot(depositStore.onlineDepositMin) }}</view>
<view class="ft12 ml32 label label-max" :style="{ background: themeStore.theme.wallet.max }"> Max: {{
$formatThousandDot(depositStore.onlineDepositMax) }}</view>
</view>
</view>
<view class="plr30 pb30">
<MoneyInput v-model="depositStore.onlinePaymentData.depositAmount"
:placeholder="$t('deposit.depositAmount')" :max="depositStore.onlineDepositMax"
:min="depositStore.onlineDepositMin" @change="handleAmountInput" />
</view>
<view class="plr30" :style="{ 'color': themeStore.theme.text.light }">
<view class="flex-wrap amount-box">
<view v-for="(item, index) in depositStore.onlineDepositType.amountList" :key="index"
@click.stop="handleAmountSelect(item)">
<view class="select-item-container">
<view v-if="depositStore.isTypeB" class="badge-view">
<view>{{ depositStore.isTypeB ? `+${depositStore.onlineDepositType.giftList[index]}` : '' }}
</view>
</view>
<view v-else class="badge-view">
<view>{{ depositStore.onlineDepositType.gift > 0 ?
`+${depositStore.onlineDepositType.giftList[index]}` : '' }}
</view>
</view>
<view class="item-content flex-center"
:class="{ 'select': Number(depositStore.onlinePaymentData.depositAmount || 0) === Number(item) }">
<view style="color: #FEBF05;font-weight: bold;">{{ appStore.currencySign }} {{
$formatThousandDot(item) }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="plr30 ptb24 ft15 flex justify-between items-center" :style="{ 'color': themeStore.theme.text.light, marginTop: '38rpx' }">
<text>{{ $t('deposit.depositEvent') }}:</text>
<text v-if="depositStore.activeType == 2" @click="toPoster" class="change-account-text" :style="{ color: themeStore.theme.text.theme }">
{{ $t('withdraw.posterText') }}
</text>
<text v-else @click="handleHistoryClick" class="change-history-text" :style="{ color: themeStore.theme.text.theme }">
{{ $t('deposit.historyNot') }}
</text>
</view>
<view class="pt24 plr16 flex-wrap pay-method">
<view class="select-btn-container" v-for="(item, index) in payMethod" :key="index"
@click.stop="handlePayMethodSelect(item)">
<view class="select-btn"
:style="{ 'background': item.disable ? themeStore.theme.corner.disabledBg : item.name == depositStore.onlinePaymentData.rechargeName ? themeStore.theme.corner.selectBtnBg : themeStore.theme.corner.selectBtnColor }">
<view class="nice-icon" v-if="item.isRecommend"
:style="{ 'color': themeStore.theme.corner.text, 'background': themeStore.theme.corner.selectBtnColor }">
<view>{{ appStore.currencySign }}{{ item.isRecommend }}+</view>
</view>
<!-- <theme-image v-if="item.type === depositStore.onlinePaymentData.depositMethod"
class="select-btn-bg-img" src="@/static/wallet/icon-btn-bg-select.png" mode="aspectFill" />
<theme-image v-else-if="item.disable" src="@/static/wallet/icon-btn-bg-disable.png"
class="select-btn-bg-img" mode="aspectFill" />
<theme-image v-else src="@/static/wallet/icon-btn-bg.png" class="select-btn-bg-img"
mode="aspectFill" /> -->
<view class="flex-acenter cfff select-btn-text" :class="{ 'disable': item.disable }">
<!-- <theme-image v-if="item.disable" :src="item.unableUrl" mode="aspectFit"
class="pay-type-icon flex-shrink-0" style="width: 50rpx; height: 45rpx"></theme-image>
<theme-image v-else :src="item.iconUrl" mode="aspectFit" class="pay-type-icon flex-shrink-0"
style="width: 50rpx; height: 45rpx"></theme-image> -->
<view class="flex-1 flex-scenter">
<view>{{ item.name }}</view>
</view>
<view style="width: 20rpx;"></view>
</view>
<!-- <view class="select-btn-check-img"
v-if="item.type === depositStore.onlinePaymentData.depositMethod">
<theme-image src="@/static/wallet/icon-btn-select-m.png" mode="scaleToFill"
style="width: 100%; height: 100%;" />
</view> -->
</view>
</view>
<view class="select-btn-container" v-if="depositStore.onlinePaymentData.depositMethodSelectItem.isGuide">
<view class="select-btn ft12 flex-acenter flex-scenter"
:style="{ color: themeStore.theme.text.highlight2 }">
<view style="text-decoration-line: underline;" @click.stop="handleHowtouseClick">
{{ $t('deposit.howtouse') }}
</view>
</view>
</view>
</view>
<view class="ptb24" v-if="false">
<DepositChannel @change="handleChannelChange" />
</view>
<view class="plr30 ptb24 ft15" :style="{ 'color': themeStore.theme.text.light }">
{{ $t('deposit.depositEvent') }}:
</view>
<view class="flex-acenter plr30 pb30" :style="{ 'color': themeStore.theme.text.light }">
<view class="check-radio flex-acenter flex-scenter cfff ft26"
:style="{ 'border-color': themeStore.theme.themeDarkBgColor, 'background': themeStore.theme.themeDarkBgColor }"
@click.stop="handleDepositEventCheckClick">
<image v-if="depositStore.isTypeB" src="@/static/images/check-2.png" mode="aspectFit"
style="width: 30rpx; height: 30rpx;" />
</view>
<view class="ft13">
{{ `+${(depositStore.typeB.gift || 0) * 100}%` }} {{ $t('deposit.bonus') }}
</view>
</view>
<view v-if="depositStore.fillOrderSwitch" class="plr30 ptb24 ft15"
:style="{ 'color': themeStore.theme.text.light }">
{{ $t('deposit.depositService') }}:
</view>
<view v-if="depositStore.fillOrderSwitch" class="plr30">
<SelfServiceUtrItem />
</view>
<view class="plr30 ptb24 ft15" :style="{ 'color': themeStore.theme.text.light }">
{{ $t('deposit.depositTips') }}:
</view>
<view class="ft10 plr30" :style="{ 'color': themeStore.theme.text.light }">
<view>
{{ $t('deposit.message.tips1') }}
</view>
<view>
{{ $t('deposit.message.tips2') }}
</view>
</view>
<view class="noraml-bottom-action-container" :style="{ 'background': themeStore.theme.deposit.bgColor }"
@click.stop="handleConfirmClick">
<view class="normal-theme-btn-radius"
:style="{ 'background': `top / cover no-repeat ${themeStore.theme.deposit.bgImage}`, 'color': themeStore.theme.deposit.button.textColor }">
<text>
{{ $t('deposit.button.depositNow') }}
</text>
</view>
</view>
<DepositSuccessPopup ref="depositSuccessPopupRef" />
<TipsPopup ref="depositEventPopupRef" :text="$t('deposit.message.tips3')" />
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
import MoneyInput from '@/components/input/MoneyInput.vue'
import DepositChannel from './DepositChannel.vue'
import SelfServiceUtrItem from './SelfServiceUtrItem.vue'
import { useDepositStore } from '@/store/useDepositStore.js'
import { requestCreateRechargeOrder } from '@/api/deposit'
import Toast from '@/module/toast/toast.js'
import DepositSuccessPopup from './DepositSuccessPopup.vue'
import TipsPopup from '@/components/popup/TipsPopup.vue'
import { useI18n } from 'vue-i18n'
import { useThemeStore } from '@/store/useThemeStore'
import { useAppStore } from '@/store/useAppStore'
import { openUrl } from '@/module/utils/openUrl'
const { t } = useI18n()
const themeStore = useThemeStore()
const depositStore = useDepositStore()
const appStore = useAppStore()
const depositType = ref('bank')
const depositSuccessPopupRef = ref(null)
const depositEventPopupRef = ref(null)
const walletTab = [
{
key: 'bank',
value: t('deposit.payType.bank')
},
{
key: 'wallet',
value: t('deposit.payType.wallet')
}
]
const tabStyle = computed(() => {
return {
background: depositType.value === 'bank' ? themeStore.theme.wallet.normal : themeStore.theme.wallet.bgColor,
color: depositType.value === 'bank' ? themeStore.theme.wallet.light : themeStore.theme.wallet.textColor
}
})
const payMethod = computed(() => {
return depositStore.onlinePaymentData.depositMethodList.filter(item => item.type == depositStore.activeType)
})
const handleHistoryClick = () => {
uni.navigateTo({
url: '/pages/wallet/DepositHistory'
})
}
const toPoster = () => {
uni.navigateTo({
url: '/pages/activity/Poster',
})
}
const handleSelect = (type) => {
depositType.value = type
}
const handleChannelChange = (channel) => {
depositStore.onlinePaymentData.payType = channel
}
const handlePayMethodSelect = (item) => {
console.log(item);
if (item.disable) { return }
depositStore.onlinePaymentData.depositMethod = item.type
depositStore.onlinePaymentData.depositMethodName = item.name
depositStore.onlinePaymentData.depositMethodSelectItem = item
depositStore.onlinePaymentData.rechargeName = item.name
depositStore.onlinePaymentData.payType = item.payType?.split(',')[0]
depositStore.payType = item.payType
}
const handleAmountSelect = (item) => {
depositStore.onlinePaymentData.depositAmount = item + ''
depositStore.computeMethodList()
}
const handleAmountInput = () => {
depositStore.computeMethodList()
}
const handleDepositEventCheckClick = () => {
depositStore.isTypeB = !depositStore.isTypeB
if (depositStore.isTypeB) {
depositEventPopupRef.value.show()
}
}
const handleHowtouseClick = () => {
let url = depositStore.onlinePaymentData.depositMethodSelectItem.isGuide
if (!url) { return }
openUrl(url)
}
const handleConfirmClick = async () => {
if (!depositStore.onlinePaymentData.depositAmount) {
Toast.show(t('deposit.toast.text1'))
return
}
if (Number(depositStore.onlinePaymentData.depositAmount) < depositStore.onlineDepositMin || Number(depositStore.onlinePaymentData.depositAmount) > depositStore.onlineDepositMax) {
Toast.show(`${t('deposit.toast.text2')} ${depositStore.onlineDepositMin} - ${depositStore.onlineDepositMax}`)
return
}
Toast.showLoading('Loading')
let params = {}
if (appStore.phoneNumberPrefix === '+91') {
params = {
amount: depositStore.onlinePaymentData.depositAmount,
channelId: depositStore.onlinePaymentData.depositChannel,
rechargeType: depositStore.onlinePaymentData.depositMethod === 5 ? 'H' : depositStore.onlineDepositType.rechargeType,
accountType: depositStore.onlinePaymentData.depositMethod,
rechargeName: depositStore.onlinePaymentData.rechargeName,
payType: depositStore.onlinePaymentData.payType,
}
} else {
params = {
amount: depositStore.onlinePaymentData.depositAmount,
channelId: depositStore.onlinePaymentData.depositChannel,
rechargeType: depositStore.onlinePaymentData.depositMethod === 5 ? 'H' : depositStore.onlineDepositType.rechargeType,
accountType: depositStore.onlinePaymentData.depositMethodName,
rechargeName: depositStore.onlinePaymentData.rechargeName,
payType: depositStore.onlinePaymentData.payType,
}
}
console.log(params);
const { code, data } = await requestCreateRechargeOrder(params)
Toast.hideLoading()
if (code !== 200) { return }
if (data.url) {
// window.open("/test.html", "_blank")
openUrl(data.url)
depositSuccessPopupRef.value.show()
}
}
</script>
<style lang="scss" scoped>
.online-deposit-container {
padding-bottom: 220rpx;
.change-account-text {
font-size: 24rpx;
text-decoration-line: underline;
}
.change-history-text{
font-size: 26rpx;
text-decoration-line: underline;
}
.pay-type-box {
height: 88rpx;
.pay-type-item {
height: 88rpx;
transition: all 0.3s ease;
}
}
.pay-method {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 20rpx;
padding: 0 28rpx;
}
.select-btn-container {
position: relative;
flex: 1;
}
.label {
padding: 8rpx 12rpx;
border-radius: 10rpx;
font-weight: 400;
font-size: 22rpx;
color: #FFFFFF;
line-height: 22rpx;
}
.label-min {
background: #3C9704;
}
.label-max {
background: #A40000;
}
.select-btn {
width: 100%;
height: 85rpx;
position: relative;
overflow: hidden;
border-radius: 16rpx;
.nice-icon {
position: absolute;
top: 0rpx;
left: 0rpx;
// width: 90rpx;
height: 28rpx;
z-index: 3;
padding: 0rpx 12rpx;
font-size: 20rpx;
color: #ffffff;
border-bottom-right-radius: 10rpx;
display: flex;
align-items: center;
justify-content: center;
}
// .pay-type-icon {}
// .pay-type-icon.disable {
// filter: grayscale(90%);
//}
.select-btn-bg-img {
width: 100%;
height: 100%;
}
.select-btn-text {
position: absolute;
top: 0rpx;
left: 0rpx;
right: 0rpx;
bottom: 0rpx;
z-index: 2;
font-size: 26rpx;
padding: 0rpx 8rpx;
}
.select-btn-text.disable {
color: #999999;
filter: grayscale(100%);
}
.select-btn-check-img {
position: absolute;
top: 0rpx;
left: 0rpx;
right: 0rpx;
bottom: 0rpx;
z-index: 1;
}
}
.check-radio {
width: 40rpx;
height: 40rpx;
border-radius: 10rpx;
font-size: 20rpx;
margin-right: 20rpx;
border: 1rpx solid #963333;
}
.amount-box {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 20rpx;
}
.select-item-container {
position: relative;
.badge-view {
position: absolute;
top: -12rpx;
right: 0;
min-width: 64rpx;
height: 24rpx;
background: linear-gradient(270deg, #FF8A00 0%, #FF1200 100%);
font-size: 18rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
.item-content {
width: 219rpx;
height: 85rpx;
background: linear-gradient(360deg, #490F0E 0%, #660F0A 74%, #70130D 99%), rgba(106, 22, 27, 0.79);
border-radius: 19rpx 19rpx 19rpx 19rpx;
border: 2rpx solid #7B1C21;
}
.select {
background: linear-gradient(360deg, #79130D 0%, #94150C 44%, #BC0B00 99%);
border-radius: 19rpx;
border: 2rpx solid #FEBF05;
transition: all .3s ease;
}
.item-content.select {
background-color: #F37E1C;
}
}
.normal-theme-btn-radius {
width: 682rpx;
height: 84rpx;
border-radius: 0;
font-size: 31rpx;
color: #7A2500;
}
}
</style>

3
src/store/useDepositStore.js
View File

@ -35,7 +35,8 @@ export const useDepositStore = defineStore({
depositMethodSelectItem: {},
depositMethodList: [],
rechargeName: '',
payType: ''
payType: '',
payMethod: ''
},
// 渠道列表
payType: '',

14
src/theme/red.js
View File

@ -91,6 +91,8 @@ export default {
selectLinearBgColor: 'linear-gradient( 360deg, #79130D 0%, #94150C 44%, #BC0B00 99%)',
linearBgColor: 'linear-gradient( 360deg, #490F0E 0%, #660F0A 74%, #70130D 99%), rgba(106,22,27,0.79)',
},
payBg: `left / cover no-repeat url('${imgSrc}/wallet/icon-btn-bg-select.png')`,
payBg1: `left / cover no-repeat url('${imgSrc}/wallet/icon-btn-bg.png')`,
},
text: {
normal: '#ffffff',
@ -330,6 +332,18 @@ export default {
},
earn: {
gradientBtn: 'linear-gradient(0deg, #32b12f, #10740b)',
light: '#ffffff',
text: '#F59094',
yellow: '#D4C534',
amount: '#FFCF4C',
tab: '#FFCE64',
dark: '#000000',
blockBg: '#2B0607',
headLinear: 'linear-gradient(180deg, #C8933E, #EFD388);',
recordBg: '#610700',
tabHeadColor: '#36070F',
success: '#1ED01E',
dismiss: '#FF0000'
},
// 个人中心相关色值
account: {