feat: dev click, group list, swiper button
This commit is contained in:
eleanor.mao
parent
c26c1c92fe
commit
f86b4481d8
@ -1,4 +1,4 @@
|
||||
import { BaseEventOrig, Image, Swiper, SwiperItem, SwiperProps } from "@tarojs/components";
|
||||
import { BaseEventOrig, Image, Swiper, SwiperItem, SwiperProps } from '@tarojs/components';
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
import classNames from 'classnames';
|
||||
@ -138,28 +138,24 @@ export default function ProfileViewFragment(props: IProps) {
|
||||
}, []);
|
||||
|
||||
const videoLength = videos.length ? videos.length : 0;
|
||||
const showSwiperButton = videoLength > 1 && isDesktop;
|
||||
|
||||
const handleChange = useCallback((e: BaseEventOrig<onChangeEventDetail>)=> {
|
||||
setCoverIndex(e.detail.current)
|
||||
}, [])
|
||||
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]);
|
||||
setCoverIndex(coverIndex === videoLength - 1 ? 0 : coverIndex + 1);
|
||||
}, [coverIndex, videoLength]);
|
||||
|
||||
return (
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__header`}>
|
||||
<Swiper
|
||||
className={`${PREFIX}__header__swiper`}
|
||||
current={coverIndex}
|
||||
onChange={handleChange}
|
||||
circular
|
||||
>
|
||||
<Swiper className={`${PREFIX}__header__swiper`} current={coverIndex} onChange={handleChange} circular>
|
||||
{videos.map((cover, index) => (
|
||||
<SwiperItem key={cover.coverUrl}>
|
||||
<div className={`${PREFIX}__header__swiper-item`}>
|
||||
@ -181,22 +177,24 @@ export default function ProfileViewFragment(props: IProps) {
|
||||
</SwiperItem>
|
||||
))}
|
||||
</Swiper>
|
||||
{videoLength > 1 &&
|
||||
(<div className={`${PREFIX}__header__swiper-button__prev`} onClick={handlePrev}>
|
||||
{showSwiperButton && (
|
||||
<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}>
|
||||
</div>
|
||||
)}
|
||||
{showSwiperButton && (
|
||||
<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>)}
|
||||
</div>
|
||||
)}
|
||||
{editable && (
|
||||
<div className={`${PREFIX}__header__edit-video`} onClick={handleEditVideo}>
|
||||
编辑录屏
|
||||
@ -227,7 +225,11 @@ export default function ProfileViewFragment(props: IProps) {
|
||||
{dataGroup.map((data, index: number) => (
|
||||
<div className={`${PREFIX}__info-group`} key={data.type}>
|
||||
<div className={`${PREFIX}__info-group__header`}>
|
||||
{index ? (
|
||||
<div className={`${PREFIX}__info-group__header__title`}>{data.title}</div>
|
||||
) : (
|
||||
<DevDiv className={`${PREFIX}__info-group__header__title`} OnDev={onDev}>{data.title}</DevDiv>
|
||||
)}
|
||||
{editable && (
|
||||
<div className={`${PREFIX}__info-group__header__edit`} onClick={() => handleEditGroupItem(data.type)}>
|
||||
编辑
|
||||
|
||||
@ -29,28 +29,28 @@ const CALC_LIST_PROPS: IUseListHeightProps = {
|
||||
};
|
||||
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/kfcfe70d8736e14bb64' },
|
||||
{ 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/kfc2007a895cb48464b' },
|
||||
{ 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/kfcb119c94575e91262' },
|
||||
{ title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
|
||||
{ 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/kfc4189e68429cf07f8' },
|
||||
{ title: '【郑州】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcd1c53b7bf8ecdb97' },
|
||||
{ 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/kfcf2aebcbf3d46d9cd' },
|
||||
{ title: '【武汉】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc047c94f8c709b395' },
|
||||
{ title: '【厦门】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc2007a895cb48464b' },
|
||||
{ title: '【西安】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc34768971b7354220' },
|
||||
{ title: '【合肥】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfc41c9785cc2035277' },
|
||||
{ title: '【南京】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc6dc8d0a9692b70e' },
|
||||
{ title: '【青岛】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfce8d7a68190f6a1d2' },
|
||||
{ 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/kfc4642f90a6e3528ff' },
|
||||
{ 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/kfcb0ea5f197a18b335' },
|
||||
{ title: '【天津】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcda46c23dade6f6a3' },
|
||||
{ title: '【昆明】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcf2aebcbf3d46d9cd' },
|
||||
{ title: '【全国】', serviceUrl: 'https://work.weixin.qq.com/kfid/kfcc60ac7b6420787a8' },
|
||||
];
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ export default function UserInfo() {
|
||||
const userInfo = useUserInfo();
|
||||
const nameRef = useRef(userInfo.nickName);
|
||||
|
||||
const handleChooseAvatar = useCallback(async (e: BaseEventOrig) => {
|
||||
const handleChooseAvatar = useCallback(async () => {
|
||||
// const { avatarUrl } = e.detail;
|
||||
// log('handleChooseAvatar', avatarUrl, e.detail);
|
||||
// const { url } = await uploadVideo(avatarUrl, 'image', commonUploadProgress, 'user-avatar');
|
||||
@ -32,8 +32,8 @@ export default function UserInfo() {
|
||||
log('handleChooseAvatar', tempFiles[0]);
|
||||
const { url } = await uploadVideo(tempFiles[0].tempFilePath, 'image', commonUploadProgress, 'user-avatar');
|
||||
url && updateUserInfo({ avatarUrl: url });
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleInput = useCallback((e: BaseEventOrig<InputProps.inputValueEventDetail>) => {
|
||||
@ -55,7 +55,7 @@ export default function UserInfo() {
|
||||
<div className={PREFIX}>
|
||||
<Cell className={`${PREFIX}__avatar-cell`} title="头像" align="center" isLink>
|
||||
<Image
|
||||
mode="aspectFit"
|
||||
mode="aspectFill"
|
||||
className={`${PREFIX}__avatar`}
|
||||
src={userInfo.avatarUrl || require('@/statics/png/default_avatar.png')}
|
||||
/>
|
||||
|
||||
@ -47,7 +47,7 @@ export default function User() {
|
||||
<div className={PREFIX}>
|
||||
<div className={`${PREFIX}__header`}>
|
||||
<Image
|
||||
mode="aspectFit"
|
||||
mode="aspectFill"
|
||||
className={`${PREFIX}__header__avatar`}
|
||||
src={userInfo.avatarUrl || require('@/statics/png/default_avatar.png')}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user