源文件
This commit is contained in:
163
src/views/systemMerchant/components/addPayType.vue
Normal file
163
src/views/systemMerchant/components/addPayType.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<el-dialog title="添加支付方式" :visible.sync="dialogVisible" :show-close="false" @close="reset">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
|
||||
<el-form-item label="支付类型" prop="payType">
|
||||
<el-select v-model="form.payType" placeholder="请选择支付类型" @change="typeChange">
|
||||
<el-option :label="item.lable" :value="item.key" v-for="item in payTypes"
|
||||
:key="item.key"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付方式" prop="payName" v-if="form.payType == 'virtual'">
|
||||
<el-input v-model="form.payName" placeholder="请输入自定义支付方式"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="图标" prop="icon">
|
||||
<uploadImg ref="uploadImg" :limit="9" @success="e => form.icon = e[0]" />
|
||||
</el-form-item> -->
|
||||
<el-form-item label="是否虚拟">
|
||||
<el-radio-group v-model="form.isIdeal">
|
||||
<el-radio :label="1">虚拟</el-radio>
|
||||
<el-radio :label="0">非虚拟</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="tips">虚拟：微信、支付宝支付等。 非虚拟：现金</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="开钱箱权限">
|
||||
<el-switch v-model="form.isOpenCashDrawer" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否生效">
|
||||
<el-switch v-model="form.isDisplay" :active-value="1" :inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sorts" controls-position="right" :min="0"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" @click="submitHandle" :loading="formLoading">
|
||||
<span v-if="!formLoading">保存</span>
|
||||
<span v-else>保存中...</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uploadImg from '@/components/uploadImg'
|
||||
import { tbShopPayType } from '@/api/setting'
|
||||
import payTypes from '../payTypes'
|
||||
|
||||
export default ({
|
||||
components: { uploadImg },
|
||||
data() {
|
||||
const validateIcon = (rule, value, callback) => {
|
||||
if (!this.form.icon) {
|
||||
callback(new Error('请上传图标'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
payTypes,
|
||||
dialogVisible: false,
|
||||
formLoading: false,
|
||||
resetForm: '',
|
||||
form: {
|
||||
id: '',
|
||||
icon: '',
|
||||
shopId: localStorage.getItem('shopId'),
|
||||
payType: '',
|
||||
payName: '',
|
||||
isIdeal: 1,
|
||||
isOpenCashDrawer: 1,
|
||||
isDisplay: 1,
|
||||
sorts: 0
|
||||
},
|
||||
rules: {
|
||||
payType: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
triiger: 'blur'
|
||||
}
|
||||
],
|
||||
payName: [
|
||||
{
|
||||
required: true,
|
||||
message: ' ',
|
||||
triiger: 'blur'
|
||||
}
|
||||
],
|
||||
icon: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateIcon,
|
||||
triiger: 'change'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.resetForm = { ...this.form }
|
||||
},
|
||||
methods: {
|
||||
typeChange(e) {
|
||||
this.form.icon = payTypes.find(item => item.key == e).icon
|
||||
if (e == 'virtual') {
|
||||
this.form.payName = ''
|
||||
} else {
|
||||
this.form.payName = payTypes.find(item => item.key == e).lable
|
||||
}
|
||||
},
|
||||
// 保存
|
||||
submitHandle() {
|
||||
this.$refs.form.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
this.formLoading = true
|
||||
await tbShopPayType(this.form, this.form.id ? 'put' : 'post')
|
||||
this.$emit('success')
|
||||
this.formLoading = false
|
||||
this.$notify({
|
||||
title: '成功',
|
||||
message: `${this.form.pid ? '编辑' : '添加'}成功`,
|
||||
type: 'success'
|
||||
});
|
||||
this.close()
|
||||
} catch (error) {
|
||||
this.formLoading = false
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.dialogVisible = false
|
||||
},
|
||||
reset() {
|
||||
this.form = { ...this.resetForm }
|
||||
// this.$refs.uploadImg.fileList = []
|
||||
},
|
||||
show(obj) {
|
||||
this.dialogVisible = true
|
||||
if (obj && obj.id) {
|
||||
this.form.id = obj.id
|
||||
this.form.icon = obj.icon
|
||||
this.form.payType = obj.payType
|
||||
this.form.payName = obj.payName
|
||||
this.form.isIdeal = obj.isIdeal
|
||||
this.form.isOpenCashDrawer = obj.isOpenCashDrawer
|
||||
this.form.isDisplay = obj.isDisplay
|
||||
this.form.sorts = obj.sorts
|
||||
|
||||
// if (obj.icon) {
|
||||
// setTimeout(() => {
|
||||
// this.$refs.uploadImg.fileList = [{
|
||||
// url: obj.icon
|
||||
// }]
|
||||
// }, 100);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
130
src/views/systemMerchant/index.vue
Normal file
130
src/views/systemMerchant/index.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="head-container">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="$refs.addPayType.show()">添加支付方式</el-button>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-table :data="tableData.list" v-loading="tableData.loading"><el-table-column prop="icon" label="图标">
|
||||
<template v-slot="scope">
|
||||
<el-image :src="scope.row.icon" style="width: 40px;height: 40px;"></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="payName" label="支付方式"></el-table-column>
|
||||
<el-table-column prop="payType" label="类型"></el-table-column>
|
||||
<el-table-column prop="isOpenCashDrawer" label="开钱箱权限">
|
||||
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.isOpenCashDrawer" :active-value="1" :inactive-value="0" disabled></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="isDisplay" label="是否生效">
|
||||
|
||||
<template v-slot="scope">
|
||||
<el-switch v-model="scope.row.isDisplay" :active-value="1" :inactive-value="0" disabled></el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sorts" label="条件排序"></el-table-column>
|
||||
<el-table-column label="操作" width="150">
|
||||
|
||||
<template v-slot="scope">
|
||||
<el-button type="text" icon="el-icon-edit" @click="$refs.addPayType.show(scope.row)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
|
||||
@current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
|
||||
</div>
|
||||
<addPayType ref="addPayType" @success="getTableData" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import { tbShopPayTypeGet } from '@/api/setting.js'
|
||||
import addPayType from './components/addPayType'
|
||||
export default {
|
||||
components: { addPayType },
|
||||
data() {
|
||||
return {
|
||||
dayjs,
|
||||
query: {
|
||||
name: '',
|
||||
account: '',
|
||||
status: ''
|
||||
},
|
||||
status: [
|
||||
{
|
||||
type: 1,
|
||||
label: '开启'
|
||||
},
|
||||
{
|
||||
type: 0,
|
||||
label: '关闭'
|
||||
}
|
||||
],
|
||||
tableData: {
|
||||
list: [],
|
||||
page: 0,
|
||||
size: 10,
|
||||
loading: false,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getTableData()
|
||||
},
|
||||
methods: {
|
||||
dropdownClick(e) {
|
||||
switch (e.command) {
|
||||
case 1:
|
||||
this.$refs.detailModal.show(e.row)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 重置查询
|
||||
resetHandle() {
|
||||
this.query.name = ''
|
||||
this.query.account = ''
|
||||
this.query.status = ''
|
||||
this.getTableData()
|
||||
},
|
||||
// 分页回调
|
||||
paginationChange(e) {
|
||||
this.tableData.page = e - 1
|
||||
this.getTableData()
|
||||
},
|
||||
// 获取商家列表
|
||||
async getTableData() {
|
||||
this.tableData.loading = true
|
||||
try {
|
||||
const res = await tbShopPayTypeGet({
|
||||
page: this.tableData.page,
|
||||
size: this.tableData.size,
|
||||
shopId: localStorage.getItem('shopId')
|
||||
})
|
||||
this.tableData.loading = false
|
||||
this.tableData.list = res.content
|
||||
this.tableData.total = res.totalElements
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.shop_info {
|
||||
display: flex;
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
32
src/views/systemMerchant/payTypes.js
Normal file
32
src/views/systemMerchant/payTypes.js
Normal file
@@ -0,0 +1,32 @@
|
||||
export default [
|
||||
{
|
||||
lable: '现金',
|
||||
key: 'cash',
|
||||
icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240302/2dab947729d640fba7709b7c0b42bfef.png'
|
||||
},
|
||||
{
|
||||
lable: '银行卡',
|
||||
key: 'bank',
|
||||
icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240302/14b20cf721304b7fa2f01e6e75fab403.png'
|
||||
},
|
||||
{
|
||||
lable: '扫码支付',
|
||||
key: 'scanCode',
|
||||
icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240302/9ff08224680446c8b3978844da99bbaa.png'
|
||||
},
|
||||
{
|
||||
lable: '储值卡',
|
||||
key: 'deposit',
|
||||
icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240302/18d40f471a924d55b4eb13e5f553734d.png'
|
||||
},
|
||||
// {
|
||||
// lable: '挂单',
|
||||
// key: 'arrears',
|
||||
// icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240304/fcf337b999f14a12ad75f76e74fcb344.png'
|
||||
// },
|
||||
{
|
||||
lable: '自定义',
|
||||
key: 'virtual',
|
||||
icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/20240304/6702fbf953504f89aa6a3db1f33d49b6.png'
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user