263 lines
7.3 KiB
Vue
263 lines
7.3 KiB
Vue
<!-- 编辑弹窗 -->
|
||
<template>
|
||
<ele-modal
|
||
:width="1000"
|
||
:visible="visible"
|
||
:maskClosable="false"
|
||
:maxable="maxable"
|
||
:title="isUpdate ? '支付结算' : '支付结算'"
|
||
okText="确定收款"
|
||
:ok-button-props="{ disabled: !user }"
|
||
:body-style="{
|
||
padding: '0',
|
||
paddingBottom: '0',
|
||
backgroundColor: '#f3f3f3'
|
||
}"
|
||
@update:visible="updateVisible"
|
||
@ok="save"
|
||
>
|
||
<!-- {{ form }}-->
|
||
<div class="flex justify-between py-3 px-4 columns-3 gap-3">
|
||
<div class="payment flex flex-col bg-white px-4 py-2">
|
||
<div class="title text-gray-500 leading-10">请选择支付方式</div>
|
||
<template v-for="(item, index) in payments" :key="index">
|
||
<div
|
||
class="item border-2 border-solid px-3 py-1 flex items-center mb-2 cursor-pointer"
|
||
:class="
|
||
form.type === item.type
|
||
? 'active border-red-300'
|
||
: 'border-gray-200'
|
||
"
|
||
@click="onType(item)"
|
||
>
|
||
<a-avatar :src="item.image" />
|
||
<text class="pl-1">{{ item.name }}</text>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="settlement flex flex-col bg-white px-4 py-2 flex-1">
|
||
<div class="title text-gray-500 leading-10">结算信息</div>
|
||
<div class="comments">
|
||
<a-textarea
|
||
:rows="4"
|
||
:maxlength="200"
|
||
placeholder="备注信息"
|
||
v-model:value="form.comments"
|
||
/>
|
||
</div>
|
||
<div class="discount flex mt-3">
|
||
<div class="item w-1/2">
|
||
折扣(折)
|
||
<div class="input">
|
||
<a-input-number
|
||
allow-clear
|
||
min="0"
|
||
max="10"
|
||
placeholder="请输入折扣"
|
||
style="width: 200px"
|
||
v-model:value="form.discount"
|
||
@input="onDiscount"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="item w-1/2">
|
||
立减
|
||
<div class="input">
|
||
<a-input-number
|
||
allow-clear
|
||
placeholder="请输入立减金额"
|
||
style="width: 200px"
|
||
v-model:value="form.reducePrice"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="discount flex mt-8 items-center h-20 leading-10">
|
||
<div class="item w-1/2"> 优惠金额：￥0.00</div>
|
||
<div class="item w-1/2 text-xl">
|
||
实付金额：￥<span class="text-red-500 text-2xl">{{
|
||
formatNumber(data.totalPrice)
|
||
}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="user-bar flex flex-col bg-white px-4 py-2">
|
||
<div class="title text-gray-500 leading-10">会员信息</div>
|
||
<div class="user-info text-center" v-if="!user">
|
||
<a-empty :description="`当前为游客`" class="text-gray-300" />
|
||
<SelectUserByButton @done="selectUser" />
|
||
</div>
|
||
<view class="tox-user" v-if="user">
|
||
<div class="mb-2 flex justify-between items-center">
|
||
<div class="avatar">
|
||
<a-avatar :src="user.avatar" :size="40" />
|
||
<text class="ml-1 text-gray-500">{{ user.nickname }}</text>
|
||
</div>
|
||
<CloseOutlined @click="removeUser" />
|
||
</div>
|
||
<div
|
||
class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
|
||
>名称：{{ user.realName }}
|
||
</div>
|
||
<div
|
||
class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
|
||
>手机号：{{ user.mobile || '未绑定' }}
|
||
</div>
|
||
<div
|
||
class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
|
||
>可用余额：{{ user.balance }}
|
||
</div>
|
||
<div
|
||
class="border-dashed py-1 px-2 border-gray-300 text-gray-500 mt-2"
|
||
>可用积分：{{ user.points }}
|
||
</div>
|
||
</view>
|
||
</div>
|
||
</div>
|
||
<UserForm v-model:visible="showUserForm" :type="type" @done="reload" />
|
||
</ele-modal>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { CloseOutlined } from '@ant-design/icons-vue';
|
||
import { ref, watch, reactive } from 'vue';
|
||
import { message } from 'ant-design-vue';
|
||
import { FormInstance } from 'ant-design-vue/es/form';
|
||
import { formatNumber } from 'ele-admin-pro/es';
|
||
import { listPayment } from '@/api/system/payment';
|
||
import { Payment } from '@/api/system/payment/model';
|
||
import { User } from '@/api/system/user/model';
|
||
import { Cashier } from '@/api/shop/cashier/model';
|
||
import { addOrder, updateOrder } from '@/api/shop/order';
|
||
import { Order } from '@/api/shop/order/model';
|
||
|
||
// 是否是修改
|
||
const isUpdate = ref(false);
|
||
|
||
const props = defineProps<{
|
||
// 弹窗是否打开
|
||
visible: boolean;
|
||
// 类型 0服务 1订单
|
||
type?: number;
|
||
// 修改回显的数据
|
||
data?: Cashier | null;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'done'): void;
|
||
(e: 'update:visible', visible: boolean): void;
|
||
}>();
|
||
|
||
// 用户信息
|
||
const form = reactive<Order>({
|
||
// ID
|
||
// 类型 0商城 1外卖
|
||
type: 4,
|
||
// 唯一标识
|
||
// 商品价格
|
||
price: undefined,
|
||
// 单商品合计
|
||
totalPrice: undefined,
|
||
// 商户ID
|
||
merchantId: undefined,
|
||
// 用户ID
|
||
userId: undefined,
|
||
// 租户id
|
||
tenantId: undefined,
|
||
// 创建时间
|
||
createTime: undefined,
|
||
// 修改时间
|
||
updateTime: undefined
|
||
});
|
||
|
||
// 提交状态
|
||
const loading = ref(false);
|
||
// 是否显示最大化切换按钮
|
||
const maxable = ref(true);
|
||
// 表格选中数据
|
||
const formRef = ref<FormInstance | null>(null);
|
||
const disabled = ref<boolean>(true);
|
||
const payments = ref<Payment[]>();
|
||
const showUserForm = ref<boolean>(false);
|
||
const user = ref<User | null>();
|
||
|
||
/* 更新visible */
|
||
const updateVisible = (value: boolean) => {
|
||
emit('update:visible', value);
|
||
};
|
||
|
||
const selectUser = (item: User) => {
|
||
user.value = item;
|
||
};
|
||
|
||
const onType = (item: Payment) => {
|
||
form.type = item.type;
|
||
};
|
||
|
||
const removeUser = () => {
|
||
user.value = null;
|
||
};
|
||
|
||
/* 保存编辑 */
|
||
const save = () => {
|
||
loading.value = true;
|
||
const formData = {
|
||
...form
|
||
};
|
||
const saveOrUpdate = isUpdate.value ? updateOrder : addOrder;
|
||
saveOrUpdate(formData)
|
||
.then((msg) => {
|
||
loading.value = false;
|
||
message.success(msg);
|
||
updateVisible(false);
|
||
emit('done');
|
||
})
|
||
.catch((e) => {
|
||
loading.value = false;
|
||
message.error(e.message);
|
||
});
|
||
};
|
||
|
||
const reload = () => {
|
||
listPayment({}).then((data) => {
|
||
payments.value = data;
|
||
});
|
||
};
|
||
|
||
watch(
|
||
() => props.visible,
|
||
(visible) => {
|
||
if (visible) {
|
||
reload();
|
||
}
|
||
}
|
||
);
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.active {
|
||
position: relative;
|
||
border: 2px solid #007cec;
|
||
&:before {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
border: 11px solid #007cec;
|
||
border-top-color: transparent;
|
||
border-left-color: transparent;
|
||
}
|
||
&:after {
|
||
content: '';
|
||
width: 4px;
|
||
height: 8px;
|
||
position: absolute;
|
||
right: 3px;
|
||
bottom: 4px;
|
||
border: 1px solid #fff;
|
||
border-top-color: transparent;
|
||
border-left-color: transparent;
|
||
transform: rotate(45deg);
|
||
}
|
||
}
|
||
</style>
|