feat(充值代理页): 新增每月一号“选择用户转账金额限制”按钮功能，计时设置为每1h检查一次
This commit is contained in:
hzj
parent
f779c349df
commit
d7e88de707
@ -34,10 +34,16 @@
|
|||||||
src="../../assets/icon/identity/coinSeller.png"
|
src="../../assets/icon/identity/coinSeller.png"
|
||||||
alt=""
|
alt=""
|
||||||
height="20px"
|
height="20px"
|
||||||
style="margin-left: 10px"
|
style="display: block; margin-left: 10px"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<img @click="goToRecords" src="../../assets/icon/records.png" height="20px" alt="" />
|
<img
|
||||||
|
@click="goToRecords"
|
||||||
|
src="../../assets/icon/records.png"
|
||||||
|
height="20px"
|
||||||
|
alt=""
|
||||||
|
style="display: block; object-fit: cover"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 用户信息卡片 -->
|
<!-- 用户信息卡片 -->
|
||||||
@ -82,6 +88,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 设置最小接收金额 -->
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
background-color: white;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div style="display: flex; justify-content: space-between; align-items: center; gap: 4px">
|
||||||
|
<div style="font-weight: 600">Minimum amount of transfers accepted:</div>
|
||||||
|
<img
|
||||||
|
src="../../assets/icon/help.png"
|
||||||
|
height="20px"
|
||||||
|
alt=""
|
||||||
|
style="display: block; object-fit: cover"
|
||||||
|
@click="showHelpTip = true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; justify-content: space-around; align-items: center; gap: 10px">
|
||||||
|
<div
|
||||||
|
v-for="amountItem in AmountList"
|
||||||
|
style="
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
align-self: stretch;
|
||||||
|
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
"
|
||||||
|
:style="amountStyle(amountItem)"
|
||||||
|
@click="selectAmount(amountItem)"
|
||||||
|
>
|
||||||
|
<div style="font-weight: 700">{{ amountItem.type }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- 用户搜索部分 -->
|
<!-- 用户搜索部分 -->
|
||||||
<div class="user-section">
|
<div class="user-section">
|
||||||
<div style="margin-bottom: 12px; font-weight: 600; color: #333">
|
<div style="margin-bottom: 12px; font-weight: 600; color: #333">
|
||||||
@ -163,19 +218,119 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 遮罩层 -->
|
||||||
|
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<!-- 帮助提示弹窗 -->
|
||||||
|
<div
|
||||||
|
v-if="showHelpTip"
|
||||||
|
style="
|
||||||
|
width: 80%;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<div style="position: relative; width: 100%">
|
||||||
|
<div style="text-align: center; color: rgba(0, 0, 0, 0.8); font-weight: 800">
|
||||||
|
{{ t('tips') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 关闭按钮 -->
|
||||||
|
<div style="position: absolute; top: 0; right: 0" @click="closedPopup">X</div>
|
||||||
|
</div>
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.5); font-weight: 600; text-align: center">
|
||||||
|
Recharge agents can choose the minimumamount they can accept from user transfers,which
|
||||||
|
can be modifed on the frst of eachmonth. (For example, if a recharge agentchanges to
|
||||||
|
only accept transfers of $10 or more,users with single transfers below $10 will not
|
||||||
|
beable to transfer funds to that recharge agent.)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 设置转账确认弹窗 -->
|
||||||
|
<div
|
||||||
|
v-if="showTransfersTip"
|
||||||
|
style="
|
||||||
|
width: 80%;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">{{ t('tips') }}</div>
|
||||||
|
<div style="color: rgba(0, 0, 0, 0.5); font-weight: 600; text-align: center">
|
||||||
|
Are you sure you want to select this transfer amount limit?
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="width: 100%; display: flex; justify-content: space-around; align-items: center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #e6e6e6;
|
||||||
|
color: rgba(0, 0, 0, 0.4);
|
||||||
|
font-weight: 800;
|
||||||
|
"
|
||||||
|
@click="Cancel"
|
||||||
|
>
|
||||||
|
{{ t('cancel') }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: linear-gradient(
|
||||||
|
152deg,
|
||||||
|
rgba(198, 112, 255, 0.6) 7.01%,
|
||||||
|
rgba(119, 38, 255, 0.6) 92.99%
|
||||||
|
);
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-weight: 800;
|
||||||
|
"
|
||||||
|
@click="Confirm"
|
||||||
|
>
|
||||||
|
{{ t('confirm') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</maskLayer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { setDocumentDirection } from '@/locales/i18n'
|
||||||
import { getSelectedUser } from '@/utils/coinSellerStore.js'
|
import { getSelectedUser } from '@/utils/coinSellerStore.js'
|
||||||
import { checkFreightDealer, getFreightBalance, freightRecharge } from '@/api/wallet.js'
|
|
||||||
import { showError, showSuccess } from '@/utils/toast.js'
|
import { showError, showSuccess } from '@/utils/toast.js'
|
||||||
import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
|
import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
|
||||||
import { setDocumentDirection } from '@/locales/i18n'
|
|
||||||
|
import { checkFreightDealer, getFreightBalance, freightRecharge } from '@/api/wallet.js'
|
||||||
|
|
||||||
|
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||||
|
import maskLayer from '@/components/MaskLayer.vue'
|
||||||
|
|
||||||
const { t, locale } = useI18n()
|
const { t, locale } = useI18n()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -191,12 +346,97 @@ const checkingAccess = ref(true)
|
|||||||
const coinsAmount = ref('0')
|
const coinsAmount = ref('0')
|
||||||
const loadingBalance = ref(false)
|
const loadingBalance = ref(false)
|
||||||
|
|
||||||
|
const AmountList = ref([
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
type: '>$0',
|
||||||
|
selectedStatus: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
type: '>=$10',
|
||||||
|
selectedStatus: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
type: '>=$20',
|
||||||
|
selectedStatus: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
type: '>=$50',
|
||||||
|
selectedStatus: false,
|
||||||
|
},
|
||||||
|
])
|
||||||
|
const selectedAmount = ref({})
|
||||||
|
// 是否为每月一号
|
||||||
|
const isFirstDay = ref(false)
|
||||||
|
|
||||||
|
// 更新是否为每月一号
|
||||||
|
const updateIsFirstDay = () => {
|
||||||
|
const today = new Date()
|
||||||
|
isFirstDay.value = today.getDate() === 1
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选项样式
|
||||||
|
const amountStyle = (amountItem) => {
|
||||||
|
if (amountItem.selectedStatus) {
|
||||||
|
return 'border: 1px solid #7726ff;background: #fff;'
|
||||||
|
} else if (isFirstDay.value) {
|
||||||
|
return 'border: 1px solid transparent;background: transparent;'
|
||||||
|
} else {
|
||||||
|
return 'border: 1px solid transparent;background: rgba(0, 0, 0, 0.2);'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹窗提示
|
||||||
|
const showHelpTip = ref(false) //帮助提示弹窗
|
||||||
|
const showTransfersTip = ref(false) //设置转账确认弹窗
|
||||||
|
const maskLayerShow = computed(() => {
|
||||||
|
return showHelpTip.value || showTransfersTip.value
|
||||||
|
})
|
||||||
|
|
||||||
// 选中的用户
|
// 选中的用户
|
||||||
const selectedUser = ref({
|
const selectedUser = ref({
|
||||||
id: '',
|
id: '',
|
||||||
name: '',
|
name: '',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 关闭弹窗
|
||||||
|
const closedPopup = () => {
|
||||||
|
showHelpTip.value = false
|
||||||
|
showTransfersTip.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择限制转账金额
|
||||||
|
const selectAmount = (amountItem) => {
|
||||||
|
// 非每月一号
|
||||||
|
if (!isFirstDay.value || amountItem.selectedStatus) return
|
||||||
|
|
||||||
|
console.log('选择限制转账金额', amountItem)
|
||||||
|
selectedAmount.value = amountItem //设置选中的金额
|
||||||
|
showTransfersTip.value = true //展示确认弹窗
|
||||||
|
}
|
||||||
|
|
||||||
|
// 取消选择
|
||||||
|
const Cancel = () => {
|
||||||
|
console.log('取消选择')
|
||||||
|
|
||||||
|
selectedAmount.value = {} //清空选中的金额
|
||||||
|
closedPopup()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认选择
|
||||||
|
const Confirm = () => {
|
||||||
|
console.log('确认选择')
|
||||||
|
|
||||||
|
// 发送接口
|
||||||
|
try {
|
||||||
|
} catch (error) {}
|
||||||
|
|
||||||
|
closedPopup()
|
||||||
|
}
|
||||||
|
|
||||||
// 校验销售商权限
|
// 校验销售商权限
|
||||||
const checkDealerAccess = async () => {
|
const checkDealerAccess = async () => {
|
||||||
try {
|
try {
|
||||||
@ -242,7 +482,7 @@ const fetchFreightBalance = async () => {
|
|||||||
const defaultAvatarUrl = (e) => {
|
const defaultAvatarUrl = (e) => {
|
||||||
console.log('头像资源出错')
|
console.log('头像资源出错')
|
||||||
e.target.onerror = null //防止循环
|
e.target.onerror = null //防止循环
|
||||||
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
|
e.target.src = new URL('/src/assets/icon/defaultAvatar.png', import.meta.url).href
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化用户信息
|
// 初始化用户信息
|
||||||
@ -337,6 +577,22 @@ const { userInfo } = usePageInitializationWithConfig('COIN_SELLER', {
|
|||||||
initializeUser()
|
initializeUser()
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 定时检查（可选）
|
||||||
|
let dayCheckInterval = null
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 初始化
|
||||||
|
updateIsFirstDay()
|
||||||
|
// 每小时检查一次是否进入新一天
|
||||||
|
dayCheckInterval = setInterval(updateIsFirstDay, 60 * 60 * 1000)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (dayCheckInterval) {
|
||||||
|
clearInterval(dayCheckInterval)
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user