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>
|