7 changed files with 432 additions and 5 deletions
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 9.8 KiB |
@ -0,0 +1,360 @@ |
|||
<template> |
|||
<div class="main-content12"> |
|||
<!-- page content --> |
|||
<div class="site-setting-wrap min-flex-right"> |
|||
<div class="siteMessage flex-common"> |
|||
<h3>支付授权</h3> |
|||
<el-form> |
|||
<div class="flex-wrap"> |
|||
<div class="flex-left"> |
|||
<el-form> |
|||
<GuipFormItem column="column" class="mb24" label="1. 公司简称"> |
|||
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.short_name" prop="company_short_name" placeholder="6字以内"> |
|||
</GuipInput> |
|||
</GuipFormItem> |
|||
<GuipFormItem column="column" class="mb24" label="2. 支付商户号（mch_id）"> |
|||
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账户中心＞商户信息＞微信支付商户号</span> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.mch_id" prop="mch_id" placeholder="请输入商户号"> |
|||
</GuipInput> |
|||
</GuipFormItem> |
|||
<GuipFormItem column="column" class="mb24" label="3. 微信支付秘钥"> |
|||
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' target='_blank'>微信支付平台</a>＞账号中心＞账户设置＞API安全＞APIv2密钥；<p class="mt10">注意，支付密钥不能设置为纯数字</p></span> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.apiv2" prop="payinfo.apiv2" placeholder="请输入微信支付秘钥"> |
|||
</GuipInput> |
|||
</GuipFormItem> |
|||
<GuipFormItem column="column" class="mb24" label="4. 公众号APPID"> |
|||
<span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' target='_blank'>公众平台</a>＞设置与开发＞基本配置＞公众号开发信息＞开发者ID（APPID）</span> |
|||
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="payinfo.appid" prop="payinfo.appid" placeholder="请输入公众号APPID"> |
|||
</GuipInput> |
|||
</GuipFormItem> |
|||
</el-form> |
|||
</div> |
|||
<div class="flex-line"></div> |
|||
<div class="flex-right"> |
|||
<div class="preview"> |
|||
<div class="preview-title"> |
|||
<p>预览支付二维码</p> |
|||
</div> |
|||
<div class="preview-content"> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
<div class="register-btns"> |
|||
<GuipButton type="system" :btnstyle="{ width: '144px', height: '46px' }">取消</GuipButton> |
|||
<GuipButton type="primary" :btnstyle="{ width: '144px', height: '46px' }" @click="addPayment">保存</GuipButton> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
<script> |
|||
// import GuipInput from '@/components/GuipInput.vue'; |
|||
import store from '@/store'; |
|||
import { mapState } from 'vuex'; |
|||
import GuipFormItem from '@/components/GuipFormItem.vue'; |
|||
import GuipInput from '@/components/GuipInput.vue'; |
|||
// import GuipTextarea from '@/components/GuipTextarea.vue'; |
|||
// import GuipRadio from '@/components/GuipRadio.vue'; |
|||
// import CustomDropdown from '@/components/CustomDropdown.vue'; |
|||
import GuipButton from '@/components/GuipButton.vue'; |
|||
// import GroupFormBtns from '@/components/GroupFormBtns.vue'; |
|||
// import {setHighActive} from '@/utils/common'; |
|||
|
|||
// 收款方式 |
|||
const PAY_TYPE_TAOBAO = 0; // 淘宝 |
|||
const PAY_TYPE_WEIXIN = 2; // 微信 |
|||
const PAY_TYPE_ALIPAY = 3; // 支付宝 |
|||
const PAY_TYPE_JINGDONG = 4; // 京东 |
|||
const PAY_TYPE_PDD = 11; // 拼多多 |
|||
|
|||
export default { |
|||
// 站点设置 |
|||
name: '', |
|||
props: [''], |
|||
components: { |
|||
// GuipRadio, |
|||
GuipFormItem, |
|||
GuipInput, |
|||
// GuipTextarea, |
|||
// CustomDropdown, |
|||
GuipButton, |
|||
// GroupFormBtns |
|||
|
|||
}, |
|||
data() { |
|||
return { |
|||
// AUTH |
|||
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU', |
|||
payinfo: [], |
|||
payType: -1, |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|||
}, |
|||
created() { |
|||
store.commit('SET_CUSTOMIZE', true); |
|||
store.commit('SET_SLIDER_MENU', 'paySettingData'); |
|||
}, |
|||
mounted() { |
|||
store.commit('SET_PAGETITLE', '支付授权'); |
|||
|
|||
this.getPayment(); |
|||
}, |
|||
methods: { |
|||
getPayment() { |
|||
this.$http('POST', '/agentnew/ajax_get_payinfo', { |
|||
payid: this.$route.query.payid, |
|||
},{ |
|||
headers:{ |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
this.payinfo = response.data |
|||
this.payType = response.data.type |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
// 确认按钮事件 |
|||
addPayment() { |
|||
if (this.payType == PAY_TYPE_TAOBAO) { |
|||
window.open(this.taobaoAuthUrl, '_blank'); |
|||
|
|||
} else if (this.payType == PAY_TYPE_WEIXIN) { |
|||
this.$http('POST', '/agentnew/ajax_add_weixinpay', { |
|||
payid: this.$route.query.payid, |
|||
company_short_name: this.payinfo.short_name, |
|||
mch_id: this.payinfo.mch_id, |
|||
apiv2: this.payinfo.apiv2, |
|||
appid: this.payinfo.appid |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
this.getPayList(); |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
|
|||
} else if (this.payType == PAY_TYPE_ALIPAY) { |
|||
this.$http('POST', '/agentnew/ajax_add_alipay', { |
|||
company_short_name: this.company_short_name, |
|||
alipay_account: this.alipay_account, |
|||
is_pay_public: this.isPayPublic, |
|||
receive_payment_account: this.receive_payment_account, |
|||
receive_payment_name: this.receive_payment_name |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
if (this.isPayPublic == 1) { |
|||
this.$Message.success(response.info); |
|||
this.getPayList(); |
|||
this.receive_payment_account = '' |
|||
this.receive_payment_name = '' |
|||
} else { |
|||
window.open(response.data.authurl, '_blank'); |
|||
} |
|||
|
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} else if (this.payType == PAY_TYPE_PDD) { |
|||
this.$http('POST', '/agentnew/ajax_add_pddpay', { |
|||
shop_name: this.pdd_shop_name, |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
this.getPayList(); |
|||
this.pdd_shop_name = '' |
|||
|
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
} else if (this.payType == PAY_TYPE_JINGDONG) { |
|||
window.open(this.jdAuthUrl, '_blank'); |
|||
} |
|||
}, |
|||
// 操作下拉框 |
|||
toggleDrop(e){ |
|||
this.$refs.dropDomain.toggleDropdown(e) |
|||
}, |
|||
changeSelectIp(item) { |
|||
//内容真实绑定在 |
|||
this.selectedItem1 = { ...item }; |
|||
}, |
|||
// 获取站点信息 |
|||
getSiteInfo() { |
|||
const that = this |
|||
that.siteInfo = [] |
|||
this.$http('POST', '/agentnew/ajax_get_site_info', { |
|||
uid: this.$route.query.uid, |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
that.siteInfo = response.data |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
updateSiteInfo() { |
|||
this.$http('POST', '/agentnew/ajax_update_site_info', { |
|||
uid: this.$route.query.uid, |
|||
short_name: this.siteInfo.short_name, |
|||
company_name: this.siteInfo.company_name, |
|||
company_phone: this.siteInfo.phone_num, |
|||
}, { |
|||
headers: { |
|||
'Auth': this.token |
|||
} |
|||
}).then(response => { |
|||
this.$nextTick(() => { |
|||
if (response.status) { |
|||
this.$Message.success(response.info); |
|||
} else { |
|||
this.$Message.error(response.info); |
|||
} |
|||
}) |
|||
}).catch(error => { |
|||
console.error(error, 'error') |
|||
}) |
|||
}, |
|||
cancleUpdateSiteInfo() { |
|||
this.getSiteInfo(); |
|||
}, |
|||
changeNormalWeixin() { |
|||
|
|||
}, |
|||
changeSelectWeixin(item, flag) { |
|||
if (flag) { |
|||
this.select_placeholder_weixin = this.options_weixin_null.desc; |
|||
return |
|||
} |
|||
this.selectedItem = { ...item }; |
|||
console.log(this.selectedItem, 'this.selectedItem===='); |
|||
}, |
|||
// 销售渠道 |
|||
domain_radioChange(type) { |
|||
console.log(type, '--'); |
|||
}, |
|||
onSwitchChange(data) { |
|||
console.log(data, '---'); |
|||
}, |
|||
submitForm(form) { |
|||
console.log(this.$refs[form], '-----'); |
|||
this.$refs[form].validate((valid) => { |
|||
console.log(this[form], '======formxinxi'); |
|||
if (valid) { |
|||
alert('提交成功!'); |
|||
} else { |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
cancelClick() { |
|||
console.log('quxiao'); |
|||
}, |
|||
confirmClick(type) { |
|||
console.log(type, '确认'); |
|||
} |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
a { |
|||
text-decoration: none; |
|||
color: #006AFF; |
|||
} |
|||
.register-btns { |
|||
// height: 78px; |
|||
/* 自动布局 */ |
|||
// width: 344px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: center; |
|||
background: #FFFFFF; |
|||
padding: 16px 0px; |
|||
/* 蓝色阴影_常规 */ |
|||
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12); |
|||
|
|||
button:nth-child(1) { |
|||
margin-right: 56px; |
|||
} |
|||
} |
|||
.preview { |
|||
background: #FAFAFA; |
|||
border-radius: 4px; |
|||
width: 100%; |
|||
height: 100%; |
|||
text-align: left; |
|||
} |
|||
|
|||
.preview-title { |
|||
padding-top: 24px; |
|||
padding-left: 20px; |
|||
} |
|||
.preview-title p { |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #1E2226; |
|||
} |
|||
|
|||
.preview-content { |
|||
margin-top: 20px; |
|||
margin-left: 20px; |
|||
background: #FFFFFF; |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
|
|||
|
|||
.siteMessage { |
|||
border-radius: 4px; |
|||
transition: all .5s; |
|||
border: 1px solid transparent; |
|||
} |
|||
|
|||
.site-setting-wrap { |
|||
width: 100%; |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue