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.
360 lines
13 KiB
360 lines
13 KiB
5 days ago
|
<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>
|