b2894lxlx/guofu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

整理商品管理模块

Browse Source
This commit is contained in:
赵忠林
2024-07-25 19:20:53 +08:00
parent 717c89a58e
commit cf0961afdd
48 changed files with 1814 additions and 965 deletions
Download Patch File Download Diff File Expand all files Collapse all files

428
src/components/Simulator/index.vue
View File

@@ -3,13 +3,14 @@
<div class="phone-header-black ele-fluid">
<div class="title ele-fluid">
<div class="title-bar">
<a class="back" @click="openUrl(`/mp-weixin/home`)"></a>
<span>{{ form.pageName || '商品详情' }}</span>
<span class="back"></span>
<span>{{ form.title || '首页' }}</span>
<a class="share" @click="onShare"></a>
</div>
</div>
</div>
<template v-if="form.showUserCard">
<!-- 会员信息卡片 -->
<template v-if="form.title == '我的'">
<a-popover>
<template #content> 点击更换背景 </template>
<div
@@ -41,229 +42,162 @@
@done="reload"
/>
</template>
<template v-if="form.showOrderCard">
<div class="order-card ele-cell">
<div
v-for="(item, index) in order"
:key="index"
class="ele-cell-content ele-text-center btn-center"
@click="openMpMenuEdit(item)"
>
<a-image :src="item.icon" :width="30" :preview="false" />
<span>{{ item.title }}</span>
</div>
</div>
</template>
<template v-if="form.showToolsCard">
<div class="tools-card">
<div
v-for="(item, index) in server"
:key="index"
class="ele-cell"
@click="openMpMenuEdit(item)"
>
<a-avatar :src="item.icon" :size="24" />
<div
class="title ele-cell-content"
:style="{ color: item.color || '#333333' }"
>{{ item.title }}</div
>
<RightOutlined class="ele-text-secondary" />
</div>
</div>
<MpMenuEdit
v-model:visible="showMpMenuEdit"
:data="current"
@done="reload"
/>
</template>
<template v-if="form.title">
<div class="phone-body" style="overflow-y: auto; overflow-x: hidden">
<a-carousel arrows autoplay :dots="true">
<template #prevArrow>
<div class="custom-slick-arrow" style="left: 20px; z-index: 1">
<LeftCircleOutlined />
</div>
</template>
<template #nextArrow>
<div class="custom-slick-arrow" style="right: 40px">
<RightCircleOutlined />
</div>
</template>
<template v-if="form.fields">
<template
v-for="(img, index) in JSON.parse(form.fields)"
<!-- 幻灯片轮播 -->
<template v-if="form.showCarousel">
<div
class="ad-bar"
:style="{
backgroundImage: 'url(' + param.mp_user_top + ')'
}"
@click="onCarousel"
>
<a-carousel arrows autoplay :dots="true">
<template v-if="adImageList">
<template v-for="(img, index) in adImageList" :key="index">
<div class="ad-item">
<a-image
:preview="false"
:src="img.url"
width="100%"
height="200px"
/>
</div>
</template>
</template>
</a-carousel>
</div>
</template>
<!-- 导航菜单 -->
<template v-if="mpMenus">
<!-- 单排 -->
<div class="order-card ele-cell">
<div
v-for="(item, index) in mpMenus"
:key="index"
class="ele-cell-content ele-text-center btn-center"
@click="openMpMenuEdit(item)"
>
<div class="ad-item">
<a-image :preview="false" :src="img" width="100%" />
<a-image :src="item.avatar" :width="40" :preview="false" />
<span style="white-space: nowrap">{{ item.title }}</span>
</div>
</div>
<!-- <MpMenuEdit-->
<!-- v-model:visible="showMpMenuEdit"-->
<!-- :data="current"-->
<!-- @done="reload"-->
<!-- />-->
</template>
<!-- 商户列表 -->
<template v-if="form.showShopCard">
<div class="merchant-card-title">场地预定</div>
<div
class="merchant-card ele-cell"
v-for="(item, index) in shopList"
:key="index"
>
<a-image :src="item.image" :width="96" :preview="false" />
<div class="merchant-info ele-cell-content">
<div class="merchant-name">{{ item.merchantName }}</div>
<div class="merchant-desc ele-cell-desc">
{{ item.comments }}
</div>
</template>
</template>
<template v-else>
<div class="ad-item">
<a-image :preview="false" :src="form.image" width="100%" />
</div>
</template>
</a-carousel>
<a-card
v-if="form.title"
class="goods"
:bordered="false"
:body-style="{ padding: '16px' }"
>
<div class="ele-cell price ele-text-danger">
<div class="ele-cell-content ele-cell">
<span class="ele-text-danger"><sub>￥</sub></span>
<a-statistic
:precision="2"
:value="`${form.price ? form.price : 0}`"
:valueStyle="{ color: 'var(--error-color)' }"
/>
</div>
<div class="ele-cell-desc">已售 {{ formatNumber(form.sales) }}</div>
<!-- <div class="">-->
<!-- <a-button>我要去</a-button>-->
<!-- </div>-->
</div>
<div class="ele-cell-title">{{ form.title }}</div>
<div class="ele-cell goods-attr">
<div class="ele-cell-content">
<a-tag color="orange">交通银行满减</a-tag>
<a-tag color="orange">满30减10</a-tag>
</template>
<!-- 培训课程 -->
<template v-if="form.showTtrainCard">
<div class="merchant-card-title">培训课程</div>
<div
class="merchant-card ele-cell"
v-for="(item, index) in shopList"
:key="index"
@click="openMpMenuEdit(item)"
>
<a-image :src="item.image" :width="96" :preview="false" />
<div class="merchant-info ele-cell-content">
<div class="merchant-name">{{ item.merchantName }}</div>
<div class="merchant-desc ele-cell-desc">
{{ item.comments }}
</div>
</div>
</div>
</a-card>
<a-divider class="goods-divider" />
<a-card
class="goods"
:bordered="false"
:body-style="{ padding: '8px 16px' }"
>
<div class="ele-cell goods-attr">
<div class="ele-text-secondary">已选择：</div>
<div class="ele-cell-content">颜色</div>
<div class="ele-cell-desc"><RightOutlined /></div>
</div>
</a-card>
<a-divider class="goods-divider" />
<a-card
class="goods"
:bordered="false"
:body-style="{ padding: '8px 16px' }"
>
<div class="ele-cell goods-attr">
<div class="ele-text-secondary">用户评价(0)</div>
<div class="ele-cell-content"></div>
</div>
</a-card>
<a-divider style="padding: 0 30px">商品详情</a-divider>
<a-card
class="goods"
:bordered="false"
:body-style="{ padding: '16px' }"
>
<!-- 文档内容 -->
<tinymce-editor
id="content"
v-model:value="form.content"
:disabled="true"
:init="config"
/>
</a-card>
<div class="goods-content" v-if="form.files">
<template v-for="(img, index) in JSON.parse(form.files)" :key="index">
<div class="ad-item">
<a-image :preview="false" :src="img" width="100%" />
</div>
</template>
</div>
<a-card
class="buy-bar"
:bordered="false"
:body-style="{ padding: '12px 16px' }"
>
<div class="ele-cell">
<div class="shop-btn ele-text-secondary">
<ShopOutlined class="icon ele-text-danger" />
店铺
</div>
<div class="kefu-btn ele-text-secondary">
<CustomerServiceOutlined class="icon ele-text-warning" />
客服
</div>
<div class="star-btn ele-text-secondary">
<StarOutlined class="icon" />
收藏
</div>
<div class="ele-cell-content buy-btn">
<a-space :size="0">
<a-button class="add-cart">加入购物车</a-button
><a-button class="buy-now">立即购买</a-button>
</a-space>
</div>
</div>
</a-card>
</template>
</div>
</template>
<a-card
class="buy-bar"
:bordered="false"
v-if="form"
:body-style="{ padding: '12px 16px' }"
>
<div class="ele-cell">
<template v-for="(item, index) in tabBar" :key="index">
<a
class="home-btn ele-cell-content ele-text-secondary"
@click="openUrl(`/mp-design/${item.id}`)"
>
<component
v-if="item.icon"
class="icon"
:class="form.id === item.id ? 'ele-text-danger' : ''"
:is="item.icon"
/>
<span :class="form.id === item.id ? 'ele-text-danger' : ''">{{
item.title
}}</span>
</a>
</template>
</div>
</a-card>
<AdEdit v-model:visible="showAdEdit" :data="ad" @done="reload" />
</div>
</template>
<script lang="ts" setup>
import {
LeftCircleOutlined,
RightCircleOutlined,
RightOutlined,
ShopOutlined,
CustomerServiceOutlined,
StarOutlined
} from '@ant-design/icons-vue';
import { formatNumber } from 'ele-admin-pro/es';
import { ref } from 'vue';
import { ref, watch } from 'vue';
import { MpWeixinParam, WebsiteField } from '@/api/cms/website/field/model';
import { listWebsiteField } from '@/api/system/website/field';
import UserCardEdit from '@/views/cms/field/components/website-field-edit.vue';
import MpMenuEdit from '@/views/cms/mpDesign/components/mpMenuEdit.vue';
import { MpMenu } from '@/api/cms/mp-menu/model';
import { listMpMenu } from '@/api/cms/mp-menu';
import type { MpPages } from '@/api/cms/mpPages/model';
import { openUrl } from '@/utils/common';
withDefaults(
// import MpMenuEdit from './mpMenuEdit.vue';
import { Ad } from '@/api/cms/ad/model';
import AdEdit from '@/views/cms/ad/components/ad-edit.vue';
import UserCardEdit from '@/views/cms/field/components/website-field-edit.vue';
const prpos = withDefaults(
defineProps<{
value?: string;
placeholder?: string;
form?: any | null;
form?: MpPages;
tabBar?: MpPages[];
type?: number;
list?: any[] | null;
mpMenus?: any[] | null;
refresh?: boolean;
}>(),
{
placeholder: undefined
}
);
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
const param = ref<MpWeixinParam>({});
const showUserCardEdit = ref(false);
const showMpMenuEdit = ref(false);
const showAdEdit = ref(false);
const ad = ref<Ad>();
// 当前编辑数据
const current = ref<WebsiteField | null>(null);
// 订单图标
const order = ref<any[]>();
// 服务图标
const server = ref<any[]>();
const config = ref({
selector: '#content', //容器，可使用css选择器
branding: false,
language: 'zh_CN', //调用放在langs文件夹内的语言包
toolbar: false, //隐藏工具栏
menubar: false, //隐藏菜单栏
inline: true, //开启内联模式
plugins: [] //选择需加载的插件
//选中时出现的快捷工具，与插件有依赖关系
// quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
// init_instance_callback: function (editor) {
// editor.setContent('这里是你的内容字符串');
// }
});
/* 打开编辑弹窗 */
const openUserCard = (row?: WebsiteField) => {
current.value = row ?? null;
@@ -276,29 +210,41 @@
showMpMenuEdit.value = true;
};
const onShare = () => {
const onShare = () => {};
}
const onCarousel = (row?: Ad) => {
showAdEdit.value = true;
};
const reload = () => {};
const reload = () => {
emit('done');
};
listWebsiteField({}).then((list) => {
list.map((d) => {
const key = String(d.name);
param.value[key] = d.value;
});
});
reload();
listMpMenu({}).then((list) => {
server.value = list.filter((d) => d.type == 0);
order.value = list.filter((d) => d.type == 1);
});
watch(
() => prpos.refresh,
(refresh) => {
if (refresh) {
reload();
}
},
{ immediate: true }
);
</script>
<script lang="ts">
import * as MenuIcons from '@/layout/menu-icons';
export default {
name: 'Simulator',
components: MenuIcons
};
</script>
<style lang="less" scoped>
.phone-layout {
position: fixed;
right: 16px;
right: 26px;
width: 390px;
height: 844px;
background: url('@/assets/img/app-ui.png');
@@ -318,6 +264,7 @@
justify-content: center;
align-items: end;
padding-bottom: 13px;
.title-bar {
width: 100%;
display: flex;
@@ -325,7 +272,8 @@
.back {
display: block;
width: 50px;
cursor: pointer;
margin-left: 3px;
background-color: #ffffff;
}
.share {
display: block;
@@ -335,6 +283,11 @@
}
}
}
.ad-bar {
background-color: var(--grey-10);
background-repeat: no-repeat;
background-size: cover;
}
.phone-body-bg {
padding: 0 16px;
height: 680px;
@@ -389,9 +342,10 @@
justify-content: center;
align-items: center;
}
.home-btn,
.shop-btn,
.kefu-btn,
.star-btn {
.order-btn,
.user-btn {
display: flex;
flex-direction: column;
font-size: 13px;
@@ -474,20 +428,43 @@
}
}
.order-card {
width: 340px;
height: 80px;
margin: 0 1px;
background: #ffffff;
.menu-card {
width: 330px;
margin: 6px auto;
border-radius: 5px;
border-color: slategrey;
position: absolute;
top: 230px;
left: 24px;
.btn-center {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
.merchant-card-title {
width: 340px;
margin: 6px auto;
font-size: 20px;
font-weight: 500;
margin-top: 16px;
}
.merchant-card {
width: 340px;
max-height: 80px;
margin: 6px auto;
margin-bottom: 16px;
padding: 8px;
background: #ffffff;
border-radius: 5px;
border-color: slategrey;
.merchant-name {
font-weight: 500;
font-size: 15px;
}
.merchant-desc {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@@ -511,4 +488,23 @@
justify-content: center;
}
}
.order-card {
width: 330px;
height: 80px;
margin: 0 auto;
padding: 8px;
background: #ffffff;
border-radius: 5px;
border-color: slategrey;
//position: absolute;
//top: 230px;
//left: 24px;
.btn-center {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
</style>