向文可
4 years ago
parent
615e1fc04c
commit
26c96680d6
@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<component :is="render" />
|
||||||
|
</template>
|
||||||
|
<script setup lang="jsx">
|
||||||
|
import data from 'china-area-data';
|
||||||
|
import ElCascader from './extra/ElCascader.vue';
|
||||||
|
const props = defineProps({
|
||||||
|
props: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
expandTrigger: 'hover',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const attrs = useAttrs();
|
||||||
|
const slots = useSlots();
|
||||||
|
const convert = (obj) =>
|
||||||
|
obj
|
||||||
|
? Object.entries(obj).map((entry) => {
|
||||||
|
return { label: entry[1], value: entry[0], children: convert(data[entry[0]]) };
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
const options = convert(data[86]);
|
||||||
|
const render = () => <ElCascader {...{ ...props, options }} {...attrs} v-slots={slots} />;
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog v-model="state.visible" title="修改收货人信息">
|
||||||
|
<el-form ref="refsForm" v-loading="state.submitting" :model="state.form" :rules="state.rules">
|
||||||
|
<el-form-item label="收货人姓名" prop="recipientName">
|
||||||
|
<el-input v-model="state.form.recipientName" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="手机号码" prop="recipientPhone">
|
||||||
|
<el-input v-model="state.form.recipientPhone" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="所在区域" prop="area">
|
||||||
|
<el-area v-model="state.form.area" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="详细地址" prop="recipientAddress">
|
||||||
|
<el-input v-model="state.form.recipientAddress" type="textarea" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="close">取消</el-button>
|
||||||
|
<el-button :loading="state.submitting" type="primary" @click="handleSave">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
const store = useStore();
|
||||||
|
|
||||||
|
const refsForm = ref(null);
|
||||||
|
const state = reactive({
|
||||||
|
submitting: false,
|
||||||
|
visible: false,
|
||||||
|
order: null,
|
||||||
|
form: {
|
||||||
|
orderId: null,
|
||||||
|
area: [],
|
||||||
|
recipientName: null,
|
||||||
|
recipientPhone: null,
|
||||||
|
recipientAddress: null,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
orderId: [{ required: true, message: '订单ID不能为空' }],
|
||||||
|
area: [{ required: true, message: '省市区不能为空' }],
|
||||||
|
recipientName: [{ required: true, message: '收货人姓名不能为空' }],
|
||||||
|
recipientPhone: [{ required: true, message: '收货人手机不能为空' }],
|
||||||
|
recipientAddress: [{ required: true, message: '详细地址不能为空' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const show = (order) => {
|
||||||
|
state.order = order;
|
||||||
|
state.form = {
|
||||||
|
orderId: order.orderId,
|
||||||
|
area: [],
|
||||||
|
recipientName: order.logistics?.recipientName,
|
||||||
|
recipientPhone: order.logistics?.recipientPhone,
|
||||||
|
recipientAddress: order.logistics?.recipientAddress,
|
||||||
|
};
|
||||||
|
state.visible = true;
|
||||||
|
};
|
||||||
|
const close = () => {
|
||||||
|
state.visible = false;
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
show,
|
||||||
|
close,
|
||||||
|
});
|
||||||
|
const handleSave = async () => {
|
||||||
|
state.submitting = true;
|
||||||
|
try {
|
||||||
|
await unref(refsForm).validate();
|
||||||
|
let res = await store.dispatch('order/address', state.form);
|
||||||
|
if (res) {
|
||||||
|
Object.assign(state.order, state.form);
|
||||||
|
state.visible = false;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消关闭', e);
|
||||||
|
}
|
||||||
|
state.submitting = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog v-model="state.visible" title="修改费用信息">
|
||||||
|
<el-form ref="refsForm" v-loading="state.submitting" :model="state.form" :rules="state.rules">
|
||||||
|
<el-form-item label="商品合计" prop="totalAmount">￥{{ state.order.totalAmount }}</el-form-item>
|
||||||
|
<el-form-item label="运费" prop="shippingAmount">
|
||||||
|
<el-input-number v-model="state.form.shippingAmount" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="活动优惠" prop="discountAmount">￥{{ state.order.discountAmount }}</el-form-item>
|
||||||
|
<el-form-item label="应付款金额" prop="payAmount">
|
||||||
|
<span class="red">￥{{ state.order.payAmount }}</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="close">取消</el-button>
|
||||||
|
<el-button :loading="state.submitting" type="primary" @click="handleSave">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="jsx">
|
||||||
|
const store = useStore();
|
||||||
|
|
||||||
|
const refsForm = ref(null);
|
||||||
|
const state = reactive({
|
||||||
|
submitting: false,
|
||||||
|
visible: false,
|
||||||
|
order: {},
|
||||||
|
form: {
|
||||||
|
orderId: null,
|
||||||
|
shippingAmount: 0,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
orderId: [{ required: true, message: '订单ID不能为空' }],
|
||||||
|
shippingAmount: [{ required: true, message: '运费不能为空' }],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const show = (order) => {
|
||||||
|
state.order = order;
|
||||||
|
state.form = {
|
||||||
|
orderId: order.orderId,
|
||||||
|
shippingAmount: order.shippingAmount,
|
||||||
|
};
|
||||||
|
state.visible = true;
|
||||||
|
};
|
||||||
|
const close = () => {
|
||||||
|
state.visible = false;
|
||||||
|
};
|
||||||
|
defineExpose({
|
||||||
|
show,
|
||||||
|
close,
|
||||||
|
});
|
||||||
|
const handleSave = async () => {
|
||||||
|
state.submitting = true;
|
||||||
|
try {
|
||||||
|
await unref(refsForm).validate();
|
||||||
|
let res = await store.dispatch('order/fees', state.form);
|
||||||
|
if (res) {
|
||||||
|
Object.assign(state.order, state.form);
|
||||||
|
state.visible = false;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.info('取消关闭', e);
|
||||||
|
}
|
||||||
|
state.submitting = false;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.red {
|
||||||
|
color: var(--el-color-danger);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue