You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
554 lines
13 KiB
554 lines
13 KiB
<template>
|
|
<view>
|
|
<!-- tabs栏 -->
|
|
<view class=" mart10 marb20 alijus" v-if="showItem">
|
|
<view class="font16 fcor333 paddtop5 paddbotm5 margle20 marRight20"
|
|
v-for="(item,index) in listData" @click="switchid(index)"
|
|
:class="[showItem.platformType == item.platformType ? 'fcor089 borbtom fontwig6' : ' borb ']"
|
|
:key="index">
|
|
{{item.platformTypeName}}
|
|
</view>
|
|
</view>
|
|
<view class="width100 line1"></view>
|
|
|
|
|
|
<view class="form-gorup backcorfff font15" style="padding-bottom: 60px;" v-if="showItem">
|
|
|
|
<!-- 开通银联分期 -->
|
|
<view class="dis-flex pd-main bor-botm1 flex-sp">
|
|
<view class=" fontwig6 flex-s0">开通银联分期:
|
|
</view>
|
|
<switch disabled :checked="periodData.openUnionpay" @change="switch1Change" />
|
|
</view>
|
|
<!-- 银联贴息方式，可多选 -->
|
|
<view class=" pd-main bor-botm1 ">
|
|
<view class=" fontwig6 marb10 ">银联贴息方式(可多选):
|
|
</view>
|
|
<checkbox-group @change="checkBoxChange">
|
|
<view class="dis-flex flex-sp flex-wrap">
|
|
<label v-for="(item,index) in unionpayFeePaidList" class=" marb5">
|
|
<checkbox :value="item.id+''" :checked="item.isSelect" :disabled="!isShowMethodToUpdate" />{{item.name}}
|
|
</label>
|
|
</view>
|
|
</checkbox-group>
|
|
</view>
|
|
<!-- 银联分期费率 -->
|
|
<view class=" pd-main bor-botm1 ">
|
|
<view class=" fontwig6 marb10 ">银联分期费率(1类银行):<text class="fn">范围(0~20)</text>
|
|
</view>
|
|
<view class="dis-flex flex-center marb10" v-for="(item,index) in periodData.unionpayRate1" :key="index">
|
|
<view class="paddtright10">{{item.periodNum}}期</view>
|
|
<input type="number" v-model.trim="item.rate" :disabled="!isShowMethodToUpdate" placeholder-class="corf6 font15"
|
|
placeholder="请输入费率">
|
|
<!-- <view v-else class="corf6 font15 rate">{{item.rate}}</view> -->
|
|
</view>
|
|
</view>
|
|
<view class=" pd-main bor-botm1 ">
|
|
<view class=" fontwig6 marb10 ">银联分期费率(2类银行):<text class="fn">范围(0~20)</text>
|
|
</view>
|
|
<view class="dis-flex flex-center marb10" v-for="(item,index) in periodData.unionpayRate2" :key="index">
|
|
<view class=" paddtright10">{{item.periodNum}}期</view>
|
|
|
|
<input type="number" v-model.trim="item.rate" :disabled="!isShowMethodToUpdate" placeholder-class="corf6 font15"
|
|
placeholder="请输入费率">
|
|
<!-- <view v-else class="corf6 font15 rate">{{item.rate}}</view> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 协议图片 -->
|
|
<view class=" pd-main bor-botm1 ">
|
|
<view class="dis-flex">
|
|
<view class=" fontwig6 marb10 ">协议照片:</view>
|
|
<view class="flex-1">
|
|
<view class="dis-flex flex-center"><image class="iconw40 height40p marRight10" mode="aspectFill" v-for="(item,index) in imgExampleValue" :key="index" :src="imgUrl+item" @click="previewImage(index,imgExampleValue)"></image></view>
|
|
<view class="corf6 font13 fotct">(示例照片)</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="imageUploadContainer flex-1">
|
|
<view class="imageUploadList">
|
|
<template v-if="periodData.agreementPics!=''">
|
|
<view class="imageItem" v-for="(item,index) in imgValue" :key="index">
|
|
<image :src="imgUrl+item" mode="aspectFill" @click="previewImage(index,imgValue)"
|
|
:data-index="index"></image>
|
|
<view v-if="isShowMethodToUpdate" class="imageDel" @click="deleteImage(item)">x</view>
|
|
</view>
|
|
</template>
|
|
<view v-if="isShowMethodToUpdate" class="imageUpload" @click="upload">+</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="footer-btn" v-if="isShowMethodToUpdate" >
|
|
<button class="backcor89 fcorfff" @click="apply">保存</button>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getDictionaryByCodeType,
|
|
apply,
|
|
getMerPlatformPeriodDetail,
|
|
|
|
updateFeePaid,
|
|
} from '@/Utils/Api.js';
|
|
|
|
let app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
reqUrl: app.globalData.url, //请求地址
|
|
imgUrl: app.globalData.imgUrl, //图片访问地址
|
|
merNo: '', //商户号
|
|
platformPeriodIndex: 0,//平台类型下标
|
|
listData:[],
|
|
showItem:null,
|
|
|
|
periodData: {
|
|
merNo: '', //商户号
|
|
platformPeriodType: '', //平台类型 1：零零购
|
|
openUnionpay: true, //开通银联分期 true：是 false：否
|
|
unionpayFeePaid: '', // 银联贴息方式 ‘1,2,3’
|
|
unionpayRate1: [], //银联分期费率（1类银行）
|
|
unionpayRate2: [], //银联分期费率（2类银行）
|
|
agreementPics: '', // 协议照片（多张）
|
|
},
|
|
periodNumList:[],//分期数列表
|
|
|
|
|
|
unionpayFeePaidList: [ //支持多选
|
|
{
|
|
id: 1,
|
|
name: '商户贴息',
|
|
isSelect: false
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '用户贴息',
|
|
isSelect: false
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '商户用户各一半',
|
|
isSelect: false
|
|
},
|
|
],
|
|
imgValue: [], //协议照片
|
|
imgExampleValue: ["/merchant/62/1694595101306.jpeg", "/merchant/62/1694595101306.jpeg"], //协议示例照片
|
|
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.merNo = option.merNo;
|
|
this.periodData.merNo = option.merNo;
|
|
|
|
this.getDictionaryByCodeType(); //查询分期树
|
|
|
|
},
|
|
computed:{
|
|
/* 是否展示提供修改的按钮 */
|
|
isShowMethodToUpdate(){
|
|
if(this.showItem){
|
|
return !this.showItem.platformPeriod||(this.showItem.platformPeriod&&this.showItem.platformPeriod.status==3)
|
|
}else{
|
|
return false
|
|
}
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
/* 平台类型change切换 */
|
|
switchid(index) {
|
|
this.platformPeriodIndex = index;
|
|
this.showItem = this.listData[this.platformPeriodIndex];
|
|
this.periodData.platformPeriodType = this.showItem.platformType;
|
|
|
|
if(this.showItem.platformPeriod){
|
|
this.periodData.openUnionpay = this.showItem.platformPeriod.openUnionpay;
|
|
this.periodData.unionpayFeePaid = this.showItem.platformPeriod.unionpayFeePaid;
|
|
this.periodData.unionpayRate1 =this.handleUnionpayRate(this.showItem.unionpayRate1);
|
|
this.periodData.unionpayRate2 = this.handleUnionpayRate(this.showItem.unionpayRate2);
|
|
this.periodData.agreementPics = this.showItem.platformPeriod.agreementPics;
|
|
this.imgValue =this.periodData.agreementPics.split(',');
|
|
}else{
|
|
this.periodData.openUnionpay = true;
|
|
this.periodData.unionpayFeePaid = "";
|
|
this.periodData.unionpayRate1 = this.handleUnionpayRate(this.periodNumList);
|
|
this.periodData.unionpayRate2 =this.handleUnionpayRate(this.periodNumList);
|
|
this.periodData.agreementPics = "";
|
|
this.imgValue =[];
|
|
}
|
|
|
|
|
|
let arr = this.periodData.unionpayFeePaid.split(",");
|
|
this.unionpayFeePaidList.forEach(item => {
|
|
item.isSelect = false;
|
|
arr.forEach(item2 => {
|
|
if (item.id == item2) {
|
|
item.isSelect = true;
|
|
}
|
|
})
|
|
})
|
|
|
|
},
|
|
handleUnionpayRate(arr){
|
|
let result = arr.map((item)=>{
|
|
let rate = item.rate===''? '' : item.rate ;
|
|
return {"periodNum": item.periodNum,"rate":rate};
|
|
})
|
|
return result
|
|
},
|
|
/* 开通银联分期切换 */
|
|
switch1Change(e) {
|
|
this.periodData.openUnionpay = e.detail.value;
|
|
|
|
},
|
|
|
|
/* 贴息方式change */
|
|
checkBoxChange(e) {
|
|
let selectArr = e.detail.value;
|
|
this.periodData.unionpayFeePaid = selectArr.join(',');
|
|
},
|
|
/* 点击申请分期 */
|
|
apply() {
|
|
if (!this.isVertify()) return;
|
|
|
|
uni.showLoading({
|
|
title: '加载中',
|
|
mask: true
|
|
})
|
|
apply(this.periodData).then(res => {
|
|
uni.hideLoading();
|
|
if (res.return_code == '000000') {
|
|
uni.showToast({
|
|
title: res.return_data,
|
|
duration: 2000,
|
|
icon: 'none'
|
|
})
|
|
this.getMerPlatformPeriodDetail(false)
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
duration: 2000,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
isVertify() {
|
|
if (this.periodData.platformPeriodType === '') {
|
|
uni.showToast({
|
|
title: '请选择平台类型',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
}
|
|
if (this.periodData.unionpayFeePaid === '') {
|
|
uni.showToast({
|
|
title: '请选择银联贴息方式',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
}
|
|
|
|
var reg = /^(([0-9]|[1][0-9])([.][0-9]{1,2})|([0-9]|1[0-9]|20))$/;
|
|
|
|
let unionpayRate1Bool = this.periodData.unionpayRate1.every((item) => {
|
|
if (!reg.test(item.rate)) {
|
|
item.rate = ''
|
|
}
|
|
return reg.test(item.rate)
|
|
})
|
|
let unionpayRate2Bool = this.periodData.unionpayRate2.every((item) => {
|
|
|
|
if (!reg.test(item.rate)) {
|
|
item.rate = ''
|
|
}
|
|
|
|
return reg.test(item.rate)
|
|
})
|
|
if (!unionpayRate1Bool) {
|
|
uni.showToast({
|
|
title: '银联分期费率(1类银行)费率未填写完整',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
}
|
|
if (!unionpayRate2Bool) {
|
|
uni.showToast({
|
|
title: '银联分期费率(2类银行)费率未填写完整',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
}
|
|
|
|
if (this.imgValue.length == 0) {
|
|
uni.showToast({
|
|
title: '请上传协议照片',
|
|
icon: 'none'
|
|
})
|
|
return false
|
|
} else {
|
|
this.periodData.agreementPics = this.imgValue.join(",");
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
/* 查询分期详情 */
|
|
getMerPlatformPeriodDetail(bool=true) {
|
|
let params = {
|
|
merNo: this.merNo
|
|
}
|
|
if(bool){
|
|
uni.showLoading({
|
|
title: '加载中',
|
|
mask: true
|
|
})
|
|
}
|
|
|
|
|
|
getMerPlatformPeriodDetail(params).then(res => {
|
|
if(bool){
|
|
uni.hideLoading();
|
|
}
|
|
|
|
if (res.return_code == '000000') {
|
|
this.listData = res.return_data;
|
|
if(this.listData.length>0){
|
|
this.switchid(this.platformPeriodIndex);
|
|
}
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
duration: 2000,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
/* 查询分期数 */
|
|
getDictionaryByCodeType() {
|
|
let params = {
|
|
codeType: 'PERIOD_NUMBER'
|
|
}
|
|
getDictionaryByCodeType(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
res.return_data.sort((item1, item2) => {
|
|
return item1.codeValue - item2.codeValue
|
|
})
|
|
//分期列表
|
|
this.periodNumList = res.return_data.map(item=>{
|
|
return {"periodNum": item.codeValue,"rate": ""};
|
|
});
|
|
|
|
this.getMerPlatformPeriodDetail(); //查询分期详情
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: res.return_msg,
|
|
duration: 2000,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
//上传图片
|
|
upload() {
|
|
let that = this;
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['camera', 'album'],
|
|
success: function(res) {
|
|
const tempFilePaths = res.tempFilePaths;
|
|
that.uploadFile(tempFilePaths[0]);
|
|
},
|
|
error: function(e) {
|
|
console.log(e);
|
|
}
|
|
});
|
|
},
|
|
//上传
|
|
uploadFile(imgURL) {
|
|
const that = this;
|
|
uni.showLoading({
|
|
title: "加载中...",
|
|
mask: true,
|
|
})
|
|
uni.uploadFile({
|
|
url: that.reqUrl + '/fileUpload/uploadfile',
|
|
filePath: imgURL,
|
|
header: {
|
|
"Authorization": app.globalData.token
|
|
},
|
|
name: 'files',
|
|
success: function(uploadFileRes) {
|
|
uni.hideLoading()
|
|
that.getImgSignedUrl(JSON.parse(uploadFileRes.data).return_data[0]);
|
|
},
|
|
fail: function(err) {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: err,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
});
|
|
},
|
|
//查看临时图片路径
|
|
getImgSignedUrl(item1) {
|
|
this.imgValue.push(item1);
|
|
},
|
|
// 删除图片
|
|
deleteImage(data) {
|
|
let arr = this.imgValue.filter((item) => item != data);
|
|
this.imgValue = arr;
|
|
},
|
|
// 预览
|
|
previewImage(index,list) {
|
|
let arr = list.map(item=>{
|
|
return this.imgUrl+item
|
|
})
|
|
uni.previewImage({
|
|
current: index,
|
|
indicator: "number",
|
|
loop: "true",
|
|
urls:arr
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.borbtom {
|
|
border-bottom: 3px solid #089bf5;
|
|
}
|
|
|
|
.borb {
|
|
border-bottom: 3px solid transparent;
|
|
}
|
|
|
|
i {
|
|
border: solid #000000;
|
|
border-width: 0 2px 2px 0;
|
|
display: inline-block;
|
|
padding: 4px;
|
|
margin-left: 10px;
|
|
vertical-align: 3px;
|
|
}
|
|
|
|
.fn {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.down {
|
|
-webkit-transform: rotate(45deg);
|
|
}
|
|
|
|
/* 表单 */
|
|
.form-gorup {
|
|
padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
|
input,.rate {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
border-radius: 10px;
|
|
border: 1px solid #089bf5;
|
|
padding: 5px 5px;
|
|
width:50%;
|
|
}
|
|
|
|
}
|
|
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* 底部按钮 */
|
|
.footer-btn {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
button {
|
|
margin: 0 20px;
|
|
border-radius: 25px;
|
|
flex: 1;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
|
|
|
|
/* 上传图片 */
|
|
/* 图片 */
|
|
.imageUploadContainer {
|
|
padding: 10upx 5upx;
|
|
margin: 10upx 5upx;
|
|
}
|
|
|
|
|
|
.imageUploadList {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.imageItem,
|
|
.imageUpload {
|
|
width: 200upx;
|
|
height: 200upx;
|
|
margin: 30upx 15upx 30upx;
|
|
}
|
|
|
|
.imageDel {
|
|
position: relative;
|
|
left: 180upx;
|
|
bottom: 225upx;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
width: 36upx;
|
|
text-align: center;
|
|
line-height: 35upx;
|
|
border-radius: 17upx;
|
|
color: white;
|
|
font-size: 30upx;
|
|
padding-bottom: 2upx;
|
|
}
|
|
|
|
.imageItem image {
|
|
width: 200upx;
|
|
height: 200upx;
|
|
border-radius: 8upx;
|
|
}
|
|
|
|
.imageUpload {
|
|
line-height: 200upx;
|
|
text-align: center;
|
|
font-size: 150upx;
|
|
color: #D9D9D9;
|
|
border: 1px solid #D9D9D9;
|
|
border-radius: 8upx;
|
|
}
|
|
</style> |