Merge branch 'dev' of http://47.109.205.240:3000/Web/daimp-front into dev
This commit is contained in:
commit
e61189f4cc
13
main/.env.pre
Normal file
13
main/.env.pre
Normal file
@ -0,0 +1,13 @@
|
||||
# 本地环境
|
||||
VITE_APP_NAME = 'daimp-front-main'
|
||||
VITE_APP_TITLE = '数字农业产业管理平台'
|
||||
VITE_APP_SUB_OS = '//localhost:8090/sub-operation-service/'
|
||||
VITE_APP_SUB_OA = '//localhost:8090/sub-operation-admin/'
|
||||
VITE_APP_SUB_GAS = '//localhost:8090/sub-government-affairs-service/'
|
||||
VITE_APP_SUB_GAA = '//localhost:8090/sub-government-admin/'
|
||||
VITE_APP_SUB_GSS = '//localhost:8090/sub-government-screen-service/'
|
||||
# 接口
|
||||
VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_BASE_URL = ''
|
||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
VITE_APP_UPLOAD_URL = ''
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
const chartRef = ref(null);
|
||||
const { setOptions, getInstance, resize } = useEcharts(chartRef);
|
||||
const { setOptions, getInstance, resize, startAutoPlay } = useEcharts(chartRef);
|
||||
const option = reactive({
|
||||
tooltip: {
|
||||
formatter: '{b} ({c})',
|
||||
@ -74,6 +74,11 @@ export default {
|
||||
}
|
||||
option.series[0].data = props.chartData;
|
||||
setOptions(option);
|
||||
startAutoPlay({
|
||||
interval: 2000,
|
||||
seriesIndex: 0,
|
||||
showTooltip: true,
|
||||
});
|
||||
resize();
|
||||
getInstance()?.off('click', onClick);
|
||||
getInstance()?.on('click', onClick);
|
||||
|
||||
@ -6,6 +6,57 @@ import { useBreakpoint } from './useBreakpoint';
|
||||
import echarts from '../utils/echarts';
|
||||
|
||||
export const useEcharts = (elRef, theme = 'default') => {
|
||||
// 新增轮播相关状态
|
||||
const autoPlayTimer = ref(null);
|
||||
const currentIndex = ref(-1);
|
||||
const dataLength = ref(0);
|
||||
|
||||
// 新增方法 - 启动轮播
|
||||
const startAutoPlay = (options = {}) => {
|
||||
const {
|
||||
interval = 2000, // 轮播间隔(ms)
|
||||
seriesIndex = 0, // 默认操作第一个系列
|
||||
showTooltip = true, // 是否显示提示框
|
||||
} = options;
|
||||
|
||||
stopAutoPlay(); // 先停止已有轮播
|
||||
|
||||
// 获取数据长度
|
||||
const seriesData = unref(getOptions).series?.[seriesIndex]?.data;
|
||||
dataLength.value = seriesData?.length || 0;
|
||||
if (dataLength.value === 0) return;
|
||||
|
||||
autoPlayTimer.value = setInterval(() => {
|
||||
currentIndex.value = (currentIndex.value + 1) % dataLength.value;
|
||||
|
||||
// 执行轮播动作
|
||||
chartInstance?.dispatchAction({
|
||||
type: 'downplay',
|
||||
seriesIndex: seriesIndex,
|
||||
});
|
||||
chartInstance?.dispatchAction({
|
||||
type: 'highlight',
|
||||
seriesIndex: seriesIndex,
|
||||
dataIndex: currentIndex.value,
|
||||
});
|
||||
if (showTooltip) {
|
||||
chartInstance?.dispatchAction({
|
||||
type: 'showTip',
|
||||
seriesIndex: seriesIndex,
|
||||
dataIndex: currentIndex.value,
|
||||
});
|
||||
}
|
||||
}, interval);
|
||||
};
|
||||
|
||||
// 新增方法 - 停止轮播
|
||||
const stopAutoPlay = () => {
|
||||
if (autoPlayTimer.value) {
|
||||
clearInterval(autoPlayTimer.value);
|
||||
autoPlayTimer.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const getDarkMode = computed(() => {
|
||||
return theme === 'default' ? 'dark' : theme;
|
||||
});
|
||||
@ -31,6 +82,12 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
if (!el || !unref(el)) {
|
||||
return;
|
||||
}
|
||||
nextTick(() => {
|
||||
if (el.offsetWidth === 0 || el.offsetHeight === 0) {
|
||||
console.warn('图表容器不可见，延迟初始化');
|
||||
useTimeoutFn(() => initCharts(t), 100);
|
||||
return;
|
||||
}
|
||||
|
||||
chartInstance = echarts.init(el, t);
|
||||
const { removeEvent } = useEventListener({
|
||||
@ -45,9 +102,19 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
resizeFn();
|
||||
}, 30);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setOptions(options = {}, clear = true) {
|
||||
const mergedOptions = {
|
||||
animation: true,
|
||||
animationDuration: 3000,
|
||||
animationEasing: 'cubicOut',
|
||||
...unref(options),
|
||||
animationThreshold: 2000, // 数据量超过2000自动关闭动画
|
||||
animationDelayUpdate: (idx) => idx * 50, // 数据项延迟
|
||||
};
|
||||
cacheOptions.value = mergedOptions;
|
||||
cacheOptions.value = options;
|
||||
if (unref(elRef)?.offsetHeight === 0) {
|
||||
useTimeoutFn(() => {
|
||||
@ -98,6 +165,7 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
);
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
stopAutoPlay(); // 清理定时器
|
||||
if (!chartInstance) return;
|
||||
removeResizeFn();
|
||||
chartInstance.dispose();
|
||||
@ -115,7 +183,9 @@ export const useEcharts = (elRef, theme = 'default') => {
|
||||
setOptions,
|
||||
resize,
|
||||
echarts,
|
||||
getInstance,
|
||||
getInstance: () => chartInstance,
|
||||
registerMap,
|
||||
startAutoPlay, // 暴露轮播方法
|
||||
stopAutoPlay,
|
||||
};
|
||||
};
|
||||
|
||||
9
sub-government-affairs-service/.env.pre
Normal file
9
sub-government-affairs-service/.env.pre
Normal file
@ -0,0 +1,9 @@
|
||||
# 本地环境
|
||||
VITE_APP_MIAN = 'daimp-front-main'
|
||||
VITE_APP_MIAN_URL = 'http://localhost:8090'
|
||||
VITE_APP_NAME = 'sub-government-affairs-service'
|
||||
# 接口
|
||||
VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_BASE_URL = ''
|
||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
VITE_APP_UPLOAD_URL = ''
|
||||
2
sub-government-affairs-service/.gitignore
vendored
2
sub-government-affairs-service/.gitignore
vendored
@ -69,7 +69,7 @@ web_modules/
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
# .env
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
"dev": "vite --mode development",
|
||||
"build": "vite build --mode production",
|
||||
"test": "vite build --mode test",
|
||||
"local": "vite build --mode local",
|
||||
"pre": "vite build --mode pre",
|
||||
"preview": "vite preview",
|
||||
"format": "prettier --write 'src/**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'",
|
||||
"eslint": "npx eslint --init",
|
||||
|
||||
9
sub-government-screen-service/.env.pre
Normal file
9
sub-government-screen-service/.env.pre
Normal file
@ -0,0 +1,9 @@
|
||||
# 本地环境
|
||||
VITE_APP_MIAN = 'daimp-front-main'
|
||||
VITE_APP_MIAN_URL = 'http://localhost:8090'
|
||||
VITE_APP_NAME = 'sub-government-screen-service'
|
||||
# 接口
|
||||
VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_BASE_URL = ''
|
||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
VITE_APP_UPLOAD_URL = ''
|
||||
2
sub-government-screen-service/.gitignore
vendored
2
sub-government-screen-service/.gitignore
vendored
@ -69,7 +69,7 @@ web_modules/
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
# .env
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
@ -8,8 +8,10 @@ export {}
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
BaseBg: typeof import('./src/components/baseBg.vue')['default']
|
||||
'BaseBg copy': typeof import('./src/components/baseBg copy.vue')['default']
|
||||
CenterMap: typeof import('./src/components/centerMap.vue')['default']
|
||||
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||
copy: typeof import('./src/components/baseBg copy.vue')['default']
|
||||
CurrentTime: typeof import('./src/components/currentTime.vue')['default']
|
||||
CustomBack: typeof import('./src/components/customBack.vue')['default']
|
||||
CustomProgress: typeof import('./src/components/customProgress.vue')['default']
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
"dev": "vite --mode development",
|
||||
"build": "vite build --mode production",
|
||||
"test": "vite build --mode test",
|
||||
"local": "vite build --mode local",
|
||||
"pre": "vite build --mode pre",
|
||||
"preview": "vite preview",
|
||||
"format": "prettier --write 'src/**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'",
|
||||
"eslint": "npx eslint --init",
|
||||
|
||||
170
sub-government-screen-service/src/components/baseBg copy.vue
Normal file
170
sub-government-screen-service/src/components/baseBg copy.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<!-- :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }" -->
|
||||
<div class="data-warp">
|
||||
<div class="chart-content">
|
||||
<div class="top">
|
||||
<slot v-if="$slots.top" name="top"></slot>
|
||||
<div v-else class="top-content-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }">
|
||||
<div class="top-left"></div>
|
||||
<div class="top-content">
|
||||
{{ topTitle }}
|
||||
</div>
|
||||
<!-- <div class="top-right">{{ currentTime }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot name="center"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useApp } from '@/hooks';
|
||||
const router = useRouter();
|
||||
const props = defineProps({
|
||||
nameVal: {
|
||||
type: String,
|
||||
default: 'home',
|
||||
},
|
||||
topTitle: {
|
||||
type: String,
|
||||
default: '系统',
|
||||
},
|
||||
});
|
||||
|
||||
const navlist = ref([
|
||||
{ title: '首页', name: 'home' },
|
||||
{ title: '土地资源', name: 'land' },
|
||||
{ title: '投入品', name: 'inputs' },
|
||||
{ title: '生产经营主体', name: 'entities' },
|
||||
{ title: '智慧种植检测', name: 'plant' },
|
||||
{ title: '智慧养殖检测', name: 'breed' },
|
||||
{ title: '全流程溯源', name: 'trace' },
|
||||
{ title: '产业预警决策', name: 'early' },
|
||||
]);
|
||||
|
||||
let currentName = ref('home');
|
||||
|
||||
watch(
|
||||
() => props.nameVal,
|
||||
() => {
|
||||
currentName.value = props.nameVal;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
const itemAct = (name) => {
|
||||
currentName.value = name;
|
||||
router.push({ name: name });
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.data-warp {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.top,
|
||||
.content,
|
||||
.bottom {
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
background-size: cover;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.top {
|
||||
height: 55px;
|
||||
.top-content-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
.top-left,
|
||||
.top-content,
|
||||
.top-right {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.top-content {
|
||||
width: calc(100% - 400px);
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
transform: skewX(-8deg);
|
||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||
-webkit-background-clip: text;
|
||||
color: #fff;
|
||||
letter-spacing: 8px;
|
||||
text-shadow: -6px 0 0 1px #add8f1;
|
||||
}
|
||||
.top-left {
|
||||
width: 200px;
|
||||
}
|
||||
.top-right {
|
||||
text-align: right;
|
||||
width: 200px;
|
||||
color: #add8f1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
|
||||
.b-nav {
|
||||
margin: auto;
|
||||
display: inline-flex;
|
||||
gap: 20px;
|
||||
.b-nav-item {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
min-width: 132px;
|
||||
height: 42px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
transform: skewX(-8deg);
|
||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||
-webkit-background-clip: text;
|
||||
|
||||
letter-spacing: 4px;
|
||||
text-shadow: -2px 0 0 1px #add8f1;
|
||||
}
|
||||
|
||||
&.nav-act {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
&.nav-normal {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 138px);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,10 +4,51 @@
|
||||
<div class="chart-content">
|
||||
<div class="top">
|
||||
<slot v-if="$slots.top" name="top"></slot>
|
||||
<div v-else class="top-content-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }">
|
||||
<!--:style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }" -->
|
||||
<div v-else class="top-content-warp">
|
||||
<div class="top-left"></div>
|
||||
<div class="top-content">
|
||||
{{ topTitle }}
|
||||
<div class="top-content-p">
|
||||
<div class="b-nav-l">
|
||||
<template v-for="(n, indexn) in navlist" :key="n.name">
|
||||
<div
|
||||
v-if="indexn <= 3"
|
||||
class="b-nav-item"
|
||||
:style="{
|
||||
'background-image':
|
||||
'url(' +
|
||||
(currentName == n.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
|
||||
')',
|
||||
}"
|
||||
:class="currentName == n.name ? 'nav-act' : 'nav-normal'"
|
||||
@click="itemAct(n.name)"
|
||||
>
|
||||
<span>{{ n.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- <div class="title txt-ellipsis clamp1">{{ topTitle }}</div> -->
|
||||
<div class="title txt-ellipsis clamp1">{{ '农业产业政务云平台' }}</div>
|
||||
<div class="b-nav-r">
|
||||
<template v-for="(m, indexm) in navlist" :key="m.name">
|
||||
<div
|
||||
v-if="indexm > 3"
|
||||
class="b-nav-item"
|
||||
:style="{
|
||||
'background-image':
|
||||
'url(' +
|
||||
(currentName == m.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
|
||||
')',
|
||||
}"
|
||||
:class="currentName == m.name ? 'nav-act' : 'nav-normal'"
|
||||
@click="itemAct(m.name)"
|
||||
>
|
||||
<span>{{ m.title }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="top-right">{{ currentTime }}</div> -->
|
||||
</div>
|
||||
@ -105,9 +146,31 @@ div {
|
||||
}
|
||||
.top-content {
|
||||
width: calc(100% - 400px);
|
||||
line-height: 42px;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.top-content-p {
|
||||
width: 100%;
|
||||
}
|
||||
.title,
|
||||
.b-nav-l,
|
||||
.b-nav-r {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.b-nav-l,
|
||||
.b-nav-r {
|
||||
width: calc((100% - 300px) / 2);
|
||||
}
|
||||
.b-nav-r {
|
||||
text-align: right;
|
||||
}
|
||||
.title {
|
||||
width: 300px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
transform: skewX(-8deg);
|
||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||
@ -115,6 +178,40 @@ div {
|
||||
color: #fff;
|
||||
letter-spacing: 8px;
|
||||
text-shadow: -6px 0 0 1px #add8f1;
|
||||
max-height: unset !important;
|
||||
}
|
||||
}
|
||||
.b-nav-l,
|
||||
.b-nav-r {
|
||||
margin: auto;
|
||||
display: inline-flex;
|
||||
gap: 20px;
|
||||
.b-nav-item {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
min-width: 132px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
transform: skewX(-8deg);
|
||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||
-webkit-background-clip: text;
|
||||
|
||||
letter-spacing: 4px;
|
||||
text-shadow: -2px 0 0 1px #add8f1;
|
||||
}
|
||||
|
||||
&.nav-act {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
&.nav-normal {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-left {
|
||||
width: 200px;
|
||||
@ -127,7 +224,7 @@ div {
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 98px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
|
||||
.b-nav {
|
||||
@ -163,7 +260,7 @@ div {
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 156px);
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,9 +71,11 @@ const itemAct = (name) => {
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
.bottom {
|
||||
height: 98px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.b-nav {
|
||||
margin: auto;
|
||||
display: inline-flex;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<div class="basic-layout" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }">
|
||||
<div class="basic-layout-container">
|
||||
<Main />
|
||||
<Bottom :name-val="route.name"></Bottom>
|
||||
<!-- <Bottom :name-val="route.name"></Bottom> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -15,3 +15,24 @@
|
||||
height: auto;
|
||||
max-height: calc(100vh - 130px);
|
||||
}
|
||||
.txt-ellipsis {
|
||||
display: -webkit-inline-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
.clamp1 {
|
||||
line-clamp: 1;
|
||||
-webkit-line-clamp: 1;
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 1);
|
||||
}
|
||||
|
||||
.clamp2 {
|
||||
line-clamp: 2;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 2);
|
||||
}
|
||||
|
||||
@ -50,12 +50,12 @@ let topTitle = ref('');
|
||||
let pos = ref('');
|
||||
|
||||
const datalist = reactive([
|
||||
{ label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
|
||||
{ label: '种子使用(吨)', value: 4800, icon: 'provenance.png' },
|
||||
{ label: '农药使用(吨)', value: 5000, icon: 'pesticide.png' },
|
||||
{ label: '肥料使用(吨)', value: 9000, icon: 'fertilizer.png' },
|
||||
{ label: '种源使用', value: 4800, icon: 'provenance.png' },
|
||||
{ label: '兽药(吨)', value: 10, icon: 'animalm.png' },
|
||||
{ label: '化肥使用(吨)', value: 9000, icon: 'fertilizer.png' },
|
||||
{ label: '饲料(吨)', value: 88943, icon: 'feeduse.png' },
|
||||
{ label: '兽药(吨)', value: 10, icon: 'animalm.png' },
|
||||
{ label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<baseBg ref="homebase" :name-val="'home'">
|
||||
<template #top> </template>
|
||||
<baseBg ref="homebase" :name-val="'home'" top-title=" ">
|
||||
<!-- <template #top> </template> -->
|
||||
<template #center>
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
@ -59,7 +59,8 @@
|
||||
|
||||
<div class="home-index-top-warp">
|
||||
<div class="home-index-top" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/hometopbg.png') + ')' }">
|
||||
<h3 class="home-title">耿马县农产品销售情况</h3>
|
||||
<div class="home-data-p">
|
||||
<!-- <h3 class="home-title">耿马县农产品销售情况</h3> -->
|
||||
<div class="home-data-top">￥1284.624万</div>
|
||||
<div class="home-data-contrast">
|
||||
<span class="tips">同比去年</span>
|
||||
@ -71,6 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
@ -107,16 +109,26 @@ let rollDataList = reactive([
|
||||
.data-home-index {
|
||||
.home-index-top-warp {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
top: 48px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-top: 24px;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
padding-top: 24px;
|
||||
.home-index-top {
|
||||
margin: auto;
|
||||
width: calc(100% - 400px);
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 28px;
|
||||
background-position: center bottom;
|
||||
background-size: contain;
|
||||
position: relative;
|
||||
.home-data-p {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
.home-title {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
@ -133,7 +145,7 @@ let rollDataList = reactive([
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
letter-spacing: 8px;
|
||||
margin: 26px 0 0 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.home-data-contrast {
|
||||
.tips {
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="code-num-charts">
|
||||
<div class="code-num-txt" :style="{ 'background-image': 'url(' + getAssetsFile('images/trace/bg1.png') + ')' }">
|
||||
<div class="num-txt-pos">
|
||||
<template v-for="(n, index) in valData" :key="index">
|
||||
<div class="num-txt-warp">
|
||||
<div class="num-txt">
|
||||
<div class="val">{{ n.value }}</div>
|
||||
<div class="label">{{ n.name }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="code-pie">
|
||||
<custom-echart-pie-gauge :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
@ -271,13 +271,13 @@ div {
|
||||
top: 50%;
|
||||
width: 80%;
|
||||
transform: translateY(-50%);
|
||||
background-size: contain;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
height: 100%;
|
||||
.num-txt-pos {
|
||||
height: 90%;
|
||||
.num-txt-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc((100% - 4px) / 2);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
<template>
|
||||
<div class="main-part-charts">
|
||||
<div class="code-num-txt" :style="{ 'background-image': 'url(' + getAssetsFile('images/trace/bg2.png') + ')' }">
|
||||
<div class="num-txt-pos">
|
||||
<template v-for="(n, index) in valData" :key="index">
|
||||
<div class="num-txt-warp">
|
||||
<div class="num-txt">
|
||||
<div class="label">
|
||||
<span>{{ n.name }}</span>
|
||||
<span class="label-val">{{ n.name }}</span>
|
||||
</div>
|
||||
<div class="val">
|
||||
<span class="val-val">{{ n.value }}</span>
|
||||
<span class="unit">{{ n.unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="code-pie">
|
||||
<custom-echart-pie-gauge :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
@ -265,26 +265,30 @@ div {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 80%;
|
||||
width: 60%;
|
||||
transform: translateY(-50%);
|
||||
background-size: contain;
|
||||
height: 90%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
height: 100%;
|
||||
padding: 10% 0 10% 18%;
|
||||
.num-txt-pos {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
gap: 4;
|
||||
.num-txt-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 18%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: calc((100% - 8px) / 3);
|
||||
}
|
||||
.num-txt {
|
||||
width: 72%;
|
||||
display: inline-flex;
|
||||
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
line-height: 30px;
|
||||
.val,
|
||||
.label {
|
||||
vertical-align: middle;
|
||||
@ -303,6 +307,10 @@ div {
|
||||
}
|
||||
}
|
||||
.label {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.label-val {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
@ -313,6 +321,7 @@ div {
|
||||
color: #fff;
|
||||
text-shadow: -2px 0 0 1px #add8f1;
|
||||
}
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: 8px;
|
||||
|
||||
9
sub-operation-admin/.env.pre
Normal file
9
sub-operation-admin/.env.pre
Normal file
@ -0,0 +1,9 @@
|
||||
# 本地环境
|
||||
VITE_APP_MIAN = 'daimp-front-main'
|
||||
VITE_APP_MIAN_URL = 'http://localhost:8090'
|
||||
VITE_APP_NAME = 'sub-operation-admin'
|
||||
# 接口
|
||||
VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_BASE_URL = ''
|
||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
VITE_APP_UPLOAD_URL = ''
|
||||
1
sub-operation-admin/.gitignore
vendored
1
sub-operation-admin/.gitignore
vendored
@ -70,7 +70,6 @@ web_modules/
|
||||
|
||||
# dotenv environment variables file
|
||||
# .env
|
||||
# .env.test
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
"dev": "vite --mode development",
|
||||
"build": "vite build --mode production",
|
||||
"test": "vite build --mode test",
|
||||
"local": "vite build --mode local",
|
||||
"pre": "vite build --mode pre",
|
||||
"preview": "vite preview",
|
||||
"format": "prettier --write 'src/**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'",
|
||||
"eslint": "npx eslint --init",
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
# 开发环境
|
||||
VITE_PORT = 9526
|
||||
VITE_MODE = 'DEV'
|
||||
VITE_APP_MIAN = 'daimp-front-main'
|
||||
VITE_APP_MIAN_URL = 'http://localhost:9000'
|
||||
VITE_APP_NAME = 'sub-operation-service'
|
||||
|
||||
9
sub-operation-service/.env.pre
Normal file
9
sub-operation-service/.env.pre
Normal file
@ -0,0 +1,9 @@
|
||||
# 本地环境
|
||||
VITE_APP_MIAN = 'daimp-front-main'
|
||||
VITE_APP_MIAN_URL = 'http://localhost:8090'
|
||||
VITE_APP_NAME = 'sub-operation-service'
|
||||
# 接口
|
||||
VITE_APP_BASE_API = '/apis'
|
||||
VITE_APP_BASE_URL = ''
|
||||
VITE_APP_UPLOAD_API = '/uploadApis'
|
||||
VITE_APP_UPLOAD_URL = ''
|
||||
2
sub-operation-service/.gitignore
vendored
2
sub-operation-service/.gitignore
vendored
@ -69,7 +69,7 @@ web_modules/
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
# .env
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
"dev": "vite --mode development",
|
||||
"build": "vite build --mode production",
|
||||
"test": "vite build --mode test",
|
||||
"local": "vite build --mode local",
|
||||
"pre": "vite build --mode pre",
|
||||
"preview": "vite preview",
|
||||
"format": "prettier --write 'src/**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}'",
|
||||
"eslint": "npx eslint --init",
|
||||
@ -21,7 +21,7 @@
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^1.6.5",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts": "^5.6.0",
|
||||
"element-plus": "^2.7.2",
|
||||
"js-base64": "^3.7.6",
|
||||
"lodash": "^4.17.21",
|
||||
@ -31,6 +31,7 @@
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"screenfull": "^6.0.2",
|
||||
"splitpanes": "^4.0.3",
|
||||
"vue": "^3.3.11",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2024-01-24 18:54:01
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2025-04-12 15:22:39
|
||||
* @LastEditTime: 2025-02-28 11:31:12
|
||||
-->
|
||||
<template>
|
||||
<el-config-provider :size="size" :locale="zhCn">
|
||||
@ -23,45 +23,5 @@ const size = computed(() => SettingStore.themeConfig.globalComSize);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './styles/style.scss';
|
||||
// @import '@/styles/iconfont.css';
|
||||
|
||||
body {
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
--el-color-primary: #25bf82;
|
||||
--el-color-primary-light-3: #45dda1;
|
||||
--el-color-primary-light-5: #8cddbd;
|
||||
--el-color-primary-light-9: rgba(37, 191, 130, 0.1);
|
||||
--el-color-primary-light-8: rgba(37, 191, 130, 0.5);
|
||||
|
||||
.el-input {
|
||||
--el-input-focus-border-color: #25bf82;
|
||||
--el-input-focus-border: #25bf82;
|
||||
::v-deep() {
|
||||
.el-input__wrapper:focus,
|
||||
.el-input__wrapper:hover,
|
||||
.el-input__wrapper .is-focus {
|
||||
box-shadow: 0 0 0 1px $color-main !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-button--primary {
|
||||
--el-button-bg-color: #25bf82;
|
||||
--el-button-border-color: #25bf82;
|
||||
--el-button-outline-color: #45dda1;
|
||||
--el-button-active-color: #158b5c;
|
||||
--el-button-hover-bg-color: #45dda1;
|
||||
--el-button-hover-border-color: #45dda1;
|
||||
--el-button-active-bg-color: #158b5c;
|
||||
--el-button-active-border-color: #158b5c;
|
||||
--el-button-disabled-text-color: var(--el-color-white);
|
||||
--el-button-disabled-bg-color: #45dda1;
|
||||
--el-button-disabled-border-color: #45dda1;
|
||||
}
|
||||
|
||||
--el-menu-hover-text-color: #25bf82;
|
||||
--el-menu-hover-bg-color: fff;
|
||||
}
|
||||
@import './styles/style';
|
||||
</style>
|
||||
|
||||
170
sub-operation-service/src/assets/fonts/aliiconfont.css
Normal file
170
sub-operation-service/src/assets/fonts/aliiconfont.css
Normal file
File diff suppressed because one or more lines are too long
@ -1,543 +0,0 @@
|
||||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: 'iconfont logo';
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src:
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'iconfont logo';
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition:
|
||||
font-size 0.25s linear,
|
||||
width 0.25s linear;
|
||||
-moz-transition:
|
||||
font-size 0.25s linear,
|
||||
width 0.25s linear;
|
||||
transition:
|
||||
font-size 0.25s linear,
|
||||
width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown > p,
|
||||
.markdown > blockquote,
|
||||
.markdown > .highlight,
|
||||
.markdown > ol,
|
||||
.markdown > ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul > li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown > ul li,
|
||||
.markdown blockquote ul > li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown > ul li p,
|
||||
.markdown > ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol > li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown > ol li,
|
||||
.markdown blockquote ol > li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown > table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown > table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown > table th,
|
||||
.markdown > table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown > table th {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown > br,
|
||||
.markdown > p > br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*='language-']::-moz-selection,
|
||||
pre[class*='language-'] ::-moz-selection,
|
||||
code[class*='language-']::-moz-selection,
|
||||
code[class*='language-'] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*='language-']::selection,
|
||||
pre[class*='language-'] ::selection,
|
||||
code[class*='language-']::selection,
|
||||
code[class*='language-'] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #dd4a68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,195 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'iconfont'; /* Project id 4425172 */
|
||||
src:
|
||||
url('iconfont.woff2?t=1725879404188') format('woff2'),
|
||||
url('iconfont.woff?t=1725879404188') format('woff'),
|
||||
url('iconfont.ttf?t=1725879404188') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: 'iconfont' !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-data4:before {
|
||||
content: '\e60c';
|
||||
}
|
||||
|
||||
.icon-data5:before {
|
||||
content: '\e6be';
|
||||
}
|
||||
|
||||
.icon-recharge-record:before {
|
||||
content: '\e614';
|
||||
}
|
||||
|
||||
.icon-recharge-rule:before {
|
||||
content: '\e628';
|
||||
}
|
||||
|
||||
.icon-user-profile:before {
|
||||
content: '\e783';
|
||||
}
|
||||
|
||||
.icon-achieve:before {
|
||||
content: '\e616';
|
||||
}
|
||||
|
||||
.icon-activity-level:before {
|
||||
content: '\e61a';
|
||||
}
|
||||
|
||||
.icon-skins:before {
|
||||
content: '\e790';
|
||||
}
|
||||
|
||||
.icon-data1:before {
|
||||
content: '\e996';
|
||||
}
|
||||
|
||||
.icon-data2:before {
|
||||
content: '\e661';
|
||||
}
|
||||
|
||||
.icon-data3:before {
|
||||
content: '\e632';
|
||||
}
|
||||
|
||||
.icon-data:before {
|
||||
content: '\e64e';
|
||||
}
|
||||
|
||||
.icon-game:before {
|
||||
content: '\e6d0';
|
||||
}
|
||||
|
||||
.icon-banner:before {
|
||||
content: '\e613';
|
||||
}
|
||||
|
||||
.icon-verification:before {
|
||||
content: '\e601';
|
||||
}
|
||||
|
||||
.icon-balance:before {
|
||||
content: '\e6b9';
|
||||
}
|
||||
|
||||
.icon-refund:before {
|
||||
content: '\e7af';
|
||||
}
|
||||
|
||||
.icon-wechat:before {
|
||||
content: '\e681';
|
||||
}
|
||||
|
||||
.icon-alipay:before {
|
||||
content: '\e61e';
|
||||
}
|
||||
|
||||
.icon-user:before {
|
||||
content: '\e67f';
|
||||
}
|
||||
|
||||
.icon-coupon:before {
|
||||
content: '\e65a';
|
||||
}
|
||||
|
||||
.icon-level:before {
|
||||
content: '\e7d8';
|
||||
}
|
||||
|
||||
.icon-activity:before {
|
||||
content: '\e67b';
|
||||
}
|
||||
|
||||
.icon-shop:before {
|
||||
content: '\e60a';
|
||||
}
|
||||
|
||||
.icon-member:before {
|
||||
content: '\e640';
|
||||
}
|
||||
|
||||
.icon-recharge:before {
|
||||
content: '\e799';
|
||||
}
|
||||
|
||||
.icon-marketing:before {
|
||||
content: '\e765';
|
||||
}
|
||||
|
||||
.icon-goods-sku:before {
|
||||
content: '\e6d7';
|
||||
}
|
||||
|
||||
.icon-store:before {
|
||||
content: '\e62b';
|
||||
}
|
||||
|
||||
.icon-goods-store:before {
|
||||
content: '\e6c6';
|
||||
}
|
||||
|
||||
.icon-storer:before {
|
||||
content: '\e64a';
|
||||
}
|
||||
|
||||
.icon-order:before {
|
||||
content: '\e737';
|
||||
}
|
||||
|
||||
.icon-permission:before {
|
||||
content: '\e612';
|
||||
}
|
||||
|
||||
.icon-goods:before {
|
||||
content: '\e889';
|
||||
}
|
||||
|
||||
.icon-menu:before {
|
||||
content: '\e60e';
|
||||
}
|
||||
|
||||
.icon-dict-type:before {
|
||||
content: '\e652';
|
||||
}
|
||||
|
||||
.icon-dictionary:before {
|
||||
content: '\e600';
|
||||
}
|
||||
|
||||
.icon-role:before {
|
||||
content: '\e604';
|
||||
}
|
||||
|
||||
.icon-fullscreen:before {
|
||||
content: '\e8fa';
|
||||
}
|
||||
|
||||
.icon-exit-fullscreen:before {
|
||||
content: '\e8fb';
|
||||
}
|
||||
|
||||
.icon-table:before {
|
||||
content: '\e615';
|
||||
}
|
||||
|
||||
.icon-test:before {
|
||||
content: '\e610';
|
||||
}
|
||||
|
||||
.icon-lang:before {
|
||||
content: '\e649';
|
||||
}
|
||||
|
||||
.icon-demo:before {
|
||||
content: '\e6ee';
|
||||
}
|
||||
|
||||
.icon-size:before {
|
||||
content: '\e660';
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -1,324 +0,0 @@
|
||||
{
|
||||
"id": "4425172",
|
||||
"name": "sub-vue",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "react/vue项目后台管理平台",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "1218184",
|
||||
"name": "销售明细",
|
||||
"font_class": "data4",
|
||||
"unicode": "e60c",
|
||||
"unicode_decimal": 58892
|
||||
},
|
||||
{
|
||||
"icon_id": "2230090",
|
||||
"name": "销售明细",
|
||||
"font_class": "data5",
|
||||
"unicode": "e6be",
|
||||
"unicode_decimal": 59070
|
||||
},
|
||||
{
|
||||
"icon_id": "6882983",
|
||||
"name": "充值记录",
|
||||
"font_class": "recharge-record",
|
||||
"unicode": "e614",
|
||||
"unicode_decimal": 58900
|
||||
},
|
||||
{
|
||||
"icon_id": "34611004",
|
||||
"name": "充值规则",
|
||||
"font_class": "recharge-rule",
|
||||
"unicode": "e628",
|
||||
"unicode_decimal": 58920
|
||||
},
|
||||
{
|
||||
"icon_id": "15562252",
|
||||
"name": "用户画像",
|
||||
"font_class": "user-profile",
|
||||
"unicode": "e783",
|
||||
"unicode_decimal": 59267
|
||||
},
|
||||
{
|
||||
"icon_id": "18747445",
|
||||
"name": "成就",
|
||||
"font_class": "achieve",
|
||||
"unicode": "e616",
|
||||
"unicode_decimal": 58902
|
||||
},
|
||||
{
|
||||
"icon_id": "33848542",
|
||||
"name": "我的-段位",
|
||||
"font_class": "activity-level",
|
||||
"unicode": "e61a",
|
||||
"unicode_decimal": 58906
|
||||
},
|
||||
{
|
||||
"icon_id": "20406821",
|
||||
"name": "皮肤",
|
||||
"font_class": "skins",
|
||||
"unicode": "e790",
|
||||
"unicode_decimal": 59280
|
||||
},
|
||||
{
|
||||
"icon_id": "2214847",
|
||||
"name": "个人中心-积分商城",
|
||||
"font_class": "data1",
|
||||
"unicode": "e996",
|
||||
"unicode_decimal": 59798
|
||||
},
|
||||
{
|
||||
"icon_id": "14233304",
|
||||
"name": "价值投资",
|
||||
"font_class": "data2",
|
||||
"unicode": "e661",
|
||||
"unicode_decimal": 58977
|
||||
},
|
||||
{
|
||||
"icon_id": "23059951",
|
||||
"name": "费用统计",
|
||||
"font_class": "data3",
|
||||
"unicode": "e632",
|
||||
"unicode_decimal": 58930
|
||||
},
|
||||
{
|
||||
"icon_id": "2199049",
|
||||
"name": "数据报表",
|
||||
"font_class": "data",
|
||||
"unicode": "e64e",
|
||||
"unicode_decimal": 58958
|
||||
},
|
||||
{
|
||||
"icon_id": "36257316",
|
||||
"name": "游戏管理",
|
||||
"font_class": "game",
|
||||
"unicode": "e6d0",
|
||||
"unicode_decimal": 59088
|
||||
},
|
||||
{
|
||||
"icon_id": "11913396",
|
||||
"name": "banner",
|
||||
"font_class": "banner",
|
||||
"unicode": "e613",
|
||||
"unicode_decimal": 58899
|
||||
},
|
||||
{
|
||||
"icon_id": "35264323",
|
||||
"name": "核销码核销",
|
||||
"font_class": "verification",
|
||||
"unicode": "e601",
|
||||
"unicode_decimal": 58881
|
||||
},
|
||||
{
|
||||
"icon_id": "6514128",
|
||||
"name": "结算管理",
|
||||
"font_class": "balance",
|
||||
"unicode": "e6b9",
|
||||
"unicode_decimal": 59065
|
||||
},
|
||||
{
|
||||
"icon_id": "12025983",
|
||||
"name": "退货退款",
|
||||
"font_class": "refund",
|
||||
"unicode": "e7af",
|
||||
"unicode_decimal": 59311
|
||||
},
|
||||
{
|
||||
"icon_id": "1207908",
|
||||
"name": "wechat",
|
||||
"font_class": "wechat",
|
||||
"unicode": "e681",
|
||||
"unicode_decimal": 59009
|
||||
},
|
||||
{
|
||||
"icon_id": "27188513",
|
||||
"name": "alipay",
|
||||
"font_class": "alipay",
|
||||
"unicode": "e61e",
|
||||
"unicode_decimal": 58910
|
||||
},
|
||||
{
|
||||
"icon_id": "11111017",
|
||||
"name": "会员",
|
||||
"font_class": "user",
|
||||
"unicode": "e67f",
|
||||
"unicode_decimal": 59007
|
||||
},
|
||||
{
|
||||
"icon_id": "630079",
|
||||
"name": "我的优惠券",
|
||||
"font_class": "coupon",
|
||||
"unicode": "e65a",
|
||||
"unicode_decimal": 58970
|
||||
},
|
||||
{
|
||||
"icon_id": "2046370",
|
||||
"name": "会员等级",
|
||||
"font_class": "level",
|
||||
"unicode": "e7d8",
|
||||
"unicode_decimal": 59352
|
||||
},
|
||||
{
|
||||
"icon_id": "2569868",
|
||||
"name": "活动",
|
||||
"font_class": "activity",
|
||||
"unicode": "e67b",
|
||||
"unicode_decimal": 59003
|
||||
},
|
||||
{
|
||||
"icon_id": "2681698",
|
||||
"name": "门店",
|
||||
"font_class": "shop",
|
||||
"unicode": "e60a",
|
||||
"unicode_decimal": 58890
|
||||
},
|
||||
{
|
||||
"icon_id": "2811147",
|
||||
"name": "会员",
|
||||
"font_class": "member",
|
||||
"unicode": "e640",
|
||||
"unicode_decimal": 58944
|
||||
},
|
||||
{
|
||||
"icon_id": "4560182",
|
||||
"name": "会员充值",
|
||||
"font_class": "recharge",
|
||||
"unicode": "e799",
|
||||
"unicode_decimal": 59289
|
||||
},
|
||||
{
|
||||
"icon_id": "5880283",
|
||||
"name": "营销",
|
||||
"font_class": "marketing",
|
||||
"unicode": "e765",
|
||||
"unicode_decimal": 59237
|
||||
},
|
||||
{
|
||||
"icon_id": "6982618",
|
||||
"name": "商品规格",
|
||||
"font_class": "goods-sku",
|
||||
"unicode": "e6d7",
|
||||
"unicode_decimal": 59095
|
||||
},
|
||||
{
|
||||
"icon_id": "7307041",
|
||||
"name": "商家入驻",
|
||||
"font_class": "store",
|
||||
"unicode": "e62b",
|
||||
"unicode_decimal": 58923
|
||||
},
|
||||
{
|
||||
"icon_id": "11639867",
|
||||
"name": "小店商品库",
|
||||
"font_class": "goods-store",
|
||||
"unicode": "e6c6",
|
||||
"unicode_decimal": 59078
|
||||
},
|
||||
{
|
||||
"icon_id": "13872198",
|
||||
"name": "商家列表",
|
||||
"font_class": "storer",
|
||||
"unicode": "e64a",
|
||||
"unicode_decimal": 58954
|
||||
},
|
||||
{
|
||||
"icon_id": "577335",
|
||||
"name": "订单",
|
||||
"font_class": "order",
|
||||
"unicode": "e737",
|
||||
"unicode_decimal": 59191
|
||||
},
|
||||
{
|
||||
"icon_id": "736503",
|
||||
"name": "权限",
|
||||
"font_class": "permission",
|
||||
"unicode": "e612",
|
||||
"unicode_decimal": 58898
|
||||
},
|
||||
{
|
||||
"icon_id": "1727271",
|
||||
"name": "06商品-线性",
|
||||
"font_class": "goods",
|
||||
"unicode": "e889",
|
||||
"unicode_decimal": 59529
|
||||
},
|
||||
{
|
||||
"icon_id": "7587933",
|
||||
"name": "菜单",
|
||||
"font_class": "menu",
|
||||
"unicode": "e60e",
|
||||
"unicode_decimal": 58894
|
||||
},
|
||||
{
|
||||
"icon_id": "12758820",
|
||||
"name": "dictionary",
|
||||
"font_class": "dict-type",
|
||||
"unicode": "e652",
|
||||
"unicode_decimal": 58962
|
||||
},
|
||||
{
|
||||
"icon_id": "13768112",
|
||||
"name": "dictionary",
|
||||
"font_class": "dictionary",
|
||||
"unicode": "e600",
|
||||
"unicode_decimal": 58880
|
||||
},
|
||||
{
|
||||
"icon_id": "37734141",
|
||||
"name": "new-role",
|
||||
"font_class": "role",
|
||||
"unicode": "e604",
|
||||
"unicode_decimal": 58884
|
||||
},
|
||||
{
|
||||
"icon_id": "1727563",
|
||||
"name": "327全屏",
|
||||
"font_class": "fullscreen",
|
||||
"unicode": "e8fa",
|
||||
"unicode_decimal": 59642
|
||||
},
|
||||
{
|
||||
"icon_id": "1727566",
|
||||
"name": "328退出全屏",
|
||||
"font_class": "exit-fullscreen",
|
||||
"unicode": "e8fb",
|
||||
"unicode_decimal": 59643
|
||||
},
|
||||
{
|
||||
"icon_id": "11641852",
|
||||
"name": "表格",
|
||||
"font_class": "table",
|
||||
"unicode": "e615",
|
||||
"unicode_decimal": 58901
|
||||
},
|
||||
{
|
||||
"icon_id": "20104468",
|
||||
"name": "测试",
|
||||
"font_class": "test",
|
||||
"unicode": "e610",
|
||||
"unicode_decimal": 58896
|
||||
},
|
||||
{
|
||||
"icon_id": "26686335",
|
||||
"name": "中英文",
|
||||
"font_class": "lang",
|
||||
"unicode": "e649",
|
||||
"unicode_decimal": 58953
|
||||
},
|
||||
{
|
||||
"icon_id": "30012547",
|
||||
"name": "方案列表-默认",
|
||||
"font_class": "demo",
|
||||
"unicode": "e6ee",
|
||||
"unicode_decimal": 59118
|
||||
},
|
||||
{
|
||||
"icon_id": "37702310",
|
||||
"name": "文字大小",
|
||||
"font_class": "size",
|
||||
"unicode": "e660",
|
||||
"unicode_decimal": 58976
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
48
sub-operation-service/src/components/page-layout/index.vue
Normal file
48
sub-operation-service/src/components/page-layout/index.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="page-layout">
|
||||
<div class="page-layout-left">
|
||||
<page-menu :menus="menus" />
|
||||
</div>
|
||||
<div class="page-layout-main">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="page-layout">
|
||||
const props = defineProps({
|
||||
menus: { type: Array, default: () => [] },
|
||||
showMenu: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-layout {
|
||||
width: $width-main;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
min-height: calc(100vh - 230px);
|
||||
@include flex-row();
|
||||
|
||||
&-left,
|
||||
&-main {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
&-left {
|
||||
width: 240px;
|
||||
margin-right: 16px;
|
||||
background: $color-fff;
|
||||
}
|
||||
&-main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
126
sub-operation-service/src/components/page-menu/index-bak.vue
Normal file
126
sub-operation-service/src/components/page-menu/index-bak.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="page-menu">
|
||||
<div v-for="menu in menus" :key="menu.name" class="page-menu-item">
|
||||
<div class="menu" :class="isActive(menu) ? 'active' : ''" @click="todo(menu, true)">
|
||||
<span class="item-img"><img :src="getAssetsFile(menu.icon)" /></span>
|
||||
<span class="item-title">{{ menu.meta.title }}</span>
|
||||
<el-icon v-if="!isEmpty(menu?.children)">
|
||||
<template v-if="menu.toggle"><ArrowDownBold /></template>
|
||||
<template v-else><ArrowUpBold /></template>
|
||||
</el-icon>
|
||||
</div>
|
||||
<ul :class="`sub-menu ${menu?.toggle ? 'toggle' : ''}`">
|
||||
<li v-for="item in menu?.children" :key="item.name" :class="isActive(item) ? 'active' : ''" @click="todo(item, false)">
|
||||
<span class="sub-title">{{ item.meta.title }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const props = defineProps({
|
||||
menus: { type: Array, default: () => [] },
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const isActive = (row) => {
|
||||
return route.path === row.path;
|
||||
};
|
||||
|
||||
const todo = (row, toggle) => {
|
||||
if (toggle && !isEmpty(row.children)) {
|
||||
row.toggle = !row.toggle;
|
||||
return;
|
||||
}
|
||||
if (typeof row.event === 'function') {
|
||||
row.event(row);
|
||||
} else {
|
||||
router.push(row.path);
|
||||
}
|
||||
console.log(route.path, row.path);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-menu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
&-item {
|
||||
width: 100%;
|
||||
@include flex-column();
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
.menu {
|
||||
@include flex-row();
|
||||
align-items: center;
|
||||
|
||||
.item-img,
|
||||
.item-title {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.item-img {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.item-title {
|
||||
flex: 1;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
padding-left: 8px;
|
||||
@include ellipsis();
|
||||
}
|
||||
.el-icon {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
padding: 10px 0;
|
||||
display: block;
|
||||
|
||||
&.toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 16px;
|
||||
@include flex-row();
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
@include icon-space();
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background-color: #000;
|
||||
margin-right: 22px;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 16px;
|
||||
@include ellipsis();
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
91
sub-operation-service/src/components/page-menu/index.vue
Normal file
91
sub-operation-service/src/components/page-menu/index.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="page-menu">
|
||||
<el-scrollbar wrap-class="page-menu-scrollbar">
|
||||
<el-menu
|
||||
class="page-menu__menu"
|
||||
background-color="#fff"
|
||||
text-color="#000"
|
||||
active-text-color="#25bf82"
|
||||
:collapse-transition="true"
|
||||
:unique-opened="true"
|
||||
:default-active="active"
|
||||
:default-openeds="openeds"
|
||||
>
|
||||
<SubItem v-for="item in menus" :key="item.path" :item="item" />
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { findParentRoute } from '@/utils/router';
|
||||
import { isEmpty } from '@/utils';
|
||||
import SubItem from '@/layouts/component/Menu/SubItem';
|
||||
|
||||
const props = defineProps({
|
||||
menus: { type: Array, default: () => [] },
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const openeds = computed(() => {
|
||||
const item = findParentRoute(props.menus, route.path);
|
||||
return !isEmpty(item) ? [item.path] : [];
|
||||
});
|
||||
|
||||
const active = computed(() => {
|
||||
const item = findParentRoute(props.menus, route.path);
|
||||
return !isEmpty(item) ? item.path : '';
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-menu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
transition: width 0.28s;
|
||||
&-scrollbar {
|
||||
height: calc(100vh - 60px) !important;
|
||||
}
|
||||
:deep(.el-scrollbar__wrap) {
|
||||
height: calc(100vh - 60px) !important;
|
||||
}
|
||||
&__menu {
|
||||
border-right: 0;
|
||||
:deep(.el-menu-item),
|
||||
:deep(.el-sub-menu__title) {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
:deep(.el-menu-item) {
|
||||
@include flex-row();
|
||||
align-items: center;
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
:deep(.el-sub-menu .el-menu-item) {
|
||||
font-size: 16px;
|
||||
padding-left: 50px !important;
|
||||
&:hover {
|
||||
.icon-dot {
|
||||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-sub-menu .el-icon) {
|
||||
font-size: 20px;
|
||||
}
|
||||
:deep(.el-menu-item.is-active) {
|
||||
background-color: #fff;
|
||||
}
|
||||
&:not(.el-menu--collapse) {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="page-pagination">
|
||||
<el-pagination
|
||||
background
|
||||
hide-on-single-page
|
||||
:page-size="size"
|
||||
:layout="layout"
|
||||
:total="total"
|
||||
@current-change="emit('current-change', $event)"
|
||||
@size-change="emit('size-change', $event)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="page-pagination">
|
||||
const props = defineProps({
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'prev, pager, next',
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['current-change', 'size-change']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.page-pagination {
|
||||
width: 100%;
|
||||
padding: 50px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
@ -14,9 +14,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-header-top-right">
|
||||
<span class="block-icon" @click="toCart">
|
||||
<div class="iconfont icon-shopcar" style="font-size: 12px"></div>
|
||||
<span>购物车</span>
|
||||
</span>
|
||||
<span>商家中心</span>
|
||||
<span @click="toUserCenter">个人中心</span>
|
||||
<span @click="toHome" class="back-home">
|
||||
<span class="block-icon" @click="toHome">
|
||||
<div class="iconfont icon-home" style="font-size: 12px"></div>
|
||||
<span>返回首页</span>
|
||||
</span>
|
||||
@ -26,7 +30,7 @@
|
||||
<div class="layout-header-bottom-left">
|
||||
<div class="layout-header-bottom-search">
|
||||
<div class="title">
|
||||
<img :src="getAssetsFile('images/logo.png')?.href ?? ''" />
|
||||
<img :src="getAssetsFile('images/logo.png')" />
|
||||
</div>
|
||||
<div class="search-warp">
|
||||
<el-input v-model="keyword" placeholder="请输入关键词进行搜索"></el-input>
|
||||
@ -48,9 +52,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-header-menu">
|
||||
<el-menu ellipsis class="layout-header-bottom-menu" mode="horizontal" :default-active="defaultActive">
|
||||
<el-menu ellipsis class="layout-header-bottom-menu" mode="horizontal">
|
||||
<app-link v-for="(item, index) in meuns" :key="index" :to="item.path">
|
||||
<el-menu-item active-text-color="#25BF82" :index="item.key">{{ item.label }}</el-menu-item>
|
||||
<el-menu-item active-text-color="#25BF82">{{ item.label }}</el-menu-item>
|
||||
</app-link>
|
||||
</el-menu>
|
||||
</div>
|
||||
@ -59,27 +63,13 @@
|
||||
</template>
|
||||
|
||||
<script setup name="layout-header">
|
||||
import { computed, ref, onMounted } from 'vue';
|
||||
import { useSettingStore } from '@/store/modules/setting';
|
||||
import { usePermissionStore } from '@/store/modules/permission';
|
||||
import { ref } from 'vue';
|
||||
import { qrImg } from './base64img';
|
||||
import AppLink from '../Menu/Link.vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const SettingStore = useSettingStore();
|
||||
const PermissionStore = usePermissionStore();
|
||||
const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes);
|
||||
const isReload = computed(() => SettingStore.isReload);
|
||||
|
||||
const isSubApp = computed(() => route.path.includes('sub'));
|
||||
const defaultActive = ref('');
|
||||
onMounted(() => {
|
||||
defaultActive.value = route.meta.headerActive;
|
||||
console.log('route', defaultActive.value);
|
||||
});
|
||||
|
||||
const keyword = ref('');
|
||||
|
||||
@ -87,37 +77,30 @@ const meuns = ref([
|
||||
{
|
||||
label: '智慧种植',
|
||||
path: '/sub-operation-service/ecommerce',
|
||||
key: '0',
|
||||
},
|
||||
{
|
||||
label: '农事服务',
|
||||
path: '/sub-operation-service/farmingService',
|
||||
key: 'farmingService',
|
||||
path: '/sub-operation-service/ecommerce',
|
||||
},
|
||||
{
|
||||
label: '涉农金融',
|
||||
path: '/sub-operation-service/ecommerce',
|
||||
key: '1',
|
||||
},
|
||||
{
|
||||
label: '电商交易',
|
||||
path: '/sub-operation-service/ecommerce',
|
||||
key: 'ecommerce',
|
||||
},
|
||||
{
|
||||
label: '分拣包装',
|
||||
path: '/sub-operation-service/ecommerce',
|
||||
key: '3',
|
||||
},
|
||||
{
|
||||
label: '仓储物流',
|
||||
path: '/sub-operation-service/ecommerce',
|
||||
key: '4',
|
||||
},
|
||||
{
|
||||
label: '公共品牌运营',
|
||||
path: '/sub-operation-service/ecommerce',
|
||||
key: '5',
|
||||
},
|
||||
]);
|
||||
|
||||
@ -133,13 +116,13 @@ const toHome = () => {
|
||||
const toUserCenter = () => {
|
||||
router.push('/sub-operation-service/userCenter');
|
||||
};
|
||||
|
||||
const toCart = () => {
|
||||
router.push('/sub-operation-service/userCenter-shoppingCart');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.layout-header-warp {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@ -150,9 +133,6 @@ div {
|
||||
.el-menu {
|
||||
justify-content: space-around;
|
||||
border: none !important;
|
||||
.is-active {
|
||||
color: $color-main !important;
|
||||
}
|
||||
}
|
||||
.el-menu-item {
|
||||
font-size: 24px;
|
||||
@ -163,6 +143,7 @@ div {
|
||||
}
|
||||
.el-menu-item:active {
|
||||
background: none !important;
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -217,11 +198,15 @@ div {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.back-home {
|
||||
&.block-icon {
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $color-main;
|
||||
&.icon-shopcar {
|
||||
font-size: 16px !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
span {
|
||||
margin-left: 6px;
|
||||
@ -258,12 +243,10 @@ div {
|
||||
height: 50px;
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
::v-deep() {
|
||||
.el-input__wrapper {
|
||||
:deep(.el-input__wrapper) {
|
||||
padding-right: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
position: absolute;
|
||||
|
||||
@ -6,11 +6,8 @@
|
||||
</template>
|
||||
|
||||
<script setup name="layout">
|
||||
import { useSettingStore } from '@/store/modules/setting';
|
||||
|
||||
import Header from './component/Header';
|
||||
import Main from './component/Main';
|
||||
const SettingStore = useSettingStore();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -22,6 +22,9 @@ const SettingStore = useSettingStore();
|
||||
width: calc(100% - 320px) !important;
|
||||
vertical-align: top;
|
||||
padding: 16px 16px 16px 0;
|
||||
.layout-main-inner {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,4 @@
|
||||
import * as components from '../../../main/src/components';
|
||||
|
||||
// const modules = import.meta.glob('../../../main/src/components/**/**.vue');
|
||||
// const components = Object.keys(modules).reduce((acc, path) => {
|
||||
// const component = modules[path].default || modules[path];
|
||||
// const componentName = path
|
||||
// .split('/')
|
||||
// .pop()
|
||||
// .replace(/\.\w+$/, '');
|
||||
// acc[componentName] = component;
|
||||
// return acc;
|
||||
// }, {});
|
||||
import * as components from '#/components';
|
||||
|
||||
// 全局注册组件
|
||||
export const registerGlobalComponents = (app) => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';
|
||||
|
||||
export const registerMicroApps = (app) => {
|
||||
export const registerMicroApps = async (app) => {
|
||||
const initQiankun = () => {
|
||||
renderWithQiankun({
|
||||
bootstrap() {
|
||||
@ -18,8 +18,9 @@ export const registerMicroApps = (app) => {
|
||||
},
|
||||
});
|
||||
};
|
||||
const render = ({ container }) => {
|
||||
app.mount(container ? container : '#app');
|
||||
const render = async ({ container }) => {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
app.mount(container ? container.querySelector('#app') : '#app');
|
||||
};
|
||||
qiankunWindow.__POWERED_BY_QIANKUN__ ? initQiankun() : render({});
|
||||
};
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2023-06-20 11:48:41
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2025-04-12 14:48:27
|
||||
* @LastEditTime: 2025-04-14 09:27:05
|
||||
*/
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Layout from '@/layouts/index.vue';
|
||||
@ -28,7 +28,7 @@ export const constantRoutes = [
|
||||
name: 'layout',
|
||||
component: Layout,
|
||||
redirect: '/sub-operation-service/ecommerce',
|
||||
meta: { title: '首页' },
|
||||
meta: { title: '运营服务' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/home',
|
||||
@ -159,6 +159,24 @@ export const constantRoutes = [
|
||||
name: 'ShoppingCar',
|
||||
meta: { title: '我的购物车' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/userCenter-sureOrder',
|
||||
component: () => import('@/views/userCenter/sureOrder.vue'),
|
||||
name: 'sureOrder',
|
||||
meta: { title: '确认订单' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/userCenter-orderSuccess',
|
||||
component: () => import('@/views/userCenter/orderSuccess.vue'),
|
||||
name: 'orderSuccess',
|
||||
meta: { title: '订单提交成功' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/userCenter-paySuccess',
|
||||
component: () => import('@/views/userCenter/paySuccess.vue'),
|
||||
name: 'paySuccess',
|
||||
meta: { title: '支付成功' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/userCenter-userOrders',
|
||||
component: () => import('@/views/userCenter/userOrders.vue'),
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
import Layout from '@/layouts/index.vue';
|
||||
import Views from '@/layouts/Views.vue';
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/sub-operation-service/warehouseLogistics',
|
||||
name: 'warehouseLogistics',
|
||||
component: Layout,
|
||||
redirect: '/sub-operation-service/warehouse',
|
||||
meta: { title: '仓储物流', icon: '' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/warehouse',
|
||||
component: Views,
|
||||
name: 'warehouse',
|
||||
redirect: '/sub-operation-service/warehouse-list',
|
||||
meta: { title: '仓储', icon: 'images/ecommerce/menu1.png' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/warehouse-list',
|
||||
component: () => import('@/views/warehouseLogistics/warehouse/index.vue'),
|
||||
name: 'warehouse-list',
|
||||
meta: { title: '仓储列表', icon: '' },
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/warehouse-detail',
|
||||
component: () => import('@/views/warehouseLogistics/warehouse/detail.vue'),
|
||||
name: 'warehouse-detail',
|
||||
meta: { title: '仓储详情', icon: '' },
|
||||
hidden: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/logistics',
|
||||
component: Views,
|
||||
name: 'logistics',
|
||||
redirect: '/sub-operation-service/logistics-list',
|
||||
meta: { title: '物流', icon: 'images/ecommerce/menu1.png' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/logistics-list',
|
||||
component: () => import('@/views/warehouseLogistics/logistics/index.vue'),
|
||||
name: 'logistics-list',
|
||||
meta: { title: '物流列表', icon: '' },
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/logistics-detail',
|
||||
component: () => import('@/views/warehouseLogistics/logistics/detail.vue'),
|
||||
name: 'logistics-detail',
|
||||
meta: { title: '物流详情', icon: '' },
|
||||
hidden: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/test',
|
||||
component: Views,
|
||||
redirect: '/sub-operation-service/test1',
|
||||
name: 'test',
|
||||
meta: { title: '测试', icon: 'images/ecommerce/menu3.png' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-operation-service/test1',
|
||||
component: () => import('@/views/warehouseLogistics/test/test1.vue'),
|
||||
name: 'test1',
|
||||
meta: { title: '子菜单1', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/sub-operation-service/test2',
|
||||
component: () => import('@/views/warehouseLogistics/test/test1.vue'),
|
||||
name: 'test2',
|
||||
meta: { title: '子菜单2', icon: '' },
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
@import 'common/base.scss';
|
||||
@import 'common/define.scss';
|
||||
// @import '@/assets/fonts/iconfont.css';
|
||||
@import '@/assets/fonts/aliiconfont.css';
|
||||
|
||||
#app {
|
||||
position: relative;
|
||||
@ -24,18 +24,57 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: normal
|
||||
white-space: normal;
|
||||
}
|
||||
.clamp1 {
|
||||
line-clamp: 1;
|
||||
-webkit-line-clamp: 1;
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 1);
|
||||
}
|
||||
|
||||
.clamp2 {
|
||||
line-clamp: 2;
|
||||
-webkit-line-clamp: 2;
|
||||
line-height: 1.5;
|
||||
max-height: calc(1.5em * 2);
|
||||
}
|
||||
|
||||
body {
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
--el-color-primary: #25bf82;
|
||||
--el-color-primary-light-3: #45dda1;
|
||||
--el-color-primary-light-5: #8cddbd;
|
||||
--el-color-primary-light-9: rgba(37, 191, 130, 0.1);
|
||||
--el-color-primary-light-8: rgba(37, 191, 130, 0.5);
|
||||
|
||||
.el-input {
|
||||
--el-input-focus-border-color: #25bf82;
|
||||
--el-input-focus-border: #25bf82;
|
||||
::v-deep() {
|
||||
.el-input__wrapper:focus,
|
||||
.el-input__wrapper:hover,
|
||||
.el-input__wrapper .is-focus {
|
||||
box-shadow: 0 0 0 1px $color-main !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-button--primary {
|
||||
--el-button-bg-color: #25bf82;
|
||||
--el-button-border-color: #25bf82;
|
||||
--el-button-outline-color: #45dda1;
|
||||
--el-button-active-color: #158b5c;
|
||||
--el-button-hover-bg-color: #45dda1;
|
||||
--el-button-hover-border-color: #45dda1;
|
||||
--el-button-active-bg-color: #158b5c;
|
||||
--el-button-active-border-color: #158b5c;
|
||||
--el-button-disabled-text-color: var(--el-color-white);
|
||||
--el-button-disabled-bg-color: #45dda1;
|
||||
--el-button-disabled-border-color: #45dda1;
|
||||
}
|
||||
|
||||
--el-menu-hover-text-color: #25bf82;
|
||||
--el-menu-hover-bg-color: fff;
|
||||
}
|
||||
|
||||
@ -109,3 +109,23 @@ export function handleRoutes(routers, pathUrl = '') {
|
||||
item.path = path.resolve(pathUrl, item.path);
|
||||
});
|
||||
}
|
||||
|
||||
export function findParentRoute(routes, targetPath) {
|
||||
for (const route of routes) {
|
||||
if (route.children) {
|
||||
for (const child of route.children) {
|
||||
if (child.path === targetPath) {
|
||||
return route;
|
||||
}
|
||||
if (child.children) {
|
||||
for (const grandChild of child.children) {
|
||||
if (grandChild.path === targetPath) {
|
||||
return child;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
@ -35,9 +35,7 @@ const props = defineProps({
|
||||
justify-content: space-between;
|
||||
.left-menu,
|
||||
.common-content {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
|
||||
height: calc(100% - 16px);
|
||||
border-radius: 8px;
|
||||
padding: 8px;
|
||||
overflow-y: auto;
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="c-user-page-top">
|
||||
<div class="title">{{ pageTitle }}</div>
|
||||
<div class="title">
|
||||
<div class="title-pos">{{ pageTitle }}</div>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
<div v-for="(n, index) in linkList" :key="n.name" class="right-item" :class="currentLink == n.name ? 'act' : ''" @click="toLink(n)">
|
||||
<div class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
|
||||
@ -61,6 +63,11 @@ const toLink = (item) => {
|
||||
.title {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.title-pos {
|
||||
}
|
||||
}
|
||||
.top-right {
|
||||
justify-content: flex-start;
|
||||
|
||||
292
sub-operation-service/src/views/userCenter/orderSuccess.vue
Normal file
292
sub-operation-service/src/views/userCenter/orderSuccess.vue
Normal file
@ -0,0 +1,292 @@
|
||||
<template>
|
||||
<div class="order-success-warp">
|
||||
<userHeader :title="'订单提交成功'"></userHeader>
|
||||
<div class="order-success-content">
|
||||
<div class="content-top">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="14" align="left">
|
||||
<div class="back">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
</div>
|
||||
<div class="status">
|
||||
<div class="status-val">
|
||||
<el-icon><SuccessFilled /></el-icon>
|
||||
<span>{{ '订单提交成功' }}</span>
|
||||
</div>
|
||||
<div class="tips">请您及时付款，以便订单尽快完成！</div>
|
||||
<div class="sub-tips">请您在提交订单后 <span class="txt-main">0时29分59秒</span> 内完成支付，否则订单会自动取消。</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10" align="right">
|
||||
<div class="pay-amount">
|
||||
<span class="tips">实付款：</span> <span class="total">{{ totalAmout.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="order-no">交易订单：JY20250101000001</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
||||
<div class="pay-style-warp">
|
||||
<div class="title">支付方式</div>
|
||||
<div class="pay-list">
|
||||
<div class="pay-list-pos">
|
||||
<div
|
||||
v-for="(s, indexs) in styleList"
|
||||
:key="s.name"
|
||||
class="pay-item"
|
||||
:class="s.name == currentPay ? 'pay-act' : 'pay-normal'"
|
||||
@click="selectPayStyle(s.name)"
|
||||
>
|
||||
<div class="is-style">
|
||||
<div class="is-style-pos">
|
||||
<el-icon><CircleCheckFilled /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="style-icon" :style="{ background: s.color }">
|
||||
<div class="iconfont" :class="'icon-' + s.icon"></div>
|
||||
</div>
|
||||
<div class="style-txt">
|
||||
<div class="style-txt-pos">{{ s.title + '支付' || '--' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pay-code">
|
||||
<div class="pay-tips">
|
||||
<span class="tips">
|
||||
<div class="tips-pos">{{ currentIndex > -1 ? styleList[currentIndex].title + '扫码' : '扫码' }}，支付</div>
|
||||
</span>
|
||||
<span class="pay-amount">{{ payAmout.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pay-code-img">
|
||||
<div class="code-img">
|
||||
<costomImg :url="qrImg" :preview-list="[qrImg]" :is-montage="false" :is-view="false" :fit="'cover'"></costomImg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import userHeader from './components/userHeader.vue';
|
||||
import costomImg from '@/components/costomImg.vue';
|
||||
import { qrImg } from '@/layouts/component/Header/base64img.js';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
let totalAmout = ref(196);
|
||||
|
||||
let styleList = reactive([
|
||||
{ title: '支付宝', name: 'alipay', icon: 'alipay', color: 'rgb(0, 159, 232)' },
|
||||
{ title: '微信', name: 'wx', icon: 'wxpay', color: 'rgb(40, 196, 69)' },
|
||||
]);
|
||||
|
||||
let currentPay = ref('wx');
|
||||
|
||||
const selectPayStyle = (name) => {
|
||||
currentPay.value = name;
|
||||
};
|
||||
|
||||
let currentIndex = computed(() => {
|
||||
let index = -1;
|
||||
index = styleList.findIndex((m) => {
|
||||
return m.name == currentPay.value;
|
||||
});
|
||||
return index;
|
||||
});
|
||||
|
||||
let payAmout = ref(147);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.order-success-warp {
|
||||
width: 100%;
|
||||
.order-success-content {
|
||||
width: 100%;
|
||||
background: $color-fff;
|
||||
height: calc(100vh - 136px);
|
||||
margin-top: 16px;
|
||||
border-radius: 16px;
|
||||
overflow-y: auto;
|
||||
.content-top {
|
||||
background: $color-main-table-header;
|
||||
padding: 16px;
|
||||
.back,
|
||||
.status {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
padding-left: 16px;
|
||||
.status-val {
|
||||
color: $color-main;
|
||||
.el-icon {
|
||||
font-size: 38px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
font-size: 26px;
|
||||
}
|
||||
.tips {
|
||||
font-size: 20px;
|
||||
}
|
||||
.sub-tips {
|
||||
font-size: 16px;
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
.back {
|
||||
.el-icon {
|
||||
font-size: 30px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-amount {
|
||||
padding-top: 24px;
|
||||
.tips {
|
||||
font-size: 20px;
|
||||
}
|
||||
.total {
|
||||
font-size: 32px;
|
||||
color: $color-main;
|
||||
}
|
||||
.total::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
.order-no {
|
||||
color: $color-999;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-style-warp {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
.title {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
}
|
||||
.pay-list {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin: 64px 0;
|
||||
|
||||
width: 100%;
|
||||
.pay-list-pos {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 64px;
|
||||
}
|
||||
.pay-item {
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
cursor: pointer;
|
||||
.is-style,
|
||||
.style-icon,
|
||||
.style-txt {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.is-style,
|
||||
.style-txt {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.is-style {
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.style-txt {
|
||||
font-size: 20px;
|
||||
}
|
||||
.style-icon {
|
||||
border-radius: 16px;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
.iconfont {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: $color-fff;
|
||||
&.icon-alipay {
|
||||
font-size: 46px !important;
|
||||
}
|
||||
&.icon-wxpay {
|
||||
font-size: 38px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pay-act {
|
||||
border: 1px solid $color-main;
|
||||
.is-style {
|
||||
.el-icon {
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pay-normal {
|
||||
border: 1px solid $color-da;
|
||||
.is-style {
|
||||
.el-icon {
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-code {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
.pay-tips {
|
||||
.tips,
|
||||
.pay-amount {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tips {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.tips-pos {
|
||||
font-size: 20px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.pay-amount {
|
||||
font-size: 32px;
|
||||
color: $color-main;
|
||||
}
|
||||
.pay-amount::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-code-img {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
margin: 24px 0;
|
||||
.code-img {
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
93
sub-operation-service/src/views/userCenter/paySuccess.vue
Normal file
93
sub-operation-service/src/views/userCenter/paySuccess.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="pay-success-warp">
|
||||
<userHeader :title="'支付成功'"></userHeader>
|
||||
|
||||
<div class="pay-success-content">
|
||||
<div class="icon-img">
|
||||
<el-icon><CircleCheckFilled /></el-icon>
|
||||
</div>
|
||||
<div class="success-txt">
|
||||
<div class="title">恭喜，支付成功！</div>
|
||||
<div class="tips">查看订单详情，请前往“个人中心”的“我的订单”</div>
|
||||
</div>
|
||||
<div class="success-do">
|
||||
<div class="success-do-pos">
|
||||
<div class="do-item">
|
||||
<el-button @click="toLink('/sub-operation-service/userCenter-userOrders')">查看订单</el-button>
|
||||
</div>
|
||||
<div class="do-item">
|
||||
<el-button type="primary" @click="toLink('/sub-operation-service/home')">返回首页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import userHeader from './components/userHeader.vue';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const toLink = (path) => {
|
||||
if (path && path != '') {
|
||||
router.push(path);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.pay-success-warp {
|
||||
width: 100%;
|
||||
|
||||
.pay-success-content {
|
||||
width: 100%;
|
||||
height: calc(100vh - 136px);
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
padding-top: 64px;
|
||||
margin-top: 16px;
|
||||
.icon-img {
|
||||
.el-icon {
|
||||
font-size: 80px;
|
||||
color: $color-main;
|
||||
}
|
||||
}
|
||||
|
||||
.success-txt {
|
||||
.title {
|
||||
font-size: 38px;
|
||||
color: $color-main;
|
||||
}
|
||||
.tips {
|
||||
font-size: 24px;
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
|
||||
.success-do {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
margin: 64px 0;
|
||||
.success-do-pos {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
gap: 64px;
|
||||
.do-item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
.el-button {
|
||||
font-size: 20px;
|
||||
padding: 20px 48px !important;
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -156,7 +156,9 @@ let totalAmout = computed(() => {
|
||||
return num;
|
||||
});
|
||||
|
||||
const toSettlement = () => {};
|
||||
const toSettlement = () => {
|
||||
router.push('/sub-operation-service/userCenter-sureOrder');
|
||||
};
|
||||
|
||||
const toCheckAll = () => {
|
||||
isAll.value = !isAll.value;
|
||||
@ -247,11 +249,12 @@ const doSingleDel = (indexP, index) => {
|
||||
width: 100%;
|
||||
.page-content-warp {
|
||||
width: 100%;
|
||||
height: calc(100vh - 116px);
|
||||
height: calc(100vh - 135px);
|
||||
position: relative;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
overflow: hidden;
|
||||
margin: 16px 0 0 16px;
|
||||
.fix-top,
|
||||
.fix-bottom {
|
||||
position: absolute;
|
||||
|
||||
541
sub-operation-service/src/views/userCenter/sureOrder.vue
Normal file
541
sub-operation-service/src/views/userCenter/sureOrder.vue
Normal file
@ -0,0 +1,541 @@
|
||||
<template>
|
||||
<div class="sure-order-warp">
|
||||
<userHeader :title="'确认订单'"></userHeader>
|
||||
<div class="addr-list">
|
||||
<div class="addr-list-top">
|
||||
<div class="back">
|
||||
<el-icon><ArrowLeftBold /></el-icon>
|
||||
<span>确认收货地址</span>
|
||||
</div>
|
||||
<div class="addr-manage">管理地址</div>
|
||||
</div>
|
||||
<el-scrollbar>
|
||||
<div class="scrollbar-flex-content">
|
||||
<div
|
||||
v-for="item in addrlist"
|
||||
:key="item"
|
||||
class="addr-item"
|
||||
:class="currentAddr == item.id ? 'addr-item-act' : 'addr-item-normal'"
|
||||
@click="selectAddr(item.id)"
|
||||
>
|
||||
<div class="addr-item-icon">
|
||||
<div class="icon-pos">
|
||||
<div class="iconfont icon-location"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="addr-item-info">
|
||||
<div class="region">{{ item.region || '--' }}</div>
|
||||
<div class="addr">{{ item.addr || '--' }}</div>
|
||||
<div class="link-name">{{ item.linkName }} {{ item.phone }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
|
||||
<div class="order-info">
|
||||
<div class="order-info-top">确认订单信息</div>
|
||||
<div class="order-info-list">
|
||||
<div class="content-item-warp">
|
||||
<div class="content-item-header">
|
||||
<div class="header-th first">商品</div>
|
||||
<div class="header-th other">规格</div>
|
||||
<div class="header-th other">原价</div>
|
||||
<div class="header-th other">数量</div>
|
||||
<div class="header-th other">小计</div>
|
||||
</div>
|
||||
<div class="content-item-list">
|
||||
<div v-for="(n, index) in datalist" :key="index" class="content-item">
|
||||
<div class="shop-info">
|
||||
<div class="shop-img">
|
||||
<costomImg
|
||||
:url="'images/ecommerce/' + 'pic.png'"
|
||||
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]"
|
||||
:is-view="false"
|
||||
></costomImg>
|
||||
</div>
|
||||
<span class="shop-name txt-ellipsis clamp2">{{ n.shop }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="n.goodlist && n.goodlist.length > 0" class="good-list">
|
||||
<div v-for="(g, indexg) in n.goodlist" :key="indexg" class="good-item">
|
||||
<div class="good-img">
|
||||
<costomImg
|
||||
:url="'images/ecommerce/' + 'pic.png'"
|
||||
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')]"
|
||||
:is-view="false"
|
||||
></costomImg>
|
||||
</div>
|
||||
<div class="good-info">
|
||||
<div class="good-info-pos">
|
||||
<div class="txt-ellipsis clamp2">{{ g.title || '--' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="good-price-num">
|
||||
<div class="good-price-num-pos">
|
||||
<div class="price">{{ g.price }} / {{ g.unit }}</div>
|
||||
<div class="total">{{ g.price }}</div>
|
||||
<div class="num">
|
||||
<div class="right-item">
|
||||
<el-input-number v-model="g.num" :min="1">
|
||||
<template #suffix>
|
||||
<span>{{ g.unit }}</span>
|
||||
</template>
|
||||
</el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
<div class="good-total">
|
||||
{{ (g.price * g.num).toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-item-bottom">
|
||||
<div class="num-total">
|
||||
共
|
||||
<span class="num-val">{{ totalNum }}</span
|
||||
>件商品
|
||||
</div>
|
||||
<div class="price-total">
|
||||
<div class="amount cost-item">
|
||||
<span>商品总价：</span>
|
||||
<span class="coat-val">{{ totalAmout.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="freight cost-item">
|
||||
<span>运费：</span>
|
||||
<span class="coat-val">{{ carriage.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="order-bottom">
|
||||
<div class="bottom-total">
|
||||
<span class="tips">实付款</span>
|
||||
<span class="total">{{ (totalAmout + carriage).toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="bottom-do">
|
||||
<el-button type="primary" @click="toSureOrder">提交订单</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import userHeader from './components/userHeader.vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const addrlist = reactive([
|
||||
{ id: '001', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 101', linkName: '李先生', phone: '13813575526' },
|
||||
{ id: '002', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王先生', phone: '13813575528' },
|
||||
{ id: '003', region: '云南省 昆明市 呈贡区 彩云北路', addr: '星光小区 一单元 1楼 101', linkName: '李女士', phone: '13813575527' },
|
||||
{ id: '004', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 102', linkName: '王女生', phone: '13813565525' },
|
||||
{ id: '005', region: '云南省 昆明市 呈贡区 彩云南路', addr: '星光小区 一单元 1楼 105', linkName: '张女生', phone: '13813565526' },
|
||||
]);
|
||||
|
||||
let currentAddr = ref('001');
|
||||
|
||||
const selectAddr = (data) => {
|
||||
currentAddr.value = data;
|
||||
};
|
||||
|
||||
let datalist = reactive([
|
||||
{
|
||||
id: '01',
|
||||
shop: '银河生态农产品有限公司',
|
||||
shopimg: '',
|
||||
ischeck: false,
|
||||
goodlist: [
|
||||
{ id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.9, unit: '份', num: 2, ischeck: false },
|
||||
{ id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.6, unit: '份', num: 100, ischeck: false },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
shop: '方立生态农产品有限公司',
|
||||
shopimg: '',
|
||||
ischeck: false,
|
||||
goodlist: [{ id: '001', title: '勐撒镇 原生态 有机 大白菜', price: 4.9, unit: '份', num: 2, ischeck: false }],
|
||||
},
|
||||
]);
|
||||
|
||||
const toSureOrder = () => {
|
||||
router.push('/sub-operation-service/userCenter-orderSuccess');
|
||||
};
|
||||
|
||||
let carriage = ref(98);
|
||||
let totalAmout = computed(() => {
|
||||
let num = 0;
|
||||
let list = [];
|
||||
if (datalist && datalist.length > 0) {
|
||||
list = datalist
|
||||
.map((m) => {
|
||||
return m.goodlist;
|
||||
})
|
||||
.flat();
|
||||
|
||||
// console.info('totalAmout**************', list);
|
||||
if (list && list.length > 0) {
|
||||
num = list.reduce((acc, current) => {
|
||||
return acc + current.price * current.num;
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
return num;
|
||||
});
|
||||
|
||||
let totalNum = computed(() => {
|
||||
let num = 0;
|
||||
let list = [];
|
||||
if (datalist && datalist.length > 0) {
|
||||
list = datalist
|
||||
.map((m) => {
|
||||
return m.goodlist;
|
||||
})
|
||||
.flat();
|
||||
|
||||
if (list && list.length > 0) {
|
||||
num = list.reduce((acc, current) => {
|
||||
return acc + 1;
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
return num;
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.sure-order-warp {
|
||||
width: 100%;
|
||||
.addr-list {
|
||||
background: $color-fff;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin: 16px 0;
|
||||
.addr-list-top {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
.back {
|
||||
font-size: 20px;
|
||||
.el-icon {
|
||||
font-size: 30px;
|
||||
}
|
||||
.el-icon,
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.addr-manage {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.scrollbar-flex-content {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
gap: 16px;
|
||||
}
|
||||
.addr-item {
|
||||
width: 280px;
|
||||
padding: 16px 8px;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
cursor: pointer;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
&.addr-item-act {
|
||||
border: 1px solid $color-main;
|
||||
.iconfont {
|
||||
color: $color-main !important;
|
||||
}
|
||||
}
|
||||
&.addr-item-normal {
|
||||
border: 1px solid $color-da;
|
||||
}
|
||||
.addr-item-icon,
|
||||
.addr-item-info {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.addr-item-icon {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.iconfont {
|
||||
font-size: 20px;
|
||||
color: $color-666;
|
||||
}
|
||||
}
|
||||
.addr-item-info {
|
||||
font-size: 15px;
|
||||
padding-left: 8px;
|
||||
line-height: 24px;
|
||||
.region,
|
||||
.link-name {
|
||||
color: $color-999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-info {
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 340px);
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
.order-info-top,
|
||||
.order-bottom,
|
||||
.order-info-list {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
padding: 16px;
|
||||
}
|
||||
.order-info-top {
|
||||
top: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
.order-bottom {
|
||||
bottom: 0;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
.bottom-total,
|
||||
.bottom-do {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.bottom-total {
|
||||
.tips,
|
||||
.total {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tips {
|
||||
font-size: 30px;
|
||||
}
|
||||
.total {
|
||||
font-size: 42px;
|
||||
color: $color-main;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.total::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
.bottom-do {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
display: inline-flex;
|
||||
::v-deep() {
|
||||
.el-button {
|
||||
font-size: 18px !important;
|
||||
padding: 0 40px !important;
|
||||
line-height: 42px !important;
|
||||
height: 42px !important;
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-info-list {
|
||||
top: 60px;
|
||||
width: calc(100% - 32px);
|
||||
height: calc(100% - 150px);
|
||||
background: $color-f5;
|
||||
left: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
position: relative;
|
||||
.content-item-warp {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.content-item-header {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
.header-th {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 32px;
|
||||
color: $color-999;
|
||||
font-size: 20px;
|
||||
margin-bottom: 16px;
|
||||
&.first {
|
||||
width: 340px;
|
||||
text-align: left;
|
||||
}
|
||||
&.other {
|
||||
width: calc((100% - 340px) / 4);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-item-list {
|
||||
width: 100%;
|
||||
top: 48px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 100px);
|
||||
}
|
||||
.content-item {
|
||||
width: 100%;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
.shop-info {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
.shop-do,
|
||||
.shop-img,
|
||||
.shop-name {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.shop-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.shop-do {
|
||||
width: 30px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.shop-name {
|
||||
width: calc(100% - 62px);
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.good-list {
|
||||
width: 100%;
|
||||
.good-item {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
padding-left: 16px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.good-do,
|
||||
.good-img,
|
||||
.good-info,
|
||||
.good-price-num {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.good-do {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.good-do-pos {
|
||||
}
|
||||
}
|
||||
.good-img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.good-info {
|
||||
width: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.good-info-pos {
|
||||
font-size: 18px;
|
||||
color: $color-666;
|
||||
}
|
||||
}
|
||||
.good-price-num {
|
||||
width: calc(100% - 340px);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.good-price-num-pos {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
gap: 16px;
|
||||
.price,
|
||||
.total {
|
||||
font-size: 20px;
|
||||
}
|
||||
.price {
|
||||
font-weight: 400;
|
||||
}
|
||||
.total {
|
||||
color: $color-main;
|
||||
font-weight: 700;
|
||||
}
|
||||
.total::before {
|
||||
content: '￥';
|
||||
}
|
||||
.good-total {
|
||||
color: $color-main;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-item-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -8px;
|
||||
line-height: 48px;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
.num-total,
|
||||
.price-total {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-size: 20px;
|
||||
.cost-item {
|
||||
display: inline-block;
|
||||
margin: 0 16px;
|
||||
.coat-val::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
}
|
||||
.num-total {
|
||||
.num-val {
|
||||
color: $color-main;
|
||||
padding: 0 8px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,320 @@
|
||||
<template>
|
||||
<div class="user-orders-warp">我的订单</div>
|
||||
<div class="user-orders-warp">
|
||||
<userHeader :title="'订单管理'"></userHeader>
|
||||
<div class="user-orders-content">
|
||||
<div class="order-tab">
|
||||
<el-tabs v-model="activeCurrent">
|
||||
<el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<div class="order-list-warp">
|
||||
<div class="order-list">
|
||||
<div v-for="(o, indexo) in orderList" :key="indexo" class="order-item">
|
||||
<div class="order-item-top">
|
||||
<div class="top-l">
|
||||
<div class="top-item">
|
||||
<div class="label">订单编号：</div>
|
||||
<div class="val">{{ o.orderNo || '--' }}</div>
|
||||
</div>
|
||||
<div class="top-item">
|
||||
<div class="label">下单时间：</div>
|
||||
<div class="val">{{ o.createTime || '--' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-r">
|
||||
<div class="top-item">
|
||||
<div class="label">订单金额：</div>
|
||||
<div class="val amount">{{ o.payAmount.toFixed(2) || '0.00' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="o.goodlist && o.goodlist.length > 0" class="order-item-content">
|
||||
<div class="content-list">
|
||||
<div v-for="(g, indexg) in o.goodlist" :key="indexg" class="good-item">
|
||||
<div class="good-img">
|
||||
<costomImg
|
||||
:url="'images/ecommerce/' + 'pic.png'"
|
||||
:preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
|
||||
:is-view="false"
|
||||
></costomImg>
|
||||
</div>
|
||||
<div class="good-info">
|
||||
<div class="good-info-pos">
|
||||
<div class="txt-ellipsis clamp2">{{ g.title || '--' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="good-price-num">
|
||||
<div class="good-price-num-pos">
|
||||
<div class="price">{{ g.price }} / {{ g.unit }} * {{ g.num }}</div>
|
||||
<div class="total">
|
||||
<div class="amount">{{ (g.price * g.num + g.carriage).toFixed(2) }}</div>
|
||||
<div class="carriage">( 含运费{{ g.carriage.toFixed(2) }})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div class="content-right-pos">
|
||||
<div v-if="o.status == 0" class="right-item do-btn">
|
||||
<el-button type="primary" @click="doPay">立即付款</el-button>
|
||||
</div>
|
||||
<div v-if="o.status == 0" class="right-item do-btn">
|
||||
<el-button @click="doCancel">取消订单</el-button>
|
||||
</div>
|
||||
<div v-if="o.status != 0" class="right-item">已发货</div>
|
||||
<div v-if="o.status != 0" class="right-item text-link">快递单号</div>
|
||||
<div class="right-item text-link">订单详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import userHeader from './components/userHeader.vue';
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
let bottomList = reactive([
|
||||
{ title: '全部', name: 'all' },
|
||||
{ title: '待付款', name: 'topay' },
|
||||
{ title: '待发货', name: 'pending' },
|
||||
{ title: '待收货', name: 'receive' },
|
||||
{ title: '已发货', name: 'sendout' },
|
||||
]);
|
||||
|
||||
let activeCurrent = ref('all');
|
||||
|
||||
let orderList = reactive([
|
||||
{
|
||||
id: '1',
|
||||
orderNo: 'YH8888888888',
|
||||
createTime: '2025.01.01 10:00:00',
|
||||
payAmount: 81,
|
||||
status: 0,
|
||||
goodlist: [
|
||||
{ id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.9, unit: '份', num: 10, carriage: 6 },
|
||||
{ id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.6, unit: '份', num: 10, carriage: 0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
orderNo: 'YH8888888889',
|
||||
createTime: '2025.02.01 10:00:00',
|
||||
payAmount: 110,
|
||||
status: 1,
|
||||
goodlist: [
|
||||
{ id: '001', title: '耿马镇 原生态 有机 西红柿', price: 4.8, unit: '份', num: 10, carriage: 6 },
|
||||
{ id: '002', title: '耿马镇 原生态 有机 西蓝花', price: 2.5, unit: '份', num: 10, carriage: 6 },
|
||||
{ id: '002', title: '耿马镇 原生态 有机 茄子', price: 2.5, unit: '份', num: 10, carriage: 0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
orderNo: 'YH8888888899',
|
||||
createTime: '2025.02.01 10:00:00',
|
||||
payAmount: 85,
|
||||
status: 2,
|
||||
goodlist: [
|
||||
{ id: '001', title: '勐简镇 原生态 有机 西红柿', price: 4.8, unit: '份', num: 10, carriage: 6 },
|
||||
{ id: '002', title: '勐简镇 原生态 有机 西蓝花', price: 2.5, unit: '份', num: 10, carriage: 6 },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const doPay = () => {};
|
||||
|
||||
const doCancel = () => {};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.user-orders-warp {
|
||||
width: 100%;
|
||||
.user-orders-content {
|
||||
width: 100%;
|
||||
background: $color-fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
height: calc(100vh - 136px);
|
||||
}
|
||||
.order-tab {
|
||||
width: 100%;
|
||||
|
||||
::v-deep() {
|
||||
.el-tabs__nav-wrap:after {
|
||||
background: transparent !important;
|
||||
}
|
||||
.el-tabs__item {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
height: 5px !important;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.el-descriptions__label,
|
||||
.el-descriptions__content {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.cell-item {
|
||||
display: inline-flex;
|
||||
}
|
||||
.el-descriptions__label {
|
||||
color: $color-999;
|
||||
}
|
||||
.el-descriptions__content {
|
||||
color: $color-333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-list-warp {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
overflow-y: auto;
|
||||
.order-list {
|
||||
width: 100%;
|
||||
.order-item {
|
||||
width: 100%;
|
||||
.order-item-top {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
padding: 16px 0;
|
||||
.top-l,
|
||||
.top-r {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.top-l {
|
||||
display: inline-flex;
|
||||
width: 80%;
|
||||
gap: 64px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.top-r {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.top-item {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
.label,
|
||||
.val {
|
||||
font-size: 18px;
|
||||
}
|
||||
.label {
|
||||
padding-right: 8px;
|
||||
}
|
||||
.amount::before {
|
||||
content: '￥';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-item-content {
|
||||
background: $color-f5;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
border-radius: 16px;
|
||||
.content-list,
|
||||
.content-right {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.content-list {
|
||||
width: calc(100% - 160px);
|
||||
.good-item {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
padding-left: 16px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.good-img,
|
||||
.good-info,
|
||||
.good-price-num {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.good-img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.good-info {
|
||||
width: 200px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.good-info-pos {
|
||||
font-size: 18px;
|
||||
color: $color-666;
|
||||
}
|
||||
}
|
||||
.good-price-num {
|
||||
width: calc(100% - 340px);
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.good-price-num-pos {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
gap: 16px;
|
||||
.price,
|
||||
.total {
|
||||
font-size: 20px;
|
||||
}
|
||||
.price {
|
||||
font-weight: 400;
|
||||
}
|
||||
.total {
|
||||
text-align: center;
|
||||
.amount {
|
||||
color: $color-main;
|
||||
font-weight: 700;
|
||||
}
|
||||
.amount::before {
|
||||
content: '￥';
|
||||
}
|
||||
.carriage {
|
||||
color: $color-666;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content-right {
|
||||
width: 160px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
.content-right-pos {
|
||||
.text-normal {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
.text-link {
|
||||
color: $color-main;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.do-btn {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<page-layout :menus="state.menus"> 详情 </page-layout>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {},
|
||||
data: {},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<page-layout :menus="state.menus"> 物流 </page-layout>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<page-layout :menus="state.menus"> test1 </page-layout>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<page-layout :menus="state.menus"> test2 </page-layout>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<page-layout :menus="state.menus"> 详情123 </page-layout>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {},
|
||||
data: {},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<page-layout :menus="state.menus">
|
||||
<el-row :gutter="20">
|
||||
<el-col v-for="(item, index) in state.data" :key="index" :span="12">
|
||||
<el-card class="storage-card" shadow="hover">
|
||||
<div class="storage-content">
|
||||
<div class="storage-content-top" @click="toLink(item)">
|
||||
<el-image :src="item.imageUrl" fit="cover" class="storage-image" />
|
||||
<div class="storage-info">
|
||||
<h3 class="storage-title">{{ item.title }}</h3>
|
||||
<div class="storage-desc">
|
||||
<span>{{ item.description }}</span>
|
||||
<i></i>
|
||||
</div>
|
||||
<div class="storage-tags">
|
||||
<el-tag effect="plain" round>延长仓储</el-tag>
|
||||
<el-tag effect="plain" round>保鲜储存</el-tag>
|
||||
</div>
|
||||
<div class="storage-location">
|
||||
<el-icon><Location /></el-icon>
|
||||
{{ item.location }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="storage-price">
|
||||
<div class="storage-price-left">
|
||||
<span class="price-label">报价</span>
|
||||
<span class="price-amount">¥{{ item.price }}/间/月</span>
|
||||
</div>
|
||||
<el-button type="success" class="contact-btn">
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
<span>联系卖家</span>
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="item.rank" class="rank-badge">
|
||||
{{ item.rank }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<page-pagination :total="20" @current-change="currentChange" />
|
||||
</page-layout>
|
||||
</template>
|
||||
<script setup name="page-menu">
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import warehouseLogisticsRoutes from '@/router/modules/warehouseLogistics';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const state = reactive({
|
||||
menus: warehouseLogisticsRoutes[0].children,
|
||||
query: {
|
||||
current: 1,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
imageUrl: '/storage1.jpg',
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '600.0',
|
||||
rank: '1',
|
||||
},
|
||||
{
|
||||
imageUrl: '/storage2.jpg',
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心',
|
||||
location: '临沧市-耿马县',
|
||||
price: '600.0',
|
||||
rank: '',
|
||||
},
|
||||
{
|
||||
imageUrl: '/storage3.jpg',
|
||||
title: '果蔬保鲜仓储',
|
||||
description: '绿鲜蔬选果蔬仓储中心 ',
|
||||
location: '临沧市-耿马县',
|
||||
price: '600.0',
|
||||
rank: '3',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const currentChange = (current) => {
|
||||
state.query.current = current;
|
||||
};
|
||||
|
||||
const toLink = (row) => {
|
||||
router.push({
|
||||
path: '/sub-operation-service/warehouse-detail',
|
||||
query: { id: row?.id ?? '100' },
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.storage-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 24px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.storage-content {
|
||||
@include flex-column();
|
||||
gap: 16px;
|
||||
|
||||
&-top {
|
||||
@include flex-row();
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-right: 16px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.storage-info {
|
||||
padding-right: 50px;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.storage-title,
|
||||
.storage-desc,
|
||||
.storage-tags,
|
||||
.storage-location {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.storage-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
@include ellipsis();
|
||||
}
|
||||
|
||||
.storage-desc {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
@include ellipsis();
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-tags {
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-location {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.storage-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&-left {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.price-label {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.price-amount {
|
||||
color: $color-primary;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.contact-btn {
|
||||
width: 152px;
|
||||
height: 48px;
|
||||
font-size: 20px;
|
||||
border-radius: 8px;
|
||||
background: #25bf82 !important;
|
||||
|
||||
:deep(.el-icon) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
@ -2,8 +2,8 @@
|
||||
* @Descripttion:
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2022-09-18 21:24:29
|
||||
* @LastEditors: zenghua.wang “1048523306@qq.com”
|
||||
* @LastEditTime: 2025-01-20 10:51:23
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2025-04-14 09:02:04
|
||||
*/
|
||||
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
@ -55,6 +55,7 @@ export default defineConfig(({ command, mode }) => {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src'),
|
||||
'#': resolve(__dirname, '../main/src'),
|
||||
},
|
||||
extensions: ['.js', '.vue', '.json', '.ts'],
|
||||
},
|
||||
|
||||
@ -2086,7 +2086,7 @@ dunder-proto@^1.0.0, dunder-proto@^1.0.1:
|
||||
es-errors "^1.3.0"
|
||||
gopd "^1.2.0"
|
||||
|
||||
echarts@^5.5.0:
|
||||
echarts@^5.6.0:
|
||||
version "5.6.0"
|
||||
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
|
||||
integrity sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==
|
||||
@ -5531,6 +5531,11 @@ split-string@^3.0.1, split-string@^3.0.2:
|
||||
dependencies:
|
||||
extend-shallow "^3.0.0"
|
||||
|
||||
splitpanes@^4.0.3:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.npmmirror.com/splitpanes/-/splitpanes-4.0.3.tgz#342c2b57d906371c2ab44b4578333fbeb13aaa94"
|
||||
integrity sha512-S/f1CoH2JroOib7kzQtTQNtQCa7VzNQ2qKOO5HNj/5EVVcNkfz1eX/sH+X3XKdBdDLihEKDekVGwrLADd2oirA==
|
||||
|
||||
sprintf-js@~1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.npmmirror.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user