Skip to content

B
bigDataSystem
Commit e2936f4a authored by LiXuyang's avatar LiXuyang
Browse files
Options

订单信息

parent ff0916d8
Hide whitespace changes
Inline Side-by-side
Showing with 814 additions and 0 deletions
src/views/personalCenter/orderingInformation/Step1.vue 0 → 100644
View file @ e2936f4a
<template>
<div class="step1">
<div class="step1-form">
<BasicForm @register="register">
<template #fac="{ model, field }">
<Input.Group compact>
<Select v-model:value="model['pay']" class="pay-select">
<Select.Option value="zfb"> 支付宝 </Select.Option>
<Select.Option value="yl"> 银联 </Select.Option>
</Select>
<a-input class="pay-input" v-model:value="model[field]" />
</Input.Group>
</template>
<template #goodList>
<div class="flex">
<div> 支付订单： </div>
<div>
<div v-for="good in props.goods" :key="good"> {{ good.name }}￥{{ good.money }} </div>
</div>
</div>
</template>
</BasicForm>
</div>
<!-- <Divider />-->
<!-- <h3>说明</h3>-->
<!-- <h4>转账到支付宝账户</h4>-->
<!-- <p>-->
<!-- 如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。-->
<!-- </p>-->
<!-- <h4>转账到银行卡</h4>-->
<!-- <p>-->
<!-- 如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。-->
<!-- </p>-->
</div>
</template>
<script lang="ts" setup>
import { BasicForm, useForm } from '@/components/Form';
import { step1Schemas } from './data';
import { Select, Input, Divider } from 'ant-design-vue';
import {nextTick, onMounted, defineExpose, ref, defineProps} from 'vue';
// 初始化
const emit = defineEmits(['next']);
defineExpose({
setFormValue,
});
const props = defineProps({
goods: {
type: Array,
default: () => [],
},
});
// 数据
/**
* 方法
*/
function setFormValue(obj) {
setFieldsValue(obj);
}
async function customSubmitFunc() {
try {
const values = await validate();
emit('next', values);
} catch (error) {
//
}
}
/**
* form
*/
const [register, { validate, setFieldsValue }] = useForm({
labelWidth: 100,
schemas: step1Schemas,
actionColOptions: {
span: 14,
},
showResetButton: false,
submitButtonOptions: {
text: '下一步',
},
submitFunc: customSubmitFunc,
});
</script>
<style lang="less" scoped>
.step1 {
&-form {
width: 450px;
margin: 0 auto;
}
h3 {
margin: 0 0 12px;
color: @text-color-base;
font-size: 16px;
line-height: 32px;
}
h4 {
margin: 0 0 4px;
color: @text-color-base;
font-size: 14px;
line-height: 22px;
}
p {
color: @text-color-base;
}
}
.pay-select {
width: 20%;
}
.pay-input {
width: 70%;
}
</style>
src/views/personalCenter/orderingInformation/Step2.vue 0 → 100644
View file @ e2936f4a
<template>
<div class="w-120 m-auto">
<Alert message="确认转账后，资金将直接打入对方账户，无法退回。" show-icon />
<Descriptions :column="1" class="mt-5">
<Descriptions.Item label="付款账户"> ant-design@alipay.com </Descriptions.Item>
<Descriptions.Item label="转账金额"> {{ money }}元 </Descriptions.Item>
</Descriptions>
<div class="flex">
<div> 支付订单： </div>
<div>
<div v-for="good in props.goods" :key="good"> {{ good.name }}￥{{ good.money }} </div>
</div>
</div>
<Divider />
<BasicForm @register="register" />
</div>
</template>
<script lang="ts" setup>
import { BasicForm, useForm } from '@/components/Form';
import { step2Schemas } from './data';
import { Alert, Divider, Descriptions } from 'ant-design-vue';
import { defineProps } from 'vue';
import {number} from "echarts";
const emit = defineEmits(['next', 'prev']);
const props = defineProps({
goods: {
type: Array,
default: () => [],
},
money: {
type: number,
default: 0,
}
});
const [register, { validate, setProps }] = useForm({
labelWidth: 80,
schemas: step2Schemas,
actionColOptions: {
span: 14,
},
resetButtonOptions: {
text: '上一步',
},
submitButtonOptions: {
text: '提交',
},
resetFunc: customResetFunc,
submitFunc: customSubmitFunc,
});
async function customResetFunc() {
emit('prev');
}
async function customSubmitFunc() {
try {
const values = await validate();
setProps({
submitButtonOptions: {
loading: true,
},
});
setTimeout(() => {
setProps({
submitButtonOptions: {
loading: false,
},
});
emit('next', values);
}, 1500);
} catch (error) {
console.error(error);
}
}
</script>
src/views/personalCenter/orderingInformation/Step3.vue 0 → 100644
View file @ e2936f4a
<template>
<div class="w-150 m-auto">
<Result status="success" title="操作成功" sub-title="预计两小时内到账">
<template #extra>
<a-button type="primary" @click="emit('redo')"> 再转一笔 </a-button>
<a-button> 查看账单 </a-button>
</template>
</Result>
<!-- <div class="mt-6 px-6 py-8 bg-white">-->
<!-- <Descriptions :column="1" class="mt-5">-->
<!-- <Descriptions.Item label="付款账户"> ant-design@alipay.com </Descriptions.Item>-->
<!-- <Descriptions.Item label="收款账户"> test@example.com </Descriptions.Item>-->
<!-- <Descriptions.Item label="收款人姓名"> Vben </Descriptions.Item>-->
<!-- <Descriptions.Item label="转账金额"> 500元 </Descriptions.Item>-->
<!-- </Descriptions>-->
<!-- </div>-->
</div>
</template>
<script lang="ts" setup>
import { Result, Descriptions } from 'ant-design-vue';
const emit = defineEmits(['redo']);
</script>
src/views/personalCenter/orderingInformation/data.tsx 0 → 100644
View file @ e2936f4a
import { FormSchema } from '@/components/Form';
export const step1Schemas: FormSchema[] = [
{
field: 'account',
component: 'Select',
label: '付款账户',
required: true,
defaultValue: '1',
componentProps: {
options: [
{
label: 'anncwb@126.com',
value: '1',
},
],
},
colProps: {
span: 24,
},
},
// {
// field: 'fac',
// label: '收款账户',
// required: true,
// defaultValue: 'test@example.com',
// slot: 'fac',
// colProps: {
// span: 24,
// },
// },
// {
// field: 'pay',
// component: 'Input',
// label: '',
// defaultValue: 'zfb',
// show: false,
// },
// {
// field: 'payeeName',
// component: 'Input',
// label: '收款人姓名',
// defaultValue: 'Vben',
// required: true,
// colProps: {
// span: 24,
// },
// },
{
field: 'money',
component: 'Input',
label: '转账金额',
required: true,
renderComponentContent: () => {
return {
prefix: () => '￥',
};
},
colProps: {
span: 24,
},
},
{
field: 'goodList',
slot: 'goodList',
},
];
export const step2Schemas: FormSchema[] = [
{
field: 'pwd',
component: 'InputPassword',
label: '支付密码',
required: true,
defaultValue: '123456',
colProps: {
span: 24,
},
},
];
src/views/personalCenter/orderingInformation/index.vue 0 → 100644
View file @ e2936f4a
<template>
<PageWrapper>
<template #headerContent>
<div class="flex">
<div class="flex-1 header">
<!-- <LeftOutlined class="h-back" @click="handleBack" />-->
<ShoppingCartOutlined class="h-icon" />
<div class="h-txt">
<div class="h-des">订单信息</div>
<div class="h-path">个人中心/订单信息</div>
</div>
</div>
<div class="h-group">
<a-button :disabled="getDisabled()" class="btn" type="primary" @click="handleDelete()">
取消订单
</a-button>
<a-button :disabled="getDisabled()" type="primary" danger @click="handlePayMore()">
支付
</a-button>
</div>
</div>
</template>
<template #footer>
<BasicTable @register="registerTable" ref="table">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
v-if="record.progress === '待支付'"
:actions="[
{
label: '支付',
color: 'error',
onClick: handlePay.bind(null, record),
},
{
label: '取消订单',
popConfirm: {
title: '是否确认取消订单',
placement: 'left',
confirm: handleRemove.bind(null, record),
},
},
]"
/>
<TableAction
v-if="record.progress === '已完成' && record.type === '数据集'"
:actions="[
{
label: '下载',
onClick: handleDownload.bind(null, record),
},
{
label: '推送',
onClick: handlePush.bind(null, record),
},
]"
/>
<TableAction
v-if="record.progress === '已完成' && record.type === '文件'"
:actions="[
{
label: '下载',
onClick: handleDownload.bind(null, record),
},
]"
/>
<TableAction
v-if="record.progress === '已完成' && record.type === 'API'"
:actions="[
{
label: '调用',
onClick: handleCall.bind(null, record),
},
]"
/>
</template>
</template>
<template #money="{ text, record}">
<span>￥{{ text }}</span>
</template>
</BasicTable>
</template>
<PayModal @register="payModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import {
CheckboxGroup,
Divider,
UploadDragger,
Input,
RadioGroup,
Checkbox,
Row,
Col,
Alert,
} from 'ant-design-vue';
import {
ApiOutlined,
PlusOutlined,
UserOutlined,
RightOutlined,
CheckCircleFilled,
ShoppingCartOutlined,
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import BasicForm from '@/components/Form/src/BasicForm.vue';
import { FormProps, useForm } from '@/components/Form';
import {
applicantFormSchema,
enterpriseFormSchema,
identityFormSchema,
} from '@/views/personalCenter/enterpriseCertification/ec.data';
import { ref } from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
import BasicTable from '@/components/Table/src/BasicTable.vue';
import { BasicTableProps, useTable } from '@/components/Table';
import { tableListtab1 } from '@/views/auditLog/mock';
import { columns, searchFormSchema } from '@/views/auditLog/audi.data';
import {
orderFormSchema,
orderTableColumn,
} from '@/views/personalCenter/orderingInformation/order.data';
import { orderData } from '@/views/personalCenter/orderingInformation/orderData';
import TableAction from '@/components/Table/src/components/TableAction.vue';
import { useModal } from '@/components/Modal';
import PayModal from './payModal.vue';
// 初始化
const { createMessage, createConfirm } = useMessage();
const [payModal, { openModal }] = useModal();
// 数据
const table = ref();
/**
* 方法
*/
// 列表选择禁用
function getDisabled() {
if (table.value) {
return getSelectRows().length <= 0;
} else {
return true;
}
}
// 批量支付
function handlePayMore() {
openModal(true, {
isUpdate: false,
goods: getSelectRows(),
});
}
// 支付
function handlePay(record) {
openModal(true, {
isUpdate: false,
goods: [record],
});
}
// 取消订单
function handleRemove() {
createMessage.success('取消订单成功！');
}
// 下载
function handleDownload(record) {
createMessage.success('下载成功！');
}
// 推送
function handlePush(record) {
createMessage.success('推送成功！');
}
// 调用
function handleCall(record) {
createMessage.success('调用成功！');
}
// 批量取消
function handleDelete() {
createConfirm({
iconType: 'warning',
title: '确认取消订单',
content: '确认批量取消选中的订单吗？',
onOk() {
createMessage.success('取消订单成功!');
},
});
}
/**
* table
*/
const [registerTable, { getSelectRows }] = useTable({
title: '',
api: async (params) => {
console.log('params', params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: orderData.length,
code: '',
message: '',
data: orderData,
};
return { ...response };
},
columns: orderTableColumn,
rowSelection: true,
useSearchForm: true,
formConfig: {
baseColProps: { span: 3 },
schemas: orderFormSchema,
autoSubmitOnEnter: true,
} as FormProps,
showTableSetting: false,
bordered: true,
striped: false,
showIndexColumn: false,
actionColumn: {
width: 200,
title: '操作',
dataIndex: 'action',
// slots: { customRender: 'action' },
fixed: undefined,
},
} as BasicTableProps);
</script>
<style scoped>
.header {
display: flex;
flex-direction: row;
gap: 10px;
.h-back {
font-size: 20px;
}
.h-icon {
font-size: 30px;
color: #0a208a;
}
.h-txt {
display: flex;
flex-direction: column;
.h-des {
font-size: 20px;
font-weight: bolder;
}
.h-path {
color: #a4a8b6;
}
}
}
.h-group {
display: flex;
gap: 10px;
}
</style>
src/views/personalCenter/orderingInformation/order.data.ts 0 → 100644
View file @ e2936f4a
import { BasicColumn, FormSchema } from '@/components/Table';
export const orderTableColumn: BasicColumn[] = [
{
title: '订单名称',
dataIndex: 'name',
},
{
title: '订单类型',
dataIndex: 'type',
},
{
title: '版本号',
dataIndex: 'version',
},
{
title: '发布人',
dataIndex: 'uploadPerson',
},
{
title: '交易金额',
dataIndex: 'money',
slots: { customRender: 'money' },
},
{
title: '交易发起时间',
dataIndex: 'startTime',
},
{
title: '交易结束时间',
dataIndex: 'endTime',
},
{
title: '交易进度',
dataIndex: 'progress',
},
];
export const orderFormSchema: FormSchema[] = [
{
field: 'name',
component: 'Input',
componentProps: {
style: {
width: '90%',
},
placeholder: '请输入订单名称',
},
},
{
field: 'type',
component: 'Select',
componentProps: {
style: {
width: '90%',
},
options: [
{
label: '数据集',
value: '数据集',
},
{
label: '文件',
value: '文件',
},
{
label: 'API',
value: 'API',
},
{
label: '产品',
value: '产品',
},
],
placeholder: '请输入订单类型',
},
},
];
src/views/personalCenter/orderingInformation/orderData.ts 0 → 100644
View file @ e2936f4a
export const orderData = [
{
name: '年度财务报告',
type: '数据集',
version: 'v1.2',
uploadPerson: '张伟',
money: 10000,
startTime: '2024-12-01',
endTime: '-',
progress: '待支付',
},
{
name: '人力资源规划',
type: '数据集',
version: 'v2.0',
uploadPerson: '王芳',
money: 2000,
startTime: '2024-11-21',
endTime: '-',
progress: '待支付',
},
{
name: '市场分析报告',
type: '数据集',
version: 'v2.0',
uploadPerson: '王芳',
money: 2000,
startTime: '2024-11-21',
endTime: '2024-11-22',
progress: '已完成',
},
{
name: '数据分析API',
type: 'API',
version: 'v2.5',
uploadPerson: '刘云',
money: 40000,
startTime: '2024-12-01',
endTime: '2024-12-11',
progress: '已完成',
},
{
name: '月度销售报告',
type: '文件',
version: 'v1.1',
uploadPerson: '李伟',
money: 5000,
startTime: '2024-11-01',
endTime: '2024-11-30',
progress: '已完成',
},
{
name: '季度运营总结',
type: '文件',
version: 'v2.0',
uploadPerson: '孙涛',
money: 3000,
startTime: '2024-09-01',
endTime: '2024-09-30',
progress: '已完成',
},
// {
// name: '区块链交易平台',
// type: '产品',
// version: 'v2.0',
// uploadPerson: '刘波',
// startTime: '2024-06-01',
// endTime: '2024-12-01',
// progress: '已完成',
// },
// {
// name: '多语言翻译平台',
// type: '产品',
// version: 'v1.2',
// uploadPerson: '赵莉',
// startTime: '2024-08-01',
// endTime: '2024-12-01',
// progress: '已完成',
// },
];
src/views/personalCenter/orderingInformation/payModal.vue 0 → 100644
View file @ e2936f4a
<template>
<BasicModal
:canFullscreen="false"
width="80%"
v-bind="$attrs"
@register="registerModal"
:showCancelBtn="false"
:showOkBtn="false"
:title="'请付款'"
>
<div class="step-form-form">
<Steps :current="current">
<Steps.Step title="填写转账信息" />
<Steps.Step title="确认转账信息" />
<Steps.Step title="完成" />
</Steps>
</div>
<div class="mt-5">
<Step1 ref="step1" :goods="goods" @next="handleStep1Next" v-show="current === 0" />
<Step2
:goods="goods"
:money="my"
@prev="handleStepPrev"
@next="handleStep2Next"
v-show="current === 1"
v-if="state.initStep2"
/>
<Step3 v-show="current === 2" @redo="handleRedo" v-if="state.initStep3" />
</div>
</BasicModal>
</template>
<script lang="ts" setup>
import { BasicModal, useModalInner } from '@/components/Modal';
import { Steps } from 'ant-design-vue';
import { nextTick, reactive, ref } from 'vue';
import Step1 from './Step1.vue';
import Step2 from './Step2.vue';
import Step3 from './Step3.vue';
// 初始化
const current = ref(0);
const state = reactive({
initStep2: false,
initStep3: false,
});
const goods = ref([]);
const step1 = ref();
let my = 0;
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
current.value = 0;
goods.value = data.goods;
my = 0;
goods.value.forEach((item) => {
my += item.money;
});
if (step1.value) {
step1.value.setFormValue({
money: my,
});
}
});
// 数据
/**
* 方法
*/
function handleStep1Next(step1Values: any) {
current.value++;
state.initStep2 = true;
console.log(step1Values);
}
function handleStepPrev() {
current.value--;
}
function handleStep2Next(step2Values: any) {
current.value++;
state.initStep3 = true;
console.log(step2Values);
}
function handleRedo() {
current.value = 0;
state.initStep2 = false;
state.initStep3 = false;
}
/**
* 模态框
*/
</script>
<style lang="less" scoped>
.step-form-content {
padding: 24px;
background-color: @component-background;
}
.step-form-form {
width: 750px;
margin: 0 auto;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment