wangmingchuan
/
yanzong_vue_store
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

h5支付凭证

Browse Source
master
wangdong 5 months ago
parent 7a3092e019
commit 375ee72dec
5 changed files with 205 additions and 4 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      src/common/enum/setting/payment/Method.js
  2. 42
      src/views/setting/Customer.vue
  3. 20
      src/views/setting/payment/Setting.vue
  4. 71
      src/views/setting/payment/template/Create.vue
  5. 73
      src/views/setting/payment/template/Update.vue

3
src/common/enum/setting/payment/Method.js
Unescape View File

@ -8,5 +8,6 @@ export default new Enum([
{ key: 'WECHAT', name: '微信支付', value: 'wechat' },
{ key: 'ALIPAY', name: '支付宝', value: 'alipay' },
{ key: 'BALANCE', name: '余额支付', value: 'balance' },
{ key: 'HUIFU', name: '银联支付', value: 'huifu' }
{ key: 'HUIFU', name: '银联支付', value: 'huifu' },
{ key: 'VOUCHER', name: '支付凭证', value: 'voucher' }
])

42
src/views/setting/Customer.vue
Unescape View File

@ -23,6 +23,7 @@
<a-radio-group v-model="record.provider">
<a-radio value="mpwxkf">微信小程序客服</a-radio>
<a-radio value="wxqykf">企业微信客服</a-radio>
<a-radio value="ewmkf">二维码客服</a-radio>
</a-radio-group>
<div v-show="record.provider === 'mpwxkf'" class="form-item-help">
<p class="extra">仅支持微信小程序端，H5端、APP端等其他端不支持</p>
@ -62,6 +63,21 @@
<a-input v-model="record.config.wxqykf.corpId" />
</a-form-model-item>
</div>
<div v-if="record.provider === 'ewmkf'">
<a-form-model-item
label="客服二维码"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="config.ewmkf.qrCodeId"
:rules="{ required: true, message: '请上传客服二维码', validator: validateQrCode }"
>
<SelectImage
:defaultList="record.config.ewmkf.qrCode ? [{ preview_url: record.config.ewmkf.qrCode }] : []"
@change="(fileId, selectedItems) => setImage(fileId, selectedItems, 'qrCodeId')"
v-decorator="['qrCodeId']"
/>
</a-form-model-item>
</div>
</div>
<a-form-model-item :wrapperCol="{ span: wrapperCol.span, offset: labelCol.span }">
<a-button type="primary" :loading="confirmLoading" @click="handleSubmit">保存</a-button>
@ -74,6 +90,7 @@
<script>
import { cloneDeep } from 'lodash'
import * as Api from '@/api/setting/store'
import { SelectImage } from '@/components'
import { SettingEnum } from '@/common/enum/store'
// 默认数据
@ -86,10 +103,17 @@ const defaultData = {
url: '',
corpId: ''
},
ewmkf: {
qrCodeId: '',
qrCode: '',
},
}
}
export default {
components: {
SelectImage,
},
data () {
return {
// 当前设置项的key
@ -120,11 +144,29 @@ export default {
.finally(() => this.isLoading = false)
},
setImage(fileId, selectedItems, key) {
console.log(fileId, selectedItems);
if (!fileId) {
return;
}
this.record.config.ewmkf[key] = fileId;
},
validateQrCode(rule, value, callback) {
console.log(rule, value, callback, this.record);
if (!value) {
callback(new Error('请上传客服二维码！'))
}
callback();
},
// 确认按钮
handleSubmit (e) {
this.$refs.myForm.validate(valid => {
if (valid) {
this.confirmLoading = true
console.log(this.record);
Api.update(this.key, { form: this.record })
.then(result => {
// 显示提示信息

20
src/views/setting/payment/Setting.vue
Unescape View File

@ -19,10 +19,10 @@
<template slot="method" slot-scope="text">
<div class="pay-method-item">
<img v-if="text==='huifu'" src="/static/yinlian.png" class="huifu-img">
<span v-else class="pay-icon" :style="{ color: PayMethodIcons[text].color }">
<span v-else-if="text!=='voucher'" class="pay-icon" :style="{ color: PayMethodIcons[text].color }">
<a-icon class="icon" :class="[text]" :component="PayMethodIcons[text].icon" />
</span>
<span>{{ PaymentMethodEnum[text].name }}</span>
<span>{{ PaymentMethodEnum[text].name || 111 }}</span>
</div>
</template>
<!-- 支付模板 -->
@ -66,6 +66,19 @@
:value="item.template_id"
>{{ item.name }}</a-select-option>
</a-select>
<a-select
v-if="item.method === PaymentMethodEnum.VOUCHER.value"
class="select-template"
placeholder="请选择支付模板"
v-model="item.template_id"
>
<a-select-option :value="0">无</a-select-option>
<a-select-option
v-for="(item, index) in voucherTemplateList"
:key="index"
:value="item.template_id"
>{{ item.name }}</a-select-option>
</a-select>
<router-link
v-if="item.is_must_template && $auth(createTemplatePath)"
:to="{ path: createTemplatePath }"
@ -176,6 +189,9 @@ export default {
huifuTemplateList () {
return this.templateList.filter(item => item.method === 'huifu')
},
voucherTemplateList () {
return this.templateList.filter(item => item.method === 'voucher')
},
},
// 初始化数据
async created () {

71
src/views/setting/payment/template/Create.vue
Unescape View File

@ -32,6 +32,7 @@
<a-radio :value="PaymentMethodEnum.WECHAT.value">{{ PaymentMethodEnum.WECHAT.name }}</a-radio>
<a-radio :value="PaymentMethodEnum.ALIPAY.value">{{ PaymentMethodEnum.ALIPAY.name }}</a-radio>
<a-radio :value="PaymentMethodEnum.HUIFU.value">{{ PaymentMethodEnum.HUIFU.name }}</a-radio>
<a-radio :value="PaymentMethodEnum.VOUCHER.value">{{ PaymentMethodEnum.VOUCHER.name }}</a-radio>
</a-radio-group>
<div class="form-item-help">
<p class="extra">保存以后支付方式将不可修改，请谨慎操作</p>
@ -354,7 +355,7 @@
</a-form-model-item>
</div>
<!-- 汇付支付 -->
<div v-if="record.method === PaymentMethodEnum.HUIFU.value" :method="record.method">
<div v-if="record.method === PaymentMethodEnum.HUIFU.value" :method="record.method">
<a-form-model-item
label="商户号类型"
prop="config.huifu.mchType"
@ -529,6 +530,55 @@
</a-form-model-item> -->
</div>
</div>
<!-- 支付凭证 -->
<div v-if="record.method === PaymentMethodEnum.VOUCHER.value" :method="record.method">
<a-form-model-item
label="微信商户名称"
prop="config.voucher.wechatMerchantName"
:rules="[{ required: false, message: '请填写微信商户名称' }]"
>
<a-input v-model="record.config.voucher.wechatMerchantName" autocomplete="off" />
</a-form-model-item>
<a-form-model-item
label="微信二维码"
>
<SelectImage
@change="(fileId, selectedItems) => setImage(fileId, selectedItems, 'wechatQrCodeId')"
v-decorator="['wechatQrCodeId', { rules: [{ required: false, message: '请上传微信二维码' }] }]"
/>
</a-form-model-item>
<a-form-model-item
label="支付宝商户名称"
prop="config.voucher.alipayMerchantName"
:rules="[{ required: false, message: '请填写支付宝商户名称' }]"
>
<a-input v-model="record.config.voucher.alipayMerchantName" autocomplete="off" />
</a-form-model-item>
<a-form-model-item
label="支付宝二维码"
prop="config.voucher.alipayQrcode"
>
<SelectImage
@change="(fileId, selectedItems) => setImage(fileId, selectedItems, 'alipayQrCodeId')"
v-decorator="['alipayQrCodeId', { rules: [{ required: false, message: '请上传支付宝二维码' }] }]"
/>
</a-form-model-item>
<a-form-model-item
label="快捷支付商户名称"
prop="config.voucher.quickpayMerchantName"
:rules="[{ required: false, message: '快捷支付商户名称' }]"
>
<a-input v-model="record.config.voucher.quickpayMerchantName" autocomplete="off" />
</a-form-model-item>
<a-form-model-item
label="快捷支付二维码"
>
<SelectImage
@change="(fileId, selectedItems) => setImage(fileId, selectedItems, 'quickpayQrCodeId')"
v-decorator="['quickpayQrCodeId', { rules: [{ required: false, message: '请上传快捷支付二维码' }] }]"
/>
</a-form-model-item>
</div>
<a-form-model-item :wrapperCol="{ offset: labelCol.span }">
<a-button type="primary" :loading="isBtnLoading" @click="handleSubmit">保存</a-button>
</a-form-model-item>
@ -540,6 +590,7 @@
<script>
import { cloneDeep } from 'lodash'
import InputFile from '@/components/InputFile'
import { SelectImage } from '@/components'
import * as Api from '@/api/setting/payment/template'
import { PaymentMethodEnum } from '@/common/enum/setting/payment'
@ -609,12 +660,24 @@ const defaultData = {
// spApiclientKey: '',
},
},
[PaymentMethodEnum.VOUCHER.value]: {
wechatMerchantName: '',
wechatQrCode: '',
wechatQrCodeId: '',
alipayMerchantName: '',
alipayQrcode: '',
alipayQrCodeId: '',
quickpayMerchantName: '',
quickpayQrCode: '',
quickpayQrCodeId: '',
},
},
}
export default {
components: {
InputFile,
SelectImage,
},
data() {
return {
@ -669,6 +732,11 @@ export default {
}
},
setImage(fileId, selectedItems, key) {
console.log(fileId, selectedItems);
this.record.config.voucher[key] = fileId;
},
// 表单数据提交到后端
onSubmitForm() {
this.isLoading = true
@ -690,6 +758,7 @@ export default {
// 生成表单数据 FormData格式
buildFormData() {
const { record, uploadFiles } = this
console.log(record);
const formData = new FormData()
formData.append('name', record.name)
formData.append('sort', record.sort)

73
src/views/setting/payment/template/Update.vue
Unescape View File

@ -32,6 +32,7 @@
<a-radio :value="PaymentMethodEnum.WECHAT.value">{{ PaymentMethodEnum.WECHAT.name }}</a-radio>
<a-radio :value="PaymentMethodEnum.ALIPAY.value">{{ PaymentMethodEnum.ALIPAY.name }}</a-radio>
<a-radio :value="PaymentMethodEnum.HUIFU.value">{{ PaymentMethodEnum.HUIFU.name }}</a-radio>
<a-radio :value="PaymentMethodEnum.VOUCHER.value">{{ PaymentMethodEnum.VOUCHER.name }}</a-radio>
</a-radio-group>
<div class="form-item-help">
<p v-if="record.method === PaymentMethodEnum.WECHAT.value" class="extra">
@ -528,6 +529,57 @@
</a-form-model-item> -->
</div>
</div>
<!-- 支付凭证 -->
<div v-if="record.method === PaymentMethodEnum.VOUCHER.value" :method="record.method">
<a-form-model-item
label="微信商户名称"
prop="config.voucher.wechatMerchantName"
:rules="[{ required: false, message: '请填写微信商户名称' }]"
>
<a-input v-model="record.config.voucher.wechatMerchantName" autocomplete="off" />
</a-form-model-item>
<a-form-model-item
label="微信二维码"
>
<SelectImage
:defaultList="record.config.voucher.wechatQrCode ? [{ preview_url: record.config.voucher.wechatQrCode }] : []"
@change="(fileId, selectedItems) => setImage(fileId, selectedItems, 'wechatQrCodeId')"
v-decorator="['wechatQrCodeId', { rules: [{ required: false, message: '请上传微信二维码' }] }]"
/>
</a-form-model-item>
<a-form-model-item
label="支付宝商户名称"
prop="config.voucher.alipayMerchantName"
:rules="[{ required: false, message: '请填写支付宝商户名称' }]"
>
<a-input v-model="record.config.voucher.alipayMerchantName" autocomplete="off" />
</a-form-model-item>
<a-form-model-item
label="支付宝二维码"
>
<SelectImage
:defaultList="record.config.voucher.alipayQrcode ? [{ preview_url: record.config.voucher.alipayQrcode}] : []"
@change="(fileId, selectedItems) => setImage(fileId, selectedItems, 'alipayQrCodeId')"
v-decorator="['alipayQrCodeId', { rules: [{ required: false, message: '请上传支付宝二维码' }] }]"
/>
</a-form-model-item>
<a-form-model-item
label="快捷支付商户名称"
prop="config.voucher.quickpayMerchantName"
:rules="[{ required: false, message: '快捷支付商户名称' }]"
>
<a-input v-model="record.config.voucher.quickpayMerchantName" autocomplete="off" />
</a-form-model-item>
<a-form-model-item
label="快捷支付二维码"
>
<SelectImage
:defaultList="record.config.voucher.quickpayQrCode ? [{ preview_url: record.config.voucher.quickpayQrCode}] : []"
@change="(fileId, selectedItems) => setImage(fileId, selectedItems, 'quickpayQrCodeId')"
v-decorator="['quickpayQrCodeId', { rules: [{ required: false, message: '请上传快捷支付二维码' }] }]"
/>
</a-form-model-item>
</div>
<a-form-model-item :wrapperCol="{ offset: labelCol.span }">
<a-button type="primary" :loading="isBtnLoading" @click="handleSubmit">保存</a-button>
</a-form-model-item>
@ -540,6 +592,7 @@
import { cloneDeep } from 'lodash'
import InputFile from '@/components/InputFile'
import * as Api from '@/api/setting/payment/template'
import { SelectImage } from '@/components'
import { PaymentMethodEnum } from '@/common/enum/setting/payment'
// 默认表单数据
@ -609,12 +662,25 @@ const defaultData = {
// spApiclientKey: '',
},
},
[PaymentMethodEnum.VOUCHER.value]: {
wechatMerchantName: '',
wechatQrCode: '',
wechatQrCodeId: '',
alipayMerchantName: '',
alipayQrcode: '',
alipayQrCodeId: '',
quickpayMerchantName: '',
quickpayQrCode: '',
quickpayQrCodeId: '',
},
},
}
export default {
components: {
InputFile,
SelectImage,
},
data() {
return {
@ -693,11 +759,18 @@ export default {
uploadFiles[key] = args[1]
}
},
setImage(fileId, selectedItems, key) {
if (!fileId) {
return;
}
this.record.config.voucher[key] = fileId;
},
// 表单数据提交到后端
onSubmitForm() {
this.isLoading = true
this.isBtnLoading = true
console.log(this.record);
const formData = this.buildFormData()
Api.edit(formData)
.then((result) => {

Write Preview
Loading…
Cancel
Save