feat: update

src/components/anchor-picker/index.tsx

@@ -5,19 +5,34 @@ import { isEqual } from 'lodash-es';
 import { useCallback, useState } from 'react';
 
 import PickerToolbar from '@/components/picker-toolbar';
-import { FULL_PRICE_OPTIONS, PART_PRICE_OPTIONS } from '@/constants/job';
-import { ALL_ANCHOR_READ_TYPES, ANCHOR_READ_TITLE_MAP, AnchorReadType } from '@/constants/material';
+import {
+  EmployType,
+  ALL_EMPLOY_TYPES,
+  FULL_PRICE_OPTIONS,
+  PART_PRICE_OPTIONS,
+  EMPLOY_TYPE_TITLE_MAP,
+} from '@/constants/job';
+import {
+  ALL_ANCHOR_READ_TYPES,
+  ALL_GENDER_TYPES,
+  ANCHOR_READ_TITLE_MAP,
+  AnchorReadType,
+  GENDER_TYPE_TITLE_MAP,
+  GenderType,
+} from '@/constants/material';
 import { IAnchorFilters } from '@/types/material';
+import { isUndefined } from '@/utils/common';
 
 import './index.less';
 
-type MoreFilter = Omit<IAnchorFilters, 'employType' | 'gender'>;
 interface IProps {
-  value: MoreFilter;
-  onConfirm: (newValue: MoreFilter) => void;
+  value: IAnchorFilters;
+  onConfirm: (newValue: IAnchorFilters) => void;
 }
 
 const PREFIX = 'anchor-picker';
+const getDefaultGender = (value: IAnchorFilters) => value.gender;
+const getDefaultEmploy = (value: IAnchorFilters) => value.employType;
 const getDefaultReadType = (value: IAnchorFilters) => value.readType;
 const getDefaultCategory = (value: IAnchorFilters) => value.category || '';
 const getSalaryValue = (value: IAnchorFilters, full: boolean) => {
@@ -32,7 +47,9 @@ const getSalaryValue = (value: IAnchorFilters, full: boolean) => {
 
 function AnchorPicker(props: IProps) {
   const { value, onConfirm } = props;
+  const [gender, setGender] = useState<GenderType | undefined>(getDefaultGender(value));
   const [readType, setReadType] = useState<AnchorReadType | undefined>(getDefaultReadType(value));
+  const [employType, setEmployType] = useState<EmployType | undefined>(getDefaultEmploy(value));
   const [fullSalary, setFullSalary] = useState(getSalaryValue(value, true));
   const [partSalary, setPartSalary] = useState(getSalaryValue(value, false));
   const [category, setCategory] = useState(getDefaultCategory(value));
@@ -42,7 +59,9 @@ function AnchorPicker(props: IProps) {
   }, []);
 
   const handleClickReset = useCallback(() => {
+    setGender(undefined);
     setReadType(undefined);
+    setEmployType(undefined);
     setFullSalary(null);
     setPartSalary(null);
     setCategory('');
@@ -64,6 +83,10 @@ function AnchorPicker(props: IProps) {
 
   const handleClickConfirm = useCallback(() => {
     const filters: IAnchorFilters = {};
+    if (!isUndefined(gender)) {
+      filters.gender = gender === GenderType.All ? undefined : gender;
+    }
+    employType && (filters.employType = employType);
     readType && (filters.readType = readType);
     category && (filters.category = category);
     if (fullSalary) {
@@ -75,10 +98,34 @@ function AnchorPicker(props: IProps) {
       filters.highPriceForPartyTime = partSalary.maxSalary;
     }
     onConfirm(filters);
-  }, [readType, category, fullSalary, partSalary, onConfirm]);
+  }, [gender, employType, readType, category, fullSalary, partSalary, onConfirm]);
 
   return (
     <div className={PREFIX}>
+      <div className={`${PREFIX}__title`}>性别</div>
+      <div className={`${PREFIX}__container`}>
+        {ALL_GENDER_TYPES.map((type: GenderType) => (
+          <div
+            key={type}
+            onClick={() => setGender(type)}
+            className={classNames(`${PREFIX}__item`, { selected: type === gender })}
+          >
+            {GENDER_TYPE_TITLE_MAP[type]}
+          </div>
+        ))}
+      </div>
+      <div className={`${PREFIX}__title`}>全职/兼职</div>
+      <div className={`${PREFIX}__container`}>
+        {ALL_EMPLOY_TYPES.map(type => (
+          <div
+            key={type}
+            onClick={() => setEmployType(type)}
+            className={classNames(`${PREFIX}__item`, { selected: type === employType })}
+          >
+            {EMPLOY_TYPE_TITLE_MAP[type]}
+          </div>
+        ))}
+      </div>
       <div className={`${PREFIX}__title`}>已读/未读</div>
       <div className={`${PREFIX}__container`}>
         {ALL_ANCHOR_READ_TYPES.map(type => (

src/components/gender-select/index.tsx

@@ -1,13 +0,0 @@
-import Select, { ISelectProps } from '@/components/select';
-import { GENDER_OPTIONS, GenderType } from '@/constants/material';
-
-interface IProps extends Omit<ISelectProps<GenderType>, 'options'> {
-  value: GenderType;
-}
-
-function GenderSelect(props: IProps) {
-  const { value: selectValue, onSelect } = props;
-  return <Select options={GENDER_OPTIONS} title="性别" value={selectValue} onSelect={onSelect} />;
-}
-
-export default GenderSelect;

src/components/partner-banner/index.tsx

@@ -61,7 +61,7 @@ export default function PartnerBanner() {
         <div className={`${PREFIX}__close`} onClick={handlePartnerBannerClose} />
       </div>
       {visible && (
-        <LoginDialog disableCheck onCancel={() => setVisible(false)} onSuccess={handleBind} needPhone={needPhone} />
+        <LoginDialog onCancel={() => setVisible(false)} onSuccess={handleBind} needPhone={needPhone} />
       )}
     </>
   );

src/components/partner-intro/index.tsx

@@ -1,19 +1,19 @@
 import { Button, Canvas } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 
 import { openCustomerServiceChat } from '@/utils/common';
-import { getPartnerQrcode } from '@/utils/partner';
+import { getCouponQrCode, generateMembershipCoupon } from '@/utils/coupon';
 import './index.less';
 
 const PREFIX = 'partner-intro';
 
 export default function PartnerIntro() {
-  const [posterPath, setPosterPath] = useState('');
   const getQrcode = async () => {
     try {
-      const data = await getPartnerQrcode(); // 假设 getPartnerQrcode 返回 ArrayBuffer
+      const { code } = await generateMembershipCoupon();
+      const data = await getCouponQrCode(code);
       const base64 = Taro.arrayBufferToBase64(data);
       return `data:image/png;base64,${base64}`;
     } catch (error) {
@@ -36,11 +36,9 @@ export default function PartnerIntro() {
             height: 2668, // 实际绘制高度
             destWidth: 750, // 目标显示宽度
             destHeight: 1334, // 目标显示高度
-            fileType: 'jpg',
+            fileType: 'png',
           });
 
-          setPosterPath(tempFilePath.tempFilePath);
-
           resolve(tempFilePath.tempFilePath);
         });
       } catch (error) {
@@ -57,21 +55,21 @@ export default function PartnerIntro() {
         const canvas = res[0].node;
         const ctx = canvas.getContext('2d');
 
-        canvas.width = 1500;
-        canvas.height = 2668;
+        canvas.width = 550 * 2;
+        canvas.height = 918 * 2;
         ctx.scale(2, 2);
 
         // 绘制背景图片
         const bgImage = canvas.createImage();
-        const poster = 'https://publiccdn.neighbourhood.com.cn/img/poster.png'
+        const poster = 'https://publiccdn.neighbourhood.com.cn/img/share-coupon-poster.png';
         bgImage.src = poster;
         bgImage.onload = () => {
-          ctx.drawImage(bgImage, 0, 0, 750, 1334);
+          ctx.drawImage(bgImage, 0, 0, 550, 918);
 
           const qrCodeImage = canvas.createImage();
           qrCodeImage.src = qrCode; // 假设 getQrcode() 返回的是二维码图片的路径
           qrCodeImage.onload = () => {
-            ctx.drawImage(qrCodeImage, 235, 894, 280, 280); // 绘制二维码，位置和大小
+            ctx.drawImage(qrCodeImage, 196, 600, 160, 160); // 绘制二维码，位置和大小
             saveCanvasToTempFile().then(tempPath => {
               resolve(tempPath);
             });
@@ -84,13 +82,10 @@ export default function PartnerIntro() {
     });
   };
   const savePoster = async () => {
-    let filePath = posterPath;
-    if (!filePath) {
-      Taro.showLoading({ title: '正在生成海报' });
-      const qrCode = await getQrcode();
-      filePath = await drawCanvas(qrCode);
-      Taro.hideLoading();
-    }
+    Taro.showLoading({ title: '正在生成海报' });
+    const qrCode = await getQrcode();
+    const filePath = await drawCanvas(qrCode);
+    Taro.hideLoading();
 
     const res = await Taro.getSetting();
     const hasPermission = res.authSetting['scope.writePhotosAlbum'];
@@ -144,7 +139,9 @@ export default function PartnerIntro() {
         <div className={`${PREFIX}__block`}>
           <div className={`${PREFIX}__title`}>分享方法</div>
           <div className={`${PREFIX}__card`}>
-            <div className={`${PREFIX}__body`}>分享小程序任意页面到群、朋友圈、好友即可</div>
+            <div className={`${PREFIX}__body`}>
+              点击底部按钮向好友群友赠送会员，或者分享通告列表、通告详情等页面给朋友即可
+            </div>
           </div>
         </div>
         <div className={`${PREFIX}__block`}>
@@ -163,10 +160,10 @@ export default function PartnerIntro() {
 
       <div className={`${PREFIX}__footer`}>
         <Button className={`${PREFIX}__download-button`} onClick={savePoster}>
-          下载海报
+          朋友圈海报
         </Button>
         <Button className={`${PREFIX}__share-button`} openType="share">
-          分享邀请
+          赠送会员给好友
         </Button>
       </div>
     </div>

src/components/select/index.less

@@ -28,7 +28,6 @@
     justify-content: space-between;
     box-sizing: border-box;
     padding: 0 24px;
-    flex: 0 0 96px;
 
     &.selected {
       color: @blHighlightColor;

src/components/top-category-select/index.tsx

@@ -1,13 +0,0 @@
-import Select, { ISelectProps } from '@/components/select';
-import { JOB_TYPE_SELECT_OPTIONS_WITH_ALL, JobType } from '@/constants/job';
-
-interface IProps extends Omit<ISelectProps<JobType>, 'options'> {
-  value: JobType;
-}
-
-function TopCategorySelect(props: IProps) {
-  const { value: selectValue, onSelect } = props;
-  return <Select options={JOB_TYPE_SELECT_OPTIONS_WITH_ALL} title="品类" value={selectValue} onSelect={onSelect} />;
-}
-
-export default TopCategorySelect;

src/constants/job.ts

@@ -7,7 +7,6 @@ export enum JobType {
   Jewelry = 'JEWELRY', // 珠宝
   Appliance = 'APPLIANCE', // 家电
   Furniture = 'FURNITURE', // 日用家具
-  OutdoorSports = 'OUTDOOR_SPORTS',
   PetFamily = 'PET_FAMILY', // 母婴宠物
   Luxury = 'LUXURY', // 奢品
   LocalLive = 'LOCAL_LIVE', // 本地生活
@@ -88,7 +87,6 @@ export const JOB_TYPE_TITLE_MAP: { [key in JobType]: string } = {
   [JobType.Jewelry]: '珠宝',
   [JobType.Appliance]: '家电',
   [JobType.Furniture]: '日用家具',
-  [JobType.OutdoorSports]: '户外运动',
   [JobType.PetFamily]: '母婴宠物',
   [JobType.Luxury]: '奢品',
   [JobType.LocalLive]: '本地生活',
@@ -175,7 +173,6 @@ export const JOB_TYPE_SELECT_OPTIONS = [
   { label: JOB_TYPE_TITLE_MAP[JobType.Jewelry], value: JobType.Jewelry },
   { label: JOB_TYPE_TITLE_MAP[JobType.Appliance], value: JobType.Appliance },
   { label: JOB_TYPE_TITLE_MAP[JobType.Furniture], value: JobType.Furniture },
-  { label: JOB_TYPE_TITLE_MAP[JobType.OutdoorSports], value: JobType.OutdoorSports },
   { label: JOB_TYPE_TITLE_MAP[JobType.PetFamily], value: JobType.PetFamily },
   { label: JOB_TYPE_TITLE_MAP[JobType.Luxury], value: JobType.Luxury },
   { label: JOB_TYPE_TITLE_MAP[JobType.LocalLive], value: JobType.LocalLive },
@@ -184,11 +181,6 @@ export const JOB_TYPE_SELECT_OPTIONS = [
   { label: JOB_TYPE_TITLE_MAP[JobType.Other], value: JobType.Other },
 ];
 
-export const JOB_TYPE_SELECT_OPTIONS_WITH_ALL = [
-  { label: JOB_TYPE_TITLE_MAP[JobType.All], value: JobType.All },
-  ...JOB_TYPE_SELECT_OPTIONS,
-];
-
 const MAX_SALARY = 10000000;
 export const PART_EMPLOY_SALARY_OPTIONS = [
   { label: '不限' },

src/constants/material.ts

@@ -84,25 +84,14 @@ export const WORK_YEAR_OPTIONS = [
   { label: WORK_YEAR_LABELS[WorkedYears.MoreThreeYear], value: WorkedYears.MoreThreeYear },
 ];
 
+export const ALL_GENDER_TYPES = [GenderType.All, GenderType.MEN, GenderType.WOMEN];
+
 export const GENDER_TYPE_TITLE_MAP = {
   [GenderType.All]: '不限',
   [GenderType.WOMEN]: '女',
   [GenderType.MEN]: '男',
 };
-export const GENDER_OPTIONS = [
-  {
-    value: GenderType.All,
-    label: GENDER_TYPE_TITLE_MAP[GenderType.All],
-  },
-  {
-    value: GenderType.WOMEN,
-    label: GENDER_TYPE_TITLE_MAP[GenderType.WOMEN],
-  },
-  {
-    value: GenderType.MEN,
-    label: GENDER_TYPE_TITLE_MAP[GenderType.MEN],
-  },
-];
+
 export const ALL_ANCHOR_READ_TYPES = Object.values(AnchorReadType);
 
 export const ANCHOR_READ_TITLE_MAP = {

src/http/api.ts

@@ -1,4 +1,4 @@
-// export const DOMAIN = 'http://192.168.60.191:8082';
+// export const DOMAIN = 'http://192.168.60.116:8082';
 export const DOMAIN = process.env.BRAND === 'dev' ? 'https://dev.neighbourhood.cn' : 'https://neighbourhood.cn';
 // export const DOMAIN = 'https://dev.neighbourhood.cn';
 export const BASE_URL = `${DOMAIN}/api`;
@@ -85,4 +85,7 @@ export enum API {
   GET_PROFIT_STAT = '/user/profits',
   WITHDRAW = '/user/withdraw',
   GET_WITHDRAW_LIST = '/user/withdraw/records',
+  GENERATE_MEMBERSHIP_COUPON = '/coupon/membership/generate',
+  CLAIM_MEMBERSHIP_COUPON = '/coupon/membership/claim',
+  GET_VIP_QRCODE = '/user/getVipQrCode',
 }

src/pages/anchor/index.less

@@ -52,11 +52,7 @@
     font-size: 28px;
     line-height: 32px;
     color: @blColor;
-    gap: 20px;
 
-    &-item {
-      display: flex;
-    }
     .title {
       margin-right: 5px;
     }
@@ -65,17 +61,11 @@
     padding: 0 24px;
   }
   &__overlay-outer {
-    top: 72px;
+    top: 82px;
   }
 
   &__overlay-inner {
     width: 100%;
-    max-height: 100%;
-    overflow: hidden;
-    .bl-select__items-container {
-      max-height: calc(100vh - 610rpx);
-      overflow-y: auto;
-    }
   }
 
   &__tips-container {
@@ -101,6 +91,8 @@
     margin-top: 50px;
   }
 
+
+
   &__popup {
     &-content {
       .flex-column();

src/pages/anchor/index.tsx

@@ -5,13 +5,11 @@ import { Popup } from '@taroify/core';
 import { ArrowDown, ArrowUp } from '@taroify/icons';
 import classNames from 'classnames';
 import { isEqual } from 'lodash-es';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import AnchorList, { IAnchorListProps } from '@/components/anchor-list';
 import AnchorPicker from '@/components/anchor-picker';
 import CustomNavigationBar from '@/components/custom-navigation-bar';
-import EmployTypeSelect from '@/components/employ-type-select';
-import GenderSelect from '@/components/gender-select';
 import HomePage from '@/components/home-page';
 import Overlay from '@/components/overlay';
 import PageLoading from '@/components/page-loading';
@@ -19,8 +17,8 @@ import PartnerBanner from '@/components/partner-banner';
 import SafeBottomPadding from '@/components/safe-bottom-padding';
 import SwitchBar from '@/components/switch-bar';
 import { APP_TAB_BAR_ID, EventName, OpenSource, PageType, PageUrl, RoleType } from '@/constants/app';
-import { EmployType, JobType } from '@/constants/job';
-import { ALL_ANCHOR_SORT_TYPES, ANCHOR_SORT_TYPE_TITLE_MAP, AnchorSortType, GenderType } from '@/constants/material';
+import { EmployType } from '@/constants/job';
+import { ALL_ANCHOR_SORT_TYPES, ANCHOR_SORT_TYPE_TITLE_MAP, AnchorSortType } from '@/constants/material';
 import useInviteCode from '@/hooks/use-invite-code';
 import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
 import useLocation from '@/hooks/use-location';
@@ -38,7 +36,6 @@ import { getCommonShareMessage } from '@/utils/share';
 import Toast from '@/utils/toast';
 
 import './index.less';
-import TopCategorySelect from '@/components/top-category-select';
 
 const PREFIX = 'page-anchor';
 const LIST_CONTAINER_CLASS = `${PREFIX}__list-container`;
@@ -81,22 +78,12 @@ function ListWrapper(props: IAnchorListProps) {
   return <AnchorList listHeight={listHeight} {...props} onListEmpty={handleListEmpty} />;
 }
 
-enum FilterType {
-  gender,
-  employType,
-  topCategory,
-  more,
-}
-
 export default function AnchorPage() {
   const location = useLocation();
   const [loading, setLoading] = useState(true);
   const [selectJob, setSelectJob] = useState<JobManageInfo | undefined>();
-  const [moreFilters, setMoreFilters] = useState<IAnchorFilters>({});
-  const [gender, setGender] = useState<GenderType>(GenderType.All);
-  const [employType, setEmployType] = useState<EmployType>(EmployType.All);
-  const [topCategory, setTopCategory] = useState<JobType>(JobType.All);
-  const [showFilter, setShowFilter] = useState<FilterType | null>(null);
+  const [filters, setFilters] = useState<IAnchorFilters>({ employType: EmployType.All });
+  const [showFilter, setShowFilter] = useState<boolean>(false);
   const [sortType, setSortType] = useState<AnchorSortType>(AnchorSortType.Active);
   const [openPopup, setOpenPopup] = useState<boolean>(false);
   const [coordinate, setCoordinate] = useState<Coordinate>({
@@ -119,35 +106,20 @@ export default function AnchorPage() {
     [selectJob]
   );
 
-  const handleClickFilterSelect = (type: FilterType) => () => {
-    setShowFilter(type === showFilter ? null : type);
-  };
+  const handleClickSalarySelect = useCallback(() => {
+    setShowFilter(!showFilter);
+  }, [showFilter]);
 
-  const handleHideFilter = useCallback(() => setShowFilter(null), []);
+  const handleHideFilter = useCallback(() => setShowFilter(false), []);
 
   const handleFilterChange = useCallback(
     (newFilters: IAnchorFilters) => {
-      !isEqual(newFilters, moreFilters) && setMoreFilters(newFilters);
-      setShowFilter(null);
+      !isEqual(newFilters, filters) && setFilters(newFilters);
+      setShowFilter(false);
     },
-    [moreFilters]
+    [filters]
   );
 
-  const handleChangeSelectGender = useCallback((value: GenderType) => {
-    setGender(value);
-    setShowFilter(null);
-  }, []);
-
-  const handleChangeSelectEmployType = useCallback((value: EmployType) => {
-    setEmployType(value);
-    setShowFilter(null);
-  }, []);
-
-  const handleChangeSelectTopCategory = useCallback((value: JobType) => {
-    setTopCategory(value);
-    setShowFilter(null);
-  }, []);
-
   const handleClickSortType = useCallback(async (type: AnchorSortType) => setSortType(type), []);
 
   const handleJobChange = useCallback(
@@ -233,15 +205,6 @@ export default function AnchorPage() {
 
   useDidShow(() => requestUnreadMessageCount());
 
-  const filters = useMemo(
-    () => ({
-      ...moreFilters,
-      topCategory: topCategory === JobType.All ? undefined : topCategory,
-      gender: gender === -1 ? undefined : gender,
-      employType,
-    }),
-    [moreFilters, gender, employType, topCategory]
-  );
   return (
     <HomePage type={PageType.Anchor}>
       {!!loading && <PageLoading className={`${PREFIX}__loading`} />}
@@ -261,23 +224,9 @@ export default function AnchorPage() {
               </div>
             ))}
           </div>
-          <div className={classNames(`${PREFIX}__filter`)}>
-            <div className={`${PREFIX}__filter-item`} onClick={handleClickFilterSelect(FilterType.gender)}>
-              <div className="title">性别</div>
-              {showFilter === FilterType.gender ? <ArrowUp /> : <ArrowDown />}
-            </div>
-            <div className={`${PREFIX}__filter-item`} onClick={handleClickFilterSelect(FilterType.employType)}>
-              <div className="title">类型</div>
-              {showFilter === FilterType.employType ? <ArrowUp /> : <ArrowDown />}
-            </div>
-            <div className={`${PREFIX}__filter-item`} onClick={handleClickFilterSelect(FilterType.topCategory)}>
-              <div className="title">品类</div>
-              {showFilter === FilterType.topCategory ? <ArrowUp /> : <ArrowDown />}
-            </div>
-            <div className={`${PREFIX}__filter-item`} onClick={handleClickFilterSelect(FilterType.more)}>
-              <div className="title">更多</div>
-              {showFilter === FilterType.more ? <ArrowUp /> : <ArrowDown />}
-            </div>
+          <div className={classNames(`${PREFIX}__filter`)} onClick={handleClickSalarySelect}>
+            <div className="title">筛选</div>
+            {showFilter ? <ArrowUp /> : <ArrowDown />}
           </div>
         </div>
         <div className={`${PREFIX}__banner`}>
@@ -294,36 +243,12 @@ export default function AnchorPage() {
           className={LIST_CONTAINER_CLASS}
         />
         <Overlay
-          visible={showFilter === FilterType.gender}
+          visible={showFilter}
           onClickOuter={handleHideFilter}
           outerClassName={`${PREFIX}__overlay-outer`}
           innerClassName={`${PREFIX}__overlay-inner`}
         >
-          <GenderSelect value={gender} onSelect={handleChangeSelectGender} />
-        </Overlay>
-        <Overlay
-          visible={showFilter === FilterType.employType}
-          onClickOuter={handleHideFilter}
-          outerClassName={`${PREFIX}__overlay-outer`}
-          innerClassName={`${PREFIX}__overlay-inner`}
-        >
-          <EmployTypeSelect value={employType} onSelect={handleChangeSelectEmployType} />
-        </Overlay>
-        <Overlay
-          visible={showFilter === FilterType.topCategory}
-          onClickOuter={handleHideFilter}
-          outerClassName={`${PREFIX}__overlay-outer`}
-          innerClassName={`${PREFIX}__overlay-inner`}
-        >
-          <TopCategorySelect value={topCategory} onSelect={handleChangeSelectTopCategory} />
-        </Overlay>
-        <Overlay
-          visible={showFilter === FilterType.more}
-          onClickOuter={handleHideFilter}
-          outerClassName={`${PREFIX}__overlay-outer`}
-          innerClassName={`${PREFIX}__overlay-inner`}
-        >
-          <AnchorPicker value={moreFilters} onConfirm={handleFilterChange} />
+          <AnchorPicker value={filters} onConfirm={handleFilterChange} />
         </Overlay>
       </div>
       <Popup

src/pages/give-vip/index.less

@@ -1 +1,130 @@
-.give-vip {}
+@import '@/styles/variables.less';
+@import '@/styles/common.less';
+
+.give-vip {
+  padding: 40px 24px 200px 24px;
+  &__hint {
+    font-size: 28px;
+    line-height: 48px;
+    color: @blColorG2;
+    gap: 12px;
+    .flex-row();
+    justify-content: center;
+  }
+  &__icon {
+    width: 65px;
+    height: 65px;
+  }
+  &__title {
+    margin-top: 24px;
+    font-weight: 500;
+    font-size: 40px;
+    line-height: 48px;
+    color: @blColor;
+    text-align: center;
+    flex: 0 1 auto;
+    gap: 12px;
+    .flex-row();
+    justify-content: center;
+    .highlight {
+      margin-left: -12px;
+      display: inline-block;
+      color: @blHighlightColor;
+    }
+  }
+  &__bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+  &__info {
+    &-block {
+      margin-top: 48px;
+    }
+    &-title {
+      font-weight: 500;
+      font-size: 32px;
+      line-height: 32px;
+      color: #1d2129;
+      margin-bottom: 24px;
+    }
+    &-card {
+      box-sizing: border-box;
+      background: #ffffff;
+      border-radius: 24px;
+      padding: 32px;
+    }
+    &-body {
+      font-weight: 400;
+      font-size: 28px;
+      line-height: 40px;
+      color: #333333;
+      margin-bottom: 32px;
+    }
+    &-img {
+      width: 100%;
+      height: 614px;
+    }
+  }
+  &__footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    padding: 12px 32px;
+    box-shadow: 0px -4px 20px 0px #00000014;
+    box-sizing: border-box;
+    background: #ffffff;
+  }
+
+  &__footer-body {
+    .flex-row();
+    justify-content: center;
+  }
+  &__button {
+    .button(@height: 88px; @fontSize: 32px; @fontWeight: 500; @borderRadius: 44px;);
+    width: 400px;
+  }
+  &__coupon {
+    &-info {
+      position: relative;
+      margin-top: 32px;
+      padding: 24px;
+      box-sizing: border-box;
+      border-radius: 24px;
+
+      .flex-column();
+      justify-content: center;
+    }
+
+    &-title {
+      font-weight: 500;
+      font-size: 32px;
+      line-height: 48px;
+      color: @blHighlightColor;
+      margin-bottom: 8px;
+    }
+    &-intro {
+      font-size: 28px;
+      line-height: 40px;
+      margin-bottom: 12px;
+      color: @blColor;
+      gap: 4px;
+      .flex-row();
+      .highlight {
+        font-weight: 600;
+        font-size: 32px;
+        line-height: 56px;
+        color: @blHighlightColor;
+      }
+    }
+    &-valid {
+      font-size: 28px;
+      line-height: 40px;
+
+      color: @blColorG2;
+    }
+  }
+}

src/pages/give-vip/index.tsx

@@ -1,12 +1,103 @@
-import { Button } from '@taroify/core';
+import { Image, Button } from '@tarojs/components';
+import { useLoad } from '@tarojs/taro';
 
+import { Fragment, useCallback, useState } from 'react';
+
+import SafeBottomPadding from '@/components/safe-bottom-padding';
+import { PageUrl } from '@/constants/app';
 import { logWithPrefix } from '@/utils/common';
-
+import { claimMembershipCoupon, getCouponCodeFromQuery } from '@/utils/coupon';
+import { getPageQuery, switchTab } from '@/utils/route';
+import { formatTime } from '@/utils/time';
 import './index.less';
 
 const PREFIX = 'give-vip';
 const log = logWithPrefix(PREFIX);
 
-export default function GiveVip() {
-  return <div className={PREFIX}></div>;
+enum State {
+  PENDING,
+  SUCCESS,
+  FAILED,
+}
+export default function GiveVip() {
+  const [state, setState] = useState<State>(State.PENDING);
+  const [expireAt, setExpireAt] = useState('');
+  const [usedBefore, setUsedBefore] = useState(false);
+  const handleNavigate = useCallback(() => {
+    switchTab(PageUrl.Job);
+  }, []);
+
+  useLoad(() => {
+    const query = getPageQuery<{ d: string }>();
+    const code = getCouponCodeFromQuery(query);
+    claimMembershipCoupon(code!)
+      .then(res => {
+        setUsedBefore(res.usedBefore);
+        setExpireAt(res.usageExpireAt);
+        setState(Date.now() > new Date(res.usageExpireAt).getTime() ? State.FAILED : State.SUCCESS);
+      })
+      .catch(err => {
+        console.error(err);
+        setState(State.FAILED);
+      });
+  });
+
+  return (
+    <div className={PREFIX}>
+      {state === State.SUCCESS && (
+        <Fragment>
+          <div className={`${PREFIX}__title`}>
+            <Image src="https://publiccdn.neighbourhood.com.cn/img/partner-yes.svg" className={`${PREFIX}__icon`} />
+            <div>{usedBefore ? '宝子，你已经领过了，下周再来' : '宝子，播络会员领取成功'}</div>
+          </div>
+          <div className={`${PREFIX}__coupon-info`}>
+            <Image src="https://publiccdn.neighbourhood.com.cn/img/parnet-share-bg.png" className={`${PREFIX}__bg`} />
+            <div className={`${PREFIX}__coupon-title`}>播络日会员</div>
+            <div className={`${PREFIX}__coupon-intro`}>
+              会员有效期内可增加<div className="highlight">10次</div>报单机会
+            </div>
+            <div className={`${PREFIX}__coupon-valid`}>
+              有效期至：{formatTime(expireAt, 'YYYY/MM/DD HH:mm:ss', false)}
+            </div>
+          </div>
+        </Fragment>
+      )}
+      {state === State.FAILED && (
+        <Fragment>
+          <div className={`${PREFIX}__hint`}>
+            <Image
+              src="https://publiccdn.neighbourhood.com.cn/img/link-invalid.svg"
+              mode="aspectFit"
+              className={`${PREFIX}__icon`}
+            />
+            <div className={`${PREFIX}__hint-title`}>宝子，链接已失效</div>
+          </div>
+          <div className={`${PREFIX}__title`}>
+            请联系分享人<div className="highlight">再次分享</div>
+          </div>
+        </Fragment>
+      )}
+      <div className={`${PREFIX}__info-block`}>
+        <div className={`${PREFIX}__info-title`}>播络简介</div>
+        <div className={`${PREFIX}__info-card`}>
+          <div className={`${PREFIX}__info-body`}>
+            播络通告整理汇集了本地每日新增带货主播通告，方便大家及时找到高薪工作
+          </div>
+          <Image
+            className={`${PREFIX}__info-img`}
+            src="https://publiccdn.neighbourhood.com.cn/img/partner-share-coupon-img.png"
+            mode="heightFix"
+          />
+        </div>
+      </div>
+      <div className={`${PREFIX}__footer`}>
+        <div className={`${PREFIX}__footer-body`}>
+          <Button className={`${PREFIX}__button`} onClick={handleNavigate}>
+            立即使用
+          </Button>
+        </div>
+        <SafeBottomPadding />
+      </div>
+    </div>
+  );
 }

src/pages/material-view/index.tsx

@@ -9,17 +9,13 @@ import PageLoading from '@/components/page-loading';
 import CompanyPublishJobBuy from '@/components/product-dialog/steps-ui/company-publish-job-buy';
 import SafeBottomPadding from '@/components/safe-bottom-padding';
 import { EventName, OpenSource, PageUrl, RoleType } from '@/constants/app';
-import { CertificationStatusType } from '@/constants/company';
 import { CollectEventName } from '@/constants/event';
 import { JobManageStatus } from '@/constants/job';
 import { MaterialViewSource } from '@/constants/material';
 import ProfileViewFragment from '@/fragments/profile/view';
 import useInviteCode from '@/hooks/use-invite-code';
-import useUserInfo from '@/hooks/use-user-info';
 import { RESPONSE_ERROR_CODE } from '@/http/constant';
 import { HttpError } from '@/http/error';
-import store from '@/store';
-import { cacheJobId } from '@/store/actions';
 import { JobManageInfo } from '@/types/job';
 import { MaterialProfile } from '@/types/material';
 import { IJobMessage } from '@/types/message';
@@ -33,6 +29,10 @@ import { getInviteCodeFromQueryAndUpdate } from '@/utils/partner';
 import { getPageQuery, navigateBack, navigateTo, redirectTo } from '@/utils/route';
 import Toast from '@/utils/toast';
 import './index.less';
+import useUserInfo from '@/hooks/use-user-info';
+import { CertificationStatusType } from '@/constants/company';
+import store from '@/store';
+import { cacheJobId } from '@/store/actions';
 
 const PREFIX = 'page-material-view';
 

src/pages/partner/index.tsx

@@ -6,7 +6,9 @@ import { useState } from 'react';
 import PartnerIntro from '@/components/partner-intro';
 import PartnerInviteList from '@/components/partner-invite-list';
 import PartnerProfit from '@/components/partner-profit';
+import { PageUrl } from '@/constants/app';
 import useInviteCode from '@/hooks/use-invite-code';
+import { generateMembershipCoupon } from '@/utils/coupon';
 import { getCommonShareMessage } from '@/utils/share';
 import './index.less';
 
@@ -18,9 +20,17 @@ export default function Partner() {
   const handleChange = v => {
     setTab(v);
   };
-  useShareAppMessage(() => {
+  useShareAppMessage(async () => {
     console.log('Partner inviteCode', inviteCode);
-    return getCommonShareMessage({ useCapture: false, inviteCode });
+    const { code } = await generateMembershipCoupon();
+    return getCommonShareMessage({
+      useCapture: false,
+      inviteCode,
+      title: '宝子，送你个播络会员，免费找主播工作',
+      path: PageUrl.GiveVip,
+      params: { d: code },
+      imageUrl: 'https://publiccdn.neighbourhood.com.cn/img/share-coupon1.png',
+    });
   });
 
   return (

src/types/coupon.ts

@@ -0,0 +1,11 @@
+export type ClaimMembershipCouponResponse = {
+  code: string;
+  usedBefore: boolean;
+  usageExpireAt: string;
+};
+
+export type GenerateMembershipCouponResponse = {
+  code: string;
+  linkExpireAt: string;
+  shareUrl: string;
+};

src/types/material.ts

@@ -101,7 +101,6 @@ export interface IAnchorFilters {
   lowPriceForPartyTime?: number;
   highPriceForPartyTime?: number;
   category?: string;
-  topCategory?: string;
   readType?: AnchorReadType;
 }
 

src/utils/coupon.ts

@@ -0,0 +1,31 @@
+import http from '@/http';
+import { API } from '@/http/api';
+import { ClaimMembershipCouponResponse, GenerateMembershipCouponResponse } from '@/types/coupon';
+
+export const generateMembershipCoupon = async () => {
+  return await http.post<GenerateMembershipCouponResponse>(API.GENERATE_MEMBERSHIP_COUPON);
+};
+export const claimMembershipCoupon = async (code: string) => {
+  return await http.post<ClaimMembershipCouponResponse>(API.CLAIM_MEMBERSHIP_COUPON, {
+    contentType: 'application/x-www-form-urlencoded',
+    data: { code },
+  });
+};
+export const getCouponQrCode = async (code: string) => {
+  return await http.post(API.GET_VIP_QRCODE, {
+    contentType: 'application/x-www-form-urlencoded',
+    responseType: 'arraybuffer',
+    data: { code },
+  });
+};
+export const getCouponCodeFromQuery = (query: Record<string, string>): string | undefined => {
+  if (query) {
+    if (query.scene) {
+      return query.scene.replace('d%3D', '');
+    }
+    if (query.d) {
+      return query.d;
+    }
+  }
+  return undefined;
+};

src/utils/share.ts

@@ -20,6 +20,7 @@ interface ShareAppProps {
   inviteCode?: string;
   title?: string;
   path?: PageUrl;
+  imageUrl?: string;
   params?: Record<string, BL.Anything>;
 }
 
@@ -28,6 +29,7 @@ export const getCommonShareMessage = ({
   inviteCode,
   title,
   path,
+  imageUrl: _imageUrl,
   params = {},
 }: ShareAppProps = {}): ShareAppMessageReturn => {
   const inviteParams = inviteCode ? { c: inviteCode } : undefined;
@@ -36,6 +38,6 @@ export const getCommonShareMessage = ({
   return {
     title: title || `昨天新增了${getRandomCount()}条主播通告，宝子快来看看`,
     path: sharePath,
-    imageUrl: useCapture ? undefined : imageUrl,
+    imageUrl: useCapture ? undefined : _imageUrl || imageUrl,
   };
 };

src/utils/time.ts

@@ -1,10 +1,12 @@
 import dayjs from 'dayjs';
 
-export function formatTime(time: number | string, template = 'YYYY-MM-DD'): string {
+export function formatTime(time: number | string, template = 'YYYY-MM-DD', toNum = true): string {
   if (!time) {
     return '';
   }
-  time = Number(time);
+  if (toNum) {
+    time = Number(time);
+  }
   return dayjs(time).format(template);
 }