feat(dealer): 更新分销商页面功能与UI优化- 修改分享标题从"网宿小店"为"唐九运售电云"

- 调整商品列表内边距从 py-3 到 py-1- 在购物车页面更新分享标题为"唐九运售电云" - 扩展网站字段模型增加 NoticeBar 字段 -为经销商用户模型添加 dealerName、dealerPhone 和 dealerAvatar 字段- 引入二维码图标替换原有图标- 新增获取推荐人信息逻辑并展示推荐人详情 - 首页新增公告栏组件显示配置的通知内容 - 商品详情页分享标题同步更新为"唐九运售电云"
2025-10-21 09:17:41 +08:00
parent d23e7afd58
commit 1c1ef34afe
7 changed files with 53 additions and 19 deletions
--- a/src/api/cms/cmsWebsiteField/model/index.ts
+++ b/src/api/cms/cmsWebsiteField/model/index.ts
@@ -55,4 +55,5 @@ export interface Config {
  email?: string;
  loginTitle?: string;
  sysLogo?: string;
+  NoticeBar?: string;
 }
--- a/src/api/shop/shopDealerUser/model/index.ts
+++ b/src/api/shop/shopDealerUser/model/index.ts
@@ -22,6 +22,9 @@ export interface ShopDealerUser {
  totalMoney?: string;
  // 推荐人用户ID
  refereeId?: number;
+  dealerName?: string;
+  dealerPhone?: string;
+  dealerAvatar?: string;
  // 成员数量(一级)
  firstNum?: number;
  // 成员数量(二级)
--- a/src/dealer/index.tsx
+++ b/src/dealer/index.tsx
@@ -1,18 +1,20 @@
-import React from 'react'
+import React, {useState, useEffect} from 'react'
 import {View, Text} from '@tarojs/components'
 import {ConfigProvider, Button, Grid, Avatar} from '@nutui/nutui-react-taro'
 import {
  User,
  Shopping,
-  Dongdong,
+  QrCode,
  ArrowRight,
  Purse,
  People
 } from '@nutui/icons-react-taro'
 import {useDealerUser} from '@/hooks/useDealerUser'
-import { useThemeStyles } from '@/hooks/useTheme'
+import {useThemeStyles} from '@/hooks/useTheme'
 import {businessGradients, cardGradients, gradientUtils} from '@/styles/gradients'
 import Taro from '@tarojs/taro'
+import {getShopDealerRefereeByUserId} from "@/api/shop/shopDealerReferee";
+import {ShopDealerUser} from "@/api/shop/shopDealerUser/model";

 const DealerIndex: React.FC = () => {
  const {
@@ -20,6 +22,7 @@ const DealerIndex: React.FC = () => {
    error,
    refresh,
  } = useDealerUser()
+  const [dealer, setDealer] = useState<ShopDealerUser>()

  // 使用主题样式
  const themeStyles = useThemeStyles()
@@ -53,7 +56,16 @@ const DealerIndex: React.FC = () => {
    return userTheme.background
  }

-  console.log(getGradientBackground(),'getGradientBackground()')
+
+  // 初始化当前用户名称
+  useEffect(() => {
+    getShopDealerRefereeByUserId(Taro.getStorageSync('UserId')).then((data) => {
+      setDealer(data);
+    })
+  }, [dealerUser])
+
+
+  console.log(getGradientBackground(), 'getGradientBackground()')

  if (error) {
    return (
@@ -101,8 +113,7 @@ const DealerIndex: React.FC = () => {
                }}
              />
              <View className="flex-1 flex-col">
-                <View className="text-white text-lg font-bold mb-1" style={{
-                }}>
+                <View className="text-white text-lg font-bold mb-1" style={{}}>
                  {dealerUser?.realName || '分销商'}
                </View>
                <View className="text-sm" style={{
@@ -138,7 +149,7 @@ const DealerIndex: React.FC = () => {
                <Text className="text-lg font-bold mb-1 text-white">
                  {formatMoney(dealerUser.money)}
                </Text>
-                <Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>可提现</Text>
+                <Text className="text-xs" style={{color: 'rgba(255, 255, 255, 0.9)'}}>可提现</Text>
              </View>
              <View className="text-center p-3 rounded-lg flex flex-col" style={{
                background: businessGradients.money.frozen
@@ -146,7 +157,7 @@ const DealerIndex: React.FC = () => {
                <Text className="text-lg font-bold mb-1 text-white">
                  {formatMoney(dealerUser.freezeMoney)}
                </Text>
-                <Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>冻结中</Text>
+                <Text className="text-xs" style={{color: 'rgba(255, 255, 255, 0.9)'}}>冻结中</Text>
              </View>
              <View className="text-center p-3 rounded-lg flex flex-col" style={{
                background: businessGradients.money.total
@@ -154,7 +165,7 @@ const DealerIndex: React.FC = () => {
                <Text className="text-lg font-bold mb-1 text-white">
                  {formatMoney(dealerUser.totalMoney)}
                </Text>
-                <Text className="text-xs" style={{ color: 'rgba(255, 255, 255, 0.9)' }}>累计收益</Text>
+                <Text className="text-xs" style={{color: 'rgba(255, 255, 255, 0.9)'}}>累计收益</Text>
              </View>
            </View>
          </View>
@@ -225,7 +236,7 @@ const DealerIndex: React.FC = () => {
                </View>
              </Grid.Item>

-              <Grid.Item text={'我的邀请'} onClick={() => navigateToPage('/dealer/team/index')}>
+              <Grid.Item text={'会员中心'} onClick={() => navigateToPage('/pages/user/user')}>
                <View className="text-center">
                  <View className="w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center mx-auto mb-2">
                    <People color="#8b5cf6" size="20"/>
@@ -236,7 +247,7 @@ const DealerIndex: React.FC = () => {
              <Grid.Item text={'我的邀请码'} onClick={() => navigateToPage('/dealer/qrcode/index')}>
                <View className="text-center">
                  <View className="w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center mx-auto mb-2">
-                    <Dongdong color="#f59e0b" size="20"/>
+                    <QrCode color="#f59e0b" size="20"/>
                  </View>
                </View>
              </Grid.Item>
@@ -284,6 +295,17 @@ const DealerIndex: React.FC = () => {
            {/*</Grid>*/}
          </ConfigProvider>
        </View>
+        <View className="bg-white mx-4 mt-4 rounded-xl p-4">
+          <View className="font-semibold mb-4 text-gray-800">我的推荐人</View>
+          <View className={'flex items-center gap-2'}>
+            <Avatar src={dealer?.dealerAvatar}/>
+            <View className={'flex flex-col'}>
+              <Text className="text-lg font-semibold">{dealer?.dealerName}</Text>
+              <Text className="text-gray-500"
+                    onClick={() => Taro.makePhoneCall({phoneNumber: `${dealer?.dealerPhone}`})}>{dealer?.dealerPhone}</Text>
+            </View>
+          </View>
+        </View>
      </View>

      {/* 底部安全区域 */}
--- a/src/pages/cart/cart.tsx
+++ b/src/pages/cart/cart.tsx
@@ -41,13 +41,13 @@ function Cart() {

  useShareTimeline(() => {
    return {
-      title: '购物车 - 网宿小店'
+      title: '购物车 - 唐九运售电云'
    };
  });

  useShareAppMessage(() => {
    return {
-      title: '购物车 - 网宿小店',
+      title: '购物车 - 唐九运售电云',
      success: function () {
        console.log('分享成功');
      },
--- a/src/pages/index/BestSellers.tsx
+++ b/src/pages/index/BestSellers.tsx
@@ -86,7 +86,7 @@ const BestSellers = () => {
  // 分享到朋友圈
  useShareTimeline(() => {
    return {
-      title: `${goods?.name || '精选商品'} - 网宿小店`,
+      title: `${goods?.name || '精选商品'} - 唐九运售电云`,
      path: `/shop/goodsDetail/index?id=${goods?.goodsId}`,
      imageUrl: goods?.image
    };
@@ -94,7 +94,7 @@ const BestSellers = () => {

  return (
    <>
-      <View className={'py-3'}>
+      <View className={'py-1'}>
        <View className={'flex flex-col justify-between items-center rounded-lg px-2'}>
          {list?.map((item, index) => {
            return (
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -4,28 +4,31 @@ import Taro from '@tarojs/taro';
 import {useShareAppMessage, useShareTimeline} from "@tarojs/taro"
 import {useEffect, useState} from "react";
 import {getShopInfo} from "@/api/layout";
-import {Sticky} from '@nutui/nutui-react-taro'
+import {Sticky, NoticeBar} from '@nutui/nutui-react-taro'
 import {View} from '@tarojs/components'
 import Menu from "./Menu";
 import Banner from "./Banner";
 import './index.scss'
 import Grid from "@/pages/index/Grid";
 import PopUpAd from "@/pages/index/PopUpAd";
+import {configWebsiteField} from "@/api/cms/cmsWebsiteField";
+import type {Config} from "@/api/cms/cmsWebsiteField/model";

 function Home() {
  // 吸顶状态
  const [stickyStatus, setStickyStatus] = useState<boolean>(false)
+  const [config, setConfig] = useState<Config>()

  useShareTimeline(() => {
    return {
-      title: '网宿小店 - 网宿软件',
+      title: '唐九运售电云 - 网宿软件',
      path: `/pages/index/index`
    };
  });

  useShareAppMessage(() => {
    return {
-      title: '网宿小店 - 网宿软件',
+      title: '唐九运售电云 - 网宿软件',
      path: `/pages/index/index`,
      success: function () {
        console.log('分享成功');
@@ -83,6 +86,10 @@ function Home() {
    // 获取站点信息
    getShopInfo().then(() => {

+    })
+    // 获取配置信息
+    configWebsiteField({}).then(data => {
+      setConfig(data)
    })
    // Taro.getSetting：获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。
    Taro.getSetting({
@@ -115,6 +122,7 @@ function Home() {
      <View className={'flex flex-col mt-1'}>
        <Menu/>
        <Banner/>
+        <NoticeBar content={config?.NoticeBar || '主营直购电售电业务,以更优惠电价、更全面的服务，致力为工商企业创造更优越经营环境，帮助企业减负排压，深度赋能'} />
        <BestSellers/>
        <Grid />
      </View>
--- a/src/shop/goodsDetail/index.tsx
+++ b/src/shop/goodsDetail/index.tsx
@@ -189,7 +189,7 @@ const GoodsDetail = () => {
  // 分享到朋友圈
  useShareTimeline(() => {
    return {
-      title: `${goods?.name || '精选商品'} - 网宿小店`,
+      title: `${goods?.name || '精选商品'} - 唐九运售电云`,
      path: `/shop/goodsDetail/index?id=${goodsId}`,
      imageUrl: goods?.image
    };