feat:配送费配置

src/api/wallet/mch-manage.ts

@@ -72,6 +72,28 @@ export function putObj(obj?: Object) {
 	})
 }
 
+/**
+ * 查询或者创建外卖配置
+ */
+export function getOrCreateTakeOut(params?: any) {
+	return request({
+		url: "/wallet/wallet-manage/get-or-create-take-out",
+		method: "get",
+		params: params,
+	})
+}
+
+/**
+ * 编辑外卖配置
+ */
+export function editTakeOut(data?: any) {
+	return request({
+		url: "/wallet/wallet-manage/edit-take-out",
+		method: "post",
+		data,
+	})
+}
+
 /**
  * 商户下拉
  * @param type

src/views/mch/mch-manage/components/take-out-form.vue

@@ -0,0 +1,133 @@
+<template>
+    <el-dialog title="编辑外卖配置" v-model="visible" :close-on-click-modal="false" draggable>
+        <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="120px"
+            v-loading="loading">
+            <el-row :gutter="24">
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="是否启用" prop="enable">
+                        <dict-select v-model="form.enable" dict-code="yes_no_type" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="起送价格" prop="minDeliveryAmt">
+                        <el-input-number v-model="form.minDeliveryAmt" :min="0" :max="100" step="1"
+                            placeholder="请输入起送价格" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="商家配送费" prop="mchTakeOutAmt">
+                        <el-input-number v-model="form.mchTakeOutAmt" :min="0" :max="100" step="1"
+                            placeholder="请输入商家配送费" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="24" class="mb20">
+                    <el-form-item label="用户配送费" prop="userTakeOutAmt">
+                        <el-input-number v-model="form.userTakeOutAmt" :min="0" :max="100" step="1"
+                            placeholder="请输入用户配送费" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+                <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="MchTakeOutSettingDialog">
+import { useDict } from '/@/hooks/dict';
+import { useMessage } from "/@/hooks/message";
+import { displayPrice, storePrice } from "/@/utils/formatMoney"
+
+import * as mchManageApi from "/@/api/wallet/mch-manage";
+
+const emit = defineEmits(['refresh']);
+
+// 定义变量内容
+const dataFormRef = ref();
+const visible = ref(false)
+const loading = ref(false)
+// 定义字典
+
+// 提交表单数据
+const form = reactive({
+    id: '',
+    merchantId: '',
+    enable: '',
+    minDeliveryAmt: '',
+    mchTakeOutAmt: '',
+    userTakeOutAmt: '',
+});
+
+// 定义校验规则
+const dataRules = ref({
+    enable: [{ required: true, message: '是否启用不能为空', trigger: 'change' }],
+    minDeliveryAmt: [{ required: true, message: '起送价格不能为空', trigger: 'change' }],
+    mchTakeOutAmt: [{ required: true, message: '商家配送费不能为空', trigger: 'change' }],
+    userTakeOutAmt: [{ required: true, message: '用户配送费不能为空', trigger: 'change' }],
+})
+
+// 打开弹窗
+const openDialog = (mchId: string) => {
+    visible.value = true
+    form.id = ''
+    // 重置表单数据
+    nextTick(() => {
+        dataFormRef.value?.resetFields();
+    });
+    // 获取mchTakeOutSetting信息
+    if (mchId) {
+        getmchTakeOutSettingData(mchId)
+    }
+};
+
+// 提交
+const onSubmit = async () => {
+    const valid = await dataFormRef.value.validate().catch(() => { });
+    if (!valid) return false;
+
+    try {
+        loading.value = true;
+        const _params = {
+            ...form,
+            minDeliveryAmt: storePrice(form.minDeliveryAmt),
+            mchTakeOutAmt: storePrice(form.mchTakeOutAmt),
+            userTakeOutAmt: storePrice(form.userTakeOutAmt),
+        }
+        await mchManageApi.editTakeOut(_params)
+        useMessage().success(form.id ? '修改成功' : '添加成功');
+        visible.value = false;
+        emit('refresh');
+    } catch (err: any) {
+        useMessage().error(err.msg);
+    } finally {
+        loading.value = false;
+    }
+};
+
+
+// 初始化表单数据
+const getmchTakeOutSettingData = async (mchId: string) => {
+    // 获取数据
+    loading.value = true
+    try {
+        const { data } = await mchManageApi.getOrCreateTakeOut({ merchId: mchId })
+        data.minDeliveryAmt = displayPrice(data.minDeliveryAmt, "", 0)
+        data.mchTakeOutAmt = displayPrice(data.mchTakeOutAmt, "", 0)
+        data.userTakeOutAmt = displayPrice(data.userTakeOutAmt, "", 0)
+        Object.assign(form, data)
+    } catch (error) {
+        console.log("获取外卖配置失败", error);
+    } finally {
+        loading.value = false
+    }
+};
+
+// 暴露变量
+defineExpose({
+    openDialog
+});
+</script>

src/views/mch/mch-manage/components/take-out-setting.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="take-card">
+        <div class="flex justify-end pr-[10px]">
+            <el-button icon="Edit" circle @click="takeOutFormRef.openDialog(state.mchId)" />
+            <el-button icon="RefreshRight" circle @click="getTakeOutSettingDetail" />
+        </div>
+        <div class="take-info">
+            <div class="take-info-item">
+                <span>是否启用:</span>
+                <span>
+                    <dict-tag :options="yes_no_type" :value="state.takeOutSetting?.enable" />
+                </span>
+            </div>
+            <div class="take-info-item">
+                <span>起送价格:</span>
+                <span>
+                    {{ displayPrice(state.takeOutSetting?.minDeliveryAmt || 0) }}
+                </span>
+            </div>
+            <div class="take-info-item">
+                <span>商家配送费:</span>
+                <span>
+                    {{ displayPrice(state.takeOutSetting?.mchTakeOutAmt || 0) }}
+                </span>
+            </div>
+            <div class="take-info-item">
+                <span>用户配送费:</span>
+                <span>
+                    {{ displayPrice(state.takeOutSetting?.userTakeOutAmt || 0) }}
+                </span>
+            </div>
+        </div>
+        <take-out-form ref="takeOutFormRef" @refresh="getTakeOutSettingDetail" />
+    </div>
+</template>
+
+<script setup lang="ts" name="TakeOutSetting">
+import { displayPrice, storePrice } from "/@/utils/formatMoney"
+import { useDict } from "/@/hooks/dict"
+
+const TakeOutForm = defineAsyncComponent(() => import("./take-out-form.vue"));
+
+import * as mchManageApi from "/@/api/wallet/mch-manage";
+
+const { yes_no_type } = useDict('yes_no_type')
+
+const props = withDefaults(defineProps<{
+    mchId: string
+}>(), {
+    mchId: ""
+})
+
+const takeOutFormRef = ref()
+const state = reactive<any>({
+    mchId: null,
+    takeOutSetting: {}
+})
+
+watch(
+    () => props.mchId,
+    (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+            state.mchId = newVal
+            getTakeOutSettingDetail()
+        }
+    }, { immediate: true }
+)
+
+// 获取食堂设置详情
+async function getTakeOutSettingDetail() {
+    try {
+        const { data, code } = await mchManageApi.getOrCreateTakeOut({ merchId: state.mchId })
+        if (code != 0) {
+            throw new Error()
+        }
+        state.takeOutSetting = data
+    } catch (error) {
+        console.log("获取食堂设置详情", error);
+    }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.take-card {
+    width: 100%;
+    border-radius: 4px;
+    margin-bottom: 5px;
+}
+
+.take-info {
+    padding: 10px 10px;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 10px;
+
+    &-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        >span:first-child {
+            width: 20%;
+            color: #333;
+            font-size: 13px;
+            font-weight: 500;
+        }
+
+        >span:last-child {
+            flex: 1;
+            color: #666;
+            font-size: 13px;
+        }
+    }
+}
+</style>

src/views/mch/mch-manage/detail.vue

@@ -0,0 +1,222 @@
+<template>
+    <div class="layout-padding">
+        <div class="card">
+            <div class="title">基本信息</div>
+            <div class="info">
+                <div class="info-item">
+                    <span>商户logo:</span>
+                    <span>
+                        <preview-image width="40px" height="40px" :src="state.mchInfo.logoPic" />
+                    </span>
+                </div>
+                <div class="info-item">
+                    <span>商户编号:</span>
+                    <span>
+                        {{ state.mchInfo.id }}
+                    </span>
+                </div>
+                <div class="info-item">
+                    <span>商户名称:</span>
+                    <span>
+                        {{ state.mchInfo.name }}
+                    </span>
+                </div>
+                <div class="info-item">
+                    <span>所属部门:</span>
+                    <span>
+                        {{ state.mchInfo.deptName }}
+                    </span>
+                </div>
+                <div class="info-item">
+                    <span>商户类型:</span>
+                    <span>
+                        <div v-if="state.mchInfo?.types" class="flex justify-center items-center">
+                            <div v-for="(v, i) in state.mchInfo.types?.split(',')" :key="i" class="mr-1">
+                                <dict-tag :options="merchant_type" :value="v" />
+                            </div>
+                        </div>
+                        <el-tag v-if="state.mchInfo?.catgoryName" type="primary">
+                            {{ state.mchInfo.catgoryName }}
+                        </el-tag>
+                    </span>
+                </div>
+                <div class="info-item">
+                    <span>联系电话:</span>
+                    <span>
+                        {{ state.mchInfo.phone }}
+                    </span>
+                </div>
+                <div class="info-item">
+                    <span>营业时间:</span>
+                    <span>
+                        {{ state.mchInfo.deptName }}
+                    </span>
+                </div>
+                <div class="info-item">
+                    <span>店铺地址:</span>
+                    <span>
+                        {{ state.mchInfo.addressDes }}
+                    </span>
+                </div>
+            </div>
+        </div>
+        <div class="flex gap-3">
+            <div class="card">
+                <div class="title">收款码</div>
+                <div class="info" style="grid-template-columns: repeat(2, minmax(0, 1fr))">
+                    <div class="info-item">
+                        <span>收款码:</span>
+                        <span>
+                            <preview-image width="40px" height="40px" :src="state.mchInfo.collectionCode" />
+                        </span>
+                    </div>
+                    <div class="info-item">
+                        <span>url收款码:</span>
+                        <span>
+                            <preview-image width="40px" height="40px" :src="state.mchInfo.collectionUrlCode" />
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="title">轮播图</div>
+                <div class="info" style="grid-template-columns: repeat(2, minmax(0, 1fr))">
+                    <div class="info-item">
+                        <span>轮播图:</span>
+                        <span>
+                            <preview-image width="40px" height="40px" :src="state.mchInfo.swiperPic" />
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="main">
+            <div class="main-tab">
+                <el-tabs v-model="activeTab" class="demo-tabs">
+                    <el-tab-pane label="分店" name="FD_SETTING" />
+                    <el-tab-pane label="食堂" name="TAKE_OUT_SETTING" />
+                </el-tabs>
+            </div>
+            <div class="main-content">
+                <take-out-setting ref="takeOutSettingRef" :mchId="state.mchId" v-if="activeTab == 'TAKE_OUT_SETTING'" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="MchManageDetail">
+import * as mchManageApi from "/@/api/wallet/mch-manage";
+import { useDict } from "/@/hooks/dict"
+
+const TakeOutSetting = defineAsyncComponent(() => import("./components/take-out-setting.vue"));
+
+const { merchant_type } = useDict("merchant_type")
+
+const activeTab = ref("FD_SETTING")
+
+const takeOutSettingRef = ref()
+
+const state = reactive<any>({
+    mchId: null,
+    mchInfo: {}
+})
+
+onMounted(() => {
+    const route = useRoute();
+    state.mchId = route.query.mchId;
+    getMchInfoDetail()
+})
+
+// 获取商户详情
+const getMchInfoDetail = async () => {
+    if (!state.mchId) {
+        return
+    }
+    try {
+        const { data, code } = await mchManageApi.getObj(state.mchId)
+        if (code != 0) {
+            throw new Error()
+        }
+        state.mchInfo = data
+    } catch (error) {
+        console.log("获取商户详情失败", error);
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.card {
+    display: flex;
+    width: 100%;
+    background: var(--el-color-white);
+    border: 1px solid var(--el-border-color-light, #ebeef5);
+    border-radius: 4px;
+    margin-bottom: 5px;
+}
+
+.info {
+    padding: 10px 10px;
+    display: grid;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: 10px;
+
+    &-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        >span:first-child {
+            width: 20%;
+            color: #333;
+            font-size: 13px;
+            font-weight: 500;
+        }
+
+        >span:last-child {
+            flex: 1;
+            color: #666;
+            font-size: 13px;
+        }
+    }
+}
+
+.title {
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+
+    &::before {
+        content: "";
+        display: block;
+        width: 4px;
+        height: 15px;
+        margin-right: 4px;
+        border-radius: 2px;
+        background: var(--el-color-primary);
+    }
+}
+
+.main {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: 0 20px;
+    background: var(--el-color-white);
+    border: 1px solid var(--el-border-color-light, #ebeef5);
+    border-radius: 4px;
+
+    &-tab {
+        height: 10%;
+    }
+
+    &-content {
+        flex: 1;
+        overflow-y: scroll;
+    }
+}
+</style>

src/views/mch/mch-manage/index.vue

@@ -128,6 +128,9 @@
 					v-auths="['wallet_mchManage_refresh_qrcode', 'wallet_mchManage_setting', 'wallet_mchManage_edit', 'wallet_mchManage_del']"
 					min-width="300" align="center">
 					<template #default="{ row }">
+						<el-button icon="InfoFilled" text type="primary" @click="toMchDetail(row)">
+							详情
+						</el-button>
 						<el-button icon="RefreshRight" text type="primary" v-auth="'wallet_mchManage_refresh_qrcode'"
 							@click="refreshQrcode(row)">
 							刷新二维码
@@ -162,10 +165,12 @@ import { BasicTableProps, useTable } from "/@/hooks/table"
 import * as mchManangeApi from "/@/api/wallet/mch-manage"
 import { useMessage, useMessageBox } from "/@/hooks/message"
 import { useDict } from "/@/hooks/dict"
-import FormDialog from "./form.vue"
-import Setting from "./setting.vue"
 import { useUserInfo } from "/@/stores/userInfo"
 
+import FormDialog from "./form.vue"
+import Setting from "./setting.vue"
+
+const { push } = useRouter()
 const { merchant_type, wallet_type, yes_no_type } = useDict("merchant_type", "wallet_type", "yes_no_type")
 
 // 定义变量内容
@@ -200,6 +205,10 @@ const resetQuery = () => {
 	getDataList()
 }
 
+const toMchDetail = (row: any) => {
+	push({ path: "/mch/mch-manage/detail", query: { mchId: row.id } })
+}
+
 // 重新生成正元二维码
 const refreshQrcode = async (row: any) => {
 	try {