2
This commit is contained in:
@@ -12,17 +12,19 @@ const _sfc_main = {
|
||||
notices: [],
|
||||
loadingNotices: false,
|
||||
noticeError: "",
|
||||
consultLabel: "咨询",
|
||||
consultDialogVisible: false,
|
||||
consultMessage: "",
|
||||
features: [
|
||||
{ key: "product", title: "货品", img: "/static/icons/product.png", emoji: "📦" },
|
||||
{ key: "customer", title: "客户", img: "/static/icons/customer.png", emoji: "👥" },
|
||||
{ key: "sale", title: "销售", img: "/static/icons/sale.png", emoji: "💰" },
|
||||
{ key: "account", title: "账户", img: "/static/icons/account.png", emoji: "💳" },
|
||||
{ key: "supplier", title: "供应商", img: "/static/icons/supplier.png", emoji: "🚚" },
|
||||
{ key: "purchase", title: "进货", img: "/static/icons/purchase.png", emoji: "🛒" },
|
||||
{ key: "otherPay", title: "其他支出", img: "/static/icons/other-pay.png", emoji: "💸" },
|
||||
{ key: "vip", title: "VIP会员", img: "/static/icons/vip.png", emoji: "👑" },
|
||||
{ key: "report", title: "报表", img: "/static/icons/report.png", emoji: "📊" },
|
||||
{ key: "more", title: "更多", img: "/static/icons/more.png", emoji: "⋯" }
|
||||
{ key: "customer", title: "客户", img: "/static/icons/webwxgetmsgimg.png", emoji: "👥" },
|
||||
{ key: "sale", title: "销售", img: "/static/icons/webwxgetmsgimg.jpg", emoji: "💰" },
|
||||
{ key: "account", title: "账户", img: "/static/icons/icons8-profile-50.png", emoji: "💳" },
|
||||
{ key: "supplier", title: "供应商", img: "/static/icons/icons8-supplier-50.png", emoji: "🚚" },
|
||||
{ key: "purchase", title: "进货", img: "/static/icons/icons8-dollar-ethereum-exchange-50.png", emoji: "🛒" },
|
||||
{ key: "otherPay", title: "其他支出", img: "/static/icons/icons8-expenditure-64.png", emoji: "💸" },
|
||||
{ key: "vip", title: "VIP会员", img: "/static/icons/icons8-vip-48.png", emoji: "👑" },
|
||||
{ key: "report", title: "报表", img: "/static/icons/icons8-graph-report-50.png", emoji: "📊" }
|
||||
]
|
||||
};
|
||||
},
|
||||
@@ -42,6 +44,7 @@ const _sfc_main = {
|
||||
}
|
||||
this.fetchMetrics();
|
||||
this.fetchNotices();
|
||||
this.fetchLatestConsult();
|
||||
},
|
||||
methods: {
|
||||
async fetchMetrics() {
|
||||
@@ -58,6 +61,59 @@ const _sfc_main = {
|
||||
} catch (e) {
|
||||
}
|
||||
},
|
||||
async fetchLatestConsult() {
|
||||
try {
|
||||
const d = await common_http.get("/api/consults");
|
||||
if (d && d.replied)
|
||||
this.consultLabel = "已回复";
|
||||
else
|
||||
this.consultLabel = "咨询";
|
||||
this._latestConsult = d;
|
||||
} catch (e) {
|
||||
this.consultLabel = "咨询";
|
||||
}
|
||||
},
|
||||
onConsultTap() {
|
||||
if (this.consultLabel === "已回复" && this._latestConsult && this._latestConsult.id) {
|
||||
const msg = this._latestConsult.latestReply ? this._latestConsult.latestReply : this._latestConsult.message || "";
|
||||
common_vendor.index.showModal({ title: "咨询回复", content: msg || "暂无内容", showCancel: false, success: async (res) => {
|
||||
if (!res || res.confirm !== true)
|
||||
return;
|
||||
try {
|
||||
const r = await common_http.put(`/api/consults/${this._latestConsult.id}/ack`, {});
|
||||
this.consultLabel = "咨询";
|
||||
this._latestConsult = null;
|
||||
setTimeout(() => this.fetchLatestConsult(), 200);
|
||||
} catch (e) {
|
||||
try {
|
||||
common_vendor.index.showToast({ title: e && e.message || "已读同步失败", icon: "none" });
|
||||
} catch (_) {
|
||||
}
|
||||
}
|
||||
} });
|
||||
return;
|
||||
}
|
||||
this.consultMessage = "";
|
||||
this.consultDialogVisible = true;
|
||||
},
|
||||
closeConsultDialog() {
|
||||
this.consultDialogVisible = false;
|
||||
},
|
||||
async submitConsult() {
|
||||
const text = String(this.consultMessage || "").trim();
|
||||
if (!text) {
|
||||
common_vendor.index.showToast({ title: "请输入咨询内容", icon: "none" });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await common_http.post("/api/consults", { message: text });
|
||||
this.consultDialogVisible = false;
|
||||
common_vendor.index.showToast({ title: "已提交", icon: "success" });
|
||||
setTimeout(() => this.fetchLatestConsult(), 300);
|
||||
} catch (e) {
|
||||
common_vendor.index.showToast({ title: e && e.message || "提交失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
async fetchNotices() {
|
||||
this.loadingNotices = true;
|
||||
this.noticeError = "";
|
||||
@@ -128,7 +184,7 @@ const _sfc_main = {
|
||||
},
|
||||
goDetail() {
|
||||
try {
|
||||
common_vendor.index.__f__("log", "at pages/index/index.vue:198", "[index] goDetail → /pages/detail/index");
|
||||
common_vendor.index.__f__("log", "at pages/index/index.vue:253", "[index] goDetail → /pages/detail/index");
|
||||
} catch (e) {
|
||||
}
|
||||
common_vendor.index.switchTab({ url: "/pages/detail/index" });
|
||||
@@ -150,11 +206,32 @@ const _sfc_main = {
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return common_vendor.e({
|
||||
a: $data.loadingNotices
|
||||
a: common_vendor.t($data.consultLabel),
|
||||
b: common_vendor.o((...args) => $options.onConsultTap && $options.onConsultTap(...args)),
|
||||
c: $data.KPI_ICONS.todaySales,
|
||||
d: common_vendor.t($data.kpi.todaySales),
|
||||
e: $data.KPI_ICONS.monthSales,
|
||||
f: common_vendor.t($data.kpi.monthSales),
|
||||
g: $data.KPI_ICONS.monthProfit,
|
||||
h: common_vendor.t($data.kpi.monthProfit),
|
||||
i: $data.KPI_ICONS.stockCount,
|
||||
j: common_vendor.t($data.kpi.stockCount),
|
||||
k: $data.consultDialogVisible
|
||||
}, $data.consultDialogVisible ? {
|
||||
l: $data.consultMessage,
|
||||
m: common_vendor.o(($event) => $data.consultMessage = $event.detail.value),
|
||||
n: common_vendor.o((...args) => $options.closeConsultDialog && $options.closeConsultDialog(...args)),
|
||||
o: common_vendor.o((...args) => $options.submitConsult && $options.submitConsult(...args)),
|
||||
p: common_vendor.o(() => {
|
||||
}),
|
||||
q: common_vendor.o(() => {
|
||||
})
|
||||
} : {}, {
|
||||
r: $data.loadingNotices
|
||||
}, $data.loadingNotices ? {} : $data.noticeError ? {
|
||||
c: common_vendor.t($data.noticeError)
|
||||
t: common_vendor.t($data.noticeError)
|
||||
} : !$data.notices.length ? {} : {
|
||||
e: common_vendor.f($data.notices, (n, idx, i0) => {
|
||||
w: common_vendor.f($data.notices, (n, idx, i0) => {
|
||||
return common_vendor.e({
|
||||
a: common_vendor.t(n.text),
|
||||
b: n.tag
|
||||
@@ -166,17 +243,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
});
|
||||
})
|
||||
}, {
|
||||
b: $data.noticeError,
|
||||
d: !$data.notices.length,
|
||||
f: $data.KPI_ICONS.todaySales,
|
||||
g: common_vendor.t($data.kpi.todaySales),
|
||||
h: $data.KPI_ICONS.monthSales,
|
||||
i: common_vendor.t($data.kpi.monthSales),
|
||||
j: $data.KPI_ICONS.monthProfit,
|
||||
k: common_vendor.t($data.kpi.monthProfit),
|
||||
l: $data.KPI_ICONS.stockCount,
|
||||
m: common_vendor.t($data.kpi.stockCount),
|
||||
n: common_vendor.f($data.features, (item, k0, i0) => {
|
||||
s: $data.noticeError,
|
||||
v: !$data.notices.length,
|
||||
x: common_vendor.f($data.features, (item, k0, i0) => {
|
||||
return common_vendor.e({
|
||||
a: item.img
|
||||
}, item.img ? {
|
||||
|
||||
@@ -1 +1 @@
|
||||
<view class="home"><view class="notice"><view class="notice-left">公告</view><view wx:if="{{a}}" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a">加载中...</view><view wx:elif="{{b}}" class="notice-swiper" style="display:flex;align-items:center;color:#dd524d">{{c}}</view><view wx:elif="{{d}}" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a">暂无公告</view><swiper wx:else class="notice-swiper" circular autoplay interval="4000" duration="400" vertical><swiper-item wx:for="{{e}}" wx:for-item="n" wx:key="e"><view class="notice-item" bindtap="{{n.d}}"><text class="notice-text">{{n.a}}</text><text wx:if="{{n.b}}" class="notice-tag">{{n.c}}</text></view></swiper-item></swiper></view><view class="hero"><view class="hero-top"><text class="brand">五金配件管家</text><view class="cta"><text class="cta-text">咨询</text></view></view><view class="kpi kpi-grid"><view class="kpi-item kpi-card"><image src="{{f}}" class="kpi-icon" mode="aspectFit"></image><view class="kpi-content"><text class="kpi-label">今日销售额</text><text class="kpi-value">{{g}}</text></view></view><view class="kpi-item kpi-card"><image src="{{h}}" class="kpi-icon" mode="aspectFit"></image><view class="kpi-content"><text class="kpi-label">本月销售额</text><text class="kpi-value">{{i}}</text></view></view><view class="kpi-item kpi-card"><image src="{{j}}" class="kpi-icon" mode="aspectFit"></image><view class="kpi-content"><text class="kpi-label">本月利润</text><text class="kpi-value">{{k}}</text></view></view><view class="kpi-item kpi-card"><image src="{{l}}" class="kpi-icon" mode="aspectFit"></image><view class="kpi-content"><text class="kpi-label">库存商品数量</text><text class="kpi-value">{{m}}</text></view></view></view></view><view class="section-title"><text class="section-text">常用功能</text></view><view class="grid-wrap"><view class="feature-grid"><view wx:for="{{n}}" wx:for-item="item" wx:key="g" class="feature-card" bindtap="{{item.h}}"><view class="fc-icon"><image wx:if="{{item.a}}" src="{{item.b}}" class="fc-img" mode="aspectFit" binderror="{{item.c}}"></image><text wx:elif="{{item.d}}" class="fc-emoji">{{item.e}}</text><view wx:else class="fc-placeholder"></view></view><view class="fc-title">{{item.f}}</view></view></view></view></view>
|
||||
<view class="home"><view class="hero"><view class="hero-top"><text class="brand">五金配件管家</text><view class="cta" bindtap="{{b}}" hover-class="cta-active" hover-stay-time="80"><text class="cta-text">{{a}}</text></view></view><view class="kpi kpi-grid"><view class="kpi-item kpi-card"><image src="{{c}}" class="kpi-icon" mode="aspectFit"></image><view class="kpi-content"><text class="kpi-label">今日销售额</text><text class="kpi-value">{{d}}</text></view></view><view class="kpi-item kpi-card"><image src="{{e}}" class="kpi-icon" mode="aspectFit"></image><view class="kpi-content"><text class="kpi-label">本月销售额</text><text class="kpi-value">{{f}}</text></view></view><view class="kpi-item kpi-card"><image src="{{g}}" class="kpi-icon" mode="aspectFit"></image><view class="kpi-content"><text class="kpi-label">本月利润</text><text class="kpi-value">{{h}}</text></view></view><view class="kpi-item kpi-card"><image src="{{i}}" class="kpi-icon" mode="aspectFit"></image><view class="kpi-content"><text class="kpi-label">库存商品数量</text><text class="kpi-value">{{j}}</text></view></view></view></view><view wx:if="{{k}}" class="dialog-mask" catchtouchmove="{{p}}" catchtap="{{q}}"><view class="dialog"><view class="dialog-title">咨询</view><block wx:if="{{r0}}"><textarea class="dialog-textarea" placeholder="请输入咨询内容..." maxlength="500" value="{{l}}" bindinput="{{m}}"></textarea></block><view class="dialog-actions"><view class="btn" bindtap="{{n}}">取消</view><view class="btn primary" bindtap="{{o}}">提交</view></view></view></view><view class="notice"><view class="notice-left">公告</view><view wx:if="{{r}}" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a">加载中...</view><view wx:elif="{{s}}" class="notice-swiper" style="display:flex;align-items:center;color:#dd524d">{{t}}</view><view wx:elif="{{v}}" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a">暂无公告</view><swiper wx:else class="notice-swiper" circular autoplay interval="4000" duration="400" vertical><swiper-item wx:for="{{w}}" wx:for-item="n" wx:key="e"><view class="notice-item" bindtap="{{n.d}}"><text class="notice-text">{{n.a}}</text><text wx:if="{{n.b}}" class="notice-tag">{{n.c}}</text></view></swiper-item></swiper></view><view class="section-title"><text class="section-text">常用功能</text></view><view class="grid-wrap"><view class="feature-grid"><view wx:for="{{x}}" wx:for-item="item" wx:key="g" class="feature-card" bindtap="{{item.h}}"><view class="fc-icon"><image wx:if="{{item.a}}" src="{{item.b}}" class="fc-img" mode="aspectFit" binderror="{{item.c}}"></image><text wx:elif="{{item.d}}" class="fc-emoji">{{item.e}}</text><view wx:else class="fc-placeholder"></view></view><view class="fc-title">{{item.f}}</view></view></view></view></view>
|
||||
@@ -24,12 +24,21 @@
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 60%);
|
||||
}
|
||||
.home {
|
||||
padding-bottom: 140rpx;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
|
||||
position: relative;
|
||||
/* 渐变背景：顶部淡蓝过渡到白色 */
|
||||
background: linear-gradient(180deg, #f8fbff 0%, #ffffff 60%);
|
||||
min-height: 100vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 首页横幅（移除） */
|
||||
@@ -92,6 +101,7 @@
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 10rpx 28rpx 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.section-title::before {
|
||||
content: "";
|
||||
@@ -111,12 +121,13 @@
|
||||
/* 顶部英雄区：浅色玻璃卡片，带金色描边与柔和阴影 */
|
||||
.hero {
|
||||
margin: 16rpx 20rpx;
|
||||
padding: 18rpx;
|
||||
padding: 18rpx 18rpx 12rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #ffffff;
|
||||
border: 2rpx solid #e5e7eb;
|
||||
box-shadow: none;
|
||||
color: #111;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.hero-top {
|
||||
display: flex;
|
||||
@@ -159,11 +170,65 @@
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* KPI 卡片化布局：2×2 */
|
||||
/* 简易弹层样式 */
|
||||
.dialog-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
.dialog {
|
||||
width: 82vw;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
border: 2rpx solid #eef2f6;
|
||||
}
|
||||
.dialog-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 800;
|
||||
color: #111;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
.dialog-textarea {
|
||||
width: 100%;
|
||||
min-height: 180rpx;
|
||||
border: 2rpx solid #e8eef8;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.dialog-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 18rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.btn {
|
||||
padding: 10rpx 22rpx;
|
||||
border-radius: 999rpx;
|
||||
background: #f3f6fb;
|
||||
color: #334155;
|
||||
border: 2rpx solid #e2e8f0;
|
||||
font-weight: 700;
|
||||
}
|
||||
.btn.primary {
|
||||
background: #4C8DFF;
|
||||
color: #fff;
|
||||
border-color: #4C8DFF;
|
||||
}
|
||||
|
||||
/* KPI 卡片化布局：横向铺满 */
|
||||
.kpi {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16rpx;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12rpx;
|
||||
}
|
||||
.kpi-item {
|
||||
text-align: center;
|
||||
@@ -175,19 +240,21 @@
|
||||
|
||||
/* KPI 卡片（更扁平，降低高度） */
|
||||
.kpi-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.kpi-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 8rpx;
|
||||
text-align: left;
|
||||
padding: 12rpx 14rpx;
|
||||
border-radius: 12rpx;
|
||||
border-radius: 14rpx;
|
||||
background: #fff;
|
||||
border: 2rpx solid #eef2f6;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
min-height: 120rpx;
|
||||
}
|
||||
.kpi-icon {
|
||||
width: 44rpx;
|
||||
@@ -206,8 +273,8 @@
|
||||
}
|
||||
.kpi-value {
|
||||
color: #4C8DFF;
|
||||
font-size: 36rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 34rpx;
|
||||
line-height: 38rpx;
|
||||
margin-top: 0;
|
||||
font-weight: 800;
|
||||
}
|
||||
@@ -241,45 +308,56 @@
|
||||
|
||||
/* 功能容器：更轻的留白 */
|
||||
.grid-wrap {
|
||||
margin: 8rpx 12rpx 24rpx;
|
||||
padding: 8rpx 8rpx 0;
|
||||
border-radius: 20rpx;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
margin: 16rpx 20rpx 28rpx;
|
||||
padding: 32rpx 30rpx;
|
||||
border-radius: 26rpx;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 2rpx solid #edf2f9;
|
||||
box-shadow: 0 12rpx 28rpx rgba(32, 75, 143, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 功能卡片宫格：方形竖排，图标在上文字在下（与截图一致） */
|
||||
.feature-grid {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14rpx;
|
||||
padding: 8rpx 8rpx 18rpx;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-auto-rows: 1fr;
|
||||
gap: 32rpx 28rpx;
|
||||
align-content: space-evenly;
|
||||
justify-items: center;
|
||||
}
|
||||
.feature-card {
|
||||
height: 164rpx;
|
||||
width: 168rpx;
|
||||
height: 176rpx;
|
||||
background: #fff;
|
||||
border: 2rpx solid #eef2f6;
|
||||
border-radius: 16rpx;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
padding: 12rpx;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
padding: 18rpx 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.fc-icon {
|
||||
width: 86rpx;
|
||||
height: 86rpx;
|
||||
width: 78rpx;
|
||||
height: 78rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #f7faff;
|
||||
border: 2rpx solid #e8eef8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.fc-img {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
opacity: 0.95;
|
||||
}
|
||||
.fc-emoji {
|
||||
@@ -293,10 +371,11 @@
|
||||
border: 2rpx solid #e8eef8;
|
||||
}
|
||||
.fc-title {
|
||||
margin-top: 10rpx;
|
||||
font-size: 26rpx;
|
||||
margin-top: 12rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #111;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
/* 底部操作条：浅色半透明 + 金色主按钮 */
|
||||
|
||||
Reference in New Issue
Block a user