magic-csb/boluo-app-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: updagte group list & add button to swipers

Browse Source
This commit is contained in:
eleanor.mao 2025-04-03 22:50:49 +08:00
parent 452e57e155
commit c26c1c92fe
8 changed files with 2539 additions and 2784 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -6,4 +6,5 @@ node_modules/
.DS_Store .DS_Store
.swc .swc
project.private.config.json project.private.config.json
node_test.js node_test.js
.idea

217
package.json
View File

@ -1,108 +1,113 @@
{ {
"name": "boluo-app", "name": "boluo-app",
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"description": "boluo app", "description": "boluo app",
"templateInfo": { "templateInfo": {
"name": "default", "name": "default",
"typescript": true, "typescript": true,
"css": "Less", "css": "Less",
"framework": "React" "framework": "React"
}, },
"scripts": { "scripts": {
"build:weapp": "taro build --type weapp", "build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan", "build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay", "build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt", "build:tt": "taro build --type tt",
"build:h5": "taro build --type h5", "build:h5": "taro build --type h5",
"build:rn": "taro build --type rn", "build:rn": "taro build --type rn",
"build:qq": "taro build --type qq", "build:qq": "taro build --type qq",
"build:jd": "taro build --type jd", "build:jd": "taro build --type jd",
"build:quickapp": "taro build --type quickapp", "build:quickapp": "taro build --type quickapp",
"build:harmony-hybrid": "taro build --type harmony-hybrid", "build:harmony-hybrid": "taro build --type harmony-hybrid",
"dev:weapp": "npm run build:weapp -- --watch", "dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch", "dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch", "dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch", "dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch", "dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch", "dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch", "dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch", "dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch", "dev:quickapp": "npm run build:quickapp -- --watch",
"dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch", "dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch",
"test": "jest", "test": "jest",
"lint:format": "npx prettier --write", "lint:format": "npx prettier --write",
"lint:format-all": "npx prettier --write 'src/**/*.{ts,js,css,jsx,html,vue,tsx}'" "lint:format-all": "npx prettier --write 'src/**/*.{ts,js,css,jsx,html,vue,tsx}'"
}, },
"browserslist": [ "browserslist": [
"last 3 versions", "last 3 versions",
"Android >= 4.1", "Android >= 4.1",
"ios >= 8" "ios >= 8"
], ],
"author": "", "author": "",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.21.5", "@babel/runtime": "^7.21.5",
"@taroify/core": "^0.3.2-alpha.0", "@taroify/core": "^0.3.2-alpha.0",
"@taroify/icons": "0.6.4-alpha.0", "@taroify/icons": "0.6.4-alpha.0",
"@tarojs/components": "3.6.31", "@tarojs/components": "4.0.9",
"@tarojs/helper": "3.6.31", "@tarojs/helper": "4.0.9",
"@tarojs/plugin-framework-react": "3.6.31", "@tarojs/plugin-framework-react": "4.0.9",
"@tarojs/plugin-html": "^3.6.31", "@tarojs/plugin-html": "4.0.9",
"@tarojs/plugin-platform-alipay": "3.6.31", "@tarojs/plugin-platform-alipay": "4.0.9",
"@tarojs/plugin-platform-h5": "3.6.31", "@tarojs/plugin-platform-h5": "4.0.9",
"@tarojs/plugin-platform-harmony-hybrid": "3.6.31", "@tarojs/plugin-platform-harmony-hybrid": "3.6.34",
"@tarojs/plugin-platform-jd": "3.6.31", "@tarojs/plugin-platform-jd": "4.0.9",
"@tarojs/plugin-platform-qq": "3.6.31", "@tarojs/plugin-platform-qq": "4.0.9",
"@tarojs/plugin-platform-swan": "3.6.31", "@tarojs/plugin-platform-swan": "4.0.9",
"@tarojs/plugin-platform-tt": "3.6.31", "@tarojs/plugin-platform-tt": "4.0.9",
"@tarojs/plugin-platform-weapp": "3.6.31", "@tarojs/plugin-platform-weapp": "4.0.9",
"@tarojs/react": "3.6.31", "@tarojs/react": "4.0.9",
"@tarojs/runtime": "3.6.31", "@tarojs/runtime": "4.0.9",
"@tarojs/shared": "3.6.31", "@tarojs/shared": "4.0.9",
"@tarojs/taro": "3.6.31", "@tarojs/taro": "4.0.9",
"classnames": "^2.5.1", "classnames": "^2.5.1",
"dayjs": "^1.11.11", "dayjs": "^1.11.11",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3", "eslint-plugin-prettier": "^5.1.3",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"react": "^18.0.0", "react": "^18.0.0",
"react-dom": "^18.0.0", "react-dom": "^18.0.0",
"react-redux": "^8.1.2", "react-redux": "^8.1.2",
"redux": "^4.2.1", "redux": "^4.2.1",
"redux-logger": "^3.0.6", "redux-logger": "^3.0.6",
"redux-thunk": "^3.1.0" "redux-thunk": "^3.1.0"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.8.0", "@babel/core": "^7.8.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
"@tarojs/cli": "3.6.31", "@tarojs/cli": "4.0.9",
"@tarojs/plugin-mock": "^0.0.9", "@tarojs/plugin-mock": "^0.0.9",
"@tarojs/taro-loader": "3.6.31", "@tarojs/taro-loader": "4.0.9",
"@tarojs/test-utils-react": "^0.1.1", "@tarojs/test-utils-react": "^0.1.1",
"@tarojs/webpack5-runner": "3.6.31", "@tarojs/webpack5-runner": "4.0.9",
"@types/jest": "^29.3.1", "@types/jest": "^29.3.1",
"@types/node": "^18.15.11", "@types/node": "^18.15.11",
"@types/react": "^18.0.0", "@types/react": "^18.0.0",
"@types/webpack-env": "^1.13.6", "@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^7.12.0", "@typescript-eslint/eslint-plugin": "^7.12.0",
"@typescript-eslint/parser": "^7.12.0", "@typescript-eslint/parser": "^7.12.0",
"babel-plugin-import": "^1.13.8", "babel-plugin-import": "^1.13.8",
"babel-preset-taro": "3.6.31", "babel-preset-taro": "4.0.9",
"eslint": "^8.12.0", "eslint": "^8.12.0",
"eslint-config-taro": "3.6.31", "eslint-config-taro": "4.0.9",
"eslint-plugin-import": "^2.12.0", "eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2", "eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-react-hooks": "^4.2.0",
"jest": "^29.3.1", "jest": "^29.3.1",
"jest-environment-jsdom": "^29.5.0", "jest-environment-jsdom": "^29.5.0",
"postcss": "^8.4.18", "postcss": "^8.4.18",
"prettier": "^3.3.1", "prettier": "^3.3.1",
"react-refresh": "^0.11.0", "react-refresh": "^0.11.0",
"stylelint": "^14.4.0", "stylelint": "^14.4.0",
"ts-node": "^10.9.1", "ts-node": "^10.9.1",
"tsconfig-paths-webpack-plugin": "^4.1.0", "tsconfig-paths-webpack-plugin": "^4.1.0",
"typescript": "^5.1.0", "typescript": "^5.1.0",
"webpack": "5.78.0", "webpack": "5.78.0",
"webpack-bundle-analyzer": "^4.10.2" "webpack-bundle-analyzer": "^4.10.2"
} },
"pnpm": {
"ignoredBuiltDependencies": [
"@tarojs/binding"
]
}
} }

4974
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

44
src/fragments/profile/view/index.less
View File

@ -3,7 +3,7 @@
.profile-view-fragment { .profile-view-fragment {
padding-bottom: 88rpx; padding-bottom: 88rpx;
&__header { &__header {
position: relative; position: relative;
width: 100%; width: 100%;
@ -43,8 +43,8 @@
text-align: center; text-align: center;
font-size: 28px; font-size: 28px;
font-weight: 400; font-weight: 400;
color: #FFFFFF; color: #ffffff;
background: #0000005C; background: #0000005c;
border-radius: 48px; border-radius: 48px;
} }
@ -59,7 +59,7 @@
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient(349.14deg, rgba(0, 0, 0, 0.3) 13.62%, rgba(0, 0, 0, 0.195) 126.8%); background: linear-gradient(349.14deg, rgba(0, 0, 0, 0.3) 13.62%, rgba(0, 0, 0, 0.195) 126.8%);
} }
@ -68,6 +68,33 @@
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 400;
} }
&__swiper-button {
&__next,
&__prev {
width: 88px;
height: 88px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&__prev {
left: 32px;
}
&__next {
right: 32px;
}
&__image {
width: 70px;
height: 70px;
padding: 9px;
}
}
} }
&__body { &__body {
@ -76,7 +103,7 @@
margin-bottom: calc(24px + 24px); margin-bottom: calc(24px + 24px);
// margin-bottom: calc(112px + 24px); // margin-bottom: calc(112px + 24px);
width: calc(100% - 48px); width: calc(100% - 48px);
background: #FFFFFF; background: #ffffff;
border-radius: 16px; border-radius: 16px;
} }
@ -86,7 +113,7 @@
right: 24px; right: 24px;
bottom: 0; bottom: 0;
height: 1px; height: 1px;
background: #E0E0E0; background: #e0e0e0;
} }
&__basic-info { &__basic-info {
@ -183,7 +210,7 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background: #FFFFFF; background: #ffffff;
padding: 12px 32px; padding: 12px 32px;
box-shadow: 0px -4px 20px 0px #00000014; box-shadow: 0px -4px 20px 0px #00000014;
box-sizing: border-box; box-sizing: border-box;
@ -204,6 +231,5 @@
margin-left: 32px; margin-left: 32px;
} }
} }
} }
} }

52
src/fragments/profile/view/index.tsx
View File

@ -1,7 +1,6 @@
import { Image } from '@tarojs/components'; import { BaseEventOrig, Image, Swiper, SwiperItem, SwiperProps } from "@tarojs/components";
import Taro from '@tarojs/taro'; import Taro from '@tarojs/taro';
import { Swiper } from '@taroify/core';
import classNames from 'classnames'; import classNames from 'classnames';
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
@ -16,8 +15,8 @@ import { logWithPrefix, isDesktop } from '@/utils/common';
import { getBasicInfo, sortVideos } from '@/utils/material'; import { getBasicInfo, sortVideos } from '@/utils/material';
import { navigateTo } from '@/utils/route'; import { navigateTo } from '@/utils/route';
import './index.less'; import './index.less';
import onChangeEventDetail = SwiperProps.onChangeEventDetail;
interface IProps { interface IProps {
editable: boolean; editable: boolean;
@ -99,22 +98,20 @@ const getDataGroup = (profile: MaterialProfile | null) => {
]; ];
}; };
export default function ProfileViewFragment(props: IProps) { export default function ProfileViewFragment(props: IProps) {
const { profile, editable, onDev } = props; const { profile, editable, onDev } = props;
const [coverIndex, setCoverIndex] = useState(0); const [coverIndex, setCoverIndex] = useState(0);
const dataGroup = getDataGroup(profile); const dataGroup = getDataGroup(profile);
const videos = sortVideos(profile?.materialVideoInfoList || []); const videos = sortVideos(profile?.materialVideoInfoList || []);
const handleClickVideo = useCallback( const handleClickVideo = useCallback(
(index: number) => { (index: number) => {
log('handleClickVideo', index); log('handleClickVideo', index);
if (isDesktop) { if (isDesktop) {
navigateTo(PageUrl.MaterialWebview, { navigateTo(PageUrl.MaterialWebview, {
source: encodeURIComponent(videos[index].url) source: encodeURIComponent(videos[index].url),
}) });
} else { } else {
Taro.previewMedia({ Taro.previewMedia({
sources: videos.map(video => ({ url: video.url, type: video.type })), sources: videos.map(video => ({ url: video.url, type: video.type })),
@ -140,12 +137,31 @@ export default function ProfileViewFragment(props: IProps) {
navigateTo(PageUrl.MaterialEditProfile, { type: groupType }); navigateTo(PageUrl.MaterialEditProfile, { type: groupType });
}, []); }, []);
const videoLength = videos.length ? videos.length : 0;
const handleChange = useCallback((e: BaseEventOrig<onChangeEventDetail>)=> {
setCoverIndex(e.detail.current)
}, [])
const handlePrev = useCallback(() => {
setCoverIndex(coverIndex ? coverIndex - 1 : videoLength - 1);
}, [coverIndex, videoLength]);
const handleNext = useCallback(() => {
setCoverIndex(coverIndex === videoLength- 1 ? 0 : coverIndex + 1);
}, [coverIndex,videoLength]);
return ( return (
<div className={PREFIX}> <div className={PREFIX}>
<div className={`${PREFIX}__header`}> <div className={`${PREFIX}__header`}>
<Swiper className={`${PREFIX}__header__swiper`} onChange={setCoverIndex} stopPropagation={false} lazyRender> <Swiper
className={`${PREFIX}__header__swiper`}
current={coverIndex}
onChange={handleChange}
circular
>
{videos.map((cover, index) => ( {videos.map((cover, index) => (
<Swiper.Item key={cover.coverUrl}> <SwiperItem key={cover.coverUrl}>
<div className={`${PREFIX}__header__swiper-item`}> <div className={`${PREFIX}__header__swiper-item`}>
<Image <Image
mode="aspectFill" mode="aspectFill"
@ -162,9 +178,25 @@ export default function ProfileViewFragment(props: IProps) {
/> />
)} )}
</div> </div>
</Swiper.Item> </SwiperItem>
))} ))}
</Swiper> </Swiper>
{videoLength > 1 &&
(<div className={`${PREFIX}__header__swiper-button__prev`} onClick={handlePrev}>
<Image
className={`${PREFIX}__header__swiper-button__image`}
mode="aspectFit"
src={require('@/statics/svg/arrow-left-thin.svg')}
/>
</div>)}
{videoLength > 1 &&
(<div className={`${PREFIX}__header__swiper-button__next`} onClick={handleNext}>
<Image
className={`${PREFIX}__header__swiper-button__image`}
mode="aspectFit"
src={require('@/statics/svg/arrow-right-thin.svg')}
/>
</div>)}
{editable && ( {editable && (
<div className={`${PREFIX}__header__edit-video`} onClick={handleEditVideo}> <div className={`${PREFIX}__header__edit-video`} onClick={handleEditVideo}>
编辑录屏 编辑录屏

27
src/pages/group-v2/index.tsx
View File

@ -28,27 +28,30 @@ const CALC_LIST_PROPS: IUseListHeightProps = {
}, },
}; };
const GROUPS: GroupItem[] = [ const GROUPS: GroupItem[] = [
{ title: '【杭州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
{ title: '【上海】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
{ title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
{ title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
{ title: '【苏州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4642f90a6e3528ff' },
{ title: '【温州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
{ title: '【广州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb4b88b8abb7a7c8b' }, { title: '【广州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb4b88b8abb7a7c8b' },
{ title: '【深圳】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfe70d8736e14bb64' }, { title: '【深圳】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfe70d8736e14bb64' },
{ title: '【佛山】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfac1132df386fac8' }, { title: '【佛山】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcfac1132df386fac8' },
{ title: '【东莞】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb2b0e39026f7dddc' }, { title: '【东莞】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb2b0e39026f7dddc' },
{ title: '【杭州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc223f495e159af95e' },
{ title: '【温州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb0ea5f197a18b335' },
{ title: '【上海】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4189e68429cf07f8' },
{ title: '【厦门】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' }, { title: '【厦门】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
{ title: '【福州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc126483dedadde82b' }, { title: '【福州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc126483dedadde82b' },
{ title: '【泉州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4c8c42b1a9337aaf' }, { title: '【泉州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc4c8c42b1a9337aaf' },
{ title: '【长沙】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
{ title: '【成都】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
{ title: '【重庆】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
{ title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
{ title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
{ title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
{ title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
{ title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
{ title: '【北京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb119c94575e91262' }, { title: '【北京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcb119c94575e91262' },
{ title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' }, { title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
{ title: '【其他】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' }, { title: '【天津】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
{ title: '【长沙】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc76be8f2b3f8aa437' },
{ title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
{ title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
{ title: '【成都】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf75cefbdc62946fa' },
{ title: '【重庆】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd7008f747d545f83' },
{ title: '【昆明】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
{ title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
{ title: '【全国】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
]; ];
export default function GroupV2() { export default function GroupV2() {

3
src/statics/svg/arrow-left-thin.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M42.6991 53.573L24.1376 35.0115L42.6991 16.4499L45.174 18.9248L29.091 35.0115L45.174 51.0982L42.6991 53.573Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 237 B

3
src/statics/svg/arrow-right-thin.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.3009 16.427L45.8625 34.9885L27.3009 53.5501L24.8261 51.0752L40.909 34.9885L24.8261 18.9018L27.3009 16.427Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 239 B