zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

自定义文件上传修改

pull/75/head
zq 4 days ago
parent
87d3fbf4df
commit
8fbd288d31
1 changed files with 120 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 183
      src/views/agent/payCertSetting.vue

183
src/views/agent/payCertSetting.vue
View File

@ -8,8 +8,12 @@
<div class="flex-wrap"> <div class="flex-wrap">
<div class="flex-left"> <div class="flex-left">
<div class="uploadwrap"> <div class="uploadwrap">
<label class="flex">上传 apiclient_cert.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label> <label class="flex">上传 apiclient_cert.pem 证书<img class="ml-4"
<el-upload class="flex mt12" accept=".jpg,.png" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :show-file-list="true"> src="@/assets/require.svg" /></label>
<el-upload class="flex mt12" accept=".jpg,.png" ref="upload"
action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
:on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
:show-file-list="true">
<el-button class="flex" slot="trigger" size="small" type="primary">选取文件</el-button> <el-button class="flex" slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload> </el-upload>
@ -32,11 +36,13 @@
<div class="beforeNotice"> <div class="beforeNotice">
<div class="flex justify-content-space-between"> <div class="flex justify-content-space-between">
<h3 class="flex gap8" style="margin: 0 0 0 0;">功能开关</h3> <h3 class="flex gap8" style="margin: 0 0 0 0;">功能开关</h3>
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 --> <!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 -->
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 --> <!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 -->
<!-- 传入的modelvalue 为数字 0 或者 1 --> <!-- 传入的modelvalue 为数字 0 或者 1 -->
<GuipSwitch :modelValue="payIsAutoRefund" :active-value="1" :inactive-value="0" @change="updatePayAutoRefund(payinfo)" activeText="开启" inactiveText="关闭"></GuipSwitch> <GuipSwitch :modelValue="payIsAutoRefund" :active-value="1" :inactive-value="0"
@change="updatePayAutoRefund(payinfo)" activeText="开启" inactiveText="关闭">
</GuipSwitch>
</div> </div>
<p class="ml-23 flex gray">开启后，遇到退单的情况，平台尽量在联系您并同意的情况下操作退款</p> <p class="ml-23 flex gray">开启后，遇到退单的情况，平台尽量在联系您并同意的情况下操作退款</p>
</div> </div>
@ -51,16 +57,20 @@
<el-tab-pane label="分账设置" name="profit_share_setting"> <el-tab-pane label="分账设置" name="profit_share_setting">
<div class="beforeNotice"> <div class="beforeNotice">
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> <h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a> <a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img
src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>
<p class="mt12 flex">1.开通分账功能：微信商户平台 > 产品中心 > 我的产品，支付扩展工具中开通分账产品。</p> <p class="mt12 flex">1.开通分账功能：微信商户平台 > 产品中心 > 我的产品，支付扩展工具中开通分账产品。</p>
<p class="mt10 flex">2.分账接收设置：登录商户平台 > 交易中心 > 分账接收设置 > 分账回退设置，开启分账回退。</p> <p class="mt10 flex">2.分账接收设置：登录商户平台 > 交易中心 > 分账接收设置 > 分账回退设置，开启分账回退。</p>
</div> </div>
<div class="semBidWrap"> <div class="semBidWrap">
<div class="baidu-wrap bidWrap"> <div class="baidu-wrap bidWrap">
<div class="bidwrap-item"> <div class="bidwrap-item">
<h3 class="flex">分账开关<GuipSwitch :modelValue="payinfo.profit_share_status" :active-value="1" :inactive-value="0" @change="updateProfitShareStatus(payinfo)"></GuipSwitch></h3> <h3 class="flex">分账开关<GuipSwitch :modelValue="payinfo.profit_share_status"
:active-value="1" :inactive-value="0"
@change="updateProfitShareStatus(payinfo)"></GuipSwitch>
</h3>
<div class="biditemMast mb12 flex-between"> <div class="biditemMast mb12 flex-between">
<div class="bidwrap-item-top flex"> <div class="bidwrap-item-top flex">
<img class="bid-item-img" src="@/assets/site/step_1.png" alt=""> <img class="bid-item-img" src="@/assets/site/step_1.png" alt="">
@ -76,7 +86,8 @@
</div> </div>
<div class="flex" v-else> <div class="flex" v-else>
<span :class="'notSet'">未设置</span> <span :class="'notSet'">未设置</span>
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" <GuipButton type="primary"
:btnstyle="{ width: '126px', height: '38px' }"
@click="showDialog('cert')">立即设置</GuipButton> @click="showDialog('cert')">立即设置</GuipButton>
</div> </div>
</div> </div>
@ -95,7 +106,8 @@
</div> </div>
<div class="flex" v-else> <div class="flex" v-else>
<span :class="'notSet'">未设置</span> <span :class="'notSet'">未设置</span>
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" <GuipButton type="primary"
:btnstyle="{ width: '126px', height: '38px' }"
@click="showDialog('apiv3')">立即设置</GuipButton> @click="showDialog('apiv3')">立即设置</GuipButton>
</div> </div>
</div> </div>
@ -114,7 +126,8 @@
</div> </div>
<div class="flex" v-else> <div class="flex" v-else>
<span :class="'notSet'">未设置</span> <span :class="'notSet'">未设置</span>
<GuipButton type="primary" :btnstyle="{ width: '126px', height: '38px' }" <GuipButton type="primary"
:btnstyle="{ width: '126px', height: '38px' }"
@click="showDialog('profit_share_receivers')">立即设置</GuipButton> @click="showDialog('profit_share_receivers')">立即设置</GuipButton>
</div> </div>
</div> </div>
@ -133,16 +146,27 @@
@cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange"> @cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange">
<div class="config-offline-wrap"> <div class="config-offline-wrap">
<el-form> <el-form>
<!-- accept=".jpg,.png" -->
<div class="uploadwrap"> <div class="uploadwrap">
<label class="flex upload-title">1. apiclient_cert.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label> <label class="flex upload-title">1. apiclient_cert.pem 证书<img class="ml-4"
<el-upload name="apiclient_cert" headers="uploadHeaders" data="{'payid':this.payid}" class="mt12" accept=".jpg,.png" ref="upload" action="/agentnew/upload_pay_cert" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :show-file-list="true" :limit="1"> src="@/assets/require.svg" /></label>
<GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{width:'118px'}"><i class="bgImg"></i>选择文件</GuipButton> <el-upload class="upload-demo" :on-change="handleAvatarChange" action="#" :multiple="false"
:limit="Number(1)" ref="avatorUpload"
:auto-upload="false">
<GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{ width: '118px' }">
<i class="bgImg"></i>选择文件</GuipButton>
</el-upload> </el-upload>
</div> </div>
<div class="uploadwrap mt-18"> <div class="uploadwrap mt-18">
<label class="flex upload-title">2. apiclient_key.pem 证书<img class="ml-4" src="@/assets/require.svg" /></label> <label class="flex upload-title">2. apiclient_key.pem 证书<img class="ml-4"
<el-upload name="apiclient_key" headers="uploadHeaders" data="{'payid':this.payid}" class="mt12" accept=".jpg,.png" ref="upload" action="/agentnew/upload_pay_cert" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :show-file-list="true" :limit="1"> src="@/assets/require.svg" /></label>
<GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{width:'118px'}"><i class="bgImg"></i>选择文件</GuipButton> <el-upload class="upload-demo" :on-change="handleAvatarChange1" action="#" :multiple="false"
:limit="Number(1)" ref="avatorUpload"
:auto-upload="false">
<GuipButton class="upload-button" slot="trigger" type="ignore" :btnstyle="{ width: '118px' }">
<i class="bgImg"></i>选择文件</GuipButton>
</el-upload> </el-upload>
</div> </div>
</el-form> </el-form>
@ -160,21 +184,28 @@
</div> </div>
</GuipDialog> </GuipDialog>
<GuipDialog type="normal" :dialogVisible="dialogVisibleProfitShare" title="分账接收方" :show-close-button="false" <GuipDialog type="normal" :dialogVisible="dialogVisibleProfitShare" title="分账接收方" :show-close-button="false"
:show-cancel-button="true" cancelText="取消" confirmText="确定" @confirm="saveProfitShareReceivers(profitShareInfo)" :show-cancel-button="true" cancelText="取消" confirmText="确定"
@cancel="handleCancelConfig" @dialogVisibleChange="dialogVisibleChange"> @confirm="saveProfitShareReceivers(profitShareInfo)" @cancel="handleCancelConfig"
@dialogVisibleChange="dialogVisibleChange">
<div class="config-offline-wrap"> <div class="config-offline-wrap">
<el-form> <el-form>
<p class="flex mb-24">接收方比例：30%（当前仅支持给一个商户分账，最大30%） </p> <p class="flex mb-24">接收方比例：30%（当前仅支持给一个商户分账，最大30%） </p>
<GuipInput ref="GuipInput" column="column" required label="1.接收方名称" desc="商户全称，小微商户或个体户，填开户人姓名" v-model="profitShareInfo.receiver_name" placeholder="请输入分账接收方名称" /> <GuipInput ref="GuipInput" column="column" required label="1.接收方名称" desc="商户全称，小微商户或个体户，填开户人姓名"
<GuipInput ref="GuipInput" column="column" required label="2.接收方账号" desc="商户号" v-model="profitShareInfo.receiver_account" placeholder="请输入分账接收方账号" /> v-model="profitShareInfo.receiver_name" placeholder="请输入分账接收方名称" />
<GuipInput ref="GuipInput" column="column" required label="2.接收方账号" desc="商户号"
<GuipSelect v-model="profitShareInfo.relation_type" column="column" clearable label="3.接收方关系" :default-value="profitShareInfo.relation_type" :options="profitShareReceiversRelationType" valueKey="key" labelKey="val" placeholder="请选择分账接收方关系" @change="profitShareReceiversRelationTypeChange(profitShareInfo)" /> v-model="profitShareInfo.receiver_account" placeholder="请输入分账接收方账号" />
<GuipInput v-if="this.showCustomInput" ref="GuipInput" column="column" required label="自定义接收方关系" desc="最多10个字" v-model="profitShareInfo.custom_relation" placeholder="请输入自定义接收方关系" />
<GuipSelect v-model="profitShareInfo.relation_type" column="column" clearable label="3.接收方关系"
:default-value="profitShareInfo.relation_type" :options="profitShareReceiversRelationType"
valueKey="key" labelKey="val" placeholder="请选择分账接收方关系"
@change="profitShareReceiversRelationTypeChange(profitShareInfo)" />
<GuipInput v-if="this.showCustomInput" ref="GuipInput" column="column" required label="自定义接收方关系"
desc="最多10个字" v-model="profitShareInfo.custom_relation" placeholder="请输入自定义接收方关系" />
</el-form> </el-form>
</div> </div>
</GuipDialog> </GuipDialog>
</div> </div>
</template> </template>
<script> <script>
import store from '@/store'; import store from '@/store';
@ -221,7 +252,7 @@ export default {
payTypeJingdong: PAY_TYPE_JINGDONG, payTypeJingdong: PAY_TYPE_JINGDONG,
payTypePdd: PAY_TYPE_PDD, payTypePdd: PAY_TYPE_PDD,
confirmText: '保存', confirmText: '保存',
formData:new FormData(),
fileList: [], fileList: [],
profitShareTab: 'profit_share_setting', profitShareTab: 'profit_share_setting',
@ -235,9 +266,9 @@ export default {
profitShareReceiversRelationType: [], profitShareReceiversRelationType: [],
showCustomInput: false, showCustomInput: false,
uploadParams: { uploadParams: {
}, },
uploadHeaders: { uploadHeaders: {
'Auth': this.token 'Auth': this.token
}, },
} }
@ -255,13 +286,17 @@ export default {
this.getPayment(); this.getPayment();
this.getProfitShareInfo(); this.getProfitShareInfo();
this.payid = this.$route.query.payid; this.payid = this.$route.query.payid;
this.formData.set('payid', this.payid)
// for(let [key,value] of this.formData){
// console.log(key,value,'=====key');
// }
}, },
methods: { methods: {
getPayment() { getPayment() {
this.$http('POST', '/agentnew/ajax_get_payinfo', { this.$http('POST', '/agentnew/ajax_get_payinfo', {
payid: this.$route.query.payid, payid: this.$route.query.payid,
},{ }, {
headers:{ headers: {
'Auth': this.token 'Auth': this.token
} }
}).then(response => { }).then(response => {
@ -269,7 +304,7 @@ export default {
this.payinfo = response.data this.payinfo = response.data
this.payType = response.data.type this.payType = response.data.type
this.payIsAutoRefund = Number(response.data.is_auto_refund) this.payIsAutoRefund = Number(response.data.is_auto_refund)
this.paySvg = require('@/assets/pay/pay_'+this.payType+'.svg') this.paySvg = require('@/assets/pay/pay_' + this.payType + '.svg')
if (this.payType == PAY_TYPE_TAOBAO || this.payType == PAY_TYPE_JINGDONG) { if (this.payType == PAY_TYPE_TAOBAO || this.payType == PAY_TYPE_JINGDONG) {
this.confirmText = '去授权'; this.confirmText = '去授权';
} else if (this.payType == PAY_TYPE_PDD) { } else if (this.payType == PAY_TYPE_PDD) {
@ -283,8 +318,8 @@ export default {
getProfitShareInfo() { getProfitShareInfo() {
this.$http('POST', '/agentnew/ajax_get_profit_share_info', { this.$http('POST', '/agentnew/ajax_get_profit_share_info', {
pid: this.$route.query.payid, pid: this.$route.query.payid,
},{ }, {
headers:{ headers: {
'Auth': this.token 'Auth': this.token
} }
}).then(response => { }).then(response => {
@ -302,7 +337,7 @@ export default {
updatePayAutoRefund(row) { updatePayAutoRefund(row) {
this.$http('POST', '/agentnew/ajax_setting_auto_refund', { this.$http('POST', '/agentnew/ajax_setting_auto_refund', {
payid: this.$route.query.payid, payid: this.$route.query.payid,
status: row.is_auto_refund==1 ? 0 : 1, status: row.is_auto_refund == 1 ? 0 : 1,
}, { }, {
headers: { headers: {
'Auth': this.token 'Auth': this.token
@ -323,7 +358,7 @@ export default {
updateProfitShareStatus(row) { updateProfitShareStatus(row) {
this.$http('POST', '/agentnew/ajax_update_profit_share_status', { this.$http('POST', '/agentnew/ajax_update_profit_share_status', {
pid: this.$route.query.payid, pid: this.$route.query.payid,
profit_share_status: row.profit_share_status==1 ? 0 : 1, profit_share_status: row.profit_share_status == 1 ? 0 : 1,
}, { }, {
headers: { headers: {
'Auth': this.token 'Auth': this.token
@ -373,28 +408,29 @@ export default {
}, },
// 确认按钮事件 // 确认按钮事件
saveCert(row) { saveCert(row) {
console.log(row) this.formData.set('apiv3',row.apiv3)
this.$refs.upload.submit(); // for(let [key,value] of this.formData){
// this.$http('POST', '/agentnew/upload_pay_cert', { // console.log(key,value,'=====key');
// payid: this.$route.query.payid, // }
// apiv3: row.apiv3 this.$http('POST', '/agentnew/upload_pay_cert',
// }, { this.formData
// headers: { , {
// 'Auth': this.token headers: {
// } 'Auth': this.token,
// }).then(response => { 'Content-Type':'multipart/form-data'
// this.$nextTick(() => { }
// if (response.status) { }).then(response => {
// this.$Message.success(response.info); this.$nextTick(() => {
// } else { if (response.status) {
// this.$Message.error(response.info); this.$Message.success(response.info);
// } } else {
// }) this.$Message.error(response.info);
// }).catch(error => { }
// console.error(error, 'error') })
// }) }).catch(error => {
console.error(error, 'error')
// this.dialogVisibleApiv3 = false; })
this.dialogVisibleApiv3 = false;
}, },
saveApiv3(row) { saveApiv3(row) {
this.$http('POST', '/agentnew/ajax_save_apiv3', { this.$http('POST', '/agentnew/ajax_save_apiv3', {
@ -459,14 +495,24 @@ export default {
} else { } else {
this.showCustomInput = false; this.showCustomInput = false;
} }
},
handleAvatarChange(file, fileList) {
console.log(file, fileList)
let fileObj = file.raw
this.formData.set('apiclient_cert', fileObj)
},
handleAvatarChange1(file, fileList) {
console.log(file, fileList)
let fileObj = file.raw
this.formData.set('apiclient_key', fileObj)
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
a { a {
text-decoration: none; text-decoration: none;
color: #006AFF; color: #006AFF;
} }
.gray { .gray {
@ -476,6 +522,7 @@ a {
.mt-18 { .mt-18 {
margin-top: 18px; margin-top: 18px;
} }
.ml-23 { .ml-23 {
margin-left: 23px; margin-left: 23px;
} }
@ -483,6 +530,9 @@ a {
.justify-content-space-between { .justify-content-space-between {
justify-content: space-between; justify-content: space-between;
} }
.upload-demo{
margin-top: 12px;
}
.beforeNotice { .beforeNotice {
@ -565,7 +615,7 @@ a {
} }
.upload-wrap { .upload-wrap {
display: grid; display: grid;
justify-items: start; justify-items: start;
} }
@ -581,12 +631,15 @@ lable {
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #1E2226; color: #1E2226;
} }
.ml-4 { .ml-4 {
margin-left: 4px; margin-left: 4px;
} }
.mb-24 { .mb-24 {
margin-bottom: 24px; margin-bottom: 24px;
} }
.mb-30 { .mb-30 {
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -606,6 +659,7 @@ lable {
padding-bottom: 24rpx; padding-bottom: 24rpx;
} }
} }
.semBidWrap { .semBidWrap {
background: #FAFAFA; background: #FAFAFA;
padding: 18px 14px; padding: 18px 14px;
@ -674,6 +728,7 @@ lable {
} }
} }
.notSet, .notSet,
.yesSet { .yesSet {
margin-right: 12px; margin-right: 12px;
@ -752,18 +807,21 @@ lable {
background: #F2F3F5; background: #F2F3F5;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid #BABDC2; border: 1px solid #BABDC2;
.bgImg{
.bgImg {
width: 20px; width: 20px;
height: 16px; height: 16px;
margin-right: 6px; margin-right: 6px;
background-image: url(@/assets/site/uploadIcon.svg); background-image: url(@/assets/site/uploadIcon.svg);
} }
&:hover{
.bgImg{ &:hover {
.bgImg {
background-image: url(@/assets/site/uploadIcon_light.svg); background-image: url(@/assets/site/uploadIcon_light.svg);
} }
} }
} }
.upload-title { .upload-title {
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
@ -771,5 +829,4 @@ lable {
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: #23242B; color: #23242B;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save