This commit is contained in:
ylj20011123 2025-12-07 09:49:52 +08:00
parent 1a1cb38f1a
commit b1939995a9
5 changed files with 494 additions and 109 deletions

View File

@ -81,6 +81,12 @@
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "newsList",
"style": {
"navigationBarTitleText": "消息通知"
}
}
]
},

View File

@ -0,0 +1,117 @@
<template>
<view class="page">
<scroll-view class="content" scroll-y>
<!-- 有数据时的列表当前为空 -->
<view v-if="list.length" class="list">
<view v-for="(item, index) in list" :key="index" class="list-item">
<view class="item-body">
<view class="item-title">{{ item.title }}</view>
<view class="item-desc">{{ item.desc }}</view>
<view class="item-time">{{ item.time }}</view>
</view>
</view>
</view>
<!-- 无数据 -->
<view v-else class="empty-box">
<image class="empty-icon" src="https://eshangtech.com/cyy_DIB/noNewsIcon.png" />
<text class="empty-text">暂无通知</text>
<text class="empty-sub">你当前没有新的消息通知</text>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
list: [] //
};
}
};
</script>
<style scoped>
.page {
display: flex;
flex-direction: column;
height: 100vh;
background: #f5f6f8;
}
.nav {
height: 44px;
padding-top: 12px;
display: flex;
justify-content: center;
align-items: center;
background: #ffffff;
font-weight: bold;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.nav-title {
font-size: 16px;
color: #333;
}
.content {
flex: 1;
}
/* --- 空状态 --- */
.empty-box {
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: center;
color: #888;
}
.empty-icon {
width: 120rpx;
height: 120rpx;
/* background: #e8ecf3; */
/* border-radius: 12px; */
margin-bottom: 20px;
}
.empty-text {
font-size: 16px;
color: #666;
}
.empty-sub {
font-size: 14px;
color: #999;
margin-top: 6px;
}
/* --- 列表样式(可留着以后用) --- */
.list-item {
background: #fff;
margin: 10px 12px;
padding: 12px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.item-title {
font-size: 15px;
font-weight: bold;
color: #333;
}
.item-desc {
font-size: 14px;
color: #666;
margin-top: 6px;
}
.item-time {
font-size: 12px;
color: #999;
margin-top: 6px;
}
</style>

View File

@ -1,42 +1,88 @@
<template>
<block>
<div class="uni-inline-item ranking-tab-box">
<div class="ranking-tab-unit" @tap="selectTab(1000)" :class="{ 'active': nowRank == 1000 }">商超
</div>
<div class="ranking-tab-unit" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">餐饮
</div>
<div class="ranking-tab-unit" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">小吃
</div>
</div>
<div class="ranking-content" v-if="wechatPushSalesList">
<div class="ranking-list" v-for="(item, index) in wechatPushSalesList[nowRank]" :key="index">
<div class="rank-index">{{ item.RANK_ID || item.Rank_ID }}</div>
<div class="ranking-list-unit">
<div style="font-size: 24rpx;">{{ item.COMMODITY_NAME || item.Commodity_Name }}</div>
<div class="ranking-unit-info">
<text style="font-size: 24rpx;">销售金额 </text>
<text style="font-size: 28rpx;font-weight: 600;">¥{{ $util.fmoney(item.TOTALPRICE ||
item.TotalPrice) }}</text>
<text style="font-size: 24rpx;">销售数量 </text>
<text style="font-size: 28rpx;font-weight: 600;">{{ item.SELLCOUNT || item.SellCount }}</text>
</div>
</div>
</div>
</div>
</block>
<view class="ranking-container" :class="'theme-' + themeType">
<!-- 现代化选项卡 -->
<view class="ranking-tabs">
<view class="tab-item" @tap="selectTab(1000)" :class="{ 'active': nowRank == 1000 }">
<view class="tab-icon">🏪</view>
<text class="tab-text">商超</text>
</view>
<view class="tab-item" @tap="selectTab(3000)" :class="{ 'active': nowRank == 3000 }">
<view class="tab-icon">🍽</view>
<text class="tab-text">餐饮</text>
</view>
<view class="tab-item" @tap="selectTab(2000)" :class="{ 'active': nowRank == 2000 }">
<view class="tab-icon">🍿</view>
<text class="tab-text">小吃</text>
</view>
</view>
<!-- 排行榜内容 -->
<view class="ranking-content" v-if="wechatPushSalesList && wechatPushSalesList[nowRank]">
<view class="ranking-item" v-for="(item, index) in wechatPushSalesList[nowRank]" :key="index"
:class="'rank-' + (index + 1)">
<!-- 排名徽章 -->
<view class="rank-badge" :class="'rank-' + (index + 1)">
<view v-if="index < 3" class="medal-icon">
{{ index === 0 ? '🥇' : index === 1 ? '🥈' : '🥉' }}
</view>
<text v-else class="rank-number">{{ index + 1 }}</text>
</view>
<!-- 商品信息 -->
<view class="item-content">
<view class="item-name">{{ item.COMMODITY_NAME || item.Commodity_Name }}</view>
<view class="item-stats">
<view class="stat-item">
<text class="stat-label">销售额</text>
<text class="stat-value sales-amount">¥{{ $util.fmoney(item.TOTALPRICE || item.TotalPrice)
}}</text>
</view>
<view class="stat-divider">|</view>
<view class="stat-item">
<text class="stat-label">销量</text>
<text class="stat-value sales-count">{{ item.SELLCOUNT || item.SellCount }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 空状态 -->
<view v-else class="empty-state">
<view class="empty-icon">📊</view>
<text class="empty-text">暂无排行数据</text>
</view>
</view>
</template>
<script>
export default {
props: ['wechatPushSalesList'],
props: ['wechatPushSalesList', 'provinceCode'],
data: () => {
return {
nowRank: 1000
}
},
computed: {
//
themeType() {
const themeMap = {
'330200': 'ningbo', //
'340000': 'anhui', //
'500000': 'chongqing', //
'510000': 'sichuan', //
'520000': 'guizhou', //
'530000': 'yunnan', //
'630000': 'qinghai', //
'734100': 'hainan' //
}
return themeMap[this.provinceCode] || 'yunnan'
}
},
methods: {
selectTab(index) {
this.nowRank = index
}
},
@ -46,101 +92,317 @@ export default {
}
</script>
<style>
/*排行*/
.ranking-tab-box {
margin: 20rpx 32rpx;
border: 2rpx solid #565656;
<style lang="scss" scoped>
// mixin
@mixin theme-colors($primary, $secondary) {
.tab-item.active {
background: linear-gradient(135deg, $primary, $secondary) !important;
box-shadow: 0 4rpx 12rpx rgba($primary, 0.3) !important;
}
.tab-item:hover {
background: rgba($primary, 0.1);
}
.stat-value.sales-amount {
color: $primary;
}
.ranking-item::before {
background: linear-gradient(180deg, $primary, $secondary);
}
.ranking-item:hover::before {
opacity: 1;
}
.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
background: linear-gradient(135deg, $primary, $secondary);
}
}
.ranking-container {
margin: 20rpx 0;
}
/* 现代化选项卡 */
.ranking-tabs {
display: flex;
background: #f8f9fa;
border-radius: 12rpx;
padding: 6rpx;
margin: 0 20rpx 24rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
border: 1rpx solid #f0f0f0;
}
.tab-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16rpx 8rpx;
border-radius: 8rpx;
display: flex;
align-items: center;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
&.active {
transform: translateY(-2rpx);
.tab-text {
color: #fff !important;
font-weight: 600;
}
.tab-icon {
transform: scale(1.1);
}
}
}
.ranking-tab-box .ranking-tab-unit {
color: #565656;
flex: 1;
height: 64rpx;
line-height: 60rpx;
.tab-icon {
font-size: 32rpx;
margin-bottom: 8rpx;
transition: transform 0.3s ease;
}
.ranking-tab-box .ranking-tab-unit.active {
background-color: #565656;
color: #fff
}
.ranking-tab-box .ranking-tab-unit+.ranking-tab-unit {
border-left: 2rpx solid #565656;
}
.ranking-content {
/* display: none; */
min-height: 160rpx;
}
.ranking-content .ranking-list {
display: flex;
align-items: center;
color: #000;
padding: 24rpx 32rpx;
}
.ranking-content .rank-index {
width: 72rpx;
height: 72rpx;
text-align: center;
line-height: 72rpx;
font-size: 30rpx;
font-weight: bolder;
margin-right: 32rpx;
}
.ranking-content .ranking-list:nth-child(1) .rank-index {
background: url('https://eshangtech.com/ShopICO/ahyd-BID/revenue/top1.png') no-repeat center;
background-size: contain;
font-size: 0;
}
.ranking-content .ranking-list:nth-child(2) .rank-index {
background: url('https://eshangtech.com/ShopICO/ahyd-BID/revenue/top2.png') no-repeat center;
background-size: contain;
font-size: 0;
}
.ranking-content .ranking-list:nth-child(3) .rank-index {
background: url('https://eshangtech.com/ShopICO/ahyd-BID/revenue/top3.png') no-repeat center;
background-size: contain;
font-size: 0;
}
.ranking-content .ranking-list-unit {
.tab-text {
font-size: 24rpx;
color: #666;
transition: all 0.3s ease;
font-weight: 500;
}
/* 排行榜内容 */
.ranking-content {
padding: 0 20rpx;
}
.ranking-item {
display: flex;
align-items: center;
background: #fff;
border-radius: 16rpx;
padding: 20rpx 24rpx;
margin-bottom: 16rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
border: 1rpx solid #f5f5f5;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4rpx;
background: linear-gradient(180deg, #27B25F, #4CCC7F);
opacity: 0;
transition: opacity 0.3s ease;
}
&:hover {
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
transform: translateY(-2rpx);
&::before {
opacity: 1;
}
}
//
&.rank-1 {
background: linear-gradient(135deg, #fffbf0, #fff);
&::before {
background: linear-gradient(180deg, #ffb300, #ffd700);
opacity: 1;
}
}
&.rank-2 {
background: linear-gradient(135deg, #f0f0f0, #fff);
&::before {
background: linear-gradient(180deg, #c0c0c0, #e8e8e8);
opacity: 1;
}
}
&.rank-3 {
background: linear-gradient(135deg, #f5f1eb, #fff);
&::before {
background: linear-gradient(180deg, #a0714d, #cd853f);
opacity: 1;
}
}
}
/* 排名徽章 */
.rank-badge {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24rpx;
font-weight: 700;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
&.rank-1,
&.rank-2,
&.rank-3 {
background: transparent;
box-shadow: none;
}
.medal-icon {
font-size: 36rpx;
animation: pulse 2s infinite;
}
.rank-number {
color: #fff;
font-size: 24rpx;
font-weight: 700;
}
}
.rank-badge:not(.rank-1):not(.rank-2):not(.rank-3) {
background: linear-gradient(135deg, #8c9eff, #a5b4fc);
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* 商品信息 */
.item-content {
flex: 1;
display: flex;
flex-direction: column;
}
.item-name {
font-size: 28rpx;
color: #333;
font-weight: 600;
margin-bottom: 12rpx;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.item-stats {
display: flex;
align-items: center;
}
.stat-item {
display: flex;
align-items: center;
min-width: 0;
flex: 1;
}
.ranking-content .ranking-unit-info {
/* margin-top: 16rpx; */
.stat-label {
font-size: 24rpx;
color: #6c757d;
margin-right: 8rpx;
line-height: 40rpx;
font-weight: 500;
white-space: nowrap;
}
.stat-value {
font-size: 24rpx;
font-weight: 600;
line-height: 40rpx;
// font-family: 'DIN Alternate', 'Bahnschrift', monospace;
white-space: nowrap;
&.sales-amount {
color: #27B25F; //
}
&.sales-count {
color: #666;
}
}
.stat-divider {
margin: 0 16rpx;
color: #e0e0e0;
font-size: 20rpx;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
/* font-size: .13rem; */
justify-content: center;
padding: 80rpx 20rpx;
color: #999;
}
.ranking-content .ranking-unit-info text {
flex: 2;
color: #929292;
.empty-icon {
font-size: 80rpx;
margin-bottom: 20rpx;
opacity: 0.6;
}
.ranking-content .ranking-unit-info text:nth-child(2) {
flex: 3;
.empty-text {
font-size: 28rpx;
color: #999;
}
.ranking-content .ranking-unit-info text:nth-child(2n) {
color: #000
/* 主题色应用 - 根据传入的省份代码动态应用主题 */
.ranking-container.theme-ningbo {
@include theme-colors(#1890FF, #69C0FF);
}
.ranking-ico {
width: 72rpx;
height: 72rpx;
.ranking-container.theme-anhui {
@include theme-colors(#748ED6, #91A7E3);
}
.ranking-container.theme-chongqing {
@include theme-colors(#FA541C, #FF7A45);
}
.ranking-container.theme-sichuan {
@include theme-colors(#FA8C16, #FFA940);
}
.ranking-container.theme-guizhou {
@include theme-colors(#52C41A, #73D13D);
}
.ranking-container.theme-yunnan {
@include theme-colors(#27B25F, #4CCC7F);
}
.ranking-container.theme-qinghai {
@include theme-colors(#13C2C2, #36CFC9);
}
.ranking-container.theme-hainan {
@include theme-colors(#E91E63, #F06292);
}
</style>

View File

@ -9,7 +9,7 @@
<view class="box">
<!-- @click="handleNews"-->
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/index/news.svg" @click="handleNews"></image>
<view class="red"></view>
<!-- <view class="red"></view> -->
</view>
</view>
<view class="userTitle" :style="{
@ -330,9 +330,7 @@ export default {
this.$util.toNextRoute("navigateTo", "/pages/register/register");
},
handleNews() {
if (this.special) {
this.$util.toNextRoute("navigateTo", "/pages/commercialBI/specialCase");
}
this.$util.toNextRoute("navigateTo", "/pages/commercialBI/newsList");
},
handleGetWarningList() {
const date = new Date();
@ -382,7 +380,7 @@ export default {
left: 0;
box-sizing: border-box;
padding: 0 15px;
z-index: 9999999;
z-index: 9999998;
}
.news {
@ -394,6 +392,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
z-index: 9999999;
.box {
width: 100%;

View File

@ -10,7 +10,8 @@ export default {
// EshangUrl: 'https://eshangtech.com/',
// apiurl: 'https://erysfeipeng.oicp.net/', // web api
testApiurl: 'http://dev.eshangtech.com:8001/', // web api测试接口地址
apiEsUrl: "https://api.eshangtech.com/",
// apiEsUrl: "https://api.eshangtech.com/",
apiEsUrl: "https://eshangtech.com:18900/",
samemberUrl: "https://samember.yciccloud.com:8999/",
mobUrl: 'http://192.168.11.125:8000/Coop.Merchant/Handler/handler_ajax.ashx', // 接口