feat: 群代发改版

src/pages/user-batch-publish/index.less

@@ -21,6 +21,72 @@
       padding-top: var(--tabs-wrap-height);
     }
   }
+  &__header-image {
+    width: 100%;
+    height: 120px;
+  }
+  &__delegate {
+    & {
+      padding: 24px;
+      padding-bottom: calc(120px + env(safe-area-inset-bottom));
+    }
+
+    &-fix {
+      width: 100%;
+      background: #f5f6fa;
+      padding-left: 24px;
+      padding-right: 24px;
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 110px;
+      box-sizing: border-box;
+      padding-bottom: calc(24px + env(safe-area-inset-bottom));
+    }
+    &-image {
+      width: 100%;
+      height: 298px;
+    }
+    &-card {
+      background: #fff;
+      padding: 24px;
+      border-radius: 24px;
+      &.image {
+        padding: 1px;
+        justify-content: center;
+        align-items: center;
+        display: flex;
+      }
+    }
+
+    &-h5 {
+      font-style: normal;
+      font-weight: 400;
+      font-size: 28px;
+      line-height: 32px;
+      color: @blColor;
+      padding-top: 40px;
+      padding-bottom: 24px;
+
+      &:first-child {
+        padding-top: 0;
+      }
+    }
+    &-body {
+      font-weight: 400;
+      font-size: 28px;
+      line-height: 48px;
+      color: @blColorG2;
+      &.link {
+        margin-top: 16px;
+        color: @blHighlightColor;
+      }
+    }
+    &-btn {
+      .button(@width: 100%; @height: 80px; @fontSize: 32px);
+      margin-top: 32px;
+    }
+  }
 
   &__recruitment {
     padding: 24px;

src/pages/user-batch-publish/index.tsx

@@ -1,24 +1,37 @@
-import { useShareAppMessage } from '@tarojs/taro';
+import { Image } from '@tarojs/components';
+import Taro, { useShareAppMessage } from '@tarojs/taro';
 
 import { Button, Tabs } from '@taroify/core';
 import { useCallback } from 'react';
 
 import HomePage from '@/components/home-page';
 import SearchCity from '@/components/search-city';
-import UserBatchPublish from '@/components/user-batch-publish';
+import { PageUrl } from '@/constants/app';
 import { GROUPS } from '@/constants/group';
 import useInviteCode from '@/hooks/use-invite-code';
 import { openCustomerServiceChat } from '@/utils/common';
 import { getCurrentCityCode } from '@/utils/location';
+import { navigateTo } from '@/utils/route';
 import { getCommonShareMessage } from '@/utils/share';
 import { checkCityCode } from '@/utils/user';
+
 import './index.less';
 
 const PREFIX = 'page-biz-service';
-
+const EXAMPLE_IMAGE = 'https://publiccdn.neighbourhood.com.cn/img/delegate-example.png';
+const COMMENT_IMAGE = 'https://publiccdn.neighbourhood.com.cn/img/delegate-comments.png';
 export default function BizService() {
   const inviteCode = useInviteCode();
 
+  const handleClickDelegate = useCallback(() => {
+    navigateTo(PageUrl.GroupDelegatePublish);
+  }, []);
+  const handlePreview = (current: string) => {
+    Taro.previewImage({
+      current,
+      urls: [EXAMPLE_IMAGE, COMMENT_IMAGE],
+    });
+  };
   const handleOpenService = useCallback(() => {
     openCustomerServiceChat('https://work.weixin.qq.com/kfid/kfcd60708731367168d');
   }, []);
@@ -31,13 +44,42 @@ export default function BizService() {
       openCustomerServiceChat(group.serviceUrl);
     }
   }, []);
-  useShareAppMessage(() => getCommonShareMessage(true, inviteCode));
+  useShareAppMessage(() => getCommonShareMessage({ inviteCode }));
 
   return (
     <HomePage>
       <div className={PREFIX}>
         <Tabs className={`${PREFIX}__tabs`} defaultValue={0}>
-          <Tabs.TabPane value={0} title="主播群">
+          <Tabs.TabPane value={0} title="群代发">
+            <div className={`${PREFIX}__delegate`}>
+              <Image
+                mode="widthFix"
+                className={`${PREFIX}__header-image`}
+                src="https://publiccdn.neighbourhood.com.cn/img/pub-job.png"
+              />
+              <div className={`${PREFIX}__delegate-h5`}>服务说明</div>
+              <div className={`${PREFIX}__delegate-card`}>
+                <div className={`${PREFIX}__delegate-body`}>服务方式：帮您把招聘需求发到众多同城合作主播群</div>
+                <div className={`${PREFIX}__delegate-body`}>群发次数：每日1次，连发3天</div>
+                <div className={`${PREFIX}__delegate-body`}>内容要求：仅限带货主播招聘需求，其他不发</div>
+                <div className={`${PREFIX}__delegate-body`}>主播联系：内容中留招聘方联系方式，主播直接联系</div>
+              </div>
+              <div className={`${PREFIX}__delegate-h5`}>代发示例</div>
+              <div className={`${PREFIX}__delegate-card image`} onClick={() => handlePreview(EXAMPLE_IMAGE)}>
+                <Image className={`${PREFIX}__delegate-image`} src={EXAMPLE_IMAGE} mode="heightFix" />
+              </div>
+              <div className={`${PREFIX}__delegate-h5`}>部分客户评价</div>
+              <div className={`${PREFIX}__delegate-card image`} onClick={() => handlePreview(COMMENT_IMAGE)}>
+                <Image className={`${PREFIX}__delegate-image`} src={COMMENT_IMAGE} mode="heightFix" />
+              </div>
+              <div className={`${PREFIX}__delegate-fix`}>
+                <Button className={`${PREFIX}__delegate-btn`} onClick={handleClickDelegate}>
+                  我要代发
+                </Button>
+              </div>
+            </div>
+          </Tabs.TabPane>
+          <Tabs.TabPane value={1} title="免费招">
             <SearchCity
               onSelectCity={handleSelectCity}
               currentCity={getCurrentCityCode()}
@@ -46,9 +88,6 @@ export default function BizService() {
               banner="点击城市名称，进本地通告群，免费招主播"
             />
           </Tabs.TabPane>
-          <Tabs.TabPane value={1} title="群代发">
-            <UserBatchPublish />
-          </Tabs.TabPane>
           <Tabs.TabPane value={2} title="代招">
             <div className={`${PREFIX}__recruitment`}>
               <div className={`${PREFIX}__recruitment-card`}>