add pay guide
This commit is contained in:
parent
62f18ed924
commit
413942871f
@ -23,14 +23,13 @@
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
|
||||
"compatible": {
|
||||
"ignoreVersion": true // 忽略SDK版本不一致提示
|
||||
"compatible" : {
|
||||
"ignoreVersion" : true // 忽略SDK版本不一致提示
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"Share" : {},
|
||||
"Payment" : {}
|
||||
"VideoPlayer" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
|
@ -92,6 +92,13 @@
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/wallet/DepositGuide",
|
||||
"style": {
|
||||
"navigationBarTitleText": "How to use",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/wallet/DepositHistory",
|
||||
"style": {
|
||||
|
@ -24,7 +24,8 @@ function newMsg(msg, type, mtype) {
|
||||
id,
|
||||
msg,
|
||||
type,
|
||||
mtype
|
||||
mtype,
|
||||
commited: false,
|
||||
})
|
||||
lastId.value = ''
|
||||
setTimeout(() => {
|
||||
@ -67,13 +68,28 @@ 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 onNoZan = (id, msgId) => {
|
||||
const idx = faqs.value.findIndex(item => item.id === msgId)
|
||||
if (idx > -1) {
|
||||
if (faqs.value[idx].commited) {
|
||||
return
|
||||
}
|
||||
faqs.value[idx].commited = true
|
||||
questionFailApi({ questionId: id })
|
||||
newMsg('Sorry, please contact online customer service.', 1, 'msg')
|
||||
}
|
||||
|
||||
}
|
||||
const onZan = (id) => {
|
||||
questionSuccessApi({questionId: id})
|
||||
newMsg('I\'m glad that I could help you.!', 1,'msg')
|
||||
const onZan = (id, msgId) => {
|
||||
const idx = faqs.value.findIndex(item => item.id === msgId)
|
||||
if (idx > -1) {
|
||||
if (faqs.value[idx].commited) {
|
||||
return
|
||||
}
|
||||
faqs.value[idx].commited = true
|
||||
questionSuccessApi({ questionId: id })
|
||||
newMsg('I\'m glad that I could help you.!', 1, 'msg')
|
||||
}
|
||||
}
|
||||
const onSend = () => {
|
||||
if (!inputVal.value) {
|
||||
@ -141,12 +157,12 @@ onLoad(() => {
|
||||
<view class="question-text" v-else>
|
||||
{{ child.display }}
|
||||
</view>
|
||||
<view class="is-usefull pos-absolute"
|
||||
<view class="is-usefull pos-absolute flex items-center"
|
||||
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>
|
||||
style="margin-right: 10rpx;" @click="onZan(child.id, item.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>
|
||||
style="margin-right: 10rpx;" @click="onNoZan(child.id, item.id)"></theme-image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -243,7 +259,8 @@ onLoad(() => {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
.zan-reverse{
|
||||
|
||||
.zan-reverse {
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
}
|
||||
|
@ -29,7 +29,7 @@
|
||||
<empty-hold v-if="walletType.length > 1" height="50px"></empty-hold>
|
||||
<view v-show="depositStore.activeType === 1 || depositStore.activeType === 2">
|
||||
<OnlineDeposit v-if="appStore.phoneNumberPrefix === '+91'" />
|
||||
<OnlineDepositOld v-else />
|
||||
<OnlineDepositOldV1 v-else />
|
||||
</view>
|
||||
<view v-show="selectIndex === 2">
|
||||
<TransferDeposit v-if="appStore.phoneNumberPrefix === '+91'" />
|
||||
@ -50,7 +50,7 @@ import { onLoad } from '@dcloudio/uni-app'
|
||||
import { reactive, ref } from 'vue'
|
||||
import { useThemeStore } from '@/store/useThemeStore'
|
||||
import OnlineDeposit from './components/OnlineDeposit.vue'
|
||||
import OnlineDepositOld from './components/OnlineDepositOld.vue'
|
||||
import OnlineDepositOldV1 from './components/OnlineDepositOldV1.vue'
|
||||
import TransferDeposit from './components/TransferDeposit.vue'
|
||||
import TransferDepositOld from './components/TransferDepositOld.vue'
|
||||
import AgencyDeposit from './components/AgencyDeposit.vue'
|
||||
|
225
src/pages/wallet/DepositGuide.vue
Normal file
225
src/pages/wallet/DepositGuide.vue
Normal file
@ -0,0 +1,225 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useAppStore } from '@/store/useAppStore'
|
||||
import { useThemeStore } from '@/store/useThemeStore'
|
||||
import config from '@/config/global.config';
|
||||
|
||||
const appStore = useAppStore()
|
||||
const themeStore = useThemeStore()
|
||||
const tabs = ['View Video Tutorials', 'View Graphic Tutorials']
|
||||
const active = ref(0)
|
||||
const videoSrc = config.appImagePrefix() + '/pay_guide/operation.mp4'
|
||||
const videoShow = ref(false)
|
||||
</script>
|
||||
<template>
|
||||
<mobile-custom-layout bgColor="#360002" headBgColor="#610800" title="How to use?"
|
||||
:paddingTop="appStore.headerStyle.height">
|
||||
<view class="w-full tab-box flex items-center" :style="{ top: appStore.headerStyle.height + 'px' }">
|
||||
<view v-for="(item, index) in tabs" :key="index" class="tab-item flex-1 flex-column flex-center"
|
||||
@click="active = index" :style="{ color: active === index ? '#EAD15D' : '#fff' }">
|
||||
<view style="color: white;">{{ item }}</view>
|
||||
<view class="under-line" :style="{ background: index === active ? '#EAD15D' : '#360002' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content w-full">
|
||||
<template v-if="active === 0">
|
||||
<theme-image src="@/static/pay_guide/banner.png" class="w-full banner" mode="aspectFit"></theme-image>
|
||||
<view class="swiper-area w-full">
|
||||
<view class="title">Deposit Tutorials</view>
|
||||
<view class="gallery w-full flex items-center">
|
||||
<theme-image v-for="(_, index) in 7" :src="`@/static/pay_guide/p${index + 1}.png`"
|
||||
class="gallery-img" mode="aspectFit"></theme-image>
|
||||
</view>
|
||||
<!-- <swiper
|
||||
class="gallery-swiper"
|
||||
:indicator-dots="false"
|
||||
:autoplay="false"
|
||||
:current="currentIndex"
|
||||
:previous-margin="'0'"
|
||||
:next-margin="'246rpx'"
|
||||
@change="handleChange"
|
||||
>
|
||||
<swiper-item v-for="(_, index) in 7" :key="index" class="swiper-item">
|
||||
<theme-image :src="`@/static/pay_guide/p${index + 1}.png`" class="gallery-img" mode="aspectFit"></theme-image>
|
||||
</swiper-item>
|
||||
</swiper> -->
|
||||
</view>
|
||||
<view class="w-full video-area">
|
||||
<view class="title">Watch the tutorial video and win rewards</view>
|
||||
<view class="video-box" @click="videoShow = true">
|
||||
<!-- <video :src="videoSrc" :poster="themeStore.theme.deposit.posterImg" class="p-video" /> -->
|
||||
<image :src="themeStore.theme.deposit.posterImg" mode="aspectFit" class="p-video" />
|
||||
<view class="btn-float flex-center">
|
||||
<theme-image src="@/static/pay_guide/play-fill.png" class="play-btn"
|
||||
mode="aspectFit"></theme-image>
|
||||
<view style="white-space: nowrap;">PLAY VIDEO</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<theme-image v-for="(_,index) in 6" :key="index" :src="`@/static/pay_guide/${index+1}.jpg`" class="w-full block" mode="widthFix"></theme-image>
|
||||
</template>
|
||||
</view>
|
||||
<view class="video-full" v-if="videoShow">
|
||||
<video :src="videoSrc" muted autoplay object-fit="contain" class="p-video" controls></video>
|
||||
<theme-image src="@/static/pay_guide/close-fill.png" class="close-btn" mode="aspectFit"
|
||||
@click="videoShow = false"></theme-image>
|
||||
</view>
|
||||
<empty-hold height="20"></empty-hold>
|
||||
</mobile-custom-layout>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.tab-box {
|
||||
height: 50px;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
background-color: #360002;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 5px;
|
||||
width: calc(100% - 40px);
|
||||
height: 2px;
|
||||
background-color: #631419;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
transition: all 0.3s;
|
||||
|
||||
.under-line {
|
||||
width: 30%;
|
||||
height: 2px;
|
||||
background-color: #EAD15D;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 24rpx;
|
||||
margin-top: 60px;
|
||||
|
||||
.banner {
|
||||
width: 702rpx;
|
||||
height: 261rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.swiper-area {
|
||||
margin-top: 20rpx;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
|
||||
.gallery {
|
||||
flex-wrap: nowrap;
|
||||
height: 452rpx;
|
||||
overflow-x: auto;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.gallery-img {
|
||||
width: 308rpx;
|
||||
height: 452rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-swiper {
|
||||
width: 100%;
|
||||
height: 452rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-img {
|
||||
width: 308rpx;
|
||||
height: 452rpx;
|
||||
margin-right: 36rpx;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.video-area {
|
||||
margin-top: 30rpx;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
|
||||
.video-box {
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 241rpx;
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.p-video {
|
||||
width: 100%;
|
||||
height: 221rpx;
|
||||
}
|
||||
|
||||
.btn-float {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
|
||||
.play-btn {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.block{
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.video-full{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
z-index: 1000;
|
||||
padding: 10px;
|
||||
.p-video{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.close-btn{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20rpx;
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -94,11 +94,12 @@
|
||||
</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">
|
||||
<view class="select-btn-container">
|
||||
<view class="select-btn ft12 flex-acenter flex-scenter" @click.stop="handleHowtouseClick"
|
||||
:style="{ color: themeStore.theme.text.highlight2, background: themeStore.theme.wallet.payBg1 }">
|
||||
<view class="howto flex-center">
|
||||
{{ $t('deposit.howtouse') }}
|
||||
<theme-image src="@/static/pay_guide/db-right.png" style="width: 24rpx;height: 24rpx;margin-left: 6rpx;"></theme-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -267,9 +268,12 @@ const handleDepositEventCheckClick = () => {
|
||||
}
|
||||
|
||||
const handleHowtouseClick = () => {
|
||||
let url = depositStore.onlinePaymentData.depositMethodSelectItem.isGuide
|
||||
if (!url) { return }
|
||||
openUrl(url)
|
||||
// let url = depositStore.onlinePaymentData.depositMethodSelectItem.isGuide
|
||||
// if (!url) { return }
|
||||
// openUrl(url)
|
||||
uni.navigateTo({
|
||||
url: '/pages/wallet/DepositGuide',
|
||||
})
|
||||
}
|
||||
|
||||
const handleConfirmClick = async () => {
|
||||
@ -391,7 +395,10 @@ const handleConfirmClick = async () => {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.howto{
|
||||
font-size: 26rpx;
|
||||
color: white;
|
||||
}
|
||||
.nice-icon {
|
||||
position: absolute;
|
||||
top: 0rpx;
|
||||
|
@ -176,7 +176,8 @@ export default {
|
||||
textColor: '#7A2500',
|
||||
activeBgColor: '#f37e1c',
|
||||
activeTextColor: '#ffffff',
|
||||
}
|
||||
},
|
||||
posterImg: `${imgSrc}/pay_guide/video_poster.png`,
|
||||
},
|
||||
promo: {
|
||||
tgCode: {
|
||||
|
Loading…
Reference in New Issue
Block a user