23 changed files with 1984 additions and 286 deletions
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
@ -0,0 +1,221 @@ |
|||||
|
<template> |
||||
|
<transition name="fade"> |
||||
|
<div v-if="visible" :class="['position-message', type, position]" :style="positionStyle"> |
||||
|
<img :src="defaultImages[type]" class="message-image" /> |
||||
|
<span>{{ currentMessage }}</span> |
||||
|
</div> |
||||
|
</transition> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: { |
||||
|
type: { |
||||
|
type: String, |
||||
|
default: 'info', |
||||
|
validator: val => ['info', 'success', 'error', 'warning'].includes(val) |
||||
|
}, |
||||
|
position: { |
||||
|
type: String, |
||||
|
default: 'top', |
||||
|
validator: val => ['top', 'bottom'].includes(val) |
||||
|
}, |
||||
|
message: String, |
||||
|
target: null, |
||||
|
offset: { |
||||
|
type: Number, |
||||
|
default: 10 |
||||
|
}, |
||||
|
duration: { |
||||
|
type: Number, |
||||
|
default: 2000 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
visible: false, |
||||
|
positionStyle: {}, |
||||
|
currentMessage: this.message, // 使用内部数据存储message |
||||
|
defaultImages: { |
||||
|
success: require('@/assets/message_Success.png'), |
||||
|
info: require('@/assets/message_Warning.png'), |
||||
|
warning: require('@/assets/message_Warning.png'), |
||||
|
error: require('@/assets/message_error.png') |
||||
|
}, |
||||
|
timer: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
// 监听props的message变化 |
||||
|
message(newVal) { |
||||
|
this.currentMessage = newVal; |
||||
|
this.$nextTick(() => { |
||||
|
this.calculatePosition(); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
iconClass() { |
||||
|
return { |
||||
|
info: 'el-icon-info', |
||||
|
success: 'el-icon-success', |
||||
|
error: 'el-icon-error' |
||||
|
}[this.type] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
show() { |
||||
|
this.visible = true |
||||
|
this.$nextTick(() => { |
||||
|
this.calculatePosition(); |
||||
|
|
||||
|
// 设置自动隐藏计时器（duration为0表示一直显示） |
||||
|
if (this.duration > 0) { |
||||
|
this.clearTimer(); |
||||
|
this.timer = setTimeout(() => { |
||||
|
this.hide(); |
||||
|
}, this.duration); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
return this; |
||||
|
}, |
||||
|
hide() { |
||||
|
this.visible = false; |
||||
|
this.clearTimer(); |
||||
|
return this; |
||||
|
}, |
||||
|
updateMessage(newMessage) { |
||||
|
this.currentMessage = newMessage; |
||||
|
this.$nextTick(() => { |
||||
|
this.calculatePosition(); |
||||
|
}); |
||||
|
return this; |
||||
|
}, |
||||
|
updateConfig(newConfig) { |
||||
|
// 更新多个配置项 |
||||
|
if (newConfig.message !== undefined) { |
||||
|
this.currentMessage = newConfig.message; |
||||
|
} |
||||
|
if (newConfig.type) { |
||||
|
this.$emit('update:type', newConfig.type); |
||||
|
} |
||||
|
if (newConfig.position) { |
||||
|
this.$emit('update:position', newConfig.position); |
||||
|
} |
||||
|
|
||||
|
this.$nextTick(() => { |
||||
|
this.calculatePosition(); |
||||
|
}); |
||||
|
return this; |
||||
|
}, |
||||
|
destroy() { |
||||
|
this.hide(); |
||||
|
// 等待动画完成后移除DOM |
||||
|
setTimeout(() => { |
||||
|
if (this.$el && this.$el.parentNode) { |
||||
|
this.$el.parentNode.removeChild(this.$el); |
||||
|
} |
||||
|
this.$destroy(); |
||||
|
}, 300); |
||||
|
}, |
||||
|
clearTimer() { |
||||
|
if (this.timer) { |
||||
|
clearTimeout(this.timer); |
||||
|
this.timer = null; |
||||
|
} |
||||
|
}, |
||||
|
calculatePosition() { |
||||
|
if (!this.$el || !this.visible) return; |
||||
|
|
||||
|
const targetEl = typeof this.target === 'string' |
||||
|
? document.querySelector(this.target) |
||||
|
: this.target?.$el || this.target; |
||||
|
|
||||
|
if (!targetEl?.getBoundingClientRect) { |
||||
|
console.error('Invalid target:', this.target); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const targetRect = targetEl.getBoundingClientRect(); |
||||
|
const messageWidth = this.$el.offsetWidth; |
||||
|
const viewportWidth = window.innerWidth; |
||||
|
const messageHeight = this.$el.offsetHeight; |
||||
|
const scrollY = window.scrollY || window.pageYOffset; |
||||
|
|
||||
|
// 默认居中位置 |
||||
|
let left = targetRect.left + targetRect.width / 2 - messageWidth / 2; |
||||
|
let top = 0; |
||||
|
|
||||
|
// 边界检测 |
||||
|
if (left < 5) { |
||||
|
left = 5; // 左侧留一点边距 |
||||
|
} else if (left + messageWidth > viewportWidth - 5) { |
||||
|
left = viewportWidth - messageWidth - 5; // 右侧留一点边距 |
||||
|
} |
||||
|
|
||||
|
if (this.position === 'top') { |
||||
|
top = targetRect.top + scrollY - this.offset - messageHeight; |
||||
|
// 如果上方空间不足，则显示在下方 |
||||
|
if (top < scrollY) { |
||||
|
top = targetRect.bottom + scrollY + this.offset; |
||||
|
} |
||||
|
} else { |
||||
|
top = targetRect.bottom + scrollY + this.offset; |
||||
|
// 如果下方超出可视区域，则显示在上方 |
||||
|
if (top + messageHeight > scrollY + window.innerHeight) { |
||||
|
top = targetRect.top + scrollY - this.offset - messageHeight; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.positionStyle = { |
||||
|
top: `${top}px`, |
||||
|
left: `${left}px`, |
||||
|
right: 'auto' |
||||
|
}; |
||||
|
}, |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
this.clearTimer(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.position-message { |
||||
|
position: absolute; |
||||
|
min-width: 100px; |
||||
|
padding: 14px 21px; |
||||
|
border-radius: 4px; |
||||
|
z-index: 9999; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background: #FFFFFF; |
||||
|
box-sizing: border-box; |
||||
|
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.16); |
||||
|
pointer-events: none; |
||||
|
|
||||
|
span { |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #626573; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
.message-image { |
||||
|
width: 18px; |
||||
|
height: 18px; |
||||
|
margin-right: 10px; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.fade-enter-active, |
||||
|
.fade-leave-active { |
||||
|
transition: opacity 0.3s, transform 0.3s; |
||||
|
} |
||||
|
|
||||
|
.fade-enter, |
||||
|
.fade-leave-to { |
||||
|
opacity: 0; |
||||
|
transform: translateY(-10px); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,456 @@ |
|||||
|
<template> |
||||
|
<div class="config-offline-wrap"> |
||||
|
<el-form> |
||||
|
<GuipDialog :dialogVisible="addPayDialogVisible" :title="addPayTitle" :show-close-button="false" |
||||
|
:show-cancel-button="showCancelButton" @confirm="addPayment" @cancel="handleCancel" |
||||
|
@close="handleClose" @dialogVisibleChange="dialogVisibleChange" :confirmText="addPayconfirmText" width="599px"> |
||||
|
<!-- 自定义内容 --> |
||||
|
<div> |
||||
|
<!-- 淘宝 --> |
||||
|
<div class="taobaopay" v-if="addPayType==payTypeTaoBao"> |
||||
|
<div class="beforeNotice"> |
||||
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> |
||||
|
<p class="mt12 flex"> |
||||
|
请确保使用要添加的淘宝主账号登录并授权 |
||||
|
</p> |
||||
|
<p class="mt10 flex"> |
||||
|
如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面 |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 微信 --> |
||||
|
<div class="weixinpay" v-if="addPayType==payTypeWeixin"> |
||||
|
<div class="beforeNotice"> |
||||
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> |
||||
|
<p class="mt12">1.申请公司微信支付。<a href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3" target="_blank"><img src="@/assets/site/form_qua_ic.svg" alt="">常见问题</a> </p> |
||||
|
<p class="mt12 flex"> |
||||
|
2.前往<a href="https://pay.weixin.qq.com/" |
||||
|
class="flex" target="_blank"> |
||||
|
<img src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a> |
||||
|
</p> |
||||
|
<p> 在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。</p> |
||||
|
</div> |
||||
|
<el-form> |
||||
|
<GuipFormItem column="column" class="mb24" label="1. 公司简称"> |
||||
|
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_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="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="apiv2" prop="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="appid" prop="appid" placeholder="请输入公众号APPID"> |
||||
|
</GuipInput> |
||||
|
</GuipFormItem> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 支付宝 --> |
||||
|
<div class="alipay" v-if="addPayType==payTypeAlipay"> |
||||
|
<el-tabs v-model="isPayPublic" @tab-click="handleClick"> |
||||
|
<!-- <el-tab-pane label="我有公司，使用本公司支付宝" name="0"> --> |
||||
|
<el-form> |
||||
|
<GuipFormItem column="column" class="mb24" label="1. 公司简称"> |
||||
|
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name" prop="company_short_name" placeholder="6字以内"></GuipInput> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="2. 公司支付宝账号"> |
||||
|
<span class="desc flex gap12" slot="formRight">仅支持已签约 “当面付” 功能的公司支付宝 <a href='https://pay.weixin.qq.com/' class="guide" |
||||
|
target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a></span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="alipay_account" prop="mch_id" placeholder="请输入公司支付宝账号"></GuipInput> |
||||
|
</GuipFormItem> |
||||
|
</el-form> |
||||
|
<!-- </el-tab-pane> --> |
||||
|
<!-- <el-tab-pane label="我无公司，申请平台代收款" name="1" v-if="isExistSelfSupplys===false"> |
||||
|
<div class="beforeNotice"> |
||||
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 须知</h4> |
||||
|
<p class="mt12">使用平台“支付宝支付”，平台收取5%的服务费</p> |
||||
|
<p class="mt12 flex">使用平台“支付宝支付”，真实姓名必须和支付宝账号实名认证姓名统一</p> |
||||
|
</div> |
||||
|
<el-form> |
||||
|
<GuipFormItem column="column" class="mb24" label="1. 收款人姓名"> |
||||
|
<span class="desc" slot="formRight">请输入支付宝绑定的银行卡的持卡人姓名</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_name" prop="company_short_name" placeholder="6字以内"></GuipInput> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="2. 收款支付宝账号"> |
||||
|
<span class="desc" slot="formRight">请输入有效账号</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="receive_payment_account" prop="mch_id" placeholder="请输入有效收款支付宝账号"></GuipInput> |
||||
|
</GuipFormItem> |
||||
|
</el-form> |
||||
|
</el-tab-pane> --> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
<!-- 拼多多 --> |
||||
|
<div class="pddpay" v-if="addPayType==payTypePdd"> |
||||
|
<div class="beforeNotice"> |
||||
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> |
||||
|
<p class="mt12 flex">主账号登录并授权。<a :href="pddAuthUrl" class="flex" target="_blank"><img src="@/assets/site/form_linkActive.svg" alt="">去授权</a></p> |
||||
|
<p class="mt12 flex gray">如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面。</p> |
||||
|
<p class="mt5 flex gray">授权成功后会进入＂快乐帮手＂烽火台，复制右上角名称填入下方保存。</p> |
||||
|
</div> |
||||
|
<el-form> |
||||
|
<GuipFormItem column="column" class="mb24" label="账号名称"> |
||||
|
<!-- <span class="desc" slot="formRight">账号名称</span> --> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="pdd_shop_name" prop="company_short_name" placeholder="请输入账号名称"></GuipInput> |
||||
|
</GuipFormItem> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</GuipDialog> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import GuipInput from '@/components/GuipInput.vue'; |
||||
|
import GuipFormItem from '@/components/GuipFormItem.vue'; |
||||
|
import GuipDialog from '@/components/GuipDialog.vue'; |
||||
|
|
||||
|
// 收款方式 |
||||
|
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: 'addPay', |
||||
|
props: { |
||||
|
// 收款方式 |
||||
|
payType: { |
||||
|
type: [String, Number], |
||||
|
default: '-1', |
||||
|
// validator: value => ['success', 'warning', 'error', 'info'].includes(value) |
||||
|
}, |
||||
|
// 可见性 |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
// 淘宝授权url |
||||
|
taobaoAuthUrl: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 拼多多授权url |
||||
|
pddAuthUrl: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 京东授权url |
||||
|
jdAuthUrl: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
// 是否存在自供货 存在自供货 则不支持支付宝代收款 |
||||
|
isExistSelfSupplys: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
}, |
||||
|
components: { |
||||
|
GuipInput, |
||||
|
GuipFormItem, |
||||
|
GuipDialog, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 收款方式 |
||||
|
payTypeTaoBao: PAY_TYPE_TAOBAO, |
||||
|
payTypeWeixin: PAY_TYPE_WEIXIN, |
||||
|
payTypeAlipay: PAY_TYPE_ALIPAY, |
||||
|
payTypeJingdong: PAY_TYPE_JINGDONG, |
||||
|
payTypePdd: PAY_TYPE_PDD, |
||||
|
|
||||
|
paytypeDesc: { |
||||
|
payTypeTaoBao: '淘宝/天猫店铺', |
||||
|
payTypeWeixin: '微信收款', |
||||
|
payTypeAlipay: '支付宝收款', |
||||
|
payTypeJingdong: '京东店铺', |
||||
|
payTypePdd: '拼多多店铺' |
||||
|
}, |
||||
|
|
||||
|
// 添加收款方式类型 |
||||
|
addPayType: -1, |
||||
|
|
||||
|
// 添加收款方式弹框 |
||||
|
addPayDialogVisible: false, |
||||
|
// 控制是否显示取消按钮 |
||||
|
showCancelButton: true, |
||||
|
// 控制是否显示关闭按钮 |
||||
|
showCloseButton: true, |
||||
|
// 添加收款方式弹框标题 |
||||
|
addPayTitle: '', |
||||
|
|
||||
|
// 添加收款方式确认按钮文本 |
||||
|
addPayconfirmText: '确定', |
||||
|
|
||||
|
// 公司简称 |
||||
|
company_short_name: '', |
||||
|
// 商户号 |
||||
|
mch_id: '', |
||||
|
// 微信支付秘钥 |
||||
|
apiv2: '', |
||||
|
// 公众号APPID |
||||
|
appid: '', |
||||
|
// 支付宝账号 |
||||
|
alipay_account: '', |
||||
|
// 代收款 收款账号 |
||||
|
receive_payment_account: '', |
||||
|
// 代收款 收款人姓名 |
||||
|
receive_payment_name: '', |
||||
|
// 是否是平台支付 0平台支付 1自营支付 |
||||
|
isPayPublic: '0', |
||||
|
// 拼多多店铺名称 |
||||
|
pdd_shop_name: '', |
||||
|
|
||||
|
// localSiteInfo: { ...this.siteInfo } |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// ...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
||||
|
}, |
||||
|
mounted() { |
||||
|
// store.commit('SET_PAGETITLE', '营销推广'); |
||||
|
}, |
||||
|
methods: { |
||||
|
updateDialogByPayType() { |
||||
|
if (this.addPayType > -1) { |
||||
|
// 设置标题 |
||||
|
let typeDesc = ''; |
||||
|
// 根据addPayType找到对应的描述 |
||||
|
for (let key in this.paytypeDesc) { |
||||
|
if (this[key] === this.addPayType) { |
||||
|
typeDesc = this.paytypeDesc[key]; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
this.addPayTitle = '添加' + typeDesc; |
||||
|
// 设置确认按钮文本 |
||||
|
if (this.addPayType === this.payTypeTaoBao || this.addPayType === this.payTypeJingdong) { |
||||
|
this.addPayconfirmText = '去授权'; |
||||
|
} else { |
||||
|
this.addPayconfirmText = '确定'; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
resetForm() { |
||||
|
// 重置所有表单字段 |
||||
|
this.company_short_name = ''; |
||||
|
this.mch_id = ''; |
||||
|
this.apiv2 = ''; |
||||
|
this.appid = ''; |
||||
|
this.alipay_account = ''; |
||||
|
this.receive_payment_account = ''; |
||||
|
this.receive_payment_name = ''; |
||||
|
this.pdd_shop_name = ''; |
||||
|
this.isPayPublic = '0'; // 重置支付宝标签页 |
||||
|
}, |
||||
|
// 弹框相关方法---start |
||||
|
showAddPaymentMethodDialog(type, type_desc) { |
||||
|
console.log(type, 'type'); |
||||
|
this.addPayDialogVisible = true; |
||||
|
this.addPayTitle = '添加' + type_desc; |
||||
|
this.addPayType = type; |
||||
|
if (type == PAY_TYPE_TAOBAO || type == PAY_TYPE_JINGDONG) { |
||||
|
this.addPayconfirmText = '去授权'; |
||||
|
} |
||||
|
}, |
||||
|
// 确认按钮事件 |
||||
|
addPayment() { |
||||
|
if (this.addPayType == PAY_TYPE_TAOBAO) { |
||||
|
window.open(this.taobaoAuthUrl, '_blank'); |
||||
|
|
||||
|
} else if (this.addPayType == PAY_TYPE_WEIXIN) { |
||||
|
this.$http('POST', '/agentnew/ajax_add_weixinpay', { |
||||
|
company_short_name: this.company_short_name, |
||||
|
mch_id: this.mch_id, |
||||
|
apiv2: this.apiv2, |
||||
|
appid: this.appid |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
if (response.status) { |
||||
|
this.init(response.data); |
||||
|
this.$Message.success(response.info); |
||||
|
|
||||
|
} else { |
||||
|
this.$Message.error(response.info); |
||||
|
} |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
|
||||
|
} else if (this.addPayType == 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 |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
if (response.status) { |
||||
|
this.init(response.data.payid); |
||||
|
if (this.isPayPublic == 1) { |
||||
|
this.$Message.success(response.info); |
||||
|
} else { |
||||
|
window.open(response.data.authurl, '_blank'); |
||||
|
} |
||||
|
} else { |
||||
|
this.$Message.error(response.info); |
||||
|
} |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
} else if (this.addPayType == PAY_TYPE_PDD) { |
||||
|
this.$http('POST', '/agentnew/ajax_add_pddpay', { |
||||
|
shop_name: this.pdd_shop_name, |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
if (response.status) { |
||||
|
this.init(response.data); |
||||
|
this.$Message.success(response.info); |
||||
|
} else { |
||||
|
this.$Message.error(response.info); |
||||
|
} |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
} else if (this.addPayType == PAY_TYPE_JINGDONG) { |
||||
|
window.open(this.jdAuthUrl, '_blank'); |
||||
|
} |
||||
|
this.init(); |
||||
|
}, |
||||
|
// 取消按钮事件 |
||||
|
handleCancel() { |
||||
|
this.init(); |
||||
|
}, |
||||
|
// 关闭弹框事件 |
||||
|
handleClose() { |
||||
|
this.init(); |
||||
|
}, |
||||
|
dialogVisibleChange(data) { |
||||
|
console.log(data, 'data098908090'); |
||||
|
}, |
||||
|
handleClick(tab, event) { |
||||
|
console.log(tab, event); |
||||
|
}, |
||||
|
init(payid) { |
||||
|
this.addPayDialogVisible = false; |
||||
|
this.$emit('update:visible', false); |
||||
|
this.resetForm(); // 重置表单 |
||||
|
|
||||
|
if(payid){ |
||||
|
this.$http('POST', '/agentnew/ajax_get_payinfo', { |
||||
|
payid: payid, |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
if (response.status) { |
||||
|
this.$emit('update:data', response.data); |
||||
|
} |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
},watch: { |
||||
|
visible(newVal) { |
||||
|
this.addPayDialogVisible = newVal; |
||||
|
}, |
||||
|
payType(newVal) { |
||||
|
this.addPayType = newVal; |
||||
|
this.updateDialogByPayType(); |
||||
|
this.resetForm(); // 切换支付方式时重置表单 |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.beforeNotice { |
||||
|
|
||||
|
h4 { |
||||
|
margin: 0; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
margin-bottom: 18px; |
||||
|
text-align: left; |
||||
|
box-sizing: border-box; |
||||
|
padding: 20px 14px; |
||||
|
border-radius: 4px; |
||||
|
/* middle/middle_blue_1 */ |
||||
|
background: #F2F7FF; |
||||
|
/* middle/middle_blue_3 */ |
||||
|
border: 1px solid #BFDAFF; |
||||
|
|
||||
|
div { |
||||
|
margin-top: 2px; |
||||
|
padding-left: 23px; |
||||
|
|
||||
|
p { |
||||
|
color: #8A9099; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
color: #1E2226; |
||||
|
|
||||
|
i { |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
display: flex; |
||||
|
align-items: stretch; |
||||
|
|
||||
|
b { |
||||
|
font-weight: normal; |
||||
|
color: #8A9099; |
||||
|
display: inline-flex; |
||||
|
|
||||
|
img { |
||||
|
margin-left: 4px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
color: #006AFF; |
||||
|
margin-right: 10px; |
||||
|
|
||||
|
img { |
||||
|
margin-left: 5px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.guide{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 6px; |
||||
|
color: #8A9099 !important; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
a { |
||||
|
color: #006AFF; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,3 @@ |
|||||
|
// 在项目中创建 eventBus.js
|
||||
|
import Vue from 'vue' |
||||
|
export const EventBus = new Vue() |
||||
@ -0,0 +1,58 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import Tooltip from '@/components/Tooltip.vue' |
||||
|
|
||||
|
const PositionMessageConstructor = Vue.extend(Tooltip) |
||||
|
|
||||
|
// 存储实例引用，便于全局控制
|
||||
|
const instances = [] |
||||
|
|
||||
|
function showMessage(options) { |
||||
|
const instance = new PositionMessageConstructor({ |
||||
|
propsData: options |
||||
|
}).$mount() |
||||
|
|
||||
|
document.body.appendChild(instance.$el) |
||||
|
instances.push(instance) |
||||
|
|
||||
|
const showInstance = instance.show() |
||||
|
|
||||
|
// 添加自动隐藏（duration为0表示一直显示）
|
||||
|
if (options.duration !== 0) { |
||||
|
const duration = options.duration || 2000 |
||||
|
setTimeout(() => { |
||||
|
instance.hide() |
||||
|
setTimeout(() => { |
||||
|
if (instance.$el && instance.$el.parentNode) { |
||||
|
instance.$el.parentNode.removeChild(instance.$el) |
||||
|
} |
||||
|
// 从实例数组中移除
|
||||
|
const index = instances.indexOf(instance) |
||||
|
if (index > -1) { |
||||
|
instances.splice(index, 1) |
||||
|
} |
||||
|
}, 300) // 等待动画结束
|
||||
|
}, duration) |
||||
|
} |
||||
|
|
||||
|
return showInstance |
||||
|
} |
||||
|
|
||||
|
// 隐藏所有tooltip
|
||||
|
function hideAll() { |
||||
|
instances.forEach(instance => { |
||||
|
instance.hide() |
||||
|
setTimeout(() => { |
||||
|
if (instance.$el && instance.$el.parentNode) { |
||||
|
instance.$el.parentNode.removeChild(instance.$el) |
||||
|
} |
||||
|
}, 300) |
||||
|
}) |
||||
|
instances.length = 0 |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
install(Vue) { |
||||
|
Vue.prototype.$positionMessage = showMessage |
||||
|
Vue.prototype.$hideAllPositionMessages = hideAll |
||||
|
} |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,342 @@ |
|||||
|
<template> |
||||
|
<div class="site-setting-wrap pagePadding"> |
||||
|
|
||||
|
<div class="siteMessage flex-common" id="siteMessage1"> |
||||
|
<p class="littleTitle mb32">微信收款</p> |
||||
|
<div class="weixinpay"> |
||||
|
<div class="beforeNotice"> |
||||
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4> |
||||
|
<div class="flex-between"> |
||||
|
<p class="mt12 flex">1.申请公司微信支付。<a class="guide" href="https://zhic.yuque.com/staff-chwecz/xhk8nt/ggkqm3" |
||||
|
target="_blank"><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a> </p> |
||||
|
|
||||
|
<span class=" flex"> |
||||
|
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank"> |
||||
|
<img src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a> |
||||
|
</span> |
||||
|
</div> |
||||
|
<p class="mt12">2.登录微信商户平台，在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。</p> |
||||
|
</div> |
||||
|
<el-form> |
||||
|
<div class="flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<GuipFormItem column="column" class="mb24" label="公司简称" :required="true"> |
||||
|
<span class="desc" slot="formRight">请输入公司简称，便于您区分账号所属公司</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="company_short_name" |
||||
|
prop="company_short_name" placeholder="请输入"> |
||||
|
</GuipInput> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="微信支付商户号" :required="true"> |
||||
|
<span class="desc" slot="formRight"> |
||||
|
<a href='https://pay.weixin.qq.com/' class="guide" |
||||
|
target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a> |
||||
|
</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="mch_id" prop="mch_id" |
||||
|
placeholder="请输入"> |
||||
|
</GuipInput> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
<div class="flex-line"></div> |
||||
|
<div class="flex-right"> |
||||
|
<GuipFormItem column="column" class="mb24" label="微信支付秘钥" :required="true"> |
||||
|
<span class="desc" slot="formRight"><a href='https://pay.weixin.qq.com/' class="guide" |
||||
|
target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a> |
||||
|
</span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="apiv2" prop="apiv2" |
||||
|
placeholder="不能设为纯数字"> |
||||
|
</GuipInput> |
||||
|
</GuipFormItem> |
||||
|
<GuipFormItem column="column" class="mb24" label="公众号APPID" :required="true"> |
||||
|
<span class="desc" slot="formRight"><a href='https://mp.weixin.qq.com/' class="guide" |
||||
|
target='_blank'><img src="@/assets/site/form_qua_ic.svg" alt="">指南</a></span> |
||||
|
<GuipInput slot="formDom" ref="GuipInput" column="column" v-model="appid" prop="appid" |
||||
|
placeholder="不能设为纯数字"> |
||||
|
</GuipInput> |
||||
|
</GuipFormItem> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="siteMessage flex-common mt12" id="siteMessage2"> |
||||
|
<h3 class="mb12">管理证书</h3> |
||||
|
<div class="beforeNotice"> |
||||
|
<span class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt="" style="margin-right: 5px;"> |
||||
|
API证书获取： |
||||
|
<a href="https://pay.weixin.qq.com/" class="flex" target="_blank"><img style="margin-right: 5px;" |
||||
|
src="@/assets/site/form_linkActive.svg" alt="">微信商户平台</a>＞账户中心＞账户设置＞API安全 |
||||
|
</span> |
||||
|
</div> |
||||
|
<el-form> |
||||
|
<div class="flex-wrap"> |
||||
|
<div class="flex-left"> |
||||
|
<div class="uploadwrap"> |
||||
|
<label class="flex upload-title gap8">上传 apiclient_cert.pem 证书<img class="ml-4" |
||||
|
src="@/assets/require.svg" /></label> |
||||
|
<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> |
||||
|
<p class="uploaded" v-if="payinfo.cert_uploaded">已上传</p> |
||||
|
<p class="normalUpload notuploaded" v-else>未上传任何文件</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="flex-line"></div> |
||||
|
<div class="flex-right"> |
||||
|
<div class="uploadwrap"> |
||||
|
<label class="flex upload-title gap8">上传 apiclient_key.pem 证书<img class="ml-4" |
||||
|
src="@/assets/require.svg" /></label> |
||||
|
<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> |
||||
|
<p class="uploaded" v-if="payinfo.key_uploaded">已上传</p> |
||||
|
<p class="normalUpload" v-else>未上传任何文件</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
|
||||
|
<div class="save-button"> |
||||
|
<GuipButton type="primary" ref="saveRef" :btnstyle="saveBtnStyleObj" @click="saveConfirm">保存</GuipButton> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import GuipInput from '@/components/GuipInput.vue'; |
||||
|
import GuipButton from '@/components/GuipButton.vue'; |
||||
|
import GuipFormItem from '@/components/GuipFormItem.vue'; |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: 'addPay', |
||||
|
props: {}, |
||||
|
components: { |
||||
|
GuipInput, |
||||
|
GuipButton, |
||||
|
GuipFormItem, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 公司简称 |
||||
|
company_short_name: '', |
||||
|
// 商户号 |
||||
|
mch_id: '', |
||||
|
// 微信支付秘钥 |
||||
|
apiv2: '', |
||||
|
// 公众号APPID |
||||
|
appid: '', |
||||
|
payinfo: [], |
||||
|
saveBtnStyleObj: { |
||||
|
width: '144px', |
||||
|
height: '46px', |
||||
|
borderRadius: '4px', |
||||
|
background: '#006AFF', |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// 初始化反显 |
||||
|
// this.getPayment() |
||||
|
}, |
||||
|
methods: { |
||||
|
getPayment() { |
||||
|
this.$http('POST', '/agentnew/ajax_get_payinfo', { |
||||
|
payid: this.$route.query.payid, |
||||
|
}).then(response => { |
||||
|
this.$nextTick(() => { |
||||
|
this.payinfo = response.data |
||||
|
}) |
||||
|
}).catch(error => { |
||||
|
console.error(error, 'error') |
||||
|
}) |
||||
|
}, |
||||
|
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) |
||||
|
}, |
||||
|
saveConfirm() { |
||||
|
// |
||||
|
// this.$positionMessage({ |
||||
|
// type: 'error', |
||||
|
// message: '请先上传证书', |
||||
|
// target: this.$refs['saveRef'], // 可以是DOM元素或选择器 |
||||
|
// position: 'top' |
||||
|
// }) |
||||
|
// let obj = {} |
||||
|
// obj.uid = this.serviceInfo.uid |
||||
|
// obj.type = this.serviceInfo.type |
||||
|
// obj.info = "" |
||||
|
// const that = this |
||||
|
// this.$http('POST', '/agentnew/ajax_payment_switch', obj).then(response => { |
||||
|
// if(response.status){ |
||||
|
// that.$message.success('保存成功'); |
||||
|
// that.payList = response.data.paylist |
||||
|
// that.$emit('saveEvent', that.payList) |
||||
|
// return true; |
||||
|
// } |
||||
|
// that.$message.error(response.info); |
||||
|
// }).catch(error => { |
||||
|
// console.error(error, 'error') |
||||
|
// }) |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.guide{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 6px; |
||||
|
color: #8A9099 !important; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
.site-setting-wrap{ |
||||
|
height: calc(100% - 80px); |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.notuploaded,.uploaded,.normalUpload{ |
||||
|
margin-top: 8px; |
||||
|
font-size: 12px; |
||||
|
color: #606266; |
||||
|
} |
||||
|
.normalUpload{ |
||||
|
color:#606266; |
||||
|
} |
||||
|
.notuploaded{ |
||||
|
color: #FD3B3B; |
||||
|
} |
||||
|
.save-button { |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
background: #fff; |
||||
|
box-shadow: 0 4px 16px 0 rgba(17, 55, 143, 0.12); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 16px 0; |
||||
|
z-index: 9; |
||||
|
} |
||||
|
|
||||
|
.uploadwrap { |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.upload-title { |
||||
|
font-size: 14px; |
||||
|
font-weight: normal; |
||||
|
line-height: normal; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #23242B; |
||||
|
} |
||||
|
|
||||
|
.upload-button { |
||||
|
border-radius: 4px; |
||||
|
background: #F2F3F5; |
||||
|
box-sizing: border-box; |
||||
|
border: 1px solid #BABDC2; |
||||
|
|
||||
|
.bgImg { |
||||
|
width: 20px; |
||||
|
height: 16px; |
||||
|
margin-right: 6px; |
||||
|
background-image: url(@/assets/site/uploadIcon.svg); |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
.bgImg { |
||||
|
background-image: url(@/assets/site/uploadIcon_light.svg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.upload-demo { |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
|
||||
|
.beforeNotice { |
||||
|
|
||||
|
h4 { |
||||
|
margin: 0; |
||||
|
gap: 8px; |
||||
|
} |
||||
|
|
||||
|
margin-bottom: 18px; |
||||
|
text-align: left; |
||||
|
box-sizing: border-box; |
||||
|
padding: 20px 14px; |
||||
|
border-radius: 4px; |
||||
|
/* middle/middle_blue_1 */ |
||||
|
background: #F2F7FF; |
||||
|
/* middle/middle_blue_3 */ |
||||
|
border: 1px solid #BFDAFF; |
||||
|
|
||||
|
div { |
||||
|
// margin-top: 2px; |
||||
|
// padding-left: 23px; |
||||
|
|
||||
|
p { |
||||
|
// color: #8A9099; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
color: #1E2226; |
||||
|
|
||||
|
i { |
||||
|
font-style: normal; |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
display: flex; |
||||
|
align-items: stretch; |
||||
|
|
||||
|
b { |
||||
|
font-weight: normal; |
||||
|
color: #8A9099; |
||||
|
display: inline-flex; |
||||
|
|
||||
|
img { |
||||
|
margin-left: 4px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
color: #006AFF; |
||||
|
margin-right: 10px; |
||||
|
|
||||
|
img { |
||||
|
margin-left: 5px; |
||||
|
margin-right: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
color: #006AFF; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue