|
<template>
|
<div class="getQRCode">
|
<!-- <x-header class="message-head" :title="courseName" :left-options="{backText:''}"></x-header> -->
|
<v-navbar :title="courseName" fixed ></v-navbar>
|
<!-- 视频窗口 v-if="playerOptions.sources[0].src"-->
|
<div style="margin-top: 40px" >
|
<video-player class="video-player vjs-custom-skin"
|
ref="videoPlayer"
|
:playsinline="true"
|
:options="playerOptions"
|
v-if="playerOptions.sources[0].src"
|
></video-player>
|
</div>
|
<!-- 选项卡 -->
|
<div class="table-active">
|
<van-tabs v-model="active" color="#896EDB" title-active-color="#896EDB" line-width="24px">
|
<van-tab title="操作教程">
|
<div class="course-text-c">
|
<div v-for="item in sum" class="course-text-c-img">
|
<img :src="`${imgUrl}${fileName}${item}.png`" alt="">
|
</div>
|
</div>
|
</van-tab>
|
<van-tab title="常见问题">
|
<van-collapse v-model="activeNames">
|
<div v-if="sum != 9">
|
<van-collapse-item v-for="(item, index) in questionList">
|
<div class="question-title" slot="title">{{item.title}}</div>
|
<div class="course-text" v-if="index == 1" slot="default">
|
<p class="course-text-item" v-for="it in specialQueList">{{it.course}}</p>
|
</div>
|
<div class="course-text" v-if="index == 11" slot="default">
|
<p class="course-text-item" v-for="el in specialQueList">{{el.course2}}</p>
|
</div>
|
<div class="course-text" v-if="index != 1 && index != 11" slot="default">
|
<p class="course-text-item">{{item.course}}</p>
|
</div>
|
</van-collapse-item>
|
</div>
|
<div v-if="sum == 9">
|
<van-collapse-item v-for="(item, index) in questionList">
|
<div class="question-title" slot="title">{{item.title}}</div>
|
<div class="course-text" v-if="index == 6" slot="default">
|
<p class="course-text-item" v-for="it in specialQueList">{{it.course}}</p>
|
</div>
|
<div class="course-text" v-if="index != 6" slot="default">
|
<p class="course-text-item">{{item.course}}</p>
|
</div>
|
</van-collapse-item>
|
</div>
|
</van-collapse>
|
</van-tab>
|
</van-tabs>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { XHeader } from 'vux';
|
import {dateFormat} from 'vux';
|
import Vue from 'vue';
|
import {
|
Tab,
|
Tabs,
|
Collapse,
|
CollapseItem
|
} from 'vant';
|
import { videoPlayer } from 'vue-video-player'
|
import 'video.js/dist/video-js.css'
|
import '../../../style/myVideo'
|
import { NavBar } from "vant";
|
|
Vue.use(NavBar);
|
Vue.use(Tab).use(Tabs);
|
Vue.use(Collapse).use(CollapseItem);
|
export default {
|
name: 'message',
|
components: {
|
XHeader,
|
videoPlayer
|
},
|
data() {
|
return {
|
sum: Number(this.$route.query.sum),
|
fileName: this.$route.query.fileName,
|
imgUrl: 'https://t.finlean.com/czjc/img/sib_merao/',
|
specialQueList:[], //特殊格式的常见问题
|
active: 2,
|
activeNames: ['1'],
|
questionList: [],
|
courseName: this.$route.query.courseName,
|
// 视频播放初始化
|
playerOptions : {
|
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
|
autoplay: false, //如果true,浏览器准备好时开始回放。
|
muted: false, // 默认情况下将会消除任何音频。
|
loop: false, // 导致视频一结束就重新开始。
|
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
|
language: 'zh-CN',
|
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
|
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
|
sources: [{
|
src: '', // 路径
|
type: 'video/mp4' // 类型
|
},
|
// {
|
// src: '//path/to/video.webm',
|
// type: 'video/webm'
|
// }
|
],
|
// poster: "../../static/images/test.jpg", //你的封面地址
|
width: document.documentElement.clientWidth,
|
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
|
controlBar: {
|
timeDivider: true,
|
durationDisplay: true,
|
remainingTimeDisplay: false,
|
fullscreenToggle: true //全屏按钮
|
}
|
}
|
}
|
},
|
created() {
|
this. bdCourseInit()
|
},
|
methods: {
|
bdCourseInit() {
|
this.$nextTick(() => {
|
// this.playerOptions.sources[0].src = "http://vjs.zencdn.net/v/oceans.mp4";
|
})
|
this.questionList = [
|
{
|
title: "名称不匹配（支付宝账号和商户名不一致",course: "检查支付宝账号与支付宝名称是否与法人信息一致，个体户的支付宝账号的支付宝名称应为法人姓名。企业支付宝名称应为营业执照名称。"
|
},{
|
title: "未能通过工商校验，请检查身份信息正确性",course: "1.确认收款账号和收款名称是不是对的（企业商户只能填写企业支付宝账号，个体工商户填写法人的） 2.确认营业执照编码和营业执照名称是否与营业执照一致。3.确认法人身份证号码是否是正确的 4.确认商户类型是否选择正确。 5.检查填写的法人身份证号和法人姓名是否与法人真实信息一致。"
|
},{
|
title: "支付宝账号不存在",course: "检查支付宝账号是否填写错误，重新填写资料提交。"
|
},{
|
title: "区码非法",course: "商户录入的省市区和支付宝那边的区码不一致，提供商户名称给技术处理。"
|
},{
|
title: "签约失败（存在风险）",course: "出现此提示的原因是该商户未能通过支付宝的风控系统核查，暂无解决办法。"
|
},{
|
title: "唯一键被占用",course: "商户已经用同一个营业执照注册过账号，不需要重新注册。上报代理查询已通过账号切换到第一次注册的账号。"
|
},{
|
title: "交易结算异常、二级商户支付宝账号不存在",course: "https://docs.open.alipay.com/58/103544根据网址的教程使用（花呗分期收款支付宝账号）登录查询pid，将商户名称和Pid提交处理。"
|
},{
|
title: "ALIN39446 ALIN43812 ALIN43791 ALIN43798 ALIN39423 ALIN39425 ALI39448",course: "为了确保资金安全，系统会综合评估用户的使用场景，如果当下无法使用花呗支付，建议您更换其他付款方式，如果用户表示就一定要用花呗，可以建议用户更换商家尝试或者第二天再尝试使用花呗支付。"
|
},{
|
title: "花呗分期交易时的资金流是如何变动的",course: "创建并支付时，花呗分期账户一次性将订单全额结算至商户收款账户。如果商户贴息，花呗一次性将商户承担的手续费全部从商户收费账户扣除。用户每期还款时，资金（本金+用户承担手续费）由用户账户结算至花呗账户。"
|
},{
|
title: "花呗分期退手续费遵循什么原则",course: "商户承担手续费，自交易发生后15天内发生退款，花呗全额退手续费，15天后不退手续费。 用户已经支付的手续费一概不退，未支付的手续费，如果已经出了账单则不能退，未出账单的，根据退款金额按比例减免。。"
|
},{
|
title: "报错“花呗分期暂不可用，你可以使用其他付款方式继续支付或稍后重试” 怎么办",course: "导致该报错的原因可能是：用户没有花呗额度；用户花呗额度不足；该笔交易被判定为高风险交易。用户此时可以选择其它付款方式唤起支付宝收银台继续支付。"
|
},{
|
title: "花呗分期如何还款？",course: "花呗分期的账单与花呗账单在一起，每个月出账日计算当月应还金额，用户需在当月还款日之前将应还金额还清；还款方式支持系统自动扣款与用户主动还款两种：系统自动扣款：在还款日当天，系统发起自动扣款，会从用户余额、支付宝绑定借记卡、余额宝依次进行扣款，请保证支付宝金额充足；用户主动还款：用户可以登录支付宝-蚂蚁花呗，进行账单主动还款。"
|
}
|
]
|
this.specialQueList = [
|
{
|
course:'1.确认收款账号和收款名称是不是对的（企业商户只能填写企业支付宝账号，个体工商户填写法人的）',
|
},
|
{
|
course:'2.确认营业执照编码和营业执照名称是否与营业执照一致。'
|
},
|
{
|
course:'3.确认法人身份证号码是否是正确的。'
|
},
|
{
|
course:'4.确认商户类型是否选择正确。'
|
},
|
{
|
course:'5.检查填写的法人身份证号和法人姓名是否与法人真实信息一致。'
|
},
|
{
|
course2:'花呗分期的账单与花呗账单在一起，每个月出账日计算当月应还金额，用户需在当月还款日之前将应还金额还清；'
|
},
|
{
|
course2:'还款方式支持系统自动扣款与用户主动还款两种'
|
},
|
{
|
course2:'系统自动扣款：在还款日当天，系统发起自动扣款，会从用户余额、支付宝绑定借记卡、余额宝依次进行扣款，请保证支付宝金额充足；'
|
},
|
{
|
course2:'用户主动还款：用户可以登录支付宝-蚂蚁花呗，进行账单主动还款。'
|
},
|
]
|
if(this.sum == 9) {
|
this.questionList = [
|
{
|
title: '资方审核需要多长时间？',
|
course: '30秒左右；',
|
},
|
{
|
title: '用户办单过程中资料填写错误或合约选择错误能否重新办单？',
|
course: '在商户上传合约凭证及合约手机号之前，用户可重新扫码办理订单，之前的订单系统会自动取消；',
|
},
|
{
|
title: '若用户想要退货，是否有条件限制？',
|
course: '只要用户在放款成功7个自然日之前与商户协商达成一致，商户可在商户后台发起退货申请，发起后需当天把结算款结算至资方指定银行账户，资方确认收到结算款后受理退货；若商户当天未把结算款结算至资方指定银行账户，资方会拒绝退货申请；',
|
},
|
{
|
title: '用户办单完成后后续如何还款？',
|
course: '用户每月20号以前需根据合约资费充值话费，若用户当月未充值话费，资方会从每月27日开始向用户银行卡代扣当月应还本金及利息；',
|
},
|
{
|
title: '用户不还款是否会影响征信？',
|
course: '若用户当月未缴话费，资方会从当月27号开始对用户银行卡进行代扣，若连续5个工作日均代扣失败，资方会上报人行征信；',
|
},
|
{
|
title: '智享花对用户年龄是否有限制？',
|
course: '需要用户年龄在 22-55 岁之间；',
|
},
|
|
]
|
this.specialQueList = [
|
{
|
course:'1. 每个用户在花呗有自己的额度，只能在可用额度内办单，智享花是针对用户所选择合约、商品及个人情况综合评估判断能否办单；',
|
},
|
|
]
|
}
|
},
|
//返回上一级按钮
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.vjs-big-play-button{
|
// position: absolute;
|
top: 35% !important;
|
left: 35% !important;
|
}
|
.getQRCode{
|
background: #F5F5F7;
|
width: 96%;
|
padding: 0 2%;
|
height: 100%;
|
}
|
.course-text{
|
color: #999999;
|
font-size: 12px;
|
line-height: 18px;
|
background-color: #fff;
|
// padding: 19px 15px 22px 12px;
|
}
|
.course-text-c{
|
// color: #666666;
|
// font-size: 12px;
|
// line-height: 18px;
|
// background-color: #fff;
|
// padding: 19px 15px 22px 12px;
|
&-img{
|
width: 100%;
|
img{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
/deep/.van-collapse-item__content{
|
border-bottom: 1px solid #EEEEEE;
|
}
|
.message-head{
|
position: relative;
|
}
|
.table-active{
|
overflow: hidden;
|
margin-top: 40px;
|
}
|
.van-collapse-item{
|
margin: 0;
|
}
|
.question-title{
|
font-size: 12px;
|
color: #333;
|
}
|
/deep/.question-title{
|
font-weight: normal;
|
}
|
/deep/.van-collapse-item{
|
border-bottom: 1px solid #EEEEEE;
|
}
|
.course-text-item{
|
line-height: 25px;
|
}
|
</style>
|
