向文可
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