mall-pay-config-panel.vue
3.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<template>
<ConfigPanelShell
:modules="modules"
:loading="loading"
:saving="saving"
:show-content-header="false"
storage-key="mallPayConfigActiveModule"
alert-title="会员商城微信支付参数。未开启或参数缺失时，小程序下单走模拟支付（MockPay）便于联调。"
alert-type="info"
@save="$emit('save')"
>
<template #payment>
<el-card shadow="never" class="config-section">
<div slot="header" class="config-section__header">
<span>微信支付</span>
<span class="config-section__tag">会员商城</span>
</div>
<p class="config-section__tip">
正式收款需填写商户参数并开启；关闭时小程序下单使用模拟支付。
</p>
<el-form-item label="启用支付">
<el-switch v-model="form.PayEnabled" active-value="1" inactive-value="0" />
<span class="field-suffix field-suffix--text">
{{ form.PayEnabled === '1' ? '已开启' : '已关闭（模拟支付）' }}
</span>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="小程序 AppId">
<el-input v-model="form.AppId" clearable placeholder="wx 开头的小程序 AppId" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="微信商户号">
<el-input v-model="form.MchId" clearable placeholder="微信支付商户号 mchid" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="小程序 AppSecret">
<el-input v-model="form.AppSecret" show-password clearable autocomplete="new-password"
placeholder="小程序 AppSecret" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="APIv3 密钥">
<el-input v-model="form.ApiV3Key" show-password clearable autocomplete="new-password"
placeholder="微信支付 APIv3 密钥" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="支付回调地址">
<el-input v-model="form.NotifyUrl" clearable
placeholder="如 https://域名/api/Extend/LqMallOrder/PayNotify" />
</el-form-item>
</el-col>
</el-row>
</el-card>
</template>
</ConfigPanelShell>
</template>
<script>
import ConfigPanelShell from './config-panel-shell.vue'
const MODULES = [
{ key: 'payment', label: '微信支付', desc: '会员商城收款参数', icon: 'el-icon-wallet', iconClass: 'module-icon--payment' }
]
export default {
name: 'MallPayConfigPanel',
components: { ConfigPanelShell },
props: {
form: { type: Object, required: true },
loading: { type: Boolean, default: false },
saving: { type: Boolean, default: false }
},
data() {
return { modules: MODULES }
}
}
</script>
<style lang="scss" scoped>
.config-section {
border: 1px solid #ebeef5;
&__header {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
}
&__tag {
padding: 0 8px;
height: 22px;
line-height: 22px;
border-radius: 4px;
background: #f4f4f5;
color: #909399;
font-size: 12px;
font-weight: normal;
}
&__tip {
margin: 0 0 12px;
color: #909399;
font-size: 13px;
line-height: 1.6;
}
}
.field-suffix {
margin-left: 8px;
color: #909399;
font-size: 13px;
&--text {
display: inline-block;
min-width: 120px;
}
}
.module-icon--payment { color: #67C23A; }
.ncc-content-dark .config-section {
border-color: rgba(255, 255, 255, 0.08);
&__tag,
&__tip,
.field-suffix {
color: rgba(255, 255, 255, 0.55);
}
&__tag {
background: rgba(255, 255, 255, 0.08);
}
}
</style>