520 lines
15 KiB
Vue
520 lines
15 KiB
Vue
<template>
|
|
<view class="read-page">
|
|
<!-- 本页面为只读信息页面 -->
|
|
<!-- 双重for循环 -->
|
|
<view class="box" :class="{ fold: isFold }" ref="boxRef">
|
|
<view v-for="(item, index) in applyInfoList" :key="index" class="list">
|
|
<view v-for="(val, valIndex) in item" :key="valIndex">
|
|
<!-- 只有标题 -->
|
|
<view v-if="val.title" class="title">{{ val.title }}</view>
|
|
|
|
<!-- 文字回显 -->
|
|
<view v-if="val.value" class="item-text">
|
|
<text class="grey">{{ val.text }}</text>
|
|
<view style="white-space: pre-wrap; word-wrap: break-word">{{
|
|
val.value
|
|
}}</view>
|
|
</view>
|
|
|
|
<!-- 图片回显 -->
|
|
<view v-if="val.src" class="item-img">
|
|
<text class="grey">{{ val.text }}</text>
|
|
<image
|
|
:src="val.src"
|
|
mode="aspectFit"
|
|
@click="openBackImg(val.src)"
|
|
></image>
|
|
</view>
|
|
|
|
<!-- 支付通站点回显 -->
|
|
<template v-if="val.type == 'siteInfos'">
|
|
<view v-for="(siteTtem, siteIndex) in val.typevalue" :key="siteIndex">
|
|
<view class="item-img"
|
|
><text class="grey">站点类型</text>
|
|
<text> {{ siteTypeHandle(siteTtem.siteType) }}</text></view
|
|
>
|
|
<view class="item-img"
|
|
><text class="grey">站点地址</text>
|
|
<text> {{ siteTtem.siteUrl }}</text></view
|
|
>
|
|
<view class="item-img"
|
|
><text class="grey">站点名称</text>
|
|
<text> {{ siteTtem.siteName }}</text></view
|
|
>
|
|
<view class="item-img"
|
|
><text class="grey">站点账号</text>
|
|
<text> {{ siteTtem.account }}</text></view
|
|
>
|
|
<view class="item-img"
|
|
><text class="grey">站点密码</text>
|
|
<text> {{ siteTtem.password }}</text></view
|
|
>
|
|
</view>
|
|
</template>
|
|
|
|
<!-- 受益人卡片 -->
|
|
<view v-if="val == 'owner' && val[0].idcard1Img" class="title"
|
|
>受益人信息</view
|
|
>
|
|
<view v-if="Array.isArray(val) && val[0].idcard1Img">
|
|
<view v-for="(ownerItem, ownerIndex) in val" :key="ownerIndex">
|
|
<view class="item-img margin-b-20">
|
|
<text class="grey">受益人身份证人像面照</text>
|
|
<image
|
|
:src="ownerItem.idcard1Img"
|
|
mode="aspectFit"
|
|
@click="openBackImg(ownerItem.idcard1Img)"
|
|
/>
|
|
</view>
|
|
<view class="item-img margin-b-20">
|
|
<text class="grey">受益人身份证国徽面照</text>
|
|
<image
|
|
:src="ownerItem.idcard2Img"
|
|
mode="aspectFit"
|
|
@click="openBackImg(ownerItem.idcard2Img)"
|
|
/>
|
|
</view>
|
|
<view class="item-img margin-b-20">
|
|
<text class="grey">受益人身份证姓名</text>
|
|
<text>{{ ownerItem.idcardName }}</text>
|
|
</view>
|
|
<view class="item-img margin-b-20">
|
|
<text class="grey">受益人身份证号</text>
|
|
<text>{{ ownerItem.idcardNo }}</text>
|
|
</view>
|
|
<view class="item-img margin-b-20">
|
|
<text class="grey">受益人身份证起始有效期</text>
|
|
<text>{{ ownerItem.idcardEffectBegin }}</text>
|
|
</view>
|
|
<view class="item-img margin-b-20">
|
|
<text class="grey">受益人身份证结束有效期</text>
|
|
<text>{{ ownerItem.idcardEffectEnd }}</text>
|
|
</view>
|
|
<view class="item-img margin-b-20">
|
|
<text class="grey">受益人身份证居住地址</text>
|
|
<text>{{ ownerItem.idcardAddress }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 只有标题 -->
|
|
<view v-if="val == 'fee'" class="title">费率信息</view>
|
|
<!-- 费率回显 -->
|
|
<view v-if="Array.isArray(val) && val[0].wayCode">
|
|
<view
|
|
v-for="(feeItem, index) in val"
|
|
:key="index"
|
|
class="margin-30"
|
|
>
|
|
<view class="name grey">{{ feeItem.wayCode }}</view>
|
|
<view v-if="feeItem.feeType == 'SINGLE'" class="item-text">
|
|
<text class="grey">单笔费率:</text>
|
|
<text>{{ (feeItem.feeRate * 100).toFixed(2) }} %</text>
|
|
</view>
|
|
|
|
<view v-if="feeItem.feeType == 'LEVEL'">
|
|
<!-- 银联模式的阶梯费率 -->
|
|
<template v-if="feeItem.creditCardPaywayFee">
|
|
<view
|
|
>借记卡（储蓄卡）: [ 保底费用：{{
|
|
feeItem.minFee / 100
|
|
}}
|
|
元, 封顶费用：{{ feeItem.maxFee / 100 }} 元 ]</view
|
|
>
|
|
<template
|
|
v-for="(levelItem, i) in feeItem.levelList"
|
|
:key="i"
|
|
>
|
|
<view style="margin: 10rpx 0"></view>
|
|
{{ levelItem.minFee }} 元 ~ {{ levelItem.maxFee }}元，
|
|
费率： {{ (levelItem.feeRate * 100).toFixed(2) }}%
|
|
</template>
|
|
|
|
<view style="margin-top: 20rpx"
|
|
>贷记卡（信用卡）: [ 保底费用：{{
|
|
feeItem.creditCardPaywayFee.minFee / 100
|
|
}}
|
|
元, 封顶费用：{{
|
|
feeItem.creditCardPaywayFee.maxFee / 100
|
|
}}
|
|
元 ]</view
|
|
>
|
|
<template
|
|
v-for="(levelItem, i) in feeItem.creditCardPaywayFee
|
|
.levelList"
|
|
:key="i"
|
|
>
|
|
<view style="margin: 10rpx 0"></view>
|
|
{{ levelItem.minFee }} 元 ~ {{ levelItem.maxFee }}元，
|
|
费率： {{ (levelItem.feeRate * 100).toFixed(2) }}%
|
|
</template>
|
|
</template>
|
|
|
|
<!-- 普通模式的阶梯费率 -->
|
|
<template v-else>
|
|
阶梯费率: [ 保底费用：{{ feeItem.minFee / 100 }} 元,
|
|
封顶费用：{{ feeItem.maxFee / 100 }} 元 ]
|
|
<template
|
|
v-for="(levelItem, i) in feeItem.levelList"
|
|
:key="i"
|
|
>
|
|
<view style="margin: 10rpx 0"></view>
|
|
{{ levelItem.minFee }} 元 ~ {{ levelItem.maxFee }}元，
|
|
费率： {{ (levelItem.feeRate * 100).toFixed(2) }}%
|
|
</template>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- POS信息回显 -->
|
|
<template v-if="val.type == 'posInfo'">
|
|
<view v-for="(posItem, posIndex) in val.typevalue" :key="posIndex">
|
|
<view class="item-img margin-b-20"
|
|
><text class="grey">pos安装地址</text>
|
|
<text> {{ posItem.areaText }}</text></view
|
|
>
|
|
<view class="item-img margin-b-20"
|
|
><text class="grey">具体位置</text>
|
|
<text> {{ posItem.terminalDetailAddress }}</text></view
|
|
>
|
|
<view class="item-img margin-b-20"
|
|
><text class="grey">小票名称</text>
|
|
<text> {{ posItem.ticketName }}</text></view
|
|
>
|
|
<view class="item-img margin-b-20">
|
|
<text class="grey">终端数量</text>
|
|
<text> {{ posItem.terminalCount }}</text>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 挑高用 -->
|
|
<view v-if="!isFold" style="height: 70rpx"></view>
|
|
<!-- 上下拉 -->
|
|
<view class="btn-box">
|
|
<!-- <view v-if="isFold" class="btn-back"></view> -->
|
|
<view v-if="false" class="btn-back"></view>
|
|
<view class="btn" @click="changeHeight">
|
|
{{ isFold ? "查看全部" : "收起" }}
|
|
<image
|
|
v-if="isFold"
|
|
src="../../static/img/jt-btm.svg"
|
|
style="transform: rotate(180deg)"
|
|
mode=""
|
|
></image>
|
|
<image
|
|
v-if="!isFold"
|
|
src="../../static/img/jt-btm.svg"
|
|
mode=""
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 支付宝待签约二维码 -->
|
|
<view
|
|
class="box wx-open"
|
|
v-if="channelInfo.state == 5 && channelInfo.applyName == 'alipay'"
|
|
>
|
|
<view class="down-img">
|
|
<image :src="vdata.contractImg" mode="aspectFit"></image>
|
|
<view style="margin-top: 30rpx"
|
|
>请使用支付宝扫描二维码，根据页面指引完成签约</view
|
|
>
|
|
<view class="down" @click="down(vdata.contractImg)">保存至相册</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 微信待签约二维码 -->
|
|
<view
|
|
class="box wx-open"
|
|
v-if="channelInfo.state == 5 && channelInfo.applyName == 'wxpay'"
|
|
>
|
|
<view class="down-img">
|
|
<image :src="channelInfo.img" mode="aspectFit"></image>
|
|
<view style="margin-top: 30rpx"
|
|
>请超级管理员使用微信扫描二维码，根据页面指引完成签约</view
|
|
>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 收付通待签约二维码 -->
|
|
<view
|
|
class="box wx-open"
|
|
v-if="channelInfo.state == 5 && channelInfo.applyName == 'sftpay'"
|
|
>
|
|
<view class="down-img">
|
|
<image :src="vdata.contractImg" mode="aspectFit"></image>
|
|
<view style="margin-top: 30rpx"
|
|
>请超级管理员使用微信扫描二维码，根据页面指引完成签约</view
|
|
>
|
|
<view class="down" @click="down(vdata.contractImg)">保存至相册</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 图片预览（手写非原生） -->
|
|
<enlarge
|
|
v-if="isPreview"
|
|
:imgs="imgBackUrl"
|
|
@enlargeClose="enlargeClose"
|
|
:changeIsShow="false"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import qrcode from "@/util/qrcode.js";
|
|
import { ref, onMounted, reactive, inject } from "vue";
|
|
import {
|
|
$elecContractGenerate,
|
|
$elecContractSign,
|
|
$fuiouUpload,
|
|
} from "@/http/apiManager.js";
|
|
import { saveHeadImgFile } from "@/util/saveImg.js"; // 用于base64图片下载
|
|
import enlarge from "@/components/JeepayUpLoad/enlarge.vue"; // 图片预览
|
|
import useBackPress from "@/hooks/useBackPress.js"; // 返回阻断函数
|
|
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
|
|
import echo from "./dataEcho/dataEcho";
|
|
|
|
const channelInfo = inject("channelInfo");
|
|
|
|
const vdata = reactive({
|
|
contractImg: "", // 签约图片
|
|
});
|
|
|
|
let applyInfoList = ref([]); // 信息列表
|
|
|
|
// 高度切换
|
|
let isFold = ref(true);
|
|
const changeHeight = () => {
|
|
isFold.value = !isFold.value;
|
|
};
|
|
|
|
let isPreview = ref(false); // 图片预览是否展示
|
|
let imgBackUrl = ref(""); // 图片预览大图
|
|
const openBackImg = (url) => {
|
|
isPreview.value = true;
|
|
imgBackUrl.value = url;
|
|
// #ifdef H5 || APP-PLUS
|
|
active();
|
|
// #endif
|
|
};
|
|
// 关闭图片预览
|
|
const enlargeClose = () => {
|
|
isPreview.value = false;
|
|
// #ifdef H5 || APP-PLUS
|
|
inactive();
|
|
// #endif
|
|
};
|
|
const { active, inactive } = useBackPress(enlargeClose); // onBackPress 阻断返回
|
|
|
|
// 在这里处理不同进件渠道的签约
|
|
onMounted(() => {
|
|
if (channelInfo.applyName == "alipay") {
|
|
vdata.contractImg = drawQRcode(channelInfo.img); // 生成支付宝签约图片
|
|
}
|
|
});
|
|
// 保存待签约图片
|
|
const down = (url) => {
|
|
// #ifdef APP-PLUS
|
|
saveHeadImgFile(url, 80)
|
|
.then((success) => {
|
|
uni.showToast({ title: "保存成功", icon: "none" });
|
|
})
|
|
.catch((err) => {
|
|
uni.showToast({ title: "保存失败,请重试", icon: "none" });
|
|
});
|
|
// #endif
|
|
//#ifdef MP-WEIXIN
|
|
var aa = wx.getFileSystemManager();
|
|
aa.writeFile({
|
|
filePath: wx.env.USER_DATA_PATH + "/ali.png",
|
|
data: url.slice(22),
|
|
encoding: "base64",
|
|
success: (res) => {
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: wx.env.USER_DATA_PATH + "/ali.png",
|
|
success: function (res) {
|
|
wx.showToast({ title: "保存成功" });
|
|
},
|
|
});
|
|
},
|
|
});
|
|
//#endif
|
|
};
|
|
|
|
// 制作图片
|
|
const drawQRcode = (url) => {
|
|
return qrcode.drawImg(url, {
|
|
typeNumber: 4, // 密度
|
|
errorCorrectLevel: "Q", // 纠错等级
|
|
size: 175, // 白色边框
|
|
});
|
|
};
|
|
|
|
// 用于甄选数据
|
|
const getApplyInof = (val) => {
|
|
// vdata.applyDetailInfo = val;
|
|
applyInfoList.value = echo[channelInfo.code](val);
|
|
};
|
|
|
|
// 转换站点类型
|
|
const siteTypeHandle = (val) => {
|
|
let text;
|
|
switch (val) {
|
|
case "01":
|
|
text = "微信";
|
|
break;
|
|
case "02":
|
|
text = "APP";
|
|
break;
|
|
case "03":
|
|
text = "服务窗";
|
|
break;
|
|
case "04":
|
|
text = "公众号";
|
|
break;
|
|
case "05":
|
|
text = "其他";
|
|
break;
|
|
case "06":
|
|
text = "支付宝小程序";
|
|
break;
|
|
}
|
|
return text;
|
|
};
|
|
|
|
defineExpose({ getApplyInof });
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page-only {
|
|
box-sizing: border-box;
|
|
}
|
|
.box {
|
|
height: auto;
|
|
transition: 0.3s;
|
|
position: relative;
|
|
border-radius: 20rpx;
|
|
background: #fff;
|
|
padding: 0rpx 40rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.list {
|
|
& > view {
|
|
margin: 30rpx 0;
|
|
}
|
|
.title {
|
|
font-weight: 600;
|
|
color: #000;
|
|
}
|
|
.item-text {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.item-img {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 微信签约
|
|
.wx-open {
|
|
margin-top: 30rpx;
|
|
padding: 40rpx;
|
|
.first-title {
|
|
font-size: 28rpx;
|
|
color: #18191d;
|
|
font-weight: bold;
|
|
}
|
|
.tips {
|
|
font-size: 25rpx;
|
|
color: #7e7e80;
|
|
margin: 20rpx 0 40rpx;
|
|
}
|
|
.state {
|
|
margin-bottom: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.second-title {
|
|
font-size: 27rpx;
|
|
color: #000;
|
|
}
|
|
.wx-img {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
margin: 30rpx 0 20rpx;
|
|
}
|
|
}
|
|
|
|
// 灰色文字/
|
|
.grey {
|
|
white-space: nowrap;
|
|
color: #a3a3a5;
|
|
margin-right: 20rpx;
|
|
}
|
|
// 下拉按钮
|
|
.btn {
|
|
height: 100rpx;
|
|
color: #3981ff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
image {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
.btn-back {
|
|
background: linear-gradient(transparent, #f5f6fc);
|
|
height: 100rpx;
|
|
}
|
|
.fold {
|
|
height: 460rpx;
|
|
overflow: hidden;
|
|
}
|
|
.btn-box {
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
// 图片预览
|
|
.preview-img {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #000;
|
|
z-index: 25;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.margin-30 {
|
|
margin: 30rpx 0;
|
|
}
|
|
.margin-b-20 {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
</style>
|